/* =====================================================================
   Интернет-магазин — дизайн-система
   ---------------------------------------------------------------------
   Визуальный язык: тёмная база (#07080a), стекло (backdrop-filter),
   янтарный акцент #FFB703, крупные фотографии каталога.
   Идея взята с витрины заказчика (Electromart_Final/assets/css/style.css),
   но доведена: токены, тёмная и светлая темы, доступность, адаптив.

   Разделы:
     1. Токены и темы          9. Таблицы и характеристики
     2. База и типографика     10. Уведомления
     3. Шапка и навигация      11. Подвал
     4. Герой и бенто          12. Скелетоны и появление
     5. Карточки               13. Админ-обвязка
     6. Кнопки                 14. Утилиты
     7. Цена, наличие, фильтры 15. Доступность и печать
     8. Формы
   ===================================================================== */

/* =====================================================================
   1. ТОКЕНЫ
   ===================================================================== */

:root,
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* --- Основа --- */
    --bg:            #07080a;
    --bg-elevated:   #0d0f14;
    --surface:       rgba(255, 255, 255, .04);
    --surface-strong:rgba(255, 255, 255, .07);
    --surface-sunken:rgba(0, 0, 0, .28);
    --border:        rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .16);

    /* --- Текст --- */
    --text:      #f3f4f6;
    --text-dim:  #d1d5db;
    --text-muted:#9ca3af;
    --text-faint:#6b7280;

    /* --- Акценты --- */
    --accent:       #ffb703;
    --accent-hover: #f59e0b;
    --accent-ink:   #1a1200;
    --blue:         #3b82f6;
    --green:        #10b981;
    --red:          #ef4444;
    --wa:           #25d366;

    --amber-soft: rgba(255, 183, 3, .12);
    --blue-soft:  rgba(59, 130, 246, .14);

    /* --- Стекло --- */
    --glass-bg:     rgba(20, 22, 28, .55);
    --glass-border: rgba(255, 255, 255, .10);
    --glass-blur:   saturate(160%) blur(18px);

    /* --- Радиусы --- */
    --r-xs: 8px;
    --r-sm: 12px;
    --r:    16px;
    --r-lg: 22px;
    --r-xl: 30px;
    --r-pill: 999px;

    /* --- Тени --- */
    --sh-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --sh-sm: 0 2px 8px rgba(0, 0, 0, .45);
    --sh:    0 8px 24px rgba(0, 0, 0, .5);
    --sh-lg: 0 20px 60px rgba(0, 0, 0, .6);
    --sh-amber: 0 8px 24px rgba(255, 183, 3, .25);

    /* --- Типографика --- */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            "Noto Sans", Arial, sans-serif;
    --font-display: "Segoe UI", system-ui, -apple-system, "Inter", sans-serif;
    --fs-hero: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
    --fs-title: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
    --fs-section: clamp(1.1rem, 1rem + .5vw, 1.35rem);
    --fs-price: clamp(1.15rem, 1rem + .5vw, 1.45rem);

    /* --- Метрики --- */
    --header-h: 68px;
    --tap: 44px;
    --speed: 180ms cubic-bezier(.2, .7, .3, 1);

    /* --- Мостик к Bootstrap --- */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-emphasis-color: #fff;
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--surface-strong);
    --bs-tertiary-bg: var(--surface-sunken);
    --bs-border-color: var(--border);
    --bs-heading-color: var(--text);
    --bs-link-color: var(--amber-soft);
    --bs-link-hover-color: rgba(255, 183, 3, .22);
    --bs-primary: var(--accent);
    --bs-primary-rgb: 255, 183, 3;
    --bs-border-radius: var(--r-sm);
    --bs-font-sans-serif: var(--font);
}

/* Светлая тема — для офиса и печати: та же структура, инвертированные поверхности */
[data-bs-theme="light"] {
    color-scheme: light;

    --bg:            #f4f5f7;
    --bg-elevated:   #ffffff;
    --surface:       rgba(15, 23, 42, .03);
    --surface-strong:rgba(15, 23, 42, .06);
    --surface-sunken:rgba(15, 23, 42, .05);
    --border:        rgba(15, 23, 42, .10);
    --border-strong: rgba(15, 23, 42, .18);

    --text:      #0f172a;
    --text-dim:  #1e293b;
    --text-muted:#475569;
    --text-faint:#94a3b8;

    --amber-soft: rgba(245, 158, 11, .14);
    --blue-soft:  rgba(59, 130, 246, .10);

    --glass-bg:     rgba(255, 255, 255, .78);
    --glass-border: rgba(15, 23, 42, .10);

    --sh-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --sh-sm: 0 2px 8px rgba(15, 23, 42, .07);
    --sh:    0 8px 24px rgba(15, 23, 42, .10);
    --sh-lg: 0 20px 50px rgba(15, 23, 42, .16);

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-emphasis-color: #000;
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg: var(--surface-strong);
    --bs-border-color: var(--border);
    --bs-heading-color: var(--text);
    --bs-link-color: #b45309;
    --bs-link-hover-color: #92400e;
}

/* =====================================================================
   2. БАЗА И ТИПОГРАФИКА
   ===================================================================== */

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Мягкое свечение фона — фирменный приём тёмных витрин */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 40% at 15% 0%, rgba(255, 183, 3, .07), transparent 60%),
        radial-gradient(50% 40% at 90% 10%, rgba(59, 130, 246, .06), transparent 60%);
    pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

[data-bs-theme="light"] h1,
[data-bs-theme="light"] h2,
[data-bs-theme="light"] h3,
[data-bs-theme="light"] h4,
[data-bs-theme="light"] h5,
[data-bs-theme="light"] h6 { color: var(--text); }

a { text-underline-offset: 3px; }

code {
    color: var(--accent);
    background: var(--amber-soft);
    padding: .12em .45em;
    border-radius: var(--r-xs);
}

.text-muted { color: var(--text-muted) !important; }
.text-dim   { color: var(--text-dim) !important; }
.text-faint { color: var(--text-faint) !important; }
.accent-text { color: var(--accent) !important; }

.page { padding-block: clamp(1.25rem, 3vw, 2.25rem); }

.section-title {
    font-size: var(--fs-section);
    font-weight: 700;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border-strong), transparent);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.lead-muted { color: var(--text-muted); max-width: 64ch; }

.mt-section { margin-top: clamp(2rem, 4vw, 3.25rem); }

.divider-y { width: 1px; height: 22px; background: var(--border-strong); }

/* =====================================================================
   3. ШАПКА И НАВИГАЦИЯ
   ===================================================================== */

.topbar {
    background: rgba(0, 0, 0, .35);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .8rem;
}

.topbar a { color: var(--text-dim); text-decoration: none; }
.topbar a:hover { color: var(--accent); }

.header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
}

.header__bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: -.02em;
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
}

.brand__mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--accent), var(--accent-hover));
    box-shadow: var(--sh-amber);
    color: var(--accent-ink);
    font-size: 1.05rem;
}

.brand small {
    display: block;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.header__search { position: relative; flex: 1; max-width: 620px; }

.header__search .form-control {
    height: 44px;
    padding-left: 2.7rem;
    padding-right: 5rem;
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    border-color: var(--border);
    color: var(--text);
}

.header__search .form-control::placeholder { color: var(--text-faint); }

.header__search .form-control:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--amber-soft);
    color: var(--text);
}

.header__search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    pointer-events: none;
}

.header__search .btn {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 34px;
    border-radius: var(--r-pill);
}

.header__actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; }

.icon-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-dim);
    text-decoration: none;
    position: relative;
    transition: background var(--speed), color var(--speed), border-color var(--speed);
}

.icon-btn:hover {
    background: var(--surface-strong);
    color: var(--accent);
    border-color: var(--border-strong);
}

.icon-btn__badge {
    position: absolute;
    top: 1px;
    right: -1px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .7rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid var(--bg);
}

.icon-btn__badge[hidden] { display: none; }

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--amber-soft);
    color: var(--accent);
    font-weight: 800;
    font-size: .85rem;
}

.nav-cats {
    background: rgba(0, 0, 0, .22);
    border-top: 1px solid var(--border);
}

.nav-cats .nav-link {
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 600;
    padding: .75rem .1rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.nav-cats .nav-link:hover { color: var(--text); }

.nav-cats .nav-link.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* =====================================================================
   4. ГЕРОЙ И БЕНТО-СЕТКА
   ===================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--glass-border);
    isolation: isolate;
}

.hero--photo { background: var(--bg-elevated); }

/* Фотография героя — отдельным <img>, а не background-image:
   так работает строгий CSP (style-src без 'unsafe-inline') */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(105deg, rgba(7, 8, 10, .95) 0%, rgba(7, 8, 10, .82) 38%, rgba(7, 8, 10, .35) 100%),
        linear-gradient(180deg, transparent 50%, rgba(7, 8, 10, .9) 100%);
}

.hero__inner { padding: clamp(1.75rem, 4.5vw, 3.5rem); }

.hero__title {
    font-size: var(--fs-hero);
    font-weight: 800;
    line-height: 1.05;
    margin: .4rem 0 .75rem;
    max-width: 17ch;
}

.hero__text { color: var(--text-dim); max-width: 52ch; }

.hero__stats { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-top: 2rem; }

.hero__stat b {
    display: block;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--accent);
}

.hero__stat span { font-size: .8rem; color: var(--text-muted); }

.trust-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-dim);
}

/* --- Бенто: плитки категорий на фотографиях --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 190px;
    padding: 1.15rem;
    border-radius: var(--r);
    overflow: hidden;
    text-decoration: none;
    border: 1px solid var(--glass-border);
    background-size: cover;
    background-position: center;
    transition: transform var(--speed), box-shadow var(--speed);
}

.bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 8, 10, .1) 0%, rgba(7, 8, 10, .82) 78%);
    transition: background var(--speed);
}

.bento-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); color: #fff; }
.bento-card:hover::before { background: linear-gradient(180deg, rgba(7, 8, 10, .05) 0%, rgba(7, 8, 10, .88) 80%); }

.bento-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.2, .7, .3, 1);
}

.bento-card:hover .bento-card__bg { transform: scale(1.05); }

.bento-card__badge {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 2;
    padding: .2rem .55rem;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .55);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-dim);
}

.bento-card > * { position: relative; z-index: 1; }

.bento-card__title { font-weight: 700; font-size: 1.02rem; color: #fff; }
.bento-card__meta  { font-size: .78rem; color: var(--text-muted); }

.bento-2 { grid-column: span 2; }
.bento-3 { grid-column: span 3; }
.bento-4 { grid-column: span 4; }
.bento-6 { grid-column: span 6; }
.bento-tall { min-height: 300px; }

@media (max-width: 991.98px) {
    .bento-grid { grid-template-columns: repeat(4, 1fr); }
    .bento-3, .bento-4 { grid-column: span 2; }
    .bento-6 { grid-column: span 4; }
}

@media (max-width: 575.98px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-2, .bento-3, .bento-4, .bento-6 { grid-column: span 2; }
}

/* --- Шапка категории: фотография во всю ширину --- */
.cat-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--glass-border);
    margin-bottom: 1.5rem;
}

.cat-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cat-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(7, 8, 10, .95) 30%, rgba(7, 8, 10, .55) 100%);
}

.cat-hero__body {
    position: relative;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.cat-hero__title { font-size: var(--fs-title); font-weight: 800; margin: 0 0 .35rem; }
.cat-hero__text { color: var(--text-dim); max-width: 60ch; }

/* --- Плитки статистики --- */
.tile {
    height: 100%;
    padding: 1.1rem 1.2rem;
    border-radius: var(--r);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: transform var(--speed), box-shadow var(--speed);
}

.tile:hover { transform: translateY(-3px); box-shadow: var(--sh); }

.tile__label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }

.tile__value {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: #fff;
}

[data-bs-theme="light"] .tile__value { color: var(--text); }

.tile__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--amber-soft);
    color: var(--accent);
    font-size: 1.15rem;
}

/* =====================================================================
   5. КАРТОЧКИ
   ===================================================================== */

.card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--r);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text);
}

.card-header {
    background: transparent;
    border-bottom-color: var(--border);
    font-weight: 600;
    color: var(--text-dim);
}

/* --- Карточка товара --- */
.product-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
    border-color: rgba(255, 183, 3, .35);
}

.product-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--surface-sunken);
    overflow: hidden;
    display: block;
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(.2, .7, .3, 1);
}

.product-card:hover .product-card__image { transform: scale(1.06); }

.product-card__ribbon {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: .22rem .55rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .72rem;
    font-weight: 800;
    box-shadow: var(--sh-sm);
}

.product-card__unit {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 2;
    padding: .2rem .5rem;
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-dim);
}

.product-card__out {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: rgba(7, 8, 10, .72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    font-weight: 700;
    color: var(--text-dim);
}

.product-card__body {
    padding: .95rem 1.05rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    flex: 1;
}

.product-card__brand {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

.product-card__cat {
    font-size: .74rem;
    color: var(--text-faint);
    text-decoration: none;
}

.product-card__cat:hover { color: var(--text-dim); }

.product-card__title { font-size: .95rem; font-weight: 600; line-height: 1.35; margin: 0; }
.product-card__title a { color: #fff; text-decoration: none; }
.product-card__title a:hover { color: var(--accent); }

[data-bs-theme="light"] .product-card__title a { color: var(--text); }

.media-4x3 { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-sunken); }

.img-cover { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   5b. ЛОГОТИП, ТЕЛЕФОН, WHATSAPP
   ===================================================================== */

/* Логотип: часть «MART» заливается currentColor и наследует цвет текста,
   поэтому один и тот же вектор читается и на тёмном, и на светлом фоне */
.logo {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: inherit;
}

.logo__mark {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    box-shadow: var(--sh-amber);
}

.logo__word {
    height: 26px;
    width: auto;
    display: block;
    /* подстраховка, если SVG не загрузился */
    color: #fff;
}

[data-bs-theme="light"] .logo__word { color: var(--text); }

.logo__sub {
    display: block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1.1;
}

.logo--lg .logo__mark { width: 56px; height: 56px; border-radius: 16px; }
.logo--lg .logo__word { height: 38px; }
.logo--lg .logo__sub { font-size: .7rem; }

/* --- Телефон --- */
.phone-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.phone-link:hover { color: var(--accent); }

.phone-link__label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1;
}

/* --- Плавающая кнопка WhatsApp --- */
.wa-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1080;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .38);
    transition: transform var(--speed), box-shadow var(--speed);
}

.wa-fab:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 30px rgba(37, 211, 102, .5);
}

.wa-fab svg { width: 30px; height: 30px; fill: currentColor; }

/* мягкая пульсация, чтобы кнопку замечали */
.wa-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    opacity: .45;
    animation: wa-pulse 2.6s ease-out infinite;
    z-index: -1;
}

@keyframes wa-pulse {
    0%   { transform: scale(1);    opacity: .45; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* подпись рядом с кнопкой — появляется при наведении */
.wa-fab__tip {
    position: absolute;
    right: 68px;
    top: 50%;
    transform: translateY(-50%);
    padding: .5rem .8rem;
    border-radius: var(--r-sm);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--sh);
    color: var(--text);
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed), transform var(--speed);
}

.wa-fab:hover .wa-fab__tip { opacity: 1; transform: translateY(-50%) translateX(-4px); }

/* На мобильных кнопка не должна перекрывать липкую панель «В корзину» */
@media (max-width: 575.98px) {
    .wa-fab { width: 52px; height: 52px; right: 14px; bottom: 14px; }
    .wa-fab svg { width: 27px; height: 27px; }
    .wa-fab__tip { display: none; }
}

/* --- Кнопка «Спросить в WhatsApp» в карточке товара --- */
.btn-wa {
    --bs-btn-color: #fff;
    --bs-btn-bg: #25d366;
    --bs-btn-border-color: #25d366;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1eb455;
    --bs-btn-hover-border-color: #1eb455;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #199e4b;
    --bs-btn-active-border-color: #199e4b;
    font-weight: 700;
}

.btn-wa svg { width: 18px; height: 18px; fill: currentColor; }

.wa-inline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #25d366;
    font-weight: 700;
    text-decoration: none;
}

.wa-inline:hover { color: #1eb455; text-decoration: underline; }
.wa-inline svg { width: 17px; height: 17px; fill: currentColor; }

/* Контакты в подвале */
.contact-line {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .2rem 0;
}

.contact-line svg { width: 17px; height: 17px; fill: var(--accent); flex: none; margin-top: .18rem; }
.contact-line a { color: var(--text-muted); text-decoration: none; }
.contact-line a:hover { color: var(--accent); }

/* =====================================================================
   6. КНОПКИ
   ===================================================================== */

.btn {
    font-weight: 600;
    border-radius: var(--r-sm);
    transition: transform var(--speed), box-shadow var(--speed), background var(--speed),
                color var(--speed), border-color var(--speed);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent-ink);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-hover-color: var(--accent-ink);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-active-color: var(--accent-ink);
    --bs-btn-disabled-bg: rgba(255, 183, 3, .45);
    --bs-btn-disabled-border-color: rgba(255, 183, 3, .45);
    --bs-btn-disabled-color: rgba(26, 18, 0, .7);
    box-shadow: var(--sh-amber);
    font-weight: 700;
}

.btn-primary:hover { box-shadow: 0 10px 28px rgba(255, 183, 3, .32); }

.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: rgba(255, 183, 3, .45);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-ink);
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-active-color: var(--accent-ink);
    color: var(--accent);
    border-color: rgba(255, 183, 3, .45);
}

.btn-outline-secondary {
    --bs-btn-color: var(--text-dim);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--surface-strong);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--surface-strong);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-active-color: #fff;
    color: var(--text-dim);
    border-color: var(--border-strong);
}

.btn-soft {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.btn-soft:hover { background: var(--surface-strong); color: #fff; }

.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.6rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: var(--r); }

.btn-icon {
    width: var(--tap);
    height: var(--tap);
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
}

.btn-icon:hover { background: var(--surface-strong); color: var(--accent); }

/* Степпер количества (дробные — «12,5 м») */
.stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-sunken);
}

.stepper button {
    width: 40px;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--speed), color var(--speed);
}

.stepper button:hover { background: var(--surface-strong); color: var(--accent); }

.stepper input {
    width: 72px;
    height: 42px;
    border: 0;
    text-align: center;
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

[data-bs-theme="light"] .stepper input { color: var(--text); }

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper input:focus { outline: none; background: var(--amber-soft); }

/* =====================================================================
   7. ЦЕНА, НАЛИЧИЕ, ФИЛЬТРЫ, ХЛЕБНЫЕ КРОШКИ
   ===================================================================== */

.price {
    font-size: var(--fs-price);
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    white-space: nowrap;
}

.price--lg { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }

.price-old {
    color: var(--text-faint);
    text-decoration: line-through;
    font-size: .9em;
    font-variant-numeric: tabular-nums;
}

.price-unit { font-size: .78rem; color: var(--text-faint); font-weight: 600; }

.stock {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
}

.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.stock--in  { color: var(--green); }
.stock--low { color: var(--accent); }
.stock--out { color: var(--text-faint); }

.badge-soft {
    background: var(--surface-strong);
    color: var(--text-dim);
    border: 1px solid var(--border);
    font-weight: 600;
}

.badge-brand {
    background: var(--amber-soft);
    color: var(--accent);
    border: 1px solid rgba(255, 183, 3, .3);
    font-weight: 700;
}

/* --- Хлебные крошки --- */
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-faint); font-size: .85rem; }
.breadcrumb-item a { color: var(--text-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--accent); }
.breadcrumb-item.active { color: var(--text-dim); font-weight: 600; }

/* --- Панель фильтров --- */
.filter-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--r);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    position: sticky;
    top: calc(var(--header-h) + 14px);
}

.filter-card__section { padding: .95rem 1.05rem; border-bottom: 1px solid var(--border); }
.filter-card__section:last-child { border-bottom: 0; }

.filter-card__title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: .65rem;
}

.cat-list { list-style: none; margin: 0; padding: 0; }

.cat-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .38rem 0;
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px dashed var(--border);
    font-size: .9rem;
}

.cat-list a:last-child { border-bottom: 0; }
.cat-list a:hover { color: var(--accent); }
.cat-list a.is-active { color: var(--accent); font-weight: 700; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip--reset { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip--pick { cursor: pointer; }
.chip--pick:hover { border-color: var(--accent); color: var(--accent); }
.chip--pick .visually-hidden:focus-visible + * { outline: none; }

.chip--reset:hover { color: var(--accent-ink); opacity: .9; }

/* --- Пагинация --- */
.pagination { --bs-pagination-border-color: var(--border); }

.page-link {
    color: var(--text-dim);
    background: var(--surface);
    border-radius: var(--r-sm) !important;
    margin: 0 .15rem;
    min-width: 42px;
    text-align: center;
    font-weight: 600;
    box-shadow: none !important;
}

.page-link:hover { background: var(--surface-strong); color: var(--accent); }

.active > .page-link,
.page-link.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.disabled > .page-link { color: var(--text-faint); opacity: .5; }

/* =====================================================================
   8. ФОРМЫ
   ===================================================================== */

.form-label { font-size: .85rem; font-weight: 600; color: var(--text-dim); margin-bottom: .3rem; }

.form-control, .form-select {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    padding-block: .55rem;
}

.form-control:focus, .form-select:focus {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--amber-soft);
    color: #fff;
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus { color: var(--text); }

.form-control::placeholder { color: var(--text-faint); }
.form-text { color: var(--text-faint); font-size: .8rem; }

.field-error {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #fca5a5;
    font-size: .8rem;
    font-weight: 500;
    margin-top: .3rem;
}

.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--red);
    background-image: none;
    padding-right: .75rem;
}

.form-check-input { background-color: var(--surface-strong); border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--amber-soft); }
.form-check-label { color: var(--text-dim); }

.form-switch .form-check-input { width: 2.6em; }

.input-group-text { background: var(--surface-strong); border-color: var(--border-strong); color: var(--text-dim); }

/* =====================================================================
   9. ТАБЛИЦЫ И ХАРАКТЕРИСТИКИ
   ===================================================================== */

.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border); margin-bottom: 0; }

.table > thead th {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-faint);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    padding: .75rem;
    white-space: nowrap;
}

.table > tbody td { padding: .8rem .75rem; vertical-align: middle; }
.table > tbody tr { border-color: var(--border); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--surface); }
.table-responsive { border-radius: var(--r); overflow: hidden; }
.table-actions { white-space: nowrap; }
.table-actions .btn { --bs-btn-padding-x: .6rem; --bs-btn-padding-y: .32rem; }

/* Таблица характеристик товара */
.spec-table th {
    width: 42%;
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.spec-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* =====================================================================
   10. УВЕДОМЛЕНИЯ
   ===================================================================== */

.toast-stack {
    position: fixed;
    z-index: 1090;
    top: calc(var(--header-h) + 14px);
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    max-width: min(400px, calc(100vw - 32px));
}

.toast {
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--sh-lg);
    color: var(--text);
}

.toast--success { border-left-color: var(--green); }
.toast--error   { border-left-color: var(--red); }
.toast--warning { border-left-color: var(--accent); }
.toast--info    { border-left-color: var(--blue); }

.alert {
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-dim);
}

.alert-success { border-left-color: var(--green); }
.alert-danger  { border-left-color: var(--red); }
.alert-warning { border-left-color: var(--accent); }
.alert-info    { border-left-color: var(--blue); }

/* =====================================================================
   11. ПОДВАЛ
   ===================================================================== */

.footer {
    background: rgba(0, 0, 0, .3);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: .88rem;
}

.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--accent); }

.footer__col h6 {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-faint);
    margin-bottom: .8rem;
}

.footer__bottom { border-top: 1px solid var(--border); padding-block: 1rem; font-size: .8rem; }

/* =====================================================================
   12. СКЕЛЕТОНЫ И ПОЯВЛЕНИЕ
   ===================================================================== */

.skeleton { position: relative; background: var(--surface-strong); border-radius: var(--r-sm); overflow: hidden; }

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
    animation: sweep 1.4s infinite;
}

@keyframes sweep { 100% { transform: translateX(100%); } }

.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 450ms ease, transform 450ms cubic-bezier(.2, .7, .3, 1);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* =====================================================================
   13. АДМИН-ОБВЯЗКА
   ===================================================================== */

.admin-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 1.25rem; align-items: start; }

@media (max-width: 991.98px) { .admin-shell { grid-template-columns: 1fr; } }

.admin-nav {
    position: sticky;
    top: calc(var(--header-h) + 14px);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: .5rem;
    border-radius: var(--r);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    transition: background var(--speed), color var(--speed);
}

.admin-nav a:hover { background: var(--surface-strong); color: #fff; }

.admin-nav a.is-active { background: var(--accent); color: var(--accent-ink); }

.admin-profile {
    margin-top: .5rem;
    padding: .85rem;
    border-radius: var(--r-sm);
    background: var(--surface-sunken);
    font-size: .84rem;
}

@media (max-width: 991.98px) {
    .admin-nav { position: static; flex-direction: row; overflow-x: auto; }
    .admin-profile { display: none; }
}

.thumb {
    width: 56px;
    height: 42px;
    border-radius: var(--r-xs);
    object-fit: cover;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
}

.img-preview {
    max-height: 240px;
    width: 100%;
    object-fit: contain;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: .5rem;
}

/* =====================================================================
   14. УТИЛИТЫ (заменяют inline-стили — их запрещает строгий CSP)
   ===================================================================== */

.w-4rem  { width: 4rem; }
.w-6rem  { width: 6rem; }
.w-8rem  { width: 8rem; }
.w-9rem  { width: 9rem; }
.w-15rem { width: 15rem; }
.w-25    { width: 25%; }

.fit-cover { object-fit: cover; }
.pre-wrap  { white-space: pre-wrap; word-break: break-word; }

.tree-cell { padding-left: 0; }
.tree-cell.tree-1 { padding-left: 1rem; }
.tree-cell.tree-2 { padding-left: 2rem; }
.tree-cell.tree-3 { padding-left: 3rem; }

.sticky-cta {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    padding: .8rem 0;
    margin-top: 1.5rem;
}

/* =====================================================================
   15. ДОСТУПНОСТЬ И ПЕЧАТЬ
   ===================================================================== */

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

@media print {
    .header, .topbar, .nav-cats, .footer, .toast-stack,
    .admin-nav, .btn, .filter-card, .sticky-cta, .toast { display: none !important; }

    body { background: #fff; color: #000; }
    body::before { display: none; }
    .card, .tile { background: #fff; border-color: #ccc; box-shadow: none; backdrop-filter: none; }
    h1, h2, h3, .price { color: #000 !important; }
}

/* =====================================================================
   ПЕРЕКЛЮЧАТЕЛЬ РЕГИОНА И КАРТА
   ===================================================================== */
.region-form { display:inline-flex; align-items:center; gap:.45rem; }
.region-form__label { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
                      color:var(--text-faint); margin:0; }
.region-form__select {
    appearance: none; -webkit-appearance: none;
    background: var(--surface-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffb703' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .55rem center / .6rem auto;
    color: var(--text); border:1px solid var(--border); border-radius:var(--r-pill);
    padding:.34rem 1.7rem .34rem .7rem; font-size:.8rem; font-weight:600; cursor:pointer;
    min-width:11rem; transition: border-color var(--speed), background-color var(--speed);
}
.region-form__select:hover { border-color: var(--accent); }
.region-form__select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.region-form__btn { background: var(--accent); color: var(--accent-ink); border:0;
                     border-radius: var(--r-pill); padding:.4rem .9rem; font-weight:800; cursor:pointer; }

.region-note {
    display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
    font-size:.82rem; color:var(--text-muted);
    padding:.55rem 0 0; border-top:1px solid var(--line); margin-top:.75rem;
}
.region-note b { color: var(--text); }

.map-embed { margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
             background: var(--surface-sunken); }
.map-embed iframe { display:block; width:100%; height:320px; border:0; filter:grayscale(.25) contrast(1.05); }
.map-embed--sm iframe { height:240px; }
.map-links { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.75rem; }
.map-links a { font-size:.82rem; padding:.3rem .7rem; border:1px solid var(--border);
               border-radius:var(--r-pill); text-decoration:none; }

@media (max-width:640px) {
    .region-form { width:100%; }
    .region-form__select { flex:1; min-width:0; }
}