@charset "UTF-8";

/* =========================================================================
   kormonline.ru — интернет-магазин кормов
   Все размеры в rem, масштаб задаёт root font-size.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ШРИФТЫ
   ---------------------------------------------------------------------- */
@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/SourceSans3-Regular.woff2") format("woff2"),
         url("../fonts/SourceSans3-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/SourceSans3-Bold.woff2") format("woff2"),
         url("../fonts/SourceSans3-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Hypatia Sans Pro";
    src: url("../fonts/HypatiaSansPro-Bold.woff2") format("woff2"),
         url("../fonts/HypatiaSansPro-Bold.woff") format("woff");
    /* начертание одно (Bold) — диапазон убирает синтетическое утолщение */
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/*
 * Шрифты первого экрана. Начертания «заморожены» на нужной оптической оси при
 * сборке сабсета (см. _wp/build/fonts-hero.py), поэтому переменных осей в
 * файлах нет и font-optical-sizing тут не нужен.
 */
@font-face {
    font-family: Literata;
    src: url("../fonts/Literata-Regular.woff2") format("woff2"),
         url("../fonts/Literata-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url("../fonts/Inter-Regular.woff2") format("woff2"),
         url("../fonts/Inter-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Inter;
    src: url("../fonts/Inter-Medium.woff2") format("woff2"),
         url("../fonts/Inter-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Marck Script";
    src: url("../fonts/MarckScript-Regular.woff2") format("woff2"),
         url("../fonts/MarckScript-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------
   2. ТОКЕНЫ
   ---------------------------------------------------------------------- */
:root {
    --c-brown: #432E25;
    --c-orange: #FE702C;
    --c-orange-dark: #E97935;
    --c-red: #E4342B;
    /* «бесплатно» и «промокод применён»: подтверждение красным читалось бы как ошибка */
    --c-green: #4C7A34;
    --c-black: #000000;
    --c-white: #FFFFFF;
    --c-light: #F6F6F6;
    --c-page: #F7F7F7;
    --c-card: #F8F8F8;
    --c-gray: #B5B5B5;
    --c-gray-text: #767676;
    --c-line: #E4E1DF;

    /* Первый экран: текст лежит на снимке, а не на странице, поэтому у него
       своя пара «чернила — подложка». Значения сняты с макета. */
    --c-hero-ink: #FFFCF7;
    --c-hero-bg: #14130F;

    --font-text: "Source Sans 3", Arial, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-head: "Hypatia Sans Pro", "Source Sans 3", Arial, sans-serif;
    --font-hero: Literata, Georgia, "Times New Roman", serif;
    --font-ui: Inter, "Source Sans 3", Arial, sans-serif;
    --font-script: "Marck Script", "Segoe Script", cursive;

    --shadow-header: 0 2px 10px 0 rgba(196, 196, 196, .5);
    --shadow-card: 0 4px 24px 0 rgba(67, 46, 37, .09);
    --shadow-drawer: -8px 0 40px 0 rgba(67, 46, 37, .18);
    --shadow-drawer-left: 8px 0 40px 0 rgba(67, 46, 37, .18);

    --ease: .35s cubic-bezier(.4, 0, .2, 1);
    --ease-slow: .5s cubic-bezier(.4, 0, .2, 1);

    --topbar-h: 3.125rem;   /* 50px */
    --tabbar-h: 3.4375rem;  /* 55px — высота мобильной панели действий, замер @375 */
    --header-h: 3.375rem;   /* 54px */
    --header-top: 2.9375rem;/* 47px */
    --drawer-w: 26.875rem;  /* 430px */
}

/* -------------------------------------------------------------------------
   3. КОРНЕВОЙ МАСШТАБ (гибрид: якоря макета + плавный переход)

   Макет переключает root ступенями 16 -> 14 -> 12.5 -> 16 -> 15 -> 14 -> 13.
   Здесь сохранены точные значения макета на контрольных ширинах
   (>=1441, 1300..992, <=991, <=409, <=375, <=350), а «двойная ступенька»
   1490 -> 1400 -> 1300 заменена плавной интерполяцией.
   ---------------------------------------------------------------------- */
html {
    font-size: 16px;
    height: 100%;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    /* место под скроллбар зарезервировано всегда — панели открываются без сдвига вёрстки */
    scrollbar-gutter: stable;
}

@media screen and (min-width: 1301px) and (max-width: 1440px) {
    html {
        font-size: clamp(12.5px, calc(12.5px + 3.5 * ((100vw - 1300px) / 140)), 16px);
    }
}

@media screen and (max-width: 1300px) {
    html { font-size: 12.5px; }
}

@media screen and (max-width: 991px) {
    html { font-size: 16px; }
}

@media screen and (max-width: 409px) {
    html { font-size: 15px; }
}

@media screen and (max-width: 375px) {
    html { font-size: 14px; }
}

@media screen and (max-width: 350px) {
    html { font-size: 13px; }
}

/* -------------------------------------------------------------------------
   4. БАЗА
   ---------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: inherit; }

/* атрибут hidden должен побеждать любые display из классов */
[hidden] { display: none !important; }

.body {
    margin: 0;
    padding: 3.25rem 0 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-text);
    font-size: 1.25rem;
    line-height: normal;
    color: var(--c-brown);
    background: var(--c-page);
    /* clip вместо hidden: hidden делает обёртку контейнером прокрутки и
       ломает position:sticky у панели фильтров, clip только обрезает */
    overflow-x: hidden;
    overflow-x: clip;
}

.body.is-locked {
    overflow: hidden;
}

h1, h2, h3, h4,
.h1, .h2, .h3 {
    margin: 0;
    padding: 0;
    font-weight: 400;
}

p { margin: 0; line-height: 1.5rem; }

ul, ol, li { margin: 0; padding: 0; list-style: none; }

img, svg, picture { max-width: 100%; }

img { border: 0; }

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

button {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
}

input, select, textarea { font: inherit; color: inherit; }

blockquote { margin: 0; }

s { text-decoration: line-through; }

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

legend { padding: 0; }

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

.wrapper {
    flex: 1 0 auto;
    overflow-x: hidden;
    overflow-x: clip;
}

.main { display: block; }

/* -------------------------------------------------------------------------
   5. УТИЛИТЫ
   ---------------------------------------------------------------------- */
.sprite { display: none; }

.visually-hidden {
    position: absolute !important;
    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;
}

.skip-link {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 200;
    padding: .625rem 1.25rem;
    font-family: var(--font-head);
    font-size: .9375rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-white);
    background: var(--c-brown);
    transform: translate(-50%, -110%);
    transition: transform var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

.container {
    width: 100%;
    max-width: 71.25rem;      /* 1140px */
    margin: 0 auto;
    padding: 0 .9375rem;      /* контентная ширина 1110px по макету */
}

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

.icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill var(--ease), stroke var(--ease);
}

.icon--14 { width: .875rem; height: .875rem; }
.icon--16 { width: 1rem; height: 1rem; }
.icon--18 { width: 1.125rem; height: 1.125rem; }
.icon--20 { width: 1.25rem; height: 1.25rem; }
.icon--22 { width: 1.375rem; height: 1.375rem; }
.icon--24 { width: 1.5rem; height: 1.5rem; }

/* -------------------------------------------------------------------------
   6. ТИПОГРАФИКА (значения макета при root 16px)
   ---------------------------------------------------------------------- */
.h1 {
    font-family: var(--font-head);
    font-size: 2rem;          /* 32px */
    line-height: 2.5rem;      /* 40px */
    letter-spacing: .03em;
    text-transform: uppercase;
}

.h2 {
    font-family: var(--font-head);
    font-size: 2.75rem;       /* 44px */
    line-height: 1.2;         /* 52.8px */
    letter-spacing: .03em;
    text-transform: uppercase;
}

.h3 {
    font-family: var(--font-head);
    font-size: 1.5rem;        /* 24px */
    line-height: 2rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.section {
    padding: 3.5625rem 0 4.375rem;
    margin-bottom: .5rem;     /* зазор 8px цветом страницы, как в макете */
}

.section--white { background: var(--c-white); }

.section__title { margin-bottom: 3.75rem; }

/* Над сеткой карточек большой отступ уместен, а над абзацем текста заголовок
   от него отрывается. Два класса в селекторе — чтобы правило не перебивали
   адаптивные значения .section__title ниже по файлу. */
.section__title.section__title--text { margin-bottom: 1.5rem; }

.section__lead {
    max-width: 45.625rem;
    margin: -2.5rem auto 3.125rem;
    line-height: 1.5rem;
}

.section__cta {
    margin-top: 2.5rem;
    text-align: center;
}

/* -------------------------------------------------------------------------
   7. КНОПКИ
   ---------------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.125rem;                  /* 50px */
    padding: 1rem 1.5625rem .75rem;        /* 16/25/12/25 */
    font-family: var(--font-head);
    font-size: .9375rem;                   /* 15px */
    letter-spacing: .08em;                 /* 1.2px */
    text-transform: uppercase;
    white-space: nowrap;
    border: .1rem solid transparent;       /* 1.6px */
    transition: background-color var(--ease-slow), color var(--ease-slow), border-color var(--ease-slow);
    cursor: pointer;
}

.button--braun {
    color: var(--c-brown);
    border-color: var(--c-brown);
}

.button--light {
    color: var(--c-light);
    border-color: var(--c-light);
}

.button--orange {
    color: var(--c-white);
    background: var(--c-orange);
    border-color: var(--c-orange);
}

.button--small {
    min-height: 2.25rem;
    padding: .5625rem 1.5625rem .3125rem;
}

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

.button:disabled,
.button.is-disabled {
    opacity: .35;
    pointer-events: none;
}

@media (hover: hover) {
    .button--braun:hover,
    .button--light:hover {
        color: var(--c-light);
        background: var(--c-orange);
        border-color: var(--c-orange);
    }

    .button--orange:hover {
        background: var(--c-brown);
        border-color: var(--c-brown);
    }
}

.button--braun:active,
.button--light:active {
    color: var(--c-light);
    background: var(--c-orange);
    border-color: var(--c-orange);
}

/* -------------------------------------------------------------------------
   8. ЧИПСЫ, ПОЛЯ, РЕЙТИНГ, ЦЕНА
   ---------------------------------------------------------------------- */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 2.125rem;
    padding: .3125rem .875rem;
    font-family: var(--font-head);
    font-size: .875rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-brown);
    border: 1px solid var(--c-line);
    background: var(--c-white);
    transition: color var(--ease), border-color var(--ease), background-color var(--ease);
}

.chip.is-active {
    color: var(--c-white);
    background: var(--c-brown);
    border-color: var(--c-brown);
}

.chips--wide .chip { flex: 1 0 auto; justify-content: center; }

@media (hover: hover) {
    .chip:hover { border-color: var(--c-orange); color: var(--c-orange); }
    .chip.is-active:hover { color: var(--c-white); background: var(--c-orange); border-color: var(--c-orange); }
}

.input {
    display: block;
    width: 100%;
    height: 3.125rem;
    padding: 0 1.125rem;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    transition: border-color var(--ease);
}

.input::placeholder { color: var(--c-gray); opacity: 1; }
.input:focus { border-color: var(--c-orange); }

.rating {
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 1;
}

.rating__stars {
    display: inline-flex;
    gap: .0625rem;
}

/* Звезда в спрайте залита currentColor, поэтому цвет задаём через color:
   свойство fill на самом svg до атрибута внутри символа не достаёт */
.rating__stars .icon {
    color: var(--c-line);
    stroke: none;
}

.rating__stars .icon.is-on { color: var(--c-orange); }

.rating__value {
    font-family: var(--font-head);
    font-size: .9375rem;
}

.rating__count {
    font-size: .875rem;
    color: var(--c-gray-text);
}

.price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    line-height: 1;
}

.price__now {
    font-family: var(--font-head);
    font-size: 1.5rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

.price__old {
    font-size: .9375rem;
    color: var(--c-gray-text);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   9. ФОНОВЫЕ КАРТИНКИ СЕКЦИЙ (.picture__img)
   ---------------------------------------------------------------------- */
.picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.picture__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------------------------------------------------
   10. ВЕРХНЯЯ ПОЛОСА
   ---------------------------------------------------------------------- */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 52;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-h);
    padding-right: 1.75rem;
    background: var(--c-black);
    color: var(--c-gray);
}

.topbar__brands {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    height: 100%;
}

.topbar__home {
    display: flex;
    align-items: center;
    padding: 0 0 0 1.75rem;
    color: var(--c-gray);
}

.topbar__home-icon {
    display: block;
    width: .9375rem;
    height: 1.125rem;
    fill: currentColor;
}

.topbar__divider {
    width: .0625rem;
    height: 1rem;
    background: rgba(255, 255, 255, .18);
}

/* Марки в полосе набраны текстом: чужие логотипы в навигацию не ставим. */
.topbar__brand {
    display: block;
    padding: .3125rem 0;
    border-bottom: .125rem solid transparent;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-gray);
    white-space: nowrap;
    transition: color var(--ease);
}

.topbar__brand:hover { color: var(--c-white); }

.topbar__brand.is-active {
    border-bottom-color: var(--c-orange);
    color: var(--c-white);
}

.topbar__aside {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    font-size: .875rem;
}

.topbar__city,
.topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--c-gray);
    white-space: nowrap;
}

.topbar__city .icon,
.topbar__phone .icon { stroke-width: 1.4; }

.topbar__nav { display: block; }

.topbar__list {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.topbar__link { color: var(--c-gray); white-space: nowrap; }

@media (hover: hover) {
    .topbar__city:hover,
    .topbar__phone:hover,
    .topbar__link:hover { color: var(--c-white); }
}

/* -------------------------------------------------------------------------
   11. ШАПКА
   ---------------------------------------------------------------------- */
.header {
    position: fixed;
    top: var(--header-top);
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    width: 100%;
    min-height: var(--header-h);
    padding: .625rem 1.75rem;
    background: var(--c-white);
    box-shadow: var(--shadow-header);
    transition: transform var(--ease-slow);
}

.header.is-hidden { transform: translateY(-100%); }

.header__logo { display: block; flex: 0 0 auto; }

.header__logo-img {
    display: block;
    width: 10.731rem;    /* 171.7px */
    height: 1.375rem;    /* 22px */
    background-image: url("../img/logo.svg");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

.nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }

.nav__list {
    display: flex;
    align-items: center;
}

.nav__item { margin-right: 2.5rem; }
.nav__item:last-child { margin-right: 0; }

/* Меню шапки крупнее остального текста: это главная навигация, и на широком
   экране она читается с расстояния. Размер в rem, поэтому едет вместе с
   базовым кеглем и не ломает шапку на узком ноутбуке. Ниже 992px меню
   скрыто — там мобильное. */
.nav__link {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    font-size: 1.1875rem;
    color: var(--c-brown);
    white-space: nowrap;
    transition: color .25s;
}

.nav__chevron { transition: transform var(--ease); }

.nav__link--drop[aria-expanded="true"] { color: var(--c-orange); }
.nav__link.is-active { color: var(--c-orange); }
.nav__link--drop[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

@media (hover: hover) {
    .nav__link:hover { color: var(--c-orange); }
}

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

.action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    color: var(--c-brown);
}

.action__count {
    position: absolute;
    top: -.125rem;
    right: -.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 .25rem;
    font-family: var(--font-head);
    font-size: .6875rem;
    line-height: 1;
    color: var(--c-white);
    background: var(--c-orange);
    border-radius: 1rem;
}

.action.is-active { color: var(--c-orange); }

@media (hover: hover) {
    .action:hover { color: var(--c-orange); }
}

.burger { display: none; }

/* --- мега-меню --- */
.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-white);
    box-shadow: var(--shadow-header);
}

.mega__inner {
    display: grid;
    /* Колонок было четыре; с разделом Premier их пять, и жёсткое число
       отправило бы пятую колонку в отдельную строку. */
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 2rem;
    max-width: 71.25rem;
    margin: 0 auto;
    padding: 2.25rem .9375rem 2.5rem;
}

.mega__title {
    margin-bottom: 1.125rem;
    font-family: var(--font-head);
    font-size: 1.125rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.4;
}

.mega__list { display: grid; gap: .625rem; }

.mega__list a { font-size: 1.0625rem; color: var(--c-brown); }

.mega__link--accent { color: var(--c-orange); }

@media (hover: hover) {
    .mega__title a:hover,
    .mega__list a:hover { color: var(--c-orange); }
}

/* --- поиск --- */
.search {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 1.5rem .9375rem 1.75rem;
    background: var(--c-white);
    box-shadow: var(--shadow-header);
}

.search__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 69.375rem;
    margin: 0 auto;
}

.search__icon {
    position: absolute;
    left: 1rem;
    color: var(--c-gray-text);
    pointer-events: none;
}

.search__input {
    flex: 1 1 auto;
    height: 3.125rem;
    padding: 0 1rem 0 3.125rem;
    border: 1px solid var(--c-line);
    background: var(--c-white);
    transition: border-color var(--ease);
}

.search__input::placeholder { color: var(--c-gray); }
.search__input:focus { border-color: var(--c-orange); outline: none; }

/* Кнопка ровно по высоте поля: разная высота у соседних элементов строки
   читается как недоделка */
.search__submit {
    flex: 0 0 auto;
    height: 3.125rem;
    padding: 0 2rem;
}

/* --- быстрые результаты --- */
.search__results {
    max-width: 69.375rem;
    margin: .75rem auto 0;
    border: 1px solid var(--c-line);
    background: var(--c-white);
}

.search__result {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--c-card);
    color: var(--c-brown);
}

.search__result:last-of-type { border-bottom: 0; }

.search__result-media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    background: var(--c-card);
}

.search__result-media img { max-width: 100%; max-height: 100%; }

.search__result-info { display: grid; gap: .125rem; min-width: 0; }

.search__result-name {
    font-weight: 700;
    line-height: 1.3;
}

.search__result-name mark {
    color: var(--c-orange);
    background: none;
}

.search__result-meta {
    overflow: hidden;
    font-size: .875rem;
    color: var(--c-gray-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search__result-price { font-family: var(--font-head); font-size: 1.125rem; }

.search__result.is-cursor { background: var(--c-card); }

.search__all {
    display: block;
    width: 100%;
    padding: .75rem 1rem;
    font-size: .9375rem;
    color: var(--c-gray-text);
    text-align: center;
    border-top: 1px solid var(--c-card);
    transition: color var(--ease);
}

.search__empty {
    padding: 1.125rem 1rem;
    font-size: .9375rem;
    color: var(--c-gray-text);
    text-align: center;
}

@media (hover: hover) {
    .search__result:hover { background: var(--c-card); }
    .search__all:hover { color: var(--c-orange); }
}

.search__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--c-brown);
}

.search__hints {
    max-width: 69.375rem;
    margin: .875rem auto 0;
    font-size: .9375rem;
    color: var(--c-gray-text);
}

.search__hints a {
    margin-left: .75rem;
    color: var(--c-brown);
    border-bottom: 1px dashed var(--c-gray);
}

@media (hover: hover) {
    .search__hints a:hover { color: var(--c-orange); border-color: var(--c-orange); }
    .search__close:hover { color: var(--c-orange); }
}

/* --- мобильное меню --- */
.menu-mob {
    position: fixed;
    top: calc(var(--topbar-h) + var(--header-h));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    padding: 1.75rem 1.25rem 2.5rem;
    overflow-y: auto;
    background: var(--c-white);
}

.menu-mob__search {
    position: relative;
    display: flex;
    margin-bottom: 1.5rem;
}

.menu-mob__city {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: .875rem 1rem;
    font-size: 1rem;
    text-align: left;
    color: var(--c-brown);
    background: var(--c-card);
    border: 1px solid var(--c-line);
    transition: border-color var(--ease);
}

.menu-mob__city .icon { flex: 0 0 auto; stroke-width: 1.4; }
.menu-mob__city-name { font-weight: 700; }

.menu-mob__city-action {
    margin-left: auto;
    font-size: .875rem;
    color: var(--c-orange);
}

@media (hover: hover) {
    .menu-mob__city:hover { border-color: var(--c-orange); }
}

.menu-mob__search-input {
    flex: 1 1 auto;
    height: 3rem;
    padding: 0 3rem 0 1rem;
    border: 1px solid var(--c-line);
    background: var(--c-white);
    transition: border-color var(--ease);
}

.menu-mob__search-input::placeholder { color: var(--c-gray); }
.menu-mob__search-input:focus { border-color: var(--c-orange); outline: none; }

.menu-mob__search-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: var(--c-brown);
}

.menu-mob__search-btn:hover { color: var(--c-orange); }

.menu-mob__list {
    display: grid;
    gap: .125rem;
    margin-bottom: 1.75rem;
}

.menu-mob__link {
    display: block;
    padding: .875rem 0;
    font-family: var(--font-head);
    font-size: 1.125rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-card);
}

.menu-mob__call { margin-top: .5rem; }

/* -------------------------------------------------------------------------
   12. ПЕРВЫЙ ЭКРАН

   Размеры сняты с макета 2068x760 и выражены через --u — один пиксель макета.
   Поэтому от 1200px экран повторяет макет один-в-один на любой ширине.
   Ниже 1200px пропорции макета дают нечитаемо мелкий текст, и блок переходит
   на размеры в пикселях: корневой кегль темы меняется ступенями (16 -> 12.5 ->
   16 px), и rem дал бы на 1000px масштаб мельче, чем на 900px.

   У мелких кеглей стоит нижний порог max(): на 1200px пропорция макета даёт
   надзаголовку 12.8px, и порог поднимает его до 13px, не трогая заголовок.
   ---------------------------------------------------------------------- */
.section-hero { display: block; }

/*
 * Шапка и верхняя полоса висят поверх страницы, и её содержимое начинается
 * под ними лишь частично: у баннера они накрывали верхнюю полосу снимка вместе
 * с рукописной строкой. Смещаем баннер ровно на величину наезда — она считается
 * из тех же токенов, поэтому остаётся верной и там, где тема меняет корневой
 * кегль. На телефонах шапка занимает всю высоту отступа, и наезда нет.
 */
@media screen and (min-width: 768px) {
    .section-hero { margin-top: calc(var(--header-top) + var(--header-h) - 3.25rem); }
}

.hero-slider {
    /* Макет шириной 2068px растянут на окно, но не шире 1920px: на 1440px
       --u = 0.696px. В 100vw входит полоса прокрутки (тема резервирует место
       под неё всегда), из-за этого масштаб крупнее истинного на 0.8% — меньше
       половины пикселя на кегле заголовка. */
    --u: calc(min(100vw, 1920px) / 2068);

    position: relative;
    background: var(--c-hero-bg);
}

/* Лента листается штатной прокруткой с прилипанием: палец и трекпад работают
   без скриптов, а JS только доводит ленту до нужного слайда. */
.hero-slider__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.hero-slider__track::-webkit-scrollbar { width: 0; height: 0; }

@media (prefers-reduced-motion: no-preference) {
    .hero-slider__track { scroll-behavior: smooth; }
}

.hero {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    overflow: hidden;
    height: calc(760 * var(--u));
    font-family: var(--font-ui);
    color: var(--c-hero-ink);
    background: var(--c-hero-bg);
}

/* Тёмный текст — для слайда со светлым снимком. */
.hero--dark { color: var(--c-brown); }

.hero .picture__img { object-position: 50% 50%; }

/* Тень под текстом: в макете левая треть снимка тёмная, на любом другом
   снимке без неё текст сливается с фоном. */
.hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 9, 7, .55) 0%, rgba(10, 9, 7, .28) 32%, rgba(10, 9, 7, 0) 52%);
    pointer-events: none;
}

.hero--scrim-hard .hero__scrim {
    background: linear-gradient(90deg, rgba(10, 9, 7, .8) 0%, rgba(10, 9, 7, .52) 38%, rgba(10, 9, 7, .1) 62%);
}

.hero--scrim-none .hero__scrim { display: none; }

/* Светлый снимок под тёмным текстом наоборот высветляем. */
.hero--dark .hero__scrim {
    background: linear-gradient(90deg, rgba(255, 252, 246, .8) 0%, rgba(255, 252, 246, .42) 40%, rgba(255, 252, 246, 0) 62%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    padding: calc(107 * var(--u)) 0 0 calc(126 * var(--u));
}

.hero__eyebrow {
    margin: 0;
    font-size: max(13px, calc(22 * var(--u)));
    line-height: 1;
    letter-spacing: .28em;
    text-transform: uppercase;
    opacity: .88;
}

.hero__title {
    display: block;
    margin: calc(31.8 * var(--u)) 0 0;
    font-family: var(--font-hero);
    font-weight: 400;
    font-size: calc(88.9 * var(--u));
    line-height: calc(87.5 * var(--u));
    letter-spacing: 0;
    text-transform: none;
}

.hero__lead {
    margin: calc(26 * var(--u)) 0 0;
    font-size: max(16px, calc(26.2 * var(--u)));
    line-height: calc(37.5 * var(--u));
    opacity: .92;
}

.hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(32 * var(--u));
    margin-top: calc(30.2 * var(--u));
}

/* Кнопка первого экрана — своя, а не .button: в макете это скруглённая
   плашка со стрелкой, а не прямоугольник. */
.hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(21 * var(--u));
    min-height: calc(75 * var(--u));
    padding: calc(8 * var(--u)) calc(55 * var(--u));
    font-size: max(15px, calc(24.1 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
    color: var(--c-white);
    background: var(--c-orange);
    border-radius: 999px;
    transition: background-color var(--ease), transform var(--ease);
}

@media (hover: hover) {
    .hero__btn:hover { background: var(--c-orange-dark); }
}

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

.hero__btn-arrow {
    flex: 0 0 auto;
    width: calc(26 * var(--u));
    height: calc(15 * var(--u));
    min-width: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero__ghost {
    font-size: max(15px, calc(24 * var(--u)));
    font-weight: 500;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-color: rgba(255, 252, 246, .55);
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
    text-decoration-thickness: max(1px, calc(2 * var(--u)));
    text-underline-offset: calc(5 * var(--u));
    transition: text-decoration-color var(--ease);
}

@media (hover: hover) {
    .hero__ghost:hover { text-decoration-color: currentColor; }
}

/* --- отметки под кнопками --- */
.hero__feats {
    display: flex;
    align-items: center;
    gap: calc(23 * var(--u));
    margin: calc(78.9 * var(--u)) 0 0;
}

.hero__feat {
    display: flex;
    align-items: center;
    gap: calc(25 * var(--u));
}

/* Разделитель рисуется, а не пишется в разметку: пустой элемент между
   отметками пришлось бы прятать от скринридера. */
.hero__feat + .hero__feat::before {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: calc(34 * var(--u));
    min-height: 20px;
    margin-right: calc(23 * var(--u));
    background: currentColor;
    opacity: .28;
}

.hero__feat-ico {
    flex: 0 0 auto;
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
    min-width: 22px;
    min-height: 22px;
    fill: none;
    stroke: currentColor;
    /* иконки спрайта нарисованы в сетке 24x24, а показаны крупнее макетной:
       толщину подобрали так, чтобы линия совпала с макетом */
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .92;
}

.hero__feat-text {
    font-size: max(13px, calc(20 * var(--u)));
    line-height: calc(26.8 * var(--u));
    opacity: .92;
}

/* --- рукописная строка справа --- */
.hero__script {
    position: absolute;
    z-index: 2;
    left: calc(1608 * var(--u));
    top: calc(56 * var(--u));
    margin: 0;
    font-family: var(--font-script);
    font-size: calc(46 * var(--u));
    line-height: calc(44 * var(--u));
    color: var(--c-white);
    white-space: nowrap;
    transform: rotate(-7deg);
    transform-origin: 0 0;
    pointer-events: none;
}

.hero--dark .hero__script { color: var(--c-brown); }

/* Третья строка в макете сдвинута — так подпись выглядит написанной от руки. */
.hero__script span { display: block; }
.hero__script span:nth-child(3) { margin-left: calc(18 * var(--u)); }

.hero__heart {
    position: absolute;
    z-index: 2;
    left: calc(1815 * var(--u));
    top: calc(224 * var(--u));
    width: calc(45 * var(--u));
    height: calc(45 * var(--u));
    color: var(--c-white);
    fill: none;
    stroke: currentColor;
    stroke-width: .9;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.hero--dark .hero__heart { color: var(--c-brown); }

/* --- переключатели слайдов --- */
/* Показываются только когда слайдер ожил: без скрипта лента листается
   прокруткой, а мёртвые кнопки посетителю не нужны. */
.hero-slider__nav,
.hero-slider__arrow { display: none; }

.hero-slider.is-ready .hero-slider__nav { display: flex; }

.hero-slider__nav {
    position: absolute;
    left: 50%;
    bottom: calc(40 * var(--u));
    z-index: 3;
    align-items: center;
    gap: max(6px, calc(11 * var(--u)));
    transform: translateX(-50%);
}

/* Отметки слайдов — короткие полоски, а не кружки: по активной видно, сколько
   осталось до следующего слайда. Приглушаем их цветом, а не opacity: она
   погасила бы и заливку отсчёта. */
.hero-slider__dot {
    position: relative;
    width: max(22px, calc(32 * var(--u)));
    height: max(4px, calc(5 * var(--u)));
    background: color-mix(in srgb, var(--c-hero-ink) 45%, transparent);
    border-radius: 999px;
    /* Полоски лежат прямо на снимке, и на светлом кадре им нужна тень. */
    box-shadow: 0 1px 3px rgba(10, 9, 7, .45);
    transition: width var(--ease), background-color var(--ease);
}

/* Полоска тонкая, пальцем в неё не попасть — нажимается поле выше и ниже. */
.hero-slider__dot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -11px;
    bottom: -11px;
}

/* Активная полоска — оранжевая с самого начала: пока отсчёт у нуля, одной
   заливки не видно, и текущий слайд ничем не отличался бы от прочих. */
.hero-slider__dot[aria-current="true"] {
    width: max(46px, calc(66 * var(--u)));
    background: color-mix(in srgb, var(--c-orange) 38%, transparent);
}

.hero-slider__dot[aria-current="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-orange);
    border-radius: inherit;
    transform-origin: left center;
}

/* Отсчёт до следующего слайда. Класс и длительность ставит assets/js/hero.js:
   задержку знает только он, он же останавливает отсчёт вместе с прокруткой.
   Без автопрокрутки полоска просто закрашена целиком. */
.hero-slider.is-counting .hero-slider__dot[aria-current="true"]::after {
    animation: hero-dot var(--hero-delay, 7000ms) linear forwards;
}

.hero-slider.is-counting.is-paused .hero-slider__dot[aria-current="true"]::after {
    animation-play-state: paused;
}

@keyframes hero-dot {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (hover: hover) {
    .hero-slider__dot:not([aria-current="true"]):hover {
        background: color-mix(in srgb, var(--c-hero-ink) 78%, transparent);
    }
}

/* Стрелки — один знак, без плашки: кружок с обводкой на снимке читается
   наклейкой. На светлом кадре знак держит тень, а нажимается площадка вокруг
   него — сам знак для пальца слишком узкий. */
.hero-slider.is-ready .hero-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(48px, calc(68 * var(--u)));
    height: max(48px, calc(68 * var(--u)));
    color: var(--c-hero-ink);
    background: none;
    opacity: .85;
    transform: translateY(-50%);
    transition: opacity var(--ease);
}

.hero-slider__arrow--prev { left: max(2px, calc(22 * var(--u))); }
.hero-slider__arrow--next { right: max(2px, calc(22 * var(--u))); }

.hero-slider__arrow .icon {
    width: max(40px, calc(58 * var(--u)));
    height: max(40px, calc(58 * var(--u)));
    /* Толщина линии живёт в системе координат символа: на большом знаке
       обычные 1.6 дали бы 2.7px. */
    stroke-width: 1.3;
    filter: drop-shadow(0 1px 3px rgba(10, 9, 7, .5));
    /* Сдвиг под курсором — свойством translate: transform занят поворотом. */
    transition: translate var(--ease);
}

.hero-slider__arrow--prev .icon { transform: rotate(90deg); }
.hero-slider__arrow--next .icon { transform: rotate(-90deg); }

@media (hover: hover) {
    .hero-slider__arrow:hover { opacity: 1; }
    .hero-slider__arrow--prev:hover .icon { translate: -4px 0; }
    .hero-slider__arrow--next:hover .icon { translate: 4px 0; }
}

/* --- полоса преимуществ --- */
.badges {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    /* Раньше полоса наезжала на нижний край баннера. Новый первый экран
       ниже, и снизу у него ряд отметок — значки встают под ним. */
    margin-top: 2.5rem;
}

.badges__item { flex: 0 0 auto; }

.badges__img {
    display: block;
    width: 7.5rem;          /* 120px */
    height: 7.5rem;
}

/* -------------------------------------------------------------------------
   13. КАТЕГОРИИ
   ---------------------------------------------------------------------- */
.cats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.875rem;
}

.cats__item,
.products__item,
.reviews__item,
.posts__item { display: flex; }

.cats__item > *,
.products__item > *,
.reviews__item > *,
.posts__item > * { width: 100%; }

.cat {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--c-card);
    transition: box-shadow var(--ease), transform var(--ease);
}

.cat__media {
    display: flex;
    align-items: center;
    justify-content: center;
    /* высота задана явно: при aspect-ratio процентный max-height картинки
       не разрешается и высокие иллюстрации растягивают плашку */
    height: 12.5rem;
    padding: 1.75rem 1.125rem .625rem;
}

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

.cat__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 1.5rem 1.75rem;
    text-align: center;
}

.cat__title {
    display: block;
    margin-bottom: .375rem;
    font-family: var(--font-head);
    font-size: 1.5rem;
    line-height: 1.875rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.cat__count {
    display: block;
    margin-bottom: 1.125rem;
    font-size: .9375rem;
    color: var(--c-gray-text);
}

.cat__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: auto;
    font-family: var(--font-head);
    font-size: .875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-orange);
}

.cat__more .icon { transition: transform var(--ease); }

@media (hover: hover) {
    .cat:hover { box-shadow: var(--shadow-card); transform: translateY(-.25rem); }
    .cat:hover .cat__more .icon { transform: translateX(.25rem); }
}

/* -------------------------------------------------------------------------
   13a. ПОЛКА КАТАЛОГА: ВКЛАДКИ РАЗДЕЛОВ

   Вкладка на раздел, внутри — витрина раздела, плитки подразделов и колонки
   ссылок на подборки. Панели всех вкладок лежат в разметке сразу, неактивные
   закрыты атрибутом hidden: робот видит все ссылки, а на печати разделы
   разворачиваются подряд.
   ---------------------------------------------------------------------- */
.section-shelf { padding: 4.375rem 0 4.6875rem; }

.shelf__lead {
    max-width: 40rem;
    margin: 0 auto 2.5rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--c-gray-text);
    text-align: center;
}

/* ----- вкладки ----- */
.shelf__nav {
    display: flex;
    gap: .625rem;
    margin-bottom: 1.875rem;
}

.shelf__tab {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-width: 0;
    padding: 1rem 1.25rem;
    font: inherit;
    text-align: center;
    color: var(--c-brown);
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: .625rem;
    cursor: pointer;
    transition: color var(--ease), background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.shelf__tab-icon {
    flex: 0 0 auto;
    width: 1.625rem;
    height: 1.625rem;
    color: var(--c-orange);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color var(--ease);
}

.shelf__tab-title {
    display: block;
    overflow: hidden;
    font-family: var(--font-head);
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shelf__tab.is-active {
    color: var(--c-white);
    background: var(--c-brown);
    border-color: var(--c-brown);
    box-shadow: var(--shadow-card);
}

@media (hover: hover) {
    .shelf__tab:hover { border-color: var(--c-orange); }
    .shelf__tab.is-active:hover { border-color: var(--c-brown); }
}

/* ----- витрина раздела ----- */
.shelf__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr);
    gap: .9375rem;
}

.shelf__feature {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.75rem 1.875rem;
    overflow: hidden;
    color: var(--c-white);
    text-decoration: none;
    background: var(--c-brown);
    border-radius: .875rem;
}

/* тёплое пятно в углу: без него плашка выглядит плоским прямоугольником */
.shelf__feature::after {
    content: "";
    position: absolute;
    top: -35%;
    right: -30%;
    width: 22rem;
    height: 22rem;
    pointer-events: none;
    background: radial-gradient(circle, rgba(254, 112, 44, .5), rgba(254, 112, 44, 0) 70%);
}

.shelf__feature-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 11.25rem;
    margin-bottom: 1.375rem;
}

.shelf__feature-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    filter: drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, .35));
    transition: transform var(--ease);
}

.shelf__feature-body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.shelf__feature-title {
    display: block;
    margin-bottom: .5rem;
    font-family: var(--font-head);
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.shelf__feature-text {
    display: block;
    margin-bottom: 1.25rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
}

.shelf__feature-more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    font-family: var(--font-head);
    font-size: .875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-orange);
}

.shelf__feature-more .icon { transition: transform var(--ease); }

@media (hover: hover) {
    .shelf__feature:hover .shelf__feature-img { transform: translateY(-.375rem) scale(1.03); }
    .shelf__feature:hover .shelf__feature-more .icon { transform: translateX(.25rem); }
}

/* ----- плитки подразделов ----- */
.shelf__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shelf__grid-item { display: flex; }

.shelf__tile {
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    padding: .875rem 1rem .875rem .875rem;
    color: var(--c-brown);
    text-decoration: none;
    background: var(--c-card);
    border: 1px solid transparent;
    border-radius: .75rem;
    transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.shelf__tile-media {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    background: var(--c-white);
    border-radius: .5rem;
}

.shelf__tile-img {
    display: block;
    width: auto;
    max-width: 86%;
    height: auto;
    max-height: 86%;
}

.shelf__tile-body {
    flex: 1 1 auto;
    min-width: 0;
}

.shelf__tile-title {
    display: block;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    line-height: 1.2;
    letter-spacing: .02em;
    /* «Стерилизованным» в одно слово шире колонки: без переноса оно наезжало
       на стрелку у правого края плитки */
    overflow-wrap: anywhere;
}

.shelf__tile-count {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.shelf__tile-arrow {
    flex: 0 0 auto;
    color: var(--c-orange);
    opacity: .45;
    transition: opacity var(--ease), transform var(--ease);
}

@media (hover: hover) {
    .shelf__tile:hover {
        background: var(--c-white);
        border-color: var(--c-line);
        box-shadow: var(--shadow-card);
        transform: translateY(-.125rem);
    }
    .shelf__tile:hover .shelf__tile-arrow { opacity: 1; transform: translateX(.25rem); }
}

/*
 * Вкладка, где подразделов мало (ветдиеты — их три), одной строкой плиток
 * оставляла пустоту рядом с высокой витриной. Такие плитки разворачиваются в
 * вертикальные карточки и занимают всю высоту строки.
 */
.shelf__panel--few .shelf__grid { grid-auto-rows: minmax(0, 1fr); }

.shelf__panel--few .shelf__tile {
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.shelf__panel--few .shelf__tile-media {
    width: 7.5rem;
    height: 7.5rem;
}

.shelf__panel--few .shelf__tile-body { flex: 0 0 auto; }

.shelf__panel--few .shelf__tile-title { font-size: 1.125rem; }

/* ----- колонки ссылок на подборки ----- */
.shelf__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2.5rem;
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--c-line);
}

.shelf__group-title {
    margin: 0 0 .75rem;
    font-family: var(--font-head);
    font-size: .875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-gray-text);
}

.shelf__group-list {
    display: grid;
    gap: .0625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shelf__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .625rem;
    padding: .3125rem 0;
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--c-brown);
    text-decoration: none;
    transition: color var(--ease);
}

.shelf__link-count {
    flex: 0 0 auto;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--c-gray);
    transition: color var(--ease);
}

@media (hover: hover) {
    .shelf__link:hover,
    .shelf__link:hover .shelf__link-count { color: var(--c-orange); }
}

/* ----- планшет ----- */
@media screen and (max-width: 991px) {
    .section-shelf { padding: 3.75rem 0; }
    .shelf__lead { margin: -1.5rem auto 1.875rem; }

    /* вкладок четыре и больше: в строку они не встают, уводим в прокрутку */
    .shelf__nav {
        margin-right: -1rem;
        margin-left: -1rem;
        padding: 0 1rem .25rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .shelf__nav::-webkit-scrollbar { display: none; }
    .shelf__tab { flex: 0 0 auto; }
    .shelf__tab-title { font-size: 1rem; }

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

    .shelf__feature {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .shelf__feature-media {
        flex: 0 0 auto;
        width: 9rem;
        height: 9rem;
        margin-bottom: 0;
    }

    .shelf__feature-title { font-size: 1.5rem; }
    .shelf__feature-text { margin-bottom: .875rem; }
    .shelf__feature-more { margin-top: 0; }

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

/* ----- телефон ----- */
@media screen and (max-width: 575px) {
    .section-shelf { padding: 2.5rem 0; }

    .shelf__tab { padding: .75rem 1rem; }
    .shelf__tab-icon { width: 1.375rem; height: 1.375rem; }

    .shelf__feature {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .shelf__feature-media {
        width: 100%;
        height: 9.5rem;
        margin-bottom: 1.125rem;
    }

    .shelf__grid,
    .shelf__links { grid-template-columns: minmax(0, 1fr); }

    .shelf__tile-media { width: 3.5rem; height: 3.5rem; }
    .shelf__tile-title { font-size: 1rem; }
}

/* -------------------------------------------------------------------------
   14. ТОВАРЫ
   ---------------------------------------------------------------------- */
.section-products { padding: 5.5625rem 0 3.75rem; }

.products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.875rem;
}

.product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;      /* плашка 350x350 по макету */
    padding: 1.9375rem 1.125rem 1.25rem;
    background: var(--c-card);
    overflow: hidden;
}

/* Ссылка занимает всю плашку: нажатие в любую точку фотографии ведёт в карточку */
.product__media-link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.9375rem 1.125rem 1.25rem;
}

.product__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    transition: transform var(--ease-slow);
}

.product__img--1 { width: 17.3125rem; height: 12.5rem; }
.product__img--2 { width: 15.9375rem; height: 12.5rem; }
.product__img--3 { width: 17rem; height: 15.3125rem; }
.product__img--4 { width: 16.8125rem; height: 14.3125rem; }
.product__img--5 { width: 17.9375rem; height: 13.5625rem; }
.product__img--6 { width: 16.125rem; height: 14.25rem; }

.product__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    padding: .25rem .625rem .1875rem;
    font-family: var(--font-head);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-white);
    background: var(--c-brown);
}

.product__badge--new { background: var(--c-orange); }
.product__badge--sale { background: var(--c-red); }

.product__fav {
    position: absolute;
    top: .625rem;
    right: .625rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--c-brown);
}

.product__fav .icon { fill: none; transition: fill var(--ease), stroke var(--ease), transform var(--ease); }

.product__fav[aria-pressed="true"] { color: var(--c-red); }
.product__fav[aria-pressed="true"] .icon { fill: currentColor; }
.product__fav.is-bump .icon { transform: scale(1.25); }

@media (hover: hover) {
    .product__fav:hover { color: var(--c-red); }
    .product:hover .product__img { transform: scale(1.04); }
}

.product__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.25rem 0 0;
}

.product__title {
    margin-bottom: .375rem;
    font-family: var(--font-text);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.5rem;
    letter-spacing: normal;
    text-transform: none;
}

@media (hover: hover) {
    .product__link:hover { color: var(--c-orange); }
}

.product__meta {
    /* две строки под описание — иначе рейтинг и фасовки в соседних
       карточках встают на разной высоте */
    min-height: 2.5rem;
    margin-bottom: .75rem;
    font-size: .9375rem;
    line-height: 1.25rem;
    color: var(--c-gray-text);
}

.product .rating { margin-bottom: 1rem; }

.product .chips { margin-bottom: 1.125rem; }

.product__buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
}

.product__add { padding: 1rem 1.25rem .75rem; }

/* -------------------------------------------------------------------------
   15. ПОЧЕМУ GRANDORF
   ---------------------------------------------------------------------- */
.section-why { padding: 2.25rem 0 1rem; }

.why {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.why__block {
    position: relative;
    z-index: 10;
    padding-right: 4rem;
}

.why__list {
    margin-top: 4.3125rem;
    margin-left: -1.6875rem;
}

.why__item {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-bottom: 1.6875rem;
}

.why__item:last-child { margin-bottom: 0; }

.why__link {
    display: flex;
    align-items: center;
    min-width: 0;
    font-family: var(--font-head);
    letter-spacing: .03em;
    text-transform: uppercase;
}

.why__link::before {
    content: "";
    width: 1.375rem;
    min-width: 1.375rem;
    height: .9375rem;
    margin-right: .375rem;
    margin-top: -.375rem;
    background-image: url("../img/check-icon.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.why__link--accent { color: var(--c-orange); }

@media (hover: hover) {
    .why__link:hover { color: var(--c-orange); }
}

.why__media { display: block; }

.why__img--desktop {
    display: block;
    /* картинка шире своей колонки и выходит вправо внутри контейнера */
    max-width: none;
    width: 41.4375rem;      /* 663px */
    height: 35.6875rem;     /* 571px */
    margin-left: -7.8125rem;
    margin-top: -1.0625rem;
    object-fit: contain;
}

.why__img--mobile { display: none; }

/* -------------------------------------------------------------------------
   16. КАЛЬКУЛЯТОР
   ---------------------------------------------------------------------- */
.calc {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.875rem;
    align-items: stretch;
}

.calc__controls {
    display: grid;
    align-content: start;
    gap: 2rem;
    padding: 2.5rem;
    background: var(--c-card);
}

.calc__field { display: block; }

.calc__legend {
    display: block;
    margin-bottom: .875rem;
    font-family: var(--font-head);
    font-size: 1rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.calc__output {
    font-family: var(--font-head);
    color: var(--c-orange);
}

.calc__range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 1.5rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.calc__range::-webkit-slider-runnable-track {
    height: .375rem;
    background: linear-gradient(var(--c-orange), var(--c-orange)) 0 / var(--fill, 20%) 100% no-repeat, var(--c-line);
}

.calc__range::-moz-range-track {
    height: .375rem;
    background: var(--c-line);
}

.calc__range::-moz-range-progress {
    height: .375rem;
    background: var(--c-orange);
}

.calc__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -.5625rem;
    background: var(--c-white);
    border: .1875rem solid var(--c-orange);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(67, 46, 37, .25);
}

.calc__range::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--c-white);
    border: .1875rem solid var(--c-orange);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(67, 46, 37, .25);
}

.calc__scale {
    display: flex;
    justify-content: space-between;
    margin-top: .375rem;
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.calc__result {
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    color: var(--c-light);
    background: var(--c-brown);
}

.calc__result-main {
    margin-bottom: 1.5rem;
    font-family: var(--font-head);
    font-size: 3.25rem;
    line-height: 1;
    letter-spacing: .02em;
}

.calc__result-unit { font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; }

.calc__facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-top: 1px solid rgba(246, 246, 246, .25);
}

.calc__fact { display: block; }

.calc__fact-value {
    display: block;
    margin-bottom: .25rem;
    font-family: var(--font-head);
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--c-orange);
}

.calc__fact-label {
    display: block;
    font-size: .875rem;
    line-height: 1.25rem;
}

.calc__note {
    margin-bottom: 1.75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: rgba(246, 246, 246, .7);
}

.calc__cta { margin-top: auto; align-self: flex-start; }

/* -------------------------------------------------------------------------
   17. БАННЕР ИНГРЕДИЕНТОВ
   ---------------------------------------------------------------------- */
.section-ingredients { display: block; }

.ingredients {
    position: relative;
    width: 100%;
    height: 67.25rem;      /* 1076px */
}

.ingredients .container { position: relative; z-index: 10; }

.ingredients__content {
    max-width: 45.625rem;   /* 730px */
    margin: 0 auto;
    padding-top: 21.3125rem;/* 341px */
    text-align: center;
    color: var(--c-light);
}

.ingredients__title { margin-bottom: 1.25rem; }

.ingredients__text {
    margin-bottom: 2.6875rem;
    padding: 0 3.8125rem;
    line-height: 1.5rem;
}

/* -------------------------------------------------------------------------
   17a. МЯСО В ОСНОВЕ КОРМОВ (схема с выносками)

   Раскладка блока scheme-meet собрана по замерам макета: две колонки по
   половине контентной ширины, снимок шириной 40.5rem с отрицательным левым
   отступом и шесть подписей в абсолютных координатах. Снимок нарочно шире
   своей колонки — пунктирные стрелки на нём уходят под текст справа, так же
   как в макете.
   ---------------------------------------------------------------------- */
.section-meat { padding: 7.5rem 0 8.4375rem; }

/* колонки повторяют сетку макета: row -15px и по 15px в каждой половине */
.meat {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 -.9375rem;
}

.meat > * { padding: 0 .9375rem; }

.meat__scheme {
    position: relative;
    width: 40.5rem;
    height: 29.8125rem;
    margin-left: -2.5rem;
}

.meat__scheme picture,
.meat__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.meat__label {
    position: absolute;
    margin: 0;
    font-weight: 700;
    line-height: 1.5rem;
}

/* Обход по кругу: слева сверху и дальше по часовой стрелке. */
.meat__label--1 { top: -.6875rem; left: 11.375rem; text-align: right; }
.meat__label--2 { top: 22.1875rem; left: 41.1875rem; }
.meat__label--3 { top: 26.1875rem; left: 39.125rem; }
.meat__label--4 { top: 29.0625rem; left: 30.1875rem; }
.meat__label--5 { top: 26.9375rem; left: 10.4375rem; text-align: right; }
.meat__label--6 { top: 4.375rem; left: 1.375rem; text-align: right; }

/* Схема шире своей половины сетки и заезжает под текст, поэтому текстовая
   колонка поднята над ней: как элемент сетки она слушает z-index без position. */
.meat__body { z-index: 1; }

.meat__title { margin: 0 0 .9375rem; }

.meat__text { margin: 0 0 1rem; }

.meat__text:last-child { margin-bottom: 0; }

/* ----- планшет: текст выше схемы, схема по центру ----- */
@media screen and (max-width: 991px) {
    .section-meat { padding: 7.5rem 0 8.4375rem; }

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

    .meat__title,
    .meat__text { text-align: center; }

    /* в макете колонки переставлены: сначала текст, потом схема */
    .meat__body { order: 1; }

    .meat__scheme {
        order: 2;
        width: 26rem;
        height: 26.3125rem;
        margin: 6.25rem auto 0;
    }

    .meat__label--1 { top: -3.0625rem; left: 5.75rem; }
    .meat__label--2 { top: -.6875rem; left: 17.375rem; text-align: right; }
    .meat__label--3 { top: 26.5625rem; left: 6.5625rem; text-align: right; }
    .meat__label--4 { top: 21.875rem; left: 15.4375rem; text-align: right; }
    .meat__label--5 { top: 19.9375rem; left: 2.8125rem; }
    .meat__label--6 { top: 2.3125rem; left: 2.3125rem; text-align: left; }
}

@media screen and (max-width: 767px) {
    .section-meat { padding: 5.1875rem 0 9.9375rem; }
    .meat__scheme { margin-top: 7.3125rem; }
}

@media screen and (max-width: 450px) {
    .meat__scheme { margin-left: -1.25rem; }
}

/*
 * На самых узких телефонах схема шире экрана, и правая подпись выходит за край.
 * Двигать подписи по одной нельзя: выносные стрелки нарисованы в снимке.
 * Поэтому уменьшаем схему целиком — пропорции и стрелки остаются на месте,
 * а отрицательный отступ снизу убирает пустоту от масштабирования.
 */
@media screen and (max-width: 375px) {
    .meat__scheme {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: -2.5rem;
        transform: scale(.9);
        transform-origin: top center;
    }
}

@media screen and (max-width: 350px) {
    .meat__scheme {
        margin-bottom: -4rem;
        transform: scale(.82);
    }
}

/* -------------------------------------------------------------------------
   18. СЕРТИФИКАТЫ
   ---------------------------------------------------------------------- */
.section-certs { padding: 0 0 5rem; }

.certs {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.certs__flag { line-height: 0; }

.certs__flag-img {
    display: block;
    width: 2.5rem;
    height: 1.875rem;
    margin-bottom: .875rem;
    object-fit: contain;
}

.certs__title {
    font-family: var(--font-head);
    font-size: 1.25rem;
    line-height: 2rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.certs__desc {
    margin-top: .875rem;
    margin-bottom: .8125rem;
    line-height: normal;
}

.certs__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
    height: auto;
    min-height: 4.375rem;
}

.certs__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 4.375rem;   /* 70px */
}

.certs__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    opacity: .85;
    transition: opacity var(--ease);
}

@media (hover: hover) {
    .certs__item:hover .certs__img { opacity: 1; }
}

/* -------------------------------------------------------------------------
   19. ОТЗЫВЫ
   ---------------------------------------------------------------------- */
.reviews__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin: -2.5rem 0 3.125rem;
}

.reviews__score {
    font-family: var(--font-head);
    font-size: 2rem;
    line-height: 1;
}

.reviews__count { color: var(--c-gray-text); font-size: .9375rem; }

.reviews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.875rem;
}

.review {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.875rem;
    background: var(--c-card);
}

.review .rating { margin-bottom: 1.125rem; }

.review__text {
    flex: 1 1 auto;
    margin-bottom: 1.5rem;
    line-height: 1.5rem;
}

.review__footer {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.review__avatar {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-line);
}

.review__who {
    display: grid;
    gap: .125rem;
    min-width: 0;
}

.review__author {
    font-family: var(--font-text);
    font-weight: 700;
    font-size: 1.0625rem;
}

.review__meta { font-size: .875rem; color: var(--c-gray-text); }

/* -------------------------------------------------------------------------
   20. СТАТИСТИКА
   ---------------------------------------------------------------------- */
.section-stats { display: block; }

.stats {
    position: relative;
    width: 100%;
    height: 69.375rem;     /* 1110px @1920 */
    text-align: center;
}

.stats .container { position: relative; z-index: 10; }

.stats__head { padding-top: 3.375rem; }

.stats__title {
    max-width: 45.625rem;
    margin: 0 auto 1.25rem;
}

.stats__list {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 45.625rem;
    margin: 0 auto 2.625rem;
}

.stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats__value {
    font-family: var(--font-head);
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.stats__label { line-height: 1.5rem; }

/* -------------------------------------------------------------------------
   21. СТАТЬИ
   ---------------------------------------------------------------------- */
.posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.875rem;
}

.post {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.875rem 1.875rem;
    background: var(--c-card);
    transition: box-shadow var(--ease);
}

.post__tag {
    margin-bottom: 1rem;
    font-family: var(--font-head);
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-orange);
}

.post__title {
    margin-bottom: .75rem;
    font-family: var(--font-head);
    font-size: 1.3125rem;
    line-height: 1.75rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.post__excerpt {
    flex: 1 1 auto;
    margin-bottom: 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.5rem;
}

.post__meta { font-size: .875rem; color: var(--c-gray-text); }

@media (hover: hover) {
    .post:hover { box-shadow: var(--shadow-card); }
    .post__link:hover { color: var(--c-orange); }
}

/* -------------------------------------------------------------------------
   22. ПОДПИСКА
   ---------------------------------------------------------------------- */
.section-subscribe {
    padding: 3.125rem 0;
    margin-bottom: .5rem;
    color: var(--c-light);
    background: var(--c-brown);
}

.subscribe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 2.5rem;
    align-items: center;
}

.subscribe__title { margin-bottom: .625rem; color: var(--c-light); }

.subscribe__desc { line-height: 1.5rem; }

.subscribe__row {
    display: flex;
    gap: .75rem;
}

.subscribe__input {
    flex: 1 1 auto;
    color: var(--c-light);
    background: transparent;
    border-color: rgba(246, 246, 246, .5);
}

.subscribe__input::placeholder { color: rgba(246, 246, 246, .6); }
.subscribe__input:focus { border-color: var(--c-orange); }

.subscribe__error,
.subscribe__ok {
    margin-top: .625rem;
    font-size: .875rem;
}

.subscribe__error { color: #FFB4A2; }
.subscribe__ok { color: #B8E986; }

.subscribe__policy {
    margin-top: .875rem;
    font-size: .8125rem;
    line-height: 1.25rem;
    color: rgba(246, 246, 246, .6);
}

.subscribe__policy a { border-bottom: 1px solid rgba(246, 246, 246, .4); }

@media (hover: hover) {
    .subscribe__policy a:hover { color: var(--c-orange); border-color: var(--c-orange); }
}

/* -------------------------------------------------------------------------
   23. ПОДВАЛ
   ---------------------------------------------------------------------- */
.footer {
    flex: 0 0 auto;
    position: relative;
    z-index: 10;
    padding: 3.0625rem 0;
    color: var(--c-gray);
    background: var(--c-black);
}

.footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    padding-bottom: 2.6875rem;
    border-bottom: 1px solid rgba(181, 181, 181, .25);
}

.footer__logo { display: inline-block; margin-bottom: 1.125rem; }

.footer__logo-img {
    display: block;
    width: 10.731rem;
    height: 1.375rem;
    background-image: url("../img/logo-footer.svg");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

.footer__about {
    margin-bottom: 1.5rem;
    font-size: .9375rem;
    line-height: 1.375rem;
}

.footer__brands {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
    align-items: center;
    gap: .75rem 1.25rem;
}

.footer__brand {
    display: block;
    white-space: nowrap;
    font-size: .875rem;
    color: var(--c-gray);
    transition: color var(--ease);
}

.footer__brand.is-active,
.footer__brand:hover { color: var(--c-white); }

.footer__title {
    margin-bottom: 1.125rem;
    font-family: var(--font-head);
    font-size: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-white);
}

.footer__list { display: grid; gap: .75rem; font-size: .9375rem; }

.footer__list--contacts { line-height: 1.375rem; }

.footer__phone {
    font-family: var(--font-head);
    font-size: 1.25rem;
    color: var(--c-white);
}

.footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin-top: 1.25rem;
}

.footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--c-white);
    border: 1px solid rgba(181, 181, 181, .4);
    border-radius: 50%;
    transition: color var(--ease), border-color var(--ease);
}

/* Знак соцсети крупнее платёжного: правило .brandmark идёт ниже по файлу,
   поэтому выигрываем специфичностью, а не порядком. */
.footer__social .footer__social-icon { height: 1.25rem; }

.footer__bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    padding-top: 1.75rem;
    font-size: .875rem;
}

.footer__pay {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Логотипы платёжных систем стоят на белых плашках: на чёрном фоне зелёный
   «Мир» и цвета СБП теряются, а перекрашивать чужие марки нельзя. */
.footer__pay-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 1.75rem;
    padding: 0 .5rem;
    color: var(--c-gray-text);
    background: var(--c-white);
    border-radius: .25rem;
}

.footer__pay-item--text {
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-white);
    background: none;
    border: 1px solid rgba(181, 181, 181, .35);
}

/* Знак марки: задаём только высоту — ширину браузер берёт из viewBox. */
.brandmark {
    display: block;
    width: auto;
    height: .875rem;
}

/* У СБП знак вытянут вверх, у Mastercard круглый — при одной высоте они
   смотрятся мельче остальных, поэтому подняты поштучно. */
.brandmark--sbp { height: 1.25rem; }
.brandmark--mastercard { height: 1.25rem; }
.brandmark--cash { height: 1rem; }

.footer__legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer__copy { margin-left: auto; }

/* Данные продавца: отдельной строкой под нижним рядом, кеглем меньше
   копирайта. Это служебная запись по закону, а не часть навигации. */
.footer__seller {
    margin-top: 1.25rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: rgba(181, 181, 181, .75);
}

@media (hover: hover) {
    .footer a:hover { color: var(--c-orange); }
    .footer__social:hover { color: var(--c-orange); border-color: var(--c-orange); }
}

/* -------------------------------------------------------------------------
   24. ОВЕРЛЕЙ И ВЫЕЗЖАЮЩИЕ ПАНЕЛИ
   ---------------------------------------------------------------------- */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(30, 20, 16, .5);
    opacity: 0;
    transition: opacity var(--ease);
}

.overlay.is-visible { opacity: 1; }

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: var(--drawer-w);
    max-width: 100%;
    background: var(--c-white);
    box-shadow: var(--shadow-drawer);
    transform: translateX(100%);
    transition: transform var(--ease-slow);
}

.drawer.is-open { transform: translateX(0); }

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex: 0 0 auto;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--c-card);
}

.drawer__title {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--font-head);
    font-size: 1.375rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.drawer__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .375rem;
    font-size: .8125rem;
    color: var(--c-white);
    background: var(--c-orange);
    border-radius: 1rem;
}

.drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--c-brown);
}

@media (hover: hover) {
    .drawer__close:hover { color: var(--c-orange); }
}

.drawer__progress {
    flex: 0 0 auto;
    padding: .875rem 1.75rem;
    font-size: .875rem;
    background: var(--c-card);
}

.drawer__progress-text { display: block; margin-bottom: .5rem; }

/* сообщение сервера: почему товар не добавился или почему его меньше, чем просили */
.drawer__note {
    flex: 0 0 auto;
    margin: 0;
    padding: .75rem 1.75rem;
    font-size: .875rem;
    color: var(--c-red);
    background: var(--c-card);
}

.drawer__progress-bar {
    display: block;
    height: .25rem;
    background: rgba(67, 46, 37, .15);
    overflow: hidden;
}

.drawer__progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--c-orange);
    transition: width var(--ease);
}

.drawer__body {
    flex: 1 1 auto;
    padding: 1.25rem 1.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 3.125rem 1.25rem;
    text-align: center;
    line-height: 1.5rem;
    color: var(--c-gray-text);
}

.drawer__empty-icon {
    width: 3.5rem;
    height: 3.5rem;
    fill: none;
    stroke: var(--c-line);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.drawer__foot {
    flex: 0 0 auto;
    padding: 1.5rem 1.75rem;
    border-top: 1px solid var(--c-card);
}

.drawer__sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.drawer__sum strong {
    font-family: var(--font-head);
    font-size: 1.75rem;
    font-weight: 400;
}

.drawer__link {
    display: block;
    width: 100%;
    margin-top: .875rem;
    font-size: .875rem;
    color: var(--c-gray-text);
    text-align: center;
    transition: color var(--ease);
}

@media (hover: hover) {
    .drawer__link:hover { color: var(--c-red); }
}

/* --- позиции в панели --- */
.cart { display: grid; gap: 1.25rem; }

.cart__item {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--c-card);
}

.cart__item:last-child { padding-bottom: 0; border-bottom: 0; }

.cart__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    padding: .375rem;
    background: var(--c-card);
}

.cart__img { display: block; max-width: 100%; max-height: 100%; }

.cart__info { display: flex; flex-direction: column; gap: .375rem; }

.cart__name {
    font-family: var(--font-text);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25rem;
}

.cart__weight { font-size: .8125rem; color: var(--c-gray-text); }

.cart__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .25rem;
}

.stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--c-line);
}

.stepper__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--c-brown);
}

.stepper__value {
    min-width: 2rem;
    font-family: var(--font-head);
    font-size: 1rem;
    text-align: center;
}

@media (hover: hover) {
    .stepper__btn:hover { color: var(--c-orange); }
}

.cart__price {
    font-family: var(--font-head);
    font-size: 1.125rem;
    white-space: nowrap;
}

.cart__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--c-gray);
}

.cart__actions { display: flex; align-items: center; gap: .5rem; }

@media (hover: hover) {
    .cart__remove:hover { color: var(--c-red); }
}

.cart__add {
    padding: .4375rem 1rem .3125rem;
    min-height: 2.25rem;
    font-size: .8125rem;
}

/* -------------------------------------------------------------------------
   25. МОДАЛЬНЫЕ ОКНА (общий каркас)
   ---------------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    /* клики по «полям» должны доходить до оверлея и закрывать окно */
    pointer-events: none;
}

.modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 34rem;
    max-height: min(86vh, 52rem);
    background: var(--c-white);
    box-shadow: 0 1.5rem 5rem rgba(30, 20, 16, .28);
    opacity: 0;
    transform: translateY(1.25rem) scale(.985);
    transition: opacity var(--ease), transform var(--ease);
    pointer-events: auto;
}

.modal.is-open .modal__dialog { opacity: 1; transform: none; }

.modal--region .modal__dialog { max-width: 64rem; }
.modal--quick .modal__dialog { max-width: 53rem; }

.modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex: 0 0 auto;
    padding: 1.75rem 1.75rem 1.125rem;
}

.modal__title {
    font-family: var(--font-head);
    font-size: 1.5rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.modal__sub {
    margin-top: .3125rem;
    font-size: .9375rem;
    color: var(--c-gray-text);
}

.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--c-brown);
    transition: color var(--ease);
}

.modal__close--float {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 3;
    background: rgba(255, 255, 255, .8);
}

@media (hover: hover) {
    .modal__close:hover { color: var(--c-orange); }
}

/* -------------------------------------------------------------------------
   26. ВЫБОР ГОРОДА
   ---------------------------------------------------------------------- */
.region__search {
    position: relative;
    flex: 0 0 auto;
    margin: 0 1.75rem;
}

.region__search-icon {
    position: absolute;
    top: 50%;
    left: 1.125rem;
    margin-top: -.625rem;
    color: var(--c-gray);
    pointer-events: none;
}

.region__input {
    display: block;
    width: 100%;
    min-height: 3.5rem;
    padding: .5rem 3rem .5rem 3.25rem;
    font-family: var(--font-text);
    font-size: 1.0625rem;
    color: var(--c-brown);
    background: var(--c-card);
    border: 1px solid var(--c-line);
    transition: border-color var(--ease), background-color var(--ease);
}

.region__input:focus {
    outline: none;
    background: var(--c-white);
    border-color: var(--c-orange);
}

.region__input::-webkit-search-cancel-button,
.region__input::-webkit-search-decoration { display: none; }

.region__clear {
    position: absolute;
    top: 50%;
    right: .8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    margin-top: -.9375rem;
    color: var(--c-gray-text);
    transition: color var(--ease);
}

.region__popular {
    flex: 0 0 auto;
    padding: 1.25rem 1.75rem 0;
}

.region__caption {
    margin-bottom: .625rem;
    font-family: var(--font-head);
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-gray-text);
}

.region__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.region__chip {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .3125rem .875rem;
    font-size: .9375rem;
    white-space: nowrap;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    transition: color var(--ease), border-color var(--ease), background-color var(--ease);
}

.region__chip.is-active {
    color: var(--c-white);
    background: var(--c-brown);
    border-color: var(--c-brown);
}

.region__rail {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .125rem;
    padding: 1.25rem 1.75rem .875rem;
}

.region__letter {
    min-width: 1.75rem;
    height: 1.75rem;
    font-family: var(--font-head);
    font-size: .875rem;
    color: var(--c-gray-text);
    transition: color var(--ease), background-color var(--ease);
}

.region__letter[disabled] {
    color: var(--c-line);
    cursor: default;
}

.region__body {
    flex: 1 1 auto;
    padding: .25rem 1.75rem 1.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--c-line);
}

.region__status {
    padding: 1.75rem 0;
    font-size: .9375rem;
    color: var(--c-gray-text);
}

.region__group { padding-top: 1.5rem; }

.region__group-title {
    margin-bottom: .625rem;
    padding-bottom: .4375rem;
    font-family: var(--font-head);
    font-size: 1rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-line);
}

.region__cities {
    columns: 4 11rem;
    column-gap: 1.5rem;
}

.region__city {
    display: block;
    width: 100%;
    padding: .3125rem 0;
    font-size: .9375rem;
    text-align: left;
    color: var(--c-brown);
    transition: color var(--ease);
}

.region__results { display: grid; }

.region__result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .625rem .75rem;
    font-size: 1rem;
    text-align: left;
    color: var(--c-brown);
    transition: background-color var(--ease), color var(--ease);
}

.region__result-region {
    flex: 0 0 auto;
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.region__result.is-cursor { background: var(--c-card); }

.region__city.is-active,
.region__result.is-active { color: var(--c-orange); }

.region__city mark,
.region__result mark {
    color: var(--c-orange);
    background: none;
}

@media (hover: hover) {
    .region__clear:hover { color: var(--c-red); }
    .region__chip:hover { color: var(--c-orange); border-color: var(--c-orange); }
    .region__chip.is-active:hover { color: var(--c-white); }
    .region__letter:hover:not([disabled]) { color: var(--c-white); background: var(--c-brown); }
    .region__city:hover { color: var(--c-orange); }
    .region__result:hover { background: var(--c-card); }
}

/* -------------------------------------------------------------------------
   27. БЫСТРЫЙ ПРОСМОТР
   ---------------------------------------------------------------------- */
.product__quick {
    position: absolute;
    left: 50%;
    bottom: .875rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem 1rem .4375rem;
    font-family: var(--font-head);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-brown);
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 .25rem 1rem rgba(67, 46, 37, .16);
    opacity: 0;
    transform: translate(-50%, .625rem);
    transition: opacity var(--ease), transform var(--ease), color var(--ease);
}

.product__quick:focus-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* на тач-устройствах наведения нет — кнопка видна сразу */
@media (hover: none) {
    .product__quick { opacity: 1; transform: translate(-50%, 0); }
}

@media (hover: hover) {
    .product:hover .product__quick { opacity: 1; transform: translate(-50%, 0); }
    .product__quick:hover { color: var(--c-orange); }
}

.quick {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    min-height: 0;
}

.quick__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: var(--c-card);
}

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

.quick__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: .25rem .625rem .1875rem;
    font-family: var(--font-head);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-white);
    background: var(--c-brown);
}

.quick__badge--new { background: var(--c-orange); }
.quick__badge--sale { background: var(--c-red); }

.quick__body {
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    overflow-y: auto;
}

.quick__title {
    font-family: var(--font-head);
    font-size: 1.75rem;
    letter-spacing: .02em;
}

.quick__meta {
    margin-top: .5rem;
    font-size: .9375rem;
    line-height: 1.375rem;
    color: var(--c-gray-text);
}

.quick__rating {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
}

.quick__features {
    display: grid;
    gap: .5rem;
    margin: 1.5rem 0;
}

.quick__features li {
    position: relative;
    padding-left: 1.375rem;
    font-size: .9375rem;
    line-height: 1.375rem;
}

.quick__features li::before {
    content: "";
    position: absolute;
    top: .5rem;
    left: 0;
    width: .4375rem;
    height: .4375rem;
    background: var(--c-orange);
}

.quick__label {
    font-family: var(--font-head);
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-gray-text);
}

.quick__chips { margin: .625rem 0 1.375rem; }

.quick__price { margin-bottom: 1.375rem; }
.quick__price .price__now { font-size: 2rem; }

.quick__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.quick__add { flex: 1 1 auto; }

.quick__fav {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    padding: .5rem;
    font-size: .875rem;
    color: var(--c-gray-text);
    transition: color var(--ease);
}

.quick__fav .icon { fill: none; transition: fill var(--ease); }
.quick__fav[aria-pressed="true"] { color: var(--c-red); }
.quick__fav[aria-pressed="true"] .icon { fill: currentColor; }

.quick__more {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .375rem;
    margin-top: 1.375rem;
    font-family: var(--font-head);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-brown);
    border-bottom: 1px solid var(--c-line);
    transition: color var(--ease), border-color var(--ease);
}

@media (hover: hover) {
    .quick__fav:hover { color: var(--c-red); }
    .quick__more:hover { color: var(--c-orange); border-color: var(--c-orange); }
}

/* -------------------------------------------------------------------------
   28. ДОБАВКИ К ЗАКАЗУ В КОРЗИНЕ
   ---------------------------------------------------------------------- */
.cross {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--c-card);
}

.cross__title {
    margin-bottom: .875rem;
    font-family: var(--font-head);
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-gray-text);
}

.cross__list { display: grid; gap: .75rem; }

.cross__item {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
}

.cross__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: .25rem;
    background: var(--c-card);
}

.cross__img { display: block; max-width: 100%; max-height: 100%; }

.cross__name {
    display: block;
    font-family: var(--font-text);
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.125rem;
    color: var(--c-brown);
}

.cross__price {
    display: block;
    margin-top: .1875rem;
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.cross__add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--c-brown);
    border: 1px solid var(--c-line);
    transition: color var(--ease), border-color var(--ease), background-color var(--ease);
}

@media (hover: hover) {
    .cross__name:hover { color: var(--c-orange); }
    .cross__add:hover { color: var(--c-white); background: var(--c-orange); border-color: var(--c-orange); }
}

/* -------------------------------------------------------------------------
   29. НЕДАВНО ПРОСМОТРЕННЫЕ
   ---------------------------------------------------------------------- */
/* компактная полоса: блок вспомогательный и не должен спорить с каталогом */
.recent {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.25rem;
}

.recent__card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.recent__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: .875rem;
    background: var(--c-card);
    overflow: hidden;
}

.recent__img {
    display: block;
    max-width: 82%;
    height: auto;
    transition: transform var(--ease);
}

.recent__name {
    display: block;
    margin-top: .75rem;
    font-family: var(--font-text);
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.125rem;
    color: var(--c-brown);
}

/* auto сверху выравнивает цены по нижней кромке, даже когда названия
   занимают разное число строк */
.recent__price {
    display: block;
    margin-top: auto;
    padding-top: .25rem;
    font-family: var(--font-head);
    font-size: 1rem;
}

@media (hover: hover) {
    .recent__card:hover .recent__img { transform: scale(1.05); }
    .recent__card:hover .recent__name { color: var(--c-orange); }
}

/* -------------------------------------------------------------------------
   30. ЧАСТЫЕ ВОПРОСЫ
   ---------------------------------------------------------------------- */
.faq {
    max-width: 51.875rem;
    margin: 0 auto;
    border-top: 1px solid var(--c-line);
}

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

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.375rem 0;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: var(--c-brown);
    transition: color var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__chevron {
    flex: 0 0 auto;
    color: var(--c-gray-text);
    transition: transform var(--ease), color var(--ease);
}

.faq__item[open] > .faq__q { color: var(--c-orange); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); color: var(--c-orange); }

.faq__a { overflow: hidden; }

.faq__a p {
    max-width: 46rem;
    padding-bottom: 1.5rem;
    line-height: 1.5rem;
    color: var(--c-gray-text);
}

@media (hover: hover) {
    .faq__q:hover { color: var(--c-orange); }
}

/* -------------------------------------------------------------------------
   31. МОБИЛЬНАЯ ПАНЕЛЬ ДЕЙСТВИЙ
   ---------------------------------------------------------------------- */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(1.25rem);
    -webkit-backdrop-filter: saturate(180%) blur(1.25rem);
    border-top: 1px solid var(--c-line);
    transition: transform var(--ease);
}

/* панель не должна оставаться над открытой корзиной или меню */
.body.is-locked .tabbar { transform: translateY(100%); }

.tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1875rem;
    padding: .5rem .25rem .5625rem;
    color: var(--c-brown);
    transition: color var(--ease);
}

.tabbar__icon {
    position: relative;
    display: block;
    line-height: 0;
}

.tabbar__label {
    font-family: var(--font-head);
    font-size: .625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tabbar__count {
    position: absolute;
    top: -.375rem;
    right: -.5rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 .25rem;
    font-family: var(--font-text);
    font-size: .6875rem;
    line-height: 1.125rem;
    text-align: center;
    color: var(--c-white);
    background: var(--c-orange);
    border-radius: 1rem;
}

.tabbar__item.is-active,
.tabbar__item:active { color: var(--c-orange); }

/* =========================================================================
   АДАПТИВ
   ========================================================================= */

/* ----- <= 1550px: высота секций по макету ----- */
@media screen and (max-width: 1550px) {
    .stats { height: 71.625rem; } /* 1146px */
}

/* ----- 1200..1300: макет уменьшает базовый кегль ----- */
@media screen and (min-width: 1200px) and (max-width: 1300px) {
    .body { font-size: 1.125rem; }
}

/* ----- <= 1199px ----- */
@media screen and (max-width: 1199px) {
    .nav__item { margin-right: 1.5rem; }
    .header { padding: .625rem 1.25rem; }
    .topbar { padding-right: 1.25rem; }
    .topbar__home { padding-left: 1.25rem; }
    .topbar__brands { gap: 1rem; }
    .topbar__aside { gap: 1.25rem; }
    .why__block { padding-right: 2rem; }

    /* Первый экран: дальше пропорции макета дают слишком мелкий текст, поэтому
       кегли фиксируются в пикселях, а высота растёт под содержимое. */
    .hero {
        height: auto;
        min-height: 480px;
        padding: 56px 0 52px;
    }

    .hero .picture__img { object-position: 68% 55%; }

    .hero__scrim {
        background: linear-gradient(90deg, rgba(10, 9, 7, .78) 0%, rgba(10, 9, 7, .55) 45%, rgba(10, 9, 7, .18) 78%);
    }

    .hero--dark .hero__scrim {
        background: linear-gradient(90deg, rgba(255, 252, 246, .85) 0%, rgba(255, 252, 246, .6) 45%, rgba(255, 252, 246, .2) 78%);
    }

    .hero__inner { padding: 0 30px; }

    .hero__eyebrow { font-size: 14px; letter-spacing: .26em; }
    .hero__title { margin-top: 20px; font-size: 48px; line-height: 1.04; }
    .hero__lead { margin-top: 18px; font-size: 17px; line-height: 1.5; }
    .hero__actions { margin-top: 28px; gap: 24px; }

    .hero__btn {
        min-height: 52px;
        gap: 14px;
        padding: 8px 30px;
        font-size: 16px;
    }

    .hero__btn-arrow { width: 18px; height: 11px; }

    .hero__ghost {
        font-size: 16px;
        text-decoration-thickness: 1px;
        text-underline-offset: 5px;
    }

    .hero__feats { margin-top: 40px; gap: 20px; }
    .hero__feat { gap: 14px; }
    .hero__feat + .hero__feat::before { height: 24px; margin-right: 20px; }
    .hero__feat-ico { width: 28px; height: 28px; }
    .hero__feat-text { font-size: 13px; line-height: 1.32; }

    /* Рукописная строка помещается только на широком снимке. */
    .hero__script,
    .hero__heart { display: none; }

    /* Полоски ниже 1199px уже стоят на наименьших размерах — остаётся отступ
       от нижнего края. */
    .hero-slider__nav { bottom: 22px; gap: 8px; }

    /* Текст первого экрана здесь начинается в 30px от края и знак стрелки
       попадал бы прямо на строку подзаголовка. Листается полосками, пальцем и
       трекпадом. */
    .hero-slider.is-ready .hero-slider__arrow { display: none; }
}

/* ----- <= 991px: планшет, root возвращается к 16px ----- */
@media screen and (max-width: 991px) {
    .container { max-width: none; padding: 0 1.25rem; }

    .topbar { padding-right: 1.25rem; }
    .topbar__aside { gap: 1rem; font-size: .8125rem; }
    .topbar__nav { display: none; }

    .header { top: var(--header-top); }
    .nav { display: none; }
    .burger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        color: var(--c-brown);
    }
    .mega { display: none !important; }

    /* 768-991: центр снимка обрезается сильнее, отметки уводим в столбец —
       так они остаются на тёмной части кадра. */
    .hero__feats {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-top: 32px;
    }

    .hero__feat + .hero__feat::before { display: none; }

    .button {
        min-height: 2.25rem;
        padding: .4375rem 1.125rem;
        font-size: .75rem;
        letter-spacing: .08em;
    }
    .badges { margin-top: 2rem; }
    .badges__img { width: 5.625rem; height: 5.625rem; }

    .h2 { font-size: 1.9375rem; line-height: 2.375rem; }
    .section__title { margin-bottom: 2.5rem; }
    .section { padding: 3.75rem 0; }
    .section-products { padding: 3.75rem 0; }
    .section-why { padding: 3.75rem 0; }

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

    .why { grid-template-columns: minmax(0, 1fr); }
    .why__block { padding-right: 0; }
    .why__list { margin-top: 2.5rem; margin-left: 0; }
    .why__media { display: none; }
    .why__img--mobile {
        display: block;
        width: 32rem;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
    }

    .calc { grid-template-columns: minmax(0, 1fr); }
    .calc__controls, .calc__result { padding: 1.875rem; }
    .calc__result-main { font-size: 2.75rem; }

    .ingredients { height: 67.25rem; }
    .ingredients__content { padding-top: 21.3125rem; max-width: 100%; }
    .ingredients__text { padding: 0 1.25rem; }

    /* на планшете логотипы держатся одной строкой и разгоняются
       по ширине, а не переносит — межколоночный gap заменяет space-between */
    .certs__list {
        align-self: stretch;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0;
    }
    .certs__item { flex: 0 1 auto; }

    .recent { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .region__cities { columns: 3 10rem; }

    .stats { height: 73.625rem; }
    .stats__title { font-size: 1.9375rem; line-height: 2.375rem; }
    .stats__list { flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; max-width: 100%; }

    .subscribe { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

    .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
    .footer__copy { margin-left: 0; width: 100%; }
}

/* ----- <= 767px: мобильные ----- */
@media screen and (max-width: 767px) {
    /* снизу место под панель действий, иначе она перекрывает подвал */
    .body {
        padding-top: var(--header-h);
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
    }

    .tabbar { display: grid; }

    .topbar { display: none; }
    .header { top: 0; padding: .625rem .9375rem; gap: .625rem; }
    .menu-mob { top: var(--header-h); }

    /* поиск переезжает в мобильное меню — иначе иконки не влезают в 320–375px */
    .action--search { display: none; }
    .header__logo-img { width: 9.375rem; }
    .header__actions { gap: .625rem; margin-left: .625rem; }
    .action { width: 2rem; height: 2rem; }
    .burger { width: 2rem; height: 2rem; }

    .button {
        min-height: 3.125rem;
        padding: .625rem 1.25rem;
        font-size: .875rem;
    }

    /* Телефон: снимок остаётся фоном, но кадрируется по бокалу справа, а текст
       ложится сверху вниз — тень идёт по вертикали, иначе низ снимка светлее
       текста отметок. */
    .hero {
        min-height: 0;
        padding: 44px 0 40px;
    }

    .hero .picture__img { object-position: 62% 62%; }

    .hero__scrim {
        background: linear-gradient(180deg, rgba(10, 9, 7, .72) 0%, rgba(10, 9, 7, .55) 55%, rgba(10, 9, 7, .78) 100%);
    }

    .hero--dark .hero__scrim {
        background: linear-gradient(180deg, rgba(255, 252, 246, .8) 0%, rgba(255, 252, 246, .62) 55%, rgba(255, 252, 246, .85) 100%);
    }

    .hero__inner { padding: 0 20px; }

    .hero__eyebrow { font-size: 13px; letter-spacing: .22em; }
    .hero__title { margin-top: 16px; font-size: 36px; line-height: 1.08; }
    .hero__lead { margin-top: 14px; font-size: 16px; line-height: 1.5; }

    /* Кнопка во всю ширину: на 360px «Выбрать корм» и ссылка рядом не встают. */
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin-top: 24px;
    }

    .hero__btn { min-height: 50px; }
    .hero__ghost { text-align: center; }

    .hero__feats { margin-top: 32px; }

    .hero-slider__nav {
        position: static;
        justify-content: center;
        padding: 18px 0;
        background: var(--c-page);
        transform: none;
    }

    /* Полоски ушли со снимка на светлую подложку: цвет темнее, тень не нужна.
       Активная остаётся оранжевой. */
    .hero-slider__dot {
        background: color-mix(in srgb, var(--c-brown) 32%, transparent);
        box-shadow: none;
    }

    /* На белой подложке бледный оранжевый почти не читается. */
    .hero-slider__dot[aria-current="true"] { background: color-mix(in srgb, var(--c-orange) 50%, transparent); }

    .badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: .0625rem;
        margin-top: 1.25rem;
    }

    .section { padding: 2.5rem 0; }
    .section-products { padding: 2.5rem 0; }
    .section-why { padding: 2.5rem 0; }
    .section__title { margin-bottom: 1.875rem; }
    .section__lead { margin: -1rem auto 1.875rem; }

    .cats { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .products { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .product__media { max-width: 21.5rem; margin: 0 auto; }
    .product__body { text-align: left; }

    .why__item { margin-bottom: 1.25rem; }
    .why__link { text-align: left; }

    .calc__facts { grid-template-columns: minmax(0, 1fr); }
    .calc__result-main { font-size: 2.5rem; }

    .ingredients { height: 92.75rem; }
    .ingredients__content { padding-top: 31.5625rem; }
    .ingredients__text { padding: 0; margin-bottom: 2.5rem; }

    .certs { padding: 0 .625rem; }
    .certs__list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.25rem .75rem;
    }

    .reviews__summary { margin: -1rem 0 1.875rem; }

    .stats { height: 73.75rem; }
    .stats__head { padding-top: 3.125rem; }
    .stats__title { font-size: 2.75rem; line-height: 3.6875rem; }
    .stats__list { margin-bottom: 2rem; }

    .subscribe__row { flex-direction: column; }
    .subscribe__submit { width: 100%; }

    .footer { padding: 2.5rem 0; }
    .footer__top { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .footer__bottom { gap: 1rem; }
    .footer__legal { gap: 1rem; }

    .drawer { --drawer-w: 100%; }
    .drawer__head, .drawer__foot { padding: 1.25rem; }
    .drawer__body { padding: 1rem 1.25rem; }
    .drawer__progress { padding: .75rem 1.25rem; }

    /* модалки на телефоне занимают весь экран — так их удобнее скроллить */
    .modal { padding: 0; }
    .modal__dialog {
        max-width: none;
        height: 100%;
        max-height: none;
    }
    .modal--region .modal__dialog,
    .modal--quick .modal__dialog { max-width: none; }

    .modal__head { padding: 1.25rem 1.25rem 1rem; }
    .modal__title { font-size: 1.25rem; }

    .region__search { margin: 0 1.25rem; }
    .region__popular { padding: 1rem 1.25rem 0; }
    .region__rail { padding: 1rem 1.25rem .75rem; }
    .region__body { padding: .25rem 1.25rem 1.5rem; }
    .region__cities { columns: 2 8rem; }

    .quick { grid-template-columns: minmax(0, 1fr); }
    .quick__media { padding: 2rem 1.5rem; }
    .quick__body { padding: 1.5rem 1.25rem 2rem; }
    .quick__title { font-size: 1.5rem; }
    .quick__price .price__now { font-size: 1.75rem; }

    /* карусель вместо сетки: на узком экране колонки нечитаемы */
    .recent {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 9.5rem;
        gap: .875rem;
        padding-bottom: .5rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
    }
    .recent__item { scroll-snap-align: start; }

    /* 15 чипсов в 5 строк уводили список городов за пределы экрана */
    .region__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: .25rem;
    }
    .region__chip { flex: 0 0 auto; }

    .faq__q { font-size: 1rem; padding: 1.125rem 0; }

    /* наведения на телефоне нет, а часть устройств всё равно сообщает
       hover: hover — поэтому кнопку открываем и по ширине экрана */
    .product__quick { opacity: 1; transform: translate(-50%, 0); }
}

/* ----- <= 575px ----- */
@media screen and (max-width: 575px) {
    .stats__list { gap: 1.25rem 2rem; }
}

/* ----- <= 409px ----- */
@media screen and (max-width: 409px) {
    .badges__img { width: 5.625rem; height: 5.625rem; }
    .hero__title { font-size: 32px; }
    .stats { height: 78.625rem; }
    .ingredients { height: 92.75rem; }
}

/* -------------------------------------------------------------------------
   32. КАТАЛОГ: КРОШКИ, ЗАГОЛОВОК, БЫСТРЫЙ ПОДБОР

   Блоки каталога описаны после адаптивных секций специально: правила
   .products.catalog__list должны перекрывать общие .products из медиазапросов.
   ---------------------------------------------------------------------- */
.container--wide { max-width: 82.5rem; }   /* 1320px */

/* верхний отступ рассчитан на фиксированную шапку: тело сдвинуто на 52px,
   шапка занимает полосу 47..101px — заголовок не должен уходить под неё */
.section-catalog { padding: 4.5rem 0 4.375rem; }

.crumbs { margin-bottom: 1.5rem; }

.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
}

.crumbs__item {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.crumbs__link { color: var(--c-gray-text); }
.crumbs__sep { color: var(--c-gray); transform: rotate(-90deg); }
.crumbs__current { color: var(--c-brown); }

@media (hover: hover) {
    .crumbs__link:hover { color: var(--c-orange); }
}

.catalog__intro {
    max-width: 47.5rem;
    margin-bottom: 2rem;
}

.catalog__title { margin-bottom: .875rem; }

.catalog__lead {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--c-gray-text);
}

.presets {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin-bottom: 2rem;
}

.presets__btn {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .625rem 1rem;
    font-size: .875rem;
    line-height: 1;
    text-decoration: none;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    cursor: pointer;
    transition: color var(--ease), background var(--ease), border-color var(--ease);
}

.presets__btn .icon { width: 1.125rem; height: 1.125rem; }

.presets__btn.is-active {
    color: var(--c-white);
    background: var(--c-brown);
    border-color: var(--c-brown);
}

.presets__btn--sale { color: var(--c-red); border-color: rgba(228, 52, 43, .35); }

.presets__btn--sale.is-active {
    color: var(--c-white);
    background: var(--c-red);
    border-color: var(--c-red);
}

@media (hover: hover) {
    .presets__btn:hover { color: var(--c-orange); border-color: var(--c-orange); }
    .presets__btn.is-active:hover { color: var(--c-white); background: var(--c-orange); border-color: var(--c-orange); }
}

/* -------------------------------------------------------------------------
   33. КАТАЛОГ: СЕТКА И ПАНЕЛЬ ФИЛЬТРОВ
   ---------------------------------------------------------------------- */
.catalog {
    --filters-w: 18.75rem;
    display: grid;
    grid-template-columns: var(--filters-w) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.catalog__main { min-width: 0; }

/* колонок столько, сколько влезает карточек по 230px: одна формула вместо
   лестницы медиазапросов, поэтому размер шага задан в пикселях, не в rem */
.products.catalog__list {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.875rem;
}

.filters {
    position: sticky;
    top: calc(var(--header-top) + var(--header-h) + 1.25rem);
    z-index: 40;
}

.filters__inner {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--header-top) - var(--header-h) - 2.5rem);
    background: var(--c-white);
    border: 1px solid var(--c-line);
}

.filters__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--c-line);
}

.filters__title {
    flex: 1 1 auto;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.filters__reset {
    font-size: .8125rem;
    color: var(--c-gray-text);
    border-bottom: 1px dashed currentColor;
    cursor: pointer;
}

.filters__close { display: none; }

.filters__body {
    flex: 1 1 auto;
    padding: 0 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--c-line) transparent;
}

.filters__body::-webkit-scrollbar { width: .375rem; }
.filters__body::-webkit-scrollbar-track { background: transparent; }
.filters__body::-webkit-scrollbar-thumb { background: var(--c-line); }

.filters__note {
    padding: 1rem 0 1.25rem;
    font-size: .8125rem;
    line-height: 1.25rem;
    color: var(--c-gray-text);
    border-top: 1px solid var(--c-card);
}

.filters__note a { color: var(--c-brown); white-space: nowrap; }

.filters__foot {
    display: none;
    flex: 0 0 auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--c-line);
}

@media (hover: hover) {
    .filters__reset:hover { color: var(--c-orange); }
    .filters__close:hover { color: var(--c-orange); }
    .filters__note a:hover { color: var(--c-orange); }
}

/* -------------------------------------------------------------------------
   34. ФАСЕТЫ, ЧЕКБОКСЫ, ЦЕНОВОЙ ДИАПАЗОН
   ---------------------------------------------------------------------- */
.facet { border-bottom: 1px solid var(--c-card); }

.facet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 0;
    font-weight: 700;
    font-size: .9375rem;
    line-height: 1.25rem;
    list-style: none;
    cursor: pointer;
}

.facet__head::-webkit-details-marker { display: none; }
.facet__head::marker { content: ""; }

.facet__marks {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.facet__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3125rem;
    font-weight: 400;
    font-size: .75rem;
    color: var(--c-white);
    background: var(--c-orange);
    border-radius: 1rem;
}

.facet__chevron {
    color: var(--c-gray);
    transition: transform var(--ease), color var(--ease);
}

.facet[open] > .facet__head .facet__chevron { transform: rotate(180deg); }

.facet__list { padding: 0 0 .625rem; }

.facet__count {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .8125rem;
    color: var(--c-gray);
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    .facet__head:hover { color: var(--c-orange); }
    .facet__head:hover .facet__chevron { color: var(--c-orange); }
}

.check {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .4375rem 0;
    font-size: .9375rem;
    line-height: 1.25rem;
    cursor: pointer;
    transition: color var(--ease);
}

.check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.check__box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    color: transparent;
    background: var(--c-white);
    border: 1px solid var(--c-gray);
    transition: color var(--ease), background var(--ease), border-color var(--ease);
}

.check__box .icon { stroke-width: 2.8; }

.check__input:checked + .check__box {
    color: var(--c-white);
    background: var(--c-orange);
    border-color: var(--c-orange);
}

.check__input:focus-visible + .check__box {
    outline: 2px solid var(--c-orange);
    outline-offset: 2px;
}

@media (hover: hover) {
    .check:hover { color: var(--c-orange); }
    .check:hover .check__box { border-color: var(--c-orange); }
}

/* вариант, под который в текущей выборке нет ни одного товара */
.facet__row.is-off .check { cursor: default; color: var(--c-gray); }
.facet__row.is-off .check__box { background: var(--c-light); border-color: var(--c-line); }
.facet__row.is-off .facet__count { color: var(--c-line); }

@media (hover: hover) {
    .facet__row.is-off .check:hover { color: var(--c-gray); }
    .facet__row.is-off .check:hover .check__box { border-color: var(--c-line); }
}

.facet--flags .facet__list { padding: 1rem 0; }

.range { padding-bottom: 1.375rem; }

.range__fields {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1.125rem;
}

.range__field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .625rem;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    transition: border-color var(--ease);
}

.range__field:focus-within { border-color: var(--c-orange); }

.range__cap {
    flex: 0 0 auto;
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.range__num {
    width: 100%;
    min-width: 0;
    font: inherit;
    font-size: .9375rem;
    color: var(--c-brown);
    background: transparent;
    border: 0;
    outline: none;
    font-variant-numeric: tabular-nums;
}

.range__slider {
    position: relative;
    height: 1.5rem;
}

.range__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: .25rem;
    margin-top: -.125rem;
    background: var(--c-line);
}

.range__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--from, 0%);
    width: calc(var(--to, 100%) - var(--from, 0%));
    background: var(--c-orange);
}

/* два ползунка лежат друг на друге: событиями управляют только бегунки */
.range__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.5rem;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

/* когда бегунки сходятся у правого края, нижний надо поднять над верхним,
   иначе его нечем ухватить */
.range__input--min { z-index: 2; }
.range__input--max { z-index: 3; }
.range__input--min.is-top { z-index: 4; }

.range__input::-webkit-slider-runnable-track { height: 1.5rem; background: transparent; }
.range__input::-moz-range-track { height: 1.5rem; background: transparent; }

.range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: .1875rem;
    background: var(--c-white);
    border: .1875rem solid var(--c-orange);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(67, 46, 37, .25);
    cursor: pointer;
}

.range__input::-moz-range-thumb {
    pointer-events: auto;
    width: 1.125rem;
    height: 1.125rem;
    background: var(--c-white);
    border: .1875rem solid var(--c-orange);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(67, 46, 37, .25);
    cursor: pointer;
}

.range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--c-brown); outline-offset: 2px; }
.range__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--c-brown); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   35. ПАНЕЛЬ РЕЗУЛЬТАТОВ: СЧЁТЧИК, СОРТИРОВКА, ВИД, ЧИПЫ
   ---------------------------------------------------------------------- */
.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.125rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--c-line);
}

.toolbar__filters {
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    font-size: .875rem;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid var(--c-brown);
    cursor: pointer;
}

.toolbar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3125rem;
    font-size: .75rem;
    color: var(--c-white);
    background: var(--c-orange);
    border-radius: 1rem;
}

.toolbar__found {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    font-size: .9375rem;
    color: var(--c-gray-text);
}

.toolbar__found-num {
    font-family: var(--font-head);
    font-size: 1.375rem;
    color: var(--c-brown);
    font-variant-numeric: tabular-nums;
}

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

.sorter {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.sorter__wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.sorter__select {
    -webkit-appearance: none;
    appearance: none;
    padding: .5625rem 2.125rem .5625rem .75rem;
    font: inherit;
    font-size: .875rem;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    cursor: pointer;
    transition: border-color var(--ease);
}

.sorter__select:focus { border-color: var(--c-orange); outline: none; }

.sorter__chevron {
    position: absolute;
    right: .6875rem;
    color: var(--c-gray);
    pointer-events: none;
}

.viewer {
    display: flex;
    flex: 0 0 auto;
    border: 1px solid var(--c-line);
}

.viewer__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    color: var(--c-gray);
    cursor: pointer;
    transition: color var(--ease), background var(--ease);
}

.viewer__btn + .viewer__btn { border-left: 1px solid var(--c-line); }
.viewer__btn.is-active { color: var(--c-white); background: var(--c-brown); }

@media (hover: hover) {
    .toolbar__filters:hover { color: var(--c-orange); border-color: var(--c-orange); }
    .sorter__select:hover { border-color: var(--c-orange); }
    .viewer__btn:hover { color: var(--c-orange); }
    .viewer__btn.is-active:hover { color: var(--c-white); background: var(--c-orange); }
}

.applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: 1.5rem;
}

.applied__list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.applied__chip {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: .375rem .5rem .375rem .75rem;
    font-size: .8125rem;
    line-height: 1.125rem;
    color: var(--c-brown);
    background: var(--c-light);
    border: 1px solid var(--c-line);
}

.applied__x {
    display: flex;
    flex: 0 0 auto;
    color: var(--c-gray-text);
    cursor: pointer;
}

.applied__clear {
    font-size: .8125rem;
    color: var(--c-gray-text);
    border-bottom: 1px dashed currentColor;
    cursor: pointer;
}

@media (hover: hover) {
    .applied__x:hover { color: var(--c-red); }
    .applied__clear:hover { color: var(--c-orange); }
}

.empty {
    padding: 3.75rem 1.25rem;
    text-align: center;
    background: var(--c-card);
}

.empty__icon {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 1.25rem;
    color: var(--c-gray);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}

.empty__title {
    margin-bottom: .5rem;
    font-family: var(--font-head);
    font-size: 1.25rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.empty__text {
    margin-bottom: 1.5rem;
    font-size: .9375rem;
    color: var(--c-gray-text);
}

.more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .875rem;
    margin-top: 3.125rem;
}

.more__stat {
    font-size: .875rem;
    color: var(--c-gray-text);
}

.more__track {
    display: block;
    width: 11.25rem;
    height: .1875rem;
    background: var(--c-line);
}

.more__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--c-orange);
    transition: width var(--ease);
}

.more__btn { min-width: 15rem; }

/* -------------------------------------------------------------------------
   36. КАТАЛОГ СПИСКОМ
   ---------------------------------------------------------------------- */
.products.catalog__list.is-rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

.catalog__list.is-rows .product {
    flex-direction: row;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--c-line);
}

.catalog__list.is-rows .product__media {
    flex: 0 0 11.875rem;
    width: 11.875rem;
    aspect-ratio: auto;
    padding: .75rem;
}

.catalog__list.is-rows .product__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 8.125rem;
}

.catalog__list.is-rows .product__body { padding: .25rem 0; }
.catalog__list.is-rows .product__meta { min-height: 0; }

/* в строке высоту задаёт содержимое, поэтому цену не прижимаем к низу */
.catalog__list.is-rows .product__buy { margin-top: 1.125rem; }

/* в общем списке рядом стоят одноимённые рационы для собак и для кошек —
   надстрочная подпись разводит их без удлинения заголовка */
.product__for {
    margin-bottom: .3125rem;
    font-size: .6875rem;
    line-height: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gray);
}

/* -------------------------------------------------------------------------
   37. КАТАЛОГ: АДАПТИВ
   ---------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .section-catalog { padding: 3.75rem 0 3.125rem; }

    .catalog {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .toolbar__filters { display: inline-flex; }

    /* на узких экранах панель выезжает слева — с той стороны, где она стоит
       на широких; открывает её та же механика, что корзину (data-drawer) */
    .filters {
        position: fixed;
        top: 0;
        left: 0;
        right: auto;
        bottom: 0;
        z-index: 100;
        width: 22.5rem;
        max-width: 100%;
        transform: translateX(-100%);
        transition: transform var(--ease-slow);
    }

    .filters.is-open { transform: translateX(0); }

    .filters__inner {
        height: 100%;
        max-height: none;
        border: 0;
        box-shadow: var(--shadow-drawer-left);
    }

    .filters__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        margin-right: -.625rem;
        color: var(--c-brown);
    }

    .filters__foot { display: block; }
}

@media screen and (max-width: 767px) {
    .catalog__intro { margin-bottom: 1.5rem; }

    .presets {
        gap: .5rem;
        margin: 0 -.9375rem 1.5rem;
        padding: 0 .9375rem .25rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .presets::-webkit-scrollbar { display: none; }
    .presets__btn { flex: 0 0 auto; white-space: nowrap; }

    .toolbar {
        gap: .75rem;
        padding-bottom: .875rem;
        margin-bottom: 1.25rem;
    }

    .toolbar__found { order: 3; width: 100%; }
    .toolbar__aside { gap: .625rem; }
    .sorter__label { display: none; }

    .catalog__list.is-rows .product { flex-direction: column; gap: 0; padding: 0; border: 0; }

    .catalog__list.is-rows .product__media {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 1 / 1;
        padding: 1.9375rem 1.125rem 1.25rem;
    }

    .catalog__list.is-rows .product__img { max-height: none; }
    .catalog__list.is-rows .product__body { padding: 1.25rem 0 0; }
}

@media screen and (max-width: 575px) {
    .viewer { display: none; }
    .more__btn { min-width: 100%; }
}

/* -------------------------------------------------------------------------
   38. НЕДОСТУПНЫЙ ТОВАР И ТЕКСТ О ЛИНЕЙКЕ
   ---------------------------------------------------------------------- */
.button[disabled] {
    color: var(--c-gray);
    background: var(--c-light);
    border-color: var(--c-line);
    cursor: default;
    pointer-events: none;
}

.section-seotext { padding: 3.75rem 0 4.375rem; }

.seotext {
    max-width: 51.25rem;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.625rem;
    color: var(--c-gray-text);
}

.seotext__title {
    margin-bottom: 2rem;
    color: var(--c-brown);
    text-align: center;
}

.seotext__sub {
    margin: 2rem 0 .75rem;
    font-family: var(--font-head);
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: .03em;
    color: var(--c-brown);
    text-transform: uppercase;
}

.seotext p + p { margin-top: 1rem; }

.seotext a {
    color: var(--c-brown);
    border-bottom: 1px solid var(--c-line);
}

.seotext__foot {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-line);
}

@media (hover: hover) {
    .seotext a:hover { color: var(--c-orange); border-color: var(--c-orange); }
}

@media screen and (max-width: 767px) {
    .section-seotext { padding: 2.5rem 0 3.125rem; }
    .seotext { font-size: .9375rem; line-height: 1.5rem; }
    .seotext__sub { font-size: 1.125rem; line-height: 1.5rem; }
}

/* -------------------------------------------------------------------------
   39. СТРАНИЦА ТОВАРА: РАСКЛАДКА И ГАЛЕРЕЯ
   ---------------------------------------------------------------------- */
/* верхний отступ как у каталога: шапка фиксированная, крошки не должны
   уезжать под неё */
.section-product { padding: 4.5rem 0 3.75rem; }

.card {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
    gap: 3.75rem;
    align-items: start;
    margin-bottom: 4.375rem;
}

/* галерея остаётся на месте, пока читают панель покупки */
.card__gallery {
    position: sticky;
    top: calc(var(--header-top) + var(--header-h) + 1.25rem);
}

.card__figure {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 25rem;
    padding: 2.5rem;
    background: var(--c-card);
}

.card__img {
    width: auto;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

/* гравюры разного формата приводим к одному оптическому размеру */
.card__img--1 { max-height: 20rem; }
.card__img--2 { max-height: 20rem; }
.card__img--3 { max-height: 23rem; }
.card__img--4 { max-height: 22rem; }
.card__img--5 { max-height: 21rem; }
.card__img--6 { max-height: 22.5rem; }

.card__badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 2;
    padding: .4375rem .75rem .3125rem;
    font-family: var(--font-head);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-white);
    background: var(--c-brown);
}

.card__badge--new { background: var(--c-orange); }
.card__badge--sale { background: var(--c-red); }

.card__caption {
    margin-top: .75rem;
    font-size: .8125rem;
    line-height: 1.125rem;
    color: var(--c-gray);
    text-align: center;
}

/* дополнительные снимки упаковки под основной фотографией */
.thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    margin-top: .75rem;
}

.thumbs__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    padding: .375rem;
    background: var(--c-card);
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color .2s ease;
}

.thumbs__item:hover,
.thumbs__item:focus-visible {
    border-color: var(--c-braun);
}

.thumbs__item.is-active {
    border-color: var(--c-orange);
}

.thumbs__img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.card__pill {
    padding: .375rem .6875rem .25rem;
    font-family: var(--font-head);
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-gray-text);
    border: 1px solid var(--c-line);
}

/* -------------------------------------------------------------------------
   40. СТРАНИЦА ТОВАРА: ПАНЕЛЬ ПОКУПКИ
   ---------------------------------------------------------------------- */
.card__panel .product__for { margin-bottom: .625rem; }

.card__title { margin-bottom: .75rem; }

.card__lead {
    max-width: 32rem;
    margin-bottom: 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.625rem;
    color: var(--c-gray-text);
}

.card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--c-line);
}

.rating__link {
    font-size: .875rem;
    color: var(--c-gray-text);
    border-bottom: 1px dashed currentColor;
    cursor: pointer;
}

.card__sku {
    font-size: .875rem;
    color: var(--c-gray);
}

.card__stock {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem 0 1.5rem;
    font-size: .9375rem;
}

.card__stock--in { color: var(--c-brown); }
.card__stock--in .icon { color: var(--c-orange); }
.card__stock--out { color: var(--c-gray-text); }
.card__stock--out .icon { color: var(--c-gray); }

.card__label {
    margin-bottom: .625rem;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gray);
}

.card__packs .chip { min-width: 4.5rem; }

.card__pricebox { margin: 1.75rem 0; }

.price--lg { flex-wrap: wrap; }
.price--lg .price__now { font-size: 2.25rem; letter-spacing: .01em; }
.price--lg .price__old { font-size: 1.0625rem; }

.price__save {
    padding: .3125rem .5625rem .1875rem;
    font-family: var(--font-head);
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-white);
    background: var(--c-red);
}

.card__perkg {
    margin-top: .625rem;
    font-size: .875rem;
    color: var(--c-gray-text);
}

.card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.qty {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 3.125rem;
    border: 1px solid var(--c-line);
}

.qty__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 100%;
    color: var(--c-brown);
    cursor: pointer;
    transition: color var(--ease);
}

.qty__btn:disabled { color: var(--c-gray); cursor: default; }

.qty__input {
    width: 2.75rem;
    height: 100%;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    text-align: center;
    color: var(--c-brown);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--c-line);
    border-right: 1px solid var(--c-line);
}

.card__add { flex: 1 1 11.25rem; }

.card__fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex: 0 0 auto;
    height: 3.125rem;
    padding: 0 1.125rem;
    font-size: .875rem;
    color: var(--c-brown);
    border: 1px solid var(--c-line);
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease);
}

.card__fav[aria-pressed="true"] { color: var(--c-red); border-color: var(--c-red); }
.card__fav[aria-pressed="true"] .icon { fill: currentColor; }

.card__service {
    margin-top: 2rem;
    border-top: 1px solid var(--c-line);
}

.card__service-item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: 1rem 0;
    font-size: .9375rem;
    line-height: 1.375rem;
    color: var(--c-gray-text);
    border-bottom: 1px solid var(--c-line);
}

.card__service-item .icon { flex: 0 0 auto; color: var(--c-brown); }
.card__service-item b { color: var(--c-brown); font-weight: 400; }

@media (hover: hover) {
    .rating__link:hover { color: var(--c-orange); }
    .qty__btn:hover:not(:disabled) { color: var(--c-orange); }
    .card__fav:hover { color: var(--c-orange); border-color: var(--c-orange); }
    .card__fav[aria-pressed="true"]:hover { color: var(--c-red); border-color: var(--c-red); }
}

/* -------------------------------------------------------------------------
   41. СТРАНИЦА ТОВАРА: ВКЛАДКИ
   ---------------------------------------------------------------------- */
.tabs { border-top: 1px solid var(--c-line); }

.tabs__nav {
    display: flex;
    gap: 2.5rem;
    border-bottom: 1px solid var(--c-line);
}

.tabs__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 1.375rem 0 1.25rem;
    font-family: var(--font-head);
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-gray-text);
    white-space: nowrap;
    border-bottom: .125rem solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease);
}

.tabs__btn.is-active {
    color: var(--c-brown);
    border-color: var(--c-orange);
}

.tabs__num {
    font-size: .75rem;
    color: var(--c-gray);
}

.tabs__btn.is-active .tabs__num { color: var(--c-orange); }

.tabs__panel { padding: 2.5rem 0 .625rem; }

.tabs__sub {
    margin: 2.5rem 0 1rem;
    font-family: var(--font-head);
    font-size: 1.25rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--c-brown);
}

.tabs__panel > .tabs__sub:first-of-type { margin-top: 0; }

.tabs__note {
    max-width: 51.25rem;
    margin-top: 1.5rem;
    font-size: .875rem;
    line-height: 1.375rem;
    color: var(--c-gray);
}

.tabs__hint {
    max-width: 51.25rem;
    margin-top: .75rem;
    padding: 1rem 1.25rem;
    font-size: .9375rem;
    line-height: 1.375rem;
    color: var(--c-brown);
    background: var(--c-card);
}

@media (hover: hover) {
    .tabs__btn:hover { color: var(--c-brown); }
}

/* -------------------------------------------------------------------------
   42. ПРОЗА, ДОВОДЫ, ТАБЛИЦЫ ХАРАКТЕРИСТИК
   ---------------------------------------------------------------------- */
.prose {
    max-width: 51.25rem;
    font-size: 1rem;
    line-height: 1.625rem;
    color: var(--c-gray-text);
}

.prose__p + .prose__p { margin-top: 1rem; }
.prose .tabs__sub + .prose__p { margin-top: 0; }

/* Содержимое редактора: статья блога и текстовые страницы. Теги приходят из
   редактора без классов, поэтому оформление задаётся по самим тегам. */
.prose > * + * { margin-top: 1rem; }

.prose h2,
.prose h3,
.prose h4 {
    font-family: var(--font-head);
    letter-spacing: .02em;
    color: var(--c-brown);
}

.prose h2 {
    margin-top: 2.5rem;
    font-size: 1.375rem;
    line-height: 1.75rem;
    text-transform: uppercase;
}

.prose h3 {
    margin-top: 2rem;
    font-size: 1.1875rem;
    line-height: 1.625rem;
}

.prose h4 {
    margin-top: 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.5rem;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * { margin-top: .75rem; }

.prose a {
    color: var(--c-orange);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}

.prose strong { color: var(--c-brown); }

/* Общий сброс убирает маркеры у всех списков, а в тексте страницы они нужны:
   без них перечисление читается как набор оборванных абзацев. */
.prose ul > li { list-style: disc outside; }
.prose ol > li { list-style: decimal outside; }

.prose ul,
.prose ol { padding-left: 1.125rem; }

.prose li { padding-left: .25rem; }

.prose li + li { margin-top: .5rem; }
.prose li::marker { color: var(--c-orange); }

.prose blockquote {
    padding: .25rem 0 .25rem 1.25rem;
    border-left: 2px solid var(--c-orange);
    font-size: 1.0625rem;
    line-height: 1.625rem;
    color: var(--c-brown);
}

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

.prose caption {
    margin-bottom: .5rem;
    font-size: .875rem;
    text-align: left;
    color: var(--c-gray-text);
}

.prose th,
.prose td {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--c-line);
    text-align: left;
    vertical-align: top;
}

.prose th {
    font-family: var(--font-head);
    font-size: .875rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--c-brown);
}

/* Подпись строки — не заголовок столбца: прописные в таблице реквизитов
   читаются как крик, а первой колонке нужна своя ширина. */
.prose th[scope="row"] {
    width: 15rem;
    font-size: .9375rem;
    letter-spacing: 0;
    text-transform: none;
}

@media screen and (max-width: 575px) {
    .prose th[scope="row"] { width: 9rem; }
}

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

.prose figcaption {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--c-gray-text);
}

.prose hr {
    height: 1px;
    margin: 2rem 0;
    border: 0;
    background: var(--c-line);
}

/* Заголовок статьи и строка с датой стоят вплотную друг к другу: между ними
   не нужен отступ секции, он разрывает шапку статьи пополам. */
.article__title { margin-bottom: .75rem; }
.article__meta { margin-bottom: 2rem; }

/* Первый абзац статьи — вводный: крупнее и темнее остального текста. */
.prose--article > .prose__p:first-child {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--c-brown);
}

.prose--article > figure:first-child { margin-bottom: 1.75rem; }

.perks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.perks__item {
    padding: 1.5rem 1.5rem 1.625rem;
    background: var(--c-card);
}

.perks__icon { color: var(--c-orange); }

.perks__title {
    margin: .75rem 0 .5rem;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--c-brown);
}

.perks__text {
    font-size: .9375rem;
    line-height: 1.375rem;
    color: var(--c-gray-text);
}

.spec {
    width: 100%;
    max-width: 40rem;
    border-collapse: collapse;
}

.spec__caption {
    margin-bottom: .75rem;
    font-size: .8125rem;
    color: var(--c-gray);
    text-align: left;
}

.spec tr { border-bottom: 1px solid var(--c-line); }
.spec tr:first-child { border-top: 1px solid var(--c-line); }

.spec th,
.spec td {
    padding: .8125rem .5rem;
    font-size: .9375rem;
    line-height: 1.375rem;
    text-align: left;
    vertical-align: top;
}

.spec th:first-child { padding-left: 0; }
.spec td:last-child { padding-right: 0; }

.spec__key {
    width: 55%;
    font-weight: 400;
    color: var(--c-gray-text);
}

.spec__val { color: var(--c-brown); }

.spec--norms thead th {
    font-family: var(--font-head);
    font-size: .8125rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-brown);
}

.spec--norms .spec__key { width: 50%; }

/* -------------------------------------------------------------------------
   43. ОЦЕНКИ И ОТЗЫВЫ НА СТРАНИЦЕ ТОВАРА
   ---------------------------------------------------------------------- */
.score {
    display: grid;
    grid-template-columns: max-content minmax(0, 22.5rem);
    justify-content: start;
    gap: 2.5rem 3.75rem;
    align-items: center;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--c-line);
}

.score__main { text-align: center; }

.score__value {
    font-family: var(--font-head);
    font-size: 3.5rem;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--c-brown);
}

.score__main .rating__stars { margin-top: .625rem; }

.score__count {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--c-gray-text);
}

.score__row + .score__row { margin-top: .5rem; }

/* Строка распределения — кнопка отбора: нажатие на «4 звезды» показывает только
   такие отзывы, и это тот жест, которого от полоски и ждут */
.score__row-btn {
    display: grid;
    width: 100%;
    grid-template-columns: 2.25rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: .625rem;
    text-align: left;
    transition: opacity var(--ease);
}

.score__row-btn:disabled { opacity: .45; }

.score__row-btn:not(:disabled):hover .score__fill { background: var(--c-orange-dark); }

.score__mark {
    display: inline-flex;
    align-items: center;
    gap: .1875rem;
    font-size: .875rem;
    color: var(--c-gray-text);
}

.score__mark .icon { color: var(--c-orange); }

.score__track {
    display: block;
    height: .375rem;
    background: var(--c-light);
}

.score__fill {
    display: block;
    width: var(--share, 0%);
    height: 100%;
    background: var(--c-orange);
}

.score__num {
    font-size: .8125rem;
    color: var(--c-gray);
    text-align: right;
}

.score__cta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
}

.score__cta-note {
    flex: 1 1 16rem;
    font-size: .8125rem;
    line-height: 1.25rem;
    color: var(--c-gray-text);
}

/* ---------------------------------------- список отзывов и вопросов */
.thread {
    display: grid;
    gap: 1.25rem;
}

.thread__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    margin-bottom: 1.5rem;
}

.thread__tools--qa { align-items: flex-start; }

.thread__hint {
    flex: 1 1 18rem;
    font-size: .9375rem;
    line-height: 1.375rem;
    color: var(--c-gray-text);
}

.thread__select {
    height: 2.375rem;
    padding: 0 .625rem;
    font-family: inherit;
    font-size: .9375rem;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid var(--c-line);
}

.thread__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.thread__chip {
    min-height: 2.375rem;
    padding: .375rem .875rem;
    font-family: var(--font-head);
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-gray-text);
    background: var(--c-card);
    border: 1px solid transparent;
    transition: color var(--ease), border-color var(--ease), background var(--ease);
}

.thread__chip:hover { color: var(--c-brown); }

.thread__chip.is-active {
    color: var(--c-brown);
    background: var(--c-white);
    border-color: var(--c-brown);
}

.thread__empty,
.thread__start-text {
    font-size: .9375rem;
    line-height: 1.5rem;
    color: var(--c-gray-text);
}

.thread__start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 2rem;
    background: var(--c-card);
}

.thread + [data-thread-more] { margin-top: 1.5rem; }

/* ------------------------------------------------ карточка отзыва */
.review--full {
    display: grid;
    gap: .875rem;
    height: auto;
    padding: 1.625rem 1.75rem;
}

.review__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .875rem;
}

.review__who {
    display: grid;
    gap: .125rem;
}

.review__author {
    font-family: var(--font-head);
    font-size: 1rem;
    letter-spacing: .01em;
    color: var(--c-brown);
}

.review__meta {
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.review__side {
    display: grid;
    justify-items: end;
    gap: .375rem;
}

.review__badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1875rem .5rem;
    font-size: .75rem;
    color: var(--c-green);
    background: rgba(76, 122, 52, .1);
}

.review__badge .icon { color: var(--c-green); }

/* Достоинства и недостатки: цветная полоса слева, чтобы их было видно, не читая
   подписи, — по ним и пробегают глазами в первую очередь */
.review__side-note {
    padding-left: .75rem;
    font-size: .9375rem;
    line-height: 1.375rem;
    border-left: 2px solid var(--c-line);
}

.review__side-note--pro { border-left-color: var(--c-green); }
.review__side-note--con { border-left-color: var(--c-red); }

.review__side-label {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-gray-text);
}

.review--full .review__text {
    margin: 0;
    line-height: 1.5rem;
}

.review__avatar--letter {
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-size: 1.25rem;
    color: var(--c-brown);
    background: var(--c-light);
}

.review__photos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.review__photo-img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
}

.review__reply {
    padding: .875rem 1rem;
    background: var(--c-white);
    border-left: 2px solid var(--c-orange);
}

.review__reply-who {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-family: var(--font-head);
    font-size: .875rem;
    letter-spacing: .02em;
    color: var(--c-brown);
}

.review__reply-who .icon { color: var(--c-orange); }

.review__reply-date {
    margin-left: auto;
    font-family: var(--font-text);
    font-size: .75rem;
    color: var(--c-gray);
}

.review__reply-text {
    margin-top: .375rem;
    font-size: .9375rem;
    line-height: 1.375rem;
    color: var(--c-gray-text);
}

.review__foot {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.review__vote {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .875rem;
    color: var(--c-gray-text);
    transition: color var(--ease);
}

.review__vote .icon { stroke: currentColor; }

.review__vote:not(:disabled):hover { color: var(--c-brown); }

.review__vote.is-voted { color: var(--c-green); }

.review__vote-num {
    min-width: 1.125rem;
    padding: 0 .25rem;
    font-size: .75rem;
    text-align: center;
    background: var(--c-white);
}

/* ------------------------------------------------ вопрос и ответ */
.qa {
    display: grid;
    gap: .625rem;
    padding: 1.5rem 1.75rem;
    background: var(--c-card);
}

.qa__head {
    display: flex;
    align-items: baseline;
    gap: .625rem;
}

.qa__author {
    font-family: var(--font-head);
    font-size: 1rem;
    color: var(--c-brown);
}

.qa__date {
    font-size: .8125rem;
    color: var(--c-gray);
}

.qa__text {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--c-brown);
}

.qa__answer {
    padding: .875rem 1rem;
    background: var(--c-white);
    border-left: 2px solid var(--c-orange);
}

.qa__answer-who {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-family: var(--font-head);
    font-size: .875rem;
    color: var(--c-brown);
}

.qa__answer-who .icon { color: var(--c-orange); }

.qa__answer-text {
    margin-top: .375rem;
    font-size: .9375rem;
    line-height: 1.375rem;
    color: var(--c-gray-text);
}

.qa__wait {
    font-size: .8125rem;
    color: var(--c-gray);
}

@media (max-width: 40rem) {
    .review--full,
    .qa { padding: 1.25rem; }

    .review__head {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: .625rem;
    }

    .review__side {
        grid-column: 1 / -1;
        justify-items: start;
        grid-auto-flow: column;
        align-items: center;
        gap: .625rem;
    }

    .thread__tools { justify-content: flex-start; }
}

/* -------------------------------------------------------------------------
   44. ЛИПКАЯ ПАНЕЛЬ ПОКУПКИ
   ---------------------------------------------------------------------- */
.buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(1.25rem);
    -webkit-backdrop-filter: saturate(180%) blur(1.25rem);
    border-top: 1px solid var(--c-line);
    transform: translateY(100%);
    transition: transform var(--ease);
}

.buybar.is-visible { transform: translateY(0); }

/* панель не должна перекрывать открытую корзину или меню */
.body.is-locked .buybar { transform: translateY(100%); }

.buybar__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.buybar__img {
    width: auto;
    max-width: 3.75rem;
    max-height: 2.75rem;
    height: auto;
    mix-blend-mode: multiply;
}

.buybar__name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-head);
    font-size: 1rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--c-brown);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buybar__pack {
    margin-left: .625rem;
    font-family: var(--font-text);
    font-size: .875rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-gray-text);
}

.buybar__price {
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-size: 1.375rem;
    white-space: nowrap;
    color: var(--c-brown);
}

.buybar__add { flex: 0 0 auto; }

.section-similar { padding: 3.75rem 0 4.375rem; }
.products--similar { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.875rem; }
.section__more { margin-top: 2.5rem; }

/* -------------------------------------------------------------------------
   45. СТРАНИЦА ТОВАРА: АДАПТИВ
   ---------------------------------------------------------------------- */
@media screen and (max-width: 1300px) {
    .card { gap: 2.5rem; }
    .tabs__nav { gap: 1.875rem; }
}

@media screen and (max-width: 991px) {
    .section-product { padding: 3.75rem 0 2.5rem; }

    .card {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        margin-bottom: 3.125rem;
    }

    .card__gallery { position: static; }
    .card__figure { min-height: 20rem; }
    .card__img { max-height: 17rem; }
    .card__lead { max-width: none; }

    .score { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.875rem; }
    .score__bars { width: 100%; max-width: 22.5rem; }

    /* пять заголовков в строку уже не влезают: полоса прокручивается, а не
       переносится — перенос ломает ощущение одной линии под вкладками */
    .tabs__nav {
        gap: 1.5rem;
        margin: 0 -.9375rem;
        padding: 0 .9375rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tabs__nav::-webkit-scrollbar { display: none; }
}

@media screen and (max-width: 767px) {
    .tabs__btn { font-size: .9375rem; padding: 1.125rem 0 1rem; }
    .tabs__panel { padding-top: 1.875rem; }
    .tabs__sub { margin: 1.875rem 0 .875rem; font-size: 1.125rem; }

    .perks { gap: .9375rem; margin-top: 1.875rem; }
    .perks__item { padding: 1.25rem; }

    .reviews--product { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

    .card__actions { gap: .625rem; }
    .card__add { flex: 1 1 100%; order: 3; }
    .card__fav { flex: 1 1 auto; }

    /* панель покупки встаёт над мобильной панелью действий */
    .buybar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    .buybar__img { display: none; }
    .buybar__inner { gap: .75rem; padding-top: .625rem; padding-bottom: .625rem; }
    .buybar__name { font-size: .875rem; }
    .buybar__pack { display: none; }
    .buybar__price { font-size: 1.125rem; }
    .buybar__add { min-height: 2.75rem; padding: .8125rem 1rem .5625rem; font-size: .8125rem; }

    .section-similar { padding: 2.5rem 0 3.125rem; }
}

@media screen and (max-width: 575px) {
    .card__figure { min-height: 15rem; padding: 1.5rem; }
    .card__img { max-height: 13rem; }
    .price--lg .price__now { font-size: 1.875rem; }
    .score__value { font-size: 3rem; }
    .spec th, .spec td { font-size: .875rem; }
    .buybar__name { display: none; }
    .buybar__inner { justify-content: space-between; }
}

/* -------------------------------------------------------------------------
   46. ОФОРМЛЕНИЕ ЗАКАЗА В ПАНЕЛИ КОРЗИНЫ
   ---------------------------------------------------------------------- */
.drawer__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: -.5rem;
    color: var(--c-brown);
}

/* стрелка «назад» — та же галочка меню, повёрнутая на четверть */
.drawer__back .icon { transform: rotate(90deg); }

.drawer__head { position: relative; }

.steps {
    display: flex;
    flex: 0 0 auto;
    gap: .5rem;
    padding: .875rem 1.75rem;
    font-size: .8125rem;
    color: var(--c-gray-text);
    border-bottom: 1px solid var(--c-card);
}

.steps__item {
    display: flex;
    align-items: center;
    gap: .4375rem;
    flex: 1 1 0;
    min-width: 0;
}

.steps__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    font-size: .75rem;
    color: var(--c-gray-text);
    background: var(--c-card);
    border-radius: 50%;
    transition: color var(--ease), background var(--ease);
}

.steps__item.is-current { color: var(--c-brown); }
.steps__item.is-current .steps__num { color: var(--c-white); background: var(--c-brown); }
.steps__item.is-done .steps__num { color: var(--c-white); background: var(--c-orange); }

.checkout { display: grid; align-content: start; gap: 1.75rem; }

.checkout__group { display: grid; gap: .875rem; }

.checkout__legend {
    font-family: var(--font-head);
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.checkout__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }

.field { display: grid; gap: .375rem; }

.field__label {
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.field__hint { color: var(--c-gray); }

.field__input {
    width: 100%;
    height: 2.875rem;
    padding: 0 .875rem;
    font-size: 1rem;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    transition: border-color var(--ease);
}

.field__input:focus { border-color: var(--c-orange); outline: none; }
.field__input.is-invalid { border-color: var(--c-red); }

.field__error {
    font-size: .8125rem;
    color: var(--c-red);
}

/* --- карточки выбора: доставка и оплата --- */
.choices { display: grid; gap: .625rem; }

.choice {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    cursor: pointer;
    border: 1px solid var(--c-line);
    transition: border-color var(--ease), background var(--ease);
}

/* Настоящий переключатель не рисуется, но остаётся в разметке: он даёт
   клавиатуру, стрелки внутри группы и подпись для скринридера */
.choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.choice__body { display: grid; gap: .1875rem; min-width: 0; }

.choice__title { font-weight: 700; line-height: 1.3; }

.choice__note {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--c-gray-text);
}

.choice__price {
    font-family: var(--font-head);
    font-size: 1.0625rem;
    white-space: nowrap;
}

.choice__price.is-free { color: var(--c-green); }

.choice__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--c-white);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: 50%;
    transition: background var(--ease), border-color var(--ease);
}

.choice.is-active { border-color: var(--c-brown); background: var(--c-card); }
.choice.is-active .choice__mark { background: var(--c-orange); border-color: var(--c-orange); }
.choice__input:focus-visible + .choice__body { outline: 2px solid var(--c-orange); outline-offset: .375rem; }

/* --- промокод --- */
.promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }

.promo__btn { height: 2.875rem; padding: 0 1.25rem; }

.promo__state { font-size: .8125rem; color: var(--c-green); }
.promo__state.is-bad { color: var(--c-red); }

/* --- сводка --- */
.summary { display: grid; gap: .625rem; }

.summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: .9375rem;
    color: var(--c-gray-text);
}

.summary__row span:last-child { color: var(--c-brown); }

.summary__row--total {
    padding-top: .625rem;
    font-size: 1.0625rem;
    border-top: 1px solid var(--c-card);
}

.checkout__legal {
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--c-gray);
}

.checkout__legal a { color: var(--c-gray-text); border-bottom: 1px solid var(--c-line); }

/* --- подтверждение --- */
.done {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    text-align: center;
}

.done__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    color: var(--c-white);
    background: var(--c-orange);
    border-radius: 50%;
}

.done__title {
    font-family: var(--font-head);
    font-size: 1.5rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.done__note {
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--c-gray-text);
}

.done .summary { width: 100%; margin-top: .5rem; text-align: left; }

.button.is-busy { opacity: .7; pointer-events: none; }

@media (hover: hover) {
    .drawer__back:hover { color: var(--c-orange); }
    .choice:hover { border-color: var(--c-brown); }
    .checkout__legal a:hover { color: var(--c-orange); border-color: var(--c-orange); }
}

@media screen and (max-width: 480px) {
    .checkout__row { grid-template-columns: minmax(0, 1fr); }
    .steps { padding: .75rem 1.25rem; font-size: .75rem; }
    .steps__item { gap: .3125rem; }
}

/* -------------------------------------------------------------------------
   47. СТРАНИЦЫ КОРЗИНЫ И ОФОРМЛЕНИЯ
   Основной сценарий — панель корзины, но прямая ссылка на /checkout/ должна
   открывать не чужую форму, а ту же витрину.
   ---------------------------------------------------------------------- */
.woo a { color: var(--c-orange); }

.woo h3 {
    margin-bottom: 1rem;
    font-family: var(--font-head);
    font-size: 1.25rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.woo .woocommerce-message,
.woo .woocommerce-info,
.woo .woocommerce-error {
    margin-bottom: 1.5rem;
    padding: .875rem 1.125rem;
    list-style: none;
    font-size: .9375rem;
    background: var(--c-card);
    border-left: 3px solid var(--c-orange);
}

.woo .woocommerce-error { border-left-color: var(--c-red); }

.woo .woocommerce-form-coupon-toggle { margin-bottom: 1.25rem; }

.woo .checkout_coupon {
    display: grid;
    grid-template-columns: minmax(0, 20rem) auto;
    gap: .625rem;
    align-items: end;
    margin-bottom: 2rem;
}

.woo .checkout_coupon p { margin: 0; }

/* --- поля --- */
.woo .form-row { display: grid; gap: .375rem; margin-bottom: 1rem; }

.woo .form-row label {
    font-size: .8125rem;
    color: var(--c-gray-text);
}

/* WooCommerce оборачивает поле в inline-span, из-за него input сжимается */
.woo .woocommerce-input-wrapper,
.woo .select2-container { display: block; width: 100% !important; }

.woo .required { color: var(--c-orange); text-decoration: none; }

.woo input[type="text"],
.woo input[type="tel"],
.woo input[type="email"],
.woo input[type="password"],
.woo input[type="number"],
.woo select,
.woo textarea {
    width: 100%;
    min-height: 2.875rem;
    padding: .625rem .875rem;
    font-family: var(--font-text);
    font-size: 1rem;
    color: var(--c-brown);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: 0;
    transition: border-color var(--ease);
}

.woo textarea { min-height: 6rem; resize: vertical; }

.woo input:focus,
.woo select:focus,
.woo textarea:focus { border-color: var(--c-orange); outline: none; }

.woo .woocommerce-billing-fields__field-wrapper,
.woo .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

.woo .form-row-wide,
.woo .woocommerce-additional-fields .form-row { grid-column: 1 / -1; }

/* --- раскладка оформления: слева поля, справа состав заказа --- */
.woo form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    /* левая колонка растянута на две строки: без 1fr её высота растекается
       по обеим строкам и под заголовком «Ваш заказ» появляется дыра */
    grid-template-rows: auto 1fr;
    gap: 0 3rem;
    align-items: start;
}

.woo #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woo #order_review_heading { grid-column: 2; grid-row: 1; }
.woo #order_review { grid-column: 2; grid-row: 2; }

/* На корзине и оформлении стили WooCommerce остаются подключёнными, а они
   раскладывают колонки и поля флоатами с процентной шириной — здесь эти
   правила перебиваются, иначе поля схлопываются внутри grid-строк */
.woo .col2-set { display: grid; gap: 2rem; }
.woo .col2-set .col-1,
.woo .col2-set .col-2,
.woo form .form-row,
.woo form .form-row-first,
.woo form .form-row-last,
.woo form .form-row-wide { float: none; width: auto; }

.woo #order_review { padding: 1.5rem; background: var(--c-card); }

.woo .shop_table {
    width: 100%;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
    font-size: .9375rem;
}

.woo .shop_table th,
.woo .shop_table td {
    padding: .625rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-line);
}

.woo .shop_table th { font-weight: 700; }

.woo .shop_table td:last-child,
.woo .shop_table th:last-child { text-align: right; white-space: nowrap; }

.woo .order-total td,
.woo .order-total th {
    padding-top: .875rem;
    font-family: var(--font-head);
    font-size: 1.25rem;
    border-bottom: 0;
}

.woo .woocommerce-shipping-methods { display: grid; gap: .375rem; list-style: none; }

.woo .woocommerce-shipping-methods label { font-size: .9375rem; color: var(--c-brown); }

/* --- оплата --- */
.woo .wc_payment_methods {
    display: grid;
    gap: .625rem;
    margin-bottom: 1.25rem;
    list-style: none;
}

.woo .wc_payment_method {
    padding: .875rem 1rem;
    background: var(--c-white);
    border: 1px solid var(--c-line);
}

.woo .wc_payment_method label { font-weight: 700; color: var(--c-brown); }

.woo .payment_box {
    margin-top: .5rem;
    font-size: .875rem;
    color: var(--c-gray-text);
}

.woo .woocommerce-privacy-policy-text {
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--c-gray);
}

/* --- кнопки --- */
.woo .button,
.woo a.button.alt,
.woo button.button.alt,
.woo .wc-proceed-to-checkout a.checkout-button,
.woo #place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.125rem;
    padding: 0 1.75rem;
    font-family: var(--font-head);
    font-size: .9375rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-white);
    background: var(--c-orange);
    border: 0;
    cursor: pointer;
    transition: background var(--ease);
}

.woo #place_order { width: 100%; }

/* --- страница корзины --- */
.woo .woocommerce-cart-form .shop_table { table-layout: auto; }
.woo .woocommerce-cart-form .shop_table td { vertical-align: middle; }
.woo .woocommerce-cart-form .product-name { width: 99%; }
.woo .woocommerce-cart-form .product-thumbnail { width: 5rem; }
.woo .woocommerce-cart-form .product-price,
.woo .woocommerce-cart-form .product-quantity,
.woo .woocommerce-cart-form .product-subtotal { white-space: nowrap; text-align: right; }
/* колонка с названием забирает всю ширину, поэтому картинке нужен свой размер:
   без max-width:none она сжимается до ширины схлопнутой ячейки */
.woo table.shop_table .product-thumbnail img {
    display: block;
    width: 4rem;
    max-width: none;
    height: auto;
}
.woo .quantity input { width: 4.5rem; text-align: center; }
.woo .coupon #coupon_code { width: 100%; }

.woo .woocommerce-cart-form .actions { padding-top: 1.25rem; }

.woo .woocommerce-cart-form .coupon {
    display: inline-grid;
    grid-template-columns: minmax(0, 14rem) auto;
    gap: .625rem;
    vertical-align: top;
}

.woo .woocommerce-cart-form .actions > .button { float: right; }

.woo .cart-collaterals {
    max-width: 26rem;
    margin-top: 2rem;
    margin-left: auto;
    padding: 1.5rem;
    background: var(--c-card);
}

/* таблица итогов у WooCommerce тянется по содержимому и вылезает из колонки */
.woo .cart-collaterals .cart_totals,
.woo .cart-collaterals .cross-sells { float: none; width: 100%; }

.woo .cart_totals table,
.woo .cart_totals .shop_table {
    width: 100%;
    table-layout: fixed;
}

.woo .cart_totals th { width: 45%; white-space: normal; }
.woo .cart_totals td,
.woo .cart_totals td:last-child { white-space: normal; }
.woo .cart_totals .woocommerce-shipping-methods { margin-bottom: .5rem; }

.woo .cart_totals .woocommerce-shipping-destination,
.woo .cart_totals .shipping-calculator-button {
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.woo .cart_totals h2 {
    margin-bottom: 1rem;
    font-family: var(--font-head);
    font-size: 1.25rem;
    text-transform: uppercase;
}

.woo .wc-proceed-to-checkout { margin-top: 1rem; }
.woo .wc-proceed-to-checkout .button { width: 100%; }

@media (hover: hover) {
    .woo .button:hover,
    .woo #place_order:hover { background: var(--c-orange-dark); }
}

@media screen and (max-width: 991px) {
    .woo form.checkout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .woo #customer_details,
    .woo #order_review_heading,
    .woo #order_review { grid-column: 1; grid-row: auto; }
}

@media screen and (max-width: 600px) {
    .woo .woocommerce-billing-fields__field-wrapper,
    .woo .woocommerce-shipping-fields__field-wrapper,
    .woo .checkout_coupon { grid-template-columns: minmax(0, 1fr); }
    .woo .cart-collaterals { max-width: none; }
}

/* ----- уважение к настройкам движения ----- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   48. СЕО-ПОДБОРКИ: ССЫЛКИ В ФИЛЬТРЕ И БЛОК ПОДБОРОК
   ========================================================================= */

/* Ссылка накрывает строку фильтра целиком. Видимый текст остаётся у галочки,
   а ссылка даёт роботу адрес и человеку возможность открыть подборку в новой
   вкладке; обычный клик перехватывает catalog.js. */
.facet__row { position: relative; }

.facet__link {
    position: absolute;
    inset: 0;
    border-radius: .375rem;
}

.facet__link:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; }

.picks { margin-top: 2.5rem; }

.picks__title {
    margin: 0 0 1rem;
    font-family: var(--font-head);
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--c-brown);
}

.picks__list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.picks__link {
    display: inline-flex;
    align-items: center;
    padding: .5rem .875rem;
    font-size: .875rem;
    line-height: 1.2;
    color: var(--c-brown);
    text-decoration: none;
    background: var(--c-light);
    border: 1px solid var(--c-line);
    border-radius: 2rem;
    transition: color .2s, background-color .2s, border-color .2s;
}

@media (hover: hover) {
    .picks__link:hover { color: var(--c-white); background: var(--c-brown); border-color: var(--c-brown); }
}

/* =========================================================================
   49. СТРАНИЦА СЕРИИ: FRESH И VET
   ========================================================================= */

/* Первый экран: слева рассказ, справа снимок упаковки. Общая палитра сайта,
   различает серии сам товар — логотип и снимок. */
/* Верхний отступ не меньше, чем у обычной секции: шапка приклеена к окну и
   накрывает первые 49px страницы. */
.brandhero { padding: 3.5625rem 0 3.75rem; }

.brandhero__inner {
    display: flex;
    align-items: center;
    gap: 3.75rem;
}

.brandhero__body { flex: 1 1 auto; min-width: 0; }

.brandhero__logo {
    display: block;
    height: 2rem;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

.brandhero__logo--grandorf { width: 14.5rem; background-image: url("../img/grandorf-logo-active.svg"); }
.brandhero__logo--fresh    { width: 22.1875rem; background-image: url("../img/grandorf-fresh-logo-active.svg"); }
.brandhero__logo--vet      { width: 19.875rem; background-image: url("../img/grandorf-vet-logo-active.svg"); }
/* Знак Premier вытянутый: 216×31 у исходника, при высоте 2rem это 13.9375rem. */
.brandhero__logo--premier  { width: 13.9375rem; background-image: url("../img/premier-logo-active.svg"); }

.brandhero__eyebrow {
    margin-bottom: 1rem;
    font-size: .875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-orange);
}

.brandhero__title { margin-bottom: 1.25rem; }

.brandhero__lead {
    max-width: 34rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--c-gray-text);
}

.brandhero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .9375rem;
    margin-top: 2.25rem;
}

.brandhero__media {
    flex: 0 0 26.25rem;      /* 420px */
    line-height: 0;
}

.brandhero__img {
    width: 100%;
    height: auto;
}

/* ----- отличия серии ----- */
.brandfeats__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875rem;
}

.brandfeat {
    display: flex;
    flex-direction: column;
    padding: 1.875rem;
    background: var(--c-white);
}

.brandfeat__media {
    display: block;
    margin: -1.875rem -1.875rem 1.5rem;
    line-height: 0;
    background: var(--c-card);
}

/* В карточках стоят фотографии, а не упаковки на прозрачном фоне: contain
   оставлял бы поля по бокам и разную видимую высоту снимков в ряду. */
.brandfeat__img {
    display: block;
    width: 100%;
    height: 15rem;
    object-fit: cover;
}

.brandfeat__title {
    margin-bottom: .75rem;
    font-family: var(--font-head);
    font-size: 1.25rem;
    line-height: 1.6875rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--c-brown);
}

.brandfeat__text {
    line-height: 1.5rem;
    color: var(--c-gray-text);
}

/* ----- статья между отличиями и витриной ----- */
.brandtext { padding: 3.75rem 0; }

.brandtext .prose { max-width: 45.625rem; margin: 0 auto; }

/* ----- витрина серии ----- */
.brandprods { padding: 4.375rem 0 3.75rem; }

/* ----- полоса призыва ----- */
.brandcta {
    position: relative;
    margin-bottom: .5rem;
    padding: 5rem 0;
    background: var(--c-brown);
    overflow: hidden;
}

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

/* Снимок под текстом почти всегда пёстрый, поэтому светлые буквы кладём на
   затемнение, а не прямо на фотографию. */
.brandcta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(67, 46, 37, .62);
}

.brandcta .container { position: relative; z-index: 10; }

.brandcta__body {
    max-width: 45.625rem;
    margin: 0 auto;
    text-align: center;
    color: var(--c-light);
}

.brandcta__title { margin-bottom: 1.25rem; }

.brandcta__text {
    margin-bottom: 2.25rem;
    line-height: 1.5rem;
}

/* ----- адаптив страницы серии ----- */
@media screen and (max-width: 991px) {
    .brandhero__inner {
        flex-direction: column-reverse;
        gap: 2.5rem;
    }

    .brandhero__media { flex: 0 0 auto; max-width: 20rem; }

    .brandhero__lead { max-width: none; }

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

@media screen and (max-width: 767px) {
    .brandhero { padding: 1.5rem 0 2.5rem; }

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

    .brandfeat__img { height: 12.5rem; }

    .brandcta { padding: 3.5rem 0; }
}

@media screen and (max-width: 575px) {
    .brandhero__buttons .button { width: 100%; }
}

/* -------------------------------------------------------------------------
   50. ФОРМЫ В МОДАЛКАХ: ОТЗЫВ И ВОПРОС
   ---------------------------------------------------------------------- */
.modal--form .modal__dialog { max-width: 36rem; }

.wform {
    display: grid;
    gap: 1.125rem;
    padding: 1.5rem 1.875rem 1.875rem;
    overflow-y: auto;
}

.wform__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.wform__legend {
    margin-bottom: .5rem;
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.field__input--area {
    height: auto;
    min-height: 3.25rem;
    padding: .625rem .875rem;
    line-height: 1.375rem;
    resize: vertical;
}

.field__input--code {
    max-width: 9rem;
    font-family: var(--font-head);
    font-size: 1.5rem;
    letter-spacing: .35em;
    text-align: center;
}

.field__hint--under {
    display: block;
    font-size: .75rem;
    line-height: 1.125rem;
}

/* Звёзды: разметка идёт от пяти к одной, поэтому подсветку «до наведённой»
   даёт соседний селектор, а не :has() — так работает и в старых браузерах */
.stars {
    display: flex;
    flex-direction: row-reverse;
    /* Порядок обратный, поэтому к левому краю прижимает flex-end */
    justify-content: flex-end;
    gap: .25rem;
}

.stars__item {
    position: relative;
    display: block;
}

/* Переключатель прячем, но оставляем на месте звезды: нажатие и переход
   табуляцией остаются штатными, без обработчиков в скрипте */
.stars__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.stars__label {
    display: block;
    padding: .125rem;
    cursor: pointer;
}

.stars__label .icon {
    color: var(--c-line);
    stroke: none;
    transition: color var(--ease);
}

.stars__item:hover .icon,
.stars__item:hover ~ .stars__item .icon,
.stars__input:checked ~ .stars__label .icon,
.stars__item:has(.stars__input:checked) ~ .stars__item .icon {
    color: var(--c-orange);
}

.stars__input:focus-visible ~ .stars__label { outline: 2px solid var(--c-orange); }

.wform__photos { display: grid; gap: .625rem; }

.wform__upload {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    justify-self: start;
    min-height: 2.5rem;
    padding: .375rem 1rem;
    font-family: var(--font-head);
    font-size: .875rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-brown);
    background: var(--c-card);
    border: 1px dashed var(--c-line);
    cursor: pointer;
    transition: border-color var(--ease);
}

.wform__upload:hover { border-color: var(--c-brown); }

.wform__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.wform__thumb { position: relative; }

.wform__thumb-img {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
}

.wform__thumb-drop {
    position: absolute;
    top: -.375rem;
    right: -.375rem;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    color: var(--c-white);
    background: var(--c-brown);
    border-radius: 50%;
}

.wform__note,
.acc__legal {
    font-size: .75rem;
    line-height: 1.125rem;
    color: var(--c-gray);
}

.wform__state,
.acc__state {
    padding: .75rem .875rem;
    font-size: .9375rem;
    line-height: 1.375rem;
    color: var(--c-green);
    background: rgba(76, 122, 52, .09);
}

/* -------------------------------------------------------------------------
   51. КАБИНЕТ В ПАНЕЛИ
   ---------------------------------------------------------------------- */
.action__dot,
.tabbar__dot {
    position: absolute;
    top: -.125rem;
    right: -.125rem;
    width: .4375rem;
    height: .4375rem;
    background: var(--c-green);
    border-radius: 50%;
}

.action { position: relative; }

/* Пятая кнопка «Кабинет» сузила ячейки: на узких телефонах подписи иначе
   переносятся и панель становится двухэтажной */
@media screen and (max-width: 22.5rem) {
    .tabbar__item { padding-left: .125rem; padding-right: .125rem; }
    .tabbar__label { font-size: .5625rem; letter-spacing: .03em; }
}

.acc { display: grid; gap: 1.25rem; align-content: start; }

.acc__lead {
    font-size: .9375rem;
    line-height: 1.5rem;
    color: var(--c-gray-text);
}

.acc__perks {
    display: grid;
    gap: .625rem;
    margin-top: 1rem;
}

.acc__perks li {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .9375rem;
    color: var(--c-brown);
}

.acc__perks .icon { color: var(--c-orange); }

.acc__form { display: grid; gap: 1rem; }

.acc__again {
    justify-self: start;
    font-size: .8125rem;
    color: var(--c-gray-text);
    text-decoration: underline;
    text-underline-offset: .1875rem;
}

.acc__me {
    display: grid;
    gap: .1875rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-line);
}

.acc__name {
    font-family: var(--font-head);
    font-size: 1.25rem;
    color: var(--c-brown);
}

.acc__mail {
    font-size: .875rem;
    color: var(--c-gray-text);
}

.acc__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
}

.acc__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    padding: .875rem .5rem;
    font-size: .8125rem;
    text-align: center;
    color: var(--c-brown);
    background: var(--c-card);
    transition: background var(--ease);
}

.acc__tab:hover { background: var(--c-light); }

/* Цветом, а не обводкой: звезда в спрайте залита currentColor */
.acc__tab .icon { width: 1.525rem; height: 1.525rem; color: var(--c-orange); }

.acc__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-size: .9375rem;
    line-height: 1.5rem;
    text-align: center;
    color: var(--c-gray-text);
}

.acc__empty .icon { color: var(--c-gray); }

.acc__orders { display: grid; gap: .625rem; }

.acc__order-btn {
    display: grid;
    gap: .375rem;
    width: 100%;
    padding: .875rem 1rem;
    text-align: left;
    background: var(--c-card);
    transition: background var(--ease);
}

.acc__order-btn:hover { background: var(--c-light); }

.acc__order-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .625rem;
}

.acc__order-num {
    font-family: var(--font-head);
    font-size: 1rem;
    color: var(--c-brown);
}

.acc__order-state {
    padding: .125rem .5rem;
    font-size: .75rem;
    color: var(--c-gray-text);
    background: var(--c-white);
}

.acc__order-state--processing { color: var(--c-orange); }
.acc__order-state--completed { color: var(--c-green); }
.acc__order-state--cancelled,
.acc__order-state--failed { color: var(--c-red); }

.acc__order-mid {
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.acc__order-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-head);
    font-size: 1rem;
    color: var(--c-brown);
}

.acc__order-chevron { transform: rotate(-90deg); }

.acc__out {
    justify-self: start;
    font-size: .8125rem;
    color: var(--c-gray-text);
    text-decoration: underline;
    text-underline-offset: .1875rem;
}

.acc__ohead { display: grid; gap: .1875rem; }

.acc__oname {
    font-family: var(--font-head);
    font-size: 1.25rem;
    color: var(--c-brown);
}

.acc__odate {
    font-size: .8125rem;
    color: var(--c-gray-text);
}

/* Таймлайн: пройденные шаги соединены линией, поэтому состояние видно целиком,
   а не одним словом «в обработке» */
.acc__track {
    display: grid;
    gap: .875rem;
    padding: 1rem 0;
}

.acc__track-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9375rem;
    color: var(--c-gray);
}

.acc__track-item.is-done { color: var(--c-brown); }

.acc__track-dot {
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    background: var(--c-light);
    border-radius: 50%;
}

.acc__track-item.is-done .acc__track-dot {
    color: var(--c-white);
    background: var(--c-green);
}

.acc__track-item.is-done .icon { color: var(--c-white); }

.acc__track-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.375rem;
    left: .625rem;
    width: 1px;
    height: .875rem;
    background: var(--c-line);
}

.acc__items { display: grid; gap: .75rem; }

.acc__item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
}

.acc__item-img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    background: var(--c-card);
}

.acc__item-body { display: grid; gap: .125rem; }

.acc__item-name {
    font-size: .9375rem;
    line-height: 1.25rem;
    color: var(--c-brown);
}

.acc__item-meta,
.acc__item-sum {
    font-size: .8125rem;
    color: var(--c-gray-text);
}

.summary__row--total {
    padding-top: .625rem;
    font-family: var(--font-head);
    font-size: 1rem;
    color: var(--c-brown);
    border-top: 1px solid var(--c-line);
}

.acc__where {
    display: flex;
    gap: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: var(--c-gray-text);
}

.acc__where .icon {
    flex: 0 0 auto;
    stroke: var(--c-gray);
}

.acc__mine { display: grid; gap: .875rem; }

.acc__mine-item {
    display: grid;
    gap: .375rem;
    padding: .875rem 1rem;
    background: var(--c-card);
}

.acc__mine-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .625rem;
}

.acc__mine-name {
    font-size: .9375rem;
    color: var(--c-brown);
}

.acc__mine-wait {
    flex: 0 0 auto;
    padding: .125rem .5rem;
    font-size: .75rem;
    color: var(--c-orange);
    background: var(--c-white);
}

.acc__mine-kind {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-gray);
}

.acc__mine-text {
    font-size: .9375rem;
    line-height: 1.375rem;
    color: var(--c-gray-text);
}

.acc__mine-reply {
    padding: .625rem .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: var(--c-gray-text);
    background: var(--c-white);
    border-left: 2px solid var(--c-orange);
}

.acc__mine-reply-who {
    display: block;
    font-family: var(--font-head);
    color: var(--c-brown);
}

@media (max-width: 40rem) {
    .wform { padding: 1.25rem; }
    .wform__row { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   52. СТРАНИЦА КОНТАКТОВ
   ========================================================================= */

/* Карточки направлений: у магазина один номер, но вопросы разные, и человеку
   нужно понять, туда ли он пишет, а не выбирать между четырьмя номерами. */
.conthead__lead {
    max-width: 45.625rem;
    line-height: 1.75rem;
    color: var(--c-gray-text);
}

.contcards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.875rem;
    margin-top: 2.5rem;
}

.contcard {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.875rem;
    background: var(--c-card);
}

.contcard__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--c-white);
    background: var(--c-orange);
    border-radius: 50%;
}

.contcard__title {
    font-family: var(--font-head);
    font-size: 1.125rem;
    line-height: 1.5rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--c-brown);
}

.contcard__note {
    font-size: .9375rem;
    line-height: 1.5rem;
    color: var(--c-gray-text);
}

/* Контакты прижаты к низу карточки: в ряду разные по длине пояснения, и без
   этого номера встают на трёх разных высотах. */
.contcard__lines {
    display: grid;
    gap: .25rem;
    margin-top: auto;
    padding-top: .5rem;
    list-style: none;
}

.contcard__phone {
    font-family: var(--font-head);
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: var(--c-brown);
    text-decoration: none;
}

.contcard__mail {
    font-size: .9375rem;
    color: var(--c-orange);
}

/* Карточка без телефона и почты кончается ссылкой: прижимаем её к низу, иначе
   в ряду она встанет выше соседних контактов. */
.contcard__link {
    margin-top: auto;
    padding-top: .5rem;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-brown);
}

.conthead__hours {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.875rem;
    font-size: .9375rem;
    line-height: 1.5rem;
    color: var(--c-gray-text);
}

.conthead__hours-mark {
    flex: 0 0 auto;
    display: flex;
    color: var(--c-green);
}

/* ----- пункт выдачи ----- */
.contplace__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.75rem;
    padding: 2.5rem 3.125rem;
    background: var(--c-white);
}

.contplace__title {
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
    line-height: 2.25rem;
}

.contplace__address {
    margin-bottom: .5rem;
    font-family: var(--font-head);
    font-size: 1.25rem;
    line-height: 1.875rem;
    color: var(--c-brown);
}

.contplace__hours {
    margin-bottom: 1.25rem;
    color: var(--c-gray-text);
}

.contplace__map {
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-orange);
}

.contplace__note-p {
    line-height: 1.75rem;
    color: var(--c-gray-text);
}

.contplace__note-p + .contplace__note-p { margin-top: .75rem; }

/* ----- письмо магазину ----- */
.contform__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 3.75rem;
    align-items: start;
}

.contform__title {
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
    line-height: 2.25rem;
}

.contform__note {
    line-height: 1.75rem;
    color: var(--c-gray-text);
}

.contform__note + .contform__note { margin-top: 1rem; }

/* Форма пришла из модалки, там фон давало окно. На белой секции нужен свой,
   иначе поля висят в воздухе. */
.contform__form {
    padding: 1.875rem;
    background: var(--c-card);
}

.contform__submit { justify-self: start; }

/* Приманка для роботов: уводим за край окна, а не display:none — часть ботов
   заполняет только видимые в разметке поля. */
.contform__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media screen and (max-width: 991px) {
    .contcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .contplace__grid,
    .contform__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.875rem;
    }

    .contplace__grid { padding: 1.875rem; }
}

@media screen and (max-width: 767px) {
    .contcards {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .contcard { padding: 1.25rem; }

    .contform__form { padding: 1.25rem; }
}

/* ----- печать ----- */
@media print {
    .topbar, .header, .menu-mob, .drawer, .overlay, .search, .mega,
    .section-subscribe, .badges, .tabbar, .modal, .section-recent,
    .product__quick, .filters, .presets, .toolbar, .applied, .picks,
    .more, .buybar, .tabs__nav, .shelf__nav, .section-similar { display: none !important; }
    .catalog { display: block; }
    /* на бумаге вкладок нет — печатаем все разделы подряд */
    .tabs__panel[hidden],
    .shelf__panel[hidden] { display: block !important; }
    .card { display: block; }
    .card__gallery { position: static; }
    .body { padding-top: 0; background: #fff; }
    .picture { display: none; }
    .hero, .ingredients, .stats { height: auto; padding-top: 0; }
    /* на бумаге печатается только первый слайд */
    .hero-slider__nav, .hero-slider__arrow, .hero__scrim { display: none !important; }
    .hero-slider__track { display: block; overflow: visible; }
    .hero + .hero { display: none; }
    .hero { color: var(--c-brown); background: #fff; }
    .ingredients__content { padding-top: 0; color: var(--c-brown); }
    .calc__result { color: var(--c-brown); background: #fff; border: 1px solid var(--c-line); }
}