/* =====================================================
   Storefront styles. Colours come from Admin > Settings > Appearance
   (injected as CSS variables in layouts/store.blade.php).
   ===================================================== */
:root{
  --bg:#F5F4EF; --card:#FFFFFF; --ink:#0F1222; --ink-2:#2A2F45; --muted:#5D6275; --line:#E6E4DC;
  --blue:#2B4EFF; --blue-d:#1F3BD6; --blue-soft:#E8ECFF;
  --coral:#FF6B47; --deal:#D93A12; --lime:#D4F25C; --green:#13804B;
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px; --wrap:1380px;
  --shadow:0 18px 40px -22px rgba(15,18,34,.35);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font-family:inherit;color:inherit;font-size:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:999;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pic{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sec{padding-top:72px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.kicker{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.h2{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,46px);line-height:1.02;letter-spacing:-.03em}
.h2 .hl{background:linear-gradient(transparent 62%, var(--lime) 62%);padding:0 4px}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;color:var(--blue);transition:gap .2s}
.link:hover{gap:10px}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:14px;border:0;font-size:15px;font-weight:800;transition:transform .2s, background .2s, box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-sm{height:42px;padding:0 16px;font-size:14px;border-radius:12px}
.btn-block{width:100%}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 12px 26px -12px rgba(43,78,255,.7)}
.btn-blue:hover{background:var(--blue-d)}
.btn-ink{background:var(--ink);color:#fff}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-coral{background:var(--coral);color:var(--ink)}
.btn-line{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;display:inline-grid;place-items:center;transition:all .2s}
.icon-btn:hover{border-color:var(--ink)}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:700}
.input,.select,.textarea{width:100%;height:50px;border-radius:12px;border:1.5px solid var(--line);background:#fff;padding:0 14px;outline:none;transition:border-color .2s, box-shadow .2s}
.textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.input.is-invalid,.select.is-invalid,.textarea.is-invalid{border-color:var(--deal)}
.error{color:var(--deal);font-size:13px;font-weight:700}
.check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--blue)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* alerts */
.alert{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;font-weight:700;font-size:14px;margin-top:16px}
.alert-success{background:#E3F6EC;color:#0B5E36}
.alert-error{background:#FFE9E3;color:#9B1C00}

/* ================= TOP STRIP ================= */
.strip{background:var(--ink);color:#C9CCDA;font-size:13px;font-weight:600}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:9px;padding-bottom:9px}
.strip b{color:var(--lime)}
.strip nav{display:flex;gap:22px}
.strip nav a:hover{color:#fff}

/* ================= HEADER ================= */
.header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.header.scrolled{box-shadow:0 10px 30px -20px rgba(15,18,34,.4)}
.h-row{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.04em;line-height:1;white-space:nowrap;flex-shrink:0}
.logo i{width:34px;height:34px;border-radius:10px;background:var(--blue);display:grid;place-items:center;color:#fff;font-style:normal;font-size:20px;transform:rotate(-8deg)}
.logo span{color:var(--blue)}
.logo img{height:40px;width:auto}
.cat-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px;border-radius:14px;border:0;background:var(--ink);color:#fff;font-weight:800;font-size:14px;white-space:nowrap;flex-shrink:0}
.cat-btn .chev{transition:transform .25s;width:16px;height:16px}
.cat-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.search{position:relative;flex:1 1 420px;min-width:0;display:flex;align-items:center;height:48px;background:#fff;border:1.5px solid var(--line);border-radius:14px;transition:border-color .2s, box-shadow .2s}
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.search select{height:100%;border:0;border-right:1px solid var(--line);background:#FAFAF7;padding:0 12px;font-size:13px;font-weight:700;outline:none;max-width:150px;border-radius:12px 0 0 12px}
.search input{flex:1;min-width:0;height:100%;border:0;padding:0 14px;font-size:15px;outline:none;background:transparent}
.search button{height:100%;width:56px;border:0;background:var(--blue);color:#fff;display:grid;place-items:center;border-radius:0 12px 12px 0}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;z-index:80;display:none}
.suggest.open{display:block}
.suggest a{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;font-size:14px;font-weight:600}
.suggest a:hover,.suggest a.active{background:var(--bg)}
.suggest a b{white-space:nowrap}
.h-acts{display:flex;align-items:center;gap:6px;margin-left:auto}
.h-act{position:relative;display:flex;align-items:center;gap:14px;height:48px;padding:0 12px;border-radius:14px;border:0;background:transparent;font-size:14px;font-weight:700;white-space:nowrap;flex-shrink:0}
.h-act:hover{background:#fff}
.h-act small{display:block;font-size:11px;font-weight:600;color:var(--muted);line-height:1}
.h-act .txt{line-height:1.15;text-align:left}
.count{position:absolute;top:2px;left:22px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--coral);color:var(--ink);font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg);transition:transform .25s}
.count.bump{transform:scale(1.35)}
.count.hide{display:none}
.menu-btn{display:none}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;max-height:70vh;overflow-y:auto}
.mega.open{display:block;animation:drop .25s ease}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mega .wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;padding-top:20px;padding-bottom:24px}
.mega a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;font-weight:700;font-size:14px}
.mega a:hover{background:var(--bg)}
.mega a small{display:block;color:var(--muted);font-weight:500}
.tile-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--ink);flex:none;overflow:hidden}
.tile-ic img{width:100%;height:100%;object-fit:cover}

/* ================= CATEGORY RAIL ================= */
.rail{display:flex;gap:10px;overflow-x:auto;padding-top:20px;padding-bottom:4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail a{flex:0 0 auto;width:104px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 12px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);text-align:center;font-size:13px;font-weight:700;line-height:1.2;transition:transform .2s, border-color .2s}
.rail a:hover{transform:translateY(-3px);border-color:var(--ink)}
.rail a span{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;overflow:hidden}
.rail a span img{width:100%;height:100%;object-fit:cover}

/* ================= HERO ================= */
.hero{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:16px;padding-top:20px}
.slider{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:480px;background:var(--ink)}
.slide{position:absolute;inset:0;display:flex;align-items:stretch;padding:48px;gap:24px;opacity:0;visibility:hidden;transition:opacity .6s ease, visibility .6s}
.slide.on{opacity:1;visibility:visible}
.slide .s-txt{flex:1 1 55%;display:flex;flex-direction:column;justify-content:center;gap:18px;position:relative;z-index:2}
.slide .s-tag{align-self:flex-start;height:30px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center}
.slide .s-title{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.04em}
.slide p{margin:0;font-size:17px;max-width:36ch;opacity:.85}
.slide .s-art{flex:1 1 45%;display:grid;place-items:center;position:relative}
.slide .blob{width:min(100%,360px);aspect-ratio:1;border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;display:grid;place-items:center;animation:morph 9s ease-in-out infinite;overflow:hidden}
.slide .blob svg{width:52%;height:52%}
.slide .blob img{width:100%;height:100%;object-fit:cover}
@keyframes morph{50%{border-radius:56% 44% 58% 42% / 44% 56% 44% 56%}}
.slide .price-tag{position:absolute;bottom:18%;right:4%;background:#fff;color:var(--ink);border-radius:18px;padding:12px 16px;box-shadow:var(--shadow);font-size:12px;font-weight:700;line-height:1.2}
.slide .price-tag b{display:block;font-family:var(--display);font-size:26px}
.th-dark{background:var(--ink);color:#fff} .th-dark .s-tag{background:var(--lime);color:var(--ink)} .th-dark .blob{background:var(--blue);color:#fff}
.th-blue{background:var(--blue);color:#fff} .th-blue .s-tag{background:#fff;color:var(--blue)} .th-blue .blob{background:var(--lime);color:var(--ink)}
.th-lime{background:var(--lime);color:var(--ink)} .th-lime .s-tag{background:var(--ink);color:#fff} .th-lime .blob{background:var(--coral);color:var(--ink)}
.th-coral{background:var(--coral);color:var(--ink)} .th-coral .s-tag{background:var(--ink);color:#fff} .th-coral .blob{background:#fff;color:var(--ink)}
.dots{position:absolute;left:48px;bottom:28px;display:flex;gap:8px;z-index:3}
.dots button{width:10px;height:10px;border-radius:999px;border:0;background:rgba(255,255,255,.45);padding:0;transition:width .3s, background .3s}
.dots button.on{width:32px;background:#fff}
.slider.dark-dots .dots button{background:rgba(15,18,34,.3)} .slider.dark-dots .dots button.on{background:var(--ink)}
.arrows{position:absolute;right:24px;bottom:22px;display:flex;gap:8px;z-index:3}
.arrows button{width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center}

.deal-card{border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:14px}
.deal-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.deal-top b{font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.timer{display:flex;gap:6px}
.timer span{min-width:40px;height:40px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:18px}
.deal-img{flex:1;min-height:180px;border-radius:var(--r-lg);display:grid;place-items:center;color:var(--ink);position:relative;overflow:hidden}
.deal-img svg{width:44%;height:auto;max-height:150px}
.deal-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.deal-img .off{position:absolute;top:12px;left:12px;height:28px;padding:0 10px;border-radius:999px;background:var(--deal);color:#fff;font-size:12px;font-weight:800;display:inline-flex;align-items:center;z-index:1}
.deal-name{margin:0;font-weight:700;font-size:16px;line-height:1.3}
.bar{height:8px;border-radius:999px;background:var(--bg);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--coral),var(--deal))}
.bar-txt{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--muted)}

/* ================= TRUST ================= */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.trust > div{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.trust span{width:44px;height:44px;border-radius:12px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.trust b{display:block;font-size:14px;line-height:1.2}
.trust small{font-size:12.5px;color:var(--muted)}

/* ================= BENTO ================= */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:200px;gap:16px}
.bt{position:relative;border-radius:var(--r-xl);padding:24px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;transition:transform .25s}
.bt:hover{transform:translateY(-4px)}
.bt:hover .bt-art{transform:rotate(-6deg) scale(1.06)}
.bt h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1;position:relative;z-index:1}
.bt p{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--ink-2);position:relative;z-index:1;max-width:24ch}
.bt .go{position:relative;z-index:1;align-self:flex-start;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center}
.bt-art{position:absolute;right:-6%;bottom:-8%;width:56%;max-width:220px;color:var(--ink);opacity:.9;transition:transform .4s ease}
img.bt-art{right:0;bottom:0;width:50%;height:100%;object-fit:cover;opacity:1;max-width:none}
.bt.big{grid-column:span 2;grid-row:span 2}
.bt.big h3{font-size:44px}
.bt.big .bt-art{width:62%;max-width:360px;right:4%;bottom:8%}
.bt.wide{grid-column:span 2}
.bt.wide .bt-art{width:34%}

/* ================= FLASH ================= */
.flash{border-radius:var(--r-xl);background:var(--ink);color:#fff;padding:32px}
.flash .h2{color:#fff}
.flash .kicker{color:var(--lime)}
.flash-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.flash-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.flash-tools .timer span{background:var(--lime);color:var(--ink)}
.flash-tools .icon-btn{background:transparent;border-color:#3A3F57;color:#fff}
.flash-tools .icon-btn:hover{border-color:#fff}
.scroller{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:4px;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.fcard{flex:0 0 240px;scroll-snap-align:start;background:#1B1F33;border-radius:var(--r-lg);padding:12px;display:flex;flex-direction:column;gap:10px}
.fcard .fimg{aspect-ratio:1;border-radius:var(--r-md);display:grid;place-items:center;color:var(--ink);position:relative;overflow:hidden}
.fcard .fimg svg{width:48%}
.fcard .fimg img{width:100%;height:100%;object-fit:cover}
.fcard .off{position:absolute;top:10px;left:10px;height:26px;padding:0 10px;border-radius:999px;background:var(--coral);color:var(--ink);font-size:12px;font-weight:800;display:inline-flex;align-items:center}
.fcard h3{font-size:14px;font-weight:700;line-height:1.3;min-height:36px}
.fcard .pr{display:flex;align-items:baseline;gap:8px}
.fcard .pr b{font-size:18px;font-family:var(--display)}
.fcard .pr s{font-size:13px;color:#9A9FB5}
.fcard .bar{background:#2E3350}
.fcard .bar-txt{color:#9A9FB5}

/* ================= PRODUCT CARD ================= */
.tabs{display:flex;gap:6px;padding:5px;border-radius:14px;background:#fff;border:1px solid var(--line);overflow-x:auto;max-width:100%}
.tab{height:40px;padding:0 16px;border-radius:10px;border:0;background:transparent;font-size:14px;font-weight:700;color:var(--muted);transition:all .2s;white-space:nowrap;flex:0 0 auto}
.tab.on,.tab[aria-selected="true"]{background:var(--ink);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;transition:transform .25s, box-shadow .25s, border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.card .img{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);display:grid;place-items:center;color:var(--ink);overflow:hidden}
.card .img svg.pic{width:46%;transition:transform .45s ease}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.card:hover .img svg.pic{transform:scale(1.1) rotate(-4deg)}
.card:hover .img img{transform:scale(1.05)}
.card .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.badge{position:absolute;top:10px;left:10px;height:26px;padding:0 10px;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.02em;display:inline-flex;align-items:center;z-index:2}
.b-best{background:var(--ink);color:#fff} .b-new{background:var(--lime);color:var(--ink)} .b-hot{background:var(--deal);color:#fff} .b-out{background:#fff;color:var(--deal);border:1px solid var(--deal)}
.wish{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;border-radius:12px;background:transparent;display:grid;place-items:center;z-index:3}
.wish span{width:34px;height:34px;border-radius:10px;background:#fff;display:grid;place-items:center;transition:transform .2s}
.wish:hover span{transform:scale(1.1)}
.wish svg{width:18px;height:18px}
.wish.on{color:var(--deal)} .wish.on svg{fill:var(--deal)}
.card .body{padding:12px 6px 4px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .cat{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:15px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stars{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.stars em{font-style:normal;height:22px;padding:0 7px;border-radius:6px;background:var(--green);color:#fff;display:inline-flex;align-items:center;gap:3px;font-size:12px}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:auto}
.price b{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em}
.price s{font-size:13px;color:var(--muted)}
.price i{font-style:normal;font-size:13px;font-weight:800;color:var(--green)}
.add{position:relative;z-index:2;margin-top:10px;height:44px;border-radius:12px;border:1.5px solid var(--ink);background:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;width:100%}
.add:hover{background:var(--ink);color:#fff}
.add.done{background:var(--green);border-color:var(--green);color:#fff}
.add:disabled{border-color:var(--line);color:var(--muted);background:var(--bg)}
.center{text-align:center;margin-top:32px}
.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;background:#fff;border:1px dashed var(--line);border-radius:var(--r-lg)}
.empty-state h2{font-family:var(--display);font-size:26px;margin-bottom:8px}

/* ================= PROMO / BRANDS / NEWS ================= */
.promo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
.pm{border-radius:var(--r-xl);padding:40px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.pm h3{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:-.03em;max-width:14ch;position:relative;z-index:1}
.pm p{margin:10px 0 0;max-width:36ch;position:relative;z-index:1}
.pm .btn{align-self:flex-start;position:relative;z-index:1}
.pm-art{position:absolute;right:4%;bottom:6%;width:34%;max-width:260px;opacity:.95}
img.pm-art{right:0;bottom:0;height:100%;width:45%;object-fit:cover;max-width:none}
.pm.th-blue .pm-art{color:#fff}
.pm.th-dark .pm-art{color:var(--lime)}
.pm .ring{position:absolute;width:420px;height:420px;border-radius:50%;border:2px dashed rgba(255,255,255,.25);right:-120px;top:-120px}
.brands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.brands a{height:84px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:#6E7286;transition:all .2s;padding:12px}
.brands a img{max-height:48px;width:auto}
.brands a:hover{color:var(--ink);border-color:var(--ink)}
.news{border-radius:var(--r-xl);background:var(--lime);padding:48px;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.news h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4vw,52px);line-height:.98;letter-spacing:-.04em;max-width:14ch}
.news p{margin:12px 0 0;font-weight:600;color:var(--ink-2);max-width:40ch}
.news form{flex:1 1 380px;max-width:520px;display:flex;flex-wrap:wrap;gap:10px}
.news input{flex:1 1 240px;height:56px;border-radius:14px;border:1.5px solid var(--ink);background:#fff;padding:0 18px;font-size:15px;outline:none}
.news .msg{flex-basis:100%;font-size:14px;font-weight:700;min-height:20px}

/* ================= BREADCRUMB / LISTING ================= */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:20px;font-size:13px;font-weight:600;color:var(--muted)}
.crumbs a:hover{color:var(--blue)}
.crumbs span[aria-current]{color:var(--ink)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:20px}
.page-head h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;line-height:1.05}
.page-head p{margin:8px 0 0;color:var(--muted);max-width:70ch}
.subcats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.subcats a{height:38px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;font-size:13px;font-weight:700}
.subcats a:hover{border-color:var(--ink)}
.listing{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;align-items:start}
.filters{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 120px);overflow-y:auto}
.filters h2{font-family:var(--display);font-size:20px;display:flex;justify-content:space-between;align-items:center}
.filters h3{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.filters .opts{display:flex;flex-direction:column;gap:10px}
.price-in{display:flex;gap:8px;align-items:center}
.price-in .input{height:42px}
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.toolbar .select{height:44px;width:auto;min-width:200px}
.filter-toggle{display:none}
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:32px}
.pagination a,.pagination span{min-width:44px;height:44px;padding:0 12px;border-radius:12px;background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.pagination a:hover{border-color:var(--ink)}
.pagination .on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination .off{color:#B0B3C0}

/* ================= PRODUCT PAGE ================= */
.pdp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start;padding-top:8px}
.gallery{position:sticky;top:96px;display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px}
.thumbs{display:flex;flex-direction:column;gap:10px}
.thumbs button{width:80px;height:80px;border-radius:14px;border:2px solid transparent;padding:0;overflow:hidden;background:#fff;display:grid;place-items:center}
.thumbs button.on{border-color:var(--ink)}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.main-img{aspect-ratio:1/1;border-radius:var(--r-xl);display:grid;place-items:center;color:var(--ink);overflow:hidden;position:relative}
.main-img svg{width:46%}
.main-img img{width:100%;height:100%;object-fit:cover}
.gallery.single{grid-template-columns:1fr}
.pinfo{display:flex;flex-direction:column;gap:16px}
.pinfo .brand-link{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.pinfo h1{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1.08}
.pinfo .price b{font-size:36px}
.pinfo .tax{font-size:13px;color:var(--muted);margin-top:-8px}
.stock{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px}
.stock i{width:10px;height:10px;border-radius:50%;background:var(--green)}
.stock.low{color:var(--deal)} .stock.low i{background:var(--coral)}
.stock.out{color:var(--deal)} .stock.out i{background:var(--deal)}
.buy{display:flex;flex-wrap:wrap;gap:10px}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;height:52px;background:#fff}
.qty button{width:44px;height:100%;border:0;background:transparent;font-size:18px;font-weight:700}
.qty input,.qty span{width:40px;text-align:center;border:0;font-weight:800;font-size:16px;background:transparent;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy .btn{flex:1 1 180px}
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.perks div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;gap:10px;align-items:center;font-size:13px;font-weight:700;line-height:1.25}
.perks span{color:var(--blue)}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.box h2{font-family:var(--display);font-size:24px;letter-spacing:-.02em;margin-bottom:14px}
.specs{width:100%;border-collapse:collapse;font-size:14px}
.specs th,.specs td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.specs th{width:40%;color:var(--muted);font-weight:700}
.prose{font-size:15px;line-height:1.7;color:var(--ink-2)}
.prose h2{font-size:20px;margin:18px 0 8px;font-family:var(--display)}
.prose ul{padding-left:20px}
.prose a{color:var(--blue);text-decoration:underline}
.pdp-sections{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:40px}
.reviews-sum{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.reviews-sum .big{font-family:var(--display);font-size:52px;font-weight:800;line-height:1}
.dist{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700}
.dist div{display:grid;grid-template-columns:28px 1fr 32px;gap:8px;align-items:center}
.dist .bar i{background:var(--green)}
.review{padding:16px 0;border-top:1px solid var(--line)}
.review header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:6px}
.review h3{font-size:15px}
.review p{margin:4px 0 0;color:var(--ink-2);font-size:14px}
.review small{color:var(--muted);font-size:12px;font-weight:600}
.rate-pick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.rate-pick input{position:absolute;opacity:0;width:1px;height:1px}
.rate-pick label{font-size:30px;line-height:1;color:#D5D6DD;cursor:pointer;padding:2px}
.rate-pick input:checked ~ label,.rate-pick label:hover,.rate-pick label:hover ~ label{color:#F5A524}
.rate-pick input:focus-visible + label{outline:3px solid var(--blue);border-radius:6px}

/* ================= CART / CHECKOUT ================= */
.two-col{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.summary{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px}
.sum-row{display:flex;justify-content:space-between;font-size:15px;font-weight:600}
.sum-row.total{font-size:18px;font-weight:800;padding-top:12px;border-top:1px solid var(--line)}
.sum-row.total b{font-family:var(--display);font-size:26px}
.sum-row .save{color:var(--green)}
.line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
.line:last-child{border-bottom:0}
.line .li-img{width:96px;height:96px;border-radius:14px;display:grid;place-items:center;overflow:hidden;color:var(--ink)}
.line .li-img svg{width:52%}
.line .li-img img{width:100%;height:100%;object-fit:cover}
.line h3{font-size:15px;font-weight:700;line-height:1.35}
.line .li-acts{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap}
.line .qty{height:40px}
.line .qty button{width:36px}
.rm{border:0;background:none;color:var(--muted);font-size:13px;font-weight:700;text-decoration:underline;padding:6px 0}
.coupon-form{display:flex;gap:8px}
.coupon-form .input{height:46px;text-transform:uppercase}
.coupon-chip{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:12px;background:#E3F6EC;color:#0B5E36;font-weight:800;font-size:14px}
.pay-opt{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer}
.pay-opt:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.pay-opt input{margin-top:3px;accent-color:var(--blue);width:18px;height:18px}
.pay-opt small{display:block;color:var(--muted);font-weight:500}
.mini-line{display:flex;gap:12px;align-items:center;font-size:14px}
.mini-line .li-img{width:56px;height:56px;border-radius:12px;flex:none;display:grid;place-items:center;overflow:hidden}
.mini-line .li-img svg{width:55%}
.mini-line .li-img img{width:100%;height:100%;object-fit:cover}
.mini-line div{flex:1;min-width:0}
.mini-line p{margin:0;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-line small{color:var(--muted);font-weight:600}
.success-hero{text-align:center;padding:40px 20px}
.success-hero .tick{width:80px;height:80px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin:0 auto 16px;font-size:36px;font-weight:800}
.success-hero h1{font-family:var(--display);font-size:clamp(30px,4vw,48px);letter-spacing:-.03em}

/* ================= AUTH / ACCOUNT / PAGE ================= */
.auth{max-width:460px;margin:40px auto 0}
.auth h1{font-family:var(--display);font-size:34px;letter-spacing:-.03em;margin-bottom:6px}
.auth form{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.account{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start;padding-top:24px}
.acc-nav{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px;display:flex;flex-direction:column;gap:2px}
.acc-nav a,.acc-nav button{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;font-weight:700;font-size:14px;border:0;background:none;text-align:left;width:100%}
.acc-nav a:hover,.acc-nav button:hover{background:var(--bg)}
.acc-nav a.on{background:var(--ink);color:#fff}
.table-wrap{position:relative;overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.table th,.table td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left}
.table th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.status{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:800}
.st-pending{background:#FFF3D6;color:#7A4B00} .st-confirmed{background:var(--blue-soft);color:var(--blue-d)} .st-shipped{background:#F1EAFE;color:#5B2BA8} .st-delivered{background:#E3F6EC;color:#0B5E36} .st-cancelled{background:#FFE9E3;color:#9B1C00}
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 4px}
.track div{text-align:center;font-size:12px;font-weight:800;color:var(--muted)}
.track div::before{content:"";display:block;height:6px;border-radius:999px;background:var(--line);margin-bottom:8px}
.track div.done{color:var(--ink)} .track div.done::before{background:var(--green)}
.static-page{max-width:860px;margin:0 auto}

/* ================= FOOTER ================= */
.footer{margin-top:72px;background:var(--ink);color:#B7BBCC}
.f-grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:40px;padding-top:64px;padding-bottom:40px}
.f-grid .logo{color:#fff}
.f-grid .logo span{color:var(--lime)}
.f-about p{margin:16px 0 20px;font-size:14px;max-width:32ch}
.f-about address{font-style:normal;font-size:13px;line-height:1.7;margin-bottom:16px}
.socials{display:flex;gap:8px}
.socials a{width:40px;height:40px;border-radius:10px;border:1px solid #2E3350;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.socials a:hover{background:#fff;color:var(--ink)}
.f-col{display:flex;flex-direction:column;gap:10px;font-size:14px}
.f-col h2{margin:0 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.f-col a:hover{color:#fff}
.f-bot{border-top:1px solid #23283F;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;padding-bottom:20px;font-size:13px}
.pay{display:flex;gap:6px;flex-wrap:wrap}
.pay span{height:28px;padding:0 10px;border-radius:6px;background:#1B1F33;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center}

/* ================= DRAWER / TOAST / MOBILE BAR ================= */
.overlay{position:fixed;inset:0;background:rgba(15,18,34,.5);z-index:90;opacity:0;visibility:hidden;transition:all .3s}
.overlay.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(100%,420px);background:#fff;z-index:100;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;visibility:hidden}
.drawer.on{transform:none;visibility:visible}
.d-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.d-head h2{font-family:var(--display);font-size:24px;letter-spacing:-.02em}
.ship{padding:16px 22px;background:var(--bg);font-size:13px;font-weight:700}
.ship .bar{margin-top:8px;background:#fff}
.ship .bar i{background:linear-gradient(90deg,var(--blue),#6C86FF)}
.d-items{flex:1;overflow-y:auto;padding:8px 22px}
.ci{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.ci .ci-img{flex:0 0 76px;height:76px;border-radius:14px;display:grid;place-items:center;overflow:hidden;color:var(--ink)}
.ci .ci-img svg{width:52%}
.ci .ci-img img{width:100%;height:100%;object-fit:cover}
.ci .ci-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ci h3{font-size:14px;font-weight:700;line-height:1.3}
.ci-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ci .qty{height:36px;border-width:1px}
.ci .qty button{width:34px}
.empty{padding:48px 0;text-align:center;color:var(--muted);font-weight:600}
.d-foot{padding:18px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.d-foot .tot{display:flex;justify-content:space-between;font-size:15px;font-weight:700}
.d-foot .tot b{font-family:var(--display);font-size:24px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:#fff;padding:14px 20px;border-radius:14px;font-size:14px;font-weight:700;z-index:200;transition:all .3s;pointer-events:none;display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast i{width:22px;height:22px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-style:normal;font-size:12px;flex:none}
.toast.err i{background:var(--coral)}
.mbar{display:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1320px){
  .h-act.acct .txt{display:none}
  .h-row{gap:12px}
  .search select{display:none}
}
@media (max-width:1200px){
  .cat-btn .lbl,.cat-btn .chev{display:none}
  .cat-btn{width:48px;padding:0;justify-content:center}
  .h-act .txt{display:none}
  .h-act{gap:0;padding:0 10px}
}
@media (max-width:1100px){
  .hero{grid-template-columns:1fr}
  .deal-card{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .deal-top{grid-column:1/-1}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp,.pdp-sections,.two-col{grid-template-columns:1fr}
  .gallery,.summary{position:static}
}
@media (max-width:900px){
  .strip nav{display:none}
  .h-row{flex-wrap:wrap;gap:10px}
  .menu-btn{display:inline-grid}
  .logo{font-size:24px} .logo i{width:30px;height:30px;font-size:17px}
  .cat-btn{display:none}
  .search{order:5;flex:1 1 100%;height:46px}
  .h-act.acct{display:none}
  .h-act{padding:0 8px}
  .slider{min-height:640px}
  .slide{flex-direction:column;padding:28px;gap:8px}
  .slide .s-txt{flex:0 0 auto}
  .slide .s-art{flex:1}
  .slide .blob{width:190px}
  .slide .s-title{font-size:38px}
  .slide p{font-size:15px}
  .slide .price-tag{bottom:6%;right:2%}
  .dots{left:28px}
  .arrows{display:none}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento{grid-auto-rows:170px;gap:12px}
  .bt{padding:18px}
  .bt h3{font-size:21px}
  .bt.big h3{font-size:32px}
  .promo{grid-template-columns:1fr}
  .pm{padding:28px;min-height:260px}
  .brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .news{padding:28px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{padding:8px}
  .card h3{font-size:14px}
  .price b{font-size:19px}
  .flash{padding:22px;border-radius:var(--r-lg)}
  .fcard{flex-basis:200px}
  .sec{padding-top:56px}
  .listing{grid-template-columns:1fr}
  .filter-toggle{display:inline-flex}
  .filters{position:fixed;top:0;left:0;bottom:0;width:min(88vw,340px);z-index:100;border-radius:0;max-height:none;transform:translateX(-100%);transition:transform .3s;visibility:hidden}
  .filters.on{transform:none;visibility:visible}
  .gallery{grid-template-columns:1fr}
  .thumbs{flex-direction:row;order:2;overflow-x:auto}
  .thumbs button{flex:0 0 64px;width:64px;height:64px}
  .perks{grid-template-columns:1fr}
  .account{grid-template-columns:1fr}
  .acc-nav{flex-direction:row;overflow-x:auto}
  .acc-nav a,.acc-nav button{white-space:nowrap;width:auto}
  body{padding-bottom:66px}
  .mbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:64px;background:#fff;border-top:1px solid var(--line);z-index:70}
  .mbar a,.mbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:800;color:var(--muted);background:none;border:0}
  .mbar .on{color:var(--blue)}
  .mbar .count{top:6px;left:calc(50% + 4px)}
  .toast{bottom:80px}
}
@media (max-width:520px){
  .wrap{padding-left:16px;padding-right:16px}
  .deal-card{grid-template-columns:1fr}
  .trust > div{padding:12px;gap:10px}
  .trust span{width:38px;height:38px}
  .bt p{display:none}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-about{grid-column:1/-1}
  .grid-2{grid-template-columns:1fr}
  .line{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .line .li-img{width:72px;height:72px}
  .line > .li-total{grid-column:2}
  .box{padding:18px}
  .toolbar .select{min-width:0;flex:1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* sponsored products */
.sp-tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:4px;background:#EEF0F5;color:#4A4F63;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-right:4px}
.sp-block{margin-bottom:24px;padding-bottom:24px;border-bottom:1px dashed var(--line)}

/* ---------- Delivery check, order tracking ---------- */
.deliver{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}
.deliver label{font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px}
.deliver label .ico{color:var(--blue)}
.deliver-row{display:flex;gap:8px}
.deliver-row .input{flex:1;min-width:0;height:44px}
.deliver-msg{margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.deliver-msg.ok{color:#0B5E36} .deliver-msg.bad{color:#9B1C00}
.st-packed{background:#E6F4FF;color:#0B4A7A} .st-out_for_delivery{background:#FFF0DB;color:#8A4B00} .st-returned{background:#EEE;color:#444}
.track.six{grid-template-columns:repeat(6,1fr)}
.od-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.od-actions{display:flex;gap:8px;flex-wrap:wrap}
.od-banner{background:var(--blue-soft);border-radius:12px;padding:12px 14px;margin:12px 0 4px;font-size:14px}
.od-banner.bad{background:#FFE9E3;color:#7A1600}
.od-banner:empty{display:none}
.od-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;margin-top:16px}
.od-h{font-size:16px;margin:18px 0 8px}
.od-grid > div > .od-h:first-child,.od-grid > div > div > .od-h:first-child{margin-top:0}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:14px}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px #fff}
.timeline li.bad::before{background:#C2410C}
.timeline b{display:block;font-size:14px}
.timeline time{font-size:12px;color:var(--muted)}
.timeline p{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.od-cancel summary{list-style:none;cursor:pointer;display:inline-flex}
.od-cancel summary::-webkit-details-marker{display:none}
@media (max-width:760px){
  .od-grid{grid-template-columns:1fr}
  .track.six{grid-template-columns:repeat(3,1fr);row-gap:12px}
  .deliver-row .btn{padding:0 14px}
}
.btn-danger{background:#C2410C;color:#fff}
.btn-danger:hover{background:#9A3412}
.policy-note{background:#FFF6E0;border:1px solid #F5D58A;color:#6B4400;border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:12px;line-height:1.5}
.policy-note.bad{background:#FFE9E3;border-color:#F5B5A3;color:#7A1600}

/* ---------- Image magnifier ---------- */
.main-img.zoomable{cursor:zoom-in}
.zoom-lens{position:absolute;left:0;top:0;border:2px solid rgba(255,255,255,.95);background:rgba(255,255,255,.25);box-shadow:0 0 0 9999px rgba(15,18,34,.18);border-radius:10px;pointer-events:none;opacity:0;transition:opacity .15s}
.main-img.zooming .zoom-lens{opacity:1}
.zoom-open{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-size:12.5px;font-weight:800;box-shadow:0 6px 20px -8px rgba(0,0,0,.35);cursor:pointer;transition:opacity .2s}
.zoom-open .ico{width:16px;height:16px}
.main-img.zooming .zoom-open{opacity:0}
.zoom-hint-touch{display:none}
.zoom-pane{position:absolute;top:0;left:calc(100% + 24px);width:min(560px,calc(100vw - 100% - 80px));aspect-ratio:1/1;border-radius:var(--r-xl);background-color:#fff;background-repeat:no-repeat;border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(15,18,34,.45);z-index:30;opacity:0;visibility:hidden;transition:opacity .15s}
.zoom-pane.on{opacity:1;visibility:visible}
.lb{position:fixed;inset:0;z-index:1000;background:#0B0D18;display:flex;flex-direction:column;color:#fff}
.lb[hidden]{display:none!important}
.lb-top{display:flex;align-items:center;gap:16px;padding:14px 18px;font-weight:700;font-size:14px}
.lb-tip{flex:1;text-align:center;opacity:.7;font-weight:500;font-size:13px}
.lb-x{width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-stage{flex:1;position:relative;overflow:hidden;display:grid;place-items:center;touch-action:none;cursor:zoom-in;user-select:none}
.lb-stage.zoomed{cursor:grab}
.lb-stage img{max-width:min(92vw,1100px);max-height:calc(100vh - 110px);object-fit:contain;transform-origin:center center;transition:transform .08s linear;will-change:transform}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-nav.prev{left:18px} .lb-nav.next{right:18px}
.lb-x:focus-visible,.lb-nav:focus-visible,.zoom-open:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:960px), (hover:none){
  .zoom-pane,.zoom-lens{display:none}
  .zoom-hint{display:none} .zoom-hint-touch{display:inline}
  .main-img.zoomable{cursor:pointer}
}
@media (max-width:760px){ .lb-tip{display:none} .lb-nav{width:44px;height:44px} .lb-nav.prev{left:8px} .lb-nav.next{right:8px} }
.li-var{margin:2px 0 0;font-size:13px;color:var(--muted);font-weight:600}
.ci-var{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:-2px 0 4px}

/* ---------- colour / size picker ---------- */
.highlights{margin:0;padding-left:20px;color:var(--ink-2);font-size:14.5px;display:grid;gap:4px}
.vpick{display:grid;gap:14px;flex-basis:100%;width:100%}
.vopt{border:0;margin:0;padding:0;min-width:0}
.vopt legend{font-size:14px;color:var(--muted);font-weight:700;margin-bottom:8px;padding:0}
.vopt legend b{color:var(--ink)}
.vvals{display:flex;flex-wrap:wrap;gap:8px}
.vval{min-width:46px;min-height:40px;padding:6px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--card,#fff);font:inherit;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;position:relative}
.vval:hover{border-color:var(--ink-2)}
.vval.on{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 30%,transparent)}
.vval.na{color:var(--muted);border-style:dashed;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.04) 6px 7px)}
.vval.swatch{min-width:0;width:40px;height:40px;padding:4px;border-radius:50%}
.vval.swatch i{display:block;width:100%;height:100%;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.vval.swatch.na::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;background:var(--deal);transform:rotate(-45deg)}
.line-var{display:block;color:var(--muted);font-size:12.5px;font-weight:600}
.card .swatches{display:flex;gap:4px;margin-top:4px}
.card .swatches i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.card .swatches small{font-size:11.5px;color:var(--muted);font-weight:700}
.item-opts{color:var(--muted);font-size:12.5px;font-weight:600}
.asorder summary{cursor:pointer;color:var(--blue);font-size:13px;font-weight:700}
.asorder .specs{font-size:13px;margin-top:6px}
a.add{text-decoration:none;color:var(--ink)}
.oi{display:flex;gap:12px;align-items:flex-start;min-width:0}
.oi-img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:#f3f4f6}
.oi-body{display:grid;gap:2px;min-width:0}
.oi-desc{font-size:13px;margin-top:6px}