/* ============================================================
   Главная geary.ru — редизайн 2026 по макету Figma «Редизайн Geary»
   (node 1550:7286, десктоп 1920 / контейнер 1200; адаптивные фреймы 1360, 1080, 770, 598, 320).
   Подключается в header.twig после stylesheet_new_stock.css.
   Все селекторы — внутри .home-2026 (home.twig), остальные страницы не задевает.
   Контейнер — штатный .container темы (1230 / 970 / 750 / 100%), чтобы края совпадали с шапкой.
   ============================================================ */

.home-2026 {
    --hc-dark: #374355;
    --hc-muted: #8793a6;
    --hc-arrow: #798190;
    --hc-orange: #EF9A06;
    --hc-gold: #d28a0d;
    --hc-gold-hover: #b8780b;
    --hc-bg: #f4f5f7;
    --hc-bg-btn: #edeff3;
    --hc-bg-btn-hover: #d6dce3;
    --hc-radius: 10px;
    --hc-gap: 8px;
    --hc-block: 48px;
    --hc-h2: 28px;
    --hc-banner-radius: 20px;
    --hc-bn-gap: 24px;      /* баннер: текст → кнопка */
    --hc-bn-tgap: 24px;     /* баннер: заголовок → текст */
    /* тень карточек как в макете (0 4 13 .1), но с отрицательным spread: вбок не дальше 7px (запас ленты), вниз 13px */
    --hc-shadow: 0 6px 14px -7px rgba(0, 0, 0, .22);
    --hc-shadow-hover: 0 8px 16px -9px rgba(0, 0, 0, .36);
}

.home-2026 .product-card-mockup {
    box-shadow: var(--hc-shadow);
}

.home-2026 .product-card-mockup:hover {
    box-shadow: var(--hc-shadow-hover);
}

/* ---------- сетка и заголовки ---------- */
.home-2026.home-page {
    margin-top: 0;   /* тема даёт .home-page 80px; шапка в потоке, main имеет padding-top 30px — этого и хватает (в макете 24) */
}

.home-2026 .main-slider-wrapper {
    margin: 0 0 var(--hc-block);
}

.home-2026 .content-bottom__wrapper {
    margin: 0;
}

.home-2026 h2.heading,
.home-2026 div.heading {
    margin: 0 0 24px;
    font-style: normal;
    font-weight: 400;
    font-size: var(--hc-h2);
    line-height: 1.2;
    color: var(--hc-dark);
    text-transform: none;
    text-align: left;
}

.home-2026 .home-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
}

.home-2026 .home-section__head .heading {
    margin: 0;
}

.home-2026 .home-section__more {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--hc-bg-btn);
    color: var(--hc-dark);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    transition: background-color .2s;
}

.home-2026 .home-section__more:hover,
.home-2026 .home-section__more:focus {
    background: var(--hc-bg-btn-hover);
    color: var(--hc-dark);
    text-decoration: none;
}

/* Отступ между блоками главной (каждый модуль — свой корневой элемент) */
.home-2026 .category-cards,
.home-2026 .main-featured,
.home-2026 .main-latest,
.home-2026 .home-brands,
.home-2026 .home-news,
.home-2026 .html-module {
    margin: 0 0 var(--hc-block);
    padding: 0;
}

.home-2026 .content-bottom > :last-child {
    margin-bottom: 0;
}

.home-2026 .content-bottom {
    padding-bottom: 64px;  /* до подвала */
}

/* ---------- стрелки и точки каруселей (общие) ---------- */
/* Тема держит .owl-carousel в display:none до .owl-loaded, и Owl при инициализации замеряет ширину карточек нулём:
   карусели с autoWidth (категории, бренды) сдвигались на 8px (только margin). Показываем ленту сразу — замер верный. */
.home-2026 .hc-carousel,
.home-2026 .hc-carousel.owl-carousel,
.home-2026 .hc-carousel.owl-loading {
    position: relative;
    display: block !important;
}

.home-2026 .hc-carousel .owl-stage-outer {
    z-index: 1;
}

/* Запас под тень карточек вокруг ленты (overflow:hidden у .owl-stage-outer): сверху 12, снизу 24, по бокам 7 —
   на 1px меньше зазора между карточками (8), поэтому соседняя карточка не выглядывает даже при дробных ширинах.
   Тени карточек (--hc-shadow) подобраны так, чтобы по бокам не выходить дальше 7px: обрезанного края у тени нет.
   flow-root: отрицательные margin не схлопываются наружу — высота ленты = высоте карточек, стрелки по центру карточек. */
.home-2026 .hc-carousel:not(.home-slideshow) {
    display: flow-root !important;
}

/* «Подглядывание» следующей карточки до 767px (stagePadding в home-redesign.js): первая карточка — у левого края */
.home-2026 .hc-carousel:not(.home-slideshow) .owl-stage {
    padding-left: 0 !important;
    transition-property: transform, margin-left !important;
}

/* конец ленты: сдвиг на 2×PEEK — последняя карточка у правого края, слева выглядывает предыдущая */
.home-2026 .hc-carousel.hc-at-end .owl-stage {
    margin-left: 40px;
}

/* geary.css: .owl-carousel {margin: 0 0 60px} (≤991 — 50px) — схлопывался с отступом блока 48: под категориями было 60 */
.home-2026 .hc-carousel {
    margin: 0;
}

.home-2026 .hc-carousel:not(.home-slideshow) .owl-stage-outer {
    padding: 12px 7px 24px;
    margin: -12px -7px -24px;
}

.home-2026 .hc-carousel .owl-nav {
    position: absolute;
    top: 50%;
    right: -21px !important;
    bottom: auto !important;
    left: -21px !important;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0 !important;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: none;
    transform: translateY(-50%);
}

.home-2026 .hc-carousel .owl-nav button.owl-prev,
.home-2026 .hc-carousel .owl-nav button.owl-next {
    position: static !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--hc-orange);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    transition: background-color .2s, border-color .2s, opacity .2s;
}

.home-2026 .hc-carousel .owl-nav button:hover,
.home-2026 .hc-carousel .owl-nav button:focus {
    background: #fff7ea;
    border-color: var(--hc-gold);
}

.home-2026 .hc-carousel .owl-nav button.disabled {
    opacity: .45 !important;
    cursor: default;
}

.home-2026 .hc-arrow {
    display: block;
    width: 10px;
    height: 10px;
    border-left: 2px solid var(--hc-arrow);
    border-bottom: 2px solid var(--hc-arrow);
}

.home-2026 .hc-arrow--prev {
    margin-left: 4px;
    transform: rotate(45deg);
}

.home-2026 .hc-arrow--next {
    margin-right: 4px;
    transform: rotate(-135deg);
}

/* полоски-пагинация (слайдер — белые поверх картинки, карусели на телефоне — серые под лентой) */
.home-2026 .hc-carousel .owl-dots {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0 !important;   /* тема: .uni-module .owl-dots {margin:-10px 0 20px !important} */
    text-align: left;
}

.home-2026 .hc-carousel .owl-dots .owl-dot {
    width: 40px;
    height: 4px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #d6dce3;
    transition: background-color .2s;
}

.home-2026 .hc-carousel .owl-dots .owl-dot span {
    display: none;
}

.home-2026 .hc-carousel .owl-dots .owl-dot.active {
    background: var(--hc-arrow);
}

.home-2026 .hc-carousel .owl-dots.disabled {
    display: none;
}

/* Одинаковая высота карточек в карусели; тема прячет .uni-module__wrapper и .owl-item до load-complete — показываем сразу */
.home-2026 .uni-module__wrapper,
.home-2026 .hc-carousel .owl-item {
    opacity: 1;
}

/* Тема: .owl-carousel .owl-item:not(.active) {content-visibility:auto} — неактивные ячейки пропускают отрисовку и
   «запоминают» последний размер: после ресайза окна одна ячейка держала высоту от прежней ширины (слайдер 281 вместо 220),
   остальные схлопывались в 1px, а лента (flex) равнялась самой высокой. На главной отрисовываем все ячейки. */
.home-2026 .hc-carousel .owl-item:not(.active) {
    content-visibility: visible;
}

.home-2026 .hc-carousel .owl-stage {
    display: flex;
}

.home-2026 .hc-carousel .owl-item {
    display: flex;
    height: auto;
    float: none;
}

/* ---------- 1. Слайдер 1200×260 (пропорция держится на всех ширинах) ---------- */
.home-2026 .home-slideshow {
    margin: 0;
}

/* Слайд с aspect-ratio нельзя растягивать по высоте: при ресайзе окна Chrome оставлял ему высоту, посчитанную от прежней
   ширины (align-items: stretch перебивает пропорцию). Лента — flex без переноса (float-ячейки Owl при ресайзе
   теряли высоту: лента 0, ячейки 1px), ячейки — обычные блоки, выравнивание по верху: высота слайда всегда от текущей ширины. */
.home-2026 .home-slideshow .owl-stage {
    display: flex;
    align-items: flex-start;
}

.home-2026 .home-slideshow .owl-item {
    display: block;
    float: none;
}

.home-2026 .home-slideshow .uni-slideshow__item,
.home-2026 .home-slideshow .uni-slideshow__item:not(.fullwidth) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start !important; /* geary.css ставит flex-end */
    width: 100%;
    height: auto;
    min-height: 0 !important;               /* geary.css: min-height 400–540px !important по брейкпоинтам */
    aspect-ratio: 60 / 13;                  /* 1200 × 260 */
    overflow: hidden;
    border-radius: var(--hc-banner-radius);
    background-size: cover;
    background-position: center;
}

.home-2026 .home-slideshow .uni-slideshow__background {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    background-size: cover;
    background-position: center;
}

.home-2026 .home-slideshow .uni-slideshow__item:not(.fullwidth):before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1 !important;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, 0) 70%) !important;
    pointer-events: none;
}

.home-2026 .home-slideshow .uni-slideshow__description,
.home-2026 .home-slideshow .uni-slideshow__description.home-slider-container {
    position: relative;
    left: auto;
    z-index: 2 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    width: 60% !important;      /* 720 из 1200: «Подарок за покупку тепловизора» / «Geary.ru - генеральный партнёр» — одной строкой, бренд второй */
    max-width: 720px;
    min-height: 0;
    margin: 0 !important;
    padding: 24px 0 24px 64px !important;
    text-align: left;
}

.home-2026 .home-slideshow .uni-slideshow__title {
    max-width: 656px;          /* текстовый блок 720 − 64; бренд в конце заголовка — на новой строке через <br> в настройках слайдов */
    margin: 0;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.1;
    color: #fff;
    text-transform: none;
}

.home-2026 .home-slideshow .uni-slideshow__title b,
.home-2026 .home-slideshow .uni-slideshow__title strong {
    font-weight: 400;
}

.home-2026 .home-slideshow .uni-slideshow__text {
    margin: 0;
    font-size: 20px;
    line-height: 1.1;
    color: #fff;
}

.home-2026 .home-slideshow .uni-slideshow__text:empty {
    display: none;
}

.home-2026 .home-slideshow .uni-slideshow__btn,
.home-2026 .home-slideshow .uni-slideshow__btn.btn {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 16px 32px;
    border: 0;
    border-radius: 8px;
    background: var(--hc-gold);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
    box-shadow: none;
    transition: background-color .2s;
}

.home-2026 .home-slideshow .uni-slideshow__btn:hover,
.home-2026 .home-slideshow .uni-slideshow__btn:focus {
    background: var(--hc-gold-hover);
    color: #fff;
}

.home-2026 .home-slideshow .uni-slideshow__btn:empty {
    display: none;
}

/* полоски-пагинация справа внизу слайда */
.home-2026 .home-slideshow .owl-dots {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 285px;
    max-width: calc(100% - 48px);
    margin: 0;
}

.home-2026 .home-slideshow .owl-dots .owl-dot {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 4px;
    background: rgba(255, 255, 255, .4);
}

.home-2026 .home-slideshow .owl-dots .owl-dot.active {
    background: #fff;
}

/* ---------- 2. Популярные категории (ширину карточки ставит Owl: 5 / 4 / 3 на ширину; на ≤600 JS собирает колонки по две) ---------- */
.home-2026 .category-cards,
.home-2026 .category-cards__track {
    width: 100%;
}

.home-2026 .category-cards__col {
    display: flex;
    flex-direction: column;
    gap: var(--hc-gap);
    width: 100%;
}

.home-2026 .category-cards__item {
    display: flex;
    flex: 0 0 auto;            /* высота — от содержимого: название + картинка 4:3, без растягивания до самой высокой карточки ленты */
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: var(--hc-bg);
    color: var(--hc-dark);
    text-decoration: none;
    transition: box-shadow .2s;
}

.home-2026 .category-cards__item:hover,
.home-2026 .category-cards__item:focus {
    color: var(--hc-dark);
    text-decoration: none;
    box-shadow: var(--hc-shadow-hover);
}

.home-2026 .category-cards__name {
    display: block;
    flex: 0 0 auto;
    padding: 16px 16px 8px;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 400;
}

.home-2026 .category-cards__image {
    display: flex;
    flex: 1 1 auto;
    min-height: 110px;
    align-items: flex-end;
    justify-content: center;
    min-height: 0;
    padding: 0 10px 10px;
}

.home-2026 .category-cards__image img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Все карточки одной высоты: одна строка названия + картинка 4:3 на всю ширину карточки (75cqw — 3/4 ширины ячейки,
   как в макете: 210×157 + заголовок = 213). У названия в две строки картинка вписывается в оставшуюся высоту
   (чуть меньше, не обрезается), прижата к левому нижнему углу. Размеры названия — переменные --cn-* по брейкпоинтам. */
.home-2026 .category-cards__track .owl-item {
    container-type: inline-size;
}

.home-2026 .category-cards__track .category-cards__item {
    --cn-pt: 16px;
    --cn-px: 16px;
    --cn-pb: 8px;
    --cn-fs: 20px;
    height: calc(var(--cn-pt) + var(--cn-fs) * 1.15 + var(--cn-pb) + 75cqw);
}

.home-2026 .category-cards__track .category-cards__name {
    padding: var(--cn-pt) var(--cn-px) var(--cn-pb);
    font-size: var(--cn-fs);
    line-height: 1.15;
}

.home-2026 .category-cards__item .category-cards__image--photo {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.home-2026 .category-cards__track .owl-stage {
    align-items: flex-start;
}

/* Картинки категорий из макета (image/catalog/home-2026/categories/, вырезки 600×450 с прозрачным фоном, 2x от фрейма 300×225):
   занимают всю область под названием без полей, как в макете (object-cover), прижаты к левому нижнему углу карточки. */
.home-2026 .category-cards__item .category-cards__image--photo {   /* специфичность выше правил .category-cards__image в @media */
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0;
}

.home-2026 .category-cards__item .category-cards__image--photo img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: left bottom;
    mix-blend-mode: normal;
}

/* ---------- 3. «Интернет магазин Geary.ru»: преимущества + регистрация (html.44) ---------- */
.home-2026 .home-usp {
    display: flex;
    gap: var(--hc-gap);
    align-items: stretch;
}

.home-2026 .home-usp__list {
    display: flex;
    flex: 0 0 507px;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 21px 16px;
    border-radius: var(--hc-radius);
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
}

.home-2026 .home-usp__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    line-height: 1.2;
    color: var(--hc-dark);
}

.home-2026 .home-usp__item svg {
    display: block;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.home-2026 .home-usp__reg {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 189px;
    overflow: hidden;
    border-radius: var(--hc-radius);
    background: var(--hc-dark);
    color: #fef3f3;
}

.home-2026 .home-usp__reg-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    min-width: 0;
    padding: 24px 16px 24px 24px;
}

.home-2026 .home-usp__reg-text p {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    color: #fef3f3;
}

.home-2026 .home-usp__reg-btn {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: #d6dce3;
    color: var(--hc-dark);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
    cursor: pointer;
    transition: background-color .2s;
}

.home-2026 .home-usp__reg-btn:hover,
.home-2026 .home-usp__reg-btn:focus {
    background: #fff;
}

.home-2026 .home-usp__reg-img {
    display: block;
    flex: 0 0 273px;
    width: 273px;
    height: auto;
    align-self: stretch;
    object-fit: cover;
    object-position: center;
}

/* ---------- 4/8. Баннеры 1200×260 (html-модули «Покупайте как юрлицо», MewLite) ---------- */
.home-2026 .home-banner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    aspect-ratio: 60 / 13;
    overflow: hidden;
    border-radius: var(--hc-banner-radius);
    background-color: #1b1d22;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-decoration: none;
}

/* Баннер-картинка (MewLite): та же пропорция, что у остальных баннеров; картинка 1200×260 выравнивается по высоте
   и обрезается по бокам (ключевая зона — логотип и подпись слева, лицо правее центра → 45%). */
.home-2026 .home-banner--image {
    display: block;
}

.home-2026 .home-banner--image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% center;
}

.home-2026 .home-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hc-bn-gap);
    width: auto;
    max-width: 466px;           /* макет 1920: текстовый блок 466 */
    padding: 24px 24px 24px 64px;
    box-sizing: content-box;
}

/* Тема (stylesheet.css) задаёт .home-banner__text {display:flex; padding-left:15px} для своего модуля — сбрасываем */
.home-2026 .home-banner__title,
.home-2026 .home-banner__text {
    display: block;
    margin: 0;
    padding: 0;
}

.home-2026 .home-banner__title {
    margin-bottom: calc(var(--hc-bn-tgap) - var(--hc-bn-gap));
    font-size: 32px;
    line-height: 1.1;
    font-weight: 400;
    color: #fff;
}

.home-2026 .home-banner__text {
    font-size: 20px;
    line-height: 1.1;
    color: #fff;
}

.home-2026 .home-banner__btn {
    display: inline-flex;
    align-items: center;
    padding: 16px 32px;
    border-radius: 8px;
    background: var(--hc-gold);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .2s;
}

.home-2026 .home-banner__btn:hover,
.home-2026 .home-banner__btn:focus {
    background: var(--hc-gold-hover);
    color: #fff;
    text-decoration: none;
}

/* ---------- 5. Рекомендованные товары: карусель 4 / 3 / 2, зазор 8 ---------- */
.home-2026 .main-featured {
    align-items: stretch;
}

.home-2026 .main-featured__wrapper,
.home-2026 .main-latest__wrapper {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;                    /* stylesheet.css ≤727: border-right 1px #eceff4 — серая линия справа от ленты */
}

.home-2026 .main-featured__wrapper .owl-item > .product-card-mockup {
    width: 100%;
    min-width: 0;
}

.home-2026 .main-featured .show-more-button {
    display: none;
}

/* ---------- 6. Бренды ---------- */
.home-2026 .home-brands__track {
    width: 100%;
    margin: 0;
}

.home-2026 .home-brands__item {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 90px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: var(--hc-radius);
    background: #fff;
    transition: border-color .2s;
}

/* наведение — рамкой: у логотипов белый фон, серая подложка выделяла их белые прямоугольники */
.home-2026 .home-brands__item:hover,
.home-2026 .home-brands__item:focus-within {
    border-color: #d6dce3;
}

.home-2026 .home-brands__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.home-2026 .home-brands__item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ---------- 7. Новости магазина ---------- */
.home-2026 .home-news__track {
    width: 100%;
    margin: 0;
}

.home-2026 .home-news__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border-radius: var(--hc-radius);
    background: var(--hc-bg);
    color: var(--hc-dark);
    text-decoration: none;
    transition: box-shadow .2s;
}

.home-2026 .home-news__item:hover,
.home-2026 .home-news__item:focus {
    color: var(--hc-dark);
    text-decoration: none;
    box-shadow: var(--hc-shadow-hover);
}

.home-2026 .home-news__image {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 588 / 350;      /* превью модуля 588×350 → 294×175 при 4 в ряд, без обрезки на других ширинах */
    overflow: hidden;
    border-radius: var(--hc-radius);
    background: #d6dce3;
}

.home-2026 .home-news__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-2026 .home-news__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
}

.home-2026 .home-news__name {
    display: block;
    font-size: 16px;
    line-height: 1.2;
    color: var(--hc-dark);
}

.home-2026 .home-news__date {
    display: block;
    font-size: 14px;
    line-height: 1.2;
    color: var(--hc-muted);
}

/* ============================================================
   Адаптив по фреймам макета. Контейнер темы: ≥1345 — 1200 контента (фрейм 1920); 1300–1344 — 1140 (фрейм 1360);
   992–1299 — 940 (фрейм 1080); 768–991 — 720 (фрейм 770); ≤767 — вся ширина (фрейм 598, поля 24); ≤480 — фрейм 320 (поля 10).
   Высоты баннеров в макете: 1200×260 → 1140×246 → 940×220 → 720×238 (слайдер) / 720×216 (баннеры) → 548×200 / 548×180 → 300×130 / 300×168 / 300×90.
   ============================================================ */
@media (max-width: 1344px) {
    /* фрейм 1360: всё как на 1920, карточки категорий 200 */
    .home-2026 .category-cards__item {
    }
}

@media (max-width: 1299px) {
    .home-2026 {
        --hc-h2: 24px;
        --hc-bn-tgap: 16px;
    }

    /* 940×220 */
    .home-2026 .home-slideshow .uni-slideshow__item,
    .home-2026 .home-slideshow .uni-slideshow__item:not(.fullwidth),
    .home-2026 .home-banner {
        aspect-ratio: 47 / 11;
    }

    /* стрелки остаются снаружи: контейнер 970/750 оставляет ≥9px поля, стрелка выступает за него на 6px */
    .home-2026 .home-slideshow .uni-slideshow__description,
    .home-2026 .home-slideshow .uni-slideshow__description.home-slider-container {
        padding-left: 48px !important;
    }

    .home-2026 .home-banner__content {
        max-width: 408px;
        padding: 12px 24px 12px 48px;   /* текст в 3 строки: с полями 24 контент выше баннера 220 */
    }

    .home-2026 .home-slideshow .uni-slideshow__title {
        font-size: 32px;
    }

    .home-2026 .home-banner__title {
        font-size: 28px;
    }

    .home-2026 .home-slideshow .uni-slideshow__text,
    .home-2026 .home-banner__text {
        font-size: 18px;
    }

    .home-2026 .category-cards__item {
    }

    .home-2026 .home-usp__list {
        flex-basis: 42%;
        padding: 16px;
    }

    .home-2026 .home-usp__item {
        font-size: 16px;
    }

    .home-2026 .home-usp__reg {
        min-height: 173px;
    }

    .home-2026 .home-usp__reg-img {
        flex-basis: 171px;
        width: 171px;
    }

    .home-2026 .home-brands__item {
        height: 75px;
    }
}

@media (max-width: 991px) {
    .home-2026 {
        --hc-block: 36px;
        --hc-h2: 24px;
        --hc-bn-tgap: 12px;
    }

    /* шапка фиксирована (72px): контейнер начинается под ней, +16px воздуха */
    .home-2026 .main-slider-wrapper {
        margin: 78px 0 var(--hc-block);
    }

    /* слайдер 720×238, баннеры 720×216 */
    .home-2026 .home-slideshow .uni-slideshow__item,
    .home-2026 .home-slideshow .uni-slideshow__item:not(.fullwidth) {
        aspect-ratio: 360 / 119;
    }

    .home-2026 .home-banner {
        aspect-ratio: 10 / 3;
    }

    .home-2026 .home-slideshow .uni-slideshow__background,
    .home-2026 .home-banner {
        background-position: 70% center;
    }

    .home-2026 .home-slideshow .uni-slideshow__description,
    .home-2026 .home-slideshow .uni-slideshow__description.home-slider-container {
        gap: 24px;
        width: 80% !important;
        padding: 16px 0 28px 32px !important;   /* снизу — место под полоски */
    }

    .home-2026 .home-banner__content {
        max-width: 420px;
        padding: 16px 16px 16px 32px;
    }

    .home-2026 .home-slideshow .uni-slideshow__title {
        font-size: 28px;
    }

    .home-2026 .home-banner__title {
        font-size: 24px;
    }

    .home-2026 .home-slideshow .uni-slideshow__text,
    .home-2026 .home-banner__text {
        font-size: 16px;
    }

    .home-2026 .home-slideshow .uni-slideshow__btn,
    .home-2026 .home-slideshow .uni-slideshow__btn.btn,
    .home-2026 .home-banner__btn {
        padding: 12px 24px;
        font-size: 18px;
    }

    /* полоски слайдера — по центру снизу (макет 770/598/320) */
    .home-2026 .home-slideshow .owl-dots {
        right: auto;
        bottom: 16px;
        left: 50%;
        width: 293px;
        max-width: calc(100% - 48px);
        transform: translateX(-50%);
    }

    .home-2026 .category-cards__item {
    }

    .home-2026 .category-cards__name {
        font-size: 18px;
    }

    /* преимущества + регистрация: на планшете регистрация шире, как в макете 770 */
    .home-2026 .home-usp__list {
        flex-basis: 36%;
        gap: 12px;
        padding: 16px;
    }

    .home-2026 .home-usp__item {
        gap: 10px;
        font-size: 15px;
    }

    .home-2026 .home-usp__item svg {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .home-2026 .home-usp__reg {
        min-height: 189px;
    }

    .home-2026 .home-usp__reg-text {
        gap: 16px;
        padding: 20px 24px;
    }

    .home-2026 .home-usp__reg-text p {
        font-size: 24px;
    }

    .home-2026 .home-usp__reg-img {
        flex-basis: 35%;
        width: 35%;
    }
}

@media (max-width: 767px) {
    .home-2026 {
        --hc-block: 40px;
        --hc-h2: 28px;
        --hc-banner-radius: 8px;
        --hc-bn-gap: 24px;
        --hc-bn-tgap: 12px;
    }

    /* контейнер темы на 601–767 без полей — даём 24px, как в макете 598 (поля 25) */
    .home-2026.home-page {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* на телефоне карусели листаются свайпом и показывают полоски-пагинацию, стрелки прячем */
    .home-2026 .hc-carousel .owl-nav {
        display: none;
    }

    /* полоски под лентой: 293px по центру (макет 598) */
    .home-2026 .hc-carousel .owl-dots {
        width: 293px;
        max-width: 100%;
        margin: 16px auto 0 !important;
    }

    .home-2026 .hc-carousel .owl-dots .owl-dot {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .home-2026 .content-bottom {
        padding-bottom: 40px;
    }

    /* слайдер 548×200 (пропорция 2.74, но не ниже 130 — фрейм 320) */
    .home-2026 .home-slideshow .uni-slideshow__item,
    .home-2026 .home-slideshow .uni-slideshow__item:not(.fullwidth) {
        min-height: 130px !important;
        aspect-ratio: 137 / 50;
    }

    .home-2026 .home-slideshow .uni-slideshow__description,
    .home-2026 .home-slideshow .uni-slideshow__description.home-slider-container {
        gap: 16px;
        width: 100% !important;
        max-width: none;
        padding: 12px 24px 40px !important;   /* снизу — место под полоски */
    }

    /* 481–767 — между фреймами 598 (20/14) и 770 (28/18): размер плавный от ширины окна */
    .home-2026 .home-slideshow .uni-slideshow__title {
        font-size: clamp(20px, 3.4vw, 28px);
    }

    .home-2026 .home-slideshow .uni-slideshow__text {
        font-size: clamp(14px, 2.2vw, 16px);
    }

    .home-2026 .home-slideshow .uni-slideshow__btn,
    .home-2026 .home-slideshow .uni-slideshow__btn.btn {
        padding: 12px 20px;
        font-size: clamp(14px, 2.4vw, 18px);
    }

    .home-2026 .home-slideshow .owl-dots {
        bottom: 16px;
    }

    /* баннер «юрлицо» 548×200, не ниже 168 (фрейм 320: текст в 3–4 строки); MewLite 548×180, не ниже 90 */
    .home-2026 .home-banner {
        min-height: 168px;
        aspect-ratio: 137 / 50;
    }

    .home-2026 .home-banner--image {
        min-height: 90px;
        aspect-ratio: 137 / 45;
    }

    .home-2026 .home-banner__content {
        max-width: 340px;
        padding: 12px 24px;
    }

    .home-2026 .home-banner__title {
        font-size: clamp(20px, 3.2vw, 24px);
    }

    .home-2026 .home-banner__text {
        font-size: clamp(14px, 2.2vw, 16px);
    }

    .home-2026 .home-banner__btn {
        padding: 12px 20px;
        font-size: 18px;
    }

    /* категории: 2 колонки × 2 ряда на экран (колонки собирает JS при ≤600), карточка 210×160 */
    .home-2026 .category-cards__item {
    }

    .home-2026 .category-cards__name {
        padding: 12px 12px 6px;
        font-size: 16px;
    }

    /* регистрация первой, преимущества под ней (макет 598/320) */
    .home-2026 .home-usp {
        flex-direction: column;
    }

    .home-2026 .home-usp__reg {
        order: -1;
        min-height: 0;
    }

    .home-2026 .home-usp__list {
        flex-basis: auto;
        gap: 16px;
        padding: 21px 16px;
    }

    .home-2026 .home-usp__item {
        gap: 12px;
        font-size: 14px;
    }

    .home-2026 .home-usp__reg-text {
        gap: 16px;
        padding: 18px 24px;
    }

    .home-2026 .home-usp__reg-text p {
        font-size: 20px;
    }

    .home-2026 .home-usp__reg-btn {
        padding: 8px 16px;
        font-size: 16px;
    }

    .home-2026 .home-usp__reg-img {
        flex-basis: 47%;
        width: 47%;
    }

    .home-2026 .home-section__head {
        flex-wrap: wrap;
    }

    .home-2026 .home-section__more {
        padding: 8px 16px;
        font-size: 16px;
    }

    .home-2026 .home-brands__item {
        height: 88px;
    }

    .home-2026 .home-news__body {
        gap: 16px;
        padding: 16px;
    }
}

@media (max-width: 480px) {
    /* фрейм 320 (телефоны 320–480): поля 10, блоки через 32, H2 20; на 401–480 значения фрейма 598 уже не помещаются
       (баннер «юрлицо» выше 168, кнопка слайда налезает на полоски) */
    .home-2026 .main-slider-wrapper {
        margin-top: 70px;  /* шапка 64px */
    }

    .home-2026 {
        --hc-block: 32px;
        --hc-h2: 20px;
        --hc-bn-gap: 18px;
        --hc-bn-tgap: 8px;
    }

    .home-2026.home-page {
        padding-left: 10px;
        padding-right: 10px;
    }

    .home-2026 .hc-carousel .owl-dots {
        width: 200px;
        gap: 4px;
    }

    /* слайд 300×130: текст 16, кнопка 12 */
    .home-2026 .home-slideshow .uni-slideshow__description,
    .home-2026 .home-slideshow .uni-slideshow__description.home-slider-container {
        gap: 8px;
        padding: 8px 12px 22px !important;
    }

    .home-2026 .home-slideshow .uni-slideshow__title {
        font-size: 16px;
    }

    .home-2026 .home-slideshow .uni-slideshow__text {
        font-size: 12px;
    }

    .home-2026 .home-slideshow .uni-slideshow__btn,
    .home-2026 .home-slideshow .uni-slideshow__btn.btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .home-2026 .home-slideshow .owl-dots {
        bottom: 10px;
        width: 200px;
        gap: 4px;
    }

    /* баннер «юрлицо» 300×168: заголовок 16 полужирный, текст 12, кнопка 14 */
    .home-2026 .home-banner__content {
        max-width: 230px;
        padding: 12px;
    }

    .home-2026 .home-banner__title {
        font-size: 16px;
        font-weight: 600;
    }

    .home-2026 .home-banner__text {
        font-size: 12px;
    }

    .home-2026 .home-banner__btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* категории 130×120, название 14 */
    .home-2026 .category-cards__item {
    }

    .home-2026 .category-cards__name {
        padding: 12px 12px 4px;
        font-size: 14px;
    }

    .home-2026 .category-cards__image {
        padding: 0 10px 8px;
    }

    /* регистрация 300×150: текст 16, кнопка 14, картинка 125; преимущества: иконки 32, текст 12 */
    .home-2026 .home-usp__reg-text {
        gap: 18px;
        padding: 16px;
    }

    .home-2026 .home-usp__reg-text p {
        font-size: 16px;
    }

    .home-2026 .home-usp__reg-btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    .home-2026 .home-usp__reg-img {
        flex-basis: 42%;
        width: 42%;
    }

    .home-2026 .home-usp__list {
        gap: 8px;
        padding: 12px;
    }

    .home-2026 .home-usp__item {
        gap: 12px;
        font-size: 12px;
    }

    .home-2026 .home-usp__item svg {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }

    .home-2026 .home-section__more {
        padding: 8px 16px;
        font-size: 16px;
    }

    .home-2026 .home-brands__item {
        height: 48px;
    }

    .home-2026 .home-news__body {
        gap: 12px;
        padding: 12px;
    }

    .home-2026 .home-news__name {
        font-size: 15px;
    }
}

/* Карточки категорий: размеры названия по брейкпоинтам (высота карточки считается из них, см. блок 2) */
@media (max-width: 991px) {
    .home-2026 .category-cards__track .category-cards__item {
        --cn-fs: 18px;
    }
}

@media (max-width: 767px) {
    .home-2026 .category-cards__track .category-cards__item {
        --cn-pt: 12px;
        --cn-px: 12px;
        --cn-pb: 6px;
        --cn-fs: 16px;
    }
}

@media (max-width: 480px) {
    .home-2026 .category-cards__track .category-cards__item {
        --cn-pb: 4px;
        --cn-fs: 14px;
    }
}