/* =========================================================================
   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{
  --paper:#ffffff; --bg:#f6f2ea; --bg-2:#efe9dd;
  --ink:#23241f; --ink-2:#6a6b62; --ink-3:#9a9b90;
  --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 ---------------- */
.announce{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:var(--green-d);color:#eaf3ee;font-size:13.5px;font-weight:500;padding:9px 16px;}
.announce b{color:#fff;font-weight:700;}
.announce__sep{color:#5f9784;}
#shipNote{font-weight:600;color:#fff;}

/* ---------------- 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);}
.cartbtn{position:relative;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px 0 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:14.5px;font-weight:700;flex-shrink:0;transition:background .15s;}
.cartbtn:hover{background:#000;}
.cartbtn.pulse{animation:pulse .4s ease;}
@keyframes pulse{0%{transform:scale(1);}40%{transform:scale(1.09);}100%{transform:scale(1);}}
.cartbtn__count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--clay);color:#fff;font-size:12px;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;}
.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;}
.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:var(--honey);} .avail--oos{color:var(--clay);} .avail--low{color:#b26a00;}
.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;}
.kit{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .15s,box-shadow .15s;}
.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;}
.kit__name{font-size:16.5px;}
.kit__incl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-2);}
.kit__incl li{display:flex;gap:7px;align-items:flex-start;}
.kit__incl svg{width:14px;height:14px;color:var(--green);margin-top:3px;flex:none;}
.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;}
.band__in{display:flex;align-items:center;gap:16px;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:16px;padding:18px 22px;}
.band__ic{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:none;}
.band__in strong{font-size:15px;}
.band__in p{margin:2px 0 0;color:var(--warn-ink);font-size:13.5px;}

/* newsletter */
.news{background:var(--green-soft);border:1px solid #cfe6dc;border-radius:22px;padding:40px;text-align:center;}
.news h2{font-size:27px;}
.news p{color:var(--ink-2);margin:8px 0 20px;}
.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 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;}
.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;}
}

/* ===== mg clarity on kits + mobile polish (2026-07-16) ===== */
.kit__mg{display:inline-block;vertical-align:2px;margin-left:8px;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,.card__size{font-size:16px;}
  .btn{min-height:44px;}
  .addbtn{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;}
}