/* ====================== SAKATA BRAND PAGE ====================== */

/* Общий контейнер-предохранитель */
.brand-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ЗАЗОР ОТ БОКОВОГО МЕНЮ - ОДИН НА ВСЕ ИНФОСТРАНИЦЫ, партнёры не исключение.

   Замер: у .info-container flex с gap 60px, и на about/delivery/oplata и
   прочих контент начинается ровно через 60px. На странице партнёра было 210
   - лишние 150 давало правило выше: max-width 1200px плюс margin:0 auto
   внутри флекса центрируют колонку в остатке ширины, вместо того чтобы этот
   остаток занять. Ограничение ширины осмысленно, когда .brand-content стоит
   сам по себе, поэтому снимаем его ТОЛЬКО внутри инфо-раскладки, а не
   правилом выше.

   min-width:0 обязателен: без него длинное слово или широкая таблица внутри
   раздувают флекс-колонку сверх остатка и ломают ряд.
   */
.info-container > .brand-content {
    max-width: none;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.brand-content * {
    box-sizing: border-box;
}

/* Hero карточка */
.brand-hero-card {
    background: #fff;
    border: 1px solid #c2c8ce;
    padding: clamp(24px, 5vw, 40px);
    border-radius: 20px;
    margin: 30px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #f1f5f9;
    color: #1e2937;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 9999px;
}

.brand-content h1 {
    font-size: clamp(22px, 5.5vw, 48px);
    line-height: 1.15;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.65;
    color: #475569;
    max-width: 780px;
}

/* Навигация брендов. Прокрутка вбок и подсказка о ней - в .zd-scroll-row
   (main.css), класс стоит в разметке; здесь только раскладка ленты. */
.brands-nav-modern {
    display: flex;
    gap: 15px;
    margin-bottom: 55px;
    padding: 5px 5px 20px;
}

.brand-nav-card {
    flex: 0 0 155px;
    background: #fff;
    border: 1.5px solid #f1f5f9;
    border-radius: 20px;
    padding: 28px 16px;
    text-align: center;
    text-decoration: none;
    transition: border-color var(--zd-dur) var(--zd-ease),
                box-shadow var(--zd-dur) var(--zd-ease),
                transform var(--zd-dur) var(--zd-ease);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-nav-card:hover, .brand-nav-card.active {
    border-color: #01A572;
}

.brand-nav-card.active {
    background: #f0fdf4;
}

.brand-logo-wrap {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo-wrap img {
    max-height: 100%;
    max-width: 85%;
    object-fit: contain;
    filter: grayscale(85%);
    opacity: 0.75;
    transition: filter var(--zd-dur) var(--zd-ease),
                opacity var(--zd-dur) var(--zd-ease);
    color: #01A572;
}

.brand-nav-card:hover img,
.brand-nav-card.active img {
    filter: grayscale(0);
    opacity: 1;
}

.brand-name {
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

/* Инфо-карточки */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.info-card {
    background: #fff;
    padding: clamp(24px, 5vw, 42px);
    border-radius: 28px;
    border: 1px solid #c2c8ce;
}

.card-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.card-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.info-card h3 {
    font-size: clamp(18px, 3vw, 22px);
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.card-tag {
    font-size: 12px;
    font-weight: 700;
    color: #01A572;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Блок о компании */
.company-detailed-block {
    background: #fff;
    border: 1px solid #c2c8ce;
    border-radius: 20px;
    padding: clamp(24px, 5vw, 55px);
    margin-bottom: 48px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.sakata-official-link {
    display: inline-block;
    margin-top: 12px;
    color: #01A572;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed #01A572;
}

/* Сетка с цифрами - Улучшенный адаптив */
.features-minimal-grid {
    display: grid;
    grid-template-columns: 1fr; /* В одну колонку на самых маленьких */
    gap: 16px;
    align-content: start;
}

.f-minimal-item {
    background: #f8fafc;
    padding: 26px 20px;
    border-radius: 22px;
    text-align: center;
    border: 1px solid #f1f5f9;
    /* Размер цифры считаем от ШИРИНЫ КАРТОЧКИ, а не окна - см. strong ниже. */
    container-type: inline-size;
    container-name: zd-partner-fact;
}

/*
 * РАЗМЕР ТЕКСТА ЗАВИСИТ ОТ КАРТОЧКИ, А НЕ ОТ ОКНА.
 *
 * Было clamp(22px, 5vw, 28px): на широком мониторе это всегда 28px, сколько
 * бы места ни осталось самой карточке. В ряду из трёх фактов карточка
 * ужимается до ~161px, и «Широкий ассортимент» занимал 197px - слово
 * вылезало за край и наезжало на соседнюю карточку (видно на
 * /partner/bayer/, найдено).
 *
 * cqi - процент от ширины контейнера, поэтому в тесной карточке надпись
 * ужимается сама, а там где место есть остаётся прежние 28px. Тем же приёмом
 * уже чинили кнопки плитки товара (css/product-page.css, .hot-add-flex).
 * break-word - страховка на случай ещё более узкой карточки: лучше перенос
 * внутри слова, чем текст поверх соседней карточки.
 *
 * ДОЛЯ 10%, А НЕ 12% - СЧИТАНО, А НЕ НА ГЛАЗ. «Ассортимент» - самое длинное
 * слово этих карточек - занимает 113px при кегле 16px, то есть 7,06 кегля.
 * Внутренние поля съедают 42px ширины карточки. Условие «слово влезает» =
 * 7,06 × кегль ≤ ширина − 42. При 12% оно держится только от 275px ширины
 * карточки, а в ряду из трёх на ноутбуке 1366px карточке достаётся 145px -
 * там слово и рвалось пополам. При 10% условие выполняется от 143px, то есть
 * с запасом на всех реальных раскладках; ниже этого не пускает сама сетка
 * (minmax 160px).
 */
.f-minimal-item strong {
    display: block;
    font-size: clamp(16px, 10cqi, 28px);
    font-weight: 700;
    color: #01A572;
    margin-bottom: 8px;
    overflow-wrap: break-word;
}

/* Старые браузеры без контейнерных запросов (до Chrome 105 / Safari 16):
   ширину карточки они не спросят, поэтому просто не даём надписи вырасти
   до размера, на котором она перестаёт помещаться. */
@supports not (container-type: inline-size) {
    .f-minimal-item strong { font-size: clamp(18px, 4vw, 22px); }
}

.f-minimal-item span {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
}

.brand-content {
    position: relative;
}

.scroll-hint {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: -50px;
    margin-bottom: 24px;
    padding: 8px 16px;
    background: #f1f5f9;
    border-radius: 99px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    animation: hintBounce 2s infinite;
}

.hint-icon {
    font-size: 18px;
    color: #01A572;
}

/* Показываем только на мобильных устройствах */
@media (max-width: 991px) {
    .scroll-hint {
        display: flex;
    }
}

/* Анимация покачивания влево-вправо */
@keyframes hintBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* ====================== МЕДИА-ЗАПРОСЫ ====================== */

@media (min-width: 768px) {
    /*
     * Порог 160px, а не 130: карточка уже 143px не вмещает «ассортимент» ни
     * при каком кегле (расчёт выше у .f-minimal-item strong). auto-fit сам
     * перекинет лишнюю карточку на следующий ряд, если места нет, - это
     * честнее, чем ряд из трёх раздавленных.
     */
    .features-minimal-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (min-width: 992px) {
    .brands-nav-modern {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
        overflow: visible;
    }
    .brand-nav-card { flex: none; }
    
    /*
     * Аккордеон внутри карточки - во всю её ширину.
     *
     * .faq пришёл с инфостраниц, где он сам себе страница и держит предел
     * 1200px с полями по бокам. Внутри карточки партнёра эти поля лишние:
     * рамку рисует сама карточка, а предел оставлял справа пустую полосу
     * почти в 190px. Свой отступ сверху тоже снимаем - у карточки он уже есть.
     */
    .company-detailed-block > .faq {
        max-width: none;
        padding-top: 0;
    }
}

/*
 * ДВЕ КОЛОНКИ - С 1280px, А НЕ С 992px (пересчитано).
 *
 * Слева от страницы стоит меню, и блоку остаётся заметно меньше ширины окна:
 * замер дал «содержимое блока ≈ ширина окна − 527px». На 1100px это 578px,
 * из которых текстовой колонке (1.6fr) доставалось 325px - строка в 40
 * знаков, рваная и нечитаемая, при том что аудитория 40-65+ и читаемость у
 * нас важнее плотности. С 1280px текстовой колонке остаётся уже 435px, и
 * деление начинает себя оправдывать. Ниже порога блок идёт одной колонкой:
 * текст во всю ширину, карточки рядом под ним - там им места хватает.
 */
@media (min-width: 1280px) {
    /*
     * ДВЕ КОЛОНКИ - ТОЛЬКО У БЛОКА, ГДЕ ЕСТЬ КАРТОЧКИ С ЦИФРАМИ.
     *
     * Класс .company-detailed-block носят ТРИ разных блока страницы: «О
     * компании» (текст + карточки), FAQ и SEO-текст. У последних двух ребёнок
     * один, и жёсткие «1.6fr 1fr» сажали его в левую колонку, а правую оставляли
     * пустой: на /partner/enzazaden/ аккордеон занимал 823px из 1500, справа
     * зияла дыра.
     *
     * Условие на само содержимое, а не новый класс на разметке: так новый блок с
     * карточками получит две колонки сам, а блок без них - одну, и никто не
     * забудет проставить модификатор. Старые браузеры без :has покажут одну
     * колонку везде - текст во всю ширину, карточки под ним; это ровно та же
     * раскладка, что у них и сейчас ниже порога.
     */
    .company-detailed-block:has(> .features-minimal-grid) {
        grid-template-columns: 1.6fr 1fr;
        gap: 50px;
    }

    /*
     * В БОКОВОЙ КОЛОНКЕ КАРТОЧКИ ИДУТ СТОЛБИКОМ, А НЕ РЯДОМ.
     *
     * Считано: правой колонке достаётся (ширина блока − 50) / 2,6 - это 515px
     * на мониторе 1920 и 305px на ноутбуке 1366. Трём карточкам с их 160px
     * порога нужно 512px, то есть ряд из трёх помещается только на самых
     * широких экранах, а на всех остальных auto-fit ломал его на «две сверху,
     * одна снизу» либо (со старым порогом 130px) давил карточки до 145px и рвал
     * слово пополам. Ряд из трёх честно живёт только во всю ширину блока - там
     * он и остаётся, ниже порога 1280px.
     *
     * Столбиком карточка получает всю ширину колонки, кегль упирается в
     * потолок 28px и надпись читается лучше, чем в раздавленном ряду, - что
     * для аудитории 40-65+ важнее плотности.
     */
    .company-detailed-block:has(> .features-minimal-grid) > .features-minimal-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .brand-content h1 { letter-spacing: -0.5px; }

    .btn-main {
        width: 100%;
        text-align: center;
        padding: 16px 20px;
    }
}

/* ====================== ЛЕНТА ПРОДУКЦИИ ПРОИЗВОДИТЕЛЯ ====================== */
/* DEMO-макет: карточки и фильтр по категориям на demo-данных прямо в разметке.
   Реальный список товаров производителя подключит бэкендер (см. API-CONTRACT.md). */

.brand-products {
    margin-bottom: 48px;
}

.brand-products__title {
    font-size: clamp(22px, 4vw, 28px);
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
}

.brand-cat-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.brand-cat-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(1, 165, 114, 0.08);
    color: #01A572;
    border: 1px solid #01A572;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.brand-cat-chip.is-active {
    background: #01A572;
    color: #fff;
}

.brand-products__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 16px;
}

.brand-product-card {
    background: #fff;
    border: 1px solid #c2c8ce;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.brand-product-card:hover {
    border-color: #01A572;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.brand-product-card__img {
    aspect-ratio: 1 / 1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.brand-product-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.brand-product-card__body {
    padding: 12px 16px 16px;
}

.brand-product-card__cat {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.brand-product-card__name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.brand-product-card__price {
    font-size: 16px;
    font-weight: 700;
    color: #01A572;
}

.brand-products__empty {
    display: none;
    padding: 30px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

/* ====================== ВИТРИНА ПРОИЗВОДИТЕЛЯ (магазин-страница) ====================== */
/* DEMO-макет: производитель как отдельный "продавец" со своей лентой товаров.
   Отдельно от info-страницы о компании (partner/*.php). */

.mfr-shop {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    box-sizing: border-box;
}

.mfr-shop__header {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid #c2c8ce;
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mfr-shop__logo {
    width: 90px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mfr-shop__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* СТРАНА. В слоте стоит флаг (images/flags/{слаг}.svg), а пока файла нет -
   плашка с названием. Рамка и скругление - чтобы флаг с белой полосой
   (Польша, Нидерланды) не сливался с белой шапкой. */
/* Скругление 6 -> 8px: на флаге 90x60 шесть пикселей почти не читались. Восемь -
   ступень шкалы проекта (та же, что у плашки страны рядом), и угол виден, но
   флаг не превращается в бейдж. Рамка нужна светлым флагам: у Японии и Польши
   верх белый и без неё сливается с белой шапкой. */
.mfr-shop__logo--country img {
    width: 100%;
    height: 100%;
    /*
     * cover, а не contain (contain приходит от общего правила .mfr-shop__logo img
     * выше - оно про логотипы, им поля нужны).
     *
     * Файлы флагов набора flag-icons имеют пропорцию 4:3, а слот в шапке - 3:2.
     * При contain флаг рисовался 80x60 внутри рамки 90x60, то есть внутри
     * скруглённой рамки оставались белые поля по бокам, а само скругление
     * оказывалось не на флаге. Владелец: «флагу по размеру сделай всё по блоку
     * и чтобы закругления были». cover заполняет блок целиком; срезается по
     * 12% ширины с каждой стороны - столько же, сколько у флага в чипе на
     * плитке каталога, вид по сайту одинаковый.
     */
    object-fit: cover;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.mfr-country-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.15;
}

.mfr-shop__info {
    flex: 1;
    min-width: 200px;
}

.mfr-shop__name {
    font-size: clamp(22px, 4vw, 26px);
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.mfr-shop__meta {
    font-size: 14px;
    color: #64748b;
}

.mfr-shop__meta a {
    color: #01A572;
    font-weight: 600;
    text-decoration: none;
}

/* Короткий текст о бренде между шапкой и товарами (manufacturers.about).
   16px, а не 14: аудитория магазина 40-65+, и это связный текст для чтения, а
   не служебная строка счётчика. Ширина ограничена - длинная строка через весь
   монитор читается тяжело. */
.mfr-shop__about {
    font-size: 16px;
    line-height: 1.6;
    color: #334155;
    max-width: 70ch;
    margin: 0 0 20px;
}

/* Блок «Другие производители» в конце страницы - см. комментарий в
   proizvoditel/show.php о том, почему переключатель уехал из шапки.
   Отбивка как у .seo-block: тонкая линия сверху, текст послесловием. */
.mfr-others {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid #e0e0e0;
}

.mfr-others__title {
    font-size: 14px;
    font-weight: 600;
    color: #4A4A4A;
    margin: 0 0 12px;
}

.mfr-switcher {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mfr-switcher a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
}

.mfr-switcher a.active {
    border-color: #01A572;
    color: #01A572;
    background: #f0fdf4;
}

/* Боковое поле страницы на узких экранах даёт `body main` (main.css, 12px), и
   свои 16px здесь складывались с ним: плитка товара выходила 319px против
   каталожных 351px - замер на 375px. Сетка товаров у производителя обязана
   совпадать с каталогом, партиал плитки у них общий (lib/product-card.php).
   Идёт ниже базового .mfr-shop: специфичность равная, выше по файлу проиграло
   бы каскаду. */
@media (max-width: 1024px) {
    .mfr-shop { padding-left: 0; padding-right: 0; }
}

/* Телефон: 12px в чипе высотой 36px - мелко и мимо пальца. Общее правило
   витрины для аудитории 40-65+: текст не мельче 14px, зона нажатия не ниже
   44px. Заголовок - по шкале .seo-block (22px). */
@media (max-width: 768px) {
    .mfr-others { margin-top: 40px; }
    .mfr-others__title { font-size: 22px; }
    .mfr-switcher a { font-size: 14px; min-height: 44px; }
}
/* ============================================================
   ХАБ ПРОИЗВОДИТЕЛЕЙ (/proizvoditel/, proizvoditel/index.php)
   ------------------------------------------------------------
   Сетка карточек: логотип, название, страна и число товаров. Ширина колонки
   от 200px - на телефоне это одна колонка, на мониторе шесть-семь, без
   отдельных медиазапросов на каждый порог.
   ============================================================ */
.mfr-hub {
  max-width: 1400px;
  margin: 0 auto 60px;
  padding: 0 16px;
}

.mfr-hub__title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px;
}

.mfr-hub__subtitle {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  color: #0f172a;
  margin: 48px 0 10px;
}

.mfr-hub__lead {
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
  max-width: 70ch;
  margin: 0 0 28px;
}

.mfr-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* На телефоне auto-fill от 200px даёт ОДНУ колонку (343px рабочей ширины), и
   149 карточек превращались в 21 000px прокрутки - замер. Две колонки режут
   её вдвое и остаются привычной сеткой каталога; логотип в 150px слоте
   читается, потому что ограничен по высоте, а не по ширине.

   Кегль названия и подписи НЕ уменьшаем: аудитория магазина 40-65+, и 15px
   здесь важнее лишнего ряда на экране. */
@media (max-width: 600px) {
  .mfr-hub__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mfr-hub__card { padding: 14px 10px; }
}

.mfr-hub__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Грид-элемент по умолчанию не сжимается уже min-content своего
     содержимого: на 375px карточки правой колонки выходили за сетку на 36px
     (замер: трек 154px, карточка 192px). Та же болезнь и то же лекарство, что
     у .zd-wizard > * в админке. */
  min-width: 0;
  padding: 18px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  text-decoration: none;
  text-align: center;
  /* Поимённо вместо `all` (DESIGN.md, «Движение»). */
  transition: border-color var(--zd-dur) var(--zd-ease),
              box-shadow var(--zd-dur) var(--zd-ease);
}

.mfr-hub__card:hover,
.mfr-hub__card:focus-visible {
  border-color: #01A572;
  box-shadow: 0 6px 18px rgba(1, 165, 114, .12);
}

/* Высота слота фиксирована: логотипы приходят разной формы - широкие
   горизонтальные и почти квадратные, - и без неё соседние карточки в ряду
   стояли бы ступенькой.

   72px, а не 48: у логотипа со знаком или обрамлением (Dupont, Fertika,
   EAST-WEST SEED) на буквы приходится малая доля высоты, и в 48px они
   нечитаемы. Выше 72 поднимать нечего - логотипы упираются в ширину слота
   (185px), медиана отрисованной высоты перестаёт расти на 74px. */
.mfr-hub__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  width: 100%;
}

.mfr-hub__logo img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Идёт ПОСЛЕ базового правила, не в медиаблоке сетки выше: специфичность та же,
   и раньше по файлу оно бы проиграло каскаду.
   В двух колонках слот 125px шириной, логотип упирается в ширину уже на 48px -
   выше только пустота (замер: медиана 47px и при 56, и при 72). */
@media (max-width: 600px) {
  .mfr-hub__logo { height: 48px; }
  .mfr-hub__logo img { max-height: 48px; }
}

.mfr-hub__flag {
  width: 42px;
  height: 28px;
  object-fit: cover;
  border-radius: 3px;
}

/* Фолбэк для бренда без файла логотипа. */
.mfr-hub__logo-text {
  font-size: 15px;
  font-weight: 700;
  color: #64748b;
  line-height: 1.2;
}

.mfr-hub__name {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}

.mfr-hub__meta {
  font-size: 14px;
  color: #64748b;
}

/* Воронка на витрине бренда: производитель - снимаемый чип (.filter-chip), раздел и
   категория - ряды выбора (.quick-filter-chip), оба из product-page.css. Ряд
   листается вбок, подпись уезжает вместе с чипами. */
.mfr-funnel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
}
.mfr-funnel__row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.mfr-funnel__row::-webkit-scrollbar { display: none; }
.mfr-funnel__label {
    flex-shrink: 0;
    min-width: 116px;
    font-size: 14px;
    color: #64748b;
}
.mfr-funnel .filter-chip { min-height: 44px; }
.mfr-funnel .filter-chip:hover { background: #018f63; }
.mfr-cats__chip { text-decoration: none; }
.mfr-cats__chip:hover { background: rgba(1, 165, 114, 0.18); }
.mfr-cats__chip.is-active { background: #01A572; color: #fff; }
.mfr-cats__n { margin-left: 6px; opacity: .75; font-weight: 400; }
/* Стрелки у рядов «Раздел» и «Категория» (js/row-arrows.js): ряд листается вбок, колесо мыши вбок не листает. */
.zd-row-arrows { position: relative; }
.zd-row-nav {
    position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin: 0; padding: 0 0 4px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #C2C8CE; border-radius: 50%; background: #fff; color: #474647;
    font-size: 30px; font-weight: 500; line-height: 1; cursor: pointer; transform: translateY(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.zd-row-nav--prev { left: 0; }
.zd-row-nav--next { right: 0; }
.zd-row-nav[hidden] { display: none; }
.zd-row-nav:hover { border-color: #01A572; color: #016B4A; }
.zd-row-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(1, 165, 114, .35); }