/*! Entulex Commerce Platform. Copyright (c) 2026 Entulex. All rights reserved. Proprietary software: see LICENSE.txt. */

/* base reset (standalone hosting) */
html{-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: app-like shop. Sticky brand bar, search + category chips, 2-up photo grid, floating cart pill, bottom sheets for product, cart and the owner's catalogue editor */
:root{
  --bg:#f3f5f8; --surface:#ffffff; --soft:#e9edf3; --ink:#0f1a2a; --muted:#5d6a7c; --line:#dfe4ec;
  --btn:#0f1a2a; --btn-ink:#ffffff; --accent:#0f1a2a; --accent-ink:#ffffff; --wa:#16924f; --wa-ink:#ffffff; --sale:#c8372b; --ok:#16924f;
  --scrim:rgba(8,14,24,.5);
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b111a; --surface:#141c27; --soft:#1c2633; --ink:#edf1f6; --muted:#97a3b4; --line:#253142;
  --btn:#edf1f6; --btn-ink:#0b111a; --accent:#edf1f6; --accent-ink:#0b111a; --wa:#22a862; --wa-ink:#ffffff; --sale:#ff6b5e; --ok:#3cc47c;
  --scrim:rgba(0,0,0,.6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b111a; --surface:#141c27; --soft:#1c2633; --ink:#edf1f6; --muted:#97a3b4; --line:#253142;
  --btn:#edf1f6; --btn-ink:#0b111a; --accent:#edf1f6; --accent-ink:#0b111a; --wa:#22a862; --wa-ink:#ffffff; --sale:#ff6b5e; --ok:#3cc47c;
  --scrim:rgba(0,0,0,.6); color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45;padding-block:0 110px}
.wrap{max-width:1100px;margin:0 auto;padding-inline:16px}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:4;background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.logo{display:flex;align-items:center;gap:10px;min-width:0}
.mark{width:40px;height:40px;border-radius:11px;background:var(--btn);display:grid;place-items:center;flex:none}
.mark svg{width:22px;height:22px;color:var(--btn-ink)}
.logo b{display:block;font-family:var(--display);font-size:17px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-btn{position:relative;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;flex:none}
.cart-btn svg{width:22px;height:22px}
.count{position:absolute;top:-6px;inset-inline-end:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}

/* owner strip */
.ownerbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:14px;padding:10px 12px;border:1.5px dashed var(--line);border-radius:var(--r);font-size:14px}
.ownerbar p{margin:0;min-width:0}
.ownerbar .warn{color:var(--sale);font-weight:600}

/* intro */
.intro{padding-block:22px 6px}
.intro h1{font-size:clamp(26px,6vw,38px);line-height:1.12;max-width:20ch}
.perks{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;margin:12px 0 0;color:var(--muted);font-size:14px}
.perks li{display:flex;align-items:center;gap:6px}
.perks svg{width:16px;height:16px;color:var(--ok)}

/* search + chips */
.finder{position:sticky;top:calc(env(safe-area-inset-top,0px) + 65px);z-index:3;background:var(--bg);padding-block:12px 10px;display:grid;gap:10px}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 12px}
.search svg{width:18px;height:18px;color:var(--muted);flex:none}
.search input{border:0;background:none;padding:12px 0;width:100%;min-width:0;outline:none}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--surface);padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding-top:4px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;text-align:start}
.ph{position:relative;background:var(--soft);aspect-ratio:1/1;max-width:100%;display:grid;place-items:center;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .gl{width:42%;height:auto;color:var(--muted);opacity:.75}
.badge{position:absolute;top:8px;inset-inline-start:8px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.badge.out{background:var(--ink);color:var(--surface)}
.ci{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ci .cat{font-size:12px;color:var(--muted);font-weight:500}
.ci h3{font-family:var(--body);font-weight:600;font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.cf{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}
.price{font-family:var(--display);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.price s{font-family:var(--body);font-weight:500;font-size:13px;color:var(--muted);margin-inline-start:4px}
.plus{width:36px;height:36px;border-radius:10px;border:0;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;flex:none}
.plus svg{width:18px;height:18px}
.plus:disabled{opacity:.3;cursor:default}
.step{display:flex;align-items:center;background:var(--soft);border-radius:10px;flex:none}
.step button{width:32px;height:36px;border:0;background:none;font-size:18px;font-weight:700}
.step span{min-width:20px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:48px 0}

/* cart pill */
.cartbar{position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:5;padding:0 16px calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none}
.pill{pointer-events:auto;max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;border-radius:16px;background:var(--btn);color:var(--btn-ink);padding:14px 18px;box-shadow:0 10px 30px rgba(8,14,24,.25);font-weight:600}
.pill b{font-variant-numeric:tabular-nums}

/* sheets */
.layer{position:fixed;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center}
.scrim{position:absolute;inset:0;background:var(--scrim)}
.sheet{position:relative;background:var(--surface);width:100%;max-width:600px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet.tall{height:92vh;display:flex;flex-direction:column;overflow:hidden}
@media (min-width:700px){.layer{align-items:center}.sheet{border-radius:20px}}
@media (prefers-reduced-motion:no-preference){.sheet{animation:rise .22s ease-out}@keyframes rise{from{transform:translateY(24px);opacity:.5}}}
.sh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 10px}
.sh h2{font-size:20px}
.x{width:36px;height:36px;border-radius:50%;border:0;background:var(--soft);font-size:20px;line-height:1;display:grid;place-items:center;flex:none}
.pad{padding:0 18px 20px}
.pd .ph{aspect-ratio:4/3}
.pd .x{position:absolute;top:12px;inset-inline-end:12px;z-index:1;background:var(--surface)}
.pd h2{font-size:22px;margin-top:4px}
.pd .price{font-size:22px;display:block;margin-top:6px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.desc{color:var(--muted);margin:10px 0 0;white-space:pre-line}
.big-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:12px;padding:14px;font-weight:700;background:var(--btn);color:var(--btn-ink);text-decoration:none;font-size:16px}
.big-btn svg{width:20px;height:20px}
.big-btn.wa{background:var(--wa);color:var(--wa-ink)}
.big-btn[aria-disabled="true"],.big-btn:disabled{opacity:.4;pointer-events:none}
.ghost{width:100%;border:1px solid var(--line);background:none;border-radius:12px;padding:12px;font-weight:600}
.addrow{display:flex;gap:10px;align-items:center;margin-top:18px}
.addrow .step{background:var(--soft)}
.addrow .step button{width:44px;height:50px}
.addrow .big-btn{flex:1}
.oos{margin:16px 0 0;padding:12px;border-radius:12px;background:var(--soft);font-weight:500}

.lines{list-style:none;margin:0;padding:0}
.lines li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.line-rm{flex:none;width:36px;height:36px;margin-inline-start:-4px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer}
.line-rm svg{width:19px;height:19px}
.line-rm:hover,.line-rm:focus-visible{color:var(--sale);background:color-mix(in srgb,var(--sale) 10%,transparent)}
@media (max-width:420px){.lines li{gap:9px}.line-rm{width:32px;margin-inline-start:-6px}}
.thumb{width:52px;height:52px;border-radius:10px;background:var(--soft);overflow:hidden;flex:none;display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .gl{width:60%;color:var(--muted)}
.ln{flex:1;min-width:0}
.ln b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.ln small{color:var(--muted);font-variant-numeric:tabular-nums}
.tot{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding-block:14px;font-variant-numeric:tabular-nums}
.tot .g{font-family:var(--display);font-weight:700;font-size:20px}
.tot .hint{grid-column:1/-1;font-size:14px;color:var(--ok);font-weight:600}
.fields{display:grid;gap:12px;margin-block:4px 16px}
.f{display:grid;gap:5px;font-size:14px;font-weight:600}
.f span small{font-weight:400;color:var(--muted)}
.f input,.f textarea,.f select{font-weight:400;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);width:100%;min-width:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.note{font-size:13px;color:var(--muted);text-align:center;margin:10px 0 0}
.actions{display:grid;gap:10px}

/* admin */
.tabs{display:flex;gap:6px;padding:0 18px 12px;border-bottom:1px solid var(--line)}
.tab{border:0;background:var(--soft);padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px}
.tab[aria-selected="true"]{background:var(--btn);color:var(--btn-ink)}
.abody{flex:1;overflow:auto;padding:14px 18px 20px}
.afoot{border-top:1px solid var(--line);padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));display:grid;gap:8px;background:var(--surface)}
.afoot .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.afoot p{margin:0;font-size:14px;color:var(--muted);min-width:0}
.afoot .dirty{color:var(--sale);font-weight:600}
.small-btn{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 12px;font-weight:600;font-size:14px;white-space:nowrap}
.small-btn.primary{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.small-btn.danger{color:var(--sale);border-color:var(--sale)}
.small-btn:disabled{opacity:.4;cursor:default}
.ilist{list-style:none;margin:12px 0 0;padding:0}
.ilist li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ilist .ln{flex:1 1 140px}
.ictl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:var(--surface);border-radius:9px;display:grid;place-items:center;font-size:15px}
.icon-btn:disabled{opacity:.3;cursor:default}
.stock{border:0;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700}
.stock.in{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.stock.outs{background:color-mix(in srgb,var(--sale) 14%,transparent);color:var(--sale)}
.photo{display:flex;gap:12px;align-items:center}
.photo .thumb{width:84px;height:84px}
.photo .ictl{flex-direction:column;align-items:flex-start}
.lphoto{display:grid;grid-template-columns:auto auto 1fr;gap:8px 12px;align-items:center}
.lphoto .ictl{flex-direction:row;flex-wrap:wrap}
.lphoto .lp-msg{min-width:0}
@media (max-width:640px){.lphoto{grid-template-columns:auto 1fr}.lphoto .lp-msg{grid-column:1/-1}.logo-prev.wide{width:200px}}
.check{display:flex;gap:10px;align-items:center;font-weight:600;font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--ok)}
.meter{font-size:13px;color:var(--muted)}

/* retail / wholesale */
.seg{display:inline-flex;background:var(--soft);border-radius:12px;padding:4px;gap:4px;margin-top:18px;max-width:100%}
.seg button{border:0;background:none;padding:9px 14px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(8,14,24,.14)}
.wbanner{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);font-size:14px}
.wbanner p{margin:0;min-width:0}
.wtag{flex:none;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:6px;margin-top:1px}
.trade{font-size:13px;font-weight:600;color:var(--muted);line-height:1.25}
.pd .trade{display:block;font-size:16px;margin-top:6px}
.qty-in{width:88px;flex:none;padding:12px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg);text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.lines .qty-in{width:72px;padding:9px 6px}
.oosn{display:block;color:var(--sale);font-size:13px;font-weight:500}
.qlab{font-size:13px;font-weight:600;color:var(--muted);margin-top:18px;display:block}
.qlab+.addrow{margin-top:6px}

/* admin page */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:20;background:var(--btn);color:var(--btn-ink);padding:12px 18px;border-radius:12px;font-weight:600;font-size:15px;box-shadow:0 10px 30px rgba(8,14,24,.25);max-width:calc(100% - 32px)}
.toast.err{background:var(--sale);color:#fff}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-top:16px}
.panel h2{font-size:20px;margin-bottom:14px}
.admin-tabs{display:flex;gap:6px;margin-top:16px;overflow-x:auto}
.top-links{display:flex;gap:8px;align-items:center}
.top-links a{color:inherit;font-weight:600;font-size:14px;text-decoration:none;padding:8px 10px;border-radius:9px}
.top-links a:hover{background:var(--soft)}
.login{max-width:380px;margin:12vh auto 0;padding-inline:16px}
.login .panel{display:grid;gap:14px}
.err-msg{color:var(--sale);font-size:14px;font-weight:600;margin:0}
.listtools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.listtools .search{flex:1 1 200px}
.listtools .big-btn{width:auto;padding:12px 18px}
.formfoot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.formfoot .big-btn,.formfoot .ghost{width:auto;padding:12px 20px}
.sentref{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--soft);border-radius:12px;padding:14px 16px;margin:0 0 14px}
.sentref span{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sentref b{font-family:var(--display);font-size:18px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* admin: orders */
.ohead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.monthbar{display:flex;align-items:center;gap:12px;margin:14px 0}
.monthbar b{font-family:var(--display);font-size:16px;min-width:9.5em;text-align:center}
.osum{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.osum div{background:var(--soft);border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.osum b{font-family:var(--display);font-size:20px;font-variant-numeric:tabular-nums}
.osum span{font-size:13px;color:var(--muted)}
.opill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap;line-height:1.4}
.st-new{background:var(--btn);color:var(--btn-ink)}
.st-quoted{background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.st-confirmed{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.st-delivered{background:var(--soft);color:var(--muted)}
.st-cancelled{background:color-mix(in srgb,var(--sale) 12%,transparent);color:var(--sale)}
.opill.ty{background:none;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.olist{list-style:none;margin:12px 0 0;padding:0}
.orow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;width:100%;text-align:start;border:0;border-bottom:1px solid var(--line);background:none;padding:12px 4px}
.orow:hover{background:var(--soft)}
.oref{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.oref b{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.oamt{font-weight:700;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
.owho{color:var(--muted);font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orow>span:last-child{justify-self:end}
.wrap-seg{display:flex;flex-wrap:wrap}
.admin-tabs .tab{white-space:nowrap;flex:none}
.top .logo>div{min-width:0}
.top-links{flex:none}
.top-links a{white-space:nowrap}
@media (max-width:420px){.top .logo small{display:none}.top-links a{padding:8px 6px}}
a.small-btn{text-decoration:none;color:inherit;display:inline-flex;align-items:center}
/* admin: security */
.checks{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.chk{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--soft)}
.chk b{display:block;font-size:15px}
.chk small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.chk .dot{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:var(--muted)}
.chk.ok .dot{background:var(--ok)}
.chk.warn .dot{background:#b7791f}
.chk.bad{background:color-mix(in srgb,var(--sale) 10%,var(--soft))}
.chk.bad .dot{background:var(--sale)}
.subh{font-size:17px;margin:26px 0 10px}
.steps{margin:0 0 16px;padding-inline-start:20px;display:grid;gap:12px}
.steps li{padding-inline-start:4px}
.steps small{display:block;color:var(--muted);margin-top:8px}
.qr{display:block;width:200px;max-width:100%;height:auto;margin:10px 0 0;border-radius:8px;background:#fff;padding:6px;image-rendering:pixelated}
.key{display:block;font:600 15px/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em;background:var(--soft);border-radius:8px;padding:8px 10px;margin:4px 0 8px;word-break:break-all;user-select:all}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.codes code{font:600 16px ui-monospace,Menlo,Consolas,monospace;background:var(--soft);border-radius:8px;padding:10px;text-align:center;letter-spacing:.05em;user-select:all}
.danger-btn{background:var(--sale);color:#fff}
/* VAT */
.vatnote{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.tot .vatl{font-size:14px;color:var(--muted)}
.legal{color:var(--muted);font-size:13px;text-align:center;padding-block:28px 8px}
.legal:empty{display:none}
/* admin: import */
.colguide{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.colguide summary{cursor:pointer;font-weight:600}
.colguide .tot{grid-template-columns:minmax(90px,auto) 1fr}
.impphotos{margin:14px 0;padding:14px;border-radius:12px;background:var(--soft)}
.tablewrap{overflow-x:auto;margin-top:14px;border:1px solid var(--line);border-radius:12px}
.imptable{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.imptable th,.imptable td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.imptable th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--soft)}
.imptable .num{text-align:end;font-variant-numeric:tabular-nums}
.imptable tr.error td{background:color-mix(in srgb,var(--sale) 6%,transparent)}
.imp-new{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.imp-update{background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.imp-error{background:color-mix(in srgb,var(--sale) 12%,transparent);color:var(--sale)}
.steps code{font:13px ui-monospace,Menlo,monospace;background:var(--soft);padding:1px 5px;border-radius:5px}

/* ===== 1.7 brand theme: one chosen colour (set in Admin > Store settings) drives the storefront =====
   --brand / --brand-ink / --brand-deep / --brand-lift are written into each page by ts_brand_css(). */
:root{--brand:#c8102e;--brand-ink:#ffffff;--brand-deep:#7c0a1c;--brand-lift:#d84a5d;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;--foot:#10151d;--foot-ink:#e8ecf1}
body{padding-block:0}
h1,h2,h3{font-family:var(--display);font-stretch:110%}
:focus-visible{outline-color:var(--brand)}

/* header */
.top .logo{text-decoration:none;color:inherit}
.logo-img{height:40px;width:auto;max-width:150px;object-fit:contain;display:block;flex:none}
.logo-txt{display:block;min-width:0}
.logo b{font-stretch:108%;font-weight:800}
.mark{background:var(--brand)}
.mark svg{color:var(--brand-ink)}
.count{background:var(--brand);color:var(--brand-ink)}

/* hero: the brand colour, with a lane marking that drives in once on load */
.hero{position:relative;isolation:isolate;overflow:hidden;color:var(--brand-ink);
  background:linear-gradient(135deg,var(--brand-deep) 0%,var(--brand) 72%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(115deg,transparent 0 44px,color-mix(in srgb,var(--brand-ink) 6%,transparent) 44px 46px)}
.hero.has-photo{background:linear-gradient(100deg,var(--brand-deep) 0%,color-mix(in srgb,var(--brand-deep) 82%,transparent) 48%,color-mix(in srgb,var(--brand) 20%,transparent) 100%),var(--hero-img) center/cover no-repeat,var(--brand-deep)}
.hero.has-photo::before{display:none}
.hero-in{display:grid;gap:18px;padding-block:34px 52px}
.hero h1{margin:0;color:inherit;font-size:clamp(34px,9vw,64px);font-weight:850;font-stretch:120%;line-height:.98;letter-spacing:-.025em;max-width:15ch}
.hero .perks{margin:0;gap:8px;color:inherit}
.hero .perks li{background:color-mix(in srgb,var(--brand-ink) 12%,transparent);border:1px solid color-mix(in srgb,var(--brand-ink) 24%,transparent);padding:6px 12px;border-radius:999px;font-weight:600;font-size:13px}
.hero .perks svg{color:inherit}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.btn-on-brand,.btn-outline-brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:12px;text-decoration:none;font-size:15px}
.btn-on-brand{background:var(--brand-ink);color:var(--brand);padding:13px 20px}
.btn-outline-brand{color:inherit;padding:11.5px 18px;border:1.5px solid color-mix(in srgb,var(--brand-ink) 55%,transparent)}
.btn-outline-brand svg{width:18px;height:18px}
.lane{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:18px;height:4px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--brand-ink) 75%,transparent) 0 34px,transparent 34px 64px)}
@media (prefers-reduced-motion:no-preference){
  .lane{animation:ts-drive 1.6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes ts-drive{from{background-position:-360px 0;opacity:0}to{background-position:0 0;opacity:1}}
}
@media (min-width:760px){.hero-in{padding-block:64px 88px}}

/* shopping area */
#modeBox .seg{margin-top:18px}
.seg button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);box-shadow:none}
.wtag{background:var(--brand);color:var(--brand-ink);text-transform:none;letter-spacing:0;font-size:12px}
.finder{top:calc(env(safe-area-inset-top,0px) + 61px)}
.chip:hover{border-color:var(--brand)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.card{border-radius:16px;transition:border-color .15s}
.card:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.ph{background:color-mix(in srgb,var(--brand) 7%,var(--soft))}
.ph .gl{color:color-mix(in srgb,var(--brand) 55%,var(--muted));opacity:.85}
.badge{background:var(--brand);color:var(--brand-ink);text-transform:none;letter-spacing:0;font-size:12px}
.badge.out{background:var(--ink);color:var(--surface)}
.plus{background:var(--brand);color:var(--brand-ink)}
.step{background:color-mix(in srgb,var(--brand) 10%,var(--soft))}
.big-btn{background:var(--brand);color:var(--brand-ink)}
.pill{background:var(--brand);color:var(--brand-ink)}
.eyebrow{text-transform:none;letter-spacing:0;font-size:13px;color:var(--brand)}
.sentref span{text-transform:none;letter-spacing:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .eyebrow{color:var(--brand-lift)}
  :root:not([data-theme="light"]) .top .logo-img{background:#fff;border-radius:8px;padding:3px}}
:root[data-theme="dark"] .eyebrow{color:var(--brand-lift)}
:root[data-theme="dark"] .top .logo-img{background:#fff;border-radius:8px;padding:3px}
/* wide logo (name included): the dark-mode version when there is one, else the logo on a small white panel */
.logo-wide{height:44px;width:auto;max-width:min(300px,62vw);object-fit:contain;object-position:left center;display:block;flex:none}
.logo-wide.lw-d{display:none}
@media (max-width:699px){.logo-wide{height:36px}}
.logo-sub{font-size:14px;color:var(--muted);padding-inline-start:12px;margin-inline-start:2px;border-inline-start:1px solid var(--line);white-space:nowrap}
@media (max-width:519px){.logo-sub{display:none}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-wide.has-dk{display:none}
  :root:not([data-theme="light"]) .logo-wide.lw-d{display:block}
  :root:not([data-theme="light"]) .top .logo-wide.lw-l:not(.has-dk){background:#fff;border-radius:8px;padding:4px 8px}}
:root[data-theme="dark"] .logo-wide.has-dk{display:none}
:root[data-theme="dark"] .logo-wide.lw-d{display:block}
:root[data-theme="dark"] .top .logo-wide.lw-l:not(.has-dk){background:#fff;border-radius:8px;padding:4px 8px}

/* footer */
.site-foot{background:var(--foot);color:var(--foot-ink);margin-top:44px;padding-block:34px 120px}
.foot-in{display:grid;gap:22px}
@media (min-width:760px){.foot-in{grid-template-columns:1fr 1fr;align-items:start}}
.foot-brand{display:flex;gap:12px;align-items:center;min-width:0}
.foot-brand b{font-family:var(--display);font-stretch:110%;font-size:18px;font-weight:800}
.foot-brand p{margin:2px 0 0;font-size:14px;color:color-mix(in srgb,var(--foot-ink) 65%,transparent)}
.site-foot .logo-img{height:46px;background:#fff;border-radius:10px;padding:4px}
.foot-brand.has-wide{flex-direction:column;align-items:flex-start;gap:8px}
.foot-brand.has-wide .logo-wide{height:48px}
.site-foot .logo-wide.lw-l:not(.has-dk){background:#fff;border-radius:10px;padding:6px 10px}
.site-foot .logo-wide.has-dk{display:none!important}
.site-foot .logo-wide.lw-d{display:block!important}   /* the footer is always dark */
.foot-info p{margin:0 0 8px;font-size:14px;color:color-mix(in srgb,var(--foot-ink) 75%,transparent)}
.foot-text{white-space:pre-line}
.foot-info a{color:var(--foot-ink);font-weight:600}
.site-foot .legal{text-align:start;padding:0;color:color-mix(in srgb,var(--foot-ink) 60%,transparent)}

/* admin: look & feel */
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.swatch{width:38px;height:38px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.swatches input[type=color]{width:46px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:2px;cursor:pointer}
.logo-prev{width:120px;height:72px;border-radius:12px;display:grid;place-items:center;overflow:hidden;
  background:repeating-conic-gradient(var(--soft) 0 25%,var(--surface) 0 50%) 0 0/16px 16px;border:1px solid var(--line)}
.logo-prev img{width:100%;height:100%;object-fit:contain;min-height:0}
.logo-prev.wide{width:240px;max-width:100%;padding:8px 10px;box-sizing:border-box}
.logo-prev.wide.dk{background:#10151d;border-color:#10151d}
.logo-prev.wide.dk .meter{color:#9aa3af}
.hero-prev{width:180px;height:90px;border-radius:12px;overflow:hidden;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font-size:13px}
.hero-prev img{width:100%;height:100%;object-fit:cover}
.mini-hero{border-radius:14px;padding:16px;color:var(--brand-ink);background:linear-gradient(135deg,var(--brand-deep),var(--brand) 72%);display:grid;gap:8px}
.mini-hero b{font-family:var(--display);font-stretch:118%;font-size:22px;line-height:1}
.mini-hero span{display:inline-block;justify-self:start;background:var(--brand-ink);color:var(--brand);border-radius:9px;padding:6px 12px;font-weight:700;font-size:13px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot-info a{text-decoration-thickness:1px;text-underline-offset:3px}

/* ===== 1.8 polish ===== */
/* compact banner on phones: products show on the first screen */
@media (max-width:759px){
  .hero-in{padding-block:22px 40px;gap:14px}
  .hero h1{font-size:clamp(28px,8.2vw,40px);max-width:none}
  .hero .perks{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .hero .perks::-webkit-scrollbar{display:none}
  .hero .perks li{flex:none;white-space:nowrap}
  .hero-cta{flex-wrap:nowrap}
  .btn-on-brand{padding:11px 16px;font-size:14px}
  .btn-outline-brand{padding:9.5px 14px;font-size:14px}
  .wide-only{display:none}
  .lane{bottom:12px;height:3px}
  #modeBox .seg{margin-top:14px}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
#shop{scroll-margin-top:72px}

/* add-to-cart feedback */
@media (prefers-reduced-motion:no-preference){
  .cart-btn.bump{animation:ts-bump .45s cubic-bezier(.3,1.6,.5,1)}
  @keyframes ts-bump{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
  .addtoast.show{animation:ts-pop .25s ease-out}
  @keyframes ts-pop{from{transform:translate(-50%,10px);opacity:0}}
}
.addtoast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:6;
  display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);background:var(--ink);color:var(--surface);
  padding-block:10px 10px;padding-inline:14px 10px;border-radius:14px;box-shadow:0 10px 30px rgba(8,14,24,.28);font-size:14px}
.addtoast svg{width:18px;height:18px;flex:none;color:var(--brand-lift)}
.addtoast>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addtoast button{flex:none;border:0;border-radius:9px;padding:7px 12px;font-weight:700;background:color-mix(in srgb,var(--surface) 16%,transparent);color:inherit}

/* free-delivery progress */
.pill{position:relative;overflow:hidden}
.pill.has-bar{padding-bottom:16px}
.pill-l{display:grid;gap:1px;text-align:start;min-width:0}
.pill-l small{font-weight:600;font-size:12px;opacity:.85}
.pbar{display:block;height:4px;border-radius:4px;background:color-mix(in srgb,currentColor 22%,transparent);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:inherit;background:currentColor;transition:width .35s ease}
.pill .pbar{position:absolute;inset-inline-start:18px;inset-inline-end:18px;bottom:8px}
.freebar{grid-column:1/-1;display:grid;gap:6px;margin-top:6px;font-size:14px;font-weight:600;color:var(--brand)}
.freebar.done{color:var(--ok)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .freebar:not(.done){color:var(--brand-lift)}}
:root[data-theme="dark"] .freebar:not(.done){color:var(--brand-lift)}
.addtoast{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 34px rgba(8,14,24,.22)}
/* over the cart (e.g. "Removed … Undo"), near the bottom of the screen */
body:has(#sheet .layer) .addtoast{z-index:12;bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.addtoast svg{color:var(--ok)}
.addtoast button{background:var(--soft);color:var(--ink)}
.ci .price s{display:block;margin-inline-start:0;line-height:1.1}

/* ===== 1.9 policies ===== */
.foot-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 20px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--foot-ink) 14%,transparent)}
.foot-links a{color:var(--foot-ink);font-size:14px;font-weight:600;text-decoration:none}
.foot-links a:hover,.foot-links a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.copyright{grid-column:1/-1;margin:0;font-size:13px;color:color-mix(in srgb,var(--foot-ink) 55%,transparent)}
.agree{font-size:13px;color:var(--muted);text-align:center;margin:8px 0 0}
.agree a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.doc-page .top-in .small-btn{text-decoration:none;color:var(--ink)}
.doc{max-width:68ch;margin:0 auto;padding-block:34px 20px;font-size:16px;line-height:1.65}
.doc h1{font-size:clamp(28px,6vw,40px);font-weight:850;font-stretch:115%;line-height:1.05;letter-spacing:-.02em;margin:0}
.doc-date{color:var(--muted);font-size:14px;margin:8px 0 26px}
.doc h2{font-size:19px;font-stretch:108%;margin:30px 0 8px}
.doc p,.doc ul,.doc ol{margin:0 0 12px}
.doc ul,.doc ol{padding-inline-start:22px}
.doc li{margin:4px 0}
.doc-foot{padding-block:26px 34px;margin-top:30px}
.doc-foot .wrap{display:grid;gap:14px}
.doc-foot .foot-links{border-top:0;padding-top:0}
.foot-small{margin:0;font-size:14px;color:color-mix(in srgb,var(--foot-ink) 75%,transparent)}
.poltext{font-size:15px;line-height:1.55;min-height:420px}

/* ===== 1.10 promotions ===== */
/* sale badges */
.ph .badge.off{inset-inline-start:auto;inset-inline-end:8px;background:var(--sale);color:#fff;font-variant-numeric:tabular-nums}
.save{display:block;margin-top:4px;font-weight:700;font-size:14px;color:var(--sale)}

/* announcement bar */
.annbar{background:var(--foot);color:var(--foot-ink);font-size:14px}
.ann-in{display:flex;align-items:center;justify-content:center;gap:10px;padding-block:8px;min-height:40px}
.ann-in p{margin:0;text-align:center;min-width:0;font-weight:600}
.ann-in a{color:var(--brand-lift);font-weight:700;text-underline-offset:3px;white-space:nowrap}
.ann-x{flex:none;border:0;background:none;color:inherit;opacity:.7;font-size:20px;line-height:1;width:32px;height:32px;border-radius:8px}
.ann-x:hover{opacity:1;background:color-mix(in srgb,var(--foot-ink) 12%,transparent)}

/* best sellers row */
.feat{margin-top:20px}
.feat h2{font-size:20px;font-weight:800;margin:0 0 10px}
.feat-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,46%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:-16px;padding:2px 16px 8px;scrollbar-width:none;overscroll-behavior-x:contain}
.feat-row::-webkit-scrollbar{display:none}
.feat-row .card{scroll-snap-align:start}
@media (min-width:760px){.feat-row{grid-auto-columns:minmax(190px,23%)}}

/* greeting line on the banner */
.greet{justify-self:start;margin:0;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:5px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--brand-ink) 14%,transparent)}

/* season: UAE National Day — flag stripes along the top and the red bar at the side */
.season-nationalday .hero{box-shadow:inset 10px 0 0 #ef3340}
.season-nationalday .hero::after{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:10px;
  background:linear-gradient(#00843d 0 33.4%,#ffffff 0 66.7%,#000000 0)}
.season-nationalday .hero-in{padding-top:40px}
.season-nationalday .greet::before{content:"";width:20px;height:13px;border-radius:2px;flex:none;
  background:linear-gradient(90deg,#ef3340 0 26%,transparent 0),linear-gradient(#00843d 0 33.4%,#ffffff 0 66.7%,#000000 0)}

/* season: Ramadan — night sky, crescent and gold */
.season-ramadan .hero{--brand-ink:#ffffff;color:#fff;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23f3d58a' d='M50 5A45 45 0 1 0 95 50A35 35 0 1 1 50 5Z'/%3E%3C/svg%3E") right 7% top 26px/clamp(64px,14vw,120px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='%23ffffff' fill-opacity='.55'%3E%3Ccircle cx='18' cy='26' r='1.4'/%3E%3Ccircle cx='70' cy='12' r='1'/%3E%3Ccircle cx='120' cy='44' r='1.6'/%3E%3Ccircle cx='200' cy='20' r='1.1'/%3E%3Ccircle cx='36' cy='96' r='1'/%3E%3Ccircle cx='96' cy='120' r='1.3'/%3E%3Ccircle cx='186' cy='104' r='1.6'/%3E%3Ccircle cx='14' cy='170' r='1.2'/%3E%3Ccircle cx='140' cy='176' r='1'/%3E%3Ccircle cx='206' cy='200' r='1.3'/%3E%3C/g%3E%3Cpath fill='%23f3d58a' fill-opacity='.85' d='M160 58l2.4 7.6 7.6 2.4-7.6 2.4-2.4 7.6-2.4-7.6-7.6-2.4 7.6-2.4z'/%3E%3Cpath fill='%23f3d58a' fill-opacity='.7' d='M58 150l1.8 5.2 5.2 1.8-5.2 1.8-1.8 5.2-1.8-5.2-5.2-1.8 5.2-1.8z'/%3E%3C/svg%3E") 0 0/220px,linear-gradient(160deg,#0e1433 0%,#1c2a63 100%)}
.season-ramadan .hero::before{display:none}
.season-ramadan .hero.has-photo{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23f3d58a' d='M50 5A45 45 0 1 0 95 50A35 35 0 1 1 50 5Z'/%3E%3C/svg%3E") right 7% top 26px/clamp(64px,14vw,120px) no-repeat,linear-gradient(100deg,rgba(14,20,51,.96) 0%,rgba(14,20,51,.8) 50%,rgba(28,42,99,.35) 100%),var(--hero-img) center/cover no-repeat,#0e1433}
.season-ramadan .greet{background:rgba(243,213,138,.16);color:#f3d58a}
.season-ramadan .btn-on-brand{background:#f3d58a;color:#0e1433}
.season-ramadan .lane{background:repeating-linear-gradient(90deg,rgba(243,213,138,.8) 0 34px,transparent 34px 64px)}

/* season: Eid — your colours with gold sparkles */
.season-eid .hero::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23f3d58a'%3E%3Cpath fill-opacity='.9' d='M30 30l2.6 8.4 8.4 2.6-8.4 2.6-2.6 8.4-2.6-8.4-8.4-2.6 8.4-2.6z'/%3E%3Cpath fill-opacity='.7' d='M150 70l1.8 5.6 5.6 1.8-5.6 1.8-1.8 5.6-1.8-5.6-5.6-1.8 5.6-1.8z'/%3E%3Cpath fill-opacity='.8' d='M90 150l2 6.4 6.4 2-6.4 2-2 6.4-2-6.4-6.4-2 6.4-2z'/%3E%3Ccircle cx='110' cy='24' r='2' fill-opacity='.6'/%3E%3Ccircle cx='176' cy='150' r='2.4' fill-opacity='.55'/%3E%3Ccircle cx='40' cy='120' r='1.6' fill-opacity='.6'/%3E%3Ccircle cx='70' cy='80' r='1.3' fill-opacity='.5'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.45'%3E%3Ccircle cx='130' cy='110' r='1.4'/%3E%3Ccircle cx='12' cy='184' r='1.2'/%3E%3Ccircle cx='190' cy='40' r='1.2'/%3E%3C/g%3E%3C/svg%3E") 0 0/200px}
.season-eid .greet{background:#f3d58a;color:#3a2a05}
.season-eid .lane{background:repeating-linear-gradient(90deg,rgba(243,213,138,.9) 0 34px,transparent 34px 64px)}
.icon-btn.star{font-size:17px;color:var(--muted)}
.icon-btn.star.on{color:#d69e2e;border-color:#d69e2e}
.season-nationalday .hero{box-shadow:inset 10px 0 0 #ef3340,inset 13px 0 0 #ffffff}
.feat-row{scroll-padding-inline:16px}

/* ---------- 1.12: photos, options, stock ---------- */
.ph .phn{position:absolute;inset-inline-end:8px;bottom:8px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:rgba(15,26,42,.72);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.ph .phn::before{content:"";width:10px;height:8px;margin-inline-end:3px;border:1.6px solid currentColor;border-radius:2px;display:inline-block;vertical-align:-1px}
.ph .phn{display:inline-flex;align-items:center;justify-content:center}
.badge.low{background:#fff4e0;color:#8a4b00;text-transform:none;letter-spacing:0}
.ci .opts{font-size:12px;color:var(--muted);margin-top:2px}
.price .from{font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted)}
.plus .pn{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}

/* product panel gallery */
.pd .gal-wrap{aspect-ratio:auto;display:block;background:#fff}
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gal::-webkit-scrollbar{display:none}
.gal .gi{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;max-height:min(52vh,520px);border:0;padding:0;margin:0;background:#fff;display:grid;place-items:center;cursor:zoom-in}
.gal.one .gi{width:100%}
.gal .gi img{width:100%;height:100%;object-fit:contain;display:block}
@media (hover:hover) and (pointer:fine){
  .gal .gi{overflow:hidden;cursor:crosshair}
  .gal .gi img{transition:transform .2s ease}
  .gal .gi.hz img{transform:scale(var(--hz,2.2))}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){ .gal .gi img{transition:none} }
.gal .gi .gl{width:36%;color:var(--muted);opacity:.75}
.dots{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:8px;display:flex;justify-content:center;gap:4px;pointer-events:none}
.dots button{pointer-events:auto;width:22px;height:22px;border:0;background:none;padding:0;display:grid;place-items:center}
.dots button::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(15,26,42,.28);transition:width .2s,background .2s}
.dots button[aria-current="true"]::after{width:18px;border-radius:4px;background:rgba(15,26,42,.8)}

/* full-screen photo */
.zoom{position:fixed;inset:0;z-index:30;background:#000;display:flex;flex-direction:column;justify-content:center}
.zoom .x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));inset-inline-end:12px;z-index:2;background:rgba(255,255,255,.14);color:#fff;border:0}
.zgal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:100%}
.zgal::-webkit-scrollbar{display:none}
.zi{flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center;height:100%;overflow:auto;touch-action:pan-x pan-y pinch-zoom}
.zi img{max-width:100%;max-height:100%;object-fit:contain}
.zc{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);color:#fff;font-size:13px;font-weight:600;background:rgba(255,255,255,.14);padding:4px 10px;border-radius:999px}

/* options (fragrance, colour, size…) */
.vpick{margin-top:16px}
.vlab{font-size:14px;color:var(--muted)}
.vlab b{color:var(--ink)}
.vchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.vchip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:8px 14px;font-weight:600;font-size:14px;line-height:1.2;text-align:start}
.vchip small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.vchip[aria-pressed="true"]{border-color:var(--brand,var(--ink));box-shadow:inset 0 0 0 1px var(--brand,var(--ink))}
.vchip.out{color:var(--muted);border-style:dashed}
.vchip.out[aria-disabled="true"]{cursor:not-allowed}
.vchip.out[aria-disabled="true"] .vn{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.lowstock{margin:12px 0 0;font-size:14px;font-weight:600;color:#a35a00}
.ln .lv{display:block;font-size:13px;color:var(--muted)}
.step button:disabled{opacity:.35;cursor:default}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge.low{background:#3a2a10;color:#ffcf8a} :root:not([data-theme="light"]) .lowstock{color:#ffb85c}}
:root[data-theme="dark"] .badge.low{background:#3a2a10;color:#ffcf8a}
:root[data-theme="dark"] .lowstock{color:#ffb85c}

/* ---------- 1.12 admin: products ---------- */
.tags .opill{background:var(--soft);color:var(--muted)}
.opill.hid,.tags .opill.hid{background:var(--ink);color:var(--surface)}
.opill.sale,.tags .opill.sale{background:color-mix(in srgb,var(--sale) 14%,transparent);color:var(--sale)}
.ilist .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ilist li.is-hidden .thumb,.ilist li.is-hidden .ln b{opacity:.55}
.ilist li.is-sel{background:color-mix(in srgb,var(--brand,var(--ok)) 7%,transparent)}
.selbox{width:20px;height:20px;flex:none;accent-color:var(--brand,var(--ok))}
.stock.low{background:#fff4e0;color:#8a4b00}
.bulkbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding:6px 0}
.bulkbar.on{position:sticky;top:72px;z-index:3;background:var(--surface);padding:10px 12px;border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px rgba(8,14,24,.08)}
.bulkbar select,.bulkbar input{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);font:inherit;font-size:14px;min-width:0}
.bulkbar select{flex:1 1 180px}
.bulkbar .bconfirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:600;font-size:14px}
.check.sm{font-size:14px;gap:8px}
.check.sm input{width:18px;height:18px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:520px){.three{grid-template-columns:1fr 1fr}.three>:first-child{grid-column:1/-1}}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.phi{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.phi img{width:100%;height:100%;object-fit:contain;display:block}
.phi.empty{display:grid;place-items:center;align-content:center;gap:4px;background:var(--soft);color:var(--muted);font-size:12px;grid-column:span 2;aspect-ratio:auto;padding:14px}
.phi.empty .gl{width:36px;height:36px}
.phi .maintag{position:absolute;inset-inline-start:6px;top:6px;background:var(--ink);color:var(--surface);font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px}
.phb{position:absolute;width:28px;height:28px;border-radius:8px;border:0;background:rgba(15,26,42,.72);color:#fff;font-size:14px;display:grid;place-items:center;padding:0}
.phb.rm{inset-inline-end:5px;top:5px}
.phb.main{inset-inline-start:5px;top:5px}
.phb.left{inset-inline-start:5px;bottom:5px}
.vhead{display:none}
.vrow{display:grid;grid-template-columns:1fr 1fr 34px;grid-template-areas:"n n x" "p q q" "c s s";gap:6px 8px;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:var(--bg)}
.vrow input:not([type=checkbox]){padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);width:100%;min-width:0;font:inherit;font-size:14px}
.vrow .v-name{grid-area:n;font-weight:600}
.vrow .v-pricef{grid-area:p}.vrow .v-qtyf{grid-area:q}.vrow .v-codef{grid-area:c}
.vf{display:grid;gap:2px;min-width:0}
.vf small{font-size:11px;font-weight:600;color:var(--muted)}
.subh small{font-family:var(--body);font-size:13px;font-weight:400;color:var(--muted)}
.vrow .v-stockl{grid-area:s}
.vrow .icon-btn{grid-area:x}
@media (min-width:700px){
  .vhead{display:grid;grid-template-columns:2fr 1.1fr 1.3fr 1.2fr 96px 34px;gap:8px;font-size:12px;font-weight:600;color:var(--muted);padding:0 2px 4px}
  .vhead small{font-weight:400}
  .vrow{grid-template-columns:2fr 1.1fr 1.3fr 1.2fr 96px 34px;grid-template-areas:"n p q c s x";padding:0;border:0;background:none;margin-bottom:6px;align-items:center}
  .vf small{display:none}
}
.reopt{padding:12px 14px;border:1px dashed var(--line);border-radius:12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stock.low{background:#3a2a10;color:#ffcf8a}}
:root[data-theme="dark"] .stock.low{background:#3a2a10;color:#ffcf8a}

/* ---------- 1.13: maintenance and updates ---------- */
.previewbar{background:#1f2937;color:#fff;font-size:13px;padding:8px 16px;text-align:center}
.previewbar a{color:#fff;font-weight:700;margin-inline-start:6px}
.maint-body{padding:0;min-height:100vh;min-height:100dvh;background:linear-gradient(160deg,var(--brand-deep,#0f1a2a),var(--brand,#c8102e))}
.maint{min-height:100vh;min-height:100dvh;display:grid;place-items:center;align-content:center;gap:18px;padding:32px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.maint-card{background:var(--surface);color:var(--ink);border-radius:22px;padding:34px 26px 28px;max-width:440px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(8,14,24,.28)}
.maint-logo{max-height:64px;max-width:200px;object-fit:contain;margin:0 auto 10px;display:block}
.maint-mark{width:52px;height:52px;margin:0 auto 10px;display:grid}
.maint-name{margin:0;font-weight:600;color:var(--muted);font-size:14px}
.maint h1{font-family:var(--display,inherit);font-stretch:115%;font-size:34px;margin:6px 0 10px;line-height:1.05}
.maint-msg{color:var(--muted);margin:0 0 22px}
.maint-wa{display:inline-flex;width:100%;justify-content:center}
.maint-wa svg{width:20px;height:20px}
.maint-foot{color:var(--brand-ink,#fff);opacity:.8;font-size:13px;margin:0}
.maintbar{border-color:var(--sale);border-style:solid}
.upd-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--bg)}
.upd-notes{font-size:14px;color:var(--muted);max-height:260px;overflow:auto;padding-top:6px;line-height:1.5}
.upd-ok{border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent);border-radius:14px;padding:16px}
.rst-box{flex:1 1 100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}

/* ---------- 1.13.1: admin layout — sidebar on computers, bottom bar on phones ---------- */
.adm{min-height:100vh}
.adm .ni,#morehost .ni{width:20px;height:20px;flex:none}
.side{display:none}
.mtop .top-in{padding-inline:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px}
.mtop .icon-btn{width:40px;height:40px;color:inherit}
.adm-main{padding:4px 16px calc(96px + env(safe-area-inset-bottom,0px));max-width:1000px;margin:0 auto}
.page-title{display:flex;align-items:center;gap:10px;font-size:22px;margin:18px 0 4px}
.page-title .ni{width:24px;height:24px;color:var(--brand,var(--ink))}
.adm-main .panel{margin-top:14px}
.mver{margin-top:14px}
.snav{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:var(--ink);text-decoration:none;font:inherit;font-weight:600;font-size:15px;padding:10px 12px;border-radius:10px;text-align:start;cursor:pointer;position:relative}
.snav span:not(.nbadge):not(.ncount):not(.ndot){flex:1;min-width:0}
@media (hover:hover){ .snav:hover{background:var(--soft)} }   /* phones keep a "hover" where the finger was: mouse only (1.69.2) */
.snav[aria-selected="true"]{background:color-mix(in srgb,var(--brand,var(--ink)) 12%,transparent);color:var(--brand,var(--ink))}
.snav[aria-selected="true"]::before{content:"";position:absolute;inset-inline-start:-12px;top:8px;bottom:8px;width:4px;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:4px;border-end-end-radius:4px;background:var(--brand,var(--ink))}
.nbadge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand,var(--sale));color:var(--brand-ink,#fff);font-size:11px;font-weight:800;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.ncount{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ndot{width:8px;height:8px;border-radius:50%;background:var(--sale);flex:none!important;display:inline-block}
.bnav{position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(8,14,24,.06)}
.bn{position:relative;border:0;background:none;color:var(--muted);display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:12px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.bn .ni{width:22px;height:22px}
.bn[aria-current="page"]{color:var(--brand,var(--ink))}
.bn[aria-current="page"] .ni{background:color-mix(in srgb,var(--brand,var(--ink)) 13%,transparent);border-radius:999px;padding:3px 14px;width:52px;height:28px;box-sizing:border-box}
.bn .nbadge,.bn .ndot{position:absolute;top:2px;inset-inline-start:calc(50% + 10px)}
.more-layer{position:fixed;inset:0;z-index:30}
.more-layer .scrim{position:absolute;inset:0;background:rgba(8,14,24,.45)}
.more-sheet{position:absolute;inset-inline-start:8px;inset-inline-end:8px;bottom:calc(76px + env(safe-area-inset-bottom,0px));background:var(--surface);border-radius:18px;padding:10px;display:grid;gap:2px;box-shadow:0 18px 50px rgba(8,14,24,.3);animation:moreIn .18s ease-out}
.more-sheet .snav{padding:13px 14px}
.more-sheet .snav[aria-selected="true"]::before{display:none}
@keyframes moreIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:900px){
  .adm{display:grid;grid-template-columns:252px minmax(0,1fr)}
  .side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;background:var(--surface);border-inline-end:1px solid var(--line);padding:18px 12px}
  .side-logo{padding:4px 6px 18px;border-bottom:1px solid var(--line);margin-bottom:12px}
  .side-logo b{white-space:normal}
  .side-nav{display:grid;gap:2px;margin:0;overflow:visible}
  .side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:2px}
  .side-ver{padding:8px 12px 0;margin:0}
  .mtop,.bnav,.more-layer,.mver{display:none}
  .adm-main{padding:12px 32px 60px;width:100%}
  .page-title{font-size:26px;margin-top:22px}
  .bulkbar.on{top:12px}
}
@media (max-width:899px){.bulkbar.on{top:68px}}

/* ---------- 1.13.2: even product cards ---------- */
.ci .cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci .opts{display:block;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci .cf{margin-top:auto;padding-top:8px;align-items:flex-end;min-height:52px}
.ci .cf .price,.ci .cf .trade{align-self:flex-end}
.ci .cf .price{min-width:0}
.ci .price .from{display:block;line-height:1.1}

/* ---------- 1.13.3: admin uses neutral colours (the brand colour is for the store only) ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.admin{--brand:#e5e7eb;--brand-ink:#10151d;--brand-deep:#9ca3af;--brand-lift:#f3f4f6}}
:root[data-theme="dark"] body.admin{--brand:#e5e7eb;--brand-ink:#10151d;--brand-deep:#9ca3af;--brand-lift:#f3f4f6}

/* ---------- 1.13.4: store settings sections ---------- */
.subnav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:-4px -18px 14px;padding:0 18px 12px;border-bottom:1px solid var(--line)}
.subnav::-webkit-scrollbar{display:none}
.subnav .chip{flex:none;display:inline-flex;align-items:center;gap:6px}
.subnav .chip[aria-selected="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.setsec .sech{font-size:19px;margin:4px 0 14px}
.savebar{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:5;margin:22px -18px -18px;padding:12px 18px;background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r);display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 14px}
.savebar .meter{margin:0;flex:1 1 200px}
.savebar .err-msg{flex:1 1 100%}
.savebar .big-btn{width:auto;padding:12px 22px}
@media (min-width:900px){.subnav{flex-wrap:wrap;overflow:visible}.savebar{bottom:0}}
@media (max-width:899px){.savebar{bottom:calc(62px + env(safe-area-inset-bottom,0px));padding:10px 14px;margin-inline:-18px}.savebar .meter{display:none}.savebar .big-btn{width:100%}}

/* ---------- 1.14: share, tracking, plain page content ---------- */
.ssr{padding-block:24px}
.js #root>.ssr{visibility:hidden}
.ssr h1{font-size:26px;margin:0 0 8px}
.ssr img{max-width:min(100%,400px);height:auto;border-radius:12px;background:#fff}
.ssr-list{padding-inline-start:18px}
.sharebtn{display:inline-flex;align-items:center;gap:6px;margin:6px 0 2px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sharebtn svg{width:15px;height:15px}
.f select{font:inherit;font-weight:400;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.tot small.muted{color:var(--muted);font-weight:500}
.track{max-width:640px;padding-block:28px 60px}
.track h1{margin-bottom:16px}
.track-form{display:grid;gap:12px;grid-template-columns:1fr;align-items:end}
@media (min-width:560px){.track-form{grid-template-columns:1fr auto}.track-form .big-btn{width:auto;padding-inline:26px}}
.track-form input{text-transform:uppercase;letter-spacing:.04em}
.track-err{margin-top:12px}
.track-card{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.track-card h2{font-size:22px;margin:4px 0 10px}
.track-card.is-cancelled h2{color:var(--sale)}
.track-note{background:var(--soft);border-radius:12px;padding:10px 12px;font-weight:500}
.tsteps{list-style:none;padding:0;margin:16px 0;display:grid;gap:0}
.tsteps li{position:relative;padding-block:0 18px;padding-inline:30px 0;color:var(--muted)}
.tsteps li:last-child{padding-bottom:4px}
.tsteps li::before{content:"";position:absolute;inset-inline-start:8px;top:18px;bottom:-2px;width:2px;background:var(--line)}
.tsteps li:last-child::before{display:none}
.tsteps li.done::before{background:var(--brand,var(--ok))}
.tsteps .tdot{position:absolute;inset-inline-start:1px;top:2px;width:16px;height:16px;border-radius:50%;border:2px solid var(--line);background:var(--surface);box-sizing:border-box}
.tsteps li.done .tdot{border-color:var(--brand,var(--ok));background:var(--brand,var(--ok))}
.tsteps li.current .tdot{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand,var(--ok)) 22%,transparent)}
.tsteps li.done b{color:var(--ink)}
.tsteps b{display:block;font-weight:600}
.tsteps small{font-size:13px}
.track-lines{margin:6px 0}
.track-total{display:flex;justify-content:space-between;font-size:17px;margin:12px 0 16px}

/* ---------- 1.14 admin: visitors, delivery areas ---------- */
.admin{--chart:#334155}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .admin{--chart:#cbd5e1}}
:root[data-theme="dark"] .admin{--chart:#cbd5e1}
#panel{position:relative}
.stranges{margin:0 0 12px;padding-inline:0;margin-inline:0;flex-wrap:wrap}
.kpis{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.chart{width:100%;overflow:hidden;margin-top:4px}
.chart svg{display:block}
.chart .cgrid{stroke:var(--line);stroke-width:1}
.chart .caxis{stroke:var(--muted);stroke-width:1;opacity:.5}
.chart .clab{fill:var(--muted);font-size:11px;font-family:var(--body)}
.chart .cbar{fill:var(--chart)}
.chart .chit{fill:transparent;cursor:pointer}
.chart .chit.on{fill:color-mix(in srgb,var(--chart) 8%,transparent)}
.ctip{position:absolute;z-index:4;pointer-events:none;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13px;box-shadow:0 8px 24px rgba(8,14,24,.14);white-space:nowrap}
.ctip b{display:block;font-size:12px;color:var(--muted);font-weight:600}
.stgrid{display:grid;gap:4px 28px}
@media (min-width:900px){.stgrid{grid-template-columns:1fr 1fr}}
.sttable td{vertical-align:top}
.blist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.blist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:14px}
.bl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-val{font-weight:700;font-variant-numeric:tabular-nums}
.bl-val small{font-weight:500;color:var(--muted);margin-inline-start:4px}
.bl-bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.bl-bar i{display:block;height:100%;border-radius:3px;background:var(--chart)}
.zhead{display:grid;grid-template-columns:1fr 1fr 1fr 34px 34px;gap:6px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px}
.zrow{display:grid;grid-template-columns:1fr 1fr 1fr 34px 34px;gap:6px;align-items:center;margin-bottom:6px}
.zrow input:not([type=checkbox]){padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);width:100%;min-width:0;font:inherit;font-size:14px}
.zrow .check{justify-content:center}
.doc .tsteps,.doc .track-lines{padding-inline-start:0;margin-inline-start:0}
.doc .track-lines li{padding-inline-start:0}

/* ---------- 1.15: product pages ---------- */
.pp{padding-block:14px 40px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs .cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw;color:var(--ink)}
.pp-grid{display:grid;gap:18px}
.pp-media .gal-wrap{aspect-ratio:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pp-media .gal .gi{max-height:none}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.thumbs button{flex:none;width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:12px;background:#fff;overflow:hidden;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.thumbs button[aria-current="true"]{border-color:var(--brand,var(--ink))}
.thumbs img{width:100%;height:100%;object-fit:contain}
.pp-info{min-width:0}
.pp-title{font-size:clamp(22px,4.6vw,30px);line-height:1.15;margin:4px 0 10px;letter-spacing:-.01em}
.pp-price .price{font-size:26px;display:block}
.pp .trade{display:block;font-size:16px;margin:6px 0}
.instock{margin:12px 0 0;font-size:14px;font-weight:600}
.instock .ok{color:var(--ok)}
.instock .lowstock{margin:0}
.pp-info .addrow{margin-top:16px}
.askwa{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;text-decoration:none;color:var(--ink)}
.askwa svg{width:18px;height:18px;color:var(--wa)}
.pp-del{margin:14px 0 0;font-size:14px;color:var(--muted);padding:10px 12px;background:var(--soft);border-radius:12px}
.pp-share{margin-top:10px}
.pp-desc{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.pp-desc h2,.pp-more h2{font-size:18px;margin:0 0 8px}
.pp-desc .desc{color:var(--ink);line-height:1.6}
.pp-more{margin-top:30px}
.pp-bar{display:none}
@media (max-width:759px){
  body.on-product .cartbar{display:none}
  .pp-bar{display:flex;align-items:center;gap:12px;position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(8,14,24,.08)}
  .pp-bar-price{display:grid;line-height:1.1;flex:none}
  .pp-bar-price b{font-family:var(--display);font-size:18px}
  .pp-bar-price s{font-size:12px;color:var(--muted)}
  .pp-bar .addrow{flex:1;margin:0}
  .pp-info .buyrow{display:none}
  body.on-product{padding-bottom:90px}
}
@media (min-width:760px){
  .pp-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:start}
  .pp-media{position:sticky;top:84px}
  .pp{padding-top:20px}
}
@media (max-width:759px){.pp .thumbs{display:none}}
@media (min-width:760px){.pp .dots{display:none}}

/* ---------- 1.15.1: option photos ---------- */
.vchip{display:inline-flex;align-items:center;gap:8px}
.vchip .vt{display:grid;text-align:start}
.vchip .vimg{width:30px;height:30px;border-radius:7px;object-fit:contain;background:#fff;flex:none;margin-block:-3px -3px;margin-inline:-6px 0}
.vchip.out .vimg{opacity:.45}
.vrow{grid-template-columns:64px 1fr 1fr 34px;grid-template-areas:"ph n n x" "ph p q q" "c c s s"}
.vph{grid-area:ph;position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;background:#fff;border:1px dashed var(--line);align-self:start}
.vph img{width:100%;height:100%;object-fit:contain;display:block}
.vph .phb{width:22px;height:22px;font-size:11px;inset-inline-end:3px;top:3px}
.vph-add{display:grid;place-items:center;width:100%;height:100%;cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);text-align:center}
@media (min-width:700px){
  .vhead{grid-template-columns:52px 2fr 1.1fr 1.3fr 1.2fr 96px 34px}
  .vrow{grid-template-columns:52px 2fr 1.1fr 1.3fr 1.2fr 96px 34px;grid-template-areas:"ph n p q c s x"}
  .vph{width:52px;height:52px}
}

/* ---------- 1.15.2: footer ---------- */
.site-foot{padding-block:0 120px}
.foot-cta{background:var(--brand);color:var(--brand-ink)}
.foot-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-block:22px}
.foot-cta b{display:block;font-family:var(--display);font-stretch:110%;font-size:20px;line-height:1.15}
.foot-cta span{display:block;margin-top:4px;font-size:14px;opacity:.85}
.foot-cta .big-btn{width:auto;flex:none;padding:13px 20px}
.foot-cta .big-btn svg{width:20px;height:20px}
.foot-trust{list-style:none;margin:0;padding:30px 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;border-bottom:1px solid color-mix(in srgb,var(--foot-ink) 12%,transparent)}
.foot-trust li{display:flex;gap:10px;align-items:flex-start;min-width:0}
.foot-trust svg{width:26px;height:26px;flex:none;color:var(--brand-lift,var(--foot-ink))}
.foot-trust b{display:block;font-size:14px;line-height:1.25}
.foot-trust span{display:block;font-size:13px;color:color-mix(in srgb,var(--foot-ink) 65%,transparent);margin-top:2px}
.foot-trust a{color:inherit}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;padding:28px 0}
.foot-brand-col{grid-column:1/-1;display:grid;gap:14px;align-content:start}
.foot-addr{display:flex;gap:8px;margin:0;font-size:14px;color:color-mix(in srgb,var(--foot-ink) 75%,transparent);white-space:pre-line}
.foot-addr svg{width:18px;height:18px;flex:none;margin-top:1px}
.socials{display:flex;gap:10px}
.soc{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--foot-ink);background:color-mix(in srgb,var(--foot-ink) 10%,transparent);transition:background .15s}
.soc:hover{background:color-mix(in srgb,var(--foot-ink) 20%,transparent)}
.soc svg{width:20px;height:20px}
.foot-col h3{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--foot-ink) 55%,transparent);margin:0 0 10px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-col a{color:var(--foot-ink);font-size:14px;font-weight:500;text-decoration:none;overflow-wrap:anywhere}
.foot-col a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--foot-ink) 12%,transparent)}
.foot-bottom p{margin:0}
.foot-bottom .legal{font-size:13px;color:color-mix(in srgb,var(--foot-ink) 55%,transparent)}
@media (min-width:760px){
  .foot-trust{grid-template-columns:repeat(4,1fr)}
  .foot-cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
  .foot-brand-col{grid-column:auto}
}
@media (max-width:759px){body.on-product .site-foot{padding-bottom:110px}}
@media (min-width:760px){.site-foot{padding-bottom:90px}}
.addtoast.leaving{opacity:0;transition:opacity .2s}

/* ===== 1.16: colour style "Charcoal + accent" (body.th-dark, the default) =====
   Charcoal carries the page; the brand colour is kept for the key spots: logo, Shop button, badges,
   cart count, banner stripe. :where() keeps these rules weak so seasonal themes still win. */
:where(.th-dark){--chr:#16181d;--chr-2:#22252c;--chr-ink:#ffffff;--tile:#ffffff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :where(.th-dark){--chr:#e9ecf1;--chr-2:#cfd4dc;--chr-ink:#0d0f13;--tile:#ffffff}}
:root[data-theme="dark"] :where(.th-dark){--chr:#e9ecf1;--chr-2:#cfd4dc;--chr-ink:#0d0f13}
:where(.th-dark) .hero{color:#fff;background:radial-gradient(120% 130% at 100% 0%,color-mix(in srgb,var(--brand) 42%,transparent) 0%,transparent 58%),linear-gradient(160deg,#1d1f25 0%,#0e0f12 100%)}
:where(.th-dark) .hero.has-photo{background:linear-gradient(100deg,rgba(14,15,18,.96) 0%,rgba(14,15,18,.8) 48%,rgba(14,15,18,.3) 100%),var(--hero-img) center/cover no-repeat,#0e0f12}
:where(.th-dark) .hero::before{background:repeating-linear-gradient(115deg,transparent 0 44px,rgba(255,255,255,.035) 44px 46px)}
:where(.th-dark) .hero .perks li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
:where(.th-dark) .hero .perks svg{color:var(--brand-lift)}
:where(.th-dark) .btn-on-brand{background:var(--brand);color:var(--brand-ink)}
:where(.th-dark) .btn-outline-brand{border-color:rgba(255,255,255,.35)}
:where(.th-dark) .lane{background:repeating-linear-gradient(90deg,var(--brand) 0 34px,transparent 34px 64px)}
:where(.th-dark) .greet{background:rgba(255,255,255,.1);color:#fff}
:where(.th-dark) .seg button[aria-pressed="true"]{background:var(--chr);color:var(--chr-ink)}
:where(.th-dark) .wtag{background:var(--chr);color:var(--chr-ink)}
:where(.th-dark) .chip:hover{border-color:var(--chr)}
:where(.th-dark) .chip[aria-pressed="true"]{background:var(--chr);border-color:var(--chr);color:var(--chr-ink)}
:where(.th-dark) .card:hover{border-color:color-mix(in srgb,var(--chr) 35%,var(--line))}
:where(.th-dark) .ph{background:var(--tile)}
:where(.th-dark) .card .ph{border-bottom:1px solid var(--line)}
:where(.th-dark) .ph .gl{color:#9aa1ac;opacity:.9}
:where(.th-dark) .badge{background:var(--chr);color:var(--chr-ink)}
:where(.th-dark) .badge.off{background:var(--brand);color:var(--brand-ink)}
:where(.th-dark) .plus{background:var(--chr);color:var(--chr-ink)}
:where(.th-dark) .plus:disabled{background:var(--soft);color:var(--muted);opacity:1}
:where(.th-dark) .step{background:var(--soft)}
:where(.th-dark) .big-btn{background:var(--chr);color:var(--chr-ink)}
:where(.th-dark) .big-btn.wa{background:var(--wa);color:var(--wa-ink)}
:where(.th-dark) .pill{background:var(--chr);color:var(--chr-ink)}
:where(.th-dark) .pill .pbar i{background:var(--brand-lift)}
:where(.th-dark) .eyebrow{color:var(--muted)}
:where(.th-dark) .freebar{color:var(--ink)}
:where(.th-dark) .vchip[aria-pressed="true"]{border-color:var(--chr);box-shadow:inset 0 0 0 1px var(--chr)}
:where(.th-dark) .thumbs button[aria-current="true"]{border-color:var(--chr)}
:where(.th-dark) .dots button[aria-current="true"]::after{background:#16181d}
:where(.th-dark) .tsteps li.done::before,:where(.th-dark) .tsteps li.done .tdot{background:var(--chr);border-color:var(--chr)}
:where(.th-dark) .tsteps li.current .tdot{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 25%,transparent)}
:where(.th-dark).maint-body{background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--brand) 45%,transparent) 0%,transparent 60%),linear-gradient(160deg,#1d1f25,#0e0f12)}
:where(.th-dark) .maint-foot{color:#fff}
/* admin preview of the style */
.mini-hero.dk{color:#fff;background:radial-gradient(120% 130% at 100% 0%,color-mix(in srgb,var(--brand) 45%,transparent) 0%,transparent 60%),linear-gradient(160deg,#1d1f25,#0e0f12)}
.mini-hero.dk span{background:var(--brand);color:var(--brand-ink)}

/* product cards (1.16): the + button sits on the photo's corner and grows into − 1 + when the product is in the cart,
   so every card keeps the same layout and the price is never squeezed */
.ph-ctl{position:absolute;inset-inline-end:8px;bottom:8px;z-index:2}
.ph-ctl .plus{width:38px;height:38px;border-radius:12px;box-shadow:0 4px 12px rgba(8,14,24,.22)}
.ph-ctl .step{background:var(--surface);color:var(--ink);border-radius:12px;box-shadow:0 4px 14px rgba(8,14,24,.22);height:38px}
.ph-ctl .step button{width:34px;height:38px;color:var(--ink)}
.ph-ctl .plus .pn{font-size:15px}
.ph .phn{inset-inline-end:auto;inset-inline-start:8px}
.ci .cf{min-height:0;padding-top:6px}

/* ---------- 1.17: coming-soon page ---------- */
.soon{align-content:center}
.soon-in{max-width:560px;width:100%;text-align:center;color:#fff;display:grid;justify-items:center;gap:6px}
.soon-logo{max-height:84px;max-width:240px;object-fit:contain;background:#fff;border-radius:16px;padding:8px 12px;margin-bottom:10px}
.soon .maint-mark{width:60px;height:60px;margin-bottom:10px}
.soon-name{margin:0;font-weight:600;opacity:.8;font-size:15px}
.soon h1{font-family:var(--display);font-stretch:118%;font-weight:900;font-size:clamp(44px,13vw,84px);line-height:.95;letter-spacing:-.02em;margin:4px 0 8px}
.soon-when{margin:0;font-size:17px;font-weight:600}
.countdown{display:flex;gap:10px;margin:14px 0 6px}
.countdown div{min-width:68px;padding:10px 6px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:grid;gap:2px}
.countdown b{font-family:var(--display);font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.countdown span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.75}
.soon-msg{max-width:440px;margin:12px 0 4px;opacity:.88;line-height:1.55}
.soon-cats{list-style:none;padding:0;margin:10px 0 4px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.soon-cats li{font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.soon-actions{display:grid;gap:12px;justify-items:center;margin-top:16px;width:100%}
.soon-actions .big-btn{width:auto;padding:14px 24px}
.soon-actions .big-btn svg{width:20px;height:20px}
.soon-social{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px}
.soon-social a{color:#fff;font-weight:600;font-size:14px;text-underline-offset:3px}
.soon-body .maint-foot{color:rgba(255,255,255,.7)}
@media (max-width:420px){.countdown{gap:6px}.countdown div{min-width:62px}.countdown b{font-size:24px}}
.seclog .loc{display:block;font-size:14px;margin:2px 0}
.seclog .loc .opill{margin-inline-start:4px;font-size:11px;padding:1px 8px}
.seclog li.away .ln b{color:var(--sale)}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pvlist li{gap:10px}

/* ---------- 1.19: discount codes ---------- */
.dcode{margin:12px 0 0;border:1px dashed var(--line);border-radius:12px;padding:10px 12px;font-size:14px}
.dcode summary{cursor:pointer;font-weight:600;color:var(--ink)}
.dcode .addrow{margin-top:10px}
.dcode input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font:inherit;text-transform:uppercase;letter-spacing:.04em}
.dcode .small-btn{padding:10px 16px}
.dmsg{margin:6px 0 0;font-size:13px;color:var(--sale);min-height:0}
.dmsg:empty{display:none}
.dcode.on{display:flex;align-items:center;justify-content:space-between;gap:10px;border-style:solid;border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:color-mix(in srgb,var(--ok) 6%,transparent)}
.dcode.on b{letter-spacing:.04em}
.dcode.on span{color:var(--muted)}
.dshort{display:block;color:var(--sale);font-size:13px;margin-top:2px}
.tot .dline{color:var(--ok);font-weight:600}
.dccode{letter-spacing:.05em;font-family:ui-monospace,Menlo,monospace}
.tags .opill.dc-on{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.tags .opill.dc-soon{background:#fff4e0;color:#8a4b00}
.tags .opill.dc-off{background:var(--soft);color:var(--muted)}
.dcode{margin-bottom:16px}
.dccats{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-top:8px}
.dccats .meter{flex-basis:100%}

/* ---------- 1.20: back-in-stock requests ---------- */
.nfy-open{margin-top:12px}
.nfy{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;gap:10px}
.nfy .two{margin:0}
.nfy-t{margin:0;font-size:14px;color:var(--muted)}
.nfy-ok{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--ok) 10%,transparent);color:var(--ink);font-weight:600;font-size:14px}
.nfy-ok svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:1px}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}

/* 1.20: WhatsApp message box, home dashboard, waiting for stock */
.msgbox{margin:0 0 16px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--soft)}
.msgbox textarea{width:100%;font:inherit;font-size:15px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);resize:vertical}
.msgbox .chips{flex-wrap:wrap}
.oos-t{color:var(--sale);font-weight:700}
.opill.dc-on{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.waitg{margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:var(--r)}
.waitg .lines li{flex-wrap:wrap;gap:8px}
.waitg .lines .ln{flex:1 1 180px;min-width:0}
.waitg .lines li:last-child{border-bottom:0}
.ci .opts.hitopt{color:var(--ink);font-weight:600}
/* 1.20.2: cart bar over the dark footer */
body.cart-on-foot .cartbar .pill{background:#fff;color:#111827;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 12px 32px rgba(0,0,0,.55)}
body.cart-on-foot .cartbar .pill>span:nth-child(2){color:var(--brand);font-weight:700}
body.cart-on-foot .cartbar .pill small{color:#4b5563}
.cartbar .pill{transition:background-color .2s,color .2s}
/* never let wide content make the page scroll sideways */
@media (max-width:759px){.foot-trust{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.foot-trust div,.foot-col{min-width:0;overflow-wrap:anywhere}

/* ===== 1.21: search suggestions, sort & filters, recently viewed, banners, photo loading, sticky buy bar ===== */
.sbox{position:relative}
.sugg{position:absolute;inset-inline-start:0;inset-inline-end:0;top:calc(100% + 6px);z-index:8;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(8,14,24,.18);overflow:hidden;max-height:min(70vh,440px);overflow-y:auto}
.sugg ul{list-style:none;margin:0;padding:4px 0}
.sugg li button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:8px 12px;text-align:start;color:var(--ink);font:inherit;cursor:pointer}
.sugg li button:hover,.sugg li button:focus-visible{background:var(--soft)}
.sg-im{width:44px;height:44px;flex:none;border-radius:10px;overflow:hidden;background:var(--soft);display:grid;place-items:center}
.sg-im img{width:100%;height:100%;object-fit:cover}
.sg-im .gl{width:60%;color:var(--muted)}
.sg-t{flex:1;min-width:0;display:grid}
.sg-t b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-t small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-p{font-weight:700;font-size:14px;white-space:nowrap}
.sg-all{display:block;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:12px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer}
.sg-none{margin:0;padding:14px;color:var(--muted);font-size:14px}

.tools{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:2px 0 10px}
.rcount{font-size:13px;color:var(--muted);font-weight:600}
.tl-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.chip.sm{padding:6px 12px;font-size:13px}
.sortsel{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:0 12px;height:33px;font-size:13px;font-weight:600}
.sortsel svg{width:15px;height:15px;flex:none;color:var(--muted)}
.sortsel select{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;color:var(--ink);padding:0 2px;cursor:pointer;max-width:160px}
.sortsel select:focus{outline:none}
.sortsel:focus-within{outline:2px solid var(--ink);outline-offset:2px}

.noresults{grid-column:1/-1;padding:18px 0 4px}
.nr-t{margin:0 0 12px;font-size:15px;color:var(--muted)}
.nr-t b{color:var(--ink)}
.nr-act{display:flex;gap:10px;flex-wrap:wrap}
.nr-act .ghost{width:auto;margin:0;padding-inline:16px}
.nr-h{font-size:18px;margin:24px 0 0}

.recent{margin-top:30px}
.rv-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rv-head .linkbtn{font-size:13px;color:var(--muted)}

/* banner slides */
.bnr{position:relative;background:var(--foot,#111827)}
.bnr-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.bnr-track::-webkit-scrollbar{display:none}
.bn-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;aspect-ratio:16/10;overflow:hidden}
.bn-slide img{width:100%;height:100%;object-fit:cover;display:block}
.bn-a{display:block;height:100%;color:inherit;text-decoration:none}
.bn-cap{position:absolute;inset:auto 0 0 0;padding:48px 0 34px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.35) 60%,transparent);color:#fff}
.bn-cap h2{font-size:clamp(22px,6.2vw,40px);font-weight:850;line-height:1.05;margin:0;color:#fff;max-width:20ch;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.bn-cap p{margin:6px 0 0;font-size:15px;max-width:40ch;opacity:.95}
.bn-btn{display:inline-block;margin-top:12px;background:var(--brand);color:var(--brand-ink);font-weight:700;padding:10px 18px;border-radius:12px;font-size:15px}
.bn-dots{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.bn-dots button{pointer-events:auto;width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.5);transition:width .25s,background .25s;cursor:pointer}
.bn-dots button[aria-current="true"]{width:22px;background:#fff}
@media (min-width:760px){
  .bn-slide{aspect-ratio:12/5;max-height:520px}
  .bn-cap{padding:80px 0 48px}
  .bn-cap p{font-size:17px}
}
/* with banners, the welcome area becomes a slim strip of perks */
.hero.mini .hero-in{padding-block:12px 14px;gap:8px}
.hero.mini h1{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero.mini .hero-cta,.hero.mini .lane{display:none}
.hero.mini .greet{margin:0}

/* photos: soft shimmer until loaded, then fade in (store only: the admin has no loader) */
@keyframes ts-shim{from{background-position:100% 0}to{background-position:-100% 0}}
body:not(.admin) :is(.ph,.gi,.bn-slide,.sg-im,.thumb){background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:200% 100%;animation:ts-shim 1.3s linear infinite}
body:not(.admin) :is(.ph:not(:has(img)),.ph:has(img.ld),.gi:has(img.ld),.bn-slide:has(img.ld),.sg-im:has(img.ld),.sg-im:not(:has(img)),.thumb:has(img.ld),.thumb:not(:has(img))){animation:none;background-image:none}
body:not(.admin) :is(.ph,.gi,.bn-slide,.sg-im,.thumb,.thumbs) img,body:not(.admin) .vimg{opacity:0;transition:opacity .35s ease}
body:not(.admin) :is(.ph,.gi,.bn-slide,.sg-im,.thumb,.thumbs) img.ld,body:not(.admin) .vimg.ld{opacity:1}
body.th-dark :is(.ph,.gi){background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%)}
@media (prefers-reduced-motion:reduce){body:not(.admin) :is(.ph,.gi,.bn-slide,.sg-im,.thumb){animation:none} body:not(.admin) :is(.ph,.gi,.bn-slide) img{transition:none}}

/* product page bar: name + photo on wide screens, slides in after the main button scrolls away */
.pp-bar-prod{display:none}
@media (min-width:760px){
  .pp-bar{display:flex;align-items:center;gap:16px;position:fixed;left:50%;right:auto;bottom:16px;z-index:6;width:min(760px,calc(100% - 32px));transform:translate(-50%,140%);transition:transform .28s ease;
    background:var(--surface);border:1px solid var(--line);border-radius:18px;padding-block:10px 10px;padding-inline:10px 12px;box-shadow:0 16px 40px rgba(8,14,24,.22)}
  body.pp-bar-on .pp-bar{transform:translate(-50%,0)}
  .pp-bar-prod{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
  .pp-bar-prod img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none;background:var(--soft)}
  .pp-bar-prod span{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pp-bar-prod small{font-weight:500;color:var(--muted)}
  .pp-bar-price{display:grid;line-height:1.1;flex:none;text-align:end}
  .pp-bar-price b{font-family:var(--display);font-size:18px}
  .pp-bar-price s{font-size:12px;color:var(--muted)}
  .pp-bar .addrow{flex:none;margin:0;display:flex;gap:8px}
  .pp-bar .addrow .big-btn{width:auto;padding-inline:20px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.pp-bar{transition:none}}

/* admin: banners and "goes well with" */
.bnrow{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px}
.bnimg{position:relative;aspect-ratio:2/1;border-radius:12px;overflow:hidden;background:var(--soft)}
.bnimg img{width:100%;height:100%;object-fit:cover;display:block}
.bnnum{position:absolute;inset-inline-start:8px;top:8px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px}
@media (min-width:900px){.bnrow{grid-template-columns:280px 1fr;align-items:start}}
.rel-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.rel-list li{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:12px}
.rel-list .thumb{width:40px;height:40px;flex:none;border-radius:8px;overflow:hidden;background:var(--soft);display:grid;place-items:center}
.rel-list .thumb img{width:100%;height:100%;object-fit:cover}
.rel-list span{flex:1;min-width:0;font-size:14px;font-weight:600}
#e-reladd{width:100%;font:inherit;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
body:not(.admin) img.ld.now{transition:none}
@media (max-width:520px){
  .tools .rcount{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tl-r{margin-inline-start:0;width:100%;flex-wrap:wrap}
  .tl-r .sortsel{margin-inline-start:auto;min-width:0}
  .sortsel select{max-width:150px;text-overflow:ellipsis}
}

/* ===== 1.21.2: coming-soon page (asphalt, kerb stripe, real product photos) ===== */
.sn-body{--asphalt:#16181d;--kerb:#23262d;--chalk:#f1f1ee;--smoke:#9097a1;
  margin:0;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;background:var(--asphalt);color:var(--chalk);font-family:var(--body);-webkit-font-smoothing:antialiased}
.sn-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;max-width:1200px;width:100%;margin:0 auto;box-sizing:border-box}
.sn-brand{display:flex;align-items:center;gap:10px;min-width:0}
.sn-brand img{height:40px;width:auto;max-width:120px;object-fit:contain;background:#fff;border-radius:10px;padding:3px 6px}
.sn-brand .mark{width:38px;height:38px}
.sn-brand b{font-family:var(--display);font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-soc{display:flex;gap:6px}
.sn-soc a{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--chalk);background:var(--kerb)}
.sn-soc a:hover{background:#2e323a}
.sn-soc svg{width:19px;height:19px}

.sn{max-width:1200px;width:100%;margin:0 auto;box-sizing:border-box;padding:28px 20px 40px;display:grid;gap:40px;align-content:center}
.sn-main{max-width:560px}
.sn-kicker{margin:0 0 10px;color:var(--smoke);font-size:16px}
.sn-h{margin:0;font-family:var(--display);font-weight:800;line-height:.9;letter-spacing:-.035em;color:var(--chalk)}
.sn-h1{display:block;font-size:clamp(24px,6vw,34px);font-weight:600;letter-spacing:-.01em;color:var(--smoke);margin-bottom:6px}
.sn-date{display:block;font-size:clamp(52px,15vw,92px);font-stretch:108%}
.sn-when{margin:14px 0 0;font-size:16px;color:var(--chalk)}
.sn-count{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px;font-family:var(--display);font-variant-numeric:tabular-nums}
.sn-count span{display:flex;align-items:baseline;gap:5px}
.sn-count b{font-size:clamp(34px,9vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1}
.sn-count i{font-style:normal;font-family:var(--body);font-size:14px;color:var(--smoke)}
.sn-count .sn-sec b{color:var(--smoke)}
/* the racing kerb: the one red accent */
.sn-lane{height:8px;margin:28px 0 24px;max-width:340px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--brand,#c8102e) 0 28px,var(--chalk) 28px 56px)}
.sn-msg{margin:0;font-size:17px;line-height:1.6;color:#d4d6da;max-width:46ch}
.sn-wa{display:inline-flex;align-items:center;gap:10px;margin-top:24px;background:var(--wa,#16924f);color:#fff;font-weight:700;font-size:16px;text-decoration:none;padding:15px 22px;border-radius:14px}
.sn-wa:hover{filter:brightness(1.08)}
.sn-wa:focus-visible,.sn-soc a:focus-visible{outline:3px solid var(--chalk);outline-offset:3px}
.sn-wa svg{width:21px;height:21px}
.sn-note{margin:10px 0 0;font-size:13px;color:var(--smoke)}

.sn-look-t{margin:0 0 12px;font-size:14px;color:var(--smoke)}
.sn-tiles{list-style:none;margin:0 -20px;padding:0 20px 4px;display:grid;grid-auto-flow:column;grid-auto-columns:42%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sn-tiles::-webkit-scrollbar{display:none}
.sn-tiles li{scroll-snap-align:start;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#fff}
.sn-tiles img{width:100%;height:100%;object-fit:cover;display:block}

.sn-foot{max-width:1200px;width:100%;margin:0 auto;box-sizing:border-box;padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));border-top:1px solid #2a2d34;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:flex-end}
.sn-addr{display:flex;gap:10px;margin:0;font-size:14px;line-height:1.5;color:#c9ccd1}
.sn-addr b{color:var(--chalk)}
.sn-addr svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--brand-lift,#e05)}
.sn-copy{margin:0;font-size:13px;color:var(--smoke)}

@media (min-width:900px){
  .sn{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:64px;padding-block:40px 64px}
  .sn:not(.has-look){grid-template-columns:1fr}
  .sn-top,.sn-foot,.sn{padding-inline:40px}
  .sn-tiles{margin:0;padding:0;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible;gap:14px}
  .sn-tiles li:nth-child(3n+2){transform:translateY(28px)}
  .sn-look{padding-bottom:28px}
}
.sn-bt{display:grid;min-width:0;line-height:1.2}
.sn-bt small{font-size:12px;color:var(--smoke);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){
  .sn-tiles.n1,.sn-tiles.n2,.sn-tiles.n4{grid-template-columns:repeat(2,1fr);max-width:440px}
  .sn-tiles.n1 li,.sn-tiles.n2 li:nth-child(3n+2),.sn-tiles.n4 li:nth-child(3n+2){transform:none}
  .sn-tiles.n2 li:nth-child(2),.sn-tiles.n4 li:nth-child(2n){transform:translateY(28px)}
}
@media (max-width:599px){
  .sn-bt small{display:none}
  .sn-soc a{width:36px;height:36px;border-radius:10px}
  .sn-soc svg{width:17px;height:17px}
  .sn-count{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0 26px}
  .sn-count span{flex-direction:column;align-items:flex-start;gap:4px}
  .sn-count b{font-size:clamp(32px,10vw,42px)}
}
@media (max-width:599px){.sn-brand b{white-space:normal;font-size:14px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}

/* 1.22: site health */
.chk.info .dot{background:#4b6584;font-style:italic;font-family:Georgia,serif}
.checks .chk{align-items:center}
.checks .chk>div{flex:1;min-width:0}
.checks .chk .small-btn{flex:none}
.hl-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px;border-radius:var(--r);background:var(--soft);margin-bottom:6px}
.hl-sum>div{flex:1;min-width:200px}
.hl-sum p{margin:0;font-size:17px}
.hl-sum small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.hl-big{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;background:var(--ok);flex:none}
.hl-sum.hl-warn .hl-big{background:#b7791f}
.hl-sum.hl-bad{background:color-mix(in srgb,var(--sale) 10%,var(--soft))}
.hl-sum.hl-bad .hl-big{background:var(--sale)}
.errlist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.errlist li{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:4px;min-width:0}
.el-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.el-top .meter{margin:0;font-size:12px}
.errlist code{font-size:13px;font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.errlist small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
/* 1.23: photo from a link */
.urlrow{display:flex;gap:8px;align-items:center}
.urlrow input{flex:1;min-width:0;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
/* 1.24: brands */
.ci .cbrand{display:block;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px}
.pp-brand{display:inline-block;font-weight:700;font-size:14px;color:var(--brand);text-decoration:none;margin-bottom:4px}
.pp-brand:hover{text-decoration:underline;text-underline-offset:3px}
.brandsel.on{border-color:var(--ink)}
.brandsel select{max-width:130px}
.pp-brand{display:block;width:max-content;max-width:100%}
@media (max-width:520px){
  .tl-r{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px;width:calc(100% + 32px)}
  .tl-r::-webkit-scrollbar{display:none}
  .tl-r>*{flex:none}
  .tl-r .sortsel{margin-inline-start:0}
}
.pp-info .pp-brand{margin-bottom:-8px}
/* 1.24.2: tap-to-choose brands and categories */
.pick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pchip{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer}
.pchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.pchip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ===== 1.25: product editor layout and quick edit ===== */
.ed-head{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:16px}
.ed-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 220px;min-width:0}
.ed-title h2{margin:0;font-size:20px;min-width:0;overflow-wrap:anywhere}
.ed-title .meter{margin:0;font-size:13px}
.ed-grid{display:grid;gap:14px;align-items:start}
.ed-main,.ed-side{display:grid;gap:14px;min-width:0}
.ecard{border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:12px;background:var(--surface);min-width:0}
.ecard-h{margin:0;font-size:16px;font-weight:700;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ecard-h small{font-size:12px;font-weight:500;color:var(--muted)}
.ecard .two{gap:12px}
.ecard .f{margin:0}
.evis{display:grid;grid-template-columns:1fr 1fr;margin:0}
.evis label{display:block;cursor:pointer;position:relative}
.evis input{position:absolute;opacity:0;pointer-events:none}
.evis span{display:block;text-align:center;padding:9px 10px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted)}
.evis input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(8,14,24,.15)}
.evis input#e-hidden:checked+span{color:var(--sale)}
.evis input:focus-visible+span{outline:2px solid var(--ink);outline-offset:1px}
.esale{border-top:1px dashed var(--line);padding-top:10px}
.esale summary{cursor:pointer;font-weight:600;font-size:14px}
.esale[open]{display:grid;gap:12px}
.esale[open] summary{margin-bottom:2px}
@media (min-width:1080px){
  .ed-grid{grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr)}
  .ed-side{position:static}
}

/* quick edit */
.qelist{list-style:none;margin:6px 0 0;padding:0}
.qe-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:10px 6px;border-bottom:1px solid var(--line);border-radius:10px}
.qe-row .thumb{width:44px;height:44px}
.qe-name{min-width:0}
.qe-name b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qe-name small{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qe-f{grid-column:2 / 3;display:grid;grid-template-columns:minmax(80px,1fr) minmax(80px,1fr) auto;gap:8px;align-items:end}
.qe-row>.icon-btn{grid-row:1;grid-column:3;font-size:20px}
.qe-var{grid-template-columns:44px minmax(0,1fr) auto;background:none}
.qe-var .qe-name{grid-column:2;padding-inline-start:10px;border-inline-start:2px solid var(--line)}
.qe-var .qe-name b{font-weight:600}
.qe-var .qe-f{grid-column:2 / 3}
.qe-row.is-hidden .thumb,.qe-row.is-hidden .qe-name b{opacity:.5}
.qe-row.is-changed{background:color-mix(in srgb,#f59e0b 12%,transparent)}
.qf{display:grid;gap:3px;font-size:11px;font-weight:600;color:var(--muted);min-width:0}
.qf input[type=number]{width:100%;min-width:0;font:inherit;font-size:15px;font-weight:600;color:var(--ink);padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.qf input[type=number]:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.qnote{align-self:center;font-size:12px;font-weight:500}
.qsw{position:relative;justify-items:start}
.qsw input{position:absolute;opacity:0;width:44px;height:26px;margin:0;bottom:0;inset-inline-start:0;cursor:pointer}
.qsw i{display:block;width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;transition:background .15s}
.qsw i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.qsw input:checked+i{background:var(--ok)}
.qsw input:checked+i::after{transform:translateX(18px)}
.qsw input:focus-visible+i{outline:2px solid var(--ink);outline-offset:2px}
.qebar{margin-top:14px}
@media (min-width:760px){
  .qe-row{grid-template-columns:44px minmax(0,1fr) minmax(330px,420px) 36px}
  .qe-f{grid-column:3;grid-row:1}
  .qe-row>.icon-btn{grid-column:4}
  .qe-var .qe-f{grid-column:3}
}
/* option rows inside the editor's main column: card layout at every width (the column is too narrow for a table row) */
.ed-main .vhead{display:none}
.ed-main .vrow{grid-template-columns:64px 1fr 1fr 34px;grid-template-areas:"ph n n x" "ph p q q" "c c s s";padding:10px;border:1px solid var(--line);background:var(--bg);margin-bottom:8px;align-items:start}
.ed-main .vf small{display:block}
.ed-main .vph{width:64px;height:64px}
.savebar .ghost{width:auto;flex:none;margin:0;padding-inline:18px}
.qe-f{grid-template-columns:minmax(80px,1fr) minmax(80px,1fr) 64px}
@media (max-width:899px){.savebar .ghost{flex:1}}
.qe-var .qe-name{display:flex;align-items:center;gap:10px}
.qe-vimg{width:34px;height:34px;flex:none;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.qe-vimg:empty{background:var(--soft);border-style:dashed}
.qe-vimg img{width:100%;height:100%;object-fit:contain;display:block}
.qe-vt{min-width:0;display:grid}
/* 1.26: price limits */
.qlim{font-style:normal;font-weight:500;color:var(--muted);margin-inline-start:4px}
.qf input[type=number]:invalid{border-color:var(--sale);background:color-mix(in srgb,var(--sale) 8%,var(--surface))}
.esale summary .meter{font-weight:500;margin-inline-start:6px}
/* 1.26.1: quick edit opens under one product */
.ilist li.qe-panel{display:block;padding:6px 14px 12px;margin:0 0 10px;border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:0 0 12px 12px;background:var(--bg)}
.qe-panel .qe-row{grid-template-columns:minmax(0,1fr);padding:10px 0;border-radius:0;gap:8px}
.qe-panel .qe-row .qe-name,.qe-panel .qe-var .qe-name{grid-column:1;padding-inline-start:0;border-inline-start:0}
.qe-panel .qe-f{grid-column:1;grid-row:auto}
.qe-panel .qe-row.is-changed{background:color-mix(in srgb,#f59e0b 12%,transparent);margin:0 -14px;padding-inline:14px}
.qe-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;padding-top:12px}
.qe-foot .meter{flex:1 1 220px;margin:0;font-size:13px}
.qe-foot .err-msg{flex:1 1 100%;margin:0}
@media (min-width:760px){
  .qe-panel .qe-row{grid-template-columns:minmax(0,1fr) minmax(300px,400px);align-items:center}
  .qe-panel .qe-f{grid-column:2;grid-row:1}
}
/* 1.27: admin appearance switch */
.themesw{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;margin:0 4px 8px;background:var(--soft);border-radius:10px}
.themesw button{border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--muted);padding:6px 4px;border-radius:8px;cursor:pointer}
.themesw button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.themesw button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.more-theme{display:grid;gap:6px;padding:10px 6px 4px;border-top:1px solid var(--line);margin-top:6px}
.more-theme .meter{margin:0 4px;font-size:12px}
.more-theme .themesw{margin:0}
/* 1.27.1: appearance icon at the top */
.side-head{display:flex;align-items:flex-start;gap:6px;border-bottom:1px solid var(--line);margin-bottom:12px}
.side-head .side-logo{flex:1;min-width:0;border-bottom:0;margin-bottom:0}
.side-head .thm{margin-top:4px}
.thm{position:relative;flex:none}
.thm-btn{width:36px;height:36px;color:var(--muted)}
.thm-btn svg{width:19px;height:19px}
.thm-btn:hover{color:var(--ink)}
.thm-pop{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:30;width:220px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);display:grid;gap:6px}
.thm-pop[hidden]{display:none}
.thm-pop .meter{margin:0 2px;font-size:12px}
.thm-pop .themesw{margin:0}
.mtop-r{display:flex;align-items:center;gap:6px}
.mtop .thm-btn{width:40px;height:40px;color:inherit}
/* 1.27.3: TDRA NOC on the Terms page */
.doc-noc{margin:0 0 18px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font-size:14px;color:var(--muted)}
.doc-noc b{color:var(--ink);font-variant-numeric:tabular-nums}
/* 1.27.4: NOC as fine print under the copyright */
.foot-bottom:has(.noc){flex-direction:column;justify-content:flex-start;gap:3px}
.foot-bottom .legal.noc{font-size:11.5px;color:color-mix(in srgb,var(--foot-ink) 45%,transparent);letter-spacing:.01em}
/* 1.27.5: copyright lines stack, NOC fine print under them */
.foot-bottom{flex-direction:column;justify-content:flex-start;gap:3px}
.sn-copy p{margin:0}
.doc-foot .copyright+.copyright{margin-top:2px}
/* 1.27.6: footer bottom space only when the cart bar (or the product page's buy bar) is showing */
.site-foot{padding-bottom:calc(44px + env(safe-area-inset-bottom,0px))}
body.has-cart .site-foot{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
@media (max-width:759px){
  body.on-product{padding-bottom:0}
  body.on-product .site-foot{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}

/* ---------- 1.28: team, change history, search report ---------- */
.av{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.02em}
.av.lg{width:40px;height:40px;font-size:14px}
.side-who{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:8px 12px;font-size:14px;line-height:1.25}
.side-who b{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-who small{color:var(--muted);font-size:12px}
.more-sheet .side-who{padding:6px 14px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.team-list .ln b .opill{margin-inline-start:6px;vertical-align:1px}
.team-list .opill{background:var(--soft);color:var(--ink)}
.team-list .opill.sale{background:color-mix(in srgb,var(--chart,#2563eb) 14%,transparent);color:var(--chart,#2563eb)}
.team-list li.is-hidden .ln b{opacity:.6}
.tm-name{display:flex;gap:8px;align-items:center;margin-inline-start:auto}
.tm-name input{padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);font:inherit;font-size:14px;width:160px;min-width:0;color:var(--ink)}
.rolepick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rolecard{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;font-weight:400;background:var(--surface)}
.rolecard input{margin:2px 0 0;padding:0;accent-color:var(--ink);width:18px;height:18px;flex:none}
.rolecard b{display:block;font-size:15px}
.rolecard small{display:block;color:var(--muted);font-size:13px;line-height:1.4;margin-top:2px}
.rolecard:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pwrow{display:flex;gap:8px}
.pwrow input{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
.f > small.meter{font-weight:400;font-size:13px}
.roletable{min-width:520px}
.roletable th:not(:first-child),.roletable td:not(:first-child){text-align:center;width:84px}
.roletable td.yes{color:var(--ok);font-weight:700}
.roletable td.no{color:var(--muted)}
.hs-tools select{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font:inherit;font-size:14px;color:var(--ink);max-width:100%}
.hs-tools .search{flex:1 1 220px}
.hs-day{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:22px 0 4px}
.hs-list{list-style:none;margin:0;padding:0}
.hs-list > li{display:grid;grid-template-columns:44px 30px minmax(0,1fr);gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.hs-t{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:6px}
.hs-b p{margin:5px 0 0;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.hs-b .linkbtn{font-weight:700;font-size:inherit}
.hs-ch{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px;font-size:14px;color:var(--muted)}
.hs-ch li{overflow-wrap:anywhere}
.hs-ch b{color:var(--ink)}
.hs-from{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.subh.sm{font-size:15px;margin:16px 0 8px}
.bl-bar i.miss{background:var(--sale)}
@media (max-width:640px){
  .rolepick{grid-template-columns:1fr}
  .tm-name{width:100%;margin-inline-start:50px}
  .tm-name input{flex:1}
  .hs-list > li{grid-template-columns:38px minmax(0,1fr)}
  .hs-list > li .av{display:none}
}

/* ---------- 1.30: site health ---------- */
.hl-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px;border-radius:var(--r);background:color-mix(in srgb,var(--ok) 9%,var(--soft))}
.hl-hero.hl-warn{background:color-mix(in srgb,#b7791f 11%,var(--soft))}
.hl-hero.hl-bad{background:color-mix(in srgb,var(--sale) 10%,var(--soft))}
.hl-score{position:relative;width:72px;height:72px;flex:none;display:grid;place-items:center}
.hl-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hl-ring circle{fill:none;stroke-width:4.5}
.hl-rbg{stroke:color-mix(in srgb,var(--ink) 10%,transparent)}
.hl-rfg{stroke:var(--ok);stroke-linecap:round}
.hl-warn .hl-rfg{stroke:#b7791f}
.hl-bad .hl-rfg{stroke:var(--sale)}
.hl-score>b{position:relative;font-size:19px;font-variant-numeric:tabular-nums}
.hl-score>b small{font-size:11px;font-weight:600;margin-inline-start:1px}
.hl-ht{flex:1;min-width:210px}
.hl-ht p{margin:0;font-size:19px;font-weight:700}
.hl-ht>small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.hl-counts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px;font-weight:600}
.hl-c{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.hl-c i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.hl-c.bad i{background:var(--sale)} .hl-c.warn i{background:#b7791f} .hl-c.info i{background:#4b6584}
.hl-c.bad,.hl-c.warn{color:var(--ink)}
.hl-allok{margin:16px 0 4px;padding:12px 14px;border-radius:12px;border:1.5px dashed color-mix(in srgb,var(--ok) 45%,var(--line));color:var(--ok);font-weight:600;font-size:15px}
.hl-gtag{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
.hl-notes{margin-top:16px}
.hl-notes>summary,.hl-old>summary{cursor:pointer;font-weight:700;font-size:15px;padding:6px 0;list-style-position:inside}
.hl-notes .checks{margin-top:8px}
.hl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.hl-grp{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.hl-grp[open]{grid-column:1/-1}
.hl-grp>summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.hl-grp>summary::-webkit-details-marker{display:none}
.hl-gi{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--soft);flex:none}
.hl-gi .ni{width:19px;height:19px}
.hl-grp.bad .hl-gi{background:color-mix(in srgb,var(--sale) 14%,transparent);color:var(--sale)}
.hl-grp.warn .hl-gi{background:color-mix(in srgb,#b7791f 16%,transparent);color:#9a6416}
.hl-grp.ok .hl-gi{color:var(--ok)}
.hl-gn{flex:1;min-width:0}
.hl-gn b{display:block;font-size:15px}
.hl-gn small{color:var(--muted);font-size:13px}
.hl-grp.bad .hl-gn small{color:var(--sale);font-weight:600}
.hl-grp.warn .hl-gn small{color:#9a6416;font-weight:600}
.hl-gs{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 4px 4px;transition:transform .15s}
.hl-grp[open] .hl-gs{transform:rotate(225deg);margin-bottom:-2px}
.hl-body{padding:2px 14px 14px}
.hl-old{margin-top:10px}
.hl-old .errlist{opacity:.8}
.el-top .el-fix{margin-inline-start:auto;font-size:13px;color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hl-grp.warn .hl-gi,:root:not([data-theme="light"]) .hl-grp.warn .hl-gn small{color:#e0a849}}
:root[data-theme="dark"] .hl-grp.warn .hl-gi,:root[data-theme="dark"] .hl-grp.warn .hl-gn small{color:#e0a849}
@media (max-width:640px){
  .hl-grid{grid-template-columns:1fr}
  .hl-hero{padding:14px;gap:12px}
  .hl-score{width:60px;height:60px}
  .hl-hero>.small-btn{width:100%}
  .checks .chk{flex-wrap:wrap;align-items:flex-start}
  .checks .chk>div{flex:1 1 calc(100% - 40px)}
  .checks .chk>.small-btn{margin-inline-start:36px}
}

/* ---------- 1.31: security page ---------- */
.sec-hero{align-items:center}
.sec-shield{position:relative;color:var(--ok);display:grid;place-items:center}
.sec-shield .ni{width:26px;height:26px}
.hl-warn .sec-shield{color:#b7791f} .hl-bad .sec-shield{color:var(--sale)}
.sec-next{list-style:none;margin:0;padding:0;display:grid;gap:6px;flex:1 1 100%;padding-inline-start:88px}
.sec-next li{display:flex;align-items:center;gap:10px;justify-content:space-between;background:color-mix(in srgb,var(--surface) 70%,transparent);border-radius:10px;padding-block:7px 7px;padding-inline:12px 8px;font-size:14px;font-weight:600}
.sec-next li span{min-width:0}
.sec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px;align-items:start}
.sec-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface);min-width:0;scroll-margin-top:80px}
.sec-col{display:grid;gap:14px;min-width:0;align-content:start}
.sec-stack{display:grid;gap:14px;margin-top:14px}
.sec-h{font-size:16px;margin:0 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zt-p{margin:0 0 10px}
.zt-offp{background:var(--soft);color:var(--muted)}
.zt-p code{font-size:13px;word-break:break-all}
.zt-steps{margin:0 0 12px}
.zt-steps summary{cursor:pointer;font-weight:600}
.zt-steps .steps{margin-top:8px}
#sec-zt .fields{margin-bottom:8px}
@media(min-width:760px){.zt-f{display:grid;grid-template-columns:1fr 1fr;gap:12px}}
#zt-ok,#zt-err{margin:0 0 10px}
.sr-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.sec-h+.sr-row{border-top:0;padding-top:4px}
.sr-i{width:36px;height:36px;border-radius:10px;background:var(--soft);display:grid;place-items:center;flex:none}
.sr-i .ni{width:18px;height:18px}
.sr-t{flex:1;min-width:0}
.sr-t b{display:block;font-size:15px}
.sr-t small{display:block;color:var(--muted);font-size:13px;margin-top:1px;overflow-wrap:anywhere}
.sr-t small b{display:inline;font-size:inherit;color:var(--ink)}
.ok-t{color:var(--ok);font-weight:700}
.sr-form{padding-block:4px 12px;padding-inline:48px 0}
.sr-form .fields{margin-top:0}
.sec-list{list-style:none;margin:0;padding:0}
.sec-list li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.sec-list li:first-child{border-top:0;padding-top:2px}
.sl-dot{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--ok);margin-top:1px}
.sec-list li.todo .sl-dot{background:none;box-shadow:inset 0 0 0 2px var(--line)}
.sl-t{flex:1;min-width:0}
.sl-t b{display:block;font-size:14px}
.sec-list li.ok .sl-t b{font-weight:600}
.sl-t small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px;line-height:1.4}
.sl-tick{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.sl-tick input{width:18px;height:18px;accent-color:var(--ok)}
.sec-list .small-btn{flex:none}
.sec-dev{list-style:none;margin:0;padding:0}
.sec-dev li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sec-dev li:first-child{border-top:0;padding-top:2px}
.sec-dev .opill{font-size:11px;padding:1px 8px;margin-inline-start:4px;vertical-align:1px;background:var(--soft)}
.sec-dev .opill.dc-on{background:color-mix(in srgb,var(--ok) 16%,transparent)}
.sec-danger{margin-top:12px;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--sale) 7%,var(--soft));display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.sec-danger p{margin:0;font-size:13px;color:var(--muted);flex:1 1 220px}
.sec-log{list-style:none;margin:0;padding:0}
.sec-log li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)}
.sec-log li:first-child{border-top:0}
.sec-log li>div{min-width:0}
.sec-log b{font-size:14px}
.sec-log b .opill{font-size:11px;padding:1px 8px;margin-inline-start:4px;background:var(--soft);vertical-align:1px}
.sec-log small{display:block;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.sl-k{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--soft)}
.sl-k .ni{width:16px;height:16px}
.k-in .sl-k{color:var(--ok)}
.k-fail .sl-k{color:var(--sale);background:color-mix(in srgb,var(--sale) 12%,transparent)}
.sec-log li.away b{color:var(--sale)}
.sec-card .hs-day{margin:14px 0 2px}
.sec-card .hs-day:first-of-type{margin-top:6px}
.chip.sm .meter{font-size:12px;margin-inline-start:2px}
@media (max-width:900px){ .sec-grid{grid-template-columns:1fr} }
@media (max-width:640px){
  .sec-card{padding:14px}
  .sr-form{padding-inline-start:0}
  .sec-next{padding-inline-start:0}
  .sec-list li{flex-wrap:wrap}
  .sec-list li>.small-btn{margin-inline-start:32px}
}

/* ---------- 1.32: admin layout and usability ---------- */
/* layout */
@media (min-width:900px){
  .adm{background:linear-gradient(to right,var(--surface) 252px,var(--bg) 252px)}
  .side{border-inline-end:1px solid var(--line)}
}
@media (min-width:1300px){ .adm-main{max-width:1180px} }
.sfind{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 12px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--muted);font:inherit;font-size:14px;cursor:pointer;text-align:start}
.sfind svg{width:16px;height:16px;flex:none}
.sfind span{flex:1}
.sfind kbd,.find-in kbd{font:600 11px/1 var(--body,system-ui);padding:4px 6px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.sfind:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.mtitle{display:flex;align-items:center;gap:10px;min-width:0}
.mtitle .mark{width:36px;height:36px;border-radius:10px}
.mtitle .logo-img{height:34px;max-width:70px}
.mtitle>span{min-width:0;display:grid;line-height:1.15}
.mtitle b{font-family:var(--display);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtitle small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtop .icon-btn svg{width:19px;height:19px}
@media (max-width:899px){ .dtitle{display:none} .adm-main .panel{margin-top:12px} }

/* swipeable rows of choices: fade at the edge shows there is more */
@media (max-width:899px){
  .adm-main .chips,.adm-main .subnav{-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent);padding-inline-end:40px}
  .adm-main .chips{flex-wrap:nowrap}
}

/* save bar: buttons side by side on phones */
@media (max-width:899px){ .savebar{flex-wrap:nowrap} .savebar .err-msg{position:absolute;inset-inline-start:14px;inset-inline-end:14px;bottom:100%;margin:0 0 6px;background:var(--surface);padding:8px 10px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.12)} .savebar .big-btn{width:auto;flex:1 1 auto;padding:12px 16px} .savebar .ghost{flex:0 0 auto;width:auto} }

/* visitors: tables stay inside the page on phones */
.stgrid>section{min-width:0;overflow-x:auto}
.sttable{min-width:0}

/* products: filters, rows and the ⋯ menu */
.pfbar{display:flex;align-items:center;gap:10px;margin:12px 0 2px;min-width:0}
.pfchips{flex:1;min-width:0;margin:0!important;padding:0!important}
.pfchips .chip .meter{font-size:12px;margin-inline-start:2px}
.chip[aria-pressed="true"] .meter{color:inherit;opacity:.7}
.pcat{flex:none;max-width:180px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
.prow{cursor:pointer;border-radius:10px}
.prow:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.prow-open{all:unset;cursor:pointer;font-weight:700}
.prow-open:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.opill.best,.tags .opill.best{background:#fff4e0;color:#8a4b00}
.pm{position:relative;display:inline-flex}
.pm-btn{font-size:18px;line-height:1;letter-spacing:1px}
.pm-pop{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:40;min-width:230px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.18);display:grid;gap:2px}
.pm-pop.up{top:auto;bottom:calc(100% + 6px)}
.pm-pop[hidden]{display:none}
.pm-i{all:unset;box-sizing:border-box;display:block;width:100%;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.pm-i:hover,.pm-i:focus-visible{background:var(--soft)}
.pm-i[disabled]{opacity:.4;cursor:default;background:none}
.pm-i.danger{color:var(--sale)}
.pm-note{font-size:12px;color:var(--muted);padding:2px 12px 6px;white-space:normal}
li.pm-open{position:relative;z-index:6}
.prow-go{flex:none;width:28px;height:34px;border:0;background:none;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;border-radius:8px;padding:0}
.prow-go:hover{color:var(--ink);background:var(--soft)}
.pm-i small{font-weight:400;color:var(--muted);margin-inline-start:4px}
.m-only{display:none}
@media (max-width:640px){
  .m-only{display:revert}
  .tags .m-only{display:inline-flex}
  .d-only{display:none!important}
  .ilist li.prow{display:grid;grid-template-columns:auto 52px minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:10px 0}
  .ilist li.prow .thumb{width:52px;height:52px}
  .ilist li.prow .ln{min-width:0}
  .ilist li.prow .ln small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ilist li.prow .tags{margin-top:4px;flex-wrap:nowrap;overflow:hidden}
  .ilist li.prow .tags .xtra{display:none}
  .ilist li.prow{grid-template-columns:auto 46px minmax(0,1fr) auto;gap:2px 9px}
  .ilist li.prow .thumb{width:46px;height:46px}
  .ilist li.prow .tags .stock{padding:2px 9px;font-size:12px;min-height:0;height:auto}
  .ilist li.prow .ictl{flex-wrap:nowrap;gap:0}
  .ilist li.prow .pm-btn{border:0;width:30px}
  .pfbar{flex-wrap:wrap}
  .pfbar .pfchips{flex:1 1 100%}
  .pcat{max-width:100%}
}

/* order details: two columns on computers, action bar on phones */
@media (min-width:1100px){
  .odet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
  .odet-r{position:sticky;top:16px;padding-top:14px}
}
.obar{display:none}
@media (max-width:899px){
  .odet{padding-bottom:70px}
  .obar{display:flex;gap:8px;position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:19;padding:10px 14px;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(8,14,24,.08)}
  .obar .big-btn{flex:1;width:auto;padding:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .obar .big-btn svg{width:18px;height:18px}
  .obar .obar-save{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
}

/* discount codes */
.dc-head .desc{flex:1 1 280px}
.sw{position:relative;width:44px;height:26px;border-radius:999px;border:0;background:var(--line);cursor:pointer;flex:none;padding:0;transition:background .15s}
.sw i{position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.sw[aria-checked="true"]{background:var(--ok)}
.sw[aria-checked="true"] i{transform:translateX(18px)}
@media (max-width:640px){ .ilist li .ictl{flex-wrap:nowrap} }

/* security: show all devices */
.sec-all{display:inline-block;margin:6px 0 2px;font-size:14px;font-weight:600}

/* settings: section menu on the left on computers */
@media (min-width:1100px){
  .setwrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:26px;align-items:start}
  .setwrap>.subnav{position:sticky;top:16px;flex-direction:column;flex-wrap:nowrap;margin:0;padding:0 0 0 0;border:0;gap:2px}
  .setwrap>.subnav .chip{border:0;background:none;border-radius:10px;padding:9px 12px;justify-content:space-between;font-size:14px}
  .setwrap>.subnav .chip:hover{background:var(--soft)}
  .setwrap>.subnav .chip[aria-selected="true"]{background:var(--soft);color:var(--ink)}
  .setbody .sech{margin-top:0}
}

/* backup page: two cards */
.bk-cards{display:grid;gap:14px}
.bk-cards .big-btn{max-width:420px}

/* home */
.home-head{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin:0 0 14px}
.qa{display:flex;gap:6px;flex-wrap:wrap}
.qa .small-btn{display:inline-flex;align-items:center;gap:6px}
.qa svg{width:15px;height:15px}
.kpis span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osum div.hot{background:color-mix(in srgb,var(--ink) 92%,transparent);color:var(--surface)}
.osum div.hot span{color:color-mix(in srgb,var(--surface) 75%,transparent)}
.trend{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.trend-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;font-size:14px}
.trend-h .meter{margin:0;font-size:12px;display:flex;align-items:center;gap:6px}
.tk{display:inline-block;width:9px;height:9px;border-radius:2px;margin-inline-start:6px}
.tk.v{background:var(--chart,#334155)} .tk.o{background:var(--ok);border-radius:50%}
.trend-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end}
.tb{display:grid;justify-items:center;gap:3px;font-size:12px}
.tb-o{min-height:18px;min-width:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--ok);font-size:11px}
.tb-o:empty{background:none}
.tb-bar{width:100%;max-width:46px;height:70px;display:flex;align-items:flex-end;background:var(--soft);border-radius:6px;overflow:hidden}
.tb-bar i{display:block;width:100%;background:var(--chart,#334155);border-radius:6px 6px 0 0}
.tb.today .tb-bar i{background:var(--ink)}
.tb-v{font-weight:700;font-variant-numeric:tabular-nums}
.tb-d{color:var(--muted)}
.tb.today .tb-d{color:var(--ink);font-weight:700}

/* quick search */
.find-layer{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}
.find-layer .scrim{position:fixed}
.find{position:relative;width:100%;max-width:620px;background:var(--surface);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;max-height:76vh}
.find-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.find-in svg{width:20px;height:20px;color:var(--muted);flex:none}
.find-in input{flex:1;border:0;background:none;font:inherit;font-size:17px;color:var(--ink);outline:none;min-width:0}
.find-in kbd{cursor:pointer}
.find-res{overflow-y:auto;padding:6px 8px 10px}
.fi-h{margin:10px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fi{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border-radius:10px;cursor:pointer}
.fi.on,.fi:hover{background:var(--soft)}
.fi-i{width:34px;height:34px;border-radius:9px;background:var(--soft);display:grid;place-items:center;flex:none;overflow:hidden}
.fi.on .fi-i,.fi:hover .fi-i{background:var(--surface)}
.fi-i svg{width:17px;height:17px}
.fi-th{display:block;width:34px;height:34px}
.fi-th img{width:100%;height:100%;object-fit:cover}
.fi-th svg{width:22px;height:22px;margin:6px}
.fi-t{flex:1;min-width:0;display:grid}
.fi-t b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-t small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-r{flex:none;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.fi-none{padding:18px 10px;color:var(--muted);margin:0}
body.find-on{overflow:hidden}
@media (max-width:640px){ .find-layer{padding:0} .find{max-width:none;max-height:none;height:100%;border-radius:0} }

.ln small b.pr{display:inline;font-size:inherit;color:var(--ink);font-weight:700}
.tags .stock{white-space:nowrap;flex:none}
.ilist li.prow .tags>*{flex:none}

/* 1.32.2: phone product rows — tap the row to open, tap the price/stock line for Quick edit */
.selmode-btn{display:none}
.qline{display:none}
@media (max-width:640px){
  .selmode-btn{display:inline-flex;margin-inline-start:auto}
  .bulkbar:not(.on):not(.selmode) .selall{display:none}
  .bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  #plist:not(.selmode) .prow .selbox{display:none}
  #plist:not(.selmode) .ilist li.prow{grid-template-columns:52px minmax(0,1fr) auto}
  #plist:not(.selmode) .ilist li.prow .thumb{width:52px;height:52px}
  .ilist li.prow .prow-go{display:none}
  .ilist li.prow .ictl{align-self:start;margin-top:-2px}
  .ilist li.prow .ln small{font-size:12.5px}
  .ilist li.prow .ln small b.pr{display:none}
  .qline{display:inline-flex;align-items:center;gap:8px;margin:6px 0 0;padding:5px 10px 5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;max-width:100%}
  .qline[aria-expanded="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
  .qline b{font-weight:700;white-space:nowrap}
  .qs{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap;color:var(--ok)}
  .qs i{width:7px;height:7px;border-radius:50%;background:currentColor}
  .qs.low{color:#b7791f} .qs.outs{color:var(--sale)}
  .qpen{color:var(--muted);font-size:14px;margin-inline-start:2px}
  .ilist li.prow .tags{margin-top:6px}
}

.qrow{display:block}
@media (max-width:640px){
  .qrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
  .qrow .qline{margin:0;gap:6px;padding:4px 9px;font-size:13px}
  .qrow .tags{margin:0!important}
}

/* 1.33.1: computers open a product with the Edit button; phones by tapping the row */
@media (min-width:641px){ .prow{cursor:default} .prow:hover{background:none} }
.ed-btn{display:inline-flex;align-items:center;gap:4px}

/* 1.33.2: option photo from a link */
.vph-two{display:grid;grid-template-rows:1fr 1fr;width:100%;height:100%}
.vph-b{all:unset;box-sizing:border-box;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;text-align:center}
.vph-b:hover{color:var(--ink);background:var(--soft)}
.vph-b+.vph-b{border-top:1px dashed var(--line)}
.v-urlrow{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.v-urlrow input{flex:1 1 220px}
.v-urlrow .err-msg{flex:1 1 100%;margin:0}

/* 1.34: subcategories */
.subchips{margin-top:8px}
.subchips .chip:not([aria-pressed="true"]){background:var(--soft);border-color:transparent}

/* 1.34.2: on product cards the price stands out more than the name */
.ci h3{font-weight:500}
.ci .cf .price{font-size:17.5px;font-weight:800;letter-spacing:-.01em}
@media (max-width:599px){ .ci .cf .price{font-size:17px} }

/* 1.35: scheduled products, cost prices */
.opill.sched,.tags .opill.sched{background:color-mix(in srgb,var(--chart,#2563eb) 14%,transparent);color:var(--chart,#2563eb)}
.neg{color:var(--sale)}
.vrow.wcost .v-costf{grid-area:k}
.ed-main .vrow.wcost{grid-template-areas:"ph n n x" "ph p k k" "q q c c" "s s s s"}

/* 1.35: sales & profit */
.slhead{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.slhead .stranges{margin-bottom:12px}
.kp-tip span{max-width:16em}
.sltot{max-width:420px;margin-top:6px}
.slnote{margin:10px 0 0;max-width:62em}
.sltabs{margin:18px 0 10px;flex-wrap:wrap}
.sltable{min-width:480px}
.sltable td{vertical-align:top}
.sltable .linkbtn{text-align:start}
.sl-cat{display:block;font-size:12px}

/* 1.35: customers */
.culist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.culist>li{border-bottom:1px solid var(--line)}
.curow{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;gap:4px 14px;align-items:center;padding:11px 4px;cursor:pointer}
.curow:hover{background:var(--soft)}
.curow:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.curow .av{width:36px;height:36px}
.cu-n,.cu-o,.cu-s{display:grid;min-width:0}
.cu-n b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-n small,.cu-o small,.cu-s small{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu-o,.cu-s{text-align:end;font-variant-numeric:tabular-nums}
.cu-o{min-width:48px}
.cu-det{padding-block:4px 14px;padding-inline:54px 4px}
.cu-det .olist{margin:0}
.small-btn.wa{background:var(--wa);color:var(--wa-ink);border-color:transparent;display:inline-flex;align-items:center;gap:6px}
.small-btn.wa svg{width:16px;height:16px}
@media (max-width:560px){
  .curow{grid-template-columns:36px minmax(0,1fr) auto}
  .cu-o{display:none}
  .cu-det{padding-inline-start:4px}
}

/* 1.35: new order typed in by the shop */
.no-search{width:100%}
.no-res:empty{display:none}
.no-res{border:1px solid var(--line);border-radius:12px;overflow:hidden;max-height:360px;overflow-y:auto}
.no-hit{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) 28px;gap:10px;align-items:center;padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line)}
.no-hit:last-child{border-bottom:0}
.no-hit:hover,.no-hit:focus-visible{background:var(--soft)}
.no-hit .thumb,.no-line .thumb{width:40px;height:40px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.no-hit .thumb img,.no-line .thumb img{width:100%;height:100%;object-fit:contain}
.no-hit .thumb svg,.no-line .thumb svg{width:24px;height:24px}
.no-hit .ln,.no-line .ln{display:grid;min-width:0}
.no-hit .ln b,.no-line .ln b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.no-hit .ln small,.no-line .ln small{font-size:12.5px;color:var(--muted)}
.no-plus svg{width:18px;height:18px}
.no-none{padding:10px 12px;margin:0}
.no-lines{display:grid;gap:8px}
.no-line{display:grid;grid-template-columns:40px minmax(0,1fr) 100px 72px 92px 34px;gap:8px;align-items:center}
.no-line input{padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);width:100%;min-width:0;font:inherit;font-size:14px}
.no-line .vf small{display:none}
.no-lt{text-align:end;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
@media (max-width:700px){
  .no-line{grid-template-columns:40px repeat(3,minmax(0,1fr)) 34px;grid-template-areas:"t n n n x" "p p q l l";padding:10px;border:1px solid var(--line);border-radius:12px;align-items:start}
  .no-line .thumb{grid-area:t}.no-line .ln{grid-area:n}.no-line .icon-btn{grid-area:x}
  .no-line .vf:nth-of-type(1){grid-area:p}.no-line .vf:nth-of-type(2){grid-area:q}.no-line .no-lt{grid-area:l;align-self:end;padding-bottom:9px}
  .no-line .vf small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
}

/* 1.35: categories */
.ctlist{display:grid;gap:10px}
.ct-cat{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.ct-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px}
.ct-row+.ct-row{border-top:1px solid var(--line)}
.ct-row.sub{padding-inline-start:28px;background:color-mix(in srgb,var(--soft) 55%,transparent)}
.ct-n{display:grid;flex:1 1 160px;min-width:0}
.ct-n b{font-size:15px}
.ct-row.sub .ct-n b{font-weight:600;font-size:14px}
.ct-n small{font-size:12.5px;color:var(--muted)}
.ct-row .ictl{flex-wrap:nowrap}
.ct-row .icon-btn:disabled{opacity:.3}
.ct-form{display:flex;gap:6px;flex:1 1 280px;flex-wrap:wrap}
.ct-form input{flex:1 1 160px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font:inherit;font-size:14px;min-width:0}
.ct-warn{flex:1 1 100%;margin:0;font-size:13px;color:#8a4b00}
.ct-row .err-msg{flex:1 1 100%;margin:0}
.ct-row.editing .ct-n{flex-basis:100%}
.cu-det .small-btn{display:inline-flex;align-items:center;gap:6px}
.cu-det .small-btn svg{width:15px;height:15px}
.osum .kneg b{color:var(--sale)}
@media (max-width:600px){
  .sltable{min-width:0;font-size:13px}
  .sltable th:nth-child(5),.sltable td:nth-child(5){display:none}
}

/* 1.35.2: label and best seller on each option */
.vrow .v-badgef{grid-area:b}.vrow .v-featl{grid-area:f;align-self:end;padding-bottom:9px}
.ed-main .vrow{grid-template-areas:"ph n n x" "ph p q q" "c c s s" "b b f f"}
.ed-main .vrow.wcost{grid-template-areas:"ph n n x" "ph p k k" "q q c c" "s s s s" "b b f f"}

/* 1.35.4: bullet points and bold in descriptions */
.pp-desc .desc{white-space:normal}
.pp-desc .desc p{margin:0 0 10px}
.pp-desc .desc ul{margin:0 0 12px;padding-inline-start:1.25em;display:grid;gap:5px}
.pp-desc .desc li::marker{color:var(--brand)}
.pp-desc .desc>:last-child{margin-bottom:0}
.dtools{display:flex;gap:6px;margin:0 0 6px}
.dtools .small-btn{padding:5px 10px;font-size:13px}

/* 1.35.5: products per row on computers (Store settings › Product list & photos) */
@media (min-width:1000px){
  .grid.gc-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .grid.gc-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .grid.gc-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  .grid.gc-6{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:700px) and (max-width:999px){
  .grid.gc-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.gc-4,.grid.gc-5,.grid.gc-6{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* 1.35.6: light / dark switch for customers (store top bar) */
.top-r{display:flex;align-items:center;gap:8px}
.top:not(.mtop) .thm-btn{width:44px;height:44px;color:var(--ink)}
.top:not(.mtop) .thm-btn svg{width:20px;height:20px}
.top:not(.mtop) .thm-pop{width:250px;gap:2px;padding:6px;z-index:60}
.top:not(.mtop) .thm-h{font-size:12px;font-weight:700;color:var(--muted);padding:6px 10px 4px;text-transform:uppercase;letter-spacing:.04em}
.top:not(.mtop) .thm-pop button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;cursor:pointer;font-size:15px;color:var(--ink)}
.top:not(.mtop) .thm-pop button svg{width:18px;height:18px;flex:none}
.top:not(.mtop) .thm-pop button small{color:var(--muted);font-size:12.5px}
.top:not(.mtop) .thm-pop button:hover,.top:not(.mtop) .thm-pop button:focus-visible{background:var(--soft)}
.top:not(.mtop) .thm-pop button[aria-checked="true"]{background:var(--soft);font-weight:700}

/* 1.35.7: sideways rows on computers and tablets show whole cards, with ‹ › buttons; phones keep the swipe with a peek */
.rowwrap{position:relative}
.rowbtn{display:none}
@media (min-width:700px){
  .feat-row{margin-inline:0;padding:2px 0 8px;scroll-padding-inline:0;--rg:12px;gap:var(--rg);
    grid-auto-columns:calc((100% - (var(--rc) - 1) * var(--rg)) / var(--rc));--rc:4}
  .rowbtn{display:grid;place-items:center;position:absolute;top:calc(50% - 26px);z-index:3;width:42px;height:42px;border-radius:50%;
    border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:26px;line-height:1;padding:0 0 3px;cursor:pointer;
    box-shadow:0 6px 18px rgba(8,14,24,.16)}
  .rowbtn[hidden]{display:none}
  .rowbtn:hover{background:var(--soft)}
  .rowbtn.prev{inset-inline-start:-14px}.rowbtn.next{inset-inline-end:-14px}
}
@media (min-width:1000px){
  .feat-row{--rc:var(--rown,6)}
  :root:has(.grid.gc-3) .feat-row{--rg:18px}
  :root:has(.grid.gc-4) .feat-row{--rg:16px}
  :root:has(.grid.gc-5) .feat-row{--rg:14px}
  .rowbtn.prev{inset-inline-start:-12px}.rowbtn.next{inset-inline-end:-12px}
}
@media (min-width:700px) and (max-width:999px){ :root:has(.grid.gc-3) .feat-row{--rc:3} }
.rowbtn{top:calc(38% - 21px)}
@media (min-width:1220px){ .rowbtn.prev{inset-inline-start:-58px}.rowbtn.next{inset-inline-end:-58px} .rowbtn{top:calc(50% - 26px)} }

/* 1.35.8: brand and sort pickers (our own drop-down list) */
.dd-btn{cursor:pointer;color:var(--ink);font:inherit;font-size:13px;font-weight:600;max-width:200px}
.dd-btn:focus{outline:none}
.dd-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dd-btn:hover{border-color:color-mix(in srgb,var(--ink) 35%,var(--line))}
.dd-btn .dd-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dd-btn .dd-chev{width:14px;height:14px;color:var(--muted);transition:transform .15s}
.dd-btn[aria-expanded="true"] .dd-chev{transform:rotate(180deg)}
.dd-btn[aria-expanded="true"]{border-color:var(--ink)}
.dd-btn.on{border-color:var(--ink);background:var(--soft)}
.dd-pop{position:fixed;z-index:80;max-width:min(280px,calc(100vw - 16px));overflow-y:auto;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(8,14,24,.18);display:grid;gap:1px}
.dd-pop button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:9px;font-size:14.5px;color:var(--ink);cursor:pointer;white-space:nowrap}
.dd-pop button:hover,.dd-pop button:focus-visible{background:var(--soft)}
.dd-pop button[aria-selected="true"]{font-weight:700}
.dd-pop button svg{width:16px;height:16px;flex:none}

/* 1.36: wish list */
.wbtn{position:absolute;top:8px;inset-inline-end:8px;z-index:2;width:34px;height:34px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.92);color:#334155;box-shadow:0 1px 4px rgba(8,14,24,.14);transition:transform .12s}
.wbtn svg{width:18px;height:18px}
.wbtn:hover{transform:scale(1.08)}
.wbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wbtn.on{color:#e11d48}
.wbtn.on svg{fill:currentColor}
.wbtn.pop{animation:wpop .35s ease}
@keyframes wpop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.ph .badge.off{top:48px}
.pp-w{top:12px;inset-inline-end:12px;width:42px;height:42px}
.pp-w svg{width:22px;height:22px}
.wish-btn svg{width:21px;height:21px}
.wlines li{display:grid;grid-template-columns:56px minmax(0,1fr) 32px;gap:12px;align-items:start}
.wlines .thumb{all:unset;cursor:pointer;width:56px;height:56px;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.wlines .thumb img{width:100%;height:100%;object-fit:contain}
.wlines .thumb svg{width:30px;height:30px}
.wlines .ln{display:grid;gap:2px;min-width:0}
.wlines .w-act{margin-top:6px;display:flex}
.wlines .w-act .small-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;font-size:13px;cursor:pointer}
.wlines .w-act svg{width:14px;height:14px}
.w-in{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--ok)}
.w-out{font-size:13px;font-weight:600;color:var(--muted)}
.wlines .x{width:32px;height:32px;border-radius:8px;border:0;background:none;color:var(--muted);font-size:22px;cursor:pointer}
.wlines .x:hover{background:var(--soft);color:var(--ink)}
.w-empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:28px 0 18px;color:var(--muted)}
.w-empty svg{width:44px;height:44px;color:var(--line)}
.w-empty p{margin:0}
.w-empty b{color:var(--ink)}
.toast svg{flex:none}
.addtoast .wt-h{display:grid;flex:none;font-style:normal}
.addtoast .wt-h svg{color:#e11d48;fill:#e11d48}

/* 1.36.2: light / dark choice in the footer, small, next to the copyright (right on computers); on phones only there */
.foot-bottom:has(.fb-l){flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:10px 24px}
.fb-l{display:grid;gap:3px;min-width:0}
.foot-theme{display:flex;align-items:center;gap:8px}
.foot-theme>span{font-size:12px;color:color-mix(in srgb,var(--foot-ink) 55%,transparent)}
.ft-seg{display:inline-flex;gap:1px;padding:2px;border-radius:999px;border:1px solid color-mix(in srgb,var(--foot-ink) 16%,transparent)}
.ft-seg button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;color:color-mix(in srgb,var(--foot-ink) 62%,transparent)}
.ft-seg button svg{width:13px;height:13px}
.ft-seg button:hover{color:var(--foot-ink)}
.ft-seg button:focus-visible{outline:2px solid var(--foot-ink);outline-offset:1px}
.ft-seg button[aria-checked="true"]{background:color-mix(in srgb,var(--foot-ink) 14%,transparent);color:var(--foot-ink)}
/* phones: Appearance sits above the dividing line, with the links; the legal lines close the page */
@media (max-width:699px){
  .top:not(.mtop) .thm{display:none}
  .foot-bottom:has(.fb-l){flex-direction:column;align-items:stretch;gap:18px;border-top:0;padding-top:0}
  .foot-bottom .foot-theme{order:-1}
  .foot-bottom:has(.foot-theme) .fb-l{border-top:1px solid color-mix(in srgb,var(--foot-ink) 12%,transparent);padding-top:18px}
}

/* ===== 1.37: home page ===== */
/* search in the top bar */
.finder{top:calc(env(safe-area-inset-top,0px) + var(--toph,61px))}
.finder.no-search{padding-block:10px 8px}
.top.has-search .hsearch{flex:1 1 auto;max-width:560px;min-width:0;margin-inline:auto}
.top.has-search .search{background:var(--bg)}
.top.has-search .search input{padding:10px 0}
@media (max-width:699px){
  .top.has-search .top-in{flex-wrap:wrap;row-gap:8px;padding-bottom:10px}
  .top.has-search .hsearch{order:3;flex:1 1 100%;max-width:none}
  .top.has-search .logo{flex:1 1 0;min-width:0}
  .top.has-search .top-r{flex:none}
  .top.has-search .logo-txt small{display:none}
}
/* category tiles */
.hcats h2,.hbrands h2{margin-bottom:12px}
.hc-row{display:grid;grid-auto-flow:column;grid-auto-columns:104px;gap:12px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 6px;scroll-snap-type:x proximity;scroll-padding-inline:16px}
.hc-row::-webkit-scrollbar{display:none}
.hc{display:grid;gap:4px;text-decoration:none;color:var(--ink);scroll-snap-align:start;min-width:0}
.hc-ph{aspect-ratio:1/1;border-radius:16px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;transition:transform .15s,box-shadow .15s}
.hc-ph img{width:86%;height:86%;object-fit:contain}
.hc-ph .gl,.hc-ph svg{width:40%;height:40%;color:#94a3b8}
.hc-n{font-size:14px;font-weight:700;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hc-c{font-size:12px;color:var(--muted)}
.hc:hover .hc-ph{transform:translateY(-2px);box-shadow:0 8px 20px rgba(8,14,24,.1)}
.hc:focus-visible{outline:none}.hc:focus-visible .hc-ph{outline:2px solid var(--ink);outline-offset:2px}
@media (min-width:700px){
  .hc-row{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));margin-inline:0;padding-inline:0;overflow:visible;gap:16px}
}
/* brand tiles */
.hb-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px 6px}
.hb-row::-webkit-scrollbar{display:none}
.hbt{flex:none;display:grid;place-items:center;gap:4px;min-width:120px;height:72px;padding:10px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);text-decoration:none;color:#0f1a2a;transition:transform .15s,box-shadow .15s}
.hbt img{max-width:120px;max-height:40px;object-fit:contain}
.hbt .hb-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hbt .hb-t{font-weight:800;font-size:15px;letter-spacing:.01em}
.hbt:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(8,14,24,.1)}
.hbt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (min-width:700px){ .hb-row{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;gap:12px} .hbt{min-width:150px;height:80px} }
/* sale ending soon */
.ci .cf .ends{display:block;font-size:12px;font-weight:700;color:var(--sale);margin-top:2px}
/* floating WhatsApp button */
.wafloat{position:fixed;inset-inline-end:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:5;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#fff;box-shadow:0 8px 24px rgba(8,14,24,.28);transition:transform .15s,bottom .2s}
.wafloat svg{width:30px;height:30px}
.wafloat:hover{transform:scale(1.06)}
.wafloat:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
body.has-cart .wafloat{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
body.on-product .wafloat{display:none}
@media (min-width:1000px){ .wafloat{inset-inline-end:24px;bottom:24px} body.has-cart .wafloat{bottom:96px} }

/* admin: home page sections, category photos and brand logos */
.hs-list{display:grid;gap:8px}
.hs-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,220px) auto;gap:8px 14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.hs-row .sw-l{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.hs-row .sw-l input{margin-top:3px;width:18px;height:18px;flex:none}
.hs-row .sw-l span{display:grid;gap:2px}
.hs-row .sw-l small{font-size:12.5px;color:var(--muted);font-weight:400}
.hs-row .hs-t{margin:0}
.hs-row .icon-btn:disabled{opacity:.3}
@media (max-width:640px){ .hs-row{grid-template-columns:minmax(0,1fr) auto} .hs-row .hs-t{grid-column:1/-1;grid-row:2} }
.ct-ph{position:relative;flex:none;width:52px;height:52px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden;color:#64748b;font-size:12px;font-weight:700}
.ct-ph img{width:100%;height:100%;object-fit:contain}
.ct-ph.logo{width:76px}
.ct-ph i{position:absolute;bottom:2px;inset-inline-end:2px;font-style:normal;font-size:9.5px;font-weight:700;background:rgba(15,26,42,.7);color:#fff;border-radius:4px;padding:0 4px}
.ct-phb{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct-phb .small-btn{cursor:pointer;padding:5px 10px;font-size:13px}
.ct-phb .linkbtn{font-size:13px;color:var(--muted)}
.ct-url{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 320px}
.ct-url input{flex:1 1 200px;min-width:0;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
.ct-url .err-msg{flex:1 1 100%;margin:0}
.ct-phb .small-btn+.small-btn{margin-inline-start:-2px}

/* 1.37.2: the page itself never moves sideways on phones (only the swipe rows do) */
html{overflow-x:hidden}
@supports (overflow:clip){ html{overflow-x:clip} }
body{max-width:100%}
.chips,.hc-row,.hb-row,.tl-r,.hero .perks,.bnr-track,.feat-row{overscroll-behavior-x:contain}
.pp-title,.pp-desc .desc,.doc,.lines .ln b{overflow-wrap:anywhere}
/* 1.37.3: hidden brand names inside the brand tiles were measured outside the swipe row, making the page wider than the phone */
.hbt{position:relative}
.chips,.hc-row,.hb-row,.tl-r,.feat-row,.hero .perks{position:relative}

/* 1.37.4: page width on computers (Store settings › Product list & photos); Wide is the default */
.wrap{max-width:var(--wrapw,1320px)}
.admin .wrap{max-width:1100px}
@media (min-width:1000px){ html.pw-full .wrap{padding-inline:28px} }
/* the ‹ › buttons of the sideways rows sit outside the cards only where there is room beside the page */
@media (min-width:1220px) and (max-width:1439px){ html.pw-wide .rowbtn.prev{inset-inline-start:-12px} html.pw-wide .rowbtn.next{inset-inline-end:-12px} html.pw-wide .rowbtn{top:calc(38% - 21px)} }
@media (min-width:1000px){ html.pw-full .rowbtn.prev{inset-inline-start:-16px} html.pw-full .rowbtn.next{inset-inline-end:-16px} html.pw-full .rowbtn{top:calc(38% - 21px)} }

/* 1.38: wish list page */
.wlp{padding-top:14px;padding-bottom:40px}
.wl-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:6px 0 16px}
.wl-head h1{margin:0;font-size:26px}
.wl-head h1 small{font-size:18px;color:var(--muted);font-weight:600}
.wl-act{display:flex;gap:10px;flex-wrap:wrap}
.wl-act .big-btn,.wl-act .ghost{width:auto;margin:0;display:inline-flex;align-items:center;gap:8px;padding-inline:18px}
.wl-act svg{width:18px;height:18px}
.wl-note{margin:-6px 0 16px;color:var(--muted);font-size:14.5px}
.wl-note a{color:var(--ink)}
.wl-small{margin-top:18px;text-align:center}
.wlp .w-empty{padding:40px 0}
@media (max-width:599px){ .wl-head h1{font-size:22px} .wl-act{width:100%} .wl-act>*{flex:1 1 auto;justify-content:center} }

/* 1.38.2: product page — the name reads as a title, the price stands out (like the product cards) */
.pp-title{font-family:var(--body);font-stretch:normal;font-weight:600;font-size:clamp(20px,3vw,24px);line-height:1.28;letter-spacing:0;margin:4px 0 12px}
.pp-price .price{font-family:var(--display);font-weight:800;font-stretch:100%;font-size:clamp(24px,4vw,28px);line-height:1.15;letter-spacing:0}
.pp-price .price s{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:0}
.addtoast:empty{display:none}

/* 1.39: grouped admin menu, Recently deleted */
.ngrp{display:grid;gap:2px}
.ngrp+.ngrp{margin-top:10px}
.ngh{margin:0;padding:4px 12px 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ngi{display:grid;gap:2px}
.more-sheet .ngrp+.ngrp{margin-top:6px}
.more-sheet{max-height:calc(100dvh - 120px);overflow-y:auto}
.trlist .thumb{width:52px;height:52px;flex:none;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.trlist .thumb img{width:100%;height:100%;object-fit:contain}
.trlist .thumb svg{width:28px;height:28px}
.trlist .ln{display:grid;gap:2px}
.trlist li{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.trlist .ln{flex:1 1 220px;min-width:0}
.trlist .warn{color:var(--sale);font-weight:600}

/* 1.39.1 — iPhone Safari zooms in on any text box under 16px when it's tapped, and stays zoomed
   (for example after signing in). On touch screens, every text box uses at least 16px. */
@media (hover:none) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{font-size:16px!important}
}

/* 1.39.2 — the System pages fold away under a normal-looking "System" row (gear icon, arrow, red dot) */
.nsys .nchev{width:16px;height:16px;margin-inline-start:auto;color:var(--muted);transition:transform .15s;flex:none}
.nsys[aria-expanded="true"] .nchev{transform:rotate(90deg)}
.nsys .ndot{margin-inline-start:auto}
.nsys .ndot+.nchev{margin-inline-start:8px}
.ngrp.sys{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.ngrp.sys .ngi{margin-inline-start:21px;padding-inline-start:8px;border-inline-start:1px solid var(--line)}
.ngrp.sys .ngi .snav{padding-inline-start:10px}
.more-sheet .ngrp.sys .ngi .snav{padding-inline-start:12px}
.side .ngrp.sys .ngi .snav[aria-selected="true"]::before{inset-inline-start:-42px}
@media (min-width:900px){
  .side .snav{padding:8px 12px;font-size:14.5px}
  .side .ngrp+.ngrp{margin-top:8px}
  .side .ngh{padding:2px 12px}
  .side .side-logo{padding-bottom:12px}
  .side-head{margin-bottom:10px}
}
@media (min-width:900px) and (max-height:800px){
  .side{padding-block:12px}
  .side .snav{padding:6px 12px}
  .side .ngrp+.ngrp{margin-top:5px}
}

/* ---------- 1.40: deliveries and invoice numbers ---------- */
.opill.inv{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font-weight:600}
.oviews{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 4px}
.ovt{display:flex;align-items:center;gap:12px;text-align:start;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:12px 14px;font:inherit;cursor:pointer;min-width:0}
.ovt:hover{background:var(--soft)}
.ovt .ni{width:22px;height:22px;flex:none;color:var(--muted)}
.ovt span:not(.ovgo){display:grid;min-width:0}
.ovt b{font-size:20px;line-height:1.1}
.ovt small{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovt .ovgo{margin-inline-start:auto;color:var(--muted);font-size:20px}
.ovt.need b{color:var(--sale)}
.dlg{margin:0 0 18px}
.dlg h3{margin:0 0 8px;font-size:16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dlg h3 small{font-weight:500;color:var(--muted);font-size:13px}
.dcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;background:var(--surface)}
.dc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dc-top .oamt{margin-inline-start:auto;font-weight:700}
.dc-n{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:var(--soft);font-size:12px;font-weight:700}
.dc-ref{all:unset;cursor:pointer;font-weight:700;letter-spacing:.02em;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.dc-ref:hover{text-decoration-color:currentColor}
.dc-ref:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.dc-who{margin:8px 0 4px;font-size:14px}
.dc-who a{color:inherit}
.dc-items{margin:0;padding-inline-start:18px;font-size:14px}
.dc-items small{color:var(--muted)}
.dc-note{margin:6px 0 0;font-size:13px;color:var(--muted)}
.dc-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.dc-act .primary{margin-inline-start:auto}
.nilist li{gap:10px 14px}
.nilist .ln{flex:1 1 220px;min-width:0;display:grid;gap:2px}
.nilist .ln small{color:var(--muted)}
.ni-f{display:flex;gap:8px;flex:1 1 220px;max-width:340px}
.ni-in{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
.printonly{display:none}
@media (max-width:520px){ .ovt{padding:10px 12px;gap:10px} .ovt b{font-size:18px} .ni-f{max-width:none} }
@media print{
  .side,.mtop,.bnav,.more-layer,.ownerbar,.page-title,.noprint,.toast,#toast{display:none!important}
  .printonly{display:block;margin:0 0 12px;font-size:18px}
  html,body,.adm,.adm-main,.panel{background:#fff!important;color:#000!important}
  .adm{display:block!important}
  .adm-main{padding:0!important}
  .panel{border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
  .dcard{break-inside:avoid;border-color:#999;background:#fff}
  .dcard *,.dlg h3,.dlg h3 small{color:#000!important}
  .opill{box-shadow:inset 0 0 0 1px #999!important;background:none!important}
  .dc-n{background:#eee!important}
  a{text-decoration:none}
}
.st-dispatched{background:color-mix(in srgb,var(--chart,#2563eb) 14%,transparent);color:var(--chart,#2563eb)}
@media (max-width:520px){ .ovt small{white-space:normal;line-height:1.2} .ovt .ni{display:none} }
@media print{ .dc-ref{text-decoration:none} }

/* ---------- 1.41: seasonal themes for Christmas and New Year ---------- */
/* season: Christmas — your colours with falling snow, a candy-cane stripe and a little tree */
.season-christmas .hero::before{display:block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='86' cy='42' r='2.2' fill-opacity='0.35'/%3E%3Ccircle cx='22' cy='214' r='2.6' fill-opacity='0.35'/%3E%3Ccircle cx='97' cy='153' r='1.2' fill-opacity='0.45'/%3E%3Ccircle cx='13' cy='26' r='2.2' fill-opacity='0.7'/%3E%3Ccircle cx='21' cy='65' r='1.2' fill-opacity='0.7'/%3E%3Ccircle cx='19' cy='215' r='2.6' fill-opacity='0.35'/%3E%3Ccircle cx='61' cy='165' r='2.6' fill-opacity='0.35'/%3E%3Ccircle cx='151' cy='153' r='2.2' fill-opacity='0.35'/%3E%3Ccircle cx='60' cy='15' r='2.6' fill-opacity='0.45'/%3E%3Ccircle cx='78' cy='111' r='1.5' fill-opacity='0.35'/%3E%3Ccircle cx='150' cy='82' r='2.6' fill-opacity='0.45'/%3E%3Ccircle cx='30' cy='152' r='2.6' fill-opacity='0.45'/%3E%3Ccircle cx='99' cy='28' r='2.6' fill-opacity='0.35'/%3E%3Ccircle cx='148' cy='19' r='2.6' fill-opacity='0.45'/%3E%3Ccircle cx='131' cy='178' r='2.6' fill-opacity='0.7'/%3E%3Ccircle cx='202' cy='84' r='2.2' fill-opacity='0.7'/%3E%3Ccircle cx='96' cy='80' r='1.5' fill-opacity='0.45'/%3E%3Ccircle cx='182' cy='203' r='1.5' fill-opacity='0.35'/%3E%3Ccircle cx='151' cy='80' r='2.6' fill-opacity='0.7'/%3E%3Ccircle cx='228' cy='91' r='2.2' fill-opacity='0.55'/%3E%3Ccircle cx='159' cy='22' r='1.2' fill-opacity='0.7'/%3E%3Ccircle cx='46' cy='197' r='1.8' fill-opacity='0.45'/%3E%3Ccircle cx='129' cy='111' r='1.2' fill-opacity='0.35'/%3E%3Ccircle cx='199' cy='146' r='2.6' fill-opacity='0.55'/%3E%3Ccircle cx='91' cy='181' r='1.8' fill-opacity='0.7'/%3E%3Ccircle cx='152' cy='208' r='2.2' fill-opacity='0.35'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.6' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M40 60L47.0 60.0'/%3E%3Cpath d='M40 60L43.5 66.1'/%3E%3Cpath d='M40 60L36.5 66.1'/%3E%3Cpath d='M40 60L33.0 60.0'/%3E%3Cpath d='M40 60L36.5 53.9'/%3E%3Cpath d='M40 60L43.5 53.9'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.5' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M190 30L195.0 30.0'/%3E%3Cpath d='M190 30L192.5 34.3'/%3E%3Cpath d='M190 30L187.5 34.3'/%3E%3Cpath d='M190 30L185.0 30.0'/%3E%3Cpath d='M190 30L187.5 25.7'/%3E%3Cpath d='M190 30L192.5 25.7'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M150 180L158.0 180.0'/%3E%3Cpath d='M150 180L154.0 186.9'/%3E%3Cpath d='M150 180L146.0 186.9'/%3E%3Cpath d='M150 180L142.0 180.0'/%3E%3Cpath d='M150 180L146.0 173.1'/%3E%3Cpath d='M150 180L154.0 173.1'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.45' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M70 200L75.0 200.0'/%3E%3Cpath d='M70 200L72.5 204.3'/%3E%3Cpath d='M70 200L67.5 204.3'/%3E%3Cpath d='M70 200L65.0 200.0'/%3E%3Cpath d='M70 200L67.5 195.7'/%3E%3Cpath d='M70 200L72.5 195.7'/%3E%3C/g%3E%3C/svg%3E") 0 0/240px}
.season-christmas .hero::after{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:8px;
  background:repeating-linear-gradient(135deg,#c8102e 0 10px,#ffffff 10px 20px)}
.season-christmas .hero-in{padding-top:40px}
.season-christmas .greet{background:#c8102e;color:#fff}
.season-christmas .greet::before{content:"";width:15px;height:17px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath fill='%232f9e5a' d='M10 3l6 8h-3l5 6H2l5-6H4z'/%3E%3Crect x='8.5' y='17' width='3' height='4' rx='.6' fill='%238a5a2b'/%3E%3Cpath fill='%23f3d58a' d='M10 0l.9 1.9 2 .3-1.5 1.4.4 2-1.8-1-1.8 1 .4-2L7.1 2.2l2-.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.season-christmas .lane{background:repeating-linear-gradient(90deg,#c8102e 0 17px,#ffffff 17px 34px,transparent 34px 64px)}

/* season: New Year — midnight sky, gold fireworks and confetti */
.season-newyear .hero{--brand-ink:#ffffff;color:#fff;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg stroke='%23f3d58a' stroke-opacity='0.9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M85.4 58.0L114.0 58.0'/%3E%3Cpath d='M83.9 64.7L109.6 77.1'/%3E%3Cpath d='M79.6 70.0L97.4 92.4'/%3E%3Cpath d='M73.4 73.0L79.8 100.9'/%3E%3Cpath d='M66.6 73.0L60.2 100.9'/%3E%3Cpath d='M60.4 70.0L42.6 92.4'/%3E%3Cpath d='M56.1 64.7L30.4 77.1'/%3E%3Cpath d='M54.6 58.0L26.0 58.0'/%3E%3Cpath d='M56.1 51.3L30.4 38.9'/%3E%3Cpath d='M60.4 46.0L42.6 23.6'/%3E%3Cpath d='M66.6 43.0L60.2 15.1'/%3E%3Cpath d='M73.4 43.0L79.8 15.1'/%3E%3Cpath d='M79.6 46.0L97.4 23.6'/%3E%3Cpath d='M83.9 51.3L109.6 38.9'/%3E%3C/g%3E%3Cg fill='%23f3d58a' fill-opacity='0.7200000000000001'%3E%3Ccircle cx='119.3' cy='69.3' r='1.4'/%3E%3Ccircle cx='109.6' cy='89.5' r='1.4'/%3E%3Ccircle cx='92.0' cy='103.6' r='1.4'/%3E%3Ccircle cx='70.0' cy='108.6' r='1.4'/%3E%3Ccircle cx='48.0' cy='103.6' r='1.4'/%3E%3Ccircle cx='30.4' cy='89.5' r='1.4'/%3E%3Ccircle cx='20.7' cy='69.3' r='1.4'/%3E%3Ccircle cx='20.7' cy='46.7' r='1.4'/%3E%3Ccircle cx='30.4' cy='26.5' r='1.4'/%3E%3Ccircle cx='48.0' cy='12.4' r='1.4'/%3E%3Ccircle cx='70.0' cy='7.4' r='1.4'/%3E%3Ccircle cx='92.0' cy='12.4' r='1.4'/%3E%3Ccircle cx='109.6' cy='26.5' r='1.4'/%3E%3Ccircle cx='119.3' cy='46.7' r='1.4'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.75' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M167.1 38.0L184.0 38.0'/%3E%3Cpath d='M165.9 42.5L180.5 51.0'/%3E%3Cpath d='M162.6 45.9L171.0 60.5'/%3E%3Cpath d='M158.0 47.1L158.0 64.0'/%3E%3Cpath d='M153.4 45.9L145.0 60.5'/%3E%3Cpath d='M150.1 42.5L135.5 51.0'/%3E%3Cpath d='M148.9 38.0L132.0 38.0'/%3E%3Cpath d='M150.1 33.5L135.5 25.0'/%3E%3Cpath d='M153.4 30.1L145.0 15.5'/%3E%3Cpath d='M158.0 28.9L158.0 12.0'/%3E%3Cpath d='M162.6 30.1L171.0 15.5'/%3E%3Cpath d='M165.9 33.4L180.5 25.0'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.6000000000000001'%3E%3Ccircle cx='186.9' cy='45.7' r='1.4'/%3E%3Ccircle cx='179.1' cy='59.1' r='1.4'/%3E%3Ccircle cx='165.7' cy='66.9' r='1.4'/%3E%3Ccircle cx='150.3' cy='66.9' r='1.4'/%3E%3Ccircle cx='136.9' cy='59.1' r='1.4'/%3E%3Ccircle cx='129.1' cy='45.7' r='1.4'/%3E%3Ccircle cx='129.1' cy='30.3' r='1.4'/%3E%3Ccircle cx='136.9' cy='16.9' r='1.4'/%3E%3Ccircle cx='150.3' cy='9.1' r='1.4'/%3E%3Ccircle cx='165.7' cy='9.1' r='1.4'/%3E%3Ccircle cx='179.1' cy='16.9' r='1.4'/%3E%3Ccircle cx='186.9' cy='30.3' r='1.4'/%3E%3C/g%3E%3Cg stroke='%23f3d58a' stroke-opacity='0.7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M156.3 108.0L168.0 108.0'/%3E%3Cpath d='M155.1 111.7L164.6 118.6'/%3E%3Cpath d='M151.9 114.0L155.6 125.1'/%3E%3Cpath d='M148.1 114.0L144.4 125.1'/%3E%3Cpath d='M144.9 111.7L135.4 118.6'/%3E%3Cpath d='M143.7 108.0L132.0 108.0'/%3E%3Cpath d='M144.9 104.3L135.4 97.4'/%3E%3Cpath d='M148.1 102.0L144.4 90.9'/%3E%3Cpath d='M151.9 102.0L155.6 90.9'/%3E%3Cpath d='M155.1 104.3L164.6 97.4'/%3E%3C/g%3E%3Cg fill='%23f3d58a' fill-opacity='0.5599999999999999'%3E%3Ccircle cx='169.7' cy='114.4' r='1.4'/%3E%3Ccircle cx='162.2' cy='124.7' r='1.4'/%3E%3Ccircle cx='150.0' cy='128.7' r='1.4'/%3E%3Ccircle cx='137.8' cy='124.7' r='1.4'/%3E%3Ccircle cx='130.3' cy='114.4' r='1.4'/%3E%3Ccircle cx='130.3' cy='101.6' r='1.4'/%3E%3Ccircle cx='137.8' cy='91.3' r='1.4'/%3E%3Ccircle cx='150.0' cy='87.3' r='1.4'/%3E%3Ccircle cx='162.2' cy='91.3' r='1.4'/%3E%3Ccircle cx='169.7' cy='101.6' r='1.4'/%3E%3C/g%3E%3C/svg%3E") right 4% top 18px/clamp(150px,30vw,300px) no-repeat,linear-gradient(135deg,#070b1f 0%,#141c45 60%,#24306a 100%)}
.season-newyear .hero::before{display:block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Ccircle cx='28' cy='74' r='1.2' fill='%23c0c8d8' fill-opacity='0.65'/%3E%3Ccircle cx='192' cy='184' r='2' fill='%23e9c46a' fill-opacity='0.65'/%3E%3Crect x='215' y='119' width='6' height='2.4' rx='1' fill='%23e9c46a' fill-opacity='0.65' transform='rotate%2888 215 119%29'/%3E%3Ccircle cx='10' cy='123' r='1.6' fill='%23e9c46a' fill-opacity='0.35'/%3E%3Ccircle cx='20' cy='60' r='1.6' fill='%23e9c46a' fill-opacity='0.35'/%3E%3Crect x='105' y='132' width='6' height='2.4' rx='1' fill='%23f3d58a' fill-opacity='0.35' transform='rotate%28140 105 132%29'/%3E%3Crect x='76' y='40' width='6' height='2.4' rx='1' fill='%23c0c8d8' fill-opacity='0.65' transform='rotate%28106 76 40%29'/%3E%3Crect x='96' y='179' width='6' height='2.4' rx='1' fill='%23c0c8d8' fill-opacity='0.35' transform='rotate%2845 96 179%29'/%3E%3Crect x='43' y='64' width='6' height='2.4' rx='1' fill='%23ffffff' fill-opacity='0.35' transform='rotate%28150 43 64%29'/%3E%3Crect x='51' y='72' width='6' height='2.4' rx='1' fill='%23e9c46a' fill-opacity='0.35' transform='rotate%28136 51 72%29'/%3E%3Ccircle cx='99' cy='161' r='2' fill='%23e9c46a' fill-opacity='0.35'/%3E%3Ccircle cx='163' cy='172' r='2' fill='%23f3d58a' fill-opacity='0.5'/%3E%3Crect x='209' y='148' width='6' height='2.4' rx='1' fill='%23c0c8d8' fill-opacity='0.5' transform='rotate%2826 209 148%29'/%3E%3Crect x='128' y='167' width='6' height='2.4' rx='1' fill='%23c0c8d8' fill-opacity='0.35' transform='rotate%2853 128 167%29'/%3E%3Ccircle cx='117' cy='46' r='1.2' fill='%23f3d58a' fill-opacity='0.5'/%3E%3Crect x='5' y='150' width='6' height='2.4' rx='1' fill='%23ffffff' fill-opacity='0.65' transform='rotate%2893 5 150%29'/%3E%3Ccircle cx='162' cy='11' r='1.2' fill='%23f3d58a' fill-opacity='0.35'/%3E%3Crect x='167' y='69' width='6' height='2.4' rx='1' fill='%23e9c46a' fill-opacity='0.65' transform='rotate%2831 167 69%29'/%3E%3Crect x='34' y='129' width='6' height='2.4' rx='1' fill='%23c0c8d8' fill-opacity='0.5' transform='rotate%2821 34 129%29'/%3E%3Crect x='41' y='31' width='6' height='2.4' rx='1' fill='%23e9c46a' fill-opacity='0.65' transform='rotate%2841 41 31%29'/%3E%3Crect x='137' y='10' width='6' height='2.4' rx='1' fill='%23ffffff' fill-opacity='0.65' transform='rotate%28139 137 10%29'/%3E%3Ccircle cx='11' cy='199' r='2' fill='%23e9c46a' fill-opacity='0.65'/%3E%3C/svg%3E") 0 0/220px}
.season-newyear .hero.has-photo{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg stroke='%23f3d58a' stroke-opacity='0.9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M85.4 58.0L114.0 58.0'/%3E%3Cpath d='M83.9 64.7L109.6 77.1'/%3E%3Cpath d='M79.6 70.0L97.4 92.4'/%3E%3Cpath d='M73.4 73.0L79.8 100.9'/%3E%3Cpath d='M66.6 73.0L60.2 100.9'/%3E%3Cpath d='M60.4 70.0L42.6 92.4'/%3E%3Cpath d='M56.1 64.7L30.4 77.1'/%3E%3Cpath d='M54.6 58.0L26.0 58.0'/%3E%3Cpath d='M56.1 51.3L30.4 38.9'/%3E%3Cpath d='M60.4 46.0L42.6 23.6'/%3E%3Cpath d='M66.6 43.0L60.2 15.1'/%3E%3Cpath d='M73.4 43.0L79.8 15.1'/%3E%3Cpath d='M79.6 46.0L97.4 23.6'/%3E%3Cpath d='M83.9 51.3L109.6 38.9'/%3E%3C/g%3E%3Cg fill='%23f3d58a' fill-opacity='0.7200000000000001'%3E%3Ccircle cx='119.3' cy='69.3' r='1.4'/%3E%3Ccircle cx='109.6' cy='89.5' r='1.4'/%3E%3Ccircle cx='92.0' cy='103.6' r='1.4'/%3E%3Ccircle cx='70.0' cy='108.6' r='1.4'/%3E%3Ccircle cx='48.0' cy='103.6' r='1.4'/%3E%3Ccircle cx='30.4' cy='89.5' r='1.4'/%3E%3Ccircle cx='20.7' cy='69.3' r='1.4'/%3E%3Ccircle cx='20.7' cy='46.7' r='1.4'/%3E%3Ccircle cx='30.4' cy='26.5' r='1.4'/%3E%3Ccircle cx='48.0' cy='12.4' r='1.4'/%3E%3Ccircle cx='70.0' cy='7.4' r='1.4'/%3E%3Ccircle cx='92.0' cy='12.4' r='1.4'/%3E%3Ccircle cx='109.6' cy='26.5' r='1.4'/%3E%3Ccircle cx='119.3' cy='46.7' r='1.4'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.75' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M167.1 38.0L184.0 38.0'/%3E%3Cpath d='M165.9 42.5L180.5 51.0'/%3E%3Cpath d='M162.6 45.9L171.0 60.5'/%3E%3Cpath d='M158.0 47.1L158.0 64.0'/%3E%3Cpath d='M153.4 45.9L145.0 60.5'/%3E%3Cpath d='M150.1 42.5L135.5 51.0'/%3E%3Cpath d='M148.9 38.0L132.0 38.0'/%3E%3Cpath d='M150.1 33.5L135.5 25.0'/%3E%3Cpath d='M153.4 30.1L145.0 15.5'/%3E%3Cpath d='M158.0 28.9L158.0 12.0'/%3E%3Cpath d='M162.6 30.1L171.0 15.5'/%3E%3Cpath d='M165.9 33.4L180.5 25.0'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.6000000000000001'%3E%3Ccircle cx='186.9' cy='45.7' r='1.4'/%3E%3Ccircle cx='179.1' cy='59.1' r='1.4'/%3E%3Ccircle cx='165.7' cy='66.9' r='1.4'/%3E%3Ccircle cx='150.3' cy='66.9' r='1.4'/%3E%3Ccircle cx='136.9' cy='59.1' r='1.4'/%3E%3Ccircle cx='129.1' cy='45.7' r='1.4'/%3E%3Ccircle cx='129.1' cy='30.3' r='1.4'/%3E%3Ccircle cx='136.9' cy='16.9' r='1.4'/%3E%3Ccircle cx='150.3' cy='9.1' r='1.4'/%3E%3Ccircle cx='165.7' cy='9.1' r='1.4'/%3E%3Ccircle cx='179.1' cy='16.9' r='1.4'/%3E%3Ccircle cx='186.9' cy='30.3' r='1.4'/%3E%3C/g%3E%3Cg stroke='%23f3d58a' stroke-opacity='0.7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M156.3 108.0L168.0 108.0'/%3E%3Cpath d='M155.1 111.7L164.6 118.6'/%3E%3Cpath d='M151.9 114.0L155.6 125.1'/%3E%3Cpath d='M148.1 114.0L144.4 125.1'/%3E%3Cpath d='M144.9 111.7L135.4 118.6'/%3E%3Cpath d='M143.7 108.0L132.0 108.0'/%3E%3Cpath d='M144.9 104.3L135.4 97.4'/%3E%3Cpath d='M148.1 102.0L144.4 90.9'/%3E%3Cpath d='M151.9 102.0L155.6 90.9'/%3E%3Cpath d='M155.1 104.3L164.6 97.4'/%3E%3C/g%3E%3Cg fill='%23f3d58a' fill-opacity='0.5599999999999999'%3E%3Ccircle cx='169.7' cy='114.4' r='1.4'/%3E%3Ccircle cx='162.2' cy='124.7' r='1.4'/%3E%3Ccircle cx='150.0' cy='128.7' r='1.4'/%3E%3Ccircle cx='137.8' cy='124.7' r='1.4'/%3E%3Ccircle cx='130.3' cy='114.4' r='1.4'/%3E%3Ccircle cx='130.3' cy='101.6' r='1.4'/%3E%3Ccircle cx='137.8' cy='91.3' r='1.4'/%3E%3Ccircle cx='150.0' cy='87.3' r='1.4'/%3E%3Ccircle cx='162.2' cy='91.3' r='1.4'/%3E%3Ccircle cx='169.7' cy='101.6' r='1.4'/%3E%3C/g%3E%3C/svg%3E") right 4% top 18px/clamp(150px,30vw,300px) no-repeat,linear-gradient(100deg,rgba(7,11,31,.96) 0%,rgba(7,11,31,.82) 50%,rgba(20,28,69,.35) 100%),var(--hero-img) center/cover no-repeat,#070b1f}
.season-newyear .greet{background:#f3d58a;color:#2a1f00}
.season-newyear .greet::before{content:"";width:13px;height:13px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%232a1f00' d='M10 1l2.2 6.8L19 10l-6.8 2.2L10 19l-2.2-6.8L1 10l6.8-2.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.season-newyear .btn-on-brand{background:#f3d58a;color:#141c45}
.season-newyear .lane{background:repeating-linear-gradient(90deg,rgba(243,213,138,.9) 0 26px,transparent 26px 40px,rgba(255,255,255,.7) 40px 52px,transparent 52px 72px)}

/* ---------- 1.42: Store settings revamp ---------- */
/* on/off switches */
.swr{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.swt{display:grid;gap:2px;min-width:0}
.swt b{font-size:15px;font-weight:600;line-height:1.3}
.swt small{font-size:13px;color:var(--muted);font-weight:400;line-height:1.35}
input.sw{-webkit-appearance:none;appearance:none;flex:none;width:44px;height:26px;margin:0;border-radius:999px;position:relative;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 20%,transparent);transition:background .15s}
input.sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
input.sw:checked{background:var(--btn)}
input.sw:checked::after{transform:translateX(18px)}
input.sw:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hs-row .sw-l input.sw{width:44px;height:26px;margin-top:0}
.hs-row .sw-l{align-items:center}
/* section heading with "View store" */
.sech-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 14px}
.sech-row .sech{margin:0}
.vstore{flex:none;text-decoration:none}
.setsec .subh:first-child{margin-top:0}
/* unsaved-changes dot */
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#d97706;margin-inline-start:7px;flex:none;vertical-align:middle}
.sdot[hidden]{display:none}
.savebar[hidden]{display:none}
/* section menu with icons */
.subnav .chip .ni{width:17px;height:17px;color:var(--muted)}
.subnav .chip[aria-selected="true"] .ni{color:inherit}
@media (min-width:1100px){
  .setwrap{grid-template-columns:210px minmax(0,1fr)}
  .setwrap>.subnav .chip{justify-content:flex-start;gap:10px}
  .setwrap>.subnav .chip span:not(.ndot){flex:1;text-align:start}
}
/* phones and small tablets: the sections as a row of tabs, like the rest of the admin */
@media (max-width:899px){
  .subnav .chip .ni{display:none}
  .subnav .chip .sdot{margin-inline-start:2px}
  .sech-row .sech{font-size:20px}
  .swr{padding:12px}
}
input.sw:checked::after{background:var(--btn-ink)}

/* ---------- 1.43: My orders and Order again ---------- */
.mo-list{display:grid;gap:12px;margin-top:6px}
@media (min-width:760px){.mo-list{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}
.mo-card{position:relative;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--surface);padding:14px 16px;display:grid;gap:10px}
.mo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-inline-end:26px}
.mo-top>div{display:grid;gap:2px}
.mo-top b{font-size:16px}
.mo-top small{color:var(--muted);font-size:13px;letter-spacing:.02em}
.mo-st{flex:none;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--soft);color:var(--ink);white-space:nowrap}
.mo-st.st-confirmed{background:color-mix(in srgb,#16a34a 15%,transparent);color:#15803d}
.mo-st.st-dispatched{background:color-mix(in srgb,#2563eb 14%,transparent);color:#1d4ed8}
.mo-st.st-delivered{background:var(--soft);color:var(--muted)}
.mo-st.st-cancelled{background:color-mix(in srgb,#dc2626 12%,transparent);color:#b91c1c}
.mo-items{margin:0;font-size:14px;line-height:1.5}
.mo-more{color:var(--muted)}
.mo-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.mo-total{font-size:16px}
.mo-act{display:flex;gap:8px;margin-inline-start:auto}
.mo-act .ghost,.mo-act .big-btn{width:auto;margin:0;padding:10px 14px;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.mo-act .big-btn svg{width:16px;height:16px}
.mo-x{position:absolute;top:8px;inset-inline-end:8px;width:30px;height:30px;border:0;background:none;color:var(--muted);font-size:20px;line-height:1;border-radius:8px;cursor:pointer}
.mo-x:hover{background:var(--soft);color:var(--ink)}
.lastord{margin-top:18px}
.lo-in{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--surface);padding:12px 14px}
.lo-t{display:grid;gap:2px;min-width:0;flex:1 1 200px}
.lo-t b{font-size:15px}
.lo-t small{color:var(--muted);font-size:13px}
.lo-act{display:flex;gap:8px;margin-inline-start:auto}
.lo-act .ghost,.lo-act .big-btn{width:auto;margin:0;padding:9px 14px;font-size:14px}
@media (max-width:520px){ .lo-act{width:100%} .lo-act .ghost,.lo-act .big-btn{flex:1} }
.trk-r{display:flex;gap:8px;flex:none}
.mo-act a.ghost,.lo-act a.ghost{color:inherit}
.lastord{margin:14px 0 4px}
.mo-empty{max-width:560px;margin-inline:auto}
.mo-find{text-align:start;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--surface);padding:14px 16px;margin:4px 0 16px;display:grid;gap:10px}
.mo-find p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.mo-find p b{color:var(--ink)}
.mo-fbox{display:flex;gap:8px}
.mo-fbox input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;letter-spacing:.04em;text-transform:uppercase}
.mo-fbox .big-btn{width:auto;padding:11px 18px;font-size:15px}
.mo-ferr{color:#b91c1c!important}
.mo-wa a{color:var(--ink);font-weight:600}
.mo-empty{justify-items:stretch;width:100%}.mo-empty>svg,.mo-empty>.big-btn{justify-self:center}
.mo-find{min-width:0}.mo-fbox{min-width:0}.mo-fbox input{flex:1 1 0;width:0}
.track-more{margin:14px 0 4px;font-size:14px;color:var(--muted);line-height:1.5}
/* 1.44.4: product page — a slim question line instead of a second big button */
.askline{margin:12px 0 0;font-size:14px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.askline a{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.askline a:hover{text-decoration-color:currentColor}
.askline svg{width:16px;height:16px;color:var(--wa)}
.actions .ghost:disabled{opacity:.45;cursor:not-allowed}
/* 1.45.2: heading above the product list, matching the home sections */
.shop-h{font-size:20px;font-weight:800;margin:22px 0 4px;letter-spacing:-.01em}
.shop-hrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:22px 0 4px}
.shop-hrow .shop-h{margin:0;min-width:0}
.shop-clear{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;border-radius:999px;padding-block:7px 7px;padding-inline:11px 14px;cursor:pointer;white-space:nowrap}
.shop-clear[hidden]{display:none}
.shop-clear svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.shop-clear:hover{border-color:var(--ink)}
.shop-intro{margin:2px 0 10px;color:var(--muted);font-size:15px;line-height:1.55;max-width:75ch}

/* ---------- 1.46: search engines ---------- */
.gprev{display:grid;gap:3px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;font-family:Arial,Helvetica,sans-serif}
.gp-url{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-t{font-size:18px;line-height:1.3;color:#1a0dab}
.gp-d{font-size:13.5px;line-height:1.45;color:var(--muted)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .gp-t{color:#8ab4f8} }
:root[data-theme="dark"] .gp-t{color:#8ab4f8}
.cnt{font-weight:500;color:var(--muted);margin-inline-start:6px}
.cnt.over{color:#b45309}
.sitemap-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.sitemap-row code{background:var(--soft);padding:3px 8px;border-radius:6px;font-size:13px;word-break:break-all}
.ct-dbtn{font-size:13px;color:var(--muted);text-align:start;margin-top:2px}
.ct-desc{display:grid;gap:8px;padding-block:4px 12px;padding-inline:56px 0}
.ct-desc textarea{width:100%;min-width:0;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);resize:vertical}
@media (max-width:640px){ .ct-desc{padding-inline-start:0} }

/* ---------- product page: clearer hierarchy and an easy-to-read description (1.49.6) ---------- */
.pp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pp-meta a{color:inherit;text-decoration:none}
.pp-meta a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pp-meta .pp-mbrand{color:var(--brand)}
:root[data-theme="dark"] .pp-meta .pp-mbrand{color:var(--brand-lift)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pp-meta .pp-mbrand{color:var(--brand-lift)}}
.pp-info .pp-title{font-family:var(--display);font-stretch:104%;font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.2;letter-spacing:-.01em;margin:0 0 12px;text-wrap:balance}
.pp-del{display:flex;gap:10px;align-items:flex-start;background:none;border:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.45;padding:12px 14px}
.pp-del svg{flex:none;width:20px;height:20px;color:var(--muted);margin-top:1px}
.pp-desc{margin-top:26px;padding-top:22px}
.pp-desc h2,.pp-specs h2{font-size:17px;font-weight:700;margin:0 0 12px;letter-spacing:0}
.pp-desc .desc{font-size:16px;line-height:1.72;color:color-mix(in srgb,var(--ink) 86%,var(--surface));max-width:68ch}
.pp-desc .desc p{margin:0 0 14px}
.pp-desc .desc b{color:var(--ink);font-weight:600}
.pp-desc .desc ul{list-style:none;padding:0;margin:0 0 16px;gap:8px}
.pp-desc .desc li{position:relative;padding-inline-start:22px}
.pp-desc .desc li::before{content:"";position:absolute;inset-inline-start:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--ink) 45%,var(--surface))}
.pp-specs{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.pp-specs dl{margin:0;display:grid;font-size:15px}
.pp-specs dl>div{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.pp-specs dl>div:last-child{border-bottom:0}
.pp-specs dt{color:var(--muted);font-weight:500}
.pp-specs dd{margin:0;color:var(--ink);font-weight:600;min-width:0;overflow-wrap:anywhere}
.pp-specs dd a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.pp-code{font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media (max-width:699px){.pp-desc .desc{font-size:15.5px;line-height:1.68}.pp-specs dl{font-size:14.5px}}

/* ---------- search results page (1.50.0) ---------- */
.srp-page{padding-top:14px;padding-bottom:40px}
.srp-head{margin:0 0 16px}
.srp-head h1{font-size:clamp(22px,2.6vw,28px);line-height:1.2;margin:0 0 4px;overflow-wrap:anywhere}
.srp-n{margin:0;color:var(--muted);font-size:14px}
.srp-also{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--muted)}
.srp-also a{border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--ink);font-weight:600;text-decoration:none;background:var(--surface)}
.srp-also a:hover{border-color:var(--ink)}
.srp-grid{display:grid;gap:24px}
.srp-main{min-width:0}
.srp-side{display:none}
.srp-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.srp-fbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:14px;border-radius:999px;padding-block:8px 8px;padding-inline:13px 16px;cursor:pointer}
.srp-fbtn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.srp-fbtn b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-size:12px}
.srp-sort{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.srp-sort select{font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding-block:8px 8px;padding-inline:14px 32px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23778' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:14px}
.srp-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.srp-chip{display:inline-flex;align-items:center;gap:6px;background:var(--soft);cursor:pointer;color:var(--ink)}
.srp-chip svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round}
.srp-clear{border:0;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 4px}
.srp-results{padding-top:0}
.srp-empty{padding-top:24px}
/* the filters (side panel on computers, Filters panel on phones) */
.sf-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px;font-size:16px}
.sf{display:grid}
.sf-g{padding:14px 0;border-top:1px solid var(--line)}
.sf-g:first-child{border-top:0;padding-top:4px}
.sf-t{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sf-t small{text-transform:none;letter-spacing:0;font-weight:500}
.sf-o{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:15px;cursor:pointer;color:var(--ink)}
.sf-o input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--btn)}
.sf-o span{flex:1;min-width:0;overflow-wrap:anywhere}
.sf-o small{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.sf-o.is-zero{opacity:.5}
.sf-price{display:flex;align-items:center;gap:8px}
.sf-price label{flex:1;min-width:0}
.sf-price input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.sf-go{flex:none;border:1px solid var(--line);background:var(--soft);color:var(--ink);font:inherit;font-weight:600;font-size:14px;border-radius:10px;padding:9px 12px;cursor:pointer}
.sf-sheet .pad{padding-bottom:8px}
.sf-foot{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line)}
.sf-foot .big-btn{flex:1 1 auto;margin:0;width:auto}
.sf-foot .ghost{flex:none;width:auto;margin:0;padding-inline:18px}
@media (min-width:900px){
  .srp-grid{grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start}
  .srp-side{display:block;position:sticky;top:calc(var(--toph,72px) + 12px);max-height:calc(100vh - var(--toph,72px) - 24px);overflow:auto;padding-inline-end:4px}
  .srp-fbtn{display:none}
  .srp-bar{justify-content:flex-end}
}

/* ---------- cart: delivery or pickup, and payment (1.51.0) ---------- */
.fulfil{margin:16px 0 4px}
.ful-t,.paych legend{margin:0 0 8px;font-weight:700;font-size:15px;padding:0}
.ful-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ful-seg button{display:flex;align-items:center;gap:10px;text-align:start;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;padding:11px 12px;font:inherit;cursor:pointer}
.ful-seg button svg{flex:none;width:22px;height:22px;color:var(--muted)}
.ful-seg button span{display:grid;min-width:0}
.ful-seg button b{font-size:15px}
.ful-seg button small{font-size:13px;color:var(--muted)}
.ful-seg button[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ful-seg button[aria-checked="true"] svg{color:var(--ink)}
.pk-list,.paych{display:grid;gap:8px;margin-top:10px}
.paych{border:0;padding:0;margin:16px 0 4px;min-width:0}
.pk-o,.pay-o{display:flex;gap:11px;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:11px 12px;cursor:pointer;background:var(--surface)}
.pk-o input,.pay-o input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--btn)}
.pk-o.on,.pay-o.on{border-color:var(--ink)}
.pk-t,.pay-o span{display:grid;gap:1px;min-width:0}
.pk-t b,.pay-o b{font-size:15px}
.pk-t small,.pay-o small{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.pk-t a{font-size:13px;font-weight:600;color:var(--ink);width:max-content;margin-top:2px}
.pay-o em{font-style:normal;font-weight:600;color:var(--muted);font-size:13px}
.ful-n{margin:8px 0 0;font-size:13px;color:var(--muted)}
.track-pickup{margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;font-size:15px;line-height:1.5}
.pkrow{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 8px;display:grid;gap:8px}
.pk-ctl{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* pickup opening hours editor (admin) */
.wk{display:grid;gap:8px}
.wk-grid{display:grid;gap:6px}
.wk-day{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:6px 0;border-top:1px solid var(--line)}
.wk-dn{display:flex;align-items:center;gap:8px;min-width:120px;font-weight:600;font-size:14px}
.wk-t{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.wk-t input{font:inherit;font-size:15px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.wk-closed{display:none;color:var(--muted);font-size:14px}
.wk-day.is-closed .wk-t{display:none}
.wk-day.is-closed .wk-closed{display:inline}
.wk-foot{padding-top:6px;border-top:1px solid var(--line)}
/* opening hours in the cart */
.pk-hrs{display:grid;gap:1px;margin-top:3px;font-size:13px;color:var(--muted)}
.pk-hrs b{font-weight:600;font-size:13px;color:var(--ink)}
.pk-now{font-size:12px;font-weight:700;width:max-content;margin-top:3px;padding:1px 8px;border-radius:999px}
.pk-now.open{color:#0b6b3a;background:color-mix(in srgb,#16a34a 14%,transparent)}
.pk-now.shut{color:var(--muted);background:var(--soft)}
:root[data-theme="dark"] .pk-now.open{color:#5ad18e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pk-now.open{color:#5ad18e}}
@media (max-width:560px){.wk-t{display:flex;width:100%}.wk-t input{flex:1 1 0;min-width:0;padding:6px}.wk-day.is-closed .wk-t{display:none}}
/* several pickup stores: compact rows; only the chosen one opens up */
.pk-list.compact{gap:6px}
.pk-list.compact .pk-o{padding:9px 12px;align-items:center}
.pk-list.compact .pk-o:not(.on) .pk-a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-list.compact .pk-o:not(.on) .pk-t{grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
.pk-list.compact .pk-o:not(.on) .pk-t b{grid-column:1}
.pk-list.compact .pk-o:not(.on) .pk-a{grid-column:1}
.pk-list.compact .pk-o:not(.on) .pk-now{grid-column:2;grid-row:1/span 2;margin:0}
.pk-list.compact .pk-o.on{align-items:flex-start}

/* ---------- cart panel and checkout page (1.52.0) ---------- */
.ct-note{margin:12px 0 0;font-size:14px;color:var(--muted)}
.ct-act{margin-top:14px}
.ct-act .big-btn{text-decoration:none;text-align:center}
.lines .ck-lp{margin-inline-start:auto;font-weight:600;white-space:nowrap;font-size:14px}
body.on-checkout .cartbar,body.on-checkout .wafloat{display:none!important}
.ck-page{padding-top:14px;padding-bottom:48px}
.ck-h{font-size:clamp(24px,3vw,32px);margin:0 0 16px}
.ck-grid{display:grid;gap:20px}
.ck-main{min-width:0;display:grid;gap:14px}
.ck-sec{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:18px}
.ck-sec>h2{display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 14px}
.ck-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--btn);color:var(--btn-ink);font-size:13px;font-weight:700;flex:none}
.ck-sec .fulfil{margin-top:0}
.ck-sec .fulfil .ful-t{display:none}
.ck-addr{margin-top:14px}
.ck-sec .fields{margin:0}
.ck-sec .paych{margin:0}
.ck-disc .dcode{margin:0}
.ck-pay1{margin:0;font-size:15px;color:var(--muted)}
.ck-pay1 b{color:var(--ink)}
.ck-total{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;margin:0 0 12px}
.ck-total b{font-size:22px}
.ck-send .actions{margin-top:0}
.ck-sum{display:none}
.ck-sum-in{display:grid;gap:4px}
.ck-sum-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ck-sum-h h2{font-size:17px;margin:0}
.linkbtn{border:0;background:none;padding:4px 0;font:inherit;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ck-sum .lines li,.ck-sum-m .lines li{padding:8px 0}
.ck-sum .thumb,.ck-sum-m .thumb{width:48px;height:48px}
.ck-sum-m{border:1px solid var(--line);background:var(--surface);border-radius:16px;margin:0 0 14px}
.ck-sum-m>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-weight:600;list-style:none}
.ck-sum-m>summary::-webkit-details-marker{display:none}
.ck-sum-m>summary span::after{content:" ▾";color:var(--muted)}
.ck-sum-m[open]>summary span::after{content:" ▴"}
.ck-sum-m>summary small{color:var(--muted);font-weight:500}
.ck-sum-m .ck-sum-in{padding:0 16px 14px}
.ck-sum-m .ck-sum-h h2{display:none}
.ck-empty{text-align:center;padding:40px 0;display:grid;justify-items:center;gap:8px}
.ck-empty h1{font-size:24px;margin:0}
.ck-empty p{margin:0 0 10px;color:var(--muted)}
@media (min-width:900px){
  .ck-grid{grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
  .ck-sum{display:block;position:sticky;top:calc(var(--toph,72px) + 14px);border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:18px}
  .ck-sum-m{display:none}
}
/* settings: groups shown as cards (Delivery, Store pickup, Payments & VAT, Checkout) */
.scards{gap:14px}
.scard{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface);display:grid;gap:12px;min-width:0}
.scard-h{margin:0;font-size:16px}
.scard-p{margin:-6px 0 0;font-size:14px;color:var(--muted)}
.scard .swr{margin:0}
/* pickup locations in settings: a short card each, the form only while editing */
.pk-c{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pkc-m{display:grid;gap:2px;min-width:0;flex:1 1 260px}
.pkc-m b{font-size:15px}
.pkc-m small{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.pkc-a{display:flex;gap:6px}
.pk-btns{display:flex;gap:6px}
.wk-addbr{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:4px 2px}
.wk-addbr:hover{color:var(--ink)}
.wk-rmbr{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:4px}
.wk-t[hidden],.wk-addbr[hidden]{display:none!important}
.wk-day{padding:4px 0}
.scard>*,#pkbox,.pkrow>*{min-width:0}
.pkrow{grid-template-columns:minmax(0,1fr)}
.wk-day.is-closed .wk-addbr{display:none}
.wk,.wk-grid{grid-template-columns:minmax(0,1fr)}
@media (max-width:560px){.wk-t input{width:0}.wk-t .wk-and{flex:none}}
@media (max-width:560px){.wk-t .wk-and{display:none}.wk-t input{font-size:14px;padding:6px 4px}.scard{padding:14px 12px}.pkrow{padding:10px}.wk-t{gap:4px}}
.v-descrow{grid-column:1/-1}
.v-descrow textarea{width:100%;font:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);resize:vertical;min-height:70px}
.v-descrow .linkbtn{font-size:13px;padding:2px 0}
.pp-desc .vdesc{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pp-desc .vdesc h3{font-size:15px;margin:0 0 6px}
/* 1.55: Site health tabs and bug notes */
.hl-tabs{margin:0 0 16px}
.bug-form{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin:0 0 4px}
.bug-form textarea{width:100%;font:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);resize:vertical}
.buglist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bug{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);display:grid;gap:4px;min-width:0}
.bug.is-fixed{opacity:.75}
.bug-top{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
.bug-top b{font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.bug-where{color:var(--muted);overflow-wrap:anywhere}
.bug-det{margin:4px 0 2px;white-space:pre-wrap;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.bug-act{justify-content:flex-start;margin-top:6px;flex-wrap:wrap}
.bug-sure{font-weight:600;font-size:14px}
.opill.bug-hi{background:var(--ink);color:var(--surface)}
.el-top .el-fix+.el-fix{margin-inline-start:12px}
/* 1.55.1: search results as a grid or a list */
.srp-br{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.srp-view{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:3px;gap:2px}
.srp-view button{all:unset;box-sizing:border-box;display:grid;place-items:center;width:34px;height:30px;border-radius:999px;color:var(--muted);cursor:pointer}
.srp-view button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.srp-view button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.srp-view button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.grid.as-list{grid-template-columns:minmax(0,1fr)!important;gap:10px}
.as-list .card{flex-direction:row;align-items:stretch}
.as-list .card .ph{flex:none;width:118px;aspect-ratio:1/1;align-self:flex-start}
.as-list .card .ph .badge{font-size:10.5px;padding:3px 6px}
.as-list .card .ph .wish,.as-list .card .ph [data-act="wish"]{transform:scale(.85);transform-origin:top right}
.as-list .ci{padding:10px 12px;justify-content:flex-start}
.as-list .ci h3{-webkit-line-clamp:2;line-clamp:2;min-height:0}
.as-list .ci .opts:empty,.as-list .ci .opts[aria-hidden="true"]{display:none}
.as-list .cdesc{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.as-list .cf{margin-top:auto;padding-top:6px}
@media (min-width:700px){
  .as-list .card .ph{width:170px}
  .as-list .ci{padding:14px 18px}
  .as-list .ci h3{font-size:16px}
  .as-list .cdesc{-webkit-line-clamp:3;line-clamp:3;font-size:14px}
}
@media (max-width:560px){ .srp-sort span{display:none} .srp-sort select{max-width:150px;text-overflow:ellipsis} .srp-br{gap:8px} }
.as-list .ph-ctl{inset-inline-end:6px;bottom:6px}
.as-list .ph-ctl .plus{transform:scale(.82);transform-origin:bottom right}
.srp-bar{flex-wrap:wrap}
/* 1.55.2: search results as a list (rows built for reading and comparing) */
.lrows{display:grid;gap:10px;padding-top:4px}
.lrow{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"ph main" "buy buy";gap:10px 14px;padding:12px;flex-direction:initial;border-radius:16px}
.lr-ph{grid-area:ph;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--brand) 7%,var(--soft));display:grid;place-items:center;font-size:0;color:transparent}
.lr-ph img{width:100%;height:100%;object-fit:cover}
.lr-ph svg{width:46%;height:46%;color:var(--muted)}
.lrow.is-out .lr-ph img{opacity:.55}
.lr-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:3px;padding-inline-end:34px}
.lr-main .cbrand{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-main h3{margin:0;font-family:var(--body);font-size:15px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lr-main h3 .vnm{font-weight:500;color:var(--muted)}
.lr-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.lr-tag{font-size:11.5px;font-weight:700;line-height:1;padding:4px 7px;border-radius:6px;background:var(--soft);color:var(--ink)}
.lr-tag.off{background:#c8102e;color:#fff}
.lr-tag.low{background:#fff4e0;color:#8a4b00}
.lr-tag.out{background:var(--ink);color:var(--surface)}
[data-theme=dark] .lr-tag.low{background:#3a2a10;color:#ffcf8a}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .lr-tag.low{background:#3a2a10;color:#ffcf8a}}
.lr-opts{margin:2px 0 0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-opts b{color:var(--ink);font-weight:600}
.lrow .cdesc{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lr-buy{grid-area:buy;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.lr-pr{display:flex;flex-direction:column;min-width:0}
.lr-price{font-size:18px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.lr-price small{font-size:12px;font-weight:600;color:var(--muted)}
.lr-was{font-size:12.5px;color:#1b7a3d;font-weight:600;white-space:nowrap}
.lr-was s{color:var(--muted);font-weight:500;margin-inline-end:4px}
.lr-ends{font-size:12px;color:var(--muted)}
.lr-buy .ph-ctl{position:static;flex:none}
.lr-add{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 16px;border:0;border-radius:12px;background:var(--ink);color:var(--surface);font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.lr-add svg{width:16px;height:16px}
.lr-add.ghost{width:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:0 14px}
.lr-add .pn{font-weight:600;color:var(--muted);font-size:12.5px}
.lr-buy .step{min-height:42px}
.lr-buy .step button{width:40px;height:42px}
.lrow .lr-w{top:10px;inset-inline-end:10px;width:32px;height:32px}
@media (min-width:700px){
  .lrow{grid-template-columns:150px minmax(0,1fr) 200px;grid-template-areas:"ph main buy";gap:18px;padding:14px 16px}
  .lr-main{padding-block:2px 0;padding-inline:0 34px}
  .lr-main h3{font-size:16.5px}
  .lrow .cdesc{-webkit-line-clamp:3;line-clamp:3;font-size:14px}
  .lr-buy{flex-direction:column;align-items:stretch;justify-content:center;gap:12px;border-top:0;border-inline-start:1px solid var(--line);padding-block:0 0;padding-inline:18px 0}
  .lr-price{font-size:21px}
  .lr-add{width:100%}
  .lr-buy .step{justify-content:space-between}
  .lrow .lr-w{inset-inline-end:auto;inset-inline-start:calc(150px + 16px - 42px);top:22px;background:color-mix(in srgb,var(--surface) 88%,transparent)}
}
/* 1.56: customer accounts */
.acct-btn .acct-ini{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);font-size:13px;font-weight:800;line-height:1}
.ac-box{display:grid;gap:12px}
.ac-box h2{margin:0;font-size:20px}
.ac-p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.ac-p b{color:var(--ink)}
.ac-code{font-size:24px!important;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.ac-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.ac-note{margin:0;font-size:13px}
.ac-sheet{max-width:460px}
.acp{max-width:760px}
.ac-signin{max-width:460px;margin:8px auto 0}
.ac-dev{text-align:center;margin-top:14px}
.ac-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px;margin:0 0 12px;display:grid;gap:12px}
.ac-card h2{margin:0;font-size:17px}
.ac-card .note{margin:0}
.ac-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 0 14px}
.ac-head h1{margin:0;font-size:clamp(24px,5vw,30px)}
.ac-head small{color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.ac-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);margin:0 0 16px;width:max-content;max-width:100%}
.ac-tabs button{all:unset;box-sizing:border-box;padding:9px 18px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer}
.ac-tabs button[aria-selected="true"]{background:var(--ink);color:var(--surface)}
.ac-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ac-alist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ac-alist li{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px}
.ac-ahead{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.ac-def{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.ac-afields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.ac-afields .ac-wide{grid-column:1/-1}
.ac-addbtn{width:auto;justify-self:start;padding:10px 16px}
.ac-save{max-width:320px}
.ac-sess{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ac-sess li{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.ac-sess li small{color:var(--muted)}
.ac-sess .mo-st{justify-self:start}
.ac-row{display:flex;gap:10px;flex-wrap:wrap}
.ac-row .ghost,.ac-row .big-btn{width:auto;padding:10px 16px}
.ac-danger{border-color:color-mix(in srgb,#c8102e 35%,var(--line))}
.ac-delbtn{width:auto;justify-self:start;padding:10px 16px;color:#c8102e}
.ac-delgo{background:#c8102e!important;border-color:#c8102e!important}
.ac-ck{margin:0 0 12px;font-size:14px;color:var(--muted)}
.ac-ck.on{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink)}
.ac-ck .linkbtn{font-weight:600;color:var(--ink)}
.ac-addrs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 10px}
.ac-addrs>span{font-size:13px;font-weight:600;color:var(--muted);margin-inline-end:4px}
.ac-addrs .chip small{font-weight:500;opacity:.75}
@media (max-width:560px){ .ac-tabs{width:100%} .ac-tabs button{flex:1;text-align:center;padding:9px 6px} .ac-card{padding:14px} }
/* 1.57: online card payment (Stripe) */
.paybtn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.paybtn svg{width:20px;height:20px}
.paybtn:disabled{opacity:.5;cursor:not-allowed}
.pay-sec{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12.5px}
.pay-sec svg{width:14px;height:14px;flex:none}
.note.err,.pay-cx{color:#b00020}
.paid-ok{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-weight:700;font-size:17px;color:#1b7a3d}
.paid-ok svg{width:22px;height:22px}
.track-pay{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--soft);font-weight:600}
.track-pay.pay-paid{background:#e8f6ee;color:#1b7a3d}
[data-theme=dark] .track-pay.pay-paid{background:#123222;color:#8fe0b0}
.st-ok{margin:0;font-size:14px}
.st-steps{margin:8px 0;padding-inline-start:20px;display:grid;gap:8px;font-size:14px;line-height:1.5}
.st-steps code,.st-url{font-size:12.5px;background:var(--soft);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
/* 1.57.1: cookie notice (bottom, above the cart bar; never blocks the page) */
.ckbar{position:fixed;inset-inline-start:12px;inset-inline-end:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:7;max-width:620px;margin:0 auto;display:flex;align-items:center;gap:12px;padding-block:12px 12px;padding-inline:16px 12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.18);animation:ckin .25s ease-out}
.ckbar p{margin:0;font-size:13.5px;line-height:1.45;flex:1;min-width:0}
.ckbar a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ck-ok{flex:none;border:0;border-radius:12px;background:var(--ink);color:var(--surface);font:inherit;font-weight:700;font-size:14px;padding:10px 20px;cursor:pointer}
.ck-ok:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ckbar.bye{opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
body.has-cart .ckbar{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
body.on-product .ckbar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body.has-ckbar .wafloat{opacity:0;pointer-events:none}
@keyframes ckin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ckbar{animation:none}}
@media (min-width:700px){ body.on-product .ckbar{bottom:calc(12px + env(safe-area-inset-bottom,0px))} }
/* 1.57.2: policy pages (About, Privacy, Terms, Returns) */
.pol{padding-top:16px;padding-bottom:28px}
.pol-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 6px;padding:2px 16px 8px}
.pol-tabs::-webkit-scrollbar{display:none}
.pol-tabs a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.pol-tabs a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.pol-tabs a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.pol-tabs a[aria-current="page"] svg{opacity:1}
.pol-head{max-width:760px;margin:14px 0 18px}
.pol-head h1{font-size:clamp(30px,6vw,44px);font-weight:850;font-stretch:115%;line-height:1.05;letter-spacing:-.02em;margin:0}
.pol-meta{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.6}
.pol-meta .pm{white-space:nowrap}
.pol-meta>span[aria-hidden]{margin:0 6px}
.pol-meta:empty{display:none}
.pol-head .doc-noc{margin:14px 0 0}
.pol-grid{display:grid;gap:16px;align-items:start}
.pol-body{max-width:none;margin:0;padding:22px 20px;background:var(--surface);border:1px solid var(--line);border-radius:18px;font-size:16px;line-height:1.7}
.pol-body>p:first-child{font-size:17px;line-height:1.6;color:var(--ink);margin-bottom:6px}
.pol-body h2{font-size:20px;font-stretch:108%;margin:30px 0 10px;padding-top:18px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--toph,64px) + 14px)}
.pol-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.pol-body ul{list-style:none;padding-inline-start:0}
.pol-body ul li{position:relative;padding-inline-start:22px;margin:7px 0}
.pol-body ul li::before{content:"";position:absolute;inset-inline-start:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--brand,#c8102e)}
.pol-body b{font-weight:700;color:var(--ink)}
.pol-steps{list-style:none;padding-inline-start:0;counter-reset:st;display:grid;gap:10px}
.pol-steps li{counter-increment:st;position:relative;padding-block:12px 12px;padding-inline:52px 14px;border:1px solid var(--line);border-radius:14px;background:var(--soft);margin:0}
.pol-steps li::before{content:counter(st);position:absolute;inset-inline-start:14px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-size:13px;font-weight:800;line-height:1}
.pol-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.pol-body .pol-glance li{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--soft);line-height:1.5}
.pol-body .pol-glance li::before{display:none}
.pol-body .pol-glance li b{display:block;margin-bottom:2px}
.pol-toc details,.pol-toc-d{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:0}
.pol-toc-d{display:none}
.pol-toc-d>b{display:block;padding:12px 16px 6px;font-size:14px}
.pol-toc summary small{font-weight:500;color:var(--muted);margin-inline-start:6px;margin-inline-end:auto}
.pol-toc summary{list-style:none;cursor:pointer;padding:12px 16px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.pol-toc summary::-webkit-details-marker{display:none}
.pol-toc summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.pol-toc details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.pol-toc ol{list-style:none;margin:0;padding:0 8px 10px;display:grid;gap:1px}
.pol-toc a{display:block;padding:7px 10px;border-radius:9px;color:var(--muted);font-size:14px;line-height:1.35;text-decoration:none}
.pol-toc a:hover{background:var(--soft);color:var(--ink)}
.pol-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px;padding:18px 20px;border-radius:18px;background:var(--soft);border:1px solid var(--line)}
.pol-help b{display:block;font-size:16px}
.pol-help span{color:var(--muted);font-size:14px}
.pol-help-a{display:flex;flex-wrap:wrap;gap:8px}
.pol-help-a .big-btn,.pol-help-a .ghost{width:auto;padding:11px 18px;text-decoration:none;display:inline-flex;align-items:center}
@media (min-width:900px){
  .pol-grid.has-toc{grid-template-columns:240px minmax(0,1fr);gap:28px}
  .pol-toc{position:sticky;top:calc(var(--toph,64px) + 16px)}
  .pol-toc-m{display:none}
  .pol-toc-d{display:block}
  .pol-body{padding:34px 40px;max-width:820px}
  .pol-tabs{margin:0 0 6px;padding:2px 0 8px}
}
@media (max-width:899px){ .pol-toc details:not([open]) summary{border-radius:16px} }
@media print{
  .top,.pol-tabs,.pol-toc,.pol-help,.site-foot,.crumbs,.ckbar{display:none!important}
  .pol-body{border:0;padding:0}
  .pol-grid.has-toc{grid-template-columns:1fr}
  body{background:#fff}
}
.pol-help-a .ghost{color:var(--ink);background:var(--surface);gap:8px}
.pol-help-a svg{width:18px;height:18px;flex:none}
.pol-help-a .big-btn{gap:8px;color:#fff}
.pol-page .site-foot,.track-page .site-foot{margin-top:34px}
/* 1.58: encryption card */
.cr-st{margin:0 0 8px;font-weight:600;font-size:14.5px}
.cr-st.ok{color:#1b7a3d}.cr-st.warn{color:#9a5b00}.cr-st.bad{color:#b00020}
.cr-key{display:grid;gap:8px;margin:6px 0 4px;padding:12px;border:1px dashed var(--line);border-radius:12px;background:var(--soft)}
.cr-key span{font-size:13px;font-weight:700}
.cr-key code{font-size:14px;word-break:break-all;user-select:all;letter-spacing:.02em}

/* ===== 1.59 Arabic (/ar-ae/…): right-to-left layout and the Arabic font =====
   Spacing and positions above use start/end (not left/right), so they turn around by themselves.
   Latin text (brand names, codes) keeps the shop's fonts; Arabic letters use IBM Plex Sans Arabic. */
html[lang="ar"]{--body:"Figtree","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;--display:"Archivo","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif}
html[lang="ar"] body{line-height:1.6}
html[lang="ar"] *{letter-spacing:0!important}          /* spacing between letters breaks joined Arabic letters */
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.35}
html[lang="ar"] .foot-col h3,html[lang="ar"] .eyebrow{text-transform:none}
[dir="rtl"] .qsw input:checked+i::after,[dir="rtl"] .sw[aria-checked="true"] i,[dir="rtl"] input.sw:checked::after{transform:translateX(-18px)}
[dir="rtl"] .pol-en-note{background:var(--soft);border-radius:10px;padding:10px 14px;margin:0 0 16px}
/* numbers, references, phone numbers and e-mails read left to right inside Arabic text */
[dir="rtl"] .sentref b,[dir="rtl"] input[type=tel],[dir="rtl"] input[type=email],[dir="rtl"] input[name=ref],[dir="rtl"] .mo-ref{direction:ltr;unicode-bidi:plaintext}
[dir="rtl"] input[type=tel],[dir="rtl"] input[type=email]{text-align:end}
/* language switch */
.lang-btn{font-weight:700;font-size:15px;text-decoration:none;color:var(--ink)}
.cart-btn.lang-btn{font-size:16px;line-height:1}
html[lang="ar"] .cart-btn.lang-btn{font-family:"Figtree",system-ui,sans-serif;font-size:13px}
/* admin: Arabic fields */
.flab{display:block;font-weight:600;font-size:14px;margin:4px 0 8px}
.var-ar,.ar-map{display:grid;gap:8px;margin-bottom:14px}
.var-ar-row,.ar-row{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:6px 10px;align-items:center}
.var-ar-row textarea{grid-column:2}
.var-ar-en,.ar-k{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-en{display:block;font-weight:400;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ar-bn{display:grid;gap:4px;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.ar-bn img{width:120px;aspect-ratio:16/7;object-fit:cover;border-radius:8px}
.pol-lang{margin:4px 0 14px}
@media (max-width:560px){.var-ar-row,.ar-row{grid-template-columns:1fr}.var-ar-row textarea{grid-column:auto}}
[dir="rtl"] .logo b,[dir="rtl"] .logo small{unicode-bidi:plaintext}   /* an English shop name on the Arabic shop is cut at its end, not its start */

/* ===== 1.60 admin look =====
   Order status: a soft tint and a dot per status, the same in the admin and in customers' My orders. */
.st-new,.st-quoted,.st-confirmed,.st-dispatched,.st-delivered,.st-cancelled{--stc:var(--muted)}
.opill.st-new,.opill.st-quoted,.opill.st-confirmed,.opill.st-dispatched,.opill.st-delivered,.opill.st-cancelled{gap:6px;box-shadow:none}
.opill.st-new::before,.opill.st-quoted::before,.opill.st-confirmed::before,.opill.st-dispatched::before,.opill.st-delivered::before,.opill.st-cancelled::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-new{background:color-mix(in srgb,#d97706 15%,transparent);color:#a15c07}
.st-quoted{background:color-mix(in srgb,#7c3aed 12%,transparent);color:#6d28d9}
.st-confirmed{background:color-mix(in srgb,#16a34a 15%,transparent);color:#15803d}
.st-dispatched{background:color-mix(in srgb,#2563eb 14%,transparent);color:#1d4ed8}
.st-delivered{background:var(--soft);color:var(--muted)}
.st-cancelled{background:color-mix(in srgb,#dc2626 12%,transparent);color:#b91c1c}
:root[data-theme="dark"] .st-new{color:#fbbf24}
:root[data-theme="dark"] .st-quoted{color:#c4b5fd}
:root[data-theme="dark"] .st-confirmed{color:#4ade80}
:root[data-theme="dark"] .st-dispatched{color:#93c5fd}
:root[data-theme="dark"] .st-cancelled{color:#fca5a5}
/* Home tiles: icon in the corner; a tap opens the details */
.osum .kpi{position:relative;background:var(--soft);border-radius:12px;padding:10px 12px;display:grid;gap:2px;border:0;text-align:start;font:inherit;color:inherit;min-width:0}
.osum .kpi .ni{position:absolute;top:10px;inset-inline-end:10px;width:16px;height:16px;color:var(--muted);opacity:.8}
.osum .kpi b{padding-inline-end:20px}
.osum button.kpi{cursor:pointer;transition:background .15s,transform .15s}
.osum button.kpi:hover{background:color-mix(in srgb,var(--ink) 9%,var(--soft))}
.osum button.kpi:active{transform:scale(.98)}
.osum button.kpi:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.osum .kpi.hot{background:color-mix(in srgb,var(--ink) 92%,transparent);color:var(--surface)}
.osum .kpi.hot span,.osum .kpi.hot .ni{color:color-mix(in srgb,var(--surface) 75%,transparent)}
.osum button.kpi.hot:hover{background:var(--ink)}
/* Settings groups that fold open */
.sfold{display:block;padding:0}
.sfold>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;border-radius:14px}
.sfold>summary::-webkit-details-marker{display:none}
.sfold>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-inline-start:auto;margin-top:-3px;transition:transform .15s;flex:none}
.sfold[open]>summary::after{transform:rotate(225deg);margin-top:3px}
.sfold>summary:hover{background:var(--soft)}
.sfold-n{font-size:12px;font-weight:600;color:var(--muted);background:var(--soft);border-radius:999px;padding:2px 9px;white-space:nowrap}
.sfold-n.done{color:#15803d;background:color-mix(in srgb,#16a34a 13%,transparent)}
:root[data-theme="dark"] .sfold-n.done{color:#4ade80}
.sfold-b{display:grid;gap:12px;padding:0 16px 16px}
.sfold+.sfold,.scard+.sfold{margin-top:12px}
@media (max-width:560px){.sfold>summary{padding:13px 12px}.sfold-b{padding:0 12px 14px}}
/* Empty lists: a calm box instead of a lone grey line */
#main .empty,.adm .empty{border:1.5px dashed var(--line);border-radius:14px;padding:28px 16px;margin:12px 0;background:color-mix(in srgb,var(--soft) 45%,transparent)}
/* Lists: rows answer to the pointer, panels settle in when opened */
.olist .orow{border-radius:10px;transition:background .12s}
@media (prefers-reduced-motion:no-preference){.panel-in{animation:panelIn .18s ease-out}}
@keyframes panelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 1.60.1 Product page on wider screens (tablets, phones on their side, computers): while the product's own Add to cart
   bar is showing, the cart bar steps aside instead of sitting underneath it (phones already did this). The cart stays one
   tap away in the header. The product bar is centred with left:50% (not start), so it is also centred on the Arabic shop. */
@media (min-width:760px){
  .cartbar{transition:opacity .2s,transform .2s}
  body.on-product.pp-bar-on .cartbar{opacity:0;transform:translateY(24px);pointer-events:none;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s}
}

/* ===== 1.61 UAE Dirham symbol (Store settings › Payments & VAT, off unless switched on) =====
   One character of our own font (U+20C3), so it takes the digits' size, baseline and weight. Left of the number,
   on one line with it, also on the Arabic shop. Without the font (blocked, very old browser) "AED" shows instead. */
@font-face{font-family:"TS Dirham";src:url("dirham.woff2") format("woff2");unicode-range:U+20C3;font-display:block}
/* The price's own pieces always stay inline, whatever the surrounding block does with spans (e.g. the footer's
   "span{display:block}"): one line, no extra margins, the text's own size and colour. */
.mny{display:inline-block!important;margin:0!important;padding:0!important;white-space:nowrap;unicode-bidi:isolate;direction:ltr}
.dhs,.dhs-g{display:inline!important;margin:0!important;padding:0!important;font-size:inherit!important;color:inherit!important;line-height:inherit!important}
.dhs-g{font-family:"TS Dirham",sans-serif;font-style:normal;font-weight:inherit;font-feature-settings:normal}
.dhs-off .dhs-g{display:none!important}
.dhs-off .dhs::before{content:attr(data-f)}
.dhs-demo{white-space:nowrap;font-weight:700;color:var(--ink)}
/* 1.62 Home sections can sit below the product list (Store settings › Home page: move them under "Product list") */
.home-after{margin-top:28px}
.hs-row.hs-prod{grid-template-columns:minmax(0,1fr) auto;background:var(--soft);border-style:dashed}
.hs-row.hs-prod .sw-l{cursor:default}

/* ===== 1.63 Home page: products in a row per category (Store settings › Home page › Product list) =====
   Phones: 2 across (4 = 2×2, 6 = 2×3, 8 = 2×4). Tablets: one line of 3–4. Computers: one line, as many as the
   "products per row" setting of the product list. A "View all" link beside the title and a button under the row. */
.crows{display:grid;gap:30px;padding-top:4px}
.crow-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.crow-h h2,.crow-h h3{margin:0;font-size:20px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow-all{flex:none;border:0;background:none;padding:4px 0;font:inherit;font-weight:700;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.crow-all small{font-weight:500;color:var(--muted)}
.crow-btn{margin-top:12px;width:100%;cursor:pointer;font:inherit;font-weight:600;color:var(--ink)}
.crow-end{display:flex;justify-content:center;padding-top:4px}
.crow-every{width:auto;padding-inline:28px}
.crow-g.grid{padding-top:0}
@media (max-width:699px){
  .crow-g.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crow-g.n4>:nth-child(n+5),.crow-g.n6>:nth-child(n+7),.crow-g.n8>:nth-child(n+9){display:none}
}
@media (min-width:700px) and (max-width:999px){
  .crow-g.grid.t3{grid-template-columns:repeat(3,minmax(0,1fr))}.crow-g.t3>:nth-child(n+4){display:none}
  .crow-g.grid.t4{grid-template-columns:repeat(4,minmax(0,1fr))}.crow-g.t4>:nth-child(n+5){display:none}
}
@media (min-width:1000px){
  .crow-g.gc-3>:nth-child(n+4),.crow-g.gc-4>:nth-child(n+5),.crow-g.gc-5>:nth-child(n+6),.crow-g.gc-6>:nth-child(n+7){display:none}
  .crow-btn{width:auto;padding-inline:22px;display:block;margin-inline:auto}
}
/* Category buttons in the top bar (Store settings › Home page): always in reach, on every page of the shop.
   A menu row of its own under the logo bar: a hairline above it, the page's own grey behind it, plain words
   instead of buttons, and a short line in the brand colour under the chosen one. */
.navcats{border-top:1px solid var(--line);background:var(--bg)}
.navcats .chips{gap:24px;align-items:stretch;min-height:40px;padding-block:0}
.navcats .chip,.navcats .chip[aria-pressed="true"],.navcats .chip[aria-pressed="false"]{border:0;background:none;border-radius:0;padding:0 1px;min-height:40px;display:flex;align-items:center;
  font-size:14px;font-weight:600;color:var(--muted);box-shadow:none;position:relative;cursor:pointer;transition:color .15s}
.navcats .chip:hover{color:var(--ink);background:none}
.navcats .chip[aria-pressed="true"]{color:var(--ink)}
.navcats .chip[aria-pressed="true"]::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2.5px;border-radius:2px 2px 0 0;background:var(--brand,var(--ink))}
.navcats .chip:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* admin: product list choices */
.hl-seg{margin-top:4px}
.hl-seg label{display:flex}
.hl-seg input{position:absolute;opacity:0;pointer-events:none}
.hl-seg span{padding:9px 14px;border-radius:9px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer}
.hl-seg input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(8,14,24,.14)}
.hl-seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
#rowsbox{display:grid;gap:10px;margin-top:10px}
#rowsbox[hidden]{display:none}
.hr-row.hr-gone{opacity:.6}
.hr-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hr-add select,.hr-add input{width:auto;min-width:0;flex:1 1 160px}
.hr-add [hidden]{display:none}
/* 1.64: category pages — subcategories as quick choices under the heading */
.pc-subs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:12px;padding-bottom:2px}
.pc-subs::-webkit-scrollbar{display:none}
/* 1.65: the home page as one list of blocks (Store settings › Home page › Blocks), evenly spaced */
.hblocks{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;padding-block:22px 8px}
.hblocks>.feat{margin-top:0}
.hblocks>.feat>h2,.hblocks .crow-h h2{font-size:20px;font-weight:800}
.hblocks>.crow-end{padding-top:0}
.hblocks>.empty{margin:0}
.home-find{margin-top:4px}
.srp-head .shop-intro{margin:8px 0 0}
/* 1.65 admin: Home page tabs */
.hm-pane{display:grid;gap:14px}
.hm-pane[hidden]{display:none}
.hm-pane>.subh{margin:10px 0 0}
.hm-pane .hr-add{padding:10px;border:1px dashed var(--line);border-radius:12px}
.hm-pane .hr-add select,.hm-pane .hr-add input{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:inherit;font-size:14px;color:var(--ink);min-height:42px}
.hm-pane .hr-add .small-btn{min-height:42px}
.hblocks>.recent{margin-top:0}
/* 1.65.3: "View all" beside a row's title */
.crow-h{align-items:center}
.crow-all{display:inline-flex;align-items:center;gap:2px;text-decoration:none;font-size:14px;font-weight:700;color:var(--ink);padding-block:6px;padding-inline:8px 0;white-space:nowrap}
.crow-all svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .crow-all svg{transform:scaleX(-1)}
.crow-all:hover{text-decoration:underline;text-underline-offset:3px}
.crow-all:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
#deals .crow-h h2{margin:0}
/* back to top */
.totop{position:fixed;inset-inline-end:20px;bottom:18px;z-index:5;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:0 4px 14px rgba(8,14,24,.16);cursor:pointer;transition:bottom .2s,transform .15s}
.totop[hidden]{display:none}
.totop svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.totop:hover{transform:translateY(-2px)}
.totop:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (min-width:1000px){ .totop{inset-inline-end:30px} }
/* 1.66: "View all" as a small outlined button beside the row's title */
.crow-all{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding-block:6px;padding-inline:14px 9px;min-height:34px;font-size:13.5px;transition:border-color .15s,background .15s}
.crow-all:hover{text-decoration:none;border-color:var(--ink)}
.crow-all:active{background:var(--soft,var(--bg))}
/* 1.66.1: row title and "View all" line up on the text, and the button's text sits in its middle */
.hblocks .crow-h{align-items:center;margin:0 0 12px;min-height:34px}
.crow-all{line-height:1;min-height:0;padding-block:9px 8px;padding-inline:14px 10px;align-self:center}
.crow-all svg{width:14px;height:14px;margin-top:1px}
.hblocks .crow-h h2{line-height:1.2}
/* 1.66.2: product rows on phones as one line to swipe (2 in view, the next peeking in) */
@media (max-width:699px){
  .crow-g.grid.rswipe{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 12px) / 2.2);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:-16px;padding:2px 16px 8px;scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .crow-g.rswipe::-webkit-scrollbar{display:none}
  .crow-g.rswipe>*{scroll-snap-align:start}
}
.f[hidden]{display:none!important}
/* 1.66.3: the menu row, refined: part of the header (same surface, fine divider), centred on computers, edges fade on
   phones when there is more to swipe, an underline that eases in (brand colour for the page you are on). */
.navcats{background:var(--surface);border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.navcats .chips{gap:26px;min-height:44px;scroll-behavior:smooth}
/* edge fades as plain colour gradients over the row (cheaper for phones to draw than a mask) */
.navcats .wrap{position:relative}
.navcats .wrap::before,.navcats .wrap::after{content:"";position:absolute;top:0;bottom:1px;width:48px;z-index:1;pointer-events:none;opacity:0;transition:opacity .15s}
.navcats .wrap::before{left:0;background:linear-gradient(to right,var(--surface),transparent)}
.navcats .wrap::after{right:0;background:linear-gradient(to left,var(--surface),transparent)}
.navcats .wrap.fade-l::before,.navcats .wrap.fade-r::after{opacity:1}
.navcats .chip,.navcats .chip[aria-pressed="true"],.navcats .chip[aria-pressed="false"]{min-height:44px;font-size:14.5px;font-weight:600;letter-spacing:.005em;color:color-mix(in srgb,var(--ink) 66%,transparent);padding:0 2px}
.navcats .chip::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--line);transform:scaleX(0);transform-origin:center;transition:transform .22s ease,background-color .22s ease}
.navcats .chip:hover{color:var(--ink)}
.navcats .chip:hover::after{transform:scaleX(.55)}
.navcats .chip[aria-pressed="true"]{color:var(--ink);font-weight:700}
.navcats .chip[aria-pressed="true"]::after{transform:scaleX(1);background:var(--brand,var(--ink))}
@media (min-width:1000px){
  .navcats .chips{gap:34px}
}
@media (prefers-reduced-motion:reduce){ .navcats .chip::after{transition:none} .navcats .chips{scroll-behavior:auto} }
/* 1.67: results, category and brand pages: phones get one bar, Filters | Sort, that stays under the menu while scrolling;
   quick choices (subcategories, In stock, On sale) under it; the count and grid/list on one line above the products.
   Computers keep the side panel, with Sort as a matching drop-down beside grid/list. */
.srp-head{margin:0 0 12px}
.srp-tbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:sticky;top:calc(var(--toph,61px) - 1px);z-index:3;background:var(--bg);margin-inline:-16px;padding:8px 16px;transition:box-shadow .2s}
.srp-tbar.stuck{box-shadow:0 1px 0 var(--line),0 6px 14px -10px rgba(8,14,24,.25)}
.srp-tbar .srp-fbtn,.srp-sbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;height:44px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;border-radius:12px;padding:0 12px;cursor:pointer}
.srp-tbar .srp-fbtn:active,.srp-sbtn:active{background:var(--soft,var(--bg))}
.srp-tbar .srp-fbtn b{flex:none}
.srp-sbtn svg,.srp-tbar .srp-fbtn svg{flex:none;width:17px;height:17px;stroke:currentColor;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.srp-sbtn .sb-l{color:var(--muted);font-weight:500;flex:none}
.srp-sbtn .sb-v{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srp-quick{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:4px -16px 12px;padding:2px 16px}
.srp-quick::-webkit-scrollbar{display:none}
.srp-quick .pc-subs{display:contents}
.srp-quick .chip{flex:none}
.srp-bar{justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-bottom:12px}
.srp-bar .srp-n{font-size:14px;color:var(--muted);margin:0}
.srp-sortw{position:relative;display:none}
.srp-sortpop{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:10;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px -8px rgba(8,14,24,.28);padding:6px}
.srp-sortpop[hidden]{display:none}
.sort-list{display:grid;gap:2px}
.sort-o{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:14.5px;text-align:start;padding:11px 12px;border-radius:10px;cursor:pointer}
.sort-o:hover{background:var(--soft,var(--bg))}
.sort-o svg{width:18px;height:18px;stroke:var(--brand,var(--ink));stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.sort-o[aria-checked="true"]{font-weight:700}
.sort-o[aria-checked="true"] svg{visibility:visible}
.sort-o:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.sort-sheet .pad{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.sort-sheet .sort-o{font-size:16px;padding:15px 14px}
@media (min-width:900px){
  .srp-tbar{display:none}
  .srp-quick{flex-wrap:wrap;overflow:visible;margin:0 0 16px;padding:0}
  .srp-quick .qk,.srp-quick.qk-only{display:none}
  .srp-sortw{display:block}
  .srp-sbtn.sb-d{width:auto;height:38px;border-radius:999px;padding:0 14px;font-size:14px}
}
/* phones: the Sort button shows the icon and the current choice only ("Sort" stays for screen readers) */
@media (max-width:899px){ .srp-sbtn.sb-m .sb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }
@media (max-width:359px){ .srp-tbar{gap:8px} .srp-tbar .srp-fbtn,.srp-sbtn{padding:0 8px;gap:6px;font-size:13.5px} .srp-sbtn svg,.srp-tbar .srp-fbtn svg{width:15px;height:15px} }
/* 1.67.1: the phone bar as one slim strip: Filters | Sort, split by a fine line, no outlined boxes */
@media (max-width:899px){
  .srp-tbar{gap:0;padding:0;background:var(--surface);border-block:1px solid var(--line);margin-bottom:4px}
  .srp-tbar.stuck{border-top-color:transparent}
  .srp-tbar .srp-fbtn,.srp-tbar .srp-sbtn{height:42px;border:0;border-radius:0;background:none;font-size:14px}
  .srp-tbar>:first-child{border-inline-end:1px solid var(--line)}
  .srp-tbar .srp-fbtn:active,.srp-tbar .srp-sbtn:active{background:var(--soft,var(--bg))}
  .srp-tbar .srp-fbtn b{min-width:18px;height:18px;font-size:11px}
}
/* 1.67.7: phones and tablets, for smooth scrolling everywhere: nothing is moved by code while scrolling.
   Home page: the logo bar and menu stay pinned. Every other page: they scroll away with the page (header first), and on
   results, category and brand pages the slim Filters | Sort strip pins itself to the very top. Computers keep the header pinned. */
@media (max-width:899px){
  body.on-product .top,body.on-wish .top{position:relative}
  body.on-wish .srp-tbar{top:env(safe-area-inset-top,0px)}
  /* 1.67.8: the pinned strip slides up out of view while scrolling down and back on scrolling up (one class switch;
     the phone animates it on its own) */
  body.on-wish .srp-tbar{transform:translate3d(0,0,0);transition:transform .26s cubic-bezier(.3,.7,.3,1);backface-visibility:hidden}
  body.on-wish .srp-tbar.tb-hide{transform:translate3d(0,calc(-100% - 6px - env(safe-area-inset-top,0px)),0)}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){ body.on-wish .srp-tbar{transition:none} }
/* 1.69 admin Home: three tiles (today's figure in small print) and one To do card */
.osum.kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.osum.kpis.k3 .kpi{padding:14px 16px;gap:3px}
.osum.kpis.k3 .kpi b{font-size:24px;letter-spacing:-.01em}
.osum .kpi .kpi-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.osum .kpi.hot .kpi-sub{color:color-mix(in srgb,var(--surface) 70%,transparent)}
@media (max-width:640px){ .osum.kpis.k3{grid-template-columns:1fr 1fr} .osum.kpis.k3>:first-child{grid-column:1/-1} .osum.kpis.k3 .kpi b{font-size:21px} }
.todo{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 14px 4px}
.todo .subh{margin:0 0 4px}
.todo ul{list-style:none;margin:0;padding:0}
.todo li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.todo li:first-child{border-top:0}
.todo li p{margin:0;flex:1;min-width:0;font-size:14px;line-height:1.45;color:var(--ink)}
.todo li p b{font-weight:600}
.todo li .small-btn{flex:none}
.td-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.td-dot.bad{background:#d03a2f}.td-dot.warn{background:#d98a00}.td-dot.info{background:color-mix(in srgb,var(--ink) 35%,transparent)}
@media (max-width:640px){ .home-head .qa{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;width:calc(100% + 32px)} .home-head .qa::-webkit-scrollbar{display:none} .home-head .qa>*{flex:none} }
/* 1.69 admin Orders: status tabs with counts, month summary behind a link, compact search row */
.monthbar .osum-t{margin-inline-start:auto;font-size:14px;font-weight:600}
.otabs{margin:12px 0 10px;padding-inline:0;margin-inline:0}
.otabs .chip .cnt{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);font-size:12px;font-weight:700;margin-inline-start:4px}
.otabs .chip[aria-pressed="true"] .cnt{background:color-mix(in srgb,var(--surface) 22%,transparent)}
.otools{display:flex;gap:8px;align-items:center}
.otools .search{flex:1 1 auto;min-width:0}
.otype select{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);max-width:170px}
@media (max-width:640px){ .otabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px} .otype select{max-width:130px} }
/* "How this works": a page's explanation behind a small link */
.howto{margin:12px 0 0;font-size:14px;color:var(--muted)}
.howto>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--muted);padding:4px 0}
.howto>summary::-webkit-details-marker{display:none}
.howto>summary::before{content:"";width:16px;height:16px;border-radius:50%;border:1.6px solid currentColor;box-sizing:border-box;background:radial-gradient(circle at 50% 33%,currentColor 1.2px,transparent 1.6px),linear-gradient(currentColor,currentColor) 50% 68%/1.6px 5px no-repeat}
.howto>summary:hover{color:var(--ink)}
.howto[open]>summary{color:var(--ink)}
.howto-b{margin-top:6px;padding:10px 12px;border-radius:10px;background:var(--soft);line-height:1.55;color:var(--ink)}
.howto-b p{margin:0 0 8px}.howto-b p:last-child{margin:0}
/* 1.69 admin Products: one ⋯ menu per row; the photo and name open the product; the price line (all screens) opens Quick edit */
.ilist li.prow .thumb{cursor:pointer}
.ilist li.prow .ln .pname{all:unset;display:block;font-weight:700;color:var(--ink);cursor:pointer;overflow-wrap:anywhere;border-radius:4px}
.ilist li.prow .ln .pname:hover{text-decoration:underline;text-underline-offset:3px}
.ilist li.prow .ln .pname:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ilist li.prow .ln small b.pr{display:none}
.qline{display:inline-flex;align-items:center;gap:8px;margin:6px 0 0;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;max-width:100%}
.qline:hover{border-color:var(--ink)}
.qline[aria-expanded="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.qline b{font-weight:700;white-space:nowrap}
.qs{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap;color:var(--ok)}
.qs i{width:7px;height:7px;border-radius:50%;background:currentColor}
.qs.low{color:#b7791f}.qs.outs{color:var(--sale)}
.qpen{color:var(--muted);font-size:14px;margin-inline-start:2px}
.ilist li.prow .ictl{align-self:start}
/* 1.69 admin: tabs at the top of merged pages (Reports, Security, Activity) */
.pg-tabs{margin:0 0 16px;display:inline-flex;flex-wrap:wrap;max-width:100%}
.pg-tabs .ndot{position:static;display:inline-block;margin-inline-start:6px;vertical-align:middle}
@media (max-width:640px){ .pg-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .pg-tabs button{flex:none} }
/* 1.69 admin: neutral warning style. Summary blocks and problem rows stay neutral; only the ring, shield and dots carry colour. */
.hl-hero,.hl-hero.hl-warn,.hl-hero.hl-bad{background:var(--surface);border:1px solid var(--line)}
.hl-sum.hl-warn,.hl-sum.hl-bad{background:var(--soft)}
.chk.bad{background:var(--soft)}
.chk.bad b{color:var(--ink)}
.dc-head{align-items:flex-start}.dc-head .howto{margin:6px 0 0;flex:1;min-width:0}
.otabs .chip .cnt{color:inherit}
.otabs .chip[aria-pressed="true"] .cnt{background:color-mix(in srgb,currentColor 22%,transparent)}
.monthbar .osum-t{white-space:nowrap}
/* 1.69.1 admin Change history: one line per entry, details on tap */
.hs-list > li.hx{display:block;padding:0}
.hx>details>summary,.hx>.hx-t{list-style:none}
.hx>details>summary::-webkit-details-marker{display:none}
.hx>details>summary,.hx:not(:has(details)){display:grid;grid-template-columns:44px 26px minmax(0,1fr) 18px;gap:10px;align-items:center;padding:9px 0;cursor:pointer}
.hx:not(:has(details)){cursor:default;grid-template-columns:44px 26px minmax(0,1fr)}
.hx .hx-t{padding-top:0}
.hx .av{width:26px;height:26px;font-size:11px}
.hx .hs-b{font-size:14px;line-height:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx details[open] .hs-b{white-space:normal}
.hs-what{color:var(--muted)}
.hs-n{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;background:var(--soft);font-size:12px;font-weight:600;color:var(--muted)}
.hs-chev{width:16px;height:16px;stroke:var(--muted);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
[dir="rtl"] .hs-chev{transform:scaleX(-1)}
.hx details[open] .hs-chev{transform:rotate(90deg)}
.hx summary:hover .hs-b b{text-decoration:underline;text-underline-offset:3px}
.hx summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
.hs-det{padding:0 0 12px 80px}
.hs-det .hs-ch{margin:4px 0 0}
.hs-at{margin:8px 0 0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.hs-at:first-child{margin-top:0}
@media (max-width:640px){
  .hx>details>summary{grid-template-columns:40px minmax(0,1fr) 16px}
  .hx:not(:has(details)){grid-template-columns:40px minmax(0,1fr)}
  .hx .av{display:none}
  .hs-det{padding-inline-start:50px}
}
.hx-t{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:640px){ .hx-areas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px!important;padding-inline:16px} .hx-areas::-webkit-scrollbar{display:none} .hx-areas .chip{flex:none} }
.hs-list:has(> li.hx){grid-template-columns:minmax(0,1fr)} .hs-list > li.hx,.hx>details,.hx>details>summary{min-width:0;max-width:100%}
.hs-list > li.hx.plain{display:grid;grid-template-columns:44px 26px minmax(0,1fr);gap:10px;align-items:center;padding:9px 0}
@media (max-width:640px){ .hs-list > li.hx.plain{grid-template-columns:40px minmax(0,1fr)} }
.nsys .ndot[hidden]{display:none}
/* 1.69.2 admin phone More sheet: View store and Log out pinned at the bottom, side by side; a little tighter */
.more-sheet .snav{padding:11px 14px}
.more-sheet .ms-foot{position:sticky;bottom:-10px;margin:6px -10px -10px;padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:6px;z-index:1}
.more-sheet .ms-foot .snav{justify-content:center;background:var(--soft);padding:11px 10px}
.more-sheet .ms-foot .snav span{flex:none!important}
/* 1.69.3 admin phone More menu: the backdrop fades in with the sheet, and both ease out when closing */
@media (prefers-reduced-motion:no-preference){
  .more-layer .scrim{animation:moreFade .2s ease-out}
  .more-layer.closing .scrim{opacity:0;transition:opacity .18s ease-in}
  .more-layer.closing .more-sheet{opacity:0;transform:translateY(10px);transition:opacity .18s ease-in,transform .18s ease-in}
}
.more-layer.closing{pointer-events:none}
@keyframes moreFade{from{opacity:0}to{opacity:1}}
.more-sheet{will-change:transform,opacity}
/* 1.69.5: the page underneath stays put while the More menu is open; the menu scrolls on its own */
.more-sheet{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.more-layer .scrim{touch-action:none}
html.more-on,html.more-on body{overflow:hidden}

/* 1.69.6 phone More menu: handle, slim top row, "needs attention" notes and two-per-row tiles */
.more-sheet{padding:0 10px 10px;gap:0}
.more-sheet .ms-grab{display:flex;justify-content:center;padding:8px 0 4px;cursor:grab}
.more-sheet .ms-grab span{width:38px;height:5px;border-radius:99px;background:var(--line)}
.more-sheet .ms-top{display:flex;align-items:center;gap:8px;padding:2px 4px 8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.more-sheet .ms-top .av{width:34px;height:34px;flex:none}
.more-sheet .ms-who{flex:1;min-width:0;line-height:1.2}
.more-sheet .ms-who b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.more-sheet .ms-who small{color:var(--muted);font-size:12px}
.ms-pill{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:99px;background:var(--soft);color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:8px 12px;text-decoration:none;cursor:pointer;flex:none}
.ms-pill .ni{width:16px!important;height:16px!important}
.ms-need{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;border:1px solid color-mix(in srgb,var(--sale) 30%,var(--line));background:color-mix(in srgb,var(--sale) 7%,var(--surface));color:var(--ink);border-radius:12px;padding:8px 12px;margin:0 0 6px;font:inherit;text-align:start;cursor:pointer}
.ms-need span{flex:1;min-width:0;line-height:1.25}
.ms-need b{display:block;font-size:14px}
.ms-need small{color:var(--muted);font-size:12.5px}
.ms-need .nchev{width:16px;height:16px;color:var(--muted);flex:none}
.ms-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.ms-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;min-height:64px;border:0;border-radius:14px;background:var(--soft);color:var(--ink);font:inherit;font-size:14px;font-weight:600;line-height:1.2;padding:10px 12px;text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease}
.ms-tile:active{transform:scale(.97)}
.ms-tile .ni{width:22px!important;height:22px!important;color:var(--muted)}
.ms-tile[aria-selected="true"]{background:color-mix(in srgb,var(--brand,var(--ink)) 12%,transparent);color:var(--brand,var(--ink))}
.ms-tile[aria-selected="true"] .ni{color:inherit}
.ms-tile .ndot{position:absolute;top:11px;inset-inline-end:12px}
.more-sheet .ms-h{padding:10px 4px 5px}
.ms-need~.ms-grid,.ms-top+.ms-grid{margin-top:2px}
.more-sheet{max-height:calc(100dvh - 100px)}
@media (hover:hover){ .ms-tile:hover,.ms-pill:hover{filter:brightness(.97)} }
.sttable .linkbtn{text-align:start}
/* 1.69.8 Store settings on phones and tablets (1.69.9): a list of sections, each opening with a back button */
.setidx,.setback{display:none}
@media (max-width:1099px){
  .setwrap>.subnav{display:none}
  .setwrap.idx .setsec{display:none}
  .setwrap.idx .setidx{display:grid;gap:0;margin:-6px -6px 0}
  .setback{display:inline-grid;place-items:center;width:36px;height:36px;margin-inline-start:-8px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;flex:none}
  .setback svg{width:22px;height:22px}
  .setwrap .sech-row{justify-content:flex-start}
  .setwrap .sech-row .vstore{margin-inline-start:auto}
}
.si-row{display:flex;align-items:center;gap:14px;width:100%;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:start;padding:13px 6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.si-row:last-child{border-bottom:0}
.si-row:active{background:var(--soft)}
.si-row .ni{width:22px;height:22px;color:var(--muted);flex:none}
.si-t{flex:1;min-width:0;display:grid;gap:2px;line-height:1.25}
.si-t b{font-size:15px}
.si-t small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si-row .nchev{width:16px;height:16px;color:var(--muted);flex:none}
.si-row .sdot{margin:0}
/* 1.69.8 compact Home page rows (blocks and menu items) */
.hs-row.cmp{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px 10px 10px 12px;margin-inline:0;overflow:visible}
.hs-row.cmp .sw-l small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-row.cmp .sw-l span{min-width:0}
.hs-row.cmp .ictl{gap:2px;flex-wrap:nowrap}
.hs-row.cmp .icon-btn{width:34px;height:34px}
.hs-row.cmp .row-ed svg{width:16px;height:16px}
.hs-row.cmp .row-ed[aria-expanded="true"]{background:var(--soft)}
.hs-row.cmp .row-more{grid-column:1/-1;display:grid;gap:8px;padding-top:4px;border-top:1px dashed var(--line);margin-top:2px}
.hs-row.cmp .row-more[hidden]{display:none}
.hs-row.cmp .row-more .meter{margin:6px 0 0;font-size:13px}
@media (max-width:640px){ .hs-row.cmp{grid-template-columns:minmax(0,1fr) auto} .hs-row.cmp .hs-t{grid-row:auto} }
@media (max-width:380px){ .hs-row.cmp .icon-btn{width:30px;height:32px} .hs-row.cmp .sw-l{gap:8px} }
.fields.iff{margin:0}
.st-min{display:flex;align-items:center;justify-content:space-between;gap:12px}
.st-min .scard-h{margin:0 0 2px}
/* 1.69.8 settings labels: the hint sits under the box */
.f .fhint{display:block;font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.35;margin-top:1px}
.f .fopt{font-weight:500;font-size:11.5px;color:var(--muted);background:var(--soft);border-radius:99px;padding:1px 7px;margin-inline-start:4px;vertical-align:1px}
.hs-row.cmp{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.hs-row.cmp>input.sw{margin:0}
.hs-row.cmp .row-name{display:grid;gap:2px;min-width:0;border:0;background:none;padding:2px 0;text-align:start;font:inherit;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hs-row.cmp .row-name b{font-size:14.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-row.cmp .row-name b::after{content:"";display:inline-block;width:6px;height:6px;margin-inline-start:7px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.hs-row.cmp .row-name[aria-expanded="true"] b::after{transform:translateY(1px) rotate(-135deg)}
.hs-row.cmp .row-name small{font-size:12.5px;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){ .hs-row.cmp{grid-template-columns:auto minmax(0,1fr) auto} }
.two:has(.fhint){align-items:start}
.two>.f{align-content:start}
/* 1.69.9 settings groups: Store status first, then Your store / Selling / Reach */
.si-h{margin:18px 6px 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.si-grp .si-row:last-child{border-bottom:0}
.si-row.si-status{background:var(--soft);border:0;border-radius:14px;padding:14px 12px;margin-top:6px}
.si-row.si-status .ni{color:var(--ink)}
.st-pill{flex:none;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap}
.st-pill.ok{background:color-mix(in srgb,var(--ok,#15803d) 15%,transparent);color:var(--ok,#15803d)}
.st-pill.warn{background:color-mix(in srgb,#d97706 16%,transparent);color:#b45309}
.st-pill.bad{background:color-mix(in srgb,var(--sale,#dc2626) 14%,transparent);color:var(--sale,#dc2626)}
.st-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-inline-start:6px}
.st-dot.ok{background:var(--ok,#15803d)}.st-dot.warn{background:#d97706}.st-dot.bad{background:var(--sale,#dc2626)}
.sn-h{display:none}
@media (min-width:1100px){
  .setwrap>.subnav .sn-h{display:block;margin:14px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}
/* 1.70 Backup & updates */
.bk-p{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--muted)}
.bk-p b{color:var(--ink)}
.bk-hero{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;margin:0 0 14px;background:var(--soft)}
.bk-hero .bk-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none;background:var(--surface)}
.bk-hero .bk-ic .ni{width:22px;height:22px}
.bk-hero.ok .bk-ic{color:var(--ok)} .bk-hero.warn .bk-ic{color:#b45309}
.bk-hero b{display:block;font-size:15.5px;line-height:1.25}
.bk-hero small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}
.bk-hero.warn{background:color-mix(in srgb,#d97706 9%,var(--surface))}
.bk-note{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;padding:11px 12px;border-radius:12px;border:1px solid var(--line);font-size:13.5px;line-height:1.45}
.bk-note p{margin:0;flex:1}
.bk-note .ni{width:18px;height:18px;flex:none;margin-top:1px}
.bk-note.ok .ni{color:var(--ok)}
.bk-note.warn{border-color:color-mix(in srgb,#d97706 35%,var(--line));background:color-mix(in srgb,#d97706 7%,var(--surface))}
.bk-note.warn .ni{color:#b45309}
.bk-note .small-btn{flex:none;align-self:center}
.bk-where{margin:14px 0 0!important;font-size:12.5px}
.bk-ver{margin:-6px 0 12px;font-size:13px;color:var(--muted)}
.bk-cards .sec-card .formfoot{flex-wrap:wrap}
.bk-note{flex-wrap:wrap}
.bk-note p{flex:1 1 calc(100% - 40px)}
.bk-note .small-btn{margin-inline-start:28px;align-self:flex-start}
.bk-cards .ilist li{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bk-cards .ilist li .ictl{margin:0}
.bk-cards .ilist li .rst-box{flex:1 1 100%}
.bk-cards .ilist .ln{flex:1 1 100px}