/* =========================================================================
   Pepsup storefront - warm, friendly e-commerce design system.
   Restyles the existing markup + JS-rendered components. No web fonts loaded
   here (the <link> in index.html loads Plus Jakarta Sans); everything else
   is token-driven so the whole shop stays consistent.
   ========================================================================= */
:root{color-scheme:light;
  --paper:#ffffff; --bg:#f6f2ea; --bg-2:#efe9dd;
  --ink:#23241f; --ink-2:#6a6b62; --ink-3:#6e6f68;
  --line:#e7e1d4; --line-2:#efeae0;
  --accent:#0f7a5f; --accent-d:#0a5e49; --accent-soft:#e7f1ec;
  --green:#0f7a5f; --green-d:#0a5e49; --green-soft:#e7f1ec;
  --clay:#c2693f; --clay-soft:#f6e9df; --sand:#efe7d8; --honey:#e7b14a;
  --warn-bg:#f6e9df; --warn-line:#ead9b6; --warn-ink:#a15a2f;
  --radius:16px; --radius-sm:12px;
  --shadow:0 6px 22px -12px rgba(40,35,20,.28);
  --shadow-lg:0 18px 50px -20px rgba(40,35,20,.34);
  --shadow-sm:0 2px 10px -6px rgba(40,35,20,.22);
  --wrap:1180px;
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6;font-size:16px;overflow-x:clip;max-width:100%;overflow-wrap:break-word;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select{font-family:inherit;font-size:15px;color:var(--ink);}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.12;}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--green-d);}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap;transition:background .15s,box-shadow .15s,transform .12s,color .15s;}
.btn:active{transform:translateY(1px);}
.btn--primary,.btn--accent,.btn--green{background:var(--green);color:#fff;}
.btn--primary:hover,.btn--accent:hover,.btn--green:hover{background:var(--green-d);}
.btn--dark{background:var(--ink);color:#fff;}
.btn--dark:hover{background:#000;}
.btn--light{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);}
.btn--light:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3);}
.btn--linelight{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);}
.btn--linelight:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3);}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink-3);}
.btn--pay{width:100%;background:var(--green);color:#fff;padding:16px;font-size:16px;}
.btn--pay:hover{background:var(--green-d);}
.btn--block{width:100%;}
.link{background:none;color:var(--green-d);font-weight:700;text-decoration:underline;padding:0;}

/* pills / badges */
.pill,.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;}
.pill--green{background:var(--green-soft);color:var(--green-d);}
.pill--clay{background:var(--clay-soft);color:var(--clay);}
.pill--out{background:#fff;border:1px solid var(--line);color:var(--ink-2);}

/* ---------------- announce ---------------- */
/* One weight and one colour for the whole bar. #shipNote used to be 600/#fff
   while its neighbours were 500/#eaf3ee, which read as a mistake rather than
   emphasis once the bar was down to two items. */
.announce{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:var(--green-d);color:#fff;font-size:13.5px;font-weight:600;padding:9px 16px;}
.announce b{color:#fff;font-weight:700;}
.announce__sep{color:#5f9784;}


/* ---------------- header ---------------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(246,242,234,.86);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line);}
.hdr__in{display:flex;align-items:center;gap:20px;height:74px;}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.brand__logo svg{border-radius:11px;}
.brand__txt{display:flex;flex-direction:column;line-height:1.15;}
.brand__txt strong{font-size:19px;font-weight:800;letter-spacing:-.03em;}
.brand__txt small{font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;margin-top:3px;}
.hdr__search{flex:1;max-width:420px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 16px;color:var(--ink-3);box-shadow:var(--shadow-sm);position:relative;}
.hdr__search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft);}
.hdr__search input{flex:1;border:none;background:none;outline:none;padding:12px 0;font-size:14.5px;color:var(--ink);}
/* Same white circle as the server-rendered pages, so the control does not
   change shape or colour when a shopper clicks through to a product. */
.cartbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:50%;background:#fff;border:1px solid #e7e1d4;color:#6a6b62;flex-shrink:0;transition:border-color .15s,color .15s;}
.cartbtn:hover{border-color:#0f7a5f;color:#0a5e49;}
.cartbtn.pulse{animation:pulse .4s ease;}
@keyframes pulse{0%{transform:scale(1);}40%{transform:scale(1.09);}100%{transform:scale(1);}}
.cartbtn__count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#0f7a5f;color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;}

/* category nav */
.catnav{display:flex;gap:9px;overflow-x:auto;padding:6px 24px 14px;max-width:var(--wrap);margin:0 auto;scrollbar-width:none;cursor:grab;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;user-select:none;-webkit-user-select:none;}
.catnav::-webkit-scrollbar{display:none;}
.catnav.dragging{cursor:grabbing;scroll-behavior:auto;}
.catnav.dragging .chip{pointer-events:none;}
/* Edge fade hints that there are more tabs to drag/scroll to. */
.catnav.has-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);}
.catnav.has-left:not(.has-right){-webkit-mask-image:linear-gradient(90deg,transparent,#000 46px);mask-image:linear-gradient(90deg,transparent,#000 46px);}
.catnav.has-left.has-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(90deg,transparent,#000 46px,#000 calc(100% - 46px),transparent);}
.chip{flex-shrink:0;padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);transition:all .15s;}
.chip:hover{border-color:var(--green);color:var(--green-d);}
.chip--on{background:var(--green);border-color:var(--green);color:#fff;}

/* ---------------- hero ---------------- */
.hero{padding:26px 0 6px;}
.hero__card{background:var(--surface,#fff);border:1px solid var(--line);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;box-shadow:var(--shadow);}
.hero__copy{padding:52px 48px;}
.hero__copy h1{font-size:clamp(32px,4.4vw,50px);font-weight:800;margin:15px 0 16px;letter-spacing:-.03em;}
.hero__copy h1 em{font-style:normal;color:var(--green-d);}
.hero__sub{font-size:17.5px;line-height:1.6;color:var(--ink-2);max-width:42ch;margin:0 0 26px;}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;}
.hero__rate{display:block;margin-bottom:2px;min-height:20px;}
.hero__chips{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;}
.hero__chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);}
.hero__chip svg{color:var(--green);flex:none;}
.hero__pay{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px;min-height:24px;}
.hero__paylbl{font-size:12px;color:var(--ink-3);margin-right:2px;font-weight:600;}
.hero__media{position:relative;background:linear-gradient(160deg,var(--green-soft),var(--sand));display:grid;place-items:center;padding:34px;}
.showcase__card{position:relative;z-index:2;width:100%;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);}
.showcase__media{position:relative;aspect-ratio:1/.9;background:linear-gradient(160deg,#fff,#f4efe6);display:grid;place-items:center;padding:18px;}
.showcase__media svg{width:52%;}
.showcase__save{position:absolute;top:14px;left:14px;background:var(--green);color:#fff;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;}
.showcase__body{padding:16px 18px 18px;}
.showcase__tag{font-size:12px;font-weight:700;color:var(--green-d);}
.showcase__body h3{margin:6px 0 10px;font-size:19px;}
.showcase__media{cursor:pointer;}
.showcase__body h3 a:hover,.kit__name a:hover{color:var(--green-d);}
.showcase__buy{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.showcase__price{display:flex;align-items:baseline;gap:8px;}
.showcase__price b{font-size:22px;font-weight:800;}
.showcase__price s{font-size:14px;color:var(--ink-3);}
.showcase__glow,.showcase__badge,.showcase__accent{display:none;}

/* ---------------- trust bar ---------------- */

/* ---------------- sections ---------------- */
.rail-sec,.bundles,.shop,.howsec,.newssec{padding:52px 0;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;}
.sec-head h2{font-size:clamp(24px,3vw,33px);}
.sec-head p{margin:8px 0 0;color:var(--ink-2);font-size:15px;}
.sec-head__link{font-size:14.5px;font-weight:700;color:var(--green-d);white-space:nowrap;}
.sec-head__link:hover{color:var(--green);}

/* ---------------- product grid + cards ---------------- */
.rail,.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
/* Same stretched-link trick as the server-rendered .pc card: the overlay on the
   product name makes the entire card clickable, while the size <select> and the
   add button stay above it and keep working. */
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;}
.card__name a::after{content:'';position:absolute;inset:0;z-index:1;}
.card__size,.addbtn{position:relative;z-index:2;}
.card:focus-within{box-shadow:0 0 0 3px rgba(14,124,102,.25);}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2);}
.card__media,.card__imglink{position:relative;display:grid;place-items:center;}
.card__media{aspect-ratio:1/1;background:linear-gradient(160deg,color-mix(in srgb,var(--c,#0f7a5f) 13%,#fff),#f4efe6);}
.card__imglink{width:100%;height:100%;padding:14%;}
.card__imglink svg,.card__imglink img{width:100%;height:100%;object-fit:contain;}
/* Real product photos fill their box edge-to-edge; the SVG art keeps its padding. */
.card__imglink .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.kit__media .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.showcase__media .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.line__img .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.line__img{position:relative;}
.sresult__img .pimg{width:100%;height:100%;object-fit:cover;border-radius:8px;}
.card__cat{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);}
/* Media chips: clean solid-white pills that read cleanly on any photo or tint. */
.card__star,.card__badge{position:absolute;top:11px;left:11px;font-size:11px;font-weight:800;background:#fff;color:var(--green-d);padding:5px 11px;border-radius:999px;box-shadow:var(--shadow-sm);}
.card__fav{position:absolute;top:11px;right:11px;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.82);display:grid;place-items:center;color:var(--ink-2);transition:color .15s,background .15s;}
.card__fav:hover{color:var(--clay);background:#fff;}
.avail{position:absolute;left:11px;bottom:11px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;background:#fff;padding:5px 11px;border-radius:999px;box-shadow:var(--shadow-sm);}
.avail::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.avail--in{color:var(--green-d);} .avail--made{color:#b26a00;} .avail--oos{color:var(--clay);} .avail--low{color:var(--green-d);}
.avail--hide{display:none;}
.card__body,.card__b{padding:15px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1;}
.card__name{font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin-top:2px;}
.card__name a:hover{color:var(--green-d);}
.card__spec{font-size:13px;color:var(--ink-2);}
/* mg size picker on multi-size product cards */
.card__size{align-self:flex-start;margin-top:4px;font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);background-color:var(--paper,#fff);border:1.5px solid var(--line,#e7e1d4);border-radius:999px;padding:7px 34px 7px 14px;cursor:pointer;font-family:inherit;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6b62' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;box-shadow:0 1px 2px rgba(40,35,20,.05);transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,transform .16s ease;}
.card__size:hover{border-color:var(--green,#0f7a5f);background-color:var(--green-soft,#e7f1ec);box-shadow:0 3px 10px -4px rgba(15,122,95,.35);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f7a5f' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}
.card__size:focus-visible{outline:none;border-color:var(--green,#0f7a5f);box-shadow:0 0 0 3px rgba(15,122,95,.16);}
.card__size:active{transform:translateY(.5px);}
.card__ship{display:none;}
.card__buy,.card__foot{margin-top:auto;padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.price b,.card__price b{font-size:19px;font-weight:800;}
.price span,.card__price span{font-size:12px;color:var(--ink-3);}
.addbtn,.card__add{width:44px;height:44px;padding:0;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;gap:0;font-size:0;line-height:0;transition:background .15s,transform .12s;flex:none;}
.addbtn:hover,.card__add:hover{background:var(--green);}
.addbtn:active,.card__add:active{transform:scale(.94);}
.addbtn svg,.card__add svg{width:18px;height:18px;display:block;}
/* Sold out is a labelled pill, not a round icon, so the text has room. */
.addbtn--off,.card__add--off{width:auto;min-width:44px;height:44px;padding:0 16px;background:var(--sand);color:var(--ink-3);cursor:not-allowed;font-size:12.5px;font-weight:700;line-height:1;}
.addbtn--off:hover,.card__add--off:hover{background:var(--sand);}

/* kits */
.kits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
/* Kits get the same whole-card link as .card and the server-rendered .pc.
   The add button is already lifted above the overlay by the shared rule. */
.kit{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .15s,box-shadow .15s;position:relative;}
.kit__name a::after{content:'';position:absolute;inset:0;z-index:1;}
.kit:focus-within{box-shadow:0 0 0 3px rgba(14,124,102,.25);}
.kit:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.kit__media{position:relative;aspect-ratio:1/.78;background:linear-gradient(160deg,color-mix(in srgb,var(--c,#0f7a5f) 12%,#fff),#f4efe6);display:grid;place-items:center;padding:0;}
.kit__media svg,.kit__media img{width:100%;}
.kit__tag{position:absolute;top:12px;left:12px;font-size:11.5px;font-weight:700;background:var(--clay-soft);color:var(--clay);padding:4px 10px;border-radius:999px;}
.kit__save{position:absolute;top:12px;right:12px;font-size:11.5px;font-weight:700;background:var(--green);color:#fff;padding:4px 10px;border-radius:999px;}
.kit__body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
/* The mg pill sits inside the <h3> after the link. Inline, that meant it sat
   beside a short name and wrapped under a long one - a different place on every
   card. Stacking the heading pins it to one spot and gives it room to breathe. */
.kit__name{font-size:16.5px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;}
.kit__incl{margin:0;padding:0;font-size:12.5px;color:var(--ink-2);line-height:1.65;}
.kit__foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.kit__price b{font-size:19px;font-weight:800;}
.kit__price s{color:var(--ink-3);font-size:13px;margin-left:6px;}

/* how it works */
.how{background:#fff;border:1px solid var(--line);border-radius:22px;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;}
.how__s{padding:28px 26px;border-right:1px solid var(--line-2);}
.how__s:last-child{border-right:none;}
.how__n{width:38px;height:38px;border-radius:999px;background:var(--green-soft);color:var(--green-d);display:grid;place-items:center;font-weight:800;margin-bottom:14px;}
.how__s h3{font-size:18px;margin-bottom:6px;}
.how__s p{margin:0;color:var(--ink-2);font-size:14.5px;}

/* shop bar */
.shop__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.shop__bar h2{font-size:clamp(24px,3vw,33px);}
.shop__tools{display:flex;align-items:center;gap:16px;}
.shop__count{font-size:13.5px;color:var(--ink-3);}
.sortlbl{font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px;font-weight:600;}
.sortlbl select{border:1px solid var(--line);border-radius:999px;padding:9px 13px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);}
.empty{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:44px;text-align:center;color:var(--ink-2);}

/* band (RUO) */
.band{padding:8px 0 40px;}
/* This is routine compliance text, not a warning. The amber alert card with a
   hazard triangle said "something is wrong", and the bold heading repeated the
   sentence underneath it word for word. A thin rule and quiet type carry more
   authority for a line every serious supplier in this field carries. */
.band__in{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding:16px 2px 0;}
.band__in p{margin:0;flex:1;min-width:min(100%,42ch);max-width:76ch;color:var(--ink-2);font-size:12.5px;line-height:1.65;}
.band__in a{color:var(--ink-3);font-size:12.5px;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
.band__in a:hover{color:var(--green-d);}

/* newsletter */
.news{background:var(--green-soft);border:1px solid #cfe6dc;border-radius:18px;padding:26px 24px;text-align:center;}
.news h2{font-size:21px;margin:0 0 2px;}
.news p{color:var(--ink-2);margin:6px auto 14px;font-size:14px;max-width:52ch;}
.news__form{display:flex;gap:10px;max-width:440px;margin:0 auto;}
.news__form input{flex:1;border:1px solid var(--line);border-radius:999px;padding:13px 18px;font-size:15px;background:#fff;}
.news__msg{margin:14px 0 0;font-weight:700;color:var(--green-d);font-size:14.5px;min-height:20px;}

/* category tiles */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cat{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;transition:transform .15s,box-shadow .15s;}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.cat__ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff;}
.cat b{display:block;font-size:15.5px;font-weight:700;}
.cat span{font-size:13px;color:var(--ink-2);}

/* faq */
.faq{max-width:760px;margin:0 auto;}
.acc{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;}
.acc summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:700;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:14px;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary .pm{color:var(--green);font-size:22px;line-height:1;flex:none;transition:transform .15s;}
.acc[open] summary .pm{transform:rotate(45deg);}
.acc__b{padding:0 20px 18px;color:var(--ink-2);}

/* ---------------- footer ---------------- */
.foot{background:#fff;border-top:1px solid var(--line);padding:54px 0 26px;margin-top:20px;}
.foot__in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;}
.foot__brand p{color:var(--ink-2);max-width:34ch;margin:14px 0 12px;font-size:14px;}
.foot .js-email{color:var(--green-d);font-weight:700;font-size:14.5px;}
.foot__col h3,.foot__col h4{font-size:12px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;}
.foot__col a{display:block;color:var(--ink-2);margin-bottom:9px;font-size:14.5px;}
.foot__col a:hover{color:var(--ink);}
.foot__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:34px;padding-top:20px;color:var(--ink-3);font-size:12.5px;}
.foot__paywrap{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.foot__lang{display:inline-flex;align-items:center;gap:7px;color:var(--ink-3);}
.foot__lang select{border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12.5px;background:#fff;color:var(--ink-2);font-weight:600;}
.paymarks{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;vertical-align:middle;}
.paymark-img{height:26px;width:auto;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:5px;padding:3px 6px;box-sizing:border-box;flex:none;}

/* ---------------- search dropdown ---------------- */
.search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:60;}
.search-results.show{display:block;}
.sresult{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;cursor:pointer;}
.sresult:hover{background:var(--bg);}
.sresult__img{width:40px;height:40px;border-radius:9px;background:var(--green-soft);display:grid;place-items:center;flex:none;overflow:hidden;}
.sresult__img svg,.sresult__img img{width:74%;}
.sresult__info{flex:1;min-width:0;}
.sresult__info strong{display:block;font-size:14px;}
.sresult__info small{color:var(--ink-3);font-size:12px;}
.sresult__price{font-weight:800;font-size:14px;}
.sresult__add{background:var(--ink);color:#fff;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;}
.sresult__add:hover{background:var(--green);}
.sresult__oos{font-size:12px;color:var(--ink-3);}
.sresult--empty{padding:14px;color:var(--ink-3);font-size:13.5px;text-align:center;}

/* ---------------- cart drawer ---------------- */
.scrim{position:fixed;inset:0;background:rgba(35,30,20,.42);opacity:0;pointer-events:none;transition:opacity .25s;z-index:70;}
.scrim.show{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:var(--bg);z-index:75;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg);}
.drawer.open{transform:translateX(0);}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);background:#fff;}
.drawer__head h3{font-size:19px;}
.drawer__x{width:38px;height:38px;border-radius:999px;background:var(--bg);display:grid;place-items:center;font-size:15px;color:var(--ink-2);}
.drawer__x:hover{background:var(--bg-2);}
.drawer__items{flex:1;overflow-y:auto;padding:16px 22px;}
.drawer__empty{text-align:center;padding:60px 20px;color:var(--ink-2);}
.drawer__emptyart{width:74px;height:74px;border-radius:999px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;margin:0 auto 16px;color:var(--ink-3);}
.line{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line-2);}
.line__img{width:60px;height:60px;border-radius:12px;background:linear-gradient(160deg,color-mix(in srgb,var(--c,#0f7a5f) 14%,#fff),#f4efe6);display:grid;place-items:center;flex:none;overflow:hidden;padding:8px;}
.line__info{flex:1;min-width:0;}
.line__info strong{display:block;font-size:14.5px;}
.line__info small{color:var(--ink-3);font-size:12px;}
.line__note{display:block;margin-top:6px;font-size:11.5px;line-height:1.45;color:#b26a00;background:#fdf6e7;border:1px solid #f3e3bd;border-radius:8px;padding:5px 8px;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;margin-top:8px;background:#fff;}
.qty__b{width:30px;height:30px;display:grid;place-items:center;color:var(--ink-2);font-size:15px;}
.qty__b:hover{color:var(--ink);}
.qty__n{width:30px;text-align:center;font-weight:700;font-size:13.5px;}
.line__right{text-align:right;display:flex;flex-direction:column;justify-content:space-between;}
.line__price{font-weight:800;}
.line__rm{font-size:12px;color:var(--ink-3);text-decoration:underline;}
.line__rm:hover{color:var(--clay);}
.drawer__foot{padding:18px 22px 22px;border-top:1px solid var(--line);background:#fff;}
.freebar{background:var(--green-soft);border-radius:12px;padding:11px 14px;font-size:13px;color:var(--green-d);margin-bottom:14px;}
.freebar b{font-weight:800;}
.freebar__track{height:6px;background:#cfe6dc;border-radius:999px;margin-top:8px;overflow:hidden;}
.freebar__fill{height:100%;background:var(--green);border-radius:999px;}
.drawer__row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;color:var(--ink-2);}
.drawer__row--muted{color:var(--ink-3);font-size:13px;}
.drawer__row--total{font-size:18px;font-weight:800;color:var(--ink);border-top:1px solid var(--line-2);margin-top:6px;padding-top:10px;}
.drawer__foot .btn{margin-top:14px;}
.drawer__ruo{text-align:center;font-size:12px;color:var(--ink-3);margin:12px 0 0;}

/* ---------------- checkout modal ---------------- */
.checkout{position:fixed;inset:0;z-index:78;display:none;overflow-y:auto;padding:28px 16px;}
.checkout.show{display:block;}
.co{max-width:920px;margin:0 auto;background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);position:relative;}
.co__x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:999px;background:var(--bg);display:grid;place-items:center;color:var(--ink-2);z-index:2;}
.co__grid{display:grid;grid-template-columns:.85fr 1.15fr;}
/* min-width:0 stops long content (prices, translated labels) from blowing the
   fr tracks past the card and getting clipped at the modal edge. */
.co__grid>*{min-width:0;}
.co__summary{background:var(--bg);padding:30px;border-right:1px solid var(--line);}
.co__summary h3{font-size:16px;margin-bottom:16px;}
.co__lines{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.co-line{display:flex;gap:10px;font-size:13.5px;}
.co-line__q{color:var(--ink-3);font-weight:700;}
.co-line__n{flex:1;min-width:0;}
.co-line__n small{display:block;color:var(--ink-3);font-size:11.5px;}
.co-line__p{font-weight:700;}
.co__totals{border-top:1px solid var(--line);padding-top:12px;font-size:14px;}
.co__totals>div{display:flex;justify-content:space-between;padding:4px 0;color:var(--ink-2);}
.co__grand{font-size:18px;font-weight:800;color:var(--ink);border-top:1px solid var(--line);margin-top:6px;padding-top:10px;}
.co__promo{display:flex;gap:8px;margin-top:16px;}
.co__promo input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-size:13.5px;background:#fff;}
.co__promo button{background:var(--ink);color:#fff;border-radius:999px;padding:0 16px;font-weight:700;font-size:13.5px;}
.co__promomsg{font-size:12.5px;margin:8px 0 0;}
.co__promomsg.ok{color:var(--green-d);} .co__promomsg.err{color:var(--clay);}
.co__dispatch{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--green-d);background:var(--green-soft);border-radius:10px;padding:10px 12px;margin:14px 0 0;}
.co__ruo{font-size:11.5px;color:var(--ink-3);margin:14px 0 0;line-height:1.5;}
.co__main{padding:34px 36px;}
.co__main h2{font-size:24px;margin-bottom:16px;}
.co__demo{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);border-radius:12px;padding:12px 14px;font-size:13px;margin-bottom:18px;}
.co__step{font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--green-d);margin:20px 0 12px;}
.co__form{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field--full{grid-column:1/-1;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);}
.field input,.field select{border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:14.5px;background:#fff;width:100%;min-width:0;}
.field input:focus,.field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft);}
/* address suggestions (NL: street + number -> postcode + city) */
.field--sug{position:relative;}
.addr-sug{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -18px rgba(40,35,20,.4);z-index:30;overflow:hidden;}
.addr-sug button{display:block;width:100%;text-align:left;padding:10px 14px;font-size:13.5px;border:none;background:none;cursor:pointer;color:var(--ink);font-family:inherit;}
.addr-sug button:hover{background:var(--green-soft);}
.ship{display:flex;flex-direction:column;gap:9px;}
.ship__opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;text-align:left;background:#fff;transition:border-color .15s;}
.ship__opt--on{border-color:var(--green);background:var(--green-soft);}
.ship__opt--dim{opacity:.42;pointer-events:none;cursor:not-allowed;}
.ship__radio{width:18px;height:18px;border-radius:999px;border:2px solid var(--line);flex:none;position:relative;}
.ship__opt--on .ship__radio{border-color:var(--green);}
.ship__opt--on .ship__radio::after{content:"";position:absolute;inset:3px;border-radius:999px;background:var(--green);}
.ship__info{flex:1;font-size:13.5px;min-width:0;}
.ship__info strong{display:flex;gap:6px;flex-wrap:wrap;} .ship__info small{color:var(--ink-3);display:block;}
.ship__carrier{color:var(--green-d);font-weight:800;}
/* Checkout: to-your-address vs pick-up-point chooser (two cards, then options). */
.ship-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-bottom:12px;}
.ship-card{position:relative;display:flex;flex-direction:column;gap:7px;border:1px solid var(--line);border-radius:12px;padding:12px 14px 12px 17px;background:#fff;text-align:left;font-family:inherit;cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s;}
.ship-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:background .15s;}
.ship-card--on{border-color:var(--green);box-shadow:0 0 0 1px var(--green);}
.ship-card--on::before{background:var(--green);}
.ship-card__hd{font-size:13.5px;font-weight:700;line-height:1.25;}
.ship-card__hd small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);}
.ship-card__body{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;}
.ship-card__ic{flex:none;margin-top:2px;color:var(--green-d);}
.ship-card__lines{display:flex;flex-direction:column;min-width:0;}
.ship-card__lines span{overflow-wrap:anywhere;}
.ship-card__todo{color:var(--ink-3);font-style:italic;}
.ship-card__dist{color:var(--green-d);font-weight:700;margin-top:2px;}
.ship-hint{border:1px dashed var(--line);border-radius:12px;padding:13px 15px;font-size:13px;color:var(--ink-3);background:#fff;}
.ship__dist{margin-left:auto;color:var(--green-d);font-weight:700;white-space:nowrap;}
@media(max-width:520px){.ship-choice{grid-template-columns:1fr;}}
.ship__price{font-weight:800;font-size:14px;} .ship__price.free{color:var(--green-d);}
.co__pay{margin-top:16px;}
.co__hint{font-size:12.5px;color:var(--ink-3);text-align:center;margin:10px 0 0;}
.co__marks{display:inline-flex;flex-wrap:wrap;gap:5px;justify-content:center;vertical-align:middle;}
.co__marks img{height:26px;width:auto;}
.co__terms{font-size:11.5px;color:var(--ink-3);margin:18px 0 0;line-height:1.55;}
.co__terms a{color:var(--green-d);text-decoration:underline;}
.co--done .done{padding:60px 40px;text-align:center;max-width:520px;margin:0 auto;}
.done__check{width:70px;height:70px;border-radius:999px;background:var(--green-soft);color:var(--green-d);display:grid;place-items:center;font-size:32px;margin:0 auto 20px;}
.done h2{font-size:25px;margin-bottom:12px;}
.done p{color:var(--ink-2);margin:0 0 8px;}
.done__sub{font-size:13.5px;color:var(--ink-3);}
.done .btn{margin-top:22px;max-width:260px;}

/* ---------------- compliance gate ---------------- */
.gate{position:fixed;inset:0;background:rgba(35,30,20,.55);z-index:90;display:none;place-items:center;padding:20px;}
.gate.show{display:grid;}
.gate__card{background:#fff;max-width:440px;width:100%;border-radius:22px;padding:38px 34px;box-shadow:var(--shadow-lg);text-align:center;}
.gate__logo{display:flex;justify-content:center;margin-bottom:16px;}
.gate__card h2{font-size:23px;margin-bottom:8px;}
.gate__lead{color:var(--ink-2);font-size:14px;margin:0 0 20px;}
.gate__check{display:flex;gap:10px;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:13px;color:var(--ink-2);margin-bottom:18px;}
.gate__check input{margin-top:2px;flex:none;}
.gate__check.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}
.gate__btns{display:flex;flex-direction:column;gap:10px;}

/* ---------------- exit-intent / scroll-back popup (corner card) ---------------- */
.exitpop{position:fixed;left:24px;bottom:24px;z-index:88;width:340px;max-width:calc(100vw - 48px);display:none;}
.exitpop__card{background:#fff;border:1px solid var(--line-2);border-radius:20px;padding:24px;box-shadow:0 24px 54px -18px rgba(40,35,20,.34),0 4px 12px -8px rgba(40,35,20,.18);position:relative;transform:translateY(14px) scale(.985);opacity:0;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .34s ease;}
.exitpop.in .exitpop__card{transform:translateY(0) scale(1);opacity:1;}
.exitpop__badge{display:inline-block;background:var(--green-soft);color:var(--green-d);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:13px;}
.exitpop__x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;color:var(--ink-3);font-size:20px;line-height:1;transition:background .15s,color .15s;}
.exitpop__x:hover{background:var(--bg);color:var(--ink);}
.exitpop__card h2{font-size:18.5px;letter-spacing:-.02em;line-height:1.2;margin-bottom:6px;padding-right:22px;}
.exitpop__lead{color:var(--ink-2);font-size:13.5px;line-height:1.5;margin:0 0 17px;}
.exitpop__form{display:flex;flex-direction:column;gap:9px;}
.exitpop__form input{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14.5px;background:var(--bg);transition:border-color .15s,background .15s;}
.exitpop__form input:focus{outline:none;border-color:var(--green);background:#fff;}
.exitpop__form .btn{border-radius:12px;padding:12px;}
.exitpop__msg{margin:11px 0 0;font-size:12px;color:var(--ink-2);min-height:1em;text-align:center;}
@media (max-width:520px){.exitpop{left:12px;right:12px;bottom:12px;width:auto;max-width:none;}}
@media (prefers-reduced-motion:reduce){.exitpop__card{transition:opacity .2s ease;transform:none;}}

/* ---------------- cookie ---------------- */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:660px;margin:0 auto;background:var(--ink);color:#fff;border-radius:16px;padding:15px 18px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:85;box-shadow:var(--shadow-lg);}
.cookie[hidden]{display:none;}
.cookie p{margin:0;font-size:13px;line-height:1.5;flex:1;min-width:220px;color:#dcded4;}
.cookie a{color:#9be3cd;}
.cookie__btns{display:flex;gap:8px;flex:none;}
.cookie .btn{padding:10px 16px;font-size:13.5px;}
.cookie .btn--ghost{color:#fff;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);}
.cookie .btn--ghost:hover{background:rgba(255,255,255,.08);}
.cookie .btn--primary{background:var(--green);color:#fff;}
.cookie .btn--primary:hover{background:var(--green-d);}

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .hero__card,.foot__in,.how{grid-template-columns:1fr;}
  .hero__media{order:-1;}
  .rail,.grid,.kits,.cats{grid-template-columns:repeat(2,1fr);}
  .co__grid{grid-template-columns:1fr;}
  .co__summary{border-right:none;border-bottom:1px solid var(--line);}
}
@media (max-width:760px){
  /* Keep search usable on mobile: wrap it to its own full-width row. */
  .hdr__in{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;row-gap:12px;}
  .hdr__search{order:3;flex-basis:100%;max-width:none;}
  .cartbtn{margin-left:auto;}
  .co__form{grid-template-columns:1fr;}
  .how__s{border-right:none;border-bottom:1px solid var(--line-2);}
}
@media (max-width:540px){
  .rail,.grid,.kits{grid-template-columns:1fr 1fr;gap:12px;}
  .hero__copy{padding:34px 24px;}
  .co__main{padding:24px 22px;}
  .wrap{padding:0 16px;box-sizing:border-box;}
  .cats{grid-template-columns:1fr 1fr;gap:10px;}
  .cat{flex-direction:column;text-align:center;padding:12px;min-width:0;box-sizing:border-box;}
  .cat b{word-break:break-word;}
  .news{padding:24px 16px;box-sizing:border-box;}
  .news__form{flex-direction:column;width:100%;box-sizing:border-box;}
  .news__form input, .news__form .btn{width:100%;box-sizing:border-box;}
  .shop__bar{flex-direction:column;align-items:flex-start;gap:12px;}
  .shop__tools{width:100%;justify-content:space-between;flex-wrap:wrap;gap:10px;box-sizing:border-box;}
  .sortlbl select{max-width:180px;text-overflow:ellipsis;}
  .catnav{padding-left:16px;padding-right:16px;}
}

/* ===== mg clarity on kits + mobile polish (2026-07-16) ===== */
.kit__mg{display:inline-block;margin-left:0;background:var(--green-soft);color:var(--green-d);font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.showcase__mg{display:inline-block;margin-left:8px;background:var(--green-soft);color:var(--green-d);font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;vertical-align:1px;}
.kit__incl b{font-weight:800;color:var(--ink);}
.pc__spec b,.pd__spec b{font-weight:800;color:var(--green-d);}
@media (max-width:760px){
  /* Slim sticky header: search + category chips glide away on scroll
     (app.js toggles body.hdr--slim), so the bar stops eating the screen. */
  .hdr__search,.catnav{transition:max-height .28s ease,opacity .2s ease,padding .28s ease,margin .28s ease;max-height:64px;}
  body.hdr--slim .hdr__search{max-height:0 !important;opacity:0 !important;overflow:hidden;margin:0;padding-top:0;padding-bottom:0;border-width:0;}
  body.hdr--slim .catnav{max-height:0 !important;opacity:0 !important;overflow:hidden;padding-top:0;padding-bottom:0;}
  .hdr__in{padding-top:8px;padding-bottom:8px;row-gap:8px;}
  /* Compact hero: shoppers reach products a full screen sooner */
  .hero{padding-top:14px;}
  .hero__copy h1{font-size:27px;margin:10px 0 10px;}
  .hero__sub{font-size:15px;line-height:1.55;margin-bottom:16px;}
  .hero__cta{flex-wrap:wrap;flex-direction:column;gap:10px;}
  .hero__cta .btn{width:100%;min-height:46px;box-sizing:border-box;}
  .showcase__media{aspect-ratio:1/.68;}
  /* 16px inputs stop iOS focus-zoom; 44px taps are comfortable */
  .hdr__search input,.news__form input,.exitpop__form input{font-size:16px;}
  .btn{min-height:44px;}
  .addbtn{width:44px;height:44px;}
  .qty__b{width:40px;height:40px;}
  .drawer__x{width:44px;height:44px;}
}

/* Mobile: larger tap targets to reduce dead clicks */
@media (max-width:760px){
  .foot__col a{padding:9px 0;margin-bottom:2px;min-height:42px;display:flex;align-items:center;}
  .foot__lang select{min-height:40px;padding:9px 12px;}
}

/* ===== catalogue nav (2026-07-22): header link + homepage CTA banner ===== */
.hdr__cat{flex-shrink:0;font-size:14px;font-weight:700;color:var(--ink-2);padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;transition:all .15s;}
.hdr__cat:hover{border-color:var(--green);color:var(--green-d);}
.catcta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 34px;box-shadow:var(--shadow-sm);}
.catcta__txt h2{margin:0 0 6px;font-size:24px;}
.catcta__txt p{margin:0;color:var(--ink-2);font-size:14.5px;max-width:56ch;}
.catcta__btn{flex-shrink:0;}
@media (max-width:760px){
  .hdr__cat{padding:8px 11px;font-size:13px;}
  .catcta{padding:22px 20px;}
  .catcta__btn{width:100%;}
}

/* ===== unified header nav + mobile hamburger (2026-07-22) ===== */
.hdr__nav{display:flex;align-items:center;gap:20px;font-size:14.5px;font-weight:600;color:var(--ink-2);flex-shrink:0;}
.hdr__nav a{white-space:nowrap;}
.hdr__nav a:hover{color:var(--green-d);}
/* Actieve pagina in de hoofdnav. Home staat nu op ELKE pagina in het menu:
   een menu dat per pagina van samenstelling wisselt leest als een glitch. */
.hdr__nav a.on{color:var(--green-d);}
.hdr__burger{display:none;flex-shrink:0;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;}
@media (max-width:900px){
  .hdr__nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:4px 24px 12px;display:none;z-index:39;}
  body.navopen .hdr__nav{display:flex;}
  .hdr__nav a{padding:13px 4px;font-size:15px;border-top:1px solid var(--line-2,#efeae0);}
  .hdr__nav a:first-child{border-top:0;}
  .hdr__burger{display:inline-flex;}
}

/* Popular-product links under the catalogue CTA: real, crawlable links to the
   best sellers so the homepage passes link equity to them without JavaScript. */
.pop{margin:14px 2px 0;font-size:13.5px;color:var(--ink-2);line-height:1.9;}
.pop a{color:var(--green-d);text-decoration:none;border-bottom:1px solid transparent;}
.pop a:hover{border-bottom-color:var(--green-d);}
.pop__sep{color:var(--ink-3);margin:0 2px;}

/* ---- cart drawer polish -------------------------------------------------
   Lines were hairline-separated rows on a flat background, which reads as a
   list rather than a basket. Each line is its own card now, the stepper feels
   like a control instead of two characters, and Remove stops being a stray
   underlined link. Layout and markup are untouched - this is styling only. */
.drawer__items{padding:14px;}
.line{gap:14px;padding:13px;border-bottom:0;background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;box-shadow:0 1px 2px rgba(40,35,20,.04);transition:border-color .15s,box-shadow .15s;}
.line:last-child{margin-bottom:0;}
.line:hover{border-color:var(--line-2);box-shadow:0 4px 14px -8px rgba(40,35,20,.28);}
.line__img{width:62px;height:62px;border-radius:14px;}
.line__info strong{font-size:14.5px;line-height:1.3;letter-spacing:-.01em;}
.line__info small{display:block;margin-top:2px;}
.qty{margin-top:10px;border-color:var(--line-2);overflow:hidden;}
.qty__b{font-weight:700;transition:background .12s;}
@media (min-width:761px){.qty__b{width:34px;height:34px;}}
.qty__b:hover{background:var(--bg-2);color:var(--ink);}
.qty__n{min-width:28px;}
.line__right{gap:10px;align-items:flex-end;}
.line__price{font-size:15.5px;letter-spacing:-.01em;}
.line__rm{text-decoration:none;font-weight:600;padding:4px 9px;border-radius:8px;transition:background .12s,color .12s;}
.line__rm:hover{background:#fdecea;color:var(--clay);}
.drawer__head{padding:18px 20px;}
.drawer__head h3{letter-spacing:-.02em;}
.drawer__foot{padding:16px 20px 20px;}
.drawer__row--total{font-size:19px;letter-spacing:-.01em;padding-top:12px;margin-top:8px;}
.drawer__foot .btn{margin-top:16px;}
.drawer__emptyart{width:78px;height:78px;}
@media (max-width:560px){ .drawer__items{padding:12px;} .line{padding:12px;gap:12px;} }

/* .wrap sits on the same element and resets the padding, so the top gap needs
   a more specific rule than .band__in on its own. */
.band .band__in{padding:18px 0 0;}
@media (max-width:760px){ .band .band__in{gap:10px;} }

/* Long distance = de zending die NU onderweg is (sneller) -> het opvallende
   indigo. Pre-order = pas over ~een maand -> rustiger amber. */
.avail--made{color:#b26a00;}
.avail--pre{color:#b26a00;}
.card .avail--pre,.kit .avail--pre,.card .avail--made,.kit .avail--made{background:#fff;}

/* ---- consistentie-polish (2026-08-07) --------------------------------------
   Kleine dingen die een site verzorgd laten aanvoelen: merk-kleurige tekst-
   selectie, rustige scrollbars, prijzen in tabellaire cijfers zodat bedragen
   onder elkaar uitlijnen, en respect voor prefers-reduced-motion. */
::selection{background:#0f7a5f;color:#fff;}
html{-webkit-tap-highlight-color:transparent;scrollbar-color:#d8d3c6 #f6f2ea;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#d8d3c6;border-radius:99px;border:3px solid #f6f2ea;}
::-webkit-scrollbar-thumb:hover{background:#c6c1b1;}
[class*='price'],[class*='Price']{font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

/* =========================================================================
   MOBIELE OPFRISBEURT (2026-08-10)
   Gemeten probleem op 375px: de groene balk werd 103px hoog omdat drie
   boodschappen over drie regels wikkelden, en de header 168px omdat de
   zoekbalk een eigen rij pakte. Samen 271px - een derde van het scherm - nog
   voordat de bezoeker iets van de winkel zag. Alles hieronder geldt UITSLUITEND
   onder 760px; de desktopweergave blijft ongemoeid.
   ========================================================================= */
@media (max-width:760px){

  /* ---- 1. Aankondigingsbalk: een regel, boodschappen wisselen elkaar af ----
     De items blijven allemaal in de HTML staan (zoekmachines en bezoekers
     zonder JS lezen ze gewoon); alleen de weergave stapelt ze op elkaar. */
  .announce,.sf-announce{
    position:relative;min-height:36px;padding:8px 44px;gap:0;
    flex-wrap:nowrap;overflow:hidden;text-align:center;font-size:13px;
  }
  .announce__sep,.sf-announce .sep{display:none;}
  .announce > :not(.announce__sep),
  .sf-announce > :not(.sep){
    position:absolute;left:44px;right:44px;top:50%;
    transform:translateY(-50%);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .45s ease;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .announce > .ann-on,.sf-announce > .ann-on{
    opacity:1;visibility:visible;pointer-events:auto;
  }
  /* Zonder JS zou alles onzichtbaar blijven: dan tonen we gewoon het eerste. */
  .no-js .announce > :first-child,.no-js .sf-announce > :first-child{
    opacity:1;visibility:visible;pointer-events:auto;
  }

  /* ---- 2. Zoeken achter een icoon --------------------------------------
     De zoekbalk pakte een volledige rij (~50px) die de meeste bezoekers niet
     gebruiken. Nu een icoon in de kop; tikken schuift het veld open. */
  .hdr__in{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;row-gap:0;}
  .hdr__searchbtn{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
    background:#fff;color:var(--ink);flex-shrink:0;margin-left:auto;
    transition:border-color .15s,color .15s;
  }
  .hdr__searchbtn:hover,.hdr__searchbtn[aria-expanded="true"]{
    border-color:var(--green);color:var(--green-d);
  }
  .hdr__search{
    order:3;flex-basis:100%;max-width:none;
    max-height:0;opacity:0;overflow:hidden;
    margin:0;padding-top:0;padding-bottom:0;border-width:0;
    transition:max-height .26s ease,opacity .2s ease,margin .26s ease,padding .26s ease;
  }
  /* !important omdat de bestaande 'slim header' (body.hdr--slim, bij scrollen)
     de zoekbalk met !important dichtklapt. Wie hem bewust opent, wint. */
  body.searchopen .hdr__search{
    max-height:64px !important;opacity:1 !important;margin-top:10px;
    padding:0 16px !important;border-width:1px !important;overflow:visible;
  }
  /* De cart-knop stond op margin-left:auto; die rol heeft het zoekicoon nu. */
  .cartbtn{margin-left:0;}

  /* ---- 3. Ademruimte ---------------------------------------------------
     De sectiekoppen hadden margin-bottom:0, waardoor kop en inhoud tegen
     elkaar plakten. Dit is waar "alles zit zo dicht op elkaar" vandaan kwam. */
  .wrap{padding-left:18px;padding-right:18px;}
  section > .wrap > h2,.rail-sec h2,.bundles h2,.band h2{margin-bottom:14px;}
  .sec__head,.rail-sec .sec__head{margin-bottom:14px;}
  .rail-sec,.bundles{padding-top:40px;padding-bottom:40px;}
  .rail,.grid,.kits{gap:18px 14px;}
  .card__body{padding-top:12px;}
  .cats{gap:12px;}

  /* ---- 4. Hero: past nu binnen een scherm ------------------------------ */
  .hero__copy{padding:30px 22px 34px;}
  .hero__copy h1{font-size:30px;line-height:1.15;margin:12px 0 12px;}
  .hero__sub{font-size:15.5px;margin-bottom:20px;}
  .hero__media{padding:24px;}
  .hero__card{border-radius:22px;}

  /* ---- 5. Kleine afwerking --------------------------------------------- */
  .card,.kit{box-shadow:0 4px 14px -10px rgba(40,35,20,.22);}
  .tabbar{box-shadow:0 -6px 20px -14px rgba(40,35,20,.5);}
}

@media (prefers-reduced-motion:reduce){
  .announce > :not(.announce__sep),.sf-announce > :not(.sep){transition:none;}
}
/* ---- header op EEN rij (2026-08-10, vervolg) --------------------------
   Gemeten: vijf knoppen (merk, zoek, hamburger, inloggen, mand) vroegen samen
   445px op een scherm van 375, dus viel de rij in tweeen: 110px hoog.
   'Log in' staat al onderaan in de tabbalk, dus die is hier dubbel; met een
   kleinere tussenruimte past de rest ruim op een regel. */
@media (max-width:760px){
  /* wrap MOET aan blijven: de zoekbalk klapt open op een eigen rij. Met nowrap
     werd hij tot 17px platgedrukt tussen de knoppen en ging hij niet meer open. */
  .hdr__in{flex-wrap:wrap;gap:10px;}
  .hdr__search{flex-basis:100%;order:9;}
  body:not(.searchopen) .hdr__search{width:0;min-width:0;padding:0;border-width:0;}
  .hdr__login,.hdr__acct{display:none;}
  .brand{min-width:0;}
  .brand__txt{min-width:0;}
  .brand__txt strong{font-size:18px;}
  .hdr__searchbtn{width:40px;height:40px;}
  .hdr__burger{width:40px;height:40px;}
  .cartbtn{width:42px;height:42px;}
  /* De zoekbalk blijft een eigen rij, maar alleen wanneer hij openstaat. */
  .hdr__search{flex-basis:100%;order:9;}

  /* Hero: de fotokolom mag wat platter, dan past het geheel dichter bij een
     schermhoogte zonder dat de foto klein wordt. */
  .hero__media{padding:18px;}
  #heroShowcase .showcase__media,.showcase__media{aspect-ratio:1/.62;}
  .hero__copy{padding:26px 22px 30px;}
}
/* Zoekbalk openklappen: hoogste specificiteit in het bestand, zodat geen enkele
   eerdere regel (o.a. de slim-header met !important) hem nog dicht kan houden.
   Vaste hoogte i.p.v. max-height: eenduidig en niet te overschrijven. */
@media (max-width:760px){
  body.searchopen .hdr .hdr__in .hdr__search{
    height:46px !important;max-height:46px !important;min-height:46px !important;
    opacity:1 !important;visibility:visible !important;
    padding:0 16px !important;border-width:1px !important;
    margin-top:10px !important;overflow:visible !important;
  }
  body.searchopen .hdr .hdr__in .hdr__search input{padding:0 !important;height:44px !important;}
}
/* =========================================================================
   PRODUCTKAART IN VERHOUDING (2026-08-10)
   Op twee kolommen is een kaart 163px breed. Daarin stonden een keuzemenu op
   16px, een categorie over twee regels, en een prijs van 19px naast een knop
   van 44px. Alles hieronder is bedoeld om de kaart rustig te laten ademen;
   de tikvlakken blijven ruim genoeg om comfortabel te raken.
   ========================================================================= */
@media (max-width:760px){

  /* Maatkeuze: 16px was er om te voorkomen dat iOS inzoomt bij focus. Dat geldt
     voor tekstvelden; een keuzemenu opent een eigen kiezer en zoomt niet. */
  .card__size,.kit__size{
    font-size:13.5px;
    padding:8px 26px 8px 11px;
    background-position:right 9px center;
    border-radius:10px;
    margin-top:6px;
  }

  /* Categorie op een regel: bij twee regels sprong de kaarthoogte alle kanten
     op en werden de rijen ongelijk. */
  .card__cat{
    font-size:10px;letter-spacing:.07em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:block;line-height:1.4;
  }

  .card__name{font-size:15px;line-height:1.3;margin-top:4px;}

  /* Prijs en knop: prijs iets kleiner, knop compacter, zodat ze samen niet
     tegen elkaar geduwd worden op 129px beschikbare breedte. */
  .card__buy{gap:8px;margin-top:10px;}
  .price b,.card__price b,.js-price{font-size:16.5px;}
  .price span,.card__price span,.js-unit{font-size:11px;}
  .addbtn{width:40px;height:40px;flex:none;}
  .addbtn svg{width:17px;height:17px;}

  /* Badges op de foto: kleiner en strakker, ze mogen het product niet
     overstemmen. */
  .avail,.card__star,.kit__tag{
    font-size:10px;padding:4px 9px;border-radius:999px;
  }

  .card__body{padding:10px 12px 12px;}
  .card__ship{font-size:11px;}
}

/* Op de smalste telefoons (iPhone SE en kleiner) nog een tandje rustiger. */
@media (max-width:360px){
  .card__name{font-size:14px;}
  .price b,.card__price b,.js-price{font-size:15.5px;}
  .card__size,.kit__size{font-size:13px;}
}