/* Yaqiin — онлайн дўкон. Бренд: navy #32295F · зар #D7B56D */
:root{
  --paper:#FAFAFB; --surface:#FFF; --surface-2:#F3F3F6;
  --line:#E1DFE8; --line-2:#ECEBF1;
  --ink:#221D42; --ink-2:#5B5578; --ink-3:#918BA6;
  --gold:#B08F42; --ok:#3E6B52; --warn:#8A6A2E;
  --f:"Manrope","Helvetica Neue",Arial,sans-serif;
  --lg-light:block; --lg-dark:none;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0B0916; --surface:#131020; --surface-2:#1A1729;
  --line:#2A2440; --line-2:#211C33;
  --ink:#EFEDF5; --ink-2:#A8A2C0; --ink-3:#736D8C; --gold:#D7B56D; --ok:#7FBD9B; --warn:#C9A867;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.wrap{max-width:1400px;margin:0 auto;padding:0 46px}
@media(max-width:760px){.wrap{padding:0 18px}}
.lbl{font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}

/* тепа */
.strip{border-bottom:1px solid var(--line-2)}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:36px;flex-wrap:wrap}
.strip p{margin:0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.stripr{display:flex;align-items:center;gap:22px}
.strip .geo{display:flex;align-items:center;gap:7px}
.langs{display:flex;gap:2px}
.langs button{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:2px 5px}
.langs button:hover{color:var(--ink-2)}
.langs button.on{color:var(--ink);font-weight:600}
.strip select{background:none;border:none;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);cursor:pointer}
header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line-2)}
.hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px;gap:20px}
.hdr-left,.hdr-right{display:flex;align-items:center;gap:24px}
.hdr-right{justify-content:flex-end}
.tbtn{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.tbtn:hover{color:var(--ink)}
.tbtn b{font-weight:600;color:var(--ink)}
.menubtn{display:flex;align-items:center;gap:11px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2)}
.bars{display:inline-flex;flex-direction:column;gap:4px;width:19px}
.bars i{height:1.2px;background:currentColor;width:100%}
.bars i:nth-child(2){width:72%}
.brand{display:flex;justify-content:center;align-items:center;line-height:0}
.brand img{width:150px;height:auto}
.lg-l{display:var(--lg-light)}
.lg-d{display:var(--lg-dark)}
.flogo{width:126px;height:auto;margin-bottom:18px}
@media(max-width:820px){.hdr{height:64px}.brand img{width:118px}.hdr-left #sbtn{display:none}
  .strip .wrap{min-height:auto;padding-block:7px}.strip p{font-size:9px;flex:1 1 100%}}
.shipline{border-bottom:1px solid var(--line-2)}
.shipline .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;padding:11px 46px;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.shipline b{font-weight:500;color:var(--ink-2)}
@media(max-width:760px){.shipline .wrap{padding:10px 18px}}

/* меню панели */
.scrim{position:fixed;inset:0;background:rgba(12,10,22,.3);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .35s;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.menu{position:fixed;top:0;left:0;height:100%;width:394px;max-width:90vw;background:var(--paper);
  z-index:61;transform:translateX(-102%);transition:transform .42s cubic-bezier(.16,.84,.3,1);
  display:flex;flex-direction:column}
.menu.on{transform:none}
.mhead{display:flex;justify-content:space-between;align-items:center;padding:26px 32px 18px}
.mbody{flex:1;overflow:auto;padding:0 32px 30px}
.msearch{display:flex;gap:10px;border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:28px}
.msearch input{flex:1;border:none;background:none;font-size:13px;padding:4px 0}
.msearch input:focus{outline:none}
.mnav a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:17px;font-weight:300;padding:11px 0;transition:padding-left .2s}
.mnav a:hover{padding-left:9px}
.mnav a.hot{color:var(--gold)}
.mgroup{margin-top:32px}
.mgroup a,.mgroup span{display:block;font-size:12.5px;color:var(--ink-2);padding:6px 0}
.mfoot{border-top:1px solid var(--line-2);padding:16px 32px 22px;display:flex;
  justify-content:space-between;font-size:11px;color:var(--ink-3)}

/* карточка */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:60px 32px;padding-bottom:96px}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr);gap:50px 24px}}
@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr);gap:40px 16px}}
.row{display:grid;gap:24px;grid-auto-flow:column;grid-auto-columns:minmax(198px,1fr);
  overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.row>.card{scroll-snap-align:start}
.frame{position:relative;aspect-ratio:3/4;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 8%,var(--surface) 0 42%,var(--surface-2) 100%)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,.8,.3,1)}
.card:hover .frame img{transform:scale(1.03)}
.frame .ph{color:var(--ink-3);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.mark{position:absolute;top:14px;left:14px;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);z-index:2}
.cmeta{display:flex;justify-content:space-between;gap:14px;margin-top:16px;align-items:baseline}
.pname{font-size:14px;font-weight:500;margin:0}
.psub{font-size:12px;color:var(--ink-3);margin:3px 0 0}
.price{font-size:13px;font-weight:500;white-space:nowrap}
.was{color:var(--ink-3);text-decoration:line-through;font-weight:400;margin-right:7px;font-size:12px}
.shipinl{font-size:11.5px;color:var(--ink-2);margin-top:9px}
.shipinl s{color:var(--ink-3);text-decoration:none}
.dots{display:flex;gap:8px;margin-top:12px}
.dot{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.22);display:block}
.qsizes{display:flex;gap:11px;margin-top:11px;flex-wrap:wrap}
.qs{font-size:10.5px;letter-spacing:.1em;color:var(--ink-3)}
.qs.off{opacity:.32;text-decoration:line-through}

/* саҳифа боши */
.phead{padding:52px 0 30px}
.phead h1{margin:8px 0 0;font-size:clamp(24px,3vw,36px);font-weight:200;letter-spacing:-.015em}
.phead p{margin:9px 0 0;font-size:13px;color:var(--ink-2);max-width:52ch}
.filters{display:flex;gap:26px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:40px;
  border-bottom:1px solid var(--line-2)}
.filters a{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:14px;margin-bottom:-17px;border-bottom:1px solid transparent}
.filters a.on{color:var(--ink);border-bottom-color:var(--ink)}

/* бош саҳифа */
.hero{position:relative;min-height:clamp(420px,64vh,680px);overflow:hidden;background:var(--surface)}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  opacity:0;transition:opacity .9s;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide .im{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--surface-2)}
.slide .im img{width:100%;height:100%;object-fit:cover;object-position:center}
.slide .tx{position:relative;z-index:2;grid-column:2;justify-self:center;
  padding:36px clamp(22px,4vw,64px);text-align:center;max-width:min(46ch,92%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--paper) 84%,transparent) 0 62%,transparent)}
.slide.rev .tx{grid-column:1}
.slide h1{margin:0;font-weight:200;font-size:clamp(26px,3.6vw,50px);line-height:1.1;
  letter-spacing:-.01em;text-wrap:balance}
.slide .sb{margin:16px 0 0;color:var(--ink-2)}
.cta{display:inline-block;margin-top:28px;padding:15px 40px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--ink);transition:background .25s,color .25s}
.cta:hover{background:var(--ink);color:var(--paper)}
.dotsnav{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:9px;z-index:3}
.dotsnav button{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.24}
.dotsnav button[aria-current="true"]{opacity:.85}
@media(max-width:860px){
  .slide{grid-template-columns:1fr;align-items:end}
  .slide .tx,.slide.rev .tx{grid-column:1;margin-bottom:46px;
    background:color-mix(in srgb,var(--paper) 82%,transparent)}
  .hero{min-height:clamp(440px,72vh,640px)}}
.sec{padding:72px 0 0}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:24px}
.shead h2{margin:0;font-size:clamp(18px,2vw,24px);font-weight:300}
.more{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.banner{position:relative;margin-top:76px;min-height:clamp(320px,42vw,520px);display:grid;
  place-items:center;overflow:hidden;background:var(--surface-2)}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .bx{position:relative;z-index:2;text-align:center;padding:32px 26px;
  background:color-mix(in srgb,var(--paper) 80%,transparent)}
.banner h2{margin:0;font-weight:200;font-size:clamp(22px,3.2vw,38px);letter-spacing:.06em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:76px}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.tile{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 24px;text-align:center;
  background:linear-gradient(to top,var(--paper) 0 38%,color-mix(in srgb,var(--paper) 82%,transparent) 68%,transparent)}
.tile h3{margin:0;font-size:16px;font-weight:300;letter-spacing:.1em;text-transform:uppercase}

/* маҳсулот саҳифаси */
.pdp{display:grid;grid-template-columns:1fr 400px;gap:72px;padding:16px 0 100px;align-items:start}
@media(max-width:1000px){.pdp{grid-template-columns:1fr;gap:32px}}
.stage{aspect-ratio:4/5;overflow:hidden;background:var(--surface-2)}
.stage img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.thumbs button{aspect-ratio:1;overflow:hidden;background:var(--surface-2);opacity:.55}
.thumbs button.on{opacity:1;box-shadow:inset 0 0 0 1px var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.info{position:sticky;top:104px}
.info h1{margin:10px 0 0;font-size:26px;font-weight:300}
.pricebox{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.big{font-size:19px}
.landed .r{display:flex;justify-content:space-between;padding:5px 0;color:var(--ink-2);font-size:12.5px}
.landed .r.tot{margin-top:6px;padding-top:10px;border-top:1px solid var(--line-2);color:var(--ink);font-weight:500}
.optrow{display:flex;justify-content:space-between;align-items:baseline;margin:32px 0 12px}
.sw{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.22)}
.sw.on{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.22),0 0 0 1.5px var(--paper),0 0 0 2.5px var(--ink)}
.swrow{display:flex;gap:14px}
.sizes{display:flex;gap:10px;flex-wrap:wrap}
.size{min-width:46px;padding:9px 6px;font-size:11.5px;letter-spacing:.1em;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line)}
.size.on{box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.size.off{opacity:.4;cursor:not-allowed;
  background:linear-gradient(to top left,transparent 48%,var(--line) 48%,var(--line) 52%,transparent 52%)}
.btn{display:block;width:100%;text-align:center;background:var(--ink);color:var(--paper);padding:16px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.btn:hover{opacity:.86}
.btn[disabled],.btn.off{background:none;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}
.acc{border-top:1px solid var(--line-2)}
.acc summary{cursor:pointer;list-style:none;padding:16px 0;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.acc summary::after{content:"+";float:right}
.acc[open] summary::after{content:"–"}
.acc .b{font-size:12.5px;color:var(--ink-2);padding-bottom:18px;white-space:pre-line}

/* сават ва чекаут */
.two{display:grid;grid-template-columns:1fr 380px;gap:56px;padding:40px 0 90px;align-items:start}
@media(max-width:940px){.two{grid-template-columns:1fr;gap:30px}}
.citem{display:grid;grid-template-columns:88px 1fr auto;gap:18px;padding:22px 0;border-top:1px solid var(--line-2)}
.citem .im{aspect-ratio:3/4;background:var(--surface-2);overflow:hidden}
.citem .im img{width:100%;height:100%;object-fit:cover}
.sum{background:var(--surface-2);padding:26px;position:sticky;top:104px}
.sum .r{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;color:var(--ink-2)}
.sum .r.tot{font-size:16px;color:var(--ink);font-weight:600;margin-top:10px;padding-top:12px;
  border-top:1px solid var(--line)}
.hint{font-size:11.5px;color:var(--warn);margin-top:8px}
.hint.ok{color:var(--gold)}
.field{display:block;width:100%;padding:13px 15px;margin-top:9px;background:var(--surface);
  border:none;box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
.field:focus{outline:none;box-shadow:inset 0 0 0 1px var(--ink)}
label.lb{display:block;margin-top:16px}
.msg{padding:12px 16px;background:var(--surface-2);border-left:2px solid var(--gold);
  font-size:13px;margin:16px 0}
.qty{display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px var(--line);margin-top:8px}
.qty button,.qty span{width:26px;height:24px;display:grid;place-items:center;font-size:12px}

/* футер */
footer{border-top:1px solid var(--line-2);margin-top:20px}
footer .wrap{padding:60px 46px 70px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
.fgrid p,.fgrid a,.fgrid li{font-size:12.5px;color:var(--ink-2)}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:7px}