/* ==========================================================================
   Soccer MeMo — shop redesign
   Richting: "Veldlijnen & Oranje" — Nederlands rastersysteem, krijtlijnen,
   vlakke kleuren, één tactiel accent (knop + memory-kaart).
   ========================================================================== */

:root{
  /* Kleur — vaste lichte weergave */
  color-scheme:light;
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F2F7EE;
  --ink:#121A14;
  --muted:#5D6B5C;
  --line:#DFE6D8;
  --line-strong:#121A14;

  --brand:#22C55E;
  --pitch:#0B6B3A;
  --pitch-deep:#06341E;
  --pitch-soft:#E1EFE4;
  --flame:#FF5A00;
  --flame-ink:#FFFFFF;
  --flame-soft:#FFE8DA;
  --lemon:#FFC630;
  --sky:#2F6BFF;

  --ok:#0B6B3A;
  --warn:#B25A00;

  /* Maatvoering */
  --maxw:1180px;
  --gutter:20px;
  --r-card:18px;
  --r-tile:12px;
  --shadow-hard:4px 4px 0 var(--line-strong);
  --shadow-soft:0 12px 30px rgba(10,30,15,.10);

  --f-display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,6.2vw,4.4rem)}
h2{font-size:clamp(1.8rem,4vw,2.9rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(48px,7vw,86px);border-top:1px solid var(--line)}
.section--flush{border-top:0}
.stack{display:flex;flex-direction:column;gap:14px}
.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0;
}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--muted);max-width:60ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border-radius:999px;border:2px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none;
  cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform:translate(-1px,-1px)}
.btn:active{transform:translate(2px,2px)}
.btn--primary{background:var(--flame);color:var(--flame-ink);box-shadow:var(--shadow-hard)}
.btn--primary:hover{box-shadow:5px 5px 0 var(--line-strong)}
.btn--primary:active{box-shadow:1px 1px 0 var(--line-strong)}
.btn--pitch{background:var(--pitch);color:#fff;box-shadow:var(--shadow-hard)}
.btn--ghost{background:transparent}
.btn--wide{width:100%}
.btn--sm{padding:9px 16px;font-size:.9rem;border-width:2px}
.btn__price{font-family:var(--f-mono);font-size:.95em;opacity:.95}

/* ---------- Header ---------- */
.header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.header{transition:box-shadow .2s ease}
.header.is-stuck{box-shadow:0 12px 26px -22px rgba(6,52,30,.65)}
.header__bar{display:flex;align-items:center;gap:16px;min-height:60px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:1.18rem;letter-spacing:-.03em}
.logo__mark{width:38px;height:38px;flex:none;color:var(--brand)}
.logo__img{height:38px;width:auto;display:block}
.logo--chip{background:#fff;border-radius:14px;padding:10px 14px}
.logo--chip .logo__img{height:40px}
.logo__word{display:flex;flex-direction:column;line-height:.86;text-transform:uppercase;letter-spacing:-.02em;color:var(--brand);font-size:1.02rem}
.logo--light .logo__mark,.logo--light .logo__word{color:#fff}
.logo__tag{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.logo--light .logo__tag{color:#A9CDB2}
.nav{display:flex;gap:20px;margin-left:auto;font-size:.95rem}
.nav a{text-decoration:none;color:var(--muted);font-weight:500;padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--flame)}
.header__actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav + .header__actions{margin-left:0}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:2px solid var(--line-strong);border-radius:999px;
  padding:8px 14px;cursor:pointer;font-weight:600;font-size:.9rem;
}
.icon-btn svg{width:18px;height:18px}
.cart-count{
  min-width:22px;height:22px;padding-inline:6px;border-radius:999px;background:var(--flame);color:#fff;
  font-family:var(--f-mono);font-size:.75rem;display:grid;place-items:center;
}
.nav-toggle{
  display:none;position:relative;width:44px;height:44px;flex:none;padding:0;
  border:2px solid var(--line-strong);border-radius:999px;background:var(--surface);cursor:pointer;
}
/* De drie streepjes hangen aan het midden van de knop zelf, niet aan een
   flexregel: zo staan ze altijd precies gecentreerd en even lang. */
.nav-toggle__bars{
  position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;
  border-radius:2px;background:currentColor;
}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s ease;
}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}
.header.is-open .nav-toggle__bars{background:transparent}
.header.is-open .nav-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
.header.is-open .nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- USP-balk ---------- */
.usps{background:var(--pitch-deep);color:#EAF6EC;border-bottom:1px solid var(--line);overflow:hidden}
.usps .wrap{padding-inline:0;overflow:hidden}
.usps ul{
  display:flex;flex-wrap:nowrap;width:max-content;list-style:none;margin:0;
  padding:10px 0;gap:0;justify-content:flex-start;font-size:.86rem;
  animation:usp-slide 40s linear infinite;will-change:transform;
}
/* De tussenruimte zit in de items zelf: zo is de rij exact twee keer dezelfde
   reeks en loopt de sprong van -50% naadloos door. */
.usps li{display:flex;align-items:center;gap:8px;white-space:nowrap;flex:none;padding-right:44px}
.usps:hover ul,.usps:focus-within ul{animation-play-state:paused}
.usps svg{width:15px;height:15px;color:var(--lemon);flex:none}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--paper)}
.hero__grid{
  position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(36px,5.5vw,68px);
}
.hero__badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{
  display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px;
  font-size:.8rem;font-weight:600;background:var(--pitch-soft);color:var(--pitch);
}
.badge--flame{background:var(--flame-soft);color:var(--flame)}
.badge svg{width:14px;height:14px}
.hero h1 .flip-word{color:var(--flame);display:inline-block}
.hero h1 .under{ text-decoration:underline;text-decoration-color:var(--lemon);text-decoration-thickness:8px;text-underline-offset:6px}
.hero__buy{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.price-line{display:flex;align-items:baseline;gap:10px;font-family:var(--f-mono)}
.price{font-size:1.5rem;font-weight:500}
.price--was{color:var(--muted);text-decoration:line-through;font-size:1rem}
[hidden]{display:none!important}
.rating{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--muted)}
.stars{display:inline-flex;gap:2px;color:var(--lemon)}
.stars svg{width:16px;height:16px}

/* ---------- Memory-bord ---------- */
.board-panel{
  background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--r-card);
  box-shadow:var(--shadow-hard);padding:clamp(14px,2.4vw,20px);
}
.board-panel__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.board-panel__top h2{font-size:1.05rem}
.scoreline{display:flex;gap:14px;font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.scoreline b{color:var(--ink);font-weight:500}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(7px,1.3vw,11px)}
.mcard{
  position:relative;aspect-ratio:1/1;border:0;padding:0;background:none;cursor:pointer;
  perspective:800px;border-radius:var(--r-tile);
}
.mcard__inner{
  position:absolute;inset:0;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.8,.25,1);
  border-radius:var(--r-tile);
}
.mcard.is-open .mcard__inner,.mcard.is-done .mcard__inner{transform:rotateY(180deg)}
.mcard__face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r-tile);
  border:2px solid var(--line-strong);display:grid;place-items:center;overflow:hidden;
}
.mcard__back{background:#2E8B43}
.mcard__front{transform:rotateY(180deg);background:var(--surface)}
.mcard__face svg{width:100%;height:100%;display:block}
.mcard.is-done{cursor:default}
.mcard.is-done .mcard__face{border-color:var(--flame);box-shadow:inset 0 0 0 3px var(--flame-soft)}
.mcard:disabled{cursor:default}
.board-panel__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.board-msg{font-size:.9rem;color:var(--muted);min-height:1.5em}
.board-msg.is-win{color:var(--pitch);font-weight:600}
.linkish{background:none;border:0;padding:0;cursor:pointer;font-weight:600;font-size:.9rem;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--flame)}

/* ---------- Trust ---------- */
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px;padding-block:18px}
.pay{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:.76rem;
  letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:var(--surface);
}
.pay svg{width:16px;height:16px;color:var(--ink)}
.pay-strip{height:34px;width:auto;max-width:100%;display:block}
@media (max-width:640px){.pay-strip{height:auto;width:min(100%,340px)}}

/* ---------- Kolommen / kaarten ---------- */
.cols{display:grid;gap:clamp(16px,2.5vw,26px)}
.cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.section__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:clamp(22px,3vw,36px)}
.section__head .stack{max-width:52ch}

.benefit{display:flex;flex-direction:column;gap:10px}
.benefit__ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--pitch-soft);color:var(--pitch)}
.benefit__ic svg{width:27px;height:27px}
.benefit--flame .benefit__ic{background:var(--flame-soft);color:var(--flame)}
.benefit--lemon .benefit__ic{background:color-mix(in srgb,var(--lemon) 26%,var(--paper));color:var(--warn)}
.benefit p{color:var(--muted);font-size:.96rem}

/* Stappen: echte volgorde, dus genummerd */
.steps{counter-reset:step;display:grid;gap:clamp(16px,2.5vw,26px);grid-template-columns:repeat(3,minmax(0,1fr))}
.step{border-top:3px solid var(--ink);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.step::before{
  counter-increment:step;content:counter(step);
  font-family:var(--f-display);font-weight:800;font-size:1.6rem;color:var(--flame);line-height:1;
}
.step p{color:var(--muted);font-size:.95rem}

/* ---------- Productkaart ---------- */
.pcard{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;transition:transform .16s ease,box-shadow .16s ease;
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
/* Het beeld hangt absoluut in het vak in plaats van het vak te vullen met
   height:100%. Dat percentage rekent tegen een hoogte die zelf nog uit
   aspect-ratio moet komen; browsers lossen dat verschillend op, waardoor het
   vak uitrekte of de foto scheef kwam te staan. Absoluut gepositioneerd is de
   hoogte wel bepaald, en inset zorgt voor de rand rondom. */
.pcard__media{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.pcard__media svg,
.pcard__media img{
  position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);
  object-fit:contain;display:block;
}
.pcard__flag--out{background:var(--muted)}
.pcard__flag{
  position:absolute;top:12px;left:12px;z-index:1;background:var(--flame);color:#fff;border-radius:999px;
  font-size:.72rem;font-weight:700;padding:4px 10px;letter-spacing:.02em;
}
.pcard__body{display:flex;flex-direction:column;gap:8px;padding:16px;flex:1}
.pcard__body h3{font-size:1.05rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__meta{font-size:.85rem;color:var(--muted)}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.pcard__price{font-family:var(--f-mono);font-weight:500}

/* ---------- Reviews ---------- */
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;display:flex;flex-direction:column;gap:12px}
.review p{font-size:1rem}
.review__who{display:flex;align-items:center;gap:10px;margin-top:auto;font-size:.88rem;color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--pitch-soft);color:var(--pitch);font-weight:700;font-size:.85rem;flex:none}
.verified{display:inline-flex;align-items:center;gap:5px;color:var(--ok);font-size:.78rem;font-weight:600}
.verified svg{width:13px;height:13px}

.score-panel{display:flex;flex-direction:column;gap:14px;background:var(--pitch-soft);border-radius:var(--r-card);padding:22px}
.score-panel__big{font-family:var(--f-display);font-size:3.2rem;line-height:1;color:var(--pitch)}
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:32px 1fr 34px;gap:10px;align-items:center;font-family:var(--f-mono);font-size:.76rem;color:var(--muted)}
.bar__track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--pitch) 16%,transparent);overflow:hidden}
.bar__fill{height:100%;background:var(--pitch);border-radius:999px}

/* ---------- Specs ---------- */
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.spec{background:var(--surface);padding:18px}
.spec dt{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin:6px 0 0;font-family:var(--f-display);font-weight:700;font-size:1.25rem}

/* ---------- Cadeau-band ---------- */
.gift{
  background:var(--pitch);color:#EAF6EC;border-radius:var(--r-card);
  display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,44px);align-items:center;
  padding:clamp(24px,4vw,44px);
}
.gift h2{color:#fff}
.gift .lead{color:#C9E3CF}
.gift__art{display:grid;place-items:center}
.gift__art svg{width:100%;max-width:320px}
.gift__art img{width:100%;max-width:340px;border-radius:14px;display:block}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:18px 0;font-family:var(--f-display);font-weight:700;font-size:1.06rem;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:1.4rem;color:var(--flame);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:18px;color:var(--muted);max-width:70ch}

/* ---------- Nieuwsbrief ---------- */
.news{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,44px);align-items:center}
.news form{display:flex;gap:10px;flex-wrap:wrap}
.news input{
  flex:1;min-width:220px;padding:14px 16px;border-radius:999px;border:2px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font:inherit;
}
.news small{color:var(--muted);font-size:.8rem}

/* ---------- Footer ---------- */
.footer{background:var(--pitch-deep);color:#C9E3CF;padding-block:clamp(36px,5vw,56px) 28px;margin-top:clamp(40px,6vw,72px)}
.footer a{color:#EAF6EC;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer h4{color:#fff;font-size:1rem;margin-bottom:10px;font-family:var(--f-display)}
.footer__cols{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.footer__social{list-style:none;margin:14px 0 0;padding:0;display:flex;gap:14px}
.footer__social a{display:inline-flex;align-items:center;gap:8px;font-size:.92rem}
.footer__social svg{width:19px;height:19px;flex:none}

.footer__legal{
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.14);margin-top:28px;padding-top:18px;font-size:.8rem;color:#9DBBA4;
}

/* ==========================================================================
   Productpagina
   ========================================================================== */
.crumbs{font-size:.85rem;color:var(--muted);padding-block:14px}
.crumbs + .section{padding-top:clamp(16px,2.2vw,26px)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:clamp(30px,5vw,56px)}
/* min-width:0 is hier geen detail: zonder die regel mag de kolom breder worden
   dan zijn baan zodra een echte productfoto binnenkomt, en schuift de galerij
   over het koopblok heen. */
.gallery{display:flex;flex-direction:column;gap:12px;min-width:0;position:sticky;top:calc(84px + env(safe-area-inset-top,0px))}
.gallery__main{
  position:relative;min-width:0;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-card);aspect-ratio:1/1;padding:clamp(16px,3vw,32px);overflow:hidden;
}
.gallery__main svg,
.gallery__main img{
  position:absolute;inset:clamp(16px,3vw,32px);
  width:calc(100% - 2 * clamp(16px,3vw,32px));height:calc(100% - 2 * clamp(16px,3vw,32px));
  object-fit:contain;display:block;
}
.thumb svg,
.thumb img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain;display:block}
.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.thumb{
  position:relative;background:var(--surface-2);border:2px solid var(--line);border-radius:12px;
  aspect-ratio:1/1;padding:8px;cursor:pointer;min-width:0;overflow:hidden;
}
.thumb[aria-current="true"]{border-color:var(--flame)}

.buybox{display:flex;flex-direction:column;gap:18px;min-width:0}
.buybox h1{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.bundles{display:flex;flex-direction:column;gap:10px}
.bundle{
  display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;
  border:2px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;background:var(--surface);
  transition:border-color .14s ease,background .14s ease;
}
.bundle:hover{border-color:var(--muted)}
.bundle[data-selected="true"]{border-color:var(--flame);background:var(--flame-soft)}
.bundle input{position:absolute;opacity:0;pointer-events:none}
.bundle__dot{width:20px;height:20px;border-radius:999px;border:2px solid var(--muted);display:grid;place-items:center}
.bundle[data-selected="true"] .bundle__dot{border-color:var(--flame)}
.bundle[data-selected="true"] .bundle__dot::after{content:"";width:10px;height:10px;border-radius:999px;background:var(--flame)}
.bundle__label{display:flex;flex-direction:column;gap:2px}
.bundle__label b{font-weight:600}
.bundle__label span{font-size:.84rem;color:var(--muted)}
/* Het label wint het van .bundle__label span hierboven: die regel is
   specifieker en kleurde de tekst grijs, waardoor er tekst in bijna dezelfde
   kleur als de achtergrond stond. Donkere letters op oranje lezen beter dan
   witte: wit op #FF5A00 haalt de contrastnorm niet. */
.bundle__label span.bundle__tag{
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.55;
  background:var(--pitch);color:#fff;border-radius:999px;padding:2px 9px;align-self:start;margin-left:6px;
}
.bundle__label span.bundle__tag--deal{background:var(--flame);color:#231000}
.bundle__price{font-family:var(--f-mono);text-align:right}
.bundle__price s{display:block;font-size:.78rem;color:var(--muted)}

.addon{display:flex;align-items:center;gap:12px;border:1px dashed var(--line);border-radius:14px;padding:12px 14px;cursor:pointer}
.addon input{width:20px;height:20px;accent-color:var(--flame);flex:none}
.addon span{font-size:.92rem}
.addon b{font-family:var(--f-mono);margin-left:auto;font-weight:500;white-space:nowrap}

.qty{display:inline-flex;align-items:center;border:2px solid var(--line-strong);border-radius:999px;overflow:hidden}
.qty button{flex:none}
.qty button{width:42px;height:46px;background:var(--surface);border:0;cursor:pointer;font-size:1.2rem;line-height:1}
.qty button:hover{background:var(--surface-2)}
.qty output{width:44px;text-align:center;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
/* Teller en knop staan in een raster met een vaste en een meegevende baan.
   Zo kunnen ze elkaar nooit overlappen, ook niet als het label breder uitvalt
   door een ander lettertype of een zoomstand. */
.buy-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.qty{justify-self:start}
.buy-row .btn--primary{width:100%;min-width:0;padding-inline:16px}
@media (max-width:520px){
  .buy-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .qty{justify-self:stretch;justify-content:space-between}
}

.delivery{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px}
.delivery__row{display:flex;gap:10px;align-items:flex-start;font-size:.93rem}
.delivery__row svg{width:18px;height:18px;color:var(--pitch);flex:none;margin-top:2px}
.delivery b{font-weight:600}
.countdown{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--flame)}
.stock{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)}
.dot-live{width:9px;height:9px;border-radius:999px;background:var(--ok);flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)}

.tabsish{display:flex;flex-direction:column;gap:0}
.acc{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:16px 0;font-weight:600;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"↓";color:var(--flame);font-family:var(--f-mono)}
.acc[open] summary::after{content:"↑"}
.acc__body{padding-bottom:18px;color:var(--muted);font-size:.95rem;display:flex;flex-direction:column;gap:10px}
.acc__body ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}

/* Sticky koopbalk */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(110%);
  transition:transform .28s ease;background:var(--surface);border-top:1px solid var(--line);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 30px rgba(10,30,15,.10);
}
.stickybar.is-on{transform:translateY(0)}
.stickybar__in{max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;gap:14px}
.stickybar__txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.stickybar__txt b{font-family:var(--f-display);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybar__txt span{font-family:var(--f-mono);font-size:.85rem;color:var(--muted)}
.stickybar .btn{margin-left:auto;white-space:nowrap}

/* ---------- Winkelwagen-lade ---------- */
.scrim{position:fixed;inset:0;background:rgba(6,20,10,.5);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:80}
.scrim.is-on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:90;background:var(--paper);
  border-left:1px solid var(--line);transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.8,.25,1);
  display:flex;flex-direction:column;
}
.drawer.is-on{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer__head h2{font-size:1.25rem}
.drawer__body{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.drawer__foot{border-top:1px solid var(--line);padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.line-item{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center}
.line-item__media{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;aspect-ratio:1/1;display:grid;place-items:center;padding:6px}
.line-item__media svg{width:100%;height:100%}
.line-item__media img{width:100%;height:100%;object-fit:contain;display:block;border-radius:6px}
.line-item b{font-size:.95rem;font-weight:600;display:block}
.line-item small{display:block;color:var(--muted);font-size:.82rem}
.line-item__price{font-family:var(--f-mono);font-size:.92rem;text-align:right}
.remove{display:inline-block;margin-top:4px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:.78rem;text-decoration:underline;padding:0}
.ship-meter{display:flex;flex-direction:column;gap:7px;font-size:.86rem}
.ship-meter__track{height:9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.ship-meter__fill{height:100%;background:linear-gradient(90deg,var(--pitch),var(--flame));width:0;transition:width .4s ease}
.totals{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:1.05rem}
.handoff{
  margin:0;font-size:.78rem;line-height:1.45;color:var(--warn);
  background:color-mix(in srgb,var(--lemon) 18%,var(--surface));
  border:1px solid color-mix(in srgb,var(--lemon) 55%,transparent);
  border-radius:12px;padding:10px 12px;
}
.empty-cart{color:var(--muted);text-align:center;padding:40px 10px;display:flex;flex-direction:column;gap:12px;align-items:center}

/* ---------- Toast + confetti ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:100;
  background:var(--ink);color:var(--paper);border-radius:999px;padding:12px 20px;font-weight:600;font-size:.92rem;
  transition:transform .3s cubic-bezier(.2,.9,.3,1);display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);
}
.toast.is-on{transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:var(--lemon)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:95}

/* ---------- Reveal (start zichtbaar; JS voegt animatie pas toe) ---------- */
.reveal-ready .reveal{opacity:0;transform:translateY(16px)}
.reveal-ready .reveal.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.25,1)}

/* ---------- Routing ---------- */
[data-route]{display:none}
[data-route].is-active{display:block}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .pdp{grid-template-columns:1fr}
  .gallery{position:static}
  .cols--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__cols{grid-template-columns:1fr 1fr}
  .news,.gift{grid-template-columns:1fr}
  .gift__art{order:-1}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  .icon-btn{min-height:44px}
  /* Zonder deze regel bleef de knoppengroep tegen het logo plakken, omdat het
     verborgen menu de duwende marge droeg. */
  .nav + .header__actions{margin-left:auto}
  .header__bar{gap:10px}
  .nav{
    display:none;position:absolute;right:var(--gutter);left:auto;top:calc(100% + 8px);margin:0;
    width:min(250px,calc(100vw - var(--gutter) * 2));
    flex-direction:column;gap:0;background:var(--paper);
    border:1px solid var(--line);border-radius:14px;padding:4px 16px;
    box-shadow:0 22px 40px -24px rgba(6,52,30,.85);
  }
  .header.is-open .nav{display:flex}
  .nav a{padding-block:13px;border-bottom:1px solid var(--line);border-radius:0}
  .nav a:last-child{border-bottom:0}
  .nav a:hover{border-bottom-color:var(--line)}
  .cols--3,.steps{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr 1fr}
  .section__head{align-items:start}

  .usps ul{font-size:.82rem}
  .usps li{padding-right:28px}
}
@keyframes usp-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .usps ul{animation:none}
  .usps{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:560px){
  .logo__img{height:32px}
}
@media (max-width:460px){
  .cols--4,.cols--2{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr}
  .stickybar__txt span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal-ready .reveal{opacity:1;transform:none}
}


/* ==========================================================================
   Voetbalelementen en beweging
   ========================================================================== */

/* Zwevende bal naast de kop */
.hero__ball{
  position:absolute;right:-6px;top:6px;width:54px;height:54px;color:var(--brand);
  animation:bob 3.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-13px) rotate(12deg)}}
.hero h1{position:relative;display:inline-block;padding-right:64px}

/* Bal die over de zijlijn rolt, per sectie één keer */
.ball-rail{position:relative;height:34px;display:flex;align-items:center;overflow:hidden}
.ball-rail::before{content:"";position:absolute;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 26px)}
.ball-rail__ball{position:absolute;left:0;width:30px;height:30px;color:var(--pitch);opacity:0}
.ball-rail.is-rolling .ball-rail__ball{animation:roll 1.5s cubic-bezier(.25,.6,.35,1) forwards}
@keyframes roll{
  0%{opacity:1;transform:translateX(-40px) rotate(0)}
  100%{opacity:1;transform:translateX(calc(100vw - 60px)) rotate(900deg)}
}

/* Bal in de koopknop draait bij hover */
.btn__ball{width:19px;height:19px;flex:none}
.btn:hover .btn__ball{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Kaarten worden gedeeld bij een nieuw potje */
.mcard.is-dealt{animation:deal .42s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes deal{from{opacity:0;transform:translateY(-16px) scale(.94) rotate(-4deg)}to{opacity:1;transform:none}}
.mcard:not(.is-done):hover .mcard__inner{transform:translateY(-3px)}
.mcard:not(.is-done).is-open:hover .mcard__inner{transform:rotateY(180deg)}

/* Doelnet achter de sectiekop van de collectie */
.netted{position:relative}
.netted::before{
  content:"";position:absolute;right:0;top:-10px;width:190px;height:96px;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);
}
@media (max-width:760px){.netted::before{display:none}}

/* Cijfers die oplopen */
.count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .pitch-lines path,.pitch-lines circle{animation:none;stroke-dashoffset:0}
  .hero__ball,.ball-rail.is-rolling .ball-rail__ball{animation:none}
  .ball-rail__ball{opacity:1}
  .mcard.is-dealt{animation:none}
}


/* ==========================================================================
   Afrekenen — rustige, strakke kassa in de geest van Shopify:
   titel bovenaan, stappen, formulier links, besteloverzicht rechts.
   ========================================================================== */
body.is-checkout .usps,
body.is-checkout .nav,
body.is-checkout .footer{display:none}
body.is-checkout .header{border-bottom:1px solid var(--line)}

body.is-checkout .usps,
body.is-checkout .nav,
body.is-checkout .footer{display:none}
body.is-checkout .header{border-bottom:1px solid var(--line)}

/* Wachtblok op de afrekenpagina: een stuiterende bal terwijl de winkel
   antwoordt. Het blok gaat boven de kolommen staan en blokkeert niets, zodat
   iemand alvast zijn e-mailadres kan intypen. */
.co-laden{
  display:flex;align-items:center;gap:14px;
  margin:0 0 20px;padding:14px 18px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface-2);
}
.co-laden[hidden]{display:none}
.co-laden__veld{position:relative;width:34px;height:36px;flex:none}
.co-laden__bal{
  position:absolute;left:3px;top:0;width:28px;height:28px;color:var(--pitch);
  animation:co-stuit .85s cubic-bezier(.34,0,.66,1) infinite;
}
.co-laden__schaduw{
  position:absolute;left:6px;bottom:2px;width:22px;height:5px;border-radius:50%;
  background:currentColor;opacity:.22;
  animation:co-schaduw .85s cubic-bezier(.34,0,.66,1) infinite;
}
.co-laden__tekst{font-size:.95rem;color:var(--ink)}
@keyframes co-stuit{
  0%,100%{transform:translateY(6px) rotate(0deg)}
  50%    {transform:translateY(-8px) rotate(180deg)}
}
@keyframes co-schaduw{
  0%,100%{transform:scaleX(1);opacity:.22}
  50%    {transform:scaleX(.55);opacity:.08}
}
@media (prefers-reduced-motion:reduce){
  .co-laden__bal,.co-laden__schaduw{animation:none}
  .co-laden__bal{transform:translateY(4px)}
}

.co-top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:clamp(20px,3vw,32px) 0 18px;border-bottom:1px solid var(--line);margin-bottom:clamp(18px,3vw,28px);
}
.co-top h1{font-size:clamp(1.8rem,4vw,2.4rem)}
.co-steps{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.co-steps li + li::before{content:"›";margin-right:8px;color:var(--line)}
.co-steps a{color:var(--muted);text-decoration:none}
.co-steps a:hover{color:var(--ink)}
.co-steps [aria-current="step"]{color:var(--ink);font-weight:500}
.co-back{font-size:.9rem;color:var(--muted);text-decoration:none}
.co-back:hover{color:var(--ink)}

.checkout{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,56px);align-items:start;padding-bottom:clamp(40px,6vw,72px);
}
.checkout__form{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:26px;min-width:0}
.checkout__summary{
  grid-column:2;grid-row:1;min-width:0;position:sticky;
  top:calc(24px + env(safe-area-inset-top,0px));
  background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:20px;
}

/* Besteloverzicht */
.co-sum{display:flex;flex-direction:column;gap:14px}
.co-sum > summary{list-style:none;cursor:default}
.co-sum > summary::-webkit-details-marker{display:none}
.co-sum__head{display:flex;align-items:center;gap:10px}
.co-sum__cart{width:18px;height:18px;color:var(--pitch);display:none}
.co-sum__title{font-family:var(--f-display);font-weight:800;font-size:1.1rem}
.co-sum__total{margin-left:auto;font-family:var(--f-mono);font-weight:500}
.co-sum__chev{
  width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease;display:none;flex:none;
}
.co-sum[open] .co-sum__chev{transform:rotate(-135deg)}

/* Productregels met foto, net als in een Shopify-overzicht */
.co-item{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;
  gap:12px;padding:8px 0;
}
.co-item + .co-item{border-top:1px solid var(--line)}
.co-item__media{
  position:relative;width:56px;height:56px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;overflow:visible;
}
.co-item__media img{
  width:100%;height:100%;object-fit:contain;border-radius:9px;padding:3px;
}
.co-item__art{width:38px;height:38px}
.co-item__qty{
  position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;
  border-radius:999px;background:var(--pitch);color:#fff;
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface-2);
}
.co-item__info{display:flex;flex-direction:column;gap:2px;min-width:0}
.co-item__name{font-size:.93rem;font-weight:600;line-height:1.25}
.co-item__info small{font-size:.78rem;color:var(--muted)}
.co-item__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.co-tag{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.02em;
  background:var(--pitch-soft);color:var(--pitch);border-radius:999px;padding:2px 8px;
}
.co-item__price{
  display:flex;flex-direction:column;align-items:flex-end;
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.co-item__price s{font-size:.78rem;color:var(--muted)}
.co-item__price b{font-size:.93rem;font-weight:600}

.co-line{display:flex;justify-content:space-between;gap:12px;font-size:.93rem;padding:5px 0}
.co-line span:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.co-line--total{
  font-family:var(--f-display);font-weight:800;font-size:1.2rem;
  border-top:1px solid var(--line);margin-top:6px;padding-top:12px;
}
.co-line--total span:last-child{font-family:var(--f-display)}
.co-line--discount span:last-child{color:var(--pitch)}
.co-vat{font-size:.78rem;color:var(--muted);margin:0}

.co-coupon{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:14px}
.co-coupon__row{display:flex;gap:8px}
.co-coupon__row input{
  flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
}
.co-coupon__row input:focus{border-color:var(--pitch);outline:2px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.co-coupon__row .btn{white-space:nowrap;border-width:1px}
.co-coupon-tag{
  display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-family:var(--f-mono);
  background:var(--pitch-soft);color:var(--pitch);border-radius:999px;padding:3px 10px;
}
.co-coupon-tag button{background:none;border:0;cursor:pointer;color:inherit;font-size:1rem;line-height:1;padding:0}

/* Blokken en velden */
.co-block{display:flex;flex-direction:column;gap:12px;border:0;padding:0;margin:0}
.co-block h2{font-size:1.05rem;font-family:var(--f-display);font-weight:800}
.co-row{display:flex;flex-wrap:wrap;gap:12px}

.fld{position:relative;min-width:0}
.co-row > .fld{flex:1 1 200px}
.co-row > .fld--sm{flex:1 1 110px}
.fld input, .fld select, .fld textarea{
  width:100%;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:22px 14px 8px;
}
.fld textarea{padding-top:26px;resize:vertical}
.fld input:focus, .fld select:focus, .fld textarea:focus{
  border-color:var(--pitch);outline:2px solid color-mix(in srgb,var(--brand) 32%,transparent);outline-offset:0;
}
.fld input[aria-invalid="true"]{border-color:#D92D20}
.fld label{
  position:absolute;left:15px;top:17px;color:var(--muted);font-size:1rem;pointer-events:none;
  transition:top .14s ease, font-size .14s ease;
}
.fld input:focus + label,
.fld input:not(:placeholder-shown) + label,
.fld textarea:focus + label,
.fld textarea:not(:placeholder-shown) + label,
.fld--select label{top:7px;font-size:.7rem;letter-spacing:.02em}
.fld--select select{appearance:none;background-image:none}
.fld--select::after{
  content:"";position:absolute;right:16px;top:22px;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);pointer-events:none;
}

/* Keuzeblokken voor verzending en betaling */
.co-options{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.co-options > .co-hint{padding:14px}
.co-option{
  display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;
  padding:14px 15px;cursor:pointer;background:var(--surface);border-bottom:1px solid var(--line);
}
.co-option:last-child{border-bottom:0}
.co-option[data-selected="true"]{background:color-mix(in srgb,var(--brand) 8%,var(--surface));box-shadow:inset 3px 0 0 var(--pitch)}
.co-option input{position:absolute;opacity:0;pointer-events:none}
.co-option b{font-weight:500}
.co-option small{display:block;color:var(--muted);font-size:.82rem}
.co-option .bundle__dot{width:19px;height:19px;border-width:1px}
.co-option[data-selected="true"] .bundle__dot{border-color:var(--pitch);border-width:2px}
.co-option[data-selected="true"] .bundle__dot::after{content:"";width:9px;height:9px;border-radius:999px;background:var(--pitch)}
.co-option span.price{font-family:var(--f-mono);font-size:.88rem;color:var(--muted);white-space:nowrap}
.co-option[data-selected="true"] span.price{color:var(--ink)}
.co-option--ship{grid-template-columns:20px 1fr auto auto}
.co-logo{display:block;background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 5px}
.co-logo img{height:22px;width:auto;display:block}
.co-logo--sm{margin-left:auto;padding:3px 5px}
.co-logo--sm img{height:18px}

.co-terms{display:flex;align-items:center;gap:12px;font-size:.93rem}
.co-terms input{width:20px;height:20px;accent-color:var(--pitch);flex:none}

.co-hint{font-size:.85rem;color:var(--muted);margin:0}
.co-hint--ok{color:var(--pitch);font-weight:600}
.co-hint--bad{color:#B42318}
.co-alert{
  border:1px solid #F0C2BD;border-left:4px solid #D92D20;background:#FDF3F2;
  color:#7A271A;border-radius:12px;padding:12px 14px;font-size:.9rem;
}
.co-foot{font-size:.8rem;color:var(--muted);text-align:center;margin:0;padding-top:4px}
.co-foot a{color:var(--muted)}

@media (max-width:900px){
  .co-top{padding-top:16px;padding-bottom:14px;margin-bottom:14px}
  .checkout{grid-template-columns:minmax(0,1fr);gap:16px}
  .checkout__form{grid-column:1;grid-row:2;gap:20px}
  .checkout__summary{
    grid-column:1;grid-row:1;position:static;padding:14px 16px;border-radius:12px;
  }
  .co-sum{gap:12px}
  .co-sum > summary{cursor:pointer}
  .co-sum__cart, .co-sum__chev{display:block}
  .co-sum__title{font-size:1rem}
  .co-item{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:7px 0}
  .co-item__media{width:48px;height:48px}
  .co-item__art{width:32px;height:32px}
  .co-back{display:none}
  .co-row{gap:10px}
  .co-row > .fld{flex:1 1 140px}
  .delivery{padding:14px;gap:8px}
}

@media (max-width:760px){
  .nav{display:none}
  .cols--3,.steps{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr 1fr}
  .section__head{align-items:start}

  /* USP's schuiven voorbij in plaats van onder elkaar te staan */
  .usps .wrap{padding-inline:0;overflow:hidden}
  .usps ul{
    flex-wrap:nowrap;width:max-content;gap:0 26px;justify-content:flex-start;
    font-size:.82rem;padding-inline:16px;animation:usp-slide 26s linear infinite;
  }
  .usps li{white-space:nowrap;flex:none}
  .usps:focus-within ul, .usps:hover ul{animation-play-state:paused}
}
@keyframes usp-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .usps ul{animation:none}
  .usps{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:460px){
  .cols--4,.cols--2{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr}
  .stickybar__txt span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal-ready .reveal{opacity:1;transform:none}
}

/* ---------- Bedankpagina ---------- */
.bedankt{
  max-width:640px;margin-inline:auto;text-align:center;
  padding-block:clamp(40px,7vw,80px);display:flex;flex-direction:column;align-items:center;gap:14px;
}
.bedankt__ring{
  width:76px;height:76px;border-radius:999px;display:grid;place-items:center;flex:none;
  background:var(--pitch-soft);color:var(--pitch);margin-bottom:6px;
}
.bedankt__ring svg{width:34px;height:34px}
.bedankt--wacht .bedankt__ring{background:#FFF3E0;color:#A85B00}
.bedankt--mis .bedankt__ring{background:#FDE7E4;color:#B4231A}
.bedankt h1{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.bedankt .lead{max-width:48ch}

.bedankt__kaart{
  width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-card);padding:18px 20px;display:flex;flex-direction:column;gap:2px;margin-top:6px;
}
.bedankt__kaart h2{font-size:1rem;font-family:var(--f-display);margin-bottom:8px}

.bedankt__stappen{
  width:100%;text-align:left;list-style:none;margin:10px 0 0;padding:0;
  display:flex;flex-direction:column;gap:14px;counter-reset:stap;
}
.bedankt__stappen li{display:flex;flex-direction:column;gap:2px;padding-left:38px;position:relative}
.bedankt__stappen li::before{
  counter-increment:stap;content:counter(stap);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:999px;background:var(--pitch);color:#fff;
  display:grid;place-items:center;font-family:var(--f-mono);font-size:.8rem;
}
.bedankt__stappen span{font-size:.92rem;color:var(--muted)}

.bedankt__acties{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}

@media (max-width:560px){
  .bedankt__acties .btn{width:100%}
}