/* FreeSeedsOnline v2 — one stylesheet, mobile first.
   The old shop shipped 64 stylesheets; this is the whole design system. */

:root{
  --green-900:#12301f;
  --green-700:#1d6b3f;
  --green-600:#248a4d;
  --green-500:#2fa35c;
  --green-100:#e6f4ea;
  --green-050:#f2f9f4;

  --ink:#16211a;
  --ink-2:#4a5a4f;
  --ink-3:#77877c;
  --line:#dde5df;
  --paper:#ffffff;
  --paper-2:#f6f9f6;

  --amber:#b8791b;
  --red:#a8342a;
  --sale:#c0392b;

  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(18,48,31,.05), 0 10px 24px -18px rgba(18,48,31,.4);
  --shadow-lg:0 2px 6px rgba(18,48,31,.06), 0 20px 40px -24px rgba(18,48,31,.45);

  --wrap:1200px;
  --header-h:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  padding-bottom:64px; /* room for the bottom bar on mobile */
}
img{max-width:100%;height:auto;display:block}
/* Vangnet: geen enkel element mag de pagina breder maken dan het scherm. Een
   te lange productnaam of een tabel met bedragen duwde de winkelwagen anders
   opzij, waardoor de prijzen rechts wegvielen. */
html,body{overflow-x:hidden}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:600;text-wrap:balance}
h1{font-size:1.7rem}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
p{margin:0 0 1em}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.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{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--shadow)}
.hide-sm{display:none}
:focus-visible{outline:2px solid var(--green-600);outline-offset:2px}

/* ---------------------------------------------------------------- header */
.usp-bar{background:var(--green-900);color:#dcece2;font-size:.78rem}
.usp-bar__inner{display:flex;gap:18px;align-items:center;justify-content:center;height:32px;overflow:hidden}
.usp-bar__promo{background:var(--green-500);color:#fff;padding:2px 10px;border-radius:999px;font-weight:600}

.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:12px;height:var(--header-h)}

.logo{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:700;font-size:1.05rem;text-decoration:none;margin-right:auto}
.logo:hover{text-decoration:none}
.logo__mark{width:42px;height:42px;object-fit:contain;flex:none}
.logo__text em{font-style:normal;color:var(--green-600)}

.main-nav{display:none;gap:20px;font-size:.92rem}
/* Een menu-item breekt nooit af. "Alle zaden" viel tussen 900 en 1300 pixels
   over twee regels en dan staat de hele balk scheef; de ruimte hoort van de
   zoekbalk te komen, want die kan smaller zonder onbruikbaar te worden. */
.main-nav a{color:var(--ink-2);font-weight:500;white-space:nowrap}
.main-nav a:hover{color:var(--green-700);text-decoration:none}

.header-actions{display:flex;align-items:center;gap:8px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;color:var(--ink);border-radius:var(--radius-sm);cursor:pointer;position:relative}
.icon-btn:hover{background:var(--green-050)}

.search{display:none;position:relative}
.search input{width:100%;max-width:230px;height:38px;padding:0 38px 0 14px;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:.9rem;background:var(--paper-2)}
.search input:focus{outline:none;border-color:var(--green-500);background:#fff}
.search button{position:absolute;right:4px;top:4px;width:30px;height:30px;border:0;background:none;color:var(--ink-3);cursor:pointer}

.cart-btn__count{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;background:var(--green-600);color:#fff;border-radius:999px;font-size:.68rem;font-weight:600;display:grid;place-items:center}

/* ----------------------------------------------------------- mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;padding:0 16px 24px}
.mobile-menu[hidden]{display:none}
.mobile-menu__head{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);font-weight:600;border-bottom:1px solid var(--line);margin-bottom:8px}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{padding:15px 4px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500;font-size:1.05rem}
/* Merken staat dicht en klapt open op tik. De summary krijgt dezelfde maat als
   een gewoon menu-item, zodat de rij niet uit de toon valt, plus een driehoekje
   dat meedraait. list-style weg: Safari en Chrome tekenen daar elk hun eigen
   markering, en die staat links van de tekst in plaats van rechts. */
/* De nav zet zijn kinderen onder elkaar, maar de links zitten hier een niveau
   dieper — zonder eigen kolomrichting kwamen de merken naast elkaar en liepen
   ze over de scheidingslijnen heen. */
.mobile-menu__groep{border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.mobile-menu__groep summary{padding:15px 4px;color:var(--ink);font-weight:500;font-size:1.05rem;
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.mobile-menu__groep summary::-webkit-details-marker{display:none}
.mobile-menu__groep summary::after{content:"";width:9px;height:9px;margin-right:6px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .15s}
.mobile-menu__groep[open] summary::after{transform:rotate(-135deg)}
.mobile-menu__groep a{border-bottom:0;padding-top:9px;padding-bottom:9px}
.mobile-menu__groep a:last-child{padding-bottom:14px}
.mobile-menu__note{margin-top:auto;color:var(--ink-3);font-size:.85rem}

/* ----------------------------------------------------------- breadcrumbs */
.breadcrumbs{background:var(--paper-2);border-bottom:1px solid var(--line);font-size:.82rem;color:var(--ink-3)}
.breadcrumbs .wrap{display:flex;gap:8px;align-items:center;padding-top:9px;padding-bottom:9px;overflow-x:auto;white-space:nowrap}
.breadcrumbs a{color:var(--ink-2)}

/* ----------------------------------------------------------------- hero */
.hero{background:linear-gradient(160deg,var(--green-050),#fff 65%);border-bottom:1px solid var(--line);overflow:hidden}
.hero__inner{padding-top:28px;padding-bottom:32px;display:grid;gap:20px}
/* De kop schaalt mee met het scherm in plaats van op één vaste maat te staan:
   op een telefoon van 390 punten vulde 1,9rem het halve beeld voordat er ook
   maar iets van de winkel te zien was. */
.hero h1{font-size:clamp(1.45rem,6.2vw,1.9rem);margin-bottom:.3em;line-height:1.15}
.hero p{color:var(--ink-2);max-width:52ch;margin-bottom:1.2em;font-size:clamp(.92rem,3.6vw,1rem)}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap}
.hero__usps{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding:0;list-style:none}
.hero__usps li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.8rem;color:var(--ink-2)}

/* The hero visual: the product itself, not decoration. Hidden on small
   screens where the words and the buttons matter more than the picture. */
.hero__visual{display:none}

@media (min-width:900px){
  .hero__visual{
    display:block;position:relative;justify-self:center;
    width:min(100%,420px);margin-block:-8px -48px;
  }
  .hero__visual img{
    width:100%;height:auto;
    filter:drop-shadow(0 26px 34px rgba(18,48,31,.22));
  }
  .hero__seal{
    position:absolute;top:5%;left:-4%;
    display:grid;place-content:center;gap:3px;text-align:center;
    width:104px;height:104px;border-radius:50%;
    background:var(--green-600);color:#fff;
    box-shadow:0 12px 26px -12px rgba(18,48,31,.6);
    rotate:-8deg;
  }
  .hero__seal b{
    font-size:1.5rem;line-height:1;font-weight:700;letter-spacing:-.02em;
    display:flex;align-items:center;justify-content:center;gap:3px;
  }
  .hero__seal b span{font-size:1rem;opacity:.75;font-weight:500}
  .hero__seal em{
    font-style:normal;font-size:.62rem;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;opacity:.92;
  }
  .hero__pick{
    position:absolute;right:-4%;bottom:16%;
    display:grid;gap:2px;padding:11px 15px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-lg);text-decoration:none;max-width:210px;
  }
  .hero__pick:hover{text-decoration:none;border-color:var(--green-500)}
  .hero__pick-label{
    font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:var(--green-700);
  }
  .hero__pick-name{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.25}
  .hero__pick-price{font-size:.8rem;color:var(--ink-3)}
}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--radius-sm);border:1px solid transparent;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--green-600);color:#fff}
.btn--primary:hover{background:var(--green-700)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--green-500);color:var(--green-700)}
.btn--block{width:100%}
.btn--lg{padding:15px 26px;font-size:1rem}

/* --------------------------------------------------------------- section */
.section{padding:36px 0}
.section--tint{background:var(--paper-2)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.section__head h2{margin:0}
.section__head a{font-size:.88rem;font-weight:500}

/* ----------------------------------------------------------- product grid */
.grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:box-shadow .15s,border-color .15s}
.card:hover{box-shadow:var(--shadow);border-color:#cfded4}
.card__media{position:relative;aspect-ratio:1;background:var(--paper-2)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__flags{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.flag{font-size:.68rem;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--green-600);color:#fff;letter-spacing:.01em}
.flag--sale{background:var(--sale)}
.flag--promo{background:var(--green-900)}
.flag--soon{background:var(--amber)}
.card__body{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.card__title{font-size:.95rem;font-weight:600;margin:0;line-height:1.3}
.card__title a{color:var(--ink)}
.card__specs{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.76rem;color:var(--ink-3);margin:0;padding:0;list-style:none}
.card__specs b{font-weight:600;color:var(--ink-2)}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.price{font-weight:700;font-size:1.05rem}
.price small{font-weight:500;font-size:.75rem;color:var(--ink-3);display:block;line-height:1}
.price del{color:var(--ink-3);font-weight:400;font-size:.85rem;margin-right:5px}
/* De prijs per zaadje zodra de 4=3-actie meetelt. Staat onder de gewone prijs
   en niet in plaats daarvan: wie één zaadje koopt betaalt de bovenste. */
.price__promo{display:block;margin-top:3px;font-size:.82rem;font-weight:700;
  color:var(--green-700);line-height:1.2;white-space:nowrap}
.price__promo small{display:inline;font-weight:500;color:var(--green-700);font-size:.82rem}
/* 44 pixels is de maat waarop een duim betrouwbaar raakt; onder die maat mis
   je hem net zo vaak als je hem raakt. Op een muisscherm mag hij kleiner. */
.card__add{border:1px solid var(--line);background:#fff;border-radius:var(--radius-sm);
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;color:var(--green-700);flex:none}
@media (hover:hover) and (pointer:fine){
  .card__add{width:38px;height:38px}
}
.card__add:hover{background:var(--green-600);border-color:var(--green-600);color:#fff}
.card--out{opacity:.62}

/* ------------------------------------------------------------- filters */
/* Alleen boven en onder ruimte toevoegen: `padding:24px 0` wiste de zijmarge
   van .wrap, waardoor de hele winkelpagina op een telefoon tegen de randen
   plakte terwijl de kop en het kruimelpad wel inspringen. */
.shop-layout{display:grid;gap:20px;padding-top:24px;padding-bottom:24px}
/* Category cover, as the old site had it: small, next to the title, never
   pushing the products below the fold. */
.shop__cover{float:left;width:72px;height:72px;object-fit:cover;border-radius:var(--radius);margin:0 14px 8px 0}
@media (min-width:700px){.shop__cover{width:96px;height:96px}}
/* On a phone the filters live behind a button, because scrolling past a
   whole filter panel before seeing a single product is no way to shop. */
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.filters h2{font-size:1rem;margin:0}
.filters__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.filters-open{display:inline-flex;gap:7px;padding:9px 14px;font-size:.88rem}
.filters-open svg{width:17px;height:17px}

@media (max-width:899px){
  .filters{
    position:fixed;inset:auto 0 0 0;z-index:55;max-height:82vh;overflow-y:auto;
    border-radius:var(--radius) var(--radius) 0 0;border-bottom:0;
    box-shadow:0 -10px 40px -14px rgba(18,48,31,.5);
    transform:translateY(101%);transition:transform .22s ease;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .filters--open{transform:translateY(0)}
  .filters-backdrop{
    position:fixed;inset:0;z-index:54;background:rgba(18,48,31,.35);
    opacity:0;pointer-events:none;transition:opacity .22s ease;
  }
  .filters-backdrop--on{opacity:1;pointer-events:auto}
}
.filter-group{border-top:1px solid var(--line);padding:12px 0}
.filter-group:first-of-type{border-top:0;padding-top:0}
.filter-group > label{display:block;font-weight:600;font-size:.85rem;margin-bottom:8px}
.filter-group select,.filter-group input[type=number]{width:100%;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:.9rem;background:#fff}
.filter-row{display:flex;gap:8px;align-items:center}
.filter-check{display:flex;align-items:center;gap:8px;font-size:.9rem;margin-bottom:6px}
/* Het bijschrift onder het merkzaden-vinkje: waarom dat vinkje er staat, in
   één regel. Zonder uitleg lijkt het een willekeurig filter. */
.filter-note{margin:4px 0 0 26px;font-size:.78rem;line-height:1.35;color:var(--ink-3)}
.filters__actions{display:flex;gap:8px;margin-top:14px}
.filters-close{display:inline-flex}

/* De regel boven het raster die vertelt wat er níét getoond wordt. Hij hoort
   op te vallen zonder een waarschuwing te lijken: wie een soort mist moet hem
   zien, wie niets mist mag eroverheen lezen. */
.merkhint{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--paper-2);
  font-size:.86rem;line-height:1.45;color:var(--ink-2)}
.merkhint a{white-space:nowrap}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.toolbar__count{color:var(--ink-3);font-size:.88rem}
.toolbar select{height:44px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:.88rem;background:#fff;min-width:0;max-width:100%}
/* Op een smal scherm past "Prijs laag → hoog" niet naast de knop en het aantal;
   dan liep de keuzelijst tegen de rand aan in plaats van af te breken. Op een
   eigen regel heeft hij ruimte en is hij ook makkelijker te raken. */
@media (max-width:560px){
  .toolbar{flex-wrap:wrap}
  .toolbar select{flex:1 0 100%;order:3}
  .toolbar__count{order:2}
}
@media (min-width:561px){
  .toolbar select{height:38px}
}

.active-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--green-100);color:var(--green-900);border-radius:999px;padding:4px 10px;font-size:.8rem}
.chip a{color:inherit;font-weight:700;line-height:1}

/* Long category copy folds down; the products stay above the fold. */
.intro{margin-bottom:18px}
.intro__body{max-width:72ch}
.intro--folded .intro__body{
  position:relative;max-height:6.6em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);
          mask-image:linear-gradient(#000 60%,transparent);
}
.intro--open .intro__body{max-height:none;-webkit-mask-image:none;mask-image:none}
.intro__toggle{
  border:0;background:none;padding:4px 0;margin-top:2px;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--green-700);cursor:pointer;
}
.intro__toggle:hover{text-decoration:underline}

/* --------------------------------------------------------------- product */
.product{display:grid;gap:20px;padding-top:24px;padding-bottom:24px}
.product__gallery{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.product__gallery img{width:100%;aspect-ratio:1;object-fit:cover}
/* De foto blijft vierkant — er wordt niets afgesneden — maar op een telefoon
   werd hij net zo breed als het scherm en dus ook net zo hoog, waardoor naam,
   prijs en koopknop pas na scrollen verschenen. Kleiner tonen lost dat op
   zonder de foto zelf te veranderen. */
@media (max-width:759px){
  .product__gallery{max-width:70vw;margin-left:auto;margin-right:auto}
}
.product__thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto}
.product__thumbs img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;flex:none}
.product h1{font-size:1.5rem;margin-bottom:8px}
.product__price{display:flex;align-items:baseline;gap:10px;margin:10px 0 4px}
.product__price .price{font-size:1.75rem}
.product__promo{background:var(--green-100);border-radius:var(--radius-sm);padding:12px 14px;font-size:.9rem;margin:14px 0}
.product__promo b{color:var(--green-900)}
.product__buy{display:flex;gap:10px;align-items:center;margin:16px 0}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;flex:none}
.qty button{width:40px;height:46px;border:0;background:#fff;font-size:1.1rem;cursor:pointer;color:var(--ink-2)}
.qty input{width:44px;height:46px;border:0;text-align:center;font:inherit;font-weight:600}
.stock{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--green-700);font-weight:500}
.stock--out{color:var(--red)}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

.specs{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem}
.specs th,.specs td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{font-weight:500;color:var(--ink-3);width:45%}
.specs td{font-weight:500}

/* De labels van een zaadje, onder de omschrijving. Rustig gehouden: ze zijn
   een ingang naar verwante soorten, geen knop die om aandacht vraagt. */
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.tags__label{color:var(--ink-3);font-size:.85rem}
.tags__tag{display:inline-block;padding:4px 11px;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-2);font-size:.82rem;text-decoration:none;transition:border-color .15s,color .15s}
.tags__tag:hover,.tags__tag:focus-visible{border-color:var(--green-700);color:var(--green-900)}

.tabs{margin:24px 0}
.tabs__nav{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs__nav button{border:0;background:none;padding:11px 14px;font:inherit;font-weight:600;font-size:.92rem;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs__nav button[aria-selected=true]{color:var(--green-700);border-bottom-color:var(--green-600)}
.tabs__panel{padding:18px 0;line-height:1.7}
.tabs__panel[hidden]{display:none}

/* Key facts sit right under the name: what a buyer decides on, in one line. */
.keyfacts{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 14px}
.keyfacts li{
  background:var(--green-050);border:1px solid var(--green-100);border-radius:999px;
  padding:4px 11px;font-size:.8rem;font-weight:500;color:var(--green-900);
}

/* Growing data, read as measurements instead of a list of label/value rows. */
.growfacts{padding:8px 16px 4px}
.growfacts h2{font-size:1.15rem;margin-bottom:14px}
.growfacts__grid{
  display:grid;gap:12px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.statcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:grid;gap:5px;align-content:start;
}
.statcard__label{
  font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
}
.statcard__value{font-size:1.15rem;font-weight:600;line-height:1.2;color:var(--ink)}
.statcard__meter{display:block;height:5px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.statcard__meter i{display:block;height:100%;background:var(--green-500);border-radius:999px}
.statcard__note{font-size:.74rem;color:var(--ink-3)}

.genetics{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:18px;display:grid;gap:9px;
}
.genetics__bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--paper-2)}
.genetics__part{display:block;height:100%}
.genetics__part--indica,.genetics__dot--indica{background:#2f6b45}
.genetics__part--sativa,.genetics__dot--sativa{background:#6aab5c}
.genetics__part--ruderalis,.genetics__dot--ruderalis{background:#b8a34a}
.genetics__legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:0;font-size:.82rem;color:var(--ink-2)}
.genetics__legend li{display:flex;align-items:center;gap:7px}
.genetics__dot{width:10px;height:10px;border-radius:50%;display:inline-block}

.growfacts__extra{
  display:grid;gap:10px 26px;margin:0 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.growfacts__extra dt{
  font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
}
.growfacts__extra dd{margin:2px 0 0;font-size:.95rem;color:var(--ink)}

/* Blog listing: one article leads, the rest follow in a quieter grid. */
.lead{
  display:grid;gap:0;margin:22px 0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#fff;text-decoration:none;color:inherit;
  transition:box-shadow .15s,border-color .15s;
}
.lead:hover{text-decoration:none;box-shadow:var(--shadow);border-color:#cfded4}
.lead__media{display:block;background:var(--paper-2)}
.lead__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.lead__body{display:grid;gap:8px;padding:20px 22px;align-content:center}
.lead__meta{
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green-700);
}
.lead__title{font-size:1.4rem;font-weight:600;line-height:1.25;color:var(--ink);text-wrap:balance}
.lead__text{color:var(--ink-2);font-size:.95rem;line-height:1.6}
.lead__more{font-size:.9rem;font-weight:600;color:var(--green-700)}
@media (min-width:760px){
  .lead{grid-template-columns:1.05fr .95fr;align-items:stretch}
  .lead__media img{height:100%}
}

.postgrid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:600px){.postgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.postgrid{grid-template-columns:repeat(3,1fr)}}
.post{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s;
}
.post:hover{box-shadow:var(--shadow);border-color:#cfded4}
.post__media{display:block;background:var(--paper-2);aspect-ratio:16/9}
.post__media img{width:100%;height:100%;object-fit:cover}
.post__body{padding:14px 16px 16px;display:grid;gap:6px;align-content:start}
.post__meta{font-size:.74rem;color:var(--ink-3);font-weight:500}
.post__title{font-size:1rem;line-height:1.3;margin:0;font-weight:600}
.post__title a{color:var(--ink)}
.post__text{font-size:.87rem;color:var(--ink-2);margin:0;line-height:1.55}

/* An article reads better with room and a measured line. */
.article{padding-top:26px;padding-bottom:8px}
.article__meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  font-size:.83rem;color:var(--ink-3);margin:-.3em 0 18px;
}
.article__hero{border-radius:var(--radius);overflow:hidden;margin:0 0 22px;border:1px solid var(--line)}
.article__hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article .prose{font-size:1.03rem;line-height:1.78}
.article .prose h2{font-size:1.3rem;margin-top:1.7em}
.article__more{border-top:1px solid var(--line);margin-top:32px;padding-top:22px}

/* ---------------------------------------------------------------- prose */
.prose{max-width:70ch;line-height:1.75}
.prose h2{margin-top:1.6em;font-size:1.25rem}
.prose h3{margin-top:1.4em}
.prose img{border-radius:var(--radius);margin:1.2em 0}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin-bottom:.4em}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.prose blockquote{margin:1.4em 0;padding:12px 18px;background:var(--green-050);border-left:3px solid var(--green-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0}

/* ----------------------------------------------------------------- cart */
.cart{display:grid;gap:20px;padding:24px 0}
.cart-line{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.cart-line img{width:76px;height:76px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line)}
.cart-line__name{font-weight:600;font-size:.95rem;margin:0 0 4px}
.cart-line__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.cart-line__free{background:var(--green-100);color:var(--green-900);border-radius:999px;padding:2px 9px;font-size:.76rem;font-weight:600}
.cart-line input[type=number]{width:60px;height:38px;border:1px solid var(--line);border-radius:var(--radius-sm);text-align:center;font:inherit}
.cart-line__remove{background:none;border:0;color:var(--ink-3);font-size:.82rem;cursor:pointer;text-decoration:underline;padding:0}

.totals{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.totals dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;margin:0 0 14px}
.totals dt{color:var(--ink-2);font-size:.92rem}
.totals dd{margin:0;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.totals .is-total{font-size:1.15rem;font-weight:700;border-top:1px solid var(--line);padding-top:10px}
.totals .is-total dt{font-weight:700;color:var(--ink)}
.totals .is-discount dd{color:var(--green-700)}

.progress{margin:12px 0 4px}
.progress__bar{height:6px;background:var(--line);border-radius:999px;overflow:hidden}
.progress__fill{height:100%;background:var(--green-500);border-radius:999px;transition:width .3s}
.progress__label{font-size:.82rem;color:var(--ink-2);margin-top:6px}

.coupon{display:flex;gap:8px;margin-top:10px}
.coupon input{flex:1;height:42px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 12px;font:inherit}

/* ------------------------------------------------------------- checkout */
.steps{
  display:flex;gap:8px;list-style:none;padding:18px 0 0;margin:0 0 6px;
  font-size:.8rem;color:var(--ink-3);flex-wrap:wrap;
}
.steps li{display:flex;align-items:center;gap:8px}
.steps li+li::before{content:"›";color:var(--line)}
.steps__done a{color:var(--green-700);font-weight:500}
.steps__now{color:var(--ink);font-weight:600}

/* On a phone the order lives at the top, folded. On desktop the column on
   the right already shows it, so this block steps aside. */
.ordersheet{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);
  margin:10px 0 14px;
}
.ordersheet summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;cursor:pointer;font-size:.95rem;list-style:none;
}
.ordersheet summary::-webkit-details-marker{display:none}
.ordersheet summary::after{content:"▾";color:var(--ink-3);font-size:.8rem;margin-left:2px}
.ordersheet[open] summary::after{content:"▴"}
.ordersheet summary strong{white-space:nowrap}
.ordersheet__body{padding:0 16px 14px;display:grid;gap:7px}
.ordersheet__line{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;color:var(--ink-2)}
.ordersheet__line strong{white-space:nowrap;color:var(--ink);font-weight:500}

.promise{
  background:var(--green-050);border:1px solid var(--green-100);border-radius:var(--radius-sm);
  padding:11px 14px;font-size:.9rem;color:var(--green-900);margin:0 0 4px;
}

.pay-option{gap:12px}
.pay-option__mark{
  flex:none;width:42px;height:30px;border-radius:6px;
  display:grid;place-content:center;font-size:.78rem;font-weight:700;letter-spacing:-.01em;
  background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line);
}
.pay-option__mark--ideal{background:#cc0066;border-color:#cc0066;color:#fff}
.pay-option__mark--bancontact{background:#1e3a8a;border-color:#1e3a8a;color:#fff}
.pay-option__text{display:grid;gap:1px}
.pay-option__text small{color:var(--ink-3);font-size:.8rem}

.assurance{
  list-style:none;padding:0;margin:16px 0 0;display:grid;gap:7px;
  font-size:.85rem;color:var(--ink-2);
}
.assurance li{display:flex;gap:9px;align-items:flex-start}
.assurance li::before{
  content:"";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;
  background:var(--green-100);
  box-shadow:inset 0 0 0 2px var(--green-500);
}

.checkout{display:grid;gap:22px;padding:14px 0 24px}
.checkout .totals dd,.checkout .totals dt{white-space:nowrap}
.checkout .totals dt{white-space:normal}
.field{margin-bottom:14px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;min-height:46px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px;font:inherit;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px var(--green-100)}
.field--half{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.field small{color:var(--ink-3);font-size:.8rem}
.field--error input{border-color:var(--red)}
.field__error{color:var(--red);font-size:.82rem;margin-top:4px}
.pay-option{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 14px;margin-bottom:8px;cursor:pointer}
.pay-option:has(input:checked){border-color:var(--green-500);background:var(--green-050)}

/* --------------------------------------------------------------- banner */
.banner{position:relative;border-radius:var(--radius);overflow:hidden;margin:20px 0;display:grid;min-height:150px;border:1px solid var(--line)}
.banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner__inner{position:relative;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:8px;max-width:34rem}
.banner h2{margin:0;font-size:1.3rem}
.banner p{margin:0;font-size:.95rem}
.banner .btn{align-self:flex-start;margin-top:6px}
.banner--leaf{background:linear-gradient(120deg,var(--green-100),#fff)}
.banner--leaf h2{color:var(--green-900)}
.banner--soil{background:linear-gradient(120deg,#f3ece1,#fff)}
.banner--night{background:linear-gradient(120deg,var(--green-900),#20402d);color:#eaf3ed}
.banner--night h2{color:#fff}
.banner--night .btn--primary{background:var(--green-500)}
.banner--sun{background:linear-gradient(120deg,#fdf1dc,#fff)}
.banner--has-img .banner__inner{background:linear-gradient(90deg,rgba(255,255,255,.96) 40%,rgba(255,255,255,.55))}
.banner--night.banner--has-img .banner__inner{background:linear-gradient(90deg,rgba(18,48,31,.94) 40%,rgba(18,48,31,.55))}

/* On a phone the buy button scrolls away, so it comes back as a bar above
   the bottom navigation once the original is out of view. */
.buybar{
  position:fixed;left:0;right:0;bottom:64px;z-index:45;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -6px 18px -12px rgba(18,48,31,.45);
  padding:9px 0 calc(9px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .18s ease;
}
.buybar[hidden]{display:block;visibility:hidden}
.buybar--show{transform:translateY(0);visibility:visible}
.buybar__inner{display:flex;align-items:center;gap:12px}
.buybar__info{display:grid;min-width:0;flex:1}
.buybar__name{
  font-size:.86rem;font-weight:600;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.buybar__price{font-size:.78rem;color:var(--ink-3)}
.buybar .btn{flex:none}
@media (min-width:900px){.buybar{display:none}}

/* ------------------------------------------------------------ pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin:28px 0;flex-wrap:wrap}
.pagination a,.pagination span{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.9rem;color:var(--ink-2);padding:0 10px}
.pagination .is-current{background:var(--green-600);border-color:var(--green-600);color:#fff;font-weight:600}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--green-900);color:#c9dcd1;margin-top:40px;padding:36px 0 24px;font-size:.9rem}
.site-footer h2{color:#fff;font-size:1.1rem}
.site-footer h3{color:#fff;font-size:.95rem;margin-bottom:.7em}
.site-footer a{color:#c9dcd1}
.site-footer a:hover{color:#fff}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.site-footer__grid{display:grid;gap:28px}
.footer-cities{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.site-footer__legal{margin:26px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;color:#8fab9c}
.pay-methods{margin-top:12px;font-size:.8rem;color:#8fab9c}
.newsletter{margin-top:16px}
.newsletter label{display:block;font-size:.85rem;margin-bottom:7px}
.newsletter__row{display:flex;gap:8px}
.newsletter input{flex:1;min-width:0;height:42px;border:0;border-radius:var(--radius-sm);padding:0 12px;font:inherit}
/* Het opschrift blijft op één regel. In het Nederlands is dat "Aanmelden" —
   één woord, dus dat viel nooit op. In het Engels staat er "Sign up" en die
   knapte doormidden. */
.newsletter button{height:42px;padding:0 16px;border:0;border-radius:var(--radius-sm);background:var(--green-500);color:#fff;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;flex:none}

/* A question is worth more than a lost sale. Sits clear of the bottom bar. */
.whatsapp{
  position:fixed;right:14px;bottom:76px;z-index:46;
  display:inline-flex;align-items:center;gap:8px;
  background:#25d366;color:#fff;border-radius:999px;
  /* Even hoog als een aanraakvlak hoort te zijn: op een telefoon is dit een
     rond knopje van 44 bij 44, op een breed scherm groeit er tekst naast. */
  padding:12px 15px;min-width:44px;min-height:44px;justify-content:center;
  font-size:.85rem;font-weight:600;
  box-shadow:0 10px 24px -10px rgba(18,48,31,.6);
  text-decoration:none;
}
/* Zodra de koopbalk omhoog komt, wijkt deze knop. Stond hij blijven staan,
   dan lag hij precies op "In winkelwagen" — en dan koopt niemand meer iets. */
body:has(.buybar--show) .whatsapp{bottom:132px}
.whatsapp:hover{background:#1fb457;text-decoration:none;color:#fff}
.whatsapp svg{width:20px;height:20px;flex:none}
.whatsapp span{display:none}
@media (min-width:900px){
  .whatsapp{bottom:22px;padding:11px 17px}
  .whatsapp span{display:inline}
}

.site-footer__shop{margin:22px 0 0;font-size:.85rem;color:#a8c4b4}
.site-footer__shop a{text-decoration:underline}

/* ------------------------------------------------------------ bottom bar */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:50;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}
.bottom-bar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;color:var(--ink-3);font-size:.68rem;font-weight:500;position:relative}
.bottom-bar a:hover,.bottom-bar a.is-active{color:var(--green-700);text-decoration:none}
.bottom-bar svg{width:21px;height:21px}
.bottom-bar__cart em{position:absolute;top:3px;right:calc(50% - 20px);background:var(--green-600);color:#fff;font-style:normal;font-size:.62rem;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 4px}

/* Confirmation of an add-to-cart. Sits above the bottom bar on phones. */
.toast{
  position:fixed;left:50%;bottom:80px;z-index:70;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  background:var(--green-900);color:#eaf3ed;
  padding:11px 18px;border-radius:999px;font-size:.88rem;font-weight:500;
  box-shadow:0 14px 30px -12px rgba(18,48,31,.65);
  max-width:min(92vw,420px);text-align:center;
  transition:opacity .18s ease,transform .18s ease;
}
.toast--on{opacity:1;transform:translate(-50%,0)}
@media (min-width:900px){.toast{bottom:24px}}

/* ---------------------------------------------------------------- notice */
.notice{border-radius:var(--radius-sm);padding:12px 14px;margin:14px 0;font-size:.92rem}

.empty{text-align:center;padding:48px 16px;color:var(--ink-3)}
.empty h1{color:var(--ink)}

/* --------------------------------------------------------- larger screens */
@media (min-width:600px){
  .grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .hide-sm{display:inline}
  h1{font-size:2rem}
  .hero h1{font-size:2.3rem}
  .field--half{grid-template-columns:1fr 1fr}
}

@media (min-width:900px){
  body{padding-bottom:0}
  .bottom-bar{display:none}
  .menu-toggle{display:none}
  .main-nav{display:flex;flex:0 0 auto}
  /* Krimpt mee als het menu de ruimte nodig heeft, tot een breedte waarop je
     nog steeds een soortnaam kunt typen. */
  .search{display:block;flex:0 1 230px;min-width:120px}
  .grid{grid-template-columns:repeat(4,1fr)}
  .shop-layout{grid-template-columns:250px minmax(0,1fr);gap:28px;align-items:start}
  /* Products come first in the source for phones; on desktop the filter
     column moves back to the left. */
  .filters{position:sticky;top:calc(var(--header-h) + 12px);order:-1}
  .filters-open,.filters-close{display:none}
  .product{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;padding:32px 0}
  .cart{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .checkout{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  /* The right-hand column already carries the order on desktop. */
  .ordersheet{display:none}
  .site-footer__grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
  .hero__inner{grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;padding:48px 0 52px}
  .banner{min-height:190px}
  .banner h2{font-size:1.6rem}
}

@media (min-width:1100px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .section{padding:48px 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --------------------------------------------------------------- packs */
/* Pack sizes sit right above the buy button: the choice a visitor makes
   before quantity, and the reason the price on screen changes. */
.packs{border:0;margin:16px 0 0;padding:0;display:grid;gap:8px}
.packs legend{font-size:.82rem;color:var(--ink-3);padding:0;margin-bottom:6px}
.pack{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius);
      padding:10px 13px;cursor:pointer;transition:border-color .12s,background .12s}
.pack:hover{border-color:var(--ink-3)}
.pack:has(input:checked){border-color:var(--green-600);background:var(--green-050);box-shadow:inset 0 0 0 1px var(--green-600)}
.pack input{accent-color:var(--green-600);margin:0}
.pack__label{font-weight:600;flex:1}
.pack__price{text-align:right;white-space:nowrap}
.pack__price small{display:block;color:var(--ink-3);font-size:.78rem;font-weight:400}
.pack--out{opacity:.5;cursor:not-allowed}
.price--tbd{font-size:1rem;color:var(--ink-3);font-weight:500}
.price__note{color:var(--ink-3);font-size:.88rem;margin:0}

.notice{background:#fff8e6;border:1px solid #f0dca8;border-radius:var(--radius);padding:11px 13px;font-size:.9rem}
/* De varianten staan hier, ná de amberkleurige basis: anders won de basis en
   werd een geslaagde melding geel in plaats van groen. */
.notice--ok{background:var(--green-100);border-color:#bfe3cc;color:var(--green-900)}
.notice--warn{background:#fdf4e3;border-color:#f0dca8;color:#7a5310}
.notice--error{background:#fdecea;border-color:#f3c9c4;color:#8f2b22}
.cart-line__pack{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--green-050);color:var(--green-700);font-size:.76rem;font-weight:600}

/* -------------------------------------------------------------- brands */
.brands{display:grid;gap:14px;margin:20px 0 40px}
@media (min-width:700px){.brands{grid-template-columns:repeat(3,1fr)}}
.brand-card{display:block;padding:20px;border:1px solid var(--line);border-radius:var(--radius);
            background:var(--paper);color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.brand-card:hover{text-decoration:none;border-color:var(--green-500);box-shadow:var(--shadow)}
.brand-card__name{font-size:1.15rem;margin:0 0 .4em}
.brand-card__blurb{color:var(--ink-2);font-size:.92rem;margin:0 0 .8em}
.brand-card__meta{color:var(--ink-3);font-size:.84rem;margin:0}
/* The brand entry in the header opens a small list of the brands we carry. */
.nav-item{position:relative}
.nav-item__panel{position:absolute;top:100%;left:-12px;min-width:220px;padding:8px;margin-top:4px;
                 background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
                 box-shadow:var(--shadow-lg);display:none;z-index:50}
.nav-item:hover .nav-item__panel,.nav-item:focus-within .nav-item__panel{display:block}
.nav-item__panel a{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--ink)}
.nav-item__panel a:hover{background:var(--green-050);text-decoration:none}
.nav-item__panel span{color:var(--ink-3);font-size:.82rem}
.mobile-menu__sub{padding-left:20px !important;font-size:.95rem !important;color:var(--ink-2) !important}
.pack__bonus{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--green-600);color:#fff;font-size:.72rem;font-weight:600}

/* ---------------------------------------------------------------- account --
   Mijn account: inloggen, bestellingen, gegevens. Mobile first, zoals de rest;
   de zijnavigatie wordt pas op tablet een kolom. */

.account{max-width:960px;padding-top:8px}
.account--narrow{max-width:520px}
.account h1{margin:0 0 16px}

.account__layout{display:grid;gap:18px}
@media (min-width:760px){
  .account__layout{grid-template-columns:200px 1fr;align-items:start}
}

.account__nav{display:flex;flex-wrap:wrap;gap:6px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:8px}
@media (min-width:760px){.account__nav{flex-direction:column;position:sticky;top:calc(var(--header-h) + 12px)}}

.account__nav-item{display:block;padding:9px 12px;border-radius:var(--radius-sm);
  color:var(--ink-2);text-decoration:none;font-size:15px;line-height:1.2}
.account__nav-item:hover{background:var(--green-050);color:var(--green-700)}
.account__nav-item.is-here{background:var(--green-100);color:var(--green-900);font-weight:600}
.account__nav-item--quiet{width:100%;text-align:left;background:none;border:0;
  cursor:pointer;color:var(--ink-3);font:inherit;font-size:15px}
.account__nav-item--quiet:hover{color:var(--red);background:var(--paper-2)}
.account__logout{margin:0;width:100%}

.account__body{display:grid;gap:18px;min-width:0}
.account__split{display:grid;gap:18px}
@media (min-width:760px){.account__split{grid-template-columns:1fr 1fr;align-items:start}}

.account .card{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.account .card h2{margin:0 0 14px;font-size:18px}
.account .card .btn--block{width:100%}

.account__aside{margin:12px 0 0;font-size:14px}
.account__note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-3);line-height:1.5}
.account__empty{color:var(--ink-2);margin:0 0 12px}
.account__address{margin:0 0 12px;line-height:1.6}

.account__table{width:100%;border-collapse:collapse;font-size:15px}
.account__table th{text-align:left;font-size:12px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
  padding:0 8px 8px 0;border-bottom:2px solid var(--line)}
.account__table td{padding:10px 8px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.account__table tr:last-child td{border-bottom:0}
.account__table small{color:var(--ink-3)}
.account__table .ta-right,.ta-right{text-align:right}
.account__table .ok,.account .ok{color:var(--green-700)}

/* Status als één woord, in de kleur die erbij hoort. */
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;
  font-weight:600;white-space:nowrap;background:var(--paper-2);color:var(--ink-2)}
.pill--pending{background:#fdf6e9;color:var(--amber)}
.pill--paid,.pill--processing{background:var(--green-100);color:var(--green-700)}
.pill--shipped{background:#e8f1fb;color:#1f5f9e}
.pill--completed{background:var(--green-100);color:var(--green-900)}
.pill--cancelled,.pill--failed{background:#fbeae8;color:var(--red)}

/* Waar de bestelling staat: vier stappen, de bereikte groen. */
.track{display:flex;list-style:none;margin:0 0 16px;padding:0;gap:4px;counter-reset:step}
.track li{flex:1;position:relative;padding-top:24px;text-align:center;
  font-size:12px;color:var(--ink-3);line-height:1.3}
.track li::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:var(--line);z-index:1}
.track li::after{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line)}
.track li:first-child::after{display:none}
.track__done{color:var(--green-700);font-weight:600}
.track__done::before{background:var(--green-500)}
.track__done::after{background:var(--green-500)}
.track__now::before{box-shadow:0 0 0 4px var(--green-100)}

.account-btn{position:relative}
.account-btn__dot{position:absolute;top:6px;right:6px;width:7px;height:7px;
  border-radius:50%;background:var(--green-500);border:1.5px solid var(--paper)}

.check{display:flex;gap:9px;align-items:flex-start;margin:0 0 16px;
  font-size:14px;color:var(--ink-2);line-height:1.45;cursor:pointer}
.check input{margin-top:2px;flex:0 0 auto}

/* Tekeningen in artikelen: eigen beeld in plaats van geleende foto's. */
.artikelbeeld{margin:26px 0;padding:0}
.artikelbeeld img{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper)}
.artikelbeeld figcaption{margin-top:8px;font-size:.86rem;color:var(--ink-3);line-height:1.5}

/* ---------------------------------------------------------------- cookies -- */
.cookiebar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  background: #fff;
  border: 1px solid #d8e2da;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(10, 30, 18, .18);
  padding: 16px 18px;
  transform: translateY(140%);
  transition: transform .2s ease;
}
.cookiebar.is-open { transform: none; }
.cookiebar__in {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}
.cookiebar p { margin: 4px 0 0; color: #4a5a4f; font-size: 14px; max-width: 70ch; }
.cookiebar__btns { display: flex; gap: 10px; flex-wrap: wrap; }
/* Beide knoppen even groot: weigeren mag niet moeilijker zijn dan toestaan. */
.cookiebar__btns .btn { min-height: 44px; min-width: 160px; justify-content: center; }

/* Op een telefoon staat de snelbalk onderaan; de melding moet daarboven blijven. */
@media (max-width: 720px) {
  .cookiebar { bottom: 72px; }
  .cookiebar__in { align-items: stretch; }
  /* Onder elkaar, elk over de volle breedte. Naast elkaar hielden ze op een
     telefoon zo'n 170 pixels over en dan knapt "Alleen noodzakelijk"
     doormidden — de knop die weigert, uitgerekend. Ze blijven even groot. */
  .cookiebar__btns { flex-direction: column; }
  .cookiebar__btns .btn { flex: none; width: 100%; min-width: 0; white-space: nowrap; }
}

/* ------------------------------------------------------------ verlanglijst -- */
.card__wish { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.wish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 pixels, want dit is een duimdoel — zelfde regel als de winkelwagenknop. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  color: #7a8a7f;
  cursor: pointer;
  transition: color .15s, border-color .15s, transform .1s;
}
.wish svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wish:hover { color: var(--green-600); border-color: var(--green-500); }
.wish:active { transform: scale(.94); }
.wish.is-on { color: #c2392f; border-color: #e7b6b1; }
.wish.is-on svg { fill: currentColor; stroke: currentColor; }

@media (hover: none) {
  .wish { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------ taalkeuze -- */
.langswitch { position: relative; }
.langswitch__btn { font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.langswitch__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(10, 30, 18, .12);
  padding: 6px;
  display: none;
  z-index: 40;
}
.langswitch.is-open .langswitch__panel { display: block; }
.langswitch__panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  /* 44 pixels hoog genoeg om met een duim te raken. */
  min-height: 44px;
  line-height: 24px;
}
.langswitch__panel a:hover { background: #f2f9f4; }
.langswitch__panel a.is-active { font-weight: 600; color: var(--green-700); }

/* Op een telefoon past de balk niet met alles erin: de taalkeuze en de
   verlanglijst staan daar in het menu, precies zoals het account dat al deed. */
@media (max-width: 640px) {
  .langswitch,
  .wish-btn { display: none; }
}

/* ------------------------------------------------------------ contactform */
/* Het formulier onder de tekst van /contact/. Leunt op .field uit het
   afrekenscherm, zodat een invoerveld overal hetzelfde aanvoelt. */
.contactform { margin: 8px auto 40px; max-width: 760px; }
.contactform h2 { margin: 0 0 14px; }
.contactform__form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.contactform__klein { margin: 12px 0 0; font-size: .82rem; color: var(--ink-3); }

/* Het lokvakje: weg voor een mens, aanwezig voor een robot. display:none zou
   sommige invulrobots juist doen overslaan, vandaar buiten beeld. */
.contactform__vangst {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .contactform__form { padding: 16px; }
}

/* --------------------------------------------------------------- gesprek */
/* Vraag en antwoord op de accountpagina. De winkel staat links met een groene
   rand, de klant rechts met een grijze — zodat je in één blik ziet wie wat
   zei, ook zonder de namen te lezen. */
.gesprek h2 { margin: 0 0 12px; font-size: 1.05rem; }
.gesprek h2 small { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-3); }
.gesprek__regel { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin: 0 0 14px; }
.gesprek__regel--winkel { border-left-color: var(--green-500); }
.gesprek__wie { margin: 0 0 4px; font-size: .82rem; color: var(--ink-3); }
.gesprek__wie strong { color: var(--ink); }
.gesprek__wie span { margin-left: 8px; }
.gesprek__tekst { margin: 0; }
.gesprek__antwoord { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- reviews */
/* Het blok met winkelrecensies. Het widget zelf komt van Trustindex en brengt
   zijn eigen opmaak mee; dit is alleen de omlijsting eromheen. */
.reviews__uitleg { margin: -6px 0 16px; color: var(--ink-3); font-size: .9rem; }
.reviews .ti-widget { margin-top: 4px; }