/* ==========================================================================
   Only Italy — мобильная перевёрстка ГЛАВНОЙ страницы под макет LAYOUT/Home.png
   Все правила действуют только на мобильных (max-width: 767px).
   Десктоп не затрагивается.

   ВАЖНО про область действия. Секции главной скоуплены на .common-home, но
   ДВА блока намеренно вынесены из этого скоупа и работают на всех страницах:
     - шапочные ряды .hm-gender-tabs и .hm-quick-pills (секция 1);
     - футер (секция 12).
   Так поставлена задача: мобильные шапка и футер должны быть одинаковыми на
   всём сайте, а не только на главной. Разметку этих рядов для остальных
   страниц выводит else-ветка header.tpl, футер общий изначально.
   Всё остальное (герой, карусели, образы, статьи, капсула, «О нас»,
   бренды) остаётся только на главной.

   Реальные данные берутся из существующих блоков темы:
     - шапка              → .header-new (уже адаптивна на ≤991px)
     - гео-баннеры (hero) → .category-home (topcat-баннеры)
     - карусели товаров   → модули featured/latest (.oicatalog-list .cat-item)
     - футер              → .f-col*
   Новые секции (вкладки Ж/М, пилюли, «О компании») добавлены разметкой в
   header.tpl / home.tpl и скрыты на десктопе.

   Декоративные секции без модуля (бренды, образы, статьи, баннер «Сумки»,
   сетка категорий, AX-капсула) стилизованы здесь же — их разметку нужно
   добавить HTML-модулями в раскладку content_bottom (см. LAYOUT/README-modules).
   ========================================================================== */

/* ---- Переменные макета ------------------------------------------------- */
:root {
    --hm-ink:      #1c1c1c;
    --hm-ink-soft: #252525;
    --hm-muted:    #666666;
    --hm-muted-2:  #999999;
    --hm-line:     #e9eaee;
    --hm-bg-soft:  #eef0f3;
    --hm-dark:     #4d4d4d;
    --hm-red:      #e2231a;
    /* Единое боковое поле секций: заголовки блоков, пилюли, лента брендов,
       образы, статьи, «О нас», капсула и футер. По макету 22px при кадре 440.
       Карусели товаров шире — у них своя полоса под стрелки (7% / 4%). */
    --hm-pad:      22px;
}

/* Новые мобильные секции по умолчанию скрыты (показываются в @media ниже).
   Прячем блок ЦЕЛИКОМ, вместе с обёрткой и заголовком: если скрыть только
   содержимое, на десктопе остаётся пустая секция с заголовком («Наши бренды»)
   или осиротевшая кнопка «Просмотреть все» без контента над ней.
   Состав секций десктопа сверен с https://only-italy.ru/ — там есть только
   слайдер баннеров, три карусели товаров и «О нас»; блока бренда с фильтром
   моделей, ленты логотипов, «Образов» и «Последних статей» на главной нет. */
.hm-gender-tabs,
.hm-quick-pills,
.hm-cat-banner,
.hm-cat-quad,
.hm-about,
.hm-looks,
.hm-articles,
.hm-capsule,
.hm-brands,
.hm-brands-block,
.hm-brand-block,
.hm-section-all,
.hm-model-filter,
.hm-block-subtitle,
/* Шапки модулей «Образы», «Последние статьи» и категорий выводятся общей
   разметкой .big-wrapper > .header-title (hm_looks / hm_articles /
   hm_categories / hm_section .tpl) — отличить их от шапок товарных каруселей
   селектором нельзя, поэтому в шаблонах к обёртке добавлен класс-маркер
   .hm-mobile-only. Без него на десктопе оставались висеть заголовки
   «Образы» и «Последние статьи» над скрытым содержимым. */
.hm-mobile-only { display: none; }

/* Кнопка «Просмотреть все» в шапках каруселей — только на мобильной главной */
.header-title--all { display: none; }

/* Копирайт в футере — только в мобильном футере (на всех страницах),
   на десктопе его в макете нет. Показывается в секции 12. */
.f-copyright { display: none; }

/* Стрелки каруселей прячет work.js (hmToggleSliderArrows), когда слайдов не
   больше, чем помещается в видимую часть: листать нечего. Правило вне медиа-
   запроса — на десктопе видимых карточек больше, и стрелки лишними становятся
   ещё чаще, чем на мобильной главной. */
.arrows-owl-brand.is-hidden { display: none !important; }

/* ======================================================================
   МОБИЛЬНАЯ ВЕРСИЯ ГЛАВНОЙ
   ====================================================================== */
@media (max-width: 767px) {
    .title-brand.title-brand--image img {
        max-width: 50%;
        max-height: 100px;
    }
body{
    padding-top: 44px;
}
    /* --- Заголовок секции: общий вид «ТОП 10 СЕЗОНА  →» ----------------- */
    .common-home .header-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--hm-pad);
        margin-bottom: 14px;
    }
    .common-home .big-wrapper { width: 100%; }
    /* вертикальный ритм задаёт общий блок ниже, собственный отступ карусели не нужен */
    .common-home .owl-carousel-wrapper.mt50 { margin-top: 0; }

    /* --- Вертикальный ритм: между секциями 34px ------------------------- */
    /* Отступ вешаем на верхнеуровневые блоки главной. Заголовок модуля и его
       содержимое — это два соседних узла одной секции (.hm-mobile-only +
       контент), между ними отступа быть не должно: его задаёт margin-bottom
       у .header-title. Вкладки Ж/М, пилюли и слайдер баннера идут вплотную
       к шапке, поэтому в список не входят. */
    .common-home > .big-wrapper,
    .common-home > .hm-looks,
    .common-home > .hm-articles,
    .common-home > .hm-section-all,
    .common-home > .hm-about { margin-top: 34px; }
    .common-home > .hm-cat-quad{margin-top: 10px}
    .common-home > .hm-mobile-only + * { margin-top: 0; }

    /* Заголовок секции — 24px, начертание 500, чёрный, без разрядки */
    .common-home .title-brand,
    .common-home .title-brand.gothic-font {
        font-family: "Proxima Nova", Arial, sans-serif;
        font-weight: 500;
        font-size: 24px;
        line-height: 1.2;
        letter-spacing: 0;
        color: #000;
    }

    /* Парные стрелки каруселей (featured/latest).
       В макете o2.png стрелки уходят из шапки блока на боковые края и встают
       по вертикали в центр карточек, а справа в шапке — «Просмотреть все». */
    .common-home .oicatalog-list { position: relative; }
    .common-home .arrows-owl-brand {
        display: block;
        gap: 0;
        flex: 0 0 auto;
    }
    .common-home .arrows-owl-brand .prev-owl,
    .common-home .arrows-owl-brand .next-owl {
        position: absolute;
        /* +20px — поправка на высоту шапки блока, чтобы центр считался
           по карточкам, а не по всему блоку вместе с заголовком */
        top: calc(50% + 20px);
        transform: translateY(-50%);
        z-index: 3;
        margin: 0;
        line-height: 0;
        display: inline-flex;
    }
    /* Отступ от края обязателен. При left/right: 0 стрелки вставали вплотную к
       границе вьюпорта: левая упиралась в край экрана и читалась как срезанная,
       а правая попадала ровно под вертикальную полосу прокрутки и пропадала
       совсем (замерено на 576px: prev 0..26, next 550..576, зазор 0px с обеих
       сторон). Полоса под стрелки — 7% ширины блока, сама стрелка 26px: где
       место есть, центрируем её в этой полосе (3.5% — середина полосы, 13px —
       половина стрелки), но не ближе 4px к краю и не глубже 12px, иначе на
       узких экранах стрелка наезжает на карточки.
       Первая строка — запасная для браузеров без clamp(). */
    .common-home .arrows-owl-brand .prev-owl { left: 6px; left: clamp(4px, calc(3.5% - 13px), 12px); }
    .common-home .arrows-owl-brand .next-owl { right: 6px; right: clamp(4px, calc(3.5% - 13px), 12px); }
    .common-home .arrows-owl-brand svg { width: 26px; height: 14px; }

    /* В блоках с сеткой стрелки по макету — тонкие шевроны 26×26, а не длинная
       стрелка с хвостом из шаблона. Иконка выгружена из Figma (узел 24:14);
       правая — та же картинка зеркально, отдельного ассета в макете нет. */
    .common-home .oicatalog-list:not(.hm-brand-block) .arrows-owl-brand svg { display: none; }
    .common-home .oicatalog-list:not(.hm-brand-block) .arrows-owl-brand .prev-owl,
    .common-home .oicatalog-list:not(.hm-brand-block) .arrows-owl-brand .next-owl {
        width: 26px;
        height: 26px;
        background: url('../image/hm/arrow-prev.png') center/contain no-repeat;
    }
    .common-home .oicatalog-list:not(.hm-brand-block) .arrows-owl-brand .next-owl {
        transform: translateY(-50%) scaleX(-1);
    }

    /* Блок бренда (hm_brand): товары одним рядом, стрелки остаются в шапке,
       кнопки «Просмотреть все» нет — по макету на её месте как раз стрелки. */
    .common-home .hm-brand-block .arrows-owl-brand {
        display: inline-flex;
        align-items: center;
        gap: 20px;
    }
    .common-home .hm-brand-block .arrows-owl-brand .prev-owl,
    .common-home .hm-brand-block .arrows-owl-brand .next-owl {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
    }
    .common-home .hm-brand-block .header-title--all { display: none; }
    /* Шапка блока — одна строка: название слева, стрелки справа. Подзаголовок и
       кнопки моделей идут отдельными строками ниже (они соседи .header-title
       в разметке featured.tpl), поэтому здесь только убираем перенос и поджимаем
       отбивку до подзаголовка — в макете между ними 8px. */
    .common-home .hm-brand-block .header-title {
        flex-wrap: nowrap;
        margin-bottom: 14px;
    }

    /* Кнопка «Просмотреть все» в шапке блока (разметка в featured.tpl / latest.tpl) */
    .common-home .oicatalog-list .header-title--all {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: uppercase;
        white-space: nowrap;
        color: #000;
    }
    .common-home .oicatalog-list .header-title--all svg { flex: 0 0 auto; }

    /* Иконка у CTA «Просмотреть все» / «О нас». В макете это тонкий шеврон ›,
       а не стрелка с хвостом, которая лежит в шаблонах (featured/latest/
       hm_section/hm_articles/html.tpl). Шаблонный svg общий с десктопом —
       поэтому здесь его гасим и рисуем шеврон, не трогая разметку. */
    .common-home .header-title--all svg,
    .common-home .hm-btn-outline svg { display: none; }
    .common-home .header-title--all::after,
    .common-home .hm-btn-outline::after {
        content: '';
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        transform: rotate(45deg);
    }

    /* ==================================================================
       1. ВКЛАДКИ ЖЕНЩИНАМ / МУЖЧИНАМ  +  ПИЛЮЛИ НОВОЕ/БРЕНДЫ/СКИДКИ
       (разметка в header.tpl — в ОБЕИХ ветках, и на главной, и на
        остальных страницах: ряды одинаковы на всём сайте, поэтому
        селекторы здесь БЕЗ .common-home)
       ================================================================== */
    /* Обе полосы по макету: вкладки — ряд 36px (шапка кончается на y=66,
       разделитель на y=102), пилюли — ряд 40px (y=102…142). Текст в обеих
       16px Proxima Nova Regular, чёрный. */
    .hm-gender-tabs {
        display: grid;
        /* число колонок = числу вкладок переключателя (startup/hm_gender) */
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        text-align: center;
        border-bottom: 1px solid var(--hm-line);
    }
    .header.header-new{
        border-bottom: 1px solid var(--hm-line);
    }
    .hm-gender-tabs a {
        position: relative;
        padding: 8px 0;
        font-family: "Proxima Nova", Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        text-transform: uppercase;
        color: #000;
    }
    /* Разделитель между вкладками короткий (26px из 36) и висит по центру,
       а не во всю высоту ряда — узел 1:7, y=68…94 */
    .hm-gender-tabs a + a { border-left: 0; }
    .hm-gender-tabs a + a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 26px;
        border-left: 1px solid var(--hm-line);
    }
    /* Активная вкладка. В макете состояние не нарисовано — индикатор минимальный. */
    .hm-gender-tabs a.is-active { font-weight: 600; }

    .hm-quick-pills {
        display: flex;
        justify-content: center;
        /* расстояние между пилюлями по макету ~43px при кадре 440 — это 9,8% */
        gap: 9.8%;
        padding: 10px var(--hm-pad);
        border-bottom: 1px solid var(--hm-line);
    }
    .hm-quick-pills a {
        padding: 0;
        font-family: "Proxima Nova", Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        text-transform: uppercase;
        color: #000;
    }

    /* ==================================================================
       2. СЛАЙДЕР-БАННЕР (#slider_home) — оставляем реальные промо-баннеры
       ================================================================== */
    .common-home #slider_home .slick-slide img { margin-top: 0; }
    .common-home #slider_home { margin-bottom: 6px; }

    /* Пагинация слайдера: вместо круглых точек — полоски 33×3, как в макете.
       position: static — чтобы полоски встали в поток под баннером,
       а не висели абсолютом на -25px, как в slick-theme.css */
    .common-home #slider_home .slick-dots {
        position: static;
        display: flex;
        justify-content: center;
        gap: 12px;
        width: 100%;
        margin: 18px 0 0;
        padding: 0;
        line-height: 0;
    }
    .common-home #slider_home .slick-dots li {
        width: 33px;
        height: 3px;
        margin: 0;
        padding: 0;
        line-height: 0;
    }
    .common-home #slider_home .slick-dots li button {
        display: block;
        width: 33px;
        height: 3px;
        margin: 0;
        padding: 0;
        font-size: 0;
        line-height: 0;
        border: 0;
        border-radius: 0;
        outline: none;
        background: var(--hm-line);
        transition: background .25s ease;
    }
    /* гасим символ «•» из slick-theme.css */
    .common-home #slider_home .slick-dots li button:before { content: none; display: none; }
    .common-home #slider_home .slick-dots li.slick-active button { background: var(--hm-muted-2); }

    /* ==================================================================
       3. ГЕРОЙ: два гео-баннера (topcats) → как hero-duo в макете
       ================================================================== */
    .common-home .category-home {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 4px var(--hm-pad) 6px;
        align-items: stretch;
    }
    .common-home .category-home .header-left,
    .common-home .category-home .header-right {
        width: 100%;
        height: 150px;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 4px;
        overflow: hidden;
        left: 0;
    }
    /* Логотип-плашка между баннерами в макете не используется */
    .common-home .category-home .header-logo { display: none; }
    /* Подпись категории — компактная, внизу баннера */
    .common-home .category-home .header-cat {
        bottom: 12px !important;
        left: 12px !important;
        transform: none !important;
    }
    .common-home .category-home .header-cat--title {
        font-size: 15px;
        line-height: 1.15;
        font-family: "Proxima Nova", Arial, sans-serif;
        font-weight: 700;
    }
    .common-home .category-home .header-cat--goto { display: none; }

    /* ==================================================================
       4. КАРТОЧКИ ТОВАРА в модульных каруселях (Топ-10/Premiata/Новинки/…)
       Модули уже дают 2 колонки на ≤767px. Здесь — доводка под макет.
       ================================================================== */

    /* Сетка 2×2 внутри одного слайда (slick rows: 2 / slidesPerRow: 2).
       Слик оборачивает карточки в свои div'ы, поэтому селекторы без `>`.
       Зазор между рядами по макету 9px (карточки на y=350 и y=678 при высоте 319),
       между колонками — 20px (x=31 и x=229 при ширине 178). */
    .common-home .oicatalog-list .slick-slide > div + div { margin-top: 10px; }

    /* Структура слика при rows (см. slick.js:555, buildRows): карточки НЕ
       оборачиваются в служебные div'ы — .cat-item кладётся прямо в ряд, и
       ширину 50% слик вешает на неё же:
           .slick-slide > div(ряд) > .cat-item
       Поэтому все правила ниже бьют по .cat-item как по прямому потомку ряда. */
    .common-home .oicatalog-list .slick-list { overflow: hidden !important; }
    .common-home .oicatalog-list .slick-slide > div {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
    }
    /* Зазор только между колонками, по внешним краям слайдера отступа нет.
       В процентах, чтобы пропорции держались на любой ширине экрана:
       в макете зазор 20px при кадре 440 — это 4,5% ширины. */
    .common-home .oicatalog-list .slick-slide > div > .cat-item:first-child { padding-right: 2.7%; }
    .common-home .oicatalog-list .slick-slide > div > .cat-item:last-child { padding-left: 2.7%; }
    /* Жёсткий ограничитель: третья и последующие карточки в ряду не показываются */
    .common-home .oicatalog-list .slick-slide > div > .cat-item:nth-child(n+3) { display: none !important; }

    /* stylesheet.css задаёт .wrap-product-items ширину calc(100% + 16px) — компенсацию
       под отрицательные поля -8px. Боковые поля мы переопределяем на положительные,
       а ширина остаётся раздутой: слайдер вылезал на 30px за экран, из-за чего вся
       страница получала горизонтальную прокрутку, а вторая карточка обрезалась.
       Поэтому ширину возвращаем к 100%, а боковое поле задаём padding'ом — тогда
       .slick-list считает ширину слайдов уже от суженной области, и ничего не
       вылезает. Отступ живёт на самом слайдере, а не на блоке: иначе он сложился
       бы с полем заголовка и шапка уехала бы вглубь. */
    .common-home .oicatalog-list .wrap-product-items {
        box-sizing: border-box;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        /* stylesheet.css ставит здесь margin: -8px — нижние -8px подтягивали
           следующую секцию и съедали часть межблочного отступа */
        margin-bottom: 0;
    }

    /* Слайдер этих блоков уже остальных секций: по краям остаётся полоса
       под стрелки. В макете карточки занимают x=31…407 при ширине кадра 440,
       а стрелки стоят в 0…26 и 427…454 — то есть целиком за пределами слайдера. */
    .common-home .oicatalog-list:not(.hm-brand-block) .wrap-product-items {
        padding-left: 7%;
        padding-right: 7%;
        margin-top: 14px;
    }
    /* Блок бренда: стрелки в шапке, поэтому полоса под них не нужна и карточки
       идут шире — в макете они начинаются в 16px от края при кадре 440 (~4%). */
    .common-home .hm-brand-block .wrap-product-items {
        padding-left: 4%;
        padding-right: 4%;
    }

    .common-home .oicatalog-list .cat-item .cat-item--image {
        height: auto;
        aspect-ratio: 3 / 4;
        margin-bottom: 12px;
        background-size: contain !important; /* сохраняем «товар на белом», как на сайте */
    }
    .common-home .oicatalog-list .cat-item--name {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        line-height: 1.25;
        color: var(--hm-ink-soft);
        margin-bottom: 2px;
    }
    .common-home .oicatalog-list .cat-item--cat {
        font-size: 12px;
        font-weight: 300;
        color: var(--hm-muted);
    }
    .common-home .oicatalog-list .cat-item .cat-actions {
        opacity: 1 !important;
        border-top: 0;
        margin-top: 10px;
        padding-top: 0;
        min-height: 0;
    }
    .common-home .oicatalog-list .cat-item--price {
        font-size: 15px;
        color: var(--hm-ink-soft);
    }
    /* кнопки избранное/корзина — как в макете */
    .common-home .oicatalog-list .cat-actions--box { gap: 12px; }
    .common-home .oicatalog-list .cat-item--wish {
        opacity: .85;
        margin-right: 0;
    }
    .common-home .oicatalog-list .cat-item--cart {
        width: 34px;
        height: 34px;
        background: var(--hm-dark) url(../image/prodcart.png) no-repeat center 8px;
    }
    .common-home .oicatalog-list .cat-item--cart:after { display: none; }

    /* ==================================================================
       5. БАННЕР КАТЕГОРИИ «Сумки» (HTML-модуль .hm-cat-banner)
       ================================================================== */
    /* Баннер категории. В макете 378×242 при кадре 440: поля по 7,3%,
       пропорция 378:242, подпись 19px Bold белым, в 22px от левого края
       и 12px от нижнего. */
    .common-home .hm-cat-banner {
        position: relative;
        display: flex;
        align-items: flex-end;
        margin: 34px 7.3% 0;
        height: auto;
        aspect-ratio: 378 / 242;
        overflow: hidden;
        background: #6f7d52 center/cover no-repeat;
    }
    .common-home .hm-cat-banner__label {
        position: relative;
        color: #fff;
        font-family: "Proxima Nova", Arial, sans-serif;
        font-weight: 500;
        font-size: 19px;
        letter-spacing: 0;
        text-transform: uppercase;
        padding: 0 0 12px 22px;
        text-shadow: 0 1px 8px rgba(0,0,0,.35);
    }

    /* ==================================================================
       6. СЕТКА КАТЕГОРИЙ 2×2 (HTML-модуль .hm-cat-quad)
       ================================================================== */
    /* Сетка категорий. В макете горизонтальных линий между рядами нет — только
       вертикальный разделитель по центру, ровно в высоту ячейки (67px), а ряды
       разведены пустым местом (~41px). Текст 19px Regular, чёрный. */
    .common-home .hm-cat-quad {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 10px;
        padding-top: 0;
    }
    .common-home .hm-cat-quad a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 67px;
        text-align: center;
        font-family: "Proxima Nova", Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: uppercase;
        color: #000;
    }
    .common-home .hm-cat-quad a:nth-child(odd) { border-right: 1px solid var(--hm-line); }

    /* ==================================================================
       7. ФИЛЬТР МОДЕЛЕЙ (Premiata: Lucky/Mick/Eric) — HTML-модуль .hm-model-filter
       ================================================================== */
    .common-home .hm-model-filter {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 2px var(--hm-pad) 14px;
        scrollbar-width: none;
    }
    .common-home .hm-model-filter::-webkit-scrollbar { display: none; }
    .common-home .hm-model-filter button {
        flex: 0 0 auto;
        /* рамка прозрачная, а не border: 0 — иначе активная кнопка с рамкой
           становилась бы на 2px больше соседних и ряд «прыгал» */
        border: 1px solid transparent; cursor: pointer;
        background: #ededed;
        color: #555;
        font-size: 11px; font-weight: 600;
        letter-spacing: .08em; text-transform: uppercase;
        padding: 8px 18px;
    }
    /* Активная модель: белый фон и красная рамка */
    .common-home .hm-model-filter button.is-active {
        background: #fff;
        border-color: var(--hm-red);
        color: var(--hm-red);
    }

    /* Прелоадер на время подгрузки модели: блок притухает и блокируется,
       поверх карточек крутится спиннер. */
    .common-home .slick-slider-wrapper-new.hm-loading { position: relative; }
    .common-home .slick-slider-wrapper-new.hm-loading .wrap-product-items {
        opacity: .35;
        pointer-events: none;
        transition: opacity .15s ease;
    }
    .common-home .slick-slider-wrapper-new.hm-loading::after {
        content: '';
        position: absolute;
        top: 55%;
        left: 50%;
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        border: 2px solid var(--hm-line);
        border-top-color: #5e5e5e;
        border-radius: 50%;
        animation: hm-spin .7s linear infinite;
        z-index: 5;
    }
    @keyframes hm-spin { to { transform: rotate(360deg); } }
    /* Подзаголовок блока бренда — «ВАШИ ЛЮБИМЫЕ МОДЕЛИ» отдельной строкой под
       названием. Отбивку сверху задаёт margin-bottom шапки, здесь она не нужна. */
    .common-home .hm-block-subtitle {
        display: block;
        padding: 0 var(--hm-pad) 8px;
        margin-top: 0;
        font-size: 11px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--hm-muted);
    }

    /* ==================================================================
       7a. НАШИ БРЕНДЫ (модуль hm_brands) — горизонтальная лента логотипов
       ================================================================== */
    /* Карусель: ровно 2 видимых слайда, третий обрезается списком.
       Стрелки стоят в шапке блока, как в макете (узлы 5:3 и 5:4). */
    .common-home .hm-brands {
        display: block;
        padding: 0 var(--hm-pad);
    }
    .common-home .hm-brands .slick-list { overflow: hidden !important; }
    .common-home .hm-brands .hm-brand-slide { padding: 0 4px; }
    .common-home .hm-brands .hm-brand {
        display: block;
        line-height: 0;
    }
    .common-home .hm-brands .hm-brand img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 3px;
    }
    /* Стрелки блока — в шапке справа, а не по краям, как у блоков с сеткой */
    .common-home .hm-brands-block .arrows-owl-brand {
        display: inline-flex;
        align-items: center;
        gap: 20px;
        flex: 0 0 auto;
    }
    .common-home .hm-brands-block .arrows-owl-brand .prev-owl,
    .common-home .hm-brands-block .arrows-owl-brand .next-owl {
        position: static;
        transform: none;
        margin: 0;
        line-height: 0;
        display: inline-flex;
    }
    .common-home .hm-brands-block .arrows-owl-brand svg { width: 26px; height: 14px; }

    /* ==================================================================
       8. ОБРАЗЫ / ЛУКИ (HTML-модуль .hm-looks)
       ================================================================== */
    .common-home .hm-looks {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 var(--hm-pad);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .common-home .hm-looks::-webkit-scrollbar { display: none; }
    .common-home .hm-looks .hm-look {
        flex: 0 0 47%;
        scroll-snap-align: start;
        aspect-ratio: 3 / 4;
        border-radius: 3px;
        overflow: hidden;
        background: #ddd center/cover no-repeat;
    }

    /* ==================================================================
       9. ПОСЛЕДНИЕ СТАТЬИ (HTML-модуль .hm-articles)
       ================================================================== */
    .common-home .hm-articles { padding: 0 var(--hm-pad); }
    .common-home .hm-article { margin-bottom: 22px; }
    .common-home .hm-article__media {
        display: block;
        aspect-ratio: 16 / 10;
        background: #e7e7e7 center/cover no-repeat;
        border-radius: 4px;
        margin-bottom: 14px;
    }
    .common-home .hm-article__title {
        display: block;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--hm-ink);
    }
    .common-home .hm-article__title b { color: var(--hm-red); }

    /* ==================================================================
       10. AX-КАПСУЛА (HTML-модуль .hm-capsule)
       ================================================================== */
    /* Капсула над блоком «О нас». В макете 399×299 — пропорция 4:3,
       и снизу вплотную к серой панели, поэтому нижнего отступа нет. */
    .common-home .hm-capsule {
        display: block;
        /* боковые поля — отдельными свойствами, чтобы перебить инлайновый
           margin, который приходит из HTML-модуля */
        margin: 34px 0 0;
        margin-left: var(--hm-pad) !important;
        margin-right: var(--hm-pad) !important;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        background: #cfcfcf center/cover no-repeat;
    }

    /* ==================================================================
       11. О КОМПАНИИ (разметка добавлена в home.tpl)
       ================================================================== */
    /* Панель на сером фоне #f8f8f8, текст слева, вплотную к капсуле сверху
       (в макете капсула заканчивается на y=4927, панель с него же начинается) */
    .common-home .hm-about {
        display: block;
        margin: 0 var(--hm-pad);
        padding: 20px 14px 24px;
        background: #f8f8f8;
        text-align: left;
        margin-bottom: 30px;
    }
    .common-home .hm-about p {
        font-size: 15px;
        line-height: 1.45;
        color: #000;
        margin-bottom: 16px;
    }
    /* В макете лид тем же начертанием и кеглем, что остальной текст, — не выделяем */
    .common-home .hm-about p.hm-lead,
    .common-home .hm-about p:first-of-type { font-weight: 400; font-size: 15px; }
    /* Пустые абзацы-разделители из редактора не должны раздвигать блок */
    .common-home .hm-about p:empty { display: none; }
    .common-home .hm-about a { color: #000; text-decoration: underline; }
    .common-home .hm-about .hm-stats {
        font-size: 15px;
        letter-spacing: 0;
        color: #000;
        margin-bottom: 20px;
    }
    .common-home .hm-about .hm-stats b { color: #000; font-weight: 400; }
    /* Нижний CTA («О НАС», «ПРОСМОТРЕТЬ ВСЕ»). В макете это не кнопка с рамкой,
       а текст со стрелкой по центру — рамку и padding убрали, имя класса
       оставили прежним, чтобы не трогать шаблоны модулей. */
    .common-home .hm-btn-outline {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: 0;
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #000;
        text-decoration: none;
    }
    .common-home .hm-btn-outline svg { width: 11px; height: 11px; }
    /* подчёркивание ссылок внутри «О нас» не должно доставать до CTA */
    .common-home .hm-about a.hm-btn-outline { text-decoration: none; }

    /* Обёртка кнопки под блоком — по макету «Просмотреть все» стоит внизу секции */
    .common-home .hm-section-all {
        text-align: center;
        padding: 0 var(--hm-pad);
    }

    /* ==================================================================
       12. ФУТЕР — компоновка под макет (реальные данные из footer.tpl)
       Без .common-home: мобильный футер одинаков на всех страницах.
       ================================================================== */
    footer { background: var(--hm-bg-soft); padding: 34px var(--hm-pad) 26px; }
    footer .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
        text-align: left;
    }
    /* логотип-колонку прячем (в макете её нет) */
    footer .f-col1 { display: none; }
    /* Каталог + Покупателям — первая строка (2 колонки) */
    footer .f-col2,
    footer .f-col3 { width: auto !important; margin: 0 !important; }
    /* О компании + Контакты — на всю ширину, отдельными строками */
    footer .f-col4,
    footer .f-col5 {
        width: auto !important;
        grid-column: 1 / -1;
        margin-top: 22px !important;
    }
    footer .f-title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 14px !important;
    }
    footer .f-cats a { font-size: 14px; line-height: 200% !important; color: var(--hm-muted); }
    footer .f-phone { font-size: 22px; margin-bottom: 6px !important; }
    footer .f-email { font-size: 14px; }
    footer .f-socs { margin-top: 18px; }

    footer .f-copyright {
        display: block;
        grid-column: 1 / -1;
        margin-top: 28px;
        font-size: 11px;
        letter-spacing: .04em;
        font-weight: 600;
        color: var(--hm-ink);
        text-transform: uppercase;
    }

    /* ---- Показ новых мобильных секций -------------------------------- */
    /* Вкладки и пилюли показываем везде, остальное — только на главной. */
    .common-home .hm-mobile-only    { display: block; }
    .common-home .hm-brands-block   { display: block; }
    .common-home .hm-brand-block    { display: block; }
    .common-home .hm-section-all    { display: block; }
    .common-home .hm-model-filter   { display: flex; }
    .common-home .hm-block-subtitle { display: block; }
    .hm-gender-tabs { display: grid; }
    .hm-quick-pills { display: flex; }
    .common-home .hm-about       { display: block; }
    /* Десктопный HTML-модуль «О нас» на мобильной главной не нужен:
       при включённой настройке «Мобильный вид главной» его заменяют
       .hm-capsule + .hm-about, при выключенной — блока на мобильной
       главной быть не должно вовсе. Поэтому селектор без .hm-desktop-only:
       класс-маркер ставится только когда настройка включена. */
    .common-home .wrapper-html-n { display: none; }
    /* Слайдер баннеров брендов («Только лучшие итальянские бренды!»,
       модуль banner с banner_type=2) — только десктоп: на мобильной главной
       по макету его место занимают ленты .hm-brands / .hm-brand-block.
       Прячем блок целиком, вместе с заголовком секции. */
    .banner-wrap-n { display: none; }
    .common-home .hm-cat-banner  { display: flex; }
    .common-home .hm-cat-quad    { display: grid; }
    .common-home .hm-looks       { display: flex; }
    .common-home .hm-brands      { display: block; }
    .common-home .hm-articles    { display: block; }
    .common-home .hm-capsule     { display: block; }
}