/**
 * FoodieShop — global.
 *
 * Loaded on EVERY page, so anything here must be safe next to Elementor and
 * WooCommerce. It carries the design tokens, the shared card/grid/button
 * components and the sticky site header.
 *
 * Page-specific rules live in foodieshop.css (recipes and blog) and
 * foodieshop-shop.css (WooCommerce), both of which depend on this file.
 */

/* -------------------------------------------------------------------------
   Sticky site header

   The header is built in Elementor/UAE, and a plugin sets position:relative on
   it, so position must be forced here. Sticky fails silently if any ancestor
   has overflow other than visible — check that first if it stops working.
   ---------------------------------------------------------------------- */

header#masthead {
	position: sticky !important;
	top: 0 !important;
	z-index: 100 !important;
}

/* Only has a visible effect when the header background is translucent. */
header#masthead {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* --- design tokens --- */
:root {
	--fs-white: #ffffff;
	--fs-lilac: #eac0f3;
	--fs-cream: #f5efe7;
	--fs-sand: #d9bf9d;
	--fs-ink: #3a3230;
	--fs-ink-soft: #6b605b;
	--fs-line: rgba(217, 191, 157, 0.4);
	--fs-radius: 22px;
	--fs-radius-sm: 14px;
	--fs-maxw: 1140px;
	--fs-measure: 880px;
	--fs-shadow: 0 26px 40px -24px rgba(58, 50, 48, 0.4);
}

/* --- typography scope --- */
/*
 * Typography context. .fs-main owns a whole page; .fs-embed is the lighter
 * scope used by the [foodieshop_recipes] shortcode, so cards dropped into an
 * Elementor page inherit the same type and colour without also inheriting the
 * page background and padding.
 */
.fs-main,
.fs-embed {
	color: var(--fs-ink);
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

.comments-area a, .page-content a{
	text-decoration: none;
}

/* --- element defaults, eyebrow, buttons --- */
/*
 * Element defaults.
 *
 * Wrapped in :where() so they weigh (0,0,1) — the same as the theme reset's
 * bare `h1` and `p` rules, which they beat only because this file loads later.
 * Every component class below is (0,1,0) and therefore wins outright, so
 * .fs-recipe-lead, .fs-step__text and friends can set their own margins and
 * colours without !important.
 *
 * Do not write these as `.fs-main p` — that is (0,1,1) and silently overrides
 * every single-class rule in this file.
 */
:where(.fs-main, .fs-embed) h1,
:where(.fs-main, .fs-embed) h2,
:where(.fs-main, .fs-embed) h3 {
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--fs-ink);
	margin: 0;
}

:where(.fs-main, .fs-embed) p {
	color: var(--fs-ink-soft);
	margin: 0;
}

.fs-eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--fs-sand);
	margin: 0 0 14px;
}

.fs-button {
	display: inline-block;
	background: var(--fs-ink);
	color: var(--fs-white);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	padding: 16px 34px;
	border-radius: 999px;
	border: 2px solid var(--fs-ink);
	text-transform: uppercase;
	transition: transform 0.25s, background 0.25s;
}

.fs-button:hover {
	transform: translateY(-3px);
	background: #000;
	color: var(--fs-white);
}

.fs-button--ghost {
	background: transparent;
	color: var(--fs-ink);
}

.fs-button--ghost:hover {
	background: var(--fs-ink);
	color: var(--fs-white);
}

.fs-button--lilac {
	background: var(--fs-lilac);
	border-color: var(--fs-lilac);
	color: var(--fs-ink);
}

.fs-button--lilac:hover {
	background: #e0a8ee;
	border-color: #e0a8ee;
	color: var(--fs-ink);
}

/* --- grid, embed section, cards --- */
/* -------------------------------------------------------------------------
   Card grid
   ---------------------------------------------------------------------- */

.fs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 600px) {
	.fs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.fs-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Column count for the shortcode grid. */
	.fs-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.fs-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------------------------------------------------------------
   Shortcode embed (recipes inside an Elementor page)

   Section metrics mirror the homepage: 84px vertical rhythm, a 1140px frame,
   and a centred head capped at 700px with 54px beneath it.
   ---------------------------------------------------------------------- */

.fs-embed--padded {
	padding: 84px 0;
}

.fs-embed--cream {
	background: var(--fs-cream);
}

.fs-embed--white {
	background: var(--fs-white);
}

/* Only a standalone section frames its own content; inside an Elementor
   container the container already provides the width and padding. */
.fs-embed--section .fs-embed__inner {
	max-width: var(--fs-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

.fs-embed__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 54px;
}

.fs-embed__head .fs-eyebrow {
	display: block;
	margin-bottom: 14px;
}

.fs-embed__title {
	font-size: clamp(1.6rem, 3.6vw, 2.6rem);
	font-weight: 700;
}

.fs-embed__subtitle {
	margin-top: 16px;
	font-size: 1.02rem;
}

.fs-embed__action {
	text-align: center;
	margin-top: 48px;
}

@media (max-width: 782px) {
	.fs-embed--padded {
		padding: 56px 0;
	}

	.fs-embed__head {
		margin-bottom: 36px;
	}
}

.fs-card {
	background: var(--fs-white);
	border: 1px solid var(--fs-line);
	border-radius: var(--fs-radius);
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
}

.fs-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--fs-shadow);
}

.fs-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.fs-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(150deg, var(--fs-cream), var(--fs-sand));
}

.fs-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fs-card__image--empty {
	background: linear-gradient(150deg, var(--fs-lilac), var(--fs-sand));
}

.fs-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--fs-ink);
}

.fs-card__body {
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.fs-card__title {
	font-size: 1.12rem;
	font-weight: 700;
}

.fs-card__excerpt {
	font-size: 0.92rem;
	margin: 0;
}

.fs-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: auto;
	padding-top: 12px;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--fs-sand);
}

.fs-card__meta-item + .fs-card__meta-item::before {
	content: "·";
	margin-right: 16px;
	color: var(--fs-line);
}

.fs-empty {
	text-align: center;
	padding: 56px 0;
	color: var(--fs-ink-soft);
}

/* Product cards: the footer sits outside the card link, so it needs its own
   padding rather than inheriting the body's. */
.fs-card--product .fs-card__body {
	padding-bottom: 16px;
}

.fs-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 0 24px 26px;
	margin-top: auto;
}

.fs-card__price {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--fs-ink);
}

.fs-card__price del {
	color: var(--fs-ink-soft);
	font-weight: 400;
	font-size: 0.92rem;
	opacity: 0.7;
	margin-right: 6px;
}

.fs-card__price ins {
	background: none;
	text-decoration: none;
}

.fs-card__badge--sale {
	background: var(--fs-lilac);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Woo's loop button inside our card. */
.fs-card__footer .button {
	background: var(--fs-ink);
	color: var(--fs-white);
	border: 2px solid var(--fs-ink);
	border-radius: 999px;
	padding: 11px 22px;
	font-family: inherit;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	transition: background 0.25s, transform 0.25s;
}

.fs-card__footer .button:hover {
	background: #000;
	border-color: #000;
	color: var(--fs-white);
	transform: translateY(-2px);
}

.fs-card__footer .added_to_cart {
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--fs-sand);
	text-decoration: none;
	border-bottom: 1px solid var(--fs-line);
}

/* A product card is a flex column so the footer can be pinned to the bottom. */
.fs-card--product {
	display: flex;
	flex-direction: column;
}

.fs-card--product .fs-card__link {
	flex: 1;
}


.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product{
	width:100%
}


/* CART STYLING */
.wc-block-cart__submit-container a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button {
    background: var(--fs-ink);
}

.wc-block-cart__submit-container a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button:hover {
    color: white;
}

.wp-block-woocommerce-cart.alignwide {
    margin-inline: 0px;
}