/* Vijay Mobile World – storefront styles */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --ink:#14213d; --muted:#5b6478; --line:#dfe3ea;
  --accent:#ffb703; --accent-ink:#14213d; --deep:#14213d; --deep-fg:#f5f6f8; --good:#1f8a4c; --bad:#c0392b;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Hind",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --gut-l:max(16px,env(safe-area-inset-left,0px)); --gut-r:max(16px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1324; --surface:#151d33; --ink:#e9edf5; --muted:#9aa4ba; --line:#26304a;
  --accent:#ffc53d; --deep:#0a0f1d; --deep-fg:#e9edf5; --good:#4cc283; --bad:#ff6b5b; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1324; --surface:#151d33; --ink:#e9edf5; --muted:#9aa4ba; --line:#26304a;
  --accent:#ffc53d; --deep:#0a0f1d; --deep-fg:#e9edf5; --good:#4cc283; --bad:#ff6b5b; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.1}
.wrap{max-width:1160px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
button,input,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

header{position:sticky;top:0;z-index:9;background:var(--deep);color:var(--deep-fg);padding-top:env(safe-area-inset-top,0px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.3rem;color:inherit;text-decoration:none}
.logo i{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;flex:none}
.logo i::after{content:"";width:10px;height:16px;border:2.5px solid var(--accent-ink);border-radius:3px}
.cartbtn{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:7px 14px;font-weight:600;white-space:nowrap}

.hero{background:var(--deep);color:var(--deep-fg)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding-block:40px 56px}
.hero h1{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:800;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{opacity:.8;max-width:52ch;font-size:1.08rem}
.eyebrow{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hero .eyebrow{color:var(--accent)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.btn{border:0;border-radius:10px;padding:12px 20px;font-weight:600;text-decoration:none;display:inline-block}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--deep-fg);border:1.5px solid rgba(255,255,255,.3)}
.perks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:.92rem;opacity:.85}
.perks span::before{content:"✓ ";color:var(--accent);font-weight:700}
.counter{position:relative;aspect-ratio:1;max-width:340px;width:100%;justify-self:center}
.counter .ph{position:absolute;border-radius:28px;background:linear-gradient(160deg,color-mix(in srgb,var(--deep),#fff 18%),color-mix(in srgb,var(--deep),#fff 5%));border:3px solid color-mix(in srgb,var(--deep),#fff 28%);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.counter .ph.a{inset:6% 30% 4% 12%;transform:rotate(-8deg)}
.counter .ph.a::before{content:"";position:absolute;inset:10px;border-radius:20px;background:linear-gradient(200deg,var(--accent),color-mix(in srgb,var(--accent),#e0002a 30%) 70%,color-mix(in srgb,var(--accent),#000 25%))}
.counter .ph.b{inset:22% 6% 10% 46%;transform:rotate(9deg);background:color-mix(in srgb,var(--deep),#fff 8%)}
.counter .ph.b::before{content:"";position:absolute;left:12%;right:12%;top:10%;height:32%;background:#8fb3c9;border-radius:6px}
.counter .ph.b::after{content:"";position:absolute;left:12%;right:12%;bottom:10%;height:42%;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--deep),#fff 28%) 0 26%,transparent 26% 37%),repeating-linear-gradient(0deg,color-mix(in srgb,var(--deep),#fff 8%) 0 6px,transparent 6px 22px)}
.tag{position:absolute;left:-4%;bottom:12%;background:#fff;color:#14213d;padding:10px 14px;border-radius:12px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:.9rem;max-width:80%}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr}.counter{max-width:260px}}

section{padding-block:48px}
.sechead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.sechead h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700}
.sechead p{margin:4px 0 0;color:var(--muted)}
.search{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 14px;min-width:0;width:260px;max-width:100%}

.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 12px;text-align:center;color:var(--ink);transition:transform .15s,border-color .15s}
.cat:hover,.cat.on{border-color:var(--accent);transform:translateY(-2px)}
.cat svg{width:42px;height:42px;margin:0 auto 8px;display:block}
.cat b{display:block;font-size:.98rem}.cat small{color:var(--muted)}
@media (max-width:900px){.cats{grid-template-columns:repeat(3,1fr)}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.thumb{aspect-ratio:4/3;display:grid;place-items:center;background:var(--bg);position:relative;overflow:hidden}
.thumb svg{width:44%;height:auto;max-height:70%}
.thumb img{width:100%;height:100%;object-fit:contain;padding:10px;background:#fff}
.badge{position:absolute;top:10px;left:10px;background:var(--accent);color:var(--accent-ink);font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:6px;z-index:1}
.badge.out{background:var(--bad);color:#fff}
.info{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.info h3{font-family:var(--body);font-size:1.02rem;font-weight:600;line-height:1.3}
.info .spec{color:var(--muted);font-size:.88rem}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:auto;font-variant-numeric:tabular-nums}
.price b{font-family:var(--mono);font-size:1.15rem}
.price s{color:var(--muted);font-size:.85rem}
.price em{font-style:normal;color:var(--good);font-size:.82rem;font-weight:600}
.add{margin-top:8px;background:var(--deep);color:var(--deep-fg);border:0;border-radius:10px;padding:9px;font-weight:600}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .add{background:var(--accent);color:var(--accent-ink)}}
:root[data-theme="dark"] .add{background:var(--accent);color:var(--accent-ink)}
.add.done{background:var(--good);color:#fff}
.add:disabled{opacity:.5;cursor:not-allowed}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:16px;grid-column:1/-1}

.why{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:16px}
.why div{padding:18px;border-top:3px solid var(--accent);background:var(--surface);border-radius:0 0 12px 12px}
.why b{font-family:var(--display);font-size:1.1rem;display:block;margin-bottom:4px}
.why p{margin:0;color:var(--muted);font-size:.93rem}
@media (max-width:820px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.why{grid-template-columns:1fr}}

.brands{background:var(--surface);border-block:1px solid var(--line)}
.brands .wrap{padding-block:40px}
.brands h2{font-size:1.4rem;text-align:center}
.brands p.sub{text-align:center;color:var(--muted);margin:6px 0 24px}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.logos div{border:1px solid var(--line);border-radius:12px;height:72px;display:grid;place-items:center;padding:10px;font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--muted);background:var(--surface)}
.logos img{max-height:46px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s}
.logos div:hover img{filter:none;opacity:1}
@media (max-width:820px){.logos{grid-template-columns:repeat(3,1fr)}}

.num{font-family:var(--mono)}

/* floating contact buttons */
.contact-float{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:flex-end;gap:12px;z-index:8}
.cf-btn{display:flex;align-items:center;gap:10px;text-decoration:none}
.cf-dot{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.25);transition:transform .15s}
.cf-dot svg{width:30px;height:30px}
.cf-wa .cf-dot{background:#1fa855;width:60px;height:60px}
.cf-wa .cf-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #1fa855;animation:cfpulse 2.4s ease-out infinite}
.cf-ig .cf-dot{background:linear-gradient(45deg,#f9a73e,#e1306c 50%,#833ab4)}
.cf-ig .cf-dot svg{width:26px;height:26px;margin-left:-2px}
.cf-ms .cf-dot{background:#0a7cff}
@keyframes cfpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.cf-btn:hover .cf-dot,.cf-btn:focus-visible .cf-dot{transform:scale(1.08)}
.cf-tip{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:7px 12px;font-size:.86rem;box-shadow:0 8px 24px rgba(0,0,0,.15);opacity:0;transform:translateX(8px);transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.cf-wa .cf-tip b{color:#1a8f4d}.cf-ig .cf-tip b{color:#c13584}.cf-ms .cf-tip b{color:#0a7cff}
.cf-btn:hover .cf-tip,.cf-btn:focus-visible .cf-tip{opacity:1;transform:none}
/* first visit on phones: show the WhatsApp label briefly */
@media (hover:none){.cf-wa .cf-tip{animation:cfhint 5s 1.5s both}}
@keyframes cfhint{0%,100%{opacity:0;transform:translateX(8px)}10%,85%{opacity:1;transform:none}}
@media (max-width:480px){.cf-dot{width:50px;height:50px}.cf-wa .cf-dot{width:56px;height:56px}}
@media (prefers-reduced-motion:reduce){.cf-wa .cf-dot::after,.cf-wa .cf-tip{animation:none}}

/* cart drawer */
.overlay{position:fixed;inset:0;background:rgba(10,15,29,.55);z-index:30}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);color:var(--ink);z-index:31;display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) 18px;box-shadow:-20px 0 50px rgba(0,0,0,.25)}
.drawer .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.drawer .top h3{font-size:1.3rem}
.x{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--ink)}
.lines{flex:1;overflow:auto;display:grid;align-content:start;gap:10px}
.line{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
.line b{font-weight:600}
.line .num{text-align:right}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.total{display:flex;justify-content:space-between;font-weight:700;font-size:1.1rem;padding:12px 0}
.drawer form{display:grid;gap:8px}
.drawer input,.drawer textarea{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:10px 12px;width:100%}
.drawer label{font-size:.85rem;color:var(--muted);font-weight:500}
.msg{padding:10px 12px;border-radius:10px;font-size:.92rem}
.msg.ok{background:rgba(31,138,76,.12);color:var(--good)}
.msg.err{background:rgba(192,57,43,.12);color:var(--bad)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:600;z-index:40}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* payment */
.paym{border:0;margin:6px 0 0;padding:0;display:grid;gap:8px}
.paym legend{font-size:.85rem;color:var(--muted);font-weight:500;margin-bottom:6px}
.pm{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.pm:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pm input{margin-top:5px;accent-color:#e09b00}
.pm b{display:block;font-weight:600;color:var(--ink)}
.pm small{color:var(--muted);font-size:.84rem}
#payPanel{display:grid;gap:10px;padding-top:6px}
.upibox{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px;justify-items:center;text-align:center}
.upibox .qr{background:#fff;padding:10px;border-radius:10px;width:180px;height:180px;display:grid;place-items:center}
.upibox .qr img,.upibox .qr canvas{width:160px!important;height:160px!important}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;text-align:left;font-size:.92rem;width:100%}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-family:var(--mono);word-break:break-all}
.copybtn{background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:2px 8px;font-size:.8rem;margin-left:6px}
#payPanel input{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:10px 12px;width:100%}

/* instagram */
.insta{background:var(--bg)}
.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;align-items:start}
.reel{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:8px}
.reel blockquote a{display:block;padding:40px 16px;text-align:center;color:var(--ink);font-weight:600}
.igbtn{background:linear-gradient(45deg,#f58529,#dd2a7b 50%,#8134af);color:#fff}
.social{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.social a{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:4px 12px;font-size:.88rem;text-decoration:none}
.social a:hover{border-color:var(--accent);color:var(--accent)}

/* fix: radios/checkboxes must not stretch like text inputs */
.drawer input[type=radio],.drawer input[type=checkbox]{width:auto;padding:0}

/* smartphone focus */
.phones{padding-top:40px}
.filters{display:grid;gap:10px;margin-bottom:20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.frow .grow{flex:1}
.flabel{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-right:4px;min-width:56px}
.chipbtn{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:5px 14px;font-weight:500;font-size:.92rem}
.chipbtn:hover{border-color:var(--muted)}
.chipbtn.on{background:var(--deep);border-color:var(--deep);color:var(--deep-fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chipbtn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}}
:root[data-theme="dark"] .chipbtn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.filters select{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:7px 10px;max-width:100%}
.toggle{display:inline-flex;align-items:center;gap:6px;font-weight:500;border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
.toggle input{accent-color:#e09b00}
.phonegrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card.phone .thumb{aspect-ratio:1}
.card.phone .thumb svg{width:34%}
.net{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:.72rem;font-weight:500;padding:2px 7px;border-radius:6px;z-index:1}
.net.n5G{background:var(--deep);color:var(--accent)}
.net.n4G{background:var(--line);color:var(--muted)}
.badge.out{top:auto;bottom:10px;right:auto;left:10px}
.brandname{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.specchips{display:flex;flex-wrap:wrap;gap:6px}
.specchips span{font-family:var(--mono);font-size:.76rem;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.emi{font-size:.82rem;color:var(--muted)}
.cardbtns{display:flex;gap:8px;margin-top:8px}
.cardbtns .add{flex:1;margin-top:0}
.ask{display:grid;place-items:center;padding:0 12px;border:1px solid var(--line);border-radius:10px;color:#1a8f4d;font-weight:600;text-decoration:none;font-size:.9rem}
.ask:hover{border-color:#25d366}
.linkbtn{background:none;border:0;color:var(--ink);text-decoration:underline;font-weight:600;padding:0}
.whystrip{padding-top:0}

/* logo mark */
.logo .logomark{width:34px;height:34px;flex:none;border-radius:9px;box-shadow:0 0 0 1.5px rgba(255,183,3,.35)}

/* product page */
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--accent-text,inherit)}
.thumblink{display:contents;color:inherit}
.crumbs{font-size:.88rem;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted)}
.crumbs span{color:var(--ink)}
.pdp{padding-top:24px}
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.pdp-grid > *{min-width:0}
.pdp-img{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.pdp-img img{width:100%;height:100%;object-fit:contain;padding:24px;background:#fff}
.pdp-img svg{width:40%;height:auto}
.pdp-info{display:grid;gap:12px}
.pdp-info h1{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800}
.price.big b{font-size:1.9rem}
.small{font-size:.86rem;margin:0}
.muted{color:var(--muted)}
.stockline{margin:0;font-weight:600}
.stockline.in{color:var(--good)}.stockline.outs{color:var(--bad)}
.pdp-info .cardbtns .add{padding:13px;font-size:1.02rem;flex:1}
.pdp-info .ask{padding:0 18px}
.highlights{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.desc{color:var(--muted);line-height:1.65;max-width:62ch}
.promise{list-style:none;padding:12px 0 0;margin:0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem;color:var(--muted)}
.promise li::before{content:"✓ ";color:var(--good);font-weight:700}
@media (max-width:760px){.pdp-grid{grid-template-columns:1fr}}
.cat{min-width:0}
.cat b{overflow-wrap:anywhere}
@media (max-width:480px){.cats{grid-template-columns:repeat(2,1fr)}}

/* product photo slider */
.pdp-media{display:grid;gap:10px;min-width:0}
.pdp-img .slides{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.pdp-img .slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;display:block;background:#fff;cursor:zoom-in}
.slide img{width:100%;height:100%;object-fit:contain;padding:24px;display:block}
.snav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:#14213d;font-size:1.6rem;line-height:1;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:2}
.snav.prev{left:10px}.snav.next{right:10px}
.scount{position:absolute;bottom:10px;right:12px;background:rgba(20,33,61,.8);color:#fff;font-family:var(--mono);font-size:.75rem;padding:2px 8px;border-radius:999px}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.thumbs button{flex:0 0 64px;height:64px;border-radius:10px;border:2px solid var(--line);background:#fff;padding:3px;overflow:hidden}
.thumbs button.on{border-color:var(--accent)}
.thumbs img{width:100%;height:100%;object-fit:contain}
@media (hover:none){.snav{display:none}}

/* logo follows the chosen theme */
.logomark > rect:first-of-type{fill:color-mix(in srgb,var(--deep),#000 15%)}
.logomark [stroke]{stroke:var(--accent)}
.logomark circle:first-of-type{fill:var(--accent)}
.logo .logomark{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent)}
.wa-float,.net.n5G{color:var(--accent)}
.chipbtn.apple{font-weight:600}

/* offer / coupon strip */
.offerbar{background:var(--accent);color:var(--accent-ink);font-size:.9rem;font-weight:500;padding-top:env(safe-area-inset-top,0px)}
.offerbar .wrap{display:flex;align-items:center;gap:8px;min-height:38px;padding-block:4px}
.ob-track{flex:1;min-width:0;display:grid;text-align:center}
.ob-item{grid-area:1/1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .35s,transform .35s,visibility .35s}
.ob-item.on{opacity:1;visibility:visible;transform:none}
.ob-item a,.ob-item span{color:inherit;text-decoration:none}
.ob-item a:hover{text-decoration:underline}
.ob-code{border:1.5px dashed currentColor;background:color-mix(in srgb,var(--accent-ink) 8%,transparent);color:inherit;border-radius:7px;padding:1px 9px;font-size:.84rem;font-weight:500;letter-spacing:.02em}
.ob-code b{font-family:var(--mono);font-weight:500}
.ob-code small{opacity:.7;margin-left:4px}
.ob-code.copied small{opacity:1}
.ob-nav{background:none;border:0;color:inherit;font-size:1.3rem;line-height:1;width:28px;height:28px;border-radius:6px;opacity:.75;flex:none}
.ob-nav:hover{opacity:1;background:color-mix(in srgb,var(--accent-ink) 10%,transparent)}
@media (max-width:520px){.offerbar{font-size:.82rem}.ob-nav{display:none}}
@media (prefers-reduced-motion:reduce){.ob-item{transition:none}}

/* coupon in cart */
.couponbox{display:grid;gap:6px;padding-top:10px}
.cprow{display:flex;gap:8px}
.cprow input{flex:1;min-width:0;text-transform:uppercase;font-family:var(--mono);letter-spacing:.04em}
.cprow .btn{padding:8px 16px;background:var(--deep);color:var(--deep-fg);border:0}
.couponbox .msg{padding:7px 10px;font-size:.85rem}
.cpapplied{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cpapplied button{background:none;border:0;color:inherit;text-decoration:underline;font-size:.82rem}
.sumrow{display:flex;justify-content:space-between;font-size:.94rem;color:var(--muted);padding-top:6px}
.sumrow.disc{color:var(--good);font-weight:600}

/* light / dark switch */
.hdr-actions{display:flex;align-items:center;gap:8px}
.modebtn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--deep-fg);display:grid;place-items:center;padding:0}
.modebtn:hover{border-color:var(--accent);color:var(--accent)}
.modebtn svg{width:19px;height:19px}
.modebtn .i-sun{display:none}
.modebtn.is-dark .i-sun{display:block}
.modebtn.is-dark .i-moon{display:none}

/* ---------- 3D hero phone ---------- */
.stage3d{--w:250px;--h:510px;--d:26px;position:relative;height:calc(var(--h) + 70px);display:grid;place-items:center;perspective:1300px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage3d:active{cursor:grabbing}
.glow3d{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 45%,transparent),transparent 65%);filter:blur(10px);opacity:.55;pointer-events:none}
.phone3d{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-28deg);animation:float3d 6s ease-in-out infinite}
@keyframes float3d{0%,100%{translate:0 0}50%{translate:0 -14px}}
.f3d{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.front,.back{inset:0;border-radius:44px}
.front{transform:translateZ(calc(var(--d) / 2));background:#0b0b10;padding:10px;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--deep),#fff 35%)}
.back{transform:rotateY(180deg) translateZ(calc(var(--d) / 2));background:linear-gradient(150deg,color-mix(in srgb,var(--deep),#fff 32%),var(--deep) 55%,color-mix(in srgb,var(--deep),#000 30%));box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--deep),#fff 40%)}
.side{top:22px;bottom:22px;width:var(--d);left:calc(50% - var(--d) / 2);background:linear-gradient(90deg,color-mix(in srgb,var(--deep),#fff 25%),color-mix(in srgb,var(--deep),#fff 45%),color-mix(in srgb,var(--deep),#fff 18%))}
.side.r{transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - 1px))}
.side.l{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2 - 1px))}
.edge{left:22px;right:22px;height:var(--d);top:calc(50% - var(--d) / 2);background:color-mix(in srgb,var(--deep),#fff 30%)}
.edge.t{transform:rotateX(90deg) translateZ(calc(var(--h) / 2 - 1px))}
.edge.b{transform:rotateX(-90deg) translateZ(calc(var(--h) / 2 - 1px))}
.scr{position:relative;height:100%;border-radius:35px;overflow:hidden;display:flex;flex-direction:column;align-items:center;color:#fff;
  background:radial-gradient(120% 70% at 20% 10%,color-mix(in srgb,var(--accent),#fff 25%),transparent 60%),radial-gradient(90% 60% at 90% 90%,color-mix(in srgb,var(--accent),#7a00ff 45%),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--accent),var(--deep) 30%),var(--deep))}
.scr::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 38%);pointer-events:none}
.island{width:86px;height:24px;border-radius:14px;background:#000;margin-top:12px}
.clock{font:300 58px/1 var(--display);margin-top:38px;letter-spacing:-1px}
.date{font-size:.82rem;opacity:.85;margin-top:6px}
.apps{display:grid;grid-template-columns:repeat(4,38px);gap:16px;margin-top:auto}
.apps i,.dock i{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.apps i:nth-child(3n){background:rgba(255,255,255,.45)}
.dock{display:flex;gap:16px;margin:18px 0 16px;padding:10px 14px;border-radius:22px;background:rgba(255,255,255,.18)}
.cam{position:absolute;top:22px;left:22px;width:104px;height:104px;border-radius:28px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15);display:grid;grid-template-columns:1fr 1fr;padding:12px;gap:8px}
.cam i{border-radius:50%;background:radial-gradient(circle at 35% 35%,#5a6d9a 0 18%,#151821 22% 60%,#2b2f3a 64%);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.cam i:nth-child(3){grid-column:1}
.cam b{width:14px;height:14px;border-radius:50%;background:#fff6d8;align-self:center;justify-self:center}
.mark{position:absolute;left:50%;top:56%;translate:-50% -50%;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font:800 34px var(--display);color:var(--accent);border:2px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.shadow3d{position:absolute;bottom:8px;width:220px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);animation:shadow3d 6s ease-in-out infinite}
@keyframes shadow3d{0%,100%{scale:1;opacity:.8}50%{scale:.85;opacity:.55}}
.tag3d{left:auto;right:4%;bottom:16%;transform:translateZ(0);animation:float3d 5s ease-in-out infinite reverse}
.hint3d{position:absolute;bottom:-6px;font-size:.75rem;opacity:.5;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:760px){.stage3d{--w:200px;--h:410px;--d:22px}.clock{font-size:46px;margin-top:28px}.apps{grid-template-columns:repeat(4,30px);gap:12px}.apps i,.dock i{width:30px;height:30px;border-radius:9px}.cam{width:84px;height:84px}.tag3d{right:0}}
@media (prefers-reduced-motion:reduce){.phone3d,.shadow3d,.tag3d{animation:none}}
.heroimg{position:relative;justify-self:center;max-width:460px;width:100%}
.heroimg img{width:100%;height:auto;border-radius:24px;display:block;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.heroimg .tag{left:-4%;bottom:10%}
.hero.solo .wrap{grid-template-columns:1fr}
.hero{overflow:hidden}
.glow3d{max-width:100%}
@media (max-width:480px){.logo{font-size:1.08rem;gap:8px}.logo .logomark{width:30px;height:30px}.hdr-actions{gap:6px}.modebtn{width:34px;height:34px}.cartbtn{padding:6px 12px}}

/* category photo strip */
.catstrip{padding-block:28px 8px}
.catrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:thin}
.cattile{display:grid;gap:10px;justify-items:center;text-decoration:none;color:var(--ink);scroll-snap-align:start;min-width:0}
.catimg{width:100%;aspect-ratio:1;border-radius:16px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.catimg img{width:86%;height:86%;object-fit:contain}
.catimg svg{width:46%;height:46%;color:#14213d}
.cattile:hover .catimg,.cattile:focus-visible .catimg{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,33,61,.12);border-color:var(--accent)}
.catname{font-size:.95rem;font-weight:500;text-align:center;line-height:1.25}
@media (max-width:640px){.catrow{grid-auto-columns:96px;gap:10px}.catname{font-size:.85rem}}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}

/* listing pages */
.listing{padding-top:22px}
.cathead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.cathead h1{font-size:clamp(1.6rem,3.5vw,2.3rem);font-weight:800}
.cathead p{margin:4px 0 0}
.cathead .searchform{margin-left:auto}
.catimg.sm{width:72px;flex:none;border-radius:14px}
.catchips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;margin-bottom:14px}
.catchips .chipbtn{text-decoration:none;white-space:nowrap}
@media (max-width:640px){.cathead .searchform{margin-left:0;width:100%}.cathead .search{width:100%}}
.social .soc{display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 8px}
.social .soc svg{width:26px;height:26px;padding:4px;border-radius:50%;color:#fff;flex:none}
.social .ig svg{background:linear-gradient(45deg,#f9a73e,#e1306c 55%,#833ab4)}
.social .fb svg{background:#1877f2}
.social .yt svg{background:#e62117}

/* card buttons: Add to cart · Buy now · WhatsApp */
.cardbtns{display:flex;gap:6px;margin-top:8px}
.cardbtns .add,.cardbtns .buy{flex:1;margin-top:0;padding:9px 6px;font-weight:600;border-radius:10px;font-size:.9rem;white-space:nowrap}
.cardbtns .add{background:var(--surface);color:var(--ink);border:1.5px solid var(--deep)}
.cardbtns .add.done{background:var(--good);border-color:var(--good);color:#fff}
.cardbtns .buy{background:var(--accent);color:var(--accent-ink);border:0}
.cardbtns .buy:hover{filter:brightness(1.05)}
.cardbtns .ask{flex:none;width:40px;padding:0;color:#1fa855;border:1.5px solid var(--line);border-radius:10px;display:grid;place-items:center}
.cardbtns .ask svg{width:22px;height:22px}
.pdp-info .cardbtns .add,.pdp-info .cardbtns .buy{padding:13px;font-size:1.02rem}
.pdp-info .cardbtns .ask{width:52px}

/* mini cart */
.drawer .line{grid-template-columns:56px 1fr auto;align-items:start}
.lthumb{width:56px;height:56px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.lthumb img{width:100%;height:100%;object-fit:contain}
.linfo{min-width:0;display:grid;gap:6px}
.linfo a{color:inherit;text-decoration:none}
.linfo b{font-weight:600;font-size:.94rem;line-height:1.3}
.rm{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:.82rem;padding:0 4px}
.drawer-foot{border-top:1px solid var(--line);padding-top:6px}
.drawer-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drawer-btns .btn{text-align:center}
.ghostbtn{border:1.5px solid var(--line);color:var(--ink);background:transparent}
.emptycart{text-align:center;padding:30px 0;color:var(--muted);display:grid;gap:12px;justify-items:center}
.small{font-size:.85rem}

/* ---------- cart / checkout / success ---------- */
.flow{padding-top:20px}
.steps{list-style:none;margin:0 auto 22px;padding:0;display:flex;justify-content:center;gap:8px;max-width:640px;counter-reset:s}
.steps li{flex:1;display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);font-weight:500;white-space:nowrap}
.steps li:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--line);margin-left:6px;min-width:12px}
.steps li span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);font-size:.8rem;flex:none;background:var(--surface)}
.steps li a{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.steps li.on{color:var(--ink);font-weight:600}
.steps li.on span{border-color:var(--deep);background:var(--deep);color:var(--deep-fg)}
.steps li.done span{border-color:var(--good);background:var(--good);color:#fff}
.steps li.done{color:var(--ink)}
@media (max-width:520px){.steps li{font-size:0;gap:0}.steps li span{font-size:.8rem}}
.flowgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
@media (max-width:900px){.flowgrid{grid-template-columns:1fr}}
.panelbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.panelbox h2{font-size:1.15rem;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.boxhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px}
.boxhead h1{font-size:1.45rem}
.summary{position:sticky;top:calc(80px + env(safe-area-inset-top,0px));display:grid;gap:12px}
.summary h2{margin:0}
.crow{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.crow:last-child{border-bottom:0}
.crow.oos{opacity:.65}
.cimg{width:110px;aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden;position:relative}
.cimg img{width:100%;height:100%;object-fit:contain}
.cimg.sm{width:56px;flex:none}
.cimg.sm i{position:absolute;top:-1px;right:-1px;background:var(--deep);color:var(--deep-fg);font-style:normal;font-size:.72rem;font-weight:700;min-width:20px;height:20px;border-radius:0 11px 0 8px;display:grid;place-items:center}
.cinfo{display:grid;gap:4px;min-width:0}
.cinfo a{color:inherit;text-decoration:none}
.cinfo a b{font-size:1.02rem;font-weight:600}
.cprice{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.cprice s{color:var(--muted);font-size:.85rem}.cprice em{font-style:normal;color:var(--good);font-size:.82rem;font-weight:600}
.cact{display:flex;gap:16px;align-items:center;margin-top:6px}
.qty.big{border:1px solid var(--line);border-radius:10px;overflow:hidden;gap:0}
.qty.big button{border:0;border-radius:0;width:34px;height:34px;background:var(--bg)}
.qty.big input{width:42px;height:34px;border:0;border-inline:1px solid var(--line);text-align:center;background:var(--surface);color:var(--ink);font-weight:600}
.cline{font-size:1.05rem}
.good{color:var(--good)}
@media (max-width:560px){.crow{grid-template-columns:80px minmax(0,1fr)}.cimg{width:80px}.cline{grid-column:2}}
.trust{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.trust li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;font-size:.9rem}
.trust span{color:var(--muted);font-size:.82rem}
@media (max-width:560px){.trust{grid-template-columns:1fr}}
.sumlist{margin:0;display:grid;gap:8px}
.sumlist div{display:flex;justify-content:space-between;gap:10px;font-size:.95rem}
.sumlist dt{color:var(--muted)}.sumlist dd{margin:0}
.grand{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line);padding-top:12px;font-weight:700;font-size:1.15rem}
.grand .num{font-size:1.35rem}
.btn.block{display:block;width:100%;text-align:center}
.btn.disabled{opacity:.45;pointer-events:none}
.ghostbtn{border:1.5px solid var(--line)!important;color:var(--ink)!important;background:transparent!important}
.placebtn{padding:15px;font-size:1.05rem}
.secure{text-align:center;margin:0}
.cksteps{display:grid;gap:16px;min-width:0}
.num-badge{width:26px;height:26px;border-radius:50%;background:var(--deep);color:var(--deep-fg);display:grid;place-items:center;font-size:.85rem;font-family:var(--body)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.fgrid .wide{grid-column:1/-1}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.fld{display:grid;gap:5px;min-width:0}
.fld label{font-size:.88rem;font-weight:600}
.fld label small{font-weight:400;color:var(--muted)}
.fld input,.fld select,.fld textarea,.cprow input{width:100%;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:11px 12px;font:inherit;min-width:0}
.fld input:focus,.fld select:focus,.fld textarea:focus,.cprow input:focus{outline:none;border-color:var(--deep);background:var(--surface)}
.fld.err input,.fld.err select,.fld.err .prefix{border-color:var(--bad)}
.fld .hint{font-size:.8rem;color:var(--muted)}
.fld .hint.good{color:var(--good)}.fld .hint.bad{color:var(--bad)}
.prefix{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.prefix span{padding:11px 10px;color:var(--muted);border-right:1px solid var(--line);font-weight:600}
.prefix input{border:0!important;border-radius:0}
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
@media (max-width:560px){.opts.two{grid-template-columns:1fr}}
.opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--surface)}
.opt:has(input:checked){border-color:var(--deep);box-shadow:0 0 0 3px color-mix(in srgb,var(--deep) 14%,transparent)}
.opt.disabled{opacity:.55;cursor:not-allowed}
.opt input{margin-top:4px;accent-color:var(--deep);width:18px;height:18px;flex:none}
.opt span{display:grid;gap:2px;flex:1}
.opt small{color:var(--muted);font-size:.84rem}
.opt .warnline{color:var(--bad)}
.opt em{font-style:normal;font-weight:600;font-size:.88rem;color:var(--muted);white-space:nowrap}
.pickup{margin-top:14px;padding:14px;border-radius:12px;background:var(--bg);border:1px dashed var(--line);font-size:.92rem;line-height:1.6}
.savebox{margin-top:14px;font-size:.88rem;display:flex;gap:8px;align-items:center;color:var(--muted)}
.check{display:flex;gap:8px;align-items:flex-start}
.ckitems{display:grid;gap:10px;max-height:300px;overflow:auto}
.ckitem{display:flex;gap:10px;align-items:center}
.ckname{flex:1;min-width:0;font-size:.9rem;line-height:1.3}
.success{text-align:center;display:grid;justify-items:center;gap:6px;padding:30px 18px;margin-bottom:20px}
.success h1{font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:800}
.success p{margin:0;color:var(--muted);max-width:56ch}
.success .ordno{color:var(--ink)}
.sicon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.9rem;font-weight:700;color:#fff;background:var(--good)}
.state-pay .sicon{background:var(--accent);color:var(--accent-ink)}
.state-wait .sicon{background:#e0a100}
.state-bad .sicon{background:var(--bad)}
.upiwrap{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.upiqr{display:grid;justify-items:center;gap:6px}
.upiqr .qr{background:#fff;padding:10px;border-radius:12px;border:1px solid var(--line);width:202px;height:202px;display:grid;place-items:center}
.upidet{flex:1;min-width:220px;display:grid;gap:12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:.92rem}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-family:var(--mono);word-break:break-all}
.copybtn{background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:1px 8px;font-size:.78rem;margin-left:6px;font-family:var(--body)}
.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* brand strip */
.logos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.brandtile{height:76px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;place-items:center;padding:12px;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.brandtile span{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);opacity:.72}
.brandtile.haslogo{background:#fff}
.brandtile img{max-height:44px;max-width:100%;object-fit:contain}
.brandtile:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,33,61,.1);border-color:var(--accent)}
.brandtile:hover span{opacity:1}
.fgrid{align-items:start}
.ckitems + .couponbox,.ckitems + .sumlist{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.track{list-style:none;display:flex;gap:0;padding:0;margin:14px 0 4px;width:min(520px,100%)}
.track li{flex:1;display:grid;justify-items:center;gap:6px;font-size:.82rem;color:var(--muted);position:relative}
.track li::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.track li:first-child::before{display:none}
.track li.done::before,.track li.now::before{background:var(--good)}
.track span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);font-weight:700;position:relative;z-index:1}
.track li.done span,.track li.now span{background:var(--good);border-color:var(--good);color:#fff}
.track li.now{color:var(--ink);font-weight:600}

/* account button in header */
.acctbtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 9px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:var(--deep-fg);text-decoration:none;font-weight:500;font-size:.92rem}
.acctbtn:hover{border-color:var(--accent);color:var(--accent)}
.acctbtn svg{width:19px;height:19px}
@media (max-width:520px){.acctbtn span{display:none}.acctbtn{width:34px;height:34px;padding:0;justify-content:center}}

/* sign in / account pages */
.authwrap{display:grid;grid-template-columns:1fr 440px;gap:26px;align-items:center;max-width:980px;margin:10px auto 0}
@media (max-width:820px){.authwrap{grid-template-columns:1fr}.authside{order:2}}
.authside h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;margin-bottom:16px}
.authside ul{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:14px}
.authside li{display:grid;padding-left:34px;position:relative}
.authside li::before{content:"✓";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:.8rem}
.authside li span{color:var(--muted);font-size:.92rem}
.authbox{padding:24px;display:grid;gap:14px}
.authtabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:12px;padding:4px}
.authtabs a{text-align:center;padding:9px;border-radius:9px;text-decoration:none;color:var(--muted);font-weight:600}
.authtabs a.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.authform{display:grid;gap:14px}
.authform label{display:flex;justify-content:space-between}
.forgot{font-weight:500;font-size:.85rem}
.authtitle{font-size:1.5rem;font-weight:800}
.center{text-align:center}
.acchead{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.acchead h1{font-size:1.7rem;font-weight:800}.acchead p{margin:2px 0 0}
.acchead .avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--deep);color:var(--accent);font-family:var(--display);font-weight:800;font-size:1.5rem;flex:none}
.acchead .logout{margin-left:auto}
.acctabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px}
.acctabs a{padding:10px 14px;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1px}
.acctabs a.on{color:var(--ink);border-bottom-color:var(--accent)}
.acctabs em{font-style:normal;font-size:.78rem;background:var(--bg);border-radius:999px;padding:1px 7px;margin-left:4px}
.olist{display:grid;gap:10px}
.ocard{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;text-decoration:none;color:inherit;padding:12px 16px;transition:border-color .15s,transform .15s}
.ocard:hover{border-color:var(--accent);transform:translateY(-1px)}
.oinfo{display:grid;gap:3px;min-width:0}
.ostat{display:grid;justify-items:end;gap:4px}
.pill{font-size:.78rem;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--bg);color:var(--muted)}
.pill.good{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.pill.info{background:color-mix(in srgb,#2257c5 14%,transparent);color:#2257c5}
.pill.warn{background:color-mix(in srgb,#e0a100 18%,transparent);color:#9a6a00}
.signedbar{background:var(--surface);border:1px dashed var(--line);border-radius:12px;padding:10px 14px;font-size:.92rem}
@media (max-width:560px){.ocard{grid-template-columns:48px 1fr}.ostat{grid-column:2;justify-items:start;grid-auto-flow:column;gap:10px}}

/* custom logo */
.logo .logoimg{width:auto;max-width:220px;object-fit:contain;display:block}
.logo .logoimg.full{max-width:260px}
.logo .logoname{white-space:nowrap}
@media (max-width:480px){.logo .logoimg{max-height:34px}.logo .logoimg.full{max-width:150px}}

/* ---------- chat launcher ---------- */
.chatw{--cw:58px;--cw-bg:#1fa855;position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.chatw.side-right{right:calc(18px + env(safe-area-inset-right,0px))}
.chatw.side-left{left:calc(18px + env(safe-area-inset-left,0px));align-items:flex-start}
.chatw.size-small{--cw:46px}.chatw.size-large{--cw:68px}
.chatw-btn{position:relative;width:var(--cw);height:var(--cw);border-radius:50%;border:0;background:var(--cw-bg);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px rgba(31,168,85,.42);transition:transform .2s}
.chatw-btn:hover{transform:scale(1.06)}
.chatw-btn svg{width:48%;height:48%;grid-area:1/1;transition:transform .25s,opacity .2s}
.chatw-btn .i-close{opacity:0;transform:rotate(-90deg) scale(.6)}
.chatw.open .chatw-btn .i-chat{opacity:0;transform:rotate(90deg) scale(.6)}
.chatw.open .chatw-btn .i-close{opacity:1;transform:none}
.chatw-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--cw-bg);animation:cfpulse 2.6s ease-out infinite}
.chatw.open .chatw-btn::after{display:none}
.chatw-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:999px;background:#ff3b30;color:#fff;font:700 .72rem/20px var(--body);text-align:center;padding:0 5px;border:2px solid #fff}
.chatw.open .chatw-badge,.chatw.single .chatw-badge{display:none}
.chatw-menu{width:min(270px,calc(100vw - 36px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(10,15,29,.25);padding:8px;display:grid;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:bottom right;transition:opacity .2s,transform .2s,visibility .2s}
.chatw.side-left .chatw-menu{transform-origin:bottom left}
.chatw.open .chatw-menu{opacity:1;visibility:visible;transform:none}
.chatw-title{padding:10px 10px 8px;font-weight:700;font-family:var(--display);font-size:1.02rem;display:grid;gap:2px;border-bottom:1px solid var(--line);margin-bottom:4px}
.chatw-title small{font-family:var(--body);font-weight:400;font-size:.8rem;color:var(--muted)}
.chatw-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;text-decoration:none;color:inherit;transition:background .15s}
.chatw-item:hover,.chatw-item:focus-visible{background:var(--bg)}
.chatw-item .ci{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none}
.chatw-item .ci svg{width:58%;height:58%}
.chatw-item b{display:block;font-weight:600;font-size:.95rem}
.chatw-item small{color:var(--muted);font-size:.8rem}
.chatw-item.wa .ci{background:#1fa855}
.chatw-item.ig .ci{background:linear-gradient(45deg,#f9a73e,#e1306c 55%,#833ab4)}
.chatw-item.ig .ci svg{margin-left:-2px}
.chatw-item.ms .ci{background:#0a7cff}
.chatw-item.call .ci{background:var(--deep)}
@media (prefers-reduced-motion:reduce){.chatw-btn::after{animation:none}.chatw-menu,.chatw-btn svg{transition:none}}

/* visit our store */
.visit{padding-block:48px}
.visitgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 16px 40px rgba(20,33,61,.08)}
.visitcard{padding:30px;display:grid;gap:12px;align-content:center}
.visitcard h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800}
.vaddr{margin:0;line-height:1.6}
.vlist{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--muted)}
.vlist li{display:flex;gap:10px;align-items:center}
.vlist a{color:inherit}
.vi{width:30px;height:30px;border-radius:9px;background:var(--bg);display:grid;place-items:center;font-size:.9rem;flex:none}
.vbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.visitmap{position:relative;min-height:340px;background:var(--bg)}
.visitmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(1.05)}
.mapopen{position:absolute;right:12px;bottom:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:600;font-size:.85rem;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.15)}
@media (max-width:820px){.visitgrid{grid-template-columns:1fr}.visitmap{min-height:280px}}
.dirlink{display:inline-block;margin-top:6px;font-weight:600;color:var(--accent)!important}
.pdp-info .cardbtns{align-items:stretch}
.pdp-info .cardbtns .ask{width:54px;flex:none;padding:0;background:#1fa855;border-color:#1fa855;color:#1fa855;display:grid;place-items:center}
.pdp-info .cardbtns .ask svg{width:28px;height:28px}
.pdp-info .cardbtns .ask svg path:first-child{fill:#fff}
.pdp-info .cardbtns .ask svg path:last-child{fill:#1fa855}
.pdp-info .cardbtns .ask:hover{filter:brightness(1.06)}
.maintbar{background:#c0392b;color:#fff;text-align:center;font-size:.88rem;padding:7px max(16px,env(safe-area-inset-left,0px));font-weight:500}
.maintbar a{color:#fff;font-weight:700}
/* map placeholder while Google Maps loads */
.visitmap{background:
  radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--accent) 35%,transparent) 0 18px,transparent 19px),
  linear-gradient(90deg,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px) 0 0/40px 40px,var(--bg)}

/* ===== Header menu (managed in Admin → Header & Footer) ===== */
header.static{position:relative}
header .wrap{gap:14px}
.mainnav{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}
.mainnav > ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.mainnav > ul > li{position:relative}
.mainnav > ul > li > a{display:inline-flex;align-items:center;gap:4px;padding:8px 11px;border-radius:10px;color:inherit;text-decoration:none;font-size:.95rem;font-weight:500;opacity:.88;white-space:nowrap;transition:background .15s,opacity .15s,color .15s}
.mainnav > ul > li > a:hover,.mainnav > ul > li:hover > a,.mainnav > ul > li.show > a{opacity:1;color:var(--accent);background:rgba(255,255,255,.07)}
.mainnav .caret{width:14px;height:14px;transition:transform .2s}
.mainnav li:hover > a .caret,.mainnav li.show > a .caret{transform:rotate(180deg)}
.dropbtn,.mnav-head,.mnav-search,.mnav-foot,.menubtn{display:none}
.drop{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:220px;padding-top:10px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:20}
.drop::before{content:"";position:absolute;inset:10px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 50px rgba(10,15,29,.22);z-index:-1}
.mainnav li:hover > .drop,.mainnav li:focus-within > .drop,.mainnav li.show > .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop ul{list-style:none;margin:0;padding:8px;display:grid;gap:1px}
.drop ul.dgrid{grid-template-columns:repeat(3,minmax(120px,1fr));min-width:400px}
.drop ul a{display:block;padding:8px 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:.93rem;white-space:nowrap}
.drop ul a:hover{background:var(--bg);color:var(--ink)}
.drop .drop-top{grid-column:1/-1}
.drop .drop-top a{font-weight:700;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.drop-mega{position:static}
.drop-mega > .drop{width:min(900px,calc(100vw - 32px))}
.mainnav > ul{position:relative}
.mega{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 10px;padding:16px 16px 6px}
.mega-col{display:grid;align-content:start;gap:1px;min-width:0}
.mega-head{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.94rem}
.mega-head:hover{background:var(--bg)}
.mega-ic{width:38px;height:38px;flex:none;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;color:#14213d}
.mega-ic img{width:100%;height:100%;object-fit:contain}
.mega-ic svg{width:24px;height:24px}
.mega-sub{display:block;padding:4px 8px 4px 56px;color:var(--muted);text-decoration:none;font-size:.88rem;border-radius:8px}
.mega-sub:hover{color:var(--ink);background:var(--bg)}
.drop-all{display:block;margin:4px 16px 14px;padding:10px 12px;border-radius:10px;background:var(--bg);color:var(--ink);font-weight:600;text-decoration:none;text-align:center;font-size:.92rem}
.drop-all:hover{background:var(--accent);color:var(--accent-ink)}

/* Search icon + panel */
.hsbtn{width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:inherit;display:grid;place-items:center;padding:0}
.hsbtn svg{width:19px;height:19px}
.hsbtn:hover,.hsbtn.on{border-color:var(--accent);color:var(--accent)}
header .hspanel{background:inherit;border-top:1px solid rgba(255,255,255,.1);animation:hsin .2s ease}
@keyframes hsin{from{opacity:0;transform:translateY(-6px)}}
header .hspanel .wrap{display:block;padding-block:14px 16px}
.hsform{display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--ink);border-radius:14px;padding:6px 6px 6px 14px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.hsform > svg{width:20px;height:20px;color:var(--muted);flex:none}
.hsform input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:1.05rem;padding:8px 0;outline:none}
.hsform .btn{padding:9px 18px}
.hsx{width:38px;height:38px;border:0;background:var(--bg);color:var(--ink);border-radius:10px;font-size:1.4rem;line-height:1;flex:none}
.hstags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;font-size:.88rem}
.hstags small{opacity:.7}
.hstags a{color:inherit;text-decoration:none;padding:4px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2)}
.hstags a:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:520px){.hsbtn{width:34px;height:34px}.hsform .btn{display:none}}

/* Mobile menu drawer */
@media (max-width:900px){
  .menubtn{display:inline-grid;align-content:center;gap:4px;width:38px;height:38px;padding:0 9px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:transparent;color:inherit;flex:none}
  .menubtn span{display:block;height:2px;border-radius:2px;background:currentColor}
  header .wrap{justify-content:flex-start}
  .hdr-actions{margin-left:auto}
  .mainnav{position:fixed;inset:0 auto 0 0;width:min(340px,86vw);z-index:60;background:var(--surface);color:var(--ink);flex-direction:column;align-items:stretch;justify-content:flex-start;transform:translateX(-102%);transition:transform .25s ease;overflow-y:auto;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);box-shadow:20px 0 50px rgba(0,0,0,.25)}
  .mainnav.open{transform:none}
  .mnav-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);font-family:var(--display);font-size:1.15rem}
  .mnav-x{width:36px;height:36px;border:0;border-radius:10px;background:var(--bg);color:var(--ink);font-size:1.5rem;line-height:1}
  .mnav-search{display:block;padding:14px 18px 6px}
  .mnav-search input{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
  .mainnav > ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 10px}
  .mainnav > ul > li{display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--line)}
  .mainnav > ul > li:last-child{border-bottom:0}
  .mainnav > ul > li > a{padding:13px 8px;font-size:1.02rem;opacity:1;color:var(--ink);background:none!important}
  .mainnav .caret{display:none}
  .dropbtn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:var(--bg);color:var(--ink);padding:0}
  .dropbtn svg{width:18px;height:18px;transition:transform .2s}
  .mainnav li.show .dropbtn svg{transform:rotate(180deg)}
  .drop,.mainnav li:hover > .drop,.mainnav li:focus-within > .drop{position:static;grid-column:1/-1;transform:none;opacity:1;visibility:visible;display:none;padding:0 0 10px;min-width:0;width:auto!important}
  .mainnav li.show > .drop{display:block}
  .drop::before{display:none}
  .drop ul,.drop ul.dgrid{min-width:0;grid-template-columns:1fr 1fr;padding:0 0 0 8px}
  .drop ul a{padding:8px 10px;white-space:normal}
  .mega{grid-template-columns:1fr;padding:0 0 0 4px;gap:2px}
  .mega-ic{width:32px;height:32px}
  .mega-sub{padding-left:50px}
  .drop-all{margin:6px 0 0}
  .mnav-foot{display:grid;gap:8px;padding:14px 18px 22px;margin-top:auto;border-top:1px solid var(--line)}
  .mnav-foot a{color:var(--ink);text-decoration:none;font-weight:500}
  .mnav-shade{position:fixed;inset:0;background:rgba(5,8,16,.55);z-index:55;backdrop-filter:blur(2px)}
  body.navlock{overflow:hidden}
  body.navlock header{z-index:70}
}
@media (max-width:480px){.menubtn{width:34px;height:34px;padding:0 8px}header .wrap{gap:8px}}

/* ===== Brand logos: scrolling strip ===== */
.marquee{position:relative;overflow:hidden;padding-block:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq var(--mq-dur,40s) linear infinite}
.mq-set{display:flex;gap:14px;padding-right:14px}
.mq-set .brandtile{width:170px;flex:none}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
@media (max-width:640px){.mq-set .brandtile{width:132px;height:64px}.mq-set{gap:10px;padding-right:10px}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}

/* ===== Footer ===== */
footer{--f-bg:var(--deep);--f-fg:var(--deep-fg);--f-line:rgba(255,255,255,.1);--f-soft:rgba(255,255,255,.06);background:var(--f-bg);color:var(--f-fg);padding-bottom:env(safe-area-inset-bottom,0px);position:relative;overflow:hidden}
footer.foot-light{--f-bg:var(--surface);--f-fg:var(--ink);--f-line:var(--line);--f-soft:var(--bg);border-top:1px solid var(--line)}
footer::before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%);pointer-events:none}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--accent)}
footer h4{font-family:var(--display);margin:0 0 14px;font-size:1rem;color:var(--f-fg);position:relative;padding-bottom:10px}
footer h4::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:3px;background:var(--accent)}
.ffeat{border-bottom:1px solid var(--f-line);position:relative}
.ffeat .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-block:22px}
.fitem{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--f-soft);border:1px solid var(--f-line)}
.fic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.fic svg{width:22px;height:22px}
.fitem b{display:block;font-family:var(--display);font-size:.98rem;line-height:1.2}
.fitem small{display:block;opacity:.7;font-size:.82rem;line-height:1.3;margin-top:2px}
.fmain{display:grid;grid-template-columns:minmax(260px,1.35fr) repeat(var(--fcols,4),minmax(0,1fr));gap:32px;padding-block:44px 34px;position:relative}
.fbrand .logo{margin-bottom:12px}
.fabout{opacity:.78;margin:0 0 16px;font-size:.95rem;line-height:1.6;max-width:34ch}
.faddr{display:flex;gap:10px;font-size:.92rem;opacity:.9;line-height:1.5}
.faddr svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:2px}
.dirlink{color:var(--accent)!important;font-weight:600;display:inline-block;margin-top:4px}
.fquick{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.fq{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;font-weight:600;font-size:.9rem;transition:transform .15s,filter .15s}
.fq svg{width:16px;height:16px}
.fq.call{background:var(--accent);color:var(--accent-ink)!important}
.fq.wa{background:#1fa855;color:#fff!important}
.fq:hover{transform:translateY(-2px);filter:brightness(1.06)}
.fsocial{display:flex;gap:8px;margin-top:16px}
.fs{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--f-soft);border:1px solid var(--f-line);transition:transform .15s,background .15s,color .15s}
.fs svg{width:19px;height:19px}
.fs:hover{transform:translateY(-2px);color:#fff!important}
.fs.ig:hover{background:linear-gradient(45deg,#f09433,#dc2743 50%,#bc1888)}
.fs.fb:hover{background:#1877f2}
.fs.yt:hover{background:#e62117}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.93rem}
.fcol ul.two{grid-template-columns:1fr 1fr;column-gap:14px}
.fcol ul a{opacity:.8;display:inline-block;transition:opacity .15s,transform .15s,color .15s}
.fcol ul a:hover{opacity:1;transform:translateX(3px)}
.fhours li{opacity:.82}
.fbig{display:inline-block;margin-top:14px;font-size:1.05rem;font-weight:600;padding:8px 14px;border-radius:12px;background:var(--f-soft);border:1px solid var(--f-line)}
.fcontact li{display:grid;gap:1px}
.fcontact small{opacity:.6;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.fcontact a{opacity:1!important;word-break:break-word}
.fbottom{border-top:1px solid var(--f-line);position:relative}
.fbottom .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding-block:16px;font-size:.85rem}
.fbottom .wrap > span:first-child{opacity:.7}
.fpay{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fpay small{opacity:.6;margin-right:2px}
.fpay em{font-style:normal;font-size:.76rem;font-weight:600;padding:3px 9px;border-radius:6px;background:var(--f-soft);border:1px solid var(--f-line)}
.ftop{padding:6px 12px;border-radius:999px;border:1px solid var(--f-line);font-weight:600}
@media (max-width:1000px){.fmain{grid-template-columns:repeat(3,minmax(0,1fr))}.fbrand{grid-column:1/-1}.fabout{max-width:60ch}.ffeat .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.fmain{grid-template-columns:1fr 1fr;gap:28px 18px;padding-block:34px 26px}.fcol-cats,.fcol-brands{grid-column:1/-1}}
@media (max-width:420px){.fmain{grid-template-columns:1fr}.ffeat .wrap{grid-template-columns:1fr;gap:10px}.fitem{padding:10px 12px}.fbottom .wrap{justify-content:center;text-align:center}}

/* Sub-category chips on listing pages */
.subchips{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 18px}
.subchips a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:500;font-size:.92rem}
.subchips a.on,.subchips a:hover{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.subchips .si{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;color:#14213d;border:1px solid var(--line)}
.subchips .si img{width:100%;height:100%;object-fit:contain}.subchips .si svg{width:18px;height:18px}
.subchips a.all{padding-left:14px}
/* Compact cart button with count badge */
.cartbtn{display:inline-flex;align-items:center;gap:7px}
.cartbtn svg{width:18px;height:18px}
.cartbtn .cc{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent-ink);color:var(--accent);font-size:.75rem;font-weight:700;display:inline-grid;place-items:center;font-family:var(--mono)}
.mnav-mode{display:flex;align-items:center;justify-content:space-between;font-weight:500}
.mnav-mode .modebtn{color:var(--ink);border-color:var(--line)}
@media (max-width:560px){.cartbtn .cl{display:none}.cartbtn{padding:6px 8px 6px 10px;gap:5px}}
.fcol.wide{grid-column:span 2}
@media (max-width:1000px){.fcol.wide{grid-column:span 2}}
@media (max-width:640px){.fcol.wide{grid-column:1/-1}}
.brands{overflow:hidden}
.marquee{margin-inline:calc(50% - 50vw)}
@media (min-width:1500px){.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}}
.fbig{white-space:nowrap;font-size:.98rem}
@media (max-width:420px){.fmain{grid-template-columns:1fr 1fr}.fbrand,.fcol.wide,.fcol-hours,.fcol-contact{grid-column:1/-1}}
@media (max-width:340px){.fmain{grid-template-columns:1fr}}

/* Logo lockup */
@media (max-width:480px){header .hdr-actions > .modebtn,header .hdr-actions > .modebtn + script{display:none}}
.logo{min-width:0}
.logo .logomark{width:40px;height:40px;border-radius:11px}
.logoname{display:grid;line-height:1;min-width:0}
.logoname b{font-family:var(--display);font-weight:800;font-size:1.45rem;letter-spacing:-.01em;white-space:nowrap}
.logoname small{font-family:var(--body);font-weight:700;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-top:4px;white-space:nowrap}
.logoname:not(.two) b{font-size:1.3rem}
footer .logoname b{font-size:1.6rem}
footer .logo .logomark{width:46px;height:46px}
@media (max-width:480px){.logo{gap:8px}.logo .logomark{width:34px;height:34px;border-radius:9px}.logoname b{font-size:1.2rem}.logoname small{font-size:.54rem;letter-spacing:.2em;margin-top:3px}}
@media (max-width:350px){.logoname small{letter-spacing:.12em}}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Product names: no underline on hover/tap; Add to cart visible in dark mode */
.card h3 a,.card h3 a:hover,.card h3 a:focus,.card h3 a:active{text-decoration:none}
@media (hover:hover){.card h3 a:hover{color:color-mix(in srgb,var(--ink) 70%,var(--accent))}}
.card h3 a{-webkit-tap-highlight-color:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cardbtns .add:not(.done){background:transparent;border-color:var(--accent);color:var(--accent)}}
:root[data-theme="dark"] .cardbtns .add:not(.done){background:transparent;border-color:var(--accent);color:var(--accent)}
:root[data-theme="dark"] .cardbtns .add:not(.done):hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cardbtns .add:not(.done):hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}}
.opt .shipline{color:var(--muted);font-size:.8rem}
.opt .shipline:empty{display:none}