*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;font-family:Manrope,system-ui,sans-serif;color:#0E0E10;background:#fff;-webkit-font-smoothing:antialiased}
a{color:#E5157A;text-decoration:none}a:hover{color:#0E0E10}
.nl{color:inherit}
button,input,select,textarea{font-family:inherit;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid #E5157A;outline-offset:2px}
::selection{background:#7FD6CF}
img{max-width:100%;display:block}

/* type */
.d62{font-family:Archivo,sans-serif;font-stretch:62%;font-weight:900;text-transform:uppercase}
.d125{font-family:Archivo,sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase}
.kicker{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.kicker.mag{color:#E5157A}
.kicker.mute{color:rgba(14,14,16,.55)}
.wrap{max-width:1320px;margin:0 auto;padding-left:20px;padding-right:20px}
.muted{color:rgba(14,14,16,.7)}
.h1page{margin:8px 0 0;font-size:clamp(36px,5.4vw,76px);line-height:.95}
.h2sec{margin:8px 0 0;font-size:clamp(26px,3.4vw,44px);line-height:1}
.sec{padding-top:clamp(56px,7vw,96px)}
.link-u{border:0;background:none;font-weight:800;font-size:14px;cursor:pointer;text-decoration:underline;padding:0}

/* hovers */
.hv-mag:hover{background:#E5157A!important;color:#fff!important}
.hv-dark:hover{background:#0E0E10!important;color:#fff!important}
.hv-white:hover{background:#fff!important;color:#0E0E10!important}
.hv-soft:hover{background:rgba(255,255,255,.5)!important}
.hv-lift{transition:transform .2s}
.hv-lift:hover{transform:translateY(-3px)}
.hv-bd:hover{border-color:#0E0E10!important}
.hv-c-mag:hover{color:#E5157A!important}
.hv-c-mint:hover{color:#7FD6CF!important}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:999px;border:0;font-size:14px;font-weight:800;cursor:pointer;transition:background .15s,color .15s}
.pill.dark{background:#0E0E10;color:#fff}
.pill.mag{background:#E5157A;color:#fff}
.pill.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px #0E0E10}
.pill:disabled{opacity:.45;cursor:not-allowed}
.chipbtn{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid}
.input{height:48px;border-radius:12px;border:1px solid rgba(14,14,16,.15);padding:0 14px;font-size:15px;background:#fff;width:100%}
.input.err{border-color:#E5157A;box-shadow:0 0 0 1px #E5157A}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700}

/* header */
#hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid rgba(14,14,16,.08)}
.brand{flex:none;background:none;border:0;padding:0;cursor:pointer;font-family:Archivo,sans-serif;font-stretch:125%;font-weight:800;font-size:16px;letter-spacing:.2em;color:#0E0E10}
.navbtn{border:0;border-radius:999px;padding:9px 14px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;background:transparent}

/* device illustration */
.device{display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 22px 22px rgba(14,14,16,.22));flex:none}
.dev-cap{width:46%;height:10%;background:linear-gradient(90deg,#0E0E10,#3a3a40 45%,#0E0E10);border-radius:45% 45% 12% 12%}
.dev-body{width:100%;flex:1;margin-top:3%;border-radius:22% / 8%;background:linear-gradient(150deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.85) 100%);border:1px solid rgba(14,14,16,.12);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6);display:flex;gap:7%;padding:18% 15% 34%;position:relative;overflow:hidden}
.dev-band{flex:1;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(14,14,16,.06),inset 4px 0 0 rgba(255,255,255,.45);transition:background .3s}
.dev-screen{position:absolute;left:28%;right:28%;bottom:10%;height:12%;border-radius:6px;background:#0E0E10;display:flex;align-items:center;justify-content:center}
.dev-screen div{width:50%;height:22%;border-radius:2px;background:#7FD6CF}
.dev-shine{position:absolute;top:0;bottom:0;left:9%;width:9%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0))}

/* product card */
.pcard{cursor:pointer;display:flex;flex-direction:column;height:100%;border-radius:16px;background:#fff;border:1px solid rgba(14,14,16,.08);overflow:hidden;transition:transform .2s,box-shadow .2s;text-align:left;padding:0;font:inherit;color:inherit}
.pcard:hover{transform:translateY(-3px);box-shadow:0 22px 44px -24px rgba(14,14,16,.35)}
.addbtn{width:100%;height:42px;border-radius:999px;border:0;background:#0E0E10;color:#fff;font-size:13px;font-weight:800;cursor:pointer;transition:background .15s}
.addbtn:hover{background:#E5157A}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px}

/* image slot */
.slot{position:absolute;inset:0;background:#F3F4F4;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-size:13px;font-weight:700;color:rgba(14,14,16,.45)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* toast/age */
.toast{position:fixed;right:20px;bottom:20px;z-index:80;border-radius:16px;background:#0E0E10;color:#fff;padding:14px 14px 14px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 20px 40px -16px rgba(14,14,16,.5);max-width:calc(100% - 40px);animation:up .25s ease}
@keyframes up{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
body.locked{overflow:hidden}

@media (max-width:759px){
  .hide-m{display:none!important}
  .span2{grid-column:auto!important}
  .trust3{grid-template-columns:1fr!important}
  .compare2{grid-template-columns:1fr 1fr!important}
}
@media (min-width:760px){.hide-d{display:none!important}}

/* long-form SEO and policy copy */
.prose{max-width:62em;line-height:1.7;color:rgba(14,14,16,.78);font-size:16px}
.prose h2{font-family:Archivo,sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase;color:#0E0E10;font-size:clamp(20px,2.2vw,28px);line-height:1.1;margin:40px 0 12px}
.prose h3{font-size:17px;font-weight:800;color:#0E0E10;margin:24px 0 6px}
.prose>:first-child{margin-top:0}
.prose p{margin:0 0 14px}
.prose a{color:#E5157A;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:#0E0E10}
.prose b{color:#0E0E10}
.prose .tbl{margin:8px 0 18px;border:1px solid rgba(14,14,16,.1)}
.prose .tbl th,.prose .tbl td{padding:12px 14px;text-align:left;border-top:1px solid rgba(14,14,16,.07)}
.prose .tbl th{background:#F3F4F4;color:#0E0E10}

/* Disposables size switch: 2G and 1G on one page, colour-coded */
.size-tag{position:absolute;top:12px;right:12px;z-index:1;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-family:Archivo,sans-serif;font-stretch:62%;font-weight:900;font-size:16px;letter-spacing:.02em}
.size-tag.size-2g{background:#0E0E10;color:#7FD6CF}
.size-tag.size-1g{background:#4FB3FF;color:#0E0E10}
.size-switch{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px;margin-top:24px}
.size-switch button{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;border:2px solid rgba(14,14,16,.12);background:#fff;cursor:pointer;text-align:left;font-size:13px;font-weight:700;color:rgba(14,14,16,.7);transition:border-color .15s,background .15s}
.size-switch button .d62{font-size:40px;line-height:.85;color:#0E0E10}
.size-switch button:hover{border-color:#0E0E10}
.size-switch button[aria-selected="true"].size-all{background:#0E0E10;border-color:#0E0E10;color:rgba(255,255,255,.75)}
.size-switch button[aria-selected="true"].size-all .d62{color:#fff}
.size-switch button[aria-selected="true"].size-2g{background:#0E0E10;border-color:#0E0E10;color:rgba(255,255,255,.75)}
.size-switch button[aria-selected="true"].size-2g .d62{color:#7FD6CF}
.size-switch button[aria-selected="true"].size-1g{background:#4FB3FF;border-color:#4FB3FF;color:#0E0E10}
.size-block{padding:18px;border-radius:20px;margin-bottom:8px}
.size-block.size-2g{background:#F3F4F4}
.size-block.size-1g{background:#E5F3FF}
.size-block h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;font-size:clamp(20px,2.2vw,28px)}
.size-block h2 small{font-family:Manrope,sans-serif;font-stretch:100%;text-transform:none;font-size:13px;font-weight:700;color:rgba(14,14,16,.55)}

/* empty SEO slot placeholders (CONFIG.showSeoPlaceholders) */
.seo-ph{border:2px dashed rgba(14,14,16,.2);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;margin:0 0 16px;color:rgba(14,14,16,.55);font-size:14px;line-height:1.5;background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(14,14,16,.025) 10px 20px)}
.seo-ph b{color:#0E0E10;font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* mobile bottom nav and shop sheet */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.94);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-top:1px solid rgba(14,14,16,.1);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.bnav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;padding:4px 0;min-height:50px;font-size:11px;font-weight:800;color:rgba(14,14,16,.55);cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent}
.bnav button.on{color:#0E0E10}
.bnav button.on svg{color:#E5157A}
.bnav button:active{background:#F3F4F4}
.bnav b{position:absolute;top:2px;left:calc(50% + 4px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#E5157A;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center}
body.has-bnav{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
body.has-bnav .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
.bsheet-bg{position:fixed;inset:0;z-index:58;background:rgba(14,14,16,.4)}
.bsheet{position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));z-index:59;background:#fff;border-radius:24px 24px 0 0;padding:10px 16px 16px;max-height:72vh;overflow:auto;animation:up .2s ease;box-shadow:0 -20px 40px -20px rgba(14,14,16,.3)}
.bsheet-grab{width:40px;height:4px;border-radius:9px;background:rgba(14,14,16,.2);margin:0 auto 12px}
.bsheet-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bsheet-cats button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:0;border-radius:16px;padding:14px;text-align:left;cursor:pointer;font-weight:800;font-size:14px}
.bsheet-cats .d62{font-size:34px;line-height:.85}
.bsheet-cats small{font-size:11px;font-weight:700;opacity:.7}
.bsheet-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bsheet-links button{height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(14,14,16,.15);background:#fff;font-weight:700;font-size:13px;cursor:pointer}

/* home category tiles: name first, size small */
.cat-tile{border:0;cursor:pointer;text-align:left;border-radius:16px;padding:20px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.cat-tile-name{font-family:Archivo,sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(22px,2.1vw,28px);line-height:1.02;letter-spacing:-.01em}
.cat-tile-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.cat-tile-foot>span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cat-tile-size{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.75);color:#0E0E10;font-family:Archivo,sans-serif;font-stretch:62%;font-weight:900;font-size:16px}
.cat-tile-from{font-weight:800;font-size:14px}
.cat-tile-img{width:88px;height:88px;border-radius:12px;overflow:hidden;background:#fff;flex:none}
.bsheet-name{font-family:Archivo,sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:16px;line-height:1.05}
@media (max-width:759px){
  .cat-tile{min-height:170px;padding:16px}
  .cat-tile-img{width:72px;height:72px}
}

/* home grids */
.cat-tiles{padding-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px}

/* phone layout */
.m-buybar{position:fixed;left:10px;right:10px;bottom:calc(68px + env(safe-area-inset-bottom));z-index:55;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:18px;background:#0E0E10;color:#fff;box-shadow:0 16px 32px -12px rgba(14,14,16,.5)}
.m-buybar div{display:flex;flex-direction:column;min-width:0}
.m-buybar b{font-size:18px}
.m-buybar span{font-size:12px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-buybar button{flex:none;height:46px;padding:0 22px;border-radius:999px;border:0;background:#E5157A;color:#fff;font-weight:800;font-size:14px;cursor:pointer}
.m-buybar button:disabled{opacity:.5}
@media (max-width:759px){
  .wrap{padding-left:16px;padding-right:16px}
  .sec{padding-top:48px}
  .cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cat-tile{min-height:150px;padding:14px;gap:10px}
  .cat-tile-name{font-size:17px}
  .cat-tile-img{width:56px;height:56px;border-radius:10px}
  .cat-tile-from{font-size:12px}
  .size-switch{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:18px}
  .size-switch button{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;border-radius:14px;font-size:11px;line-height:1.3}
  .size-switch button .d62{font-size:28px}
  .size-block{padding:10px;border-radius:16px}
  .pcard .addbtn{height:38px;font-size:12px}
  .toast{left:12px;right:12px;max-width:none}
  /* 16px stops iOS zooming into form fields */
  input,select,textarea{font-size:16px!important}
}
/* product pages leave room for the buy bar */
main:has(.m-buybar){padding-bottom:72px}
body.has-bnav:has(.m-buybar) .toast{bottom:calc(142px + env(safe-area-inset-bottom))}

/* size switch as one compact segmented row (overrides the box layout above) */
.size-switch{display:flex;width:max-content;max-width:100%;gap:4px;padding:5px;margin-top:22px;border-radius:999px;background:#F3F4F4}
.size-switch button{flex-direction:row;align-items:center;gap:8px;height:46px;padding:0 18px;border:0;border-radius:999px;background:transparent;font-size:13px}
.size-switch button .d62{font-size:24px;line-height:1}
.size-switch .sz-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:rgba(14,14,16,.08);font-size:12px;font-weight:800;color:#0E0E10}
.size-switch .sz-sub{font-size:12px;font-weight:700;color:rgba(14,14,16,.55)}
.size-switch button[aria-selected="true"] .sz-n{background:rgba(255,255,255,.2);color:inherit}
.size-switch button[aria-selected="true"] .sz-sub{color:inherit;opacity:.75}
.size-switch button.size-1g[aria-selected="true"] .sz-n{background:rgba(14,14,16,.12)}
@media (max-width:759px){
  .size-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-top:16px}
  .size-switch button{justify-content:center;height:44px;padding:0 8px;gap:6px}
  .size-switch button .d62{font-size:22px}
  .size-switch .sz-sub{display:none}
}
.pcard-name{font-family:Archivo,sans-serif;font-stretch:125%;font-weight:800;font-size:16px;text-transform:uppercase;line-height:1.1}
@media (max-width:759px){.pcard-name{font-size:14px}}

/* footer: about text and contact details, then link columns */
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));gap:32px}
.ftr-about{display:flex;flex-direction:column;gap:16px;max-width:30em}
.ftr-text{font-size:14px;line-height:1.6;color:rgba(255,255,255,.72)}
.ftr-text p{margin:0 0 10px}
.ftr-text a{color:#7FD6CF}
.ftr-contact{margin:0;display:flex;flex-direction:column;gap:10px}
.ftr-contact div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;font-size:14px;line-height:1.45}
.ftr-contact dt{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:2px}
.ftr-contact dd{margin:0;color:#fff;overflow-wrap:anywhere}
.ftr-contact a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.ftr-contact a:hover{color:#7FD6CF}
.seo-ph.dark{margin:0;border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.6);background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(255,255,255,.03) 10px 20px)}
.seo-ph.dark b{color:#fff}
@media (max-width:900px){.ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr-about{grid-column:1/-1;max-width:none}}
@media (max-width:560px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}

/* category tile names scale with the tile, so long names like DISPOSABLES never overflow */
.cat-tile{container-type:inline-size;overflow:hidden;min-width:0}
.cat-tile-name{font-stretch:112%;font-size:clamp(14px,10.5cqi,26px);overflow-wrap:break-word;hyphens:manual}
@media (max-width:759px){.cat-tile-name{font-size:clamp(14px,10.5cqi,20px)}}

.seo-ph .ph-kw{font-size:12px;font-weight:700;color:#E5157A}
.seo-ph.dark .ph-kw{color:#7FD6CF}
/* Home hero: the H1 scales with its column so the widest word ("Disposables") never runs into the image panel. */
.hero-copy{container-type:inline-size;min-width:0}
.hero-h1{margin:0;font-size:clamp(28px,9cqi,64px);line-height:.98}
/* Desktop: all category tiles in one row, however many there are. Narrower screens keep the wrapping grid; phones keep 2 columns. */
@media (min-width:1100px){
  .cat-tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
  .cat-tiles .cat-tile{padding:16px;min-height:180px}
  .cat-tiles .cat-tile-foot{gap:8px}
  .cat-tiles .cat-tile-foot>span:first-child{min-width:0}
  .cat-tiles .cat-tile-size{font-size:14px;padding:0 8px}
  .cat-tiles .cat-tile-img{width:64px;height:64px;border-radius:10px}
  .cat-tiles .cat-tile-from{font-size:13px}
}
/* Header search: icon button, then a panel under the header with results as you type. */
.hdr-icon{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid rgba(14,14,16,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0E0E10}
.hdr-icon:hover{background:#F3F4F4}
.hsearch{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid rgba(14,14,16,.08);box-shadow:0 30px 50px -30px rgba(14,14,16,.25);max-height:80vh;overflow:auto}
#hs-in{flex:1;min-width:0;height:50px;padding:0 18px;border-radius:999px;border:1.5px solid #0E0E10;font-size:16px;font-weight:600;outline:none}
#hs-in:focus-visible{outline:2px solid #E5157A;outline-offset:2px}
.hs-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hs-cats a{height:36px;padding:0 14px;display:inline-flex;align-items:center;border-radius:999px;background:#F3F4F4;font-size:13px;font-weight:700}
.hs-cats a:hover{background:#0E0E10;color:#fff}
.hs-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:4px 16px}
.hs-list a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px}
.hs-list a:hover,.hs-list a:focus-visible{background:#F3F4F4}
.hs-img{width:48px;height:48px;flex:none;border-radius:8px;overflow:hidden;background:#F3F4F4;font-size:9px}
.hs-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hs-txt b{font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-txt small{font-size:12px;color:rgba(14,14,16,.55)}
.hs-price{font-weight:800;font-size:14px;flex:none}

/* Static home page (index.html): these replace the inline styles app.js used to generate. */
.topbar{background:#0E0E10;color:#fff;font-size:12px;font-weight:600;text-align:center;padding:9px 16px;letter-spacing:.03em}
.home-hero{border-radius:28px;background:#7FD6CF;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));overflow:hidden}
.home-hero .hero-copy{padding:clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.hero-h1-sub{display:block;margin-top:14px;font-size:.42em;line-height:1.15;letter-spacing:.01em;color:rgba(14,14,16,.72)}
.hero-text{margin:0;font-size:clamp(16px,1.4vw,19px);line-height:1.55;max-width:30em;color:rgba(14,14,16,.8)}
.hero-media{display:flex;align-items:center;justify-content:center;padding:32px 20px;background:rgba(255,255,255,.3)}
.hero-media a{display:block;width:min(100%,380px);aspect-ratio:1;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(14,14,16,.35)}
.hero-media img,.cat-tile-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:759px){.hero-media{display:none}}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.home-grid:empty{display:none}
@media (max-width:759px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.home-copy{margin-top:28px}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{margin:0 0 8px}
.faq-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
@media (max-width:759px){.faq-sec{grid-template-columns:minmax(0,1fr)}}
.faq-list{min-width:0;border-top:1px solid rgba(14,14,16,.1)}
.faq-list details{border-bottom:1px solid rgba(14,14,16,.1)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary h3{margin:0;font-size:17px;font-weight:800}
.faq-list summary::after{content:"+";width:30px;height:30px;border-radius:50%;background:#F3F4F4;display:flex;align-items:center;justify-content:center;flex:none;font-size:18px}
.faq-list details[open] summary::after{content:"\2212";background:#7FD6CF}
.faq-list p{margin:0 0 20px;max-width:46em;line-height:1.65;color:rgba(14,14,16,.72)}
.faq-list a{color:#E5157A;font-weight:700;text-decoration:underline}

/* Menu icons: a product photo per category (CATS[].icon in data.js). */
.nav-ic{width:22px;height:22px;border-radius:6px;object-fit:cover;flex:none;background:#F3F4F4}
.nav-ic.lg{width:36px;height:36px;border-radius:9px}
.bsheet-cats .nav-ic.lg{width:40px;height:40px;margin-bottom:4px;background:rgba(255,255,255,.7)}
.hs-cats a{display:inline-flex;align-items:center;gap:8px}
@media (min-width:760px) and (max-width:1180px){.navbtn{padding:9px 10px;gap:6px}.navbtn .nav-ic{display:none}}

/* Reviews page and product reviews. */
.rv-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;margin-top:28px;align-items:start}
@media (max-width:899px){.rv-grid{grid-template-columns:minmax(0,1fr)}}
.rv-list{display:flex;flex-direction:column;gap:12px;min-width:0}
.rv-sum{font-weight:800}
.rv-card{border-radius:16px;border:1px solid rgba(14,14,16,.1);padding:18px 20px}
.rv-card p{margin:8px 0;line-height:1.6;color:rgba(14,14,16,.78)}
.rv-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rv-rate{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:#7FD6CF}
.rv-meta{font-size:13px;color:rgba(14,14,16,.6)}
.rv-meta a{color:#E5157A;font-weight:700}
.rv-empty,.rv-done{border-radius:16px;background:#F3F4F4;padding:24px;line-height:1.6}
.rv-form-wrap{border-radius:20px;border:1px solid rgba(14,14,16,.1);padding:24px}
/* Hero secondary button: the old hover look is now its resting state; hover goes solid white. */
.pill.soft{background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1.5px #0E0E10;color:#0E0E10}
.pill.soft:hover{background:#fff}

/* Side cart drawer. */
.sc-bg{position:fixed;inset:0;z-index:80;background:rgba(14,14,16,.45)}
.sc{position:fixed;top:0;right:0;bottom:0;z-index:81;width:min(420px,100vw);background:#fff;display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(14,14,16,.4);animation:sc-in .22s ease-out}
@keyframes sc-in{from{transform:translateX(100%)}to{transform:none}}
.sc-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(14,14,16,.08)}
.sc-head .d125{font-size:18px}
.sc-x{width:36px;height:36px;border-radius:50%;border:1px solid rgba(14,14,16,.15);background:#fff;font-size:20px;line-height:1;cursor:pointer}
.sc-body{flex:1;overflow:auto;padding:12px 20px;display:flex;flex-direction:column;gap:12px}
.sc-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:start;padding-bottom:12px;border-bottom:1px solid rgba(14,14,16,.07)}
.sc-img{width:64px;height:64px;border-radius:10px;overflow:hidden;background:#F3F4F4}
.sc-name{font-weight:800;font-size:14px;line-height:1.3}
.sc-meta{font-size:12px;color:rgba(14,14,16,.6);margin-top:2px}
.sc-qty{display:inline-flex;align-items:center;margin-top:8px;border:1px solid rgba(14,14,16,.15);border-radius:999px;height:32px}
.sc-qty button{width:30px;height:100%;border:0;background:none;cursor:pointer;font-size:16px}
.sc-qty span{min-width:22px;text-align:center;font-weight:800;font-size:13px}
.sc-total{font-size:14px}
.sc-empty{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px 0}
.sc-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid rgba(14,14,16,.08);display:flex;flex-direction:column;gap:10px;background:#F3F4F4}
.sc-row{display:flex;justify-content:space-between;font-size:15px}
.sc-note{font-size:12px;line-height:1.45;color:rgba(14,14,16,.65)}
.sc-bar{height:6px;border-radius:99px;background:#fff;overflow:hidden}
.sc-bar div{height:100%;background:#7FD6CF}
.sc-co{height:52px;border-radius:999px;border:0;background:#E5157A;color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.sc-co:disabled{background:#0E0E10;opacity:.55;cursor:not-allowed}
.sc-view{text-align:center;font-size:13px;font-weight:800;text-decoration:underline;color:#0E0E10}
/* Contact help list: readable at a glance. */
.prose li b{color:#0E0E10}

/* Customer photo gallery (Delivery and Reviews). */
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:20px}
.cp-grid figure{margin:0;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#F3F4F4}
.cp-grid img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:759px){.cp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc.still{animation:none}
/* Customer photo captions. */
.cp-grid figure{aspect-ratio:auto;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(14,14,16,.08)}
.cp-grid img{aspect-ratio:1;height:auto}
.cp-grid figcaption{padding:10px 12px;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.4}
.cp-grid figcaption b{font-size:13px}
.cp-grid figcaption span{color:rgba(14,14,16,.6)}
.cp-grid .cp-q{color:#0E0E10;font-style:italic;margin-bottom:4px}

/* Shop page filters. */
.shop-filters{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-end;margin-top:18px;padding:18px;border-radius:16px;background:#F3F4F4}
.shop-filters .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.shop-filters .chipbtn{background:#fff}
.shop-clear{border:0;background:none;padding:0;font-size:13px;font-weight:800;text-decoration:underline;cursor:pointer;margin-left:auto}
/* Shop filters on phones: one swipeable row per group instead of wrapping lines. */
@media (max-width:759px){
  .shop-filters{flex-direction:column;align-items:stretch;gap:12px;padding:14px 0 14px 16px;margin:14px -16px 0;border-radius:0}
  .shop-filters>div{min-width:0}
  .shop-filters .kicker{font-size:10px}
  .shop-filters .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 16px 2px 0;margin-top:6px;scroll-snap-type:x proximity}
  .shop-filters .chips::-webkit-scrollbar{display:none}
  .shop-filters .chipbtn{flex:none;white-space:nowrap;scroll-snap-align:start}
  .shop-clear{align-self:flex-start;margin:0}
}
/* Header labels never wrap; the compact header takes over below 1200px. */
.navbtn{white-space:nowrap}
#hdr a.nl{white-space:nowrap}
/* Laptop widths: the full category row fits by dropping the menu icons and tightening spacing. */
@media (min-width:1200px) and (max-width:1399px){
  .navbtn{padding:9px 9px;font-size:13.5px}
  .navbtn .nav-ic{display:none}
  #hdr .wrap{gap:18px!important}
}