/* ==========================================================================
   Novalinda — stylesheet
   Merkidentiteit uit brand-identity.md. Wijzig kleuren uitsluitend hier.
   ========================================================================== */

:root{
  /* Merkkleuren — vastgelegd in brand-identity.md */
  --wine-900:#2a0d18;
  --wine-800:#3a1220;
  --wine-700:#5c1a2b;
  --wine-600:#74263a;
  --gold:#c9a24b;
  --gold-light:#f0d68a;
  --sand:#c7bba6;

  /* Neutralen, afgeleid van het palet */
  --cream:#faf7f2;
  --cream-2:#f3ede4;
  --paper:#ffffff;
  --ink:#1c1013;
  --ink-soft:#5a4a50;
  --line:rgba(58,18,32,.12);
  --line-strong:rgba(58,18,32,.22);

  /* Typografie */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;

  /* Ritme */
  --container:1240px;
  --gutter:clamp(20px,5vw,48px);
  --section:clamp(64px,9vw,120px);
  --radius:2px;

  --shadow-sm:0 1px 2px rgba(42,13,24,.06),0 8px 24px rgba(42,13,24,.05);
  --shadow-md:0 2px 6px rgba(42,13,24,.08),0 24px 60px rgba(42,13,24,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

/* Het hidden-attribuut moet altijd winnen. Zonder deze regel overschrijft
   elke class met een eigen display (.grid, .steps) de UA-stijl van [hidden],
   en staan de Nederlandse en Spaanse blokken tegelijk op de pagina. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
svg{display:block}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
  color:var(--wine-800);
}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{margin:0 0 1.1em}
a{color:var(--wine-700);text-decoration-color:var(--line-strong);text-underline-offset:3px}
a:hover{color:var(--wine-800)}

::selection{background:var(--gold-light);color:var(--wine-900)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- Layout ---------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:780px}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(44px,6vw,72px)}
.stack>*+*{margin-top:1rem}

.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .grid--2,.grid--3{grid-template-columns:1fr}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
/* Productrasters staan dicht op elkaar — het beeld moet aaneengesloten lezen */
.grid--products{gap:10px}
@media (min-width:1400px){.grid--products.grid--4{grid-template-columns:repeat(4,1fr)}}

/* Beeldvullende rasters, zonder marge naar de rand */
.bleed{padding-inline:10px}

/* ---------- Typografische hulpstukken --------------------------------- */
.eyebrow{
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--wine-600);
  margin:0 0 1rem;
  display:block;
}
.eyebrow--gold{color:var(--gold)}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--ink-soft);max-width:62ch}
.muted{color:var(--ink-soft)}
.tiny{font-size:.82rem;line-height:1.55}
.center{text-align:center}
.center .lede{margin-inline:auto}

.section-head{max-width:64ch;margin-bottom:clamp(32px,4vw,56px)}
.section-head.center{margin-inline:auto;text-align:center}

/* ---------- Knoppen ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:1.05em 2.1em;
  border:1px solid var(--wine-800);
  background:var(--wine-800);color:var(--cream);
  border-radius:var(--radius);
  cursor:pointer;text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{background:var(--wine-700);border-color:var(--wine-700);color:var(--cream);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.btn--ghost{background:transparent;color:var(--wine-800)}
.btn--ghost:hover{background:var(--wine-800);color:var(--cream)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--wine-900)}
.btn--gold:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--wine-900)}
.btn--light{background:var(--cream);border-color:var(--cream);color:var(--wine-800)}
.btn--light:hover{background:var(--paper);border-color:var(--paper);color:var(--wine-900)}
.btn--outline-light{background:transparent;border-color:rgba(250,247,242,.5);color:var(--cream)}
.btn--outline-light:hover{background:var(--cream);border-color:var(--cream);color:var(--wine-800)}
.btn--block{width:100%}
.btn--sm{padding:.78em 1.4em;font-size:.72rem}

.link-arrow{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  text-decoration:none;color:var(--wine-800);
  border-bottom:1px solid var(--gold);padding-bottom:.35em;
  display:inline-flex;align-items:center;gap:.6em;
  transition:gap .3s var(--ease)
}
.link-arrow:hover{gap:1em}

/* ---------- Medaillon -------------------------------------------------- */
.medallion{width:34px;height:34px;color:var(--gold);flex:none}
.divider{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--gold)}
.divider::before,.divider::after{content:"";height:1px;width:min(120px,18vw);background:linear-gradient(90deg,transparent,currentColor)}
.divider::after{background:linear-gradient(270deg,transparent,currentColor)}

/* ---------- Announcement -----------------------------------------------
   Bewust rustig: een dunne regel, geen schreeuwende balk.
   ----------------------------------------------------------------------- */
.announce{
  background:var(--cream-2);color:var(--ink-soft);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  text-align:center;padding:.62em 1em;
  border-bottom:1px solid var(--line);
}
.announce strong{color:var(--wine-800);font-weight:500}

/* ---------- Header ------------------------------------------------------
   Woordmerk groot en links, navigatie ernaast, alles wat secundair is
   rechts. Het beeld op de pagina moet het werk doen, niet de header.
   ------------------------------------------------------------------------ */

/* De header wordt door JavaScript in <div id="site-header"> gezet. Zonder
   display:contents is die div de sticky-container, en dan blijft de balk
   maar plakken zolang die div in beeld is — dat is precies zijn eigen
   hoogte. Gevolg: de balk schuift bij het scrollen alsnog weg. Met
   display:contents telt de div niet mee voor de layout en plakt de header
   tegen de pagina zelf, zoals bedoeld. */
#site-header{display:contents}

.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

/* Hier stond eerder will-change:transform met translateZ(0). Bedoeld om
   doorschemeren te voorkomen, maar het veroorzaakte het juist: de balk
   kwam in een eigen GPU-laag en liet de paginatitel er als vaal spook
   doorheen slepen tijdens het scrollen.

   In plaats van de balk omhoog te duwen zetten we de pagina-inhoud
   expliciet omlaag. main krijgt een eigen stapelcontext op z-index 0,
   ruim onder de 60 van de header. Daarmee ligt de tekenvolgorde vast
   zonder dat er een laag geforceerd wordt. */
main{position:relative;z-index:0}
.header-inner{
  display:flex;align-items:center;
  gap:clamp(18px,2.6vw,44px);
  min-height:88px;
}
.brand{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--wine-800);flex:none;
}
.brand .medallion{width:26px;height:26px}
.brand__name{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2.3vw,1.95rem);
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  padding-left:.16em;font-weight:500;
}
.brand__tag{display:none}

.nav{display:flex;align-items:center;gap:clamp(13px,1.8vw,26px)}
.nav--left{flex:1 1 auto;min-width:0}
.nav--right{flex:none;gap:clamp(10px,1.4vw,20px)}
.nav a{
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);position:relative;
  padding-block:.45em;white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--wine-800)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold)
}

/* Uitklapmenu onder Collectie */
.has-sub{position:relative}
.has-sub>a::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:.55em;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.subnav{
  position:absolute;top:100%;left:-16px;min-width:214px;
  background:var(--paper);border:1px solid var(--line);
  padding:10px 0;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.subnav a{
  display:block;padding:.55em 20px;letter-spacing:.1em;font-size:.72rem;
}
.subnav a:hover{background:var(--cream-2);color:var(--wine-800)}
.subnav a[aria-current="page"]::after{display:none}

.icon-btn{
  background:none;border:0;padding:6px;cursor:pointer;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:.45em;font:inherit;font-size:.75rem;
  letter-spacing:.13em;text-transform:uppercase;
  transition:color .25s var(--ease);
}
.icon-btn:hover{color:var(--wine-800)}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}
.cart-count{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--wine-800);color:var(--cream);
  font-size:.62rem;font-weight:500;letter-spacing:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.cart-count[data-empty="true"]{background:var(--cream-2);color:var(--ink-soft)}

.lang-switch{display:inline-flex;align-items:center;gap:2px}
.lang-switch button{
  background:none;border:0;cursor:pointer;font:inherit;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.35em .45em;color:var(--ink-soft);
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease)
}
.lang-switch button[aria-pressed="true"]{color:var(--wine-800);border-bottom-color:var(--gold)}

.burger{display:none}
@media (max-width:1100px){
  .nav--left{display:none}
  .burger{display:inline-flex;order:-1;margin-right:-8px}
  .header-inner{min-height:72px}
  .nav--right{margin-left:auto}
}
@media (max-width:640px){
  .nav--right .nav-link,.icon-btn .label{display:none}
}

/* ---------- Zoeken ------------------------------------------------------- */
.search-panel{
  position:fixed;inset:0;z-index:80;background:rgba(42,13,24,.55);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.search-panel[data-open="true"]{opacity:1;visibility:visible}
.search-panel__box{
  background:var(--paper);padding:clamp(24px,5vw,52px) var(--gutter);
  transform:translateY(-16px);transition:transform .35s var(--ease);
  max-height:88vh;overflow-y:auto;
}
.search-panel[data-open="true"] .search-panel__box{transform:translateY(0)}
.search-panel input[type=text]{
  font-family:var(--serif);font-size:clamp(1.3rem,3vw,2rem);
  border:0;border-bottom:1px solid var(--line-strong);border-radius:0;
  padding:.3em 0;background:transparent;
}
.search-panel input[type=text]:focus{box-shadow:none;border-bottom-color:var(--wine-700)}
.search-results{margin-top:clamp(20px,3vw,36px)}

/* Mobiel menu
   Twee dingen waren hier mis en ze veroorzaakten samen één vervelende bug.

   Het menu is zo hoog als het scherm en staat dicht met translateY(-100%),
   dus precies één schermhoogte omhoog. Maar de linklijst is langer dan het
   scherm, en zonder overflow liep die er onderuit — het laatste item stak
   onder de onderrand van het weggeschoven menu weer het beeld in. Op
   z-index 70 kwam dat bovenop de header, in crème op wit, en omdat het
   fixed is bleef het staan tijdens het scrollen.

   overflow-y:auto houdt een lange lijst binnen het menu. visibility zorgt
   dat er in gesloten toestand hoe dan ook niets te zien is. */
.mobile-menu{
  position:fixed;inset:0;z-index:70;background:var(--wine-800);color:var(--cream);
  padding:calc(var(--gutter) + 8px);display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(-100%);
  transition:transform .45s var(--ease);
}
.mobile-menu[data-open="true"]{transform:translateY(0)}

/* Verbergen gebeurt in een eigen regel zonder overgang. visibility mee laten
   lopen in de transition leverde een menu op dat halverwege bleef steken:
   het attribuut sprong om, maar de stijl volgde niet meer. Dit schakelt
   hard, en dat is precies wat je wilt — een menu moet nooit half open
   blijven hangen. */
.mobile-menu:not([data-open="true"]){visibility:hidden}
.mobile-menu a{
  color:var(--cream);text-decoration:none;font-family:var(--serif);
  font-size:1.7rem;padding:.35em 0;border-bottom:1px solid rgba(250,247,242,.14);
}
.mobile-menu .close{align-self:flex-end;color:var(--cream);background:none;border:0;cursor:pointer;font-size:1.6rem;line-height:1}

/* ---------- Hero --------------------------------------------------------
   Beeldvullend. De foto draagt de pagina; de tekst ligt erop, links onder.
   Zet een echte foto neer via .hero__media img en er verandert niets aan
   de opmaak.
   ------------------------------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;
  background:var(--wine-800);color:var(--cream);
  min-height:min(84vh,780px);
  display:flex;align-items:flex-end;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media .ph{width:100%;height:100%;object-fit:cover}
.hero__media .ph__note{display:none}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(75deg,rgba(42,13,24,.78) 0%,rgba(42,13,24,.42) 46%,rgba(42,13,24,.12) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(48px,8vw,92px)}
.hero h1{
  color:var(--paper);
  font-size:clamp(2.6rem,7.4vw,6rem);
  font-weight:400;line-height:.98;letter-spacing:.005em;
  text-transform:uppercase;
  max-width:16ch;margin-bottom:.32em;
  text-shadow:0 2px 30px rgba(42,13,24,.35);
}
.hero .lede{
  color:rgba(255,255,255,.9);max-width:46ch;
  border-top:1px solid rgba(201,162,75,.6);padding-top:1.2em;
}
.hero .eyebrow{color:var(--gold-light)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}
.hero__note{
  position:absolute;right:var(--gutter);bottom:clamp(48px,8vw,92px);z-index:2;
  text-align:right;max-width:210px;
  border-right:1px solid rgba(201,162,75,.6);padding-right:1.1em;
}
.hero__note strong{
  display:block;font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);
  line-height:1;color:var(--gold-light)
}
.hero__note span{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.78)
}
@media (max-width:820px){
  .hero{min-height:min(76vh,640px)}
  .hero__note{display:none}
  .hero h1{max-width:100%}
}

/* ---------- Productbeeld (SVG-placeholder) ------------------------------ */
.ph{
  position:relative;width:100%;height:100%;overflow:hidden;
  background:var(--cream-2);
}
.ph svg{width:100%;height:100%}
.ph__note{
  position:absolute;left:10px;bottom:10px;
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(42,13,24,.72);color:var(--sand);padding:.32em .6em;border-radius:2px;
}

/* ---------- Productkaart ------------------------------------------------
   Geen randen, geen schaduw, geen labels over het beeld heen. Het beeld
   staat groot, de tekst eronder is klein en stil. Alles wat je weglaat,
   maakt het raster rustiger.
   ------------------------------------------------------------------------ */
.product-card{position:relative;background:transparent;text-decoration:none;color:inherit;display:block}
.product-card__media{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--cream-2);
}
.product-card__media img,.product-card__media .ph{width:100%;height:100%;object-fit:cover}
.product-card__media img,.product-card__media .ph svg{transition:transform .8s var(--ease)}
.product-card:hover .product-card__media img,
.product-card:hover .product-card__media .ph svg{transform:scale(1.04)}
.product-card__body{padding-top:14px;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.product-card__name{
  font-family:var(--serif);font-size:1rem;line-height:1.32;margin:0;
  color:var(--ink);font-weight:400;
}
.product-card__price{
  font-size:.86rem;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-soft)
}
.product-card__price s,.price s{opacity:.55;margin-right:.5em;color:var(--ink-soft)}
.product-card__price em,.price em{font-style:normal;color:var(--wine-700)}
.price{font-variant-numeric:tabular-nums}
.product-card__cat,.swatches{display:none}

/* ---------- Categorietegels --------------------------------------------- */
.cat-tile{position:relative;display:block;text-decoration:none;overflow:hidden;aspect-ratio:4/5}
.cat-tile .ph svg{transition:transform .8s var(--ease)}
.cat-tile:hover .ph svg{transform:scale(1.06)}
.cat-tile__label{
  position:absolute;inset:auto 0 0 0;padding:26px 22px;
  background:linear-gradient(0deg,rgba(42,13,24,.82),transparent);
  color:var(--cream);
}
.cat-tile__label h3{color:var(--cream);margin:0;font-size:1.32rem}
.cat-tile__label span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light)}

/* ---------- Donkere band ------------------------------------------------ */
.band{background:var(--wine-800);color:var(--cream)}
.band h2,.band h3{color:var(--cream)}
.band .lede,.band p{color:rgba(250,247,242,.8)}
.band--deep{background:var(--wine-900)}
.band--sand{background:var(--cream-2);color:var(--ink)}
.band--sand h2{color:var(--wine-800)}

.impact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
@media (max-width:860px){.impact__grid{grid-template-columns:1fr}}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:2.4rem}
.stat{border-top:1px solid rgba(201,162,75,.4);padding-top:14px}
.stat__num{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.7rem);color:var(--gold-light);line-height:1;display:block}
.stat__label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,247,242,.7)}
@media (max-width:560px){.stat-row{grid-template-columns:1fr}}

/* ---------- Stappen ------------------------------------------------------ */
.steps{counter-reset:step;display:grid;gap:clamp(20px,3vw,34px)}
.step{position:relative;padding-left:64px}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:-4px;
  font-family:var(--serif);font-size:1.5rem;color:var(--gold)
}
.step h3{font-size:1.1rem;margin-bottom:.35em}
.step p{margin:0;color:var(--ink-soft);font-size:.94rem}
.band .step p{color:rgba(250,247,242,.75)}

/* ---------- Formulieren -------------------------------------------------- */
.field{display:block;margin-bottom:18px}
.field > span{
  display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.55em
}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:.86em 1em;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--wine-700);box-shadow:0 0 0 3px rgba(92,26,43,.1)
}
textarea{min-height:150px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c1a2b' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.checkbox{display:flex;gap:.7em;align-items:flex-start;font-size:.88rem;color:var(--ink-soft);margin-bottom:14px}
.checkbox input{margin-top:.28em;accent-color:var(--wine-700);width:16px;height:16px;flex:none}

/* ---------- Maat- en kleurkeuze ------------------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);
  font:inherit;font-size:.8rem;letter-spacing:.06em;padding:.6em 1.1em;
  cursor:pointer;border-radius:var(--radius);
  transition:border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease)
}
.chip:hover{border-color:var(--wine-700)}
.chip[aria-pressed="true"]{background:var(--wine-800);border-color:var(--wine-800);color:var(--cream)}
.chip[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through}

.color-chip{width:34px;height:34px;border-radius:50%;padding:0;border:1px solid var(--line-strong);position:relative}
.color-chip[aria-pressed="true"]::after{
  content:"";position:absolute;inset:-5px;border:1px solid var(--wine-800);border-radius:50%
}

/* ---------- Tabellen ------------------------------------------------------ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:460px}
th,td{text-align:left;padding:.85em 1em;border-bottom:1px solid var(--line)}
th{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
tbody tr:hover{background:rgba(201,162,75,.06)}

/* ---------- Accordeon ------------------------------------------------------ */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  cursor:pointer;list-style:none;padding:1.15em 44px 1.15em 0;position:relative;
  font-family:var(--serif);font-size:1.06rem;color:var(--wine-800)
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)
}
.acc details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc .acc__body{padding:0 0 1.4em;color:var(--ink-soft);max-width:70ch}
.acc .acc__body p:last-child{margin-bottom:0}

/* ---------- Notitie / waarschuwing ----------------------------------------- */
.note{
  border-left:2px solid var(--gold);background:rgba(201,162,75,.08);
  padding:1.1em 1.3em;font-size:.9rem;color:var(--ink-soft);border-radius:0 2px 2px 0
}
.note strong{color:var(--wine-800)}
.note--band{background:rgba(250,247,242,.07);color:rgba(250,247,242,.82)}
.note--band strong{color:var(--gold-light)}

/* ---------- Winkelwagen ----------------------------------------------------- */
.cart-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.cart-layout{grid-template-columns:1fr}}

.cart-line{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.cart-line__media{aspect-ratio:3/4;overflow:hidden}
.cart-line__title{font-family:var(--serif);font-size:1.05rem;margin:0 0 .2em}
.cart-line__meta{font-size:.78rem;color:var(--ink-soft);letter-spacing:.06em;margin:0 0 .7em}
.cart-line__price{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.qty{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.qty button{background:var(--paper);border:0;width:32px;height:32px;cursor:pointer;font:inherit;color:var(--ink)}
.qty button:hover{background:var(--cream-2)}
.qty output{width:38px;height:32px;display:grid;place-items:center;font-size:.9rem;font-variant-numeric:tabular-nums;background:var(--paper)}
.link-remove{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:.76rem;
  color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;margin-left:14px}
.link-remove:hover{color:var(--wine-700)}

.summary{background:var(--paper);border:1px solid var(--line);padding:clamp(22px,3vw,32px);position:sticky;top:100px}
.summary__row{display:flex;justify-content:space-between;gap:12px;padding:.5em 0;font-size:.95rem}
.summary__row--total{
  border-top:1px solid var(--line);margin-top:.7em;padding-top:1em;
  font-family:var(--serif);font-size:1.4rem;color:var(--wine-800)
}
.summary__row span:last-child{font-variant-numeric:tabular-nums}
.impact-line{
  margin-top:1.2em;padding:1em;background:rgba(201,162,75,.1);
  border:1px solid rgba(201,162,75,.3);font-size:.86rem;color:var(--wine-700);
  display:flex;gap:.8em;align-items:flex-start
}
.impact-line b{color:var(--wine-800)}

.progress{height:3px;background:var(--line);margin:.9em 0 .5em;overflow:hidden}
.progress__bar{height:100%;background:var(--gold);width:0;transition:width .5s var(--ease)}

/* ---------- Stappenbalk checkout --------------------------------------------- */
.steps-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:2.4rem;align-items:center}
.steps-bar span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.steps-bar span[aria-current="step"]{color:var(--wine-800);border-bottom:1px solid var(--gold);padding-bottom:.3em}
.steps-bar i{color:var(--line-strong);font-style:normal}

/* ---------- Socials ------------------------------------------------------------ */
.socials{display:flex;gap:10px;flex-wrap:wrap}
.social{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(250,247,242,.28);border-radius:50%;
  color:var(--cream);text-decoration:none;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease)
}
.social:hover{background:var(--gold);border-color:var(--gold);color:var(--wine-900);transform:translateY(-2px)}
.social svg{width:18px;height:18px;fill:currentColor}
.socials--ink .social{border-color:var(--line-strong);color:var(--wine-800)}
.socials--ink .social:hover{background:var(--wine-800);border-color:var(--wine-800);color:var(--cream)}

/* ---------- Footer ---------------------------------------------------------------- */
.site-footer{background:var(--wine-900);color:rgba(250,247,242,.72);padding-block:clamp(56px,7vw,88px) 0}
.site-footer h4{
  color:var(--gold);font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 1.2em;font-weight:500
}
.site-footer a{color:rgba(250,247,242,.72);text-decoration:none;font-size:.9rem}
.site-footer a:hover{color:var(--gold-light)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:clamp(24px,4vw,48px)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:.7em}
.footer-brand .brand__name{color:var(--cream);font-size:1.3rem}
.footer-brand .brand__tag{color:var(--gold)}
.footer-bottom{
  margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(250,247,242,.14);
  padding-block:24px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:.78rem
}
.pay-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pay{
  border:1px solid rgba(250,247,242,.2);border-radius:3px;padding:.34em .6em;
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,247,242,.6)
}

.newsletter{display:flex;gap:8px;margin-top:1rem}
.newsletter input{
  background:rgba(250,247,242,.06);border-color:rgba(250,247,242,.24);color:var(--cream)
}
.newsletter input::placeholder{color:rgba(250,247,242,.45)}
.newsletter input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.16)}
@media (max-width:400px){.newsletter{flex-direction:column}}

/* ---------- Toast ------------------------------------------------------------------- */
.toast{
  position:fixed;right:20px;bottom:20px;z-index:90;max-width:340px;
  background:var(--wine-800);color:var(--cream);padding:1em 1.2em;
  box-shadow:var(--shadow-md);border-left:2px solid var(--gold);
  transform:translateY(140%);opacity:0;transition:transform .45s var(--ease),opacity .35s var(--ease);
  font-size:.9rem
}
.toast[data-show="true"]{transform:translateY(0);opacity:1}

/* ---------- Diversen ----------------------------------------------------------------- */
.breadcrumb{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.6rem}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--wine-700)}

.page-head{padding-block:clamp(40px,6vw,72px) clamp(24px,3vw,40px);border-bottom:1px solid var(--line)}

/* ---------- Winkelbalk ---------------------------------------------------
   Zakelijk, geen sierlijst: aantal resultaten, hoeveel per pagina, sortering.
   ------------------------------------------------------------------------- */
.shop-intro{
  max-width:78ch;color:var(--ink-soft);font-size:.98rem;
  padding-block:clamp(26px,4vw,40px) 0;
}
.shop-intro strong{color:var(--ink);font-weight:500}

.shop-meta{
  display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;
  padding-block:clamp(20px,3vw,30px) 14px;
  border-bottom:1px solid var(--line);
}
.shop-meta .count{font-size:.84rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}

.filter-bar{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding-block:16px;border-bottom:1px solid var(--line);margin-bottom:clamp(24px,3vw,36px)
}
.filter-toggle{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:.7em;white-space:nowrap;flex:none;
}
.filter-toggle span{display:grid;gap:3px;width:16px}
.filter-toggle span i{display:block;height:1px;background:currentColor}
.filter-toggle:hover{color:var(--wine-700)}

.per-page{
  display:inline-flex;align-items:baseline;gap:.55em;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)
}
.per-page button{
  background:none;border:0;padding:0 .1em;cursor:pointer;font:inherit;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.per-page button[aria-pressed="true"]{color:var(--wine-800);border-bottom:1px solid var(--gold)}
.per-page i{color:var(--line-strong);font-style:normal}

.sort-select{
  width:auto;padding:.45em 2.1em .45em .2em;border:0;border-bottom:1px solid var(--line-strong);
  border-radius:0;background-color:transparent;font-size:.82rem;
}
.sort-select:focus{box-shadow:none;border-bottom-color:var(--wine-700)}

.filter-group{
  display:flex;flex-wrap:wrap;gap:8px;
  width:100%;padding-bottom:16px;
}
.filter-group[hidden]{display:none}

/* ---------- Paginering ---------------------------------------------------- */
.pager{
  display:flex;gap:6px;align-items:center;justify-content:center;
  margin-top:clamp(36px,5vw,60px);
}
.pager button{
  min-width:38px;height:38px;padding:0 .7em;cursor:pointer;font:inherit;
  font-size:.84rem;font-variant-numeric:tabular-nums;
  background:transparent;border:1px solid transparent;color:var(--ink-soft);
  transition:border-color .25s var(--ease),color .25s var(--ease)
}
.pager button:hover:not([disabled]){color:var(--wine-800);border-color:var(--line-strong)}
.pager button[aria-current="page"]{color:var(--wine-800);border-color:var(--wine-800)}
.pager button[disabled]{opacity:.3;cursor:default}

/* ---------- WhatsApp ------------------------------------------------------- */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:75;
  width:54px;height:54px;border-radius:50%;
  background:var(--wine-800);color:var(--cream);
  display:grid;place-items:center;text-decoration:none;
  box-shadow:var(--shadow-md);
  transition:transform .3s var(--ease),background .3s var(--ease)
}
.wa:hover{background:var(--wine-700);color:var(--cream);transform:translateY(-2px)}
.wa svg{width:26px;height:26px;fill:currentColor}
@media (max-width:600px){.wa{width:48px;height:48px;right:14px;bottom:14px}}

.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
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--wine-800);color:var(--cream);
  padding:1em 1.4em;text-decoration:none
}
.skip-link:focus{left:0}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal[data-visible="true"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

.prose{max-width:72ch}
.prose h2{margin-top:2.2em}
.prose h3{margin-top:1.8em;font-size:1.15rem}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--gold)}