/**
 * Fase A — fkcart side-cart V2-skin (CSS-only, géén functionele wijzigingen).
 *
 * Laag 1: fkcart zet zijn kleuren als inline :root-custom properties
 * (cart-for-woocommerce/includes/data.php). Herdefinitie op #fkcart-modal
 * wint door inheritance-nabijheid voor de hele drawer-subtree.
 * Laag 2: component-regels in Atelier-tokens.
 *
 * Kit-proof: .elementor-kit-4 overridet op source-order o.a. link-kleuren
 * (a → rgb(0,0,255), specificiteit 0,1,1 verslaat fkcart's enkele classes)
 * — daarom link/button-kleuren expliciet + !important.
 * Elementen buiten het modal (header-cart-icoon) worden hier NIET aangeraakt;
 * die skint header.css al.
 *
 * Rollback: flag 'sidecart' uit (functions.php) → sheet laadt niet en fkcart
 * valt terug op zijn eigen instellingen. NB: het CTA-label (Verder→Afrekenen)
 * is een DB-instelling en keert niet terug met de flag (backup in docs/).
 */

#fkcart-modal {
	/* Laag 1 — fkcart-vars → Atelier */
	--fkcart-primary-bg-color: var(--gz-pine);
	--fkcart-primary-font-color: var(--gz-ivory);
	--fkcart-primary-text-color: var(--gz-ink);
	--fkcart-secondary-text-color: var(--gz-muted);
	--fkcart-strike-through-price-text-color: var(--gz-muted);
	--fkcart-saving-text-price-color: var(--gz-moss);
	--fkcart-coupon-text-price-color: var(--gz-moss);
	--fkcart-accent-color: var(--gz-amber);
	--fkcart-border-color: var(--gz-line);
	--fkcart-bg-color: var(--gz-paper);
	--fkcart-panel-color: #ffffff;
	--fkcart-border-radius: 14px;
	--fkcart-progressbar-active-color: var(--gz-pine);
	--fkcart-progress-bar-active-color: var(--gz-pine);
	--fkcart-progress-bar-active-icon-color: var(--gz-ivory);
	--fkcart-progress-bar-bg-color-active-icon: var(--gz-pine);
	--fkcart-progress-bar-icon-color: var(--gz-muted);
	--fkcart-reward-color: var(--gz-amber);
	--fkcart-success-color: var(--gz-moss);
	--fkcart-success-bg-color: var(--gz-moss-soft);
	--fkcart-toggle-bg-color: var(--gz-pine);

	font-family: var(--gz-sans) !important;
	color: var(--gz-body);
}

/* ---------- Drawer-kader ---------- */

#fkcart-modal .fkcart-preview-ui {
	box-shadow: -12px 0 44px rgba(23, 33, 27, .12);
}

#fkcart-modal .fkcart-modal-backdrop {
	background-color: #17211B !important;
	opacity: .42 !important;
}

/* ---------- Kop ---------- */

#fkcart-modal .fkcart-slider-heading {
	border-bottom: 1px solid var(--gz-line-soft);
	padding-top: 18px;
	padding-bottom: 14px;
}

#fkcart-modal .fkcart-title {
	font-family: var(--gz-disp) !important;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.25;
	color: var(--gz-ink) !important;
}

#fkcart-modal .fkcart-title span {
	font-family: var(--gz-sans) !important;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--gz-muted);
	letter-spacing: 0;
}

#fkcart-modal .fkcart-modal-close {
	width: 36px;
	height: 36px;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--gz-line);
	background: #ffffff;
	color: var(--gz-pine) !important;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

#fkcart-modal .fkcart-modal-close:hover {
	background: var(--gz-pine);
	border-color: var(--gz-pine);
	color: var(--gz-ivory) !important;
}

/* ---------- Itemkaarten (compact: korte naam, prominente thumb) ---------- */

#fkcart-modal .fkcart--item {
	background: #ffffff;
	border: 1px solid var(--gz-line-soft);
	border-radius: var(--gz-r-md);
	padding: 10px 12px;
	gap: 12px;
	margin-bottom: 10px !important;
}

#fkcart-modal .fkcart-item-wrap {
	padding-top: 14px;
}

/* Thumb prominenter (user-review 7 sep): beeld leidt, niet de titel.
   !important noodzakelijk: fkcart zet mobiele/ajax-varianten met eigen
   regels/attrs; quick-view-shimmer valt buiten deze scope. */
#fkcart-modal .fkcart-thumb-wrap {
	flex: 0 0 80px !important;
	width: 80px !important;
}

#fkcart-modal .fkcart-thumb-wrap .fkcart-image-wrapper {
	width: 100% !important;
}

#fkcart-modal .fkcart-image {
	width: 80px !important;
	height: 80px !important;
	object-fit: cover;
	border-radius: var(--gz-r-sm);
	background: var(--gz-soft);
}

#fkcart-modal a.fkcart-item-title {
	font-family: var(--gz-sans) !important;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gz-ink) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#fkcart-modal a.fkcart-item-title:hover {
	color: var(--gz-pine) !important;
}

/* "Set: Compleet" — bundel-context op het moederproduct als subtiel chipje */
#fkcart-modal .fkcart-attr-wrap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 5px;
	padding: 2px 9px;
	background: var(--gz-moss-soft);
	border-radius: 999px;
}

#fkcart-modal .fkcart-attr-key {
	color: var(--gz-muted);
	font-size: 11px;
}

#fkcart-modal .fkcart-attr-value {
	color: var(--gz-pine);
	font-weight: 600;
	font-size: 11px;
}

#fkcart-modal .fkcart-item-price del {
	color: var(--gz-muted) !important;
	font-size: 12.5px;
	opacity: .85;
}

#fkcart-modal .fkcart-item-price ins {
	color: var(--gz-pine) !important;
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
}

/* Prijs + besparing rechts uitgelijnd als één kolom (geen zwevend restje) */
#fkcart-modal .fkcart-item-misc {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}

#fkcart-modal .fkcart-discounted-text {
	color: var(--gz-moss);
	font-size: 11.5px;
}

/* Verwijderknop — naakt icoontje, geen badge-chrome (user-review 7 sep) */
#fkcart-modal .fkcart-remove-item {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	top: -6px;
	left: -6px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--gz-muted) !important;
	transition: color .16s ease;
}

#fkcart-modal .fkcart-remove-item:hover {
	color: #B00C0C !important;
}

/* ---------- Qty-steppers (alléén losse producten; bundelitems
   krijgen géén steppers meer van de qty-guard mu-plugin) ---------- */

#fkcart-modal .fkcart-quantity-selector {
	border-radius: 999px;
	background: #ffffff;
	overflow: hidden;
}

#fkcart-modal .fkcart-quantity-button {
	color: var(--gz-pine) !important;
	font-weight: 600;
	transition: background .16s ease;
}

#fkcart-modal .fkcart-quantity-button:hover {
	background: var(--gz-moss-soft);
}

#fkcart-modal .fkcart-quantity__input {
	font-weight: 600;
	color: var(--gz-ink);
}

/* ---------- Subtotaal + CTA ---------- */

/* Subtotaal als witte kaart, zelfde inset als de itemkaarten (fkcart zet hem
   standaard rand-naar-rand + 16px verticale padding). CTA-pil staat bewust
   plat op het papier. */
#fkcart-modal .fkcart-order-summary {
	background: #ffffff;
	border: 1px solid var(--gz-line-soft);
	border-radius: var(--gz-r-md);
	margin: 0 16px 10px !important;
	padding-top: 9px !important;
	padding-bottom: 9px !important;
}

#fkcart-modal .fkcart-summary-line-item {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#fkcart-modal .fkcart-checkout-wrap:not(.fkwcs_paylater_messaging) {
	background: transparent !important;
	border: 0 !important;
}

#fkcart-modal a#fkcart-checkout-button {
	margin-top: 12px;
}

#fkcart-modal .fkcart-summary-text,
#fkcart-modal .fkcart-summary-amount {
	font-family: var(--gz-sans) !important;
	font-size: 14px;
	font-weight: 600;
	color: var(--gz-ink) !important;
}

#fkcart-modal .fkcart-summary-amount {
	font-size: 15px;
}

/* Bundelbesparing-regel (theme order-summary-override): de éne, correcte
   saving op bundle-niveau — tier-componentregels dragen geen per-regel
   "bespaar X%"-badge meer (functions.php fkcart_item_hide_you_saved_text). */
#fkcart-modal .gzv-bundle-saving {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 2px !important;
}

#fkcart-modal .gzv-bundle-saving .fkcart-summary-text,
#fkcart-modal .gzv-bundle-saving .fkcart-summary-amount {
	color: var(--gz-moss) !important;
}

#fkcart-modal .gzv-bundle-saving .fkcart-summary-amount {
	font-weight: 700;
}

/* Reassurance: dynamische gratis-verzendingsstatus + retourregel (functions.php
   pre_option-filter levert de markup; wp_kses_post laat span/i door).
   Owner-voorkeur 25 sep: beide regels NAAST ELKAAR op één regel, als blok
   gecentreerd; lange "Nog X"-variant wrapt netjes naar een tweede regel.
   Slot = volle rij-breedte (fkcart legt summary-items anders als shrink-to-
   fit links in de rij). Bedrag nooit breken midden in het bedrag. */
#fkcart-modal .fkcart-shipping-tax-calculation-text {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	flex: 1 1 100%;
	width: 100%;
	margin-top: 8px;
}

#fkcart-modal .fkcart-shipping-tax-calculation-text .gz-ship-line {
	display: block;
	text-align: center !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.6;
	color: var(--gz-ink) !important;
}

#fkcart-modal .fkcart-shipping-tax-calculation-text .gz-ship-line .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Bedragen in itemkaarten nooit breken op de duizendtal-spatie
   ("1" / "063,94 kr" — eigenaar-melding 25 sep): Woo-formatting geeft een
   breekbare spatie als thousands separator; de kaart-prijscel is smaller
   dan een viercijferig bedrag. nowrap houdt het bedrag op één regel. */
#fkcart-modal .fkcart-item .woocommerce-Price-amount,
#fkcart-modal .fkcart--item .woocommerce-Price-amount {
	white-space: nowrap;
}

#fkcart-modal .fkcart-shipping-tax-calculation-text .gz-ship-check {
	font-style: normal;
	font-weight: 700;
	color: var(--gz-moss);
	margin-right: 5px;
}

#fkcart-modal .fkcart-shipping-tax-calculation-text .gz-ship-line.is-todo {
	font-weight: 400 !important;
	color: var(--gz-muted) !important;
}

#fkcart-modal .fkcart-shipping-tax-calculation-text .gz-ship-line.is-todo .woocommerce-Price-amount {
	font-weight: 600;
}

/* CTA is een <a> — Kit-link-blauw én fkcart-groen expliciet verslaan */
#fkcart-modal a#fkcart-checkout-button,
#fkcart-modal a.fkcart-shop-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 13px 24px !important;
	background: var(--gz-pine) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-family: var(--gz-sans) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	letter-spacing: .01em;
	color: var(--gz-ivory) !important;
	text-decoration: none !important;
	box-shadow: none;
	transition: background .16s ease;
}

#fkcart-modal a#fkcart-checkout-button:hover,
#fkcart-modal a.fkcart-shop-button:hover {
	background: var(--gz-pine-deep) !important;
	color: var(--gz-ivory) !important;
}

#fkcart-modal .fkcart-checkout--text {
	color: var(--gz-ivory) !important;
}

/* Stripe pay-later messaging deelt de checkout-wrap-klasse — alléén spacing */
#fkcart-modal .fkwcs_paylater_messaging {
	background: transparent !important;
	border: 0 !important;
	margin-top: 10px;
}

#fkcart-modal .fkcart-shopping-link {
	font-size: 13px;
	color: var(--gz-muted) !important;
	text-decoration: none;
}

#fkcart-modal .fkcart-shopping-link:hover {
	color: var(--gz-pine) !important;
}

/* ---------- Lege staat ---------- */

#fkcart-modal .fkcart-zero-state-title {
	font-family: var(--gz-disp) !important;
	font-size: 19px;
	font-weight: 600;
	color: var(--gz-ink) !important;
}

#fkcart-modal .fkcart-zero-state-text {
	color: var(--gz-muted);
	font-size: 14px;
}

/* ---------- Reward-bar (rendert lokaal leeg bij behaalde drempel;
   stijl staat klaar voor zodra fkcart hem toont) ---------- */

#fkcart-modal .fkcart-reward-product-wrap {
	padding: 12px 16px 0;
}

/* ---------- Upsells ("Mensen kochten ook") ----------
   Renderen alléén op live (FK-upsell-config zit niet in de lokale DB);
   9 okt herstijld na owner-melding "tekst overlappend, slordig" — de
   FK-zijkolom was 200px: titels braken in 3 regels en prijs/knop persten
   samen. Aanpak: kolom 280px desktop, verticale kaartjes (foto → titel
   clamp-2 → prijs → full-width knop). Live ontwikkeld via addStyleTag-
   preview tegen de echte widget (fkcart-upsell-preview.mjs); voor de
   prijs: FK verbergt de meta-prijs op mobiel (eigen media-query met
   !important) en toonde een duplicaat in .fkcart-item-misc — daarom
   meta-prijs expliciet display:block en misc verborgen: overal precies
   één prijs. Alles onder .fkcart-drawer-upsells = inert zonder widget. */

#fkcart-modal .fkcart-below-checkout-upsell,
#fkcart-modal .fkcart-slider-body .fkcart-slider-heading {
	font-family: var(--gz-sans) !important;
}

#fkcart-modal .fkcart-upsell-heading {
	font-family: var(--gz-disp) !important;
	font-size: 16px;
	font-weight: 600;
	color: var(--gz-ink) !important;
}

/* Kolom breder: kaarten krijgen ruimte (200 → 280px desktop; mobiel is
   de sectie gewoon volledige breedte onder de cart). BELANGRIJK: FK
   anker de kolom met left:-200px aan de main-cart (z'n originele
   breedte) — zonder anker-meename groeide de kolom 80px OVER de cart
   heen (owner-melding 9 okt). Vandaar left:-280px, uitsluitend ≥1024px:
   FK's zij-aan-zij-modus (position:fixed + anker) geldt alléén daar;
   481-1023 bleek óók gestapeld (position:relative) waar de anchor-fix
   het paneel 280px het beeld uit schoof (breedte-scan 400-1280px). */
#fkcart-modal .fkcart-drawer-upsells {
	width: 280px !important;
	flex: 0 0 280px !important;
	max-width: 280px !important;
}

@media (min-width: 1024px) {
	#fkcart-modal .fkcart-drawer-upsells {
		left: -280px !important;
	}
}

#fkcart-modal .fkcart-drawer-upsells .fkcart-drawer-wrap {
	padding: 16px 14px !important;
}

#fkcart-modal .fkcart-drawer-upsells .fkcart-drawer-heading {
	padding: 0 !important;
	margin: 0 0 10px !important;
}

/* Kaart: rustige kaart-look, verticale stap met vaste volgorde.
   Radius 14px = exact de main-cart item-cards (fkcart-panel, gemeten
   live 9 okt) — owner-consistentie-eis. */
#fkcart-modal .fkcart-drawer-upsells .fkcart--item {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	background: #fff !important;
	border: 1px solid var(--gz-line) !important;
	border-radius: 14px !important;
	padding: 10px !important;
	margin: 0 0 10px !important;
	box-shadow: none !important;
}

#fkcart-modal .fkcart-drawer-upsells .fkcart-item-info,
#fkcart-modal .fkcart-drawer-upsells .fkcart-item-meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

/* Beeld: hoogte zit op de WRAPPER (FK geeft de wrapper in sommige cart-
   states een vaste 60px — een losse image-hoogte steekt daar 58px onder
   de titel/prijs door, owner-melding 9 okt r3); de image vult de wrapper
   voor 100% zodat geen enkele FK-variant kan overlappen. Tile-wit
   (owner 9 okt slot-9: was ivoren #FAF8F3 → nu wit, ook desktop). */
#fkcart-modal .fkcart-drawer-upsells .fkcart-image-wrapper {
	width: 100% !important;
	height: 96px !important;
	margin: 0 !important;
	background: #fff !important;
	border-radius: 10px !important;
	padding: 6px !important;
	box-sizing: border-box !important;
}

/* Add/Toevoegen-knop upsell-kaarten: FK-blue default — merk pine/ivoor
   (owner 9 okt slot-9). */
#fkcart-modal .fkcart-drawer-upsells .fkcart-add-product-button {
	background: var(--gz-pine) !important;
	color: var(--gz-ivory) !important;
}

/* "Verzekerd pakket"-sectie (fkcart special add-on): FK-grijs #F5F5F5 →
   merk-paper, gelijk aan de cart-body (owner 9 okt slot). */
#fkcart-modal .fkcart-spl-addons-wrap {
	background: var(--gz-paper, #F4F1E9) !important;
}

#fkcart-modal .fkcart-drawer-upsells .fkcart-add-product-button:hover {
	background: var(--gz-pine-deep) !important;
}

#fkcart-modal .fkcart-drawer-upsells .fkcart-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	/* FK zet op het img-element zelf #F7F4EA — zichtbaar naast de foto bij
	   object-fit:contain (owner 9 okt slot-10: moet wit zijn). */
	background: #fff !important;
}

/* Titel: max 2 regels met clamp; vaste hoogte houdt kaarten gelijk. */
#fkcart-modal .fkcart-drawer-upsells .fkcart-item-title {
	font-size: 13px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
	color: var(--gz-ink) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	min-height: 2.7em !important;
	text-align: left !important;
}

/* Prijs: prominent op eigen regel — display expliciet want FK verbergt
   de meta-prijs op mobiel (eigen media-query met !important). */
#fkcart-modal .fkcart-drawer-upsells .fkcart-item-meta .fkcart-item-price {
	display: block !important;
	width: auto !important;
	height: auto !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--gz-ink) !important;
	text-align: left !important;
	line-height: 1.2 !important;
}

/* Toevoegen-knop: volledige breedte, rustig. */
#fkcart-modal .fkcart-drawer-upsells .fkcart-add-product-button {
	width: 100% !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 10px 12px !important;
	border-radius: 8px !important;
	margin: 2px 0 0 !important;
	min-height: 0 !important;
	height: auto !important;
	justify-content: center !important;
}

/* Lege meta-rij verbergen; FK's duplicaat-prijs in item-misc (mobiel)
   valt weg — precies één prijs per kaart. */
#fkcart-modal .fkcart-drawer-upsells .fkcart-item-meta-content:empty,
#fkcart-modal .fkcart-drawer-upsells .fkcart-item-misc {
	display: none !important;
}

/* Smal mobiel (owner-melding 9 okt slot): FK rekent de upsell-drawer
   ~100vw-1px breed óngeacht de 16px modal-inset en zet carousel-slides
   op vaste px-breedtes — op ≤360px-toestellen stak de kaart buiten beeld
   en leek titel/prijs/knop links afgesneden. FK's eigen breedtes (ook de
   !important-regels op de keten drawer→container→wrap) negeren bleek
   kansloos; WEL werkt breedte rechtstreeks op de carousel-slide, van
   viewport gerekend: calc(100vw - 48px) = altijd binnen beeld met marge,
   kaart vult de slide voor 100%. Items-container krijgt overflow-x voor
   het swipe-gedrag. */
@media (max-width: 480px) {
	/* Parent-structuur (owner-richting 9 okt slot — "fix op parent-niveau"):
	   FK zet min-width:100% op de drawer, wat de max-width breekt (CSS: min
	   wint van max) → sectie werd 100vw-1px breed óngeacht de modal-inset.
	   min-width:0 herstelt de width-resolutie over de hele keten. */
	#fkcart-modal .fkcart-drawer-upsells {
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart-drawer-container,
	#fkcart-modal .fkcart-drawer-upsells .fkcart-drawer-wrap {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart-drawer-wrap {
		overflow: hidden !important;
	}

	/* Slot-6 (owner 9 okt): FK schildert .fkcart-drawer-container zelf wit
	   — dat waren de vierkante hoeken buiten onze radius-14 box. Parentketen
	   transparant; alleen de wrap-box is wit. */
	#fkcart-modal .fkcart-drawer-upsells,
	#fkcart-modal .fkcart-drawer-upsells .fkcart-drawer-container {
		background: transparent !important;
	}

	/* Slot-6: FK carousel geeft .fkcart-item-wrap margin-left:-15px — de
	   kaart sprong daarmee de box uit. Slide neutraal positioneren en
	   exactly één product tonen (overflow hidden i.p.v. scrollbare peek). */
	#fkcart-modal .fkcart-drawer-upsells .fkcart-drawer-items {
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart-item-wrap {
		margin: 0 !important;
	}

	/* Owner-wens "1 product zien" + swipe-back (slot-8): het ENE item-wrap
	   is de carousel-track — die wordt een swipebare snap-carousel: elke
	   kaart precies de boxbreedte (geen peek/overlap), met de vinger naar
	   links/rechts bladeren. Vóórlopige overflow:hidden-verberging maakte
	   de overige aanbevelingen onbereikbaar (owner-melding). */
	#fkcart-modal .fkcart-drawer-upsells .fkcart-item-wrap {
		display: flex !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart-item-wrap::-webkit-scrollbar {
		display: none;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart--item {
		flex: 0 0 100% !important;
		min-width: 100% !important;
		scroll-snap-align: start !important;
	}

	/* HET HELE VAK ALS EEN AFGERONDE BOX (owner-wensen 9 okt slot-3/4):
	   .fkcart-drawer-wrap = witte doos met radius 14 (gelijk aan main-cart
	   cards), de compacte rijen zitten er mét kopje in — kaarten zelf
	   randloos met scheidingslijn. Hele compositie ~20% kleiner dan de
	   eerste compact-versie (foto 56px, typografie één maat kleiner). */
	#fkcart-modal .fkcart-drawer-upsells .fkcart-drawer-wrap {
		background: #fff !important;
		border: 1px solid var(--gz-line) !important;
		border-radius: 14px !important;
		padding: 10px 10px 10px !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		width: auto !important;
		max-width: calc(100vw - 32px) !important;
	}

	/* Owner 9 okt slot-7: vak stond direct tegen de subtotal-kaart aan —
	   ondermarge op de sectie. */
	#fkcart-modal .fkcart-drawer-upsells {
		margin-bottom: 12px !important;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart-drawer-heading {
		margin: 0 0 6px !important;
		font-size: 13px !important;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart-item-wrap {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart--item {
		flex-direction: row !important;
		align-items: center !important;
		gap: 8px !important;
		padding: 6px 10px !important;
		margin: 0 !important;
		border: none !important;
		background: transparent !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* border-top tussen rijen verwijderd op mobiel (owner 9 okt slot-7);
	   met één zichtbaar product is de scheidingslijn overbodig. */

	#fkcart-modal .fkcart-drawer-upsells .fkcart-image-wrapper {
		width: 56px !important;
		height: 56px !important;
		min-width: 56px !important;
		max-width: 56px !important;
		flex: 0 0 56px !important;
		padding: 3px !important;
		border-radius: 8px !important;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart-item-info,
	#fkcart-modal .fkcart-drawer-upsells .fkcart-item-meta {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
		gap: 2px !important;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart-item-title {
		font-size: 12px !important;
		line-height: 1.3 !important;
		min-height: 0 !important;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart-item-meta .fkcart-item-price {
		font-size: 13px !important;
	}

	#fkcart-modal .fkcart-drawer-upsells .fkcart-add-product-button {
		width: auto !important;
		align-self: flex-start !important;
		font-size: 12px !important;
		padding: 5px 11px !important;
		margin: 1px 0 0 !important;
	}

	/* Carousel-rommel (pijlen/dots/progress) heeft op één zichtbaar item
	   niets te zoeken — verborgen op mobiel; vervangen door de eigen
	   gz-fkup-ctrl-regel (zie fkcart.js). */
	#fkcart-modal .fkcart-drawer-upsells .fkcart-nav-btn,
	#fkcart-modal .fkcart-drawer-upsells .fkcart-carousel-dots,
	#fkcart-modal .fkcart-drawer-upsells .fkcart-carousel-progress {
		display: none !important;
	}

	/* Eigen navigatie-regel onder de box: ‹ dots › (fkcart.js bouwt hem
	   bij ≥2 kaarten; deze CSS toont alléén op mobiel). */
	.gz-fkup-ctrl {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		margin-top: 10px;
	}

	.gz-fkup-prev,
	.gz-fkup-next {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		border: 1px solid var(--gz-line);
		background: #fff;
		color: var(--gz-ink);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		padding: 0;
	}

	.gz-fkup-prev:hover:not(:disabled),
	.gz-fkup-next:hover:not(:disabled) {
		border-color: var(--gz-pine);
		color: var(--gz-pine);
	}

	.gz-fkup-prev:disabled,
	.gz-fkup-next:disabled {
		opacity: 0.35;
		cursor: default;
	}

	.gz-fkup-dots {
		display: flex;
		gap: 6px;
		align-items: center;
	}

	.gz-fkup-dot {
		width: 6px;
		height: 6px;
		border-radius: 999px;
		border: 0;
		padding: 0;
		background: var(--gz-line-hover, #d9d2c2);
		cursor: pointer;
		transition: width 0.2s ease, background 0.2s ease;
	}

	.gz-fkup-dot.is-active {
		background: var(--gz-pine);
		width: 16px;
	}
}

@media (min-width: 481px) {
	.gz-fkup-ctrl {
		display: none !important;
	}
}

/* ---------- Notices ---------- */

#fkcart-modal .fkcart-slider-notices {
	font-family: var(--gz-sans) !important;
	border-radius: var(--gz-r-sm);
}

/* ---------- Focus (amber, kit/Astra-proof) ---------- */

#fkcart-modal a:focus-visible,
#fkcart-modal button:focus-visible,
#fkcart-modal .fkcart-remove-item:focus-visible,
#fkcart-modal .fkcart-modal-close:focus-visible {
	outline: 2px solid var(--gz-amber) !important;
	outline-offset: 2px;
}

/* ---------- Scrollbar ---------- */

#fkcart-modal .fkcart-slider-body::-webkit-scrollbar {
	width: 6px;
}

#fkcart-modal .fkcart-slider-body::-webkit-scrollbar-thumb {
	background: var(--gz-line-hover);
	border-radius: 999px;
}

#fkcart-modal .fkcart-slider-body::-webkit-scrollbar-thumb:hover {
	background: var(--gz-muted);
}

#fkcart-modal .fkcart-slider-body::-webkit-scrollbar-track {
	background: transparent;
}

/* ---------- Trustpilot merk-proof onder de CTA ----------
   Echte markup uit het cart-cta-theme-override (mu-plugin
   groomzo-tp-proof = centrale bron voor score/count); vroeger
   CSS-pseudo-content, nu .fkcart-tp-proof. Zelfgehoste officiële strip
   (zelfde asset als home-trust): géén iframe/widget/tracking/schema. */
#fkcart-modal .fkcart-tp-proof {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	font-family: var(--gz-sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--gz-muted);
}

#fkcart-modal .fkcart-tp-proof img {
	flex: 0 0 80px;
	width: 80px;
	height: 15px;
}

/* ---------- Mobiel ---------- */

@media (max-width: 430px) {
	#fkcart-modal .fkcart-title {
		font-size: 18px;
	}

	#fkcart-modal a.fkcart-item-title {
		font-size: 13px;
	}
}

/* Klarna paylater-messaging (fkwcs, "3 interest-free payments… See plans")
   injecteert zich in de drawer zodra het script op cart-context-pagina's
   laadt (body.woocommerce-cart) — owner-review 14 sep: bewust weg in de
   side-cart; de CTA blijft het enige focuspunt (de checkout-pagina heeft
   z'n eigen Klarna-messaging bij het betaalmiddel). */
#fkcart-modal .fkwcs_paylater_messaging {
	display: none !important;
}