/* ==========================================================================
   Дрова От Собственника — production CSS (собран из css/src/*.css, не редактировать)
   Палитра «Тёплая логистика»: фон #F6F3ED, графит #1E2522,
   терракота #B86535, хвойный #2F6451, песочный #E6D7C4.
   Сборка: php tools/build-css.php
   ========================================================================== */

/* ==========================================================================
   00. Дизайн-токены «Дачник-Дров» — палитра «Тёплая логистика» (4.2)
   ========================================================================== */

:root {
    /* ── Базовая палитра ─────────────────────────────────────────── */
    --bg:            #F6F3ED;   /* тёплый светлый фон */
    --graphite:      #1E2522;   /* заголовки, меню, кнопки */
    --graphite-soft: #2C3531;   /* вторичный графит */
    --accent:        #B86535;   /* терракота: CTA, скидки, активное */
    --accent-dark:   #9C542C;   /* hover терракоты */
    --pine:          #2F6451;   /* хвойный: доверие, параметры, сервис */
    --pine-dark:     #24503F;   /* hover хвойного */
    --sand:          #E6D7C4;   /* подложки, таблицы */
    --sand-light:    #EFE6D8;   /* светлая подложка */
    --line:          #E9ECE8;   /* границы, карточки */
    --line-dark:     #D8DED6;   /* границы активные */

    /* ── Текст ───────────────────────────────────────────────────── */
    --text:          #232A26;
    --text-soft:     #4E5852;
    --text-muted:    #7A847D;
    --on-accent:     #FFFFFF;
    --on-dark:       #F6F3ED;

    /* ── Состояния ───────────────────────────────────────────────── */
    --danger:        #B3402E;
    --danger-bg:     #F9E9E4;
    --success:       #2F6451;
    --success-bg:    #E4EFE8;
    --warning:       #B3772E;
    --warning-bg:    #F6EDDD;
    --focus:         #2E7DB8;

    /* ── Типографика ─────────────────────────────────────────────── */
    --font-head: 'Manrope', 'Golos Display', 'Onest', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-body: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-num: 'Manrope', 'Inter', ui-monospace, 'SF Mono', Consolas, monospace;

    /* ── Размеры и отступы сетки (A5.1) ──────────────────────────── */
    --container: 1280px;
    --container-wide: 1440px;
    --gutter: 24px;
    --gutter-mobile: 16px;
    --gap: 24px;
    --gap-sm: 16px;
    --gap-xs: 8px;

    /* ── Скругления ──────────────────────────────────────────────── */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ── Тени ────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(30, 37, 34, 0.06), 0 2px 8px rgba(30, 37, 34, 0.05);
    --shadow: 0 4px 12px rgba(30, 37, 34, 0.08), 0 12px 32px rgba(30, 37, 34, 0.06);
    --shadow-lg: 0 12px 32px rgba(30, 37, 34, 0.14), 0 24px 64px rgba(30, 37, 34, 0.10);

    /* ── Прозрачность и слои ─────────────────────────────────────── */
    --header-z: 100;
    --drawer-z: 200;
    --modal-z: 300;
    --toast-z: 400;

    /* ── Анимации ────────────────────────────────────────────────── */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 0.22s;
    --dur-slow: 0.4s;
}

/* Акцентная пара для поддомена подставляется инлайном из PHP:
   :root { --accent: ...; --pine: ...; }
   Терракота/хвойный — базовые; для городов — детерминированный хэш. */

/* Тёмная тема для админ-предпросмотра не предусмотрена: сайт светлый
   по концепции «Тёплая логистика». Ниже — поддержка prefers-reduced-motion. */

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


/* ==========================================================================
   01. Сброс и базовые элементы
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.2;
    color: var(--graphite);
    text-wrap: balance;
}

h1 { font-size: clamp(28px, 4.2vw, 44px); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 20px; font-weight: 700; }
h4 { font-size: 17px; font-weight: 700; }

p {
    margin: 0 0 1em;
}

ul, ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

li {
    margin-bottom: 0.35em;
}

a {
    color: var(--pine);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

a:hover {
    color: var(--pine-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

figure {
    margin: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

input, select, textarea {
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
}

fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 2rem 0;
}

::selection {
    background: var(--accent);
    color: var(--on-accent);
}

/* Атрибут hidden всегда скрывает элемент, даже если у компонента
   задан display: flex (мобильное меню, диалог города, тост). */
[hidden] {
    display: none !important;
}

/* Фокус для доступности (WCAG AA, A5.3) */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Скрытый, но доступный скринридерам элемент */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 500;
    background: var(--graphite);
    color: var(--on-dark);
    padding: 12px 20px;
    border-radius: 0 0 var(--radius) 0;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
    color: var(--on-dark);
}

/* Уважение к системному шрифту при большой высоте шрифта */
@media (max-width: 420px) {
    html { font-size: 15px; }
}


/* ==========================================================================
   02. Типографика, цены, списки, prose
   ========================================================================== */

/* ── Цены: плотные цифры, tabular-nums (4.3) ───────────────────── */
.price, .product-card__price, .product__price, .hero__price,
.service-side__price, .price-table__price {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── Контейнеры ─────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: 880px;
}

/* ── Секции ─────────────────────────────────────────────────────── */
.section {
    padding: 96px 0;
}

.section--sand {
    background: var(--sand-light);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section--dark {
    background: var(--graphite);
    color: var(--on-dark);
}

.section--dark .section__title {
    color: var(--on-dark);
}

.section--dark .section__lead {
    color: rgba(246, 243, 237, 0.78);
}

.section__title {
    margin-bottom: 0.35em;
}

.section__title--center {
    text-align: center;
}

.section__lead {
    font-size: 18px;
    color: var(--text-soft);
    max-width: 720px;
    margin-bottom: 2rem;
}

.section__lead--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

/* ── Prose (статьи, длинные тексты) ─────────────────────────────── */
.prose {
    font-size: 17px;
    line-height: 1.75;
    color: var(--text);
}

.prose h2 {
    margin-top: 1.75em;
    font-size: 24px;
}

.prose h3 {
    margin-top: 1.5em;
    font-size: 19px;
}

.prose ul {
    padding-left: 1.4em;
}

.prose li {
    margin-bottom: 0.5em;
}

.prose a {
    font-weight: 600;
}

.prose__list {
    padding-left: 1.4em;
}

.prose__list li {
    margin-bottom: 0.5em;
}

/* ── Заголовки страниц ──────────────────────────────────────────── */
.page-head {
    padding: 40px 0 8px;
    background: linear-gradient(180deg, #F0EAE0 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--line);
}

.page-head__title {
    margin: 18px 0 10px;
    max-width: 960px;
}

.page-head__lead {
    font-size: 18px;
    color: var(--text-soft);
    max-width: 860px;
    margin-bottom: 28px;
}

.page-head--product {
    padding-bottom: 4px;
}

/* ── Хлебные крошки ─────────────────────────────────────────────── */
.breadcrumbs {
    margin: 0 0 4px;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.breadcrumbs__link {
    color: var(--text-muted);
    font-weight: 500;
}

.breadcrumbs__link:hover {
    color: var(--pine);
}

.breadcrumbs__sep {
    color: var(--line-dark);
}

/* ── Примечания под таблицами и блоками ─────────────────────────── */
.table-note, .price-table__note, .rating-table__note, .works-note,
.promo-card__fine, .delivery-dates__note {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-top: 14px;
    line-height: 1.55;
}


/* ==========================================================================
   03. Кнопки и ссылки-действия (A5.2)
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1;
    padding: 14px 26px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease), transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    user-select: none;
    white-space: nowrap;
}

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

.btn:disabled,
.btn.is-loading {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Варианты ───────────────────────────────────────────────────── */
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 6px 16px -6px rgba(184, 101, 53, 0.55);
}

.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--on-accent);
    text-decoration: none;
    box-shadow: 0 8px 20px -6px rgba(184, 101, 53, 0.65);
}

.btn-primary::after {
    content: "→";
    font-size: 17px;
    transition: transform var(--dur) var(--ease);
}

.btn-primary:hover::after {
    transform: translateX(3px);
}

.btn-dark {
    background: var(--graphite);
    border-color: var(--graphite);
    color: var(--on-dark);
}

.btn-dark:hover {
    background: #101614;
    border-color: #101614;
    color: var(--on-dark);
    text-decoration: none;
}

.btn-outline {
    background: transparent;
    border-color: var(--graphite);
    color: var(--graphite);
}

.btn-outline:hover {
    background: var(--graphite);
    color: var(--on-dark);
    text-decoration: none;
}

.btn-whatsapp {
    background: #1FA855;
    border-color: #1FA855;
    color: #FFFFFF;
}

.btn-whatsapp:hover {
    background: #17904A;
    border-color: #17904A;
    color: #FFFFFF;
    text-decoration: none;
}

.btn-link {
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--pine);
    font-weight: 600;
}

.btn-link::after {
    content: "→";
    margin-left: 6px;
    transition: transform var(--dur) var(--ease);
}

.btn-link:hover {
    color: var(--pine-dark);
}

.btn-link:hover::after {
    transform: translateX(3px);
}

/* ── Размеры ────────────────────────────────────────────────────── */
.btn-sm {
    padding: 10px 16px;
    font-size: 14px;
    border-radius: var(--radius-sm);
}

.btn-sm.btn-primary::after {
    content: "";
}

.btn-lg {
    padding: 17px 32px;
    font-size: 16.5px;
    border-radius: var(--radius-lg);
}

.btn-block {
    display: flex;
    width: 100%;
}

/* ── Иконка внутри кнопки ───────────────────────────────────────── */
.btn .icon {
    flex: 0 0 auto;
}

/* ── Иконка-кнопка без текста ───────────────────────────────────── */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    color: var(--graphite);
    background: var(--sand-light);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icon-btn:hover {
    background: var(--sand);
    color: var(--graphite);
}

/* ── Бейджи (A5.2) ──────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 7px 11px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.01em;
}

.badge--hit {
    background: var(--accent);
    color: var(--on-accent);
}

.badge--top {
    background: var(--graphite);
    color: var(--on-dark);
}

.badge--tag {
    background: var(--pine);
    color: #FFFFFF;
}

.badge--discount {
    background: #C23B2E;
    color: #FFFFFF;
}

.badge--stock {
    background: var(--success-bg);
    color: var(--success);
}

.badge--new {
    background: var(--warning-bg);
    color: var(--warning);
}

/* Кнопка-ссылка внутри текста (для карточек) */
.card-link {
    font-weight: 700;
    color: var(--accent);
}

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


/* ==========================================================================
   04. Формы: поля, согласие, honeypot, селекты (A5.2)
   ========================================================================== */

.form {
    display: grid;
    gap: 18px;
}

.form__group {
    display: grid;
    gap: 7px;
}

.form__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-soft);
}

.form__input {
    width: 100%;
    padding: 13px 16px;
    border: 2px solid var(--line-dark);
    border-radius: var(--radius);
    background: #FFFFFF;
    color: var(--text);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form__input::placeholder {
    color: var(--text-muted);
}

.form__input:hover {
    border-color: #C4CBC4;
}

.form__input:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(46, 125, 184, 0.18);
}

.form__input.is-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(179, 64, 46, 0.14);
}

.form__input:disabled {
    background: var(--line);
    color: var(--text-muted);
}

textarea.form__input {
    resize: vertical;
    min-height: 74px;
}

/* ── Чекбокс согласия ───────────────────────────────────────────── */
.form__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-soft);
    line-height: 1.45;
    cursor: pointer;
}

.form__consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 1px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.form__consent a {
    color: var(--pine);
    font-weight: 600;
}

/* ── Примечание под кнопкой ─────────────────────────────────────── */
.form__note {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── Honeypot: скрытое поле, которое заполняют только боты ──────── */
.form__group--honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── Сообщение об ошибке ────────────────────────────────────────── */
.form__error {
    font-size: 13px;
    color: var(--danger);
    font-weight: 600;
    display: none;
}

.form__group.is-error .form__error {
    display: block;
}

/* ── Селект-поле (фильтры, квиз) ────────────────────────────────── */
.select-field {
    display: grid;
    gap: 7px;
}

.select-field__label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-soft);
}

.select-field__control {
    width: 100%;
    padding: 12px 42px 12px 16px;
    border: 2px solid var(--line-dark);
    border-radius: var(--radius);
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2522' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease);
}

.select-field__control:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(46, 125, 184, 0.18);
}

/* ── Блок формы в карточке услуги / квиза ───────────────────────── */
.form--inline {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

@media (max-width: 820px) {
    .form--inline {
        grid-template-columns: 1fr;
    }
}

/* Поле с ошибкой (JS-состояние) */
.form .is-error .form__input {
    border-color: var(--danger);
}


/* ==========================================================================
   05. Шапка: логотип, город, контакты, меню, корзина
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--header-z);
    background: rgba(246, 243, 237, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.header-top {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    align-items: center;
    gap: 22px;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* ── Логотип ────────────────────────────────────────────────────── */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo:hover {
    text-decoration: none;
}

.logo__mark {
    display: inline-flex;
    flex: 0 0 auto;
}

.logo__text {
    display: grid;
    gap: 1px;
}

.logo__name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.01em;
    color: var(--graphite);
    line-height: 1.1;
}

.logo__tagline {
    font-size: 11.5px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* ── Выбор города ───────────────────────────────────────────────── */
.city-picker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 2px solid var(--line-dark);
    border-radius: var(--radius);
    background: #FFFFFF;
    color: var(--graphite);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    max-width: 260px;
}

.city-picker:hover {
    border-color: var(--pine);
}

.city-picker .icon:first-child {
    color: var(--accent);
    flex: 0 0 auto;
}

.city-picker__label {
    display: grid;
    gap: 1px;
    text-align: left;
    min-width: 0;
}

.city-picker__caption {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.city-picker__value {
    font-size: 14px;
    font-weight: 700;
    color: var(--graphite);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-picker__chevron {
    color: var(--text-muted);
    flex: 0 0 auto;
}

/* ── Контакты ───────────────────────────────────────────────────── */
.header-contacts {
    display: grid;
    gap: 2px;
    justify-items: end;
    text-align: right;
}

.header-contacts__phone {
    font-family: var(--font-num);
    font-size: 18px;
    font-weight: 800;
    color: var(--graphite);
    white-space: nowrap;
}

.header-contacts__phone:hover {
    color: var(--accent);
    text-decoration: none;
}

.header-contacts__worktime {
    font-size: 12.5px;
    color: var(--text-muted);
}

.header-wa {
    padding: 10px 16px;
    font-size: 14px;
}

/* ── Корзина ────────────────────────────────────────────────────── */
.cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--radius);
    background: var(--graphite);
    color: var(--on-dark);
    font-weight: 700;
    font-size: 14px;
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.cart-button:hover {
    background: #101614;
    color: var(--on-dark);
    text-decoration: none;
}

.cart-button__count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 800;
    border-radius: var(--radius-pill);
    border: 2px solid var(--bg);
}

.cart-button__label {
    white-space: nowrap;
}

/* ── Бургер ─────────────────────────────────────────────────────── */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--sand-light);
}

.burger__line {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background: var(--graphite);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.burger[aria-expanded="true"] .burger__line:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__line:nth-child(2) {
    opacity: 0;
}

.burger[aria-expanded="true"] .burger__line:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* ── Основное меню ──────────────────────────────────────────────── */
.main-nav {
    border-top: 1px solid var(--line);
    background: #FFFFFF;
}

.main-nav__inner {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.main-nav__inner::-webkit-scrollbar {
    display: none;
}

.main-nav__link {
    display: inline-block;
    padding: 14px 16px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.main-nav__link:hover {
    color: var(--accent);
    text-decoration: none;
    border-bottom-color: var(--accent);
}

.main-nav__link.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.main-nav__link--accent {
    color: var(--accent);
    font-weight: 700;
}

/* ── Мобильное меню ─────────────────────────────────────────────── */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: var(--modal-z);
    background: var(--bg);
    padding: 20px var(--gutter-mobile) 40px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.mobile-nav__title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 20px;
}

.mobile-nav__link {
    display: block;
    padding: 14px 4px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 17px;
    color: var(--graphite);
    border-bottom: 1px solid var(--line);
}

.mobile-nav__link:hover {
    color: var(--accent);
    text-decoration: none;
}

.mobile-nav__contacts {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

/* ── Sticky-состояние шапки ─────────────────────────────────────── */
.site-header.is-scrolled {
    box-shadow: var(--shadow-sm);
}

@media (max-width: 1180px) {
    .header-top {
        grid-template-columns: auto 1fr auto auto auto;
        gap: 14px;
    }
    .header-wa {
        display: none;
    }
    .header-contacts__worktime {
        display: none;
    }
}

@media (max-width: 900px) {
    .header-top {
        grid-template-columns: auto 1fr auto auto;
    }
    .header-contacts {
        display: none;
    }
    .main-nav {
        display: none;
    }
    .burger {
        display: flex;
    }
    .city-picker__caption {
        display: none;
    }
    .city-picker__value {
        font-size: 13px;
    }
}

@media (max-width: 640px) {
    .header-top {
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .logo__tagline {
        display: none;
    }
    .logo__name {
        font-size: 17px;
    }
    .city-picker {
        padding: 6px 10px;
        gap: 6px;
        max-width: 150px;
    }
    .cart-button__label {
        display: none;
    }
    .cart-button {
        padding: 10px;
    }
}


/* ==========================================================================
   06. Подвал: сетка ссылок, контакты, мобильная корзина
   ========================================================================== */

.callback-section {
    padding: 64px 0;
}

.callback {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 48px;
    box-shadow: var(--shadow);
}

.callback__title {
    font-size: clamp(22px, 2.6vw, 30px);
    margin-bottom: 12px;
}

.callback__text {
    color: var(--text-soft);
    font-size: 17px;
    max-width: 520px;
}

.callback__list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    gap: 10px;
}

.callback__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-soft);
}

.callback__item::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 13px;
    font-weight: 800;
}

/* ── Подвал ─────────────────────────────────────────────────────── */
.site-footer {
    background: var(--graphite);
    color: rgba(246, 243, 237, 0.82);
    padding: 64px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 40px;
    padding-bottom: 40px;
}

.footer-col {
    display: grid;
    align-content: start;
    gap: 16px;
}

.footer-col__title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--on-dark);
    margin: 0;
}

.footer-col__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
}

.footer-col__link {
    color: rgba(246, 243, 237, 0.78);
    font-size: 14.5px;
    line-height: 1.4;
}

.footer-col__link:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.footer-col__link--accent {
    color: #E4A078;
    font-weight: 700;
}

.logo--footer .logo__name {
    color: var(--on-dark);
}

.logo--footer .logo__tagline {
    color: rgba(246, 243, 237, 0.6);
}

.footer__about {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(246, 243, 237, 0.72);
    margin: 0;
}

.footer__contacts {
    display: grid;
    gap: 5px;
}

.footer__phone {
    font-family: var(--font-num);
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
}

.footer__phone:hover {
    color: #E4A078;
    text-decoration: none;
}

.footer__worktime,
.footer__email,
.footer__address {
    font-size: 14px;
    color: rgba(246, 243, 237, 0.72);
}

.footer__email:hover {
    color: #FFFFFF;
}

/* ── Нижняя полоса ──────────────────────────────────────────────── */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid rgba(246, 243, 237, 0.14);
    padding-top: 24px;
    font-size: 13.5px;
    color: rgba(246, 243, 237, 0.6);
}

.footer-bottom__copy {
    margin: 0;
}

.footer-bottom__links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 0;
}

.footer-bottom__link {
    color: rgba(246, 243, 237, 0.78);
}

.footer-bottom__link:hover {
    color: #FFFFFF;
}

.footer-bottom__note {
    width: 100%;
    margin: 0;
    font-size: 12.5px;
    color: rgba(246, 243, 237, 0.45);
}

/* ── Мобильная липкая корзина (420px и уже) ─────────────────────── */
.mobile-cart-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--header-z) + 10);
    padding: 10px var(--gutter-mobile);
    background: rgba(246, 243, 237, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(30, 37, 34, 0.08);
}

.mobile-cart-bar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: var(--radius-pill);
    background: #FFFFFF;
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
}

@media (max-width: 1180px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .footer-col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .callback {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        gap: 28px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ==========================================================================
   07. Первый экран (Hero) и метрики сервиса
   ========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--graphite);
    color: var(--on-dark);
}

.hero__media {
    position: absolute;
    inset: 0;
}

.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.32;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(30, 37, 34, 0.92) 0%, rgba(30, 37, 34, 0.55) 55%, rgba(30, 37, 34, 0.25) 100%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 48px;
    align-items: center;
    padding-top: 72px;
    padding-bottom: 88px;
}

.hero__content {
    max-width: 640px;
}

.hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #E4A078;
    margin-bottom: 18px;
}

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

.hero__title {
    color: var(--on-dark);
    margin-bottom: 18px;
}

.hero__subtitle {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(246, 243, 237, 0.85);
    max-width: 560px;
    margin-bottom: 30px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.hero__note {
    font-size: 14px;
    color: rgba(246, 243, 237, 0.7);
    margin: 0;
}

.hero__note::before {
    content: "✓ ";
    color: #8FCEA8;
    font-weight: 800;
}

/* ── Панель «Сейчас на складе» ──────────────────────────────────── */
.stock-panel {
    background: rgba(246, 243, 237, 0.97);
    color: var(--text);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-lg);
}

.stock-panel__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--graphite);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stock-panel__title::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2FBF71;
    box-shadow: 0 0 0 4px rgba(47, 191, 113, 0.22);
}

.stock-panel__list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    gap: 4px;
}

.stock-panel__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--radius);
    transition: background var(--dur) var(--ease);
}

.stock-panel__link:hover {
    background: var(--sand-light);
    text-decoration: none;
}

.stock-panel__name {
    font-weight: 600;
    color: var(--graphite);
    font-size: 15px;
}

.stock-panel__price {
    font-family: var(--font-num);
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
    font-size: 15px;
}

.stock-panel__more {
    display: inline-block;
    font-weight: 700;
    color: var(--pine);
}

/* ── Метрики сервиса внизу первого экрана ───────────────────────── */
.hero-metrics {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(246, 243, 237, 0.2);
    padding-top: 26px;
    padding-bottom: 26px;
}

.hero-metrics__item {
    display: grid;
    gap: 4px;
    padding: 0 18px;
    border-left: 1px solid rgba(246, 243, 237, 0.16);
}

.hero-metrics__item:first-child {
    border-left: none;
    padding-left: 0;
}

.hero-metrics__value {
    font-family: var(--font-num);
    font-size: 22px;
    font-weight: 800;
    color: #E4A078;
}

.hero-metrics__label {
    font-size: 13px;
    color: rgba(246, 243, 237, 0.72);
}

/* ── Адаптив ────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .stock-panel {
        max-width: 560px;
    }
    .hero-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .hero-metrics__item {
        border-left: none;
        padding: 0;
    }
}

@media (max-width: 640px) {
    .hero__subtitle {
        font-size: 16.5px;
    }
    .hero__actions .btn {
        width: 100%;
    }
    .hero-metrics__value {
        font-size: 19px;
    }
}

@media (max-width: 420px) {
    .hero__inner {
        padding-top: 36px;
        padding-bottom: 36px;
    }
    .hero-metrics {
        grid-template-columns: 1fr;
    }
    .stock-panel {
        padding: 20px;
    }
}


/* ==========================================================================
   08. Карточки: товар, акция, подбор, условия, работа, отзыв, статья, услуга
   ========================================================================== */

/* ── Сетка каталога ─────────────────────────────────────────────── */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

/* ── Карточка товара ────────────────────────────────────────────── */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--line-dark);
}

.product-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--sand-light);
    overflow: hidden;
}

.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.product-card:hover .product-card__img {
    transform: scale(1.04);
}

.product-card__badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
    gap: 10px;
}

.product-card__title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.product-card__title a {
    color: var(--graphite);
}

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

.product-card__specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-card__spec {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    background: var(--sand-light);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    margin: 0;
}

.product-card__stock {
    font-size: 13px;
    font-weight: 600;
    color: var(--success);
    display: flex;
    align-items: center;
    gap: 7px;
}

.product-card__stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2FBF71;
}

.product-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
}

.product-card__price {
    font-size: 22px;
    font-weight: 800;
    color: var(--graphite);
}

.product-card__old {
    font-size: 15px;
    color: var(--text-muted);
    text-decoration: line-through;
    font-family: var(--font-num);
}

.product-card__discount {
    font-size: 12.5px;
    font-weight: 800;
    color: #C23B2E;
    background: var(--danger-bg);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

.product-card__unit {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: -4px;
}

.product-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

/* ── Карточка акции ─────────────────────────────────────────────── */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.promo-grid--list {
    grid-template-columns: repeat(2, 1fr);
}

.promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px;
    border-radius: var(--radius-xl);
    background: #FFFFFF;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.promo-card--terracotta {
    background: linear-gradient(135deg, #B86535 0%, #9C542C 100%);
    color: #FFFFFF;
    border-color: transparent;
}

.promo-card--pine {
    background: linear-gradient(135deg, #2F6451 0%, #24503F 100%);
    color: #FFFFFF;
    border-color: transparent;
}

.promo-card--graphite {
    background: linear-gradient(135deg, #1E2522 0%, #101614 100%);
    color: var(--on-dark);
    border-color: transparent;
}

.promo-card__icon {
    color: var(--accent);
}

.promo-card--terracotta .promo-card__icon,
.promo-card--pine .promo-card__icon,
.promo-card--graphite .promo-card__icon {
    color: #F6D9C3;
}

.promo-card__title {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
}

.promo-card--terracotta .promo-card__title,
.promo-card--pine .promo-card__title,
.promo-card--graphite .promo-card__title {
    color: #FFFFFF;
}

.promo-card__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-soft);
    margin: 0;
    flex: 1;
}

.promo-card--terracotta .promo-card__text,
.promo-card--pine .promo-card__text,
.promo-card--graphite .promo-card__text {
    color: rgba(255, 255, 255, 0.85);
}

.promo-card__link {
    font-weight: 700;
    color: var(--pine);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.promo-card--terracotta .promo-card__link,
.promo-card--pine .promo-card__link,
.promo-card--graphite .promo-card__link {
    color: #FFFFFF;
}

.promo-card__link::after {
    content: "→";
    transition: transform var(--dur) var(--ease);
}

.promo-card__link:hover::after {
    transform: translateX(3px);
}

/* ── Карточка подбора по задаче ─────────────────────────────────── */
.pick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin-bottom: 28px;
}

.pick-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pick-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
    text-decoration: none;
}

.pick-card__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--sand-light);
    color: var(--accent);
    margin-bottom: 6px;
}

.pick-card__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: var(--graphite);
}

.pick-card__hint {
    font-size: 13.5px;
    color: var(--text-muted);
}

/* ── Фильтры подбора ────────────────────────────────────────────── */
.pick-filters {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.pick-filters__title {
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--graphite);
}

.pick-filters__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.pick-filters__result {
    margin: 14px 0 0;
    font-weight: 600;
    color: var(--pine);
    min-height: 20px;
}

/* ── Карточка условия использования ─────────────────────────────── */
.conditions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.condition-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.condition-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    text-decoration: none;
}

.condition-card__icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pine);
    color: #FFFFFF;
    margin-bottom: 8px;
}

.condition-card__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: var(--graphite);
}

.condition-card__desc {
    font-size: 14.5px;
    color: var(--text-soft);
    line-height: 1.6;
}

/* ── Карточка работы ────────────────────────────────────────────── */
.works-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.work-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--graphite);
    aspect-ratio: 4 / 3;
}

.work-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease), opacity var(--dur) var(--ease);
}

.work-card:hover .work-card__img {
    transform: scale(1.05);
    opacity: 0.85;
}

.work-card__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 3px;
    padding: 40px 16px 14px;
    background: linear-gradient(180deg, transparent 0%, rgba(30, 37, 34, 0.88) 70%);
    color: var(--on-dark);
}

.work-card__type {
    font-weight: 800;
    font-size: 15px;
    color: #FFFFFF;
}

.work-card__meta {
    font-size: 12.5px;
    color: rgba(246, 243, 237, 0.8);
}

/* ── Карточка отзыва ────────────────────────────────────────────── */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}

.review-card {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
}

.review-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.review-card__avatar {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sand);
    color: var(--graphite);
    font-weight: 800;
    font-size: 19px;
    flex: 0 0 auto;
}

.review-card__name {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.review-card__date {
    font-size: 13px;
    color: var(--text-muted);
}

.review-card__stars {
    margin-left: auto;
    color: #E0A33C;
    letter-spacing: 2px;
    font-size: 16px;
}

.review-card__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-soft);
    margin: 0;
}

/* ── Карточка статьи ────────────────────────────────────────────── */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.blog-card {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

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

.blog-card__num {
    font-family: var(--font-num);
    font-size: 34px;
    font-weight: 800;
    color: var(--sand);
    line-height: 1;
    margin-bottom: 12px;
}

.blog-card__title {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 10px;
}

.blog-card__title a {
    color: var(--graphite);
}

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

.blog-card__short {
    font-size: 14.5px;
    color: var(--text-soft);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 14px;
}

.blog-card__more {
    font-weight: 700;
    color: var(--pine);
}

/* ── Карточка услуги ────────────────────────────────────────────── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

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

.service-card__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--sand-light);
    color: var(--accent);
}

.service-card__title {
    font-size: 16.5px;
    line-height: 1.35;
    margin: 0;
}

.service-card__title a {
    color: var(--graphite);
}

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

.service-card__short {
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.service-card__price {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 16px;
    color: var(--pine);
}

.service-card__btn {
    align-self: flex-start;
}

.service-section {
    margin-bottom: 56px;
}

.service-section .section__title {
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--line);
}

/* ── Адаптив карточек ───────────────────────────────────────────── */
@media (max-width: 1280px) {
    .catalog-grid { grid-template-columns: repeat(3, 1fr); }
    .works-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .pick-grid, .conditions-grid, .blog-grid, .services-grid { grid-template-columns: repeat(2, 1fr); }
    .promo-grid { grid-template-columns: 1fr; }
    .promo-grid--list { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
    .reviews-grid { grid-template-columns: 1fr; }
    .works-grid { grid-template-columns: repeat(2, 1fr); }
    .pick-filters__row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pick-grid, .conditions-grid, .blog-grid, .services-grid { grid-template-columns: 1fr; }
    .product-card__actions { grid-template-columns: 1fr; }
    .works-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .pick-filters__row { grid-template-columns: 1fr; }
    .product-card__price { font-size: 19px; }
}


/* ==========================================================================
   09. Квиз «Умный калькулятор» (5.5)
   ========================================================================== */

.quiz {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 44px;
    max-width: 960px;
    margin: 0 auto;
}

.quiz__head {
    text-align: center;
    margin-bottom: 28px;
}

.quiz__title {
    margin-bottom: 8px;
}

.quiz__subtitle {
    color: var(--text-soft);
    max-width: 560px;
    margin: 0 auto;
}

.quiz__progress {
    height: 6px;
    border-radius: 4px;
    background: var(--line);
    margin-bottom: 28px;
    overflow: hidden;
}

.quiz__progress-bar {
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), #D98E5F);
    transition: width var(--dur-slow) var(--ease);
}

.quiz__step-title {
    font-size: 22px;
    margin-bottom: 20px;
}

.quiz__options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.quiz__option {
    position: relative;
    cursor: pointer;
}

.quiz__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.quiz__option-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 20px;
    border: 2px solid var(--line-dark);
    border-radius: var(--radius);
    background: #FFFFFF;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.quiz__option:hover .quiz__option-body {
    border-color: var(--accent);
}

.quiz__radio:checked + .quiz__option-body {
    border-color: var(--accent);
    background: #FBF1E8;
    box-shadow: 0 0 0 3px rgba(184, 101, 53, 0.15);
}

.quiz__radio:focus-visible + .quiz__option-body {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.quiz__option-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
    color: var(--graphite);
}

.quiz__option-desc {
    font-size: 13.5px;
    color: var(--text-muted);
}

/* ── Слайдер объёма ─────────────────────────────────────────────── */
.quiz__range {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.quiz__range-label {
    font-weight: 700;
    color: var(--graphite);
}

.quiz__range-input {
    width: 100%;
    accent-color: var(--accent);
    height: 8px;
    cursor: pointer;
}

.quiz__range-value {
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 28px;
    color: var(--accent);
}

.quiz__range-note {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 10px;
}

.quiz__volume {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.quiz__volume-btn {
    padding: 10px 18px;
    border: 2px solid var(--line-dark);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 14px;
    color: var(--graphite);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.quiz__volume-btn:hover,
.quiz__volume-btn.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
}

/* ── Навигация квиза ────────────────────────────────────────────── */
.quiz__nav {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.quiz__nav .btn {
    min-width: 160px;
}

.quiz__supply {
    max-width: 360px;
    margin-bottom: 22px;
}

/* ── Результат и успех ──────────────────────────────────────────── */
.quiz__result {
    background: var(--success-bg);
    border: 1px solid #C9DECF;
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
}

.quiz__result b {
    color: var(--success);
}

.quiz__success {
    text-align: center;
    padding: 40px 20px;
}

.quiz__success-icon {
    color: var(--success);
    margin-bottom: 16px;
}

.quiz__success-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.quiz__success-text {
    color: var(--text-soft);
    max-width: 460px;
    margin: 0 auto;
}

/* ── Адаптив ────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .quiz { padding: 28px 20px; }
    .quiz__options { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .quiz { padding: 24px 16px; }
    .quiz__nav { flex-direction: column; }
    .quiz__nav .btn { width: 100%; }
    .quiz__range-value { font-size: 24px; }
}


/* ==========================================================================
   10. Таблицы: рейтинг пород, прайс, характеристики
   ========================================================================== */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: #FFFFFF;
}

/* ── Рейтинг пород (5.7) ────────────────────────────────────────── */
.rating-table {
    min-width: 860px;
    font-size: 15px;
}

.rating-table th,
.rating-table td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.rating-table thead th {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--sand-light);
}

.rating-table thead th:nth-child(2),
.rating-table thead th:nth-child(3),
.rating-table thead th:nth-child(4),
.rating-table thead th:nth-child(5) {
    text-align: center;
}

.rating-table tbody th {
    font-weight: 700;
    color: var(--graphite);
}

.rating-table tbody th a {
    color: var(--graphite);
}

.rating-table tbody th a:hover {
    color: var(--accent);
    text-decoration: none;
}

.rating-table td:nth-child(2),
.rating-table td:nth-child(3),
.rating-table td:nth-child(4),
.rating-table td:nth-child(5) {
    text-align: center;
    font-family: var(--font-num);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rating-table tbody tr:last-child td,
.rating-table tbody tr:last-child th {
    border-bottom: none;
}

.stars {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 800;
}

.stars::before {
    content: "★";
    font-size: 16px;
}

/* ── Прайс-таблица (5.10) ───────────────────────────────────────── */
.price-table {
    min-width: 760px;
    font-size: 15px;
}

.price-table th,
.price-table td {
    padding: 15px 18px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.price-table thead th {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--sand-light);
}

.price-table tbody tr:last-child td {
    border-bottom: none;
}

.price-table tbody tr {
    transition: background var(--dur) var(--ease);
}

.price-table tbody tr:hover {
    background: #FCFAF6;
}

.price-table__price {
    font-weight: 800;
    color: var(--graphite);
    white-space: nowrap;
}

.price-table td a {
    font-weight: 600;
}

/* ── Таблица характеристик товара (6.2) ─────────────────────────── */
.spec-table {
    max-width: 720px;
    font-size: 15px;
}

.spec-table th,
.spec-table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.spec-table th {
    width: 40%;
    font-weight: 600;
    color: var(--text-soft);
    background: var(--sand-light);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

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

/* ── Адаптив: таблицы на мобильных превращаются в карточки ─────── */
@media (max-width: 820px) {
    .rating-table,
    .price-table {
        min-width: 100%;
    }

    .price-table thead {
        display: none;
    }

    .price-table tbody tr {
        display: block;
        border-bottom: 1px solid var(--line);
        padding: 12px 0;
    }

    .price-table tbody tr:last-child {
        border-bottom: none;
    }

    .price-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        border: none;
        padding: 7px 16px;
    }

    .price-table td::before {
        content: attr(data-label);
        font-size: 12.5px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .price-table td[data-label=""] {
        justify-content: flex-start;
    }

    .price-table td[data-label=""]::before {
        content: "";
        display: none;
    }
}


/* ==========================================================================
   11. Каталог: фильтры, сортировка, счётчик, пустое состояние (6.1)
   ========================================================================== */

.catalog-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 18px;
}

.catalog-filter__group {
    display: grid;
    gap: 6px;
    min-width: 150px;
    flex: 1 1 140px;
}

.catalog-filter__label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.catalog-filter__select {
    width: 100%;
    padding: 11px 38px 11px 14px;
    border: 2px solid var(--line-dark);
    border-radius: var(--radius);
    background: #FFFFFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2522' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font-size: 14.5px;
    color: var(--text);
}

.catalog-filter__select:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(46, 125, 184, 0.16);
}

.catalog-filter__reset {
    flex: 0 0 auto;
    padding: 11px 18px;
    font-size: 14px;
}

.catalog-filter__count {
    font-weight: 700;
    color: var(--pine);
    margin: 0 0 18px;
    min-height: 22px;
}

/* Пустое состояние */
.catalog-empty {
    text-align: center;
    padding: 60px 20px;
    background: #FFFFFF;
    border: 1px dashed var(--line-dark);
    border-radius: var(--radius-lg);
    display: grid;
    gap: 16px;
    justify-items: center;
}

.catalog-empty p {
    margin: 0;
    color: var(--text-soft);
    font-size: 17px;
}

/* Липкая панель фильтров на мобильном (6.1) */
@media (max-width: 640px) {
    .catalog-filter {
        position: sticky;
        top: 60px;
        z-index: calc(var(--header-z) - 1);
        gap: 10px;
        padding: 14px;
        box-shadow: var(--shadow-sm);
    }
    .catalog-filter__group {
        min-width: calc(50% - 6px);
        flex: 1 1 40%;
    }
    .catalog-filter__reset {
        width: 100%;
    }
}


/* ==========================================================================
   12. Карточка товара: галерея, цена, количество, вкладки (6.2)
   ========================================================================== */

.product {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: start;
}

/* ── Галерея ────────────────────────────────────────────────────── */
.product-gallery {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--sand-light);
    aspect-ratio: 4 / 3;
}

.product-gallery__slide {
    display: none;
}

.product-gallery__slide.is-active {
    display: block;
}

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

.product-gallery__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.product-gallery__thumb {
    width: 96px;
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid var(--line);
    opacity: 0.7;
    transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

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

.product-gallery__thumb:hover {
    opacity: 1;
}

.product-gallery__thumb.is-active {
    opacity: 1;
    border-color: var(--accent);
}

/* ── Информация о товаре ────────────────────────────────────────── */
.product__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.product__price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.product__price {
    font-size: 36px;
    font-weight: 800;
    color: var(--graphite);
}

.product__old {
    font-size: 19px;
    color: var(--text-muted);
    text-decoration: line-through;
    font-family: var(--font-num);
}

.product__unit {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 22px;
}

.product__qty {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.product__qty-label {
    font-weight: 700;
    color: var(--text-soft);
    font-size: 14.5px;
}

.qty {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--line-dark);
    border-radius: var(--radius);
    overflow: hidden;
    background: #FFFFFF;
}

.qty__btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--graphite);
    background: var(--sand-light);
    transition: background var(--dur) var(--ease);
}

.qty__btn:hover {
    background: var(--sand);
}

.qty__input {
    width: 64px;
    height: 44px;
    text-align: center;
    border: none;
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 17px;
    -moz-appearance: textfield;
    appearance: textfield;
}

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

.product__qty-unit {
    font-weight: 600;
    color: var(--text-soft);
}

.product__total {
    font-family: var(--font-num);
    font-size: 17px;
    font-weight: 700;
    color: var(--pine);
    margin-bottom: 18px;
    min-height: 24px;
}

.product__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.product__actions .btn-lg {
    padding: 16px 20px;
}

.product__assurances {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.product__assurance {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text-soft);
}

.product__assurance::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 12px;
    font-weight: 800;
}

/* ── Вкладки ────────────────────────────────────────────────────── */
.tabs {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 8px;
}

.tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    padding: 0 8px;
}

.tabs__btn {
    padding: 14px 20px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 15px;
    color: var(--text-soft);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

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

.tabs__btn.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tabs__panel {
    padding: 28px 12px 20px;
}

/* ── Адаптив ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .product {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 640px) {
    .product__actions {
        grid-template-columns: 1fr;
    }
    .product__price {
        font-size: 30px;
    }
    .tabs__btn {
        padding: 12px 14px;
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .product-gallery__thumb {
        width: 74px;
        height: 56px;
    }
    .product__qty {
        flex-wrap: wrap;
    }
}


/* ==========================================================================
   13. Страницы: доставка, контакты, опт, гарантии, 404, корзина, оформление
   ========================================================================== */

/* ── Блок доставки (5.11) ───────────────────────────────────────── */
.delivery-block {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 32px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 36px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 32px;
}

.delivery-block__title {
    font-size: 24px;
    margin-bottom: 16px;
}

.delivery-block__list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 11px;
}

.delivery-block__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text);
    font-size: 15.5px;
}

.delivery-block__item::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 13px;
    font-weight: 800;
}

.delivery-block__note {
    font-size: 14px;
    color: var(--text-muted);
    background: var(--sand-light);
    border-left: 4px solid var(--accent);
    padding: 12px 16px;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.delivery-block__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.delivery-block__subtitle {
    font-size: 18px;
    margin-bottom: 14px;
}

.delivery-dates {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: grid;
    gap: 10px;
}

.delivery-dates__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    background: var(--sand-light);
    border-radius: var(--radius);
}

.delivery-dates__day {
    font-weight: 800;
    color: var(--graphite);
}

.delivery-dates__status {
    font-size: 13.5px;
    color: var(--text-soft);
    text-align: right;
}

.delivery-zones {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.delivery-zones__item {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 3px;
}

.delivery-zones__title {
    font-weight: 800;
    color: var(--graphite);
    font-size: 15px;
}

.delivery-zones__desc {
    font-size: 13.5px;
    color: var(--text-soft);
    line-height: 1.5;
}

/* ── Блок расчёта доставки / формы на страницах ─────────────────── */
.delivery-calc {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 36px;
    max-width: 640px;
    box-shadow: var(--shadow-sm);
}

.delivery-calc__form {
    margin-top: 8px;
}

/* ── Контакты ───────────────────────────────────────────────────── */
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.contact-card {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-sm);
}

.contact-card__icon {
    color: var(--accent);
    margin-bottom: 6px;
}

.contact-card__title {
    font-size: 15px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.contact-card__value {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 18px;
    color: var(--graphite);
    line-height: 1.35;
    word-break: break-word;
}

.contact-card__note {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* ── Опт ────────────────────────────────────────────────────────── */
.opt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}

.opt-card {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    display: grid;
    gap: 10px;
    box-shadow: var(--shadow-sm);
}

.opt-card__title {
    font-size: 19px;
}

.opt-card__text {
    color: var(--text-soft);
    margin: 0;
    line-height: 1.65;
}

/* ── Гарантии ───────────────────────────────────────────────────── */
.warranty-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}

.warranty-card {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-left: 5px solid var(--pine);
    border-radius: var(--radius-lg);
    padding: 26px;
    display: grid;
    gap: 10px;
    box-shadow: var(--shadow-sm);
}

.warranty-card__title {
    font-size: 18px;
}

.warranty-card__text {
    color: var(--text-soft);
    margin: 0;
    line-height: 1.65;
}

/* ── 404 ────────────────────────────────────────────────────────── */
.section--404 {
    text-align: center;
    padding: 110px 0;
}

.error-code {
    font-family: var(--font-num);
    font-size: clamp(80px, 14vw, 150px);
    font-weight: 800;
    line-height: 1;
    color: var(--sand);
    margin: 0 0 10px;
}

.error-title {
    font-size: clamp(24px, 3.5vw, 36px);
    margin-bottom: 14px;
}

.error-text {
    color: var(--text-soft);
    font-size: 17px;
    max-width: 520px;
    margin: 0 auto 28px;
}

.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Корзина ────────────────────────────────────────────────────── */
.cart-page {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 32px;
    align-items: start;
}

.cart-item {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 16px;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 14px;
}

.cart-item__img {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.cart-item__title {
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 6px;
}

.cart-item__meta {
    font-size: 13px;
    color: var(--text-muted);
}

.cart-item__right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cart-item__price {
    font-family: var(--font-num);
    font-weight: 800;
    white-space: nowrap;
}

.cart-item__remove {
    color: var(--text-muted);
    padding: 6px;
    border-radius: var(--radius-sm);
}

.cart-item__remove:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

.cart-page__summary {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 26px;
    position: sticky;
    top: 120px;
    display: grid;
    gap: 16px;
}

.cart-page__summary-title {
    font-size: 19px;
    margin: 0;
}

.cart-summary__rows {
    display: grid;
    gap: 10px;
    margin: 0;
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
}

.cart-summary__row dt {
    color: var(--text-soft);
}

.cart-summary__row dd {
    margin: 0;
    font-weight: 700;
    font-family: var(--font-num);
}

.cart-summary__row--total {
    border-top: 2px solid var(--line);
    padding-top: 14px;
    font-size: 19px;
}

.cart-summary__row--total dt {
    color: var(--graphite);
    font-weight: 800;
}

.cart-summary__row--total dd {
    color: var(--accent);
    font-size: 22px;
}

.cart-summary__note {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.cart-noscript {
    background: var(--warning-bg);
    border: 1px solid #E8D5B0;
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-top: 20px;
}

.cart-noscript p {
    margin: 0;
}

/* ── Оформление заказа ──────────────────────────────────────────── */
.checkout {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 32px;
    align-items: start;
}

.checkout__main,
.checkout__aside {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.checkout__h2 {
    font-size: 20px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--line);
}

.checkout__aside {
    position: sticky;
    top: 120px;
    display: grid;
    gap: 16px;
}

/* ── Страница услуги ────────────────────────────────────────────── */
.service-page {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 40px;
    align-items: start;
}

.service-page__short {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-soft);
    margin-bottom: 24px;
}

.service-page__h2 {
    font-size: 20px;
    margin: 28px 0 14px;
}

.service-page__list {
    padding-left: 1.4em;
}

.service-page__list li {
    margin-bottom: 8px;
    font-size: 15.5px;
}

.service-page__consult-note {
    font-size: 14px;
    color: var(--text-muted);
    background: var(--sand-light);
    border-left: 4px solid var(--accent);
    padding: 12px 16px;
    border-radius: 0 var(--radius) var(--radius) 0;
}

.service-side {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 26px;
    position: sticky;
    top: 120px;
    display: grid;
    gap: 12px;
    box-shadow: var(--shadow-sm);
}

.service-side__label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.service-side__price {
    font-family: var(--font-num);
    font-size: 30px;
    font-weight: 800;
    color: var(--graphite);
}

.service-side__unit {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: -8px;
}

.service-side__note {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
}

/* ── Блог-пост CTA ──────────────────────────────────────────────── */
.blog-post__cta {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 32px;
    margin-top: 40px;
    box-shadow: var(--shadow-sm);
}

/* ── Ссылки на города на странице городов ───────────────────────── */
.region-block {
    margin-bottom: 36px;
}

.region-block__title {
    font-size: 20px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--line);
}

.region-block__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px 16px;
}

.region-block__link {
    display: block;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    color: var(--text);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.region-block__link:hover {
    background: var(--sand-light);
    color: var(--accent);
    text-decoration: none;
}

@media (max-width: 1280px) {
    .region-block__list { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
    .delivery-block, .cart-page, .checkout, .service-page { grid-template-columns: 1fr; }
    .contacts-grid { grid-template-columns: repeat(2, 1fr); }
    .region-block__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .delivery-block, .delivery-calc { padding: 24px 18px; }
    .contacts-grid { grid-template-columns: 1fr; }
    .opt-grid, .warranty-grid { grid-template-columns: 1fr; }
    .region-block__list { grid-template-columns: repeat(2, 1fr); }
    .cart-item {
        grid-template-columns: 72px 1fr;
    }
    .cart-item__right {
        grid-column: 1 / -1;
        justify-content: space-between;
    }
    .checkout__main, .checkout__aside { padding: 22px 18px; }
}


/* ==========================================================================
   14. FAQ-аккордеон, выбор города, тосты, модальные окна
   ========================================================================== */

/* ── Аккордеон FAQ ──────────────────────────────────────────────── */
.faq-accordion {
    display: grid;
    gap: 12px;
}

.faq-accordion__item {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.faq-accordion__item.is-open {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.faq-accordion__question {
    margin: 0;
}

.faq-accordion__button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    text-align: left;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 16px;
    color: var(--graphite);
}

.faq-accordion__button:hover {
    color: var(--accent);
}

.faq-accordion__chevron {
    flex: 0 0 auto;
    color: var(--accent);
    transition: transform var(--dur) var(--ease);
}

.faq-accordion__item.is-open .faq-accordion__chevron {
    transform: rotate(180deg);
}

.faq-accordion__answer {
    padding: 0 20px 18px;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.65;
}

.faq-accordion__answer p {
    margin: 0;
}

/* ── Выбор города: кнопка в шапке, диалог ───────────────────────── */
.drawer {
    position: fixed;
    inset: 0;
    z-index: var(--drawer-z);
    display: flex;
    justify-content: flex-end;
}

.drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 37, 34, 0.55);
    backdrop-filter: blur(2px);
    animation: fade-in var(--dur) var(--ease);
}

.drawer__panel {
    position: relative;
    width: min(480px, 100%);
    height: 100%;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    animation: slide-in var(--dur-slow) var(--ease);
    overflow: hidden;
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px var(--gutter);
    border-bottom: 1px solid var(--line);
}

.drawer__title {
    font-size: 20px;
    margin: 0;
}

.city-search {
    position: relative;
    padding: 16px var(--gutter) 8px;
}

.city-search__icon {
    position: absolute;
    left: calc(var(--gutter) + 14px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.city-search__input {
    width: 100%;
    padding: 13px 16px 13px 44px;
    border: 2px solid var(--line-dark);
    border-radius: var(--radius);
    background: #FFFFFF;
    font-size: 15.5px;
}

.city-search__input:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgba(46, 125, 184, 0.16);
}

.city-search__current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px var(--gutter);
    font-size: 14px;
}

.city-search__current-label {
    color: var(--text-muted);
}

.city-search__current-value {
    font-weight: 800;
    color: var(--graphite);
}

.city-search__results {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex: 1;
}

.city-search__results li {
    margin: 0;
}

.city-search__result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px var(--gutter);
    border-bottom: 1px solid var(--line);
    color: var(--text);
    transition: background var(--dur) var(--ease);
}

.city-search__result:hover {
    background: var(--sand-light);
    text-decoration: none;
}

.city-search__result.is-current {
    background: var(--sand-light);
    font-weight: 700;
    color: var(--accent);
}

.city-search__result-region {
    font-size: 12.5px;
    color: var(--text-muted);
}

.city-search__empty {
    padding: 24px var(--gutter);
    color: var(--text-muted);
    text-align: center;
}

/* Результаты на странице /goroda/ */
.city-search--page {
    max-width: 560px;
    margin-bottom: 12px;
}

.city-search--page .city-search__input {
    padding-left: 44px;
}

.city-search__results--page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 28px;
}

.city-search__results--page .city-search__result {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin: 0;
}

/* ── Блок «Ближайшие города» ────────────────────────────────────── */
.city-links {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.city-links__note {
    font-size: 14px;
    color: var(--text-soft);
    margin-bottom: 14px;
}

.city-links__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.city-links__link {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--graphite);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.city-links__link:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--on-accent);
    text-decoration: none;
}

.city-links__link--accent {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Тосты ──────────────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: var(--toast-z);
    background: var(--graphite);
    color: var(--on-dark);
    padding: 16px 22px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    opacity: 0;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    max-width: min(560px, calc(100vw - 32px));
}

.toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast__link {
    color: #E4A078;
    font-weight: 800;
    white-space: nowrap;
}

.toast__link:hover {
    color: #F0B48E;
}

/* ── Модальное окно «Быстрый заказ» ─────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    z-index: var(--modal-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 37, 34, 0.6);
    backdrop-filter: blur(2px);
}

.modal__panel {
    position: relative;
    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: var(--radius-xl);
    padding: 30px;
    box-shadow: var(--shadow-lg);
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.modal__title {
    font-size: 20px;
    margin: 0;
}

/* ── Анимации ───────────────────────────────────────────────────── */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@media (max-width: 820px) {
    .city-search__results--page {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .city-search__results--page {
        grid-template-columns: 1fr;
    }
    .toast {
        bottom: 76px;
        left: 16px;
        right: 16px;
        transform: translateX(0);
        flex-wrap: wrap;
    }
    .toast.is-visible {
        transform: translateX(0);
    }
}


/* ==========================================================================
   15. Утилиты, качество, состояния, анимации
   ========================================================================== */

/* ── Шаги контроля качества (5.9) ───────────────────────────────── */
.quality-steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gap);
}

.quality-step {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    display: grid;
    gap: 8px;
    min-height: 190px;
}

.quality-step__num {
    font-family: var(--font-num);
    font-size: 15px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.05em;
}

.quality-step__title {
    font-size: 16px;
    margin: 0;
}

.quality-step__text {
    font-size: 13.5px;
    color: var(--text-soft);
    line-height: 1.55;
    margin: 0;
}

/* ── Выравнивание и отступы ─────────────────────────────────────── */
.text-center { text-align: center; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

/* ── Состояние загрузки кнопок ──────────────────────────────────── */
.btn.is-loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.btn-outline.is-loading::before {
    border-color: rgba(30, 37, 34, 0.2);
    border-top-color: var(--graphite);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Скелетон-заглушка изображений ──────────────────────────────── */
.img-skeleton {
    background: linear-gradient(100deg, var(--sand-light) 40%, var(--sand) 50%, var(--sand-light) 60%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
    to { background-position: -200% 0; }
}

/* ── Полоса прокрутки (webkit) ──────────────────────────────────── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--line);
}

::-webkit-scrollbar-thumb {
    background: #B9C2BA;
    border-radius: 6px;
    border: 2px solid var(--line);
}

::-webkit-scrollbar-thumb:hover {
    background: #9AA69D;
}

/* ── Поддержка большого курсора/прицеливания ───────────────────── */
@media (hover: none) {
    .product-card:hover,
    .pick-card:hover,
    .condition-card:hover,
    .blog-card:hover,
    .service-card:hover {
        transform: none;
    }
}

/* ── Изображения: предотвращение CLS ────────────────────────────── */
img {
    aspect-ratio: attr(width) / attr(height);
}

/* ── Печать ─────────────────────────────────────────────────────── */
@media print {
    .site-header,
    .site-footer,
    .callback-section,
    .mobile-cart-bar,
    .btn,
    .drawer,
    .toast {
        display: none !important;
    }

    body {
        background: #FFFFFF;
        color: #000000;
    }

    .section {
        padding: 24px 0;
    }

    a {
        color: #000000;
    }
}


/* ==========================================================================
   16. Глобальная адаптивность (A5.4)
   Контрольные ширины: 1920, 1680, 1440, 1280, 1024, 980, 820, 640, 420, 360.
   ========================================================================== */

/* ── 1680–1920: широкие экраны ──────────────────────────────────── */
@media (min-width: 1680px) {
    .container {
        max-width: 1360px;
    }
    .section {
        padding: 112px 0;
    }
}

/* ── 1280–1440: стандартный desktop ─────────────────────────────── */
@media (min-width: 1281px) and (max-width: 1440px) {
    .hero__inner {
        padding-top: 60px;
        padding-bottom: 72px;
    }
}

/* ── 1024–1280 ──────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .section {
        padding: 80px 0;
    }
}

/* ── 980–1024 ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .catalog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .quality-steps {
        grid-template-columns: repeat(3, 1fr);
    }
    .promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── 820–980 ────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── 640–820 ────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    :root {
        --gutter: 20px;
    }
    .section {
        padding: 64px 0;
    }
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero__inner {
        padding-top: 40px;
        padding-bottom: 48px;
    }
    .table-scroll {
        border-radius: var(--radius);
    }
}

/* ── 420–640 ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    :root {
        --gutter: 16px;
        --gutter-mobile: 16px;
    }
    .section {
        padding: 52px 0;
    }
    .section__lead {
        font-size: 16.5px;
    }
    .hero-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .quality-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-head__title {
        font-size: 26px;
    }
    .promo-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 360–420 ────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    .catalog-grid {
        gap: 10px;
    }
    .hero__actions {
        flex-direction: column;
    }
    .hero__actions .btn {
        width: 100%;
    }
    .hero-metrics {
        grid-template-columns: 1fr;
    }
    .quality-steps {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .btn-lg {
        padding: 15px 24px;
    }
    .page-head__lead {
        font-size: 16px;
    }
    .breadcrumbs__list {
        font-size: 13px;
    }
}

/* ── 360 и уже: крайний предел ──────────────────────────────────── */
@media (max-width: 360px) {
    .logo__name {
        font-size: 15.5px;
    }
    .city-picker__value {
        max-width: 90px;
    }
    .cart-button__count {
        min-width: 20px;
        height: 20px;
    }
    .product-card__specs {
        gap: 4px;
    }
    .product-card__spec {
        font-size: 11px;
    }
}


/* ==========================================================================
   17. Дополнительные компоненты: чек-листы, инфо-блоки, back-to-top,
       декор секций, нумерация, шаги, табы услуг
   ========================================================================== */

/* ── Чек-лист (список с галочками) ──────────────────────────────── */
.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.checklist li::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 12.5px;
    font-weight: 800;
}

/* ── Инфо-блоки: примечание, важное, предупреждение ─────────────── */
.callout {
    border-radius: var(--radius);
    padding: 16px 18px;
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 16px;
    border-left: 4px solid transparent;
}

.callout--note {
    background: var(--sand-light);
    border-left-color: var(--accent);
}

.callout--success {
    background: var(--success-bg);
    border-left-color: var(--success);
}

.callout--warning {
    background: var(--warning-bg);
    border-left-color: var(--warning);
}

/* ── Back-to-top ────────────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: calc(var(--header-z) + 5);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--graphite);
    color: var(--on-dark);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent);
    color: var(--on-accent);
}

@media (max-width: 420px) {
    .back-to-top {
        right: 16px;
        bottom: 84px;
        width: 44px;
        height: 44px;
    }
}

/* ── Нумерованный заголовок секции ──────────────────────────────── */
.num-title {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.num-title__num {
    font-family: var(--font-num);
    font-size: 15px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.05em;
}

.num-title__text {
    margin: 0;
}

/* ── Разделитель с узором (декоративный) ────────────────────────── */
.divider-wood {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 28px 0;
    color: var(--sand);
}

.divider-wood::before,
.divider-wood::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
    max-width: 120px;
}

/* ── Теги-фильтры (чипы) ────────────────────────────────────────── */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--line-dark);
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* ── Статистика/цифры в блоках доверия ──────────────────────────── */
.stat {
    display: grid;
    gap: 4px;
    text-align: center;
}

.stat__value {
    font-family: var(--font-num);
    font-size: 34px;
    font-weight: 800;
    color: var(--graphite);
    line-height: 1.1;
}

.stat__value--accent {
    color: var(--accent);
}

.stat__label {
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Таблица навигации по услугам (якоря) ───────────────────────── */
.anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.anchor-nav__link {
    padding: 10px 18px;
    border: 1.5px solid var(--line-dark);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 14px;
    color: var(--graphite);
    background: #FFFFFF;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.anchor-nav__link:hover {
    border-color: var(--pine);
    color: var(--pine);
    text-decoration: none;
}

/* ── Состояние «нет JS» (A11.8): контент остаётся доступным ─────── */
html.no-js .faq-accordion__answer[hidden],
html.no-js .tabs__panel[hidden],
html.no-js .quiz__step[hidden],
html.no-js .quiz__success[hidden] {
    display: block !important;
}

html.no-js .quiz__step:not([data-step="1"]) {
    display: none; /* без JS показываем только первый шаг квиза */
}

html.no-js .catalog-filter__reset,
html.no-js .quiz__next,
html.no-js .quiz__prev {
    display: inline-flex; /* кнопки-переходы неактивны без JS, но видимы */
}

html.no-js .js-add-to-cart,
html.no-js .js-quick-order,
html.no-js .js-service-request {
    cursor: default;
    opacity: 0.9;
}

html.no-js [data-accordion] .faq-accordion__item.is-open {
    border-color: var(--accent);
}

/* ── Подсветка текущего города в подвале ────────────────────────── */
.footer-col__link.is-current {
    color: #E4A078;
    font-weight: 700;
}

/* ── Мелкие кнопки-действия в таблицах ──────────────────────────── */
.price-table .btn-sm,
.rating-table .btn-sm {
    white-space: nowrap;
}

/* ── Заглушка карты (до получения API-ключа) ────────────────────── */
.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 320px;
    background:
        linear-gradient(120deg, rgba(184, 101, 53, 0.06) 0%, rgba(47, 100, 81, 0.06) 100%),
        var(--sand-light);
    border: 2px dashed var(--line-dark);
    border-radius: var(--radius-xl);
    color: var(--text-muted);
    text-align: center;
    padding: 30px;
}

.map-placeholder__icon {
    color: var(--accent);
}

.map-placeholder__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: var(--graphite);
    margin: 0;
}

.map-placeholder__text {
    font-size: 14px;
    max-width: 420px;
    margin: 0;
    line-height: 1.6;
}

/* ── Индикатор «живой» точки на карте доставки ──────────────────── */
.delivery-pin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pine);
}

.delivery-pin::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2FBF71;
    box-shadow: 0 0 0 4px rgba(47, 191, 113, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.35); }
    70% { box-shadow: 0 0 0 8px rgba(47, 191, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0); }
}

/* ── Плашка «цена с услугой» на карточках ───────────────────────── */
.product-card__with-service {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-card__with-service::before {
    content: "ⓘ";
    color: var(--pine);
    font-weight: 800;
}

/* ── Шапка страницы услуги: иконка категории ────────────────────── */
.service-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}

.service-hero__icon {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--pine);
    color: #FFFFFF;
}

.service-hero__cat {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 2px;
}

/* ── Адаптив доп. компонентов ───────────────────────────────────── */
@media (max-width: 640px) {
    .stat__value {
        font-size: 28px;
    }
    .service-hero {
        gap: 12px;
    }
    .service-hero__icon {
        width: 52px;
        height: 52px;
    }
}


/* ==========================================================================
   18. Дополнительно: детали дизайна, hover-эффекты, декор, нюансы
   ========================================================================== */

/* ── Тонкая текстурная подложка для тёмных секций ───────────────── */
.section--dark {
    position: relative;
}

.section--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(246, 243, 237, 0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

/* ── Ссылка «весь каталог» в шапке секции ───────────────────────── */
.section__head .btn {
    flex: 0 0 auto;
}

/* ── Карточка товара: наклон бейджа при hover ───────────────────── */
.product-card:hover .product-card__badges .badge--hit {
    transform: rotate(-2deg);
}

.product-card__badges .badge {
    transition: transform var(--dur) var(--ease);
}

/* ── Цена: изменение при наведении на карточку ──────────────────── */
.product-card:hover .product-card__price {
    color: var(--accent);
    transition: color var(--dur) var(--ease);
}

/* ── Линия под заголовком в сервисных секциях ───────────────────── */
.section__title--underline::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--accent);
    margin-top: 12px;
}

/* ── Логотип: лёгкое «дыхание» пламени ──────────────────────────── */
.logo:hover .logo__mark svg circle {
    fill: #E0A33C;
    transition: fill var(--dur) var(--ease);
}

/* ── Кнопки в контактах: иконки не сжимаются ────────────────────── */
.header-wa .icon,
.btn-whatsapp .icon {
    flex: 0 0 auto;
}

/* ── Таблицы: курсив для рекомендательной подписи ───────────────── */
.rating-table__note {
    font-style: italic;
}

/* ── FAQ: разделитель между вопросами при печати ────────────────── */
@media print {
    .faq-accordion__item {
        border: 1px solid #CCC;
        page-break-inside: avoid;
    }
    .faq-accordion__answer {
        display: block !important;
    }
}

/* ── Строки таблицы рейтинга: ссылка на породу ──────────────────── */
.rating-table tbody tr:hover th a {
    color: var(--accent);
}

/* ── Хлебные крошки на товаре: длинное название переносится ─────── */
.breadcrumbs__item:last-child .breadcrumbs__link {
    color: var(--text);
    font-weight: 600;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .breadcrumbs__item:last-child .breadcrumbs__link {
        max-width: 220px;
    }
}

/* ── Панель «Сейчас на складе»: список аккуратный ───────────────── */
.stock-panel__item {
    margin: 0;
}

/* ── Блоки доверия: галочки выравниваются по первой строке ──────── */
.delivery-block__item::before,
.checklist li::before {
    margin-top: 2px;
}

/* ── Изображения в галерее: лёгкое затемнение для читаемости ────── */
.product-gallery__slide img {
    transition: transform 0.5s var(--ease);
}

.product-gallery:hover .product-gallery__img {
    transform: scale(1.01);
}

/* ── Поля форм: подсказка-символ обязательности ─────────────────── */
.form__label--required::after {
    content: " *";
    color: var(--danger);
    font-weight: 800;
}

/* ── Ссылка-телефон без подчёркивания в шапке ───────────────────── */
.header-contacts__phone {
    text-decoration: none;
}

/* ── Затемнение hero при загрузке изображения ───────────────────── */
.hero__img {
    transition: opacity 0.6s var(--ease);
}

/* ── Скрытие счётчика корзины, когда он пуст ────────────────────── */
.cart-button__count.is-empty {
    display: none;
}

/* ── Аккордеон: тень при открытии ───────────────────────────────── */
.faq-accordion__item.is-open .faq-accordion__button {
    color: var(--accent);
}

/* ── Отступы внутри prose-таблиц (если появятся) ────────────────── */
.prose table {
    font-size: 15px;
    margin: 20px 0;
}

.prose th,
.prose td {
    padding: 10px 14px;
    border: 1px solid var(--line);
}

.prose th {
    background: var(--sand-light);
    font-weight: 700;
}

/* ── Плавное появление секций (если включено в JS) ──────────────── */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ── Компактная карточка города в подвале ───────────────────────── */
.footer-col__list--cities {
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    display: grid;
}

/* ── Уведомление о cookie (если включено) ───────────────────────── */
.cookie-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: calc(var(--toast-z) - 1);
    background: var(--graphite);
    color: var(--on-dark);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: var(--shadow-lg);
    max-width: 720px;
    margin: 0 auto;
    font-size: 14px;
}

.cookie-bar__text {
    margin: 0;
}

.cookie-bar__actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.cookie-bar .btn {
    padding: 9px 16px;
    font-size: 13.5px;
}

@media (max-width: 640px) {
    .cookie-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .cookie-bar__actions {
        justify-content: center;
    }
}

/* ── Иконки: единый размер по умолчанию ─────────────────────────── */
.icon {
    flex: 0 0 auto;
}

/* ── Плавный скролл к якорям с учётом sticky-шапки ──────────────── */
html {
    scroll-padding-top: 110px;
}

@media (max-width: 900px) {
    html {
        scroll-padding-top: 76px;
    }
}


/* ==========================================================================
   19. Городские гербы (SVG-иконки) и фото доставки
   ========================================================================== */

/* ── Герб города в блоке доставки на главной (8.2) ──────────────── */
.city-emblem {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
}

.city-emblem__img {
    width: 54px;
    height: 60px;
    flex: 0 0 auto;
}

.city-emblem__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.city-emblem__name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 20px;
    color: var(--graphite);
    line-height: 1.1;
}

/* ── Гербы в списке городов (/goroda/) ──────────────────────────── */
.region-block__item--crest {
    margin: 0;
}

.region-block__link--crest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid transparent;
}

.region-block__link--crest:hover {
    border-color: var(--line-dark);
}

.region-block__crest {
    width: 27px;
    height: 30px;
    flex: 0 0 auto;
    opacity: 0.85;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.region-block__link--crest:hover .region-block__crest {
    opacity: 1;
    transform: scale(1.08);
}

/* ── Фото доставки на странице /dostavka/ ───────────────────────── */
.delivery-photo {
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 9;
    background: var(--graphite);
}

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

@media (max-width: 640px) {
    .city-emblem {
        padding: 12px 14px;
    }
    .city-emblem__name {
        font-size: 17px;
    }
    .delivery-photo {
        aspect-ratio: 4 / 3;
    }
}


/* ==========================================================================
   20. Красивая страница 404: hero с фото, градиентные цифры, чипы
   ========================================================================== */

.error-hero {
    position: relative;
    overflow: hidden;
    background: var(--graphite);
    color: var(--on-dark);
    text-align: center;
    padding: 96px 0 104px;
}

.error-hero__media {
    position: absolute;
    inset: 0;
}

.error-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.22;
}

.error-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 37, 34, 0.45) 0%, rgba(30, 37, 34, 0.82) 100%);
    pointer-events: none;
}

.error-hero__inner {
    position: relative;
    z-index: 1;
}

.error-hero__code {
    font-family: var(--font-num);
    font-size: clamp(110px, 20vw, 210px);
    font-weight: 800;
    line-height: 0.95;
    margin: 0 0 10px;
    letter-spacing: 0.02em;
    color: #E4A078; /* fallback, если градиент не поддерживается */
    background: linear-gradient(92deg, #E4A078 0%, #B86535 45%, #E0C07A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error-hero__code span {
    display: inline-block;
}

.error-hero__title {
    color: var(--on-dark);
    font-size: clamp(26px, 4.5vw, 42px);
    margin: 0 0 14px;
}

.error-hero__text {
    color: rgba(246, 243, 237, 0.82);
    font-size: 17px;
    line-height: 1.65;
    max-width: 560px;
    margin: 0 auto 28px;
}

.error-hero__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Кнопка «поверх фото» — светлая рамка на тёмном фоне */
.btn-on-dark {
    background: transparent;
    border-color: rgba(246, 243, 237, 0.75);
    color: var(--on-dark);
}

.btn-on-dark:hover {
    background: rgba(246, 243, 237, 0.14);
    border-color: #FFFFFF;
    color: #FFFFFF;
    text-decoration: none;
}

@media (max-width: 640px) {
    .error-hero {
        padding: 64px 0 72px;
    }
    .error-hero__actions .btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .error-hero__code {
        font-size: 96px;
    }
}