@import url('/css/tokens.css');

/* ===========================================================================
   MOBIL SAVDO — Telegram Web App
   Identitet logotipdan olingan: chuqur indigo → siyan gradient, sovuq neytrallar.
   Sarlavha va narxlar Archivo, matn tizim shriftida — mobil internet uchun
   bitta shrift so'rovi.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.45 var(--body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
body.modal-open { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
ul, dl, dd, dt { margin: 0; padding: 0; }
ul { list-style: none; }

.hidden { display: none !important; }
.muted { color: var(--muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--brand-600); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 6px; }

mark { background: rgba(18, 201, 245, 0.28); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Archivo faqat raqamlarga — matnda tizim shriftidan farqi ko'rinmaydi,
   raqamda esa "son" va "matn"ni ko'z bilan ajratadi */
.card-pay-monthly, .card-total, .cart-price, .cart-subtotal, .qty-val,
.detail-price-now, .detail-price-usd, .nasiya-monthly, .modal-price,
.summary strong, .terms dd, .avail-list strong, .fact-rate {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
}

/* ─── E'lon ──────────────────────────────────────────────────────────── */

/* Tekis ko'k polosa o'rniga brend gradienti — logotipdagi rang yo'li
   bilan bir xil, shuning uchun sarlavha bilan bitta butun bo'lib
   ko'rinadi. Matn kichik va harflar orasi kengaytirilgan: bu e'lon,
   sarlavha emas — o'qilsin, lekin diqqatni tortmasin. */
.announce {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gradient); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
}
.announce-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: ping 2.4s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

/* ─── Yuqori panel ───────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 11px var(--pad);
}
.topbar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}

/* Brend — sahifadagi eng qimmat ko'rinishi kerak bo'lgan element.
   Uchta narsa uni "premium" qiladi: belgining yumshoq soyasi (u qog'ozdan
   ko'tarilib turadi), nomdagi siqilgan harf oralig'i, va "SAVDO" so'ziga
   gradient. Gradient FAQAT shu yerda — jasorat bitta joyga sarflanadi. */
.brand { display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; }
.brand-mark {
  display: block; width: 38px; height: 38px; flex: none; line-height: 0;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(27, 71, 224, 0.28), 0 1px 2px rgba(10, 16, 32, 0.10);
}
.brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-title {
  font-family: var(--display); font-size: 16px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
}
.brand-title span {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--brand-600);
}
.brand-sub {
  font-size: 10px; font-weight: 500; color: var(--muted); line-height: 1.2;
  letter-spacing: 0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Filial qatori ──────────────────────────────────────────────────
   Chap tomonda tanlangan do'kon va uning ish holati, o'ng tomonda
   barcha do'konlarga o'tish. Ikkalasi ham alohida bosish nishoni —
   mijoz "boshqa do'kon tanlash" va "manzillarni ko'rish" ni
   adashtirmasligi kerak, bular boshqa-boshqa niyat. */

/* Do'konlar qatori — sig'masa o'zi suriladi, sahifani surmaydi */
.locbar {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.locbar::-webkit-scrollbar { display: none; }

.bchip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 36px; padding: 7px 12px;
  background: var(--fill-tertiary); border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  white-space: nowrap; transition: opacity 0.1s ease;
}
.bchip:active { opacity: 0.5; }
/* Tanlangan do'kon — qoldiq va olib ketish shunga bog'liq, ajralib tursin */
.bchip.is-active {
  background: var(--brand-soft); color: var(--brand-600);
  border-color: color-mix(in srgb, var(--brand-600) 24%, transparent);
}
[data-theme='dark'] .bchip.is-active {
  color: #7BA6FF;
  border-color: color-mix(in srgb, #7BA6FF 30%, transparent);
}


/* ─── Do'kon tafsiloti ───────────────────────────────────────────────── */

.locbar-detail { padding: 0 var(--pad) 12px; background: var(--surface); }
.bdetail {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; animation: fade 0.18s ease;
}
.bdetail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.bdetail-head strong { font-size: 14px; font-weight: 700; }
.bdetail-address { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.bdetail-hours {
  font-size: 12px; color: var(--muted); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.bdetail-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.bdetail-actions .btn { flex: 1; min-width: 130px; }

/* ─── Sarlavhadagi harakatlar ────────────────────────────────────────── */

.topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.head-btn {
  position: relative; width: 36px; height: 36px; flex: none;
  border-radius: 999px; background: var(--fill-tertiary);
  color: var(--text); font-size: 17px;
  display: grid; place-items: center;
  transition: opacity 0.1s ease;
}
.head-btn:active { opacity: 0.4; }
.head-btn .badge { top: -2px; right: -2px; }

/* `.branch-pill` va `.caret` olib tashlandi — filial tanlovi endi
   sarlavha ostidagi `.locbar` qatorida. */

.search {
  display: flex; align-items: center; gap: 7px;
  background: var(--fill-tertiary); border: none;
  border-radius: 10px; padding: 9px 10px; min-height: 40px;
}
.search:focus-within { background: var(--fill-secondary); }
.search-icon { color: var(--muted); flex: none; }
.search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-size: 14px; -webkit-appearance: none;
}
.search input::-webkit-search-cancel-button { display: none; }
.search-clear {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--fill-primary); color: var(--surface); font-size: 10px;
  display: grid; place-items: center; position: relative;
}
.search-clear::before { content: ''; position: absolute; inset: -12px; }
.search-clear:active { opacity: 0.5; }

/* ─── Ko'rinishlar ───────────────────────────────────────────────────── */

#main { padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--sticky-h, 0px) + 18px); }
.view { display: none; }
.view.is-active { display: block; animation: fade 0.22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.page-head { padding: 20px var(--pad) 12px; }
.page-head h2 { font-size: 22px; font-weight: 800; }
.page-head p { font-size: 13px; color: var(--muted); margin-top: 5px; max-width: 46ch; }

/* `.branch-strip` olib tashlandi — sarlavhadagi `.locbar` bilan
   takrorlanardi. `.dot` esa do'konlar ro'yxatida ishlatiladi. */
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-open { background: var(--ok); }
.dot-closed { background: var(--muted); }



/* ─── Faktlar qatori ─────────────────────────────────────────────────
   Va'da emas, tekshirib bo'ladigan ma'lumot. Karusel va afzalliklar
   qatorining o'rnini bosadi — 184px o'rniga 42px.                        */

/* Ilgari gorizontal karusel edi (uchta tabletka). Endi ikkita kartochka
   va tugma — ustun bo'lib joylashadi, surish kerak emas. */
.facts { display: block; padding: 10px var(--pad) 2px; }
/* Uchta bir xil kulrang tabletka o'rniga — belgili, ohangi bo'yicha
   ajratilgan chiplar. Har birining o'z ma'nosi bor va shakl (ikon) ham
   ma'lumot tashiydi, faqat rang emas.
   Chegara rangdan kelib chiqadi (`color-mix`), shuning uchun light va
   dark rejimda alohida qoida yozish shart emas. */
/* Uch teng ustun — surish YO'Q.
   Ilgari bu `overflow-x: auto` bilan bitta satr edi va haqiqiy telefonda
   uchinchi fakt ("90 kun kafolat") ekrandan chiqib, yarim kesilib turardi.
   Surish mumkin edi, lekin mijoz buni bilmaydi — u shunchaki buzuq
   deb ko'radi. Grid esa har qanday enda uchalasini ham sig'diradi. */
.fact-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px;
}
/* Raqam tepada belgisi bilan, izoh ostida — tor ekranda ham kesilmaydi */
.fact {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 0; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 4px;
}
.fact-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fact b {
  font-family: var(--display); font-size: 12.5px; font-weight: 800;
  color: var(--text); letter-spacing: -0.02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fact-label {
  font-size: 10px; font-weight: 500; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.fact-icon { flex: none; }

/* Suzuvchi qayta aloqa tugmasi.
   Pastki navigatsiya, savat paneli va iPhone'dagi xavfsiz maydondan
   yuqorida turadi — shuning uchun o'rni o'sha o'zgaruvchilardan
   hisoblanadi va savatga mahsulot qo'shilganda o'zi ko'tariladi. */
.callback-fab {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 120;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--sticky-h, 0px) + 12px);
  max-width: calc(100vw - 32px);
  /* `visibility` ATAYLAB o'tishga qo'shilmagan: o'tish davomida element
     bosiladigan holatda qolib ketadi va kadr chizilmaydigan holatda
     (fon rejimi, sekin qurilma) umuman yashirinmay qolishi mumkin.
     Faqat shaffoflik silliq o'zgaradi, ko'rinish esa darhol. */
  transition: opacity 0.2s ease;
}
/* Modal ochiq bo'lsa ustida suzib turmasin */
body.modal-open .callback-fab { opacity: 0; visibility: hidden; }

.callback-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand-600) 22%, transparent);
  box-shadow: 0 3px 14px rgba(27, 71, 224, 0.16);
  color: var(--brand-600); font-size: 13.5px; font-weight: 700;
  white-space: nowrap;
  /* Faqat `transform` — u GPU'da bajariladi. `box-shadow` ni animatsiya
     qilish har kadrda qayta bo'yashni talab qiladi va sekin telefonda
     seziladi (sinovda brauzerni ishdan chiqargan). */
  animation: cb-wiggle 6s ease-in-out infinite;
}

/* Tarqaladigan halqa — alohida qatlamda, `transform` va `opacity` bilan */
.callback-btn::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit; border: 2px solid var(--brand-600);
  opacity: 0; pointer-events: none;
  animation: cb-ring 2.8s ease-out infinite;
}
[data-theme='dark'] .callback-btn::after { border-color: #7BA6FF; }

@keyframes cb-ring {
  0%        { transform: scale(1); opacity: 0.34; }
  70%, 100% { transform: scale(1.16); opacity: 0; }
}
/* Qimirlash — har 6 soniyada bir marta, juda kichik burchakda */
@keyframes cb-wiggle {
  0%, 88%, 100% { transform: rotate(0deg); }
  91%           { transform: rotate(-2deg); }
  94%           { transform: rotate(2deg); }
  97%           { transform: rotate(-1deg); }
}
/* Ilova fon rejimiga o'tsa animatsiya to'xtaydi — u ko'rinmayotgan
   narsa uchun batareya yeyishi kerak emas. */
body.is-hidden .callback-btn,
body.is-hidden .callback-btn::after { animation-play-state: paused; }

/* Harakatni kamaytirish so'ralgan bo'lsa — hech qanday animatsiya yo'q */
@media (prefers-reduced-motion: reduce) {
  .callback-btn { animation: none; }
  .callback-btn::after { animation: none; opacity: 0; }
}
[data-theme='dark'] .callback-btn { color: #7BA6FF; }
.callback-btn:active { opacity: 0.55; }
/* Belgilar brend rangida — uchalasi bir xil, chunki ular teng vaznli
   faktlar. Ilgari har biri boshqa rangda edi va bu uchta aksentga
   bo'linib, hech biri ajralib turmasdi. */
.fact-icon { color: var(--brand-600); }
[data-theme='dark'] .fact-icon { color: #7BA6FF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .fact-icon { color: #7BA6FF; }
}

/* ─── Segmentli kategoriya ───────────────────────────────────────────── */

/* Kulrang trek olib tashlandi: u butun enni egallab, ostidagi filtr
   qatoridan butunlay boshqacha ko'rinardi — ikkita filtr, ikkita
   vizual til, natijada tartibsiz taassurot. Endi ikkalasi ham chip. */
.segments {
  display: flex; gap: 7px; margin: 0; padding: 10px var(--pad) 0;
  overflow-x: auto; scrollbar-width: none;
}
.segments::-webkit-scrollbar { display: none; }
/* Kategoriya — asosiy o'q (nima sotib olmoqchi), shuning uchun tanlangani
   to'liq brend rangida. Holat filtri esa ikkinchi darajali va yumshoqroq
   ko'rinadi (pastda). Ilgari teskari edi: pastdagi qator to'q ko'k,
   yuqoridagi esa oq — kichikroq filtr kattaroq ovoz chiqarardi. */
.seg { font-size: 13px; }

/* ─── Sarlavha va filtrlar ───────────────────────────────────────────── */

/* "Katalog" sarlavhasi olib tashlandi — sahifaning o'zi katalog, u
   54px joy egallab hech narsa qo'shmasdi. Son filtrlar bilan bir qatorda. */
.filter-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--pad) 0;
}
.filter-head .filters { flex: 1; min-width: 0; padding: 0; }

/* Holat filtri — ikkinchi darajali o'q. Tanlangani brend rangida, lekin
   yumshoq fonda: kategoriya chipi bilan raqobatlashmasin. */
#filter-bar .chip.is-active {
  background: var(--brand-soft); color: var(--brand-600); font-weight: 700;
}
[data-theme='dark'] #filter-bar .chip.is-active { background: rgba(42, 91, 240, 0.22); color: #7BA6FF; }
.count-badge {
  font-family: var(--display); font-size: 11px; font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums;
  flex: none; white-space: nowrap; padding-bottom: 9px;
}

.filters { padding: 0 var(--pad); }
.filter-row {
  display: flex; align-items: center; gap: 7px;
  overflow-x: auto; padding-bottom: 9px; scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-sep { width: 1px; height: 18px; background: var(--line); flex: none; }

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; flex: none; min-height: 36px;
  background: var(--fill-secondary); border: none;
  border-radius: 999px; padding: 8px 15px;
  font-size: 14px; font-weight: 500; color: var(--text);
  letter-spacing: -0.01em;
  transition: background 0.16s ease, opacity 0.1s ease;
}
.chip:active { opacity: 0.5; }
.chip.is-active { background: var(--brand-600); color: #fff; font-weight: 600; }
[data-theme='dark'] .chip.is-active { background: var(--brand-500); }

.chip-lg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700;
}
.chip-lg em {
  font-family: var(--display); font-style: normal; font-weight: 500;
  font-size: 11px; opacity: 0.65; font-variant-numeric: tabular-nums;
}

.swatch {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 2px solid var(--line); padding: 3px; transition: 0.15s;
}
.swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
.swatch.is-active { border-color: var(--brand-600); transform: scale(1.06); }

.recent {
  display: flex; align-items: center; gap: 7px;
  padding: 8px var(--pad) 2px;
  overflow-x: auto; scrollbar-width: none;
}
.recent::-webkit-scrollbar { display: none; }
.recent-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  white-space: nowrap; flex: none;
}
.recent .link-btn { flex: none; margin-left: auto; padding-left: 6px; }
/* Qidiruv tarixi chiplari filtrlardan kichikroq — ular tanlov emas, tarix */
.chip-sm { min-height: 30px; padding: 6px 12px; font-size: 12.5px; }
.link-btn { color: var(--brand-600); font-size: 11px; font-weight: 700; }
[data-theme='dark'] .link-btn { color: #7BA6FF; }

/* ─── Mahsulot to'ri ─────────────────────────────────────────────────── */

/* `minmax(0, 1fr)` — `1fr` emas.
   Grid elementining standart `min-width: auto` qiymati uni o'z minimal
   enidan pastga tushirmaydi. Kartochkada `contain-intrinsic-size: 340px`
   turgani uchun har ustunning minimali 340px bo'lib qolardi va 375px
   ekranda ikki ustun 746px joy egallab, butun sahifani gorizontal
   surilib ketadigan qilardi. `minmax(0, …)` o'sha polni olib tashlaydi. */
.grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; padding: 4px var(--pad) 0;
}
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: none;
  border-radius: var(--ios-radius-lg); padding: 10px;
  box-shadow: 0 1px 2px rgba(10, 16, 32, 0.05);
  transition: opacity 0.1s ease;
  content-visibility: auto; contain-intrinsic-size: 340px;
}
.card:active { opacity: 0.55; }
.card-out { opacity: 0.6; }

.wish-btn {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: #93A3BC;
  font-size: 16px; display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(10, 16, 32, 0.12); backdrop-filter: blur(10px);
  transition: opacity 0.1s ease, color 0.16s ease;
}
/* Ko'rinishi 28px, bosish maydoni 44px */
.wish-btn::before { content: ''; position: absolute; inset: -8px; }
.wish-btn:active { opacity: 0.5; }
[data-theme='dark'] .wish-btn { background: rgba(24, 32, 45, 0.92); }
.wish-btn.is-on { color: var(--danger); }

.card-media {
  height: 128px; margin-bottom: 10px; border-radius: 12px;
  background: #fff; display: grid; place-items: center; overflow: hidden;
}
[data-theme='dark'] .card-media { background: #1C2432; }
[data-theme='dark'] .product-img { mix-blend-mode: normal; filter: brightness(0.94); }
.product-img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.16); mix-blend-mode: multiply; }
.product-emoji { font-size: 44px; }

/* Yangi/ishlatilgan va batareya foizi — bu do'konning asosiy ajratuvchi
   belgisi va ishlatilgan telefonda qaror aynan shu raqamga qarab
   qabul qilinadi. Ilgari u kartochkadagi ENG KICHIK matn edi (10px),
   ya'ni eng muhim ma'lumot eng kam ko'rinardi. Endi foiz alohida
   ko'tarilgan. */
.cond {
  align-self: flex-start; font-size: 10.5px; font-weight: 700;
  padding: 4px 8px; border-radius: 6px; margin-bottom: 6px;
  max-width: 100%; line-height: 1.25;
}
.cond-new { background: var(--brand-soft); color: var(--brand-600); }
[data-theme='dark'] .cond-new { color: #7BA6FF; }
.cond-used { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.cond-used b { font-size: 12px; font-weight: 800; letter-spacing: -0.02em; }
[data-theme='dark'] .cond-used { color: #E5A54B; }

.card-title {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  line-height: 1.28; height: 34px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card-storages { font-size: 10.5px; color: var(--muted); margin-top: 3px; }

/* Qaror shu raqamga qarab qabul qilinadi — shuning uchun u bosh element.
   Ko'k "bosiladi" ma'nosini bildiradi, shuning uchun matn emas, fon bo'ladi. */
/* Oylik to'lov kartochkadagi eng qalin element — O'zbekistonda qaror
   aynan shu raqamga qarab qabul qilinadi. Fon brend rangida, chunki bu
   kartochkadagi yagona "baland ovoz" bo'lishi kerak. */
.card-pay {
  margin-top: 8px; padding: 7px 9px;
  background: var(--brand-soft); border-radius: 10px;
}
.card-pay-monthly {
  font-size: 16px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--text); line-height: 1.15;
}
.card-pay-monthly span { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.card-pay-note { font-size: 10px; color: var(--muted); margin-top: 2px; }
.card-total { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* Rasm bir xil bo'lsa ham kartochkalar farq qilsin: fon modelning
   o'z rangida yumshoq bo'yaladi (--tint views.js dan keladi) */
.card-media {
  background:
    radial-gradient(120% 90% at 50% 105%, var(--tint, transparent) 0%, transparent 62%),
    #fff;
}
[data-theme='dark'] .card-media {
  background:
    radial-gradient(120% 90% at 50% 105%, var(--tint, transparent) 0%, transparent 62%),
    #1C2432;
}



.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 9px;
}
.add-btn {
  width: 36px; height: 36px; flex: none; border-radius: 999px;
  background: var(--brand-600); color: #fff; font-size: 20px; line-height: 1;
  font-weight: 400; display: grid; place-items: center;
  transition: opacity 0.1s ease;
}
.add-btn:active:not(:disabled) { opacity: 0.4; }
.add-btn:disabled { background: var(--fill-secondary); color: var(--muted); }
[data-theme='dark'] .add-btn { background: var(--brand-500); }

.stock { font-size: 10px; font-weight: 700; }
.stock-ok { color: var(--ok); }
.stock-low { color: var(--warn); }
.stock-out { color: var(--danger); }

.rating { font-size: 11px; color: var(--muted); font-weight: 600; }

/* ─── Skeleton ───────────────────────────────────────────────────────── */

.sk { background: var(--line); border-radius: 8px; animation: pulse 1.3s ease-in-out infinite; }
.sk-media { height: 128px; margin-bottom: 10px; border-radius: 12px; }
.sk-line { height: 11px; margin-bottom: 8px; }
.sk-short { width: 40%; }
.sk-price { width: 70%; height: 16px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ─── Bo'sh holat ────────────────────────────────────────────────────── */

.empty {
  grid-column: 1 / -1; text-align: center; padding: 52px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.empty-icon { font-size: 38px; color: var(--muted); opacity: 0.5; }
.empty h3 { font-size: 17px; font-weight: 700; }
.empty p { font-size: 13px; color: var(--muted); max-width: 32ch; }
.empty .btn { margin-top: 10px; width: auto; padding: 12px 24px; min-height: 44px; }

/* ─── Do'konlar ──────────────────────────────────────────────────────── */

.branch-list { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--pad); }

.branch {
  display: flex; gap: 12px; align-items: center;
  background: var(--surface); border: none;
  border-radius: var(--ios-radius-lg); padding: 15px;
  transition: background 0.16s ease, opacity 0.1s ease;
}
.branch:active { opacity: 0.6; }
.branch.is-active { border-color: var(--brand-500); background: var(--brand-soft); }
.branch-body { flex: 1; min-width: 0; }
.branch-title {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px;
}
.branch-badge {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line); padding: 2px 6px; border-radius: 5px;
}
.branch-address { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 6px; }
/* Ish holati alohida chip bo'lib turadi — ilgari u ish vaqti bilan bitta
   kulrang qatorga qo'shilib ketgan va o'qilmasdi. Do'kon ochiqmi degan
   savol mijoz uchun manzildan ham muhimroq. */
.branch-meta { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.bstate {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
}
.bstate-open { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.bstate-closed { background: var(--fill-tertiary); color: var(--muted); }
.branch-hours { font-variant-numeric: tabular-nums; }

.branch-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.mini-btn {
  display: inline-flex; align-items: center; min-height: 36px;
  font-size: 14px; font-weight: 500; padding: 8px 14px;
  border: none; border-radius: 999px;
  background: var(--fill-secondary); color: var(--brand-600);
  transition: opacity 0.1s ease;
}
.mini-btn:active { opacity: 0.4; }
[data-theme='dark'] .mini-btn { color: #7BA6FF; }
.branch-check { font-size: 17px; font-weight: 800; color: var(--brand-600); flex: none; }

.info-card {
  margin: 16px var(--pad) 0; padding: 16px;
  background: var(--surface); border: none;
  border-radius: var(--ios-radius-lg);
}
.info-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.info-card p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ─── Savat ──────────────────────────────────────────────────────────── */

.cart-list { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--pad); }

.cart-line {
  display: flex; gap: 12px;
  background: var(--surface); border: none;
  border-radius: var(--ios-radius-lg); padding: 13px;
}
.cart-media {
  width: 62px; height: 62px; flex: none; border-radius: 10px;
  background: #fff; display: grid; place-items: center; overflow: hidden;
}
[data-theme='dark'] .cart-media { background: #1C2432; }
.cart-media .product-emoji { font-size: 26px; }
.cart-body { flex: 1; min-width: 0; }
.cart-name { font-family: var(--display); font-size: 13px; font-weight: 700; line-height: 1.3; }
.cart-variant { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cart-price { font-size: 13px; font-weight: 700; color: var(--brand-600); margin: 6px 0 9px; }
[data-theme='dark'] .cart-price { color: #7BA6FF; }

/* 320px ekranda miqdor + narx + o'chirish bitta qatorga sig'maydi: narx
   uzilmas probel bilan yozilgan (bu ataylab — summa satr oxirida
   bo'linmasligi kerak), shuning uchun siqila olmaydi va o'chirish tugmasi
   qatordan chiqib, butun sahifani surib yuborardi.
   Yechim — o'rash: tor ekranda narx va tugma pastki qatorga tushadi. */
.cart-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qty {
  display: flex; align-items: center;
  background: var(--fill-tertiary); border: none;
  border-radius: 9px; padding: 2px;
}
.qty-btn {
  width: 36px; height: 36px; border-radius: 7px;
  font-size: 18px; font-weight: 500; color: var(--brand-600);
  transition: opacity 0.1s ease;
}
.qty-btn:active { opacity: 0.35; }
[data-theme='dark'] .qty-btn { color: #7BA6FF; }
[data-theme='dark'] .qty-btn { color: #7BA6FF; }
.qty-val { min-width: 22px; text-align: center; font-size: 13px; font-weight: 700; }
.cart-subtotal {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.icon-btn {
  width: 36px; height: 36px; flex: none; border-radius: 8px;
  font-size: 15px; color: var(--muted);
  display: grid; place-items: center;
  transition: opacity 0.1s ease;
}
.icon-btn:active { opacity: 0.4; color: var(--danger); }

/* ─── Checkout ───────────────────────────────────────────────────────── */

.checkout { padding: 22px var(--pad) 0; }
.checkout-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }

.field { margin-bottom: 14px; }
.label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.input {
  width: 100%; min-height: 46px; padding: 12px 14px;
  background: var(--surface); border: 0.5px solid var(--line);
  border-radius: 11px; font-size: 17px; outline: none; -webkit-appearance: none;
  transition: border-color 0.16s ease;
}
.input:focus { border-color: var(--brand-500); border-width: 1px; padding: 11.5px 13.5px; }
.input::placeholder { color: var(--muted); opacity: 0.7; }
.error { font-size: 11.5px; color: var(--danger); font-weight: 600; margin-top: 6px; }

.tradein {
  background: var(--surface); border: none;
  border-radius: var(--ios-radius-lg); padding: 14px 16px; margin-bottom: 14px;
}
.tradein-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tradein-title { display: block; font-size: 13px; font-weight: 700; }
.tradein-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
/* iOS switch: 51×31, ichida oq disk siljiydi */
.tradein input[type='checkbox'] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none;
  width: 51px; height: 31px; border-radius: 999px;
  background: var(--fill-primary); cursor: pointer;
  transition: background 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.tradein input[type='checkbox']::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.tradein input[type='checkbox']:checked { background: var(--ok); }
.tradein input[type='checkbox']:checked::after { transform: translateX(20px); }
#tradein-details { margin-top: 11px; }

.summary {
  background: var(--surface); border: none;
  border-radius: var(--ios-radius-lg); padding: 16px; margin-bottom: 14px;
}
.summary-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 4px 0; color: var(--muted);
}
.summary-row strong { color: var(--text); font-weight: 700; }
.summary-row .free { color: var(--ok); }
.summary-total {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 11px;
  font-size: 15px; color: var(--text); font-weight: 600;
}
.summary-total strong { font-size: 18px; font-weight: 800; }
.summary-note { font-size: 11.5px; color: var(--muted); margin-top: 9px; }
.summary-note strong { color: var(--brand-600); font-family: var(--display); }
[data-theme='dark'] .summary-note strong { color: #7BA6FF; }

.trust {
  background: var(--surface); border: none;
  border-radius: var(--ios-radius-lg); padding: 16px; margin-bottom: 14px;
}
.trust-title { font-size: 13px; font-weight: 700; margin-bottom: 9px; font-family: var(--display); }
.trust-list { display: flex; flex-direction: column; gap: 7px; }
.trust-list li {
  font-size: 12.5px; color: var(--muted); line-height: 1.4;
  padding-left: 18px; position: relative;
}
.trust-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--ok); font-weight: 700; font-size: 12px;
}

.checkout-actions { display: flex; flex-direction: column; gap: 10px; }

/* ─── Tugma tizimi — iOS (Apple HIG) ─────────────────────────────────────
   iOS tugmasi tekis to'ldirilgan: gradient ham, tashlab tushuvchi soya ham
   yo'q. Bosilganda kattalashmaydi — xiralashadi (highlighted holati).
   Matn tizim shriftida: iPhone'da bu SF Pro bo'lib chiqadi.

   Variantlar: .btn-primary (Filled) | .btn-soft (Tinted)
               .btn-ghost (Gray)     | .btn-plain (Plain)
   O'lchamlar: .btn-sm (44px) | (default 50px) | .btn-auto
   Shakl:      .btn-capsule (to'liq yumaloq)
   Holatlar:   :disabled | .is-loading                                      */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: transparent;

  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 50px; padding: 14px 20px;
  border: 1px solid var(--btn-border);
  border-radius: var(--ios-radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--body);          /* iPhone'da SF Pro */
  font-size: 17px;                   /* iOS Body */
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center; line-height: 1.25;
  transition: opacity 0.1s ease, background 0.15s ease;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* iOS bosish javobi: butun tugma xiralashadi */
.btn:active:not(:disabled) { opacity: 0.4; }
.btn:disabled { opacity: 0.35; cursor: default; }

.btn-primary { --btn-bg: var(--brand-600); --btn-fg: #fff; }
.btn-soft    { --btn-bg: var(--brand-soft); --btn-fg: var(--brand-600); }
.btn-ghost   { --btn-bg: var(--fill-secondary); --btn-fg: var(--text); }
.btn-plain   { --btn-bg: transparent; --btn-fg: var(--brand-600); font-weight: 500; }
.btn-danger  { --btn-bg: var(--fill-secondary); --btn-fg: var(--danger); }

[data-theme='dark'] .btn-primary { --btn-bg: var(--brand-500); }
[data-theme='dark'] .btn-soft,
[data-theme='dark'] .btn-plain { --btn-fg: #7BA6FF; }

.btn-sm { min-height: 44px; padding: 11px 18px; font-size: 15px; border-radius: 11px; }
.btn-auto { width: auto; }
.btn-capsule { border-radius: 999px; }

.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 19px; height: 19px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: #fff;
  animation: spin 0.7s linear infinite;
}
.btn-ghost.is-loading::after,
.btn-soft.is-loading::after,
.btn-plain.is-loading::after { color: var(--brand-600); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Doimiy savat paneli ───────────────────────────────────────────────── */

.sticky-bar {
  position: fixed; left: 0; right: 0; z-index: 90;
  bottom: calc(var(--nav-h) + var(--safe-bottom));
  display: flex; align-items: center; gap: 14px;
  padding: 11px var(--pad);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--line);
  transform: translateY(120%); visibility: hidden;
  transition: transform 0.26s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.26s;
}
.sticky-bar.is-visible { transform: translateY(0); visibility: visible; }
body.has-sticky { --sticky-h: 72px; }
.sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sticky-count { font-size: 11px; color: var(--muted); }
.sticky-total {
  font-family: var(--display); font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sticky-bar .btn { width: auto; flex: none; }

.fineprint { font-size: 11px; color: var(--muted); text-align: center; margin: 14px 0 4px; }

/* ─── Muvaffaqiyat ───────────────────────────────────────────────────── */

.success {
  padding: 48px var(--pad); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.success-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--gradient); color: #fff;
  display: grid; place-items: center; font-size: 28px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(27, 71, 224, 0.32); margin-bottom: 6px;
}
.success h2 { font-size: 21px; font-weight: 800; }
.success-id { font-size: 13px; color: var(--muted); }
.success-id strong { color: var(--brand-600); font-family: var(--display); font-size: 15px; }
[data-theme='dark'] .success-id strong { color: #7BA6FF; }
.success-text { font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 34ch; }
.success-text strong { color: var(--text); }
.success-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 16px; }

/* To'lov holati — muvaffaqiyat ekrani ichida, tugmalardan tepada.
   Mijoz Click oynasidan qaytganda birinchi shuni izlaydi. */
.pay-box {
  width: 100%; margin-top: 18px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--radius, 14px);
  background: var(--surface);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pay-box.is-paid { border-color: #16A34A; }
.pay-title { font-size: 13px; font-weight: 700; }
.pay-status { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 32ch; }
.pay-box.is-paid .pay-status { color: #16A34A; font-weight: 600; }
.pay-box .btn { width: 100%; }

/* ─── Profil ─────────────────────────────────────────────────────────── */

.profile-head {
  padding: 28px var(--pad) 26px; text-align: center;
  background: var(--surface); margin-bottom: 24px;
}
.profile-mark { line-height: 0; margin-bottom: 13px; }
.profile-head h2 { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
.profile-head p { font-size: 13px; color: var(--muted); margin-top: 5px; }
.profile-motto {
  display: inline-block; margin-top: 12px !important;
  background: var(--brand-soft); color: var(--brand-600);
  font-size: 11.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
}
[data-theme='dark'] .profile-motto { color: #7BA6FF; }

/* iOS "Inset Grouped" ro'yxat: yumaloq konteyner, ichkariga surilgan ajratgich */
.panel {
  background: var(--surface); border-radius: var(--ios-radius-lg);
  margin: 0 var(--pad) 22px; padding: 0; overflow: hidden;
}
.panel-title {
  font-size: 13px; font-weight: 400; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0 var(--pad) 7px;
}

.row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 11px var(--pad); text-align: left;
  position: relative; transition: background 0.1s ease;
}
/* Ajratgich matn boshidan boshlanadi — iOS shunday qiladi */
.row:not(:last-child)::after {
  content: ''; position: absolute; left: var(--pad); right: 0; bottom: 0;
  height: 0.5px; background: var(--line);
}
.row:active { background: var(--fill-tertiary); }
/* Havola sifatidagi qator ham tugmadek ko'rinsin */
a.row { color: inherit; text-decoration: none; }
.row-mark { flex: none; line-height: 0; }
.row-body { flex: 1; min-width: 0; }
.row-title { display: block; font-size: 14px; font-weight: 600; }
.row-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.row-go { color: var(--muted); font-size: 17px; flex: none; opacity: 0.45; font-weight: 600; }

.terms { padding: 0; }
.terms > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  min-height: 44px; padding: 12px var(--pad); font-size: 15px; position: relative;
}
.terms > div:not(:last-child)::after {
  content: ''; position: absolute; left: var(--pad); right: 0; bottom: 0;
  height: 0.5px; background: var(--line);
}
.terms dt { color: var(--muted); }
.terms dd { font-weight: 700; text-align: right; }

.version { text-align: center; font-size: 11px; color: var(--muted); padding: 6px 0 22px; }

/* ─── Modal ──────────────────────────────────────────────────────────── */

/* iOS sheet: tepasi yumaloq, ustida tutqich, biroz pastdan boshlanadi */
.modal {
  position: fixed; inset: 6px 0 0; z-index: 200;
  background: var(--bg); display: flex; flex-direction: column;
  border-radius: 12px 12px 0 0; overflow: hidden;
  box-shadow: 0 -2px 24px rgba(10, 16, 32, 0.18);
  transform: translateY(100%); visibility: hidden;
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.36s;
}
.modal.is-open { transform: translateY(0); visibility: visible; }

.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px var(--pad) 12px;
  background: var(--surface); border-bottom: 0.5px solid var(--line);
  position: relative;
}
/* Tutqich — iOS sheet'ning tanish belgisi */
.modal-head::before {
  content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 5px; border-radius: 3px; background: var(--fill-primary);
}
.back-btn {
  font-size: 22px; line-height: 1; min-width: 44px; min-height: 44px;
  margin: -10px 0 -10px -10px; padding-left: 10px; text-align: left;
  color: var(--brand-600); display: flex; align-items: center;
}
.back-btn:active { opacity: 0.4; }
[data-theme='dark'] .back-btn { color: #7BA6FF; }
.modal-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.modal-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }

.modal-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px var(--pad) 26px; }
.modal-content .branch-list { padding: 0; }

.modal-footer {
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--pad) calc(12px + var(--safe-bottom));
  background: var(--surface); border-top: 0.5px solid var(--line);
}
.modal-price-col { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.modal-price { font-size: 17px; font-weight: 800; }
.modal-monthly { font-size: 11px; color: var(--muted); }
.modal-footer .btn { width: auto; flex: none; padding: 13px 24px; min-height: 48px; }

/* ─── Mahsulot tafsiloti ─────────────────────────────────────────────── */

.detail-media {
  height: 260px; border-radius: var(--ios-radius-lg); margin-bottom: 18px;
  background: #fff; border: none;
  display: grid; place-items: center; overflow: hidden;
}
.detail-media .product-emoji { font-size: 90px; }
.detail-head { margin-bottom: 14px; }
.detail-head .cond { display: inline-block; margin-bottom: 8px; }
.detail-title { font-size: 20px; font-weight: 800; line-height: 1.2; }
.detail-sub { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

/* Yorliq — holat chipi yonida, lekin undan yengilroq: holat (yangi/
   ishlatilgan) qaror qildiradi, yorliq esa qo'shimcha izoh. */
.detail-tag {
  display: inline-block; margin: 0 0 8px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 8px; border-radius: 6px;
  background: var(--fill-tertiary); color: var(--muted);
}
.detail-desc {
  margin-top: 10px; font-size: 13.5px; line-height: 1.55;
  color: var(--muted); max-width: 60ch;
}

.detail-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.detail-price-now { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.detail-price-usd { font-size: 13px; color: var(--muted); font-weight: 500; }

.chip-group { margin-bottom: 22px; }
.chip-label { font-size: 13px; font-weight: 700; margin-bottom: 10px; }

.specs { width: 100%; border-collapse: collapse; font-size: 13px; }
.specs tr { border-bottom: 1px solid var(--line); }
.specs tr:last-child { border-bottom: none; }
.specs th {
  text-align: left; font-weight: 500; color: var(--muted);
  padding: 10px 12px 10px 0; width: 40%; vertical-align: top;
}
.specs td { padding: 10px 0; font-weight: 600; }

.avail-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--line);
}
.avail-list li:last-child { border-bottom: none; }
.avail-list .ok { color: var(--ok); font-weight: 700; }
.avail-list .out { color: var(--muted); font-weight: 500; }

.notice {
  margin-top: 12px; font-size: 12.5px; line-height: 1.5;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand-700); border-radius: 10px; padding: 11px 13px;
}
[data-theme='dark'] .notice { color: #9CC0FF; }

.cross-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.cross-scroll::-webkit-scrollbar { display: none; }
.cross-card {
  width: 124px; flex: none; text-align: left;
  background: var(--surface); border: none;
  border-radius: var(--ios-radius); padding: 10px;
  transition: opacity 0.1s ease;
}
.cross-card:active { opacity: 0.5; }
.cross-media {
  height: 76px; margin-bottom: 8px; border-radius: 9px;
  background: #fff; display: grid; place-items: center; overflow: hidden;
}
.cross-media .product-emoji { font-size: 30px; }
.cross-name {
  font-size: 11px; font-weight: 600; line-height: 1.3; height: 28px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cross-price { font-family: var(--display); font-size: 12px; font-weight: 700; margin-top: 6px; }

.guarantee {
  display: flex; flex-direction: column; gap: 11px;
  background: var(--surface); border: none;
  border-radius: var(--ios-radius-lg); padding: 16px; font-size: 13px; color: var(--muted);
}
.guarantee li { padding-left: 18px; position: relative; line-height: 1.4; }
.guarantee li::before {
  content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700;
}
.guarantee strong { color: var(--text); font-weight: 700; }

/* ─── Muddatli to'lov bloki ──────────────────────────────────────────── */

.nasiya-box {
  background: var(--surface); border: none;
  border-radius: var(--ios-radius-lg); padding: 16px; margin-bottom: 22px;
}
.nasiya-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.nasiya-head h4 { font-size: 14px; font-weight: 700; }
.nasiya-hint {
  font-size: 10.5px; font-weight: 700; color: var(--brand-600);
  background: var(--brand-soft); padding: 4px 9px; border-radius: 999px;
}
[data-theme='dark'] .nasiya-hint { color: #7BA6FF; }
.nasiya-result { margin-top: 6px; }
.nasiya-monthly { font-size: 26px; font-weight: 800; color: var(--brand-600); letter-spacing: -0.03em; }
[data-theme='dark'] .nasiya-monthly { color: #7BA6FF; }
.nasiya-monthly span { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.nasiya-breakdown { display: flex; gap: 22px; margin-top: 11px; }
.nasiya-breakdown dt { font-size: 11px; color: var(--muted); }
.nasiya-breakdown dd {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  margin-top: 2px; font-variant-numeric: tabular-nums;
}

/* ─── Toast ──────────────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; z-index: 300;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--sticky-h, 0px) + 14px);
  transform: translate(-50%, 20px);
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 32px);
  background: rgba(10, 16, 32, 0.92); color: #fff;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 999px; padding: 13px 20px;
  font-size: 15px; font-weight: 400;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.24s, transform 0.24s, visibility 0.24s;
}
[data-theme='dark'] .toast { background: #212B3A; }
.toast.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.toast-text { flex: 1; min-width: 0; }
.toast-action { color: #5FD0FF; font-weight: 600; font-size: 15px; white-space: nowrap; }
.toast-action:active { opacity: 0.5; }

/* ─── Pastki navigatsiya ─────────────────────────────────────────────── */

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .bottom-nav { background: var(--surface); } }
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--muted); font-size: 10px; font-weight: 500; padding: 6px 2px;
  transition: opacity 0.1s ease;
}
.nav-item:active { opacity: 0.4; }
.nav-item.is-active { color: var(--brand-600); font-weight: 700; }
[data-theme='dark'] .nav-item.is-active { color: #7BA6FF; }
.nav-icon { position: relative; font-size: 17px; line-height: 1; }
.badge {
  position: absolute; top: -6px; right: -10px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff;
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  line-height: 16px; text-align: center;
  border-radius: 999px; border: 2px solid var(--surface);
}

/* ═══════════════════════════════════════════════════════════════════════
   Ikki til, yetkazib berish, ishonch signallari, galereya, buyurtmalar
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Til almashtirgich ──────────────────────────────────────────────── */

.lang-switch {
  display: flex; flex: none; gap: 2px;
  background: var(--fill-tertiary); border-radius: 999px; padding: 2px;
}
.lang-btn {
  position: relative;
  min-width: 30px; height: 32px; padding: 0 8px;
  border-radius: 999px; color: var(--muted);
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.03em;
  transition: background 0.14s ease, color 0.14s ease;
}
/* Ko'rinadigan o'lcham 32px, bosish nishoni 44px — barmoq uchun */
.lang-btn::before { content: ''; position: absolute; inset: -6px -2px; }
.lang-btn.is-active { background: var(--surface); color: var(--brand-600); box-shadow: var(--shadow-sm); }
[data-theme='dark'] .lang-btn.is-active { color: #7BA6FF; }

/* 375px da brend taglavhasi joyni yeydi — tor ekranda yashiriladi */
@media (max-width: 379px) {
  .brand-sub { display: none; }
  .branch-pill { max-width: 30vw; }
}

/* ─── Olib ketish / yetkazib berish tanlovi ──────────────────────────── */

.choice-row { display: flex; gap: 8px; }
.choice {
  flex: 1; min-height: 62px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: var(--fill-tertiary); border: 1.5px solid transparent;
  border-radius: var(--ios-radius); color: var(--text);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.choice-title { font-size: 13px; font-weight: 600; line-height: 1.25; }
.choice-sub { font-size: 11px; color: var(--muted); line-height: 1.3; }
.choice.is-active {
  background: var(--brand-soft); border-color: var(--brand-600);
}
.choice.is-active .choice-title { color: var(--brand-700); }
[data-theme='dark'] .choice.is-active .choice-title { color: #9DBBFF; }
.choice:active { opacity: 0.6; }

/* ─── Bo'lib to'lash hamkorlari ──────────────────────────────────────── */

.hint-note { font-size: 12px; color: var(--muted); line-height: 1.4; margin: -2px 0 9px; }

.partner-list { display: flex; flex-direction: column; gap: 8px; }

/* To'liq kenglikdagi qator: logo kichik kvadratchada tanib bo'lmaydi va
   tekshiruv sharti sig'maydi. Barchasini rangli qilish "rang devori"
   yasaydi — rang faqat tanlanganida paydo bo'ladi. */
.partner {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 58px; padding: 11px 14px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--ios-radius); color: var(--text);
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.partner:active { opacity: 0.65; }

.partner.is-active {
  background: var(--partner, var(--brand-600));
  border-color: var(--partner, var(--brand-600));
  color: #fff;
}

/* ─── Logo / wordmark ────────────────────────────────────────────────── */

.partner-mark {
  flex: none; width: 88px; height: 30px;
  display: grid; place-items: center; overflow: hidden;
}
.partner-logo { max-height: 30px; max-width: 100%; object-fit: contain; }

/* Logo yuklanmaguncha nom o'z brend rangida turadi; tanlanganda fon
   allaqachon o'sha rang, shuning uchun matn oqqa o'tadi */
.partner-wordmark {
  font-family: var(--display); font-size: 14px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--partner, var(--brand-600));
  line-height: 1.1; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.partner.is-active .partner-wordmark { color: #fff; }

/* ─── Matn qismi ─────────────────────────────────────────────────────── */

.partner-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.partner-name { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.partner-note {
  font-size: 11.5px; line-height: 1.3; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.partner.is-active .partner-note { color: rgba(255, 255, 255, 0.82); }

/* Tanlanganini rang bilan emas, belgi bilan ham bildiramiz */
.partner-check {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.partner.is-active .partner-check {
  background: #fff; border-color: #fff; color: var(--partner, var(--brand-600));
}

/* ─── Ishonch signallari (soxta reyting o'rniga) ─────────────────────── */

.trust-badges {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px;
}
.trust-badges li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--fill-tertiary); color: var(--text);
  font-size: 11.5px; font-weight: 500; line-height: 1.2;
}
.trust-badges li::before {
  content: '✓'; color: var(--ok); font-weight: 700; font-size: 11px;
}
.trust-badges li b { font-weight: 700; }

/* ─── Mahsulot galereyasi ────────────────────────────────────────────── */

.detail-gallery {
  display: flex; gap: 8px; margin-bottom: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: var(--ios-radius-lg);
  background:
    radial-gradient(120% 90% at 50% 105%, var(--tint, transparent) 0%, transparent 62%),
    #fff;
}
.detail-gallery::-webkit-scrollbar { display: none; }
.gallery-img {
  flex: 0 0 100%; height: 260px; scroll-snap-align: center;
  object-fit: contain; padding: 12px;
}
.gallery-dots {
  display: flex; justify-content: center; gap: 5px; margin-bottom: 18px;
}
.gallery-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--line); transition: background 0.14s ease;
}
.gallery-dot.is-on { background: var(--brand-600); }

/* ─── Buyurtmalarim ──────────────────────────────────────────────────── */

.order-card {
  background: var(--surface); border-radius: var(--ios-radius-lg);
  margin: 0 var(--pad) 12px; padding: 15px;
}
.order-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.order-code {
  font-family: var(--display); font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.order-date { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Holat rang bilan emas, chip shakli bilan ham kodlangan */
.order-status {
  flex: none; padding: 5px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.2;
  background: var(--fill-tertiary); color: var(--muted);
}
.order-status-new { background: var(--brand-soft); color: var(--brand-700); }
.order-status-contacted, .order-status-approved {
  background: var(--warn-soft); color: var(--warn);
}
.order-status-delivered {
  background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok);
}
.order-status-cancelled {
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger);
}
[data-theme='dark'] .order-status-new { color: #9DBBFF; }

.order-items {
  display: flex; flex-direction: column; gap: 7px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.order-items li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; font-size: 12.5px; line-height: 1.35;
}
.order-items li span { color: var(--muted); }
.order-items li strong {
  flex: none; font-family: var(--display); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.order-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.order-meta > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.order-meta dt { font-size: 12.5px; color: var(--muted); }
.order-meta dd {
  font-size: 12.5px; font-family: var(--display); font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right;
}

/* ─── Beshta navigatsiya elementi ────────────────────────────────────── */

.nav-item > span:last-child {
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 379px) {
  .nav-item { font-size: 9px; gap: 3px; }
}

/* ─── Harakatni kamaytirish ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}