/* =========================================================================
   СпиртВилл — новая тема «индустриальная редакция».
   Подключается после style.css и theme.css: переопределяет визуальный слой,
   не меняя разметку, поведение и структуру базовых шаблонов.
   ========================================================================= */

/* ------------------------------------------------------------ 1. Токены */
:root {
    --c-ink: #121511;
    --c-ink-2: #252b24;
    --c-ink-soft: #495147;
    --c-ink-muted: #5f675c;

    --c-bg: #f2efe6;
    --c-surface: #faf8f1;
    --c-surface-2: #e9e4d6;
    --c-line: #d8d1bf;
    --c-line-strong: #b7ae99;

    --c-brand: #b4452a;
    --c-brand-dark: #8c3220;
    --c-brand-light: #c95a3c;
    --c-brand-soft: #f0dfd8;

    --c-accent: #b4452a;
    --c-accent-strong: #8c3220;
    --c-accent-soft: #f0dfd8;

    --c-danger: #9a2f24;
    --c-danger-soft: #f6e5e1;

    --c-dark: #10140f;
    --c-dark-2: #1a2019;

    --radius-sm: 2px;
    --radius: 2px;
    --radius-lg: 3px;
    --radius-xl: 4px;

    --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-heading: 'Bitter', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    --container: 1280px;
    --gutter: clamp(18px, 3vw, 32px);
    --section-y: clamp(56px, 7vw, 96px);

    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-brand: none;
}

/* --------------------------------------------------------- 2. База и текст */
body {
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    font-feature-settings: "ss01" 1, "cv11" 1;
}

h1, h2, h3, h4,
.h1, .h2, .h3,
.section__title,
.page-hero__title,
.hero__title,
.product__title,
.category-card__title,
.footer__title,
.cta-block__title,
.block__title,
.lead-form__title,
.info-card__title,
.contact-card__title {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--c-ink);
    line-height: 1.04;
}

h1, .hero__title, .page-hero__title {
    font-size: clamp(2.55rem, 1.5rem + 4.3vw, 4.7rem);
    letter-spacing: -0.045em;
}

h2, .section__title, .cta-block__title {
    font-size: clamp(1.75rem, 1.15rem + 2vw, 2.75rem);
}

h3, .block__heading, .info-card__title, .lead-form__title {
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
    line-height: 1.18;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--c-brand-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
a:hover { color: #6f2819; }

::selection {
    background: var(--c-brand);
    color: var(--c-surface);
}

:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
}

.container {
    max-width: var(--container);
    padding-inline: var(--gutter);
}

/* Технические подписи — один моно-шрифт на весь интерфейс. */
.hero__slogan,
.hero__stats dt,
.page-hero__badge,
.badge,
.card__price-note,
.card__price-unit,
.card__stock,
.filter-bar__legend,
.table th,
.steps__num,
.footer__title,
.footer__slogan,
.footer__req,
.footer__legal,
.header__top,
.header__phone-label,
.lead-form__hint,
.seo-note__badge,
.article-card__date,
.article__meta,
.map-card__label,
.contact-card__label {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- 3. Шапка */
.header {
    background: var(--c-bg);
    border-bottom: 0;
}

.header__top {
    background: var(--c-ink);
    color: #b9bfb2;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    border-bottom: 1px solid rgba(250, 248, 241, 0.12);
}

.header__top-inner {
    min-height: 34px;
    gap: 22px;
}

.header__top-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.header__top-item .icon {
    width: 12px;
    height: 12px;
    color: var(--c-brand);
}

.header__top-link { color: #d6dacf; }
.header__top-link:hover { color: #fff; }

.header__main {
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
}

.header__main-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav actions";
    align-items: center;
    gap: 28px;
    min-height: 84px;
    padding-block: 14px;
}

.logo {
    grid-area: logo;
    gap: 12px;
    align-items: center;
    text-decoration: none;
}

.logo__mark,
.logo__mark--footer {
    width: 42px;
    height: 42px;
    border-radius: 2px;
    background: transparent;
    overflow: hidden;
}

.logo__image,
.logo__image--footer {
    width: 42px;
    height: 42px;
    border-radius: 2px;
}

.logo__name {
    font-family: var(--font-heading);
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    line-height: 1;
}

.logo__tagline {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin-top: 4px;
}

.nav {
    grid-area: nav;
    justify-self: center;
}

.nav__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 12px;
}

.nav__link {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--c-ink-2);
    padding: 10px 0;
}

.nav__link:hover,
.nav__item.is-active > .nav__link {
    color: var(--c-brand-dark);
    background: transparent;
}

.nav__item.is-active > .nav__link {
    box-shadow: inset 0 -2px 0 var(--c-brand);
}

.nav__caret { margin-left: 4px; opacity: 0.55; }

.nav__dropdown {
    background: var(--c-surface);
    border: 1px solid var(--c-ink);
    border-radius: 0;
    box-shadow: none;
    padding: 22px;
}

.nav__dropdown--mega {
    border-radius: 0;
    padding: 28px;
}

.nav__dropdown-title,
.nav__mega-aside-title {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.nav__dropdown-name { font-weight: 500; }
.nav__dropdown-count {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--c-brand);
}

.header__actions {
    grid-area: actions;
    gap: 10px;
}

.header__phone {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.header__phone-label {
    font-size: 0.5625rem;
    color: var(--c-ink-muted);
}

.header__phone-value {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cart-counter {
    min-height: 44px;
    border: 1px solid var(--c-line-strong);
    border-radius: 2px;
    padding: 0 12px;
    background: transparent;
    gap: 8px;
    transition: border-color 160ms ease, background 160ms ease;
}

.cart-counter:hover {
    border-color: var(--c-ink);
    background: var(--c-surface);
}

.cart-counter__label {
    font-size: 0.75rem;
    font-weight: 500;
}

.cart-counter__value {
    font-family: var(--font-mono);
    min-width: 22px;
    height: 22px;
    border-radius: 1px;
    background: var(--c-brand);
    color: var(--c-surface);
    font-size: 0.625rem;
}

.burger { grid-area: burger; display: none; }

/* --------------------------------------------------------------- 4. Кнопки */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: transparent;
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.btn--primary {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-surface);
}

.btn--primary::after {
    content: none;
}

.btn--primary:hover {
    background: var(--c-brand-dark);
    border-color: var(--c-brand-dark);
    color: var(--c-surface);
    transform: translateY(-1px);
}

.btn--outline {
    background: transparent;
    border-color: var(--c-line-strong);
    color: var(--c-ink);
}

.btn--outline:hover {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: var(--c-surface);
    transform: translateY(-1px);
}

.btn--ghost {
    color: var(--c-brand-dark);
    padding-inline: 0;
    min-height: 36px;
    border: 0;
    border-radius: 0;
}

.btn--ghost:hover {
    color: var(--c-brand-dark);
    background: transparent;
}

.btn--sm {
    min-height: 38px;
    padding: 0 15px;
    font-size: 0.8125rem;
}

.btn--lg {
    min-height: 54px;
    padding: 0 26px;
    font-size: 0.9375rem;
}

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

.btn:active { transform: translateY(0); }

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.42;
    cursor: not-allowed;
    transform: none;
}

/* ---------------------------------------------------------------- 5. Герой */
.hero {
    position: relative;
    padding: clamp(40px, 5vw, 68px) 0 0;
    background: var(--c-bg);
    background-image:
        linear-gradient(90deg, rgba(18, 21, 17, 0.055) 1px, transparent 1px);
    background-size: calc(100% / 6) 100%;
    border-bottom: 1px solid var(--c-line);
    overflow: hidden;
}

.hero::after {
    content: "ETHANOL / 96,6%";
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.24em;
    color: var(--c-ink-muted);
    opacity: 0.65;
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr);
    align-items: start;
    gap: clamp(36px, 5vw, 76px);
    padding-bottom: 0;
}

.hero__content { max-width: 760px; }

.hero__slogan {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    color: var(--c-brand-dark);
    gap: 12px;
    margin-bottom: 22px;
}

.hero__slogan::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}

.hero__title {
    max-width: 13ch;
    margin: 0 0 24px;
    font-size: clamp(2.5rem, 1.25rem + 4.6vw, 4.5rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.hero__lead {
    max-width: 48ch;
    color: var(--c-ink-soft);
    font-size: clamp(0.975rem, 0.9rem + 0.25vw, 1.0625rem);
    line-height: 1.65;
    margin-bottom: 30px;
}

.hero__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--c-line);
}

.hero__list li {
    position: relative;
    padding: 13px 0 13px 18px;
    border-bottom: 1px solid var(--c-line);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--c-ink-2);
}

.hero__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    width: 6px;
    height: 6px;
    background: var(--c-brand);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}

.hero__stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 54px 0 0;
    padding: 0;
    border-top: 1px solid var(--c-ink);
}

.hero__stat {
    padding: 20px 24px 24px 0;
    border-right: 1px solid var(--c-line);
}

.hero__stat + .hero__stat { padding-left: 24px; }
.hero__stat:last-child { border-right: 0; }

.hero__stat:nth-child(2) dd {
    white-space: nowrap;
}

.hero__stat dt {
    font-size: 0.625rem;
    color: var(--c-ink-muted);
    margin-bottom: 8px;
}

.hero__stat dd {
    margin: 0;
    min-height: 2.1em;
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.hero__form { align-self: stretch; }

.hero__form .lead-form,
.lead-form--card {
    background: var(--c-surface);
    border: 1px solid var(--c-ink);
    border-top: 3px solid var(--c-brand);
    border-radius: 2px;
    padding: clamp(22px, 2.4vw, 30px);
    box-shadow: none;
}

.hero__form .lead-form__head::before {
    content: "01 / запрос";
    display: block;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-brand);
    margin-bottom: 12px;
}

.lead-form__title {
    font-size: clamp(1.45rem, 1.2rem + 0.7vw, 1.85rem);
    margin: 0 0 10px;
}

.lead-form__text {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--c-ink-muted);
    margin-bottom: 22px;
}

.lead-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.lead-form__grid .field:nth-child(3) { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.field__required { color: var(--c-brand); }

.field__input,
.field input,
.field select,
.field textarea,
input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select {
    width: 100%;
    min-height: 48px;
    padding: 10px 13px;
    border: 1px solid var(--c-line-strong);
    border-radius: 2px;
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field__input--textarea,
textarea {
    min-height: 96px;
    resize: vertical;
}

.field__input::placeholder,
input::placeholder,
textarea::placeholder {
    color: #6b7166;
    opacity: 1;
}

.field__input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--c-ink);
    box-shadow: 0 0 0 3px rgba(180, 69, 42, 0.16);
    outline: none;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 4px 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--c-ink-muted);
}

.checkbox__box {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1px solid var(--c-ink);
    border-radius: 1px;
    background: var(--c-surface);
}

.checkbox__box::after {
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border-width: 0 2px 2px 0;
}

.checkbox input:checked + .checkbox__box {
    background: var(--c-brand);
    border-color: var(--c-brand);
}

.checkbox a { color: var(--c-brand-dark); }

.lead-form__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
}

.lead-form__actions .btn { width: 100%; }

.lead-form__hint {
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    color: var(--c-ink-muted);
    text-align: center;
    text-transform: uppercase;
}

/* ------------------------------------------------------------- 6. Секции */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(36px, 4vw, 56px); }

.section--muted {
    background: var(--c-surface-2);
    border-block: 1px solid var(--c-line);
}

.section__head {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: clamp(28px, 3.4vw, 44px);
    padding-top: 24px;
    border-top: 1px solid var(--c-line);
}

.section__head::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 44px;
    height: 2px;
    background: var(--c-brand);
}

.section__title {
    max-width: 22ch;
    margin: 0 0 8px;
    text-wrap: balance;
}

.section__subtitle {
    max-width: 58ch;
    margin: 0;
    color: var(--c-ink-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.section__footnote { margin-top: 24px; }

/* Сетки */
.grid { gap: 16px; }
.grid--products { gap: 16px; }
.grid--categories { gap: 16px; }
.grid--features { gap: 14px; }

/* ------------------------------------------------------------- 7. Карточки */
.card,
.category-card,
.feature,
.article-card,
.info-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: 2px;
    box-shadow: none;
}

.card {
    overflow: hidden;
    transition: border-color 180ms ease, transform 180ms ease;
}

.card:hover {
    border-color: var(--c-ink);
    transform: translateY(-2px);
}

.card__media,
.category-card__media {
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
    overflow: hidden;
}

.card__image,
.category-card__image,
.feature__image {
    transition: transform 500ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.card:hover .card__image,
.category-card:hover .category-card__image {
    transform: scale(1.025);
}

.card__badges {
    top: 10px;
    left: 10px;
    gap: 6px;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border: 1px solid var(--c-line-strong);
    border-radius: 1px;
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: 0.5625rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

.badge--accent {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-surface);
}

.card__body { padding: 16px 16px 0; }

.card__title {
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.22;
    min-height: 2.55em;
    margin: 0 0 8px;
}

.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--c-brand); }

.card__text {
    color: var(--c-ink-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

.card__footer {
    margin-top: 14px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--c-line);
    background: transparent;
}

.card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-height: 44px;
}

.card__price-value {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.card__price-note,
.card__price-unit {
    flex-basis: 100%;
    font-size: 0.625rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--c-ink-muted);
}

.card__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.5625rem;
    color: var(--c-ink-muted);
}

.card__stock::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c-brand);
}

.card__stock--out::before { background: var(--c-ink-muted); }

.card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 12px;
}

.card__actions .btn {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 0.6875rem;
}

/* Категории */
.category-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 180ms ease;
}

.category-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
}

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

.category-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.category-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
}
.category-card:hover { border-color: var(--c-ink); }

.category-card__body { padding: 16px; }

.category-card__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.15;
    margin: 0 0 6px;
}

.category-card__text {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--c-ink-muted);
}

.category-card__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--c-line);
}

.category-card__price {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

/* Подборки: компактные горизонтальные карточки */
.feature {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: start;
    padding: 14px;
    transition: border-color 180ms ease, background 180ms ease;
}

.feature:hover {
    border-color: var(--c-ink);
    background: var(--c-bg);
}

.feature__media {
    grid-row: 1 / span 2;
    width: 104px;
    height: 104px;
    aspect-ratio: auto;
    border: 1px solid var(--c-line);
    border-radius: 1px;
    background: var(--c-surface-2);
    overflow: hidden;
}

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

.feature__title {
    grid-column: 2;
    margin: 0 0 5px;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    line-height: 1.2;
}

.feature__title a { color: inherit; text-decoration: none; }
.feature__title a:hover { color: var(--c-brand); }

.feature__text {
    grid-column: 2;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.48;
    color: var(--c-ink-muted);
}

.feature:not(:has(.feature__media)) {
    grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------- 8. Внутренние страницы */
.page-hero {
    position: relative;
    padding: clamp(30px, 4vw, 52px) 0 clamp(26px, 3vw, 40px);
    background: var(--c-bg);
    background-image: linear-gradient(90deg, rgba(18, 21, 17, 0.05) 1px, transparent 1px);
    background-size: calc(100% / 6) 100%;
    border-bottom: 1px solid var(--c-line);
}

.page-hero__title {
    max-width: 20ch;
    margin: 0 0 16px;
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
    letter-spacing: -0.045em;
}

.page-hero__lead {
    max-width: 62ch;
    margin: 0 0 20px;
    color: var(--c-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.65;
}

.page-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.page-hero__facts li {
    position: relative;
    padding-left: 12px;
}

.page-hero__facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    background: var(--c-brand);
}

.page-hero__actions { display: flex; flex-wrap: wrap; gap: 9px; }

.page-hero__media {
    border: 1px solid var(--c-line);
    background: var(--c-surface-2);
}

/* Фильтры */
.filter-bar {
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-surface);
    padding: 12px 14px;
    box-shadow: none;
}

.filter-bar__legend {
    font-size: 0.5rem;
    color: var(--c-ink-muted);
}

.filter-chip {
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid var(--c-line-strong);
    border-radius: 1px;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-ink-2);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.filter-chip:hover { border-color: var(--c-ink); }

.filter-chip.is-active {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: var(--c-surface);
}

.filter-bar__count {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

/* --------------------------------------------------------------- 9. Товар */
.product__inner { gap: clamp(28px, 4vw, 56px); }

.product__media {
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-surface-2);
}

.product__title {
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem);
    letter-spacing: -0.045em;
    margin: 0 0 12px;
}

.product__short {
    color: var(--c-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.product__price-value {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem);
    font-weight: 600;
    letter-spacing: -0.04em;
}

.product__price-unit {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.product__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid var(--c-line-strong);
    border-radius: 1px;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-2);
}

.product__stock--in { border-color: var(--c-brand); color: var(--c-brand-dark); }

.product__variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 0;
    border-block: 1px solid var(--c-line);
    margin-block: 18px;
}

.product__variant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--c-line-strong);
    border-radius: 1px;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: var(--c-ink);
    text-decoration: none;
}

.product__variant:hover,
.product__variant.is-active {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: var(--c-surface);
}

.product__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px 0;
}

.product__benefits {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--c-line);
}

.product__benefits li {
    position: relative;
    padding: 10px 0 10px 16px;
    border-bottom: 1px solid var(--c-line);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--c-ink-soft);
}

.product__benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 5px;
    height: 5px;
    background: var(--c-brand);
}

.product__benefits strong { color: var(--c-ink); font-weight: 600; }

.product__categories-title {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.product__image-note {
    font-size: 0.625rem;
    color: var(--c-ink-muted);
}

/* Инфокарточки, калькулятор, таблицы */
.info-card {
    padding: 20px;
    border-radius: 2px;
}

.info-card--accent {
    background: var(--c-surface-2);
    border-color: var(--c-line-strong);
}

.info-card__title { margin: 0 0 12px; }
.info-card__text { font-size: 0.8125rem; line-height: 1.55; color: var(--c-ink-soft); }
.info-card__list { margin: 0; padding: 0; list-style: none; }
.info-card__list li {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--c-line);
}
.info-card__list li:last-child { border-bottom: 0; }

.info-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.8125rem;
}

.calculator {
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-surface);
    padding: 22px;
    box-shadow: none;
}

.calculator__title { font-family: var(--font-heading); font-size: 1.35rem; margin: 0 0 4px; }
.calculator__text { font-size: 0.75rem; color: var(--c-ink-muted); }
.calculator__row-sum { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; }
.calculator__total { border-top: 1px solid var(--c-line); padding-top: 14px; }
.calculator__total-value { font-family: var(--font-heading); font-size: 1.5rem; }

.table-scroll { border-radius: 2px; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-ink);
    color: var(--c-ink-muted);
    font-size: 0.5625rem;
    text-align: left;
}

.table td {
    padding: 12px;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-ink-2);
    vertical-align: top;
}

.table tbody tr:hover { background: var(--c-surface-2); }

.table--compact td,
.table--compact th { padding: 9px 10px; }

/* ---------------------------------------------------------- 10. Контент */
.prose {
    max-width: 880px;
    font-size: 0.9375rem;
    line-height: 1.72;
    color: var(--c-ink-soft);
}

.prose > p,
.prose > ul,
.prose > ol {
    max-width: 72ch;
}

.prose .block__table-wrap,
.prose .table-scroll,
.prose .inline-cta {
    width: 100%;
    max-width: none;
}

.prose h2 { margin: 1.6em 0 0.55em; font-size: 1.85rem; }
.prose h3 { margin: 1.4em 0 0.45em; }
.prose p { margin: 0 0 1.1em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 20px; }
.prose li { margin-bottom: 0.45em; }
.prose li::marker { color: var(--c-brand); }
.prose blockquote {
    margin: 1.4em 0;
    padding: 16px 20px;
    border-left: 3px solid var(--c-brand);
    background: var(--c-surface);
    color: var(--c-ink);
}

.prose a { color: var(--c-brand); }

.block__heading { margin: 0 0 14px; }
.block__subheading { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; margin: 1.4em 0 0.6em; }
.block__text { font-size: 0.9375rem; line-height: 1.7; color: var(--c-ink-soft); }

.block__list { margin: 0 0 1em; padding: 0; list-style: none; }
.block__list li {
    position: relative;
    padding: 7px 0 7px 18px;
    border-bottom: 1px solid var(--c-line);
    font-size: 0.875rem;
}
.block__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 6px;
    height: 6px;
    background: var(--c-brand);
}

.note {
    padding: 18px 20px;
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-brand);
    border-radius: 0;
    background: var(--c-surface);
}

.note__title { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em; color: var(--c-brand); }
.note__text { font-size: 0.8125rem; line-height: 1.55; color: var(--c-ink-soft); }

.inline-cta,
.cta-block {
    background: var(--c-ink);
    color: #c9c2b0;
    border: 0;
    border-radius: 0;
}

.inline-cta { padding: 26px 28px; }
.inline-cta__title,
.cta-block__title { color: var(--c-surface); }
.inline-cta__text,
.cta-block__text { color: #b9bfb2; }
.inline-cta__content a:not(.btn),
.cta-block__content a:not(.btn) { color: #f0e9da; }

.cta-block {
    padding: clamp(30px, 4vw, 52px);
    align-items: center;
}

.cta-block__content::before {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin-bottom: 20px;
    background: var(--c-brand-light);
}
.cta-block__title { max-width: 18ch; margin: 0 0 12px; }
.cta-block__text { max-width: 52ch; margin: 0; font-size: 0.875rem; }

.cta-block .btn--primary,
.inline-cta .btn--primary {
    background: var(--c-brand);
    border-color: var(--c-brand);
}

.cta-block .btn--outline,
.inline-cta .btn--outline {
    border-color: #5c6358;
    color: var(--c-surface);
}

.cta-block .btn--outline:hover,
.inline-cta .btn--outline:hover {
    background: var(--c-surface);
    border-color: var(--c-surface);
    color: var(--c-ink);
}

.cta-block__phone,
.cta-block__email {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: #f0e9da;
}

/* ---------------------------------------------------------------- 11. FAQ */
.faq {
    max-width: none;
    border-top: 1px solid var(--c-ink);
}

.faq__item {
    border: 0;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-ink);
    cursor: pointer;
}

.faq__item[open] .faq__question { color: var(--c-brand); }

.faq__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--c-line-strong);
    border-radius: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink);
}

.faq__answer {
    padding: 0 0 20px;
    max-width: 72ch;
    color: var(--c-ink-soft);
    font-size: 0.875rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------- 12. CTA */
.contact-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    border-radius: 2px;
}

.contact-strip__title { font-family: var(--font-heading); font-size: 1.35rem; margin: 0 0 4px; }
.contact-strip__text { margin: 0; font-size: 0.8125rem; color: var(--c-ink-muted); }

/* -------------------------------------------------------------- 13. Теги */
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }

.tag-list__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid var(--c-line-strong);
    border-radius: 1px;
    background: transparent;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--c-ink-2);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.tag-list__link:hover {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: var(--c-surface);
}

.tag-list__count {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    color: var(--c-brand-dark);
}

.tag-list__link:hover .tag-list__count { color: var(--c-surface); }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink);
    text-decoration: none;
}

.link-arrow::after {
    content: "→";
    font-size: 0.9rem;
    color: var(--c-brand);
    transition: transform 160ms ease;
}

.link-arrow:hover { color: var(--c-brand); }
.link-arrow:hover::after { transform: translateX(3px); }

/* -------------------------------------------------------------- 14. Подвал */
.footer {
    background: var(--c-ink);
    color: #b9bfb2;
    border-top: 0;
    padding-block: clamp(44px, 5vw, 64px) 24px;
}

.footer__inner {
    display: grid;
    grid-template-columns: 1.6fr 0.8fr 0.9fr 1.1fr;
    gap: clamp(28px, 4vw, 56px);
}

.footer__col { min-width: 0; }

.footer__title {
    margin: 0 0 16px;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    color: #e7e0d1;
}

.footer__slogan {
    margin: 18px 0 10px;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    color: #d46a4b;
}

.footer__text {
    font-size: 0.75rem;
    line-height: 1.6;
    color: #9fa697;
}

.footer__text--muted { color: #818879; }

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

.footer__list a,
.footer__link {
    display: inline-block;
    padding: 4px 0;
    font-size: 0.8125rem;
    color: #c9c2b0;
    text-decoration: none;
}

.footer__list a:hover,
.footer__link:hover { color: #fff; }

.footer__phone {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--c-surface);
    text-decoration: none;
    margin-bottom: 10px;
}

.footer__address {
    font-size: 0.75rem;
    line-height: 1.6;
    color: #9fa697;
}

.footer__age {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: 18px;
    border: 1px solid #4b5247;
    border-radius: 1px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: #c9c2b0;
}

.footer__col--brand .logo__name { color: var(--c-surface); }
.footer__col--brand .logo__tagline { color: #818879; }

.footer__col--brand::after {
    content: "";
    display: block;
    width: 132px;
    height: 22px;
    margin-top: 22px;
    background: repeating-linear-gradient(
        90deg,
        #9fa697 0 2px,
        transparent 2px 4px,
        #9fa697 4px 6px,
        transparent 6px 10px,
        #9fa697 10px 11px,
        transparent 11px 15px
    );
    opacity: 0.35;
}

.footer__bottom {
    margin-top: clamp(34px, 4vw, 52px);
    padding-top: 20px;
    border-top: 1px solid #2b3128;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px 32px;
    align-items: start;
}

.footer__legal {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: #818879;
    line-height: 1.6;
}

.footer__legal p { margin: 0; }
.footer__copy,
.footer__req {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: #9fa697;
}

/* --------------------------------------------------------- 15. Мобильное */
.mobile-bar {
    background: var(--c-ink);
    border-top: 1px solid #2b3128;
    height: 62px;
    box-shadow: none;
}

.mobile-bar__item {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b9bfb2;
    gap: 4px;
}

.mobile-bar__item--accent { color: #d46a4b; }
.mobile-bar__icon { width: 19px; height: 19px; }
.mobile-bar__badge { background: var(--c-brand); color: #fff; border-radius: 1px; }

/* ------------------------------------------------------------ 16. Модалки */
.age-gate__backdrop,
.cart-drawer__backdrop,
.contact-modal__backdrop {
    background: rgba(16, 20, 15, 0.72);
    backdrop-filter: blur(3px);
}

.age-gate__dialog,
.contact-modal__dialog {
    background: var(--c-surface);
    border: 1px solid var(--c-ink);
    border-radius: 2px;
    box-shadow: none;
    padding: clamp(24px, 4vw, 38px);
}

.age-gate__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 2px;
    background: var(--c-brand);
    color: var(--c-surface);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.age-gate__dialog h2 { margin: 0 0 10px; font-size: 1.75rem; }
.age-gate__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }

.cart-drawer__panel {
    background: var(--c-bg);
    border-left: 1px solid var(--c-ink);
    box-shadow: none;
}

.cart-panel__title { font-family: var(--font-heading); font-size: 1.5rem; }

.cookie-notice {
    background: var(--c-surface);
    border-top: 1px solid var(--c-ink);
    box-shadow: none;
}

/* ------------------------------------------------------------ 17. Прочее */
.search-form {
    display: flex;
    gap: 8px;
    border: 1px solid var(--c-line-strong);
    border-radius: 2px;
    background: var(--c-surface);
    padding: 5px;
}

.search-form__input { border: 0; box-shadow: none; min-height: 40px; }

.article-card { overflow: hidden; transition: border-color 160ms ease; }
.article-card:hover { border-color: var(--c-ink); }
.article-card__title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    line-height: 1.22;
    text-transform: none;
    letter-spacing: -0.025em;
}
.article-card__date { font-size: 0.5rem; color: var(--c-ink-muted); }
.article-card__lead { font-size: 0.8125rem; color: var(--c-ink-muted); line-height: 1.55; }
.article-card__link { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.08em; }

.article__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); }
.article__lead { color: var(--c-ink-soft); font-size: 1.0625rem; line-height: 1.65; }
.article__meta { font-size: 0.5rem; color: var(--c-ink-muted); }

.trust {
    border-block: 1px solid var(--c-line);
    background: var(--c-bg);
}

.trust__item { border-right: 1px solid var(--c-line); }
.trust__item:last-child { border-right: 0; }
.trust__text { font-size: 0.75rem; line-height: 1.5; color: var(--c-ink-soft); }
.trust__text strong { display: block; color: var(--c-ink); font-weight: 600; }
.trust__icon { color: var(--c-brand); }

.steps__num {
    font-size: 0.5625rem;
    color: var(--c-brand);
}

.steps__title { font-family: var(--font-heading); font-size: 1.15rem; }

.contact-card {
    background: var(--c-surface);
    border: 1px solid var(--c-ink);
    border-top: 3px solid var(--c-brand);
    border-radius: 2px;
    padding: 26px;
}

.contact-card__title { margin: 0 0 8px; }
.contact-card__text { font-size: 0.8125rem; color: var(--c-ink-muted); }

.contacts__card,
.contacts-media {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: 2px;
    box-shadow: none;
}

.contacts__phone-value { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; }

.map-card { border: 1px solid var(--c-line); border-radius: 2px; box-shadow: none; }
.map-card__chip { font-family: var(--font-mono); font-size: 0.5625rem; text-transform: uppercase; }

/* --------------------------------------------------------- 18. Адаптив */
@media (max-width: 1260px) {
    .header__main-inner {
        grid-template-areas: "logo burger actions";
        grid-template-columns: auto 1fr auto;
        min-height: 74px;
    }

    .nav { display: none; }
    .burger { display: inline-flex; justify-self: end; }
    .burger__text { display: none; }
    .header__actions .header__phone { display: none; }
    .header__actions .btn { display: inline-flex; }
}

@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr); }
    .hero__content { max-width: none; }
    .hero__form { max-width: 620px; }
    .hero::after { display: none; }
    .hero__stats { margin-top: 40px; }
    .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer__col--contacts { grid-column: 1 / -1; }
    .grid--features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    :root {
        --section-y: 52px;
        --gutter: 18px;
    }

    .header__top { display: none; }
    .header__main-inner { min-height: 66px; gap: 12px; padding-block: 10px; }
    .logo__mark, .logo__image { width: 36px; height: 36px; }
    .logo__name { font-size: 1.05rem; }
    .logo__tagline { display: none; }
    .header__actions .btn { display: none; }

    .hero { background-size: calc(100% / 3) 100%; padding-top: 30px; }
    .hero__title { max-width: none; font-size: clamp(2.1rem, 1.1rem + 6vw, 2.85rem); }
    .hero__lead { font-size: 0.9375rem; }
    .hero__list { grid-template-columns: 1fr; }
    .hero__list li:nth-last-child(2) { border-bottom: 1px solid var(--c-line); }
    .hero__list { margin-bottom: 24px; }
    .hero__actions { display: none; }
    .hero__stats { grid-template-columns: 1fr 1fr; margin-top: 32px; }
    .hero__stat:nth-child(2) { border-right: 0; }
    .hero__stat:nth-child(n + 3) { border-top: 1px solid var(--c-line); }
    .hero__stat + .hero__stat { padding-left: 0; }
    .hero__stat:nth-child(even) { padding-left: 16px; }
    .hero__stat { padding: 14px 16px 16px 0; }

    .hero__form .lead-form,
    .lead-form--card { padding: 20px 18px; border-top-width: 3px; }
    .lead-form__grid { grid-template-columns: 1fr; gap: 12px; }
    .lead-form__grid .field:nth-child(3) { grid-column: auto; }

    .section__head { padding-top: 18px; margin-bottom: 24px; }
    .section__title { font-size: 1.75rem; }
    .section__subtitle { font-size: 0.875rem; }

    .grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .grid--categories { grid-template-columns: minmax(0, 1fr); }
    .grid--features { grid-template-columns: minmax(0, 1fr); }

    .card__body { padding: 12px 12px 0; }
    .card__title { font-size: 0.9375rem; }
    .card__text { display: none; }
    .card__footer { padding: 12px; }
    .card__price-value { font-size: 1.125rem; }
    .card__actions { grid-template-columns: 1fr; }
    .card__actions .btn { min-height: 38px; }
    .card__actions .btn--outline { display: none; }

    .feature { grid-template-columns: 68px minmax(0, 1fr); padding: 12px; }
    .feature__media { width: 68px; height: 68px; }

    .page-hero { background-size: calc(100% / 3) 100%; padding: 24px 0 26px; }
    .page-hero__title { font-size: 2rem; }
    .page-hero__facts { gap: 6px 14px; }

    .product__title { font-size: 2rem; }
    .product__actions .btn { flex: 1 1 100%; }
    .product__actions .btn--outline { display: inline-flex; }

    .cta-block { padding: 26px 20px; }
    .cta-block__title { font-size: 1.8rem; }
    .footer { padding-bottom: 92px; }
    .footer__inner { grid-template-columns: 1fr; gap: 26px; }
    .footer__col--contacts { grid-column: auto; }
    .footer__legal { grid-template-columns: 1fr; }
    .footer__bottom { grid-template-columns: 1fr; }
    .footer__col--brand::after { display: none; }
    .footer__list a, .footer__link, .footer__phone { min-height: 44px; }

    .info-card { padding: 16px; }
    .calculator { padding: 16px; }
    .age-gate__dialog { margin: 16px; }
    .contact-strip { flex-direction: column; align-items: flex-start; }
    .prose { font-size: 0.9375rem; }
}

@media (max-width: 420px) {
    .card__actions { grid-template-columns: 1fr; }
    .hero__stats { grid-template-columns: 1fr 1fr; }
    .hero__stat dd { font-size: 1.15rem; }
}

/* Брендовые карточки каталога: вертикальные, с крупным изображением. */
.grid--features[data-columns="4"] .feature {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.grid--features[data-columns="4"] .feature__media {
    grid-row: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border: 0;
    border-bottom: 1px solid var(--c-line);
}

.grid--features[data-columns="4"] .feature__title {
    margin: 16px 16px 7px;
    font-size: 1.25rem;
}

.grid--features[data-columns="4"] .feature__text {
    margin: 0 16px 18px;
    font-size: 0.8125rem;
}

@media (max-width: 720px) {
    .grid--features[data-columns="4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--features[data-columns="4"] .feature__title { font-size: 1.05rem; margin: 12px 12px 5px; }
    .grid--features[data-columns="4"] .feature__text { font-size: 0.6875rem; margin: 0 12px 14px; }
}

@media (max-width: 480px) {
    .grid--features[data-columns="4"] {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* В карточке товара «Уточнить» — вторичное действие, чтобы не спорить с покупкой. */
.card__actions .cta-actions {
    display: contents;
}

.card__actions .cta-actions .btn {
    width: 100%;
    min-height: 40px;
    padding-inline: 10px;
    border-color: var(--c-line-strong);
    background: transparent;
    color: var(--c-ink);
    font-size: 0.75rem;
}

.card__actions .cta-actions .btn:hover {
    border-color: var(--c-ink);
    background: var(--c-ink);
    color: var(--c-surface);
}

.card__actions > .btn--ghost {
    display: none;
}

@media (max-width: 720px) {
    .card__actions .cta-actions .btn {
        min-height: 38px;
    }
}

/* Скрытые поля не должны получать width:100% от общих правил формы. */
input.visually-hidden,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Сетка товаров: три карточки заполняют ряд, а не оставляют пустую колонку. */
.grid--products {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.product__media {
    position: sticky;
    top: 16px;
}

.product__facts dt,
.product__facts .product__fact-label {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

@media (max-width: 1024px) {
    .grid--products {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 720px) {
    /* На телефоне оставляем главное действие, телефон дублирует нижняя панель. */
    .hero__actions {
        display: flex;
    }

    .hero__actions .btn--primary {
        width: 100%;
    }

    .hero__actions .btn--outline {
        display: none;
    }

    .hero__stats {
        display: none;
    }

    .grid--products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product__media {
        position: static;
    }
}

/* Нижний пояс карточки товара: преимущества и подборки во всю ширину. */
.product__details {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: clamp(24px, 3vw, 48px);
    margin-top: clamp(32px, 4vw, 56px);
    padding-top: 28px;
    border-top: 1px solid var(--c-line);
}

.product__benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-content: start;
    border-top: 0;
}

.product__benefits li { padding-block: 12px; }
.product__benefits li::before { top: 18px; }

.product__categories {
    margin: 0;
    padding: 0;
    border: 0;
}

.product__categories-title { margin-bottom: 12px; }

@media (max-width: 900px) {
    .product__details { grid-template-columns: 1fr; }
    .product__benefits { grid-template-columns: 1fr; }
}

/* Номера шагов: белая цифра на красном круге. */
.steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-brand);
    color: var(--c-surface);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1;
}

.product__facts li > span {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

.product__stock {
    font-size: 0.5625rem;
}

.product__price-unit {
    font-size: 0.625rem;
}

@media (max-width: 720px) {
    .btn--sm,
    .card__actions .btn,
    .card__actions .cta-actions .btn {
        min-height: 44px;
    }

    .filter-chip {
        min-height: 44px;
    }

    .tag-list__link {
        min-height: 44px;
        padding-block: 10px;
    }

    .breadcrumbs__link {
        min-height: 44px;
    }
}

/* Кнопка на тёмной CTA-полосе: красная с бумажным текстом. */
.inline-cta .btn--primary,
.cta-block .btn--primary {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-surface);
}

.inline-cta .btn--primary:hover,
.cta-block .btn--primary:hover {
    background: var(--c-brand-dark);
    border-color: var(--c-brand-dark);
    color: var(--c-surface);
}

@media (max-width: 720px) {
    .logo,
    .logo--footer {
        min-height: 44px;
    }

    .footer__list a {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
    }

    .btn--ghost {
        min-height: 44px;
    }
}

/* Чекбокс: вся подпись — зона нажатия, визуальная клетка остаётся аккуратной. */
.checkbox {
    position: relative;
}

.checkbox input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.checkbox:focus-within {
    outline: 2px solid var(--c-brand);
    outline-offset: 3px;
}

.cart-checkout .checkbox::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1px solid var(--c-ink);
    border-radius: 1px;
    background: var(--c-surface) no-repeat center / 12px 10px;
}

.cart-checkout .checkbox:has(input:checked)::before {
    border-color: var(--c-brand);
    background-color: var(--c-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3 3 7-7' fill='none' stroke='%23FAF8F1' stroke-width='2'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
    .product__variant {
        min-height: 44px;
    }
}

.cart-checkout .checkbox input[type="checkbox"] {
    inset: auto;
    left: 0;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
}

/* Характеристики товара — одна сетка с общими линиями, а не стопка карточек. */
.product__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--c-line);
    border-bottom: 0;
    border-radius: 2px;
    overflow: hidden;
    background: var(--c-surface);
}

.product__facts li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 11px 14px;
    border: 0;
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}

.product__facts li:nth-child(even) {
    border-right: 0;
}

.product__facts li strong,
.product__facts li a {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--c-ink);
}

@media (max-width: 720px) {
    .product__media {
        position: relative;
        top: auto;
    }

    .product__facts {
        grid-template-columns: 1fr;
    }

    .product__facts li {
        border-right: 0;
    }
}

/* Пустая корзина: не пунктирная заглушка, а спокойный технический блок. */
.cart-panel__empty,
.empty-state {
    padding: 28px;
    border: 1px solid var(--c-line);
    border-radius: 2px;
    background: var(--c-surface);
    color: var(--c-ink-muted);
    font-size: 0.875rem;
    text-align: left;
}

.cart-panel__empty::before {
    content: "00 / корзина";
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-brand);
}

/* На телефоне таблица прокручивается — показываем мягкую тень у края. */
@media (max-width: 720px) {
    .table-scroll {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-scroll {
        box-shadow: inset -18px 0 18px -18px rgba(18, 21, 17, 0.2);
    }
}

/* Иконка FAQ: плюс/минус в квадрате, без красной заливки */
.faq__icon {
    position: relative;
    background: transparent;
    color: var(--c-ink);
}

.faq__icon::before,
.faq__icon::after {
    left: 50%;
    top: 50%;
    width: 13px;
    height: 2px;
    border-radius: 0;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 180ms ease;
}

.faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__icon {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-surface);
}

.faq__item[open] .faq__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

/* Чек-лист: квадратная рамка и красная галочка вместо залитого круга */
.checklist li::before {
    width: 20px;
    height: 20px;
    border: 1px solid var(--c-brand);
    border-radius: 1px;
    background: transparent;
}

.checklist li::after {
    left: 7px;
    top: 0.58em;
    width: 5px;
    height: 9px;
    border-color: var(--c-brand);
}

/* Вся карточка подборки — ссылка, а не только заголовок. */
.grid--features .feature {
    position: relative;
}

.grid--features .feature__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.grid--features .feature:hover .feature__title a {
    color: var(--c-brand-dark);
}

/* Возрастная рамка: один акцент 18+, заголовок слева. */
.age-gate__dialog {
    max-width: 480px;
    text-align: left;
}

.age-gate__badge {
    margin-bottom: 18px;
}

.age-gate__dialog h2 {
    text-align: left;
    font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem);
    margin-bottom: 12px;
}

.age-gate__actions {
    justify-content: flex-start;
}

@media (max-width: 720px) {
    .breadcrumbs__item:last-child {
        display: inline-flex;
    }

    .breadcrumbs__list:has(.breadcrumbs__item:nth-child(3)) .breadcrumbs__item:last-child {
        display: none;
    }
}

@media (max-width: 720px) {
    .contacts__link,
    .article-card__link,
    .info-card__list a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (max-width: 720px) {
    /* На телефоне картинку героя заменяют карточки ниже — не тратим первый экран. */
    .page-hero__media {
        display: none;
    }
}

/* Малый CTA внутри текста — светлая врезка, чтобы не спорить с большим тёмным блоком */
.inline-cta {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-brand);
    color: var(--c-ink-soft);
}

.inline-cta__title {
    color: var(--c-ink);
}

.inline-cta__text,
.inline-cta p {
    color: var(--c-ink-muted);
}

.inline-cta a:not(.btn) {
    color: var(--c-brand-dark);
}

.inline-cta .btn--outline {
    border-color: var(--c-line-strong);
    color: var(--c-ink);
    background: transparent;
}

.inline-cta .btn--outline:hover {
    border-color: var(--c-ink);
    background: var(--c-ink);
    color: var(--c-surface);
}