/* 5baho "Vitrina" (2026-11-10): krem vitrina, ink matn, rang faqat videodan; limon faqat pul tugmalarida.
   Harakat faqat transform/opacity; prefers-reduced-motion'da hammasi joyida turadi. Klasslar v- bilan. */
:root{
  --v-cream:#F3EEE3;--v-card:#FBF8F2;--v-sunk:#ECE6D8;--v-line:#E2DACA;--v-hair:#E9E3D5;
  --v-ink:#0B0E13;--v-ink2:#2A2722;--v-mute:#5E594F;--v-faint:#8A8478;
  --v-lemon:#FFD60A;--v-lemon2:#F2C600;
  --v-night:#0B0E13;--v-night2:#15181F;--v-nline:#262A31;--v-ntext:#F3EEE3;--v-nmute:#A39E93;
  --v-max:1240px;--v-gut:clamp(16px,4vw,40px);
  --v-r:22px;--v-r-sm:14px;
  --v-ease:cubic-bezier(.16,1,.3,1);
  --v-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --v-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
html{background:var(--v-cream);scrollbar-color:rgba(11,14,19,.28) transparent;scrollbar-width:thin;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--v-cream);color:var(--v-ink);font:500 16px/1.55 var(--v-sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--v-ink);color:var(--v-cream)}
:focus-visible{outline:2px solid var(--v-ink);outline-offset:3px;border-radius:8px}
[data-tone=dark] :focus-visible{outline-color:var(--v-cream)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
img,video{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.04em;text-wrap:balance}
p{margin:0}
.v-wrap{width:min(var(--v-max),100% - var(--v-gut)*2);margin-inline:auto}
.v-num{font-family:var(--v-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* tugmalar */
.v-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;
  font:700 15.5px/1 var(--v-sans);text-decoration:none;white-space:nowrap;transition:transform .2s var(--v-ease),background-color .2s,color .2s}
.v-btn:active{transform:scale(.97)}
.v-btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--v-ease)}
.v-btn:hover svg.v-go{transform:translateX(3px)}
.v-ink{background:var(--v-ink);color:var(--v-cream)}
.v-ink:hover{background:#23272E}
.v-line{background:transparent;color:var(--v-ink);box-shadow:inset 0 0 0 1.5px var(--v-line)}
.v-line:hover{box-shadow:inset 0 0 0 1.5px var(--v-ink)}
.v-cash{background:var(--v-lemon);color:var(--v-ink)}
.v-cash:hover{background:var(--v-lemon2)}
.v-light{background:var(--v-cream);color:var(--v-ink)}
.v-light:hover{background:#fff}
.v-ghost-n{background:transparent;color:var(--v-ntext);box-shadow:inset 0 0 0 1.5px var(--v-nline)}
.v-ghost-n:hover{box-shadow:inset 0 0 0 1.5px var(--v-ntext)}
.v-sm{height:42px;padding:0 18px;font-size:14px}

/* sarlavhalar */
.v-h2{font:700 clamp(32px,4.4vw,58px)/1.02 var(--v-sans);letter-spacing:-.045em}
.v-lede{font:500 clamp(16px,1.35vw,18.5px)/1.55 var(--v-sans);color:var(--v-mute);max-width:52ch}
.v-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(24px,3vw,40px)}
.v-head .v-lede{margin-top:14px}
.v-more{display:inline-flex;align-items:center;gap:8px;font:700 15px var(--v-sans);text-decoration:none;white-space:nowrap;padding:10px 0}
.v-more svg{width:17px;height:17px;transition:transform .3s var(--v-ease)}
.v-more:hover svg{transform:translateX(4px)}
.v-sec{padding:clamp(64px,9vw,128px) 0}
.v-sec+.v-sec{padding-top:0}

/* paydo bo'lish: JS bo'lmasa hammasi ko'rinadi */
.js .v-rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--v-ease),transform .7s var(--v-ease);transition-delay:calc(var(--d,0) * 60ms)}
.js .v-rv.v-in{opacity:1;transform:none}

/* video plitka */
.v-tile{position:relative;overflow:hidden;border-radius:var(--v-r);background:#1B1A17;isolation:isolate;color:#fff;text-decoration:none;display:block}
.v-tile>img,.v-tile>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--v-ease),opacity .6s}
.v-tile>video{opacity:0}
.v-tile>video.v-play{opacity:1}
@media (hover:hover){.v-tile:hover>img,.v-tile:hover>video{transform:scale(1.035)}}
.v-tile::after{content:"";position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(180deg,transparent,rgba(8,9,11,.82));z-index:1;pointer-events:none}
.v-tile .v-cap{position:absolute;z-index:2;left:16px;right:16px;bottom:14px}
.v-tile .v-where{font:600 12.5px/1.3 var(--v-sans);color:rgba(243,238,227,.72)}
.v-tile .v-ttl{font:700 15px/1.3 var(--v-sans);color:var(--v-ntext);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* narx: imzo harakati — eski narx chiziladi, yangisi suriladi */
.v-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:8px}
.v-new{white-space:nowrap;font:700 21px/1 var(--v-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--v-ntext)}
.v-old{position:relative;font:500 13px/1 var(--v-mono);color:rgba(243,238,227,.6);font-variant-numeric:tabular-nums}
.v-old::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:currentColor;transform-origin:0 50%;transform:scaleX(1)}
.js .v-strike .v-old::after{transform:scaleX(0);transition:transform .55s var(--v-ease) .25s}
.js .v-strike .v-new{opacity:0;transform:translateY(10px);transition:opacity .5s var(--v-ease) .6s,transform .6s var(--v-ease) .6s}
.js .v-strike.v-in .v-old::after{transform:scaleX(1)}
.js .v-strike.v-in .v-new{opacity:1;transform:none}
.v-off{position:absolute;z-index:2;top:12px;left:12px;height:26px;padding:0 9px;border-radius:8px;background:var(--v-lemon);color:var(--v-ink);
  display:inline-flex;align-items:center;font:700 12.5px/1 var(--v-mono);letter-spacing:-.02em}
.v-clock{position:absolute;z-index:2;top:12px;right:12px;height:26px;padding:0 9px;border-radius:8px;background:rgba(8,9,11,.55);color:var(--v-ntext);
  display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--v-mono);font-variant-numeric:tabular-nums}
.v-clock svg{width:13px;height:13px}
.v-sample{position:absolute;z-index:2;top:12px;right:12px;font:600 11.5px/1 var(--v-mono);letter-spacing:.08em;color:rgba(243,238,227,.7);text-transform:uppercase}
.v-stock{height:3px;border-radius:2px;background:rgba(243,238,227,.22);margin-top:10px;overflow:hidden}
.v-stock i{display:block;height:100%;background:var(--v-ntext);transform-origin:0 50%;transform:scaleX(var(--p,.5))}

/* gorizontal javon */
.v-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,23vw,290px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--v-gut) 8px;margin-inline:calc(var(--v-gut) * -1);scrollbar-width:none;overscroll-behavior-x:contain}
.v-rail::-webkit-scrollbar{display:none}
.v-rail>*{scroll-snap-align:start;aspect-ratio:4/5.4}
.v-railnav{display:flex;gap:8px}
.v-round{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--v-line);transition:box-shadow .2s,transform .2s var(--v-ease)}
.v-round:hover{box-shadow:inset 0 0 0 1.5px var(--v-ink)}
.v-round:active{transform:scale(.94)}
.v-round svg{width:18px;height:18px}

@media (max-width:760px){
  .v-head{flex-direction:column;align-items:flex-start;gap:6px}
  .v-railnav{display:none}
  .v-btn{height:50px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .v-rv,.js .v-strike .v-new{opacity:1;transform:none}
  .js .v-strike .v-old::after{transform:scaleX(1)}
}