/* Joylashuv: tepada yopishqoq menyu, kategoriyalar qatori, mahsulotlar to'ri;
   savat va admin panel o'ng tomondan chiqadigan panellar. */
:root {
  /* Ranglar — butun sayt faqat shu o'zgaruvchilardan foydalanadi */
  --bg: #EDEDED;        /* sahifa foni (siz tanlagan rang) */
  --surface: #FFFFFF;   /* kartochkalar va panellar foni */
  --fg: #16181D;        /* asosiy matn */
  --muted: #62666F;     /* ikkinchi darajali matn */
  --line: #D6D6D6;      /* chiziqlar */
  --field: #F5F5F5;     /* input maydonlari foni */
  --accent: #2446A6;    /* asosiy rang (ko'k) */
  --accent-fg: #FFFFFF; /* asosiy rang ustidagi matn */
  --sale: #B7770A;      /* chegirma belgisi */
  --danger: #B3261E;    /* o'chirish tugmasi, xatolar */
  --ok: #1E7A4C;
  --group: var(--accent);   /* guruhli xarid: asosiy ko'k */
  --yellow: #F2B53A;        /* guruh va chegirma: belgilar, progress, kunning guruhi (ustida to'q matn) */
  --live: #D62828;          /* faqat "jonli" va shoshilinch: efir, oxirgi soat taymeri, "yana 2 kishi" */

  /* Shriftlar */
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* yashirilgan narsalar hech qachon ko'rinmasin */
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
}
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- Yuqori menyu ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 12px; padding-block: 12px; }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--accent); white-space: nowrap; text-decoration: none; }
.search { flex: 1; min-width: 0; }
.search input {
  width: 100%; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--field); color: var(--fg); font: inherit;
}
.pill-btn {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 700; white-space: nowrap;
}
.pill-btn svg { width: 18px; height: 18px; flex: none; }
.cart-btn { border: 0; background: var(--accent); color: var(--accent-fg); }
.pill-btn .count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--accent-fg); color: var(--accent); font-size: 12px;
  display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
}

/* ---------- Banner slayder ---------- */
.slider { position: relative; margin-top: 20px; border-radius: 18px; overflow: hidden; background: var(--accent); }
.track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.slide {
  position: relative; flex: 0 0 100%; min-width: 0;
  height: clamp(200px, 34vw, 380px);
  display: flex; align-items: flex-end; padding: clamp(20px, 4vw, 44px);
  color: #fff; background: var(--accent); border: 0; text-align: left; font: inherit;
  cursor: default; overflow: hidden;
}
.slide.link { cursor: pointer; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .62), rgb(0 0 0 / .05) 65%); }
.slide:not(.has-img)::before { /* rasmsiz banner uchun bezak doiralar */
  content: ""; position: absolute; right: -8%; top: -30%; width: 55%; aspect-ratio: 1;
  border-radius: 50%; border: 44px solid rgb(255 255 255 / .09);
}
.slide .txt { position: relative; z-index: 1; max-width: 34ch; }
.slide h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 4.2vw, 40px);
  line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 8px; text-wrap: balance;
}
.slide p { margin: 0; font-size: clamp(14px, 1.6vw, 17px); opacity: .92; }
.slide .go { display: inline-block; margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--accent); font-weight: 700; font-size: 14px; }
.nav-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgb(255 255 255 / .85); color: #16181D; font-size: 20px; line-height: 1;
  display: grid; place-items: center;
}
.nav-arrow.prev { left: 12px; } .nav-arrow.next { right: 12px; }
.dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.dots button { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 0; background: rgb(255 255 255 / .5); transition: width .3s; }
.dots button[aria-current="true"] { width: 24px; background: #fff; }
@media (max-width: 560px) { .nav-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .track { transition: none; } }

.perks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.perks b { color: var(--fg); }

/* Til almashtirgich */
.lang { display: flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); }
.lang button { padding: 5px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: .04em; }
.lang button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }

/* Sevimlilar: yurakcha tugmasi */
.fav {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgb(255 255 255 / .92); color: var(--muted);
  display: grid; place-items: center; box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}
.thumb .fav svg { width: 20px; height: 20px; }
.fav[aria-pressed="true"] { color: var(--danger); }
.fav[aria-pressed="true"] svg path { fill: currentColor; }
.fav-btn .count { background: var(--field); color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .fav[aria-pressed="true"] svg { animation: pop .3s ease-out; }
  @keyframes pop { 50% { transform: scale(1.25); } }
}

/* Admin: bo'limlar (tablar) */
.tabs { display: flex; gap: 6px; padding: 12px 16px 0; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: none; white-space: nowrap; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 600; font-size: 14px; }
.tabs button[aria-selected="true"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }

/* ---------- Kategoriyalar ---------- */
.cats { display: flex; gap: 8px; overflow-x: auto; padding-block: 18px 6px; scrollbar-width: none; }
.cat {
  flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg); font-weight: 600; font-size: 14px;
}
.cat[aria-pressed="true"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }
.cat small { color: inherit; opacity: .6; margin-left: 4px; font-variant-numeric: tabular-nums; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 10px; color: var(--muted); font-size: 14px; }
.toolbar select { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; }

/* ---------- Mahsulotlar to'ri ---------- */
.grid {
  display: grid; gap: 14px; padding-bottom: 48px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}
@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-body { padding: 10px 10px 12px; }
  .price { font-size: 15px; }
  .add { padding: 9px 6px; font-size: 13px; }
}
.card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.thumb {
  position: relative; aspect-ratio: 3 / 4; max-width: 100%;
  display: grid; place-items: center; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
  overflow: hidden;
}
.thumb svg { width: 34%; height: auto; }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.badge {
  position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 6px;
  background: var(--sale); color: #fff; font-size: 12px; font-weight: 700;
}
.card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.card-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.card-name { font-weight: 700; margin: 0; line-height: 1.3; font-size: 15px; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: auto; padding-top: 8px; font-variant-numeric: tabular-nums; }
.price { font-weight: 800; font-size: 17px; }
.old { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.add {
  margin-top: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); font-weight: 700;
}
.add:hover, .add.in { background: var(--accent); color: var(--accent-fg); }
.empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--muted); }

/* ---------- Panellar (savat va admin) ---------- */
.shade { position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 20; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 21;
  width: min(420px, 100%); background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.drawer.wide { width: min(640px, 100%); }
.drawer > header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.drawer h2 { font-family: var(--font-display); font-size: 18px; margin: 0; }
.x { border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 8px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 16px 16px; }
.line { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.line-img {
  grid-row: span 2; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
}
.line-img img { width: 100%; height: 100%; object-fit: cover; }
.line-img svg { width: 58%; height: auto; }
.line-name { font-weight: 600; min-width: 0; }
.line-sum { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); color: var(--fg); }
.qty span { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.remove { border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; justify-self: end; }
.drawer-foot { padding: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer-foot:empty { display: none; }
.total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.primary { padding: 13px; border-radius: 12px; border: 0; background: var(--accent); color: var(--accent-fg); font-weight: 700; text-align: center; text-decoration: none; }
.primary:disabled { opacity: .5; cursor: wait; }
.ghost { padding: 11px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--fg); font-weight: 600; }

/* Formalar */
.form { display: grid; gap: 12px; padding-block: 8px; }
.form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form input, .form textarea, .form select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--field); color: var(--fg); font: inherit; font-size: 15px; min-width: 0;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.err { color: var(--danger); font-size: 13px; }
.note { color: var(--muted); font-size: 13px; }
.summary { white-space: pre-wrap; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 13px; }

/* Admin: rasm tanlash maydoni */
.dropzone {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center;
  padding: 12px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--field);
}
.dropzone.over { border-color: var(--accent); }
.preview {
  width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--surface);
  display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center;
}
.preview img { width: 100%; height: 100%; object-fit: cover; }
.dropzone .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.small-btn { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 600; font-size: 13px; }
.small-btn.danger { color: var(--danger); }
.small-btn.danger.armed { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Admin: mahsulotlar ro'yxati */
.admin-list { display: grid; gap: 0; margin-top: 8px; }
.admin-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding-block: 10px; border-bottom: 1px solid var(--line); }
.admin-item .mini { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
.admin-item .mini img { width: 100%; height: 100%; object-fit: cover; }
.admin-item .mini svg { width: 60%; }
.admin-item .meta { min-width: 0; }
.admin-item .meta b { display: block; overflow-wrap: anywhere; }
.admin-item .meta span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.admin-item .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.section-title { font-family: var(--font-display); font-size: 15px; margin: 20px 0 4px; }
.editing-flag { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); color: var(--accent); padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; }

/* ---------- Kartochka: bosiladigan joylar, tugagan holat ---------- */
.open-btn { all: unset; cursor: pointer; display: grid; place-items: center; width: 100%; height: 100%; }
.open-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.name-btn { all: unset; cursor: pointer; }
.name-btn:hover { text-decoration: underline; }
.badge.out { background: var(--fg); }
.card.out .thumb img, .card.out .thumb .open-btn > svg { opacity: .45; filter: grayscale(1); }
.add:disabled { border-color: var(--line); color: var(--muted); background: var(--field); cursor: not-allowed; }
.line.out { opacity: .55; }
.line-var { color: var(--muted); font-size: 13px; }
.line-warn { color: var(--danger); font-size: 12px; font-weight: 600; }

/* ---------- Mahsulot oynasi ---------- */
.modal {
  position: fixed; z-index: 22; left: 50%; top: 50%; translate: -50% -50%;
  width: min(900px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto;
  background: var(--surface); border-radius: 20px;
  display: grid; grid-template-columns: 1.1fr 1fr;
}
.modal .x { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--surface); border-radius: 50%; width: 38px; height: 38px; padding: 0; }
.gallery { padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.gallery .main {
  position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; color: var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
}
.gallery .main img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.gallery .slides { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery .slides::-webkit-scrollbar { display: none; }
.gallery .slides img { flex: 0 0 100%; scroll-snap-align: center; user-select: none; }
.g-nav { position: absolute; top: 50%; translate: 0 -50%; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: color-mix(in oklab, var(--surface) 88%, transparent); color: var(--fg); font-size: 24px; line-height: 1; box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
.g-nav.prev { left: 10px; } .g-nav.next { right: 10px; }
.g-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.g-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(0 0 0 / .25); transition: width .2s; }
.g-dots i.on { width: 16px; border-radius: 3px; background: var(--accent); }
@media (hover: none) { .g-nav { display: none; } }
.gallery .main > svg { width: 36%; }
.gallery .thumbs { display: flex; gap: 8px; overflow-x: auto; }
.gallery .thumbs button { flex: none; width: 54px; height: 72px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--field); }
.gallery .thumbs button[aria-current="true"] { border-color: var(--accent); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.highlights { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.highlights b { font-size: 14px; }
.highlights ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.highlights li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.4; }
.highlights li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.highlights li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; rotate: -45deg; }
.m-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.m-actions .ghost { flex: 1; }
.sections { display: grid; gap: 8px; }
.sections details { border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--surface); }
.sections summary { cursor: pointer; padding: 12px 0; font-family: var(--font-display); font-weight: 700; font-size: 15px; list-style: none; display: flex; justify-content: space-between; }
.sections summary::-webkit-details-marker { display: none; }
.sections summary::after { content: "+"; font-weight: 400; color: var(--muted); }
.sections details[open] summary::after { content: "−"; }
.sections details > :last-child { margin-bottom: 14px; }
.sections .desc { margin: 0; white-space: pre-line; line-height: 1.55; }
.specs { margin: 0; display: grid; }
.specs > div { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.specs > div:first-child { border-top: 0; }
.specs dt { color: var(--muted); } .specs dd { margin: 0; font-weight: 600; }
.info { padding: 28px 24px 24px 8px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.info h2 { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 26px); line-height: 1.15; margin: 0; letter-spacing: -0.01em; text-wrap: balance; padding-right: 36px; }
.info .price-row { margin: 0; padding: 0; }
.info .price { font-size: 24px; }
.info .desc { margin: 0; color: var(--fg); white-space: pre-line; max-width: 60ch; }
.opt-group { display: grid; gap: 8px; }
.opt-group > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { min-width: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 600; }
.opt[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--surface); }
.buy-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-top: 4px; }
.buy-row .qty button { width: 38px; height: 44px; }
.stock-out { padding: 10px 12px; border-radius: 10px; background: var(--field); font-weight: 700; }
@media (max-width: 720px) {
  .modal { grid-template-columns: 1fr; left: 0; right: 0; bottom: 0; top: auto; translate: none; width: 100%; max-height: 92%; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .info { padding: 0 16px 20px; }
}

/* ---------- Admin: qo'shimcha ---------- */
.imgs { display: flex; flex-wrap: wrap; gap: 8px; }
.imgs .tile { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--surface); padding: 0; }
.imgs .tile.main { border-color: var(--accent); }
.imgs .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imgs .tile .lbl { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; text-align: center; padding: 1px 0; }
.imgs .tile .rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .65); color: #fff; font-size: 14px; line-height: 1; padding: 0; }
.imgs .add-tile { width: 84px; height: 84px; border-radius: 10px; border: 1.5px dashed var(--line); background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.checks label { display: flex; align-items: center; gap: 8px; color: var(--fg); font-size: 14px; }
.checks input { width: 18px; height: 18px; padding: 0; accent-color: var(--accent); }
.tag { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--field); color: var(--muted); margin-left: 4px; }
.tag.red { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger); }
.admin-badge { background: var(--danger); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; margin-left: 2px; }

/* Admin: buyurtmalar */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.filters button { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 13px; font-weight: 600; }
.filters button[aria-pressed="true"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }
.order { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; margin-top: 10px; }
.order.st-yangi { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.order-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.order-head b { font-size: 16px; font-variant-numeric: tabular-nums; }
.order-head .when { color: var(--muted); font-size: 13px; margin-left: 6px; }
.order select { padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); color: var(--fg); font: inherit; font-size: 13px; font-weight: 600; }
.order .who { font-size: 14px; display: grid; gap: 2px; }
.order .who span { user-select: all; }
.order ul { margin: 0; padding-left: 18px; font-size: 14px; }
.order .sum { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill.yangi { background: var(--accent); color: #fff; }
.pill.qabul { background: color-mix(in oklab, var(--sale) 18%, var(--surface)); color: var(--sale); }
.pill.yolda { background: color-mix(in oklab, var(--accent) 14%, var(--surface)); color: var(--accent); }
.pill.tayyor { background: color-mix(in oklab, var(--ok) 15%, var(--surface)); color: var(--ok); }
.pill.yetkazildi { background: color-mix(in oklab, var(--ok) 15%, var(--surface)); color: var(--ok); }
.pill.guruh { background: var(--yellow); color: var(--fg); }
.pill.bekor { background: var(--field); color: var(--muted); }

/* ---------- Reyting, yetkazish sanasi, sharhlar ---------- */
.rating { font-size: 13px; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rating b { color: var(--fg); }
.card .rating b { color: var(--sale); }
.stars { color: var(--sale); letter-spacing: 1px; }
.stars .dim { color: var(--line); }
.ship-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, var(--ok) 9%, var(--surface)); color: var(--fg); font-size: 13px; line-height: 1.4; }
.ship-note svg { width: 20px; height: 20px; flex: none; color: var(--ok); margin-top: 1px; }
.modal-extra { grid-column: 1 / -1; padding: 0 24px 24px; min-width: 0; display: grid; gap: 10px; }
.sec-h { font-family: var(--font-display); font-size: 16px; margin: 14px 0 2px; }
.hrow { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.mini-card {
  flex: none; width: 150px; display: grid; gap: 4px; text-align: left; padding: 0 0 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--fg); overflow: hidden; font-size: 13px;
}
.mini-card .mini-img { aspect-ratio: 3 / 4; display: grid; place-items: center; color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); overflow: hidden; }
.mini-card .mini-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.mini-card .mini-img svg { width: 40%; }
.mini-card .mini-name, .mini-card b { padding-inline: 10px; }
.mini-card .mini-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-card b { font-variant-numeric: tabular-nums; }
.recent { padding-bottom: 40px; }
.reviews { display: grid; gap: 0; }
.review { padding-block: 12px; border-bottom: 1px solid var(--line); }
.review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.review p { margin: 6px 0 0; max-width: 65ch; overflow-wrap: anywhere; }
.review-form { max-width: 520px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 8px; }
.star-input { display: flex; gap: 4px; }
.star-input button { border: 0; background: none; font-size: 30px; line-height: 1; padding: 2px; color: var(--line); }
.star-input button.on { color: var(--sale); }
.tag.green { background: color-mix(in oklab, var(--ok) 14%, var(--surface)); color: var(--ok); }
.done-msg { color: var(--ok); font-weight: 700; font-size: 14px; }
fieldset.choice { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; display: grid; gap: 8px; }
fieldset.choice legend { font-size: 13px; font-weight: 700; color: var(--muted); padding: 0 4px; }
fieldset.choice label { display: flex; align-items: center; gap: 8px; color: var(--fg); font-size: 14px; font-weight: 600; }
fieldset.choice input { width: 18px; height: 18px; accent-color: var(--accent); padding: 0; }
fieldset.choice label.soon { color: var(--muted); cursor: not-allowed; }
fieldset.choice label.soon small { display: block; font-weight: 500; font-size: 12px; }
fieldset.choice .soon-tag { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--surface)); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
#drawerTabs { padding-bottom: 4px; }
@media (max-width: 720px) { .modal-extra { padding: 0 16px 20px; } }

.loc-box { display: grid; gap: 6px; }
.loc-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border-style: dashed; }
.loc-btn svg { width: 20px; height: 20px; color: var(--accent); }
.loc-ok { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, var(--ok) 9%, var(--surface)); font-size: 13px; }
.loc-ok svg { width: 20px; height: 20px; flex: none; color: var(--ok); }
.loc-ok a, .link-btn { color: var(--accent); font-weight: 700; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
footer.site { border-top: 1px solid var(--line); padding-block: 20px; color: var(--muted); font-size: 13px; }

@media (max-width: 640px) {
  .topbar .wrap { flex-wrap: wrap; gap: 8px; }
  .search { order: 3; flex-basis: 100%; }
  .logo { margin-right: auto; }
  .row2 { grid-template-columns: 1fr; }
  .pill-btn { padding: 8px 11px; }
  .hide-sm { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .drawer { animation: slide .22s ease-out; }
  @keyframes slide { from { transform: translateX(30px); opacity: .6; } }
}

/* ---------- Haqiqiy sayt uchun qo'shimchalar ---------- */
body { margin: 0; }
img { max-width: 100%; }
.price-from { font-weight: 600; font-size: 13px; color: var(--muted); }
.opt:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.stock-left { font-size: 13px; color: var(--sale); font-weight: 700; }
.contacts { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.contacts a { color: var(--fg); font-weight: 600; }
.site .wrap { display: grid; gap: 10px; }
.tg-link { display: inline-flex; align-items: center; gap: 6px; }
.banner-note { font-size: 13px; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 40;
  background: var(--fg); color: var(--surface); padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; max-width: calc(100% - 32px); }

/* ---------- Yetkazish va qaytarish ---------- */
.info-modal { display: block; width: min(640px, calc(100% - 32px)); }
.info-body { padding: 28px 24px 24px; display: grid; gap: 18px; }
.info-body h2 { font-family: var(--font-display); font-size: 22px; margin: 0; padding-right: 40px; }
.info-body section { display: grid; gap: 10px; }
.info-body h3 { margin: 0; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.info-body h3 svg { width: 20px; height: 20px; color: var(--accent); }
.info-body p, .info-body ul { margin: 0; line-height: 1.55; }
.info-body ul { padding-left: 20px; }
.info-body a { color: var(--accent); }
.trust { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 13px; font-weight: 500; }
.trust .more { margin-left: auto; color: var(--accent); font-weight: 700; white-space: nowrap; }
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 720px) { .info-modal { display: block; width: 100%; } .info-body { padding: 24px 16px calc(20px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Guruhli xarid ---------- */
.groups { padding: 4px 0 18px; }
.groups-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.groups-head .sec-h { margin: 0; }
.g-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.gtag { align-self: flex-start; font-size: 11px; font-weight: 800; color: var(--fg); background: var(--yellow); border-radius: 6px; padding: 2px 7px; }
.gbar { height: 8px; border-radius: 99px; background: var(--field); overflow: hidden; }
.gbar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .5s; }
.gmeta { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gmeta b { color: var(--fg); }

.gbox { display: grid; gap: 10px; padding: 14px; border-radius: 12px; border: 1.5px solid color-mix(in oklab, var(--accent) 35%, var(--line)); background: color-mix(in oklab, var(--accent) 5%, var(--surface)); }
.gbox-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gbox-h b { font-size: 15px; }
.gbox-h .gtimer { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gbox-h .gtimer b { font-size: 13px; color: var(--group); }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; }
.tiers li { display: grid; gap: 1px; padding: 7px 9px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tiers li b { color: var(--fg); font-size: 13px; }
.tiers li.done { border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
.tiers li.on { background: var(--group); border-color: var(--group); color: #fff; }
.tiers li.on b { color: #fff; }
.gnext { margin: 0; font-size: 14px; }
.gbox .note { margin: 0; }
.gbtns { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.gbtns .primary { background: var(--group); }
.tg-share { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 700; text-decoration: none; font-size: 14px; }
.tg-share svg { width: 18px; height: 18px; color: #229ED9; }
@media (max-width: 480px) { .gbtns { grid-template-columns: 1fr; } }

.line-group { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 800; color: var(--group); }
.order .gwait { font-size: 13px; color: var(--group); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Guruh kartochkasi (bosh sahifa va katalog) ---------- */
.gp-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.gp-card-img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: color-mix(in oklab, var(--accent) 7%, var(--surface)); color: var(--accent); overflow: hidden; border: 0; padding: 0; width: 100%; cursor: pointer; }
.gp-card-img img { width: 100%; height: 100%; object-fit: contain; }
.gp-card-img svg { width: 30%; }
.gp-off { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--yellow); color: var(--fg); font-size: 12px; font-weight: 800; }
.gp-off.abs { position: absolute; top: 10px; left: 10px; z-index: 1; }
.gp-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.gp-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.gp-card h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.gp-card h3 a, .gp-card h3 button { color: var(--fg); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.gp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.gp-price b { color: var(--accent); font-size: 18px; font-weight: 800; }
.gp-price s, .gp-day-price s { color: var(--muted); font-size: 12px; }
.gp-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gp-row b { color: var(--fg); }
.gp-bar { height: 6px; border-radius: 99px; background: var(--field); overflow: hidden; }
.gp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .5s; }
.gp-bar.yellow { background: rgb(255 255 255 / .22); height: 8px; }
.gp-bar.yellow i { background: var(--yellow); }
.gp-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.gp-card-foot .gp-chip { white-space: nowrap; }
.gp-chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--field); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gp-chip.dark { background: rgb(255 255 255 / .16); color: #fff; }
.gp-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; }
.gp-btn.sm { padding: 7px 14px; font-size: 13px; }
.gp-btn.solid { background: var(--accent); color: var(--accent-fg); }
.gp-btn.line { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.gp-btn.line:hover { background: var(--accent); color: var(--accent-fg); }
.gp-btn.white { background: #fff; color: var(--accent); }
.gp-btn.wide { width: 100%; }

/* Asosiy sahifadagi qator */
.groups .g-row .gp-card { flex: none; width: 270px; scroll-snap-align: start; }
.groups-head a { margin-left: auto; color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none; }

/* ---------- Bosh sahifa: guruhli xarid (index.html) ---------- */
.gp-top { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line); }
.gp-top .wrap { display: flex; align-items: center; gap: 18px; padding-block: 12px; }
.gp-top .logo { text-decoration: none; margin-right: auto; }
.gp-nav { display: flex; gap: 18px; }
.gp-nav a { color: var(--fg); text-decoration: none; font-weight: 600; font-size: 14px; }
.gp-nav a:hover { color: var(--accent); }
.gp-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; padding-block: 36px 28px; }
.gp-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--yellow); color: var(--fg); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gp-hero h1 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.03em; margin: 16px 0 14px; text-wrap: balance; }
.gp-lead { color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0; max-width: 52ch; }
.gp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 14px; }
.gp-small { color: var(--muted); font-size: 12px; margin: 0; }
.gp-day { display: grid; gap: 8px; padding: 18px; border-radius: 20px; background: var(--accent); color: #fff; }
.gp-day-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gp-eyebrow { color: var(--yellow); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gp-day-img { display: grid; place-items: center; aspect-ratio: 16 / 7; border-radius: 14px; background: #fff; overflow: hidden; margin: 4px 0 6px; }
.gp-day-img img { width: 100%; height: 100%; object-fit: contain; }
.gp-day-img svg { width: 18%; color: var(--accent); }
.gp-day .gp-cat { color: rgb(255 255 255 / .72); }
.gp-day-name { font-family: var(--font-display); font-size: 20px; margin: 0; }
.gp-day-price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-variant-numeric: tabular-nums; }
.gp-day-price b { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 34px); }
.gp-day-price s { color: rgb(255 255 255 / .7); font-size: 14px; }
.gp-day .gp-row { color: rgb(255 255 255 / .85); }
.gp-day .gp-row b { color: #fff; }
.gp-next { margin: 0; font-size: 13px; color: rgb(255 255 255 / .9); }
.gp-day .gp-btn { margin-top: 6px; }
.gp-sec { padding-block: 26px; }
.gp-h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; margin: 0 0 16px; }
.gp-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; }
.gp-sec-head .gp-h2 { margin: 0; }
.gp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gp-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.gp-steps b { font-family: var(--font-display); font-size: 26px; color: var(--accent); }
.gp-steps h3 { margin: 8px 0 6px; font-size: 15px; }
.gp-steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.gp-empty { grid-column: 1 / -1; padding: 36px 16px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.gp-tiers-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.gp-chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.gp-chart ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.gp-chart li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.gp-tbar { height: 22px; border-radius: 6px; background: var(--field); overflow: hidden; }
.gp-tbar i { display: block; height: 100%; border-radius: 6px; background: var(--line); }
.gp-chart li.on .gp-tbar i { background: var(--accent); }
.gp-chart li.on b { color: var(--accent); }
.gp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-block: 10px 26px; }
.gp-trust div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.gp-trust h3 { margin: 0 0 6px; font-size: 15px; }
.gp-trust p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.gp-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; padding: 28px 32px; border-radius: 20px; background: var(--accent); color: #fff; margin-bottom: 36px; }
.gp-cta h2 { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 28px); line-height: 1.15; margin: 0 0 8px; max-width: 22ch; }
.gp-cta p { margin: 0; opacity: .9; }
.gp-foot { border-top: 1px solid var(--line); padding-block: 18px; color: var(--muted); font-size: 13px; }
.gp-foot .wrap { display: flex; justify-content: space-between; gap: 12px; }
.gp-foot a { color: var(--muted); }
html:has(body.gp) { scroll-behavior: smooth; scroll-padding-top: 70px; }
@media (max-width: 900px) {
  .gp-hero, .gp-tiers-sec { grid-template-columns: 1fr; }
  .gp-steps { grid-template-columns: repeat(2, 1fr); }
  .gp-trust { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gp-nav { display: none; }
  .gp-top .wrap { gap: 10px; }
  .gp-hero { padding-top: 22px; }
  .gp-steps { grid-template-columns: 1fr; }
  .gp-cta { padding: 22px; }
  .gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gp-card-body { padding: 10px; }
  .gp-price b { font-size: 15px; }
  .gp-card-foot .gp-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html:has(body.gp) { scroll-behavior: auto; } }

/* ---------- Bosh sahifa: katta guruhli xarid bloki ---------- */
.groups { padding: 22px 0 18px; }
.gbig { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center; padding: clamp(20px, 3.5vw, 36px); border-radius: 22px; color: #fff;
  background: radial-gradient(circle at 12% 0%, color-mix(in oklab, var(--accent) 70%, #fff) 0, transparent 55%), var(--accent); margin-bottom: 20px; }
.gbig-h { font-family: var(--font-display); font-size: clamp(28px, 4.4vw, 46px); line-height: 1.05; letter-spacing: -0.03em; margin: 14px 0 12px; text-wrap: balance; }
.gbig-txt > p { margin: 0; font-size: 16px; line-height: 1.55; opacity: .92; max-width: 46ch; }
.gbig .gp-actions { margin: 20px 0 12px; }
.gbig-note { font-size: 12px !important; opacity: .75 !important; }
.gp-btn.ghostw { border-color: rgb(255 255 255 / .6); color: #fff; background: transparent; }
.gp-btn.ghostw:hover { background: rgb(255 255 255 / .12); }
.gbig .gp-day { background: var(--surface); color: var(--fg); box-shadow: 0 12px 30px rgb(0 0 0 / .18); }
.gbig .gp-day .gp-cat { color: var(--muted); }
.gbig .gp-day .gp-row { color: var(--muted); }
.gbig .gp-day .gp-row b { color: var(--fg); }
.gbig .gp-day .gp-next { color: var(--fg); }
.gbig .gp-day-price b { color: var(--accent); }
.gbig .gp-day-price s { color: var(--muted); }
.gbig .gp-day .gp-chip.dark { background: var(--field); color: var(--fg); }
.gbig .gp-day .gp-eyebrow { color: var(--accent); }
.gbig .gp-day-img { background: color-mix(in oklab, var(--accent) 7%, var(--surface)); border: 0; padding: 0; cursor: pointer; color: var(--accent); }
.gbig .gp-day-img svg { width: 22%; }
.gbig .gp-bar.yellow { background: var(--field); }
.gbig .gp-btn.white { background: var(--accent); color: var(--accent-fg); }
.gp-day-img { border: 0; padding: 0; }
@media (max-width: 860px) { .gbig { grid-template-columns: 1fr; } }

/* Yuqori menyudagi "Guruhli xarid" tugmasi */
.grp-btn { background: var(--yellow); border-color: var(--yellow); color: var(--fg); text-decoration: none; }

/* Banner slayderidagi guruh reklamasi */
.gslide { background: linear-gradient(110deg, var(--accent) 55%, color-mix(in oklab, var(--accent) 75%, #000)); align-items: center; }
.gslide .txt { max-width: min(52%, 34ch); }
.gslide-tag { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: var(--yellow); color: var(--fg); font-size: 12px; font-weight: 800; }
.gslide .go { background: var(--yellow); color: var(--fg); }
.gslide-img { position: absolute; right: clamp(16px, 5vw, 60px); top: 50%; translate: 0 -50%; width: clamp(130px, 30vw, 320px); aspect-ratio: 1; border-radius: 22px; background: #fff; overflow: hidden; display: grid; place-items: center; color: var(--accent); box-shadow: 0 14px 34px rgb(0 0 0 / .25); }
.gslide-img img { width: 100%; height: 100%; object-fit: contain; }
.gslide-img svg { width: 40%; }
@media (max-width: 560px) {
  .gslide .txt { max-width: 62%; }
  .gslide h2 { font-size: 20px; }
  .gslide p { font-size: 13px; }
  .gslide-img { width: 34%; right: 12px; border-radius: 14px; }
}

@media (max-width: 640px) {
  .topbar .wrap { gap: 6px; }
  .topbar .pill-btn { padding: 8px 9px; }
  .lang button { padding: 5px 7px; }
  .gslide .go { margin-top: 10px; }
  .slider .dots { bottom: 6px; }
}

/* ---------- Jonli: lenta, efir, narx tushishi ---------- */
.gp-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 14px; margin-bottom: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.gp-livedot { display: inline-flex; align-items: center; gap: 6px; color: var(--live); }
.gp-livedot i, .gp-efir-tag i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gp-live-feed { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .gp-livedot i, .gp-efir.on .gp-efir-tag i { animation: puls 1.4s ease-in-out infinite; }
  @keyframes puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
  .drop b { animation: tush 1.6s ease-out; }
  @keyframes tush { 0% { color: var(--ok); transform: scale(1.12); } 100% { transform: none; } }
}
.gp-efir { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding: 18px 22px; margin: 6px 0 4px; border-radius: 16px; background: var(--fg); color: #fff; }
.gp-efir.on { background: linear-gradient(110deg, var(--live), color-mix(in oklab, var(--live) 55%, #000)); }
.gp-efir-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gp-efir-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--live); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gp-efir.on .gp-efir-tag { background: #fff; color: var(--live); }
.gp-efir-when { font-family: var(--font-display); font-size: clamp(17px, 2.2vw, 22px); }
.gp-efir p { margin: 4px 0 0; font-size: 13px; opacity: .85; max-width: 60ch; }
.gp-efir-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gp-efir-g { display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; background: rgb(255 255 255 / .12); color: #fff; text-decoration: none; font-size: 12px; font-variant-numeric: tabular-nums; }
.gp-efir-g > b { font-size: 16px; color: var(--yellow); }
.gp-btn.yellow { background: var(--yellow); color: var(--fg); }

/* Taklif ("Do'stlaringizni chaqiring") */
.refbox { display: grid; gap: 8px; margin-top: 12px; padding: 14px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--line)); }
.refbox p { margin: 0; font-size: 13px; color: var(--muted); }
.refbox .refcount { color: var(--ok); font-weight: 700; }
.refacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.refacts .ghost { padding: 10px; }

/* Katalog kartochkasidagi guruh belgisi */
.g-hint { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--accent); }

/* ---------- Shoshilinch holat (qizil): oxirgi soat, oz odam qoldi ---------- */
.urgent { color: var(--live) !important; }
.gp-chip.urgent, .gtimer.urgent b { background: color-mix(in oklab, var(--live) 12%, var(--surface)); color: var(--live); }
.gp-day .gp-chip.dark.urgent, .gbig .gp-day .gp-chip.dark.urgent { background: var(--live); color: #fff !important; }
.gwait.urgent { font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  .gp-chip.urgent { animation: shosh 1.2s ease-in-out infinite; }
  @keyframes shosh { 50% { opacity: .65; } }
}

/* Bosh sahifadagi slayder: Telegram ichida va telefonda yuqorida */
body.gp .slider { margin-top: 16px; }
@media (max-width: 640px) { body.gp .slider .slide { height: 230px; padding-bottom: 30px; } }

/* ---------- Mijoz o'zi ochadigan guruh ("Do'st bilan arzon") ---------- */
.dbox { display: grid; gap: 10px; padding: 14px; border-radius: 12px; border: 1.5px dashed color-mix(in oklab, var(--yellow) 70%, var(--line)); background: color-mix(in oklab, var(--yellow) 9%, var(--surface)); }
.dbox-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dbox-h b { font-size: 15px; }
.dbox-pr { font-weight: 800; color: var(--fg); }
.dbox-pr s { font-weight: 500; color: var(--muted); font-size: 13px; margin-left: 4px; }
.dbox .note, .dbox-l, .dbox-gone { margin: 0; font-size: 13px; }
.dbox-l { font-weight: 700; }
.dbox-gone { padding: 8px 10px; border-radius: 10px; background: var(--surface); color: var(--muted); }
.drows { display: grid; gap: 8px; }
.drow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.drow.hl { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent); }
.drow small { color: var(--muted); font-variant-numeric: tabular-nums; }
.dav { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; }
.primary.sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.dbtn { border: 1.5px solid var(--fg); background: var(--yellow); color: var(--fg); font-weight: 800; padding: 12px; border-radius: 12px; }

/* ---------- Shior bannerlari ---------- */
.slide.shior { align-items: center; }
.slide.shior .txt { max-width: min(62%, 36ch); }
.slide.shior h2 { font-size: clamp(24px, 4.2vw, 44px); line-height: 1.05; letter-spacing: -.02em; }
.slide.shior .go { background: var(--yellow); color: var(--fg); }
.shior-1 { background: linear-gradient(115deg, var(--accent) 55%, color-mix(in oklab, var(--accent) 70%, #000)); }
.shior-2 { background: var(--yellow); color: var(--fg); }
.shior-2 .go { background: var(--fg) !important; color: #fff !important; }
.shior-3 { background: linear-gradient(115deg, #13254F 50%, var(--accent)); }
.slide.shior:not(.has-img)::before { opacity: .5; }
.shior-ik { position: absolute; right: clamp(16px, 6vw, 70px); top: 50%; translate: 0 -50%; font-size: clamp(64px, 12vw, 150px); line-height: 1; filter: drop-shadow(0 10px 20px rgb(0 0 0 / .2)); }
@media (max-width: 640px) {
  .slide.shior .txt { max-width: 70%; }
  .slide.shior h2 { font-size: 24px; }
  .slide.shior p { font-size: 13px; }
  .shior-ik { font-size: 60px; right: 12px; }
}

/* Bosh sahifa: mijozlar ochgan guruhlar */
.ds-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ds-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; }
.ds-card .ds-img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #fff; display: grid; place-items: center; color: var(--accent); }
.ds-card .ds-img img { width: 100%; height: 100%; object-fit: contain; }
.ds-card .ds-img svg { width: 60%; }
.ds-card b.n { display: block; font-size: 14px; line-height: 1.25; }
.ds-card small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ds-card .ds-go { display: inline-block; margin-top: 4px; font-weight: 800; color: var(--accent); font-size: 13px; }
.gp-empty .gp-btn { margin-top: 12px; }
/* Strelkalar ko'rinadigan ekranlarda matn va rasm ularning tagida qolmasin */
@media (min-width: 561px) {
  .slide { padding-left: max(68px, clamp(20px, 4vw, 44px)); padding-right: max(68px, clamp(20px, 4vw, 44px)); }
  .shior-ik, .gslide-img { right: max(68px, clamp(16px, 5vw, 60px)); }
}

/* Telegram'dan raqam olish tugmasi */
.tg-phone { margin-top: -4px; padding: 10px; border-radius: 12px; font-weight: 700; color: #229ED9; border-color: color-mix(in oklab, #229ED9 40%, var(--line)); }

/* Admin: saytda ko'rsatish */
.k-kor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border-left: 4px solid var(--muted); }
.k-kor.on { border-left-color: var(--ok, #1a7f37); }
.tag.hid { background: #fde8e8; color: #9b1c1c; }

/* Tugagan tovar: ijobiy yozuv va "Kelganda xabar bering" */
.soldout { display: grid; gap: 6px; padding: 14px; border-radius: 12px; background: color-mix(in oklab, var(--yellow) 14%, var(--surface)); border: 1px solid color-mix(in oklab, var(--yellow) 55%, var(--line)); }
.soldout b { font-size: 15px; }
.soldout span { font-size: 14px; color: var(--muted); }
.soldout .done-msg { color: var(--ok, #1a7f37); font-weight: 700; }
.soldout .primary { margin-top: 4px; }
.badge.out { background: var(--yellow); color: var(--fg); }
.card.out .add.notify { opacity: 1; cursor: pointer; }

/* Viloyat: pochta va oldindan to'lov */
.ship-note.post { background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
.paybox { display: grid; gap: 8px; margin: 10px 0; padding: 14px; border-radius: 12px; border: 1.5px solid var(--accent); background: color-mix(in oklab, var(--accent) 5%, var(--surface)); }
.paybox p { margin: 0; font-size: 13px; }
.payrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.payrow > span { color: var(--muted); min-width: 52px; }
.payrow .card-no { font-size: 17px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ghost.sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.pill.tolov { background: #fff4d6; color: #8a5a00; }

/* "Bu hafta N kishi buyurtma qildi" */
.week-buy { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #B7770A; }

/* Bosh sahifa: Mening guruhlarim */
.men-guruh { margin-top: 16px; padding: 14px; border-radius: 16px; background: color-mix(in oklab, var(--yellow) 16%, var(--surface)); border: 1px solid color-mix(in oklab, var(--yellow) 55%, var(--line)); }
.mg-h { margin: 0 0 10px; font-size: 16px; }
.mg-list { display: grid; gap: 10px; }
.mg-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface); }
.mg-img { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #fff; display: grid; place-items: center; color: var(--accent); }
.mg-img img { width: 100%; height: 100%; object-fit: contain; } .mg-img svg { width: 60%; }
.mg-tx { display: grid; gap: 3px; font-size: 13px; min-width: 0; }
.mg-tx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-tx .gp-chip { justify-self: start; }
@media (max-width: 420px) { .mg-card { grid-template-columns: 48px 1fr; } .mg-card .gp-btn { grid-column: 1 / -1; } }

/* Admin hisobot */
.rep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rep-c { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.rep-c span { font-size: 12px; color: var(--muted); } .rep-c b { font-size: 20px; } .rep-c small { color: var(--muted); }
.rep-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.rep-bar { flex: 1; display: grid; grid-template-rows: 1fr auto; height: 100%; min-width: 0; }
.rep-bar i { align-self: end; display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--accent); }
.rep-bar span { font-size: 10px; text-align: center; color: var(--muted); }
.rep-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.rep-t th, .rep-t td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.rep-t td:nth-child(n+2), .rep-t th:nth-child(n+2) { text-align: right; }
#repPeriod [aria-pressed="true"] { background: var(--fg); color: #fff; }

/* ⭐ Yulduzchalar */
.ysbox { display: grid; gap: 8px; margin-bottom: 12px; padding: 14px; border-radius: 12px; background: color-mix(in oklab, var(--yellow) 16%, var(--surface)); border: 1px solid color-mix(in oklab, var(--yellow) 55%, var(--line)); }
.ysbox p { margin: 0; font-size: 13px; }
.ys-use { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 10px; background: color-mix(in oklab, var(--yellow) 14%, var(--surface)); font-weight: 700; font-size: 14px; }
.ys-use small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }

/* Saytdagi jonli efir: video + chat */
.gp-efir.live-full { display: grid; gap: 14px; }
.efir-live { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; }
.efir-video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.efir-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.efir-chat { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 0; max-height: 420px; padding: 10px; border-radius: 12px; background: rgb(0 0 0 / .22); }
.ec-list { overflow-y: auto; min-height: 140px; display: grid; align-content: start; gap: 6px; font-size: 14px; overscroll-behavior: contain; }
.ec-list p { margin: 0; line-height: 1.35; word-wrap: break-word; }
.ec-list b { color: var(--yellow); margin-right: 4px; }
.ec-list .ec-sys { font-size: 12px; opacity: .8; }
.ec-form { display: grid; gap: 6px; }
.ec-row { display: flex; gap: 6px; }
.ec-form input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 0; font: inherit; font-size: 14px; }
.ec-ism input { width: 100%; }
.ec-err { color: #fff; opacity: .9; min-height: 1em; }
@media (max-width: 760px) { .efir-live { grid-template-columns: 1fr; } .efir-chat { max-height: 340px; } }

.chat-a { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.chat-a .row-actions { margin-left: auto; gap: 10px; }
.link-btn.danger { color: #b42318; }
.gp-efir.live-full { grid-template-columns: minmax(0, 1fr); }
.gp-efir.live-full > *, .efir-live > *, .efir-chat > * { min-width: 0; }
@media (max-width: 760px) { .efir-live { grid-template-columns: minmax(0, 1fr); } .gp-efir.live-full { padding: 14px; } }
.ec-form input { box-sizing: border-box; } .ec-ism { display: block; }
.ec-form > *, .ec-row > * { min-width: 0; }

/* Oldindan buyurtma guruhi */
.badge.pre { background: var(--accent); color: #fff; }
.pre-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 8%, var(--surface)); font-size: 13px; }
.pre-box { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px dashed var(--accent); }
/* Admin: bo'limlar qatori telefonda ham to'liq ko'rinsin (yashirinib qolmasin) */
.admin-tabs { flex-wrap: wrap; overflow: visible; padding-left: 0; padding-right: 0; }

/* Bazarmart logotipi: gumbaz belgisi + nom (logotip ranglari: to'q ko'k #041A2B, to'q sariq) */
.logo { display: inline-flex; align-items: center; gap: 8px; color: #041A2B; font-weight: 800; }
.logo img { height: 24px; width: auto; display: block; }
@media (max-width: 380px) { .logo span { font-size: 18px; } }
.gp-btn .qisqa { display: none; }
@media (max-width: 480px) {
  .gp-btn .uzun { display: none; } .gp-btn .qisqa { display: inline; }
  .logo { gap: 6px; } .logo img { height: 20px; } .logo span { font-size: 18px; }
  /* Katalog sahifasida joy tor: faqat gumbaz belgisi (nomi bosh sahifada va sarlavhada bor) */
  .topbar .logo span { display: none; }
}

/* ---- Soddalashtirish (24.10) ---- */
/* Telegram kanal belgisi */
.tg-btn { color: #229ED9; padding-inline: 10px; }
.tg-btn svg { width: 24px; height: 24px; }
.gp-top .tg-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); }
.foot-tg, .efir-tg { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #229ED9; color: #fff; }
.foot-tg svg, .efir-tg svg { width: 26px; height: 26px; }
.gp-foot .wrap { align-items: center; }
/* Guruh banneri: nom 2 qatordan oshmaydi, narx alohida, tugma nuqtalarga tegmaydi */
.gslide .gs-nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.gslide .gs-narx { display: block; font-family: var(--font-display); font-size: clamp(18px, 2.6vw, 26px); color: var(--yellow); margin-bottom: 4px; }
.gslide p { margin: 0; }
.slider .slide { padding-bottom: 34px; }
@media (max-width: 640px) {
  .gslide .gs-nom { font-size: 18px; }
  .gslide .gs-narx { font-size: 17px; }
  .gslide p { font-size: 12px; }
  .gslide .go { margin-top: 8px; padding: 7px 12px; font-size: 13px; }
}
/* "Qanday ishlaydi" — 3 ta qisqa qadam bir qatorda */
.gp-how { padding-block: 8px 4px; }
.gp-steps3 { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gp-steps3 li { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 12px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 700; line-height: 1.25; }
.gp-steps3 b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; }
/* Admin: katta xato xabari */
.katta-xato { position: fixed; z-index: 100; top: 12px; left: 12px; right: 12px; margin-inline: auto; max-width: 560px; padding: 12px 16px; border-radius: 12px; background: #b42318; color: #fff; font-weight: 700; box-shadow: 0 10px 30px rgb(0 0 0 / .25); cursor: pointer; }

/* ---- 25.10: guruh narxi, taymer, telefon ko'rinishi ---- */
/* Guruh kartochkasi: hozirgi narx ustidan chizilgan, eng past narx — katta, qizil */
.gp-price2 { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.gp-price2 s { color: var(--muted); font-size: 13px; }
.gp-price2 b { color: var(--live); font-family: var(--font-display); font-size: 21px; line-height: 1.15; letter-spacing: -.01em; }
.mg-tx .gp-price2 b { font-size: 17px; }
/* Taymer — kattaroq, soniyalari kamayib turadi; oxirgi soatda qizil */
.gp-timer { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px; font-size: 14px; }
.gp-timer b { font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.gp-timer small { font-size: 12px; color: var(--muted); font-weight: 600; }
.gp-timer.urgent small { color: inherit; }
.gp-card-foot { flex-direction: column; align-items: stretch; }
.gp-card-foot .gp-timer { align-self: flex-start; }
.gp-card-foot .gp-btn { width: 100%; text-align: center; justify-content: center; }
/* Yolg'iz guruh — butun kenglikda, katta */
.gp-grid.yolgiz { grid-template-columns: 1fr !important; }
.gp-grid.yolgiz .gp-card-img { aspect-ratio: 16 / 10; }
.gp-grid.yolgiz h3 { font-size: 18px; }
.gp-grid.yolgiz .gp-price2 b { font-size: 26px; }
.groups .g-row.yolgiz .gp-card { width: 100%; }
@media (min-width: 760px) {
  .gp-grid.yolgiz .gp-card { flex-direction: row; }
  .gp-grid.yolgiz .gp-card-img { width: 50%; aspect-ratio: 4 / 3; }
  .gp-grid.yolgiz .gp-card-body { padding: 22px; gap: 10px; }
  .groups .g-row.yolgiz .gp-card { flex-direction: row; }
  .groups .g-row.yolgiz .gp-card-img { width: 45%; }
}
/* Yuklanayotganda — kulrang kartochka shakli */
.skel { pointer-events: none; padding-bottom: 14px; gap: 10px; display: flex; flex-direction: column; }
.skel i { display: block; border-radius: 8px; background: linear-gradient(90deg, var(--field) 25%, color-mix(in oklab, var(--field) 60%, #fff) 50%, var(--field) 75%); background-size: 200% 100%; animation: skel 1.3s linear infinite; }
.skel .sk-img { aspect-ratio: 4 / 3; border-radius: 0; }
.skel .sk-l { height: 14px; margin-inline: 12px; }
.skel .w60 { width: 60%; } .skel .w40 { width: 40%; height: 30px; border-radius: 999px; }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel i { animation: none; } }
.card.skel { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
/* Rasm ochilguncha — kulrang fon (oq bo'shliq ko'rinmasin) */
.gallery .slides, .thumb, .gp-card-img, .gslide-img, .shior-rasm { background-color: var(--field); }
/* Kartochka: narx va tugma doim pastda, bir tekisda */
.card-body .card-foot { margin-top: auto; display: grid; gap: 8px; }
.card-body .card-foot .price-row { margin-top: 0; padding-top: 6px; }
.card-cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.low-stock { font-size: 12px; font-weight: 700; color: var(--live); }
/* Banner bezagi: emoji o'rniga mahsulot rasmi yoki narx bosqichlari */
.shior-ik { display: none; }
.shior-rasm { position: absolute; right: clamp(16px, 6vw, 70px); top: 50%; translate: 0 -50%; width: clamp(110px, 28%, 260px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgb(0 0 0 / .25); }
.shior-rasm img { position: static !important; width: 100%; height: 100%; object-fit: cover; }
.shior-rasm b { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; border-radius: 8px; background: var(--live); color: #fff; font-size: 12px; text-align: center; line-height: 1.2; }
.shior-zina { position: absolute; right: clamp(16px, 6vw, 70px); bottom: 34px; top: 22px; width: clamp(130px, 32%, 300px); display: flex; align-items: flex-end; gap: 5px; margin: 0; padding: 0; list-style: none; }
.shior-zina li { flex: 1; height: var(--h); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 2px; padding-top: 6px; border-radius: 8px 8px 0 0; background: rgb(255 255 255 / .16); color: #fff; font-size: 10px; text-align: center; }
.shior-zina li:last-child { background: var(--yellow); color: var(--fg); }
.shior-zina b { font-size: 11px; font-variant-numeric: tabular-nums; }
.slide.shior.bezakli .txt { max-width: min(58%, 36ch); }
/* Banner nuqtalari: barmoq bilan bosiladigan o'lcham, tugmaga tegmaydi */
.dots { gap: 0; bottom: 4px; }
.dots button { position: relative; width: 26px; height: 26px; background: none !important; }
.dots button::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 8px; height: 8px; border-radius: 999px; background: rgb(255 255 255 / .5); transition: width .3s; }
.dots button[aria-current="true"]::after { width: 22px; background: #fff; }
.shior-2 .dots button::after { background: rgb(0 0 0 / .25); }
.slider .slide { padding-bottom: 40px; }
@media (max-width: 640px) {
  body.gp .slider .slide, .slider .slide { height: 244px; padding-bottom: 40px; }
  .slide.shior.bezakli .txt { max-width: 60%; }
  .slide.shior.bezakli h2 { font-size: 21px; }
  .shior-rasm { width: 34%; right: 12px; border-radius: 14px; }
  .shior-zina { width: 36%; right: 12px; top: 26px; bottom: 40px; }
  .shior-zina li { font-size: 9px; } .shior-zina b { font-size: 10px; }
  /* Tepa qism: bitta qator. Til — bitta tugma (boshqa tilga o'tish), Telegram belgisi — sahifa pastida */
  .topbar .tg-btn, .gp-top .tg-btn, .topbar .grp-btn { display: none; }
  .lang { padding: 0; border: 0; background: none; }
  .lang button[aria-pressed="true"] { display: none; }
  .lang button { min-width: 40px; height: 40px; padding: 0 8px !important; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 13px; }
  .topbar .pill-btn, .gp-top .gp-btn { min-height: 40px; }
  .fav-btn { min-width: 40px; justify-content: center; }
  .fav-btn .count.nol { display: none; }
  .topbar .wrap { padding-block: 10px; }
  .topbar .logo span { display: inline; }
  .logo span { font-size: 18px; }
  /* Pastga surganda qidiruv yashirinadi */
  .topbar.ixcham .search { display: none; }
  /* Pastdagi havolalar — bosish oson */
  .gp-foot a, footer.site a, .link-btn { display: inline-block; padding-block: 8px; }
}
@media (max-width: 359px) { .topbar .logo span { display: none; } .gp-top .logo span { font-size: 16px; } .gp-top .wrap { gap: 6px; } }
.shior-zina b { font-size: 14px; line-height: 1.1; }
.shior-zina small { font-size: 9px; opacity: .85; margin-top: -2px; }
.shior-zina span { margin-top: auto; padding-bottom: 6px; font-size: 9px; }
@media (max-width: 640px) { .shior-zina b { font-size: 12px; } }
/* Katalog tepasi: Unbounded shrifti keng — savat ikkinchi qatorga tushmasin */
@media (max-width: 420px) { .topbar .logo span { font-size: 15px; letter-spacing: -.03em; } .topbar .logo img { height: 18px; } .topbar .logo { gap: 5px; } }
/* Efir: guruh kartochkasi (oq quti ichida qizil narx) va ovoz tugmasi */
.gp-efir-g { gap: 6px; }
.gp-efir-g a { color: #fff; text-decoration: none; }
.gp-efir-g .gp-price2 { justify-self: start; padding: 4px 10px; border-radius: 10px; background: #fff; }
.gp-efir-g .gp-price2 b { font-size: 18px; }
.gp-efir-g .gp-btn { justify-self: stretch; text-align: center; background: var(--yellow); color: var(--fg); border-color: var(--yellow); }
.efir-ovoz { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 2; padding: 9px 14px; border: 0; border-radius: 999px; background: rgb(0 0 0 / .72); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.efir-ovoz[hidden] { display: none; }
main > #efir:first-child { margin-top: 16px; }
/* ---- 26.10: kabinet, promo, rozilik, kim qo'shildi, so'rov ---- */
.gp-acts { display: flex; gap: 8px; align-items: stretch; }
.gp-acts .gp-btn { flex: 1; }
.gp-share { display: inline-grid; place-items: center; flex: none; width: 42px; min-height: 38px; border-radius: 999px; background: #229ED9; color: #fff; }
.gp-share svg { width: 18px; height: 18px; }
.who-joined { font-size: 12px; color: var(--muted); }
.ask-btn { text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.promo-row { display: flex; gap: 8px; align-items: flex-end; }
.promo-row label { flex: 1; }
.promo-row input { text-transform: uppercase; }
.promo-row .ghost { flex: none; min-height: 42px; }
#promoMsg.err { color: var(--live); }
.rozi { display: flex !important; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); cursor: pointer; }
.rozi input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.kb-kir { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 14px 4px; }
.kb-kir h3 { margin: 0; font-family: var(--font-display); }
.kb-kir p { margin: 0; }
.kb-ik { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 12%, var(--surface)); font-size: 28px; flex: none; }
.tg-login { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; text-decoration: none; background: #229ED9 !important; border-color: #229ED9 !important; }
.tg-login svg { width: 20px; height: 20px; }
.kb-plus { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; font-size: 14px; }
.kb-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.kb-head .kb-ik { width: 46px; height: 46px; font-size: 22px; }
.kb-head b { display: block; font-size: 17px; }
.kb-tel { padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--yellow) 25%, var(--surface)); font-size: 13px; margin-bottom: 12px; }
.kb-tel a { color: var(--accent); font-weight: 700; }
.kb-h { font-size: 15px; margin: 16px 0 8px; }
.kb-g, .kb-o { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.kb-o { grid-template-columns: 1fr auto; align-items: center; }
.kb-g .tg-share { justify-self: start; }
.drawer .rozi { margin: 14px 0 10px; }
.kb-out { margin-top: 14px; color: var(--muted) !important; }
.nf-box { grid-column: 1 / -1; display: grid; gap: 8px; max-width: 460px; margin: 0 auto; padding: 16px; border-radius: 14px; background: var(--surface); border: 1px dashed var(--accent); }
.nf-box p { margin: 0; color: var(--muted); font-size: 14px; }
.nf-box textarea, .nf-box input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); font: inherit; color: var(--fg); }
.nf-ok { grid-column: 1 / -1; text-align: center; font-weight: 700; color: var(--ok, #1a7f37); }
.kab-btn { justify-content: center; }
@media (max-width: 640px) {
  .topbar .fav-btn { display: none; } /* sevimlilar — kategoriyalar qatorida va kabinetda bor */
  .kab-btn { min-width: 40px; padding-inline: 9px !important; }
  #drawerTabs button { font-size: 13px; padding-inline: 6px; }
}
/* Admin: mijozlar bo'limi */
#tClients .box { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
#tClients .admin-item { grid-template-columns: 1fr auto; }
#tClients select, #tClients input:not([type=checkbox]), #tClients textarea { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); font: inherit; color: var(--fg); }
#tClients label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.cl-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.cl-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.cl-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.cl-table a { color: var(--accent); }
/* Efir chat: guruh kartochkasi kattalashgani uchun — balandlik cheklovi faqat xabarlar ro'yxatida */
.efir-chat { max-height: none !important; grid-template-rows: auto auto auto; }
.ec-list { max-height: 260px; }
@media (max-width: 760px) { .ec-list { max-height: 200px; min-height: 110px; } }

/* Planshet / kichik noutbuk (641–1040px): tepadagi tugmalar sig'masdi — matnlarni yashirib, faqat ikonka qoldiramiz */
@media (min-width: 641px) and (max-width: 1040px) {
  .topbar .hide-sm { display: none; }
  .topbar .wrap { gap: 8px; }
  .topbar .pill-btn { padding-inline: 12px; }
  .gp-top .wrap { gap: 12px; }
  .gp-nav { gap: 12px; }
  .gp-nav a, .gp-top .gp-btn { white-space: nowrap; }
  .gp-top .gp-btn .uzun { display: none; }
  .gp-top .gp-btn .qisqa { display: inline; }
}
@media (min-width: 641px) and (max-width: 760px) { .gp-nav { display: none; } }

/* Mahsulot oynasi: "Savatda: N ta — Savatni ochish" */
.in-cart { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--ok, #1a7f37) 35%, transparent); background: color-mix(in oklab, var(--ok, #1a7f37) 8%, var(--surface)); color: var(--ok, #1a7f37); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.in-cart span { color: var(--accent); white-space: nowrap; }
/* Telefonda pastki panel: narx + "Savatga qo'shish" (asosiy tugma ekrandan pastda qolganda) */
.m-bar { display: none; }
@media (max-width: 720px) {
  .m-bar.show { display: flex; grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 3; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgb(0 0 0 / .08); }
  .m-bar .price { font-size: 20px; font-weight: 800; white-space: nowrap; }
  .m-bar .primary { flex: 1; max-width: 220px; min-height: 46px; }
}
/* Buyurtma formasida to'ldirilmagan maydon */
#drawer [aria-invalid="true"] { border-color: #d92d20 !important; box-shadow: 0 0 0 3px rgb(217 45 32 / .15); }
.gp-empty-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.gp-empty-btns .gp-btn { margin-top: 0; }

/* Bosh sahifa: do'kondagi mahsulotlar */
.gp-more { color: var(--accent); font-weight: 700; text-decoration: none; font-size: 15px; }
.gp-prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gp-prods .gp-card.skel { min-height: 240px; }
.gp-prod { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); text-decoration: none; min-width: 0; transition: border-color .15s; }
.gp-prod:hover { border-color: var(--accent); }
.gp-prod-img { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: var(--accent); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); }
.gp-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-prod-img svg { width: 44%; }
.gp-prod-nom { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gp-prod-narx { font-size: 16px; }
.gp-prod-yoq { color: #d92d20; font-weight: 700; font-size: 12px; }
@media (max-width: 900px) { .gp-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gp-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.gp-empty.ixcham { padding: 20px 16px; }
footer .foot-tg, .gp-foot .foot-tg { color: #fff; padding: 0; text-decoration: none; }
.k-narx-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.k-narx label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.k-narx input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); font: inherit; color: var(--fg); }
.k-narx .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .k-narx .row2 { grid-template-columns: 1fr; } }

/* Ranglar / dizaynlar */
.card-ranglar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.card-ranglar img, .card-ranglar i { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; border: 1px solid var(--line); display: block; background: var(--field); }
.card-ranglar small { color: var(--muted); font-size: 12px; margin-left: 2px; }
.rang-tanlov { display: grid; gap: 8px; margin-top: 4px; }
.rang-tanlov > span { font-size: 14px; color: var(--muted); }
.rang-tanlov > span b { color: var(--fg); }
.rang-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rang { display: grid; justify-items: center; gap: 4px; width: 72px; padding: 4px 4px 6px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: inherit; font-size: 11px; line-height: 1.2; color: var(--fg); cursor: pointer; }
.rang img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; display: block; }
.rang span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang[aria-pressed="true"] { border-color: var(--accent); }
.rang.yoq { opacity: .55; }
.rang.yoq img { filter: grayscale(.6); }
.k-rang .rg-row { display: grid; grid-template-columns: 48px minmax(0, 1.2fr) 1fr 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.k-rang .rg-row img, .k-rang .rg-bosh { width: 48px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--field); display: block; }
.k-rang .rg-nom { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.k-rang input, .k-rang select { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); font: inherit; color: var(--fg); }
.k-rang select { margin-top: 10px; }
.k-rang .rg-acts { display: flex; gap: 4px; }
@media (max-width: 640px) { .k-rang .rg-row { grid-template-columns: 48px 1fr auto; } .k-rang .rg-row input { grid-column: 2 / -1; } }
.rang .rang-bosh { width: 100%; aspect-ratio: 3 / 4; border-radius: 8px; background: var(--field); display: block; }
/* Admin: tashrif voronkasi */
.vor { display: grid; gap: 8px; }
.vor-r { display: grid; grid-template-columns: 140px 1fr 48px 130px; gap: 10px; align-items: center; font-size: 14px; }
.vor-b { height: 14px; border-radius: 7px; background: var(--field); overflow: hidden; }
.vor-b i { display: block; height: 100%; background: var(--accent); border-radius: 7px; }
.vor-r b { text-align: right; } .vor-r small { color: var(--muted); }
@media (max-width: 640px) { .vor-r { grid-template-columns: 110px 1fr 40px; } .vor-r small { display: none; } }