/*
 * Megastore — дизайн-система витрины. Две темы на CSS-переменных:
 * светлая по умолчанию, тёмная — класс .dark на <html> (переключатель в шапке, выбор в localStorage).
 * Цвета заданы RGB-тройками, чтобы Tailwind мог добавлять прозрачность: bg-primary/10.
 */
:root {
    --bg: 245 246 248;
    --surface: 255 255 255;
    --surface-2: 243 244 246;
    --surface-3: 233 235 239;
    --line: 229 231 235;
    --ink: 17 24 39;
    --ink-2: 55 65 81;
    --muted: 107 114 128;
    /* Фирменный фиолетовый из логотипа Megastore: #762D80 */
    --primary: 118 45 128;
    --primary-600: 96 34 105;
    --success: 34 197 94;
    --danger: 239 68 68;
    --warning: 234 122 12;
    --kaspi: 241 70 53;
    --star: 250 204 21;
    --shadow: 0 1px 2px rgb(16 24 40 / .04), 0 8px 24px -12px rgb(16 24 40 / .12);
    --shadow-lg: 0 24px 60px -20px rgb(16 24 40 / .28);
    color-scheme: light;
}
html.dark {
    --bg: 11 13 18;
    --surface: 19 22 28;
    --surface-2: 27 31 39;
    --surface-3: 36 41 51;
    --line: 38 43 53;
    --ink: 243 244 246;
    --ink-2: 209 213 219;
    --muted: 139 145 156;
    /* На тёмном фоне фирменный фиолетовый светлее, чтобы ссылки и кнопки читались */
    --primary: 168 85 181;
    --primary-600: 148 66 161;
    --shadow: 0 1px 0 rgb(255 255 255 / .02);
    --shadow-lg: 0 24px 60px -16px rgb(0 0 0 / .7);
    color-scheme: dark;
}

html { scroll-padding-top: 5.5rem; -webkit-tap-highlight-color: transparent; }
/* Компактнее на десктопе: все размеры в rem уменьшаются пропорционально.
   На телефонах 16px — иначе iOS увеличивает страницу при фокусе на поле ввода */
@media (min-width: 1024px) { html { font-size: 15px; } }
body { background: rgb(var(--bg)); color: rgb(var(--ink)); }
::selection { background: rgb(var(--primary) / .25); }
:focus-visible { outline: 2px solid rgb(var(--primary)); outline-offset: 2px; border-radius: 6px; }
/* Контейнер вместо tailwind container (отключён в конфиге): широкая сетка как у крупных маркетплейсов */
.container { width: 100%; max-width: 1560px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1280px) { .container { padding: 0 2.5rem; } }

/* ---------- Кнопки ---------- */
.btn, .btn-primary, .btn-accent, .btn-outline, .btn-ghost, .btn-kaspi, .btn-soft, .btn-success, .btn-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: 2.625rem; padding: 0 1rem; border-radius: .625rem;
    font-weight: 600; font-size: .875rem; white-space: nowrap; user-select: none;
    border: 1px solid transparent;
    transition: background-color .15s, border-color .15s, color .15s, opacity .15s, transform .1s;
}
.btn:active, .btn-primary:active, .btn-outline:active, .btn-kaspi:active, .btn-soft:active { transform: translateY(1px); }
.btn-primary { background: rgb(var(--primary)); color: #fff; }
.btn-primary:hover { background: rgb(var(--primary-600)); }
.btn-accent { background: rgb(var(--primary)); color: #fff; }
.btn-accent:hover { background: rgb(var(--primary-600)); }
.btn-success, [data-add-to-cart].is-added { background: rgb(var(--success)); color: #fff; }
.btn-outline { border-color: rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink)); }
.btn-outline:hover { border-color: rgb(var(--primary)); color: rgb(var(--primary)); }
.btn-ghost { color: rgb(var(--ink-2)); }
.btn-ghost:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
.btn-soft { background: rgb(var(--primary) / .1); border-color: rgb(var(--primary) / .35); color: rgb(var(--primary)); }
.btn-soft:hover { background: rgb(var(--primary) / .16); }
.btn-kaspi { background: rgb(var(--kaspi) / .1); border-color: rgb(var(--kaspi) / .45); color: rgb(var(--kaspi)); }
.btn-kaspi:hover { background: rgb(var(--kaspi) / .16); }
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1fb457; }
/* Оплата на сайте выключена: блок «Kaspi / WhatsApp» */
.buy-alt { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.buy-alt-lock {
    display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: .6rem;
    font-size: .75rem; color: rgb(var(--muted)); background: rgb(var(--surface-2)); border: 1px dashed rgb(var(--line));
}
.btn-primary:disabled, .btn-accent:disabled { opacity: .6; cursor: wait; }
.btn-sm { height: 2.25rem; padding: 0 .875rem; font-size: .8125rem; border-radius: .5rem; }
.btn-lg { height: 2.875rem; font-size: .9375rem; }
.icon-btn {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px;
    color: rgb(var(--ink-2)); transition: background-color .15s, color .15s;
}
.icon-btn:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }

/* Значок Kaspi в кнопке (без бренд-картинок — кружок в фирменном цвете) */
.kaspi-dot { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: rgb(var(--kaspi)); color: #fff; font-size: .7rem; font-weight: 800; }

/* ---------- Поля ---------- */
.field {
    width: 100%; height: 2.75rem; padding: 0 .875rem;
    border: 1px solid rgb(var(--line)); border-radius: .625rem;
    background: rgb(var(--surface)); color: rgb(var(--ink));
}
.field::placeholder { color: rgb(var(--muted)); }
.field:focus { outline: none; border-color: rgb(var(--primary)); box-shadow: 0 0 0 4px rgb(var(--primary) / .15); }
select.field { padding-right: 2rem; }

/* ---------- Карточки-поверхности, чипы, бейджи ---------- */
.surface { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 1rem; }
.chip {
    display: inline-flex; align-items: center; gap: .3rem; max-width: 100%;
    height: 1.625rem; padding: 0 .55rem; border-radius: 999px;
    border: 1px solid rgb(var(--line)); color: rgb(var(--ink-2));
    font-size: .75rem; font-weight: 500; white-space: nowrap; line-height: 1;
}
.chip > span { overflow: hidden; text-overflow: ellipsis; }
a.chip:hover, button.chip:hover { border-color: rgb(var(--primary)); color: rgb(var(--primary)); }
.chip-primary { border-color: rgb(var(--primary) / .45); color: rgb(var(--primary)); background: rgb(var(--primary) / .08); }
.chip-lg { height: 2rem; padding: 0 .75rem; font-size: .8125rem; }
.badge {
    display: inline-flex; align-items: center; gap: .25rem; height: 1.5rem; padding: 0 .55rem;
    border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; line-height: 1;
}
.badge-new { background: rgb(var(--primary)); }
.badge-sale { background: rgb(var(--danger)); }
.badge-hit { background: rgb(var(--warning)); }
.tag { display: inline-flex; padding: 2px 8px; border-radius: 999px; color: #fff; font-size: .7rem; font-weight: 700; }
.dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.muted { color: rgb(var(--muted)); }
.link { color: rgb(var(--primary)); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Шапка ---------- */
.topbar { background: rgb(var(--bg)); border-bottom: 1px solid rgb(var(--line)); color: rgb(var(--muted)); font-size: .8125rem; }
.topbar a:hover, .topbar button:hover { color: rgb(var(--ink)); }
.topbar-pill {
    display: inline-flex; align-items: center; gap: .375rem; height: 1.75rem; padding: 0 .65rem; border-radius: .5rem;
    border: 1px solid rgb(var(--primary) / .45); background: rgb(var(--primary) / .1); color: rgb(var(--primary)) !important; font-weight: 600;
}
.mainbar {
    position: sticky; top: 0; z-index: 40;
    background: rgb(var(--bg) / .92); border-bottom: 1px solid rgb(var(--line));
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
.logo-mark {
    display: grid; place-content: center; width: 2.875rem; height: 2.875rem; flex-shrink: 0;
    border: 2px solid rgb(var(--primary)); border-radius: .375rem; background: rgb(var(--surface));
    color: rgb(var(--primary)); font-weight: 800; font-size: .6rem; line-height: 1; letter-spacing: .03em;
}
.catalog-btn {
    display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1rem; border-radius: .625rem;
    background: rgb(var(--surface-2)); color: rgb(var(--ink)); font-weight: 600; transition: background-color .15s, color .15s;
}
.catalog-btn:hover { background: rgb(var(--surface-3)); }
.catalog-btn[aria-expanded="true"] { background: rgb(var(--primary)); color: #fff; }
.catalog-btn .ic-close { display: none; }
.catalog-btn[aria-expanded="true"] .ic-open { display: none; }
.catalog-btn[aria-expanded="true"] .ic-close { display: inline; }
.search-input {
    width: 100%; height: 2.75rem; padding: 0 1rem 0 2.75rem; border-radius: .625rem;
    background: rgb(var(--surface-2)); border: 1px solid rgb(var(--line)); color: rgb(var(--ink));
}
.search-input::placeholder { color: rgb(var(--muted)); }
.search-input:focus { outline: none; background: rgb(var(--surface)); border-color: rgb(var(--primary)); box-shadow: 0 0 0 4px rgb(var(--primary) / .15); }
.search-input::-webkit-search-cancel-button { display: none; }
.header-link {
    position: relative; display: inline-flex; align-items: center; gap: .45rem; height: 2.75rem; padding: 0 .5rem;
    color: rgb(var(--ink)); font-weight: 500; white-space: nowrap; border-radius: .5rem;
}
.header-link:hover { color: rgb(var(--primary)); }
.badge-count {
    position: absolute; top: -.35rem; right: -.45rem;
    min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px;
    background: rgb(var(--danger)); color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 1.2rem; text-align: center;
}
.header-link .badge-count { top: .15rem; left: 1.05rem; right: auto; }
.badge-count.bump { animation: bump .45s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ---------- Мега-меню ---------- */
.mega {
    position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 50;
    display: flex; height: min(640px, calc(100vh - 7rem));
    background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 1rem;
    box-shadow: var(--shadow-lg); overflow: hidden; animation: modal-in .16s ease-out;
}
/* Панель по ширине содержимого контейнера, а не его полей */
.container > .mega { left: 1rem; right: 1rem; }
@media (min-width: 640px) { .container > .mega { left: 1.5rem; right: 1.5rem; } }
@media (min-width: 1280px) { .container > .mega { left: 2.5rem; right: 2.5rem; } }
.mega-side { width: 20rem; flex-shrink: 0; overflow-y: auto; background: rgb(var(--surface-2)); padding: .5rem 0; scrollbar-width: thin; }
.mega-item {
    display: flex; align-items: center; gap: .75rem; padding: .625rem 1.25rem; font-size: .9375rem;
    color: rgb(var(--ink)); cursor: pointer;
}
.mega-item .chev { margin-left: auto; color: rgb(var(--muted)); flex-shrink: 0; }
.mega-item:hover, .mega-item.is-active { background: rgb(var(--surface)); }
.mega-item.is-active { font-weight: 600; }
.mega-main { flex: 1; min-width: 0; overflow-y: auto; padding: 1.5rem 2rem; scrollbar-width: thin; }
.mega-cols { columns: 2 16rem; column-gap: 2.5rem; }
.mega-group { break-inside: avoid; margin-bottom: 1.1rem; }
.mega-group > a { font-weight: 500; color: rgb(var(--ink)); }
.mega-group > a:hover, .mega-sub a:hover { color: rgb(var(--primary)); }
.mega-sub { margin-top: .3rem; display: flex; flex-direction: column; gap: .2rem; font-size: .8125rem; color: rgb(var(--muted)); }

/* ---------- Карточка товара ---------- */
.pcard {
    position: relative; display: flex; flex-direction: column; gap: .75rem; min-width: 0;
    padding: .625rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 1rem;
    transition: border-color .2s, box-shadow .2s;
}
.pcard:hover { border-color: rgb(var(--primary) / .45); box-shadow: var(--shadow-lg); }
.pcard-media { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: .75rem; background: #fff; overflow: hidden; }
.pcard-media img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; transition: transform .35s ease; }
.pcard:hover .pcard-media img { transform: scale(1.04); }
.pcard-badges { position: absolute; left: .5rem; top: .5rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; pointer-events: none; }
.pcard-actions { position: absolute; right: 1.125rem; top: 1.125rem; z-index: 3; display: flex; flex-direction: column; gap: .375rem; }
.round-btn {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px;
    background: rgb(17 24 39 / .82); color: #fff; border: 1px solid rgb(255 255 255 / .08);
    transition: background-color .15s, color .15s, transform .15s;
}
.round-btn:hover { background: rgb(17 24 39); transform: scale(1.06); }
.round-btn.is-fav, .round-btn.is-compared { background: rgb(var(--primary)); }
.pcard-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.6em; font-weight: 500; font-size: .875rem; line-height: 1.3; color: rgb(var(--ink));
}
.pcard-title:hover { color: rgb(var(--primary)); }
.pcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; }
.pcard-delivery { display: flex; align-items: flex-start; gap: .35rem; font-size: .75rem; line-height: 1.3; color: rgb(var(--primary)); min-height: 1rem; }
.pcard-delivery.is-local { color: rgb(22 163 74); }
html.dark .pcard-delivery.is-local { color: rgb(74 222 128); }
.pcard-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.price { font-weight: 700; font-size: 1.0625rem; color: rgb(var(--ink)); white-space: nowrap; letter-spacing: -.01em; }
.price-old { font-size: .8125rem; color: rgb(var(--muted)); text-decoration: line-through; white-space: nowrap; }
.rating { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; color: rgb(var(--ink-2)); white-space: nowrap; }
.rating svg { width: .875rem; height: .875rem; color: rgb(var(--star)); fill: rgb(var(--star)); }
.copy-sku { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: rgb(var(--muted)); white-space: nowrap; }
.copy-sku:hover { color: rgb(var(--primary)); }
@media (max-width: 479px) {
    .pcard { padding: .5rem; gap: .5rem; }
    .pcard-title { font-size: .8125rem; }
    .pcard-buy .btn-primary { width: 100%; }
    .price { font-size: 1rem; }
    .round-btn { width: 2rem; height: 2rem; }
    .pcard-actions { right: .875rem; top: .875rem; }
}

/* Сетки и карусели */
.grid-products { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px)  { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .grid-products.is-wide { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.product-carousel {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - .75rem) / 2); gap: .75rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .25rem 0 .5rem;
}
.product-carousel::-webkit-scrollbar { display: none; }
.product-carousel > * { scroll-snap-align: start; }
@media (min-width: 640px)  { .product-carousel { grid-auto-columns: calc((100% - 2 * .75rem) / 3); } }
@media (min-width: 1024px) { .product-carousel { grid-auto-columns: calc((100% - 3 * .75rem) / 4); } }
@media (min-width: 1280px) { .product-carousel { grid-auto-columns: calc((100% - 4 * .75rem) / 5); } }

.carousel-btn, .slider-btn {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px;
    background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); color: rgb(var(--ink));
}
.carousel-btn:hover, .slider-btn:hover { border-color: rgb(var(--primary)); color: rgb(var(--primary)); }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
@media (max-width: 639px) { .slider-btn { display: none; } }
.slider-dot { width: .5rem; height: .5rem; border-radius: 999px; background: rgb(255 255 255 / .55); transition: width .2s; }
.slider-dot.is-active { width: 1.5rem; background: #fff; }

.section { margin-top: 2.5rem; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-title { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: rgb(var(--ink)); }
@media (min-width: 1024px) { .section-title { font-size: 1.375rem; } }
.section-sub { font-size: .875rem; color: rgb(var(--muted)); margin-top: .125rem; }

/* ---------- Главная: hero и бренды ---------- */
.hero-slide { position: relative; display: flex; align-items: center; min-height: 15rem; padding: 2rem; color: #fff; overflow: hidden; }
@media (min-width: 1024px) { .hero-slide { min-height: 24rem; padding: 3rem; } }
.hero-slide::after {
    content: ''; position: absolute; right: -6rem; bottom: -8rem; width: 28rem; height: 28rem; border-radius: 999px;
    background: radial-gradient(circle, rgb(255 255 255 / .22), transparent 65%); pointer-events: none;
}
.brand-card {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 6.5rem; padding: 1.125rem 1.375rem; border-radius: 1rem; color: #fff; overflow: hidden;
    border: 1px solid rgb(255 255 255 / .14); transition: transform .2s, box-shadow .2s;
}
.brand-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.brand-card .brand-name { font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; line-height: 1; text-transform: uppercase; }
.cat-tile {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .75rem;
    min-height: 7.5rem; padding: 1rem 1.125rem; border-radius: 1rem;
    background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); transition: border-color .2s, transform .2s;
}
.cat-tile:hover { border-color: rgb(var(--primary) / .5); transform: translateY(-2px); }
.cat-tile .ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: rgb(var(--primary) / .1); color: rgb(var(--primary)); }
.perk { display: flex; align-items: center; gap: .875rem; padding: 1rem 1.125rem; border-radius: 1rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); }
.perk .ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; flex-shrink: 0; background: rgb(var(--primary) / .1); color: rgb(var(--primary)); }

/* ---------- Страница товара ---------- */
.gallery-main { position: relative; aspect-ratio: 1 / 1; background: #fff; border-radius: 1rem; overflow: hidden; cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; transition: transform .2s ease-out; }
.gallery-main img.is-zoomed { transform: scale(2); }
.gallery-counter {
    position: absolute; right: .75rem; bottom: .75rem; z-index: 2; padding: .2rem .55rem; border-radius: 999px;
    background: rgb(17 24 39 / .78); color: #fff; font-size: .75rem; font-weight: 600;
}
.gallery-thumb {
    width: 4.25rem; height: 4.25rem; flex-shrink: 0; padding: .25rem; border-radius: .625rem;
    background: #fff; border: 2px solid rgb(var(--line)); transition: border-color .15s;
}
.gallery-thumb:hover { border-color: rgb(var(--primary) / .5); }
.gallery-thumb.is-active { border-color: rgb(var(--primary)); }
.spec-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgb(var(--line)); font-size: .875rem; }
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { color: rgb(var(--muted)); }
.spec-row dd { color: rgb(var(--ink)); font-weight: 500; word-break: break-word; }
.qty-box { display: flex; align-items: center; height: 2.75rem; border: 1px solid rgb(var(--line)); border-radius: .625rem; background: rgb(var(--surface)); }
.qty-box button { width: 2.75rem; height: 100%; font-size: 1.125rem; color: rgb(var(--ink-2)); }
.qty-box button:hover { color: rgb(var(--primary)); }
.qty-box input { flex: 1; min-width: 2.5rem; width: 2.5rem; text-align: center; border: 0; outline: none; background: transparent; color: rgb(var(--ink)); font-weight: 600; -moz-appearance: textfield; }
.qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; }
.tabs-bar { display: flex; gap: 1.75rem; padding: 0 1.25rem; border-bottom: 1px solid rgb(var(--line)); overflow-x: auto; scrollbar-width: none; }
.tab-btn { position: relative; padding: 1rem 0; font-weight: 500; color: rgb(var(--muted)); white-space: nowrap; }
.tab-btn:hover { color: rgb(var(--ink)); }
.tab-btn.is-active { color: rgb(var(--ink)); font-weight: 600; }
.tab-btn.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: rgb(var(--primary)); }
.tab-btn .cnt { color: rgb(var(--muted)); font-weight: 400; font-size: .8125rem; margin-left: .2rem; }
.installment-opt { height: 2.25rem; border-radius: .5rem; border: 1px solid rgb(var(--line)); font-size: .8rem; font-weight: 600; color: rgb(var(--ink-2)); }
.installment-opt.is-active { border-color: rgb(var(--primary)); background: rgb(var(--primary) / .1); color: rgb(var(--primary)); }
.stock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .875rem 0; border-bottom: 1px solid rgb(var(--line)); }
.stock-row:last-child { border-bottom: 0; }
.stock-state { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.stock-state.yes { color: rgb(22 163 74); }
html.dark .stock-state.yes { color: rgb(74 222 128); }
.stock-state.no { color: rgb(var(--muted)); font-weight: 500; }
.prose-desc { line-height: 1.75; color: rgb(var(--ink-2)); white-space: pre-line; max-width: 52rem; }

/* ---------- Магазины и склады ---------- */
.stores-map { position: relative; height: 36rem; border-radius: 1rem; overflow: hidden; border: 1px solid rgb(var(--line)); background: rgb(var(--surface-2)); }
@media (max-width: 1023px) { .stores-map { height: 22rem; } }
.city-chip {
    display: inline-flex; align-items: center; gap: .4rem; height: 2.375rem; padding: 0 1rem; border-radius: 999px;
    border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink)); font-weight: 500; font-size: .875rem; white-space: nowrap;
    transition: border-color .15s, background-color .15s, color .15s;
}
.city-chip:hover { border-color: rgb(var(--primary)); color: rgb(var(--primary)); }
.city-chip.is-active { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: #fff; }
.city-chip .cnt { font-size: .75rem; opacity: .7; }
.store-card { padding: 1.125rem 1.25rem; border-radius: 1rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); transition: border-color .2s, box-shadow .2s; scroll-margin-top: 6rem; }
.store-card:hover, .store-card.is-active { border-color: rgb(var(--primary) / .6); }
.store-card.is-active { box-shadow: 0 0 0 3px rgb(var(--primary) / .15); }
.type-tag { display: inline-flex; align-items: center; gap: .3rem; height: 1.5rem; padding: 0 .55rem; border-radius: .375rem; font-size: .72rem; font-weight: 600; }
.type-store { background: rgb(var(--success) / .12); color: rgb(22 163 74); }
.type-pickup { background: rgb(var(--primary) / .12); color: rgb(var(--primary)); }
.type-warehouse { background: rgb(var(--muted) / .14); color: rgb(var(--ink-2)); }
.type-kbt { background: rgb(var(--warning) / .14); color: rgb(var(--warning)); }
html.dark .type-store { color: rgb(74 222 128); }
.store-pin { background: none !important; border: 0 !important; }
.store-pin > div {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px 999px 999px 0;
    transform: rotate(-45deg); background: rgb(var(--primary)); border: 3px solid #fff; box-shadow: 0 6px 16px -4px rgb(16 24 40 / .5);
}
.store-pin > div > b { transform: rotate(45deg); color: #fff; font: 700 12px/1 Inter, sans-serif; }
.store-pin.is-store > div { background: rgb(22 163 74); }
.store-pin.is-off > div { background: rgb(148 163 184); }
.store-pin.is-active > div { background: rgb(var(--kaspi)); }
.map-popup { font-family: Inter, system-ui, sans-serif; font-size: 13px; line-height: 1.45; color: #111827; min-width: 210px; }
.map-popup b { font-size: 14px; }
.map-popup a { color: #762d80; font-weight: 600; }
.site-logo { display: block; height: 1.75rem; width: auto; border-radius: .3rem; }
@media (min-width: 1024px) { .site-logo { height: 1.9rem; } }

/* Схема складов на главной */
.stores-map-panel {
    position: relative; display: grid; place-items: center; min-height: 17rem; padding: 1.5rem 1rem;
    background: radial-gradient(120% 90% at 70% 30%, rgb(var(--primary) / .1), transparent 70%), rgb(var(--surface-2));
}
.stores-map-svg { width: 100%; height: auto; max-height: 26rem; overflow: visible; }
.kz-stop-a { stop-color: rgb(var(--primary) / .16); }
.kz-stop-b { stop-color: rgb(var(--primary) / .32); }
.kz-shape { stroke: rgb(var(--primary) / .55); stroke-width: .8; stroke-linejoin: round; }
.kz-dot { fill: rgb(var(--primary) / .22); }
.kz-link { fill: none; stroke: rgb(var(--primary)); stroke-width: .9; stroke-dasharray: 3 3; opacity: .55; animation: kz-dash 1.6s linear infinite; }
@keyframes kz-dash { to { stroke-dashoffset: -12; } }
.kz-pin { fill: rgb(var(--primary)); stroke: #fff; stroke-width: 1.6; }
.kz-pulse { fill: rgb(var(--primary) / .25); transform-box: fill-box; transform-origin: center; animation: kz-pulse 2.4s ease-out infinite; }
@keyframes kz-pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.kz-label { fill: rgb(var(--surface)); stroke: rgb(var(--line)); stroke-width: .5; filter: drop-shadow(0 1.5px 2px rgb(16 24 40 / .12)); }
.kz-label-text { font: 600 6.6px Inter, system-ui, sans-serif; fill: rgb(var(--ink)); }
.kz-city { cursor: pointer; }
.kz-city:hover .kz-pin { fill: rgb(var(--kaspi)); }
.kz-city:hover .kz-label { stroke: rgb(var(--primary)); }
.kz-city:hover .kz-label-text { fill: rgb(var(--primary)); }

/* ---------- Футер ---------- */
.footer { margin-top: 2.5rem; border-top: 1px solid rgb(var(--line)); background: rgb(var(--bg)); }
.footer a { color: rgb(var(--muted)); }
.footer a:hover { color: rgb(var(--ink)); }
.footer h4 { color: rgb(var(--ink)); font-weight: 600; margin-bottom: .875rem; }
.stat-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; flex-shrink: 0; }
.chat-fab {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 45; display: grid; place-items: center;
    width: 3.5rem; height: 3.5rem; border-radius: 999px; background: rgb(var(--primary)); color: #fff;
    box-shadow: 0 12px 30px -8px rgb(var(--primary) / .7); transition: transform .2s, background-color .2s;
}
.chat-fab:hover { transform: scale(1.06); background: rgb(var(--primary-600)); }
@media (max-width: 1023px) { .chat-fab { bottom: calc(4.5rem + env(safe-area-inset-bottom)); right: 1rem; width: 3rem; height: 3rem; } }
body:has(.buy-bar) .chat-fab { display: none; }

/* ---------- Бегущая строка брендов ---------- */
.logo-ticker { overflow: hidden; padding: .5rem 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.logo-ticker:hover .ticker-track, .logo-ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-seq { display: flex; gap: .875rem; padding-right: .875rem; }
.logo-item {
    display: grid; place-items: center; flex-shrink: 0; width: 9.5rem; height: 4.75rem; padding: .875rem 1.25rem;
    background: #ececee; border-radius: .875rem; transition: transform .2s, background-color .2s;
}
.logo-item.is-wide { width: 11.5rem; }
.logo-item:hover { transform: translateY(-2px); background: #f4f4f5; }
.logo-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-wordmark { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: #1f2937; white-space: nowrap; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 639px) {
    .logo-item { width: 7.5rem; height: 3.75rem; padding: .625rem .875rem; }
    .logo-item.is-wide { width: 9rem; }
}

/* ---------- Модалки, шторки, тосты ---------- */
.modal-backdrop { position: absolute; inset: 0; background: rgb(3 7 18 / .6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal-dialog {
    position: relative; width: calc(100% - 2rem); max-width: 28rem; margin: 10vh auto 0; padding: 1.75rem;
    border-radius: 1.25rem; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); color: rgb(var(--ink));
    animation: modal-in .2s ease-out; box-shadow: var(--shadow-lg);
}
.modal-x { position: absolute; top: 1rem; right: 1rem; color: rgb(var(--muted)); }
.modal-x:hover { color: rgb(var(--ink)); }
.auth-tab { padding-bottom: .75rem; margin-bottom: -1px; font-weight: 600; color: rgb(var(--muted)); border-bottom: 2px solid transparent; }
.auth-tab.is-active { color: rgb(var(--primary)); border-color: rgb(var(--primary)); }
.drawer { background: rgb(var(--surface)); color: rgb(var(--ink)); }
.drawer-right { animation: drawer-right .25s ease-out; }
.drawer-left  { animation: drawer-left .25s ease-out; }
@keyframes modal-in     { from { opacity: 0; transform: translateY(10px); } }
@keyframes drawer-right { from { transform: translateX(100%); } }
@keyframes drawer-left  { from { transform: translateX(-100%); } }
body.no-scroll { overflow: hidden; }

/* ---------- ИИ-помощник ---------- */
.ai-btn {
    display: inline-flex; align-items: center; gap: .4rem; height: 2.75rem; padding: 0 .8rem; flex-shrink: 0;
    border-radius: .75rem; font-weight: 600; font-size: .875rem; color: rgb(var(--primary));
    background: linear-gradient(120deg, rgb(var(--primary) / .1), rgb(219 39 119 / .1));
    border: 1px solid rgb(var(--primary) / .2); transition: background-color .2s, box-shadow .2s, transform .2s;
}
.ai-btn:hover { box-shadow: 0 6px 18px -8px rgb(var(--primary) / .6); transform: translateY(-1px); }
.ai-btn svg { animation: ai-twinkle 2.8s ease-in-out infinite; }
@keyframes ai-twinkle { 50% { transform: scale(1.15) rotate(12deg); opacity: .75; } }
@media (max-width: 767px) { .ai-btn { width: 2.75rem; padding: 0; justify-content: center; } }

.ai-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgb(var(--line)); }
.ai-avatar {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .9rem; color: #fff; flex-shrink: 0;
    background: linear-gradient(135deg, #762D80, #c0379b);
}
.ai-log { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; background: #f8f7fa; }
.ai-msg { max-width: 88%; padding: .7rem .95rem; border-radius: 1rem; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.ai-msg.is-bot { align-self: flex-start; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-bottom-left-radius: .3rem; }
.ai-msg.is-user { align-self: flex-end; background: rgb(var(--primary)); color: #fff; border-bottom-right-radius: .3rem; }
.ai-msg.is-error { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.ai-msg.is-cards { max-width: 100%; width: 100%; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ai-msg.is-typing { display: inline-flex; gap: .3rem; padding: .9rem 1rem; }
.ai-msg.is-typing span { width: .45rem; height: .45rem; border-radius: 999px; background: rgb(var(--primary) / .55); animation: ai-dot 1s infinite ease-in-out; }
.ai-msg.is-typing span:nth-child(2) { animation-delay: .15s; }
.ai-msg.is-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 40% { transform: translateY(-4px); opacity: 1; } 0%, 80%, 100% { opacity: .4; } }
.ai-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ai-chips button {
    padding: .5rem .8rem; border-radius: 999px; font-size: .8rem; text-align: left; color: rgb(var(--primary));
    background: rgb(var(--surface)); border: 1px solid rgb(var(--primary) / .25); transition: background-color .15s;
}
.ai-chips button:hover { background: rgb(var(--primary) / .08); }
.ai-card {
    display: flex; align-items: center; gap: .75rem; padding: .6rem; border-radius: .9rem;
    background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); transition: border-color .15s, box-shadow .15s;
}
.ai-card:hover { border-color: rgb(var(--primary) / .35); box-shadow: 0 6px 18px -12px rgb(var(--primary) / .6); }
.ai-card-img { width: 3.75rem; height: 3.75rem; flex-shrink: 0; border-radius: .6rem; background: #fff; display: grid; place-items: center; overflow: hidden; }
.ai-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ai-card-title { font-size: .82rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ai-card-title:hover { color: rgb(var(--primary)); }
.ai-card-cart {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: .7rem;
    background: rgb(var(--primary) / .1); color: rgb(var(--primary)); transition: background-color .15s, color .15s;
}
.ai-card-cart:hover, .ai-card-cart.is-added { background: rgb(var(--primary)); color: #fff; }
.ai-form { display: flex; align-items: flex-end; gap: .5rem; padding: .85rem 1.25rem .5rem; border-top: 1px solid rgb(var(--line)); }
.ai-form textarea {
    flex: 1; resize: none; max-height: 8rem; overflow-y: auto; scrollbar-width: none; padding: .7rem .9rem; border-radius: .9rem; font-size: .9rem; line-height: 1.4;
    border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink)); outline: none;
}
.ai-form textarea:focus { border-color: rgb(var(--primary)); box-shadow: 0 0 0 3px rgb(var(--primary) / .15); }
.ai-send {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: .9rem;
    background: rgb(var(--primary)); color: #fff; transition: opacity .15s;
}
.ai-send:disabled { opacity: .5; }
.ai-note { padding: 0 1.25rem calc(.75rem + env(safe-area-inset-bottom)); font-size: 11px; color: rgb(var(--muted)); text-align: center; }
.toast {
    pointer-events: auto; display: flex; align-items: center; gap: .5rem; padding: .875rem 1.125rem; border-radius: .875rem;
    background: rgb(17 24 39); color: #fff; font-size: .875rem; box-shadow: var(--shadow-lg); animation: modal-in .2s ease-out;
}
html.dark .toast { background: rgb(var(--surface-3)); }
.toast.is-error { background: rgb(220 38 38); }

/* Избранное и сравнение */
.fav-inline:hover { color: rgb(var(--danger)); }
[data-favorite].is-fav { color: rgb(var(--danger)); }
.round-btn[data-favorite].is-fav { color: #fff; }
[data-favorite].is-fav svg { fill: currentColor; }
[data-compare].is-compared { color: rgb(var(--primary)); }
.round-btn[data-compare].is-compared { color: #fff; }
.installment-sticker {
    display: inline-flex; align-items: baseline; gap: .25rem; padding: .125rem .5rem; border-radius: .375rem;
    background: rgb(var(--star) / .2); color: rgb(161 98 7); font-size: .72rem; font-weight: 700;
}
html.dark .installment-sticker { color: rgb(253 224 71); }

/* Мгновенный поиск */
.search-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 60; max-height: 70vh; overflow-y: auto;
    background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 1rem; box-shadow: var(--shadow-lg);
}
.suggest-item { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem; color: rgb(var(--ink)); }
.suggest-item:hover, .suggest-item:focus { background: rgb(var(--surface-2)); outline: none; }
.suggest-item img { width: 3rem; height: 3rem; object-fit: contain; border-radius: .5rem; background: #fff; flex-shrink: 0; }
.suggest-cat { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 999px; background: rgb(var(--primary) / .1); color: rgb(var(--primary)); font-size: .8rem; font-weight: 500; }

/* Нижняя панель на мобильных */
.bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
    background: rgb(var(--surface) / .96); border-top: 1px solid rgb(var(--line)); padding-bottom: env(safe-area-inset-bottom);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bottom-bar > a, .bottom-bar > button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: 3.5rem; font-size: .68rem; color: rgb(var(--muted));
}
.bottom-bar > .is-active { color: rgb(var(--primary)); }
.bottom-bar .badge-count { top: .3rem; right: calc(50% - 1.3rem); }
.buy-bar {
    position: fixed; left: 0; right: 0; bottom: calc(3.5rem + env(safe-area-inset-bottom)); z-index: 44;
    display: flex; align-items: center; gap: .75rem; padding: .625rem 1rem;
    background: rgb(var(--surface)); border-top: 1px solid rgb(var(--line));
}
@media (max-width: 1023px) { body:has(.buy-bar) { padding-bottom: 8rem; } }

.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 999px; background: rgb(255 255 255 / .12); color: #fff;
}
.lightbox-nav:hover { background: rgb(255 255 255 / .25); }

.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 1.6rem; line-height: 1; color: rgb(var(--line)); cursor: pointer; transition: color .1s; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: rgb(var(--star)); }
.star-input input:focus-visible + label { outline: 2px solid rgb(var(--primary)); border-radius: 4px; }

/* Пагинация */
.page-link {
    display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .5rem; border-radius: .625rem;
    border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink)); font-size: .875rem;
}
a.page-link:hover { border-color: rgb(var(--primary)); color: rgb(var(--primary)); }
.page-link.is-active { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: #fff; }

/* Фильтры каталога */
.filters-panel { width: 16.5rem; flex-shrink: 0; background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 1rem; padding: 1.25rem; position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; scrollbar-width: thin; }
.filter-block { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgb(var(--line)); }
.filter-title { font-weight: 600; margin-bottom: .75rem; }
@media (max-width: 1023px) {
    .filters-panel { display: none; position: fixed; inset: 0; z-index: 60; width: 100%; max-height: none; border-radius: 0; }
    .filters-panel.is-open { display: block; animation: drawer-left .25s ease-out; }
}

/* Оформление заказа */
.checkout-step { display: flex; align-items: center; gap: .75rem; font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; }
.checkout-step span { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: rgb(var(--primary)); color: #fff; font-size: .875rem; }
.option-card { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border: 1px solid rgb(var(--line)); border-radius: .875rem; cursor: pointer; }
.option-card:has(input:checked) { border-color: rgb(var(--primary)); background: rgb(var(--primary) / .06); }
.option-card input { margin-top: .25rem; accent-color: rgb(var(--primary)); }
.option-card span { display: flex; flex-direction: column; }
.option-card small { color: rgb(var(--muted)); font-size: .8rem; margin-top: 2px; }

.prose-lite { color: rgb(var(--ink-2)); }
.prose-lite h2 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .5rem; color: rgb(var(--ink)); }
.prose-lite h2:first-child { margin-top: 0; }
.prose-lite p { margin: .5rem 0; line-height: 1.7; }
.prose-lite ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.prose-lite a { color: rgb(var(--primary)); }

/* Таблица сравнения */
.compare-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.compare-table th, .compare-table td { padding: .75rem 1rem; border-bottom: 1px solid rgb(var(--line)); text-align: left; vertical-align: top; font-size: .875rem; }
.compare-table th { position: sticky; left: 0; z-index: 1; background: rgb(var(--surface)); color: rgb(var(--muted)); font-weight: 500; min-width: 11rem; }
.compare-table td { min-width: 14rem; }
.compare-table tr.is-diff td { background: rgb(var(--primary) / .05); }

/* ---------- Совместимость старых страниц с тёмной темой ---------- */
html.dark .bg-white { background-color: rgb(var(--surface)) !important; }
html.dark .bg-slate-50, html.dark .bg-slate-100, html.dark .hover\:bg-slate-50:hover { background-color: rgb(var(--surface-2)) !important; }
html.dark .bg-brand-50, html.dark .hover\:bg-brand-50:hover { background-color: rgb(var(--primary) / .12) !important; }
html.dark .bg-amber-50 { background-color: rgb(var(--star) / .1) !important; }
html.dark .bg-emerald-50 { background-color: rgb(var(--success) / .1) !important; }
html.dark .bg-red-50 { background-color: rgb(var(--danger) / .1) !important; }
html.dark .text-slate-900, html.dark .text-slate-800 { color: rgb(var(--ink)) !important; }
html.dark .text-slate-700, html.dark .text-slate-600 { color: rgb(var(--ink-2)) !important; }
html.dark .text-slate-500, html.dark .text-slate-400 { color: rgb(var(--muted)) !important; }
html.dark .text-emerald-800 { color: rgb(134 239 172) !important; }
html.dark .border, html.dark .border-t, html.dark .border-b, html.dark .border-r, html.dark .border-l,
html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300 { border-color: rgb(var(--line)) !important; }
html.dark .divide-slate-100 > * + * { border-color: rgb(var(--line)) !important; }
html.dark .bg-slate-200 { background-color: rgb(var(--surface-3)) !important; }

@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .logo-ticker { overflow-x: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Доработки под Nemo: баннер с товаром, плитки брендов, верхняя полоса ---------- */
.topbar a, .topbar button, .topbar span { white-space: nowrap; }
.hero-product {
    position: relative; flex-shrink: 0; width: clamp(9rem, 26%, 15rem); aspect-ratio: 1 / 1;
    padding: .875rem; border-radius: 1.25rem; background: #fff;
    box-shadow: 0 20px 40px -18px rgb(0 0 0 / .45); transform: rotate(-3deg); transition: transform .3s;
}
.hero-slide:hover .hero-product { transform: rotate(0) scale(1.02); }
.hero-product img { width: 100%; height: 100%; object-fit: contain; }
.hero-product-price {
    position: absolute; left: 50%; bottom: -.875rem; transform: translateX(-50%); white-space: nowrap;
    padding: .375rem .875rem; border-radius: 999px; background: #111827; color: #fff; font-weight: 700; font-size: .875rem;
}
.logo-item { background: #fff; border: 1px solid rgb(var(--line)); width: 10rem; height: 5rem; }
.logo-item:hover { background: #fff; border-color: rgb(var(--primary) / .45); }
.logo-item.is-wide { width: 11.5rem; }
html.dark .logo-item { border-color: transparent; }
/* Белые логотипы на прозрачном фоне — плитка в фирменном цвете бренда */
.logo-item[title="Realme"], .logo-item[title="Realme"]:hover { background: #ffc915; }
@media (min-width: 640px) { .hero-slide { padding-left: 4.25rem; padding-right: 4.25rem; } }
/* Логотипы брендов: обрезаны по содержимому, вписываются по центру в одинаковую область */
.logo-item { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: .75rem 1.25rem; }
.logo-item img { display: block; width: auto; height: auto; max-width: 100%; max-height: 2.75rem; object-fit: contain; }

/* ---------- Продающие баннеры ---------- */
.hero-slide { overflow: hidden; }
.hero-kicker {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px;
    background: rgb(255 255 255 / .16); font-size: .72rem; font-weight: 600; letter-spacing: .02em;
}
.hero-perks { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.hero-perks li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: .625rem;
    background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .18); font-size: .8rem; white-space: nowrap;
}
.hero-perks b { font-size: 1rem; font-weight: 800; }
.hero-cta {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.5rem; height: 2.625rem; padding: 0 1.25rem;
    border-radius: .75rem; background: #fff; color: #111827; font-weight: 700; font-size: .875rem; transition: transform .2s;
}
.hero-slide:hover .hero-cta { transform: translateX(3px); }
.hero-watermark {
    position: absolute; right: -1rem; bottom: -2.5rem; font-size: 11rem; font-weight: 900; line-height: 1; letter-spacing: -.04em;
    color: rgb(255 255 255 / .07); pointer-events: none; user-select: none;
}
/* Рассрочка: карточка товара с платежом в месяц */
.hero-credit {
    position: relative; flex-shrink: 0; width: clamp(12rem, 30%, 16rem); padding: .75rem; border-radius: 1.25rem;
    background: #fff; color: #111827; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .55); transform: rotate(2deg); transition: transform .3s;
}
.hero-slide:hover .hero-credit { transform: rotate(0) translateY(-4px); }
.hero-credit-img { aspect-ratio: 4 / 3; border-radius: .875rem; background: #f6f6f8; padding: .5rem; }
.hero-credit-img img { width: 100%; height: 100%; object-fit: contain; }
.hero-credit-info { display: flex; flex-direction: column; gap: .15rem; padding: .625rem .25rem .125rem; }
.hero-credit-month { font-size: 1.6rem; font-weight: 800; color: #762d80; letter-spacing: -.02em; line-height: 1.1; }
.hero-credit-month small { font-size: .875rem; font-weight: 600; margin-left: .15rem; }
/* Раздел: веер из трёх товаров */
.hero-collage { position: relative; flex-shrink: 0; width: clamp(13rem, 36%, 20rem); aspect-ratio: 1.15 / 1; }
.hero-collage-card {
    position: absolute; display: block; width: 58%; aspect-ratio: 1 / 1; padding: .625rem; border-radius: 1.125rem;
    background: #fff; box-shadow: 0 24px 44px -20px rgb(0 0 0 / .55); transition: transform .35s;
}
.hero-collage-card img { width: 100%; height: 100%; object-fit: contain; }
.hero-collage-card.n0 { left: 21%; top: 4%; z-index: 3; }
.hero-collage-card.n1 { left: 0; top: 22%; z-index: 2; transform: rotate(-9deg) scale(.86); }
.hero-collage-card.n2 { right: 0; top: 22%; z-index: 1; transform: rotate(9deg) scale(.86); }
.hero-slide:hover .hero-collage-card.n1 { transform: rotate(-12deg) scale(.88) translateX(-6px); }
.hero-slide:hover .hero-collage-card.n2 { transform: rotate(12deg) scale(.88) translateX(6px); }
.hero-from {
    position: absolute; left: 50%; bottom: 0; z-index: 4; transform: translateX(-50%); white-space: nowrap;
    padding: .45rem 1rem; border-radius: 999px; background: #111827; color: #fff; font-weight: 800; font-size: .95rem;
    box-shadow: 0 10px 24px -10px rgb(0 0 0 / .6);
}

/* ---------- Больше воздуха ---------- */
body { background: #f7f7f9; }
.section { margin-top: 3rem; }
@media (min-width: 1024px) { .section { margin-top: 4rem; } }
.section-head { margin-bottom: 1.25rem; }
.section-title { font-weight: 650; }
.pcard { gap: .625rem; padding: .75rem; }
@media (hover: hover) {
    .pcard-actions [data-compare]:not(.is-compared) { opacity: 0; transition: opacity .2s; }
    .pcard:hover .pcard-actions [data-compare] { opacity: 1; }
}

/* ---------- Бренды-лидеры: фото хита и цена «от» ---------- */
.brand-card { min-height: 7.5rem; padding: 1rem 1.25rem; align-items: stretch; }
.brand-card::after {
    content: ''; position: absolute; right: -2.5rem; top: -2.5rem; width: 10rem; height: 10rem; border-radius: 999px;
    background: radial-gradient(circle, rgb(255 255 255 / .22), transparent 70%); pointer-events: none;
}
.brand-card .brand-name { font-size: 1.45rem; }
.brand-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 999px;
    background: rgb(255 255 255 / .18); font-size: .66rem; font-weight: 600; letter-spacing: .01em;
}
.brand-cta {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; padding: .3rem .7rem; border-radius: 999px;
    background: #fff; color: #111827; font-size: .75rem; font-weight: 700; transition: gap .2s;
}
.brand-card:hover .brand-cta { gap: .55rem; }
.brand-photo {
    position: relative; z-index: 1; flex-shrink: 0; align-self: center; width: 6.25rem; height: 6.25rem; padding: .4rem;
    border-radius: 1rem; background: #fff; box-shadow: 0 16px 30px -14px rgb(0 0 0 / .5); transform: rotate(4deg); transition: transform .3s;
}
.brand-card:hover .brand-photo { transform: rotate(0) scale(1.05); }
.brand-photo img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Маркетплейс нового поколения ---------- */
.tech-strip {
    display: grid; gap: 1rem; padding: 1.25rem; border-radius: 1.25rem; background: #fff; border: 1px solid rgb(var(--line));
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .tech-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .tech-strip { grid-template-columns: 1.1fr repeat(4, minmax(0, 1fr)); padding: 1.25rem 1.5rem; align-items: center; } }
.tech-badge {
    display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
    color: #fff; background: linear-gradient(120deg, #4a1652, #762d80 55%, #b14fbf);
}
.tech-item { display: flex; align-items: center; gap: .75rem; }
.tech-ic {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .875rem; flex-shrink: 0;
    color: rgb(var(--primary)); background: linear-gradient(135deg, rgb(var(--primary) / .14), rgb(var(--primary) / .04));
    border: 1px solid rgb(var(--primary) / .15);
}
/* Баннер: вся площадь ведёт на страницу акции, карточка товара — на товар */
.hero-slide { cursor: pointer; }
.hero-cover { position: absolute; inset: 0; z-index: 5; }
.hero-slide > .relative.z-10 { pointer-events: none; }
.hero-credit { pointer-events: auto; z-index: 20; cursor: pointer; }
.hero-credit:hover .hero-credit-month { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Личный кабинет ---------- */
.account-link {
    display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: .625rem;
    font-size: .875rem; font-weight: 500; color: rgb(var(--ink-2)); white-space: nowrap; transition: background-color .15s, color .15s;
}
.account-link:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
.account-link.is-active { background: rgb(var(--primary) / .1); color: rgb(var(--primary)); font-weight: 600; }