/* ============================================================================
   cvg-ui.css — правки интерфейса по разбору дизайна 26.08.2026.
   Работает ТОЛЬКО при включённом тестовом флаге cv_test: файл подключает
   сниппет cvgFlag, и без куки его на странице вообще нет.

   Порядок блоков — по влиянию на продажи (как в самом разборе):
     1. карточка товара на телефоне: цена и кнопка сразу под фото
     2. поля заказа: 16 px, крупнее, с подписями
     3. фото в плитке каталога крупнее
     4. типографика: цена, заголовки, названия
     5. пустая выдача поиска
     6. зоны нажатия
     7. контраст серого текста
     8. единые скругления
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. КАРТОЧКА ТОВАРА НА ТЕЛЕФОНЕ: цена и кнопка сразу под галереей.

   Было: экран 812 px, а цена на 1025 и кнопка на 1123 — полтора экрана
   листать. Причина в том, что колонки десктопа на телефоне просто встают
   друг под друга в порядке вёрстки. Меняем порядок только для узких
   экранов, саму вёрстку не трогаем.
   ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .product-page .product-page-inner .row {
        display: flex;
        flex-wrap: wrap;
    }
    /* 1-я колонка — галерея, 2-я — цвета/память/характеристики, 3-я — покупка */
    .product-page .product-page-inner .row > .col-lg-6              { order: 1; }
    .product-page .product-page-inner .row > .col-lg-3:nth-child(2) { order: 3; }
    .product-page .product-page-inner .row > .col-lg-3:nth-child(3) { order: 2; margin-bottom: 18px; }
}

/* Липкая полоса покупки (собирает cvg-ui.js). Показывается на телефоне,
   когда настоящая кнопка «В корзину» ушла с экрана. */
.cvg-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    background: #fff;
    border-top: 1px solid #E9ECEE;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .10);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform .18s ease-out;
}
.cvg-buybar.cvg-on { transform: translateY(0); }
.cvg-buybar__in {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
}
.cvg-buybar__price {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.1;
}
.cvg-buybar__old {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #6B6F76;
    text-decoration: line-through;
}
.cvg-buybar__btn {
    flex: 1;
    min-height: 48px;
    border: none;
    border-radius: 8px;
    background: #FF0000;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
}
.cvg-buybar__btn:disabled { opacity: .5; }
/* плашка про cookie не должна прятаться за полосой */
body.cvg-buybar-on #cookie-banner { bottom: 92px; }
@media (min-width: 992px) { .cvg-buybar { display: none; } }


/* ---------------------------------------------------------------------------
   2. ПОЛЯ ФОРМ: 16 px и крупная зона нажатия.

   Меньше 16 px Safari на iPhone увеличивает страницу при касании поля, и
   потом её надо уменьшать руками. Трогаем только «человеческие» поля —
   поиск в шапке, счётчик количества и поля фильтров остаются как были
   (класс проставляет cvg-ui.js).
   ------------------------------------------------------------------------ */
.cvg-form-fix .cvg-field > input.cvg-input,
.cvg-form-fix .cvg-field > textarea.cvg-input,
.cvg-form-fix input[type="text"],
.cvg-form-fix input[type="tel"],
.cvg-form-fix input[type="email"],
.cvg-form-fix input[type="password"],
.cvg-form-fix textarea,
.cvg-form-fix select {
    font-size: 16px;
    min-height: 46px;
    padding: 11px 14px;
    border-radius: 8px;
    font-family: inherit;
}
.cvg-form-fix .cvg-field > textarea.cvg-input,
.cvg-form-fix textarea { min-height: 84px; }

/* Подпись над полем: появляется, когда человек начал печатать (пока поле
   пустое, видна обычная подсказка внутри). Раньше подсказка исчезала
   вместе с ответом на вопрос «что это за поле». */
.cvg-field { position: relative; display: block; }
.cvg-field > .cvg-label {
    position: absolute;
    top: -8px;
    left: 10px;
    padding: 0 5px;
    background: #fff;
    font-size: 11px;
    line-height: 1.4;
    color: #6B6F76;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s;
    pointer-events: none;
}
.cvg-field > input:not(:placeholder-shown) ~ .cvg-label,
.cvg-field > textarea:not(:placeholder-shown) ~ .cvg-label,
.cvg-field > input:focus ~ .cvg-label,
.cvg-field > textarea:focus ~ .cvg-label {
    opacity: 1;
    transform: translateY(0);
}


/* ---------------------------------------------------------------------------
   3. ФОТО В ПЛИТКЕ КАТАЛОГА КРУПНЕЕ.

   Замер: миниатюры делаются в кадре 302×174, а сам товар занимает в нём в
   среднем 44% ширины — остальное белые поля по бокам. Поэтому фото и было
   23% высоты плитки. Товар при этом НЕ режется: рамка 1.45:1 показывает
   83.5% ширины кадра, а самое широкое фото из 103 проверенных занимает 82%.
   Плюс фото раздвинуто на всю ширину плитки (были поля по 10-20 px).
   ------------------------------------------------------------------------ */
/* 30.08.2026 (просьба Михаила): фото в плитке уменьшено на 20%.

   ⚠ Первая версия ужимала только ВЫСОТУ рамки (1.45 → 1.81) — и это было
   неверно вдвойне (заметил Михаил): у смартфонов, которые кадрируются по
   ширине, обрезка перешла на верх и низ и стала срезать сам телефон, а у
   ноутбуков и телевизоров, которые вписываются целиком, размер почти не
   изменился — они остались огромными.

   Правильно уменьшать САМ БЛОК фото: пропорция кадра прежняя (1.45:1),
   ширина 80% от плитки. Тогда и обрезанные, и вписанные кадры мельчают
   ровно на 20%, обрезка не растёт, а по бокам появляются белые поля. */
.product:not(.home-product) .product-slider > span { display: block; }
.product:not(.home-product) .product-slider img,
.product:not(.home-product) > .hide-product-slider-loaded {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1.45 / 1;
    object-fit: cover;
    object-position: center;
}

/* ⚠ display: block нужен, чтобы поля auto центрировали фото: у строчной
   картинки они не работают, и блок фото прижимался к левому краю плитки
   (нашёл Михаил 30.08.2026). Но ТОЛЬКО картинке внутри слайдера: у
   заглушки `.hide-product-slider-loaded` показ выключает сама тема, когда
   карусель загрузилась, и принудительный block выводил в плитке второй
   кадр — товар двоился. */
.product:not(.home-product) .product-slider img { display: block; }

/* Ноутбуки, телевизоры, мониторы, приставки: товар занимает кадр почти во
   всю ширину, и обрез срезал бы края самого устройства (нашёл Михаил
   29.08.2026). Таким плиткам метку ставит cvg-ui.js по ссылке товара —
   фото вписывается целиком. Рамка та же, поэтому высота плиток в ряду не
   разъезжается. */
.product.cvg-wide-photo:not(.home-product) .product-slider img,
.product.cvg-wide-photo:not(.home-product) > .hide-product-slider-loaded {
    object-fit: contain;
}

/* Отступ плитки на разных ширинах РАЗНЫЙ — замерено на живом сайте:
   ≥1200 — 15, 992-1199 — 10, 768-991 — 20, 576-767 — 15, 360-575 — 10,
   ниже — 5. Поэтому и «выпуск» фото на всю ширину задаётся по каждой
   ступени: иначе фото съезжает набок. */
/* ⚠ width: auto обязателен: стили карусели owl задают слайдеру width: 100%,
   и он считается от ширины плитки БЕЗ учёта наших отрицательных полей —
   фото оставалось прежней ширины и съезжало влево. */
.product:not(.home-product) .product-slider {
    width: auto;
    margin-left: -15px;
    margin-right: -15px;
}
@media (max-width: 1199.98px) {
    .product:not(.home-product) .product-slider { margin-left: -10px; margin-right: -10px; }
}
@media (max-width: 991.98px) {
    .product:not(.home-product) .product-slider { margin-left: -20px; margin-right: -20px; }
}
@media (max-width: 767.98px) {
    .product:not(.home-product) .product-slider { margin-left: -15px; margin-right: -15px; }
}
@media (max-width: 575.98px) {
    .product:not(.home-product) .product-slider { margin-left: -10px; margin-right: -10px; }
}
@media (max-width: 359.98px) {
    .product:not(.home-product) .product-slider { margin-left: -5px; margin-right: -5px; }
}


/* ---------------------------------------------------------------------------
   4. ТИПОГРАФИКА: цена крупная, заголовок заметный, название читаемое.
   ------------------------------------------------------------------------ */
/* Итоговая цена на карточке товара. Строки «Обычная цена» и «Цена со
   скидкой» набраны с размером прямо в разметке — они остаются мелкими,
   меняется только сама цена. */
.product-page .product-cart .product-price {
    font-size: 30px;
    max-width: none;
    line-height: 1.1;
}
@media (max-width: 991.98px) {
    .product-page .product-cart .product-price { font-size: 26px; }
    .product-page h1, .product-page .h1 { font-size: 20px; line-height: 1.3; }
}

/* Главная кнопка карточки — 48 px в высоту (вторичные остаются 40).
   Разбор: кнопки были четырёх высот, а по нижней границе удобного нажатия
   проходили не все. */
.product-page .product-button .product-add-cart,
.product-page .product-button .product-notification {
    min-height: 48px;
    max-height: none;
}
.product-page .product-button .product-count { min-height: 48px; }

/* Плитка каталога: название 14 px вместо 12, цена 18 вместо 16. */
@media (max-width: 575.98px) {
    .product:not(.home-product) .product-title {
        font-size: 14px;
        line-height: 1.35;
        height: 38px;
    }
    .product:not(.home-product) .product-price { font-size: 18px; }
}


/* ---------------------------------------------------------------------------
   5. ПУСТАЯ ВЫДАЧА ПОИСКА (блок собирает cvg-ui.js).
   Было: «Поисковый запрос пуст.» — хотя запрос был, и никакого выхода.
   ------------------------------------------------------------------------ */
.cvg-noresult { padding: 10px 0 30px; }
.cvg-noresult__title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.cvg-noresult__hint { color: #6B6F76; line-height: 1.6; margin-bottom: 20px; }
.cvg-noresult__hint li { margin-bottom: 4px; }
.cvg-noresult__links { display: flex; flex-wrap: wrap; gap: 10px; }
.cvg-noresult__links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #E9ECEE;
    border-radius: 8px;
    color: #3B3D40;
    background: #F9F9F9;
}
.cvg-noresult__links a:hover { border-color: #FF0000; text-decoration: none; }


/* ---------------------------------------------------------------------------
   6. ЗОНЫ НАЖАТИЯ на телефоне: пункты меню и иконки шапки.
   Внешне почти не меняется — растёт область, в которую можно попасть пальцем.
   ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .catalog-menu__link > a,
    .sub-catalog-menu .catalog-menu__link > a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .headers_icon {
        min-width: 44px;
        min-height: 44px;
    }
    /* Кроме узких телефонов: там эти же 44 px урезаны до 40 — блок 6б. */
    #pdopage .pagination-nums .num,
    #pdopage .dropdown li {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ---------------------------------------------------------------------------
   6б. ТЕСНАЯ ШАПКА НА ТЕЛЕФОНЕ: кнопки наезжали на логотип.
   Пять кнопок по 44 px с промежутками 10 px — это 266 px, а рядом с
   логотипом свободно около 250: ряд не помещался, вылезал влево и кнопка
   поиска накрывала последнюю букву логотипа (Михаил, 20.09.2026, Ковров
   на телефоне). Тема сама укладывалась впритык — 40 px и 250 в сумме;
   не хватило как раз наших зон нажатия из блока 6.
   Здесь ряд возвращается к 226 px: запас до логотипа 26-41 px на всех
   ширинах, где шапка идёт одной строкой (380-480). Ниже 380 px макет
   двухстрочный, там тесноты нет и трогать нечего.
   Поднимете тут 44 px обратно — логотип снова порежется.
   ------------------------------------------------------------------------ */
@media (max-width: 479.98px) {
    .mobile-icons { gap: 6px; }
    .mobile-icons .headers_icon {
        min-width: 40px;
        min-height: 40px;
        width: 40px;
    }
    /* у корзины внутри шире содержимое — ужимаем поля, иначе она 50 px */
    .mobile-icons .cart_icon { padding-left: 6px; padding-right: 6px; }
}


/* ---------------------------------------------------------------------------
   7. КОНТРАСТ СЕРОГО ТЕКСТА: #A0A0A0 (2.5:1) — ниже нормы 4.5:1.
   На белом делаем темнее (#6B6F76, около 5:1), на тёмном подвале наоборот
   светлее — там тот же серый был тусклым по другой причине.
   ------------------------------------------------------------------------ */
header .address,
.cart_icon,
.breadcrumbs ul li a,
.product-code,
.about-rekv,
.reg-links a:last-child,
#pdopage .dropdown li,
.filter_title .reset-current-filter,
.product-bonus.available span,
.form-group label,
.get-inn { color: #6B6F76; }

.search-form__input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder { color: #6B6F76; }

.footer .footer-bottom { color: #C9CDD2; }
#cookie-banner .cookie-btn { color: #FF7A7A; }


/* ---------------------------------------------------------------------------
   8. ЕДИНЫЕ СКРУГЛЕНИЯ: было шесть значений (8, 10, 12, 15, 20, 30),
   оставляем 8 — мелкое, 12 — средние карточки, 20 — крупные блоки.
   ------------------------------------------------------------------------ */
.msMiniCart,
.product-tags span, .product-tags a,
.f-phone,
.slider-arrow, .arrow,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.min .subcat,
.get-inn,
.product-bonus span,
.product-warranty span,
.tab-header,
.left-contact-name,
.order-select-info > span,
.order-select-description .warning,
.order-chars,
.submit { border-radius: 8px; }

.brand-item,
.lk-bonus-ostatok,
.lk-bonus-fired-item { border-radius: 12px; }

/* ---------------------------------------------------------------------------
   9. РЫВОК ПРИ ПЕРЕКЛЮЧЕНИИ ЦВЕТА НА ТЕЛЕФОНЕ.

   Жалоба Михаила 26.08.2026: после выбора цвета страница дёргается. Причина:
   у нового кадра галереи браузер не знает высоту, пока не скачает картинку —
   место под фото схлопывается со 281 px до одних отступов, всё уезжает вверх,
   а через мгновение прыгает обратно. Резервируем место заранее: все кадры
   галереи на сайте делаются в одном формате 490×283 (проверено на 50 кадрах
   из 24 карточек восьми категорий), поэтому соотношение известно.
   ------------------------------------------------------------------------ */
.product-page .product-slider-main .item img,
.product-page .product-slider-main .owl-item img {
    width: 100%;
    aspect-ratio: 490 / 283;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   10. ВОЛНА 7 (26.08): пустые страницы, видимый фокус, мелкий текст.
   ------------------------------------------------------------------------ */

/* Кнопка-выход в блоке «ничего не найдено» / «пусто» */
.cvg-noresult__links a.cvg-noresult__cta {
    background: #FF0000;
    border-color: #FF0000;
    color: #fff;
    font-weight: 700;
}
.cvg-noresult__links a.cvg-noresult__cta:hover { color: #fff; opacity: .9; }

/* Видимый фокус с клавиатуры.
   В теме стоит «body * { outline: none }» — значит человек, который ходит по
   сайту клавишей Tab (и покупатели с ограничениями, и просто быстрые
   пользователи), не видит, где находится. Возвращаем рамку, но только для
   клавиатуры: при обычном клике мышью она не появляется. */
/* ⚠ ПОЛЯ ВВОДА СЮДА НЕ ВХОДЯТ (правка 26.08.2026 по замечанию Михаила).
   У текстового поля браузер считает фокус «видимым» ВСЕГДА — даже при
   обычном клике мышью, — и рамка появлялась у поиска при каждом клике.
   Вдобавок она рисуется по самому полю, которое уже видимой рамки поиска,
   и выглядела рамкой внутри рамки. В поле и так виден курсор, где ты
   находишься, поэтому обводка там не нужна. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #FF0000 !important;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Мелкий текст. Замер на категории: подписи подкатегорий 10 px — это ниже
   читаемого минимума, а по ним ходят чаще всего. */
.catalog-item-title { font-size: 13px; line-height: 1.3; }
/* точнее правила из cvg.css, иначе бейдж остаётся 11 px */
.product .cvg-badge, .cvg-badge.cvg-in, .cvg-badge.cvg-order { font-size: 12px; }

/* ============================================================================
   Карточка товара: миниатюры под фото, место — вариантам (27.08.2026)
   ----------------------------------------------------------------------------
   Замечание Михаила: строки выбора цвета, памяти и SIM зажаты — у iPhone 17
   Pro Max четыре объёма памяти вставали в два ряда. Замер показал причину:
   лента миниатюр стоит СЛЕВА от главного фото и съедает 115 px, при том что
   под фото пусто.

   Одного переноса мало: ширины колонок заданы сеткой (галерея 6 долей из 12,
   характеристики 3, покупка 3), и освободившееся место досталось бы только
   фото. Поэтому переносим ленту вниз И сдвигаем границу колонок: галерея 5,
   характеристики 4, покупка прежние 3.

   Итог замера на 1440: колонка вариантов 265 → 360 px, главное фото
   435 → 455 px (то есть даже крупнее прежнего).

   Шаблон карточки не трогаем — он кэшируется, условие по флагу жило бы там
   своей жизнью. На телефоне тема миниатюры и так прячет, поэтому правка
   сетки и подписей включается только с 992 px.
   ========================================================================= */

.product-page-inner .product-img { flex-direction: column; }
.product-page-inner .product-slider-main { order: 1; width: 100% !important; }
.product-page-inner .after-slide {
    order: 2;
    /* высоту ленты скрипт темы проставляет прямо в разметку — перебиваем */
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    flex-direction: row;
    justify-content: flex-start;
    /* размер кадров и промежуток — ровно те же, что были у вертикальной
       ленты слева: 100 px кадр, 15 px между ними (просьба Михаила 27.08) */
    gap: 15px;
    margin: 10px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
}
/* Кадры ОДНОГО размера и не ужимаются (просьба Михаила 27.08.2026: у товара
   с одиннадцатью фото резиновые миниатюры превращались в мелкие полоски).
   Лишние уходят за край, полосы прокрутки не видно, а лента сама
   подкручивается к выбранному кадру — этим занимается cvg-ui.js. Именно так
   вела себя вертикальная лента, когда стояла слева. */
.product-page-inner .after-slide .img {
    flex: 0 0 100px;
    width: 100px;
    margin: 0;
}
/* ⚠ Рамку вокруг фото рисует внутренняя обёртка слайдера, и в теме ей задана
   ЖЁСТКАЯ ширина 435 px — ровно под прежнюю колонку. После расширения
   галереи до 455 рамка осталась узкой: слева стрелка отступала от неё на
   15 px, а справа вылезала за край, и сам кадр обрезался на 20 px
   (нашёл Михаил 27.08.2026). Ширину снимаем — рамка идёт по контейнеру. */
.product-page-inner .product-slider-main .owl-stage-outer {
    width: 100% !important;
    /* ширина задана именно ограничением max-width внутри медиазапроса
       темы — без его снятия width ничего не меняет */
    max-width: none !important;
}

/* Полосы прокрутки у ленты нет — вместо неё край растворяется, если там
   есть ещё кадры. Классы ставит cvg-ui.js по фактическому положению ленты. */
.product-page-inner .after-slide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.product-page-inner .after-slide::-webkit-scrollbar { display: none; }
.product-page-inner .after-slide.cvg-thumbs-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.product-page-inner .after-slide.cvg-thumbs-start {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
    mask-image: linear-gradient(to right, transparent, #000 40px);
}
.product-page-inner .after-slide.cvg-thumbs-start.cvg-thumbs-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

@media (min-width: 992px) {
    /* граница колонок: галерея 5 долей из 12, характеристики 4 */
    .product-page-inner .row > div:nth-child(1) {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .product-page-inner .row > div:nth-child(2) {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* Подпись над рядом кнопок. Слева она отъедала 53 px, и четыре объёма памяти
   (356 px) не помещались в строку даже в расширенной колонке.
   ⚠ Правило общее для всех ширин (просьба Михаила 27.08.2026: на телефоне
   заголовок выбора должен стоять над выбором так же, как на компьютере) —
   раньше оно жило только в медиазапросе для экранов от 992 px. */
.product-page-inner .product-colors {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.product-page-inner .product-colors > span { margin: 0; }
.product-page-inner .product-colors > div { width: 100%; }


/* ============================================================================
   Плитки подкатегорий в каталоге (27.08.2026, просьба Михаила)
   ----------------------------------------------------------------------------
   Было: серый блок #F9F9F9 без рамки, а картинка занимала 80 % ширины и всего
   36 % высоты плитки — товар выглядел мелким пятном в пустом сером поле.
   Стало: белый фон, серая окантовка, картинка почти во всю плитку.

   Как увеличена картинка: окно выше кадра, и лишнее по бокам срезается.
   ⚠ Срезать вслепую нельзя: проверка ВСЕХ 50 плиток каталога показала, что
   поля у кадров разные — у смартфонов и Dyson по краям 22–39 % пустого
   места, а у ноутбуков, телевизора, приставок и аксессуаров товар занимает
   кадр почти целиком (поля 0–14 %). Поэтому по умолчанию кадр ВПИСЫВАЕТСЯ, а
   обрезку включает cvg-ui.js — только тем кадрам, у которых поля позволяют.
   По высоте не режем никогда: товар занимает 90–99 % высоты кадра.

   ⚠ ТОЛЬКО КАРУСЕЛЬ ПОДКАТЕГОРИЙ. Тот же класс плитки используется в списке
   корневых разделов — на главной и на странице «Каталог». Там подложены не
   кадры товаров из базы, а вручную подготовленные картинки (PNG без фона,
   товар обрезан под края, позиционируется в правом нижнем углу). Первая
   версия правки задела и их — вид списка на главной поехал (заметил Михаил
   27.08.2026). Поэтому все правила ниже привязаны к `.catalog-slider-second`.
   ========================================================================= */
.catalog-slider-second .catalog-item {
    background: #fff;
    border: 1px solid #E9ECEE;
}
.catalog-slider-second .catalog-item .catalog-item-img {
    /* ширина по содержимому плитки: тема выпускает кадр за поля
       отрицательными полями, из-за чего он упирался в рамку */
    width: 100%;
    max-width: 100%;
    margin: 0;
    aspect-ratio: 193 / 174;
    /* ⚠ Высота ограничена местом под названием: на широких экранах плитка
       становится квадратной (на 1920 это 233×233), кадр по соотношению
       вырастал до 209 px и наезжал на плашку с названием подкатегории —
       её просто не было видно (нашёл Михаил 27.08.2026). 58 px — это сама
       плашка (37) плюс поля плитки и зазор. */
    max-height: calc(100% - 58px);
    min-height: 0;
    flex: 0 1 auto;
    object-fit: contain;
    /* кадр идёт до краёв плитки, поэтому снизу его углы повторяют её
       скругление (20 px минус рамка), сверху достаточно мягкого 12 */
    border-radius: 12px 12px 19px 19px;
}

/* кадрам с широкими полями скрипт разрешает обрезку — товар от неё только
   выигрывает в размере */
.catalog-slider-second .catalog-item .catalog-item-img.cvg-crop { object-fit: cover; }

/* ============================================================================
   Плитки подкатегорий НИЖЕ НА ТРЕТЬ (30.08.2026, просьба Михаила)
   ----------------------------------------------------------------------------
   Карусель занимала треть первого экрана и отжимала товары вниз. Высоту
   плитки задаёт тема четырьмя ступенями (233 / 215 / 150 / 160) — каждая
   уменьшена примерно на треть. На узких ступенях остановились на 110: под
   плашку с названием уходит 58 px, и при 100 кадру осталось бы 42.

   ⚠ ТОЛЬКО КАРУСЕЛЬ КАТАЛОГА. Тот же класс плитки живёт в списке корневых
   разделов на главной и на странице «Каталог» — там свои картинки и своя
   вёрстка, поэтому все правила привязаны к `.catalog-slider-second`
   (грабля 27.08.2026: первая версия правки задела главную).
   ========================================================================= */
/* Плитка занимает СВОЙ СЛОТ целиком и остаётся горизонтальным
   прямоугольником (правка Михаила 30.08.2026: квадраты не нужны, зазор
   великоват, сами плитки чуть больше). Квадратная версия жила час: ширину
   ограничивал `max-width`, и между плитками оставалось 47 px пустоты —
   27 от центрирования плюс 20 от самой карусели. Теперь остаётся только
   зазор карусели, а высота поднята примерно на 8%.
   ⚠ Ширину слота задаёт карусель (6 плиток в ряд на широком экране) — шире
   плитку не сделать, не тронув её настройки в скриптах темы. */
/* Компоновка «картинка слева, текст справа» (выбор Михаила 30.08.2026 из
   шести показанных вариантов). Плитка стала вдвое ниже прежней — карусель
   больше не съедает треть первого экрана, — и это единственный вариант, где
   длинные названия («Кабели, переходники, адаптеры, хабы и
   USB-концентраторы») читаются несколькими строками, а не рубятся ради
   картинки.
   ⚠ В разметке темы подпись идёт ПЕРЕД картинкой, поэтому порядок задаётся
   flex-свойством order, а не вёрсткой. */
.catalog-slider-second .catalog-item {
    height: 84px;
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
}
@media (max-width: 1199.98px) {
    .catalog-slider-second .catalog-item { height: 76px; }
}

/* Подпись лежит ПОВЕРХ картинки белой плашкой — как в прежнем виде сайта
   (правка Михаила 30.08.2026: «картинку за текст, чтобы текст перекрывал
   картинку, а не наоборот»). Раньше подпись стояла в потоке и отнимала у
   картинки треть плитки; теперь она ничего не занимает, и плитку удалось
   сделать ниже, а картинку — крупнее. */
.catalog-slider-second .catalog-item .catalog-item-title {
    position: absolute;
    left: 68px;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: auto;
    max-width: none;
}

/* Подпись — не больше двух строк. В узкой плитке длинные названия
   («Внешние аккумуляторы, зарядные устройства, станции») занимали 104 px из
   143 и выдавливали картинку: кадр рассчитан на подпись в 37 px. Шрифт
   мельче на пункт — в строку влезает больше слов, поэтому обрезается реже. */
/* Три строки: столько помещается по высоте плитки, и этого хватает самым
   длинным названиям каталога.
   ⚠ Подпись НЕ должна быть элементом флекса: Chrome таким детям заменяет
   `display: -webkit-box` на блочный, обрезка по строкам молча перестаёт
   работать, а с `overflow: hidden` блок и вовсе схлопывается в нулевую
   высоту — текст исчезает целиком (поймано живьём 30.08.2026). Поэтому
   картинка и подпись расставлены абсолютным позиционированием. */
.catalog-slider-second .catalog-item .catalog-item-title {
    font-size: 12.5px;
    line-height: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Кадр внутри тоже уменьшается — но ПРОПОРЦИОНАЛЬНО, а не сплющивается:
   высоту ограничиваем местом под плашкой, ширину отдаём соотношению сторон.
   Иначе кадр остался бы во всю ширину плитки и при низкой высоте обрезка
   съела бы верх и низ товара. */
/* Высота кадра = высота плитки минус место под подписью. 70 px — это две
   строки названия (50) плюс поля и зазор: подпись ограничена двумя
   строками, поэтому больше ей не понадобится.
   ⚠ Отдать кадру остаток через `flex: 1 1 0; height: 0` нельзя — картинка
   схлопывается в ноль (проверено живьём 30.08.2026): у img нет внутреннего механизма
   роста, как у блока. */
.catalog-slider-second .catalog-item .catalog-item-img {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    object-position: center;
    border-radius: 0;
}
@media (max-width: 1199.98px) {
    .catalog-slider-second .catalog-item .catalog-item-img { width: 54px; height: 54px; left: 6px; }
    .catalog-slider-second .catalog-item .catalog-item-title { left: 66px; right: 8px; }
}

/* Товар дня на главной (просьба Михаила 04.09.2026): название до ТРЁХ строк и
   чуть мельче, чтобы влезали длинные имена вроде «iPhone 17 Pro Max 256GB
   Серебристый (eSIM)». Тема режет заголовок на двух строках жёсткой высотой
   (42/35 px по ширинам экрана) — селектор из трёх классов перебивает все её
   правила без !important. Само название укорочено в чанке product.home.tpl
   теми же правилами, что в подсказках поиска (без «Смартфон», «без RuStore»). */
.home-product .product-title.product-title--day {
    font-size: 15px;            /* вариант C, выбор Михаила 04.09.2026: крупнее, строки плотнее */
    line-height: 1.25;
    -webkit-line-clamp: 3;
    height: auto;
    max-height: calc(1.25em * 3);
}