/* Woonklasse design system for the q1sanitair catalog restyle.
   Rules marked THEME are copied verbatim from the live Woonklasse Shopify theme
   (/Users/sander/Desktop/Projects/loods5-clone/shopify-theme/assets/style.css).
   Rules marked NEW exist only here, for content shapes the Shopify PDP does not
   have (spec table, link-based option rows, add-on grids). */

/* Anton (latin), self-hosted — no external font requests (SEO audit 2026-07). */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('anton-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* THEME: tokens */
:root{
  --ink:#2B2A28;
  --merk:#3A3A38;
  --merk-hover:#4C4C49;
  --muted:#A2968A;
  --line:#DDD5C9;
  --line-strong:#A2968A;
  --bg:#F6F4F2;
  --card:#E5DED4;
  --accent:#E8B44A;
  --accent-dark:#D4A038;
  --accent-text:#412402;
  --sale:#A32D2D;
  --success:#3B6D11;
  --max:1360px;
  --r:14px;
  --shadow:0 6px 24px rgba(43,42,40,.10);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.chk{width:15px;height:15px;flex:none}
.chk polyline{fill:none;stroke:currentColor;stroke-width:11;stroke-linecap:round;stroke-linejoin:round}

/* THEME: top utility bar */
.topbar{background:var(--bg);border-bottom:1px solid var(--line);font-size:12.5px}
.topbar-inner{max-width:var(--max);margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between}
.topbar-usps{display:flex;gap:26px;color:var(--muted)}
.topbar-usps span{display:inline-flex;align-items:center;gap:7px}
.topbar-usps .chk{width:13px;height:13px}
.topbar-links{display:flex;gap:24px}
.topbar-links a{color:var(--ink);position:relative}
.topbar-links a:hover{color:var(--accent)}
.topbar-links a:first-child::after{content:"";position:absolute;right:-12px;top:0;bottom:0;width:1px;background:var(--line)}

/* THEME: header */
.header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.header.scrolled{box-shadow:0 4px 18px rgba(0,0,0,.06)}
.header-inner{max-width:var(--max);margin:0 auto;padding:14px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.header-left{display:flex;align-items:center;gap:24px;min-width:0}
.menu-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:0}
.menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.topnav{display:flex;gap:26px}
.topnav a{font-size:15px;font-weight:600;color:var(--ink);padding:6px 0}
.topnav .sale{color:var(--sale)}
.header .logo{display:flex;align-items:center;justify-self:center;height:58px;overflow:visible}
.header .logo img{height:66px;width:auto;display:block}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.header-right .search{flex:0 1 220px;display:flex;align-items:center;gap:6px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:3px 0;max-width:220px}
.header-right .search input{flex:1;border:0;background:none;padding:3px 0;font-size:14px;outline:none;color:var(--ink);font-family:var(--font)}
.header-right .search button{width:26px;height:26px;border:0;border-radius:0;background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.header-right .search svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.header-right .search button svg{width:19px;height:19px;stroke-width:1.8}
.hicon{position:relative;color:var(--ink);display:grid;place-items:center}
.hicon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hicon .badge{position:absolute;top:-6px;right:-7px;background:var(--merk);color:var(--bg);font-size:10px;font-style:normal;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px}

/* NEW: mobile nav panel — the hamburger (.menu-toggle) opens this under the
   header on <=760px, exposing the three pillars. Wired in cart.js, which the
   shared header() loads on every page. */
.mobile-nav{display:none;background:var(--bg);border-bottom:1px solid var(--line)}
.mobile-nav a{display:block;padding:14px 24px;font-size:16px;font-weight:600;color:var(--ink)}
.mobile-nav a+a{border-top:1px solid var(--line)}

/* THEME: buttons */
.btn{display:inline-block;background:var(--accent);color:var(--accent-text);padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;border:0;cursor:pointer;transition:.15s}
.btn:hover{background:var(--accent-dark)}

/* THEME: breadcrumb */
.crumbs{max-width:var(--max);margin:0 auto;padding:18px 24px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span{margin:0 8px;opacity:.5}

/* THEME: pdpx product page */
.pdpx{max-width:var(--max);margin:0 auto;padding:0 24px;display:flex;align-items:flex-start}
.pdpx-stage{flex:1 1 auto;min-width:0;background:var(--bg);border-radius:12px;height:calc(100vh - 320px);min-height:520px;max-height:760px;padding:40px;display:flex;align-items:center;justify-content:center}
.pdpx-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;transition:opacity .25s ease}
.pdpx-card{flex:0 0 420px;width:420px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:28px;margin:16px 0 16px -32px;position:relative}
.pdpx-brand{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pdpx-title{font-family:'Anton',var(--font);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:26px;line-height:1.12;margin:6px 0 14px}
.pdpx-price{display:flex;align-items:baseline;gap:10px}
.pdpx-price .now{font-size:24px;font-weight:600;color:var(--ink)}
.pdpx-price .was{font-size:13px;font-weight:600;color:var(--muted);text-decoration:line-through}
.pdpx-vat{font-size:11px;color:var(--muted);margin:4px 0 0}
.pdpx-form{margin-top:24px}
.pdpx-options{display:flex;flex-direction:column;gap:16px;margin:0 0 24px}
.pdpx-option{display:flex;flex-direction:column;gap:8px}
.pdpx-opthead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pdpx-optname{font-size:14px;color:var(--ink)}
.pdpx-optval{font-size:13px;font-weight:700;color:var(--ink);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdpx-buyrow{display:flex;gap:12px;align-items:stretch}
.pdpx-buyrow .qty{flex:none;background:var(--bg)}
.pdpx-buy-btn{flex:1;border:0;border-radius:999px;background:var(--accent);color:var(--accent-text);font-family:var(--font);font-size:15px;font-weight:700;padding:14px 22px;cursor:pointer;transition:background-color .2s,color .2s}
.pdpx-buy-btn:hover{background:var(--accent-dark)}
.pdpx-trust{font-size:13px;color:var(--muted);text-align:center;line-height:1.6;margin:14px 0 0}
.pdpx-desc-section{padding:36px 0 4px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:44px;height:48px;border:0;background:var(--card);font-size:20px;cursor:pointer;color:var(--ink)}
.qty input[type=number]{width:36px;border:0;background:none;text-align:center;font-size:15px;font-weight:600;-moz-appearance:textfield;font-family:var(--font);color:var(--ink)}
.qty input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}

/* THEME: swatches inside the configurator card */
.pdpx .swatches{display:flex;flex-wrap:wrap;gap:12px;padding:2px}
.pdpx .swatch{position:relative;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;display:grid;place-items:center}
.pdpx .swatch-chip{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid rgba(43,42,40,.15);object-fit:cover}
.pdpx .swatch:hover::after,.pdpx .swatch.active::after{content:"";position:absolute;inset:-4px;border:2px solid var(--line);border-radius:50%}
.pdpx .swatch.active::after{border-color:var(--ink)}

/* THEME: segmented pill track */
.pdpx-seg{position:relative;display:flex;background:var(--card);border-radius:999px;padding:3px;overflow-x:auto;scrollbar-width:none;border:1px solid var(--line)}
.pdpx-seg::-webkit-scrollbar{display:none}
.pdpx-seg-btn{position:relative;z-index:1;flex:1 0 auto;border:0;background:none;padding:9px 14px;border-radius:999px;font-family:var(--font);font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .2s;text-align:center}
.pdpx-seg-btn.active{color:var(--ink);background:var(--bg);border:1.5px solid var(--line)}

/* THEME: footer */
.footer{background:var(--bg);border-top:1px solid var(--line);padding:48px 0 30px;margin-top:20px}
.foot-usps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.foot-usps>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.foot-usps .chk{width:22px;height:22px;grid-row:1/3}
.foot-usps b{font-size:14px}
.foot-usps span{font-size:13px;color:var(--muted)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:36px 0}
.foot-cols h4{font-size:14px;margin-bottom:14px}
.foot-cols a{display:block;padding:5px 0;font-size:14px;color:var(--muted)}
.foot-cols a:hover{color:var(--ink)}
.foot-social{display:flex;gap:14px;margin-top:12px}
.foot-social a{display:inline-flex;padding:0;color:var(--muted)}
.foot-social a:hover{color:var(--ink)}
.foot-social svg{width:22px;height:22px;fill:currentColor}
.foot-bottom{display:flex;align-items:center;gap:18px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.foot-logo{height:60px;width:auto;display:block}
.foot-bottom p{font-size:13px;color:var(--muted);margin:0}
/* NEW: bedrijfsgegevens in the footer bottom row (name, Leerdam address, KvK, BTW) */
.foot-bedrijf{margin-left:auto;text-align:right}

/* THEME: floating WhatsApp button */
.wa-widget{position:fixed;right:22px;bottom:22px;z-index:70}
.wa-btn{width:60px;height:60px;border-radius:50%;background:#25d366;border:0;cursor:pointer;color:var(--bg);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:.15s}
.wa-btn svg{width:34px;height:34px;fill:currentColor}
.wa-btn:hover{background:#1ebe5b;transform:translateY(-2px)}

/* THEME: responsive */
@media(max-width:1023px){
  .pdpx{flex-direction:column}
  .pdpx-stage{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:1.05;padding:24px}
  .pdpx-card{width:100%;flex:none;margin:16px 0 0}
  /* Het logo staat gecentreerd, dus de nav heeft links altijd precies
     (breedte - logobreedte)/2 - padding tot zijn beschikking: 316px op 768.
     Sinds "Webshop" erbij staat is de rij 407px breed en botst hij daaronder
     op het logo. Onder 1024 gaat de nav daarom in de hamburger, die alle vier
     de pijlers al toont (#wkMobileNav). */
  .menu-toggle{display:grid}
  .topnav{display:none}
  .mobile-nav.open{display:block}
}
@media(max-width:1040px){
  .foot-usps,.foot-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .pdpx{padding:0 14px}
  .pdpx-card{padding:20px}
  .pdpx-title{font-size:22px}
  .pdpx-desc-section{padding:28px 0 0}
  .topbar-usps span+span{display:none}
  .header-right .search{display:none}
  .foot-bedrijf{margin-left:0;text-align:left}
}

/* ===================================================================
   NEW. Content shapes the Shopify PDP does not have: a gallery filmstrip,
   link-based option rows (each option is another captured product page),
   a spec table, and optional add-on grids.
   =================================================================== */

.stage-wrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px;position:sticky;top:96px}
.stage-wrap .pdpx-stage{width:100%}
.thumbs{display:flex;gap:12px;flex-wrap:wrap;padding:0 8px}
.thumbs img{width:78px;height:78px;object-fit:contain;background:var(--bg);border:1px solid var(--line);border-radius:10px;cursor:pointer;opacity:.7;transition:.15s;padding:4px}
.thumbs img:hover,.thumbs img.active{opacity:1;border-color:var(--ink)}

/* Option rows whose values are links to other product pages */
.pdpx-option .opt-links{display:flex;flex-wrap:wrap;gap:12px;padding:2px}
.pdpx-option .swatch{display:grid}
.pdpx-option .opt-pills{display:flex;flex-wrap:wrap;gap:8px}
.opt-pill{display:inline-block;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:13px;font-weight:700;color:var(--muted);transition:.15s}
.opt-pill:hover{border-color:var(--line-strong);color:var(--ink)}
.opt-pill.active{color:var(--ink);border-color:var(--ink)}

/* Detailed option row (wastafel): the card shows the current choice only and
   opens a modal with the full grid. Q1 shows the same set in a paddled slider. */
.opt-current{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-family:var(--font);cursor:pointer;transition:.15s}
.opt-current:hover{border-color:var(--line-strong)}
.opt-current:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.opt-current>img{width:64px;height:64px;flex:none;object-fit:contain;background:var(--bg)}
.opt-current-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.opt-current-body b{font-size:13px}
.opt-current-body .delta{font-size:11.5px;color:var(--muted);line-height:1.35}
.opt-current-change{flex:none;align-self:center;font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Compact add-on block: five optional categories, one row each, so none of
   them can be scrolled past. Same idiom as .opt-current above. */
.opt-extras{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:12px;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.opt-extras-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px 4px}
.opt-extras-head b{font-size:13.5px}
.opt-extras-head span{font-size:11.5px;color:var(--muted)}
.opt-row{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--card)}
.opt-row.chosen{border-color:var(--line-strong)}
.opt-row-thumb{width:44px;height:44px;flex:none;border-radius:7px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.opt-row-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.opt-row-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.opt-row-body b{font-size:12.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt-row.chosen .opt-row-body b{font-weight:700}
.opt-row-body .delta{font-size:11.5px;color:var(--muted)}
.opt-row.chosen .opt-row-body .delta{color:var(--ink);font-weight:700}
.opt-row-cta{flex:none;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:12px;font-weight:700;padding:8px 14px;cursor:pointer;transition:.15s}
.opt-row-cta:hover{border-color:var(--ink)}
.opt-row-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* "Stel samen": the choices that belong to the product itself (waskom, greep)
   rather than the optional extras below. Same row idiom, weighted heavier so
   the required step reads first — the card surface instead of the page
   background, and a solid rule down the left of each open choice. Gold stays
   scarce: the primary buy button keeps it, these do not. */
.opt-choices{background:var(--card);border-color:var(--line-strong)}
.opt-choices .opt-row{background:var(--bg)}
.opt-row-choice{border-left:3px solid var(--line-strong)}
.opt-row-choice.chosen{border-left-color:var(--ink)}
.opt-row-choice .opt-row-body .delta{color:var(--ink)}
.opt-row-cta-key{background:var(--merk);border-color:var(--merk);color:var(--bg)}
.opt-row-cta-key:hover{background:var(--merk-hover);border-color:var(--merk-hover)}
.opt-row.chosen .opt-row-cta-key{background:var(--bg);border-color:var(--line);color:var(--ink)}
.opt-row.chosen .opt-row-cta-key:hover{border-color:var(--ink)}

/* Running total, in the shape of the plissexxl.nl configurator */
.totals{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:12px 14px;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.totals-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.totals-row b{font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.totals-grand{border-top:1px solid var(--line);margin-top:2px;padding-top:8px;color:var(--ink);font-weight:700}
.totals-grand b{font-size:19px}

/* Modal picker */
.opt-modal{padding:0;border:0;background:none;max-width:none;max-height:none;overflow:visible}
.opt-modal::backdrop{background:rgba(43,42,40,.55)}
.opt-modal-inner{width:min(920px,92vw);max-height:86vh;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 50px rgba(43,42,40,.28);overflow:hidden}
.opt-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
.opt-modal-head h3{font-family:'Anton',var(--font);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:22px}
.opt-modal-close{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--ink);cursor:pointer;transition:.15s}
.opt-modal-close:hover{border-color:var(--line-strong)}
.opt-modal-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
/* minmax(0,1fr) + min-width:0 below: grid items default to min-width:auto, and
   a <button> item resolves that to its min-content width, which blows the grid
   wider than the dialog. */
.opt-modal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:22px;overflow-y:auto}
.opt-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:12px;line-height:1.35;color:var(--ink);transition:.15s}
.opt-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.opt-card.active{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.opt-card img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--bg);border-radius:6px}
.opt-card b{font-size:12.5px}
.opt-card .delta{color:var(--muted);font-size:11.5px}
.opt-card-flag{position:absolute;top:8px;right:8px;background:var(--merk);color:var(--bg);font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:999px}
/* Add-on picker cards are <button>: reset the UA button look, keep .opt-card. */
button.opt-card{width:100%;min-width:0;text-align:left;font-family:var(--font);cursor:pointer;align-items:stretch}
button.opt-card b,button.opt-card .delta{min-width:0;overflow-wrap:anywhere}
button.opt-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button.opt-card.unavailable{opacity:.55;cursor:not-allowed}
button.opt-card.unavailable:hover{border-color:var(--line);box-shadow:none}
/* Image wrapper with a styled empty state, so a missing capture never shows
   the browser's broken-image icon. */
.thumb-img{display:block;width:100%;height:100%}
.thumb-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.thumb-img.thumb-missing{background:var(--card);border-radius:6px;position:relative}
.thumb-img.thumb-missing::after{content:"Geen foto";position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:600;color:var(--muted);text-align:center}
button.opt-card .opt-card-thumb{aspect-ratio:1;background:var(--bg);border-radius:6px;overflow:hidden}
.opt-row-thumb .thumb-img.thumb-missing::after{font-size:8.5px}
.picker-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;border-top:1px solid var(--line);background:var(--bg)}
.picker-hint{font-size:12px;color:var(--muted);line-height:1.45}
body.modal-open{overflow:hidden}

/* Review step before add-to-cart */
.review-modal .opt-modal-inner{width:min(760px,92vw)}
.review-body{padding:22px;overflow-y:auto}
.review-summary{display:flex;gap:16px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.review-summary>img{width:96px;height:96px;flex:none;object-fit:contain;background:var(--bg);border-radius:8px}
.review-summary-body{min-width:0;display:flex;flex-direction:column;gap:8px}
.review-title{font-size:14px;line-height:1.35}
.review-lines{display:flex;flex-direction:column;gap:4px}
.review-line{display:flex;gap:10px;font-size:13px}
.review-line span{color:var(--muted);min-width:120px}
.review-line b{font-weight:700}
.review-price{font-size:20px;font-weight:700}
.review-addons{margin-top:22px}
.review-addons-head{font-size:15px;margin-bottom:4px}
.review-note{font-size:12.5px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.review-block{margin-top:16px}
.review-block h4{font-size:13px;margin-bottom:10px}
.review-more{font-weight:400;color:var(--muted);font-size:12px}
.review-addon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.review-addon{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:12px}
.review-addon .thumb{aspect-ratio:1;display:grid;place-items:center;background:var(--bg)}
.review-addon .thumb img{max-width:100%;max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.review-addon .name{line-height:1.35}
.review-addon .price{font-weight:700;font-size:13px;margin-top:auto}
.review-add{margin-top:4px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer}
.review-add:disabled{color:var(--muted);cursor:not-allowed;opacity:.75}
.review-done-head{font-size:15px;font-weight:700;margin:0 0 6px}
.review-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;border-top:1px solid var(--line);background:var(--bg)}
.review-back{border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-family:var(--font);font-size:14px;font-weight:600;padding:13px 22px;cursor:pointer}
.review-back:hover{border-color:var(--line-strong)}
.review-confirm{flex:0 0 auto}
/* Head: title plus "2 van 4" step counter */
.review-head-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.review-progress{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
/* Skipping is a neutral action, not a gold one: gold stays for confirm. */
.review-skip{border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--ink);font-family:var(--font);font-size:14px;font-weight:700;padding:13px 22px;cursor:pointer}
.review-skip:hover{border-color:var(--ink)}
.review-totals{margin-top:18px;background:var(--card)}
.review-chips{display:flex;flex-wrap:wrap;gap:8px}
.review-chip{border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:12.5px;font-weight:700;padding:8px 14px;cursor:pointer;transition:.15s}
.review-chip:hover{border-color:var(--ink)}
.review-modal .review-line b{text-align:right;flex:1}

/* Spec table */
.specs{max-width:760px}
.specs h2{font-family:'Anton',var(--font);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(26px,3vw,36px);margin-bottom:18px}
.specs table{width:100%;border-collapse:collapse;font-size:14px}
.specs tr{border-bottom:1px solid var(--line)}
.specs tr:nth-child(odd){background:var(--card)}
.specs th{text-align:left;font-weight:600;padding:11px 14px;width:44%;color:var(--ink)}
.specs td{padding:11px 14px;color:var(--ink)}

/* Optional add-on sections below the fold */
.addons{padding:44px 0 8px}
.addons h2{font-family:'Anton',var(--font);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(22px,2.4vw,30px);margin-bottom:6px}
.addons .addon-note{font-size:13px;color:var(--muted);margin:0 0 18px}
/* Same idiom as the theme's .sale-track carousel: a horizontal rail, so a
   40-item Q1 slider does not become a 40-tile wall. */
.addon-grid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:thin}
.addon-grid::-webkit-scrollbar{height:8px}
.addon-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.addon{flex:0 0 240px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.18s;display:flex;flex-direction:column}
.addon:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.addon .thumb{background:var(--bg);aspect-ratio:1;display:grid;place-items:center;padding:12px}
.addon .thumb img{max-width:100%;max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.addon .info{padding:12px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.addon .name{font-size:13.5px;font-weight:600;line-height:1.35}
.addon .price{font-size:16px;font-weight:800;margin-top:auto}
@media(max-width:1023px){.opt-modal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .addon{flex-basis:200px}
  .opt-modal-inner{width:100vw;max-width:100vw;max-height:92vh;border-radius:14px 14px 0 0;border-bottom:0}
  .opt-modal{margin:auto auto 0;max-height:92vh}
  .opt-modal-head{padding:16px 16px}
  .opt-modal-head h3{font-size:19px}
  .opt-modal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}
  .opt-current-change{align-self:flex-start}
  .review-body{padding:16px}
  .review-summary{flex-direction:column}
  .review-summary>img{width:100%;height:150px}
  .review-line{flex-direction:column;gap:0}
  .review-line span{min-width:0}
  .review-addon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review-foot{flex-direction:column-reverse;align-items:stretch;padding:14px 16px}
  .review-foot button{width:100%}
  /* At 390px "Geen afvoerset gekozen" does not fit on one line: wrap to two
     instead of ellipsing the label away. */
  .opt-row-body b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
  .opt-row-cta{padding:8px 12px}
}
@media(max-width:1023px){.stage-wrap{position:static}}

/* NEW: cookie consent banner (only in the DOM once tracking-config.mjs has an
   ID; see transform.mjs consentChrome + assets/consent.js). Fixed bottom bar,
   store tokens only; accept and reject are deliberately IDENTICAL buttons. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:16px;background:rgba(43,42,40,.32)}
.consent-box{max-width:680px;margin:0 auto;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px}
.consent-box h3{font-family:'Anton',var(--font);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:20px;margin:0 0 8px}
.consent-box p{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0 0 14px}
.consent-box p a{text-decoration:underline;text-underline-offset:2px}
.consent-opts{display:grid;gap:8px;margin:0 0 16px}
.consent-opt{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;cursor:pointer}
.consent-opt input{margin:3px 0 0;accent-color:var(--merk)}
.consent-opt input:disabled{cursor:not-allowed}
.consent-opt b{margin-right:6px}
.consent-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.consent-btn{border:0;border-radius:999px;background:var(--merk);color:var(--bg);font-family:var(--font);font-size:14px;font-weight:700;padding:11px 22px;cursor:pointer;transition:background-color .15s}
.consent-btn:hover{background:var(--merk-hover)}
.consent-save{border:0;background:none;color:var(--ink);font-family:var(--font);font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:2px;padding:11px 6px;cursor:pointer;margin-left:auto}
@media(max-width:600px){
  .consent{padding:0}
  .consent-box{border-radius:var(--r) var(--r) 0 0;border-left:0;border-right:0;border-bottom:0}
  .consent-btns{flex-direction:column;align-items:stretch}
  .consent-save{margin-left:0;text-align:center}
}