/* ModaZone do'koni — dizayn maketiga mos (sayt + mobil ilova) */
:root { --cream: #F3EEE6; --pink: #F4DCDA; --mint: #E3F1EC; --sale: #E8431A; }
body { background: #fff; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; flex-wrap: nowrap; } /* base.css dagi .wrap (flex-wrap) bilan to'qnashmasin */
.serif { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }
.ico { width: 18px; height: 18px; flex: none; }

/* ---------- sarlavha ---------- */
.topbar { background: var(--ink); color: #EDE6DA; font-size: 13px; }
.topbar .wrap { display: flex; align-items: center; gap: 22px; height: 46px; }
.topbar a { text-decoration: none; color: inherit; }
.pill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 99px; border: 1px solid currentColor; font-weight: 700; font-size: 13px; background: none; color: inherit; cursor: pointer; }
.topbar .pill { border-color: #5A5247; }
.hdr { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.hdr .row1 { display: flex; align-items: center; gap: 28px; height: 84px; }
.logo img { height: 28px; width: auto; }
.search { flex: 1; display: flex; align-items: center; background: var(--soft); border-radius: 99px; height: 52px; padding-inline-start: 22px; max-width: 580px; }
.search input { flex: 1; border: 0; background: none; outline: none; font-size: 15px; min-width: 0; }
.search button { height: 52px; padding: 0 28px; border-radius: 99px; border: 0; background: var(--ink); color: #fff; font-weight: 700; cursor: pointer; }
.hact { display: flex; align-items: center; gap: 22px; margin-inline-start: auto; }
.hact a, .hact button { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; background: none; border: 0; cursor: pointer; color: var(--ink); }
.cartbtn { background: var(--ink) !important; color: #fff !important; height: 46px; padding: 0 20px; border-radius: 99px; position: relative; }
.cartbtn .n { background: var(--sale); border-radius: 99px; min-width: 20px; height: 20px; font-size: 11px; display: grid; place-items: center; padding: 0 5px; }
.catnav { display: flex; align-items: center; gap: 4px; height: 58px; overflow-x: auto; scrollbar-width: none; }
.catnav a { flex: none; padding: 9px 12px; border-radius: 99px; text-decoration: none; font-weight: 500; color: var(--ink-2); }
.catnav a:hover, .catnav a.on { background: var(--soft); color: var(--ink); }
.catnav a.dark { background: var(--ink); color: #fff; font-weight: 700; padding: 10px 18px; }

/* ---------- bosh sahifa ---------- */
.page { padding-block: 22px 60px; display: flex; flex-direction: column; gap: 40px; }
.hero-grid { display: grid; grid-template-columns: 1.95fr 1fr; gap: 16px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 24px; overflow: hidden; min-height: 468px; background: var(--ink); color: #fff; text-decoration: none; }
.hero .tx { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.hero h1 { font-family: var(--serif); font-size: 58px; line-height: 1.04; }
.hero h1, .hero .tag { overflow-wrap: anywhere; hyphens: auto; } .hero .tx { min-width: 0; }
.hero p { color: #D9D2C6; font-size: 17px; max-width: 360px; margin: 0; }
.tag { display: inline-flex; width: max-content; align-items: center; height: 28px; padding: 0 14px; border-radius: 99px; background: var(--sale); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .04em; }
.hero .pic { background: var(--pink); display: grid; place-items: center; }
.hero .pic img { max-height: 420px; }
.btn-w { display: inline-flex; align-items: center; height: 52px; padding: 0 30px; border-radius: 99px; background: #fff; color: var(--ink); font-weight: 700; font-size: 16px; width: max-content; }
.side-cards { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.promo { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 24px; overflow: hidden; background: var(--cream); text-decoration: none; }
.promo.mint { background: var(--mint); }
.promo .tx { padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.promo h3 { font-family: var(--serif); font-size: 24px; }
.promo u { font-weight: 700; font-size: 14px; }
.promo .pic { background: #F7F2EA; display: grid; place-items: center; } .promo .pic img { max-height: 200px; }
.trust3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trust3 > div { display: flex; gap: 14px; align-items: flex-start; }
.trust3 .c { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.trust3 b { display: block; margin-bottom: 2px; }
.sec-h { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sec-h h2 { font-family: var(--serif); font-size: 34px; }
.sec-h .more { margin-inline-start: auto; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sec-h .more.red { color: var(--sale); }

/* kartochkalar */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.pc { text-decoration: none; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc .im { position: relative; border-radius: 18px; background: linear-gradient(180deg, #FBF8F3, var(--cream)); aspect-ratio: 1 / 1.18; display: grid; place-items: center; overflow: hidden; margin-bottom: 10px; }
.pc .im img { width: 82%; height: 82%; object-fit: contain; }
.grid6 .pc .im { aspect-ratio: 1 / 1.2; }
.off { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--sale); color: #fff; font-weight: 800; font-size: 13px; border-radius: 99px; padding: 3px 10px; }
.fav { position: absolute; top: 12px; inset-inline-end: 12px; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08); color: var(--ink); }
.fav.on { color: var(--sale); } .fav.on svg path { fill: currentColor; }
.pc .sel { font-size: 13px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.pc .sel .ok { color: var(--green); }
.pc .nm { font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc .pr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc .pr b { font-size: 19px; font-weight: 800; }
.pc .pr s, .old { color: var(--muted); font-size: 13px; }
.pc .rt { font-size: 13px; color: var(--muted); }
.pc .rt b { color: var(--ink); }
.deal .pr b { color: var(--sale); font-size: 20px; }
.soldbar { position: relative; height: 18px; border-radius: 99px; background: #F2DDD5; overflow: hidden; margin-top: 6px; }
.soldbar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--sale); border-radius: 99px; }
.soldbar span { position: relative; display: block; text-align: center; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-shadow: 0 0 2px rgba(0,0,0,.25); }
.cattile { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1.1; background: linear-gradient(180deg, #FBF8F3, var(--cream)); display: grid; place-items: center; text-decoration: none; }
.cattile img { width: 78%; height: 78%; object-fit: contain; }
.cattile b { position: absolute; inset-inline: 0; bottom: 0; padding: 40px 16px 14px; color: #fff; font-family: var(--serif); font-size: 20px; background: linear-gradient(180deg, transparent, rgba(23,20,15,.72)); }

/* ---------- mahsulot sahifasi ---------- */
.crumbs { font-size: 14px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; } .crumbs b { color: var(--ink); font-weight: 500; }
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }
.gal { display: grid; grid-template-columns: 84px 1fr; gap: 14px; }
.gal .th { display: flex; flex-direction: column; gap: 10px; }
.gal .th button { width: 84px; height: 100px; border-radius: 12px; border: 2px solid var(--line); background: var(--cream); padding: 6px; cursor: pointer; }
.gal .th button.on { border-color: var(--ink); }
.gal .th img { width: 100%; height: 100%; object-fit: contain; }
.gal .main { position: relative; border-radius: 22px; background: linear-gradient(180deg, #FBF8F3, var(--cream)); aspect-ratio: 1 / 1.2; display: grid; place-items: center; overflow: hidden; }
.gal .main img { width: 86%; height: 86%; object-fit: contain; transition: transform .2s; }
.gal .main { cursor: zoom-in; } .gal .main.zoom { cursor: zoom-out; touch-action: none; } .gal .main.zoom img { transform: scale(2.2); transition: transform .15s; }
.flagpill { position: absolute; top: 16px; inset-inline-end: 16px; display: inline-flex; gap: 8px; align-items: center; background: #fff; border-radius: 99px; padding: 6px 14px 6px 8px; font-weight: 700; font-size: 14px; }
.flag { font-size: 22px; line-height: 1; }
.zoomhint { position: absolute; bottom: 16px; inset-inline-start: 16px; background: #fff; border-radius: 99px; padding: 6px 14px; font-weight: 600; font-size: 13px; border: 0; cursor: pointer; }
.arrows { position: absolute; bottom: 16px; inset-inline-end: 16px; display: flex; gap: 8px; }
.arrows button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; font-size: 18px; }
.buy { display: flex; flex-direction: column; gap: 16px; }
.buy h1 { font-family: var(--serif); font-size: 34px; flex: 1; }
.sellerpill { display: inline-flex; gap: 6px; align-items: center; background: var(--soft); border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.star { background: var(--ink); color: #fff; border-radius: 6px; padding: 2px 7px; font-weight: 700; }
.pricebox { background: #FDEDEA; border-radius: 16px; padding: 16px 20px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pricebox b { color: var(--sale); font-size: 34px; font-weight: 800; }
.pricebox .tag { height: 24px; padding: 0 10px; }
.lbl { font-weight: 700; font-size: 14px; } .lbl span { font-weight: 400; color: var(--muted); }
.colors { display: flex; gap: 10px; }
.colors button { width: 58px; height: 66px; border-radius: 10px; border: 2px solid var(--line); background: var(--cream); padding: 4px; cursor: pointer; }
.colors button.on { border-color: var(--ink); }
.colors img { width: 100%; height: 100%; object-fit: contain; }
.sizes { display: flex; gap: 10px; flex-wrap: wrap; }
.sizes button { min-width: 52px; height: 44px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-weight: 700; cursor: pointer; }
.sizes button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sizes button.rec { box-shadow: 0 0 0 3px var(--green-bg); border-color: var(--green); }
.aibtn { height: 50px; border-radius: 99px; border: 0; background: var(--ink); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 6px 16px rgba(23,20,15,.25); }
.ai { background: var(--sale); border-radius: 99px; padding: 2px 9px; font-size: 12px; font-weight: 800; }
.cta { display: grid; grid-template-columns: 1fr 1fr 60px; gap: 12px; }
.cta .b1 { height: 60px; border-radius: 99px; border: 2px solid var(--ink); background: #fff; font-weight: 800; font-size: 16px; cursor: pointer; }
.cta .b2 { height: 60px; border-radius: 99px; border: 0; background: linear-gradient(90deg, #E8431A, #F07A4E); color: #fff; font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 8px 20px rgba(232,67,26,.3); }
.cta .hb { height: 60px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--sale); }
.cta .hb.on svg path { fill: currentColor; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips span { border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.routecard { border: 1px solid var(--line); border-radius: 20px; padding: 20px; background: linear-gradient(180deg, #FFFCF8, #FBF6EF); }
.route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; text-align: center; }
.route .bigflag { font-size: 46px; line-height: 1; }
.route small { display: block; color: var(--muted); font-size: 12px; }
.route .mid { position: relative; border-top: 2px dashed var(--line); }
.route .mid span { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 99px; padding: 3px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.routecard .ft { display: flex; justify-content: space-between; border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 12px; font-weight: 700; font-size: 14px; }
.routecard .ft .g { color: var(--green); } .routecard .ft button { color: var(--sale); background: none; border: 0; font-weight: 700; cursor: pointer; }
.lookcard { border: 1px solid #F3C9BC; border-radius: 20px; padding: 18px; background: #FFF8F5; }
.look { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.look label { position: relative; border: 2px solid var(--line); border-radius: 14px; background: #fff; aspect-ratio: 1 / 1.15; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.look label.me { border-color: var(--ink); }
.look label:has(input:checked) { border-color: var(--green); }
.look input { position: absolute; top: 8px; inset-inline-end: 8px; accent-color: var(--green); width: 18px; height: 18px; }
.look img { width: 80%; height: 80%; object-fit: contain; }
.look small { text-align: center; display: block; font-size: 11px; font-weight: 700; color: var(--green); margin-top: 4px; }
.lookfoot { display: flex; align-items: center; border-top: 1px dashed #F0C8BA; padding-top: 12px; }
.lookfoot b { font-size: 22px; font-weight: 800; }
.red-btn { height: 44px; padding: 0 22px; border-radius: 99px; border: 0; background: var(--sale); color: #fff; font-weight: 800; cursor: pointer; margin-inline-start: auto; }
.guar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guar div { border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 14px; }
.guar i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--green-bg); color: var(--green); font-style: normal; flex: none; }
.guar div + div i { background: var(--blue-bg); color: var(--blue); }
.boxcard { border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.boxcard h3 { font-family: var(--serif); font-size: 24px; margin-bottom: 10px; }
.spec { border-radius: 12px; overflow: hidden; margin-top: 12px; }
.spec div { display: grid; grid-template-columns: 1fr 1.3fr; padding: 12px 14px; } .spec div:nth-child(odd) { background: var(--soft); }
.spec span { color: var(--muted); } .spec b { font-weight: 600; }
.info div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-2); } .info span { color: var(--muted); }
.revs { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; border-top: 1px solid var(--line); padding-top: 36px; }
.rsum { display: flex; gap: 28px; align-items: center; margin: 14px 0 16px; }
.rsum .big { font-size: 58px; font-weight: 800; line-height: 1; }
.dist { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.dist div { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px; }
.dist i { height: 6px; border-radius: 99px; background: var(--cream); position: relative; overflow: hidden; } .dist i b { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--ink); }
.fchips { display: flex; gap: 8px; } .fchips button { height: 34px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-weight: 700; cursor: pointer; } .fchips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rv { border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-top: 12px; }
.rv .who { display: flex; gap: 12px; align-items: center; }
.av { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.vb { color: var(--green); font-size: 12px; font-weight: 600; }
.stars { color: #E2A100; margin-inline-start: auto; letter-spacing: 2px; }
.rv p { margin: 10px 0; }
.rchips { display: flex; gap: 8px; flex-wrap: wrap; } .rchips span { background: var(--soft); border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 600; } .rchips .fit { background: var(--green-bg); color: var(--green); }
.sellerbox { border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; align-items: center; gap: 12px; }
.ob-btn { height: 46px; padding: 0 22px; border-radius: 99px; border: 1px solid var(--ink); background: #fff; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; margin-inline-start: auto; }

/* ---------- boshqa sahifalar ---------- */
.cart { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.line { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); align-items: center; }
.line img, .line .ph { width: 72px; height: 84px; border-radius: 12px; object-fit: contain; background: var(--cream); flex: none; padding: 4px; }
.qty { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; } .qty button { width: 38px; height: 36px; border: 0; background: #fff; cursor: pointer; font-size: 18px; } .qty span { width: 34px; display: grid; place-items: center; font-weight: 700; }
.sum { position: sticky; top: 160px; }
.sum dl { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0; padding: 16px 18px; }
.sum dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; } .sum .tot { font-size: 18px; font-weight: 800; }
.note { background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.auth { max-width: 440px; margin: 10px auto; width: 100%; }
.ship-legs { font-size: 12px; color: var(--muted); }
.radio { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-weight: 600; }
.radio:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.modal { position: fixed; inset: 0; background: rgba(23,20,15,.45); display: grid; place-items: center; z-index: 60; padding: 16px; }
.modal .card { width: 100%; max-width: 460px; padding: 22px; display: flex; flex-direction: column; gap: 12px; max-height: 90vh; overflow: auto; }
.seg { display: flex; gap: 8px; } .seg label { flex: 1; } .seg input { display: none; } .seg span { display: block; text-align: center; border: 1px solid var(--line); border-radius: 99px; padding: 9px; font-weight: 700; cursor: pointer; } .seg input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.adv { background: var(--green-bg); border-radius: 14px; padding: 14px; }
.adv b { font-size: 26px; }
.ftr { background: var(--ink); color: #D9D2C6; margin-top: 40px; }
.ftr .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; padding-block: 48px 30px; }
.ftr h4 { color: #fff; margin: 0 0 12px; font-size: 14px; } .ftr a { display: block; color: inherit; text-decoration: none; padding: 4px 0; font-size: 14px; }
.ftr .logo img { height: 26px; filter: invert(1) brightness(1.6); }
.ftr .bottom { border-top: 1px solid #3A342B; padding-block: 18px; font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; }
.tabbar, .m-only, .hact .m-only { display: none; }
.page > *, .hero-grid > *, .pdp > *, .cart > *, .revs > *, .buy > *, .col > * { min-width: 0; }

/* ---------- mobil ilova ---------- */
@media (max-width: 900px) {
  .wrap { padding: 0 16px; }
  .topbar, .catnav, .hact .d-only, .ftr .wrap > div:not(:first-child) { display: none; }
  .m-only { display: initial; } .hact .m-only { display: inline-flex; }
  .hdr .row1 { height: auto; padding-top: 12px; flex-wrap: wrap; gap: 12px; }
  .logo img { height: 22px; }
  .search { order: 3; flex-basis: 100%; max-width: none; height: 46px; margin-bottom: 10px; }
  .search button { height: 46px; padding: 0 18px; }
  .hact { gap: 10px; } .hact .pill { height: 34px; }
  .cartbtn { display: none !important; }
  .page { gap: 26px; padding-block: 14px 100px; }
  .circles { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .circles a { flex: none; width: 76px; text-align: center; text-decoration: none; font-size: 12px; font-weight: 600; }
  .circles i { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 6px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); font-style: normal; }
  .circles svg { width: 26px; height: 26px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); } .side-cards { display: none; }
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 0; border-radius: 22px; }
  .hero .tx { padding: 20px; gap: 10px; } .hero h1 { font-size: 26px; } .hero p, .hero .btn-w { display: none; }
  .hero .pic { margin: 10px; border-radius: 16px; overflow: hidden; } .hero .pic img { max-height: 150px; width: 100%; object-fit: contain; }
  .hero .tag { font-size: 11px; height: 24px; padding: 0 10px; }
  .zoomhint { display: none; } .arrows button { width: 36px; height: 36px; }
  .trust3 { grid-template-columns: 1fr; gap: 12px; } .trust3 > div:nth-child(n+2) { display: none; }
  .sec-h { margin-bottom: 12px; } .sec-h h2 { font-size: 23px; }
  .grid6 { display: flex; overflow-x: auto; gap: 12px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .grid6 .pc { flex: none; width: 140px; }
  .grid6 .cattile { flex: none; width: 140px; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .pc .nm { font-size: 13px; } .pc .pr b { font-size: 16px; }
  .pdp, .revs, .cart { grid-template-columns: 1fr; gap: 20px; }
  .crumbs { display: none; }
  .gal { grid-template-columns: 1fr; margin-inline: -16px; }
  .gal .th { order: 2; flex-direction: row; padding-inline: 16px; }
  .gal .th button { width: 60px; height: 70px; }
  .gal .main { border-radius: 0; aspect-ratio: 1 / 1.05; }
  .buy h1 { font-size: 24px; } .pricebox b { font-size: 28px; }
  .cta { position: fixed; bottom: 0; inset-inline: 0; background: #fff; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); z-index: 30; grid-template-columns: 52px 1fr 1.2fr; }
  .cta .hb { order: -1; height: 52px; width: 52px; } .cta .b1, .cta .b2 { height: 52px; font-size: 14px; white-space: nowrap; padding: 0 8px; }
  .pdp-page .tabbar { display: none !important; }
  .look { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ftr .wrap { grid-template-columns: 1fr; padding-block: 24px 110px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; inset-inline: 0; background: #fff; border-top: 1px solid var(--line); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 30; }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; text-decoration: none; color: var(--muted); position: relative; }
  .tabbar a.on { color: var(--ink); font-weight: 700; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar .n { position: absolute; top: -4px; left: 55%; background: var(--sale); color: #fff; border-radius: 99px; min-width: 16px; height: 16px; font-size: 10px; display: grid; place-items: center; padding: 0 4px; }
  .sum { position: static; }
}

/* ---------- davlatga xos yuridik blok (pastki qism): yuridik shaxs, QR belgilar, hujjatlar ---------- */
.ftr .wrap.legal { grid-template-columns: 1.3fr 1.6fr 1fr; border-top: 1px solid #3A342B; padding-block: 26px; align-items: start; }
.ftr .legal .ent { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.45; min-width: 0; }
.ftr .legal .ent b { color: #fff; font-size: 14px; }
.ftr .legal .muted { color: #9C9385; }
.ftr .badges { display: flex; flex-wrap: wrap; gap: 14px; }
.ftr .bdg { display: flex !important; flex-direction: column; align-items: center; gap: 6px; width: 104px; padding: 0 !important; text-align: center; }
.ftr .bdg img { width: 92px; height: 92px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; }
.ftr .bdg small { font-size: 11px; line-height: 1.3; color: #CFC7BA; overflow-wrap: anywhere; }
.ftr .legal .docs a { font-size: 13px; }
.ftr .pays { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ftr .pays .chip { border: 1px solid #4A443A; border-radius: 6px; padding: 3px 8px; font-size: 11px; color: #E9E2D6; }
.ftr .bottom a { display: inline; padding: 0; font-size: 13px; }
details.doc { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; }
details.doc summary { cursor: pointer; font-weight: 600; }
.docbody { white-space: pre-wrap; font-size: 14px; line-height: 1.55; margin-top: 10px; max-height: 320px; overflow: auto; overflow-wrap: anywhere; }
.legalpage .docbody { max-height: none; margin: 16px 0; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
label.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent, #E8431A); flex: none; }
@media (max-width: 900px) {
  .ftr .wrap:first-child { padding-block: 24px 8px; }
  .ftr .wrap.bottom { padding-bottom: 110px; }
  .ftr .wrap.legal { grid-template-columns: 1fr; gap: 20px; padding-block: 20px; }
  .ftr .wrap.legal > div { display: flex; }
  .ftr .wrap.legal > .docs { display: block; }
  .ftr .bdg { width: 100px; } .ftr .bdg img { width: 84px; height: 84px; }
}

/* sinov (ko'rib chiqish) muhiti belgisi */
.stage-bar { background: #FFE8A3; color: #5A4300; text-align: center; font-size: 13px; font-weight: 600; padding: 6px 12px; }

/* nishonlar, brend, boy tavsif, miqdor */
.pbadges { position: absolute; top: 10px; inset-inline-end: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; z-index: 2; }
.pc .im .fav ~ .pbadges, .pc .im .pbadges { top: 52px; }
.pbadges i { font-style: normal; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--ink); color: #fff; }
.pbadges .pb-free_shipping, .pbadges .pb-eco { background: var(--green); } .pbadges .pb-low, .pbadges .pb-limited { background: #B3261E; } .pbadges .pb-handmade, .pbadges .pb-gift { background: #8A5A12; }
.brandline { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.brandline a { color: var(--ink); }
.offb { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #1D6FE8; background: #E8F1FE; padding: 3px 9px; border-radius: 99px; }
.shortd { margin: 4px 0 0; color: var(--ink-2, #4A443B); line-height: 1.5; }
.pricebox .unit { font-size: 15px; font-weight: 500; color: var(--muted); }
.qtyrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qtyrow .qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.qtyrow .qty button { width: 40px; height: 40px; border: 0; background: none; font-size: 18px; cursor: pointer; } .qtyrow .qty b { min-width: 32px; text-align: center; }
.note.ok { background: #EAF5EE; color: var(--green); }
.rich { line-height: 1.65; } .rich h2 { font-size: 20px; margin: 16px 0 8px; } .rich h3 { font-size: 17px; margin: 14px 0 6px; } .rich p { margin: 0 0 10px; }
.rich ul, .rich ol { padding-inline-start: 22px; margin: 0 0 10px; } .rich img { max-width: 100%; height: auto; border-radius: 12px; }
.rich table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; } .rich td, .rich th { border: 1px solid var(--line); padding: 8px 10px; text-align: start; }
.rich blockquote { border-inline-start: 3px solid var(--line); margin: 10px 0; padding: 4px 14px; color: var(--muted); }
.brandhead { display: flex; gap: 20px; align-items: center; padding: 24px 0; } .brandhead img { width: 96px; height: 96px; object-fit: contain; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.brandhead h1 { margin: 0 0 6px; font-size: 34px; } .brandhead p { max-width: 720px; margin: 8px 0 0; }
.brandgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.brandgrid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); background: #fff; text-align: center; }
.brandgrid img { height: 48px; max-width: 100%; object-fit: contain; }
.gal .main .pbadges { top: 58px; inset-inline-start: 16px; inset-inline-end: auto; align-items: flex-start; }
.sizes button.na { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.persbox { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 16px; }
.bundlecard { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: #F4F8F5; border: 1px solid #DCEBE1; }
.bundlecard .tag { background: var(--green); color: #fff; border-radius: 99px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.bundle-items { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bundle-items img { width: 64px; height: 76px; object-fit: contain; background: #fff; border-radius: 12px; border: 1px solid var(--line); }
.bundle-items .plus { font-size: 20px; color: var(--muted); }
dt.disc, dd.disc { color: var(--green); }
.radio .tag { background: var(--green); color: #fff; border-radius: 99px; padding: 2px 8px; font-size: 12px; font-weight: 700; margin-inline-start: 6px; }
.cmpbtn { align-self: flex-start; border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.cmpbtn.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.cmplink .n { background: var(--ink); color: #fff; border-radius: 99px; padding: 0 7px; font-size: 12px; margin-inline-start: 4px; }
.cmpwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
table.cmp { border-collapse: collapse; width: 100%; min-width: 640px; }
table.cmp th, table.cmp td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; font-size: 14px; }
table.cmp tbody th { text-align: start; color: var(--muted); font-weight: 600; width: 180px; position: sticky; inset-inline-start: 0; background: #fff; }
table.cmp thead th { vertical-align: bottom; } table.cmp thead img { width: 120px; height: 140px; object-fit: contain; } table.cmp .nm { font-weight: 600; margin: 6px 0 10px; }
table.cmp tbody tr:not(.same) td { background: #FFFBEF; }

/* ---------- kirish sahifasi (yorug' / qorong'i) ---------- */
.authpage { --a-bg: #FAF7F2; --a-card: #FFFFFF; --a-ink: #1E1A1B; --a-muted: #7A716B; --a-line: #E4DACD; --a-soft: #F4EFE8; --a-gold: #B88A4A;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 200px); background: var(--a-bg); color: var(--a-ink); }
.authpage.dark { --a-bg: #121014; --a-card: #1C191F; --a-ink: #F3EEE6; --a-muted: #A79F98; --a-line: #34303A; --a-soft: #26222A; --a-gold: #E7C58F; }
.authpage .aside { background: #16131A; color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; min-height: 520px; }
.authpage .aimgs { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 24px; opacity: .55; }
.authpage .aimgs img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; background: #2A2430; }
.authpage .aside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,19,26,.1), rgba(22,19,26,.92) 65%); }
.authpage .acopy { position: relative; z-index: 1; max-width: 460px; display: flex; flex-direction: column; gap: 14px; }
.authpage .kick { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: #E7C58F; }
.authpage .acopy h2 { font-size: 44px; line-height: 1.02; margin: 0; }
.authpage .aslide { min-height: 120px; display: flex; flex-direction: column; gap: 6px; color: #E8E1D8; }
.authpage .aslide.in { animation: aIn .5s ease; } @keyframes aIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.authpage .aslide .quote { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.35; margin: 0; color: #fff; } .authpage .aslide b { font-size: 24px; color: #fff; } .authpage .aslide p { margin: 0; }
.authpage .aslide span { font-size: 13px; color: #CFC6BD; } .authpage .aslide .stars { color: #E7C58F; letter-spacing: .1em; }
.authpage .adots { display: flex; gap: 6px; } .authpage .adots i { width: 18px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); } .authpage .adots i.on { background: #E7C58F; width: 30px; }
.authpage .acol { display: grid; place-items: center; padding: 40px 24px; position: relative; }
.authpage .themebtn { position: absolute; top: 18px; inset-inline-end: 18px; width: 42px; height: 42px; border-radius: 99px; border: 1px solid var(--a-line); background: var(--a-card); color: var(--a-ink); display: grid; place-items: center; cursor: pointer; }
.authpage .authcard { width: 100%; max-width: 430px; background: var(--a-card); border: 1px solid var(--a-line); border-radius: 28px; padding: 32px; box-shadow: 0 20px 50px -24px rgba(22,19,26,.25); }
.authpage .atitle { font-size: 30px; margin: 0 0 6px; line-height: 1.1; }
.authpage .muted { color: var(--a-muted); }
.authpage .abtn { height: 54px; border-radius: 99px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }
.authpage .btn.primary { background: var(--a-ink); border-color: var(--a-ink); color: var(--a-card); }
.authpage .btn { color: var(--a-ink); border-color: var(--a-line); background: var(--a-card); }
.authpage .tgbtn { background: #229ED9; border-color: #229ED9; color: #fff; } .authpage .tgbtn svg path { fill: #fff; } .authpage .tgbtn:hover { background: #1B8BC0; }
.authpage .ador { display: flex; align-items: center; gap: 12px; color: var(--a-muted); } .authpage .ador span { flex: 1; height: 1px; background: var(--a-line); } .authpage .ador i { font-family: var(--serif); font-size: 15px; }
.authpage .phonebox { display: flex; align-items: center; height: 56px; border: 1px solid var(--a-line); border-radius: 99px; background: var(--a-card); padding: 0 6px 0 10px; }
.authpage .phonebox:focus-within { border-color: var(--a-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-ink) 12%, transparent); }
.authpage .phonebox select { border: 0; background: transparent; color: var(--a-ink); font-weight: 600; font-size: 15px; padding: 0 8px; height: 30px; border-inline-end: 1px solid var(--a-line); outline: none; }
.authpage .phonebox input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--a-ink); font-size: 18px; letter-spacing: .04em; padding: 0 12px; outline: none; }
.authpage .chseg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.authpage .chseg button { height: 50px; border-radius: 16px; border: 1.5px solid var(--a-line); background: var(--a-card); color: var(--a-ink); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.authpage .chseg button[aria-pressed="true"] { border-color: var(--a-ink); background: var(--a-soft); }
.authpage .chseg button.telegram[aria-pressed="true"] { border-color: #229ED9; } .authpage .chseg button.whatsapp[aria-pressed="true"] { border-color: #25D366; }
.authpage .socrow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.authpage .soc { flex: 1; min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; color: var(--a-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.authpage .soc span { width: 54px; height: 54px; border-radius: 99px; border: 1px solid var(--a-line); background: var(--a-card); display: grid; place-items: center; color: var(--a-ink); box-shadow: 0 6px 16px rgba(22,19,26,.06); }
.authpage .soc:hover span { border-color: var(--a-ink); }
.authpage .otp { height: 64px; font-size: 30px; letter-spacing: .5em; text-align: center; border-radius: 18px; background: var(--a-card); color: var(--a-ink); border-color: var(--a-line); font-family: var(--serif); }
.authpage .input { background: var(--a-card); color: var(--a-ink); border-color: var(--a-line); }
.authpage .bigico { width: 64px; height: 64px; border-radius: 99px; background: #E8F4FB; display: grid; place-items: center; margin: 0 auto; } .authpage .bigico svg { width: 32px; height: 32px; }
.authpage a { color: var(--a-ink); }
@media (max-width: 900px) {
  .authpage { grid-template-columns: 1fr; }
  .authpage .aside { min-height: 260px; padding: 28px 24px 56px; } .authpage .acopy h2 { font-size: 32px; } .authpage .aslide { min-height: 0; } .authpage .aslide .quote { font-size: 16px; }
  .authpage .acol { padding: 0 16px 32px; margin-top: -32px; place-items: start center; } .authpage .authcard { padding: 24px 20px; border-radius: 26px; }
  .authpage .themebtn { top: -20px; z-index: 2; }
}
.authpage .aslide .astars { color: #E7C58F; letter-spacing: .1em; font-size: 13px; }

/* ---------- katalog: filtr paneli va saralash ---------- */
.catlay { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; } .catlay.nopanel { grid-template-columns: 1fr; }
.fpanel { position: sticky; top: 160px; max-height: calc(100vh - 180px); overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.fpanel .fhead, .fpanel .fapply { display: none; }
.fsec { border-bottom: 1px solid var(--line); padding: 10px 0; } .fsec summary { list-style: none; cursor: pointer; font-weight: 700; display: flex; justify-content: space-between; padding: 4px 0; }
.fsec summary::after { content: "–"; color: var(--muted); } .fsec:not([open]) summary::after { content: "+"; } .fsec summary::-webkit-details-marker { display: none; }
.fbody { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.fopt { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 7px 4px; border-radius: 10px; cursor: pointer; text-align: start; font: inherit; color: var(--ink); }
.fopt:hover { background: var(--soft); } .fopt .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; flex: none; }
.fopt.on .box { background: var(--ink); border-color: var(--ink); color: #fff; } .fopt .n { color: var(--muted); font-size: 12px; }
.fprice { display: flex; align-items: center; gap: 6px; } .fprice .input { width: 0; flex: 1; min-width: 0; height: 40px; }
.fsizes { display: flex; flex-wrap: wrap; gap: 6px; } .fsz { min-width: 46px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; cursor: pointer; color: var(--ink); }
.fsz.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.fcolors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .fcol { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink); text-align: start; }
.fcol i { width: 22px; height: 22px; border-radius: 99px; border: 1px solid rgba(0,0,0,.15); flex: none; } .fcol.on { background: var(--soft); font-weight: 700; } .fcol.on i { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.offb.sm { font-size: 10px; padding: 1px 5px; }
.ftop { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-bottom: 14px; } .ffbtn { display: none; }
.fsort { display: flex; align-items: center; gap: 8px; } .fsort select { width: auto; height: 42px; border-radius: 99px; padding-inline: 14px; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .fchip { height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--soft); font-weight: 600; cursor: pointer; color: var(--ink); }
.fchip span { margin-inline-start: 4px; color: var(--muted); } .fchip.clear { background: none; text-decoration: underline; border-color: transparent; }
.fcount { background: var(--sale); color: #fff; border-radius: 99px; padding: 0 7px; font-size: 12px; }
.more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; } .more .btn { min-width: 220px; height: 48px; border-radius: 99px; }
@media (max-width: 900px) {
  .catlay { grid-template-columns: 1fr; } .ffbtn { display: inline-flex; gap: 6px; align-items: center; height: 42px; border-radius: 99px; } .ftop { justify-content: space-between; }
  .fpanel { position: fixed; inset: 0; top: auto; max-height: 86vh; z-index: 60; background: #fff; border-radius: 22px 22px 0 0; padding: 0 18px 18px; transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -20px 50px rgba(0,0,0,.2); }
  .fpanel.open { transform: none; } .fpanel .fhead { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: #fff; padding: 16px 0 10px; z-index: 1; }
  .fpanel .fx { border: 0; background: var(--soft); width: 36px; height: 36px; border-radius: 99px; cursor: pointer; } .fpanel .fapply { display: block; position: sticky; bottom: 0; background: #fff; padding-top: 12px; }
  .fpanel .fapply .btn { height: 50px; border-radius: 99px; }
}

/* ---------- tez qidiruv: takliflar ---------- */
.search { position: relative; }
.search .camb { height: 44px; width: 44px; border-radius: 99px; border: 0; background: #fff; display: grid; place-items: center; margin-inline-end: 6px; cursor: pointer; padding: 0; color: var(--ink); flex: none; }
.sugbox { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(23,20,15,.35); padding: 8px; max-height: 70vh; overflow-y: auto; }
.sugbox[hidden] { display: none; }
.sugbox .sughd { font-size: 12px; font-weight: 700; color: var(--muted); padding: 10px 12px 4px; text-transform: uppercase; letter-spacing: .06em; }
.sugbox a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.sugbox a:hover, .sugbox a.on { background: var(--soft); }
.sugbox .sq svg { width: 16px; height: 16px; color: var(--muted); flex: none; } .sugbox .sq em { margin-inline-start: auto; font-style: normal; font-size: 12px; color: var(--muted); }
.sugbox .bmark { width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.sugbox .sp img, .sugbox .sp i { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--soft); flex: none; }
.sugbox .sp small { display: block; color: var(--muted); font-size: 12px; } .sugbox .sp b { font-size: 14px; white-space: nowrap; }
.sugbox .all { border-top: 1px solid var(--line-2); margin-top: 6px; font-weight: 600; }

/* ---------- do'kon narxi bilan solishtirish ---------- */
.storecmp { font-size: 12px; color: #2F6B4F; margin-top: 2px; } .storecmp s { color: var(--muted); } .storecmp b { color: #2F6B4F; }
.storebox { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; background: #EEF4F0; border: 1px solid #CFE3D7; border-radius: 18px; padding: 14px 16px; margin: 6px 0 4px; }
.storebox > div { display: flex; flex-direction: column; gap: 2px; } .storebox s { font-size: 17px; color: var(--muted); } .storebox b { font-size: 17px; }
.storebox .save { background: #2F6B4F; color: #fff; border-radius: 12px; padding: 8px 12px; } .storebox .save b { color: #fff; } .storebox .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .storebox { grid-template-columns: 1fr 1fr; } .storebox .save { grid-column: 1 / -1; } }

/* ---------- rasm bo'yicha natija va "topib bering" ---------- */
.photohead { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; } .photohead img { width: 96px; height: 96px; object-fit: cover; border-radius: 18px; }
.photohead h2 { margin: 2px 0 8px; font-family: var(--serif); font-size: 30px; }
.findit-wrap { display: grid; place-items: center; padding: 30px 0; } .findit { max-width: 520px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; text-align: center; }
.findit h3 { font-family: var(--serif); font-size: 26px; margin: 10px 0 6px; } .findit .fico { width: 56px; height: 56px; border-radius: 99px; background: var(--soft); display: inline-grid; place-items: center; }
.findit .fico svg { width: 24px; height: 24px; } .findit form { text-align: start; margin-top: 16px; } .findit .btn { height: 50px; border-radius: 99px; } .findit.ok { border-color: #CFE3D7; background: #EEF4F0; }

/* ---------- bosh sahifa: hamma narsa bor marketpleys ---------- */
.hhero { background: #16131A; color: #fff; border-radius: 32px; padding: 48px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; overflow: hidden; }
.hhero .kick, .hflow .kick, .hnever .kick, .hworld .kick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #E7C58F; }
.hhero .kick .ico { width: 16px; height: 16px; }
.hhero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 4.6vw, 62px); line-height: 1; letter-spacing: -.02em; margin: 16px 0; } .hhero h1 i { color: #E7C58F; }
.hhero p { color: #CFC6BD; font-size: 17px; line-height: 1.6; max-width: 520px; margin: 0; }
.hhero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .hhero .btn-w, .hhero .btn-o { height: 52px; padding: 0 28px; border-radius: 99px; display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; }
.hhero .btn-w { background: #fff; color: #16131A; } .hhero .btn-o { border: 1px solid #5A5058; color: #fff; }
.hstats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; } .hstats b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 500; } .hstats span { font-size: 13px; color: #A69C93; }
.hmos { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; gap: 12px; }
.hmos a { border-radius: 22px; position: relative; overflow: hidden; display: block; } .hmos a.big { grid-row: span 2; }
.hmos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box; } .hmos a.big img { object-fit: cover; padding: 0; }
.hmos span { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.92); color: var(--ink); border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.htrust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .htrust > div { display: flex; gap: 12px; align-items: center; }
.htrust .c { width: 44px; height: 44px; border-radius: 14px; background: var(--soft); display: grid; place-items: center; flex: none; } .htrust b { display: block; font-size: 14px; } .htrust .muted { font-size: 13px; }
.hdeps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.hdeps a { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.hdeps a:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -16px rgba(23,20,15,.35); } .hdeps a.soon { opacity: .6; }
.hdeps i { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; } .hdeps i svg { width: 26px; height: 26px; } .hdeps span { font-size: 12px; color: var(--muted); }
.sec-h .timer { background: #7A2232; color: #fff; border-radius: 99px; padding: 6px 14px; font-size: 13px; font-weight: 600; } .sec-h .timer b { font-weight: 800; }
.htabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .htabs button { height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); }
.htabs button svg { width: 18px; height: 18px; } .htabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.hflow { background: var(--cream); border-radius: 28px; padding: 40px; display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: center; }
.hflow .kick, .hworld .kick { color: #7A2232; } .hflow h2, .hnever h2, .hworld h2 { font-family: var(--serif); font-weight: 500; font-size: 38px; line-height: 1.05; margin: 10px 0; } .hflow p { color: var(--ink-2); line-height: 1.6; }
.hflow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: x; }
.hflow li { background: #fff; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 6px; } .hflow li .n { width: 34px; height: 34px; border-radius: 99px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; }
.hflow li span:last-child { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.hnever { background: #16131A; color: #fff; border-radius: 28px; padding: 40px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: center; } .hnever p { color: #CFC6BD; line-height: 1.6; }
.hnever ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .hnever li { background: rgba(255,255,255,.07); border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 600; }
.hworld { border: 1px solid var(--line); background: #fff; border-radius: 28px; padding: 40px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: center; } .hworld p { color: var(--ink-2); line-height: 1.6; }
.wsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .wsteps div { background: var(--soft); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.wsteps em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2F6B4F; } .wsteps span { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 1000px) { .hhero, .hflow, .hnever, .hworld { grid-template-columns: 1fr; padding: 28px; } .hflow ol { grid-template-columns: 1fr 1fr; } .htrust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hmos { grid-auto-rows: 110px; } .hnever ul, .wsteps { grid-template-columns: 1fr 1fr; } .hflow ol { grid-template-columns: 1fr; } .hhero { border-radius: 24px; } }
/* reklama va Worldwide (ixcham) */
.adwrap { position: relative; } .adwrap > .pc { height: 100%; }
.adlbl { position: absolute; top: 8px; right: 46px; background: rgba(255,255,255,.94); color: var(--ink-2); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; pointer-events: none; }
.adlbl.pass { right: auto; left: 8px; top: 8px; background: #16131A; color: #E7C58F; }
.adban { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.adban .ab { position: relative; border-radius: 24px; overflow: hidden; min-height: 200px; background: #2B2530; color: #fff; display: block; }
.adban .ab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adban .tx { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(transparent, rgba(22,19,26,.82)); display: flex; flex-direction: column; gap: 4px; }
.adban em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #E7C58F; } .adban b { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; } .adban .tx span { font-size: 14px; color: #E5DDD4; }
.hworld2 .kick { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7A2232; } .hworld2 h2 { margin: 6px 0; } .hworld2 p { margin: 0; max-width: 640px; line-height: 1.6; }
.wchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; } .wchips span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.hnever2 { background: #16131A; color: #fff; border-radius: 24px; padding: 20px 26px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.hnever2 .kick { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #E7C58F; } .hnever2 b { font-family: var(--serif); font-weight: 500; font-size: 24px; }
.hnever2 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 480px; } .hnever2 li { background: rgba(255,255,255,.08); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
/* telefon: birinchi ekranda mahsulot ko'rinsin — hero ixcham, ishonch qatori va bo'limlar yon tomonga suriladi */
@media (max-width: 600px) {
  .hhero { padding: 22px 20px; gap: 0; } .hhero h1 { font-size: 32px; margin: 10px 0; } .hhero p { font-size: 14px; } .hhero .kick { font-size: 11px; }
  .hhero .hmos { display: none; } .hhero .cta { margin-top: 14px; } .hhero .cta a { padding: 11px 18px; font-size: 14px; }
  .htrust { display: flex; overflow-x: auto; gap: 10px; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .htrust::-webkit-scrollbar { display: none; }
  .htrust > div { flex: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px 8px 8px; } .htrust .c { width: 32px; height: 32px; border-radius: 10px; } .htrust b { font-size: 13px; white-space: nowrap; } .htrust .muted { display: none; }
  .hdeps { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; } .hdeps::-webkit-scrollbar { display: none; }
  .hdeps a { flex: none; width: 76px; padding: 8px 4px; align-items: center; text-align: center; border: 0; background: none; gap: 6px; } .hdeps a.soon { display: none; }
  .hdeps i { width: 56px; height: 56px; border-radius: 18px; } .hdeps b { font-size: 12px; line-height: 1.2; font-weight: 600; } .hdeps span { display: none; }
  .sec-h { flex-wrap: wrap; } .sec-h h2 { font-size: 24px; }
}
/* rasm yo'q mahsulot: toifa belgisi */
.pc .im .noimg { position: absolute; inset: 0; display: grid; place-items: center; color: #B9AE9F; } .pc .im .noimg svg { width: 38%; height: 38%; max-width: 90px; }
.pc .im { position: relative; }
/* ModaZone Travel (bosh sahifa) */
.htravel { position: relative; border-radius: 28px; overflow: hidden; min-height: 300px; background: #2B2530; color: #fff; display: flex; }
.htravel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.htravel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,19,26,.9) 0%, rgba(22,19,26,.6) 55%, rgba(22,19,26,.15) 100%); z-index: 1; }
.htravel .tx { position: relative; z-index: 2; padding: 36px 40px; display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.htravel .kick { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #E7C58F; }
.htravel h2 { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1.05; margin: 0; } .htravel h2 i { color: #E7C58F; display: block; } .htravel p { margin: 0; color: #E5DDD4; }
.htravel .trips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.htravel .trips a { flex: none; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 6px 12px 6px 6px; color: #fff; text-decoration: none; font-size: 13px; }
.htravel .trips img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.htravel .cta { display: flex; gap: 10px; flex-wrap: wrap; } .htravel .btn-w, .htravel .btn-o { padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; }
.htravel .btn-w { background: #fff; color: #16131A; } .htravel .btn-o { border: 1px solid rgba(255,255,255,.5); color: #fff; }
/* Travel sahifasi */
.travelhero { position: relative; border-radius: 28px; overflow: hidden; min-height: 360px; color: #fff; background: #2B2530; }
.travelhero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .travelhero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,19,26,.88), rgba(22,19,26,.35)); z-index: 1; }
.travelhero .tx { position: relative; z-index: 2; padding: 44px; display: flex; flex-direction: column; gap: 14px; }
.travelhero .kick { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #E7C58F; } .travelhero h1 { font-family: var(--serif); font-weight: 500; font-size: 52px; margin: 0; } .travelhero p { margin: 0; color: #E5DDD4; }
.ttabs { display: flex; gap: 6px; } .ttabs a { padding: 9px 18px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; background: rgba(255,255,255,.12); } .ttabs a.on { background: #fff; color: #16131A; }
.tsearch { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; background: #fff; border-radius: 20px; padding: 12px; max-width: 900px; } .tsearch .input { color: var(--ink); }
.note-soon { margin: 16px 0 6px; padding: 12px 16px; border-radius: 14px; background: #F5EBD3; color: #5E430F; font-size: 14px; }
.dests { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .dests a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.dests img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; margin-bottom: 6px; }
.dests2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .dests2 > div { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.dests2 img { width: 100%; height: 160px; object-fit: cover; border-radius: 14px; margin-bottom: 6px; }
@media (max-width: 600px) { .htravel .tx, .travelhero .tx { padding: 22px 20px; } .htravel h2 { font-size: 28px; } .travelhero h1 { font-size: 34px; } }
.fdeals { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.fdeals a { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px; text-decoration: none; color: var(--ink); }
.fdeals img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; } .fdeals div { flex: 1; display: flex; flex-direction: column; gap: 3px; } .fdeals em { font-style: normal; font-weight: 700; color: #7A2232; white-space: nowrap; }
.hcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .hcards a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.hcards img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; margin-bottom: 6px; background: #EFE6DA; }
/* bannerlar: hozircha chizma — keyin haqiqiy foto bilan almashtiriladi (img/banner-*.svg) */
.catban { border-radius: 26px; min-height: 220px; background-size: cover; background-position: right center; display: flex; align-items: center; margin-bottom: 18px; }
.catban .tx { padding: 30px 36px; max-width: 520px; display: flex; flex-direction: column; gap: 8px; } .catban .kick { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7A2232; }
.catban h1 { font-family: var(--serif); font-weight: 500; font-size: 44px; margin: 0; } .catban p { margin: 0; font-size: 16px; color: var(--ink-2); }
.hpromos { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.hpromos a { position: relative; border-radius: 24px; min-height: 170px; background-size: cover; background-position: right center; text-decoration: none; color: var(--ink); display: flex; align-items: center; overflow: hidden; }
.hpromos a.big { grid-row: span 2; min-height: 356px; } .hpromos a:hover { transform: translateY(-2px); transition: transform .15s; }
.hpromos .tx { padding: 24px 28px; display: flex; flex-direction: column; gap: 6px; max-width: 55%; } .hpromos em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7A2232; }
.hpromos b { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1; } .hpromos .big b { font-size: 40px; } .hpromos .go { font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 800px) { .hpromos { grid-template-columns: 1fr; grid-template-rows: none; } .hpromos a.big { grid-row: auto; min-height: 220px; } .hpromos .tx { max-width: 60%; } .hpromos .big b { font-size: 28px; } .catban { min-height: 160px; } .catban h1 { font-size: 30px; } .catban .tx { padding: 20px; max-width: 62%; } }
.hpromos a::before, .catban::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.7) 38%, rgba(255,255,255,0) 62%); }
.hpromos .tx, .catban .tx { position: relative; z-index: 1; } .catban { position: relative; overflow: hidden; }
.hpromos a.big { background-size: auto 100%; background-position: right center; background-color: #F4DCDA; }
.hpromos a:not(.big) b { font-size: 24px; } .hpromos a:not(.big) .tx { max-width: 48%; }
@media (max-width: 800px) { .hpromos b, .hpromos a:not(.big) b, .hpromos .big b { font-size: 21px; } .hpromos .tx, .hpromos a:not(.big) .tx { max-width: 58%; padding: 18px 20px; } .hpromos a, .hpromos a.big { min-height: 170px; } }
/* kirish sahifasi: chapda turli bo'limlar, kartada darhol kirish shakli */
.authpage .aimgs { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 14px; padding: 28px; opacity: 1; }
.authpage .aimgs span { border-radius: 22px; display: grid; place-items: center; overflow: hidden; } .authpage .aimgs span img { width: 78%; height: 78%; object-fit: contain; background: none; border-radius: 0; }
.authpage .aside::after { background: linear-gradient(180deg, rgba(22,19,26,0) 30%, rgba(22,19,26,.94) 72%); }
.authpage .aside { min-height: 600px; }
.authpage .aperks { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--a-line); display: grid; gap: 10px; }
.authpage .aperks li { display: flex; flex-direction: column; padding-inline-start: 28px; position: relative; } .authpage .aperks li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 0; width: 20px; height: 20px; border-radius: 99px; background: var(--a-soft); color: var(--a-gold); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.authpage .aperks b { font-size: 14px; } .authpage .aperks span { font-size: 13px; color: var(--a-muted); }
.authpage .authcard .f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; } .authpage .authcard .input { height: 50px; border-radius: 14px; font-size: 15px; }
/* boy pastki qism */
.ftr .wrap.ftrust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-block: 28px; border-bottom: 1px solid #3A342B; }
.ftr .ftrust > div { display: flex; gap: 12px; align-items: center; } .ftr .ftrust .c { width: 44px; height: 44px; border-radius: 14px; background: #2B2530; color: #E7C58F; display: grid; place-items: center; flex: none; }
.ftr .ftrust .c svg { width: 22px; height: 22px; } .ftr .ftrust b { display: block; color: #fff; font-size: 14px; } .ftr .ftrust span:not(.c) { font-size: 13px; color: #A69C93; }
.ftr .wrap.fcols { grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); gap: 28px; padding-block: 40px 30px; }
.ftr .fabout p { font-size: 14px; line-height: 1.6; color: #CFC6BD; margin: 14px 0; max-width: 340px; }
.ftr .fregion { display: inline-flex; align-items: center; gap: 6px; background: #2B2530; color: #fff; border: 1px solid #3A342B; border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ftr .fapps { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .ftr .fapp { display: flex; flex-direction: column; border: 1px solid #4A4048; border-radius: 12px; padding: 7px 14px; line-height: 1.2; }
.ftr .fapp small { font-size: 10px; color: #A69C93; } .ftr .fapp b { color: #fff; font-size: 14px; }
.ftr .fcols span { display: block; font-size: 14px; padding: 4px 0; } .ftr .fhours { color: #A69C93; font-size: 13px !important; }
.ftr .fcols a:hover { color: #E7C58F; }
@media (max-width: 1000px) { .ftr .wrap.fcols { grid-template-columns: 1fr 1fr 1fr; } .ftr .fabout { grid-column: 1 / -1; } .ftr .wrap.ftrust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ftr .wrap.fcols { grid-template-columns: 1fr 1fr; gap: 20px; } .ftr .wrap.ftrust { grid-template-columns: 1fr; } }
.ftr .fcols .fapp { display: flex; flex-direction: column; padding: 7px 14px; } .ftr .fcols .fapp small { display: block; }
/* mahsulot sahifasi: o'ng ustun to'liq */
.pdp .buy .pay4 { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #F5EBD3; color: #5E430F; border-radius: 16px; padding: 12px 16px; font-size: 14px; }
.pdp .buy .delopts, .pdp .buy .moreseller { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.pdp .buy .delopts > div { display: flex; justify-content: space-between; font-size: 14px; }
.pdp .buy .moreseller .ms { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); padding: 4px 0; }
.pdp .buy .moreseller .im { width: 56px; height: 56px; border-radius: 12px; background: var(--soft); overflow: hidden; display: grid; place-items: center; position: relative; } .pdp .buy .moreseller img { width: 100%; height: 100%; object-fit: contain; }
.pdp .buy .moreseller .nm { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pdp .buy .moreseller b { font-size: 14px; }
.pdp .buy .moreseller .noimg svg { width: 26px; height: 26px; color: #B9AE9F; }
.revs .protect { margin-top: 16px; border-radius: 20px; background: #EEF4F0; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.revs .protect > b { font-size: 16px; } .revs .protect div { display: flex; gap: 10px; } .revs .protect i { font-style: normal; width: 24px; height: 24px; border-radius: 99px; background: #2F6B4F; color: #fff; display: grid; place-items: center; font-size: 12px; flex: none; }
.revs .protect span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .revs .protect small { color: var(--ink-2); font-size: 13px; }
/* qabul qilinadigan to'lovlar */
.ftr .pays { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .ftr .pays small { width: 100%; color: #A69C93; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.ftr .pm { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: #fff; color: #1E1A1B; font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.ftr .pm.visa { color: #1A1F71; font-style: italic; letter-spacing: .06em; } .ftr .pm.mc { color: #EB001B; } .ftr .pm.amex { background: #2E77BC; color: #fff; } .ftr .pm.up { color: #D7261E; }
.ftr .pm.ap, .ftr .pm.gp { background: #000; color: #fff; font-weight: 600; } .ftr .pm.humo { background: #0B2B5C; color: #fff; letter-spacing: .08em; } .ftr .pm.uzc { background: #0E4C92; color: #fff; letter-spacing: .04em; }
.ftr .pm.click { background: #0D6EFD; color: #fff; } .ftr .pm.payme { background: #00CCCC; color: #fff; }
/* savat */
.csteps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 18px; flex-wrap: wrap; } .csteps li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 14px; }
.csteps li + li::before { content: ""; width: 40px; height: 2px; background: var(--line); margin-inline-end: 4px; } .csteps span { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; background: var(--soft); font-size: 13px; }
.csteps li.on { color: var(--ink); } .csteps li.on span { background: var(--ink); color: #fff; }
.cart .line .arr { color: #2F6B4F; margin-top: 6px; font-weight: 600; }
.cart .pay4 { background: #F5EBD3; color: #5E430F; border-radius: 12px; padding: 10px 12px; }
.cart .cprot { border-top: 1px solid var(--line-2); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; background: #FAF7F2; border-radius: 0 0 18px 18px; }
.cart .cprot > div:not(.cpays) { display: flex; gap: 10px; } .cart .cprot i { font-style: normal; width: 22px; height: 22px; border-radius: 99px; background: #2F6B4F; color: #fff; display: grid; place-items: center; font-size: 11px; flex: none; }
.cart .cprot span { display: flex; flex-direction: column; gap: 1px; font-size: 13px; } .cart .cprot small { color: var(--ink-2); font-size: 12px; }
.cpays { display: flex; flex-wrap: wrap; gap: 6px; } .cpays .pm { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: #fff; border: 1px solid var(--line); color: #1E1A1B; font-size: 11px; font-weight: 800; }
.cpays .pm.visa { color: #1A1F71; font-style: italic; } .cpays .pm.mc { color: #EB001B; } .cpays .pm.amex { background: #2E77BC; color: #fff; border: 0; } .cpays .pm.up { color: #D7261E; } .cpays .pm.ap, .cpays .pm.gp { background: #000; color: #fff; border: 0; }
.cpays .pm.humo { background: #0B2B5C; color: #fff; border: 0; } .cpays .pm.uzc { background: #0E4C92; color: #fff; border: 0; } .cpays .pm.click { background: #0D6EFD; color: #fff; border: 0; } .cpays .pm.payme { background: #00CCCC; color: #fff; border: 0; }
.cartempty { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .cartempty h3 { margin: 6px 0 0; font-family: var(--serif); font-size: 28px; font-weight: 500; }
.cartempty .ce-ico { width: 72px; height: 72px; border-radius: 99px; background: var(--soft); display: grid; place-items: center; } .cartempty .ce-ico svg { width: 32px; height: 32px; }
/* to'lov belgilari — bir xil, sokin uslub (rang-barang emas) */
.ftr .pays { gap: 6px; } .ftr .pm, .ftr .pm.visa, .ftr .pm.mc, .ftr .pm.amex, .ftr .pm.up, .ftr .pm.ap, .ftr .pm.gp, .ftr .pm.humo, .ftr .pm.uzc, .ftr .pm.click, .ftr .pm.payme {
  background: transparent; color: #E8E1D8; border: 1px solid #4A4048; border-radius: 8px; height: 30px; padding: 0 12px; font-size: 12px; font-weight: 600; font-style: normal; letter-spacing: .04em; }
.cpays .pm, .cpays .pm.visa, .cpays .pm.mc, .cpays .pm.amex, .cpays .pm.up, .cpays .pm.ap, .cpays .pm.gp, .cpays .pm.humo, .cpays .pm.uzc, .cpays .pm.click, .cpays .pm.payme {
  background: #fff; color: #4A423E; border: 1px solid var(--line); font-weight: 600; font-style: normal; letter-spacing: .03em; }
/* kirish sahifasi v2: rasmlar to'liq ko'rinadi, karta kattaroq, ishonch belgilari */
.authpage { border-radius: 28px; overflow: hidden; margin-top: 8px; }
.authpage .aside { justify-content: space-between; gap: 24px; padding: 28px; min-height: 0; }
.authpage .aimgs { position: relative; inset: auto; padding: 0; height: 360px; } .authpage .aside::after { display: none; }
.authpage .acopy { padding: 4px 8px 8px; } .authpage .acopy h2 { font-size: 40px; }
.authpage .acol { padding: 48px 32px; } .authpage .acolin { width: 100%; max-width: 470px; display: flex; flex-direction: column; gap: 16px; }
.authpage .authcard { max-width: none; padding: 36px; } .authpage .atitle { font-size: 32px; }
.authpage .anext { display: flex; gap: 12px; align-items: center; background: #F5EBD3; color: #5E430F; border-radius: 18px; padding: 14px 16px; }
.authpage .anext svg { width: 24px; height: 24px; flex: none; } .authpage .anext span { display: flex; flex-direction: column; gap: 2px; } .authpage .anext small { font-size: 13px; }
.authpage .atrust { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; color: var(--a-muted); font-size: 13px; font-weight: 600; }
.authpage .atrust span { display: inline-flex; align-items: center; gap: 6px; } .authpage .atrust svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .authpage .aimgs { height: 200px; } .authpage .acopy h2 { font-size: 28px; } .authpage .acol { padding: 24px 16px; } .authpage .authcard { padding: 24px; } }
.authpage .aimgs { flex: 1; height: auto; min-height: 340px; } .authpage .aimgs span img { width: 62%; height: 62%; }

/* ---------- checkout: aqlli manzil ---------- */
.addrcard { overflow: visible; }
.addrhd { display: flex; align-items: center; gap: 14px; padding: 18px 20px 6px; } .addrhd h3 { margin: 0; }
.addrico { width: 42px; height: 42px; border-radius: 12px; background: #F4E9DB; color: #7A2232; display: grid; place-items: center; flex: none; }
.addrtag { font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-bg); padding: 5px 10px; border-radius: 99px; }
.addrgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 20px 20px; } .addrgrid .full { grid-column: 1 / -1; }
.geo { position: relative; } .geo .input { width: 100%; }
.geo .gpin { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #7A2232; pointer-events: none; display: flex; }
.geo .gpin + .input { padding-left: 42px; height: 52px; font-size: 16px; font-weight: 600; border-width: 1.5px; }
.geo .gok { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; display: none; place-items: center; }
.geo.ok .gok { display: grid; } .geo.ok .input { border-color: var(--green); }
.geohint { font-weight: 400; margin-top: 2px; }
.geobox { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(23,20,15,.35); padding: 6px; max-height: 340px; overflow-y: auto; }
.geoopt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink); }
.geoopt svg { color: var(--muted); flex: none; } .geoopt span { display: flex; flex-direction: column; min-width: 0; } .geoopt b { font-weight: 600; } .geoopt small { color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geoopt:hover, .geoopt.on { background: var(--soft); } .geoopt:hover svg, .geoopt.on svg { color: #7A2232; }
.geofoot { text-align: right; font-size: 11px; color: var(--muted); padding: 4px 10px 2px; font-weight: 400; } .geonone { padding: 12px; color: var(--muted); font-weight: 400; font-size: 14px; }
@keyframes geoflash { 0% { background: #E3F3EE; } 100% { background: #fff; } } .geoflash { animation: geoflash 1.4s ease; }
@media (max-width: 700px) { .addrgrid { grid-template-columns: 1fr; padding: 12px 16px 16px; } }

/* ---------- qaytarish ---------- */
.retpage { display: flex; flex-direction: column; gap: 18px; }
.rethero { display: flex; align-items: center; gap: 24px; justify-content: space-between; background: linear-gradient(120deg, #1E1A1B, #3A1F27); color: #F3EEE6; border-radius: 22px; padding: 30px 34px; }
.rethero .kick { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #E7C58F; } .rethero h2 { font-size: 40px; margin: 6px 0; } .rethero p { margin: 0; color: #CFC6BD; max-width: 620px; line-height: 1.55; }
.rethero .btn { background: #F3EEE6; color: #1E1A1B; border: 0; }
.retclock { flex: none; width: 112px; height: 112px; border-radius: 50%; border: 2px solid #E7C58F; display: grid; place-items: center; text-align: center; align-content: center; } .retclock b { font-size: 40px; line-height: 1; font-family: var(--serif); } .retclock span { font-size: 12px; color: #CFC6BD; }
.retgrid { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
.rstep { padding: 22px; display: flex; flex-direction: column; gap: 12px; } .rstep h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.rstep h3 i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 14px; }
.ritem { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: .15s; }
.ritem.on { border-color: var(--ink); background: #FBF8F3; } .ritem input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ink); }
.ritem img, .ritem .ph, .rrow img, .rrow .ph, .rdethd img, .rdethd .ph { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--soft); flex: none; }
.ritem span.grow { display: flex; flex-direction: column; } .ritem small, .rrow small { color: var(--muted); } .ritem select.sm { width: 76px; height: 40px; }
.ropts { display: flex; flex-wrap: wrap; gap: 8px; }
.ropt { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); transition: .15s; }
.ropt:hover { border-color: var(--ink-2); } .ropt.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rbig { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ropt.big { border-radius: 16px; display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 16px; } .ropt.big span.grow { display: flex; flex-direction: column; gap: 4px; } .ropt.big small { font-weight: 400; color: var(--muted); line-height: 1.45; }
.ropt.big .ri { width: 40px; height: 40px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; flex: none; color: #7A2232; } .ropt.big em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-bg); padding: 3px 8px; border-radius: 99px; }
.ropt.big.on { background: #FBF8F3; color: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; } .ropt.big.on .ri { background: var(--ink); color: #fff; }
.retsum { position: sticky; top: 150px; padding: 22px; display: flex; flex-direction: column; gap: 12px; } .retsum h3 { margin: 0; } #retsum { display: flex; flex-direction: column; gap: 10px; }
.rsrow { display: flex; justify-content: space-between; gap: 12px; } .rsrow span { color: var(--muted); } .rsrow.tot { border-top: 1px solid var(--line-2); padding-top: 12px; font-size: 18px; } .rsrow.tot span { color: var(--ink); font-weight: 700; } .green { color: var(--green); }
.rhow { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.rhow li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; font-size: 14px; } .rhow li::before { content: counter(s); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-weight: 700; font-size: 12px; } .rhow span { color: var(--muted); font-size: 13px; }
.rprot { display: flex; gap: 10px; background: var(--green-bg); color: var(--green); border-radius: 12px; padding: 12px; font-size: 13px; line-height: 1.45; }
.rhowbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .rhowbar div { background: #fff; border: 1px solid var(--line-2); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.rhowbar div > span { width: 38px; height: 38px; border-radius: 12px; background: #F4E9DB; color: #7A2232; display: grid; place-items: center; margin-bottom: 6px; } .rhowbar small { color: var(--muted); }
.rrow { display: flex; align-items: center; gap: 16px; padding: 14px 18px; text-decoration: none; color: inherit; transition: .15s; } a.rrow:hover { box-shadow: 0 10px 30px -14px rgba(23,20,15,.3); }
.rrow span.grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rright { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rprog { display: flex; gap: 6px; margin-top: 6px; max-width: 320px; } .rprog span { flex: 1; } .rprog i { display: block; height: 5px; border-radius: 99px; background: var(--line-2); } .rprog .on i { background: var(--green); }
.rprog.big { max-width: none; margin: 18px 0 6px; } .rprog.big i { height: 7px; } .rprog.big em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 8px; } .rprog.big .cur em { color: var(--ink); font-weight: 700; }
.rdet { padding: 22px; } .rdethd { display: flex; gap: 16px; align-items: center; } .rdethd h2 { margin: 0; font-size: 28px; }
.rnext { background: var(--soft); border-radius: 14px; padding: 14px 16px; margin-top: 14px; line-height: 1.5; font-weight: 600; }
.rcode { margin-top: 14px; border: 2px dashed var(--ink); border-radius: 16px; padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 4px; } .rcode span { color: var(--muted); font-size: 13px; } .rcode b { font-size: 34px; letter-spacing: .12em; font-family: ui-monospace, Menlo, monospace; } .rcode small { color: var(--muted); }
.rhist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .rhist li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.okbar { display: flex; gap: 10px; align-items: center; background: var(--green-bg); color: var(--green); }
.retempty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 20px; } .retempty > .ico { width: 40px; height: 40px; color: #7A2232; } .retempty h3 { margin: 6px 0 0; }
.ordret { padding: 0 0 6px; } .ordret .orh { display: flex; gap: 14px; align-items: center; padding: 16px 18px; } .ordret .orh h3 { margin: 0; } .ordret .orh > .ico { width: 26px; height: 26px; color: #7A2232; }
.rrow.mini { border-top: 1px solid var(--line-2); border-radius: 0; padding: 12px 18px; }
@media (max-width: 900px) { .retgrid { grid-template-columns: 1fr; } .retsum { position: static; } .rbig, .rhowbar { grid-template-columns: 1fr 1fr; } .rethero { padding: 22px; } .rethero h2 { font-size: 30px; } .retclock { width: 84px; height: 84px; } .retclock b { font-size: 28px; } }
@media (max-width: 600px) { .rbig { grid-template-columns: 1fr; } .rethero { flex-direction: column; align-items: flex-start; } }

/* ---------- xaridor kabineti ---------- */
.acct { display: flex; flex-direction: column; gap: 20px; }
.acthero { position: relative; overflow: hidden; border-radius: 26px; padding: 34px 36px; color: #F3EEE6; background: radial-gradient(120% 140% at 100% 0%, #7A2232 0%, #3A1F27 38%, #1E1A1B 75%); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.acthero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; border: 40px solid rgba(231,197,143,.08); pointer-events: none; }
.acthl { display: flex; align-items: center; gap: 22px; } .avatar { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #E7C58F, #B88A4A); color: #1E1A1B; display: grid; place-items: center; font-family: var(--serif); font-size: 38px; font-weight: 700; box-shadow: 0 0 0 5px rgba(231,197,143,.18); flex: none; }
.acthero .kick { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #E7C58F; } .acthero h1 { font-size: 46px; margin: 4px 0 8px; line-height: 1; text-transform: capitalize; }
.actmeta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: #CFC6BD; font-size: 14px; } .actmeta .chip { background: rgba(255,255,255,.08); color: #F3EEE6; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.actstats { display: grid; grid-template-columns: repeat(4, minmax(96px, 1fr)); gap: 10px; position: relative; z-index: 1; }
.actstats a { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 16px 18px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; transition: .15s; } .actstats a:hover { background: rgba(255,255,255,.14); }
.actstats b { font-size: 32px; font-family: var(--serif); line-height: 1.1; } .actstats span { font-size: 13px; color: #CFC6BD; }
.actalert { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; color: inherit; background: var(--amber-bg); border-color: #F0DDB6; } .actalert > .ico { color: var(--amber); width: 24px; height: 24px; } .actalert span.grow { display: flex; flex-direction: column; } .actalert small { color: var(--ink-2); }
.acttiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.acttile { padding: 18px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; transition: transform .15s, box-shadow .15s; } .acttile:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(23,20,15,.35); }
.acttile .ti { width: 44px; height: 44px; border-radius: 14px; background: #F4E9DB; color: #7A2232; display: grid; place-items: center; margin-bottom: 8px; } .acttile .ti .ico { width: 22px; height: 22px; } .acttile small { color: var(--muted); }
.actgrid { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.actorders .hdline { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 8px; } .actorders h3 { margin: 0; }
.aord { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line-2); text-decoration: none; color: inherit; } .aord:hover { background: #FBF8F3; } .aord span.grow { display: flex; flex-direction: column; } .aord small { color: var(--muted); }
.thumbs { display: flex; flex: none; width: 112px; } .thumbs img, .thumbs .ph { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--soft); border: 2px solid #fff; margin-right: -22px; box-shadow: 0 2px 6px rgba(23,20,15,.12); }
.actempty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; text-align: center; } .actempty > .ico { width: 36px; height: 36px; color: #7A2232; }
.actperks h3, .acthelp h3 { margin: 0 0 12px; } .perk { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); } .perk:first-of-type { border-top: 0; } .perk > span { color: var(--green); } .perk div { display: flex; flex-direction: column; } .perk small { color: var(--muted); }
.acthelp { display: flex; flex-direction: column; gap: 10px; } .acthelp p { margin: 0; } .btn.ghost { background: none; }
@media (max-width: 1000px) { .actgrid { grid-template-columns: 1fr; } .acttiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .acthero { padding: 24px 20px; } .acthero h1 { font-size: 34px; } .avatar { width: 64px; height: 64px; font-size: 28px; } .actstats { grid-template-columns: repeat(2, 1fr); width: 100%; } .thumbs { width: 80px; } }

.routecard .etanote { margin-top: 8px; }

.phonesoon { padding: 14px; border: 1px dashed var(--line); border-radius: 16px; background: #FBF8F3; } .phonesoon :disabled { cursor: not-allowed; } .phonesoon .chseg button:disabled { opacity: .75; }
.soontag { font-size: 12px; font-weight: 700; color: var(--amber); background: var(--amber-bg); padding: 4px 10px; border-radius: 99px; }

/* ---------- sarlavhada til va valyuta ---------- */
.locw { position: relative; }
.hact .locbtn { gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-weight: 600; }
.hact .locbtn:hover { border-color: var(--ink-2); } .locbtn b { font-weight: 700; color: var(--muted); } .locbtn i { font-style: normal; font-size: 11px; color: var(--muted); }
.locmenu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 340px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(23,20,15,.35); padding: 6px 0; }
.lmsec { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; } .lmsec + .lmsec { border-top: 1px solid var(--line-2); } .lmsec > b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lmgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .lmgrid.cur { grid-template-columns: repeat(3, 1fr); }
.hact .lmgrid button { justify-content: space-between; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; font-weight: 500; font-size: 14px; }
.hact .lmgrid button:hover { background: var(--soft); } .hact .lmgrid button.on { border-color: var(--ink); font-weight: 700; } .lmgrid button span { color: var(--green); }
.lmsec details summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 4px 0; } .lmsec details .lmgrid { margin-top: 8px; max-height: 220px; overflow-y: auto; }
.lmfoot { flex-direction: row; align-items: center; justify-content: space-between; font-size: 14px; }

/* ---------- ro'yxat sarlavhasi: tezkor filtrlar ---------- */
.sec-h.lhead { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .lhead .lht { display: flex; align-items: baseline; gap: 12px; flex: none; }
.qchips { display: flex; align-items: center; gap: 8px; flex: 1; overflow-x: auto; scrollbar-width: none; padding: 4px 0; } .qchips::-webkit-scrollbar { display: none; }
.qchip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; transition: .15s; }
.qchip span { font-weight: 500; color: var(--muted); font-size: 12px; } .qchip:hover { border-color: var(--ink-2); }
.qchip.on { background: var(--ink); color: #fff; border-color: var(--ink); } .qchip.on span { color: #D8D0C4; }
.qchip.brand { background: var(--soft); border-color: transparent; } .qchip.brand.on { background: var(--ink); }
.qtrust { margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green); font-weight: 600; } .qtrust .ico { width: 16px; height: 16px; }
@media (max-width: 900px) { .qtrust { display: none; } }

.pc .pco { font-size: 13px; color: var(--muted); margin-top: 2px; }

.scrollbtns { position: fixed; right: 24px; bottom: 28px; z-index: 40; display: flex; flex-direction: column; gap: 8px; }
.scrollbtns[hidden] { display: none; }
.scrollbtns button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 20px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(23,20,15,.5); transition: transform .15s, opacity .15s; }
.scrollbtns button:hover { transform: translateY(-2px); } .scrollbtns button:disabled { opacity: .3; cursor: default; transform: none; }
@media (max-width: 760px) { .scrollbtns { right: 14px; bottom: 86px; } .scrollbtns button { width: 42px; height: 42px; } }
/* ---------- ro'yxatdan o'tish v3: telefon yoki email, boyroq chap panel ---------- */
.regpage .aside { background: radial-gradient(120% 80% at 0% 0%, #2B2230 0%, #16131A 55%), #16131A; }
.regpage .aimgs span { position: relative; animation: rFloat 7s ease-in-out infinite; animation-delay: var(--d, 0s); box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); transition: transform .3s; }
.regpage .aimgs span:hover { transform: translateY(-4px) rotate(-1deg); }
@keyframes rFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .regpage .aimgs span { animation: none; } }
.regpage .tbadge { position: absolute; top: 12px; inset-inline-start: 12px; font-style: normal; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: #16131A; color: #fff; letter-spacing: .02em; }
.regpage .acopy { max-width: none; gap: 16px; }
.regpage .asub { color: #CFC6BD; margin: 0; font-size: 16px; line-height: 1.5; max-width: 520px; }
.regpage .achips { display: flex; flex-wrap: wrap; gap: 8px; }
.regpage .achips span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #F3EEE6; font-size: 13px; font-weight: 600; }
.regpage .achips svg { width: 16px; height: 16px; color: #E7C58F; }
.regpage .avals { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.regpage .avals li { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.regpage .avals li > span { width: 36px; height: 36px; border-radius: 12px; background: #E7C58F; color: #16131A; display: grid; place-items: center; } .regpage .avals li > span svg { width: 20px; height: 20px; }
.regpage .avals b { display: block; color: #fff; font-size: 14px; } .regpage .avals small { display: block; color: #CFC6BD; font-size: 12px; line-height: 1.4; margin-top: 2px; }
.regpage .authcard { position: relative; overflow: hidden; }
.regpage .authcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #B88A4A, #E7C58F, #B88A4A); }
.regtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 99px; background: var(--a-soft); border: 1px solid var(--a-line); }
.regtabs button { height: 44px; border: 0; border-radius: 99px; background: transparent; color: var(--a-muted); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.regtabs button svg { width: 18px; height: 18px; }
.regtabs button[aria-selected="true"] { background: var(--a-card); color: var(--a-ink); box-shadow: 0 4px 14px -6px rgba(22,19,26,.3); }
.regtabs .soontag { font-size: 10px; padding: 2px 7px; }
.regpane { animation: aIn .35s ease; }
.authpage .ifield { position: relative; display: block; }
.authpage .ifield > svg { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--a-muted); pointer-events: none; }
.authpage .ifield .input { width: 100%; padding-inline-start: 42px; }
.authpage .ifield .input:focus { border-color: var(--a-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-ink) 12%, transparent); outline: none; }
.authpage .pweye { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border: 0; border-radius: 99px; background: transparent; color: var(--a-muted); display: grid; place-items: center; cursor: pointer; }
.authpage .pweye svg { width: 18px; height: 18px; } .authpage .pweye.on { color: var(--a-ink); background: var(--a-soft); }
.pwmeter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; } .pwmeter i { height: 4px; border-radius: 4px; background: var(--a-line); transition: background .25s; }
.pwmeter[data-s="1"] i:nth-child(-n+1) { background: #D9534F; } .pwmeter[data-s="2"] i:nth-child(-n+2) { background: #E0A030; }
.pwmeter[data-s="3"] i:nth-child(-n+3) { background: #7FB24A; } .pwmeter[data-s="4"] i { background: #1F9D55; }
.regnote { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--a-soft); color: var(--a-muted); font-size: 13px; line-height: 1.45; }
.regnote svg { width: 18px; height: 18px; flex: none; color: var(--a-gold); margin-top: 1px; }
.authpage .bigico.code { background: var(--a-soft); color: var(--a-ink); } .authpage .bigico.code svg { width: 28px; height: 28px; }
.authpage .center { text-align: center; }
.authpage.dark .phonesoon { background: var(--a-soft); border-color: var(--a-line); }
.regperks { grid-template-columns: repeat(3, 1fr); border-top: 0; padding-top: 0; gap: 8px; }
.regperks li { padding: 12px 12px 12px 38px; border-radius: 16px; background: var(--a-card); border: 1px solid var(--a-line); }
.regperks li::before { inset-inline-start: 12px; top: 12px; }
@media (max-width: 1100px) { .regpage .avals { grid-template-columns: 1fr; } .regpage .avals li { flex-direction: row; align-items: center; } }
@media (max-width: 900px) { .regpage .avals, .regpage .achips { display: none; } .regperks { grid-template-columns: 1fr; } .regpage .tbadge { font-size: 10px; padding: 3px 7px; top: 8px; inset-inline-start: 8px; } }
.regperks li { padding: 40px 12px 12px; } .regperks li::before { inset-inline-start: 12px; top: 12px; } .regperks b { font-size: 13px; line-height: 1.3; } .regperks span { font-size: 12px; }
@media (max-width: 900px) { .regperks li { padding: 12px 12px 12px 40px; } }
@media (max-width: 900px) { .authpage { grid-template-columns: minmax(0, 1fr); } .authpage .aside, .authpage .acol { min-width: 0; }
  .authpage .aimgs { min-height: 0; height: 230px; gap: 10px; } .authpage .aside { padding: 20px; gap: 18px; } .regpage .tbadge { display: none; } }
@media (max-width: 900px) { .authpage .acol { display: block; } .authpage .acolin { max-width: none; } }

.guestbox { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #FBF8F3; border: 1px dashed var(--line); }
.anext .aguest { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--ink); }

.colors button .cdot { display: block; width: 100%; height: 100%; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pc .pvar { display: flex; align-items: center; gap: 5px; margin-top: 4px; } .pc .pvar i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.pc .pvar span { font-size: 12px; color: var(--muted); margin-left: 4px; }
.colors button:has(.cdot) { width: 44px; height: 44px; border-radius: 50%; padding: 3px; background: #fff; }

/* ---------- savat: tugagan mahsulot ---------- */
.cart .line { position: relative; } .cart .line.soldout > *:not(.soldtag) { opacity: .45; } .cart .line.soldout .qty { pointer-events: none; }
.cart .line.soldout [data-act="rm"], .cart .line.soldout [data-act="later"] { opacity: 1; }
.soldtag { position: absolute; left: 14px; top: 14px; z-index: 2; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; letter-spacing: .02em; }
.soldbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--red-bg); color: var(--red); margin-bottom: 12px; }
.lowleft { color: var(--sale); font-weight: 700; margin-top: 6px; }

/* ---------- qaytarish: rasmlar ---------- */
.rphwrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .rphotos { display: flex; gap: 8px; flex-wrap: wrap; } .rphotos.view { margin-top: 14px; }
.rph { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--soft); display: block; } .rph img { width: 100%; height: 100%; object-fit: cover; }
.rph button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(23,20,15,.75); color: #fff; font-size: 11px; cursor: pointer; }
.rphadd { cursor: pointer; } .rcode .btn { align-self: center; }
.geohd { position: sticky; top: -6px; z-index: 1; background: #fff; padding: 10px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #7A716B); }
.geobox .geoopt.on { background: #F4EFE8; }

/* ---------- yuqori qator: sotuvchi bo'ling + Telegram/WhatsApp kattaroq ---------- */
.topbar .wrap { height: 50px; gap: 14px; font-size: 14px; }
.topbar .tbsell { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 99px; background: #E7C58F; color: #16131A; font-weight: 800; font-size: 14px; transition: transform .15s, background .15s; }
.topbar .tbsell:hover { background: #F0D4A6; transform: translateY(-1px); } .topbar .tbsell .ico { width: 18px; height: 18px; }
.topbar .tbhelp { display: inline-flex; align-items: center; gap: 8px; } .topbar .muted-l { color: #B9AFA3; font-weight: 600; }
.topbar .tbch { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 10px; border-radius: 99px; border: 1px solid #4A4048; color: #fff; font-weight: 700; font-size: 14px; transition: background .15s, border-color .15s; }
.topbar .tbch svg { width: 20px; height: 20px; } .topbar .tbch.telegram svg path { fill: #2AABEE; }
.topbar a.tbch.telegram:hover { background: #229ED9; border-color: #229ED9; } .topbar a.tbch.telegram:hover svg path { fill: #fff; }
.topbar a.tbch.whatsapp:hover { background: #1DA851; border-color: #1DA851; } .topbar a.tbch.whatsapp:hover svg path { fill: #fff; }
@media (max-width: 900px) { .topbar .muted-l { display: none; } .topbar .tbch { padding: 0 10px; } }
@media (max-width: 600px) { .topbar .wrap > .grow { display: none; } .topbar .wrap { justify-content: space-between; gap: 8px; } .topbar .tbch { font-size: 0; gap: 0; width: 36px; padding: 0; justify-content: center; } .topbar .tbsell { font-size: 13px; padding: 0 12px; } }

/* ---------- bo'limlar qatori: ‹ › tugmalar, hammasi ko'rinadi ---------- */
.catwrap { position: relative; }
.catwrap::before, .catwrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .2s; }
.catwrap::before { left: 0; background: linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)); } .catwrap::after { right: 0; background: linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)); }
.catwrap.fl::before, .catwrap.fr::after { opacity: 1; }
.catarr { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 38px; height: 38px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 24px; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(23,20,15,.35); padding-bottom: 3px; }
.catarr:hover { background: var(--ink); color: #fff; } .catarr.l { left: 0; } .catarr.r { right: 0; } .catarr[hidden] { display: none; }
.catnav { scroll-behavior: smooth; } .catnav::-webkit-scrollbar { display: none; }
.catnav a.allcats { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); border: 1px solid var(--line); } .catnav a.allcats .ico { width: 16px; height: 16px; }
@media (hover: none) { .catarr { display: none !important; } }

/* ---------- bosh banner v3 ---------- */
.hhero.hx { position: relative; isolation: isolate; background: linear-gradient(135deg, #1B1520 0%, #120F15 55%, #1E1714 100%); padding: 52px 52px 44px; gap: 44px; }
.hx .hglow { position: absolute; inset: -30% -10% auto auto; width: 70%; height: 140%; background: radial-gradient(closest-side, rgba(231,197,143,.28), rgba(231,197,143,0) 70%); z-index: -1; animation: hGlow 9s ease-in-out infinite alternate; pointer-events: none; }
.hx::after { content: ""; position: absolute; inset: auto auto -40% -15%; width: 55%; height: 90%; background: radial-gradient(closest-side, rgba(122,34,50,.45), rgba(122,34,50,0) 70%); z-index: -1; pointer-events: none; }
@keyframes hGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8%, 6%) scale(1.12); } }
.hx .tx { display: flex; flex-direction: column; min-width: 0; }
.hx .hkick { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 99px; background: rgba(231,197,143,.12); border: 1px solid rgba(231,197,143,.35); color: #F0D4A6; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.hx .hkick .ico { width: 16px; height: 16px; color: #E7C58F; animation: hSpin 6s linear infinite; } @keyframes hSpin { 50% { transform: rotate(180deg) scale(1.15); } }
.hx .hkick .pulse { width: 8px; height: 8px; border-radius: 99px; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: hPulse 1.8s infinite; } @keyframes hPulse { 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.hx h1 { display: flex; flex-direction: column; gap: 6px; margin: 22px 0 18px; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.025em; }
.hx h1 span { color: #fff; } .hx h1 i { background: linear-gradient(90deg, #E7C58F, #F7E3BF 45%, #C99A55); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 6px; }
.hx p { font-size: 17px; max-width: 500px; }
.hx .hmarq { margin: 24px 0 4px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hx .hmarq .track { display: flex; gap: 10px; width: max-content; animation: hMarq 50s linear infinite; } .hx .hmarq:hover .track { animation-play-state: paused; }
@keyframes hMarq { to { transform: translateX(-50%); } } [dir="rtl"] .hx .hmarq .track { animation-direction: reverse; }
.hx .hmarq a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 6px; border-radius: 99px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #F3EEE6; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.hx .hmarq a img { width: 30px; height: 30px; border-radius: 99px; background: #F4EFE8; padding: 3px; object-fit: contain; box-sizing: border-box; } .hx .hmarq a:hover { background: rgba(255,255,255,.16); }
.hx .cta { margin-top: 22px; } .hx .btn-w { box-shadow: 0 10px 30px -10px rgba(231,197,143,.6); transition: transform .15s; } .hx .btn-w:hover { transform: translateY(-2px); }
.hx .btn-o:hover { background: rgba(255,255,255,.08); }
.hx .hstats { display: flex; gap: 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.hx .hstats div { display: flex; flex-direction: column; gap: 2px; } .hx .hstats b { font-family: var(--serif); font-size: 30px; font-weight: 500; color: #fff; line-height: 1; } .hx .hstats span { font-size: 13px; color: #B9AFA3; }
.hx .hmos { position: relative; grid-auto-rows: 170px; }
.hx .hmos a { animation: hFloat 7s ease-in-out infinite; animation-delay: var(--d, 0s); box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); transition: transform .25s; }
.hx .hmos a:hover { transform: translateY(-6px) scale(1.02); } .hx .hmos a:hover img { transform: scale(1.06); } .hx .hmos img { transition: transform .35s; }
@keyframes hFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.hx .hfloat { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.95); color: #16131A; font-size: 13px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); backdrop-filter: blur(8px); animation: hFloat 6s ease-in-out infinite; }
.hx .hfloat .ico { width: 18px; height: 18px; color: #1F9D55; } .hx .hfloat.f1 { top: -14px; right: 18px; } .hx .hfloat.f2 { bottom: -14px; left: 28%; animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) { .hx *, .hx .hglow { animation: none !important; } }
@media (max-width: 1000px) { .hhero.hx { padding: 32px; } .hx .hfloat { display: none; } }
@media (max-width: 760px) { .hhero.hx { padding: 24px 20px; } .hx h1 { font-size: 34px; margin: 14px 0 12px; } .hx .hstats { gap: 18px; } .hx .hstats b { font-size: 24px; } .hx .hmarq { margin-top: 16px; } }

/* ---------- bo'limlar: ikonka o'rniga rangli rasm ---------- */
.hdeps2 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.hdeps2 a { position: relative; overflow: hidden; padding: 14px 14px 16px; gap: 4px; border-radius: 22px; }
.hdeps2 a::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 58%; background: var(--bg); transition: height .25s; z-index: 0; }
.hdeps2 a > * { position: relative; z-index: 1; }
.hdeps2 i { width: 100%; height: 96px; border-radius: 0; background: none; margin-bottom: 10px; display: grid; place-items: center; }
.hdeps2 i img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(23,20,15,.18)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.hdeps2 a:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(23,20,15,.4); border-color: transparent; }
.hdeps2 a:hover::before { height: 66%; } .hdeps2 a:hover i img { transform: scale(1.12) rotate(-4deg); }
.hdeps2 b { font-size: 15px; } .hdeps2 span { font-size: 12px; }
.hdeps2 a.soon { opacity: 1; } .hdeps2 a.soon i img { filter: grayscale(.5); opacity: .75; } .hdeps2 a.soon span { color: var(--amber, #B7791F); font-weight: 700; }
@media (max-width: 760px) {
  .hdeps2 a { width: 92px; padding: 0 0 6px; background: none; border: 0; } .hdeps2 a::before { display: none; } .hdeps2 a.soon { display: none; }
  .hdeps2 i { width: 76px; height: 76px; margin: 0 auto 6px; border-radius: 22px; background: var(--bg); } .hdeps2 i img { width: 54px; height: 54px; } .hdeps2 b { font-size: 12px; } }
.hhero.hx { grid-template-columns: 1.2fr 1fr; }
.hx h1 { font-size: clamp(36px, 3.7vw, 56px); text-wrap: balance; } .hx h1 i { text-wrap: balance; }
.hdeps2 i img, .hx .hmarq a img { mix-blend-mode: multiply; }
@media (max-width: 760px) { .hx .hkick { font-size: 12px; padding: 6px 12px 6px 10px; } }

/* ---------- to'lov belgilari: rangli kartochkalar ---------- */
.pm2 { display: inline-grid; place-items: center; width: 60px; height: 38px; border-radius: 9px; background: #fff; border: 1px solid #E8E1D7; box-shadow: 0 2px 6px -2px rgba(23,20,15,.15); transition: transform .15s, box-shadow .15s; }
.pm2:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(23,20,15,.35); } .pm2 svg { display: block; }
.ftr .pays { gap: 8px; } .ftr .pm2 { border-color: transparent; }
.cpays { gap: 8px; padding-top: 6px; } .cpays .pm2 { width: 56px; height: 36px; } .cpays .pm2 svg { width: 56px; height: 36px; }

/* ---------- qaytarishlar sahifasi v3 ---------- */
.rethero.rx { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr 1.05fr; gap: 32px; align-items: center; padding: 40px; border-radius: 28px; background: linear-gradient(135deg, #1B1520, #120F15 60%, #22191A); color: #fff; }
.rx .rglow { position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 60%; height: 160%; background: radial-gradient(closest-side, rgba(231,197,143,.25), transparent 70%); animation: hGlow 9s ease-in-out infinite alternate; }
.rx .kick { display: inline-flex; align-items: center; gap: 8px; color: #E7C58F; } .rx .kick .ico { width: 15px; height: 15px; }
.rx h2 { font-size: clamp(34px, 3.6vw, 50px); margin: 10px 0 10px; color: #fff; } .rx p { color: #CFC6BD; font-size: 16px; line-height: 1.55; margin: 0; max-width: 460px; }
.rx .rxcta { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.rx .btn-w { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 99px; background: #fff; color: #16131A; font-weight: 800; text-decoration: none; box-shadow: 0 10px 30px -10px rgba(231,197,143,.6); } .rx .btn-w .ico { width: 18px; height: 18px; }
.rx .rx14 { display: flex; align-items: center; gap: 10px; } .rx .rx14 b { font-family: var(--serif); font-size: 46px; font-weight: 500; line-height: 1; background: linear-gradient(90deg, #E7C58F, #F7E3BF); -webkit-background-clip: text; background-clip: text; color: transparent; } .rx .rx14 small { color: #CFC6BD; font-size: 13px; max-width: 70px; line-height: 1.25; }
.rpolicy { display: flex; flex-direction: column; gap: 10px; }
.rpc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
.rpc .ri { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; background: rgba(74,222,128,.15); color: #4ADE80; } .rpc .ri .ico { width: 20px; height: 20px; }
.rpc.paid .ri { background: rgba(251,191,36,.15); color: #FBBF24; }
.rpc b { display: block; font-size: 15px; color: #fff; } .rpc small { display: block; font-size: 13px; color: #B9AFA3; margin-top: 2px; }
.rpc em { font-style: normal; font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 99px; background: #4ADE80; color: #0B2A17; white-space: nowrap; } .rpc.paid em { background: #FBBF24; color: #3A2A00; }
.rsteps { position: relative; } .rsteps > div { position: relative; transition: transform .2s, box-shadow .2s; } .rsteps > div:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(23,20,15,.4); }
.rsteps > div > span { background: linear-gradient(135deg, #F5EBD3, #E7C58F) !important; color: #4A3510 !important; }
.rxempty { padding: 44px 24px; } .rxempty .rxbox { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; margin: 0 auto 10px; background: linear-gradient(135deg, #F5EBD3, #E7C58F); color: #4A3510; animation: hFloat 5s ease-in-out infinite; } .rxempty .rxbox .ico { width: 32px; height: 32px; }
.rxempty .btn { margin-top: 10px; }
.amber { color: #B7791F; } .ropt.big em.paid { background: #FEF3C7; color: #92400E; }
.rabroad { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: #FEF3C7; color: #78350F; font-size: 13px; line-height: 1.45; margin: 6px 0; } .rabroad .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.rfrom { color: #92400E; font-weight: 700; }
@media (max-width: 900px) { .rethero.rx { grid-template-columns: 1fr; padding: 24px 20px; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .rx .rglow, .rxempty .rxbox { animation: none; } }
.docbody .dochd { font-size: 16px; margin: 18px 0 6px; white-space: normal; } .docbody .dochd:first-child { margin-top: 4px; } .docbody .docp { white-space: pre-wrap; }
.legalpage { max-width: 860px; margin: 0 auto; } .legalpage .docbody { font-size: 15px; line-height: 1.65; } .legalpage .dochd { font-family: var(--serif); font-size: 21px; margin-top: 26px; }

/* ---------- mahsulot sahifasi v3: rasm yopishib turadi, tavsif to'liq kenglikda, o'ngda yopishgan mini-karta ---------- */
.pdp > .col:first-child { position: sticky; top: 160px; }
.pdpinfo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 40px; }
.pinmain { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pintabs { position: sticky; top: 152px; z-index: 5; display: flex; gap: 6px; padding: 6px; border-radius: 99px; background: #fff; backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: 0 10px 30px -22px rgba(23,20,15,.5); overflow-x: auto; scrollbar-width: none; }
.pintabs a { flex: none; padding: 9px 16px; border-radius: 99px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 14px; transition: background .15s, color .15s; }
.pintabs a:hover { background: var(--ink); color: #fff; } .pintabs em { font-style: normal; font-size: 12px; background: #F5EBD3; color: #5E430F; padding: 1px 7px; border-radius: 99px; margin-inline-start: 4px; }
.pcard { scroll-margin-top: 220px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 26px 30px; }
.pchd { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .pchd h2 { font-family: var(--serif); font-size: 26px; margin: 0; }
.pci { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #F5EBD3, #E7C58F); color: #4A3510; } .pci .ico { width: 20px; height: 20px; }
.pci.sm { width: 36px; height: 36px; border-radius: 12px; } .pci.sm .ico { width: 18px; height: 18px; }
/* tavsif matni: bir xil shrift, kichikroq, o'qishga qulay */
.prich { font-size: 14.5px; line-height: 1.7; color: #3D3734; }
.prich h2, .prich h3 { font-family: var(--font, Inter, sans-serif) !important; color: var(--ink); letter-spacing: 0; }
.prich h2 { font-size: 16px; font-weight: 800; margin: 22px 0 8px; padding-inline-start: 12px; border-inline-start: 3px solid #E7C58F; }
.prich h3 { font-size: 14.5px; font-weight: 700; margin: 14px 0 4px; display: flex; gap: 8px; align-items: baseline; } .prich h3::before { content: "?"; flex: none; width: 20px; height: 20px; border-radius: 99px; background: #F5EBD3; color: #5E430F; font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; }
.prich h3 + p { margin: 0 0 10px; padding: 10px 14px; background: #FAF7F2; border-radius: 12px; }
.prich > p:first-child { font-size: 15.5px; color: var(--ink); }
.prich ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.prich ul li { position: relative; padding: 9px 12px 9px 34px; border-radius: 12px; background: #FAF7F2; font-size: 14px; }
.prich ul li::before { content: "✓"; position: absolute; inset-inline-start: 11px; top: 9px; width: 16px; height: 16px; border-radius: 99px; background: #2F6B4F; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.pspec { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2, #EFE8DE); border-radius: 16px; overflow: hidden; }
.pspec > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2, #EFE8DE); font-size: 14px; } .pspec > div:nth-child(4n+1), .pspec > div:nth-child(4n+2) { background: #FAF7F2; }
.pspec dt { color: var(--muted); } .pspec dd { margin: 0; font-weight: 700; text-align: end; }
.pship { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pship > div { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: #FAF7F2; }
.pship b { display: block; font-size: 14px; } .pship small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.pinside { position: sticky; top: 152px; }
.pmini { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(23,20,15,.45); }
.pmhd { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; } .pmhd img { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; background: var(--soft); }
.pmhd b { display: block; font-size: 14px; line-height: 1.35; } .pmhd span { display: inline-block; font-size: 20px; font-weight: 800; margin-top: 4px; } .pmhd s { margin-inline-start: 8px; font-size: 13px; }
.pmini .btn { height: 48px; border-radius: 99px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; } .pmini .pmadd .ico { width: 18px; height: 18px; }
.pmperks { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-2, #EFE8DE); display: grid; gap: 9px; }
.pmperks li { display: flex; align-items: center; gap: 10px; font-size: 13px; } .pmperks .ico { width: 18px; height: 18px; color: #2F6B4F; flex: none; }
.pmseller { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: #FAF7F2; text-decoration: none; color: var(--ink); } .pmseller:hover { background: #F5EBD3; }
.pmseller .av { width: 38px; height: 38px; border-radius: 99px; background: #16131A; color: #E7C58F; display: grid; place-items: center; font-weight: 800; } .pmseller b { display: block; font-size: 14px; } .pmseller small { color: var(--muted); font-size: 12px; }
@media (max-width: 1100px) { .pdpinfo { grid-template-columns: 1fr; } .pinside { display: none; } }
@media (max-width: 900px) { .pdp > .col:first-child { position: static; } .pintabs { top: 60px; } .pcard { padding: 20px 16px; border-radius: 20px; } .pspec, .pship { grid-template-columns: 1fr; } .pspec > div:nth-child(n) { background: none; } .pspec > div:nth-child(odd) { background: #FAF7F2; } .pdpinfo { margin-top: 24px; } }

/* ---------- brendlar: menyu (header) va A–Z sahifa ---------- */
.catnav .brandsbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; margin-inline-start: 2px; border-radius: 99px; border: 1.5px solid #E7C58F; background: linear-gradient(135deg, #FBF3E2, #F5E3BE); color: #4A3510; font-weight: 800; font-size: 14.5px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.catnav .brandsbtn:hover, .catnav .brandsbtn.on, .catnav .brandsbtn[aria-expanded="true"] { box-shadow: 0 8px 20px -10px rgba(184,138,74,.8); transform: translateY(-1px); }
.catnav .brandsbtn .ico { width: 15px; height: 15px; color: #B88A4A; } .catnav .brandsbtn i { font-style: normal; font-size: 11px; opacity: .7; }
.bmenu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 40px 80px -30px rgba(23,20,15,.45); animation: aIn .2s ease; }
.bmwrap { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; max-height: min(70vh, 640px); }
.bmtop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .bmtop > div { flex: 1; min-width: 220px; } .bmtop b { display: block; font-size: 22px; } .bmtop small { color: var(--muted); font-size: 13px; }
.bmsearch { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 99px; background: #F6F2EC; border: 1px solid transparent; min-width: 280px; } .bmsearch:focus-within { border-color: var(--ink); background: #fff; }
.bmsearch .ico { width: 18px; height: 18px; color: var(--muted); } .bmsearch input { border: 0; background: transparent; outline: none; flex: 1; font-size: 15px; color: var(--ink); min-width: 0; }
.bmall { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; } .bmall:hover { text-decoration: underline; }
.bmletters { display: flex; flex-wrap: wrap; gap: 4px; } .bmletters button { min-width: 34px; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.bmletters button:hover { border-color: var(--ink); } .bmletters button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.bmfeat { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; } .bmfeat a { flex: none; height: 56px; min-width: 110px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--line); display: grid; place-items: center; text-decoration: none; color: var(--ink); background: #FDFBF8; }
.bmfeat a:hover { border-color: #E7C58F; } .bmfeat img { max-height: 32px; max-width: 100px; object-fit: contain; } .bmfeat b { font-family: var(--serif); font-size: 17px; }
.bmlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; overflow-y: auto; padding-right: 4px; }
.bmi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; text-decoration: none; color: var(--ink); } .bmi:hover { background: #F6F2EC; }
.bmi img, .bmi .bml { width: 38px; height: 38px; border-radius: 12px; flex: none; object-fit: contain; background: #F6F2EC; } .bmi .bml { display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 18px; background: linear-gradient(135deg, #F5EBD3, #E7C58F); color: #4A3510; }
.bmi b { display: block; font-size: 14px; } .bmi small { color: var(--muted); font-size: 12px; } .bok { font-style: normal; color: #2F6B4F; font-size: 12px; }
.bmnone { padding: 24px; text-align: center; color: var(--muted); }
.bhero { position: relative; overflow: hidden; border-radius: 28px; padding: 40px; background: linear-gradient(135deg, #1B1520, #120F15 60%, #22191A); color: #fff; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bhero .kick { display: inline-flex; align-items: center; gap: 8px; color: #E7C58F; font-weight: 700; } .bhero .kick .ico { width: 15px; height: 15px; }
.bhero h1 { font-size: clamp(32px, 3.6vw, 50px); margin: 0; } .bhero p { margin: 0 0 8px; color: #CFC6BD; } .bhero .bmsearch { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); min-width: min(460px, 100%); height: 52px; } .bhero .bmsearch input { color: #fff; } .bhero .bmsearch .ico { color: #E7C58F; }
.bpletters { margin: 18px 0 6px; position: sticky; top: 150px; z-index: 4; background: #fff; padding: 8px 0; }
.bgrp { margin-top: 18px; scroll-margin-top: 220px; } .bgrp h3 { font-family: var(--serif); font-size: 26px; margin: 0 0 10px; display: flex; align-items: center; gap: 12px; } .bgrp h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.brandgrid a { transition: transform .15s, box-shadow .15s, border-color .15s; } .brandgrid a:hover { transform: translateY(-3px); border-color: #E7C58F; box-shadow: 0 16px 30px -18px rgba(23,20,15,.4); }
.brandgrid .bmono { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-family: var(--serif); font-size: 24px; background: linear-gradient(135deg, #F5EBD3, #E7C58F); color: #4A3510; }
@media (max-width: 760px) { .bmenu { position: fixed; top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; } .bmwrap { max-height: 100vh; height: 100%; } .bmsearch { min-width: 0; width: 100%; } .bhero { padding: 24px 20px; } .bpletters { top: 56px; } }

/* ---------- sotuvchi bo'lish sahifasi ---------- */
.sellpage { display: flex; flex-direction: column; gap: 28px; }
.shero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: center; padding: 48px; border-radius: 32px; background: linear-gradient(135deg, #1B1520, #120F15 55%, #1F1A12); color: #fff; }
.shero .sglow { position: absolute; z-index: -1; inset: -30% -10% auto auto; width: 65%; height: 150%; background: radial-gradient(closest-side, rgba(231,197,143,.3), transparent 70%); animation: hGlow 9s ease-in-out infinite alternate; }
.shero .kick { display: inline-flex; align-items: center; gap: 8px; color: #E7C58F; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 99px; background: rgba(231,197,143,.12); border: 1px solid rgba(231,197,143,.35); } .shero .kick .ico { width: 16px; height: 16px; }
.shero h1 { font-size: clamp(34px, 4vw, 58px); line-height: 1.04; margin: 18px 0 14px; } .shero h1 i { background: linear-gradient(90deg, #E7C58F, #F7E3BF 45%, #C99A55); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shero p { color: #CFC6BD; font-size: 16.5px; line-height: 1.6; max-width: 560px; margin: 0; }
.shero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } .shero .btn-w, .shero .btn-o { height: 52px; padding: 0 26px; border-radius: 99px; display: inline-flex; align-items: center; font-weight: 800; text-decoration: none; cursor: pointer; font-size: 15px; }
.shero .btn-w { background: #fff; color: #16131A; border: 0; box-shadow: 0 10px 30px -10px rgba(231,197,143,.6); } .shero .btn-o { border: 1px solid #5A5058; color: #fff; background: transparent; }
.sfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sfacts > div { padding: 18px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 4px; }
.sfacts span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #E7C58F; color: #16131A; margin-bottom: 6px; } .sfacts span .ico { width: 20px; height: 20px; }
.sfacts b { font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1; } .sfacts small { color: #CFC6BD; font-size: 13px; }
.ssteps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ssteps4 > div { padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ssteps4 i { font-style: normal; width: 36px; height: 36px; border-radius: 99px; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, #F5EBD3, #E7C58F); color: #4A3510; margin-bottom: 6px; } .ssteps4 small { color: var(--muted); line-height: 1.45; }
.sneed { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; } .sneed > div { padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); } .sneed h2 { font-size: 28px; margin: 0 0 4px; }
.sreq { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; } .sreq li { padding: 10px 14px 10px 38px; border-radius: 12px; background: #FAF7F2; position: relative; font-size: 14px; }
.sreq li::before { content: "✓"; position: absolute; inset-inline-start: 12px; top: 10px; width: 18px; height: 18px; border-radius: 99px; background: #2F6B4F; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.sneed .sban { background: #16131A; color: #fff; border: 0; } .sban ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .sban li { padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 600; }
.sapphd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .sapphd h2 { font-size: 32px; margin: 0; }
#swiz { padding: 0; overflow: hidden; border-radius: 26px; }
.ssteps { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); background: #FAF7F2; }
.ssteps button { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border: 0; background: none; font-weight: 700; color: var(--muted); font-size: 13.5px; cursor: pointer; text-align: start; border-bottom: 3px solid transparent; }
.ssteps button:disabled { cursor: default; opacity: .7; } .ssteps button i { font-style: normal; width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; flex: none; border: 1.5px solid var(--line); background: #fff; }
.ssteps button.on { color: var(--ink); border-bottom-color: #E7C58F; background: #fff; } .ssteps button.on i { background: var(--ink); color: #fff; border-color: var(--ink); } .ssteps button.done i { background: #2F6B4F; color: #fff; border-color: #2F6B4F; }
.sbody { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 16px; } .sbody > h3 { font-family: var(--serif); font-size: 24px; margin: 0; }
.sbody .formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 0; } .sbody .formgrid .full { grid-column: 1 / -1; }
.sbody .f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; } .sbody .input { height: 48px; border-radius: 14px; font-size: 15px; font-weight: 400; }
.stypes { display: grid; gap: 8px; } .stype { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 44px; border-radius: 16px; border: 1.5px solid var(--line); position: relative; cursor: pointer; font-weight: 400; }
.stype input { position: absolute; inset-inline-start: 16px; top: 17px; } .stype.on { border-color: var(--ink); background: #FAF7F2; } .stype b { font-size: 14.5px; } .stype small { color: var(--muted); font-size: 12.5px; }
.slaws { padding: 16px 18px; border-radius: 16px; background: #F5EBD3; color: #4A3510; } .slaws ul { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: 13.5px; font-weight: 500; }
.scats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.scat { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; font-weight: 600; font-size: 13.5px; } .scat input { display: none; }
.scat svg { width: 18px; height: 18px; color: #B88A4A; flex: none; } .scat span { flex: 1; } .scat em { font-style: normal; font-size: 12px; color: var(--muted); } .scat.on { border-color: var(--ink); background: #FAF7F2; } .scat.on::after { content: "✓"; color: #2F6B4F; font-weight: 800; }
.sdocs { display: grid; gap: 10px; } .sdoc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed var(--line); }
.sdoc.ok { border-style: solid; border-color: #B7D8C5; background: #F2FAF5; } .sdoc .si { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: #FAF7F2; color: #B88A4A; font-weight: 800; } .sdoc.ok .si { background: #2F6B4F; color: #fff; } .sdoc .si .ico { width: 18px; height: 18px; }
.sfile { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 10px; } .sfile button { border: 0; background: none; color: var(--muted); cursor: pointer; }
.sdecl { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: #FAF7F2; } .sdecl .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; font-weight: 400; } .sdecl .check input { margin-top: 3px; flex: none; width: 18px; height: 18px; }
.snav { display: flex; justify-content: space-between; gap: 12px; } .snav .btn { height: 50px; padding: 0 26px; border-radius: 99px; font-weight: 800; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sdone { padding: 48px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .sdone .si.big { width: 72px; height: 72px; border-radius: 99px; display: grid; place-items: center; font-size: 32px; background: #2F6B4F; color: #fff; }
.scomm, .sfaq, .sstatusbox { padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); } .scomm h2, .sfaq h2 { font-size: 28px; margin: 0 0 14px; }
.scommg { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .scommg > div { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #FAF7F2; font-size: 14px; } .scommg svg { width: 18px; height: 18px; color: #B88A4A; } .scommg span { flex: 1; }
.sfaq details { border-top: 1px solid var(--line); padding: 14px 0; } .sfaq summary { font-weight: 700; cursor: pointer; } .sfaq p { color: var(--muted); margin: 8px 0 0; line-height: 1.55; }
.sstatusbox h3 { margin: 0 0 10px; } .sstatusbox .input { height: 46px; border-radius: 12px; min-width: 200px; } .sstat { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: #FAF7F2; } .sstat.g { background: #F2FAF5; } .sstat.r { background: #FDF0EE; } .sstat p { margin: 6px 0; }
@media (max-width: 900px) { .shero { grid-template-columns: 1fr; padding: 28px 22px; } .ssteps4, .sneed { grid-template-columns: 1fr 1fr; } .sneed { grid-template-columns: 1fr; } .ssteps { grid-template-columns: repeat(5, auto); overflow-x: auto; } .ssteps button span { display: none; } .ssteps button.on span { display: inline; } .sbody .formgrid { grid-template-columns: 1fr; } .sbody { padding: 20px 16px; } }
@media (max-width: 560px) { .ssteps4 { grid-template-columns: 1fr; } }

/* ---------- "Bizning va'damiz" v3 ---------- */
.hnever3 { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(280px, 1fr) 1.5fr; gap: 28px; align-items: center; padding: 34px 36px; border-radius: 28px; background: linear-gradient(135deg, #1B1520, #120F15 60%, #2A1418); color: #fff; }
.hnever3 .nglow { position: absolute; z-index: -1; inset: -40% auto auto -10%; width: 55%; height: 170%; background: radial-gradient(closest-side, rgba(220,60,60,.22), transparent 70%); }
.hnever3 .nhd { display: flex; gap: 18px; align-items: flex-start; } .hnever3 .nshield { width: 64px; height: 64px; border-radius: 20px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #E7C58F, #C99A55); color: #16131A; box-shadow: 0 16px 30px -14px rgba(231,197,143,.7); }
.hnever3 .nshield .ico { width: 32px; height: 32px; }
.hnever3 .kick { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #E7C58F; } .hnever3 b { display: block; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.12; margin: 6px 0 8px; }
.hnever3 p { margin: 0 0 10px; color: #CFC6BD; font-size: 14px; line-height: 1.55; } .hnever3 .nhd a { color: #E7C58F; font-weight: 700; text-decoration: none; font-size: 14px; }
.hnever3 ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hnever3 li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 13.5px; font-weight: 600; transition: background .15s, border-color .15s; }
.hnever3 li:hover { background: rgba(220,60,60,.12); border-color: rgba(220,60,60,.4); }
.hnever3 .ni { position: relative; width: 34px; height: 34px; flex: none; border-radius: 99px; display: grid; place-items: center; background: rgba(255,255,255,.1); font-size: 15px; font-weight: 800; }
.hnever3 .ni::after { content: ""; position: absolute; inset: 3px; border-radius: 99px; border: 2px solid #E5484D; background: linear-gradient(135deg, transparent calc(50% - 1px), #E5484D calc(50% - 1px), #E5484D calc(50% + 1px), transparent calc(50% + 1px)); opacity: .9; }
@media (max-width: 1000px) { .hnever3 { grid-template-columns: 1fr; } .hnever3 ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hnever3 { padding: 24px 18px; } .hnever3 b { font-size: 24px; } .hnever3 ul { grid-template-columns: 1fr; } }

/* ---------- footer v3 ---------- */
.ftr { background: linear-gradient(180deg, #17131A 0%, #120F14 100%); border-top: 3px solid #E7C58F; }
.ftr .wrap.ftrust { padding-block: 30px; }
.ftr .ftrust .c { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, #F5EBD3, #E7C58F) !important; color: #4A3510 !important; display: grid; place-items: center; flex: none; }
.ftr .wrap.fcta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 26px 4px; }
.ftr .fc { display: flex !important; align-items: center; gap: 14px; padding: 18px 20px !important; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.ftr .fc.sell { background: linear-gradient(135deg, rgba(231,197,143,.18), rgba(231,197,143,.05)); border-color: rgba(231,197,143,.4); transition: transform .15s; } .ftr .fc.sell:hover { transform: translateY(-2px); }
.ftr .fci { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: #E7C58F; color: #16131A; } .ftr .fci .ico { width: 22px; height: 22px; }
.ftr .fc b { display: block; color: #fff; font-size: 16px; } .ftr .fc small { display: block; color: #B9AFA3; font-size: 13px; margin-top: 2px; } .ftr .fc em { font-style: normal; color: #E7C58F; font-size: 22px; font-weight: 800; }
.ftr .fch { display: inline-flex !important; align-items: center; gap: 7px; height: 40px; padding: 0 14px !important; border-radius: 99px; border: 1px solid #4A4048; color: #fff !important; font-weight: 700; font-size: 14px !important; white-space: nowrap; }
.ftr .fch svg { width: 18px; height: 18px; } .ftr .fch.telegram svg path { fill: #2AABEE; } .ftr a.fch.telegram:hover { background: #229ED9; border-color: #229ED9; } .ftr a.fch.whatsapp:hover { background: #1DA851; border-color: #1DA851; } .ftr a.fch:hover svg path { fill: #fff; }
.ftr h4 { font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; color: #E7C58F !important; margin-bottom: 14px !important; }
.ftr .fcols a { transition: color .15s, transform .15s; } .ftr .fcols a:hover { transform: translateX(3px); }
.ftr .wrap.legal { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 22px; padding: 22px 24px !important; margin-block: 8px 20px; }
.ftr .legal .ent b { font-size: 15px; } .ftr .pays small { color: #E7C58F !important; letter-spacing: .1em; }
.ftr .bottom { border-top: 1px solid rgba(255,255,255,.08) !important; color: #9C9385; } .ftr .bottom a:hover { color: #E7C58F; }
@media (max-width: 800px) { .ftr .wrap.fcta { grid-template-columns: 1fr; } .ftr .fc.help { flex-wrap: wrap; } }
.ftr .wrap.legal { width: calc(100% - 48px); max-width: 1392px; box-sizing: border-box; margin: 8px auto 20px; grid-template-columns: 1fr 1.6fr; }
@media (max-width: 760px) { .ftr .wrap.legal { width: calc(100% - 32px); grid-template-columns: 1fr; } }

/* ---------- kiyim: AI o'lcham, 3D, rasm bilan kiyib ko'rish, obraz ---------- */
.fitbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.fitbar button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px 12px 52px; min-height: 58px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; text-align: start; transition: border-color .15s, transform .15s, box-shadow .15s; }
.fitbar button:hover { border-color: #E7C58F; transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(23,20,15,.4); }
.fitbar .fi { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #1B1520, #3A2A3A); color: #E7C58F; font-size: 15px; font-weight: 800; }
.fitbar b { font-size: 14px; } .fitbar small { font-size: 12px; color: var(--muted); }
.modal .v3d, .modal .tryon { width: min(720px, 94vw); display: flex; flex-direction: column; gap: 12px; }
.v3stage { position: relative; height: min(62vh, 520px); perspective: 1200px; display: grid; place-items: center; border-radius: 20px; background: radial-gradient(circle at 50% 40%, #fff, #EFE9E0 70%); cursor: grab; touch-action: none; user-select: none; overflow: hidden; }
.v3stage:active { cursor: grabbing; }
.v3obj { position: relative; width: min(56%, 320px); aspect-ratio: 3 / 4; transform-style: preserve-3d; transition: transform .05s linear; }
.v3obj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; filter: drop-shadow(0 24px 30px rgba(23,20,15,.25)); }
.v3obj .b { transform: rotateY(180deg); } .v3obj .s1 { transform: rotateY(90deg) scaleX(.45); } .v3obj .s2 { transform: rotateY(-90deg) scaleX(.45); }
.v3floor { position: absolute; bottom: 9%; left: 50%; width: 46%; height: 26px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(23,20,15,.22), transparent); }
.v3ctl { justify-content: center; gap: 8px; flex-wrap: wrap; }
.tostage { position: relative; border-radius: 20px; overflow: hidden; background: #F4EFE8; aspect-ratio: 3 / 4; max-height: 62vh; margin: 0 auto; width: auto; }
.tostage canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: move; }
.toempty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; cursor: pointer; border: 2px dashed #D9CBB5; border-radius: 20px; }
.toempty span { font-size: 40px; } .toempty b { font-size: 17px; } .toempty small { color: var(--muted); max-width: 340px; line-height: 1.45; } .toempty[hidden] { display: none; }
.toctl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } .toctl[hidden] { display: none; } .toctl label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; } .toctl .row { grid-column: 1 / -1; }
.fitbar { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.v3obj img { border-radius: 22px; }
.tomem { grid-column: 1 / -1; padding: 10px 12px; border-radius: 12px; background: #F2FAF5; color: #1F5C3F; } .tomem[hidden] { display: none; }
/* PDP: kafolat kartalari va yetkazish oynasi (v2) */
.guar2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guar2 > div { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; border: 1px solid; }
.guar2 .g1 { background: linear-gradient(135deg, #EFF8F2, #fff 70%); border-color: #CDE8D6; }
.guar2 .g2 { background: linear-gradient(135deg, #EEF3FD, #fff 70%); border-color: #CFDCF6; }
.guar2 i { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff; font-style: normal; box-shadow: 0 6px 14px -6px currentColor; }
.guar2 .g1 i { background: linear-gradient(135deg, #2FA36B, #17784A); color: #fff; } .guar2 .g2 i { background: linear-gradient(135deg, #3E7BF0, #2453C4); }
.guar2 i .ico { width: 22px; height: 22px; stroke: #fff; }
.guar2 b { display: block; font-size: 14px; line-height: 1.25; } .guar2 span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.delopts2 { border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.delopts2 .dh { display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.delopts2 .dh i { width: 34px; height: 34px; border-radius: 11px; background: #1C1714; color: #F3D9A4; display: grid; place-items: center; flex: none; } .delopts2 .dh i .ico { width: 18px; height: 18px; }
.delopts2 .dh b { flex: 1; font-size: 15px; }
.delopts2 .to { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 600; background: var(--cream); border-radius: 99px; padding: 4px 10px; }
.delopts2 .dopt { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #FAF7F2; border: 1px solid transparent; }
.delopts2 .dopt.ex { background: linear-gradient(135deg, #FFF6E8, #FFFDF8); border-color: #F1DDB5; }
.delopts2 .di { width: 38px; height: 38px; border-radius: 12px; background: #fff; display: grid; place-items: center; font-size: 18px; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.delopts2 .dn { flex: 1; min-width: 0; } .delopts2 .dn b { display: block; font-size: 14px; } .delopts2 .dn small { color: var(--muted); font-size: 12px; }
.delopts2 .de { text-align: end; font-weight: 700; font-size: 13px; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.delopts2 .de em { font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: #17784A; border-radius: 99px; padding: 2px 8px; }
.delopts2 .dfoot { font-size: 12px; color: var(--green, #17784A); padding: 2px 4px 0; }
@media (max-width: 560px) { .guar2 { grid-template-columns: 1fr; } }
/* PDP ma'lumot bloki v2: bo'lim tugmalari, tavsif, FAQ, yon karta */
.pintabs { top: 150px; gap: 4px; padding: 5px; box-shadow: 0 14px 34px -24px rgba(23,20,15,.55); }
.pintabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; }
.pintabs a .ico { width: 16px; height: 16px; opacity: .7; }
.pintabs a.on { background: var(--ink); color: #fff; } .pintabs a.on .ico { opacity: 1; color: #E7C58F; } .pintabs a.on em { background: #E7C58F; color: #1C1714; }
.pcard { box-shadow: 0 18px 40px -34px rgba(23,20,15,.45); }
.pchd { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px dashed #EAE2D6; }
.pchd .pci { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #F6E7C6, #E7C58F); color: #4A3410; }
.prich > p:first-child { font-size: 15.5px; line-height: 1.7; color: var(--ink); background: linear-gradient(135deg, #FBF6EC, #fff); border: 1px solid #F1E6D2; border-radius: 16px; padding: 16px 18px; margin: 0 0 6px; }
.prich h2.psec { display: flex; align-items: center; gap: 10px; border: 0; padding: 0; margin: 26px 0 12px; font-size: 16px; }
.prich h2.psec::before { content: ""; width: 8px; height: 22px; border-radius: 99px; background: linear-gradient(180deg, #E7C58F, #C9932F); flex: none; }
.prich ul { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.prich ul li { background: #fff; border: 1px solid #EAE2D6; border-radius: 14px; padding: 13px 14px 13px 44px; font-weight: 600; font-size: 14px; line-height: 1.4; transition: transform .15s, box-shadow .15s, border-color .15s; }
.prich ul li:hover { transform: translateY(-2px); border-color: #CDE8D6; box-shadow: 0 10px 22px -16px rgba(23,120,74,.55); }
.prich ul li::before { inset-inline-start: 13px; top: 12px; width: 22px; height: 22px; font-size: 12px; background: linear-gradient(135deg, #2FA36B, #17784A); }
.prich ul li strong, .prich ul li b { color: var(--muted); font-weight: 600; }
.pfaq { border: 1px solid #EAE2D6; border-radius: 16px; background: #fff; margin: 0 0 10px; overflow: hidden; transition: border-color .15s; }
.pfaq[open] { border-color: #E7C58F; background: #FFFCF6; }
.pfaq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.pfaq summary::-webkit-details-marker { display: none; }
.pfaq summary::before { content: "?"; flex: none; width: 26px; height: 26px; border-radius: 9px; background: #F5EBD3; color: #5E430F; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.pfaq summary::after { content: "+"; margin-inline-start: auto; font-size: 20px; font-weight: 500; color: var(--muted); transition: transform .2s; }
.pfaq[open] summary::after { transform: rotate(45deg); color: #C9932F; }
.pfaq > p { margin: 0 !important; padding: 0 16px 16px 54px !important; background: none !important; color: #4A443F; }
.pmini { gap: 14px; padding: 20px; }
.pmini .pmhd span.num { font-size: 22px; color: #D93A1C; }
.pmperks2 { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pmperks2 li { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.pmperks2 i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; } .pmperks2 .ico { width: 16px; height: 16px; }
.pmperks2 .g { background: #EFF8F2; } .pmperks2 .g i { background: linear-gradient(135deg, #2FA36B, #17784A); }
.pmperks2 .b { background: #EEF3FD; } .pmperks2 .b i { background: linear-gradient(135deg, #3E7BF0, #2453C4); }
.pmperks2 .y { background: #FFF6E5; } .pmperks2 .y i { background: linear-gradient(135deg, #F2B544, #C9862A); }
.pmperks2 .r { background: #FDF0EC; } .pmperks2 .r i { background: linear-gradient(135deg, #F06A4A, #D93A1C); }
.pmseller { background: #1C1714; color: #fff; } .pmseller:hover { background: #2A231F; } .pmseller small { color: #C9BFB3; } .pmseller .av { background: linear-gradient(135deg, #F6E7C6, #E7C58F); color: #1C1714; }
@media (max-width: 900px) { .pfaq > p { padding-inline-start: 16px !important; } }
/* Kiyim studiyasi: 3D va "O'zingizda ko'ring" */
.studio { border-radius: 22px; padding: 14px; background: radial-gradient(120% 140% at 0% 0%, #2E2238 0%, #17121C 55%, #120E10 100%); color: #fff; box-shadow: 0 24px 50px -30px rgba(23,15,30,.8); }
.sthd { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; flex-wrap: wrap; }
.sthd .new { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; background: linear-gradient(135deg, #F7D58B, #E39A3B); color: #1C1408; border-radius: 99px; padding: 3px 8px; }
.sthd b { font-size: 16px; } .sthd > span:last-child { color: #BFB4C6; font-size: 13px; }
.sttiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sttiles button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: transform .2s, border-color .2s, background .2s; }
.sttiles button:hover, .sttiles button:focus-visible { transform: translateY(-3px); border-color: #E7C58F; background: rgba(255,255,255,.09); }
.stv { position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; }
.st3d .stv { background: radial-gradient(60% 70% at 50% 60%, rgba(231,197,143,.28), transparent 70%); perspective: 600px; }
.spin3d { width: 96px; height: 120px; transform-style: preserve-3d; animation: mzspin 5s linear infinite; }
.spin3d img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)); }
@keyframes mzspin { from { transform: rotateY(0) } to { transform: rotateY(360deg) } }
.orbit { position: absolute; width: 150px; height: 34px; bottom: 14px; left: 50%; translate: -50% 0; border-radius: 50%; border: 2px dashed rgba(231,197,143,.55); }
.b360 { position: absolute; top: 10px; inset-inline-end: 10px; font-style: normal; font-weight: 800; font-size: 12px; background: #E7C58F; color: #1C1408; border-radius: 99px; padding: 3px 9px; }
.sttry .stv { background: linear-gradient(160deg, #3A3046, #241C2C); }
.sttry .sil { height: 130px; fill: rgba(255,255,255,.18); margin-top: 18px; } .sttry .me { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.sttry .gar { position: absolute; width: 74px; top: 44px; left: 50%; translate: -50% 0; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); animation: mzfit 3.2s ease-in-out infinite; }
@keyframes mzfit { 0%, 100% { translate: -50% -14px; opacity: .2 } 35%, 75% { translate: -50% 0; opacity: 1 } }
.scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #E7C58F, transparent); box-shadow: 0 0 12px #E7C58F; animation: mzscan 2.6s ease-in-out infinite; }
@keyframes mzscan { 0%, 100% { top: 10% } 50% { top: 88% } }
.stt { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.stt b { font-size: 15px; } .stt small { color: #CFC6D4; font-size: 12.5px; line-height: 1.4; }
.stt .cta { margin-top: 6px; align-self: flex-start; font-weight: 800; font-size: 13px; color: #1C1408; background: linear-gradient(135deg, #F7D58B, #E7B45C); border-radius: 99px; padding: 7px 14px; }
.stmore { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.stmore button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.stmore button:hover { border-color: #E7C58F; } .stmore em { font-style: normal; background: #E7C58F; color: #1C1408; border-radius: 99px; padding: 0 7px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .spin3d, .sttry .gar, .scan { animation: none; } }
@media (max-width: 520px) { .stv { height: 120px; } .stt small { font-size: 12px; } }
/* O'lchamlar jadvali + AI */
.modal .card.szm { width: min(640px, 94vw); max-width: none; max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.szhd { display: flex; gap: 12px; align-items: flex-start; } .szhd > div { flex: 1; } .szhd h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 24px; } .szhd p { margin: 0; }
.szhd .x { border: 0; background: #F3EEE7; width: 36px; height: 36px; border-radius: 99px; font-size: 20px; cursor: pointer; flex: none; }
.szai { border-radius: 18px; padding: 14px; background: linear-gradient(135deg, #1C1520, #2E2238); color: #fff; display: flex; flex-direction: column; gap: 12px; }
.sztag { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.szin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.szin label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #CFC6D4; font-weight: 600; } .szin small { font-weight: 500; opacity: .8; }
.szin label > span { position: relative; } .szin input { width: 100%; background: #fff; color: var(--ink); padding-inline-end: 34px; height: 44px; font-weight: 700; }
.szin em { position: absolute; inset-inline-end: 10px; top: 50%; translate: 0 -50%; font-style: normal; color: var(--muted); font-size: 12px; }
.szopts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .szopts .seg { background: rgba(255,255,255,.1); } .szopts .seg span { color: #fff; }
.szopts .seg input:checked + span { background: #fff; color: var(--ink); } .szopts .btn { margin-inline-start: auto; background: linear-gradient(135deg, #F7D58B, #E7B45C); color: #1C1408; border: 0; }
.szwait { display: flex; align-items: center; gap: 10px; color: #E9E2EE; font-size: 13px; } .szwait .spin { width: 18px; height: 18px; border-radius: 99px; border: 2px solid rgba(255,255,255,.3); border-top-color: #E7C58F; animation: mzrot .8s linear infinite; }
@keyframes mzrot { to { transform: rotate(360deg) } }
.szres { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: #fff; color: var(--ink); border-radius: 16px; padding: 14px; }
.szres .big { width: 96px; height: 96px; border-radius: 22px; background: linear-gradient(135deg, #2FA36B, #17784A); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.szres .big small { font-size: 10.5px; opacity: .9; } .szres .big b { font-size: 34px; line-height: 1; } .szres .big span { font-size: 11px; opacity: .9; margin-top: 2px; }
.szres .why ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13px; line-height: 1.45; } .szres .why p { margin: 6px 0 0; }
.szres .conf { height: 6px; background: #EEE7DC; border-radius: 99px; overflow: hidden; margin-bottom: 4px; } .szres .conf i { display: block; height: 100%; background: linear-gradient(90deg, #E7B45C, #2FA36B); }
.szres > .btn { grid-column: 1 / -1; }
.szscale .bar { position: relative; height: 38px; border-radius: 12px; background: #F6F1EA; }
.szscale .bar span { position: absolute; top: 4px; bottom: 4px; border-radius: 9px; background: #fff; border: 1px solid #E7DFD3; display: grid; place-items: center; font-size: 12px; transition: background .2s; }
.szscale .bar span.on { background: #17784A; color: #fff; border-color: #17784A; }
.szscale #szme { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-inline-start: -1.5px; background: #D93A1C; border-radius: 3px; transition: left .5s; }
.szscale #szme::after { content: attr(data-l); position: absolute; bottom: 100%; left: 50%; translate: -50% -2px; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: #D93A1C; padding: 2px 8px; border-radius: 99px; }
.szscale .lbl2 { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; } .szscale { margin-top: 12px; }
.sztab tr.on td { background: #EAF6EF; font-weight: 800; } .sztab tr.alt td { background: #FBF6EC; } .sztab .szt { color: #17784A; font-weight: 800; font-size: 12px; text-align: end; } .sztab tr.alt .szt { color: #8A6420; }
.szhow { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; } .szhow summary { cursor: pointer; font-weight: 700; } .szhow p { margin: 8px 0 0; font-size: 13px; color: #4A443F; }
@media (max-width: 560px) { .szin { grid-template-columns: 1fr 1fr; } .szopts .btn { width: 100%; } .szres { grid-template-columns: 1fr; justify-items: start; } }
/* PDP chap ustun: galereya ostidagi bo'sh joy — qisqacha, himoya, sizga yoqishi mumkin */
.pdp > .col:first-child { position: static; }
.pdside { display: flex; flex-direction: column; gap: 16px; }
.pfacts, .pprot, .pyml { border: 1px solid var(--line); border-radius: 22px; background: #fff; padding: 18px; }
.pfh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .pfh b { font-size: 16px; }
.pfh .star { font-weight: 800; color: #B7791F; } .pfh small { color: var(--muted); font-weight: 600; }
.pfgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pfgrid > div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #FAF7F2; min-width: 0; }
.pfgrid .pfi { width: 30px; height: 30px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex: none; font-size: 15px; color: #C9932F; font-weight: 800; }
.pfgrid small { display: block; font-size: 11.5px; color: var(--muted); } .pfgrid b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pprot { background: linear-gradient(135deg, #F2FAF5, #fff 60%); border-color: #CDE8D6; }
.pph { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .pph .ico { width: 22px; height: 22px; color: #17784A; } .pph b { font-size: 16px; }
.pprot ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; }
.pprot ol::before { content: ""; position: absolute; top: 24px; left: 16%; right: 16%; border-top: 2px dashed #A9D7BA; }
.pprot li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.ppi { position: relative; width: 48px; height: 48px; border-radius: 16px; background: #fff; border: 1px solid #CDE8D6; display: grid; place-items: center; font-size: 22px; box-shadow: 0 8px 18px -12px rgba(23,120,74,.6); }
.ppi em { position: absolute; top: -6px; inset-inline-end: -6px; width: 20px; height: 20px; border-radius: 99px; background: #17784A; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.pprot li b { font-size: 13.5px; margin-top: 4px; } .pprot li small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.ppf { margin-top: 14px; padding-top: 12px; border-top: 1px solid #DCEFE3; font-size: 13px; font-weight: 600; color: #1F5C3F; }
.pymlg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.pymlg a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); border-radius: 16px; padding: 8px; transition: background .15s; } .pymlg a:hover { background: #FAF7F2; }
.pymlg .im { aspect-ratio: 1; border-radius: 12px; background: #F6F1EA; display: grid; place-items: center; overflow: hidden; } .pymlg .im img { width: 86%; height: 86%; object-fit: contain; }
.pymlg .nm { font-size: 12.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pymlg b { font-size: 13.5px; }
@media (max-width: 900px) { .pdside { display: none; } }
.stt .cta { white-space: nowrap; font-size: 12.5px; padding: 7px 12px; } .szin input::placeholder { font-weight: 500; font-size: 13px; }
/* Brend logotiplari */
.bmk { position: relative; width: 42px; height: 42px; flex: none; border-radius: 13px; background: var(--bg); color: var(--fg); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 14px -10px rgba(0,0,0,.6); }
.bmk.big { width: 72px; height: 72px; border-radius: 20px; } .bmk.big b { font-size: 26px; }
.bmk b { position: relative; z-index: 1; font-size: 15px; letter-spacing: .02em; line-height: 1; }
.bmk.s0 b { font-family: var(--serif); font-weight: 700; } .bmk.s1 b { font-weight: 900; letter-spacing: -.04em; } .bmk.s2 b { font-family: var(--serif); font-style: italic; font-weight: 600; } .bmk.s3 b { font-family: var(--serif); font-weight: 700; font-size: 22px; }
.bmk i { position: absolute; opacity: .22; background: var(--fg); }
.bmk.sh0 i { width: 70%; height: 70%; border-radius: 50%; right: -22%; bottom: -22%; }
.bmk.sh1 i { width: 120%; height: 30%; transform: rotate(-35deg); top: 8%; left: -10%; }
.bmk.sh2 i { inset: 5px; background: none; border: 1.5px solid var(--fg); border-radius: 9px; opacity: .45; }
.bmk.img { background: #fff; border: 1px solid var(--line); } .bmk.img img { width: 80%; height: 80%; object-fit: contain; }
.bmi:hover .bmk { transform: scale(1.06); } .bmk { transition: transform .15s; }
.bmfeat a { display: inline-flex; align-items: center; gap: 8px; }
.shipkg { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.ziphint { display: block; color: #17784A; font-size: 12px; margin-top: 4px; } .ziphint[hidden] { display: none; } .ziphint + small { display: block; margin-top: 4px; font-size: 11.5px; }
.dutynote { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.4; margin-bottom: 12px; }
.dutynote b { font-size: 13.5px; } .dutynote.over { background: #FFF4E5; border: 1px solid #F3D3A0; color: #6B4310; } .dutynote.ok { background: #EFF8F2; border: 1px solid #CDE8D6; color: #1F5C3F; }
.cidcard { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .cidhd { display: flex; gap: 12px; align-items: flex-start; } .cidhd h3 { margin: 0 0 4px; } .cidhd p { margin: 0; }
.cidico { width: 42px; height: 42px; border-radius: 13px; background: #EEF3FD; display: grid; place-items: center; font-size: 20px; flex: none; }
/* Buyurtma holati */
.otrk { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 22px 20px 16px; margin: 6px 0 18px; box-shadow: 0 18px 40px -34px rgba(23,20,15,.45); }
.otrk ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.otrk ol::before, .otrk ol::after { content: ""; position: absolute; top: 22px; left: 10%; right: 10%; height: 4px; border-radius: 99px; background: #EEE7DC; }
.otrk ol::after { right: auto; width: calc(80% * var(--p) / 100); background: linear-gradient(90deg, #2FA36B, #17784A); }
.otrk li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.otrk .oi { width: 48px; height: 48px; border-radius: 99px; display: grid; place-items: center; font-size: 20px; background: #F6F1EA; border: 3px solid #fff; box-shadow: 0 0 0 1px #EEE7DC; }
.otrk li.done .oi { background: #17784A; color: #fff; font-weight: 800; box-shadow: 0 0 0 1px #17784A; }
.otrk li.cur .oi { background: #FFF6E5; box-shadow: 0 0 0 3px #E7B45C; animation: otpulse 1.8s ease-in-out infinite; }
@keyframes otpulse { 50% { box-shadow: 0 0 0 7px rgba(231,180,92,.25); } }
.otrk li b { font-size: 13px; margin-top: 4px; } .otrk li small { font-size: 11.5px; color: var(--muted); min-height: 14px; } .otrk li.cur b { color: #8A5A10; }
.onext { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #FAF7F2; font-size: 13.5px; flex-wrap: wrap; }
.onext .pulse { width: 10px; height: 10px; border-radius: 99px; background: #E7B45C; flex: none; box-shadow: 0 0 0 4px rgba(231,180,92,.25); }
.otrkno { font-size: 12.5px; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; }
.otrk.stop { display: flex; justify-content: space-between; align-items: center; background: #FDF0EC; border-color: #F3C9BC; color: #8A2B14; padding: 16px 20px; }
@media (max-width: 640px) { .otrk { padding: 16px 10px 12px; } .otrk .oi { width: 38px; height: 38px; font-size: 16px; } .otrk ol::before, .otrk ol::after { top: 17px; } .otrk li b { font-size: 11px; } .otrk li small { display: none; } }
/* Savat: ruhlantiruvchi blok */
.cheer { margin-top: 18px; padding: 24px 26px; border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%, #FFF6E5 0%, #FFFDF8 55%, #fff 100%); border: 1px solid #F1E3C6; box-shadow: 0 18px 40px -34px rgba(120,80,20,.45); }
.cheer h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 28px; } .cheer p { margin: 0 0 14px; color: #4A443F; font-size: 15px; }
.cheer ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.cheer li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px; }
.cheer li span { width: 36px; height: 36px; border-radius: 12px; background: #fff; border: 1px solid #F1E3C6; display: grid; place-items: center; flex: none; font-size: 17px; }
.cheer em { display: block; padding-top: 14px; border-top: 1px dashed #EADBB8; font-family: var(--serif); font-size: 17px; color: #8A5A10; }
@media (max-width: 640px) { .cheer { padding: 18px; } .cheer h3 { font-size: 23px; } }
/* Savat: "Ajoyib tanlov" v2 */
.cheer2 { position: relative; overflow: hidden; margin-top: 18px; padding: 26px; border-radius: 24px; color: #fff; background: radial-gradient(120% 160% at 0% 0%, #3A2A3E 0%, #1E1622 50%, #140F12 100%); box-shadow: 0 26px 50px -30px rgba(30,15,30,.8); }
.cheer2::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #F7D58B, rgba(247,213,139,0) 40%, rgba(231,180,92,0) 60%, #E7B45C); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.cheer2 .spark { position: absolute; color: #F7D58B; opacity: .55; animation: chtw 3s ease-in-out infinite; } .cheer2 .s1 { top: 18px; right: 28px; font-size: 18px; } .cheer2 .s2 { top: 54px; right: 70px; font-size: 11px; animation-delay: 1s; } .cheer2 .s3 { bottom: 22px; right: 40px; font-size: 14px; animation-delay: 2s; }
@keyframes chtw { 50% { opacity: .1; transform: scale(.7) rotate(20deg); } }
.cheer2 .chd { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.cheer2 .cbadge { width: 58px; height: 58px; border-radius: 18px; flex: none; display: grid; place-items: center; font-size: 28px; background: linear-gradient(135deg, #F7D58B, #E39A3B); box-shadow: 0 10px 24px -10px rgba(231,180,92,.8); }
.cheer2 h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 30px; background: linear-gradient(90deg, #FFF3D6, #F7D58B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cheer2 p { margin: 0; color: #D9CFDD; font-size: 15px; }
.cheer2 .cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cheer2 .cgrid > div { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: transform .2s, border-color .2s; }
.cheer2 .cgrid > div:hover { transform: translateY(-3px); border-color: rgba(247,213,139,.6); }
.cheer2 .cgrid i { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-style: normal; font-size: 20px; color: #fff; }
.cheer2 .g i { background: linear-gradient(135deg, #2FA36B, #17784A); } .cheer2 .b i { background: linear-gradient(135deg, #3E7BF0, #2453C4); } .cheer2 .y i { background: linear-gradient(135deg, #F2B544, #C9862A); }
.cheer2 .cgrid span { font-weight: 700; font-size: 14px; line-height: 1.4; }
@media (max-width: 760px) { .cheer2 { padding: 20px; } .cheer2 .cgrid { grid-template-columns: 1fr; } .cheer2 .cgrid > div { flex-direction: row; align-items: center; } .cheer2 h3 { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { .cheer2 .spark { animation: none; } }
.cidhow { border: 1px solid #DCE6F5; background: #F7FAFE; border-radius: 14px; padding: 10px 14px; } .cidhow summary { cursor: pointer; font-weight: 700; color: #2453C4; }
.cidpics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .cidpics figure { margin: 0; background: #fff; border: 1px solid #E5ECF6; border-radius: 12px; padding: 10px; }
.cidpics svg { width: 100%; height: auto; display: block; } .cidpics figcaption { font-size: 12.5px; color: #4A443F; margin-top: 8px; line-height: 1.4; } .cidpics figcaption b { display: block; color: var(--ink); margin-bottom: 2px; }
.cidhow p { margin: 10px 0 0; } .cidhow i { display: block; margin-top: 4px; }
@media (max-width: 640px) { .cidpics { grid-template-columns: 1fr; } }
/* Jo'natmani kuzatish */
.shtrk { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.shhd { display: flex; align-items: center; gap: 12px; } .shhd h3 { margin: 0; } .shic { width: 44px; height: 44px; border-radius: 14px; background: #FFF6E5; display: grid; place-items: center; font-size: 22px; flex: none; }
.shst { font-size: 12.5px; font-weight: 800; border-radius: 99px; padding: 5px 12px; background: #EEF3FD; color: #2453C4; white-space: nowrap; }
.shst.delivered { background: #EAF6EF; color: #17784A; } .shst.customs { background: #FFF4E5; color: #8A5A10; } .shst.out_for_delivery { background: #EAF6EF; color: #17784A; } .shst.returned, .shst.lost { background: #FDF0EC; color: #A3341A; }
.shno { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: #FAF7F2; } .shno span { color: var(--muted); font-size: 12.5px; } .shno b { font-family: ui-monospace, monospace; font-size: 15px; letter-spacing: .04em; margin-inline-end: auto; }
.shbar { list-style: none; margin: 0; padding: 0; display: flex; } .shbar li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; font-size: 11.5px; color: var(--muted); }
.shbar li::before { content: ""; position: absolute; top: 7px; left: -50%; right: 50%; height: 3px; background: #EEE7DC; } .shbar li:first-child::before { display: none; }
.shbar li.done::before, .shbar li.cur::before { background: #17784A; }
.shbar i { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 99px; background: #EEE7DC; border: 3px solid #fff; box-shadow: 0 0 0 1px #E2D9CC; }
.shbar li.done i { background: #17784A; box-shadow: 0 0 0 1px #17784A; } .shbar li.cur i { background: #E7B45C; box-shadow: 0 0 0 4px rgba(231,180,92,.3); } .shbar li.cur span { color: var(--ink); font-weight: 800; } .shbar li.done span { color: #1F5C3F; }
.shevh { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line-2, #EFE8DE); padding-top: 12px; }
.shev { list-style: none; margin: 0; padding: 0; position: relative; } .shev::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: #EEE7DC; }
.shev li { position: relative; display: flex; gap: 12px; padding: 8px 0; } .shev .dot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 99px; background: #fff; border: 1px solid #E8E0D3; display: grid; place-items: center; font-size: 16px; flex: none; }
.shev li.now .dot { background: #FFF6E5; border-color: #E7B45C; box-shadow: 0 0 0 4px rgba(231,180,92,.2); } .shev b { font-size: 14px; } .shev p { margin: 2px 0; font-size: 13.5px; color: #4A443F; } .shev small { color: var(--muted); font-size: 12px; }
.shev li:not(.now) b { color: #4A443F; font-weight: 700; }
.shempty { padding: 14px; border-radius: 14px; background: #FAF7F2; color: #4A443F; font-size: 13.5px; }
@media (max-width: 640px) { .shbar span { font-size: 10px; } }
.chelp { display: flex; gap: 12px; align-items: center; } .chelp b { display: block; font-size: 14px; } .chelp small { color: var(--muted); font-size: 12.5px; }
.chi { width: 40px; height: 40px; border-radius: 13px; background: #EEF3FD; display: grid; place-items: center; font-size: 19px; flex: none; }
.chbtns { display: flex; gap: 8px; } .chbtns .tbch { flex: 1; justify-content: center; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.csec { font-size: 12.5px; color: #1F5C3F; font-weight: 600; }
.chbtns .tbch { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 99px; font-weight: 700; font-size: 13px; text-decoration: none; } .chbtns .tbch svg { width: 16px; height: 16px; }
.pdp > .col:first-child { position: sticky; }
@media (max-width: 900px) { .pdp > .col:first-child { position: static; } }
.pm2.img { display: inline-grid; place-items: center; } .pm2.img img { max-width: 52px; max-height: 30px; object-fit: contain; }
.shev p.orig { font-size: 11.5px; color: #A39A90; margin-top: 0; }
.cidpics.one { grid-template-columns: 1fr; } .cidtxt p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
/* ================= Travel v2 ================= */
.tvh { position: relative; overflow: hidden; border-radius: 28px; min-height: 560px; margin: 8px 0 18px; color: #fff; background: linear-gradient(180deg, #1B1033 0%, #4A1F4F 38%, #B5482F 72%, #F0A04B 100%); }
.tvsky { position: absolute; inset: 0; pointer-events: none; }
.tvsky .sun { position: absolute; right: 12%; top: 18%; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, #FFE6A8 0%, #FFC46B 45%, rgba(255,196,107,0) 70%); filter: blur(1px); animation: tvsun 8s ease-in-out infinite; }
@keyframes tvsun { 50% { transform: scale(1.06); } }
.tvsky .cl { position: absolute; height: 26px; border-radius: 99px; background: rgba(255,255,255,.14); filter: blur(2px); animation: tvcl linear infinite; }
.tvsky .c1 { top: 16%; width: 220px; animation-duration: 60s; } .tvsky .c2 { top: 30%; width: 140px; animation-duration: 45s; animation-delay: -20s; } .tvsky .c3 { top: 9%; width: 300px; animation-duration: 80s; animation-delay: -40s; opacity: .7; }
@keyframes tvcl { from { transform: translateX(-320px); } to { transform: translateX(1600px); } }
.tvarc { position: absolute; left: 0; top: 4%; width: 100%; height: 55%; }
.tvplane { position: absolute; font-size: 30px; offset-path: path("M-20 160 C 300 20, 800 10, 1220 100"); animation: tvfly 14s linear infinite; text-shadow: 0 6px 18px rgba(0,0,0,.4); }
@keyframes tvfly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.tvsk { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; }
.tvsk img { position: absolute; right: -2%; bottom: -4%; height: 105%; width: 62%; object-fit: cover; object-position: center bottom; opacity: 0; mask-image: linear-gradient(90deg, transparent, #000 35%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); animation: tvsk 36s infinite; animation-delay: calc(var(--i) * 6s); }
@keyframes tvsk { 0% { opacity: 0; transform: scale(1.04); } 3%, 14% { opacity: .55; } 17%, 100% { opacity: 0; transform: scale(1); } }
.tvin { position: relative; z-index: 1; padding: 46px 48px 36px; max-width: 1080px; }
.tvkick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); padding: 6px 12px; border-radius: 99px; backdrop-filter: blur(6px); }
.tvkick i { width: 8px; height: 8px; border-radius: 99px; background: #7CF0A6; box-shadow: 0 0 0 4px rgba(124,240,166,.25); }
.tvin h1 { font-family: var(--serif); font-size: clamp(40px, 6vw, 72px); line-height: 1; margin: 16px 0 10px; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.tvin > p { font-size: 18px; opacity: .92; margin: 0 0 24px; }
.tvcard { background: rgba(255,255,255,.96); color: var(--ink); border-radius: 24px; padding: 10px 12px 14px; box-shadow: 0 30px 60px -24px rgba(20,8,30,.6); max-width: 1000px; }
.tvtabs { display: flex; gap: 6px; padding: 4px; }
.tvtabs a { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 99px; text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: 14px; }
.tvtabs a.on { background: var(--ink); color: #fff; } .tvtabs a span { font-size: 16px; }
.ttype { display: inline-flex; gap: 4px; background: #F4EFE8; border-radius: 99px; padding: 3px; margin: 6px 6px 8px; }
.ttype button { border: 0; background: none; padding: 6px 12px; border-radius: 99px; font-weight: 700; font-size: 12.5px; cursor: pointer; color: var(--ink-2); } .ttype button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.tvf { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; padding: 0 4px; }
.tvf .tf { flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px; background: #F7F3EE; border: 1.5px solid transparent; border-radius: 16px; padding: 9px 14px; transition: border-color .15s, background .15s; }
.tvf .tf:focus-within { border-color: #E7B45C; background: #fff; } .tvf > span.tf { padding: 0; background: none; border: 0; } .tvf > span.tf > .tf { height: 100%; }
.tfl { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tvf input, .tvf select { border: 0; background: none; font: inherit; font-size: 15.5px; font-weight: 700; color: var(--ink); outline: none; padding: 2px 0; width: 100%; }
.tswap { flex: none; align-self: center; width: 40px; height: 40px; margin: 0 -22px; z-index: 2; border-radius: 99px; border: 1.5px solid #EADBB8; background: #fff; font-size: 17px; cursor: pointer; transition: transform .3s; box-shadow: 0 4px 10px -4px rgba(0,0,0,.25); } .tswap.spin { transform: rotate(180deg); }
.tvgo { flex: 0 0 auto; border: 0; border-radius: 16px; padding: 0 28px; min-height: 58px; font-weight: 800; font-size: 16px; color: #fff; cursor: pointer; background: linear-gradient(135deg, #F06A4A, #D93A1C); box-shadow: 0 12px 24px -10px rgba(217,58,28,.8); transition: transform .15s; } .tvgo:hover { transform: translateY(-2px); }
.tvperks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .tvperks span { font-size: 13px; font-weight: 700; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.18); padding: 7px 12px; border-radius: 99px; backdrop-filter: blur(6px); }
.tvsoon { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: linear-gradient(135deg, #FFF6E5, #FFFDF8); border: 1px solid #F1E3C6; margin-bottom: 8px; }
.tvsoon .bell { font-size: 24px; animation: tvbell 2.4s ease-in-out infinite; transform-origin: 50% 0; } @keyframes tvbell { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 88% { transform: rotate(6deg); } }
.tvsoon b { display: block; } .tvsoon span:not(.bell) { font-size: 13.5px; color: #6B5A3E; }
.tvbento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; }
.tvbento a { position: relative; border-radius: 22px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 18px 36px -26px rgba(0,0,0,.6); }
.tvbento a.big { grid-column: span 2; grid-row: span 2; }
.tvbento img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; } .tvbento a:hover img { transform: scale(1.07); }
.tvbento .ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(10,6,20,.75)); }
.tvbento .cap { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; } .tvbento .cap small { opacity: .85; font-size: 12px; }
.tvbento .cap b { font-family: var(--serif); font-size: 24px; } .tvbento a.big .cap b { font-size: 40px; }
.tvbento .cap em { position: absolute; right: 0; bottom: 2px; font-style: normal; font-weight: 800; font-size: 13px; background: #fff; color: var(--ink); padding: 5px 10px; border-radius: 99px; }
.tvtix { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.tix { display: flex; text-decoration: none; color: var(--ink); background: #fff; border-radius: 20px; border: 1px solid var(--line); overflow: hidden; transition: transform .2s, box-shadow .2s; } .tix:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(23,20,15,.5); }
.tix .tl { flex: 1; padding: 16px 18px; } .tix .row2 { display: flex; align-items: center; gap: 10px; } .tix .row2 > div { display: flex; flex-direction: column; } .tix .row2 .r { text-align: end; }
.tix .row2 b { font-size: 24px; letter-spacing: .02em; } .tix .row2 small { font-size: 12px; color: var(--muted); }
.tix .fly { flex: 1; display: flex; align-items: center; gap: 6px; color: #C9932F; position: relative; justify-content: center; } .tix .fly i { flex: 1; border-top: 2px dashed #E8DCC6; } .tix .fly small { position: absolute; top: 18px; left: 0; right: 0; text-align: center; }
.tix .meta { margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.tix .tr { position: relative; width: 120px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 2px dashed #EEE7DC; background: #FFF9EF; overflow: hidden; }
.tix .tr::before, .tix .tr::after { content: ""; position: absolute; left: -10px; width: 18px; height: 18px; border-radius: 99px; background: var(--bg, #FAF8F5); } .tix .tr::before { top: -9px; } .tix .tr::after { bottom: -9px; }
.tix .tr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; } .tix .tr small, .tix .tr b { position: relative; } .tix .tr b { font-size: 24px; color: #D93A1C; }
.tvhot { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tvhot a { text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .2s, box-shadow .2s; } .tvhot a:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(23,20,15,.5); }
.tvhot .im { position: relative; aspect-ratio: 16 / 10; background: #F6F1EA; } .tvhot .im img { width: 100%; height: 100%; object-fit: cover; } .tvhot.cars .im img { object-fit: contain; padding: 10px; }
.tvhot .rate { position: absolute; top: 10px; right: 10px; background: #17784A; color: #fff; font-weight: 800; font-size: 13px; padding: 4px 9px; border-radius: 10px; }
.tvhot .bd { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; } .tvhot .stars { color: #E7A92B; } .tvhot .pr { margin-top: 4px; font-size: 13px; } .tvhot .pr b { font-size: 18px; }
.tvwhy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 28px 0 10px; padding: 22px; border-radius: 24px; background: #1C1714; color: #fff; }
.tvwhy div { display: flex; flex-direction: column; gap: 6px; } .tvwhy span { font-size: 26px; } .tvwhy b { font-size: 15px; } .tvwhy small { color: #C9BFB3; font-size: 13px; line-height: 1.4; }
@media (max-width: 900px) { .tvin { padding: 28px 18px; } .tvh { min-height: 0; border-radius: 0 0 26px 26px; } .tvbento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } .tvwhy { grid-template-columns: 1fr 1fr; } .tswap { margin: -14px auto; } .tvf .tf { flex-basis: 100%; } .tvgo { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .tvplane, .tvsky .cl, .tvsk img, .tvsoon .bell, .tvsky .sun { animation: none; } .tvsk img:first-child { opacity: .5; } }
.tvf [hidden] { display: none !important; } .tvf { align-items: stretch; } .tvf .tf { flex: 1 1 140px; justify-content: center; min-height: 62px; } .tvf > span.tf { display: flex; flex: 1 1 140px; }
.tvbento { grid-auto-rows: 230px; } .tvbento a.big { grid-column: span 2; grid-row: span 1; } .tvbento a:nth-child(4) { grid-column: span 2; } .tvbento a.big .cap b { font-size: 36px; }
@media (max-width: 900px) { .tvbento a.big, .tvbento a:nth-child(4) { grid-column: span 2; } }
/* Kabinet: daraja, nishonlar, o'lchamlar, savat, yaqinda ko'rilganlar */
.actfun { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin: 16px 0; }
.actlvl { padding: 20px; background: radial-gradient(120% 140% at 0% 0%, #FFF6E5 0%, #fff 60%); border-color: #F1E3C6; }
.lvhd { display: flex; align-items: center; gap: 14px; } .lvic { width: 54px; height: 54px; border-radius: 16px; background: #fff; border: 1px solid #F1E3C6; display: grid; place-items: center; font-size: 28px; box-shadow: 0 8px 18px -12px rgba(150,100,20,.6); }
.lvhd small { color: var(--muted); font-size: 12px; } .lvhd b { display: block; font-family: var(--serif); font-size: 26px; } .lvnext { font-size: 12.5px; font-weight: 700; background: #fff; border: 1px dashed #E7C58F; border-radius: 99px; padding: 5px 10px; color: #8A5A10; }
.lvbar { height: 10px; border-radius: 99px; background: #F1E8DA; overflow: hidden; margin: 16px 0 6px; } .lvbar i { display: block; height: 100%; background: linear-gradient(90deg, #E7B45C, #D93A1C); border-radius: 99px; transition: width .6s; }
.badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 16px; }
.bdg { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; opacity: .45; filter: grayscale(1); transition: transform .2s; } .bdg.on { opacity: 1; filter: none; } .bdg.on:hover { transform: translateY(-3px); }
.bdg i { width: 46px; height: 46px; border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: 22px; background: #fff; border: 2px solid #EEE7DC; } .bdg.on i { border-color: #E7B45C; box-shadow: 0 0 0 4px rgba(231,180,92,.18); }
.bdg small { font-size: 11px; line-height: 1.2; font-weight: 600; }
.actsize { padding: 20px; display: flex; flex-direction: column; gap: 10px; } .actsize h3 { margin: 0; } .actsize p { margin: 0; }
.szrow { display: flex; gap: 8px; align-items: flex-end; } .szrow label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; } .szrow label > span { position: relative; } .szrow input { width: 100%; padding-inline-end: 34px; height: 44px; font-weight: 700; }
.szrow em { position: absolute; inset-inline-end: 10px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 12px; color: var(--muted); } .szrow .btn { height: 44px; }
.tryst { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #FAF7F2; font-size: 13px; } .tryst .ok { color: #1F5C3F; font-weight: 700; }
.actcart { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 16px; text-decoration: none; color: var(--ink); background: linear-gradient(135deg, #FDF0EC, #fff 60%); border-color: #F3C9BC; }
.actcart .thumbs { display: flex; } .actcart .thumbs img, .actcart .thumbs .ph { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: #fff; border: 2px solid #fff; margin-inline-start: -10px; box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); } .actcart .thumbs > :first-child { margin-inline-start: 0; }
.actcart b { display: block; } .actcart small { color: var(--muted); font-size: 12.5px; }
.actseen { margin-top: 24px; } .seenrow { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.seenrow a { flex: 0 0 160px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; } .seenrow .im { aspect-ratio: 1; border-radius: 16px; background: #F6F1EA; display: grid; place-items: center; overflow: hidden; } .seenrow img { width: 86%; height: 86%; object-fit: contain; transition: transform .3s; } .seenrow a:hover img { transform: scale(1.06); }
.seenrow .nm { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .actfun { grid-template-columns: 1fr; } .badges { grid-template-columns: repeat(3, 1fr); } .actcart .btn { display: none; } }
/* eSIM */
.esh { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; border-radius: 28px; margin: 8px 0 18px; padding: 44px 48px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #2B1B5E 0%, #16123A 50%, #0C0A22 100%); }
.esh::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.45), transparent 65%); }
.esh h1 { font-family: var(--serif); font-size: clamp(36px, 5vw, 60px); line-height: 1.02; margin: 14px 0 10px; } .esh p { font-size: 17px; opacity: .9; margin: 0 0 22px; max-width: 560px; }
.efind { display: flex; gap: 8px; background: #fff; border-radius: 20px; padding: 8px; max-width: 560px; } .efind select { flex: 1; border: 0; font-weight: 700; font-size: 15px; height: 54px; background: #F7F3EE; border-radius: 14px; }
.ephone { position: relative; z-index: 1; justify-self: center; width: 230px; height: 400px; border-radius: 40px; background: #0B0B12; border: 8px solid #2A2A36; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); animation: efloat 5s ease-in-out infinite; }
@keyframes efloat { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
.ephone .scr { position: absolute; inset: 8px; border-radius: 30px; background: linear-gradient(180deg, #F6F3FF, #fff); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ephone .sig { position: absolute; top: 18px; right: 22px; display: flex; gap: 2px; align-items: flex-end; } .ephone .sig i { width: 4px; background: #17784A; border-radius: 2px; animation: esig 2s infinite; } .ephone .sig i:nth-child(1) { height: 5px; } .ephone .sig i:nth-child(2) { height: 8px; animation-delay: .2s; } .ephone .sig i:nth-child(3) { height: 11px; animation-delay: .4s; } .ephone .sig i:nth-child(4) { height: 14px; animation-delay: .6s; }
@keyframes esig { 0%, 30% { opacity: .2; } 60%, 100% { opacity: 1; } }
.ephone .qr { padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 10px 24px -14px rgba(60,40,140,.6); position: relative; overflow: hidden; }
.ephone .qr::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: #7C5CFF; box-shadow: 0 0 12px #7C5CFF; animation: mzscan 2.4s ease-in-out infinite; }
.ephone small { color: #17784A; font-weight: 800; }
.esimcta { font-size: 13px; font-weight: 800; color: #1C1408; background: linear-gradient(135deg, #F7D58B, #E7B45C); padding: 7px 14px; border-radius: 99px; text-decoration: none; }
.eplans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.eplan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 22px; background: #fff; border: 1.5px solid var(--line); transition: transform .2s, box-shadow .2s; } .eplan:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -26px rgba(40,20,90,.55); }
.eplan.best { border-color: #7C5CFF; box-shadow: 0 0 0 4px rgba(124,92,255,.12); } .eplan .eb { position: absolute; top: -11px; left: 18px; background: #7C5CFF; color: #fff; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 99px; }
.eplan .ed b { font-size: 34px; font-weight: 900; letter-spacing: -.02em; } .eplan .ed small { display: block; color: var(--muted); font-size: 12px; } .eplan .edays { font-size: 13.5px; font-weight: 600; }
.eplan .ep b { font-size: 24px; } .eplan .ep small { display: block; color: var(--muted); font-size: 12px; }
.ecc { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .ecc a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; } .ecc a:hover { border-color: #7C5CFF; transform: translateY(-2px); } .ecc .fl { font-size: 24px; } .ecc b { font-size: 14px; }
.esteps { margin: 30px 0 16px; } .esteps h2 { font-size: 30px; margin: 0 0 14px; } .esteps > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.esteps > div > div { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; background: #F6F3FF; } .esteps .n { position: absolute; top: 14px; right: 16px; font-weight: 900; font-size: 28px; color: rgba(124,92,255,.25); } .esteps .i { font-size: 28px; } .esteps small { color: #4A443F; font-size: 13px; line-height: 1.4; }
.ecomp { margin-bottom: 20px; } .ecomp h3 { margin: 0 0 8px; } .ecomp p { margin: 0 0 8px; }
.esc { padding: 18px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 14px; } .esc-h { display: flex; align-items: center; gap: 12px; } .esc-h h3 { margin: 0; } .esc-h .ic { width: 46px; height: 46px; border-radius: 14px; background: #F6F3FF; display: grid; place-items: center; font-size: 22px; }
.esc-b { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; } .qrbox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: #fff; } .qrbox img { width: 200px; height: 200px; } .qrbox small { color: var(--muted); font-size: 12px; max-width: 200px; text-align: center; }
.esteps2 { margin: 0 0 12px; padding-inline-start: 20px; line-height: 1.6; font-size: 14px; } code.lpa { display: block; word-break: break-all; background: #F6F3EE; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; }
@media (max-width: 900px) { .esh { grid-template-columns: 1fr; padding: 28px 18px; } .ephone { display: none; } .esteps > div { grid-template-columns: 1fr 1fr; } .efind { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .ephone, .ephone .sig i, .ephone .qr::after { animation: none; } }
.efind select { color: var(--ink); padding: 0 14px; }
/* seriyalab (optom) sotish */
.serbox{border:1.5px solid #1D1A33;border-radius:14px;padding:12px 14px;margin:10px 0;background:linear-gradient(135deg,#fff,#F6F4FF)}
.serbox .sert{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px}
.serbox .serb{background:#1D1A33;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.serbox .serg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.serbox .serg span{display:inline-flex;align-items:baseline;gap:3px;border:1px solid #DAD6EA;background:#fff;border-radius:10px;padding:6px 10px}
.serbox .serg b{font-size:15px}.serbox .serg i{font-style:normal;color:#E8431A;font-weight:700;font-size:13px}
.pc .pser{font-size:12px;color:#77738D;margin-left:4px}
.pc .pwh{display:inline-block;margin:4px 0 2px;font-size:11px;font-weight:700;color:#1D1A33;background:#EEEBFA;border-radius:6px;padding:2px 7px}
.eall{margin-top:14px}.eall summary{cursor:pointer;font-weight:700;padding:10px 14px;border:1px solid #DAD6EA;border-radius:12px;display:inline-block;list-style:none}
.eall summary::-webkit-details-marker{display:none}.eall[open] summary{margin-bottom:12px}