/* =====================================================================
   MILYN — shop styling
   Donkere mode-aesthetic op het merkpalet: groen als grond, wijn als
   anker onderaan, en één lichte accentkleur voor alles wat moet opvallen.

   HET PALET
     Shadowed Ivy   #18231D   grond
     Mossed Green   #2F4736   opgetilde vlakken
     Dusky Leaf     #506856   lijnen en nadruk (opgelicht toegepast)
     Plum Bloom     #6B3543   gevulde accenten (badges, balk)
     Mulberry Wine  #51202C   diepere wijnvlakken
     Black Cherry   #2A1016   footer

   OPZET: ICE WHITE, UNISEKS
   Lichte grond, het palet zit in de inkt en de accenten. Shadowed Ivy is de
   tekstkleur, Mossed Green het accent, Plum Bloom de gevulde markering en
   Black Cherry verankert de footer. Dat leest als heritage-tailoring in
   plaats van boetiek — belangrijk zodra er herenkleding bij komt.

   Eén letterfamilie (Jost) voor alles. Het woordmerk is al een verfijnde
   serif; er een tweede serif naast zetten maakte de koppen dun en goedkoop.
   Een enkele grotesk met ruime letterafstand doet het tegenovergestelde.
   ===================================================================== */

:root{
  /* het palet, ongewijzigd */
  --cherry:    #2a1016;
  --mulberry:  #51202c;
  --plum:      #6b3543;
  --ivy:       #18231d;
  --moss:      #2f4736;
  --dusky:     #506856;

  /* vlakken */
  --bg:        #f2f5f3;   /* ice white, flauwe koele zweem */
  --surface:   #ffffff;   /* kaarten, invoervelden, popovers */
  --card:      #e8edea;   /* productvlak en placeholders */

  /* tekst — het merkgroen als inkt */
  --ink:       #18231d;   /* koppen en nadruk */
  --ink-soft:  #3d4a43;   /* lopende tekst */
  --muted:     #78827b;   /* bijzaken en labels */
  --line:      #dde4df;

  /* accent */
  --oak:       #2f4736;   /* Mossed Green: lijnen, hover, actief */
  --oak-deep:  #18231d;
  --btn:       #51202c;   /* primaire knop: Mulberry */
  --btn-hover: #2a1016;   /* Black Cherry */
  --op-accent: #f2f5f3;   /* tekst op een donkere knop */
  --op-plum:   #f4efe9;   /* tekst op een plumvlak */

  /* signalen */
  --green:     #3e6b4f;   /* op voorraad en levering */
  --rood:      #9b3a2d;   /* uitverkocht en fouten */
  --waarschuwing: #8f5b1c;

  /* footer: Black Cherry verankert de onderkant */
  --foot-bg:    #2a1016;
  --foot-tekst: #ece4e3;
  --foot-zacht: #b6a8aa;
  --foot-lijn:  rgba(236,228,227,.18);
  --foot-hover: #ffffff;

  --shadow:    0 12px 34px -18px rgba(24,35,29,.22);
  --max: 1200px;
  --gap: clamp(18px, 3vw, 34px);
  --serif: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --script: var(--sans);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 clamp(20px,5vw,48px); }

.kicker{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--plum); color:var(--op-plum);
  font-size:12.5px; letter-spacing:.06em; text-align:center;
  padding:9px 16px;
}
.announce strong{ color:#ffffff; font-weight:600; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.brand{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  letter-spacing:.01em;
  display:inline-flex; align-items:center;
}
.brand span{ color:var(--oak); }
.brand-logo{ height:38px; width:auto; display:block; }
.site-footer .brand-logo{ height:56px; }
.nav{ display:flex; gap:28px; align-items:center; }
.nav a{
  font-size:14px; color:var(--ink-soft); letter-spacing:.02em;
  transition:color .2s;
}
.nav a:hover{ color:var(--oak-deep); }
.nav a.ig{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:100px;
  padding:7px 15px; color:var(--ink);
}
.nav a.ig:hover{ border-color:var(--oak); color:var(--oak-deep); }
.nav a.ig svg{ width:16px; height:16px; }
/* menu is compact (Schilderijen + winkelwagen); op mobiel logo kleiner voor lucht */
@media (max-width:520px){
  .brand-logo{ height:29px; }
  .nav{ gap:18px; }
}

/* ---------- Hero: beeld over de volle breedte, tekst links ----------
   De foto is gespiegeld zodat het model rechts staat en de donkere zijde
   links: daar staat de tekst overheen. Een verloop vanaf links houdt hem
   leesbaar, ook als je later een lichtere foto gebruikt.
   Binnen de hero gelden lichte tekstkleuren — de rest van de site is licht. */
.hero{
  position:relative;
  min-height:clamp(440px, 54vw, 640px);
  display:flex; align-items:center;
  overflow:hidden; isolation:isolate;
}
.hero-beeld{ position:absolute; inset:0; z-index:0; display:block; }
.hero-beeld img{
  width:100%; height:100%; object-fit:cover; object-position:70% center;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(16,12,10,.88) 0%, rgba(16,12,10,.62) 34%, rgba(16,12,10,.12) 62%, transparent 80%),
    linear-gradient(to top, rgba(16,12,10,.42), transparent 46%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero-text{ max-width:44ch; }
.hero .kicker{ margin-bottom:20px; color:rgba(255,255,255,.72); }
.hero h1{
  font-weight:500;
  font-size:clamp(32px,4.4vw,56px);
  line-height:1.06;
  letter-spacing:-.022em;
  margin:0;
  color:#fbfcfb;
  text-wrap:balance;
}
.hero h1 em{ font-style:normal; color:#b9cbbd; }
.hero p{
  margin:22px 0 0;
  max-width:38ch;
  color:rgba(255,255,255,.80);
  font-size:clamp(15px,1.25vw,17px);
}
.hero .cta-row{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }
/* op het donkere beeld draaien de knoppen om: licht vlak, donkere tekst */
.hero .btn-primary{ background:#fbfcfb; color:var(--ink); }
.hero .btn-primary:hover{ background:#ffffff; }
.hero .btn-ghost{ border-color:rgba(255,255,255,.45); color:#fbfcfb; }
.hero .btn-ghost:hover{ border-color:#ffffff; color:#ffffff; }

/* mobiel: staande uitsnede, tekst onderin over het beeld */
@media (max-width:820px){
  .hero{ min-height:clamp(540px, 116vw, 700px); align-items:flex-end; padding-bottom:clamp(30px,7vw,52px); }
  .hero-beeld img{ object-position:62% center; }
  .hero::after{
    background:linear-gradient(to top, rgba(16,12,10,.90) 6%, rgba(16,12,10,.55) 44%, transparent 76%);
  }
  .hero-text{ max-width:none; }
}

/* ---------- hero: foto rechts, die naar links wegloopt in het donker ----------
   Geen harde scheiding in het midden. De foto ligt los over de rechterkant
   en een verloop laat hem oplossen in de merkkleur. */
.hero-split{
  position:relative;
  display:flex; align-items:center;
  min-height:clamp(560px, 53vw, 780px);
  background:var(--foot-bg);
  overflow:hidden; isolation:isolate;
}
.hero-split::after{ content:none; }          /* het verloop van de oude hero uit */

/* twee staande foto's naast elkaar: een smal detail en de hele look */
.hero-beeldvlak{
  position:absolute; top:0; right:0; bottom:0;
  width:62%; z-index:0;
  display:grid; grid-template-columns:36fr 64fr; gap:10px;
}
.hero-beeldvlak > div{ position:relative; overflow:hidden; }
.hero-beeldvlak picture{ display:contents; }
.hero-beeldvlak img:not(.look-mini){
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero-beeld-klein img:not(.look-mini){ object-position:48% 56%; }
.hero-beeld-groot img:not(.look-mini){ object-position:58% 22%; }

/* smalle band die de linkerrand laat oplossen in de merkkleur,
   zodat er geen rechte snee door de hero loopt */
.hero-beeldvlak::after{
  content:""; position:absolute; top:0; bottom:0; left:0; z-index:2;
  width:clamp(110px, 16vw, 240px); pointer-events:none;
  background:linear-gradient(to right, var(--foot-bg) 0%, rgba(42,16,22,.72) 34%, rgba(42,16,22,0) 100%);
}

.hero-split .wrap{ position:relative; z-index:2; }
.hero-split .hero-text{ max-width:30ch; }

/* telefoon: foto boven, tekst eronder, met een verloop ertussen */
@media (max-width:820px){
  .hero-split{
    display:flex; flex-direction:column;   /* foto boven, tekst eronder */
    min-height:0; align-items:stretch;
  }
  .hero-beeldvlak{
    position:relative; width:100%;
    /* exact de verhouding van look.jpg, zodat er niets wordt bijgesneden
       en de pijltjes op dezelfde percentages kloppen */
    aspect-ratio:1400/1890;
    display:block;
  }
  .hero-beeldvlak > .hero-beeld-klein{ display:none; }   /* op telefoon alleen de hele look */
  .hero-beeldvlak > .hero-beeld-groot{ position:absolute; inset:0; }
  .hero-beeldvlak img:not(.look-mini){ object-position:center center; }
  .hero-beeldvlak::after{
    width:auto; left:0; right:0;
    background:linear-gradient(to bottom,
      rgba(42,16,22,.10) 0%,
      rgba(42,16,22,.10) 52%,
      rgba(42,16,22,.72) 82%,
      var(--foot-bg) 100%);
  }
  .hero-split .wrap{ padding-top:clamp(20px,5vw,30px); padding-bottom:clamp(32px,8vw,44px); }
  .hero-split .hero-text{ max-width:none; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px; font-weight:500; letter-spacing:.01em;
  padding:14px 26px; border-radius:100px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .2s, color .2s, border-color .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--btn); color:var(--op-accent); }
.btn-primary:hover{ background:var(--btn-hover); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--oak); color:var(--oak-deep); }
.btn-lg{ padding:16px 32px; font-size:16px; }
.btn.block{ width:100%; }

/* ---------- Section head ---------- */
.section{ padding:clamp(20px,4vw,40px) 0 clamp(60px,9vw,110px); }
.section-head{ margin-bottom:clamp(26px,4vw,44px); }
.section-head h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(24px,3vw,34px); margin:.35em 0 0; letter-spacing:-.01em;
}

/* ---------- Categorie-chips ---------- */
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(20px,3vw,30px); }
.chip{
  font-size:13.5px; padding:9px 18px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  font-family:var(--sans); transition:.2s;
}
.chip:hover{ border-color:var(--oak); color:var(--oak-deep); }
.chip.active{ background:var(--plum); border-color:var(--plum); color:var(--op-plum); }

/* ---------- Set-actie ---------- */
.set-actie{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:14px 18px; margin-bottom:clamp(20px,3vw,30px);
  font-size:14.5px; color:var(--ink-soft);
}
.set-actie svg{ width:18px; height:18px; color:var(--oak); flex:0 0 auto; }
.set-actie strong{ color:var(--ink); }

/* ---------- Product grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid{ grid-template-columns:repeat(2,1fr); gap:20px 12px; } }

.card{ display:block; }
.card-media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:3px;
  background:var(--card);
  border:1px solid var(--line);
}
.card-media img,
.card-media video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.card-media video{ opacity:0; transition:opacity .55s ease; }
.card-media .poster-img{ transition:transform .8s ease, opacity .55s ease; }
/* hover: video of tweede foto in, hoofdfoto subtiel weg */
.card-media .hover-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease;
}
.card:hover .card-media video{ opacity:1; }
.card:hover .card-media .hover-img{ opacity:1; }
.card:hover .card-media:has(video) .poster-img,
.card:hover .card-media:has(.hover-img) .poster-img{ opacity:0; transform:scale(1.02); }

.card-media .badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(4px);
  color:var(--ink-soft);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 11px; border-radius:100px; border:1px solid var(--line);
}
.card-media .badge.hot{
  background:var(--plum); color:var(--op-plum); border-color:var(--plum);
}
.card:hover .card-media{ box-shadow:var(--shadow); }
.card-media{ transition:box-shadow .3s ease; }

/* placeholder voor binnenkort-producten */
.card-media.placeholder{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--mulberry) 0%, var(--card) 70%);
}
.card-media.placeholder .ph-mark{
  font-family:var(--serif); font-size:44px; color:var(--oak); font-style:italic;
}

.card-body{ padding:16px 2px 0; }
.card-body .cat{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.card-body h3{
  font-family:var(--serif); font-weight:500; font-size:20px;
  margin:6px 0 0; letter-spacing:-.005em;
}
.card-body .price{ margin-top:5px; color:var(--ink-soft); font-size:14.5px; }
.card:hover h3{ color:var(--oak-deep); }
.card h3, .card-media *{ transition:color .2s; }

/* ---------- Product detail ---------- */
.detail{ padding:clamp(24px,4vw,44px) 0 clamp(60px,9vw,110px); }
.back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--muted); margin-bottom:clamp(20px,3vw,34px);
}
.back:hover{ color:var(--oak-deep); }
.detail-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,68px);
  align-items:start;
}
@media (max-width:860px){ .detail-grid{ grid-template-columns:1fr; gap:32px; } }

.detail-media{ position:sticky; top:92px; }
@media (max-width:860px){ .detail-media{ position:static; } }
.detail-media .frame{
  aspect-ratio:3/4; border-radius:4px; overflow:hidden;
  border:1px solid var(--line); background:var(--card);
  position:relative;
}
.detail-media .frame img,
.detail-media .frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.detail-media .frame video{ opacity:0; transition:opacity .5s; }
.detail-media .frame.show-video video{ opacity:1; }
.media-toggle{ display:flex; gap:10px; margin-top:14px; }
.media-toggle button{
  flex:1; font-size:13px; letter-spacing:.02em; padding:10px; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:100px; color:var(--ink-soft);
  transition:.2s;
}
.media-toggle button.active{ border-color:var(--oak); color:var(--oak-deep); background:var(--surface); }

.detail-info .cat{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.detail-info h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,4vw,44px);
  margin:10px 0 0; line-height:1.1; letter-spacing:-.01em;
}
.verse{
  font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-soft);
  border-left:2px solid var(--oak); padding:2px 0 2px 18px; margin:22px 0 0;
}
.detail-info .desc{ margin:22px 0 0; color:var(--ink-soft); max-width:46ch; }

.price-table{ margin:28px 0 0; border-top:1px solid var(--line); }
.price-table .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.price-table .row .fmt{ font-size:15px; }
.price-table .row .var{ color:var(--muted); font-size:13px; margin-left:8px; }
.price-table .row .amt{ font-variant-numeric:tabular-nums; font-size:15px; }

/* ---------- Variant kiezers (tegels) ---------- */
.variants{ margin:34px 0 0; display:grid; gap:28px; }
.field{ display:block; }
.field-label{
  display:block; font-size:13px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink); margin-bottom:10px; font-weight:700;
}

/* segmentkiezer (Type): twee duidelijk zichtbare opties */
.seg{ display:flex; gap:10px; }
.seg-btn{
  flex:1; font-family:var(--sans); font-size:14px; font-weight:500;
  color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:100px; padding:13px 10px; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
  white-space:nowrap;
}
.seg-btn:hover{ border-color:var(--oak); color:var(--oak-deep); }
.seg-btn.active{
  background:var(--plum); border-color:var(--plum); color:var(--op-plum);
  box-shadow:inset 0 0 0 1px var(--oak-deep);
}
.opt-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media (max-width:480px){ .opt-row{ grid-template-columns:repeat(2,1fr); } }
.opt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:640px){ .opt-grid{ grid-template-columns:repeat(2,1fr); } }
.opt{
  font-family:var(--sans); cursor:pointer; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:11px 8px 10px; display:flex; flex-direction:column; gap:2px;
  transition:border-color .15s, box-shadow .15s;
}
.opt:hover{ border-color:var(--oak); }
.opt.active{
  border-color:var(--oak-deep);
  box-shadow:inset 0 0 0 1px var(--oak-deep);
}
.opt .opt-t{ font-size:14px; font-weight:600; color:var(--ink); }
.opt .opt-s{ font-size:11.5px; color:var(--muted); }
.opt .opt-p{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; font-variant-numeric:tabular-nums; }
.opt.active .opt-p, .opt.active .opt-s{ color:var(--oak-deep); }
.opt .opt-tag{
  font-size:11px; font-weight:500; color:var(--muted);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px; margin-left:4px;
  vertical-align:1px;
}
.opt.active .opt-tag{ color:var(--oak-deep); border-color:var(--oak); }

/* visuele uitvoering-tegels: compact, thumbnail links */
.opt-row{ grid-template-columns:repeat(2,1fr); }
.opt-visual{
  display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto;
  align-items:center; column-gap:10px; row-gap:0;
  text-align:left; padding:8px 12px 8px 8px;
}
.opt-visual .opt-img{
  grid-row:1 / 3; width:42px; height:42px; border-radius:6px; overflow:hidden;
  border:1px solid var(--line); background:var(--card);
}
.opt-visual .opt-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.opt-visual .opt-t{ grid-column:2; align-self:end; }
.opt-visual .opt-s{ grid-column:2; align-self:start; }
.opt-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:560px){ .opt-grid-3{ grid-template-columns:1fr; } }
.field[hidden]{ display:none; }

/* custom tekst veld */
#custom-tekst{
  width:100%; font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; resize:vertical; min-height:76px;
  transition:border-color .2s;
}
#custom-tekst:hover{ border-color:var(--oak); }
#custom-tekst:focus{
  outline:none; border-color:var(--oak);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--oak) 18%, transparent);
}
.field-hint{ display:block; margin-top:7px; font-size:12.5px; color:var(--muted); }

/* papier-afwerking: glans-effect op de thumbnail */
.finish{ position:relative; }
.finish::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.finish-mat img{ filter:saturate(.94) contrast(.97); }
.finish-satijn::after{
  background:linear-gradient(115deg,
    transparent 32%, rgba(255,255,255,.30) 47%,
    rgba(255,255,255,.08) 56%, transparent 66%);
}
.finish-glans img{ filter:saturate(1.12) contrast(1.07); }
.finish-glans::after{
  background:linear-gradient(115deg,
    transparent 26%, rgba(255,255,255,.6) 44%,
    rgba(255,255,255,.18) 53%, transparent 62%);
}
/* hover: lichtglans veegt over satijn en glans (mat blijft vlak) */
.opt:hover .finish-satijn::after,
.opt:hover .finish-glans::after{
  animation:sheen .9s ease;
}
@keyframes sheen{
  from{ transform:translateX(-70%); }
  to{ transform:translateX(70%); }
}

/* foto-galerij pijlen op de grote foto */
.foto-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(4px);
  color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.foto-nav svg{ width:18px; height:18px; }
.foto-nav.prev{ left:12px; }
.foto-nav.next{ right:12px; }
.foto-nav:hover{ background:var(--surface); color:var(--oak-deep); }

/* op touch geen pijlen (daar swipe je) */
@media (hover:none){
  .foto-nav{ display:none; }
}
/* de rail scrollt horizontaal, de pagina verticaal */
.detail-media .fotorail{ touch-action:pan-x pan-y; }

.foto-count{
  position:absolute; right:12px; bottom:12px; z-index:3;
  font-size:12px; color:var(--ink-soft); letter-spacing:.04em;
  background:color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter:blur(4px);
  border:1px solid var(--line); border-radius:100px; padding:4px 11px;
  font-variant-numeric:tabular-nums;
}

/* uitgeschakelde bestelknop (nog geen uitvoering gekozen) */
.btn.disabled{
  background:var(--card); color:var(--muted); cursor:not-allowed;
  border-color:var(--line); pointer-events:auto;
}
.btn.disabled:hover{ background:var(--card); }

/* papier-tegels: gecentreerd en gelijk van hoogte */
.opt-grid-3 .opt{ align-items:center; justify-content:center; min-height:64px; }
.opt-grid-3 .opt .opt-s{ white-space:nowrap; }

/* foto-galerij thumbnails */
.thumbs{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:12px;
}
.thumb{
  padding:0; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  cursor:pointer; background:var(--card); aspect-ratio:1/1;
  transition:border-color .15s, box-shadow .15s;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb:hover{ border-color:var(--oak); }
.thumb.active{ border-color:var(--oak-deep); box-shadow:inset 0 0 0 1px var(--oak-deep); }
@media (max-width:640px){ .thumbs{ grid-template-columns:repeat(5,1fr); } }

/* ---------- Prijs + levertijd + trust ---------- */
.price-line{ margin:38px 0 0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.price-big{ font-family:var(--serif); font-size:32px; font-weight:500; letter-spacing:-.01em; }
.price-sub{ font-size:13px; color:var(--muted); }
.delivery{
  margin-top:20px; font-size:14px; color:var(--ink-soft); line-height:1.55;
  position:relative; padding-left:17px;
}
.delivery .dot{
  position:absolute; left:0; top:.5em;
  width:8px; height:8px; border-radius:50%; background:var(--green);
}
.trust-list{
  margin:32px 0 0; padding:0; list-style:none;
  border-top:1px solid var(--line);
}
.trust-list li{
  padding:10px 0 10px 26px; font-size:14px; color:var(--ink-soft);
  border-bottom:1px solid var(--line);
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 4' fill='none' stroke='%234e6b53' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center;
}

/* ---------- Cross-sell ---------- */
.cross-sell{ margin-top:46px; border-top:1px solid var(--line); padding-top:34px; }
.cross-sell h3{
  font-family:var(--serif); font-weight:500; font-size:22px; margin:0 0 18px;
}
.grid-3{ grid-template-columns:repeat(3,1fr) !important; }
@media (max-width:560px){ .grid-3{ grid-template-columns:1fr 1fr !important; } }
.cross-sell .card-body h3{ font-size:16px; }

.perso{
  margin:26px 0 0; background:var(--card); border:1px solid var(--line);
  border-radius:6px; padding:18px 20px;
}
.perso h4{ margin:0 0 6px; font-size:14px; letter-spacing:.02em; }
.perso p{ margin:0; font-size:14px; color:var(--ink-soft); }

.buy{ margin:30px 0 0; }
.buy .note{ margin:12px 2px 0; font-size:13px; color:var(--muted); text-align:center; }

.info-list{ margin:30px 0 0; border-top:1px solid var(--line); }
.info-list .item{ border-bottom:1px solid var(--line); }
.info-list .item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; font-size:14px; font-weight:600; color:var(--ink);
}
.info-list .item summary::-webkit-details-marker{ display:none; }
.info-list .item summary::after{
  content:"+"; color:var(--muted); font-size:20px; font-weight:400; line-height:1;
  transition:transform .26s ease;
}
.info-list .item[open] summary::after{ transform:rotate(45deg); }
.info-list .item summary:hover{ color:var(--oak-deep); }
.info-list .item .d{ font-size:14px; color:var(--ink-soft); padding:0 0 16px; }

.soon-banner{
  margin:26px 0 0; padding:16px 20px; border:1px dashed var(--oak);
  border-radius:6px; background:var(--surface); color:var(--oak-deep); font-size:14.5px;
}

/* ---------- Kwaliteit / story ---------- */
.quality{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.quality .wrap{
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,6vw,80px);
  align-items:center; padding-top:clamp(48px,7vw,84px); padding-bottom:clamp(48px,7vw,84px);
}
@media (max-width:820px){ .quality .wrap{ grid-template-columns:1fr; } }
.quality-img{ border-radius:4px; overflow:hidden; box-shadow:var(--shadow); }
.quality-img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.quality h2{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,32px); margin:.4em 0 0; letter-spacing:-.01em; }
.spec-list{ margin:24px 0 0; padding:0; list-style:none; }
.spec-list li{
  padding:14px 0 14px 32px; border-bottom:1px solid var(--line);
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 4' fill='none' stroke='%234e6b53' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 18px;
}
.spec-list .st{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
.spec-list .ss{ display:block; font-size:13.5px; color:var(--muted); margin-top:2px; }
.quality-fsc{
  display:flex; align-items:center; gap:12px; margin-top:20px;
  font-size:13px; color:var(--muted);
}
.quality-fsc img{ height:44px; width:auto; }

/* ---------- Werkwijze: 3 visuele stappen ---------- */
.steps-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
}
@media (max-width:680px){ .steps-grid{ grid-template-columns:1fr; } }
.step-card{
  position:relative; aspect-ratio:4/5; border-radius:8px; overflow:hidden;
  box-shadow:var(--shadow);
}
.step-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s ease;
}
.step-card:hover img{ transform:scale(1.04); }
.step-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,24,18,.62) 0%, rgba(28,24,18,.12) 42%, transparent 60%);
}
.step-card .step-label{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:2;
  color:var(--foot-tekst);
}
.step-card .step-num{
  display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--foot-zacht); margin-bottom:5px;
}
.step-card .step-t{
  font-family:var(--serif); font-size:clamp(19px,2vw,23px); font-weight:500;
}

/* ---------- Verpakking ---------- */
.pack-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap);
  max-width:820px; margin:0 auto;
}
@media (max-width:640px){ .pack-grid{ grid-template-columns:1fr; } }
.pack-card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  overflow:hidden; text-align:center; padding-bottom:24px;
}
.pack-img{
  width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  margin-bottom:20px;
}
.pack-card .t{ font-family:var(--serif); font-size:19px; margin:0 0 5px; color:var(--ink); padding:0 24px; }
.pack-card .d{ font-size:13.5px; color:var(--muted); margin:0; padding:0 24px; }
.pack-note{
  text-align:center; margin:clamp(18px,3vw,26px) auto 0; font-size:13.5px; color:var(--muted);
}

/* ---------- Founder (tekst links, foto rechts) ---------- */
.founder{ padding:clamp(56px,8vw,100px) 0; }
.founder-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(30px,6vw,80px); align-items:center;
}
@media (max-width:760px){ .founder-grid{ grid-template-columns:1fr; gap:28px; } }
.founder blockquote{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(19px,2.3vw,24px); line-height:1.5; color:var(--ink);
  margin:24px 0 0;
}
.founder .sig{ margin-top:20px; font-size:14px; color:var(--muted); }
.founder .sig strong{ color:var(--ink-soft); font-weight:600; }
.founder-img{
  border-radius:8px; overflow:hidden; box-shadow:var(--shadow);
  max-width:380px; justify-self:end;
}
@media (max-width:760px){ .founder-img{ justify-self:start; } }
.founder-img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }

/* trein-vignet vaag in de verzendsectie */
#verpakking{ position:relative; overflow:hidden; }
#verpakking .wrap{ position:relative; z-index:1; }
.trein-vignet{
  position:absolute; right:-60px; bottom:-50px; width:min(620px,55vw);
  opacity:.14; mix-blend-mode:multiply; pointer-events:none;
  transform:rotate(-4deg);
}
@media (max-width:680px){
  #verpakking{ padding-bottom:150px; }
  .trein-vignet{ width:72vw; right:-20px; bottom:-14px; opacity:.18; }
}

/* ---------- Betaal-iconen ---------- */
.pay-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Betaallogo's zijn merkbeeld van derden en zijn ontworpen voor een witte
   ondergrond: VISA, Bancontact en Apple Pay zijn zelf donker en verdwijnen
   op een donkere tegel. Daarom hier bewust wit, ook op de donkere site. */
.pay{
  font-size:11px; font-weight:700; letter-spacing:.04em;
  border:1px solid var(--line); border-radius:5px; background:#ffffff;
  padding:5px 8px; color:#18231d;
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; min-width:44px;
}
.pay img{ max-height:15px; max-width:40px; width:auto; height:auto; display:block; object-fit:contain; }
.pay-row{ gap:7px; }
.pay.ideal{ color:#c06; }
.buy .pay-row.pay-left{ margin-top:18px; justify-content:flex-start; }
/* FSC-keurmerk: bij het merkverhaal, los van de betaalmethoden */
.foot-fsc{
  display:flex; align-items:center; gap:10px; margin-top:20px;
  font-size:12.5px; color:var(--muted);
}
.foot-fsc img{ height:32px; width:auto; opacity:.85; flex:0 0 auto; }



/* ---------- Sticky mobiel bestel-balk ---------- */
.sticky-buy{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items:center; gap:14px;
}
.sticky-buy .sp{ font-family:var(--serif); font-size:20px; font-weight:500; }
.sticky-buy .btn{ flex:1; padding:13px 18px; }
@media (max-width:860px){
  .sticky-buy.on{ display:flex; }
  /* De vaste balk ligt over de onderkant van de pagina heen. Daarom krijgt
     de voet er net zoveel ruimte bij als de balk hoog is, anders vallen de
     betaallogo's en de regel eronder er helemaal achter weg. */
  body.met-balk .site-footer{ padding-bottom:calc(var(--balk-hoogte, 76px) + 24px); }
}

/* ---------- Maatgids ---------- */
.size-guide{ padding:6px 0 16px; }
.size-wall{
  position:relative; background:var(--card); border-radius:6px;
  height:190px; overflow:hidden; border:1px solid var(--line);
}
.size-wall .sofa{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:62%; height:34%;
  background:var(--surface); border-radius:10px 10px 0 0;
}
.size-wall .sofa::before{
  content:""; position:absolute; top:-18%; left:4%; right:4%; height:36%;
  background:var(--mulberry); border-radius:8px;
}
.size-wall .p{
  position:absolute; background:var(--surface); border:2px solid var(--oak);
  display:flex; align-items:flex-end; justify-content:center;
  font-size:9px; color:var(--ink-soft); padding-bottom:2px;
}
.size-note{ margin:10px 0 0; font-size:13px; color:var(--muted); }

/* ---------- Value strip ---------- */
.values{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.values .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); padding-top:34px; padding-bottom:34px; }
@media (max-width:680px){ .values .wrap{ grid-template-columns:1fr; gap:20px; } }
.value .t{ font-family:var(--serif); font-size:18px; margin:0 0 5px; }
.value .d{ font-size:14px; color:var(--ink-soft); margin:0; }

/* ---------- Footer ---------- */
/* ---------- Footer: Shadowed Ivy verankert de hele onderkant ----------
   Het groen loopt van rand tot rand door onder de wijnkleurige pagina.
   Dat geeft de site een duidelijk einde in plaats van een los blok. */
.site-footer{
  padding:clamp(48px,7vw,84px) 0 40px;
  position:relative;
  background:var(--foot-bg);
  color:var(--foot-tekst);
  margin-top:clamp(50px,8vw,100px);
}
.foot-merk{ max-width:430px; }
.site-footer .top{ display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start; }
.site-footer .brand{ font-size:24px; }
.site-footer p{ color:var(--foot-zacht); font-size:14.5px; max-width:40ch; margin:12px 0 0; }
.foot-links{ display:flex; flex-direction:column; gap:10px; }
.foot-links a{ font-size:14px; color:var(--foot-zacht); }
.foot-links a:hover{ color:var(--foot-hover); }

/* footerkolommen met kopjes (Baymard: links in benoemde secties) */
.foot-kolommen{
  display:grid; grid-template-columns:repeat(3, minmax(140px, auto));
  gap:clamp(24px,4vw,56px);
}
@media (max-width:640px){ .foot-kolommen{ grid-template-columns:1fr 1fr; gap:26px 24px; } }
.foot-kolom{ display:flex; flex-direction:column; gap:9px; }
.foot-kolom h4{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--foot-tekst); font-weight:600; margin:0 0 3px;
}
.foot-kolom a{ font-size:13.5px; color:var(--foot-zacht); }
.foot-kolom a:hover{ color:var(--foot-hover); }

/* wettelijke bedrijfsgegevens (verplicht, altijd zichtbaar) */
.foot-bedrijf{
  margin:clamp(28px,4vw,44px) 0 0;
  font-size:12.5px; color:var(--foot-zacht); line-height:1.7;
}

/* compacte links op checkout-pagina's */
.foot-mini{
  display:flex; gap:20px; flex-wrap:wrap;
  font-size:13px;
}
.foot-mini a{ color:var(--foot-zacht); }
.foot-mini a:hover{ color:var(--foot-hover); }
.foot-mini + .foot-bedrijf{ margin-top:16px; }
.site-footer .bottom{
  margin-top:clamp(30px,4vw,48px); padding-top:20px; border-top:1px solid var(--foot-lijn);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--foot-zacht);
}
.site-footer .bottom .pay-row{ margin-top:0; }

/* ---------- Tekst binnen het donkere merkpaneel ---------- */
.foot-merk .brand{ color:var(--foot-tekst); }
.foot-merk p{ color:var(--foot-tekst); }
.foot-merk .foot-fsc{ color:var(--foot-zacht); }

/* het logo is monochroom zwart: op het donkere paneel omkeren naar wit */
.foot-merk .brand-logo{ opacity:.95; }

/* het merk is een link naar de homepagina */
.foot-merk a.brand{ transition:opacity .2s; }
.foot-merk a.brand:hover{ opacity:.72; }
.foot-merk a.brand:focus-visible{
  outline:2px solid var(--foot-hover); outline-offset:4px; border-radius:4px;
}

/* keurmerk op een lichte tegel, anders valt het donkere logo weg */
.foot-merk .foot-fsc img{
  opacity:1; background:var(--surface); border-radius:6px; padding:4px 6px;
}

/* ---------- Mini-winkelwagen popover ---------- */
.cart-pop{
  position:absolute; top:calc(100% + 10px); right:clamp(12px,4vw,44px);
  width:min(340px, calc(100vw - 32px)); z-index:120;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.pop-item{ display:flex; gap:10px; align-items:center; }
.pop-item img{
  width:44px; height:58px; object-fit:cover; border-radius:5px;
  border:1px solid var(--line); flex:0 0 auto;
}
.pop-info{ flex:1; min-width:0; }
.pop-titel{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.pop-opties{ display:block; font-size:11.5px; color:var(--muted); }
.pop-prijs{ font-size:13px; font-weight:600; flex:0 0 auto; }
.pop-totaal{
  display:flex; justify-content:space-between; font-weight:600; font-size:14.5px;
  border-top:1px solid var(--line); padding-top:11px; margin-top:2px;
}
.pop-leeg{ margin:4px 0 6px; font-size:14px; color:var(--ink-soft); text-align:center; }
.cart-pop .btn{ padding:11px 18px; font-size:14px; }

/* ---------- Tekstpagina's (voorwaarden, privacy, verzending, FAQ) ---------- */
.tekstpagina{ max-width:62ch; padding-bottom:clamp(40px,6vw,72px); }
.tekstpagina h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3.4vw,38px); margin:0 0 .4em; letter-spacing:-.01em;
}
.tekstpagina .lead{ font-size:17px; color:var(--ink-soft); margin:0 0 34px; }
.tekstpagina h2{
  font-family:var(--serif); font-weight:600; font-size:19px;
  margin:36px 0 10px; color:var(--ink);
}
.tekstpagina p, .tekstpagina li{ color:var(--ink-soft); font-size:15px; }
.tekstpagina ul, .tekstpagina ol{ padding-left:20px; display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.tekstpagina a{ color:var(--oak-deep); text-decoration:underline; }
.tekstpagina strong{ color:var(--ink); }
.adresblok{ line-height:1.8; }
.tekst-noot{ margin-top:40px; font-size:13px; color:var(--muted); }
.faq-lijst{ margin-top:8px; }
.faq-lijst .item summary{ font-size:15px; }

/* ---------- Broodkruimels ---------- */
.kruimels{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:13px; margin-bottom:clamp(18px,3vw,28px);
}
.kruimels a{ color:var(--muted); transition:color .2s; }
.kruimels a:hover{ color:var(--oak-deep); }
.kruimel-sep{ color:var(--line); }
.kruimel-huidig{ color:var(--ink); font-weight:500; }

/* ---------- verhaalpagina ---------- */
.tekstpagina .verhaal{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(19px,2.3vw,24px); line-height:1.5; color:var(--ink);
  margin:0 0 4px; padding:0; border:0;
}
.tekstpagina .sig{ margin:18px 0 0; font-size:14px; color:var(--muted); }
.tekstpagina .sig strong{ color:var(--ink-soft); font-weight:600; }
.verhaal-foto{
  display:block; width:100%; max-width:420px;
  aspect-ratio:4/5; object-fit:cover;
  margin:34px 0 0; border-radius:4px; background:var(--card);
}
.tekstpagina .btn{ margin-top:14px; text-decoration:none; }

/* iOS zoomt in zodra een invoerveld kleiner is dan 16px. Dat gebeurt dus niet. */
@media (max-width:560px){
  input, select, textarea{ font-size:16px !important; }
}

/* sfeerfoto's op de verhaalpagina */
.sfeer-rij{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:18px 0 0;
}
.sfeer-rij img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border-radius:4px; background:var(--card);
}
@media (max-width:560px){
  .sfeer-rij{ grid-template-columns:1fr 1fr; gap:8px; }
  .sfeer-rij img:first-child{ grid-column:1 / -1; aspect-ratio:4/3; }
}

/* ---------- Checkout statusbalk ---------- */
.stappenbalk{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,2vw,14px); margin:4px 0 clamp(24px,4vw,36px);
}
.stap{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:var(--muted);
}
.stap-n{
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600;
}
.stap.actief{ color:var(--ink); }
.stap.actief .stap-n{ border-color:var(--oak); background:var(--plum); color:var(--op-plum); }
.stap.klaar{ color:var(--ink-soft); }
.stap.klaar .stap-n{ border-color:var(--oak); color:var(--oak-deep); background:color-mix(in srgb, var(--oak) 22%, var(--surface)); }
.stap-lijn{ width:clamp(22px,5vw,44px); height:1.5px; background:var(--line); }
.stap-lijn.klaar{ background:var(--oak); }
@media (max-width:480px){ .stap{ font-size:11.5px; gap:5px; } }

/* ---------- Winkelwagen ---------- */
.cart-link{
  position:relative; display:inline-flex; align-items:center;
  padding:6px; color:var(--ink);
}
.cart-link svg{ width:21px; height:21px; }
.cart-link:hover{ color:var(--oak-deep); }
.cart-count{
  position:absolute; top:-2px; right:-5px;
  min-width:17px; height:17px; padding:0 4px;
  background:var(--plum); color:var(--op-plum); border-radius:100px;
  font-size:11px; font-weight:600; line-height:17px; text-align:center;
}
.cart-h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3.4vw,36px); margin:.3em 0 0;
}
.cart-grid{
  display:grid; grid-template-columns:1.6fr 1fr;
  gap:clamp(24px,4vw,48px); margin-top:clamp(22px,3vw,34px);
  align-items:start;
}
@media (max-width:820px){ .cart-grid{ grid-template-columns:1fr; } }
.cart-item{
  display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.cart-item:first-child{ border-top:1px solid var(--line); }
.cart-thumb{ flex:0 0 84px; }
.cart-thumb img{
  width:84px; height:112px; object-fit:cover; border-radius:6px;
  border:1px solid var(--line);
}
.cart-info{ flex:1; min-width:0; }
.cart-titel{ font-weight:600; font-size:15.5px; color:var(--ink); }
.cart-titel:hover{ color:var(--oak-deep); }
.cart-opties{ font-size:13px; color:var(--muted); margin-top:3px; }
.cart-regel-onder{
  display:flex; justify-content:space-between; align-items:center; margin-top:14px;
}
.qty{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:100px; background:var(--surface);
}
.qty-btn{
  width:32px; height:32px; border:0; background:transparent; cursor:pointer;
  font-size:16px; color:var(--ink-soft); border-radius:100px;
}
.qty-btn:hover{ color:var(--oak-deep); background:var(--card); }
.qty-n{ min-width:22px; text-align:center; font-size:14px; font-weight:600; }
.cart-prijs{ font-weight:600; font-size:15.5px; }
.cart-weg{
  flex:0 0 auto; width:32px; height:32px; border:0; background:transparent;
  cursor:pointer; color:var(--muted); border-radius:6px;
}
.cart-weg:hover{ color:var(--rood); background:var(--card); }
.cart-weg svg{ width:15px; height:15px; }
.cart-samenvatting{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:22px; position:sticky; top:92px;
}
.cart-samenvatting .rij{
  display:flex; justify-content:space-between; font-size:14.5px;
  padding:7px 0; color:var(--ink-soft);
}
.cart-samenvatting .rij.totaal{
  border-top:1px solid var(--line); margin-top:8px; padding-top:14px;
  font-weight:600; font-size:17px; color:var(--ink);
}
.cart-samenvatting .gratis{ color:var(--green); font-weight:600; }
.btw-noot{ font-size:12.5px; color:var(--muted); margin:2px 0 14px; }
.cart-samenvatting .verder{
  display:block; text-align:center; margin-top:12px; font-size:14px; color:var(--muted);
}
.cart-samenvatting .verder:hover{ color:var(--oak-deep); }
.cart-samenvatting .pay-row{ justify-content:center; margin-top:16px; }
.cart-leeg{ text-align:center; padding:60px 0; }
.cart-leeg h1{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3vw,32px); margin:.4em 0; }
.cart-leeg-sub{ color:var(--ink-soft); margin:0 0 26px; }

/* ---------- Afrekenen ---------- */
.co-grid{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(24px,4vw,48px); margin-top:clamp(22px,3vw,34px); align-items:start;
}
@media (max-width:820px){ .co-grid{ grid-template-columns:1fr; }
  .co-grid .cart-samenvatting{ order:-1; position:static; } }
.co-form{ display:flex; flex-direction:column; gap:16px; }
.co-veld{ display:flex; flex-direction:column; gap:6px; flex:1; }
.co-veld span{ font-size:13px; font-weight:600; color:var(--ink); }
.co-veld input, .co-veld select, .co-veld textarea{
  font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; transition:border-color .2s; width:100%;
}
.co-veld input:focus, .co-veld select:focus, .co-veld textarea:focus{
  outline:none; border-color:var(--oak);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--oak) 16%, transparent);
}
.co-veld2{ display:flex; gap:14px; }
@media (max-width:560px){ .co-veld2{ flex-direction:column; } }
.co-akkoord{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; color:var(--ink-soft); cursor:pointer;
  padding:4px 0;
}
.co-akkoord input{ margin-top:2px; accent-color:var(--oak); }
.co-fout{
  color:var(--rood); background:color-mix(in srgb, var(--rood) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--rood) 30%, transparent);
  border-radius:8px; padding:11px 14px; font-size:14px; margin:0;
}
.co-veilig{ text-align:center; font-size:12.5px; color:var(--muted); margin:10px 0 0; }
.co-kop{ font-family:var(--serif); font-weight:600; font-size:18px; margin:0 0 14px; }
.co-item{
  display:flex; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.co-thumb{
  position:relative; flex:0 0 auto; display:block;
}
.co-thumb img{
  width:46px; height:60px; object-fit:cover; border-radius:6px;
  border:1px solid var(--line); display:block;
}
.co-badge{
  position:absolute; top:-7px; right:-7px;
  min-width:19px; height:19px; padding:0 5px;
  background:var(--plum); color:var(--op-plum); border-radius:100px;
  font-size:11px; font-weight:600; line-height:19px; text-align:center;
}
.co-aantal{ color:var(--muted); flex:0 0 auto; }
.co-naam{ flex:1; min-width:0; }
.co-opties{ display:block; font-size:12.5px; color:var(--muted); }
.co-prijs{ font-weight:600; flex:0 0 auto; }
.co-totaal{
  display:flex; justify-content:space-between; gap:10px;
  padding-top:14px; margin-top:6px; font-weight:600; font-size:15.5px;
}
.co-totaal span:first-child{ font-size:13px; font-weight:500; color:var(--ink-soft); }

/* ---------- Bedankt ---------- */
.bedankt{ max-width:560px; margin:0 auto; text-align:center; padding:40px 0 20px; }

/* besteloverzicht op de bedankt-pagina */
.bd-kaart{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:22px 24px; margin:32px 0 0; text-align:left;
}
.bd-kop{
  font-family:var(--serif); font-weight:600; font-size:16px;
  margin:0 0 16px; color:var(--ink);
}
.bd-kop-los{ text-align:left; margin:36px 0 12px; }
.bd-item{
  display:flex; gap:14px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.bd-item:last-of-type{ border-bottom:0; }
.bd-item img{
  width:52px; height:68px; object-fit:cover; border-radius:6px;
  border:1px solid var(--line); flex:0 0 auto;
}
.bd-info{ flex:1; min-width:0; }
.bd-titel{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.bd-opties{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.bd-tekst{ display:block; font-size:12.5px; color:var(--oak-deep); font-style:italic; margin-top:3px; }
.bd-aantal{ font-size:13px; color:var(--muted); flex:0 0 auto; }
.bd-totaal{
  display:flex; justify-content:space-between;
  border-top:1px solid var(--line); margin-top:6px; padding-top:14px;
  font-weight:600; font-size:15px;
}

/* verwachte bezorging */
.bd-lever{
  display:flex; align-items:center; gap:14px; text-align:left;
  background:color-mix(in srgb, var(--oak) 8%, var(--surface));
  border:1px solid color-mix(in srgb, var(--oak) 26%, var(--line));
  border-radius:10px; padding:16px 20px; margin-top:16px;
}
.bd-lever svg{ width:26px; height:26px; color:var(--oak-deep); flex:0 0 auto; }
.bd-lever-t{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.bd-lever-s{ display:block; font-size:12.5px; color:var(--muted); }

.bd-knoppen{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.bedankt-vink{
  width:64px; height:64px; margin:0 auto 22px; border-radius:50%;
  background:var(--plum); color:var(--op-plum); display:flex; align-items:center; justify-content:center;
}
.bedankt-vink svg{ width:30px; height:30px; }
.bedankt h1{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.4vw,34px); margin:.3em 0; }
.bedankt-sub{ color:var(--ink-soft); }
.bedankt-stappen{
  text-align:left; margin:0 auto 30px; padding-left:22px;
  display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(--ink-soft);
}
.bedankt-stappen strong{ color:var(--ink); }
.bedankt-vraag{ font-size:14px; color:var(--muted); margin-bottom:26px; }
.bedankt-vraag a{ color:var(--oak-deep); text-decoration:underline; }

/* utility */
.center{ text-align:center; }
.mt-s{ margin-top:14px; }

/* =====================================================================
   MILYN — onderdelen voor kleding: kleur/maat-kiezer en voorraad
   ===================================================================== */

/* ---------- merknaam als woordmerk ---------- */
.brand-woord{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.34em;
  text-indent:.34em;          /* compenseert de spatie rechts van de laatste letter */
  font-size:21px;
  line-height:1;
}
.announce{ background:var(--plum); color:var(--op-plum); letter-spacing:.1em; }
.announce strong{ color:#ffffff; }

/* ---------- kaart: uitverkocht + kleurstalen ---------- */
.badge.uit{ background:var(--plum); color:var(--op-plum); }
.card-media.is-op .poster-img{ opacity:.45; filter:saturate(.35); }

.card-stalen{ display:flex; align-items:center; gap:6px; margin-top:9px; }
.mini-dot{
  width:11px; height:11px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(24,35,29,.20);
}
.mini-dot.leeg{ opacity:.3; }
.mini-meer{ font-size:11.5px; color:var(--muted); letter-spacing:.04em; }

/* ---------- kleurkiezer op de productpagina ---------- */
.opt-staal{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px 9px 10px;
}
.staal-dot{
  width:22px; height:22px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px rgba(24,35,29,.20);
}
.staal-foto{
  width:34px; height:44px; border-radius:3px; overflow:hidden; flex:none;
  background:var(--card);
}
.staal-foto img{ width:100%; height:100%; object-fit:cover; }

.opt.leeg{ opacity:.42; cursor:not-allowed; }
.opt.leeg:hover{ border-color:var(--line); }
.opt.leeg .opt-t{ text-decoration:line-through; }

.field-keuze{ font-weight:400; color:var(--muted); letter-spacing:0; text-transform:none; }
.field-hulp{
  float:right; font-size:12px; font-weight:400; letter-spacing:.02em;
  text-transform:none; color:var(--ink); text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- voorraadmelding onder de koopknop ---------- */
.voorraad-melding{
  font-size:13.5px; letter-spacing:.02em; margin-top:10px;
  display:flex; align-items:center; gap:7px;
}
.voorraad-melding:empty{ display:none; }
.voorraad-melding::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:currentColor;
}
.voorraad-melding.ok{ color:var(--green); }
.voorraad-melding.laag{ color:var(--waarschuwing); }
.voorraad-melding.op{ color:var(--rood); }

/* ---------- korte kenmerkenlijst op de productpagina ---------- */
.spec-lijst{ list-style:none; margin:0; padding:0; }
.spec-lijst li{
  position:relative; padding-left:15px; margin-bottom:6px;
}
.spec-lijst li:last-child{ margin-bottom:0; }
.spec-lijst li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:4px; height:4px; border-radius:50%; background:var(--btn);
}

/* ---------- OVER MILYN: banner over de volle breedte ---------- */
.banner{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(380px, 42vw, 560px);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:var(--foot-bg);
  margin-bottom:clamp(56px,8vw,96px);
}
.banner-beeld{ position:absolute; inset:0; z-index:0; display:block; }
.banner-beeld img{
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.banner::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(16,12,10,.46) 0%, rgba(16,12,10,.76) 78%),
    linear-gradient(to top, rgba(16,12,10,.50), transparent 58%);
}
.banner .wrap{ position:relative; z-index:2; }
.banner-tekst{ max-width:54ch; margin:0 auto; }
.banner h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px,3.6vw,44px); line-height:1.1;
  letter-spacing:.14em; text-transform:uppercase;
  margin:0; color:#fbfcfb;
}
.banner p{
  margin:22px auto 0; max-width:48ch;
  color:rgba(255,255,255,.82);
  font-size:clamp(15px,1.25vw,17px); line-height:1.65;
}
.banner .btn{ margin-top:30px; background:#fbfcfb; color:var(--ink); }
.banner .btn:hover{ background:#ffffff; }
@media (max-width:820px){
  .banner{ min-height:clamp(340px, 78vw, 470px); margin-bottom:clamp(40px,8vw,64px); }
  .banner h2{ letter-spacing:.1em; }
}

/* ---------- prijsnoot en maattabel op de productpagina ---------- */
.prijs-noot{
  margin:6px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5;
}
.maattabel{
  width:100%; border-collapse:collapse; margin:14px 0 0;
  font-size:13px; font-variant-numeric:tabular-nums;
}
.maattabel th, .maattabel td{
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--line);
}
.maattabel th{
  font-weight:600; color:var(--ink); font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase;
}
.maattabel td{ color:var(--ink-soft); }
.maattabel tbody tr:last-child td{ border-bottom:0; }
.maattabel tbody td:first-child{ color:var(--ink); font-weight:500; }

/* ---------- productgalerij: echte veegcarrousel ----------
   Alle foto's staan naast elkaar in een scrollvak met snappunten, zodat
   vegen op een telefoon de vinger volgt in plaats van pas aan het eind
   te verspringen. */
.detail-media .fotorail{
  position:absolute; inset:0;
  display:flex;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.detail-media .fotorail::-webkit-scrollbar{ display:none; }
.detail-media .rail-dia{
  flex:0 0 100%; position:relative;
  scroll-snap-align:center; scroll-snap-stop:always;
}
.detail-media .rail-dia img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; -webkit-user-drag:none;
}

/* ---------- categorieen: tekst links, hoge kaarten rechts ---------- */
.categorieen{ padding:0 0 clamp(56px,8vw,96px); }
.categorie-grid{
  display:grid;
  grid-template-columns:minmax(230px,300px) 1fr;
  gap:clamp(22px,3vw,44px);
  align-items:stretch;
}
.categorie-tekst{ display:flex; flex-direction:column; justify-content:center; }
.categorie-tekst h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3.2vw,38px); line-height:1.08;
  letter-spacing:-.015em; margin:0; color:var(--ink);
}
.categorie-tekst p{
  margin:16px 0 0; max-width:34ch;
  color:var(--ink-soft); font-size:15px; line-height:1.65;
}
.categorie-tekst .btn{ margin-top:26px; align-self:flex-start; }

.categorie-rij{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:clamp(10px,1.4vw,18px);
}
.cat-kaart{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3/4; border-radius:4px;
  background:var(--card); isolation:isolate;
}
.cat-kaart img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.cat-kaart::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(16,12,10,.42), transparent 42%);
}
.cat-kaart:hover img{ transform:scale(1.045); }
.cat-label{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:2; white-space:nowrap;
  padding:8px 18px; border-radius:100px;
  background:rgba(255,255,255,.94); color:var(--ink);
  font-size:13px; font-weight:500; letter-spacing:.01em;
  transition:background .2s, color .2s;
}
.cat-kaart:hover .cat-label{ background:var(--btn); color:var(--op-accent); }
.cat-kaart:focus-visible{ outline:2px solid var(--btn); outline-offset:3px; }

@media (max-width:900px){
  .categorie-grid{ grid-template-columns:1fr; }
  .categorie-tekst p{ max-width:52ch; }
}
@media (max-width:620px){
  .categorie-rij{
    grid-auto-columns:minmax(58vw,1fr);
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 calc(var(--gap) * -1); padding:0 var(--gap) 4px;
    scrollbar-width:none;
  }
  .categorie-rij::-webkit-scrollbar{ display:none; }
  .cat-kaart{ scroll-snap-align:start; }
}

/* pijltjes op de hero, alleen op telefoon (daar is het dezelfde foto) */
.hero-punten{ position:absolute; inset:0; z-index:3; display:none; }
@media (max-width:820px){
  .hero-punten{ display:block; }
}
.hero-punten .look-punt{ z-index:3; }

/* ---------- shop de look: foto met pijltjes ---------- */
.look{ padding:0 0 clamp(56px,8vw,96px); }
.look-grid{
  display:grid;
  /* minmax(0,...) en niet 1fr: anders kan de kolom uitdijen tot zijn
     min-content en loopt de pagina op smalle schermen buiten beeld */
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(22px,4vw,56px); align-items:center;
}
.look-tekst{ min-width:0; }
.look-tekst h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(24px,3.2vw,36px); line-height:1.1;
  letter-spacing:-.015em; margin:.35em 0 0; color:var(--ink);
}
.look-tekst p:last-child{
  margin:12px 0 0; color:var(--ink-soft); font-size:15px; line-height:1.6; max-width:34ch;
}

.look-beeld{
  position:relative; overflow:hidden;
  border-radius:4px; background:var(--card);
}
.look-beeld > img{ width:100%; height:auto; display:block; }

/* het pijltje zelf. Alleen de stip bepaalt de grootte van de link, want
   anders zou het label de positie van het punt verschuiven. */
.look-punt{
  position:absolute; z-index:2;
  width:38px; height:38px;
  transform:translate(-50%,-50%);
  display:block; text-decoration:none;
}
.look-stip{
  position:relative;
  width:100%; height:100%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); color:var(--ink);
  box-shadow:0 4px 16px -4px rgba(16,12,10,.55);
  transition:background .2s, color .2s, transform .2s;
}
.look-stip svg{ width:16px; height:16px; }
/* een open kaartje hoort boven de andere pijltjes te liggen */
.look-punt:hover, .look-punt:focus-within, .look-punt.open, .look-punt.aan{ z-index:5; }
.hero-punten .look-punt:hover,
.hero-punten .look-punt:focus-within,
.hero-punten .look-punt.open{ z-index:5; }
.look-punt:hover .look-stip,
.look-punt:focus-visible .look-stip,
.look-punt.open .look-stip{
  background:var(--btn); color:var(--op-accent); transform:scale(1.06);
}
/* zachte ring die aandacht trekt */
.look-stip::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  animation:lookPuls 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes lookPuls{
  0%   { transform:scale(1);    opacity:.75; }
  70%  { transform:scale(1.9);  opacity:0; }
  100% { transform:scale(1.9);  opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .look-stip::after{ animation:none; opacity:.5; }
}

/* het label dat bij hover of tik verschijnt */
.look-label{
  position:absolute; top:50%; left:calc(100% + 9px);
  display:flex; align-items:center; gap:11px;
  /* width:max-content, anders krimpt een absoluut geplaatst label naar
     min-content en wordt het een hoge smalle kolom. De max houdt hem klein
     genoeg om het kledingstuk niet af te dekken. */
  width:max-content; max-width:min(230px, 46vw);
  background:rgba(255,255,255,.96); color:var(--ink);
  border-radius:10px; padding:8px 14px 8px 8px;
  box-shadow:0 6px 20px -6px rgba(16,12,10,.5);
  opacity:0; pointer-events:none;
  transform:translateY(-50%) translateX(-6px);
  transition:opacity .2s ease, transform .2s ease;
}
.look-punt.naar-links .look-label{
  left:auto; right:calc(100% + 9px);
  transform:translateY(-50%) translateX(6px);
}
.look-punt:hover .look-label,
.look-punt:focus-visible .look-label,
.look-punt.open .look-label{
  opacity:1; transform:translateY(-50%);
  pointer-events:auto;          /* anders is het label zelf niet aanklikbaar */
  cursor:pointer;
}
.look-mini{
  flex:0 0 auto; width:46px; height:58px;
  object-fit:cover; border-radius:6px; display:block; background:var(--card);
}
.look-woorden{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.look-titel{ font-size:13px; font-weight:600; line-height:1.25; }
.look-prijs{ font-size:12.5px; color:var(--muted); }

/* oplichten vanuit het lijstje ernaast */
.look-punt.aan .look-stip{ background:var(--btn); color:var(--op-accent); transform:scale(1.12); }
.look-punt.aan .look-label{ opacity:1; transform:translateY(-50%); pointer-events:auto; }

/* het lijstje naast de foto */
.look-lijst{
  list-style:none; margin:22px 0 0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:8px;
}
.look-lijst li{ min-width:0; }
.look-lijst a{
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:8px; border-radius:10px;
  border:1px solid transparent;
  transition:background .2s, border-color .2s;
}
.look-lijst a:hover,
.look-lijst a:focus-visible{ background:var(--surface); border-color:var(--line); }
.look-lijst img{
  flex:0 0 auto; width:48px; height:60px;
  object-fit:cover; border-radius:6px; display:block; background:var(--card);
}
.ll-woorden{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ll-titel{
  font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ll-prijs{ font-size:12.5px; color:var(--muted); }
.ll-pijl{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:background .2s, color .2s;
}
.ll-pijl svg{ width:14px; height:14px; }
.look-lijst a:hover .ll-pijl{ background:var(--btn); color:var(--op-accent); }

@media (max-width:900px){
  .look-grid{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .look-tekst p:last-child{ max-width:52ch; }
}
@media (max-width:560px){
  .look-lijst img{ width:44px; height:55px; }
  .look-stip{ width:34px; height:34px; }
  .look-stip::after{ width:34px; height:34px; margin-top:-17px; }
  .look-stip svg{ width:14px; height:14px; }
  .look-label{ padding:8px 12px; }
  .look-titel{ font-size:12px; white-space:normal; max-width:26ch; }
}

/* ---------- nieuwsbrief: strook en popup ----------
   Donker in Black Cherry, zodat hij naadloos in de footer overloopt en de
   onderkant van de pagina één geheel wordt in plaats van drie losse banen. */
.nb-strook{
  background:var(--foot-bg); color:var(--foot-tekst);
  padding:clamp(52px,7vw,86px) 0;
  text-align:center;
}
/* de footer houdt normaal 100px afstand; hier zou dat een lichte baan geven */
.nb-strook + .site-footer{
  margin-top:0;
  border-top:1px solid var(--foot-lijn);
}
.nb-binnen{ max-width:540px; margin:0 auto; }

.nb-kicker{
  margin:0 0 14px; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--foot-zacht);
}
.nb-strook h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(24px,3.2vw,36px); line-height:1.14;
  letter-spacing:-.015em; margin:0; color:#fbfcfb;
  text-wrap:balance;
}
.nb-sub{
  margin:14px auto 0; max-width:42ch;
  color:var(--foot-zacht); font-size:15px; line-height:1.6;
}

.nb-form{ margin-top:26px; }
.nb-rij{ display:flex; gap:10px; }
.nb-form input[type=email]{
  flex:1 1 auto; min-width:0;
  font:inherit; font-size:15px; color:#fbfcfb;
  background:rgba(255,255,255,.07);
  border:1px solid var(--foot-lijn);
  border-radius:100px; padding:15px 22px;
  transition:border-color .2s, background .2s;
}
.nb-form input[type=email]::placeholder{ color:rgba(236,228,227,.45); }
.nb-form input[type=email]:focus{
  outline:none; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12);
}
.nb-form .btn{
  flex:0 0 auto; background:#fbfcfb; color:var(--ink);
  padding:15px 30px;
}
.nb-form .btn:hover{ background:#ffffff; }
.nb-honing{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.nb-klein{
  margin:14px 0 0; font-size:12px; line-height:1.55;
  color:rgba(236,228,227,.55);
}
.nb-klein a{ color:var(--foot-zacht); text-decoration:underline; }
.nb-melding{ margin:14px 0 0; font-size:14px; line-height:1.5; }
.nb-melding.goed{ color:#9fd3ad; }
.nb-melding.fout{ color:#f0a79a; }

@media (max-width:560px){
  .nb-rij{ flex-direction:column; }
  .nb-form .btn{ width:100%; }
}

/* popup: zelfde donkere kaart, zodat het één aanbod blijft */
.nb-pop-laag{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(16,12,10,.62);
  opacity:0; transition:opacity .25s ease;
}
.nb-pop-laag.aan{ opacity:1; }
.nb-pop{
  position:relative; width:100%; max-width:440px;
  background:var(--foot-bg); color:var(--foot-tekst);
  border:1px solid var(--foot-lijn); border-radius:12px;
  padding:clamp(30px,4vw,40px) clamp(22px,4vw,36px);
  text-align:center;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.75);
  transform:translateY(10px) scale(.985);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.nb-pop-laag.aan .nb-pop{ transform:none; }
.nb-pop h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(21px,2.6vw,27px); line-height:1.18;
  letter-spacing:-.012em; margin:0; color:#fbfcfb;
  text-wrap:balance;
}
.nb-pop .nb-sub{ font-size:14.5px; margin-top:12px; }
.nb-pop .nb-form{ margin-top:22px; }
.nb-pop .nb-rij{ flex-direction:column; }
.nb-pop .nb-form .btn{ width:100%; }
.nb-pop-sluit{
  position:absolute; top:10px; right:10px;
  width:42px; height:42px; border:0; background:transparent;
  color:var(--foot-zacht); cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.nb-pop-sluit:hover{ color:#ffffff; background:rgba(255,255,255,.08); }
.nb-pop-sluit svg{ width:17px; height:17px; }

/* ---------- kortingscode in de winkelwagen ---------- */
.kort-blok{ margin:14px 0 0; border-top:1px solid var(--line); padding-top:12px; }
.kort-blok summary{
  cursor:pointer; font-size:13.5px; color:var(--ink-soft);
  padding:4px 0; list-style:none;
}
.kort-blok summary::-webkit-details-marker{ display:none; }
.kort-blok summary::before{ content:"+ "; color:var(--muted); }
.kort-blok[open] summary::before{ content:"‘2 "; }
.kort-form{ display:flex; gap:8px; margin-top:10px; }
.kort-form input{
  flex:1 1 auto; min-width:0; font:inherit; font-size:14px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:11px 13px;
}
.kort-form input:focus{ outline:2px solid var(--btn); outline-offset:1px; border-color:transparent; }
.kort-form .btn{ flex:0 0 auto; padding:11px 18px; font-size:14px; }
.kort-melding{ margin:8px 0 0; font-size:13px; }
.kort-melding.fout{ color:var(--rood); }
.kort-aan{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:14px 0 0; padding:11px 13px;
  background:color-mix(in srgb, var(--green) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--green) 28%, transparent);
  border-radius:8px; font-size:13.5px; color:var(--ink-soft);
}
.kort-aan strong{ color:var(--ink); letter-spacing:.06em; }
.kort-weg{
  flex:0 0 auto; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--muted); text-decoration:underline;
  padding:6px 2px;
}
.kort-weg:hover{ color:var(--rood); }
.kort-vlag{
  font-size:11px; letter-spacing:.06em; color:var(--green);
  text-transform:uppercase;
}

/* ---------- winkelwagen ---------- */
.cart-merk{
  display:block; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;
}
.cart-laag{ display:block; font-size:12.5px; color:var(--waarschuwing); margin-top:7px; }
.cart-melding{
  background:color-mix(in srgb, var(--waarschuwing) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--waarschuwing) 30%, transparent); color:var(--waarschuwing);
  border-radius:4px; padding:13px 16px; font-size:14px; line-height:1.6;
  margin:0 0 22px;
}
.cart-drempel{
  font-size:12.5px; color:var(--muted); margin:2px 0 10px; letter-spacing:.01em;
}
.qty-btn[disabled]{ opacity:.3; cursor:not-allowed; }

/* ---------- afrekenen: losse regel voor verzendkosten ---------- */
.co-regel{
  display:flex; justify-content:space-between; gap:14px;
  padding:11px 0 0; font-size:14px; color:var(--muted);
}

/* ---------- footer: monogram ---------- */
.foot-merkteken{
  width:46px; height:auto; opacity:.9;
  margin:0 0 16px; display:block;
}

/* grote productfoto die (nog) ontbreekt: zelfde placeholder als op de kaart */
.frame.placeholder{
  display:flex; align-items:center; justify-content:center;
  background:var(--card);
}
.frame.placeholder .ph-mark{
  font-family:var(--serif); font-size:64px; font-style:italic;
  color:var(--muted); opacity:.5;
}

/* miniatuur zonder foto: nette vlakke tint in plaats van een leeg gat */
.cart-thumb, .co-thumb, .pop-item img, .bd-item img{ background:var(--card); }

/* =====================================================================
   ICE WHITE — koppen en het belofteblok
   ===================================================================== */

/* Eén letterfamilie vraagt om duidelijke hiërarchie uit gewicht, grootte
   en letterafstand in plaats van uit een tweede lettertype. */
.section-head h2,
.quality h2,
.cart-h1,
.tekstpagina h1,
.detail-info h1,
.bd-kop{
  font-weight:500;
  letter-spacing:-.022em;
}
.section-head h2{ font-size:clamp(26px,3.2vw,38px); }
.detail-info h1{ font-weight:500; letter-spacing:-.02em; }

/* ---------- Etalage: panelen die uitklappen bij hover ----------
   Standaard staan de panelen even breed en licht gedempt. Ga je over een
   paneel, dan krijgt dat de ruimte en komen kleur en titel naar voren. */
.etalage{ padding:clamp(6px,1.5vw,18px) 0 clamp(56px,8vw,96px); }
.etalage-rij{
  display:flex; gap:6px;
  height:clamp(320px, 42vw, 500px);
}
.etalage-paneel{
  position:relative; display:block;
  flex:1 1 0; min-width:0;
  overflow:hidden; border-radius:3px;
  background:var(--card);
  transition:flex-grow .55s cubic-bezier(.22,1,.36,1);
}
.etalage-paneel img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.22) brightness(.78);
  transform:scale(1.01);
  transition:filter .5s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
/* leesbaarheid voor het bijschrift */
.etalage-paneel::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(16,12,10,.72) 0%, rgba(16,12,10,.18) 38%, transparent 62%);
}
.etalage-tekst{
  position:absolute; left:clamp(14px,1.6vw,22px); right:clamp(14px,1.6vw,22px);
  bottom:clamp(14px,1.6vw,22px); z-index:2; color:#fff;
}
.etalage-cat{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:rgba(255,255,255,.82);
}
.etalage-titel{
  display:block; font-size:clamp(15px,1.4vw,18px); font-weight:500;
  margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateY(9px);
  transition:opacity .4s ease .05s, transform .4s cubic-bezier(.22,1,.36,1) .05s;
}

/* het uitklappen zelf */
@media (hover:hover) and (min-width:821px){
  .etalage-rij:hover .etalage-paneel{ flex-grow:.74; }
  .etalage-rij .etalage-paneel:hover{ flex-grow:2.3; }
  .etalage-paneel:hover img{ filter:none; transform:scale(1.05); }
  .etalage-paneel:hover .etalage-titel{ opacity:1; transform:none; }
}
/* zonder hover (touch) alles meteen leesbaar */
@media (hover:none), (max-width:820px){
  .etalage-paneel img{ filter:brightness(.86); }
  .etalage-titel{ opacity:1; transform:none; }
}
.etalage-paneel:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* mobiel: horizontaal schuiven in plaats van uitklappen */
@media (max-width:820px){
  .etalage-rij{
    height:auto;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:calc(clamp(20px,5vw,48px) * -1);
    padding-inline:clamp(20px,5vw,48px);
    -webkit-overflow-scrolling:touch;
  }
  .etalage-rij::-webkit-scrollbar{ display:none; }
  .etalage-paneel{
    flex:0 0 62%; aspect-ratio:3/4; scroll-snap-align:start;
  }
}
@media (prefers-reduced-motion: reduce){
  .etalage-paneel, .etalage-paneel img, .etalage-titel{ transition:none; }
}

/* ---------- Beloften: één smalle regel ---------- */
.beloften-blok{ padding:0 0 clamp(60px,9vw,104px); }
.beloften{
  list-style:none; margin:0; padding:clamp(20px,2.6vw,30px) 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px clamp(26px,4vw,54px);
  font-size:13.5px; letter-spacing:.01em; color:var(--ink-soft);
}
.beloften li{ display:flex; align-items:center; gap:9px; }
.beloften li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--oak); flex:none;
}

/* tekstlink naast een knop */
.tekstlink{
  align-self:center;
  font-size:15px; letter-spacing:.01em;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:opacity .2s;
}
.hero .tekstlink{ color:rgba(255,255,255,.88); }
.hero .tekstlink:hover{ color:#fff; }

/* Het woordmerk is donker voor de lichte pagina; op de donkere footer
   draaien we het om in plaats van een tweede bestand te beheren. */
.foot-merk .brand-logo{ filter:brightness(0) invert(1); opacity:.92; }

/* =====================================================================
   COLLECTIE — vier kolommen in de marge, gecentreerd bijschrift
   De productfoto's zijn hele-lichaamsopnames, dus 2:3 in plaats van 3:4.
   ===================================================================== */
.collectie-sectie{ padding-bottom:clamp(50px,7vw,90px); }
.collectie-sectie .section-head{ margin-bottom:clamp(22px,3vw,36px); }
.collectie-sectie .section-head h2{
  font-size:clamp(15px,1.5vw,18px);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}

.grid-breed{
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px,1.7vw,26px);
}
.grid-breed .card-media{
  aspect-ratio:2/3;        /* staand, past bij een hele-lichaamsfoto */
  border-radius:2px;
  border:0;
  background:var(--card);
}
/* bijschrift gecentreerd onder de foto */
.grid-breed .card-body{ padding:14px 4px 0; text-align:center; }
.grid-breed .card-body h3{ font-size:16px; margin-top:5px; }
.grid-breed .card-body .price{ font-size:14px; margin-top:4px; }
.grid-breed .card-stalen{ justify-content:center; }

@media (max-width:560px){
  .grid .card-body{ padding-top:11px; }
  .grid-breed .card-body{ padding:11px 2px 0; }
  .grid .card-body h3{ font-size:14px; line-height:1.3; margin-top:4px; }
  .grid .card-body .price{ font-size:13px; margin-top:4px; }
  .card-body .cat{ font-size:10.5px; }
  .card-maten{ gap:7px; margin-top:7px; }
  .card-maten .maat{ font-size:11px; }
}

/* maatrij: beschikbaar donker, uitverkocht gedempt en doorgestreept */
.card-maten{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:9px; margin-top:9px;
}
.card-maten .maat{
  font-size:12px; letter-spacing:.06em; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.card-maten .maat.leeg{
  color:var(--muted); text-decoration:line-through;
  text-decoration-thickness:1px;
}

@media (max-width:1040px){
  .grid-breed{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:720px){
  .grid-breed{ grid-template-columns:repeat(2, 1fr); gap:14px 12px; }
  .grid-breed .card-body h3{ font-size:14.5px; }
  .grid-breed .card-body .cat{ font-size:10.5px; }
  .card-maten{ gap:7px; }
  .card-maten .maat{ font-size:11px; }
}

/* =====================================================================
   PRODUCTPAGINA — compacte opzet
   Badge, titel, prijs, tekst, ronde kleurstalen, maatpillen, één brede
   koopknop en drie garantieregels eronder.
   ===================================================================== */
.badge-los{
  display:inline-block; margin-bottom:14px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--ink); background:var(--card);
  border-radius:100px; padding:5px 11px;
}
.detail-info .cat{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.detail-info h1{
  font-size:clamp(24px,2.6vw,32px); font-weight:500;
  letter-spacing:-.02em; line-height:1.15; margin:0;
}
.prijs-groot{
  font-size:clamp(20px,2vw,24px); font-weight:600;
  letter-spacing:-.01em; margin:12px 0 0;
}
.detail-info .desc{
  margin:18px 0 0; color:var(--ink-soft); font-size:15px; line-height:1.7; max-width:46ch;
}

/* ---------- velden ---------- */
.variants{ margin-top:26px; display:flex; flex-direction:column; gap:22px; }
.veld-label{
  display:block; font-size:13.5px; font-weight:500; color:var(--ink);
  margin-bottom:11px;
}
.veld-keuze{ font-weight:400; color:var(--muted); }
.veld-keuze:not(:empty)::before{ content:" "; }
.veld-hulp{
  float:right; font-size:12.5px; font-weight:400; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;
}

/* ronde kleurstalen */
.staal-rij{ display:flex; flex-wrap:wrap; gap:10px; }
.staal-knop{
  padding:3px; border:1px solid transparent; border-radius:50%;
  background:none; cursor:pointer; line-height:0;
  transition:border-color .2s;
}
.staal-rond{
  display:block; width:26px; height:26px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(24,35,29,.16);
}
.staal-knop:hover{ border-color:var(--line); }
.staal-knop.active{ border-color:var(--btn); }
.staal-knop.leeg{ opacity:.35; cursor:not-allowed; position:relative; }
.staal-knop.leeg::after{
  content:""; position:absolute; inset:50% 2px auto; height:1px;
  background:var(--ink); transform:rotate(-45deg);
}

/* maatpillen */
.maat-rij{ display:flex; flex-wrap:wrap; gap:8px; }
.maat-knop{
  min-width:46px; padding:10px 14px;
  font-family:var(--sans); font-size:13.5px; font-variant-numeric:tabular-nums;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:7px;
  cursor:pointer; transition:border-color .2s, background .2s, color .2s;
}
.maat-knop:hover{ border-color:var(--btn); }
.maat-knop.active{ border-color:var(--btn); background:var(--btn); color:var(--op-accent); }
.maat-knop.leeg{
  color:var(--muted); background:transparent; cursor:not-allowed;
  text-decoration:line-through; text-decoration-thickness:1px;
}
.maat-knop.leeg:hover{ border-color:var(--line); }

/* ---------- koopknop ---------- */
.buy{ margin-top:26px; }
.btn-koop{
  width:100%; gap:10px;
  padding:17px 24px; border-radius:9px;
  font-size:15px; font-weight:500;
}
.btn-koop svg{ width:18px; height:18px; }
.btn-koop.disabled{ opacity:.45; pointer-events:none; }

/* ---------- garantieregels ---------- */
.garanties{
  list-style:none; margin:26px 0 0; padding:20px 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.garanties li{ display:flex; gap:9px; align-items:flex-start; }
.garanties svg{ width:19px; height:19px; flex:none; color:var(--ink-soft); margin-top:1px; }
.garanties span{ display:flex; flex-direction:column; font-size:11.5px; color:var(--muted); line-height:1.45; }
.garanties strong{ font-size:12.5px; font-weight:600; color:var(--ink); }
@media (max-width:520px){
  .garanties{ grid-template-columns:1fr; gap:13px; }
}

/* Op een telefoon tik je met een duim, niet met een muisaanwijzer. Alles wat
   je kunt aanraken is daarom minstens ongeveer 44px, de maat die Apple en
   Google allebei aanhouden. */
@media (max-width:820px){
  .qty-btn{ width:42px; height:42px; font-size:18px; }
  .cart-weg{ width:42px; height:42px; }
  .cart-weg svg{ width:17px; height:17px; }
  .staal-knop{ padding:9px; }
  .maat-knop{ min-width:52px; padding:13px 16px; }
  .co-akkoord input{ width:20px; height:20px; flex:0 0 auto; margin-top:1px; }
  .co-akkoord{ font-size:13.5px; gap:12px; padding:8px 0; }
  .foto-nav{ width:44px; height:44px; }
  .info-list summary{ padding-top:16px; padding-bottom:16px; }
}

/* ====================================================================
   HOVER: één duidelijke taal voor alles wat je kunt aanklikken.
   De kleurwissels alleen waren te subtiel, dus elke knop komt nu ook
   iets omhoog met een schaduw eronder.
   ==================================================================== */
.btn{
  transition:transform .18s ease, box-shadow .18s ease,
             background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px -14px rgba(16,12,10,.65);
}
.btn:active{ transform:translateY(0); box-shadow:none; }

/* donkere knop: lichter worden leest beter dan donkerder */
.btn-primary:hover{ background:var(--plum); }

/* omlijnde knop: vult zich licht */
.btn-ghost:hover{
  border-color:var(--btn); color:var(--btn);
  background:color-mix(in srgb, var(--btn) 7%, transparent);
}

/* lichte knoppen op een donker vlak */
.hero .btn-primary:hover,
.banner .btn:hover,
.nb-form .btn:hover{
  background:#ffffff;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.7);
}

/* uitgeschakeld beweegt niet */
.btn.disabled,
.btn[disabled],
button[disabled]{ cursor:not-allowed; }
.btn.disabled:hover,
.btn[disabled]:hover,
button[disabled]:hover{ transform:none; box-shadow:none; }

/* tekstlink in de hero */
.tekstlink{ transition:color .2s ease, border-color .2s ease; }
.tekstlink:hover{ color:#ffffff; }

/* maat- en kleurkiezer */
.maat-knop{ transition:border-color .2s, background .2s, color .2s, transform .15s ease; }
.maat-knop:not(.leeg):hover{ border-color:var(--btn); background:var(--card); transform:translateY(-1px); }
.staal-knop{ transition:border-color .2s, transform .15s ease; }
.staal-knop:not(.leeg):hover{ border-color:var(--btn); transform:scale(1.08); }

/* winkelwagen */
.qty-btn{ transition:background .2s, color .2s, transform .15s ease; }
.qty-btn:not([disabled]):hover{ background:var(--card); color:var(--ink); transform:scale(1.08); }
.cart-weg{ transition:background .2s, color .2s; }

/* kaarten in de collectie en de categorieën */
.card{ transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.card:hover{ transform:translateY(-3px); }
.cat-kaart{ transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.cat-kaart:hover{ transform:translateY(-3px); }

/* geen zweefeffect op een apparaat zonder muis */
@media (hover: none){
  .btn:hover, .card:hover, .cat-kaart:hover,
  .maat-knop:hover, .staal-knop:hover, .qty-btn:hover{
    transform:none; box-shadow:none;
  }
}
@media (prefers-reduced-motion: reduce){
  .btn, .card, .cat-kaart, .maat-knop, .staal-knop, .qty-btn{ transition:none; }
  .btn:hover, .card:hover, .cat-kaart:hover,
  .maat-knop:hover, .staal-knop:hover, .qty-btn:hover{ transform:none; }
}