/* palette from the old Bring-us store (brand_color #663ef4, text #1f2937, page #f9fafb) + black */
:root{--ink:#111418;--text:#1f2937;--ink2:#2a2f36;--bg:#f9fafb;--surface:#f3f4f6;--card:#fff;--line:#e2e8f0;--muted:#6b7280;--brand:#663ef4;--brand-d:#5532d8;--brand-l:#f0ecfe;--brand-b:#d9cffd;--brand-ring:rgba(102,62,244,.19);--brand-dark-ui:#a48bfa;--red:#e11d48;--green:#16a34a;--wa:#25d366;--r:16px;--sh:0 1px 2px #0000000d,0 4px 14px #0000000a;--card:#fff;--inkbg:#111418;--brand-t:#5532d8;--brand-t2:#663ef4;--ph:#f1f2f4}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;accent-color:var(--brand)}
/* mobile: no blue tap flash, no 300ms tap delay, no blue default links/outlines (keyboard focus keeps a purple ring) */
*,*::before,*::after{-webkit-tap-highlight-color:transparent}
a,button,input,select,textarea,label,summary,[role=button],[tabindex]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

:focus:not(:focus-visible){outline:none}
#main:focus,#main:focus-visible{outline:none}
::selection{background:var(--brand-l);color:var(--ink)}
body{margin:0;font-family:Tajawal,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.wrap{max-width:1240px;margin:0 auto;padding:0 14px}
.narrow{max-width:720px}
.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}
h1,h2,h3{line-height:1.3;margin:0}
.h2,.sec-head h2{font-size:19px;font-weight:800}
/* ticker */
.ticker{background:var(--brand);color:#fff;font-size:13px;overflow:hidden;white-space:nowrap;height:30px;display:flex;align-items:center}
.ticker-track{display:inline-flex;animation:tick 40s linear infinite;will-change:transform}
.ticker-track span{padding-inline-end:48px}
.ticker-track span:before{content:"●";color:#ffffffb3;margin-inline-end:10px;font-size:9px;vertical-align:middle}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.ws-bar{background:var(--inkbg);color:#fff;font-weight:700;font-size:13px;text-align:center;padding:5px;display:flex;gap:6px;justify-content:center;align-items:center}
.ws-bar svg{width:16px;height:16px;color:var(--brand-dark-ui)}
/* header */
.hdr{background:var(--card);position:sticky;top:0;z-index:30;box-shadow:0 1px 0 var(--line)}
.hdr-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding-top:8px;padding-bottom:8px}
.logo img{height:46px;width:auto}
.search{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;overflow:hidden;max-width:560px;width:100%;justify-self:center}
.search input{flex:1;border:0;background:transparent;padding:10px 16px;min-width:0;outline:0;font-size:15px}
.search input::-webkit-search-cancel-button{display:none}
.search button{border:0;background:transparent;padding:0 14px;color:var(--muted)}
.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.hdr-actions{display:flex;gap:4px}
.icon-btn{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:1px;background:none;border:0;padding:4px 8px;border-radius:12px;text-decoration:none;font-size:11px;font-weight:700;color:var(--ink)}
.icon-btn:hover{background:var(--bg)}
.cart-count{position:absolute;top:0;inset-inline-end:4px;background:var(--brand);color:#fff;font-size:11px;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;font-style:normal}
.cart-count.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.4)}}
.cats{border-top:1px solid var(--line)}
.cats-row{display:flex;gap:8px;overflow-x:auto;padding-top:8px;padding-bottom:8px;scrollbar-width:none}
.cats-row::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:7px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap;transition:.15s}
.chip:hover{border-color:#cfd3da}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip-hot{background:var(--brand-l);border-color:var(--brand-b);color:var(--brand-t)}
@media (min-width:1000px){.hdr{position:relative}.cats-row{flex-wrap:wrap;gap:6px}.cats-row .chip{padding:5px 12px;font-size:13.5px}}
@media (max-width:719px){
 .hdr-row{grid-template-columns:auto 1fr auto;grid-template-areas:"logo theme act" "search search search";row-gap:8px}
 .theme-btn{grid-area:theme;justify-self:end}
 .logo{grid-area:logo}.hdr-actions{grid-area:act;justify-self:end}.search{grid-area:search;max-width:none}
 .logo img{height:40px}
}
/* slider */
.slider{position:relative;margin-top:14px;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:var(--sh)}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:16/7;position:relative;overflow:hidden}
.slide a{position:absolute;inset:0}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slider-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.slider-dots button{width:8px;height:8px;border-radius:4px;border:0;background:#0003;padding:0;transition:.2s}
.slider-dots button.on{width:22px;background:var(--brand)}
@media (max-width:719px){.slide{aspect-ratio:16/8}}
@media (min-width:900px){.slide{aspect-ratio:16/5}}
/* perks */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.perks>div{background:var(--card);border-radius:14px;padding:12px;display:flex;gap:10px;align-items:center;box-shadow:var(--sh)}
.perks svg{flex:0 0 auto;color:var(--brand-t2);width:26px;height:26px}
.perks b{display:block;font-size:14px}.perks small{color:var(--muted);font-size:12px;display:block;line-height:1.35}
@media (max-width:719px){.perks{gap:6px}.perks>div{flex-direction:column;text-align:center;gap:4px;padding:10px 6px}.perks b{font-size:12.5px;line-height:1.3}.perks small{display:none}.perks svg{width:24px;height:24px}}
/* sections */
.sec{margin-top:26px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-head h2,.sec-head .h2{display:flex;align-items:center;gap:8px}
.sec-head h2:before,.sec-head .h2:before{content:"";width:5px;height:20px;background:var(--brand);border-radius:3px}
.sec-head h2 svg{color:var(--brand-t2)}
.sec-head a{font-size:14px;font-weight:700;color:var(--brand-t2);text-decoration:none}
.page-head{margin:14px 0 12px}.page-head h1{font-size:23px;font-weight:800;display:flex;gap:8px;align-items:center}.page-head p{margin:6px 0 0}
.crumbs{font-size:13px;color:var(--muted);margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}.crumbs i{font-style:normal;opacity:.6}
.crumbs span{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
/* category tiles */
.cat-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:96px;grid-template-rows:repeat(2,auto);gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.cat-tile{text-decoration:none;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.cat-tile img{width:84px;height:84px;object-fit:cover;border-radius:50%;background:var(--card);border:3px solid #fff;box-shadow:0 0 0 1px var(--line),var(--sh);transition:.2s}
@media (hover:hover){.cat-tile:hover img{box-shadow:0 0 0 2px var(--brand)}}
.cat-tile span{font-size:13px;font-weight:700;line-height:1.25}
.cat-tile small{font-size:11px;color:var(--muted)}
@media (min-width:900px){.cat-tiles{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-template-rows:none;overflow:visible}}
/* product grid + cards */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media (min-width:960px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1180px){.grid{grid-template-columns:repeat(5,1fr)}}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000014}}
.card-img{position:relative;display:block;aspect-ratio:1;background:var(--dk-sbg,#f1f2f4)}
.card-img img{width:100%;height:100%;object-fit:cover}
.badges{position:absolute;top:8px;inset-inline-start:8px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;z-index:2}
.badge{font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;line-height:1.6}
.b-new{background:var(--brand);color:#fff}
.b-offer{background:var(--inkbg);color:#fff}
.b-bundle{background:var(--inkbg);color:#fff;position:absolute;top:8px;inset-inline-start:8px}
.card-body{padding:9px 10px 10px;display:flex;flex-direction:column;flex:1;gap:5px}
.card-title{font-size:14px;font-weight:600;line-height:1.4;margin:0}
.card-title a{text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.dots{display:flex;gap:3px;align-items:center}
.dots i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1px #0002}
.dots em{font-size:11px;color:var(--muted);font-style:normal;margin-inline-start:2px}
.card-foot{display:flex;align-items:center;gap:4px;margin-top:auto}
.price{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price b{font-size:18px;font-weight:800;white-space:nowrap}
.price b small{font-size:13px;margin-inline-start:2px;font-weight:700}
.price .from{font-size:12px;font-weight:500;color:var(--muted)}
.price s{color:var(--muted);font-size:13px}
.ws-tag{font-style:normal;background:var(--brand-l);color:var(--brand-t);font-size:11px;font-weight:800;padding:0 6px;border-radius:6px}
.unit{font-size:12px;color:var(--muted)}
.add{margin-inline-start:auto;flex:0 0 auto;width:38px;height:38px;border-radius:12px;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;transition:.15s}
.add:hover{background:var(--brand-d)}
.add:active{transform:scale(.92)}
.add:disabled{background:var(--dk-sbg,#d1d5db);cursor:not-allowed}
.add svg{width:20px;height:20px}
.card.oos .card-img img{opacity:.55;filter:grayscale(.6)}
.oos-tag{position:absolute;bottom:8px;inset-inline-start:8px;background:#111c;color:#fff;font-size:12px;padding:2px 8px;border-radius:8px}
.hscroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;margin:0 -14px;padding-inline:14px;scrollbar-width:thin}
.hscroll .card{flex:0 0 158px;scroll-snap-align:start}
@media (min-width:720px){.hscroll .card{flex-basis:200px}}
.grid-tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:14px}
.sort select{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:6px 8px;margin-inline-start:4px}
.subchips{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px;scrollbar-width:none}
.subchips .chip{background:var(--card)}
.subchips .chip.on{background:var(--brand-l);border-color:var(--brand);color:var(--brand-t)}
.empty{background:var(--card);border-radius:var(--r);padding:30px;text-align:center;color:var(--muted)}
.empty h1{color:var(--ink);margin-bottom:8px}
/* bundles */
.bundles{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.bundles{grid-template-columns:repeat(3,1fr)}}
.bundle{background:linear-gradient(135deg,#1b1f25,#2c323b);color:#fff;border-radius:var(--r);display:flex;overflow:hidden;box-shadow:var(--sh)}
.bundle-img{position:relative;flex:0 0 120px;background:#fff}
.bundle-img img{width:100%;height:100%;object-fit:cover}
.bundle-body{padding:12px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.bundle-body h3{font-size:15px}
.bundle-body .muted{color:#aeb4bd;font-size:13px;margin:0}
.bundle-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}
.bundle .price b{color:var(--brand-dark-ui)}
.bundle .price s{color:#8b929c}
.save{background:var(--green);color:#fff;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:10px 18px;font-weight:700;text-decoration:none;font-size:15px;transition:.15s;line-height:1.2}
.btn svg{width:20px;height:20px}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:10px}.btn-sm svg{width:16px;height:16px}
.btn-lg{padding:14px 22px;font-size:17px}
.btn-block{width:100%}
.btn-dark{background:var(--inkbg);color:#fff}.btn-dark:hover{background:#000}
.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-d)}
.bundle .btn-dark{background:var(--brand);color:#fff;margin-inline-start:auto}.bundle .btn-dark:hover{background:var(--brand-d)}
.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{background:#1ebe5b}
.btn-outline{background:var(--card);border:1.5px solid var(--line);color:var(--ink)}.btn-outline:hover{border-color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* product page */
.pd{display:grid;grid-template-columns:1fr;gap:16px;margin-top:10px}
@media (min-width:900px){.pd{grid-template-columns:1.05fr 1fr;gap:32px;align-items:start}}
.pd-gallery{position:relative}
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--r);background:#fff;scrollbar-width:none;box-shadow:var(--sh)}
.gal::-webkit-scrollbar{display:none}
.gal img{flex:0 0 100%;width:100%;height:auto;scroll-snap-align:center;aspect-ratio:1;object-fit:contain;background:#fff}
.thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto}
.thumbs button{border:2px solid transparent;border-radius:10px;padding:0;overflow:hidden;background:#fff;flex:0 0 60px;height:60px}
.thumbs button.on{border-color:var(--brand)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pd-info h1{font-size:22px;font-weight:800;line-height:1.4}
.pd-price{margin-top:10px;display:flex;align-items:baseline;gap:6px}
.pd-price .price b{font-size:30px;color:var(--brand-t2)}
.was{color:var(--muted);font-size:14px}
.stock{font-size:13px;font-weight:700;margin-top:4px}.stock.ok{color:var(--green)}.stock.no{color:var(--red)}
.colors{border:0;padding:0;margin:16px 0 0}
.colors legend{font-weight:700;margin-bottom:8px;padding:0}
.color-opts{display:flex;flex-wrap:wrap;gap:8px}
.copt{position:relative;display:flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px 6px 10px;cursor:pointer;font-size:14px;font-weight:600;transition:.15s}
.copt input{position:absolute;opacity:0;pointer-events:none}
.copt i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px #0003}
.copt em{font-style:normal;font-size:12px;color:var(--muted)}
.copt:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);background:var(--brand-l)}
.copt:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.copt.off{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.buy{display:flex;gap:10px;margin:18px 0 10px}
.buy .btn{flex:1}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.qty button{border:0;background:none;width:40px;height:46px;display:grid;place-items:center}
.qty button svg{width:18px;height:18px}
.qty input{width:44px;text-align:center;border:0;outline:0;font-weight:800;font-size:17px;-moz-appearance:textfield;background:none}
.qty input::-webkit-inner-spin-button{display:none}
.qty.sm button{width:30px;height:32px}.qty.sm input{width:32px;font-size:15px}
.pd-desc{background:var(--card);border-radius:14px;padding:14px;margin-top:14px;box-shadow:var(--sh)}
.pd-desc h2{font-size:16px;margin-bottom:6px}.pd-desc p{margin:0;white-space:normal}
.pd-perks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;font-size:14px}
.pd-perks li{display:flex;gap:8px;align-items:center;background:var(--card);padding:10px 12px;border-radius:12px}
.pd-perks svg{color:var(--brand-t2);flex:0 0 auto}
.pd-sticky{display:none}
@media (max-width:899px){
 .is-pd .pd-sticky{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;background:var(--card);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:12px;align-items:center;box-shadow:0 -4px 16px #0000001a;transform:translateY(110%);transition:transform .2s}
 .is-pd .pd-sticky.show{transform:none}
 .pd-sticky span{font-size:20px;font-weight:800;white-space:nowrap}.pd-sticky .btn{flex:1}
 .is-pd .cartbar{display:none!important}
}
/* footer */
.ftr{background:var(--inkbg);color:#c9ced6;margin-top:40px;padding:30px 0 90px;font-size:14px}
.ftr-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:800px){.ftr-grid{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.ftr h3{color:#fff;font-size:16px;display:flex;gap:6px;align-items:center;margin-bottom:10px}
.ftr h3 svg{color:var(--brand-dark-ui)}
.ftr-logo{background:#fff;border-radius:12px;padding:6px 10px;height:64px;width:auto;margin-bottom:8px}
.ftr a{color:#fff}
.ftr .btn-wa{margin:6px 0 10px;color:#fff}
.social{display:flex;gap:8px;flex-wrap:wrap}
.social a{display:inline-flex;gap:6px;align-items:center;background:#ffffff14;padding:7px 12px;border-radius:10px;text-decoration:none;font-size:13px}
.social a:hover{background:#ffffff26}
.fees{list-style:none;padding:0;margin:0}
.fees li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #ffffff22}
.fees b{color:var(--brand-dark-ui)}
.ftr-cats{list-style:none;padding:0;margin:0;columns:2;font-size:13px}
.ftr-cats li{margin-bottom:5px}.ftr-cats a{color:#c9ced6;text-decoration:none}.ftr-cats a:hover{color:#fff}
.ftr-bottom{border-top:1px solid #ffffff1a;margin-top:24px;padding-top:14px;font-size:12px;color:#8b929c}
/* floating */
.wa-fab{position:fixed;bottom:18px;left:16px;z-index:26;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px #25d36666;transition:bottom .2s}
.wa-fab svg{width:30px;height:30px}
body.has-cartbar .wa-fab{bottom:86px}
.is-pd .wa-fab{bottom:86px}
@media (min-width:900px){.is-pd .wa-fab{bottom:18px}}
.cartbar{position:fixed;bottom:0;left:0;right:0;z-index:24;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#f4f5f7 30%)}
.cartbar button{width:100%;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:10px;border:0;background:var(--inkbg);color:#fff;padding:13px 18px;border-radius:14px;font-weight:700;box-shadow:0 8px 22px #0004}
.cartbar .cb-count{background:var(--brand);color:#fff;border-radius:8px;padding:1px 8px;font-size:13px}
.cartbar b{margin-inline-start:auto;color:var(--brand-dark-ui)}
/* drawer & sheet */
.drawer,.sheet{position:fixed;inset:0;z-index:50}
.drawer-bg{position:absolute;inset:0;background:#0008;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.drawer-panel{position:absolute;top:0;bottom:0;left:0;width:min(440px,100%);background:var(--card);display:flex;flex-direction:column;animation:slide .25s ease}
@keyframes slide{from{transform:translateX(-100%)}}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:18px;display:flex;gap:8px;align-items:center}
.drawer-body{flex:1;overflow-y:auto;padding:8px 14px}
.drawer-foot{border-top:1px solid var(--line);padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:grid;gap:8px}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.line img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--dk-sbg,#f1f2f4)}
.line-name{font-size:14px;font-weight:600;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-meta{font-size:12px;color:var(--muted)}
.line-err{font-size:12px;color:var(--red);font-weight:700}
.line-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.line-side b{font-size:15px}
.line-ctl{display:flex;align-items:center;gap:6px;margin-top:4px}
.rm{border:0;background:none;color:var(--muted);padding:4px}.rm svg{width:18px;height:18px}.rm:hover{color:var(--red)}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0}
.sum-row.total{font-size:19px;font-weight:800;border-top:1px dashed var(--line);margin-top:4px;padding-top:10px}
.sheet-panel{position:absolute;bottom:0;left:0;right:0;background:var(--card);border-radius:20px 20px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-height:85vh;overflow-y:auto;animation:up .25s ease;max-width:560px;margin:0 auto}
@keyframes up{from{transform:translateY(100%)}}
.drawer.closing .drawer-bg,.sheet.closing .drawer-bg{animation:fadeout .2s ease forwards}
.drawer.closing .drawer-panel{animation:slideout .2s ease-in forwards}
.sheet.closing .sheet-panel{animation:down .2s ease-in forwards}
@keyframes fadeout{to{opacity:0}}@keyframes slideout{to{transform:translateX(-100%)}}@keyframes down{to{transform:translateY(100%)}}
.drawer-panel,.sheet-panel{will-change:transform}
.pick-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.pick-head img{width:64px;height:64px;border-radius:12px;object-fit:cover}
.pick-head h3{font-size:15px}
.toast{position:fixed;top:14px;left:50%;transform:translate(-50%,-150%);background:var(--inkbg);color:#fff;padding:10px 18px;border-radius:12px;z-index:60;font-weight:700;transition:transform .25s;box-shadow:0 8px 20px #0004;display:flex;gap:8px;align-items:center;max-width:92vw}
.toast{visibility:hidden}.toast.show{transform:translate(-50%,0);visibility:visible}
.toast a{color:var(--brand-dark-ui)}
/* forms / checkout */
.box{background:var(--card);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--sh)}
.box h2{font-size:17px;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.step{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;display:inline-grid;place-items:center;font-size:14px}
.field{display:block;margin-bottom:12px}
.field>span{display:block;font-size:14px;font-weight:700;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;font-size:16px;background:var(--card);outline:0;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.field .bad,.field input:user-invalid{border-color:var(--red)}
.methods,.regions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.regions{grid-template-columns:repeat(4,1fr)}
@media (max-width:540px){.regions{grid-template-columns:1fr 1fr}}
.method,.region{position:relative;cursor:pointer}
.method input,.region input{position:absolute;opacity:0}
.method span,.region span{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;border:1.5px solid var(--line);border-radius:14px;padding:12px 8px;transition:.15s;height:100%}
.region span{padding:9px 6px}
.method small,.region small{color:var(--muted);font-size:12px}
.region small{color:var(--brand-t2);font-weight:800;font-size:14px}
.method input:checked+span,.region input:checked+span{border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 1px var(--brand)}
.method input:focus-visible+span,.region input:focus-visible+span{outline:2px solid var(--brand);outline-offset:2px}
.pay{display:flex;gap:8px;align-items:center;background:var(--dk-gbg,#f0fdf4);color:var(--dk-gfg,#166534);padding:10px 12px;border-radius:12px;font-size:14px;margin:12px 0;font-weight:600}
.form-error{background:var(--dk-rbg,#fef2f2);color:var(--dk-rfg,#991b1b);padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600}
.notice{background:var(--brand-l);padding:12px;border-radius:12px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none;border:0;padding:0}
.co-lines .line{grid-template-columns:52px 1fr auto}.co-lines .line img{width:52px;height:52px}
.skeleton{height:70px;border-radius:12px;background:linear-gradient(90deg,var(--dk-sbg,#f1f2f4),var(--dk-sbg,#e7e9ec),var(--dk-sbg,#f1f2f4));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.done{text-align:center;background:var(--card);border-radius:var(--r);padding:26px 18px;margin:16px 0 12px;box-shadow:var(--sh)}
.done-icon{width:68px;height:68px;border-radius:50%;background:var(--dk-gbg,#dcfce7);color:var(--green);display:grid;place-items:center;margin:0 auto 10px}
.done-icon svg{width:36px;height:36px;stroke-width:3}
.done h1{font-size:21px;margin-bottom:6px}
.o-lines{list-style:none;padding:0;margin:0 0 8px}
.o-lines li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:center}
.status{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--dk-bbg,#eef2ff);color:var(--dk-bfg,#3730a3)}
.s-new{background:var(--dk-bbg,#dbeafe);color:var(--dk-bfg,#1e40af)}.s-preparing{background:var(--dk-abg,#fef3c7);color:var(--dk-afg,#92400e)}.s-out_for_delivery{background:var(--dk-bbg,#e0e7ff);color:var(--dk-bfg,#3730a3)}.s-delivered{background:var(--dk-gbg,#dcfce7);color:var(--dk-gfg,#166534)}.s-cancelled{background:var(--dk-rbg,#fee2e2);color:var(--dk-rfg,#991b1b)}
.c-pending{background:var(--dk-abg,#fef3c7);color:var(--dk-afg,#92400e)}.c-approved{background:var(--dk-gbg,#dcfce7);color:var(--dk-gfg,#166534)}.c-rejected,.c-disabled{background:var(--dk-rbg,#fee2e2);color:var(--dk-rfg,#991b1b)}
.tabs{display:flex;background:var(--dk-sbg,#e9ebef);border-radius:12px;padding:4px;margin-bottom:12px}
.tabs button{flex:1;border:0;background:none;padding:10px;border-radius:9px;font-weight:700}
.tabs button.on{background:var(--card);box-shadow:var(--sh)}
form.inline{display:inline-block;margin-top:10px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.method span svg{color:var(--brand-t2)}
.step{box-shadow:0 0 0 3px var(--brand-l)}
/* ---- app-like feel ---- */
/* instant pressed feedback (transform/opacity only) */
.btn,.add,.chip,.icon-btn,.cartbar button,.wa-fab,.qty button,.rm,.copt,.slider-dots button,.thumbs button,.tabs button{transition:transform .12s ease,opacity .12s ease,background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:active,.add:active,.icon-btn:active,.cartbar button:active,.qty button:active,.rm:active,.tabs button:active{transform:scale(.95);transition-duration:.05s}
.chip:active,.copt:active{transform:scale(.96);transition-duration:.05s}
.wa-fab:active{transform:scale(.92);transition-duration:.05s}
.card:active{transform:scale(.985);transition-duration:.06s}
.cat-tile:active img,.bundle-img:active img{transform:scale(.94);opacity:.9}
.slide a:active img,.gal img:active{opacity:.92}
.btn.disabled,.btn:disabled{transform:none}
/* client-side navigation: quick fade/slide of <main>, progress bar */
#main.pj-wait{opacity:.55;transition:opacity .15s}
#main.pj-in{animation:pjin .2s ease-out}
@keyframes pjin{from{opacity:0;transform:translateY(8px)}}
.pj-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:var(--brand);transform-origin:right;transform:scaleX(0);opacity:0;pointer-events:none}
.pj-bar.run{opacity:1;transform:scaleX(.8);transition:transform 2.5s cubic-bezier(.1,.6,.2,1),opacity .1s}
.pj-bar.done{opacity:0;transform:scaleX(1);transition:transform .15s,opacity .25s .1s}
/* full page loads (no JS / router fallback): cross-document View Transitions */
@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion:reduce){#main.pj-in,.drawer-panel,.sheet-panel,.drawer-bg,.drawer.closing .drawer-panel,.sheet.closing .sheet-panel{animation:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}html{scroll-behavior:auto}}
/* ---- order success: invoice link ---- */
.inv-link-box h2{display:flex;gap:8px;align-items:center;font-size:17px;margin-bottom:4px}.inv-link-box h2 svg{color:var(--brand-t2)}
.copy-row{display:flex;gap:8px;margin:10px 0}
.copy-row input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13px;background:var(--surface);color:var(--text)}
/* ---- public invoice ---- */
.inv-wrap{max-width:860px;padding-top:14px;padding-bottom:24px}
.inv-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.inv-actions .btn{flex:1 1 auto}
.inv{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:18px;border-top:6px solid var(--brand)}
.inv-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.inv-logo{width:110px;height:auto}
.inv-title{flex:1;min-width:160px}
.inv-title h1{font-size:22px;color:var(--ink)}.inv-title h1 span{color:var(--brand-t2)}
.inv-title p{margin:2px 0}
.inv-status{font-size:13px;font-weight:800;padding:5px 14px;border-radius:999px}
.inv-sec{padding:14px 0;border-bottom:1px solid var(--line)}
.inv h2{font-size:15px;font-weight:800;margin:0 0 10px;color:var(--ink)}
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.inv-box{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px}
.inv-box p{margin:3px 0;display:flex;gap:6px;align-items:flex-start}.inv-box p svg{flex:0 0 auto;width:18px;height:18px;color:var(--brand-t2);margin-top:2px}
.ltr-r{justify-content:flex-end}
.inv-type{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--surface);color:var(--text)}.inv-type.ws{background:var(--inkbg);color:#fff}
/* status tracker */
.trk{display:flex;gap:0;counter-reset:s}
.trk-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;position:relative;font-size:12.5px;font-weight:700;color:var(--muted)}
.trk-step:before{content:"";position:absolute;top:15px;left:50%;width:100%;height:3px;background:var(--line);z-index:0}
.trk-step:first-child:before{display:none}
.trk-step i{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:var(--card);border:2px solid var(--line);color:var(--muted);font-size:13px}
.trk-step i svg{width:16px;height:16px;stroke-width:3}
.trk-step.is-done,.trk-step.is-cur{color:var(--ink)}
.trk-step.is-done:before,.trk-step.is-cur:before{background:var(--brand)}
.trk-step.is-done i{background:var(--brand);border-color:var(--brand);color:#fff}
.trk-step.is-cur i{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 5px var(--brand-l)}
.trk.is-cancelled{opacity:.45;filter:grayscale(1)}
.trk-cancel{display:flex;gap:6px;align-items:center;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--dk-rbg,#fee2e2);color:var(--dk-rfg,#991b1b);font-weight:700;font-size:14px}.trk-cancel svg{width:18px;height:18px}
/* items */
.inv-table{width:100%;border-collapse:collapse;font-size:14px}
.inv-table th{background:var(--brand-l);color:var(--brand-t);font-weight:800;text-align:start;padding:8px;font-size:13px}
.inv-table th:first-child{border-start-start-radius:10px;border-end-start-radius:10px}.inv-table th:last-child{border-start-end-radius:10px;border-end-end-radius:10px}
.inv-table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.inv-table .c-n{width:28px;color:var(--muted)}.inv-table .c-qty{text-align:center}.inv-table .c-unit,.inv-table .c-tot{white-space:nowrap;text-align:end}
.inv-table th.c-qty{text-align:center}.inv-table th.c-unit,.inv-table th.c-tot{text-align:end}
.inv-table .c-name a{text-decoration:none;font-weight:700}.inv-table .c-name{font-weight:700}
.c-sub{display:none;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}
.inv-badge{font-style:normal;font-size:11px;font-weight:800;background:var(--inkbg);color:#fff;padding:1px 8px;border-radius:999px;vertical-align:middle}
.inv-sum{max-width:340px;margin-inline-start:auto;margin-top:10px}
.inv-sum div{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.inv-disc b{color:var(--dk-gfg,#15803d)}
.inv-pays{max-width:340px;margin-inline-start:auto;margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.inv-pays div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}.inv-pays svg{width:16px;height:16px;vertical-align:-3px}
.inv-change{font-weight:800;font-size:1.05em;color:var(--brand-t2)}
.c-unit s,.c-sub s{font-size:.85em;opacity:.7}
.c-nm{display:flex;gap:10px;align-items:flex-start}.c-nm>div{min-width:0}
.inv-th{width:48px;height:48px;border-radius:9px;object-fit:cover;background:var(--card);border:1px solid var(--line);flex:0 0 auto}
.inv-total{font-size:19px;font-weight:800;border-top:2px solid var(--ink);margin-top:6px;padding-top:8px!important}.inv-total b{color:var(--brand-t2)}
.inv-pay{display:flex;gap:8px;align-items:center;font-weight:700;margin:12px 0 0}.inv-pay svg{color:var(--brand-t2)}
.inv-notes{background:var(--bg);border-inline-start:3px solid var(--brand);padding:8px 12px;border-radius:8px;margin:10px 0 0}
.inv-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:14px;align-items:flex-start}
.inv-foot p{margin:2px 0}
.inv-contact{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.inv-contact .social a{background:var(--surface);color:var(--ink)}
.inv-thanks{flex-basis:100%;text-align:center;color:var(--muted);font-size:13px;border-top:1px dashed var(--line);padding-top:10px!important}
@media screen and (max-width:560px){
  .inv{padding:14px}
  .inv-grid{grid-template-columns:1fr}
  .inv-table .c-color,.inv-table .c-unit,.inv-table .c-qty{display:none}
  .c-sub{display:block}
  .inv-contact{align-items:flex-start}
  .trk-step{font-size:11.5px}
  .inv-actions .btn-wa{flex-basis:100%}
}
/* ---- print / save as PDF (A4 and narrow receipt printers) ---- */
@page{margin:12mm}
@media print{
  .bnav,.menu-sheet{display:none!important}body{padding-bottom:0!important}
  html,body{background:#fff!important;color:#000}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none!important;transition:none!important}
  .ticker,.ws-bar,.hdr,.ftr,.wa-fab,.cartbar,.drawer,.sheet,.toast,.pj-bar,.no-print{display:none!important}
  #main{opacity:1!important;transform:none!important}
  .inv-wrap{max-width:none;padding:0;margin:0}
  .inv{box-shadow:none;border-radius:0;padding:0;border-top:4px solid var(--brand)}
  .inv-head{padding-top:8px}
  .inv a{text-decoration:none;color:inherit}
  .inv-grid{grid-template-columns:1fr 1fr}
  .inv-box{background:#fff}
  .inv-table tr,.inv-sum,.inv-foot,.trk{break-inside:avoid}
  .inv-table thead{display:table-header-group}
  .inv-table .c-color,.inv-table .c-unit,.inv-table .c-qty{display:table-cell}
  .c-sub{display:none}
  .inv-sec,.inv-grid{padding:10px 0}
  .inv-th{width:40px;height:40px;border-color:#ddd;break-inside:avoid}
}
@media print and (max-width:110mm){
  @page{margin:4mm}
  body{font-size:11px}
  .inv{border-top-width:3px}
  .inv-logo{width:70px}
  .inv-head{gap:8px}
  .inv-title h1{font-size:16px}
  .inv-grid{grid-template-columns:1fr;gap:6px}
  .inv-box{padding:6px;border-radius:6px}
  .inv-table{font-size:11px}
  .inv-table .c-color,.inv-table .c-unit,.inv-table .c-qty,.inv-table .c-n{display:none}
  .c-sub{display:block;font-size:10px}
  .inv-table td,.inv-table th{padding:4px}
  .inv-th{width:26px;height:26px;border-radius:5px}.c-nm{gap:5px}
  .inv-sum,.inv-pays{max-width:none}
  .inv-total{font-size:14px}
  .trk-step{font-size:9px}.trk-step i{width:22px;height:22px;font-size:10px}.trk-step:before{top:10px}
}
/* ---------------- bottom navigation (phones + tablets) ---------------- */
:root{--bnav-h:0px}
.bnav{display:none}
@media (max-width:1023px){
 :root{--bnav-h:calc(64px + env(safe-area-inset-bottom))}
 body{padding-bottom:var(--bnav-h)}
 .bnav{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--card);border-top:2px solid var(--brand);box-shadow:0 -6px 18px #1114180f;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
 body.menu-open .bnav{z-index:55}
 .bnav-row{display:flex;justify-content:space-around;align-items:stretch;max-width:640px;margin:0 auto;gap:2px}
 .bn{flex:1 1 0;min-width:0;max-width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:50px;padding:4px 2px;border:0;background:none;border-radius:16px;color:var(--dk-t2,#6b7280);text-decoration:none;font:inherit;font-size:11.5px;font-weight:700;line-height:1.1;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color .18s,color .18s,transform .12s ease}
 .bn i{position:relative;display:grid;place-items:center;font-style:normal}
 .bn svg{width:23px;height:23px;stroke-width:1.8}
 .bn span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .bn.on{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(102,62,244,.32)}
 .bn.on svg{stroke-width:2}
 .bn:active{transform:scale(.92);transition-duration:.05s}
 .bn:not(.on):active{background:var(--brand-l);color:var(--brand-t)}
 .bn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
 .bn .cart-count{top:-6px;inset-inline-end:-10px;border:2px solid #fff;height:20px;min-width:20px}
 .bn.on .cart-count{background:var(--card);color:var(--brand-t);border-color:var(--brand)}
 /* the nav replaces the header icons and the floating cart bar on small screens */
 .hdr-actions,.cartbar{display:none!important}
 .wa-fab,body.has-cartbar .wa-fab{bottom:calc(var(--bnav-h) + 14px);width:52px;height:52px}
 .is-pd .wa-fab{bottom:calc(var(--bnav-h) + 82px)}
 .ftr{padding-bottom:84px}
 .menu-sheet .sheet-panel{bottom:var(--bnav-h);border-radius:20px 20px 0 0;padding-bottom:16px;max-height:calc(88vh - var(--bnav-h))}
 .menu-sheet .drawer-bg{bottom:0}
}
@media (max-width:899px){
 .is-pd .pd-sticky{bottom:var(--bnav-h);padding-bottom:10px;z-index:40;box-shadow:0 -4px 16px #00000014}
 .is-pd .pd-sticky:not(.show){pointer-events:none}
}
@media (max-width:719px){
 .hdr-row{grid-template-columns:auto 1fr auto;grid-template-areas:"logo search theme";row-gap:0;gap:8px}
 .hdr-row .theme-btn{grid-area:theme;width:40px;height:40px;padding:0;justify-content:center;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
 .hdr-row .theme-btn span{display:none!important}
 .logo img{height:38px;width:auto}
}
@media (prefers-reduced-motion:reduce){.bn{transition:none}.bn:active{transform:none}}
/* menu sheet */
.mn-acc{background:var(--brand-l);border-radius:16px;padding:12px;margin-bottom:12px}
.mn-user{display:flex;gap:10px;align-items:center}
.mn-user>i{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.mn-user b{display:block;font-size:15px}.mn-user small{color:var(--muted);font-size:12.5px}
.mn-btns{display:flex;gap:8px;margin-top:10px}.mn-btns>*{flex:1}.mn-btns form{margin:0;display:flex}.mn-btns .btn{width:100%;justify-content:center}
.mn-links{display:grid;margin-bottom:6px}
.mn-links a,.mn-sec summary{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:700;cursor:pointer;list-style:none}
.mn-sec summary::-webkit-details-marker{display:none}
.mn-links a svg:first-child,.mn-sec summary svg:first-child{color:var(--brand-t2)}
.mn-links a span,.mn-sec summary span{flex:1}
.mn-links a svg:last-child,.mn-sec summary svg:last-child{width:18px;height:18px;color:#9ca3af}
.mn-sec[open] summary svg:last-child{transform:rotate(-90deg)}
.mn-links a:active,.mn-sec summary:active{background:var(--bg)}
.mn-fees{padding:4px 4px 0}.mn-fees li{border-bottom:1px dashed var(--line)}.mn-fees b{color:var(--brand-t)}
.mn-sec p{display:flex;gap:6px;align-items:center;margin:8px 4px}.mn-sec p svg{width:18px;height:18px}
.mn-contact{display:grid;gap:8px;margin:14px 0 8px}.mn-contact p{display:flex;gap:6px;align-items:center;margin:0}.mn-contact p svg{width:18px;height:18px;color:var(--brand-t2)}
.mn-social a{background:var(--bg);color:var(--ink)}
/* categories page */
.ctiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 18px}
@media (min-width:360px){.ctiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:640px){.ctiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media (min-width:900px){.ctiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1140px){.ctiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ctile{position:relative;display:block;aspect-ratio:1/1;border-radius:18px;overflow:hidden;text-decoration:none;color:#fff;background:var(--ph);box-shadow:var(--sh),0 0 0 1px var(--line);isolation:isolate;transition:transform .12s ease,box-shadow .15s}
.ctile-img,.ctile-img img{position:absolute;inset:0;width:100%;height:100%}
.ctile-img img{object-fit:cover;transition:transform .35s ease}
.ctile:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 38%,rgba(38,18,120,.55) 64%,rgba(28,12,92,.92));pointer-events:none}
.ctile-txt{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:8px 9px 9px;display:flex;flex-direction:column;gap:1px}
.ctile-txt b{font-size:14px;font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 2px #0006}
.ctile-txt small{font-size:11.5px;color:#e4dcff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctile-cnt{display:inline-grid;place-items:center;min-width:22px;height:19px;padding:0 6px;border-radius:10px;background:var(--brand);color:#fff;font-style:normal;font-size:11.5px;font-weight:800;margin-inline-end:2px;box-shadow:0 1px 4px rgba(102,62,244,.5)}
.ctile:before{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:linear-gradient(90deg,#a48bfa,#663ef4);z-index:3}
@media (hover:hover){.ctile:hover{box-shadow:0 0 0 2px var(--brand),0 8px 22px rgba(102,62,244,.25)}.ctile:hover .ctile-img img{transform:scale(1.05)}}
.ctile:active{transform:scale(.95);box-shadow:0 0 0 3px var(--brand),0 2px 8px rgba(102,62,244,.3);transition-duration:.05s}
.ctile:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
@media (min-width:640px){.ctile-txt b{font-size:15px}.ctile-txt{padding:10px 12px 12px}}
@media (prefers-reduced-motion:reduce){.ctile,.ctile-img img{transition:none}.ctile:active{transform:none}}
.ctile-subs{display:none}@media (min-width:640px){.ctile-subs{display:inline}}
.csubs{margin-top:6px}.csub-grp{margin-bottom:10px}
.csub-h{display:inline-flex;align-items:center;gap:4px;font-weight:800;text-decoration:none;margin-bottom:6px;color:var(--ink)}.csub-h svg{width:16px;height:16px;color:var(--brand-t2)}
.subchips .chip small{color:var(--muted);font-weight:700;margin-inline-start:2px}

/* ---------------- theme toggle ---------------- */
.theme-btn i{display:contents;font-style:normal}
.theme-btn{color:var(--ink)}.theme-btn svg{color:var(--brand-t2)}
.theme-btn .th-sun,.theme-btn .th-l-light{display:none}
[data-theme=dark] .theme-btn .th-sun,[data-theme=dark] .theme-btn .th-l-light{display:revert}
[data-theme=dark] .theme-btn .th-moon,[data-theme=dark] .theme-btn .th-l-dark{display:none}
.theme-btn:active svg{transform:rotate(-30deg) scale(.9);transition:transform .15s}
.mn-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mn-theme>span{display:flex;align-items:center;gap:8px}.mn-theme>span svg{color:var(--brand-t2);width:20px;height:20px}
.th-seg{display:flex;background:var(--dk-sbg,#e9ebef);border-radius:12px;padding:3px;gap:2px}
.th-seg button{border:0;background:none;border-radius:9px;padding:6px 10px;font-weight:700;font-size:13px;display:flex;gap:4px;align-items:center;color:var(--muted)}
.th-seg button svg{width:15px;height:15px}
.th-seg button.on{background:var(--card);color:var(--brand-t);box-shadow:var(--sh)}
/* ---------------- dark palette (screen only → print / PDF always light) ---------------- */
@media screen{
:root[data-theme=dark]{color-scheme:dark;--ink:#f4f2fb;--text:#e3e0ec;--ink2:#d2cee0;--bg:#0f0d16;--surface:#1e1b29;--card:#18151f;--line:#2e2a3b;--muted:#a3a0b3;
  --brand-l:#271f48;--brand-b:#43367f;--brand-ring:rgba(164,139,250,.35);--brand-dark-ui:#b9a6ff;--brand-t:#c4b5fd;--brand-t2:#a48bfa;--ph:#221e2d;--inkbg:#09080d;
  --sh:0 1px 2px #0009,0 4px 14px #0006;--card-a:#18151ff0;--red:#fb7185;--green:#4ade80;
  --dk-gbg:#0f2e1d;--dk-gfg:#6ee7a0;--dk-rbg:#3b1520;--dk-rfg:#fda4af;--dk-abg:#36260e;--dk-afg:#fcd34d;--dk-bbg:#1b2246;--dk-bfg:#a5b4fc;--dk-sbg:#24202f;--dk-t2:#a3a0b3;--dk-line:#2e2a3b}
[data-theme=dark] ::selection{background:#5532d8;color:#fff}
[data-theme=dark] .logo img,[data-theme=dark] .inv-logo{filter:invert(1);mix-blend-mode:screen}
[data-theme=dark] .ftr{border-top:1px solid var(--line)}
[data-theme=dark] .btn-dark{background:#ece9f7;color:#15121f}[data-theme=dark] .btn-dark:hover{background:#fff}
[data-theme=dark] .btn-outline:hover{border-color:var(--brand-t2)}
[data-theme=dark] .chip:hover{border-color:#4a4560}
[data-theme=dark] .chip-hot{color:var(--brand-t)}
[data-theme=dark] .cartbar{background:linear-gradient(transparent,var(--bg) 30%)}
[data-theme=dark] .bundle{background:linear-gradient(135deg,#1d1930,#2a2440);box-shadow:0 0 0 1px var(--line)}
[data-theme=dark] .card-img img,[data-theme=dark] .gal img,[data-theme=dark] .line img,[data-theme=dark] .ctile-img img,[data-theme=dark] .inv-th,[data-theme=dark] .bundle-img img,[data-theme=dark] .cat-tile img{filter:brightness(.92)}
[data-theme=dark] .gal,[data-theme=dark] .gal img,[data-theme=dark] .thumbs button,[data-theme=dark] .bundle-img{background:#f4f4f6}
[data-theme=dark] .cat-tile img{border-color:var(--card)}
[data-theme=dark] .drawer-bg,[data-theme=dark] .sheet .drawer-bg{background:#000a}
[data-theme=dark] .inv{border-top-color:var(--brand)}
[data-theme=dark] .wa-fab{box-shadow:0 6px 18px #0008}
[data-theme=dark] .ctile{box-shadow:0 0 0 1px var(--line)}
[data-theme=dark] .bnav{border-top-color:#5532d8;box-shadow:0 -6px 18px #0007}
[data-theme=dark] .bn.on{color:#fff}[data-theme=dark] .bn .cart-count{border-color:var(--card)}
[data-theme=dark] input::placeholder,[data-theme=dark] textarea::placeholder{color:#7d7990}
[data-theme=dark] .field input,[data-theme=dark] .field select,[data-theme=dark] .field textarea{background:var(--surface)}
[data-theme=dark] .ticker{background:#4a2bc4}
}