/* ==========================================================================
   Royal Mobile — Storefront styles
   Light catalogue · dark cinematic hero · orange crown accent
   ========================================================================== */
:root{
  --bg:#f4f4f6; --surface:#fff; --surface-2:#fafafb;
  --ink:#0c0c10; --ink-2:#33333c; --muted:#6c6c78; --line:rgba(12,12,16,.08); --line-2:rgba(12,12,16,.14);
  --dark:#09090c; --dark-2:#121218; --dark-3:#1b1b23; --dline:rgba(255,255,255,.09);
  --accent:#ff6a00; --accent-2:#ffa62b; --accent-3:#ff2d55; --accent-ink:#c24a00;
  --grad:linear-gradient(115deg,#ffb347 0%,#ff6a00 42%,#ff2d55 100%);
  --ok:#14a44d; --warn:#f5a524; --bad:#e5484d;
  --r-sm:12px; --r:20px; --r-lg:28px;
  --sh-1:0 1px 2px rgba(10,10,20,.05),0 2px 8px rgba(10,10,20,.04);
  --sh-2:0 10px 30px -12px rgba(10,10,20,.18),0 4px 12px -6px rgba(10,10,20,.08);
  --sh-3:0 30px 60px -20px rgba(10,10,20,.35);
  --fd:'Unbounded',system-ui,sans-serif; --fb:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --wrap:1320px; --hdr:72px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--fb);font-size:16px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.12;letter-spacing:-.02em}
h1,h2{font-family:var(--fd);font-weight:700;letter-spacing:-.035em}
p{margin:0 0 1em}
.ic{flex:none;display:inline-block;vertical-align:middle}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:8px 14px;z-index:999}
.skip:focus{left:8px}
.muted{color:var(--muted)}
.sec--dark .muted{color:rgba(255,255,255,.55)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ───────── Buttons ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s,background .2s,color .2s;position:relative;isolation:isolate}
.btn:active{transform:scale(.97)}
.btn--sm{height:38px;padding:0 16px;font-size:14px}
.btn--lg{height:56px;padding:0 28px;font-size:16px}
.btn--block{width:100%}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 10px 24px -8px rgba(255,106,0,.6)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(255,80,0,.7)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#26262e}
.btn--light{background:#fff;color:var(--ink)}
.btn--ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--glass{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(10px)}
.btn--glass:hover{background:rgba(255,255,255,.16)}
.btn--wa{background:#25d366;color:#04310f}
.btn--wa:hover{background:#2ee372}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;transition:background .2s}
.icon-btn:hover{background:rgba(0,0,0,.06)}
.icon-btn--glass{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.icon-btn--glass:hover{background:rgba(255,255,255,.18)}
.badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.badge.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.5)}}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--accent-ink)}
.link-arrow:hover .ic{transform:translateX(3px)}
.link-arrow .ic{transition:transform .2s}

/* ───────── News ticker ───────── */
.ticker{position:relative;z-index:60;display:flex;align-items:center;height:40px;background:var(--dark);color:#eaeaf0;font-size:13px;font-weight:600;overflow:hidden;border-bottom:1px solid var(--dline)}
.ticker__label{flex:none;display:flex;align-items:center;gap:8px;height:100%;padding:0 16px;background:var(--grad);color:#fff;font-family:var(--fd);font-size:11px;letter-spacing:.12em;position:relative;z-index:2}
.ticker__label::after{content:"";position:absolute;right:-14px;top:0;border-left:14px solid #ff4a2a;border-top:20px solid transparent;border-bottom:20px solid transparent}
.ticker__viewport{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.ticker__track{display:flex;width:max-content;animation:marq var(--speed,45s) linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__group{display:flex;align-items:center;flex:none}
.ticker__item{display:inline-flex;align-items:center;gap:8px;padding:0 26px;white-space:nowrap;opacity:.9;transition:opacity .2s,color .2s;position:relative}
.ticker__item::after{content:"";position:absolute;right:0;top:50%;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.25);transform:translateY(-50%)}
.ticker__item:hover{opacity:1;color:var(--accent-2)}
.ticker__cat{color:var(--accent-2)}
.ticker__cat b{font-size:11px;background:rgba(255,166,43,.15);color:var(--accent-2);padding:1px 7px;border-radius:999px}
.ticker__ico{font-size:14px}
@keyframes marq{to{transform:translateX(-50%)}}
.pulse{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ───────── Header ───────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.hdr.is-scrolled{box-shadow:0 8px 30px -18px rgba(0,0,0,.25)}
.hdr__in{display:flex;align-items:center;gap:18px;height:var(--hdr)}
.hdr__burger{display:none}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo img{height:40px;width:auto}
.logo__txt{display:flex;flex-direction:column;line-height:1;font-family:var(--fd)}
.logo__txt b{font-size:17px;letter-spacing:.06em}
.logo__txt i{font-style:normal;font-size:9.5px;letter-spacing:.42em;color:var(--accent)}
.logo--light .logo__txt b{color:#fff}
.logo--light img{background:#fff;border-radius:12px;padding:4px 6px;height:48px}
.nav{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav>a,.nav__item>a{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 13px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--ink-2);transition:background .2s,color .2s}
.nav>a:hover,.nav__item:hover>a{background:rgba(0,0,0,.05);color:var(--ink)}
.nav__item{position:relative}
.mega{position:absolute;left:-20px;top:100%;padding-top:12px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease)}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega__cols{display:grid;grid-template-columns:300px 300px;gap:28px;padding:24px;background:#fff;border-radius:var(--r);box-shadow:var(--sh-3);border:1px solid var(--line)}
.mega h6{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.mega__cat{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;font-weight:700;font-size:14px}
.mega__cat small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.mega__cat:hover{background:var(--bg)}
.mega__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--bg);color:var(--accent)}
.mega__brands{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:16px}
.mega__brands a{padding:8px 10px;border-radius:10px;font-weight:700;font-size:14px;display:flex;justify-content:space-between}
.mega__brands a small{color:var(--muted);font-weight:500}
.mega__brands a:hover{background:var(--bg)}
.mega__promo{display:block;padding:18px;border-radius:16px;background:var(--dark) radial-gradient(120% 120% at 100% 0,rgba(255,106,0,.55),transparent 60%);color:#fff}
.mega__promo span{font-size:12px;opacity:.7}
.mega__promo b{display:block;font-family:var(--fd);font-size:18px;margin:4px 0 10px}
.mega__promo em{font-style:normal;font-weight:700;color:var(--accent-2);display:inline-flex;gap:6px;align-items:center}
.search{position:relative;flex:1;min-width:180px;max-width:420px;margin-left:auto;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:rgba(0,0,0,.045);border-radius:999px;border:1.5px solid transparent;transition:.2s}
.search:focus-within{background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,106,0,.12)}
.search .ic{color:var(--muted)}
.search input{flex:1;border:0;background:none;outline:0;min-width:0;font-weight:600;font-size:14.5px}
.search input::-webkit-search-cancel-button{display:none}
.search kbd{font:600 11px var(--fb);padding:2px 7px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted)}
.search__results{position:absolute;right:0;width:max(100%,400px);top:calc(100% + 8px);background:#fff;border-radius:18px;box-shadow:var(--sh-3);border:1px solid var(--line);padding:8px;max-height:70vh;overflow:auto;z-index:70}
.sr{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px}
.sr:hover,.sr.is-active{background:var(--bg)}
.sr img{width:48px;height:48px;object-fit:contain;border-radius:10px;background:var(--surface-2)}
.sr b{display:block;font-size:14px;line-height:1.3}
.sr span{font-size:13px;color:var(--accent-ink);font-weight:700}
.sr__all{display:block;text-align:center;padding:10px;font-weight:700;color:var(--accent-ink);border-top:1px solid var(--line);margin-top:4px}
.sr__none{padding:16px;color:var(--muted);text-align:center}
.hdr__actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.show-sm{display:none}

/* ───────── Drawers / modal ───────── */
.drawer{position:fixed;inset:0;z-index:90;visibility:hidden}
.drawer::before{content:"";position:absolute;inset:0;background:rgba(5,5,10,.5);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.drawer__panel{position:absolute;top:0;bottom:0;left:0;width:min(400px,90vw);background:#fff;padding:20px;overflow:auto;transform:translateX(-100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;gap:16px}
.drawer--right .drawer__panel{left:auto;right:0;transform:translateX(100%);width:min(440px,94vw)}
.drawer.is-open{visibility:visible}
.drawer.is-open::before{opacity:1}
.drawer.is-open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;font-family:var(--fd);font-size:18px}
.drawer__search{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:999px;background:var(--bg)}
.drawer__search input{border:0;background:none;outline:0;flex:1}
.drawer__cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drawer__cats a{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:var(--bg);font-weight:700;font-size:14px}
.drawer__cats a span{color:var(--accent)}
.drawer__cats small{color:var(--muted);font-weight:600}
.drawer__links{display:flex;flex-direction:column}
.drawer__links a{padding:12px 4px;border-bottom:1px solid var(--line);font-weight:700}
.minicart{display:flex;flex-direction:column;gap:12px;flex:1}
.minicart__empty{text-align:center;padding:40px 10px;color:var(--muted)}
.mc-line{display:grid;grid-template-columns:68px 1fr auto;gap:12px;align-items:center;padding:10px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.mc-line img{width:68px;height:68px;object-fit:contain;border-radius:12px;background:#fff}
.mc-line b{display:block;font-size:14px;line-height:1.3}
.mc-line small{color:var(--muted)}
.mc-line .price{font-size:14px}
.mc-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.mc-row{display:flex;justify-content:space-between;font-weight:600}
.mc-row--total{font-family:var(--fd);font-size:18px}
.mc-free{font-size:13px;color:var(--muted)}
.mc-bar{height:6px;border-radius:3px;background:var(--bg);overflow:hidden}
.mc-bar i{display:block;height:100%;background:var(--grad);border-radius:3px;transition:width .5s var(--ease)}
.qty{display:inline-flex;align-items:center;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);height:36px}
.qty button{width:34px;height:36px;display:grid;place-items:center;border-radius:50%}
.qty button:hover{color:var(--accent)}
.qty input{width:34px;text-align:center;border:0;background:none;font-weight:800;outline:0;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{display:none}
.qty--lg{height:52px}.qty--lg button{width:46px;height:52px}.qty--lg input{width:40px;font-size:17px}
.modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;visibility:hidden}
.modal::before{content:"";position:absolute;inset:0;background:rgba(5,5,10,.6);backdrop-filter:blur(6px);opacity:0;transition:.3s}
.modal__box{position:relative;width:min(960px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:var(--r-lg);padding:28px;transform:scale(.94) translateY(20px);opacity:0;transition:.35s var(--ease)}
.modal.is-open{visibility:visible}.modal.is-open::before{opacity:1}.modal.is-open .modal__box{transform:none;opacity:1}
.modal__x{position:absolute;right:14px;top:14px;z-index:2}
.qv{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.qv__img{background:radial-gradient(circle at 50% 40%,#fff,#ececf0);border-radius:var(--r);padding:20px;aspect-ratio:1}
.qv__img img{width:100%;height:100%;object-fit:contain}
.qv h3{font-family:var(--fd);font-size:24px;margin:6px 0 10px}
.qv .specmini{margin:14px 0}

.toast{position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-weight:700;font-size:14px;box-shadow:var(--sh-3);transition:.35s var(--ease);display:flex;align-items:center;gap:10px;max-width:90vw}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast--err{background:var(--bad)}

/* ───────── Hero ───────── */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;isolation:isolate;padding:40px 0 70px}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;mix-blend-mode:screen;animation:float 18s ease-in-out infinite}
.b1{width:620px;height:620px;background:#ff6a00;top:-260px;right:-120px}
.b2{width:520px;height:520px;background:#ff2d55;bottom:-280px;left:20%;animation-delay:-6s;opacity:.35}
.b3{width:420px;height:420px;background:#7a3cff;top:10%;left:-200px;animation-delay:-12s;opacity:.3}
@keyframes float{50%{transform:translate(40px,-30px) scale(1.08)}}
.hero__grid{position:absolute;left:-50%;right:-50%;bottom:-10%;height:60%;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:60px 60px;transform:perspective(600px) rotateX(62deg);transform-origin:bottom;mask-image:linear-gradient(to top,#000 10%,transparent 90%);animation:gridmove 6s linear infinite}
@keyframes gridmove{to{background-position:0 60px}}
.hero__stars{position:absolute;inset:0;width:100%;height:100%}
.hero__in{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:30px;min-height:min(680px,calc(100vh - 112px))}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:13px;font-weight:700;color:#ffd7b5}
.eyebrow .pulse{background:var(--accent)}
.hero__title{font-size:clamp(40px,5.6vw,78px);margin:22px 0 20px;line-height:1.02}
.grad{background:var(--grad);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradshift 6s ease-in-out infinite}
@keyframes gradshift{50%{background-position:100% 50%}}
.hero__sub{font-size:18px;color:rgba(255,255,255,.72);max-width:540px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 34px}
.hero__stats{display:flex;gap:34px}
.hero__stats div{display:flex;flex-direction:column}
.hero__stats b{font-family:var(--fd);font-size:30px;font-weight:700}
.hero__stats span{font-size:13px;color:rgba(255,255,255,.55);font-weight:600}

/* 3D stage */
.stage{position:relative;height:600px;perspective:1400px;display:grid;place-items:center;touch-action:pan-y}
.stage__floor{position:absolute;bottom:40px;left:50%;width:520px;height:120px;margin-left:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,106,0,.45),transparent);filter:blur(10px);transform:rotateX(70deg)}
.stage__hint{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,.5);display:flex;gap:6px;align-items:center}
.orbit{position:absolute;width:150px;height:200px;transform-style:preserve-3d;animation:orbit 36s linear infinite;top:50%;left:50%;margin:-120px 0 0 -75px}
.stage:hover .orbit{animation-play-state:paused}
@keyframes orbit{from{transform:rotateX(-12deg) rotateY(0)}to{transform:rotateX(-12deg) rotateY(-360deg)}}
.orbit__card{position:absolute;inset:0;transform:rotateY(calc(360deg / var(--n) * var(--i))) translateZ(340px);backface-visibility:hidden;border-radius:20px;padding:12px;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(235,235,242,.92));color:var(--ink);box-shadow:0 20px 40px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.6);display:flex;flex-direction:column;transition:box-shadow .3s}
.orbit__card img{flex:1;min-height:0;object-fit:contain;width:100%;mix-blend-mode:multiply}
.orbit__card span{font-size:11px;font-weight:700;line-height:1.25;margin-top:6px;height:28px;overflow:hidden}
.orbit__card b{font-size:12px;color:var(--accent-ink)}
.orbit__card:hover{box-shadow:0 0 0 2px var(--accent),0 20px 50px -10px rgba(255,106,0,.6)}

.phone3d-wrap{position:relative;z-index:5;transform-style:preserve-3d;cursor:grab}
.phone3d-wrap:active{cursor:grabbing}
.phone3d{--w:236px;--h:484px;--rx:-8deg;--ry:-24deg;position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));animation:phoneSpin 14s ease-in-out infinite}
.phone3d.is-drag{animation:none}
@keyframes phoneSpin{0%{transform:rotateX(-8deg) rotateY(-24deg) translateY(0)}25%{transform:rotateX(-4deg) rotateY(20deg) translateY(-14px)}50%{transform:rotateX(-8deg) rotateY(160deg) translateY(0)}75%{transform:rotateX(-4deg) rotateY(200deg) translateY(-14px)}100%{transform:rotateX(-8deg) rotateY(336deg) translateY(0)}}
.phone3d__layer{position:absolute;inset:0;border-radius:48px;background:linear-gradient(90deg,#8a3a10,#ff8a3d 20%,#ffb070 50%,#ff8a3d 80%,#8a3a10);transform:translateZ(calc((var(--z) - 5.5) * 1px))}
.phone3d__front,.phone3d__back{position:absolute;inset:0;border-radius:48px;backface-visibility:hidden}
.phone3d__front{transform:translateZ(7px);background:#050507;padding:9px;box-shadow:inset 0 0 0 2px #ff9a55}
.phone3d__back{transform:rotateY(180deg) translateZ(7px);background:linear-gradient(150deg,#ff9a4d,#ff6a00 45%,#d94d00);box-shadow:inset 0 0 0 2px #ffb27a,inset 0 0 40px rgba(0,0,0,.25);overflow:hidden}
.phone3d__back::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 45%,transparent 55%);animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,100%{transform:translateX(-60%)}50%{transform:translateX(60%)}}
.plateau{position:absolute;left:10px;right:10px;top:12px;height:150px;border-radius:38px;background:linear-gradient(160deg,#ffa060,#f06000);box-shadow:inset 0 2px 6px rgba(255,255,255,.4),0 8px 20px rgba(0,0,0,.25)}
.lens{position:absolute;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4a5a8a 0,#0d1020 35%,#000 60%);box-shadow:0 0 0 6px #2a2a30,0 0 0 8px #ff9a55,inset 0 0 10px rgba(80,120,255,.5)}
.l1{left:18px;top:12px}.l2{left:18px;top:80px}.l3{left:86px;top:46px}
.flash{position:absolute;right:28px;top:22px;width:22px;height:22px;border-radius:50%;background:radial-gradient(#fff8e0,#d9c49a)}
.lidar{position:absolute;right:30px;bottom:24px;width:18px;height:18px;border-radius:50%;background:#111}
.back__mark{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);font-family:var(--fd);font-weight:800;font-size:54px;color:rgba(255,255,255,.28);text-shadow:0 1px 0 rgba(0,0,0,.1)}
.scr{position:relative;height:100%;border-radius:40px;overflow:hidden;background:radial-gradient(120% 70% at 20% 0,#ff8a3d 0,transparent 55%),radial-gradient(100% 80% at 100% 100%,#ff2d55 0,transparent 60%),linear-gradient(180deg,#2a0f3a,#0b0b18);color:#fff;text-align:center}
.scr::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 40%);pointer-events:none}
.scr__island{width:92px;height:28px;border-radius:20px;background:#000;margin:12px auto 0}
.scr__time{font-family:var(--fd);font-size:64px;font-weight:600;margin-top:28px;letter-spacing:-.03em}
.scr__date{font-size:13px;font-weight:600;opacity:.8}
.scr__widget{margin:24px 16px 0;padding:14px;border-radius:22px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);text-align:left;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.scr__widget span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.75}
.scr__widget b{display:block;font-size:14px;margin:4px 0}
.scr__widget em{font-style:normal;font-weight:800;color:#ffd0a8}
.scr__dock{position:absolute;left:14px;right:14px;bottom:14px;height:66px;border-radius:26px;background:rgba(255,255,255,.14);display:flex;justify-content:space-around;align-items:center}
.scr__dock i{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#fff,#ffb27a)}
.scr__dock i:nth-child(2){background:linear-gradient(135deg,#7cf29c,#25d366)}
.scr__dock i:nth-child(3){background:linear-gradient(135deg,#8ec5ff,#3a7bff)}
.scr__dock i:nth-child(4){background:linear-gradient(135deg,#ffd36e,#ff6a00)}
.phone3d__shadow{position:absolute;left:50%;bottom:-60px;width:200px;height:30px;margin-left:-100px;border-radius:50%;background:rgba(0,0,0,.6);filter:blur(16px);animation:shadowPulse 14s ease-in-out infinite}
@keyframes shadowPulse{25%,75%{transform:scale(.8);opacity:.6}}

/* ───────── Category marquee ───────── */
.cmarq{background:var(--grad);color:#fff;overflow:hidden;padding:18px 0;position:relative;z-index:3;box-shadow:0 20px 40px -20px rgba(255,80,0,.6)}
.cmarq__track{display:flex;width:max-content;animation:marq 40s linear infinite}
.cmarq:hover .cmarq__track{animation-play-state:paused}
.cmarq__group{display:flex;align-items:center;flex:none}
.cmarq__item{display:inline-flex;align-items:center;gap:14px;padding:0 24px;font-family:var(--fd);font-weight:700;font-size:clamp(20px,2.6vw,34px);white-space:nowrap;letter-spacing:-.02em;transition:opacity .2s}
.cmarq__item:hover{opacity:.75}
.cmarq__item sup{font-family:var(--fb);font-size:13px;background:rgba(0,0,0,.18);padding:2px 8px;border-radius:999px;vertical-align:super}
.cmarq__ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.18)}
.cmarq__sep{opacity:.6;font-size:18px}

/* ───────── Sections ───────── */
.sec{padding:90px 0}
.sec--dark{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.sec--tint{background:linear-gradient(180deg,#fff,var(--bg))}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px;flex-wrap:wrap}
.sec__head h2{font-size:clamp(28px,3.4vw,46px)}
.sec__head--center{justify-content:center;text-align:center}
.sec__head--center p{margin-top:12px}
.kicker{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin-bottom:12px}
.kicker--light{color:var(--accent-2)}

/* Categories bento */
.cats{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:18px}
.cat{position:relative;border-radius:var(--r-lg);background:#fff;overflow:hidden;padding:24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--sh-1);border:1px solid var(--line);transition:box-shadow .4s,transform .4s var(--ease);transform-style:preserve-3d}
.cat:hover{box-shadow:var(--sh-2)}
.cat--wide{grid-column:span 2;background:radial-gradient(120% 120% at 100% 100%,#e6e9ff,#fff 60%)}
.cat--wide .cat__img{height:92%;bottom:-6%}
.cat--big{grid-column:span 2;grid-row:span 2;background:radial-gradient(120% 90% at 100% 100%,#ffe2cc,#fff 60%)}
.cat__txt{position:relative;z-index:2;transform:translateZ(30px)}
.cat__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--ink);color:#fff;margin-bottom:14px}
.cat h3{font-family:var(--fd);font-size:19px;font-weight:600}
.cat--big h3{font-size:clamp(24px,2.4vw,34px)}
.cat__cnt{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;font-size:14px;color:var(--muted)}
.cat:hover .cat__cnt{color:var(--accent-ink)}
.cat__img{position:absolute;right:-6%;bottom:-8%;height:78%;width:auto;object-fit:contain;transition:transform .6s var(--ease);transform:translateZ(50px)}
.cat--big .cat__img{height:80%;right:0;bottom:-4%}
.cat:hover .cat__img{transform:translateZ(60px) scale(1.06) rotate(-2deg)}
.cat__art{position:absolute;right:16px;bottom:10px;color:rgba(255,106,0,.18);transition:transform .5s var(--ease)}
.cat:hover .cat__art{transform:scale(1.1) rotate(-6deg);color:rgba(255,106,0,.32)}

/* Rails */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 26px;scrollbar-width:none;margin:0 -4px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail--cards{grid-auto-columns:minmax(250px,280px)}
.rail-nav{display:flex;gap:8px}
.rail-nav .icon-btn:not(.icon-btn--glass){background:#fff;box-shadow:var(--sh-1)}

/* Apple spotlight */
.spot__glow{position:absolute;width:900px;height:900px;left:50%;top:-500px;margin-left:-450px;background:radial-gradient(closest-side,rgba(255,106,0,.35),transparent);pointer-events:none}
.spot .rail{grid-auto-columns:minmax(280px,320px)}
.spotcard{display:flex;flex-direction:column;border-radius:var(--r-lg);background:linear-gradient(180deg,#1d1d25,#121218);box-shadow:inset 0 0 0 1px var(--dline);overflow:hidden;transition:box-shadow .3s,transform .4s var(--ease);transform-style:preserve-3d}
.spotcard:hover{box-shadow:inset 0 0 0 1px rgba(255,166,43,.5),0 30px 60px -30px rgba(255,106,0,.6)}
.spotcard__img{aspect-ratio:1/1;margin:14px;border-radius:20px;background:radial-gradient(circle at 50% 40%,#fff,#e9e9ee);display:grid;place-items:center;padding:16px;overflow:hidden}
.spotcard__img img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease);mix-blend-mode:multiply}
.spotcard:hover .spotcard__img img{transform:scale(1.07) translateY(-4px)}
.spotcard__body{padding:4px 20px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.spotcard h3{font-size:17px;font-weight:700}
.spotcard__chips .chip{background:rgba(255,255,255,.08);color:#d8d8e0}
.spotcard__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:rgba(255,255,255,.6)}
.spotcard__foot b{color:#fff;font-size:17px}
.spotcard__go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;transition:transform .3s}
.spotcard:hover .spotcard__go{transform:rotate(-45deg)}

/* Tabs */
.tabs{display:flex;gap:6px;padding:6px;border-radius:999px;background:#fff;box-shadow:var(--sh-1);overflow-x:auto;scrollbar-width:none;max-width:100%}
.tab{height:40px;padding:0 18px;border-radius:999px;font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap;transition:.25s}
.tab:hover{color:var(--ink)}
.tab.is-on{background:var(--ink);color:#fff}
.tabpane{display:none}.tabpane.is-on{display:block;animation:fadeUp .5s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}

/* ───────── Product card ───────── */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-1);transition:box-shadow .35s,transform .45s var(--ease),border-color .3s;transform-style:preserve-3d;will-change:transform}
.pcard:hover{box-shadow:var(--sh-2);border-color:transparent}
.pcard__stage{position:relative;aspect-ratio:1/1;margin:8px;border-radius:16px;background:radial-gradient(circle at 50% 38%,#fff 0,#f1f1f4 70%);overflow:hidden;transform-style:preserve-3d}
.pcard__stage::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.7),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.pcard:hover .pcard__stage::after{opacity:1}
.pcard__stage.is-ph{background:radial-gradient(circle at 50% 38%,#fff 0,#eeeef3 70%)}
.pcard__img{position:absolute;inset:0;padding:22px;display:block}
.pcard__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.08) translateZ(40px)}
.pcard__badges{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2}
.tag{display:inline-block;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;background:var(--ink);color:#fff}
.tag--sale{background:var(--accent-3)}
.tag--new{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.tag--pre{background:#0f766e}
.tag--hot{background:var(--grad)}
.pcard__tools{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.tool{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);box-shadow:var(--sh-1);color:var(--ink-2);opacity:0;transform:translateX(10px);transition:.3s var(--ease)}
.tool:nth-child(2){transition-delay:.04s}.tool:nth-child(3){transition-delay:.08s}
.pcard:hover .tool,.tool.is-on{opacity:1;transform:none}
.tool:hover{color:var(--accent)}
.tool.is-on{color:#fff;background:var(--accent)}
.pcard__body{padding:6px 16px 16px;display:flex;flex-direction:column;flex:1}
.pcard__brand{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.pcard__brand .low{color:var(--warn);text-transform:none;letter-spacing:0}
.pcard__brand .oos{color:var(--bad);text-transform:none;letter-spacing:0}
.pcard__name{font-size:15.5px;font-weight:700;line-height:1.3;margin:6px 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.pcard__name a:hover{color:var(--accent-ink)}
.pcard__chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;min-height:24px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;background:var(--bg);font-size:11.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip .ic{color:var(--accent)}
.pcard__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{display:flex;flex-direction:column;line-height:1.15}
.price b{font-size:17px;font-weight:800;letter-spacing:-.01em}
.price s{font-size:12.5px;color:var(--muted)}
.addbtn{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px 0 10px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;transition:.25s var(--ease);flex:none}
.addbtn:hover{background:var(--accent);transform:translateY(-1px)}
.addbtn.is-added{background:var(--ok)}
.addbtn[disabled]{background:#c8c8d0}

/* Head to head */
.h2h__grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:18px}
.h2h__col{padding:22px;border-radius:var(--r-lg);background:linear-gradient(180deg,#191921,#101015);box-shadow:inset 0 0 0 1px var(--dline);display:flex;flex-direction:column;transform-style:preserve-3d;transition:box-shadow .3s}
.h2h__col:hover{box-shadow:inset 0 0 0 1px rgba(255,166,43,.4)}
.h2h__img{display:block;aspect-ratio:4/3;border-radius:18px;background:radial-gradient(circle at 50% 40%,#fff,#e5e5ea);padding:14px;margin-bottom:18px}
.h2h__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transform:translateZ(30px)}
.h2h__brand{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.h2h__col h3{font-family:var(--fd);font-size:20px;margin:6px 0}
.h2h__price{font-weight:800;font-size:18px;margin-bottom:14px}
.h2h dl{margin:0 0 18px;display:grid;gap:2px}
.h2h dt{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em;margin-top:10px;display:flex;gap:6px;align-items:center}
.h2h dd{margin:0;font-size:14px;font-weight:600;color:#e8e8ee}
.h2h__act{margin-top:auto;display:flex;gap:8px}

/* Promos */
.promos{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px}
.promo{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:32px;min-height:340px;display:flex;transform-style:preserve-3d;transition:box-shadow .3s}
.promo:hover{box-shadow:var(--sh-3)}
.promo__txt{position:relative;z-index:2;max-width:330px;display:flex;flex-direction:column;align-items:flex-start;transform:translateZ(30px)}
.promo h3{font-family:var(--fd);font-size:clamp(22px,2.2vw,30px);margin-bottom:10px}
.promo p{color:inherit;opacity:.72;font-weight:600}
.promo .btn{margin-top:auto}
.promo--pre{background:linear-gradient(135deg,#d7f5ee,#f2fbf8)}
.promo--sell{background:var(--dark) radial-gradient(100% 100% at 100% 100%,rgba(255,106,0,.6),transparent 60%);color:#fff}
.promo--fix{background:linear-gradient(135deg,#ffe9d6,#fff6ec)}
.promo__stack{position:absolute;right:-10px;bottom:-90px;width:140px;height:270px;transform:rotate(14deg);z-index:1}
.promo__stack i{position:absolute;inset:0;border-radius:30px;background:linear-gradient(160deg,#1e293b,#0f172a);box-shadow:0 20px 40px -10px rgba(0,0,0,.4),inset 0 0 0 3px #64748b;transition:transform .6s var(--ease)}
.promo__stack i:nth-child(2){transform:translate(-40px,20px) rotate(-8deg);background:linear-gradient(160deg,#0f766e,#064e3b)}
.promo__stack i:nth-child(3){transform:translate(-80px,40px) rotate(-16deg);background:linear-gradient(160deg,#ff8a3d,#ff6a00)}
.promo--pre:hover .promo__stack i:nth-child(2){transform:translate(-50px,10px) rotate(-12deg)}
.promo--pre:hover .promo__stack i:nth-child(3){transform:translate(-100px,20px) rotate(-22deg)}
.promo--pre .promo__txt{max-width:300px}
.promo__coin{position:absolute;right:24px;bottom:24px;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:var(--accent-2);animation:spinSlow 16s linear infinite}
.promo__coin--dark{background:rgba(255,106,0,.1);box-shadow:none;color:var(--accent)}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* Brands marquee */
.brands{overflow:hidden;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.brands__track{display:flex;width:max-content;animation:marq 50s linear infinite}
.brands:hover .brands__track{animation-play-state:paused}
.brands__group{display:flex;gap:14px;padding-right:14px}
.brandmark{display:grid;place-items:center;height:64px;padding:0 30px;border-radius:18px;background:var(--bg);font-family:var(--fd);font-weight:700;font-size:20px;letter-spacing:.02em;color:#3a3a44;transition:.3s;white-space:nowrap}
.brandmark:hover{background:var(--ink);color:#fff;transform:translateY(-3px)}
.brandmark--apple{letter-spacing:-.02em}.brandmark--samsung{letter-spacing:.18em;font-size:17px}.brandmark--google{font-family:var(--fb);font-weight:800}.brandmark--sony{letter-spacing:.24em}

/* Visit */
.visit{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;background:#fff;border-radius:var(--r-lg);padding:40px;box-shadow:var(--sh-1);border:1px solid var(--line)}
.visit h2{font-size:clamp(26px,3vw,40px);margin-bottom:14px}
.visit p{color:var(--muted);font-weight:500}
.visit__list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px;font-weight:700}
.visit__list li{display:flex;gap:10px;align-items:center}
.visit__list .ic{color:var(--accent)}
.visit__map{border-radius:var(--r);overflow:hidden;min-height:360px;background:var(--bg)}
.visit__map iframe{width:100%;height:100%;min-height:360px;border:0;filter:saturate(.9)}

/* Trust + footer */
.trust{background:#fff;border-top:1px solid var(--line)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:30px 24px}
.trust__item{display:flex;gap:14px;align-items:center}
.trust__item .ic{color:var(--accent);flex:none}
.trust__item b{display:block;font-size:15px}
.trust__item span{font-size:13px;color:var(--muted);font-weight:600}
.ftr{position:relative;background:var(--dark);color:rgba(255,255,255,.7);overflow:hidden;padding-top:70px}
.ftr__glow{position:absolute;width:800px;height:500px;right:-200px;top:-300px;background:radial-gradient(closest-side,rgba(255,106,0,.25),transparent);pointer-events:none}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;position:relative}
.ftr h5{font-family:var(--fd);color:#fff;font-size:14px;margin-bottom:16px;font-weight:600;letter-spacing:.02em}
.ftr .logo{display:flex}
.ftr__grid>div>a:not(.logo){display:block;padding:5px 0;font-weight:600;font-size:14.5px;transition:color .2s}
.ftr a:hover{color:var(--accent-2)}
.ftr__brand p{margin:18px 0;font-size:14.5px;max-width:340px}
.ftr__social{display:flex;gap:8px}
.ftr__social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.07);color:#fff}
.ftr__social a:hover{background:var(--accent);color:#fff}
.ftr__contact{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:600;margin-bottom:12px}
.ftr__contact .ic{color:var(--accent-2);margin-top:3px}
.ftr__bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:26px 24px;margin-top:50px;border-top:1px solid var(--dline);font-size:13px;position:relative}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:80;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 12px 30px -8px rgba(37,211,102,.7);transition:transform .3s var(--ease)}
.wa-float:hover{transform:scale(1.08) rotate(-6deg)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:ring 2s infinite}
@keyframes ring{to{transform:scale(1.5);opacity:0}}

/* Compare bar */
.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:85;background:rgba(12,12,16,.94);backdrop-filter:blur(12px);color:#fff;padding:12px 0;transform:translateY(100%);transition:transform .4s var(--ease)}
.cmpbar:not(.is-on){visibility:hidden}
.cmpbar.is-on{transform:none}
.cmpbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cmpbar__items{display:flex;gap:10px;overflow-x:auto}
.cmpbar__item{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border-radius:12px;padding:6px 10px 6px 6px;font-size:13px;font-weight:700;white-space:nowrap}
.cmpbar__item img{width:36px;height:36px;object-fit:contain;background:#fff;border-radius:8px}
.cmpbar__item button{color:rgba(255,255,255,.6)}
.cmpbar__act{display:flex;gap:8px;flex:none}
.cmpbar .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}

/* ───────── Page head / shop ───────── */
.phead{background:var(--dark);color:#fff;position:relative;overflow:hidden;padding:46px 0 52px}
.phead::before{content:"";position:absolute;width:700px;height:700px;right:-200px;top:-420px;background:radial-gradient(closest-side,rgba(255,106,0,.45),transparent)}
.phead .wrap{position:relative}
.phead h1{font-size:clamp(30px,4vw,52px);margin:10px 0 8px}
.phead p{color:rgba(255,255,255,.65);max-width:640px;margin:0}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13.5px;font-weight:600;color:var(--muted)}
.phead .crumbs{color:rgba(255,255,255,.55)}
.crumbs a:hover{color:var(--accent)}
.catpills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:24px;padding-bottom:4px}
.catpills a{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-weight:700;font-size:14px;transition:.2s}
.catpills a:hover{background:rgba(255,255,255,.16)}
.catpills a.is-on{background:#fff;color:var(--ink)}
.catpills small{opacity:.6}
.shop{display:grid;grid-template-columns:270px 1fr;gap:30px;padding:36px 0 80px}
.filters{position:sticky;top:calc(var(--hdr) + 16px);align-self:start;background:#fff;border-radius:var(--r);padding:20px;border:1px solid var(--line);max-height:calc(100vh - var(--hdr) - 32px);overflow:auto}
.filters__head{display:none}
.fgroup{padding:14px 0;border-bottom:1px solid var(--line)}
.fgroup:last-of-type{border-bottom:0}
.fgroup h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.fopt{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:8px;font-weight:600;font-size:14.5px;cursor:pointer}
.fopt:hover{background:var(--bg)}
.fopt input{accent-color:var(--accent);width:17px;height:17px}
.fopt small{margin-left:auto;color:var(--muted);font-weight:600}
.fprice{display:flex;gap:8px;align-items:center}
.fprice input{width:100%;height:40px;border-radius:10px;border:1px solid var(--line-2);padding:0 10px;font-weight:600}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.toolbar__count{font-weight:700;color:var(--muted)}
.toolbar__count b{color:var(--ink)}
.toolbar select{height:42px;border-radius:999px;border:1px solid var(--line-2);padding:0 36px 0 16px;font-weight:700;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none}
.fbtn{display:none}
.activef{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.activef a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;font-weight:700}
.activef a:hover{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-ink)}
.pager{display:flex;justify-content:center;gap:6px;margin-top:36px;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;padding:0 12px;border-radius:12px;display:grid;place-items:center;font-weight:700;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.pager a:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.pager .is-on{background:var(--ink);color:#fff;box-shadow:none}
.empty{text-align:center;padding:70px 20px;background:#fff;border-radius:var(--r);border:1px dashed var(--line-2)}
.empty__ic{display:inline-grid;place-items:center;width:80px;height:80px;border-radius:50%;background:var(--bg);color:var(--muted);margin-bottom:16px}
.empty h3{font-family:var(--fd);margin-bottom:8px}
.empty p{color:var(--muted)}

/* ───────── Product page ───────── */
.pdp{display:grid;grid-template-columns:1.08fr 1fr;gap:48px;padding:26px 0 60px;align-items:start}
.pdp__crumbs{padding-top:22px}
.gallery{position:sticky;top:calc(var(--hdr) + 16px);display:grid;grid-template-columns:76px 1fr;gap:14px}
.gallery__thumbs{display:flex;flex-direction:column;gap:10px;max-height:600px;overflow:auto;scrollbar-width:none}
.gallery__thumbs button{width:76px;height:76px;border-radius:14px;background:#fff;padding:6px;box-shadow:inset 0 0 0 1px var(--line);transition:.2s}
.gallery__thumbs button.is-on{box-shadow:inset 0 0 0 2px var(--accent)}
.gallery__thumbs img{width:100%;height:100%;object-fit:contain}
.gallery__main{position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);background:radial-gradient(circle at 50% 40%,#fff 0,#ececf0 75%);overflow:hidden;perspective:1000px;cursor:zoom-in}
.gallery__main .g3d{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .2s ease-out}
.gallery__main img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .35s,transform .5s var(--ease);transform:translateZ(60px)}
.gallery__main.is-zoom{cursor:zoom-out}
.gallery__main.is-zoom img{transform:scale(2);transform-origin:var(--zx,50%) var(--zy,50%)}
.gallery__main .pcard__badges{left:18px;top:18px}
.gallery__glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.75),transparent 45%);pointer-events:none;mix-blend-mode:soft-light}
.gallery__nav{position:absolute;bottom:16px;right:16px;display:flex;gap:6px}
.gallery__nav button{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);display:grid;place-items:center}
.pinfo__brand{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-ink)}
.pinfo h1{font-size:clamp(26px,3vw,40px);margin:10px 0 12px}
.pinfo__meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;font-size:14px;font-weight:600;color:var(--muted)}
.stars{display:inline-flex;gap:1px;color:#d4d4da}
.stars .on{color:#ffb020}
.stars .on svg{fill:currentColor}
.instock{display:inline-flex;align-items:center;gap:6px;color:var(--ok)}
.instock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(20,164,77,.15)}
.instock--low{color:var(--warn)}.instock--out{color:var(--bad)}
.pinfo__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:22px 0 6px}
.pinfo__price b{font-family:var(--fd);font-size:36px;font-weight:700;letter-spacing:-.03em}
.pinfo__price s{color:var(--muted);font-size:18px}
.save{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,45,85,.1);color:var(--accent-3);font-weight:800;font-size:13px}
.pinfo__short{color:var(--ink-2);font-weight:500;margin:14px 0 20px}
.hls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 24px}
.hl{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:600;line-height:1.35}
.hl .ic{color:var(--accent);margin-top:1px}
.opt{margin-bottom:20px}
.opt h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.opt h4 b{color:var(--ink);text-transform:none;letter-spacing:0}
.vpills{display:flex;flex-wrap:wrap;gap:8px}
.vpill{padding:10px 16px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:700;font-size:14px;transition:.2s;text-align:left}
.vpill small{display:block;font-weight:600;color:var(--muted);font-size:12px}
.vpill:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.vpill.is-on{box-shadow:inset 0 0 0 2px var(--accent);background:#fff8f2}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);position:relative;transition:transform .2s}
.swatch.is-on::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent)}
.swatch:hover{transform:scale(1.08)}
.buy{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:24px 0 14px}
.buy .btn{flex:1;min-width:160px;height:52px}
.buy__sub{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;font-weight:700}
.buy__sub button{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.buy__sub button:hover,.buy__sub button.is-on{color:var(--accent-ink)}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.perk{padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted);line-height:1.35}
.perk b{display:block;color:var(--ink);font-size:14px;margin:6px 0 2px}
.perk .ic{color:var(--accent)}
.ptabs{padding:20px 0 70px}
.ptabs__nav{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.ptabs__nav button{height:52px;padding:0 20px;font-weight:800;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ptabs__nav button.is-on{color:var(--ink);border-color:var(--accent)}
.ptab{display:none}.ptab.is-on{display:block;animation:fadeUp .4s var(--ease)}
.prose{max-width:780px;font-size:16.5px;color:var(--ink-2)}
.prose h2,.prose h3{font-family:var(--fd);margin:1.4em 0 .5em;color:var(--ink)}
.prose ul{padding-left:1.2em}
.prose li{margin:.3em 0}
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.specgroup{background:#fff;border-radius:var(--r);border:1px solid var(--line);overflow:hidden}
.specgroup h4{display:flex;align-items:center;gap:10px;padding:14px 18px;font-family:var(--fd);font-size:15px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.specgroup h4 .ic{color:var(--accent)}
.specgroup dl{margin:0}
.specgroup div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:14.5px}
.specgroup div:last-child{border-bottom:0}
.specgroup dt{color:var(--muted);font-weight:600}
.specgroup dd{margin:0;font-weight:700}
.specmini{display:grid;gap:6px}
.specmini div{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:6px 0;border-bottom:1px dashed var(--line)}
.specmini span{color:var(--muted)}
.specmini b{text-align:right}
.reviews{display:grid;grid-template-columns:320px 1fr;gap:30px}
.rsum{background:#fff;border-radius:var(--r);padding:24px;border:1px solid var(--line);align-self:start}
.rsum__big{font-family:var(--fd);font-size:48px;font-weight:700}
.review{padding:18px 0;border-bottom:1px solid var(--line)}
.review b{display:block}
.review small{color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13.5px;font-weight:700}
.field input,.field select,.field textarea{height:48px;border-radius:14px;border:1.5px solid var(--line-2);padding:0 14px;background:#fff;outline:0;transition:.2s;font-weight:600}
.field textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,106,0,.1)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ratepick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.ratepick input{display:none}
.ratepick label{cursor:pointer;color:#d4d4da}
.ratepick label svg{width:28px;height:28px}
.ratepick input:checked~label,.ratepick label:hover,.ratepick label:hover~label{color:#ffb020}
.ratepick input:checked~label svg,.ratepick label:hover svg,.ratepick label:hover~label svg{fill:currentColor}
.mbuy{display:none}

/* ───────── Cart / checkout ───────── */
.cartpage{display:grid;grid-template-columns:1fr 380px;gap:30px;padding:36px 0 80px;align-items:start}
.card{background:#fff;border-radius:var(--r);border:1px solid var(--line);padding:24px}
.card h3{font-family:var(--fd);font-size:18px;margin-bottom:16px}
.cline{display:grid;grid-template-columns:96px 1fr auto auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cline:last-child{border-bottom:0}
.cline img{width:96px;height:96px;object-fit:contain;border-radius:16px;background:radial-gradient(circle,#fff,#efeff3)}
.cline h4{font-size:15.5px}
.cline small{color:var(--muted);font-weight:600}
.cline .rm{color:var(--muted);font-size:13px;font-weight:700;display:inline-flex;gap:4px;align-items:center;margin-top:6px}
.cline .rm:hover{color:var(--bad)}
.summary{position:sticky;top:calc(var(--hdr) + 16px)}
.summary .mc-row{padding:6px 0}
.summary hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.paym{display:grid;gap:8px}
.paym label{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--line-2);font-weight:700;cursor:pointer}
.paym input{accent-color:var(--accent)}
.paym label:has(input:checked){box-shadow:inset 0 0 0 2px var(--accent);background:#fff8f2}
.success{max-width:640px;margin:60px auto 90px;text-align:center}
.success__ic{display:inline-grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--grad);color:#fff;margin-bottom:20px;box-shadow:0 20px 40px -10px rgba(255,106,0,.6);animation:pop .6s var(--ease)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.success h1{font-size:clamp(28px,4vw,42px);margin-bottom:10px}
.orderno{display:inline-block;font-family:var(--fd);font-size:20px;padding:10px 20px;border-radius:14px;background:#fff;border:1px dashed var(--line-2);margin:16px 0}

/* Compare page */
.cmptable{overflow-x:auto;background:#fff;border-radius:var(--r);border:1px solid var(--line)}
.cmptable table{width:100%;border-collapse:collapse;min-width:640px}
.cmptable th,.cmptable td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:14.5px}
.cmptable th{width:170px;color:var(--muted);font-weight:700;background:var(--surface-2);position:sticky;left:0}
.cmptable td{font-weight:600}
.cmptable .cmphead img{width:150px;height:150px;object-fit:contain;margin-bottom:10px;background:radial-gradient(circle,#fff,#efeff3);border-radius:16px;padding:10px}
.cmptable .cmphead b{display:block;font-size:15px;margin-bottom:4px}
.cmptable .diff td{background:#fffaf5}

/* Info pages */
.infogrid{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:40px 0 80px;align-items:start}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.svc div{padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line);font-weight:700}
.svc .ic{color:var(--accent);margin-bottom:8px}
.svc small{display:block;color:var(--muted);font-weight:600}
.steps{counter-reset:s;display:grid;gap:14px;margin:20px 0}
.steps li{list-style:none;counter-increment:s;display:flex;gap:14px;align-items:flex-start;font-weight:600}
.steps li::before{content:counter(s);flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--fd);font-size:13px}
.alert{padding:14px 16px;border-radius:14px;font-weight:700;margin-bottom:16px}
.alert--ok{background:#e8f7ee;color:#0b6b32}
.alert--err{background:#fdecec;color:#a11d22}

/* Reveal + tilt */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}
.pcard.reveal.is-in{transform:none}
[data-tilt]{transform-style:preserve-3d}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* ───────── Responsive ───────── */
@media (max-width:1200px){
  .nav>a:nth-child(n+5){display:none}
  .pgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .nav{display:none}
  .hdr__burger{display:inline-grid}
  .hero__in{grid-template-columns:1fr;text-align:center;min-height:0;padding-top:20px}
  .hero__sub{margin:0 auto}
  .hero__cta,.hero__stats{justify-content:center}
  .stage{height:520px;margin-top:10px}
  .cats{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .promos{grid-template-columns:1fr 1fr}
  .promo--pre{grid-column:span 2}
  .h2h__grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .shop{grid-template-columns:1fr}
  .filters{position:fixed;inset:0 auto 0 0;z-index:92;width:min(340px,88vw);max-height:none;border-radius:0;transform:translateX(-105%);transition:transform .4s var(--ease);top:0}
  .filters.is-open{transform:none;box-shadow:var(--sh-3)}
  .filters__head{display:flex;justify-content:space-between;align-items:center;font-family:var(--fd);margin-bottom:6px}
  .fbtn{display:inline-flex}
  .pdp{grid-template-columns:1fr;gap:26px}
  .gallery{position:relative;top:0}
  .cartpage{grid-template-columns:1fr}
  .summary{position:static}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .visit{grid-template-columns:1fr}
  .infogrid{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--hdr:62px}
  .cat--wide{grid-column:span 2}
  .wrap{padding:0 16px}
  .sec{padding:60px 0}
  .search{display:none}
  .hide-sm{display:none}
  .show-sm{display:inline-grid}
  .hide-md{display:none}
  .logo img{height:34px}
  .logo__txt b{font-size:15px}
  .hero{padding:24px 0 50px}
  .hero__title{font-size:clamp(34px,10vw,48px)}
  .hero__sub{font-size:16px}
  .hero__stats{gap:22px}
  .hero__stats b{font-size:24px}
  .stage{height:440px;perspective:1000px}
  .phone3d{--w:190px;--h:390px}
  .scr__time{font-size:50px;margin-top:20px}
  .plateau{height:120px}
  .lens{width:48px;height:48px}.l2{top:64px}.l3{left:70px;top:36px}
  .orbit{width:110px;height:150px;margin:-90px 0 0 -55px}
  .orbit__card{transform:rotateY(calc(360deg / var(--n) * var(--i))) translateZ(210px);padding:8px;border-radius:14px}
  .orbit__card span{font-size:9.5px;height:24px}
  .stage__floor{width:340px;margin-left:-170px}
  .cats{grid-auto-rows:170px;gap:12px}
  .cat{padding:16px;border-radius:20px}
  .cat--big{grid-column:span 2;grid-row:span 1}
  .cat h3{font-size:15px}
  .cat--big h3{font-size:22px}
  .cat__img{height:58%;right:-10%;bottom:-6%}
  .cat:not(.cat--big) h3{max-width:70%}
  .pgrid,.pgrid--3{grid-template-columns:repeat(2,1fr);gap:10px}
  .pcard{border-radius:16px}
  .pcard__stage{margin:6px;border-radius:12px}
  .pcard__img{padding:12px}
  .pcard__body{padding:4px 10px 12px}
  .pcard__name{font-size:13.5px;min-height:36px}
  .pcard__chips .chip:nth-child(n+3){display:none}
  .price b{font-size:15px}
  .addbtn{width:38px;height:38px;padding:0;justify-content:center}
  .addbtn span{display:none}
  .tool{opacity:1;transform:none;width:32px;height:32px}
  .tool:nth-child(3){display:none}
  .promos{grid-template-columns:1fr}
  .promo--pre{grid-column:auto}
  .promo{min-height:300px;padding:24px}
  .trust__grid{grid-template-columns:1fr 1fr;padding:22px 16px}
  .ftr__grid{grid-template-columns:1fr;gap:28px}
  .visit{padding:22px}
  .hls{grid-template-columns:1fr}
  .perks{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery__thumbs{flex-direction:row;order:2;max-height:none}
  .gallery__thumbs button{width:64px;height:64px;flex:none}
  .specs{grid-template-columns:1fr}
  .specgroup div{grid-template-columns:110px 1fr}
  .cline{grid-template-columns:72px 1fr;gap:12px}
  .cline img{width:72px;height:72px}
  .cline .qty,.cline .price{grid-column:2}
  .field-row{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .qv{grid-template-columns:1fr}
  .modal__box{padding:20px}
  .mbuy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .mbuy .price b{font-size:16px}
  .mbuy .btn{flex:1;height:48px}
  .has-mbuy .wa-float{bottom:84px}
  .ticker{height:36px;font-size:12px}
  .ticker__label{padding:0 10px}
  .cmarq{padding:14px 0}
  .cmarq__ic{width:36px;height:36px}
}

.askprice{font-size:14px;font-weight:800;color:var(--accent-ink)}
.addbtn--wa{background:#25d366;color:#04310f}
.addbtn--wa:hover{background:#2ee372}