/* Chocolaterie Fleur — lege winkelwagen (cart-empty.php).
   1:1 op de LIVE-site (chocolateriefleur.sphdev.nl/winkelwagen, lege staat):
     1. Gecentreerde lege-staat (roze serif-kop + subtekst + roze knop).
     2. Roze full-bleed cross-sell band met 4 productkaarten.
     3. Het gedeelde Google-reviews-blok (eigen styling elders).
   Strikt gescoped onder body.woocommerce-cart / .fleur-cart-empty — geen globale
   selectors. Tokens (--fleur-*) komen uit fonts.css.

   NB: alleen dit bestand; checkout.css is met rust gelaten. */

/* =========================================================
   0. De lege cart vult de hele breedte (page.php beperkt content niet meer
      omdat checkout.css de .fleur-page__content-breedte al opheft op de cart).
   ========================================================= */
body.woocommerce-cart .fleur-cart-empty {
	color: var(--fleur-aubergine);
}

/* =========================================================
   1. Gecentreerde lege-staat
   ========================================================= */
body.woocommerce-cart .fleur-cart-empty__hero {
	text-align: center;
	max-width: 720px;
	margin: clamp(48px, 9vw, 120px) auto clamp(56px, 8vw, 96px);
	padding: 0 16px;
}
body.woocommerce-cart .fleur-cart-empty__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(34px, 4.4vw, 50px);
	line-height: 1.05;
	/* Bewust zachtroze (#f6bddd) i.p.v. het dieproze accent — op verzoek van de
	   klant; niet "consistent" terugzetten naar var(--fleur-pink). */
	color: var(--fleur-pink-soft);
	margin: 0 0 18px;
}
body.woocommerce-cart .fleur-cart-empty__text {
	font-family: var(--fleur-font-sans);
	font-weight: 400;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.5;
	color: var(--fleur-aubergine);
	margin: 0 0 32px;
}

/* De woocommerce_cart_is_empty-hook blijft vuren (andere integraties), maar de
   standaard WC-melding ("Je winkelwagen is momenteel leeg.") tonen we niet —
   onze eigen kop/subtekst vervangt die. Verbergen i.p.v. verwijderen zodat de
   hook intact blijft. */
body.woocommerce-cart .fleur-cart-empty__hero .cart-empty.woocommerce-info {
	display: none;
}

/* Zachtroze knop "VERDER WINKELEN" — zachtroze vlak + wit label, uppercase, pill. */
body.woocommerce-cart .fleur-cart-empty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fleur-pink-soft);
	color: #fff;
	font-family: var(--fleur-font-sans);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	border: 0;
	border-radius: 100px;
	padding: 18px 40px;
	transition: filter .15s ease, transform .15s ease;
}
body.woocommerce-cart .fleur-cart-empty__btn:hover,
body.woocommerce-cart .fleur-cart-empty__btn:focus {
	color: #fff;
	filter: brightness(1.02);
	transform: translateY(-1px);
}

/* =========================================================
   2. Cross-sell band "Voeg nog snel wat extra lekkers toe" — full-bleed roze
   ========================================================= */
body.woocommerce-cart .fleur-cart-xsell {
	position: relative;
	padding: 0 0 clamp(44px, 5.5vw, 70px);
	/* Breekt uit de .sellabees-container zodat de band schermbreed is.
	   overflow-x:clip op .site-main (checkout.css) vangt de scrollbar-breedte op. */
	margin-inline: calc(50% - 50vw);
}
/* Figma 520:5142/5197: de roze band is een STROOK achter de kop + bovenkant van
   de kaarten (±316px hoog), niet het hele blok. De onderkant van de kaarten +
   de titels/prijzen staan op de crème pagina-achtergrond. */
body.woocommerce-cart .fleur-cart-xsell::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 316px;
	background: var(--fleur-pink-soft);
	z-index: 0;
}
body.woocommerce-cart .fleur-cart-xsell__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: clamp(36px, 4vw, 48px);
}
body.woocommerce-cart .fleur-cart-xsell__heading {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: clamp(26px, 3.2vw, 36px);
	line-height: 1.2;
	color: var(--fleur-cream); /* Figma 520:5198: crème op de roze band */
	margin: 0 0 clamp(28px, 3vw, 44px); /* iets meer lucht → band dekt ~56% v/d kaart (Figma) */
}

/* ── Cross-sell productkaart ───────────────────────────────────────────────
   KRITISCH: de [woocommerce_cart]-shortcode wikkelt de inhoud in een
   `.woocommerce`-div, dus WooCommerce' EIGEN regels `.woocommerce ul.products
   li.product …` (specificiteit 0,4,2) GELDEN hier wél en overschreven onze
   kaart-styling: knop `display:inline-block` (→ icoon linksboven i.p.v.
   gecentreerd) en titel `padding:.5em 0` (→ te hoog blok, knop scheef). Daarom
   scopen we ALLE kaart-overrides met `ul.products li.product` erbij → (0,5,3),
   wat WC verslaat. (shop.css `body.woocommerce …` mist hier sowieso: de body
   heeft geen kale `woocommerce`-class.) 1:1 met Figma 520:5199-5219. */

/* Afbeelding: vaste 299×325-verhouding, ronde hoek-clip, cover. */
body.woocommerce-cart .fleur-cart-xsell ul.products li.product .fleur-card__media {
	display: block;
	aspect-ratio: 299 / 325;
	overflow: hidden;
	border-radius: 5px;
	margin: 0 0 12px;
}
body.woocommerce-cart .fleur-cart-xsell ul.products li.product .fleur-card__media a {
	display: block;
	width: 100%;
	height: 100%;
}
body.woocommerce-cart .fleur-cart-xsell ul.products li.product .fleur-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
	display: block;
}

/* De productloop levert <ul class="products"> met .fleur-card-li's. shop.css
   stijlt de kaart zelf al (op body.woocommerce), maar de grid-layout daar hangt
   aan .fleur-shop__main — die hebben we hier niet, dus de grid hier zelf zetten. */
body.woocommerce-cart .fleur-cart-xsell ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.woocommerce-cart .fleur-cart-xsell ul.products::before,
body.woocommerce-cart .fleur-cart-xsell ul.products::after {
	content: none;
	display: none;
}
/* WC kan width/float op de li zetten; onze grid wint. */
body.woocommerce-cart .fleur-cart-xsell ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

/* De kaart-body (titel/prijs links, knop rechts) is in shop.css gescopet op
   `body.woocommerce` — maar de winkelwagen krijgt ALLEEN `woocommerce-cart`
   (geen kale `woocommerce`-class), dus die flex-regel miste hier en de knop
   viel ónder de tekst i.p.v. ernaast. Hier expliciet voor de cart zetten. */
body.woocommerce-cart .fleur-cart-xsell ul.products li.product .fleur-card__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
body.woocommerce-cart .fleur-cart-xsell ul.products li.product .fleur-card__info {
	min-width: 0;
	flex: 1 1 auto;
}

/* Kaart-titel + prijs zwart (Figma 520:5211/5207 = text-black; shop.css zet ze
   aubergine, maar die regels missen hier — zie body-flex hierboven). De marge
   moet 0 0 4px zijn (shop.css) — anders erft de <h2> de `.fleur-page__content h2`
   marge en staat het titel/prijs-blok scheef t.o.v. de knop. */
body.woocommerce-cart .fleur-cart-xsell ul.products li.product .woocommerce-loop-product__title {
	color: #000;
	margin: 0 0 4px;
	padding: 0;
	line-height: 1.25;
}
body.woocommerce-cart .fleur-cart-xsell ul.products li.product .price {
	color: #000;
	margin: 0;
	padding: 0;
	line-height: 1.3;
}

/* Winkelwagen-knopje: roze (pink-soft) met WIT icoontje (Figma 520:5215/5219).
   Op de winkelwagen kaapt WooCommerce' eigen `.woocommerce a.button` (grijs
   #ebe9eb, gelijke specificiteit, later geladen) de knop — vandaar dat 'ie grijs
   werd. Deze selector (0,3,1) wint van zowel WC als shop.css. */
body.woocommerce-cart .fleur-cart-xsell ul.products li.product .fleur-card__add {
	/* WC `.woocommerce ul.products li.product .button` forceert display:inline-block
	   (→ icoon linksboven) én margin-top:1em (→ knop ~16px omlaag, flex-body te hoog,
	   knop 8px scheef t.o.v. titel/prijs). Deze (0,5,3) + margin:0 verslaat WC en
	   lijnt de knop exact uit zoals op /bonbons/ (qa-bonbons zet óók margin:0). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	background: var(--fleur-pink-soft);
	color: #fff;
	border-radius: 5px;
	width: 42px;
	height: 41px;
	margin: 0;
	padding: 0;
}
body.woocommerce-cart .fleur-cart-xsell ul.products li.product .fleur-card__add .fleur-card__icon {
	width: 19px;
	height: 16px;
	display: block;
}
body.woocommerce-cart .fleur-cart-xsell ul.products li.product .fleur-card__add:hover {
	background: var(--fleur-pink);
	color: #fff;
	transform: translateY(-1px);
}

/* =========================================================
   3. Responsive
   ========================================================= */
@media (max-width: 1024px) {
	body.woocommerce-cart .fleur-cart-xsell ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* ── Mobiel (staand tablet + telefoon, ≤981px) ───────────────────────────────
   De grote layout-omschakelingen (xsell 2-koloms) staan al in het 1024-blok
   hierboven en gelden dus óók ≤981px. Hier alleen mobiel-specifieke verfijningen:
   lucht rond de lege-staat en de cross-sell band iets terugbrengen zodat de
   secties op een telefoon niet onnodig hoog worden. Uitsluitend binnen dit
   @media-blok — desktop (≥982px) blijft ongewijzigd. */
@media (max-width: 981px) {
	/* Lege winkelwagen: kop kleiner, minder verticale ruimte. */
	body.woocommerce-cart .fleur-cart-empty__hero {
		margin: clamp(40px, 8vw, 72px) auto clamp(40px, 7vw, 64px);
	}
	body.woocommerce-cart .fleur-cart-empty__title {
		font-size: clamp(28px, 7vw, 40px);
	}

	/* (Minder witruimte onder de kop "Winkelwagen" gebeurt in checkout.css ≤981 —
	   daar moet ook de mobiele cart-grid `gap:32px` verslagen worden.) */

	/* Cross-sell band: de roze strook + bovenmarge iets compacter op mobiel. */
	body.woocommerce-cart .fleur-cart-xsell::before { height: 260px; }
	body.woocommerce-cart .fleur-cart-xsell__inner { padding-top: 32px; }
	body.woocommerce-cart .fleur-cart-xsell__heading { margin-bottom: 24px; }
	/* Minder grijze witruimte vóór het reviews-blok (was clamp-min 44px). */
	body.woocommerce-cart .fleur-cart-xsell { padding-bottom: 16px; }

	/* ── Cross-sell = toppers-style slider op mobiel ──────────────────────────
	   theme.js initialiseert .fleur-cart-xsell .products als een oneindige
	   auto-slider (2-per-view, dots, swipe) en wikkelt de <ul> in
	   .fleur-islider-viewport (globale clip-CSS). Hier zetten we de grid om naar
	   een horizontale flex-rij zodat de kaarten naast elkaar staan en de slider
	   ze kan verschuiven. Specificiteit (0,3,1) = gelijk aan de desktop/1024-grid-
	   regel maar later in de bron → wint. De ::before/::after (grid-clearfix uit
	   WooCommerce) blijven verborgen (staan al op display:none hierboven).
	   Uitsluitend ≤981px; desktop (≥982px) blijft een grid. */
	body.woocommerce-cart .fleur-cart-xsell ul.products {
		display: flex;
		flex-wrap: nowrap;
		gap: 16px;
		will-change: transform;
	}
	body.woocommerce-cart .fleur-cart-xsell ul.products > li.product {
		flex: 0 0 calc((100% - 16px) / 2);
		min-width: 0;
		max-width: none;
		margin: 0 !important;
	}
}

@media (max-width: 560px) {
	body.woocommerce-cart .fleur-cart-xsell ul.products {
		grid-template-columns: 1fr;
	}
	body.woocommerce-cart .fleur-cart-empty__btn {
		width: 100%;
		max-width: 320px;
	}
	/* Eén kolom → de roze strook hoeft maar één kaart-bovenkant te dekken. */
	body.woocommerce-cart .fleur-cart-xsell::before { height: 300px; }
}

/* ── Landscape tablet (982–1219px) ───────────────────────────────────────────
   Spiegelt de desktop-layout met iets krappere spacing. Het max-width:1024-blok
   hierboven zet de cross-sell op 2 koloms; op landscape tablet passen de kaarten
   (er zijn er precies 4) nog netjes op één rij binnen de 1280-container
   (.fleur-cart-xsell__inner heeft .sellabees-container), dus we houden 4 koloms
   voor het HELE bereik zodat er geen sprong bij 1024px ontstaat. Later in de bron
   dan het 1024-blok → wint voor 982–1024 (gelijke specificiteit). Uitsluitend
   binnen dit @media-blok — desktop (≥1220px) en mobiel (≤981px) blijven ongemoeid. */
@media (min-width: 982px) and (max-width: 1219px) {
	/* 4 koloms behouden (overschrijft het 2-koloms 1024-blok voor 982–1024). */
	body.woocommerce-cart .fleur-cart-xsell ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 26px 18px;
	}
	/* Lege winkelwagen: minder verticale lucht dan desktop (was 9vw/8vw). */
	body.woocommerce-cart .fleur-cart-empty__hero {
		margin: clamp(40px, 6vw, 72px) auto clamp(40px, 5vw, 64px);
	}
}