/* Toos Arax storefront — one stylesheet, mobile first, RTL. No frameworks. */
@font-face{font-family:Vazirmatn;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/vazirmatn.woff2) format("woff2")}

@layer reset,base,layout,components,pages;

@layer reset{
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-block-start:8rem}
img,svg,video{display:block;max-inline-size:100%;block-size:auto}
input,button,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
ul[class],ol[class]{list-style:none;padding:0}
[hidden]{display:none!important}
table{border-collapse:collapse;inline-size:100%}
}

@layer base{
:root{
  color-scheme:light;
  --black:#111;--ink:#1b1b1d;--ink2:#5b5b63;--line:#e6e6eb;--bg:#f4f4f6;--surface:#fff;
  --orange:#f26b1d;--orange-d:#bf4a07;--on-orange:#161616;--green:#14803c;--red:#c7261b;
  --r:14px;--r-s:10px;--gut:clamp(12px,3vw,40px);--tab:3.75rem;
  --font:Vazirmatn,system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --sh:0 1px 2px rgb(0 0 0/.06),0 4px 16px rgb(0 0 0/.05);
  --safe-b:env(safe-area-inset-bottom,0px);
}
body{font-family:var(--font);font-size:1rem;line-height:1.75;color:var(--ink);background:var(--bg);min-block-size:100dvh;padding-block-end:calc(var(--tab) + var(--safe-b));-webkit-tap-highlight-color:transparent;font-feature-settings:"ss01"}
h1,h2,h3{line-height:1.45;font-weight:800;text-wrap:balance}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
.sr{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:1rem;inset-block-start:-4rem;background:var(--orange);color:var(--on-orange);padding:.5rem 1rem;border-radius:var(--r-s);z-index:100}
.skip:focus{inset-block-start:1rem}
.muted{color:var(--ink2);font-size:.9rem}
.i{inline-size:24px;block-size:24px;flex:none}
.i--s{inline-size:18px;block-size:18px}
@media (min-width:1000px){body{padding-block-end:0}}
}

@layer layout{
.wrap{inline-size:min(100%,1480px);margin-inline:auto;padding-inline:var(--gut)}

/* Promo strip */
.promo{background:#0a0a0c;color:#bdbdc4;font-size:.78rem;border-block-end:1px solid rgb(255 255 255/.06)}
.promo__in{display:flex;justify-content:center;gap:2rem;block-size:2.1rem;align-items:center;overflow:hidden;white-space:nowrap}
.promo__in>*{display:flex;align-items:center;gap:.4rem}
.promo .i{color:var(--orange)}
.promo a:hover{color:#fff}
.promo__in>:nth-child(n+2){display:none}
@media (min-width:700px){.promo__in>:nth-child(n+2){display:flex}}

/* Header: deep graphite with a warm orange glow, turns to frosted glass when scrolling */
.hd{position:sticky;inset-block-start:0;z-index:30;color:#fff;isolation:isolate;
  background:
    radial-gradient(60rem 9rem at 88% -40%,rgb(242 107 29/.34),transparent 70%),
    radial-gradient(40rem 8rem at 8% 140%,rgb(242 107 29/.16),transparent 70%),
    linear-gradient(180deg,#17171c 0%,#0e0e12 100%);
  transition:background-color .25s,box-shadow .25s}
.hd::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:1px;background:linear-gradient(90deg,transparent,rgb(242 107 29/.7) 30%,rgb(255 160 90/.9) 50%,rgb(242 107 29/.7) 70%,transparent);opacity:.8}
.hd--scrolled{background-color:rgb(14 14 18/.78);box-shadow:0 10px 30px rgb(0 0 0/.35)}
@supports (backdrop-filter:blur(1px)){
  .hd--scrolled{background:radial-gradient(60rem 9rem at 88% -40%,rgb(242 107 29/.22),transparent 70%),rgb(14 14 18/.88);backdrop-filter:saturate(1.6) blur(14px)}
}
.hd__bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"menu logo actions" "search search search";align-items:center;gap:.45rem .5rem;padding-block:.55rem .7rem}
.hd__menu{grid-area:menu}
.hd__logo{grid-area:logo;display:flex;align-items:center;gap:.55rem;justify-self:start}
.hd__logo img{inline-size:40px;block-size:40px;border-radius:12px;box-shadow:0 0 0 1px rgb(255 255 255/.08),0 4px 14px rgb(242 107 29/.25)}
.hd__name{display:grid;line-height:1.15}
.hd__name b{font-size:1.08rem;font-weight:900}
.hd__name small{font-size:.6rem;letter-spacing:.32em;color:#9d9da6;font-weight:600}
.hd__btn{display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:14px;position:relative;transition:background .15s}
.hd__btn:hover{background:rgb(255 255 255/.08)}
.hd__actions{grid-area:actions;display:flex;align-items:center;gap:.35rem}
.hd__login{display:none}
.hd__cart{background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px rgb(255 255 255/.08)}
.badge{position:absolute;inset-block-start:2px;inset-inline-end:0;min-inline-size:19px;block-size:19px;padding-inline:5px;border-radius:99px;background:var(--orange);color:var(--on-orange);font-size:.72rem;font-weight:800;line-height:19px;text-align:center;box-shadow:0 0 0 2px #111}

.search{grid-area:search;position:relative;display:flex;align-items:center;block-size:46px;border-radius:14px;background:rgb(255 255 255/.08);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1);transition:background .2s,box-shadow .2s}
.search__i{position:absolute;inset-inline-start:.9rem;color:#a9a9b2;pointer-events:none}
.search input{flex:1;border:0;background:none;color:#fff;padding-inline:2.8rem 1rem;block-size:100%;min-inline-size:0;outline:none}
.search input::placeholder{color:#a3a3ad}
.search input::-webkit-search-cancel-button{display:none}
.search__kbd{display:none;margin-inline-end:.7rem;font:600 .75rem var(--font);color:#9d9da6;border:1px solid rgb(255 255 255/.18);border-radius:6px;padding:0 .45rem}
.search:focus-within{background:#fff;box-shadow:0 0 0 3px rgb(242 107 29/.55)}
.search:focus-within input{color:var(--ink)}
.search:focus-within .search__i{color:var(--ink2)}
.suggest{position:absolute;inset-inline:0;inset-block-start:calc(100% + 8px);background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 20px 50px rgb(0 0 0/.3);overflow:hidden;max-block-size:70dvh;overflow-y:auto;z-index:40}
.suggest a{display:flex;align-items:center;gap:.75rem;padding:.55rem .85rem;border-block-end:1px solid var(--line)}
.suggest a:hover,.suggest a[aria-selected=true]{background:#fff4ec}
.suggest img{inline-size:46px;block-size:46px;object-fit:contain;border-radius:10px;background:#fff}
.suggest .s-name{flex:1;font-size:.9rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suggest .s-price{font-weight:800;font-size:.85rem;white-space:nowrap}
.suggest .s-terms{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem .85rem;border-block-end:1px solid var(--line)}
.suggest .s-terms a{border:1px solid var(--line);border-radius:99px;padding:.15rem .75rem;font-size:.85rem}
.suggest .s-all{justify-content:center;font-weight:700;color:var(--orange-d)}

/* Main navigation with picture tiles */
.nav{display:none}
.tile{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:14px;transition:background .15s,transform .15s}
.tile__img{flex:none;display:grid;place-items:center;inline-size:56px;block-size:56px;border-radius:14px;background:linear-gradient(145deg,#fff,#f1f1f4);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.tile__img img{inline-size:46px;block-size:46px;object-fit:contain;transition:transform .25s}
.tile__img .i{color:var(--ink2)}
.tile__txt{display:grid;line-height:1.5;min-inline-size:0}
.tile__txt b{font-size:.9rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile__txt small{font-size:.74rem;color:var(--ink2)}
.tile:hover{background:#fff4ec}
.tile:hover .tile__img img{transform:scale(1.08)}
.tile:hover b{color:var(--orange-d)}

@media (min-width:1000px){
  .hd__bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo search actions";gap:2rem;padding-block:.75rem}
  .hd__menu{display:none}
  .hd__logo img{inline-size:48px;block-size:48px}
  .hd__name b{font-size:1.2rem}
  .search{max-inline-size:720px;inline-size:100%;justify-self:center}
  .search__kbd{display:block}
  .hd__login{display:flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:14px;font-size:.9rem;font-weight:700;background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px rgb(255 255 255/.12);transition:box-shadow .15s,color .15s}
  .hd__login:hover{box-shadow:inset 0 0 0 1px var(--orange);color:var(--orange)}
  .nav{display:block;position:relative;border-block-start:1px solid rgb(255 255 255/.06)}
  .nav__list{display:flex;align-items:center;gap:.15rem}
  .nav__link{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;font-size:.92rem;font-weight:600;color:#e4e4e8;border-radius:10px;position:relative}
  .nav__link::after{content:"";position:absolute;inset-inline:.9rem;inset-block-end:0;block-size:2px;border-radius:2px;background:var(--orange);scale:0 1;transition:scale .2s}
  .nav__item:hover>.nav__link,.nav__item:focus-within>.nav__link{color:#fff}
  .nav__item:hover>.nav__link::after,.nav__item:focus-within>.nav__link::after{scale:1 1}
  .nav__link--hot{color:#ffb27f}
  .nav__link--hot .i{color:var(--orange)}
  .nav__link--asm .i{color:#7fd1ff}
  .i--xs{inline-size:14px;block-size:14px;opacity:.7}
  .panel{position:absolute;inset-inline:0;inset-block-start:100%;background:#fff;color:var(--ink);box-shadow:0 30px 60px rgb(0 0 0/.22);border-radius:0 0 22px 22px;opacity:0;visibility:hidden;translate:0 8px;transition:opacity .18s .08s,translate .18s .08s,visibility 0s .26s}
  .nav__item:hover .panel,.nav__item:focus-within .panel{opacity:1;visibility:visible;translate:0 0;transition-delay:.12s,.12s,0s}
  .panel__in{padding-block:1.25rem 1rem}
  .panel__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.35rem .75rem}
  .panel__all{display:inline-flex;align-items:center;gap:.25rem;margin-block-start:.75rem;padding:.4rem .8rem;border-radius:10px;font-weight:700;font-size:.9rem;color:var(--orange-d);background:#fff4ec}
}

/* Footer */
.ft{margin-block-start:3rem;color:#c9c9d0;background:#0d0d10}
.ft__trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;padding-block:1.25rem;translate:0 -2rem;margin-block-end:-2rem}
.ft__trust>div{display:flex;align-items:center;gap:.65rem;background:linear-gradient(160deg,#1d1d23,#141418);border:1px solid rgb(255 255 255/.07);border-radius:16px;padding:.75rem}
.ft__ic{flex:none;display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:12px;background:rgb(242 107 29/.14);color:var(--orange)}
.ft__trust p{display:grid;line-height:1.5}
.ft__trust b{color:#fff;font-size:.88rem}
.ft__trust small{font-size:.74rem;color:#9d9da6}
.ft__main{background:radial-gradient(50rem 14rem at 90% 0%,rgb(242 107 29/.10),transparent 70%)}
.ft__grid{display:grid;gap:.25rem;padding-block:1rem 1.5rem}
.ft__brand{display:grid;gap:.6rem;padding-block-end:1rem;border-block-end:1px solid rgb(255 255 255/.07);margin-block-end:.5rem}
.ft__logo{display:flex;align-items:center;gap:.6rem;color:#fff;font-size:1.1rem;font-weight:900}
.ft__logo img{border-radius:12px}
.ft__brand>p{font-size:.88rem;line-height:1.9;color:#a9a9b2}
.ft__phone{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;padding:.5rem .9rem;border-radius:12px;background:var(--orange);color:var(--on-orange);font-weight:800}
.ft__addr{display:flex;gap:.4rem;font-size:.86rem}
.ft__socials{display:flex;gap:.5rem;flex-wrap:wrap}
.ft__social{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .8rem;border-radius:12px;background:rgb(255 255 255/.06);color:#e4e4ea;font-size:.85rem;transition:background .15s,color .15s}
.ft__social:hover{background:rgb(242 107 29/.16);color:var(--orange)}
.ft__branches{display:grid;gap:.75rem;padding-block:1.5rem .5rem}
.ft__branch{display:grid;gap:.5rem;align-content:start;padding:1rem;border-radius:16px;background:rgb(255 255 255/.035);border:1px solid rgb(255 255 255/.07)}
.ft__branch h2{display:flex;align-items:center;gap:.4rem;margin:0;color:#fff;font-size:.95rem;font-weight:800}
.ft__branch h2 .i{color:var(--orange)}
.ft__baddr{font-size:.85rem;line-height:1.9;color:#b5b5bd}
.ft__bphones{display:flex;flex-wrap:wrap;gap:.4rem}
.ft__bphones a{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border-radius:10px;background:rgb(255 255 255/.06);color:#fff;font-size:.86rem;font-weight:700}
.ft__bphones a:hover{background:var(--orange);color:var(--on-orange)}
.ft__bhours{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#9d9da6}
@media (min-width:800px){.ft__branches{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;padding-block:2.25rem .25rem}}
.ft__col{border-block-end:1px solid rgb(255 255 255/.07)}
.ft__col summary{display:flex;align-items:center;justify-content:space-between;padding-block:.9rem;color:#fff;font-weight:800;cursor:pointer;list-style:none}
.ft__col summary::-webkit-details-marker{display:none}
.ft__col[open] summary .i{rotate:180deg}
.ft ul{list-style:none;padding:0}
.ft__col ul{display:grid;gap:.15rem;padding-block-end:.9rem}
.ft__col a{display:block;padding-block:.3rem;font-size:.9rem;color:#b5b5bd;transition:color .15s,translate .15s}
.ft__col a:hover{color:var(--orange);translate:-3px 0}
.ft__badges{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;padding-block-start:1rem}
.ft__badges .tb{inline-size:84px;block-size:84px;flex:none;display:grid;place-items:center;overflow:hidden;background:#fff;border-radius:14px;padding:6px;contain:strict}
.ft__badges .tb>*,.ft__badges .tb a{display:grid;place-items:center;inline-size:100%;block-size:100%;max-inline-size:100%;max-block-size:100%;overflow:hidden}
.ft__badges .tb img,.ft__badges .tb iframe,.ft__badges .tb canvas{inline-size:100%!important;block-size:100%!important;max-inline-size:100%;max-block-size:100%;object-fit:contain;border:0}
.ft__bottom{border-block-start:1px solid rgb(255 255 255/.07)}
.ft__bottom-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem;font-size:.78rem;color:#85858e}
.ft__bottom-in p{min-inline-size:0}
.ft__rights{display:none}
@media (min-width:700px){.ft__rights{display:inline}}
.ft__top{display:flex;align-items:center;gap:.3rem;color:#c9c9d0;font-size:.8rem;white-space:nowrap}
.ft__top .i{rotate:180deg}
@media (min-width:700px){
  .ft__trust{grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
  .ft__trust>div{padding:1rem}
}
@media (min-width:1000px){
  .ft__grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) auto;gap:2.5rem;padding-block:2rem 2.25rem}
  .ft__brand{border:0;padding:0;margin:0}
  .ft__col{border:0}
  .ft__col summary{pointer-events:none;padding-block:0 .8rem}
  .ft__col summary .i{display:none}
  .ft__col:not([open])>ul{display:grid}
  .ft__col>ul{display:grid}
  .ft__badges{flex-direction:row;flex-wrap:wrap;align-items:flex-start;padding:0;max-inline-size:280px}
}

/* Bottom tab bar (phone/tablet) */
.tabbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);block-size:calc(var(--tab) + var(--safe-b));padding-block-end:var(--safe-b);background:rgb(14 14 18/.9);backdrop-filter:saturate(1.6) blur(14px);color:#cfcfd4;border-block-start:1px solid rgb(255 255 255/.08)}
.tabbar>*{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.7rem}
.tabbar .badge{inset-block-start:4px;inset-inline-end:calc(50% - 22px)}
.tabbar>*:active{color:var(--orange)}
@media (min-width:1000px){.tabbar{display:none}}

/* Drawer */
.drawer{margin:0;margin-inline-start:auto;block-size:100dvh;max-block-size:100dvh;inline-size:min(92vw,420px);max-inline-size:none;border:0;padding:0 0 2rem;background:var(--bg);color:var(--ink);overflow-y:auto}
.drawer::backdrop{background:rgb(0 0 0/.55);backdrop-filter:blur(2px)}
.drawer[open]{animation:slide .22s ease-out}
@keyframes slide{from{translate:100% 0}}
.drawer__head{position:sticky;inset-block-start:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;color:#fff;background:radial-gradient(30rem 6rem at 90% -40%,rgb(242 107 29/.35),transparent 70%),#121216}
.drawer__head .hd__logo img{inline-size:36px;block-size:36px}
.drawer__head button{display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:12px;background:rgb(255 255 255/.08)}
.drawer__login{display:flex;gap:.5rem;align-items:center;margin:1rem;padding:.8rem 1rem;border-radius:14px;background:var(--orange);color:var(--on-orange);font-weight:800}
.drawer__login .i:last-child{margin-inline-start:auto}
.drawer__group{margin:0 1rem .75rem;background:var(--surface);border-radius:18px;box-shadow:var(--sh);overflow:hidden}
.drawer__group summary{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;font-weight:800;cursor:pointer;list-style:none}
.drawer__group summary::-webkit-details-marker{display:none}
.drawer__group[open] summary .i{rotate:180deg}
.drawer__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;padding:0 .6rem .4rem}
.drawer__tiles .tile{flex-direction:column;text-align:center;gap:.35rem;padding:.5rem .25rem}
.drawer__tiles .tile__txt b{font-size:.78rem;white-space:normal;line-height:1.5}
.drawer__tiles .tile__txt small{display:none}
.drawer__all{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.7rem;border-block-start:1px solid var(--line);font-weight:700;font-size:.88rem;color:var(--orange-d)}
.drawer__links{margin:0 1rem;background:var(--surface);border-radius:18px;box-shadow:var(--sh);overflow:hidden}
.drawer__links a{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-block-end:1px solid var(--line);font-weight:600}
.drawer__links li:last-child a{border:0}
.drawer__links .i{color:#b0b0b8}
}

@layer components{
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-block-size:46px;padding:.5rem 1.25rem;border-radius:12px;font-weight:800;background:#ececf0;color:var(--ink);transition:transform .1s,background .15s}
.btn:active{transform:scale(.98)}
.btn--orange{background:var(--orange);color:var(--on-orange)}
.btn--orange:hover{background:#ff7a2c}
.btn--block{inline-size:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed}

.crumbs{display:flex;flex-wrap:wrap;gap:.25rem;padding-block:.75rem;font-size:.82rem;color:var(--ink2)}
.crumbs a:not(:last-child)::after{content:"‹";margin-inline-start:.35rem;color:#aaa}
.crumbs a:hover{color:var(--orange-d)}

/* Product card */
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;container-type:inline-size}
.card__link{display:flex;flex-direction:column;flex:1;padding:.6rem .6rem 0}
.card__img,.card [data-noimg]{aspect-ratio:1;inline-size:100%;block-size:auto;object-fit:contain;background:#fff;border-radius:10px}
[data-noimg]{display:block;background:repeating-linear-gradient(45deg,#f1f1f4,#f1f1f4 10px,#ececf0 10px,#ececf0 20px)!important}
.card__title{margin-block:.5rem .25rem;font-size:.86rem;font-weight:600;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-block-size:2.8em}
.card__off{position:absolute;inset-block-start:.6rem;inset-inline-start:.6rem;background:var(--red);color:#fff;font-size:.75rem;font-weight:800;padding:.05rem .5rem;border-radius:99px}
.card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.25rem;padding:.25rem .6rem .6rem;min-block-size:3.2rem}
.card__add{display:grid;place-items:center;inline-size:38px;block-size:38px;flex:none;border-radius:11px;background:var(--black);color:#fff;transition:background .15s}
.card__add:hover{background:var(--orange);color:var(--on-orange)}
.card__add.is-done{background:var(--green)}
.card--out .card__img{opacity:.55;filter:grayscale(.6)}
.price{display:flex;flex-direction:column;line-height:1.4}
.price del{color:#9a9aa3;font-size:.78rem}
.price b{font-size:1rem;font-weight:800}
.price small{font-size:.72rem;color:var(--ink2)}
.price--out{color:var(--ink2);font-weight:700;font-size:.9rem;align-self:center}

/* Rails */
.rail{margin-block-start:1.5rem}
.rail__head{display:flex;align-items:center;justify-content:space-between;margin-block-end:.6rem}
.rail__head h2{font-size:1.1rem;position:relative;padding-inline-start:.75rem}
.rail__head h2::before{content:"";position:absolute;inset-inline-start:0;inset-block:.2em;inline-size:4px;border-radius:4px;background:var(--orange)}
.rail__head a{display:flex;align-items:center;gap:.2rem;font-size:.85rem;color:var(--orange-d);font-weight:700}
.rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(156px,42%);gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:.25rem .9rem;scrollbar-width:thin;overscroll-behavior-x:contain}
.rail__track>*{scroll-snap-align:start}
.rail--accent{background:linear-gradient(135deg,#1b1b1d,#2a1a10);padding-block:1rem .25rem;color:#fff}
.rail--accent .rail__head a{color:var(--orange)}
.rail--accent .card{color:var(--ink)}
@media (min-width:700px){.rail__track{grid-auto-columns:minmax(180px,23%)}}
@media (min-width:1100px){.rail__track{grid-auto-columns:calc((100% - 5*.75rem)/6)}}
@media (min-width:1400px){.rail__track{grid-auto-columns:calc((100% - 6*.9rem)/7);gap:.9rem}}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1400px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

.chips{display:flex;gap:.5rem;overflow-x:auto;padding-block:.25rem .6rem;scrollbar-width:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:.35rem;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:.3rem .9rem;font-size:.86rem;white-space:nowrap}
.chip small{color:var(--ink2)}
.chip:hover,.chip.on{border-color:var(--orange);color:var(--orange-d);background:#fff4ec}

.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin-block:1.5rem}
.pager a,.pager span{min-inline-size:42px;block-size:42px;display:grid;place-items:center;padding-inline:.7rem;border-radius:11px;background:var(--surface);box-shadow:var(--sh);font-weight:700}
.pager [aria-current]{background:var(--black);color:#fff}
.more{text-align:center;padding-block:1.1rem;min-block-size:2px}
.more__status{margin:0 0 .7rem;font-size:.9rem}
.more__btn{min-inline-size:230px}
.more__prev{margin-block:.4rem .8rem}
.has-inf .pager{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.pager .gap{background:none;box-shadow:none}

.prose{line-height:2;font-size:.97rem;overflow-wrap:anywhere}
.prose>*+*{margin-block-start:.9em}
.prose h1,.prose h2{font-size:1.15rem}.prose h3,.prose h4{font-size:1.03rem}
.prose img{border-radius:var(--r-s);margin-inline:auto;block-size:auto}
.prose a{color:var(--orange-d);text-decoration:underline;text-underline-offset:.2em}
.prose table{display:block;overflow-x:auto;font-size:.9rem}
.prose td,.prose th{border:1px solid var(--line);padding:.4rem .6rem}
.prose ul,.prose ol{padding-inline-start:1.4rem}
.prose details{background:var(--bg);border-radius:var(--r-s);padding:.5rem .8rem}

.toast{position:fixed;inset-inline:1rem;inset-block-end:calc(var(--tab) + var(--safe-b) + 1rem);z-index:50;margin-inline:auto;max-inline-size:420px;background:var(--black);color:#fff;padding:.8rem 1rem;border-radius:12px;box-shadow:0 10px 30px rgb(0 0 0/.3);display:flex;align-items:center;justify-content:space-between;gap:1rem;animation:up .2s ease-out}
.toast a{color:var(--orange);font-weight:800;white-space:nowrap}
@keyframes up{from{translate:0 20px;opacity:0}}
@media (min-width:1000px){.toast{inset-block-end:1.5rem}}

.empty,.soon{text-align:center;padding-block:3rem;display:grid;gap:1rem;justify-items:center}
.soon h1{font-size:1.4rem}.soon>*{grid-area:auto;max-inline-size:100%}.soon .search--page{inline-size:min(100%,32rem)}
.search--page{inline-size:min(100%,420px);border:1px solid var(--line)}
}

@layer pages{
/* Home */
.hero{margin-block-start:.9rem;position:relative}
.hero__track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--r);scrollbar-width:none}
.hero__track::-webkit-scrollbar{display:none}
.hero__slide{scroll-snap-align:start}
.hero__slide img{inline-size:100%;aspect-ratio:1552/600;object-fit:cover;block-size:auto;background:#222}
.hero__dots{display:flex;justify-content:center;gap:.35rem;margin-block-start:.5rem}
.hero__dots i{inline-size:7px;block-size:7px;border-radius:99px;background:#c9c9cf;transition:inline-size .2s}
.hero__dots i.on{inline-size:22px;background:var(--orange)}

.login-strip{display:flex;align-items:center;gap:.75rem;margin-block-start:1rem;border-radius:18px;padding:.75rem .9rem;font-size:.88rem;color:#fff;background:radial-gradient(24rem 8rem at 100% 0%,rgb(242 107 29/.35),transparent 70%),linear-gradient(135deg,#1c1c22,#111114);box-shadow:var(--sh)}
.login-strip p{display:grid;line-height:1.6;flex:1;min-inline-size:0}
.login-strip small{color:#b9b9c1;font-size:.8rem}
.login-strip__ic{flex:none;display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:12px;background:rgb(242 107 29/.16);color:var(--orange)}
.login-strip .btn{min-block-size:40px;white-space:nowrap;font-size:.88rem;padding-inline:1rem}
html.is-auth .login-strip{display:none}

.cats{display:grid;grid-auto-flow:column;grid-auto-columns:76px;gap:.75rem;overflow-x:auto;margin-block-start:1.1rem;padding-block-end:.4rem;scrollbar-width:none}
.cats__item{display:grid;justify-items:center;gap:.35rem;font-size:.75rem;text-align:center;line-height:1.4}
.cats__img{display:grid;place-items:center;inline-size:68px;block-size:68px;border-radius:50%;background:var(--surface);box-shadow:var(--sh);overflow:hidden;border:2px solid transparent;transition:border-color .15s}
.cats__img img{inline-size:52px;block-size:52px;object-fit:contain}
.cats__item:hover .cats__img{border-color:var(--orange)}
@media (min-width:1000px){.cats{grid-auto-flow:row;grid-template-columns:repeat(8,1fr);grid-auto-columns:auto}}
@media (min-width:1400px){.cats{grid-template-columns:repeat(16,1fr)}}

.banners{display:grid;gap:.75rem;margin-block-start:1.25rem}
.banners img{inline-size:100%;block-size:auto;border-radius:var(--r);background:#ddd}
.banners a{display:block;transition:transform .2s}
.banners a:hover{transform:translateY(-2px)}
@media (min-width:700px){.banners--2{grid-template-columns:repeat(2,1fr)}.banners--3{grid-template-columns:repeat(3,1fr)}}

.post{display:grid;gap:.5rem;background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;padding-block-end:.75rem;align-content:start}
.post__img,.post [data-noimg]{aspect-ratio:16/10;inline-size:100%;object-fit:cover;block-size:auto}
.post h3,.post h2{font-size:.92rem;padding-inline:.75rem;line-height:1.7}
.post p{font-size:.85rem;color:var(--ink2);padding-inline:.75rem}
.posts{display:grid;gap:1rem}
@media (min-width:700px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.posts{grid-template-columns:repeat(3,1fr)}}

/* Listing */
.list-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-block:.25rem .6rem}
.list-head h1{font-size:1.3rem}
.toolbar{display:grid;gap:.4rem;margin-block-end:.6rem}
.sorts{display:flex;align-items:center;gap:.25rem;overflow-x:auto;font-size:.85rem;color:var(--ink2);scrollbar-width:none}
.sorts a{padding:.3rem .7rem;border-radius:9px;white-space:nowrap}
.sorts a[aria-current]{background:var(--black);color:#fff;font-weight:700}
.term-desc{max-inline-size:calc(min(100%,1480px) - 2*var(--gut));background:var(--surface);border-radius:var(--r);padding:1.25rem;margin-block-start:1.5rem;max-block-size:22rem;overflow:auto}

/* Product */
.pd{display:grid;gap:1rem}
.pd__gallery{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:.75rem;min-inline-size:0}
.pd__slides{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pd__slides::-webkit-scrollbar{display:none}
.pd__slide{scroll-snap-align:center}
.pd__slide img,.pd__slide [data-noimg]{aspect-ratio:1;inline-size:auto;max-inline-size:100%;object-fit:contain;block-size:min(46dvh,100vw);margin-inline:auto}
@media (min-width:1000px){.pd__slide img,.pd__slide [data-noimg]{inline-size:100%;block-size:auto;max-block-size:none}}
.pd__thumbs{display:flex;gap:.4rem;overflow-x:auto;margin-block-start:.6rem;scrollbar-width:none}
.pd__thumbs button{flex:none;inline-size:52px;block-size:52px;border-radius:10px;border:2px solid var(--line);overflow:hidden;background:#fff}
.pd__thumbs button[aria-current]{border-color:var(--orange)}
.pd__thumbs img{inline-size:100%;block-size:100%;object-fit:contain}
.pd__info{min-inline-size:0}
.pd__brand{display:inline-block;color:var(--orange-d);font-weight:700;font-size:.85rem}
.pd__title{font-size:1.2rem;line-height:1.7;margin-block:.15rem .25rem}
.pd__sub{color:var(--ink2);font-size:.85rem;text-align:start;direction:ltr;unicode-bidi:plaintext}
.pd__rating{display:flex;align-items:center;gap:.25rem;color:#d48a00;font-weight:700;margin-block-start:.3rem}
.pd__h{font-size:.98rem;margin-block:1rem .5rem}
.pd__specs{display:grid;gap:.4rem}
.pd__specs li{display:grid;grid-template-columns:minmax(6.5rem,38%) 1fr;align-items:start;gap:1rem;background:var(--surface);border-radius:10px;padding:.5rem .8rem;font-size:.88rem;line-height:1.7}
.pd__specs span{color:var(--ink2)}
.pd__specs b{font-weight:600}
.pd__buy{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:1rem;display:grid;gap:.75rem;align-content:start}
.pd__row{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--ink2);padding-block-end:.6rem;border-block-end:1px dashed var(--line)}
.pd__row .i{color:var(--orange)}
.pd__vars{display:grid;gap:.5rem}
.pd__vars label{display:grid;gap:.25rem;font-size:.85rem;font-weight:700}
.pd__vars select{block-size:44px;border:1px solid var(--line);border-radius:10px;padding-inline:.75rem;background:#fff}
.pd__price{text-align:end}
.pd__was{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;color:#9a9aa3;font-size:.9rem}
.off{background:var(--red);color:#fff;border-radius:99px;padding:0 .5rem;font-size:.78rem;font-weight:800}
.pd__now{font-size:.9rem}
.pd__now b{font-size:1.55rem;font-weight:900}
.pd__now--muted{color:var(--ink2);font-weight:700;font-size:1rem;text-align:center}
.pd__qty{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;block-size:46px;padding-inline:.25rem}
.pd__qty button{inline-size:40px;block-size:40px;display:grid;place-items:center;border-radius:9px}
.pd__qty button:hover{background:var(--bg)}
.pd__qty output{font-weight:800;font-size:1.05rem}
.pd-sticky{position:fixed;inset-inline:0;inset-block-end:calc(var(--tab) + var(--safe-b));z-index:25;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--surface);padding:.6rem var(--gut);box-shadow:0 -6px 20px rgb(0 0 0/.08);translate:0 110%;transition:translate .2s}
.pd-sticky.show{translate:0 0}
.pd-sticky b{font-size:1.1rem;font-weight:900;margin-inline:.25rem}
.pd-sticky .btn{min-block-size:44px}
.pd-more{display:grid;gap:.75rem;margin-block-start:1rem}
.acc{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:0 1rem}
.acc summary{display:flex;align-items:center;justify-content:space-between;padding-block:.9rem;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary h2{font-size:1.02rem}
.acc[open] summary .i{rotate:180deg}
.acc>:last-child{padding-block-end:1rem}
.spec th,.spec td{padding:.55rem .6rem;border-block-end:1px solid var(--line);text-align:start;font-size:.9rem;vertical-align:top}
.spec th{inline-size:38%;color:var(--ink2);font-weight:500}
.pros{display:grid;gap:.75rem}
.pros ul{display:grid;gap:.25rem;font-size:.9rem}
.pros__good li::before{content:"+ ";color:var(--green);font-weight:900}
.pros__bad li::before{content:"− ";color:var(--red);font-weight:900}
.reviews{display:grid;gap:.75rem;margin-block-end:.75rem}
.reviews li{background:var(--bg);border-radius:10px;padding:.6rem .8rem;font-size:.9rem}
.stars{color:#e3a008;letter-spacing:1px}
@media (min-width:700px){.pros{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){
  .pd{grid-template-columns:minmax(0,520px) minmax(0,1fr) 340px;align-items:start;gap:1.25rem}
  .pd__buy{position:sticky;inset-block-start:9rem}
  .pd__title{font-size:1.35rem}
  .pd-sticky{display:none}
}

/* Article */
.article{max-inline-size:min(860px,calc(100% - 2*var(--gut)));background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:1.25rem var(--gut)}
.article h1{font-size:1.35rem;margin-block-end:.5rem}
.article__img{border-radius:var(--r-s);margin-block:1rem;inline-size:100%;block-size:auto}

/* Cart */
.cart{display:grid;gap:1rem;align-items:start}
.cart__items{display:grid;gap:.75rem}
.citem{display:grid;grid-template-columns:76px 1fr;gap:.75rem;background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:.75rem}
.citem img{inline-size:76px;block-size:76px;object-fit:contain;border-radius:10px;background:#fff}
.citem h2{font-size:.9rem;font-weight:600;line-height:1.7}
.citem__row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-block-start:.4rem}
.citem__qty{display:flex;align-items:center;gap:.25rem;border:1px solid var(--line);border-radius:10px}
.citem__qty button{inline-size:34px;block-size:34px;display:grid;place-items:center}
.citem__qty output{min-inline-size:1.5rem;text-align:center;font-weight:800}
.citem__price{font-weight:800}
.citem__warn{color:var(--red);font-size:.82rem}
.cart__sum{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:1rem;display:grid;gap:.6rem}
.cart__sum>p:first-child{display:flex;justify-content:space-between;font-size:1.05rem}
@media (min-width:1000px){.cart{grid-template-columns:1fr 340px}.cart__sum{position:sticky;inset-block-start:9rem}}
}

/* ===== Account, checkout ===== */
@layer pages{
.box{background:var(--surface);border-radius:18px;box-shadow:var(--sh);padding:1rem 1.1rem;margin-block-end:1rem}
.box h2{font-size:1.02rem;margin-block-end:.75rem;display:flex;align-items:center;gap:.5rem}
.box__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-block-end:.75rem}
.box__head h1,.box__head h2{margin:0;font-size:1.1rem}
.btn--sm{min-block-size:36px;padding:.3rem .8rem;font-size:.85rem;border-radius:10px}
.link{color:var(--orange-d);font-weight:700;font-size:.88rem;background:none;border:0;padding:.25rem 0;cursor:pointer}
.link--danger{color:var(--red)}
.link[disabled]{color:#999;cursor:default}
.field{display:grid;gap:.3rem;font-size:.86rem;font-weight:600}
.field input,.field select,.field textarea{inline-size:100%;min-block-size:46px;border:1px solid var(--line);border-radius:12px;padding:.55rem .8rem;background:#fff;font-weight:400;font-size:1rem}
.field textarea{min-block-size:auto;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgb(242 107 29/.18)}
.field em{color:var(--red);font-style:normal;font-size:.8rem;font-weight:500}
.field--wide{grid-column:1/-1}
.grid2{display:grid;gap:.8rem}
@media (min-width:700px){.grid2{grid-template-columns:1fr 1fr}.grid2>.form-msg,.grid2>.btn{grid-column:1/-1;justify-self:start}}
.form-msg,.auth__msg{font-size:.86rem;color:var(--red);min-block-size:1.2em}
.form-msg.ok,.auth__msg.ok{color:var(--green)}
.notice{background:#fff4ec;border:1px solid #ffd7bd;color:#8a3a00;border-radius:12px;padding:.6rem .85rem;font-size:.88rem;margin-block-end:.75rem}
.notice--warn{background:#fff8e1;border-color:#ffe08a;color:#7a5600}
.notice--ok{background:#e9f7ef;border-color:#b7e4c7;color:#14532d}
.status{display:inline-block;border-radius:99px;padding:.1rem .7rem;font-size:.78rem;font-weight:700;background:#eee;color:#444;white-space:nowrap}
.status--processing,.status--completed{background:#e9f7ef;color:#14803c}
.status--pending,.status--on-hold{background:#fff4ec;color:#bf4a07}
.status--failed,.status--cancelled,.status--refunded{background:#fdecea;color:#c7261b}

/* login */
.auth-wrap{display:grid;place-items:center;padding-block:2rem}
.auth{inline-size:min(100%,420px);background:var(--surface);border-radius:22px;box-shadow:0 20px 50px rgb(0 0 0/.08);padding:1.75rem 1.4rem;text-align:center}
.auth__logo{margin:0 auto .5rem;border-radius:18px}
.auth h1{font-size:1.25rem;margin-block-end:.5rem}
.auth__step{display:grid;gap:.85rem;text-align:start}
.auth__step .link{justify-self:center}
.auth__row{display:flex;justify-content:space-between}
.otp{letter-spacing:.6em;text-align:center;font-size:1.4rem!important;font-weight:800!important}
.auth__terms{margin-block-start:1rem;font-size:.78rem}
.auth__terms a{color:var(--orange-d)}

/* account */
.acct{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;padding-block:1rem}
.acct__side{background:var(--surface);border-radius:18px;box-shadow:var(--sh);padding:1rem;align-self:start}
.acct__me{display:flex;align-items:center;gap:.7rem;padding-block-end:.8rem;border-block-end:1px solid var(--line)}
.acct__me p{display:grid;line-height:1.5}
.acct__avatar{display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:14px;background:#fff4ec;color:var(--orange)}
.acct__nav{display:flex;gap:.25rem;overflow-x:auto;padding-block-start:.6rem}
.acct__nav a,.acct__nav button{display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-radius:10px;font-size:.9rem;white-space:nowrap;background:none;border:0;cursor:pointer;color:inherit}
.acct__nav a:hover,.acct__nav button:hover{background:var(--bg)}
@media (min-width:1000px){.acct{grid-template-columns:280px minmax(0,1fr)}.acct__side{position:sticky;inset-block-start:9rem}.acct__nav{flex-direction:column}}
.olist{display:grid}
.olist__row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:.75rem;padding:.75rem .25rem;border-block-end:1px solid var(--line)}
.olist__row span:first-child{display:grid;line-height:1.5}
.olist__row small{color:var(--ink2);font-size:.78rem}
.olist__row:hover{background:#fafafa}
@media (max-width:520px){.olist__row{grid-template-columns:1fr auto}.olist__row>:nth-child(3){grid-column:1}.olist__row>.i{display:none}}
.addr-list,.addr-pick{display:grid;gap:.6rem}
.addr{border:1px solid var(--line);border-radius:14px;padding:.75rem .9rem;font-size:.9rem;line-height:1.9}
.addr__act{display:flex;gap:1rem}
.addr--pick{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start;cursor:pointer}
.addr--pick:has(input:checked){border-color:var(--orange);background:#fffaf6;box-shadow:0 0 0 2px rgb(242 107 29/.15)}
.addr--pick input{margin-block-start:.45rem;accent-color:var(--orange)}
@media (min-width:700px){.addr-list{grid-template-columns:1fr 1fr}}

/* modal */
.modal{border:0;border-radius:20px;padding:0;inline-size:min(94vw,640px);max-block-size:92dvh;box-shadow:0 30px 80px rgb(0 0 0/.3)}
.modal::backdrop{background:rgb(0 0 0/.5);backdrop-filter:blur(2px)}
.modal__body{padding:1.1rem;display:grid;gap:.9rem}
.modal__head{display:flex;justify-content:space-between;align-items:center}
.modal__head h2{font-size:1.05rem}
.modal__head button{display:grid;place-items:center;inline-size:38px;block-size:38px;border-radius:10px;background:var(--bg);border:0;cursor:pointer}

/* order */
.order-view{padding-block:.5rem 1rem}
.otable{inline-size:100%;font-size:.9rem;margin-block-start:.5rem}
.otable th,.otable td{padding:.6rem .4rem;border-block-end:1px solid var(--line);text-align:start;vertical-align:top}
.otable thead th{color:var(--ink2);font-weight:600;font-size:.82rem}
.otable td:last-child,.otable th:last-child{text-align:end;white-space:nowrap}
.otable tfoot th{font-weight:500;color:var(--ink2)}
.otable__total th,.otable__total td{font-weight:900;font-size:1.05rem;color:var(--ink)!important}

/* checkout */
.co{display:grid;gap:1rem;align-items:start}
.co__n{display:inline-grid;place-items:center;inline-size:26px;block-size:26px;border-radius:50%;background:var(--black);color:#fff;font-size:.8rem}
.parcel{border:0;padding:0;margin:0 0 .75rem;display:grid;gap:.4rem}
.parcel legend{font-weight:700;font-size:.88rem;margin-block-end:.35rem;color:var(--ink2)}
.opt{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;cursor:pointer;font-size:.92rem;line-height:1.7}
.opt:has(input:checked){border-color:var(--orange);background:#fffaf6}
.opt input{margin-block-start:.35rem;accent-color:var(--orange)}
.opt--check{border-style:dashed}
.opts{display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opts .opt span{display:grid;line-height:1.5}
.opts .opt small{color:var(--ink2);font-size:.75rem}
.co__ins{display:grid;gap:.5rem;margin-block-start:.75rem}
.gws{display:grid;gap:.5rem}
.gw{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;border:1px solid var(--line);border-radius:14px;padding:.7rem .85rem;cursor:pointer}
.gw.on,.gw:has(input:checked){border-color:var(--orange);background:#fffaf6;box-shadow:0 0 0 2px rgb(242 107 29/.12)}
.gw input{accent-color:var(--orange)}
.gw__t{display:grid;line-height:1.6}
.gw__t small{color:var(--ink2);font-size:.8rem}
.gw__fee{color:var(--orange-d)!important;font-weight:700}
.gw__p{font-weight:800;white-space:nowrap}
.co__lines{list-style:none;padding:0;display:grid;gap:.6rem;max-block-size:340px;overflow:auto}
.co__lines li{display:grid;grid-template-columns:52px 1fr auto;gap:.6rem;align-items:center;font-size:.84rem}
.co__lines img{inline-size:52px;block-size:52px;object-fit:contain;border-radius:10px;background:#fff;border:1px solid var(--line)}
.co__lines span{display:grid;line-height:1.5}
.co__lines a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co__lines small{color:var(--ink2)}
.co__totals{display:grid;gap:.45rem;margin:1rem 0;padding-block-start:.8rem;border-block-start:1px solid var(--line);font-size:.9rem}
.co__totals>div{display:flex;justify-content:space-between;gap:1rem}
.co__totals dd{margin:0;font-weight:700}
.co__grand{font-size:1.08rem;padding-block-start:.5rem;border-block-start:1px dashed var(--line)}
.co__grand dd{font-weight:900;color:var(--ink)}
.co__errors{color:var(--red);font-size:.86rem;display:grid;gap:.25rem;margin-block-end:.6rem}
.co__safe{display:flex;align-items:center;gap:.35rem;justify-content:center;margin-block-start:.6rem;font-size:.8rem}
@media (min-width:1000px){.co{grid-template-columns:1fr 380px}.co__sum{position:sticky;inset-block-start:9rem}}
.co__bar{position:fixed;inset-inline:0;inset-block-end:calc(var(--tab) + var(--safe-b));z-index:25;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--surface);padding:.6rem var(--gut);box-shadow:0 -6px 20px rgb(0 0 0/.1)}
.co__bar p{display:grid;line-height:1.4}
.co__bar small{color:var(--ink2);font-size:.75rem}
.co__bar b{font-size:1.1rem;font-weight:900}
.co__bar .btn{min-block-size:44px}
@media (min-width:1000px){.co__bar{display:none}}
@media (max-width:999px){.co{padding-block-end:4.5rem}}

/* result */
.result{text-align:center;display:grid;gap:.6rem;justify-items:center;padding-block:2.5rem;max-inline-size:640px!important}
.result__ic{display:grid;place-items:center;inline-size:76px;block-size:76px;border-radius:50%;color:#fff}
.result__ic .i{inline-size:40px;block-size:40px}
.result--ok .result__ic{background:var(--green)}
.result--fail .result__ic{background:var(--red)}
.result h1{font-size:1.35rem}
.result__act{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-block-start:.5rem}
}

.onote{padding:.6rem .8rem;border-inline-start:3px solid var(--orange);background:rgb(242 107 29/.06);border-radius:8px;margin-block:.5rem}.onote p{margin:0 0 .2rem}
.co__coupon{margin-block:.75rem;padding-block:.75rem;border-block:1px dashed var(--line,#e3e3e8)}
.co__cform{display:flex;gap:.4rem}.co__cform input{flex:1;min-inline-size:0;padding:.55rem .7rem;border:1px solid var(--line,#d8d8de);border-radius:10px;font:inherit;background:var(--bg,#fff);color:inherit}
.co__capplied{margin:0;font-size:.9rem;color:#14803c}.co__cerr{margin:.4rem 0 0;font-size:.85rem;color:#c7261b}
.co__disc dd{color:#14803c}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em}
.co__cform input{text-transform:uppercase}.co__cform input::placeholder{text-transform:none}
.notify{display:grid;gap:.45rem;margin-block-start:.75rem;padding:.85rem;border:1px dashed #d9d9e0;border-radius:14px;background:#fafafb}
.notify[hidden]{display:none}
.notify__t{display:flex;align-items:center;gap:.4rem;margin:0;font-weight:800}
.notify__d{margin:0;font-size:.85rem;color:#6b6b76}
.notify__row{display:flex;gap:.4rem}.notify__row input{flex:1;min-inline-size:0;padding:.6rem .7rem;border:1px solid #d0d0d8;border-radius:10px;font:inherit;background:#fff}
.notify__msg{margin:0;font-size:.85rem}.notify__msg.ok{color:#14803c}.notify__msg.err{color:#c7261b}
.btn--dark{background:#141418;color:#fff;border-color:#141418}
.reviews__reply{margin-block-start:.4rem;padding:.5rem .75rem;border-inline-start:3px solid var(--orange);background:rgb(242 107 29/.06);border-radius:8px;font-size:.9rem}
.rform{display:grid;gap:.6rem;margin-block-start:1rem;padding:1rem;border:1px solid #e4e4ea;border-radius:14px}.rform[hidden]{display:none}
.rform h3{margin:0;font-size:1rem}.rform textarea{inline-size:100%;padding:.6rem .7rem;border:1px solid #d0d0d8;border-radius:10px;font:inherit}
.rform__stars{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:.15rem;border:0;padding:0;margin:0}
.rform__stars legend{float:right;margin-inline-end:.5rem;font-size:.9rem;color:#6b6b76}
.rform__stars input{position:absolute;opacity:0;pointer-events:none}
.rform__stars label{font-size:1.7rem;line-height:1;color:#d4d4da;cursor:pointer}
.rform__stars label:hover,.rform__stars label:hover~label,.rform__stars input:checked~label{color:#f5a524}
.rform__stars input:focus-visible+label{outline:2px solid var(--orange);border-radius:4px}
.rform__msg{margin:0;font-size:.9rem}.rform__msg.ok{color:#14803c}.rform__msg.err{color:#c7261b}
.narrow-page{max-inline-size:44rem;margin-inline:auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.form-grid .field--wide,.form-grid .btn,.form-grid .form-msg{grid-column:1/-1}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}}
.form-grid .field{display:grid;gap:.3rem}.form-grid .field span{font-size:.88rem;font-weight:600}
.form-grid input,.form-grid select,.form-grid textarea{inline-size:100%;padding:.6rem .7rem;border:1px solid #d0d0d8;border-radius:10px;font:inherit;background:#fff;color:inherit}
.form-msg.ok{color:#14803c}.form-msg.err{color:#c7261b}
.hp{position:absolute!important;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start;margin-block:1rem}
@media (max-width:860px){.contact__grid{grid-template-columns:1fr}}
.contact__branches{display:grid;gap:.75rem}.contact__branches .box h2{display:flex;align-items:center;gap:.4rem;font-size:1rem;margin:0 0 .4rem}
.contact__phones{display:flex;flex-wrap:wrap;gap:.4rem}.contact__social{display:flex;gap:.5rem;flex-wrap:wrap}
.track ul{padding-inline-start:1.2rem}.wlist{list-style:none;padding:0;display:grid;gap:.75rem}.wlist li{padding-block-end:.75rem;border-block-end:1px solid #eee}
.status--new{background:#fff4ec;color:#bf4a07}.status--open{background:#eef4ff;color:#174ea6}.status--done{background:#e9f7ef;color:#14803c}
.contact__hours{display:flex;align-items:center;gap:.35rem}

/* Landing pages (/gaming/, /workstations/) */
@layer pages{
.lnd{--acc:var(--orange);--hero1:#17110d;--hero2:#3a1a07}
.lnd--work{--acc:#3b9cff;--hero1:#0b1220;--hero2:#132a4a}
.lnd-hero{background:radial-gradient(120% 140% at 85% 0%,var(--hero2),var(--hero1) 60%);color:#f3f3f5;padding-block:1rem 2.2rem;margin-block-end:1.5rem}
.lnd-hero__in{display:grid;gap:.6rem;max-inline-size:62rem}
.crumbs--light{color:#b9b9c2}.crumbs--light a:not(:last-child)::after{color:#777}
.lnd-hero h1{font-size:clamp(1.6rem,4.5vw,2.6rem);color:#fff}
.lnd-hero__lead{font-size:clamp(1.05rem,2.4vw,1.3rem);font-weight:800;color:var(--acc)}
.lnd-hero__p{color:#d4d4dc;max-inline-size:48rem}
.lnd-hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:.4rem}
.lnd .btn--ghost{background:transparent;color:inherit;border:1.5px solid currentColor}
.lnd-hero .btn--ghost{color:#fff;border-color:#ffffff55}
.lnd--work .btn--orange{background:var(--acc);color:#fff}
.lnd-hero__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:.6rem}
.lnd-hero__chips li{font-size:.8rem;padding:.25rem .7rem;border-radius:99px;background:#ffffff14;color:#e7e7ec}
.lnd-hero__chips li::before{content:"✓ ";color:var(--acc);font-weight:800}
.lnd-sec-head{display:grid;gap:.2rem;margin-block-end:1rem}
.lnd-sec-head h2{font-size:clamp(1.2rem,3vw,1.6rem)}
.lnd-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,16.5rem),1fr))}
.lnd-tier{display:flex;flex-direction:column;background:var(--surface);border-radius:18px;box-shadow:var(--sh);overflow:hidden;border-block-start:4px solid var(--acc)}
.lnd-tier__pic{position:relative;display:grid;place-items:center;background:linear-gradient(180deg,#f7f7f9,#ececf1);aspect-ratio:4/3;padding:1rem}
.lnd-tier__pic img{max-block-size:100%;inline-size:auto;object-fit:contain;mix-blend-mode:multiply}
.lnd-tier__lvl{position:absolute;inset-block-start:.6rem;inset-inline-start:.6rem;font-size:.72rem;font-weight:800;padding:.15rem .55rem;border-radius:99px;background:#141418;color:#fff}
.lnd-tier__body{display:flex;flex-direction:column;gap:.35rem;padding:1rem;flex:1}
.lnd-tier h3{font-size:1.25rem}
.lnd-tier__sub{color:var(--ink2);font-size:.88rem}
.lnd-tier__price{font-weight:800;color:var(--acc);font-size:1.05rem}
.lnd--work .lnd-tier__price{color:#1f6fc5}
.lnd-tier__specs{display:grid;gap:.35rem;margin-block:.4rem .8rem;flex:1}
.lnd-tier__specs div{display:grid;grid-template-columns:6.2rem 1fr;gap:.4rem;font-size:.82rem;padding-block-end:.35rem;border-block-end:1px dashed var(--line)}
.lnd-tier__specs dt{color:var(--ink2)}
.lnd-tier__specs dd{margin:0;font-weight:600;overflow-wrap:anywhere;text-align:start;font-feature-settings:normal;unicode-bidi:plaintext}
.lnd-ready{margin-block-start:2rem}
.lnd-band{display:grid;gap:1rem;align-items:center;margin-block:2rem;padding:1.4rem;border-radius:20px;background:#141418;color:#f1f1f4}
.lnd-band h2{font-size:1.2rem;color:#fff}.lnd-band p{color:#c9c9d1;font-size:.92rem}
.lnd-band .btn--ghost{color:#fff;border-color:#ffffff55}
.lnd-band__cta{display:flex;flex-wrap:wrap;gap:.6rem}
@media (min-width:800px){.lnd-band{grid-template-columns:1fr auto}.lnd-hero{padding-block:1.4rem 3rem}}
}
.promo__call{color:#fff;font-weight:700}.promo__call b{color:var(--orange);font-weight:800;letter-spacing:.02em}
/* Bank transfer page */
@layer pages{
.bt{display:grid;gap:1rem;margin-block-end:2rem}
.bt__amount{font-size:1.1rem}.bt__amount b{color:var(--orange-d);font-size:1.3rem}
.bt__accs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.bt__acc{margin:0}
.bt__bank{display:flex;align-items:center;gap:.7rem;margin-block-end:.6rem}
.bt__bank small{display:block;color:var(--ink2);font-size:.8rem}
.bt__logo{inline-size:48px;block-size:48px;object-fit:contain;border-radius:10px;background:#f4f4f6;flex:none}
.bt__logo--none{display:grid;place-items:center;color:var(--ink2)}
.bt__acc dl{display:grid;gap:.5rem;margin:0}
.bt__acc dl div{display:grid;gap:.15rem}
.bt__acc dt{font-size:.8rem;color:var(--ink2)}
.bt__acc dd{margin:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:#f6f6f8;border-radius:10px;padding:.35rem .5rem}
.bt__num{font-weight:800;letter-spacing:.04em;font-feature-settings:normal;overflow-wrap:anywhere}
.bt__form{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.bt__form .field--wide,.bt__form .form-msg,.bt__form button{grid-column:1/-1}
.bt__list{list-style:none;padding:0;display:grid;gap:.5rem}
.bt__list li{display:flex;justify-content:space-between;gap:.5rem;padding-block-end:.5rem;border-block-end:1px solid var(--line)}
.notice--ok{background:#e9f7ef;color:#14803c;padding:.6rem .8rem;border-radius:10px}
}

/* Product extras, compare bar, recently viewed, checkout additions */
@layer components{
.pd__acts{display:flex;gap:.5rem;margin-block:.5rem}
.pd__act{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;padding:.35rem .7rem;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink2)}
.pd__act:hover{color:var(--ink)}
.pd__act.on{color:var(--orange-d);border-color:#f6c7a8;background:#fff6f0}
.pd__act.on .i{fill:currentColor}
.pd__eta{display:flex;gap:.4rem;align-items:flex-start;font-size:.85rem;color:var(--green);margin-block:.6rem 0}
.pd__eta .i{flex:none;margin-block-start:.2rem}
.pd__issue{display:flex;align-items:center;gap:.4rem;margin-block-start:.6rem;font-size:.85rem;color:var(--ink2);text-decoration:underline dotted;text-underline-offset:4px}
.pd__issue:hover{color:var(--orange-d)}
.pi__links{display:flex;gap:.5rem;flex-wrap:wrap;margin-block:.6rem}
.qa{list-style:none;padding:0;display:grid;gap:.8rem}
.qa li{padding-block-end:.8rem;border-block-end:1px solid var(--line)}
.qa__a{margin-block-start:.4rem;padding:.6rem .8rem;border-radius:10px;background:#f6f6f8;font-size:.92rem}
.pchart{margin:0}
.pchart svg{inline-size:100%;block-size:auto;font-family:var(--font)}
.pchart__grid{stroke:var(--line);stroke-dasharray:4 4}
.pchart__line{fill:none;stroke:var(--orange);stroke-width:2.5}
.pchart__now{fill:var(--orange)}
.pchart__min{fill:var(--green)}
.pchart__t,.pchart__d{font-size:12px;fill:var(--ink2)}
.pchart figcaption{font-size:.85rem;color:var(--ink2);margin-block-start:.3rem}
.cmpbar{position:fixed;inset-inline:0;inset-block-end:calc(var(--tab) + var(--safe-b) + 74px);margin-inline:auto;inline-size:max-content;max-inline-size:calc(100% - 24px);display:flex;align-items:center;gap:.75rem;padding:.5rem .6rem .5rem 1rem;background:#141418;color:#fff;border-radius:99px;box-shadow:0 8px 30px rgb(0 0 0/.25);z-index:40;font-size:.85rem}
.cmpbar .link{color:#bbb}
@media (min-width:1000px){.cmpbar{inset-block-end:16px}}
.recent{margin-block:1.5rem}
.recent__list{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-block-end:.4rem}
.recent__item{flex:none;inline-size:9.5rem;scroll-snap-align:start;background:var(--surface);border-radius:14px;box-shadow:var(--sh);padding:.6rem;display:grid;gap:.3rem;font-size:.8rem}
.recent__item img{inline-size:100%;block-size:auto;aspect-ratio:1;object-fit:contain}
.recent__item span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co__btype{display:flex;gap:.5rem;flex-wrap:wrap;margin-block:.4rem .6rem}
.co__btype .opt{flex:1;min-inline-size:12rem}
.co__company{margin-block-start:.4rem}
.co__club{margin-block:.6rem;padding:.6rem;border-radius:12px;background:#fff8f2}
.co__eta{margin-block-start:.6rem;color:var(--green);font-size:.88rem}
}
@layer pages{
.cmp__scroll{overflow-x:auto;background:var(--surface);border-radius:18px;box-shadow:var(--sh)}
.cmp__t{min-inline-size:calc(9rem + var(--n) * 12rem);font-size:.86rem}
.cmp__t th,.cmp__t td{padding:.6rem .7rem;border-block-end:1px solid var(--line);vertical-align:top;text-align:start}
.cmp__t tbody th{position:sticky;inset-inline-start:0;background:#fafafb;color:var(--ink2);font-weight:600;inline-size:9rem}
.cmp__t thead th{inline-size:12rem}
.cmp__p{display:grid;gap:.4rem;font-size:.85rem}
.cmp__p img{inline-size:120px;block-size:120px;object-fit:contain;margin-inline:auto}
.cmp__price{font-weight:800;color:var(--orange-d);margin-block:.3rem}
}
/* account: wishlist, club, documents */
.acct .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding:0}
.acct .otable{display:block;overflow-x:auto}
.club-bal{font-size:1.1rem}.club-bal b{color:var(--orange,#f60);font-size:1.4rem}
.order-view .docs{display:flex;flex-wrap:wrap;gap:.5rem}
/* timed sale + installments */
.pd__flash{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .8rem;margin-block:.6rem;padding:.55rem .8rem;border-radius:12px;background:linear-gradient(90deg,#ff5a1f,#ff8a1f);color:#fff;font-size:.9rem}
.pd__flash b{display:flex;align-items:center;gap:.35rem}
.pd__flash [data-cd]{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pd__flash.is-over{background:#888}
.card__flash{position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem;display:flex;align-items:center;gap:.25rem;padding:.12rem .45rem;border-radius:99px;background:#ff5a1f;color:#fff;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;z-index:1}
.card__flash .i{inline-size:.85rem;block-size:.85rem}
.card__flash.is-over{display:none}
.rail__cd{display:inline-flex;align-items:center;gap:.3rem;margin-inline-start:.6rem;padding:.1rem .55rem;border-radius:99px;background:#ff5a1f;color:#fff;font-size:.8rem;font-weight:700;vertical-align:middle;font-variant-numeric:tabular-nums}
.pd__inst{display:flex;align-items:center;gap:.4rem;margin-block:.3rem .6rem;color:var(--muted,#666);font-size:.88rem}
.pd__inst b{color:var(--ink,#111)}
/* review photos */
.rform__photos{position:relative;display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;border:1px dashed var(--line);border-radius:12px;cursor:pointer;font-size:.9rem}
.rform__photos input{inline-size:1px;block-size:1px;opacity:0;position:absolute}
.rform__photos:focus-within{outline:2px solid var(--orange)}
.rform__prev{display:flex;gap:.4rem;flex-wrap:wrap}.rform__prev img{inline-size:72px;block-size:72px;object-fit:cover;border-radius:10px}
.reviews__photos{display:flex;gap:.4rem;flex-wrap:wrap;margin-block:.4rem}
.reviews__photos img{inline-size:88px;block-size:88px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.s-fixed{padding:.5rem 1rem;margin:0;font-size:.82rem;color:#8a5a00;background:#fff6e5}