/* Страница разделов каталога: сетка 4 колонки, карточки с картинкой и подписью */

/* Блок заголовка и соцсетей в одну строку (как на /blog/) */
.blog-header__content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.blog-header__content-up {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.blog-header__subscribe {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 130%;
    color: #70798E;
    gap: 10px;
}
.blog-header__subscribe-links {
    display: flex;
    align-items: center;
    gap: 20px;
}
.blog-header__subscribe-links a {
    height: 30px;
    width: 30px;
}
.blog-header__subscribe-links a img {
    display: block;
    height: 100%;
    width: auto;
}

.catalog-sections-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 0;
    padding-bottom: 2rem;
}
.catalog-sections-card {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.catalog-sections-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.catalog-sections-card:hover .catalog-sections-card__name {
    color: #fff;
}
.catalog-sections-card__img {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: #e0e0e0 center/cover no-repeat;
}
.catalog-sections-card__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    color: #fff;
}
@media (max-width: 1024px) {
    .catalog-sections-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .blog-header__content-up {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .blog-header__subscribe {
        flex-wrap: wrap;
        font-size: 14px;
    }
    .catalog-sections-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .catalog-sections-card__name { font-size: 14px; padding: 0.5rem 0.75rem; }
}

/* === Хаб «Продукты оптом» ===================================================
   Типографика подчинена дизайн-системе сайта: Montserrat отдельным семейством
   на каждое начертание (font-weight сам по себе нужное начертание НЕ подтянет),
   12-колоночная сетка с колонкой 32px, левый рельс под подписи, чернила #203686,
   приглушённый текст #5B647D, граница #DDE1E6, карточки radius 10 / padding 20. */

/* Ритм секций: как у .delivery_conditions__container на /delivery/ и /spb/ */
.catalog-hub__section {
    margin-top: 80px;
}

/* --- Интро: подпись в колонках 1–3, текст в 4–12 ------------------------- */
.catalog-hub__intro {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 32px;
    margin-top: 8px;
}
.catalog-hub__intro > .section-title-text-14 {
    grid-column: 1 / 4;
}
.catalog-hub__intro-text {
    grid-column: 4 / 13;
    max-width: 46em;
}
.catalog-hub__intro-text p {
    font-family: 'Montserrat-Medium', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 155%;
    color: #5B647D;
    margin: 0 0 14px;
    text-wrap: pretty;
}
.catalog-hub__intro-text p:last-child {
    margin-bottom: 0;
}
/* Первый абзац крупнее и цветом чернил — иерархия задаётся шкалой, не рамкой */
.catalog-hub__lead {
    font-family: 'Montserrat-Medium', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-size: 20px !important;
    line-height: 145% !important;
    color: #203686 !important;
    margin-bottom: 20px !important;
}

/* Раздел без картинки (зонтики «Мясо, птица» и «Мясо охлажденное» её не имеют —
   их раньше просто не показывали) получает фирменную заглушку, а не серый прямоугольник. */
.catalog-sections-card--noimg .catalog-sections-card__img {
    background: #203686;
}
.catalog-sections-card--noimg .catalog-sections-card__name {
    background: none;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    font-family: 'Montserrat-SemiBold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 130%;
    text-wrap: balance;
}
.catalog-sections-card--noimg .catalog-sections-card__name::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: 28px;
    height: 14px;
    margin-left: -14px;
    background: url("/assets/images/svg/icons/arr-right.svg") center/contain no-repeat;
    opacity: .85;
}

/* --- Группы разделов ----------------------------------------------------- */
.catalog-hub__group + .catalog-hub__group {
    margin-top: 48px;
}
.catalog-hub__group-title {
    font-family: 'Montserrat-SemiBold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 120%;
    color: #203686;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #DDE1E6;
    text-wrap: pretty;
}

/* --- Условия поставок: карточки сайта, сдвинутые в колонки 4–12 ---------- */
.catalog-hub__terms {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 32px;
    grid-row-gap: 20px;
}
.catalog-hub__terms-inner {
    grid-column: 4 / 13;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 32px;
    grid-row-gap: 20px;
}
.catalog-hub__term {
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}
.catalog-hub__term-title {
    font-family: 'Montserrat-SemiBold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    margin-bottom: 8px;
}
.catalog-hub__term-text {
    font-family: 'Montserrat-Medium', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: #5B647D;
    margin: 0;
    text-wrap: pretty;
}
.catalog-hub__terms-more {
    grid-column: 1 / 3;
    margin: 4px 0 0;
}
.catalog-hub__terms-more a {
    font-family: 'Montserrat-Medium', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    color: #203686;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.catalog-hub__terms-more a:hover {
    text-decoration: none;
}

/* --- FAQ: список с волосяными разделителями, без коробок ----------------- */
.catalog-hub__faq {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 32px;
}
.catalog-hub__faq-item {
    grid-column: 4 / 12;
    padding: 20px 0;
    border-top: 1px solid #DDE1E6;
}
.catalog-hub__faq-item:first-child {
    padding-top: 0;
    border-top: 0;
}
.catalog-hub__faq-item:last-child {
    padding-bottom: 0;
}
.catalog-hub__faq-q {
    font-family: 'Montserrat-SemiBold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 130%;
    margin-bottom: 10px;
    text-wrap: pretty;
}
.catalog-hub__faq-a {
    font-family: 'Montserrat-Medium', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 155%;
    color: #5B647D;
    margin: 0;
    max-width: 42em;
    text-wrap: pretty;
}

/* --- Планшет: 970px — тот же порог, что у .section__caption в style.css --- */
@media (max-width: 970px) {
    .catalog-hub__intro-text,
    .catalog-hub__terms-inner,
    .catalog-hub__faq-item {
        grid-column: 1 / 13;
    }
    .catalog-hub__intro > .section-title-text-14 {
        grid-column: 1 / 13;
        margin-bottom: 12px;
    }
    .catalog-hub__group-title {
        font-size: 22px;
    }
}

/* --- Мобильный ----------------------------------------------------------- */
@media (max-width: 768px) {
    .catalog-hub__section {
        margin-top: 48px;
    }
    .catalog-hub__lead {
        font-size: 17px !important;
    }
    .catalog-hub__intro-text p {
        font-size: 15px;
    }
    .catalog-hub__group + .catalog-hub__group {
        margin-top: 32px;
    }
    .catalog-hub__group-title {
        font-size: 20px;
        margin-bottom: 16px;
    }
    .catalog-hub__terms-inner {
        grid-template-columns: 1fr;
    }
    .catalog-hub__terms-more {
        grid-column: 1 / 2;
    }
    .catalog-hub__term {
        padding: 16px;
    }
    .catalog-hub__faq-q {
        font-size: 16px;
    }
    .catalog-hub__faq-a {
        font-size: 15px;
    }
}

/* --- Посадочная «Рыба оптом»: счётчик наличия под плиткой раздела -----------
   Правка редизайна 04.09.2026: строку ходовых видов (владелец: «слишком много,
   ничего не цепляет») заменили счётчиком «N наименований в наличии» — приём
   взят с /sale/, где под баннером идёт ряд категорий со счётчиками. Плитка сама
   остаётся стандартной .catalog-sections-card; сетке нужен только контейнер,
   потому что теперь в ячейке два элемента, а не один. */
.ryba-optom__tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ryba-optom__tile-count {
    margin: 0;
    font-family: 'Montserrat-Medium', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 150%;
    color: #5B647D;
}
@media (max-width: 768px) {
    .ryba-optom__tile-count { font-size: 12px; }
}

/* Та же коллизия с сайтвайдным `a { display: block; }` (style.css:190) ломает ссылки
   на города во втором абзаце интро («Санкт-Петербурге», «Краснодаре») — без inline они
   выпадают из строки текста и рвут абзац. Правило намеренно узкое — висит на СВОЁМ классе
   .ryba-optom__intro, а не на общем .catalog-hub__intro-text (который использует и живой
   хаб /catalog/): общее правило поменяло бы вид страницы каталога, которую эта задача
   не трогает. */
.ryba-optom__intro a {
    display: inline;
}

/* --- Посадочная «Рыба оптом»: герой (редизайн 04.09.2026) -------------------
   Приём скопирован с .sale-hero (assets/css/style.css:16204, /sale/) — синий
   градиент, крупный белый заголовок, подзаголовок, кнопка, блок цифр справа.
   Классы СВОИ (ryba-optom__hero*), а не sale-hero__*: тот блок семантически про
   акции, и правка sale-hero* ради этой страницы (или наоборот) не должна валить
   вёрстку через общий класс — см. индексный файл. */
.ryba-optom__hero {
    background: linear-gradient(135deg, #203686 0%, #2a45a8 50%, #3b5cc6 100%);
    color: #fff;
    border-radius: 20px;
    padding: 50px 40px 45px;
    margin-top: 20px;
    box-sizing: border-box;
}
.ryba-optom__hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.ryba-optom__hero-text {
    flex: 1;
    min-width: 0;
    /* Потолок ширины текста. Баннер живёт в .wrapper-big и на широком мониторе тянется
       до 1756px, а колонка текста расти вместе с ним не должна: замер до правки — строка
       лида 640px, это комфортная длина. Без ограничения она уходила бы за 1300px. */
    max-width: 760px;
}
.ryba-optom__hero-eyebrow {
    font-family: 'Montserrat-SemiBold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .85;
    margin-bottom: 12px;
}
.ryba-optom__hero-title {
    font-family: 'Montserrat-Bold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 16px;
}
.ryba-optom__hero-subtitle {
    font-family: 'Montserrat-Medium', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
    opacity: .92;
    max-width: 640px;
    margin: 0 0 24px;
    text-wrap: pretty;
}
.ryba-optom__hero-btn {
    /* В assets/css/style.css:190 глобальный сброс `a { display: block; }` уже трижды
       ломал вёрстку этой страницы — display держим явным, а не полагаемся на то,
       что тег <a> сам ляжет строкой. НЕ убирать как «лишнее». */
    display: inline-flex;
    align-items: center;
    background: #FFC107;
    color: #203686;
    text-decoration: none;
    font-family: 'Montserrat-SemiBold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: 10px;
    transition: opacity .2s, transform .2s;
}
/* Кнопка героя открывает попап формы прайса, и для этого носит класс .openModal_callme
   (иначе build.js её не увидит — обработчик делегирован именно на этот селектор).
   Класс несёт свой вид: оранжевый текст и иконку-трубку с анимацией звонка. Для жёлтой
   кнопки героя это чужое, поэтому гасим обе вещи здесь, а не правим глобальный класс —
   он работает на десятке других мест. */
.ryba-optom__hero-btn.openModal_callme { color: #203686; font-size: 15px; font-weight: 600; gap: 0; }
.ryba-optom__hero-btn.openModal_callme::before { content: none; display: none; }
.ryba-optom__hero-btn.openModal_callme:hover { color: #203686; text-decoration: none; }

/* Заголовок страниц пагинации: тот же H1, но без баннера вокруг (владелец 16.09.2026).
   Размер меньше геройского — на второй странице заголовок уже не первый экран, а подпись
   к сетке; выше его крупная «Найдено: N» из витрины. */
/* Размер и начертание — как у геройского H1 (36px, Montserrat-Bold), только синим по
   белому вместо белого по синему: 28px владелец забраковал как мелкий — заголовок
   страницы не должен читаться мельче, чем «Найдено: N» под ним. */
.ryba-optom__title-plain {
    margin: 0 0 18px;
    font-family: 'Montserrat-Bold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    color: #203686;
}
/* Подпись под заголовком на страницах пагинации: «Страница 7 из 19». Серым и мелким —
   это указатель места, а не заголовок; спорить с H1 за внимание ему не нужно. */
.ryba-optom__title-sub {
    margin: -10px 0 18px;
    font-size: 14px;
    color: #5B647D;
}

/* Ритм страниц пагинации (замер 16.09.2026). Секции сайта расставлены через
   `.catalog-hub__section { margin-top: 80px }` — отступ рассчитан на то, что между ними
   стоят крупные блоки вроде геройского баннера. На страницах пагинации баннера нет, и те
   же 80px превращались в пустоту: от крошек до первой карточки набегало ~540px, из них
   больше половины — воздух. Поджимаем оба стыка: до шапки и от шапки до витрины. */
.ryba-optom__secstrip-sec--pagen { margin-top: 32px; }
.catalog-hub__section--tight { margin-top: 28px; }

@media screen and (max-width: 1095px) {
    .ryba-optom__title-plain { font-size: 28px; }
}
@media screen and (max-width: 760px) {
    .ryba-optom__title-plain { font-size: 22px; margin-bottom: 14px; }
}

.ryba-optom__hero-btn:hover {
    opacity: .92;
    transform: translateY(-1px);
    color: #203686;
}
.ryba-optom__hero-stats {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}
.ryba-optom__hero-stat {
    text-align: center;
    background: rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 16px 20px;
    min-width: 112px;
    box-sizing: border-box;
}
.ryba-optom__hero-stat-num {
    font-family: 'Montserrat-Bold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.2;
    color: #fff;
}
.ryba-optom__hero-stat-label {
    font-family: 'Montserrat-Medium', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #fff;
    opacity: .85;
    margin-top: 4px;
}
@media screen and (max-width: 1095px) {
    .ryba-optom__hero { padding: 30px 30px 25px; border-radius: 10px; margin-top: 16px; }
    .ryba-optom__hero-title { font-size: 28px; }
    .ryba-optom__hero-subtitle { font-size: 16px; }
}
@media screen and (max-width: 767px) {
    .ryba-optom__hero-inner { flex-direction: column; align-items: flex-start; }
    .ryba-optom__hero-stats { width: 100%; }
    .ryba-optom__hero-stat { flex: 1; }
}
/* Смартфон. Цифры держим В ОДНУ СТРОКУ (правка 04.09 по замечанию владельца):
   в колонку они растягивали баннер почти на весь экран, и до ассортимента
   приходилось листать. Заодно ужимаем отступы и кегль — баннер должен
   помещаться в экран вместе с началом плиток. */
@media screen and (max-width: 525px) {
    .ryba-optom__hero { padding: 18px 15px 16px; border-radius: 10px; margin-top: 10px; }
    .ryba-optom__hero-eyebrow { font-size: 10px; margin-bottom: 6px; }
    .ryba-optom__hero-title { font-size: 22px; margin-bottom: 10px; }
    .ryba-optom__hero-subtitle { font-size: 13px; line-height: 1.4; }
    .ryba-optom__hero-btn { font-size: 13px; padding: 11px 18px; }
    .ryba-optom__hero-inner { gap: 14px; }
    .ryba-optom__hero-stats { flex-direction: row; gap: 10px; }
    .ryba-optom__hero-stat { min-width: 0; flex: 1 1 0; padding: 10px 8px; }
    .ryba-optom__hero-stat-num { font-size: 22px; }
    .ryba-optom__hero-stat-label { font-size: 10px; margin-top: 2px; }
}

/* --- Посадочная «Рыба оптом»: полоса преимуществ ------------------------- */
.ryba-optom__adv {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 32px;
    grid-row-gap: 20px;
}
.ryba-optom__adv-item {
    background-color: #FFFFFF;
    border: 1px solid #DDE1E6;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}
.ryba-optom__adv-title {
    font-family: 'Montserrat-SemiBold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    margin-bottom: 8px;
    text-wrap: pretty;
}
.ryba-optom__adv-text {
    font-family: 'Montserrat-Medium', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: #5B647D;
    margin: 0;
    text-wrap: pretty;
}
@media (max-width: 768px) {
    .ryba-optom__adv { grid-template-columns: 1fr; }
    .ryba-optom__adv-item { padding: 16px; }
}

/* --- Посадочная «Рыба оптом»: карусель «В наличии» -----------------------
   same_goods/template.php (вендорский bitrix/components/bitrix/catalog.section/
   same_goods, менять нельзя) жёстко печатает на своём контейнере класс
   similar__carousel — это НЕ CSS-модификатор, это буквальный селектор, на который
   assets/js/build.js:351 сам вешает Slick (без нашего участия). Готовая стилизация
   стрелок в assets/css/style.css висит на .similar_carousel__holder — обёртке
   блока «Похожие товары» на карточке товара; вместе со стрелками она тащит ещё
   margin-top:140px и переопределение .caption/.section__caption под контекст
   карточки товара. Для этой страницы такая обёртка не подходит: она бы или
   отодвинула карусель от заголовка на 140px, или (если обернуть вместе с
   заголовком) поменяла бы шрифт заголовка вопреки остальным секциям страницы.
   Поэтому стрелки повторяем на СВОЁМ классе — те же иконки, то же позиционирование,
   без побочных эффектов чужого класса. position:relative на .slick-slider уже
   выставлен в style.css:3012 (Slick сам добавляет этот класс при инициализации,
   ДО этого правила в каскаде дело не доходит) — здесь его дублировать не нужно. */
.ryba-optom__feed { margin-top: 24px; }
@media screen and (min-width: 590px) {
    .ryba-optom__feed .slick-arrow {
        position: absolute;
        z-index: 70;
        top: -40px;
        transform: translateY(-100%);
        color: transparent;
        font-size: 0;
        line-height: 0;
    }
    .ryba-optom__feed .slick-prev[aria-disabled="false"] {
        left: calc(100% - 66px);
        background-image: url("/assets/images/svg/icons/arrow-prev-active.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 28px;
        height: 28px;
    }
    .ryba-optom__feed .slick-next[aria-disabled="false"] {
        left: calc(100% - 28px);
        background-image: url("/assets/images/svg/icons/arrow-next-active.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 28px;
        height: 28px;
    }
    .ryba-optom__feed .slick-next[aria-disabled="true"] {
        left: calc(100% - 28px);
        background-image: url("/assets/images/svg/icons/arrow-next.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 28px;
        height: 28px;
    }
    .ryba-optom__feed .slick-prev[aria-disabled="true"] {
        left: calc(100% - 66px);
        background-image: url("/assets/images/svg/icons/arrow-prev.svg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 28px;
        height: 28px;
    }
}
/* <590px: Slick у этого блока (build.js:351) не выключает стрелки, а в JS-опциях
   arrows:true задан безусловно для всех .similar__carousel сайта — на карточке
   товара это тоже так, и там их прячут в невидимые зоны тапа по краям слайда
   (см. .similar_carousel__holder на style.css:14067 в мобильной медиа-выборке),
   а не убирают вовсе. Повторяем тот же приём. */
@media screen and (max-width: 589px) {
    .ryba-optom__feed .slick-prev.slick-arrow,
    .ryba-optom__feed .slick-next.slick-arrow {
        position: absolute;
        transform: none;
        z-index: 100;
        top: 0;
        bottom: 0;
        width: 20%;
        height: 100%;
        color: transparent;
        font-size: 1px;
        line-height: 0;
    }
    .ryba-optom__feed .slick-prev.slick-arrow { left: 0; }
    .ryba-optom__feed .slick-next.slick-arrow { right: 0; }
}

/* 🔴 ПУСТОТА В КОНЦЕ ЛЕНТЫ (найдено 05.09.2026 по жалобе владельца, воспроизведено
   свайпами в эмуляции iPhone через CDP).

   Slick считает ширину слайда по ширине списка: на экране 390px это 378px, трек
   получает 12 × 378 = 4536px, а на последний слайд трек сдвигается на 11 × 378 = 4158px.
   Но каждый слайд несёт класс карточки листинга .catalog_main__products, у которого
   max-width: 345px (assets/css/style.css:5785) — инлайновая ширина от Slick режется,
   реальные слайды занимают 12 × 345 = 4140px. То есть после сдвига на 4158px окно
   списка смотрит ЗА последний слайд: карточек в кадре ноль, видна пустая полоса
   высотой с ленту. Замер: «видимых карточек 0» начиная с 11-го свайпа.

   Лечим рассинхрон в его источнике — снимаем ограничитель ширины с САМОГО СЛАЙДА,
   чтобы он стал ровно тем, что насчитал Slick. Внутренняя карточка свой max-width
   сохраняет. Правило узкое, на своём классе: .catalog_main__products общий с /catalog/,
   и трогать его целиком нельзя. На десктопе ничего не меняется: там слайд ~260px,
   до 345 не достаёт и ограничитель не срабатывал. */
.ryba-optom__feed .slick-slide { max-width: none; }

/* Размер плитки как в «Похожих товарах» на карточке товара (просьба владельца 05.09.2026).
   Замер эталона на 390px: слайд 245px, карточка внутри 223px, фото 220×166, название 14px —
   и следующая карточка выглядывает справа. У нас слайд занимал всю ширину (378px), карточка
   345px: те же элементы, но в полтора раза крупнее и без «выглядывания».

   Ширину слайда задаём здесь, а Slick на этой странице переинициализируется с
   variableWidth (см. скрипт в catalog/ryba-optom/index.php) — тогда он берёт ширину
   из этого правила и считает трек по реальным слайдам. Так «выглядывание» получается
   ДЕТЕРМИНИРОВАННО. На карточке товара тот же эффект выходит случайно: там Slick
   намерил список 245px при реальных 375px, то есть повезло на гонке замера — повторять
   такое нельзя, оно же и давало пустоту в конце ленты. */
/* 🔴 КАРТОЧКИ ЛЕНТЫ РЕЗАЛО НА ТРЁХ ДИАПАЗОНАХ (найдено 12.09.2026 по жалобе владельца,
   замерено Playwright на 15 ширинах от 360 до 1920).

   Корень один: сколько карточек показывать, решает НЕ эта страница, а общий
   assets/js/build.js:357-411 — его брейкпоинты (5 плиток шире 1680, 3 на 590–1000)
   рассчитаны на узкую колонку «Похожих товаров» в карточке товара, а у нас контейнер
   во всю ширину (1120–1170px). Что из этого выходило:

   1) шире 1680px — build.js:409 ставит слайду ИНЛАЙНОВЫЙ padding 0 25px при пяти
      плитках. Слайд 240px, под карточку остаётся 190px, а у .catalog_main__products
      жёсткий min-width:240px (style.css:5797) — карточка не ужимается, вылезает за свой
      слайд на 26px, и соседний слайд НАКРЫВАЕТ её сверху. Срезано: ярлык, дата, кнопка;
   2) 590–660px — три плитки по 174–188px, в такую ширину не влезает ряд цены, и кнопка
      корзины уезжала за край карточки у 10 позиций из 12 (у .catalog_main__products
      overflow:hidden — обрезалось молча);
   3) 960–1090px — карточка 203–239px, подпись «Дата выработки:» переносится на вторую
      строку, а у .product__data высота фиксирована 32px (style.css:6452) — дата уходила
      под обрез.

   Лечение — перестать зависеть от чужих брейкпоинтов: лента переинициализируется
   с variableWidth (скрипт в catalog/ryba-optom/index.php) и ширину слайда берёт
   отсюда. Тогда карточка НИКОГДА не уже 223px, и все три обреза исчезают разом.
   Проверено на 360/390/430/600/700/768/820/900/1024/1100/1280/1440/1600/1720/1920:
   вылета за слайд нет, кнопка и дата целы, горизонтальной прокрутки страницы нет,
   левый край первой карточки совпадает с заголовком.

   flex-basis, а не только width: сайт переопределяет .slick-track на display:flex
   (style.css:3947), а у карточки листинга стоит flex-grow:1 — в режиме variableWidth
   Slick растягивает трек до 60000px, и слайды-флексы делили бы его поровну по 5000px.
   Замерено при реализации 05.09.

   padding — это и есть зазор между плитками: соседние слайды дают 10+10 = 20px, как
   в «Похожих товарах» на карточке товара. Там его ставит инлайном build.js:393, но у нас
   карусель переинициализируется, инлайновые стили при этом теряются (замер 05.09: без
   своего правила зазор 2px). !important — против инлайнового padding:0 25px, который
   build.js:409 ставит на широких экранах: инлайн иначе победит этот файл. Отступы
   контейнера и слайдов нормализуем ТОЖЕ здесь, а не из скрипта страницы: очистка
   инлайна через jQuery не держится (замер на тесте 12.09 — build.js возвращал слайду
   margin 0 10px, карточка уезжала на 11px правее заголовка, а на широком экране
   контейнер оставался на -25px). Авторский !important сильнее инлайна — это работает. */
.ryba-optom__feed .similar__carousel { margin-left: -10px !important; margin-right: -10px !important; }
.ryba-optom__feed .slick-slide { margin: 0 !important; padding: 0 10px !important; box-sizing: border-box; }
@media screen and (min-width: 1200px) {
    .ryba-optom__feed .slick-slide { flex: 0 0 285px; width: 285px; }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .ryba-optom__feed .slick-slide { flex: 0 0 265px; width: 265px; }
}
@media screen and (max-width: 767px) {
    .ryba-optom__feed .slick-slide { flex: 0 0 245px; width: 245px; }
}

/* ═══ Фильтр витрины «Рыба оптом» (16.09.2026) ═══════════════════════════════
   Свой фильтр, а не bitrix:catalog.smart.filter (у страницы нет раздела ИБ4, разбор —
   в include/ryba_optom_core.php). Поэтому и стили свои, а не .catalog_main__filter:
   тот блок живёт внутри двухколоночной раскладки страницы раздела и тащит за собой
   её сетку, а здесь колонки задаёт .ro-layout.

   Ширина витрины — контейнер .wrapper (1120px), как у героя и плиток. При 240px
   фильтра карточкам остаётся ~850px, то есть три колонки по ~270px — ровно тот
   размер карточки, что и на страницах разделов. */
/* Колонки те же, что у листинга разделов (.catalog_main__wrapper, style.css:5700):
   252px под фильтр и зазор 50px — чтобы витрина и каталог выглядели одним механизмом. */
.ro-layout {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    grid-column-gap: 50px;
    align-items: start;
}
.ro-toggle, .ro-toggle-btn { display: none; }
/* Фильтра может не быть вовсе: по узкому запросу («мойва» — одна позиция) все оси
   схлопываются, показывать нечего. Тогда сетка идёт в одну колонку — иначе слева
   осталась бы пустая полоса в 252 px (поймано владельцем на проде 16.09.2026). */
.ro-layout--nofilter { grid-template-columns: minmax(0, 1fr); }

/* Фон страницы белый (класс page-catalog), поэтому белая панель на нём не читалась бы —
   берём сайтовый светло-серый #F4F7FB (.text-gray в style.css). */
/* 🔴 Высота ограничена экраном, прокрутка — внутри панели (16.09.2026).
   Было просто `position: sticky; top: 16px`, и на панели в ~700px это ломалось: на
   ноутбуке она выше окна, поэтому при скролле её верх («Раздел», «Производство»,
   «Хранение») уезжал за край и не возвращался, пока не долистаешь страницу обратно
   вверх. Владелец прислал скриншот, где первые три группы срезаны.
   Теперь панель никогда не выше видимой области, а список групп прокручивается сам
   в себе — заодно кнопка «Показать» всегда достижима, без ухода со страницы. */
/* Панель фильтра БЕЗ собственной прокрутки (16.09.2026, решение владельца).
   История: панель длиннее экрана, и sticky-версия при скролле срезала верхние группы;
   ограничение высоты с внутренней прокруткой это лечило, но прятало кнопку и заводило
   вторую полосу прокрутки рядом со страничной — читалось как поломка.
   Теперь панель просто стоит в потоке и прокручивается вместе со страницей, а роль
   «всегда под рукой» взяла на себя кнопка: она всплывает над списком (см. .ro-foot). */
.ro-filter {
    background: #F4F7FB;
    border-radius: 10px;
    padding: 18px;
}
.ro-groups { }
/* Всплывающая кнопка: `sticky; bottom` прижимает подвал к нижнему краю ЭКРАНА, пока
   панель видна, и отпускает его, когда панель кончилась. Фон и тень нужны, чтобы под
   кнопкой не просвечивали галочки. Отрицательные поля растягивают подложку на всю
   ширину панели поверх её внутренних отступов. */
.ro-foot {
    position: sticky;
    bottom: 12px;
    z-index: 2;
    margin: 10px -18px -18px;
    padding: 14px 18px 18px;
    background: #F4F7FB;
    border-top: 1px solid #E3E7EF;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 -10px 14px -10px rgba(20, 30, 70, .18);
}
/* В JS-режиме «Применить» живёт попапом у галочки, поэтому кнопка в подвале скрыта,
   а сам подвал нужен только ради «Сбросить всё» — то есть когда отбор уже применён.
   Без JS всё наоборот: попапа нет, подвал с кнопкой виден всегда. */
.ro-form--js .ro-apply { display: none; }
.ro-form--js .ro-foot { display: none; }
.ro-form--js.is-applied .ro-foot { display: block; }

/* Сам попап: встаёт в поток сразу за отмеченной строкой, с отступом под галочку. */
.ro-pop {
    display: inline-flex;
    align-items: center;
    /* Контейнер групп — flex-колонка, в ней ребёнок растягивается на всю ширину:
       без align-self кнопка выходила 191px вместо своих ~100 (замер 16.09). */
    align-self: flex-start;
    width: auto;
    margin: 8px 0 4px 25px;
    height: 34px;
    padding: 0 16px;
    border: 1px solid #FFED32;
    border-radius: 8px;
    background: #FFED32;
    color: #203686;
    font-family: 'Montserrat-SemiBold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(20, 30, 70, .35);
    animation: ro-pop-in .14s ease-out;
}
.ro-pop:hover { background: #FFF681; border-color: #FFF681; }
@keyframes ro-pop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ro-pop { animation: none; } }

.ro-group { border-top: 1px solid #EBEDF0; padding: 14px 0 4px; }
.ro-group:first-of-type { border-top: 0; padding-top: 0; }
.ro-group__title { font-size: 13px; font-weight: 600; color: #203686; margin-bottom: 10px; }
.ro-group__opts { display: flex; flex-direction: column; gap: 9px; }
/* Сетка, а не flex: у названий разная длина («Филе рыбы, стейки, фарш» против «Белое»),
   и во flex число справа выдавливалось за границу панели — на первом же скриншоте
   счётчики пропали у всех значений, кроме самых коротких. Три колонки фиксируют
   галочку, тянущееся имя и число, которое не сжимается. */
.ro-opt {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
}
.ro-opt input { width: 16px; height: 16px; accent-color: #203686; margin: 2px 0 0; flex: 0 0 auto; }
/* Счётчик — инлайн внутри названия. Отдельной колонкой (grid/flex) он схлопывался под
   сайтовым CSS до одного символа: числа «66», «405» обрезались, а «5» и «3» проходили —
   поймано на скриншоте 16.09.2026. Инлайн переносится вместе с текстом и не режется. */
.ro-opt__name { overflow-wrap: anywhere; color: #203686; }
.ro-opt__num { color: #969ba8; font-size: 12px; white-space: nowrap; }
/* Длинные списки (страна — два десятка значений) свёрнуты до шести. */
.ro-opt--extra { display: none; }
.ro-group__opts.is-expanded .ro-opt--extra { display: flex; }
.ro-more {
    align-self: flex-start; border: 0; background: none; padding: 0; margin-top: 2px;
    color: #203686; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline;
}
.ro-apply { width: 100%; }
.ro-reset { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: #969ba8; }

.ro-empty {
    background: #fff; border-radius: 10px; padding: 22px 24px; margin-bottom: 20px;
    font-size: 14px; line-height: 1.5; color: #5B647D;   /* .text-dark сайта, не чёрный */
}
.ro-empty a { display: inline; text-decoration: underline; color: #203686; }

/* ═══ Строка поиска по витрине (16.09.2026) ═══════════════════════════════════
   Стоит над сеткой товаров, внутри колонки листинга — то есть рядом с фильтром, а не
   над ним: фильтр отбирает по признакам, строка ищет по наименованию, и вместе они
   читаются как одна панель управления выдачей.
   Геометрия взята у чипов разделов (высота 44 у поля против 36 у чипа — в поле печатают,
   а не тыкают; рамка #D3D7E6, радиус 10, синий #203686 — палитра сайта). */
.ro-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
/* Поле тянется, кнопка и «сбросить» — по содержимому. min-width: 0 обязателен: без него
   flex-элемент не сжимается уже своего содержимого и на узкой колонке строка вылезает
   за границу сетки (те же грабли, что min-width:auto в листинге, память
   catalog_content_min_width_auto). */
.ro-search__field { flex: 1 1 260px; min-width: 0; display: block; margin: 0; }
.ro-search__input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 16px;
    border: 1px solid #D3D7E6;
    border-radius: 10px;
    background: #fff;
    color: #203686;
    font-size: 14px;
    /* Сафари рисует полю type=search собственную скруглённую рамку и игнорирует высоту. */
    -webkit-appearance: none;
            appearance: none;
}
.ro-search__input::placeholder { color: #969ba8; }
.ro-search__input:focus { outline: none; border-color: #203686; }
.ro-search__go {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 22px;
    border: 1px solid #FFED32;
    border-radius: 10px;
    background: #FFED32;
    color: #203686;
    font-family: 'Montserrat-SemiBold', Proxima Nova, Gilroy, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.ro-search__go:hover { background: #FFF681; border-color: #FFF681; }
/* display: inline-flex перебивает сайтовый сброс a { display: block } — иначе ссылка
   встаёт отдельной строкой под кнопкой (та же грабля, что у ссылки в блоке про прайс). */
.ro-search__clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 44px;
    font-size: 13px;
    color: #5B647D;
    text-decoration: underline;
}
.ro-search__clear:hover { color: #203686; }
/* Подпись под строкой: сколько нашлось из скольких. Заголовок витрины говорит «Найдено: N»,
   но не говорит, от чего это N — а «6 из 541» сразу объясняет, что сузил сам посетитель. */
.ro-search__note {
    margin: -6px 0 14px;
    font-size: 13px;
    color: #5B647D;
}


/* Узкие экраны: фильтр уезжает под кнопку. Кнопка — label скрытого чекбокса,
   поэтому отбор остаётся доступен и без JS. */
@media screen and (max-width: 1095px) {
    .ro-layout { grid-template-columns: minmax(0, 1fr); }
    /* На узких экранах панель не закреплена, а раскрывается кнопкой «Подбор» —
       ограничение высоты и внутренняя прокрутка там только мешали бы. */
    .ro-filter { display: none; margin-bottom: 16px; }
    .ro-toggle:checked ~ .ro-filter { display: block; }
    .ro-toggle-btn {
        display: inline-flex; align-items: center; gap: 8px; align-self: start;
        height: 44px; padding: 0 18px; margin-bottom: 14px;
        border: 1px solid #EBEDF0; border-radius: 10px; background: #fff;
        font-size: 13px; font-weight: 600; color: #203686; cursor: pointer;
    }
    .ro-toggle-num {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
        background: #203686; color: #fff; font-size: 11px;
    }
}

/* ═══ Полоса разделов вместо восьми крупных плиток (16.09.2026) ══════════════
   Ссылки и счётчики те же, что были на плитках, — менялась только форма: плитки
   с фото занимали около тысячи пикселей и дублировали группу «Раздел» в фильтре.
   Прокрутка вбок — как у полосы категорий на страницах разделов. */
.ryba-optom__secstrip-sec { padding-top: 6px; }

/* Вводный абзац между полосой разделов и витриной (18.09.2026). Собственных стилей у него
   НЕТ: раскладка и типографика взяты у блока «О компании» (.catalog-hub__intro) — тот же
   приём «подпись слева, текст в колонках 4–12». Здесь остаётся только отступ: секции сайта
   расставлены через 80px, а этот текст логически продолжает полосу разделов и вводит
   витрину — разносить их на два полных интервала незачем. */
.ryba-optom__lead-sec { margin-top: 28px; }
/* На десктопе чипы ПЕРЕНОСЯТСЯ, а не прокручиваются. Прокрутка здесь была ошибкой:
   девять чипов шире контейнера, последний («Фасованная рыба ТМ Влюблённым в Море»)
   обрывался у правого края, и ничто не намекало, что полосу можно листать вбок —
   мышью это неочевидно. Замечено владельцем 16.09.2026.
   На узких экранах прокрутка остаётся: там перенос дал бы четыре ряда чипов. */
.ryba-optom__secstrip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 6px;
}
@media screen and (max-width: 760px) {
    .ryba-optom__secstrip {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        /* Подсказка, что полосу можно листать: последний чип у края растворяется. */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
}
.ryba-optom__secchip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* Геометрия и цвета — как у полосы категорий на страницах разделов
       (.cat-strip__item, style.css:17882): высота 36, радиус 10, рамка #D3D7E6,
       текст синий #203686. На сайте чёрного текста нет вовсе — базовые цвета это
       синий #203686 и приглушённый #5B647D (.text-dark); мой прежний #1b1f2a
       выбивался из палитры (замечено владельцем 16.09.2026). */
    height: 36px;
    padding: 0 15px;
    border: 1px solid #D3D7E6;
    border-radius: 10px;
    background: #fff;
    color: #203686;
    font-size: 14px;
    white-space: nowrap;
}
.ryba-optom__secchip span { color: #969ba8; font-size: 12px; }
.ryba-optom__secchip:hover { border-color: #203686; color: #203686; }
/* Модификатор --own убран вместе с чипом «Своё производство» (16.09.2026). */

/* ═══ Шапка правой колонки витрины (18.09.2026) ══════════════════════════════
   Полоса разделов, вводный абзац и полоса преимуществ переехали внутрь .ro-listing,
   чтобы панель отбора начиналась у верха страницы — как левое меню категорий на
   страницах разделов. Раньше фильтр стартовал ниже текста, и над ним висела пустота
   в треть экрана, а чипы разделов шли от самого левого края страницы, мимо колонки.
   Своих отступов у переехавших блоков не было — их задавали секции (.catalog-hub__section
   80px, .ryba-optom__lead-sec 28px), поэтому ритм внутри колонки задаём здесь. */
.ro-listing > .ryba-optom__secstrip { margin-bottom: 20px; }
.ryba-optom__intro-in { margin-top: 0; margin-bottom: 4px; }
/* Текст от ЛЕВОГО края колонки, а не из 4-й колонки: подписи «Витрина» у этого абзаца
   больше нет (разбор — в комментарии разметки).
   Потолок строки 46em снят (решение владельца 18.09.2026): абзац тянется во всю ширину
   колонки, как описание раздела `.catalog_main__about` на страницах разделов — там своей
   максимальной ширины нет вовсе, текст ограничен только колонкой листинга. */
.ryba-optom__intro-in > .catalog-hub__intro-text { grid-column: 1 / 13; max-width: none; }
/* Полоса преимуществ внутри колонки: у неё своё `margin: 10px 0 22px` (style.css),
   сверху добавляем воздуха, чтобы она не слипалась с абзацем. */
.ro-listing > .catalog_utp { margin-top: 18px; }
/* Без фильтра (узкий поиск схлопывает все оси) колонка одна и текст снова во всю
   ширину страницы — потолок 46em у .catalog-hub__intro-text это удерживает. */
@media screen and (max-width: 1095px) {
    .ro-listing > .ryba-optom__secstrip { margin-bottom: 14px; }
}

/* ═══ Кнопки «Акции N» и «Своё производство» на узких экранах (18.09.2026) ══════
   🔴 Болезнь: у обеих кнопок на сайте ДВЕ копии, и показана всегда ровно одна.
   Копия в строке сортировки (.catalog_main__show_pill) включается только от 1096px,
   вторая копия живёт первым элементом полосы категорий (.cat-strip) и работает ниже
   1096px. У витрины полосы категорий НЕТ вовсе — её роль здесь играет панель отбора, —
   поэтому ниже 1096px не оставалось ни одной копии: на ноутбуке 1024 и на телефоне
   отбор по акциям и по своему производству был недостижим (поймано 16.09.2026).

   Лечим на витрине и только на витрине: правило scoped на .ro-listing, страницы разделов
   не трогаются — там ниже 1096px работает полоса категорий, и вторая видимая копия дала бы
   две одинаковые кнопки в двух соседних рядах.

   Галочка «Своё производство» в панели слева при этом никуда не делась и остаётся тем же
   отбором: кнопка завязана на ТУ ЖЕ ось фильтра (см. ekorOwnUrlOn/Off), поэтому двух
   состояний и двух счётчиков не появляется. */
@media screen and (max-width: 1095px) {
    .ro-listing .catalog_main__show_pill {
        display: inline-flex;
        box-sizing: border-box;   /* без него рамка добавляет 2px и пилюля выше селекта */
        height: 36px;
        margin: 0;                /* просветы между элементами ряда задаёт gap строки
                                     сортировки (правило ниже), свои поля пилюле не нужны */
        flex: 0 0 auto;
    }
}

/* ═══ Сама строка сортировки на витрине, узкие экраны (24.09.2026) ══════════════
   🔴 Болезнь (замер на проде, вьюпорт 440): строка занимала 130 px тремя блоками во всю
   ширину, а пилюля «Акции N» была ОБРЕЗАНА до 28 px при собственной ширине 100 —
   от неё на экране торчал огрызок «Акц».

   Откуда: ниже 525 px у `.catalog_main__show` в style.css жёсткий грид `auto 36px /
   36px 40px`. Он рисовал ту раскладку, какая была на страницах разделов до 11.09.2026:
   широкий селект сортировки, под ним «Показывать по N», справа колонка 36 px под
   иконку «Фильтры». На витрине кнопки «Фильтры» нет ($hideChrome в шаблоне листинга —
   у витрины свой фильтр со своей кнопкой «Подбор»), и в эту 36-пиксельную колонку
   попадала пилюля «Акции N». Вторая пилюля уезжала в неявный третий ряд и растягивалась
   во всю ширину колонки — кнопка-отбор выглядела как поле ввода.

   ⚠️ Почему грид вообще доживает до витрины: правки строки сортировки от 11–12.09.2026
   (она стала флексом на телефоне) есть в assets/css/style.css, но на прод в style.min.css
   НЕ доехали — сверка 24.09.2026 показала отставание прод-версии примерно на 11 КБ.
   Разделов это не портит: там 36-пиксельную колонку занимает своя кнопка «Фильтры».
   Поэтому лечим витрину у себя, а расхождение style.min.css — отдельная работа.

   Что делаем: на витрине строка — обычный флекс с переносом. На телефоне оба селекта
   («По алфавиту» и «Показывать по N») скрыты, и в строке остаются только два отбора —
   они встают в одну линию. Высота блока 130 → 36 px, обрезанных элементов нет (замер тот же).
   Прятать селекты на узких экранах владелец решал и раньше, 08.07.2026, тогда для чипов
   быстрого отбора; SEO-вердикт был вынесен там же: это чистые UX-контролы, не контент и
   не разметка, а их GET-параметры (`order_by`/`per_page`) скорее плодят дубли адресов.

   `!important` ровно один и по делу: `justify-content` в гриде style.css объявлен через
   `unset !important`, а important автора перебивает даже inline-стиль строки (у неё в
   разметке шаблона стоит `justify-content: flex-start`). Для `display` important не нужен —
   селектор с `.ro-listing` и так специфичнее. */
@media screen and (max-width: 1095px) {
    .ro-listing .catalog_main__show {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start !important;
        gap: 8px;
    }
    /* Оба холдера селектов — по содержимому: в гриде они несли grid-column и растягивались
       на всю колонку. Во флексе grid-column просто игнорируется. */
    .ro-listing .catalog_main__show .catalog__select_holder-1,
    .ro-listing .catalog_main__show .catalog__select_holder-2 {
        flex: 0 0 auto;
        margin: 0;
        min-width: 0;
    }
}

/* Телефон: размеры как у пилюль полосы категорий на этой же ширине (style.css:17906). */
@media screen and (max-width: 767px) {
    .ro-listing .catalog_main__show_pill { height: 34px; padding: 0 13px; font-size: 13.5px; }
    /* Оба селекта с телефона убраны (решение владельца 24.09.2026): в строке остаются
       только два отбора — «Акции N» и «Своё производство N», и они встают в одну линию.
       ⚠️ Цена решения: с телефона витрину больше НЕЛЬЗЯ отсортировать по цене. На
       разделах 11.09.2026 сортировку оставляли намеренно («Низкая цена» — рабочий
       инструмент оптовика), здесь владелец выбрал иначе. Понадобится вернуть — снять
       `display:none` у holder-1 и дать ему `width:176px`.
       На планшете и десктопе (от 768) оба селекта на месте. */
    .ro-listing .catalog_main__show .catalog__select_holder-1,
    .ro-listing .catalog_main__show .catalog__select_holder-2 { display: none; }
}