/**
 * Groomzo PDP — RVS Hondentondeuse (pilot) · v2 "Atelier"-skin
 * Warm ivoor / dennengroen / amber, Fraunces + Instrument Sans.
 * .gz-* namespace for our markup, scoped overrides for the reused
 * Magic Tier markup inside .gz-bundle. Elementor Kit typography is
 * beaten with !important where needed (known staging issue).
 */

.gz-pdp {
	--gz-paper: #F4F1E9;
	--gz-paper-deep: #EAE5D7;
	--gz-card: #FCFAF5;
	--gz-ink: #17211B;
	--gz-pine: #22392C;
	--gz-pine-deep: #1A2D22;
	--gz-moss: #47705A;
	--gz-moss-soft: #E4EBE2;
	--gz-amber: #C08A34;
	--gz-body: #4A5049;
	--gz-muted: #7C8177;
	--gz-line: #DCD6C4;
	--gz-line-dark: #33493C;
	--gz-ivory: #EFEBDD;
	--gz-muted-dark: #A8B5A6;
	--gz-r-lg: 22px;
	--gz-r-md: 14px;
	--gz-r-sm: 9px;
	--gz-shadow: 0 1px 2px rgba(23, 33, 27, .05), 0 18px 44px rgba(23, 33, 27, .09);
	--gz-disp: "Fraunces", "Fraunces Fallback", Georgia, serif;
	--gz-sans: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;

	background: var(--gz-paper);
	color: var(--gz-body);
	font-family: var(--gz-sans) !important;
	font-size: 16px;
	line-height: 1.62;
}

.gz-pdp *,
.gz-pdp *::before,
.gz-pdp *::after {
	box-sizing: border-box;
}

.gz-pdp img {
	max-width: 100%;
	height: auto;
	display: block;
}
.gz-pdp video { max-width: 100%; }
/* !important: Astra's a { color: var(--ast-global-color-0) } (= browserblauw
   op deze site) wint op volgorde; binnen de PDP zijn links moss/pine. */
.gz-pdp a { color: var(--gz-moss) !important; }
.gz-pdp a:hover { color: var(--gz-pine) !important; }
.gz-pdp :focus-visible { outline: 2.5px solid var(--gz-moss); outline-offset: 3px; border-radius: 4px; }

/* Headings — Elementor Kit global typography loads later and wins at equal
   specificity; !important keeps Fraunces + our scale (v1 lesson). */
.gz-pdp h1, .gz-pdp h2, .gz-pdp h3 {
	font-family: var(--gz-disp) !important;
	font-weight: 560 !important;
	color: var(--gz-ink) !important; /* Kit h1-kleur (vamtam_accent_6/navy) wint anders op source-order */
	line-height: 1.08 !important;
	letter-spacing: -.012em;
}
.gz-pdp .gz-title { font-size: clamp(26px, 2.8vw, 38px) !important; margin: 10px 0 8px; }
.gz-pdp h2 { font-size: clamp(28px, 3.1vw, 42px) !important; margin: 0 0 16px; }
.gz-pdp h3 { font-size: 20px !important; line-height: 1.3 !important; }
.gz-pdp h1 em, .gz-pdp h2 em { font-style: italic; font-weight: 520; color: inherit; }

/* ---------- Shell: full-bleed binnen de Astra-container ----------
   De PDP rendert in de thema-container (eigen max-width + witte bg).
   Vlak 1: .gz-pdp::before schildert de crème paginakleur rand-naar-rand
   (puur decoratief, verandert geen layout). Vlak 2: directe children
   blijven op het 1280px-raster (header content-box); alleen de band-klassen (.gz-uspbar,
   .gz-band, .gz-on-dark) breken uit tot 100vw. Padding-inline met
   max() houdt de inhoud op het raster uitgelijnd. overflow-x: clip
   (niet hidden — hidden breekt position:sticky) vangt de scrollbar-
   breedte van 100vw af. */
body.grz-pdp-rvs { overflow-x: clip; }
/* Basisfont: alles binnen de PDP erft Instrument Sans tenzij een
   display-regel (Fraunces) of Kit-regel iets anders zegt. */
.gz-pdp { font-family: var(--gz-sans); }

/* Standaard WP/Astra-voorraadregel ("Beschikbaarheid: Op voorraad") weg op
   PDP's (owner-review 28 sep) — voorraad-info staat al in de menu-meta
   ("✓ Morgen in huis"); pdp.css laadt alléén op PDP's. */
body.grz-pdp-rvs .ast-stock-avail,
body.grz-pdp-rvs span.stock { display: none !important; }

/* Astra's product-container is display:flex — zonder dit krimpt .gz-pdp
   naar inhoudsbreedte en plakt de hele PDP links (brede schermen). */
/* padding-bottom 140px -> 24px (owner-review 28 sep): de enorme lege band
   boven de footer (nu paperkleurig dus zichtbaar) had geen functie meer —
   de sticky-ATC verbergt zich zodra de footer in beeld is (pdp.js), dus
   kleinere buffer = footer (en sticky-hide) komt juist sneller.
   24px -> 0 (2 okt, owner): bij verborgen upsell-sectie (hoogste tier) liet
   juist die rest-padding een ivoor-strook (#F4F1E9 uit Astra #content) boven
   de footer zien; de zichtbare sectie sluit zichzelf af met eigen
   padding-bottom (84/56, zie .gz-crosssell). */
.gz-pdp { position: relative; z-index: 0; max-width: none; flex: 1 1 auto; width: 100%; margin: 0; padding: 0; background: transparent; }
.gz-pdp::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: calc(50% - 50vw); right: calc(50% - 50vw);
	background: var(--gz-paper);
	z-index: -1;
	pointer-events: none;
}
/* Raster = 1280px, exact de content-box van de site-header (Elementor),
   zodat galerij/buybox/secties flush met de header aligneren. */
.gz-pdp > * {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 28px;
	padding-right: 28px;
}
/* Hero + breadcrumb erven van .gz-pdp > * (1280 max-width, 28 padding-inline):
   content-box exact gelijk aan header (50vw ± 612). */

/* Banden: volledige breedte, rand tot rand. */
.gz-pdp > .gz-uspbar,
.gz-pdp > .gz-band,
.gz-pdp > .gz-band-flat,
.gz-pdp > .gz-on-dark {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
	padding-left: max(28px, calc(50vw - 612px));
	padding-right: max(28px, calc(50vw - 612px));
}
/* Kleurband direct ná een andere kleurband (uspbar/UGC/comparison): naadloos
   aansluiten — de standaard 60px sectielucht leest anders als paper-balk
   (#F4F1E9) tíssen de gekleurde vlakken (owner-review 9 okt, complete-set:
   uspbar→UGC→comparison doordat story/result/steps/benefits daar uit staan).
   Families mét paper-secties ertussen matchen niet en houden hun ademruimte. */
.gz-pdp > .gz-uspbar + .gz-band-flat,
.gz-pdp > .gz-band-flat + .gz-band { margin-top: 0; }
/* Sticky bar: balk zelf volledige breedte (chrome-element met eigen bg +
   schaduw), maar de inhoud op het PDP-raster — zelfde formule als de banden,
   zodat duimnagel/prijs/ATC exact lijnen met de secties eronder (x=108 @1440,
   28px mobiel) en niet aan de viewport-randen plakken op brede schermen. */
/* Sticky-balk inhoud lijnt op het PDP-raster — zit sinds de stackingsfix
   (28 sep) als direct kind van <body>; de padding-formule staat in de
   basisregel bij .gz-sticky hieronder (zelfde specificiteit, dus daar
   samengevoegd i.p.v. een aparte eerder-geneste regel). */

/* PDP-contentbasis = sectie-paper (#F4F1E9 = --gz-paper): zonder dit schemerde
   de witte body 10px door tussen mobiele header en breadcrumb; eerst
   header-ivoor geprobeerd maar dat week af van de eerste sectie (owner
   eye-dropper 28 sep) — nu exact gelijk aan het sectie-vlak. pdp.css laadt
   alléén op V2-PDP's, dus shop/home blijven onaangeroerd. */
.site-content { background: #f4f1e9; }

.gz-eyebrow {
	font-size: 12px;
	letter-spacing: .19em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gz-moss);
	margin: 0 0 14px;
}
.gz-on-dark .gz-eyebrow { color: var(--gz-amber); }
/* padding longhand: de shorthand '60px 0 0' nulde ook left/right en versloeg
   op source-order het raster (.gz-pdp > * 28px) — plain secties vielen terug
   op de kale 1280-doos (80/1360 @1440) i.p.v. de content-box (108/1332). */
.gz-section { padding-top: 60px; }
.gz-section-intro { margin: 8px 0 20px; max-width: 56ch; }
.gz-band { background: var(--gz-paper-deep); border-radius: var(--gz-r-lg); padding: 44px 40px; margin-top: 60px; }
.gz-band-flat { border-radius: 0; margin-top: 60px; padding: 44px 0; }
.gz-on-dark { background: var(--gz-pine); color: var(--gz-muted-dark); border-radius: var(--gz-r-lg); padding: 60px 56px; margin-top: 60px; }
.gz-on-dark h2, .gz-on-dark h3 { color: var(--gz-ivory) !important; }
.gz-on-dark .gz-section-intro { color: var(--gz-muted-dark); }
.gz-accent { color: var(--gz-amber); }

/* ---------- Breadcrumb ---------- */
.gz-breadcrumb { font-size: 12.5px; color: var(--gz-muted); padding-top: 8px; }
.gz-breadcrumb a { color: var(--gz-muted) !important; text-decoration: none; }
.gz-breadcrumb span[aria-hidden] { margin: 0 6px; }

/* ---------- Hero (V6: gallery left, head+buy right; mobiel: head→gallery→buy) ---------- */
/* Harness-verhoudingen terug (goedgekeurde V6): galerij 634 / buybox 498 op
   1188px content. Galerij links flush met de header-box; rechterkolom mag
   iets korter zijn — kaart hoeft niet rand-flush. */
.gz-hero {
	margin-top: 0; display: grid;
	grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
	grid-template-areas: "gallery head" "gallery buy";
	column-gap: 52px; align-items: start;
}
.gz-gallery { grid-area: gallery; position: sticky; top: 84px; }
.gz-head { grid-area: head; min-width: 0; }
.gz-buy { grid-area: buy; min-width: 0; }

.gz-gallery-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	border-radius: var(--gz-r-lg);
	background: #fff;
	box-shadow: var(--gz-shadow);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.gz-gallery-track::-webkit-scrollbar { display: none; }
/* UA-default figure-margin (1em 40px) gaf 80px tussenruimte per slide. */
.gz-pdp figure { margin: 0; }
.gz-gallery-main { position: relative; }
.gz-gal-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(252, 250, 245, .92); color: var(--gz-pine);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(23, 33, 27, .18); z-index: 5; padding: 0;
	font-family: var(--gz-sans); transition: background .15s;
}
.gz-gal-arrow:hover { background: #fff; }
.gz-gal-prev { left: 14px; }
.gz-gal-next { right: 14px; }
.gz-gal-arrow[hidden] { display: none; }
.gz-slide { flex: 0 0 100%; scroll-snap-align: center; position: relative; aspect-ratio: 1/1; }
.gz-slide-img { width: 100%; height: 100%; object-fit: cover; }
.gz-slide-badge {
	position: absolute; left: 20px; top: 20px;
	background: var(--gz-pine); color: var(--gz-ivory);
	font-family: var(--gz-disp); font-style: italic; font-size: 14.5px;
	padding: 9px 18px; border-radius: 999px;
}
.gz-video-facade {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	width: 100%; height: 100%; border: 0; cursor: pointer;
	background: var(--gz-pine); color: var(--gz-ivory); font-family: var(--gz-sans);
}
.gz-play {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--gz-ivory); color: var(--gz-pine);
	display: flex; align-items: center; justify-content: center; font-size: 18px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
/* Font-consistentie: Kit zet globaal Readex Pro op buttons/labels/inputs —
   die element-regels slaan erfachtig van .gz-pdp, dus kit-proof overschrijven.
   Fraunces zit op specifieke display-klassen en blijft onaangeroerd. */
.gz-pdp button, .gz-pdp input, .gz-pdp select, .gz-pdp textarea, .gz-pdp label, .gz-pdp summary, .gz-pdp option { font-family: var(--gz-sans) !important; }
.gz-pdp .tier-contents, .gz-pdp .gz-gift-line { font-family: var(--gz-sans); }
.gz-pdp .tier-contents b, .gz-pdp .gz-gift-line b { font-family: inherit; }
body.grz-pdp-rvs .skip-link { font-family: var(--gz-sans) !important; }
/* Astra's eigen sticky ATC is inert op dit template (opacity 0, toggle-script
   verwacht Woo-default-markup) maar hield wel Readex Pro-fonts en dode DOM
   aan — volledig uitschakelen op onze PDP's; onze eigen sticky doet het werk. */
body.grz-pdp-rvs .ast-sticky-add-to-cart { display: none !important; }
.gz-play-label { font-size: 14px; font-weight: 600; letter-spacing: .02em; }
/* Video in de galerij (7 okt): écht videoframe i.p.v. kale groene vlakken —
   poster op facade + thumb, play-elementen erbovenop. */
.gz-video-facade { position: relative; }
.gz-video-facade .gz-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.gz-video-facade .gz-play, .gz-video-facade .gz-play-label { position: relative; }
.gz-thumb-video { position: relative; overflow: hidden; }
.gz-thumb-video .gz-thumb-video-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gz-thumb-video.has-poster .gz-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; line-height: 27px; text-align: center; font-size: 10px; background: rgba(26, 45, 34, .74); border-radius: 50%; }
.gz-embed, .gz-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.gz-slide-video { height: auto; }
.gz-slide .gz-video { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.gz-thumbs-wrap { position: relative; }
.gz-gallery-nav { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; scroll-behavior: smooth; }
.gz-gallery-nav::-webkit-scrollbar { display: none; }
.gz-thumb-arrow { width: 34px; height: 34px; top: calc(50% + 6px); }
.gz-thumb-arrow svg { width: 13px; height: 13px; display: block; }
.gz-thumb-prev { left: -14px; }
.gz-thumb-next { right: -14px; }
.gz-thumb {
	flex: 0 0 70px; height: 70px; padding: 0; cursor: pointer;
	border: 1.5px solid var(--gz-line); border-radius: var(--gz-r-sm);
	background: #fff; overflow: hidden; transition: border-color .15s;
}
/* Elementor Kit globaal button-CSS (.elementor-kit-X button, spec. (0,1,1))
   overruled onze thumbs/pijlen → blauwe pillen. Scope + !important, zelfde
   conventie als de typografie-fixes. */
.gz-pdp .gz-thumb { background: #fff !important; padding: 0 !important; border-radius: var(--gz-r-sm) !important; }
.gz-pdp .gz-thumb-video { background: var(--gz-pine) !important; }
/* color !important: Kit button-kleur is wit → chevron (currentColor)
   onzichtbaar op de crème knop. */
.gz-pdp .gz-gal-arrow { background: rgba(252, 250, 245, .92) !important; border-radius: 50% !important; padding: 0 !important; color: var(--gz-pine) !important; }
.gz-pdp .gz-gal-arrow:hover { background: #fff !important; }
.gz-pdp .gz-video-facade { background: var(--gz-pine) !important; padding: 0 !important; }
.gz-thumb.is-active { border-color: var(--gz-ink); border-width: 2px; }
.gz-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gz-thumb-video { display: flex; align-items: center; justify-content: center; background: var(--gz-pine); color: var(--gz-ivory); font-size: 15px; }

/* Head block: rating, title, price */
.gz-trustrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--gz-ink); }
.gz-stars { color: var(--gz-amber); letter-spacing: 2.5px; font-size: 15px; }
.gz-star { color: var(--gz-line); }
.gz-star.is-on { color: var(--gz-amber); }
.gz-trustrow-rating { color: var(--gz-ink); }
.gz-trustrow-link, .gz-trustrow-tp { color: var(--gz-moss); text-decoration: none; font-weight: 600; }
.gz-trustrow-dot { color: var(--gz-muted); }

.gz-price-wrap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gz-price-wrap .price {
	display: flex; flex-direction: row; align-items: baseline; gap: 12px; margin: 0;
	font-family: var(--gz-sans) !important;
}
/* row expliciet: post-1008946.css (oude Elementor-template) zet p.price op
   row-reverse — daarmee stond de nieuwe prijs vóór de doorstreepprijs. */
.gz-price-tag {
	background: var(--gz-moss-soft); color: var(--gz-pine); font-size: 12.5px; font-weight: 700;
	padding: 5px 12px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap;
}
/* Geen korting (was == prijs) => géén badge: pdp.js zet hidden. */
.gz-price-tag[hidden] { display: none; }
.gz-price-wrap .price del {
	color: var(--gz-muted); text-decoration: line-through; font-size: 16px; font-weight: 400; opacity: 1;
}
.gz-price-wrap .price ins {
	font-family: var(--gz-disp) !important; font-size: 38px; font-weight: 600;
	color: var(--gz-ink); text-decoration: none; letter-spacing: -.01em;
}
.gz-price-wrap .price > span:only-child { font-family: var(--gz-disp) !important; font-size: 38px; font-weight: 600; color: var(--gz-ink); }
.gz-sub { font-size: 15.5px; color: var(--gz-body); margin: 0 0 10px; }
.gz-fromline { flex-basis: 100%; font-size: 13px; color: var(--gz-muted); margin: 0 0 12px; }
.gz-fromline b { color: var(--gz-ink); font-weight: 600; }

.gz-usps { list-style: none; display: grid; gap: 6px; margin: 0 0 10px; padding: 0; }
.gz-usps li { display: flex; gap: 10px; font-size: 14.5px; align-items: flex-start; }
.gz-usps strong, .gz-trustbadges strong { color: var(--gz-ink); }
.gz-check {
	flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
	background: var(--gz-moss-soft); color: var(--gz-pine);
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 2.5px;
}
.gz-check svg { width: 11px; height: 11px; }

/* ---------- Salonmenu: Magic Tier skin (presentation only) ---------- */
/* Kaarten-op-paper (29 sep redesign): de outer menu-kaart is vervallen —
   de tier-rijen zíjn de kaarten; alléén de titel blijft als container-inhoud.
   Non-tier (.gz-hero--plain) was al kaartloos, dus basis-transparant is veilig. */
.gz-menu { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.gz-pdp .gz-menu-title {
	font-family: var(--gz-disp) !important; font-size: 17px !important; font-weight: 600 !important;
	color: var(--gz-ink) !important; margin: 0 0 4px !important; line-height: 1.2 !important;
}
/* Geen flash van kale engine-rijen: de bundel is onzichtbaar tot pdp.js de
   salon-skin klaar heeft (.gz-salon, bij DOMContentLoaded). visibility i.p.v.
   display houdt de layout-ruimte gereserveerd — geen verspringing. */
.gz-bundle { visibility: hidden; }
.gz-bundle.gz-salon { visibility: visible; }
.gz-bundle .magic-tier-container { margin: 0; }
.gz-bundle .magic-tier-container > .divider-title { display: none; }
.gz-bundle .magic-tier-rows { display: block; }
.gz-bundle .magic-tier-row {
	display: flex; align-items: flex-start; gap: 10px;
	border: 0 !important; border-bottom: 1px solid var(--gz-line) !important;
	border-radius: 0 !important; background: none !important;
	padding: 9px 4px !important; margin: 0 !important; cursor: pointer;
	box-shadow: none !important; min-width: 0;
}
.gz-bundle .magic-tier-row:last-child { border-bottom: 0 !important; }
.gz-bundle .magic-tier-row:hover { background: rgba(71, 112, 90, .04) !important; }
.gz-bundle .magic-tier-row.tier-selected { background: linear-gradient(0deg, rgba(71, 112, 90, .06), rgba(71, 112, 90, .06)) !important; }
.gz-bundle .magic-tier-radio {
	position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin: 4px 0 0 !important;
	appearance: none; -webkit-appearance: none;
	border: 2px solid var(--gz-line); border-radius: 50%; background: #fff; cursor: pointer;
}
.gz-bundle .magic-tier-radio:checked { border-color: var(--gz-pine); background: var(--gz-pine); box-shadow: inset 0 0 0 3.5px var(--gz-card); }
.gz-bundle .tier-left { flex: 1 1 auto; min-width: 0; display: block !important; }
.gz-bundle .tier-title-stack { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gz-bundle .tier-grid-name {
	display: inline; font-family: var(--gz-disp) !important; font-size: 18px; font-weight: 600;
	color: var(--gz-ink); background: none !important; padding: 0 !important;
}
/* Eindaudit 16 sep: tier-namen renderden NAVY — engine-frontend.css zet zelf
   .tier-title.tier-grid-name op #002842 (oud merknavy) en wint op
   source-order/gelijkwaardige specificity van onze losse .tier-grid-name.
   Atelier-ink forceren (presentatie-only, engine-CSS onaangeroerd). */
.gz-bundle .tier-title.tier-grid-name {
	color: var(--gz-ink) !important;
}
/* Divider-label "Bundel & Bespaar" (engine <a>-markup) erft kit-linkblauw —
   muted Atelier-label, family erbij kit-proof. */
.gz-pdp .divider-title .divider-text {
	color: var(--gz-muted) !important;
	font-family: var(--gz-sans) !important;
}
.gz-bundle .tier-info-icon { display: none; } /* engine modal-link: alleen zichtbaar in de salon-skin (multi-item, pdp.js) */
/* Info-icoon = progressive disclosure (1 okt, owner-GO): opent de bestaande
   engine tier-info-modal (eigen click-handler incl. stopPropagation => de
   kaart/tier wordt NIET geselecteerd). Atelier-look: haarlijn-cirkel,
   muted glyph; ::after vergroot het tikvlak tot 26px (icoon zelf 16px).
   pdp.js verbergt hem op single-item tiers (Solo). */
.gz-bundle.gz-salon .tier-info-icon {
	/* géén !important op display: pdp.js zet inline display:none op
	   single-item tiers (Solo) — important zou dat verslaan. */
	display: inline-flex; align-items: center; justify-content: center;
	width: 16px; height: 16px; border-radius: 50%;
	border: 1px solid var(--gz-line); background: var(--gz-card) !important;
	color: var(--gz-muted); font-family: var(--gz-sans) !important;
	font-weight: 600; font-size: 10.5px; line-height: 1;
	cursor: pointer; user-select: none;
	margin: 0 0 0 4px !important; padding: 0 !important;
	vertical-align: baseline; box-shadow: none; flex: 0 0 auto; position: relative;
	text-transform: none;
}
.gz-bundle.gz-salon .tier-info-icon::after { content: ""; position: absolute; inset: -5px; }
.gz-bundle.gz-salon .tier-info-icon:hover {
	border-color: var(--gz-moss); color: var(--gz-pine);
	background: var(--gz-moss-soft) !important;
}
.gz-bundle .tier-saving-label {
	display: inline; font-size: 13px; color: var(--gz-muted);
}
.gz-bundle .tier-saving-label span { font-size: 13px !important; color: var(--gz-moss) !important; font-weight: 700; background: none !important; padding: 0 !important; }
/* dotted leader tussen naam en prijs */
.gz-bundle .tier-left::after {
	content: ""; display: block; flex: 0 0 0;
}
.gz-bundle .tier-right { flex: 0 0 auto; text-align: right; display: block !important; }
.gz-bundle .tier-price-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.gz-bundle .tier-price { font-family: var(--gz-disp) !important; font-size: 19px !important; font-weight: 600 !important; color: var(--gz-ink) !important; }
.gz-bundle .tier-popular-badge {
	background: var(--gz-amber) !important; color: #fff !important;
	font-family: var(--gz-sans) !important; font-size: 10px !important; font-weight: 800 !important;
	letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px !important; border-radius: 999px !important;
	white-space: nowrap;
}
.gz-bundle .tier-old-price {
	display: none; font-family: var(--gz-sans); font-size: 12px; color: var(--gz-muted);
	text-decoration: line-through; margin-top: 2px;
}
.gz-bundle .magic-tier-row.tier-selected .tier-old-price { display: block; }
.gz-bundle .tier-thumbnails { display: none; gap: 8px; margin-top: 8px; }
.gz-bundle .magic-tier-row.tier-selected .tier-thumbnails { display: flex; flex-wrap: wrap; }
.gz-bundle .tier-thumb {
	width: 40px; height: 40px; object-fit: cover; border-radius: 8px;
	border: 1px solid var(--gz-line); background: #fff;
}
.gz-bundle .gift-section { margin-top: 4px; }
.gz-bundle .gift-section .divider-title { display: none; }
.gz-bundle .gift-row { display: flex; gap: 6px; flex-wrap: wrap; }
.gz-bundle .gift-card-stack { flex: 1 1 120px; min-width: 0; text-align: center; margin: 0; }
.gz-bundle .gift-card {
	border: 1px dashed #C9C2AC !important; background: var(--gz-paper) !important;
	border-radius: var(--gz-r-sm) !important; padding: 6px 8px 5px !important;
	font-family: var(--gz-sans) !important; font-size: 12px; color: var(--gz-ink);
	display: flex; flex-direction: column; align-items: center; gap: 3px; position: static;
}
.gz-bundle .gift-card.active { border-color: var(--gz-moss) !important; }
.gz-bundle .gift-card.inactive { opacity: .55; }
.gz-bundle .gift-card-topborder { display: none !important; }
.gz-bundle .gift-value-badge-wrapper { display: inline; }
.gz-bundle .gift-value-badge { background: var(--gz-moss-soft) !important; color: var(--gz-pine) !important; font-size: 10.5px !important; font-weight: 800 !important; padding: 1.5px 8px !important; border-radius: 999px !important; line-height: 1.5; }
.gz-bundle .gift-image { width: 36px !important; height: 36px !important; object-fit: cover; border-radius: 6px; margin: 0 !important; }
.gz-bundle .gift-card.active .gift-unavailable { display: none !important; }
.gz-bundle .gift-unavailable { font-size: 10px; color: var(--gz-muted); margin: 0; }
.gz-bundle .gift-title-below { font-size: 11.5px; font-weight: 600; color: var(--gz-ink); margin-top: 3px; }
.gz-bundle .gift-name { font-weight: 600 !important; color: var(--gz-ink) !important; }
.gz-bundle .gift-value, .gz-bundle .modal-gift-value-free { color: var(--gz-moss) !important; font-weight: 700 !important; background: none !important; }
/* ---------- Engine tier-modal — V2 Atelier-restyle (28 sep, owner-review
   "oude brand-stijl"): pdp.js verhuist de modal naar <body> (stacking boven
   footer), alle kleuren/typografie hieronder zijn de onze; de engine-default
   (frontend.css .tier-modal { display:none }) regelt de dicht-toestand. ---------- */
.tier-modal { background: rgba(23, 33, 27, .55); }
.tier-modal .modal-content {
	background: var(--gz-card) !important; border: 1px solid var(--gz-line);
	border-radius: var(--gz-r-lg) !important; box-shadow: var(--gz-shadow) !important;
	max-width: 440px;
}
.tier-modal .modal-header { padding: 24px 24px 6px !important; }
.tier-modal .modal-title {
	font-family: var(--gz-disp) !important; font-size: 21px !important; font-weight: 600 !important;
	color: var(--gz-ink) !important; letter-spacing: 0 !important;
}
/* engine voegt de subtitel als sibling ná de header in (zonder diens 24px
   padding) — hing 24px links van de titel; nu gelijk met de titel (28 sep). */
.tier-modal .modal-included-text { font-family: var(--gz-sans); color: var(--gz-muted); font-size: 12px; padding: 0 24px 6px; }
.tier-modal .modal-close { color: var(--gz-muted) !important; font-weight: 300 !important; font-size: 26px !important; }
.tier-modal .modal-close:hover { color: var(--gz-pine) !important; }
.tier-modal .modal-scrollable-content { padding: 0 24px; }

/* Producttabel: clean, geen zebra/navy */
.tier-modal .modal-product-table {
	background: transparent !important; border: 1px solid var(--gz-line) !important;
	border-radius: var(--gz-r-md) !important; font-family: var(--gz-sans) !important; font-size: 13px !important;
}
.tier-modal .modal-product-table th,
.tier-modal .modal-product-table td {
	background: transparent !important; border-bottom: 1px solid var(--gz-line) !important;
	color: var(--gz-body) !important; font-family: var(--gz-sans) !important;
}
.tier-modal .modal-product-table tr:last-child td { border-bottom: 0 !important; }
.tier-modal .modal-product-table th {
	background: var(--gz-paper) !important; color: var(--gz-muted) !important;
	font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important;
}
.tier-modal .modal-product-table thead tr th:first-of-type,
.tier-modal .modal-product-table tbody tr td:first-of-type { border-right: 1px solid var(--gz-line) !important; border-left: 0 !important; }
.tier-modal .modal-product-table td.price-col { color: var(--gz-ink) !important; font-weight: 600 !important; }
/* Bespaar-groen geüniformeerd (1 okt, owner-review): tabelcellen ÉN de
   totaal-bespaarregel onderaan dezelfde moss + gewicht. De span binnen
   .modal-savings krijgt een eigen engine-kleur die inheritance verslaat —
   daarom expliciet mee-getarget. */
.tier-modal .modal-product-table td.price-col.you-save-col { color: var(--gz-moss) !important; font-weight: 700 !important; }
.tier-modal .modal-savings,
.tier-modal .modal-savings span,
.tier-modal .modal-summary-row:last-child,
.tier-modal .modal-summary-row:last-child span { color: var(--gz-moss) !important; font-weight: 700 !important; }
/* Brede valuta-bedragen (DKK/SEK "489,00 kr.") op desktop: géén nowrap op
   de cellen (plette de productkolom) — alléén de prijs-KOLOMPADDING compact
   (22 -> 4px per kant = 68px ruimte, het bedrag heeft ~63px nodig) zodat
   de "kr." niet meer los onder het bedrag valt; de prijs-span zelf is
   basis-nowrap zodat getallen nooit middel-in breken. */
@media (min-width: 1024px) {
	.tier-modal .modal-product-table th.price-col,
	.tier-modal .modal-product-table td.price-col {
		padding-left: 4px !important; padding-right: 4px !important;
	}
}
.tier-modal .modal-product-title { color: var(--gz-ink) !important; font-family: var(--gz-sans) !important; }
.tier-modal .modal-product-thumb { border: 1px solid var(--gz-line) !important; border-radius: var(--gz-r-sm) !important; background: #fff !important; }
.tier-modal .modal-product-savings-badge {
	background: var(--gz-moss-soft) !important; color: var(--gz-pine) !important;
	border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; padding: 2px 9px !important;
}

/* Samenvatting: paper-vlak i.p.v. blauwgrijs */
.tier-modal .modal-summary {
	background: var(--gz-paper) !important; border: 1px solid var(--gz-line) !important;
	border-radius: var(--gz-r-md) !important; box-shadow: none !important;
}
.tier-modal .modal-summary-row { font-family: var(--gz-sans) !important; font-size: 13.5px !important; color: var(--gz-body) !important; }
.tier-modal .modal-summary-row .modal-summary-label { color: var(--gz-muted) !important; }
.tier-modal .modal-summary-row .modal-summary-value { color: var(--gz-ink) !important; }
.tier-modal .modal-savings { color: var(--gz-moss) !important; font-family: var(--gz-sans) !important; font-size: 15px !important; }

/* Cadeaus: strak SVG-gift-icoon (moss-soft tegel + pine lijntekening)
   i.p.v. productfoto's — CSS-oplossing overleeft de engine-re-renders. */
.tier-modal .modal-gifts-header {
	font-family: var(--gz-sans) !important; color: var(--gz-ink) !important; font-size: 12.5px !important;
	font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important;
}
.tier-modal .modal-gift-img { display: none !important; }
.tier-modal .modal-gift-list li {
	align-items: center; gap: 10px; margin: 0 !important; padding: 7px 0;
	border-bottom: 1px dashed var(--gz-line); font-size: 13.5px;
}
.tier-modal .modal-gift-list li:last-child { border-bottom: 0; }
.tier-modal .modal-gift-list li::before {
	content: ""; flex: 0 0 30px; width: 30px; height: 30px;
	background-color: var(--gz-moss-soft); border-radius: 9px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322392C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M5 12v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7'/%3E%3Cpath d='M12 8v12'/%3E%3Cpath d='M12 8c-1.9 0-4.5-.7-4.5-2.6C7.5 3.6 10.6 3.2 12 8c1.4-4.8 4.5-4.4 4.5-2.6C16.5 7.3 13.9 8 12 8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 17px;
}
.tier-modal .modal-gift-name { font-family: var(--gz-sans) !important; color: var(--gz-ink) !important; font-size: 13.5px !important; }
.tier-modal .modal-gift-value-old { color: var(--gz-muted) !important; text-decoration: line-through !important; font-size: 12px !important; }
.tier-modal .modal-gift-value-free { color: var(--gz-moss) !important; font-weight: 700 !important; font-size: 12.5px !important; }
.tier-modal .modal-gifts-limited { font-family: var(--gz-sans) !important; font-size: 11.5px !important; color: var(--gz-muted) !important; margin-top: 8px !important; }
.tier-modal .modal-gifts-dot { display: none; } /* 🟠-emoji weg: clean */

/* Footer + CTA: pine pill zoals de kaartknoppen */
.tier-modal .modal-footer { background: var(--gz-card) !important; border-top: 1px solid var(--gz-line) !important; border-radius: 0 0 var(--gz-r-lg) var(--gz-r-lg) !important; padding: 16px 24px 22px !important; }
.tier-modal .modal-cta {
	display: block; width: 100%; min-height: 50px; margin-top: 4px;
	background: var(--gz-pine) !important; color: var(--gz-ivory) !important;
	font-family: var(--gz-sans) !important; font-size: 15px !important; font-weight: 700 !important;
	border: 0 !important; border-radius: 999px !important; cursor: pointer;
	box-shadow: 0 12px 28px rgba(34, 57, 44, .25) !important;
}
.tier-modal .modal-cta:hover { background: var(--gz-pine-deep) !important; }
/* Tijdens de add (pdp.js zet .gz-modal-laden): blokkeert de engine-fadeOut
   (inline styles) zodat de spinner zichtbaar blijft tot added_to_cart. */
.tier-modal.gz-modal-laden { display: block !important; opacity: 1 !important; }

/* Mobiel: tabel compacter zodat lange productnamen beheersbaar blijven. */
@media (max-width: 1023px) {
	.tier-modal .modal-product-thumb { width: 34px !important; height: 34px !important; }
	.tier-modal .modal-product-table { font-size: 12px !important; }
	.tier-modal .modal-product-title { font-size: 12px !important; line-height: 1.3 !important; }
}

/* ---------- Modal-polish (1 okt, owner-GO): mobiel gestapelde productrijen
   i.p.v. 4-kolomstabel (desktop houdt de tabel). pdp.js zet per prijs-cel
   een .grz-mk-kolomlabel neer (taal van de server); layout hieronder.
   Desktop verbergt de labels (ze zijn alleen voor de gestapelde weergave). */
@media (max-width: 1023px) {
	.tier-modal .modal-product-table thead { display: none; }
	.tier-modal .modal-product-table,
	.tier-modal .modal-product-table tbody { display: block; width: 100%; }
	.tier-modal .modal-product-table tr {
		display: grid; grid-template-columns: 1fr auto; gap: 3px 12px;
		padding: 11px 14px; border-bottom: 1px dashed var(--gz-line) !important;
		align-items: center;
	}
	.tier-modal .modal-product-table tbody tr:last-child { border-bottom: 0 !important; }
	/* Engine zet op td:first-of-type een kolomscheiding (border-right,
	   !important) — desktop is dat de scheiding product|prijzen, maar in de
	   gestapelde mobiele lay-out blijft een verdwaalde verticale lijn aan
	   de rechterrand over (owner-review 1 okt). Specifiteit moet boven de
	   engine-regel uitkomen. */
	.tier-modal .modal-product-table tbody tr td:first-of-type { border-right: 0 !important; }
	.tier-modal .modal-product-table td {
		display: block; border: 0 !important; background: none !important;
		padding: 0 !important; text-align: left !important; min-width: 0;
		/* !important: engine-768px-blok zet td.price-col op width 21.5% —
		   laadt ná pdp.css en wint zo op source-order (bewezen: 21,5% van
		   de 179px-track = de gemeten 38,5px). */
		width: auto !important; max-width: none !important; justify-self: stretch;
	}
	.tier-modal .modal-product-table td:first-child {
		grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
	}
	.tier-modal .modal-product-table td:nth-child(2) { grid-column: 1; }
	.tier-modal .modal-product-table td:nth-child(3) { grid-column: 2; text-align: right !important; padding-right: 8px !important; /* owner: "-> in bundel"-cluster minder tegen de rechterrand; !important vs de padding-0-reset hierboven */ }
	.tier-modal .modal-product-table td:nth-child(4) { grid-column: 1 / -1; font-size: 11px; }
	.tier-modal .modal-product-table td:nth-child(3)::before {
		content: "→"; margin-right: 5px; color: var(--gz-moss); font-weight: 600;
	}
	.tier-modal .grz-mk {
		display: inline; margin-right: 6px; font-size: 9.5px; font-weight: 700;
		text-transform: uppercase; letter-spacing: .05em;
	}
	.tier-modal .grz-prijs { white-space: nowrap; }
}
@media (min-width: 1024px) {
	.tier-modal .grz-mk { display: none; }
}
/* Engine schildert spans ín de bespaar-cel direct licht-groen
   (.modal-product-savings span { color: var(--success) }) — td-overrides
   reiken niet tot directe span-regels. Onze spans erven dus gedwongen
   van de cel: brand-groen (moss) i.p.v. engine-success (owner 1 okt). */
.tier-modal .grz-prijs { color: inherit !important; white-space: nowrap; }
.tier-modal .grz-mk { color: var(--gz-muted) !important; }

/* ---------- Salonmenu V7: vaste bundelkaarten (29 sep redesign) ----------
   Engine-markup onaangetast; pdp.js verrijkt de rijen tot kaarten. Grid per
   kaart: stip | thumb-cluster | tekst (naam+badges / inhoud / cadeaus) |
   prijs (del / prijs / besparing). Uniforme min-height: hoogte is
   selectie-onafhankelijk (géén uitklap meer) — eis = hoogte-stabiliteit,
   geen exacte pixels; EN-copy/pills mogen wrappen. Border-dikte blijft
   constant tussen staten (anders verschuift de hoogte mee). */
.gz-bundle.gz-salon .magic-tier-row {
	display: grid;
	grid-template-columns: 18px auto minmax(0, 1fr) auto;
	grid-template-areas:
		"dot thumbs name price"
		"dot thumbs cont price";
	column-gap: 10px !important; row-gap: 2px !important;
	align-items: center;
	min-height: 62px; padding: 8px 12px;
	background: var(--gz-card) !important;
	border: 1.5px solid var(--gz-line) !important;
	border-radius: var(--gz-r-md) !important;
	box-shadow: none !important;
	margin: 0 0 14px !important;
	cursor: pointer;
}
.gz-bundle.gz-salon .magic-tier-row:last-child { margin-bottom: 0 !important; }
/* Badges als hoeklabel: half buiten de kaart rechtsboven (owner-wens 29 sep)
   — de pill verdwijnt uit de naamregel (meer tekstruimte) en markeert de
   kaart als tag; extra kaarttussenruimte houdt het label vrij van de kaart
   erboven. */
.gz-bundle.gz-salon .tier-popular-badge,
.gz-bundle.gz-salon .gz-best-value {
	position: absolute !important; top: -9px; right: 10px; z-index: 2;
	margin: 0 !important;
}
.gz-bundle.gz-salon .magic-tier-row:hover { border-color: var(--gz-moss) !important; }
.gz-bundle.gz-salon .magic-tier-row.tier-selected {
	border-color: var(--gz-pine) !important;
	background: linear-gradient(0deg, rgba(71, 112, 90, .05), rgba(71, 112, 90, .05)), var(--gz-card) !important;
}
/* Radiostip: getekend op de rij zelf; de échte engine-radio blijft de
   semantische bron en is visueel verborgen (focusbaar, pijltjesnavigatie). */
.gz-bundle.gz-salon .magic-tier-row::before {
	content: ""; grid-area: dot;
	width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid var(--gz-line); background: #fff; align-self: center;
}
.gz-bundle.gz-salon .magic-tier-row.tier-selected::before {
	border-color: var(--gz-pine); background: var(--gz-pine);
	box-shadow: inset 0 0 0 3.5px var(--gz-card);
}
.gz-bundle.gz-salon .magic-tier-radio {
	display: inline-block !important; /* vs. engine display:none */
	position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
	pointer-events: none;
}
.gz-bundle.gz-salon .magic-tier-row:has(.magic-tier-radio:focus-visible) {
	outline: 2.5px solid var(--gz-moss); outline-offset: 3px;
}
/* Thumbnails: ALLE leden groot naast elkaar (owner-review 29 sep "alle
   zichtbaar, écht groter") — herkenbaar product, geen overlap. */
.gz-bundle.gz-salon .tier-thumbnails {
	grid-area: thumbs; display: flex !important; align-items: center;
	padding: 0 !important; margin: 0 !important; gap: 6px !important;
}
.gz-bundle.gz-salon .tier-thumb {
	width: 58px; height: 58px; border-radius: 13px; object-fit: cover;
	border: 2px solid var(--gz-card); background: #fff; display: block;
	margin: 0; box-shadow: 0 0 0 1px var(--gz-line);
}
.gz-bundle.gz-salon .tier-thumb-more { display: none; }
/* Detail-wrapper (pdp.js bundelt thumbs+subtekst): desktop doorlatend —
   children gedragen zich exact als voorheen (grid-areas thumbs/cont). */
.gz-bundle.gz-salon .gz-card-detail { display: contents; }
/* Tekst-kolom: naam + pills, inhoudsbasis + extra, cadeau-regel. */
.gz-bundle.gz-salon .tier-left { grid-area: name; display: block !important; min-width: 0; }
.gz-bundle.gz-salon .tier-title-stack {
	display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
}
/* Engine kapet namen af (overflow:hidden + ellipsis op .tier-grid-name);
   in de kaart schrijft de naam zich volledig uit — niet krimpen, niet clippen
   (owner-review 29 sep: "Compleet" afgekapt op mobiel). */
.gz-bundle.gz-salon .tier-grid-name {
	flex: 0 0 auto;
	overflow: visible !important;
	text-overflow: clip !important;
}
.gz-bundle.gz-salon .tier-grid-name { font-size: 17px !important; }
.gz-bundle.gz-salon .tier-popular-badge {
	transform: none !important; /* positie bepaalt het hoeklabel-blok hierboven */
	background: var(--gz-moss-soft) !important; color: var(--gz-pine) !important;
	font-family: var(--gz-sans) !important; font-size: 10px !important; font-weight: 700 !important;
	letter-spacing: .02em; text-transform: none !important; padding: 2.5px 9px !important;
	border-radius: 999px !important; white-space: nowrap; line-height: 1.5;
}
.gz-bundle.gz-salon .gz-best-value {
	background: var(--gz-amber); color: #fff;
	font-family: var(--gz-sans); font-size: 10px; font-weight: 700;
	letter-spacing: .02em; text-transform: none; padding: 2.5px 9px;
	border-radius: 999px; white-space: nowrap; line-height: 1.5;
}
.gz-bundle.gz-salon .tier-contents { grid-area: cont; font-size: 12.5px; color: var(--gz-body); min-width: 0; }
.gz-bundle.gz-salon .tier-contents-extra { color: var(--gz-moss); font-weight: 600; }
/* Prijs-kolom: del boven, prijs prominent, besparing eronder. */
.gz-bundle.gz-salon .tier-right {
	grid-area: price; display: flex !important; flex-direction: column;
	align-items: flex-end; justify-content: center; gap: 1px;
	text-align: right; flex: 0 0 auto;
}
.gz-bundle.gz-salon .tier-price-row { display: block !important; }
.gz-bundle.gz-salon .tier-price {
	font-family: var(--gz-disp) !important; font-size: 19px !important; font-weight: 600 !important;
	color: var(--gz-ink) !important; white-space: nowrap;
}
/* Finale reductie: doorstreepprijs uit de selector — het anker leeft in de
   hero-prijs (del + actuele prijs bij geselecteerde tier), modal en
   upsell-kaarten; de kaart toont alléén prijs + bespaarregel. */
.gz-bundle.gz-salon .tier-old-price { display: none !important; }
.gz-bundle.gz-salon .gz-save-line {
	font-family: var(--gz-sans); font-size: 11px; font-weight: 600; color: var(--gz-moss);
	white-space: nowrap;
}
.gz-bundle.gz-salon .tier-saving-label { display: none !important; }
.gz-bundle.gz-salon .gift-section { display: none !important; }

/* ---------- ATC / Klarna / meta ---------- */
.gz-klarna { margin: 0; text-align: center; font-size: 11.5px; color: var(--gz-muted); }
.gz-klarna ins, .gz-klarna b { text-decoration: none; color: var(--gz-ink); font-weight: 600; }
/* Snippet #67 zet inline .klarna-price{font-size:14px;line-height:1.4;gap:8px}
   + eigen icon-maat. Overrulen naar de TRUSTBAR-look (1 okt, owner: "net zo
   als trust icons"): logo vóór de tekst (snippet rendert tekst→logo; order
   draait dat in de flex-container), webp-wordmark op trust-icoon-hoogte
   (17px, breedte auto), tekst zelfde stijl als trust-labels (body, 500).
   Instrument Sans expliciet voor kit-proofness. */
.gz-klarna .klarna-price {
	font-family: var(--gz-sans) !important;
	font-size: 12px !important;
	line-height: 1.35 !important;
	gap: 7px !important;
	color: var(--gz-body) !important;
	font-weight: 500;
	/* margin 0: shortcode-eigen <style> zet margin-bottom 8px — duwde de
	   tekst omhoog in de gecentreerde regel (owner "klarna hoger"). */
	margin: 0 !important;
	display: flex; flex-wrap: wrap; align-items: center;
}
.gz-klarna .klarna-price .icon-container {
	order: -1; margin: 0; display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 20px; width: 20px; height: 20px; /* zelfde icontegel als trust-items = gelijke hoogte/uitlijning */
}
.gz-klarna .klarna-price img { height: 17px !important; width: auto !important; }
.gz-klarna #installment-amount { color: inherit; font-weight: inherit; }
.gz-atc { margin-top: 8px; }
.gz-atc .single_add_to_cart_button {
	display: block; width: 100%; min-height: 56px;
	border: 0 !important; border-radius: var(--gz-r-md) !important;
	background: var(--gz-pine) !important; color: var(--gz-ivory) !important;
	font-family: var(--gz-sans) !important; font-size: 17px !important; font-weight: 700 !important;
	cursor: pointer; letter-spacing: .01em;
	box-shadow: 0 12px 28px rgba(34, 57, 44, .25) !important;
}
.gz-atc .single_add_to_cart_button:hover:not(:disabled) { background: var(--gz-pine-deep) !important; }
/* Geen aantalveld: V6 heeft een full-width CTA; het formulier stuurt qty=1. */
.gz-atc .quantity,
.gz-atc .qty,
.gz-atc form.cart label { display: none !important; }
.gz-atc form.cart { display: block; margin: 0; }
/* Eén doorlopende meta-rij: 4 icoon-items + Klarna als laatste flex-item.
   Wrapt natuurlijk → max 2 regels op elk viewport en elke tier. */
.gz-menu-meta {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 4px 14px; font-size: 12px; color: var(--gz-muted); margin: 8px 0 0; padding: 0;
}
.gz-menu-meta .gz-ok { color: var(--gz-body); font-weight: 500; white-space: nowrap; }
/* Klarna (1 okt ronde 4, owner): desktop = gewoon flex-item in de trustrij —
   wrapt natuurlijk naar een tweede gecentreerde regel (containers gap),
   geen geforceerde eigen regel meer. Mobiel houdt de eigen regel (blok
   onderaan: grid-column 1/-1). */
.gz-menu-meta .gz-klarna {
	display: inline-flex; align-items: center;
	margin: 0; font-size: 11.5px; color: var(--gz-muted); white-space: nowrap;
}
/* Trust-meta met iconen (1 okt, owner: "trusticons on desktop nicely"):
   élk item = vaste 18px icontegel (svg 15px stroke-2 pine) + label, flex
   gecentreerd — desktop één gecentererde regel; mobiel 2×2-grid + Klarna
   als eigen regel (mobiel-blok onderaan). Vaste tegelmaat: viewBox-
   verschillen van de svg's mogen de spacing nooit bepalen. */
.gz-menu-meta .gz-ok { display: inline-flex; align-items: center; gap: 7px; }
.gz-menu-meta .gz-meta-ic {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 20px; width: 20px; height: 20px; color: var(--gz-pine);
}
.gz-menu-meta .gz-meta-ic svg { width: 17px; height: 17px; display: block; }
.gz-menu-meta .gz-meta-ic--truck svg { width: 16px; height: 16px; }
/* Trustbar-divider desktop (1 okt, owner "strakheid"): hairline tussen de
   inline items — subtiel 1px, nooit tabel-gevoel. */
@media (min-width: 1024px) {
	.gz-menu-meta .gz-ok + .gz-ok::before,
	.gz-menu-meta .gz-klarna::before {
		content: ""; flex: 0 0 1px; width: 1px; height: 13px;
		background: var(--gz-line); margin-right: 7px; align-self: center;
	}
}
/* Kaart-subtekst: korte mobiele variant (rvs) — standaard alleen de lange;
   het mobiele blok wisselt, :has-guard houdt families zonder variant op base. */
.gz-bundle.gz-salon .tier-contents-kort { display: none; }

/* ---------- Accordions onder de buybox ---------- */
.gz-accs { margin-top: 12px; border-top: 1px solid var(--gz-line); }
.gz-accs details { border-bottom: 1px solid var(--gz-line); }
.gz-accs summary {
	list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px;
	padding: 11px 2px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--gz-ink);
}
.gz-accs summary::-webkit-details-marker { display: none; }
.gz-accs summary::after { content: "+"; font-size: 16px; color: var(--gz-moss); font-weight: 400; }
.gz-accs details[open] summary::after { content: "–"; }
.gz-accs .gz-acc-body { padding: 0 2px 12px; font-size: 13px; line-height: 1.55; }
.gz-accs ul { list-style: none; display: grid; gap: 4px; margin: 0 0 8px; padding: 0; }
.gz-accs li { display: flex; gap: 8px; }

/* ---------- USP-bar ---------- */
.gz-uspbar {
	background: var(--gz-pine); color: var(--gz-ivory);
	border-radius: var(--gz-r-lg); margin-top: 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	padding: 15px 28px;
}
.gz-uspbar span { font-size: 13.5px; font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; gap: 9px; }
.gz-uspbar i { font-style: normal; color: var(--gz-amber); }

/* ---------- Story (probleem → oplossing, 3-NL autoplay) ---------- */
.gz-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; padding-top: 84px; }
.gz-story-media { border-radius: var(--gz-r-lg); overflow: hidden; box-shadow: var(--gz-shadow); background: #fff; }
.gz-story-media .gz-video { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gz-story-points { list-style: none; display: grid; gap: 11px; margin: 24px 0 0; padding: 0; }
.gz-story-points li { display: flex; gap: 11px; font-size: 15.5px; align-items: flex-start; }

/* ---------- Donkere resultaat-sectie (before/after + 2-NL demo + stats) ---------- */
.gz-dark-grid { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 72px; align-items: center; }
/* BA-foto heeft eigen alpha-kanaal: geen wit kader/schaduw — blent op het pine. */
.gz-dark-grid > div:first-child { max-width: 320px; justify-self: center; }
.gz-ba-frame { text-align: center; }
.gz-ba-frame img { width: 100%; max-width: 300px; margin: 0 auto; }
.gz-ba-labels { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.gz-ba-labels .voor { color: var(--gz-muted-dark); }
.gz-ba-labels .na { color: var(--gz-amber); }
.gz-pdp .gz-demo-poster { width: 100%; height: 190px; object-fit: cover; opacity: .45; display: block; }
.gz-demo-inner { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px; padding: 0 26px; color: var(--gz-ivory); }
.gz-demo-inner b { display: block; font-size: 16px; font-weight: 600; color: var(--gz-ivory); }
.gz-demo-inner span.gzip-sub { font-size: 13.5px; color: var(--gz-muted-dark); }
/* margin longhand: idem ul-inspringing-fix — stats flush met bandinhoud. */
.gz-dark-stats { display: flex; gap: 0; margin: 38px 0 0; border-top: 1px solid var(--gz-line-dark); padding: 0; list-style: none; }
.gz-dark-stats li { flex: 1; padding: 20px 8px 0; }
.gz-dark-stats li:first-child { padding-left: 0; }
.gz-dark-stats li + li { border-left: 1px solid var(--gz-line-dark); padding-left: 22px; }
.gz-dark-stats b { display: block; font-family: var(--gz-disp); font-size: 27px; font-weight: 560; color: var(--gz-ivory); }
.gz-dark-stats span { font-size: 12.5px; color: var(--gz-muted-dark); }

/* ---------- Rassen-band ---------- */
.gz-breed { display: flex; align-items: center; gap: 36px; }
.gz-breed img { width: 168px; height: 168px; border-radius: var(--gz-r-md); object-fit: cover; flex: 0 0 168px; box-shadow: var(--gz-shadow); }
.gz-breed-title { font-family: var(--gz-disp); font-size: clamp(20px, 2.3vw, 27px); color: var(--gz-ink); font-weight: 560; line-height: 1.3; }
.gz-breed p { margin: 8px 0 0; font-size: 14.5px; }

/* ---------- Benefits (6 kaarten) ---------- */
.gz-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; list-style: none; padding: 0; }
.gz-benefit {
	background: var(--gz-card); border: 1px solid var(--gz-line);
	border-radius: var(--gz-r-md); padding: 24px 22px;
}
.gz-benefit-num { font-size: 11.5px; letter-spacing: .14em; color: var(--gz-amber); font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 12px; }
.gz-benefit b { display: block; font-family: var(--gz-disp); font-size: 18.5px; font-weight: 600; color: var(--gz-ink); margin-bottom: 6px; }
.gz-benefit p { font-size: 14px; margin: 0; }

/* ---------- Videoband (4-NL + 5-NL) ---------- */
.gz-vband { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; }
.gz-vcard { background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: var(--gz-r-md); overflow: hidden; box-shadow: var(--gz-shadow); }
.gz-vcard video { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #fff; }
.gz-vcard div { padding: 16px 20px 18px; }
.gz-vcard b { display: block; font-family: var(--gz-disp); font-size: 17px; font-weight: 600; color: var(--gz-ink); margin-bottom: 3px; }
.gz-vcard span { font-size: 13.5px; }

/* ---------- Comparison (tabel) ---------- */
.gz-compare { margin-top: 40px; background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: var(--gz-r-lg); overflow: hidden; box-shadow: var(--gz-shadow); }
/* margin-reset: Astra/WP-basis geeft tabellen margin-bottom 1,5em — binnen
   de kaart werd dat een ~22px witte strip onder de laatste rij. */
.gz-compare table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0; }
.gz-compare th, .gz-compare td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--gz-line); }
.gz-compare tr:last-child td { border-bottom: 0; }
.gz-compare thead th { font-family: var(--gz-disp) !important; font-size: 16.5px; font-weight: 600; color: var(--gz-ink); background: var(--gz-paper); }
.gz-compare thead th.gz-col-us { background: var(--gz-pine); color: var(--gz-ivory) !important; }
.gz-compare td.gz-col-us { background: rgba(71, 112, 90, .07); color: var(--gz-ink); font-weight: 600; }
.gz-compare td:first-child { color: var(--gz-muted); font-weight: 600; font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Reviews ---------- */
.gz-reviews { padding-top: 84px; }
.gz-review-head { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.gz-review-avg { font-family: var(--gz-disp); font-size: clamp(72px, 8vw, 116px); font-weight: 560; color: var(--gz-ink); line-height: .9; letter-spacing: -.03em; display: block; }
.gz-review-count { font-size: 15px; color: var(--gz-body); display: block; margin-top: 4px; }
.gz-review-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; }
.gz-review {
	background: var(--gz-card); border: 1px solid var(--gz-line);
	border-radius: var(--gz-r-md); padding: 26px 24px;
	display: flex; flex-direction: column; gap: 12px;
}
.gz-review-text { font-family: var(--gz-disp); font-size: 17px; color: var(--gz-ink); line-height: 1.42; quotes: "“" "”"; font-weight: 480; margin: 0; }
.gz-review-foot { margin-top: auto; font-size: 13px; color: var(--gz-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gz-review-foot b { color: var(--gz-ink); }
.gz-review-verified { display: inline-block; color: var(--gz-pine); font-size: 10.5px; font-weight: 800; background: var(--gz-moss-soft); padding: 2.5px 9px; border-radius: 999px; letter-spacing: .03em; }

/* ---------- Review-slider + fotokaarten (28 sep, owner-review): één gemengde
   lijst — fotokaarten (geauditeerde whitelist) tussen de tekstkaarten;
   scroll-snap-strip + pijlknoppen, geen aparte kop/sterren. ---------- */
.gz-review-slider { position: relative; }
.gz-review-list--slide { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.gz-review-list--slide::-webkit-scrollbar { display: none; }
.gz-review-list--slide .gz-review { flex: 0 0 clamp(280px, 29.5%, 372px); scroll-snap-align: start; }
/* Zachte fade alleen waar iets te scrollen valt (owner-review: eerste kaart
   mag z'n linkerrand houden): pdp.js zet .gz-kan-links/.gz-kan-rechts op de
   strip; geen van beide = geen fade (alles past). */
.gz-review-list--slide.gz-kan-rechts:not(.gz-kan-links) { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%); }
.gz-review-list--slide.gz-kan-links:not(.gz-kan-rechts) { -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 28px), transparent 100%); }
.gz-review-list--slide.gz-kan-links.gz-kan-rechts { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.gz-photo-imgs { display: flex; gap: 8px; flex-wrap: wrap; }
.gz-photo-imgs img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--gz-line-soft); display: block; }
/* Controls: zélfde look als de UGC/productgalerij-pijlen (owner-voorkeur):
   basis komt van .gz-gal-arrow (randloos, doorschijnend ivoor, pine-chevron,
   soft shadow) — hier alléén maat + positie. Vorm-reset blijft nodig tegen
   Astra's customizer-button-global (padding 15px 30px → ovale pillen). */
.gz-review-slider .gz-slide-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; min-width: 38px; max-width: 38px; padding: 0; border-radius: 50%; aspect-ratio: 1 / 1; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; }
.gz-review-slider .gz-slide-btn svg { display: block; width: 15px; height: 15px; flex: 0 0 auto; }
/* Desktop: zwevend óver de kaartrand (~20px overlap, binnen de 24px kaart-
   padding) — raakt content nooit, maar "hangt" duidelijk aan de strip. */
.gz-review-slider .gz-slide-prev { left: -20px; }
.gz-review-slider .gz-slide-next { right: -20px; }

/* ---------- Objections ---------- */
/* margin longhand: globale ul-inspringing (48px) verschoof de koplijnen
   48px rechts van de titel (owner-review "lijnen centreren") — 0 ze 'm. */
.gz-objs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0 0; list-style: none; padding: 0; }
.gz-obj { border-top: 2.5px solid var(--gz-ink); padding-top: 20px; }
.gz-obj h3 { font-style: italic; font-weight: 520; margin: 0 0 10px; }
.gz-obj p { font-size: 14.5px; margin: 0; }
.gz-obj p b { color: var(--gz-ink); }

/* ---------- FAQ ---------- */
.gz-faq { padding-top: 84px; text-align: center; }
.gz-faq-list { text-align: left; }
.gz-faq-list { max-width: 760px; margin: 36px auto 0; }
.gz-faq-item { border-bottom: 1px solid var(--gz-line); }
.gz-faq-item summary {
	list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 20px 4px; cursor: pointer;
	font-family: var(--gz-disp) !important; font-size: 18.5px !important; font-weight: 560 !important;
	color: var(--gz-ink) !important; line-height: 1.25 !important;
}
.gz-faq-item summary::-webkit-details-marker { display: none; }
.gz-faq-item summary::after { content: "+"; font-family: var(--gz-sans); font-size: 22px; color: var(--gz-moss); font-weight: 400; transition: transform .2s; }
.gz-faq-item[open] summary::after { transform: rotate(45deg); }
.gz-faq-answer { padding: 0 4px 22px; font-size: 15px; max-width: 60ch; }

/* ---------- Garantie (donker) ---------- */
.gz-guar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 44px 0 0; border-top: 1px solid var(--gz-line-dark); list-style: none; padding: 0; }
.gz-guar-grid li { padding: 26px 26px 0; }
/* Eerste kolom flush met lijn + titel (owner-review "tekst ook links"). */
.gz-guar-grid li:first-child { padding-left: 0; }
.gz-guar-grid li + li { border-left: 1px solid var(--gz-line-dark); }
.gz-guar-grid b { display: block; font-family: var(--gz-disp); font-size: 20px; font-weight: 600; color: var(--gz-ivory) !important; margin-bottom: 6px; }
.gz-guar-grid span { font-size: 14px; color: var(--gz-muted-dark); }
.gz-guar-cta {
	margin-top: 52px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
	background: var(--gz-pine-deep); border: 1px solid var(--gz-line-dark);
	border-radius: var(--gz-r-lg); padding: 28px 32px; flex-wrap: wrap;
}
.gz-guar-cta .gz-guar-t { font-family: var(--gz-disp); font-size: 24px; color: var(--gz-ivory); font-weight: 600; }
.gz-guar-cta .gz-guar-p { font-size: 14px; margin-top: 3px; color: var(--gz-muted-dark); }
.gz-btn-ivory {
	border: 0; border-radius: var(--gz-r-md); background: var(--gz-ivory); color: var(--gz-pine);
	font-family: var(--gz-sans); font-size: 16px; font-weight: 700; padding: 17px 30px; cursor: pointer;
}
.gz-course { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.gz-course h3 { margin: 0 0 8px; }
.gz-course strong { color: var(--gz-ivory); }
.gz-course-value { color: var(--gz-amber); font-size: 15px; }
.gz-video-facade-sm { position: relative; border-radius: var(--gz-r-md); overflow: hidden; cursor: pointer; border: 1px solid var(--gz-line-dark); background: var(--gz-pine-deep); padding: 0; width: 100%; aspect-ratio: 16 / 9; }
.gz-pdp .gz-video-facade-sm .gz-demo-poster { opacity: .45; height: 100%; object-fit: cover; display: block; }
.gz-video-facade-sm .gz-video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--gz-pine-deep); }
.gz-video-facade-sm .gz-demo-inner b { color: var(--gz-ivory); }
.gz-steps-note a { color: var(--gz-pine) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#gz-course { scroll-margin-top: 96px; }
.gz-course-video-wrap { cursor: default; }

/* ---------- Cross-sell ---------- */
/* Onderaan-pagina-sectie: .gz-section kent alléén padding-top (elke volgende
   sectie brengt zelf lucht mee) — als laatste sectie eindigde deze flush op
   de pagina-rand; vandaar symmetrische eigen bottom-padding (2 okt, owner). */
.gz-crosssell { padding-top: 84px; padding-bottom: 84px; }
.gz-crosssell-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; }
.gz-cross-card {
	background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: var(--gz-r-md);
	overflow: hidden; text-decoration: none; display: grid; grid-template-columns: 120px 1fr;
	align-items: center; gap: 18px; padding: 16px; box-shadow: var(--gz-shadow); color: var(--gz-body);
}
.gz-cross-card img { border-radius: var(--gz-r-sm); }
.gz-cross-title { display: block; font-family: var(--gz-disp); font-size: 17px; font-weight: 600; color: var(--gz-ink); }
.gz-cross-price { display: block; font-size: 14px; color: var(--gz-moss); font-weight: 700; margin-top: 4px; }
.gz-cross-cta { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--gz-moss); text-decoration: underline; }
.gz-crosssell-note { margin-top: 16px; font-size: 13px; color: var(--gz-muted); }

/* ---------- Bundel-upsell (tier-PDP's): compacte upgradekaarten ---------- */
.gz-crosssell--upsell[hidden] { display: none !important; }
.gz-crosssell-sub { margin: -8px 0 0; font-size: 14.5px; color: var(--gz-muted); }
.gz-up-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 32px; }
.gz-up-card {
	background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: var(--gz-r-md);
	box-shadow: var(--gz-shadow); padding: 16px;
}
.gz-up-thumbs { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.gz-up-thumb-set { display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 64px; }
.gz-up-thumb {
	width: 56px; height: 56px; object-fit: cover;
	border: 1px solid var(--gz-line); border-radius: var(--gz-r-sm); background: #fff;
}
.gz-up-thumb-cap { font-family: var(--gz-sans); font-size: 10.5px; font-weight: 600; color: var(--gz-muted); text-align: center; line-height: 1.2; }
.gz-up-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gz-up-name { margin: 0; font-family: var(--gz-disp); font-size: 17px; font-weight: 600; color: var(--gz-ink); }
.gz-up-tag {
	background: var(--gz-moss-soft); color: var(--gz-pine); font-size: 12px; font-weight: 700;
	padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.gz-up-info {
	margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
	font-family: var(--gz-sans); font-size: 13px; font-weight: 700;
	color: var(--gz-moss); text-decoration: underline;
}
.gz-up-pricing { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0; }
.gz-up-price { font-family: var(--gz-disp); font-size: 22px; font-weight: 600; color: var(--gz-ink); }
.gz-up-was { color: var(--gz-muted); font-size: 13px; font-weight: 400; }
.gz-up-was del { text-decoration: line-through; }
.gz-up-save { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--gz-moss); }
.gz-up-atc {
	display: block; width: 100%; min-height: 48px; margin-top: 12px;
	border: 0 !important; background: var(--gz-pine) !important; color: var(--gz-ivory) !important;
	font-family: var(--gz-sans) !important; font-size: 15px !important; font-weight: 700 !important;
	cursor: pointer; letter-spacing: .01em;
}
.gz-up-atc:hover:not(:disabled) { background: var(--gz-pine-deep) !important; }

/* ---------- Sticky ATC ---------- */
/* .gz-sticky zet display:flex — dat verslaat de UA-regel [hidden]{display:none},
   dus het attribuut alléén verbergt niets. Expliciet: */
.gz-sticky[hidden] { display: none !important; }
.gz-sticky {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: rgba(252, 250, 245, .96); backdrop-filter: blur(10px);
	border-top: 1px solid var(--gz-line);
	box-shadow: 0 -10px 34px rgba(23, 33, 27, .12);
	/* Zelfde raster-formule als de banden (x=108 @1440, 28px mobiel). */
	padding: 11px max(28px, calc(50vw - 612px)) calc(11px + env(safe-area-inset-bottom));
	display: flex; align-items: center; gap: 13px; max-width: none;
}
.gz-sticky-thumb { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.gz-sticky-info { display: flex; flex-direction: column; min-width: 0; }
.gz-sticky-name { font-size: 12px; color: var(--gz-muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-sticky-price { font-family: var(--gz-disp); font-size: 18px; font-weight: 600; color: var(--gz-ink); }
.gz-sticky-price del { font-family: var(--gz-sans); font-size: 11px; color: var(--gz-muted); opacity: .8; }
/* Kit-proof: .elementor-kit-4 button overschrijft anders bg (navy #002842)
   + color + weight; identiek behandelen als main-ATC voor visuele consistentie. */
.gz-sticky-atc {
	margin-left: auto; border: 0 !important; background: var(--gz-pine) !important; color: var(--gz-ivory) !important;
	font-family: var(--gz-sans) !important; font-size: 15px !important; font-weight: 700 !important;
	padding: 12px 26px !important; min-height: 44px; border-radius: var(--gz-r-sm) !important; cursor: pointer; white-space: nowrap;
	letter-spacing: .01em;
}
.gz-sticky-atc:hover { background: var(--gz-pine-deep) !important; }

/* Sticky thumb-wrapper + set-badge (getoond bij tier 2/3 selectie). */
.gz-sticky-thumb-wrap { position: relative; flex: 0 0 auto; }
.gz-sticky-badge[hidden] { display: none; }
.gz-sticky-badge {
	position: absolute; top: -6px; right: -6px;
	background: var(--gz-pine); color: var(--gz-ivory);
	font-family: var(--gz-sans); font-size: 10.5px; font-weight: 700; line-height: 1;
	padding: 4px 6px; min-width: 22px; text-align: center;
	border-radius: 999px; border: 2px solid var(--gz-card);
	box-shadow: 0 2px 6px rgba(23, 33, 27, .25);
}

/* Uniforme waiting-loader: verschijnt op .loading (Woo ajax add-to-cart) op
   BEIDE knoppen zodat sticky en main hetzelfde feedback-visueel tonen. */
.gz-atc .single_add_to_cart_button.loading,
.gz-up-atc.loading,
.tier-modal .modal-cta.loading,
.gz-sticky-atc.loading { opacity: .75 !important; pointer-events: none; position: relative; }
.gz-atc .single_add_to_cart_button.loading::after,
.gz-up-atc.loading::after,
.tier-modal .modal-cta.loading::after,
.gz-sticky-atc.loading::after {
	content: ''; display: inline-block; vertical-align: -2px; margin-left: 10px;
	width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid currentColor; border-top-color: transparent;
	animation: gz-atc-spin .6s linear infinite;
}
@keyframes gz-atc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.gz-atc .single_add_to_cart_button.loading::after,
	.gz-up-atc.loading::after,
	.tier-modal .modal-cta.loading::after,
	.gz-sticky-atc.loading::after { animation: none; border-top-color: currentColor; opacity: .4; }
}

/* ---------- Notices ---------- */
.gz-pdp .woocommerce-notices-wrapper { margin: 10px 0 0; }
.gz-pdp .woocommerce-message, .gz-pdp .woocommerce-info, .gz-pdp .woocommerce-error {
	background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: var(--gz-r-md);
	padding: 12px 18px; font-size: 14px;
}

/* ============ MOBIEL ============ */
@media (max-width: 1023px) {
	/* 120px -> 24px -> 0 (zelfde fix als de basisregel hierboven): sticky-ATC
	   verbergt zich zodra de footer in beeld is, en de ivoor-sluitstrook
	   boven de footer bij verborgen upsell-sectie is weg (2 okt, owner). */
	.gz-pdp { padding: 0; }
	/* Gutter 28px overal (17 sep, owner-besluit): eerst stonden PDP-secties
	   op 20px terwijl header/footer 28px gebruiken — harmoniseren voor één
	   consistente mobiele gutter. */
	.gz-pdp > * { padding-left: 28px; padding-right: 28px; }
	.gz-pdp > .gz-uspbar,
	.gz-pdp > .gz-band,
	.gz-pdp > .gz-band-flat,
	.gz-pdp > .gz-on-dark { padding-left: 28px; padding-right: 28px; }
	.gz-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "gallery" "buy"; column-gap: 0; margin-top: 10px; }
	.gz-gallery { position: static; margin-top: 6px; }
	.gz-gallery-track { border-radius: var(--gz-r-md); }
	/* Alleen de productgalerij verbergt haar pijltjes op mobiel; UGC-pijltjes (.gz-ugc-arrow) blijven zichtbaar. */
	.gz-gallery .gz-gal-arrow { display: none; }
	.gz-slide { aspect-ratio: auto; height: 284px; }
	.gz-slide-img { object-fit: contain; background: #fff; }
	.gz-thumb { flex: 0 0 54px; height: 54px; }
	.gz-gallery-nav { overflow-x: auto; padding-bottom: 4px; }
	.gz-title { font-size: 26px !important; }
	.gz-sub { font-size: 14.5px; margin-bottom: 10px; }
	.gz-price-wrap .price ins, .gz-price-wrap .price > span:only-child { font-size: 30px; }
	.gz-price-wrap .price del { font-size: 14px; }
	.gz-fromline { margin-bottom: 12px; }
	.gz-usps { gap: 5px; margin-bottom: 14px; }
	.gz-usps li { font-size: 13px; }
	.gz-usps .gz-check { width: 17px; height: 17px; margin-top: 3px; }
	/* USP-balk mobiel: 2-koloms raster — rechterkolom verticaal gelijk uitgelijnd,
	   vijfde USP rechtsonder; alles zichtbaar in één oogopslag. */
	.gz-uspbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 15px 28px; margin-top: 16px; align-items: center; }
	.gz-uspbar span { font-size: 12.5px; gap: 7px; }
	.gz-uspbar span:nth-child(5) { grid-column: 2; }
	.gz-section { padding-top: 56px; }
	.gz-crosssell { padding-bottom: 56px; }
	.gz-band { padding: 34px 28px; }
	.gz-on-dark { padding: 44px 28px; border-radius: var(--gz-r-md); }
	.gz-story, .gz-dark-grid, .gz-course { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.gz-story { padding-top: 56px; }
	.gz-benefit-grid, .gz-review-list:not(.gz-review-list--slide), .gz-objs, .gz-vband, .gz-crosssell-grid, .gz-up-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.gz-review-list--slide .gz-review { flex-basis: 84%; }
	.gz-review-list--slide.gz-kan-rechts:not(.gz-kan-links) { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 16px), transparent 100%); }
	.gz-review-list--slide.gz-kan-links:not(.gz-kan-rechts) { -webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 16px), transparent 100%); }
	.gz-review-list--slide.gz-kan-links.gz-kan-rechts { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); }
	/* Mobiel: zelfde gal-arrow look, UGC-maat (32px/13px); knoppen in de goot
	   + alléén over de kaart-padding (content begint ~50px in de kaart). */
	.gz-review-slider .gz-slide-btn { width: 32px; height: 32px; min-width: 32px; max-width: 32px; }
	.gz-review-slider .gz-slide-btn svg { width: 13px; height: 13px; }
	.gz-review-slider .gz-slide-prev { left: -14px; }
	.gz-review-slider .gz-slide-next { right: -14px; }
	.gz-review-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	/* Vergelijking in één oogopslag (géén horizontale scroll): compacte
	   cellen, teksten wrappen binnen 2 regels — beide kolommen altijd zichtbaar. */
	.gz-compare { overflow-x: visible; }
	.gz-compare table { min-width: 0; font-size: 12.5px; }
	.gz-compare th, .gz-compare td { padding: 11px 9px; }
	.gz-compare thead th { font-size: 13px; padding: 12px 9px; }
	.gz-compare td:first-child { font-size: 10.5px; letter-spacing: .03em; }
	.gz-guar-grid { grid-template-columns: minmax(0, 1fr); border-top: 0; }
	.gz-guar-grid li { border-top: 1px solid var(--gz-line-dark); padding: 22px 4px 0; }
	.gz-guar-grid li + li { border-left: 0; padding-left: 4px; }
	.gz-guar-cta { padding: 24px 22px; }
	.gz-dark-stats { flex-wrap: wrap; gap: 18px 0; }
	.gz-dark-stats li { flex: 1 1 44%; }
	.gz-dark-stats li + li { border-left: 0; padding-left: 8px; }
	/* ============ Tier-kaarten mobiel — compacte kop + detail-rij (1 okt) ==
	   KOP    : [stip | titel + i-icoon …… prijs]
	   DETAIL : [thumbs | subtekst] over de volle breedte, direct onder de kop.
	   Bespaarregel staat ONDER de prijs (owner 2 okt), maar ABSOLUUT — in de
	   flow zou het prijblok de koprij hoger maken dan de titel en de witruimte
	   titel→thumbs terugbrengen. Zo blijft de koprij titelhoogte en hangt de
	   besparing in de bovenkant van de detail-band, rechts onder de prijs
	   (row-gap 7px, owner 2 okt: lucht tussen besparing en 2-regel-subtekst).
	   Badge = absolute hoeklabel half over de rand; 12px kaartmarge herbergt
	   de overhang. padding !important: pre-salon base zet 9px 4px !important. */
	.gz-pdp .gz-menu-title { font-size: 15px !important; }
	.gz-bundle.gz-salon .magic-tier-row {
		grid-template-columns: 15px minmax(0, 1fr) auto;
		grid-template-areas:
			"dot name   price"
			".   detail detail";
		column-gap: 10px !important; row-gap: 7px !important;
		min-height: 0; padding: 5px 12px !important; margin: 0 0 12px !important;
	}
	/* Stip top-uitgelijnd mét de titel (+3px optisch). */
	.gz-bundle.gz-salon .magic-tier-row::before {
		width: 15px; height: 15px; align-self: start; margin-top: 3px;
	}
	/* min-width 0: engine zet 110px op de prijskolom. Kolom = alléén de prijs
	   in de flow (koprij = titelhoogte); de bespaarregel is absolute. */
	.gz-bundle.gz-salon .tier-left { align-self: start; }
	.gz-bundle.gz-salon .tier-right {
		min-width: 0 !important; align-self: start; padding-top: 4px;
		flex-direction: column; align-items: flex-end; gap: 2px;
	}
	/* Bespaarregel onder de prijs (owner 2 okt "altijd onder, niet naast"):
	   absolute t.o.v. de kaart, zelfde anchor als de badge. Top = prijs-
	   onderkant + 2px lucht (rij-padding 5 + kolom-padding 4 + prijsregel 20
	   = 33 t.o.v. border-box; absolute meet vanaf padding-box = −1,5 border).
	   Right 12px = content-rand: save sluit rechts af met de prijs. */
	.gz-bundle.gz-salon .gz-save-line {
		position: absolute; top: 33.5px; right: 12px;
	}
	/* Detail-rij (wrapper uit pdp.js): thumbs links, subtekst ernaast,
	   verticaal gecentreerd — over de volle kaartbreedte onder de kop. */
	.gz-bundle.gz-salon .gz-card-detail {
		grid-area: detail;
		display: flex; align-items: center; gap: 10px; min-width: 0;
	}
	.gz-bundle.gz-salon .tier-thumbnails { gap: 5px !important; flex: 0 0 auto; }
	.gz-bundle.gz-salon .tier-thumb { width: 50px; height: 50px; border-radius: 11px; }
	.gz-bundle.gz-salon .tier-popular-badge,
	.gz-bundle.gz-salon .gz-best-value {
		font-size: 10px !important; padding: 2.5px 8px !important;
		top: -9px;
	}
	.gz-bundle.gz-salon .tier-grid-name { font-size: 16px !important; line-height: 1.25; }
	.gz-bundle.gz-salon .tier-title-stack { gap: 5px; }
	.gz-bundle.gz-salon .tier-price { font-size: 16.5px !important; line-height: 1.2; }
	/* text-wrap: balance (2 okt, owner "evenredig over 2 lijnen"): verdeelt
	   korte subteksten gelijkmatig over hun regels i.p.v. één lange + staart;
	   no-op zolang het op één regel past. Valt terug op natuurlijke wrap. */
	.gz-bundle.gz-salon .tier-contents { font-size: 11.5px; line-height: 1.35; text-wrap: balance; }
	.gz-bundle.gz-salon .gz-save-line { font-size: 11px; line-height: 1.2; }
	.gz-atc .single_add_to_cart_button { min-height: 50px; font-size: 15.5px !important; }
	.gz-menu-meta { font-size: 11px; gap: 3px 10px; }
	.gz-accs summary { font-size: 12.5px; padding: 10px 2px; }
	.gz-breed { gap: 20px; }
	.gz-breed img { width: 104px; height: 104px; flex-basis: 104px; }
	.gz-breed-title { font-size: 18px; }
	.gz-sticky-name { font-size: 11px; }
	.gz-sticky-price { font-size: 16px; }
	.gz-sticky-atc { padding: 12px 18px; font-size: 14px; }
}

/* ============ Reducerede beweging ============ */
@media (prefers-reduced-motion: reduce) {
	.gz-pdp *, .gz-pdp *::before, .gz-pdp *::after {
		transition: none !important;
		scroll-behavior: auto !important;
		animation: none !important;
	}
}

/* ============ VIEWPORT-CRO: must-sees binnen de eerste viewport ============ */
/* Korte laptops (h<=860): miniaturen uit de selectierij, subregel weg,
   kompacte kop — zodat de ATC + volledige tier-keuze in fold-1 vallen. */
@media (min-width: 1024px) and (max-height: 860px) {
	.gz-pdp .gz-title { font-size: 32px !important; }
	.gz-sub { display: none; }
	.gz-hero { margin-top: 2px; }
	/* Kaarten (V7) zijn compact én vast: lichte verdichting volstaat. */
	.gz-bundle.gz-salon .magic-tier-row { min-height: 58px; padding: 6px 12px; row-gap: 1px !important; }
	.gz-bundle.gz-salon .tier-contents { font-size: 12px; }
	.gz-bundle.gz-salon .tier-thumb { width: 44px; height: 44px; }
}
/* Zeer korte viewports (h<=740): ook de USPs pas na de beslissing tonen. */
@media (min-width: 1024px) and (max-height: 740px) {
	.gz-usps { display: none; }
}
/* Mobiel: menu-titel + eerste tier in fold-1 — galerij compacter. */
@media (max-width: 1023px) {
	.gz-slide { height: 258px; }
	.gz-thumb { flex-basis: 48px; height: 48px; }
	.gz-usps li { font-size: 12.5px; }
	.gz-hero { margin-top: 4px; }
}
@media (max-width: 1023px) and (max-height: 700px) {
	.gz-sub { display: none; }
}

/* Band 861-920px hoogte (o.a. 1440x900): lichtere verdichting — miniaturen
   kleiner i.p.v. verborgen, zodat de ATC in fold-1 valt. */
@media (min-width: 1024px) and (max-height: 920px) and (min-height: 861px) {
	/* Kaarten dragen méér info dan de oude rijen (inhoud+cadeau altijd
	   zichtbaar) — daarom hier extra verdichting + sub-regel weg zodat de
	   ATC in fold-1 blijft (1440x900 is de referentie). */
	.gz-bundle.gz-salon .magic-tier-row { min-height: 62px; padding: 7px 12px; row-gap: 1px !important; }
	.gz-bundle.gz-salon .tier-grid-name { font-size: 16px !important; }
	.gz-bundle.gz-salon .tier-price { font-size: 18px !important; }
	.gz-bundle.gz-salon .tier-contents { font-size: 12px; }
	.gz-bundle.gz-salon .gz-save-line { font-size: 10.5px; }
	.gz-bundle.gz-salon .tier-thumb { width: 50px; height: 50px; }
	.gz-sub { display: none; }
	.gz-pdp .gz-title { font-size: 34px !important; }
	.gz-usps { margin-bottom: 10px; }
}
/* Mobiel: laatste 25px — menu-titel + eerste tier in fold-1. */
@media (max-width: 1023px) {
	.gz-slide { height: 240px; }
	.gz-gallery-nav { margin-top: 8px; }
	.gz-usps { margin-bottom: 10px; }
	.gz-breadcrumb { padding-top: 6px; }
}

/* Laatste slag 861-920h: kop iets compacter — ATC volledig in fold-1.
   Fromline blijft nu wel zichtbaar (user-eis: altijd op eigen regel). */
@media (min-width: 1024px) and (max-height: 920px) and (min-height: 861px) {
	.gz-pdp .gz-title { font-size: 34px !important; }
	.gz-usps { gap: 5px; }
}
/* Mobiel: Solo-rij volledig in fold-1. */
@media (max-width: 1023px) {
	.gz-slide { height: 228px; }
	.gz-gallery-nav { margin-top: 6px; }
}

/* Mobiel-slotstuk: Solo-rij volledig in fold-1. */
@media (max-width: 1023px) {
	.gz-slide { height: 218px; }
}

/* ============ Mobiele galerij-fijnslijp ============ */
/* Volledige set zichtbaar: contain i.p.v. cover (V6-besluit). */
@media (max-width: 1023px) {
	.gz-slide-img { object-fit: contain; background: #fff; }
}

/* ============ Mobiele CRO-bundelronde (GPT + eigen analyse, 7 punten) ============ */
@media (max-width: 1023px) {
	.gz-atc { margin-top: 9px; }
	.gz-menu-meta { margin-top: 7px; font-size: 11px; gap: 3px 10px; }
}

/* Prijs blijft op de naamregel: de prijskolom (basis auto) wrapt nooit —
   het kaarten-grid (V7) plaatst hem in een eigen kolom. */

@media (max-width: 1023px) {
	.gz-menu-meta { gap: 3px 9px; }
	.gz-menu-meta .gz-klarna { font-size: 10.5px; }
}

/* ============ Cloudpillo-ronde: mobiele first-viewport (desktop ongewijzigd) ============ */
/* Vier hero-gebieden: desktop zelfde stapeling als voorheen
   (proof boven head boven buy in de rechterkolom). */
.gz-hero {
	grid-template-areas: "gallery proof" "gallery head" "gallery buy";
}
.gz-proof { grid-area: proof; min-width: 0; }
.gz-trustrow-link { text-decoration: none; }
.gz-trustrow-link .gz-stars { margin-right: 4px; }
.gz-usp-short, .gz-sub-short { display: none; }

@media (max-width: 1023px) {
	/* Volgorde: gallery → reviews → titel → prijs → USP's → bundel. */
	.gz-hero { grid-template-areas: "gallery" "proof" "head" "buy"; margin-top: 2px; }
	/* Flush-aligning is desktop-only (header 1280-box); mobiel gewoon gutter. */
	.gz-pdp > .gz-hero, .gz-pdp > .gz-breadcrumb { padding-left: 28px; padding-right: 28px; margin-left: 0; margin-right: 0; max-width: none; }

	/* Gallery visueel prioriteit: groot, volledige compositie (contain). */
	.gz-slide { height: clamp(280px, 88vw, 360px); }
	.gz-gallery-nav { gap: 8px; margin-top: 8px; }
	.gz-thumb { flex-basis: 48px; height: 48px; }

	/* Reviewregel: compact onder de thumbnails, geheel intern klikbaar. */
	.gz-proof { margin: 10px 0 0; }
	.gz-trustrow { font-size: 13px; }

	/* Titel/sub/prijs compact. */
	.gz-breadcrumb { font-size: 11.5px; padding-top: 4px; }
	.gz-pdp .gz-title { font-size: 24px !important; margin: 6px 0 4px; }
	.gz-sub { font-size: 13.5px; margin: 0 0 8px; }
	.gz-sub-long { display: none; }
	.gz-sub-short { display: inline; }
	.gz-price-wrap { gap: 10px; }
	.gz-price-wrap .price ins, .gz-price-wrap .price > span:only-child { font-size: 28px; }
	.gz-price-wrap .price del { font-size: 13px; }
	.gz-price-tag { font-size: 11.5px; padding: 4px 10px; }
	.gz-fromline { font-size: 12px; margin: 0 0 8px; }
	.gz-from-long { display: none; }

	/* USP's: drie ultrakorte regels. */
	.gz-usps { gap: 4px; margin: 0 0 10px; }
	.gz-usps li { font-size: 12.5px; }
	.gz-usp-full { display: none; }
	.gz-usp-short { display: inline; }
	.gz-usps .gz-check { width: 16px; height: 16px; margin-top: 2px; }
}

/* Badge subtieler: kleiner, semi-transparant met blur — valt minder over het product. */
.gz-slide-badge {
	background: rgba(26, 45, 34, .68);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size: 12.5px;
	padding: 6px 13px;
	left: 14px;
	top: 14px;
}
@media (max-width: 1023px) {
	.gz-slide-badge { font-size: 11.5px; padding: 5px 11px; left: 10px; top: 10px; }
}

/* ============ Trustpilot social proof (groen = extern merkbaar bewijs) ============ */
.gz-stars-tp .gz-star.is-on { color: #00b67a; }
.gz-tp-line {
	display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
	font-size: 14px; color: var(--gz-body); margin-top: 8px;
}
.gz-tp-line .gz-stars { font-size: 14px; letter-spacing: 2px; }
@media (max-width: 1023px) {
	.gz-tp-line { font-size: 13px; margin-top: 6px; }
}

/* Primaire actieknoppen volledig rond (pill): consistent met de bestaande
   pill-vocabulair (badge/chips/tag); kaarten en media blijven hoekig. */
.gz-atc .single_add_to_cart_button,
.gz-up-atc,
.gz-sticky-atc,
.gz-btn-ivory { border-radius: 999px !important; }

/* Officiële Trustpilot-sterrenstrip (zelf gehost asset, 4,5/5-weergave). */
.gz-tp-stars {
	height: 16px; width: auto; display: inline-block;
	vertical-align: -2px; margin-right: 2px; flex: 0 0 auto;
}
.gz-trustrow .gz-tp-stars { height: 15px; }

/* Fix: .gz-pdp img (display:block + height:auto) versloeg de sterren-regel
   — hogere specificiteit zet ze netjes inline op vaste hoogte. */
.gz-pdp .gz-tp-stars {
	display: inline-block;
	height: 16px;
	width: auto;
}

/* Trustpilot als enige ratingbron: sectiekop met sterren + tekst op één regel. */
.gz-tp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 30px; }
.gz-tp-head-text { font-size: 15px; color: var(--gz-body); }
.gz-pdp .gz-tp-stars-lg { height: 18px; }
@media (max-width: 1023px) {
	.gz-tp-head { margin: 0 0 22px; }
	.gz-tp-head-text { font-size: 13.5px; }
}

/* Verkoopmomentum onder de prijs: pulserende groene dot (subtiel). */
.gz-sold-pulse {
	display: flex; align-items: center; gap: 7px;
	font-size: 12.5px; color: var(--gz-body); margin: 0 0 10px;
}
.gz-sold-pulse b { color: var(--gz-ink); font-weight: 700; }
.gz-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--gz-moss); position: relative; flex: 0 0 8px;
}
.gz-dot::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: var(--gz-moss); animation: gz-pulse 2.2s ease-out infinite;
}
@keyframes gz-pulse {
	0%   { transform: scale(1); opacity: .55; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.gz-dot::after { animation: none; opacity: .35; }
}
@media (max-width: 1023px) {
	.gz-sold-pulse { font-size: 12px; margin: 0 0 8px; }
}

/* ============ Desktop-viewport-optimalisatie: ATC volledig in fold-1 ============ */
@media (min-width: 1024px) {
	.gz-hero { margin-top: 4px; }
	.gz-breadcrumb { padding-top: 3px; }
	.gz-pdp .gz-title { margin: 3px 0 3px !important; }
	.gz-sub { margin-bottom: 6px; }
	.gz-price-wrap { gap: 10px; }
	.gz-price-wrap .price ins, .gz-price-wrap .price > span:only-child { font-size: 36px; }
	.gz-sold-pulse { margin-bottom: 5px; }
	.gz-usps { gap: 4px; margin-bottom: 8px; }
	.gz-usps li { font-size: 14px; line-height: 1.45; }
	.gz-pdp .gz-menu-title { margin-bottom: 8px !important; }
	.gz-atc { margin-top: 4px; }
	.gz-atc .single_add_to_cart_button { min-height: 50px; }
	/* Trustbar krijgt lucht onder de CTA (1 okt ronde 4): 10 -> 14px. */
	.gz-menu-meta { margin-top: 14px; }
}

/* USP-balk met stroke-iconen (zelfde vocabulaire als de ✓-vinkjes). */
.gz-uspbar i { display: inline-flex; align-items: center; }
.gz-uspbar i svg { width: 15px; height: 15px; display: block; }

/* Prijsblok: geërfde line-height 1.62 gaf 22px dode lucht rond de cijfers —
   strakke regelafstand zoals in het ontwerp. */
.gz-price-wrap .price { line-height: 1.2; }
.gz-price-wrap .price ins,
.gz-price-wrap .price del,
.gz-price-wrap .price > span { line-height: 1.2; }

/* ============ Final CRO-restructurering: 3 stappen + UGC + 4 features ============ */

/* --- 3 stappen --- */
/* 7 okt (owner r3): desktop = compacte 280px-cards LINKS uitgelijnd met
   nummer NAAST de titel; mobiel = nummer gecentreerd boven titel (zie
   media-query). */
.gz-step-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); gap: 18px; padding: 0; margin: 36px 0 0; }
.gz-step { background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: var(--gz-r-md); overflow: hidden; box-shadow: var(--gz-shadow); display: flex; flex-direction: column; }
.gz-step-media { background: #fff; }
/* 7 okt (owner): steps-media in 9:16 — bronclips zijn portret, volledig
   beeld zonder crop; kaarten worden hoger (bewuste keuze, TikTok-formaat). */
.gz-step-media video, .gz-step-media img { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; }
.gz-step-copy { padding: 18px 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; }
.gz-step-num {
	width: 30px; height: 30px; border-radius: 50%; background: var(--gz-pine); color: var(--gz-ivory);
	font-family: var(--gz-disp); font-size: 16px; font-weight: 600;
	display: inline-flex; align-items: center; justify-content: center; grid-row: span 2; align-self: center;
}
.gz-step-copy b { font-family: var(--gz-disp); font-size: 17px; font-weight: 600; color: var(--gz-ink); }
.gz-step-copy p { grid-column: 2; font-size: 13.5px; margin: 0; }
.gz-steps-note { margin-top: 22px; font-size: 13.5px; color: var(--gz-muted); }

/* --- UGC "Echte baasjes": 9:16 UGC-videokaarten (TikTok/Reels-formaat), click-to-play, lazy --- */
/* Warme ivoor-diepe band (gz-band-flat zet breakout/padding maar geen bg). */
.gz-ugc { background: var(--gz-paper-deep); }
.gz-ugc-sub { font-size: 15.5px; color: var(--gz-body); margin: -6px 0 12px; }
.gz-ugc-trust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; font-size: 13.5px; color: var(--gz-muted); }
.gz-ugc-trust b { color: var(--gz-ink); }
/* Desktop: kaarten op één rij (fluid — vullen de container exact);
   --gz-ugc-cols wordt per familie op de track gezet (aantal cards, 8 okt);
   zodra er meer kaarten zijn dan kolommen wordt de rij vanzelf scrollbaar. */
.gz-ugc-track {
	display: grid; grid-auto-flow: column; grid-template-rows: auto;
	grid-auto-columns: calc((100% - (var(--gz-ugc-cols, 6) - 1) * 14px) / var(--gz-ugc-cols, 6));
	gap: 14px;
	overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none;
}
.gz-ugc-track::-webkit-scrollbar { display: none; }
/* Pijltjes op de UGC-rij — spiegel de galerij-pijl (gedeelde .gz-gal-arrow-basis);
   JS verbergt ze aan de uiteinden en zodra de rij niet scrollbaar is. */
.gz-ugc-wrap { position: relative; }
.gz-ugc-arrow { width: 38px; height: 38px; }
.gz-ugc-arrow svg { width: 15px; height: 15px; display: block; }
.gz-ugc-prev { left: -13px; }
.gz-ugc-next { right: -13px; }
.gz-ugc-card {
	aspect-ratio: 9/16; border-radius: var(--gz-r-md); overflow: hidden;
	background: var(--gz-pine-deep); border: 0;
	scroll-snap-align: start; position: relative;
}
.gz-ugc-media { position: absolute; inset: 0; }
.gz-ugc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--gz-pine-deep); cursor: pointer; }
.gz-ugc-ph {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 10px;
	color: var(--gz-muted-dark); text-align: center; padding: 12px;
}
.gz-ugc-ph-label { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }

/* --- 4 kernfeatures (2×2) met optionele bewijsvideo --- */
.gz-features .gz-benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gz-benefit-video { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--gz-r-sm); margin-top: 12px; border: 1px solid var(--gz-line); background: #fff; display: block; }

@media (max-width: 1023px) {
	/* Stappen: horizontale snap-slider (kaart = 1 stap + peek van de volgende),
	   scheelt ~550px hoogte; nummers 1-2-3 maken de reeks vanzelf duidelijk. */
	.gz-step-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		/* 7 okt (owner): compactere kaarten sinds 9:16-media — ~60% breed
		   i.p.v. bijna-volledige breedte; formaat video blijft 9:16. */
		grid-auto-columns: calc(60% - 16px);
		gap: 12px; margin: 28px 0 0;
		overflow-x: auto; scroll-snap-type: x mandatory;
		padding-bottom: 4px; scrollbar-width: none;
	}
	.gz-step-grid::-webkit-scrollbar { display: none; }
	.gz-step { scroll-snap-align: start; flex: 0 0 auto; }
	/* BA-foto compacter op mobiel: 220px breed (≈385px hoog) i.p.v. 300px. */
	.gz-dark-grid > div:first-child { max-width: 220px; }
	.gz-ba-frame img { max-width: 220px; }
	.gz-steps-note { margin-top: 16px; font-size: 12.5px; }
	/* Mobiel (owner 7 okt): nummer-badge gecentreerd BOVEN de titel. */
	.gz-step-copy { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 14px 18px; }
	.gz-step-num { grid-row: auto; align-self: auto; margin-bottom: 10px; }
	.gz-step-copy p { grid-column: auto; margin: 6px 0 0; }
	/* UGC mobiel: filmstrip — 4 op één rij, doorswipen voor de rest. */
	.gz-ugc-track { grid-auto-columns: calc((100% - 30px) / 4); gap: 10px; }
	.gz-ugc-card { scroll-snap-align: start; }
	.gz-ugc-arrow { width: 32px; height: 32px; }
	.gz-ugc-arrow svg { width: 13px; height: 13px; }
	.gz-ugc-prev { left: -8px; }
	.gz-ugc-next { right: -8px; }
	.gz-ugc-sub { font-size: 14px; }
	.gz-ugc-trust { font-size: 12.5px; margin: 0 0 18px; }
	.gz-features .gz-benefit-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ============ Non-tier buybox (v3.0.2): .gz-hero--plain ============ */
/* Alleen op producten zónder Magic Tiers (section-hero.php zet de klasse);
   pilot- en tier-producten krijgen hem nooit en zijn pixel-identiek. */
@media (min-width: 1024px) {
	/* De sticky galerij is op non-tier PDP's langer dan de rechterkolom; het
	   hero-grid verdeelde dat overschot gelijk over de proof/head/buy-rijen
	   → phantom-witruimte tussen trustrow↔H1 en prijs↔USP's (31–52px).
	   1fr-laatste rij verzamelt het overschot onderaan de kolom. */
	.gz-hero--plain { grid-template-rows: auto auto 1fr; }
	.gz-hero--plain .gz-price-wrap { margin-bottom: 12px; }
}
/* Zonder tier-menu is de salonkaart lege chroom rond de ATC: strippen. */
.gz-hero--plain .gz-menu { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.gz-hero--plain .gz-atc { margin-top: 6px; }
.gz-hero--plain .gz-menu-meta { margin-top: 10px; }

/* ============ Mobiele truststructuur: 2 laagse (1 okt) ============
   Laag 1 = icoon-grid (2×2) — vaste 18px icontegels (basisregels bij
   .gz-menu-meta), gelijke 8px-gaps, flex-center per item = gelijke
   tekstbaseline. Laag 2 = Klarna als eigen kleine gecentreerde regel. */
@media (max-width: 1023px) {
	/* Eén compacte 3-up truststrip (1 okt ronde 3): garantie-item mobiel
	   verborgen (staat al in de accordion + het garantiegrid), icoon boven
	   + 11,5px label eronder. Labels mogen netjes wrappen i.p.v. krimpen
	   (owner-regel); grid-stretch + kolom-flex houden de iconen op één
	   lijn én de hairline-dividers op volle kolomhoogte. */
	.gz-menu-meta {
		display: grid; grid-template-columns: repeat(3, 1fr);
		gap: 0; text-align: center; font-size: 11.5px;
		align-items: stretch; /* base 'center' lekt anders in het grid: 2-regelige labels schoven omhoog */
		margin-top: 12px; /* extra lucht tussen ATC en trustbar (1 okt ronde 4) */
	}
	/* padding 5px: kolom 110,7px - 10 = 100,7px content; "Gratis verzending"
	   meet 93px @11,5px Instrument Sans => één regel met 7px lucht (owner),
	   zonder de tekst te hoeven krimpen. */
	.gz-menu-meta .gz-ok {
		display: flex; flex-direction: column; align-items: center; gap: 4px;
		white-space: normal; line-height: 1.3; padding: 0 5px;
	}
	.gz-menu-meta .gz-ok + .gz-ok { border-left: 1px solid var(--gz-line); }
	.gz-menu-meta .gz-ok--warranty { display: none; }
	.gz-menu-meta .gz-meta-ic svg { width: 19px; height: 19px; }
	.gz-menu-meta .gz-meta-ic--truck svg { width: 18px; height: 18px; }
	.gz-menu-meta .gz-klarna {
		grid-column: 1 / -1; display: flex; justify-content: center;
		text-align: center; margin-top: 6px;
	}
	/* Klarna-regel = trust-item-maten op mobiel (1 okt): tekst 11,5px,
	   logo 19px hoog (trust-iconen zijn hier 19px). */
	.gz-menu-meta .gz-klarna .klarna-price { font-size: 11.5px !important; }
	.gz-menu-meta .gz-klarna .klarna-price img { height: 19px !important; }
	/* Korte subtekst-variant op mobiel (alléén waar geconfigureerd). */
	.gz-bundle.gz-salon .tier-contents-kort { display: inline; }
	.gz-bundle.gz-salon .tier-contents:has(.tier-contents-kort) .tier-contents-base { display: none; }
}

/* Zeer smal (<=369px): het langste subtekst-woord ("nagelverzorging"
   ~88px) zet de minimale tekstkolombreedte vast — de auto-thumbkolom
   vangt de krapte op en de 3e foto zou wrappen; thumbs gaan daarom
   een paar px kleiner (meting: col2 160 -> 154 bij 360px). */
@media (max-width: 369px) {
	.gz-bundle.gz-salon .tier-thumb { width: 48px; height: 48px; }
	/* Absolute bespaarregel hangt in de detail-band: kleinere thumbs =>
	   2-regel subtekst rijst hoger; extra row-gap houdt glyph-ruimte vrij. */
	.gz-bundle.gz-salon .magic-tier-row { row-gap: 9px !important; }
}
@media (max-width: 355px) {
	.gz-bundle.gz-salon .tier-thumb { width: 44px; height: 44px; }
	.gz-bundle.gz-salon .magic-tier-row { row-gap: 10px !important; }
}