/*
    Наши точечные правки поверх стилей эталона. Всё, что здесь лежит, — это
    осознанные отступления от донора; вёрстка и остальной CSS переносятся
    дословно, свои стили сюда добавляются только с объяснением, зачем.
*/

/*
    Шрифт Jost для текста над каталогом (.catalog-intro) — файлы лежат локально
    в public/fonts, без обращения к сторонним хостингам шрифтов. Остальной сайт
    Jost не использует, поэтому объявляем его здесь, а не в общей теме.
*/
@font-face { font-family: 'Jost'; src: url('/fonts/Jost-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/fonts/Jost-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/fonts/Jost-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/fonts/Jost-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/fonts/Jost-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/*
    Цветовые свотчи. Тема жёстко задаёт обёртке цвета 24×24 и круглую форму —
    расчёт на цветной кружок. Но названия цветов у нас (как и у донора) выводятся
    текстовой плашкой: она шире обёртки, центрируется по ней и наезжает слева на
    подпись «Цвет:» — «ЦВЕ▉PURPLE▉». У донора этот дефект виден так же, а на
    прежнем сайте ropaworld.ru его уже правили ровно этим правилом — переносим его.
*/
div[data-attribute_name="attribute_pa_color"] .swatch-item-wrapper:has(.swatch-type-label) {
    width: auto;
    height: auto;
    border-radius: 0;
}

/*
    Поля адреса у последнего способа доставки. У эталона есть правило
    `ul.col-01 li:last-child .address-field_street|_house|_room { display:none }` —
    оно привязано к ПОЗИЦИИ, у донора последним в списке стоял способ, которому
    адрес не нужен. У нас последний — «Курьер по Москве», ему адрес обязателен,
    поэтому правило отменяется именно внутри блока адреса.
*/
ul.col-01 li:last-child .block-fake-adress .address-field_street,
ul.col-01 li:last-child .block-fake-adress .address-field_house,
ul.col-01 li:last-child .block-fake-adress .address-field_room {
    display: flex !important;
}

/*
    Кнопка «Показать предыдущие» над сеткой каталога. Появляется только при заходе
    по прямой ссылке ?page=2 и дальше — иначе показывать нечего (см. комментарий
    у the_lmp_js_data в layouts/app.blade.php). У донора эта кнопка выключена,
    поэтому её вида в эталоне нет; берём чёрную кнопку темы (.btn-black), а здесь
    задаём только раскладку: сама .btn-black растянута на 100% ширины.
*/
.lmp_load_more_button.br_lmp_prev_settings {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.lmp_load_more_button.br_lmp_prev_settings .lmp_button {
    /*
        Флекс задаётся здесь заново: у плагина есть своё
        `.lmp_load_more_button .lmp_button { display: inline-block }` — оно
        специфичнее, чем `display:flex` темы у `.btn-black`, поэтому надпись
        не центрировалась по вертикали, а ложилась в верх бокса по line-height.
    */
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 320px;
    padding: 0 40px;
    /* Метрики текста — как у кнопки «в корзину» темы (.btn.add-cart-link),
       а не 22px, которые плагин задаёт своей кнопке. */
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    text-decoration: none;
}

@media (max-width: 767px) {
    .lmp_load_more_button.br_lmp_prev_settings .lmp_button {
        min-width: 0;
        width: 100%;
    }
}

/* Оплата при получении доступна не для каждого способа доставки, и скрипт
   страницы помечает недоступный пункт классом .is-disabled. У темы состояния
   «выключено» нет вообще — без этого правила пункт выглядел обычным, но не
   нажимался. Пункт остаётся на месте (иначе список прыгает при переключении
   доставки), но заметно гаснет и показывает, что кликать бесполезно. */
.wc_payment_method.is-disabled {
    opacity: .35;
}

.wc_payment_method.is-disabled label {
    cursor: not-allowed;
}

/* Бейджи Яндекс Пэй рядом со способами оплаты (их у эталона нет вообще).
   Встают под подписью способа, с тем же левым отступом, что и текст лейбла —
   у темы он задан отступом под кружок радиокнопки. */
.wc_payment_method .payment-badge {
    display: block;
    margin: 8px 0 0 30px;
}

.wc_payment_method.is-disabled .payment-badge {
    display: none;
}

/* Тот же бейдж на странице товара — под кнопкой «В корзину». Сам бейдж inline,
   поэтому вертикальный отступ на нём не действует: делаем его блоком, иначе он
   вплотную прилипает к кнопке (и на 3px заезжает под неё). */
.variations_form .add-to-cart-single + .payment-badge {
    display: block;
    margin-top: 12px;
}

/* Подсказка и погашенная кнопка, когда стоимость доставки ещё не известна
   (перевозчик считает цену по адресу или пункту выдачи). */
.shipping-unknown-note {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.3;
    color: #8A8A8A;
}

#place_order:disabled,
#place_order.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Итоги заказа на оформлении едут со скроллом (у эталона блок обычный и уезжает
   вверх — отступление согласовано). Родитель .checkout — flex с align-items:
   flex-start, так что sticky работает без доработок. Отступ сверху = высота
   липкой шапки темы (107px) + 12px. Только на десктопе: на мобильных колонки
   идут одна под другой и прилипать нечему. */
@media screen and (min-width: 769px) {
    .ordering-checkout-right {
        position: sticky;
        top: 119px;
    }
}

/* Иконки «−»/«+» у кнопок количества. В main.css темы это единственные два
   url() с АБСОЛЮТНЫМ путём от корня (`/wp-content/...`) — у донора он верный, а
   у нас тема лежит под /theme/, поэтому картинки отдавали 404 и кнопки были
   пустыми. Перекрываем правильными путями (файл подключается после темы). */
.plus.button.wp-element-button {
    background-image: url('/theme/wp-content/themes/ropa-temp/assets/img/icons/plus.svg');
}

.minus.button.wp-element-button {
    background-image: url('/theme/wp-content/themes/ropa-temp/assets/img/icons/minus.svg');
}

/* На ≤768px тема скрывает кнопку внутри формы и показывает свою в липкой панели
   .product-mobile-description — бейдж там дублируется и переключается тем же
   брейкпоинтом, иначе на мобиле он висит сам по себе под размерами. */
.product-mobile-description .payment-badge {
    display: none;
}

@media screen and (max-width: 768px) {
    .variations_form .add-to-cart-single + .payment-badge {
        display: none;
    }

    .product-mobile-description .payment-badge {
        display: block;
        margin-top: 10px;
    }
}

/* Список пунктов выдачи Яндекс Доставки на оформлении. У Яндекса нет готового
   виджета карты для сайта (в отличие от СДЭК), поэтому пункты выбираются списком —
   темой такой блок не предусмотрен, стили наши. */
.yandex-pvz {
    margin-top: 10px;
    border: 1px solid #0c0c0c;
    background: #fff;
}

.yandex-pvz__search {
    width: 100%;
    border: none;
    border-bottom: 1px solid #0c0c0c;
    padding: 10px 12px;
}

.yandex-pvz__list {
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yandex-pvz__list li {
    padding: 10px 12px;
    border-bottom: 1px solid #ececec;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.yandex-pvz__list li:hover {
    background: #f6f5f1;
}

.yandex-pvz__list li strong {
    font-size: 13px;
    text-transform: uppercase;
}

.yandex-pvz__list li span {
    font-size: 12px;
    color: #6b6b6b;
}

.yandex-pvz__empty {
    cursor: default;
    color: #6b6b6b;
}

/* Модалка выбора пункта выдачи Яндекс Доставки: карта + список.
   У Яндекс Доставки нет готового виджета для сайта (у СДЭК он есть), поэтому
   карта наша — на Яндекс.Картах, с тем же ключом, что и виджет СДЭК. */
.ymap-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(12, 12, 12, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ymap-modal__box {
    background: #fff;
    border: 1px solid #0c0c0c;
    width: min(1100px, 100%);
    height: min(680px, 100%);
    display: flex;
    flex-direction: column;
}

.ymap-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #0c0c0c;
}

.ymap-modal__title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
}

.ymap-modal__close {
    font-size: 18px;
    line-height: 1;
    color: #0c0c0c;
}

.ymap-modal__body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.ymap-modal__map {
    flex: 1 1 auto;
    min-height: 0;
}

.ymap-modal__side {
    width: 320px;
    border-left: 1px solid #0c0c0c;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ymap-modal__search {
    border: none;
    border-bottom: 1px solid #0c0c0c;
    padding: 10px 12px;
}

.ymap-modal__list {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ymap-modal__list li {
    padding: 10px 12px;
    border-bottom: 1px solid #ececec;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ymap-modal__list li:hover {
    background: #f6f5f1;
}

.ymap-modal__list li strong {
    font-size: 13px;
    text-transform: uppercase;
}

.ymap-modal__list li span {
    font-size: 12px;
    color: #6b6b6b;
}

.ymap-choose {
    margin-top: 8px;
    background: #0c0c0c;
    color: #fff;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
}

@media (max-width: 767px) {
    .ymap-modal {
        padding: 0;
    }

    .ymap-modal__box {
        width: 100%;
        height: 100%;
        border: none;
    }

    .ymap-modal__body {
        flex-direction: column;
    }

    .ymap-modal__map {
        flex: 0 0 55%;
    }

    .ymap-modal__side {
        width: 100%;
        border-left: none;
        border-top: 1px solid #0c0c0c;
        flex: 1 1 auto;
    }
}

.ymap-modal__note {
    padding: 10px 12px;
    font-size: 12px;
    color: #a15c00;
    border-bottom: 1px solid #ececec;
}

/* Подсказки адреса (город, улица, дом). У темы стилизован только #city-list
   голым списком в 18px без единого состояния наведения — читать его тяжело, а
   строки в нём слипаются. Здесь общий вид для всех трёх списков: строка-пункт с
   зоной нажатия, подсветка наведённого и выбранного стрелками, серое уточнение
   (район/регион) под названием.

   Списки улицы и дома позиционируются поверх соседних полей: колонка адреса
   узкая, и список, раздвигающий её, прыгал бы по вёрстке при каждом вводе.
   Список городов оставлен в потоке, как у эталона, — там он ничего не перекрывает.

   Селекторы по id, а не по одному классу: у темы #city-list задан идентификатором,
   и правило с меньшей специфичностью его бы не перебило. */
#city-list.suggest-list,
#street-list,
#house-list {
    height: auto;
    max-height: 280px;
    overflow: auto;
    border: 1px solid #8E8E8E;
    background: #FFF;
    padding: 6px 0;
    display: block;
    font-size: 16px;
    line-height: 1.25;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

#street-list,
#house-list {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    margin-top: 2px;
}

#city-list .suggest-item,
#street-list .suggest-item,
#house-list .suggest-item {
    display: block;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: 400;
    background: transparent;
    /* Тема раздаёт всем li в оформлении отступ снизу в 20px и нижнюю рамку —
       в выпадающем списке от этого пункты разъезжались отдельными карточками. */
    margin: 0;
    border: 0;
    border-bottom: 1px solid #ECEAE3;
    /* Метрики тоже задаём сами: у li в оформлении line-height 30px, из-за него
       строка подсказки была высотой в 69px вместо 48px. */
    font-size: 16px;
    line-height: 1.25;
    /* Названия из OSM бывают длинными («площадь Тверская Застава») — переносим
       их, а не режем: адрес важнее ровной высоты строки. */
    overflow-wrap: anywhere;
}

#city-list .suggest-item:last-child,
#street-list .suggest-item:last-child,
#house-list .suggest-item:last-child {
    border-bottom: 0;
}

#city-list .suggest-item:hover,
#street-list .suggest-item:hover,
#house-list .suggest-item:hover,
#city-list .suggest-item.is-active,
#street-list .suggest-item.is-active,
#house-list .suggest-item.is-active {
    background: #F2F0E9;
}

/* Метрики строки задаются на этих двух span'ах, а не на li: у li в оформлении
   line-height 30px из темы, и одна строка подсказки занимала 67px вместо 40. */
.suggest-item__main {
    display: block;
    font-size: 16px;
    line-height: 1.25;
}

.suggest-item__main strong {
    font-weight: 700;
}

.suggest-item__hint {
    display: block;
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.2;
    color: #8E8E8E;
}

.address-field_street,
.address-field_house {
    position: relative;
}

/* Примерный срок доставки рядом с подписью «ДОСТАВКА:» в итогах заказа. У
   эталона срока нет вовсе (там доставку считал менеджер после заказа), поэтому
   вид наш: приписка серым, чтобы не спорить с суммой справа. */
.review-pay-order-item_shipping .shipping-days {
    margin-left: 6px;
    font-size: 12px;
    color: #8A8A8A;
    text-transform: none;
    white-space: nowrap;
}

/* Недоступный способ доставки (сейчас это самовывоз, когда товара нет на складе
   выдачи). У эталона такого состояния нет: там способы всегда кликабельны —
   гасим сами, чтобы покупатель видел причину, а не молча неработающую строку. */
.shipping-method--disabled {
    opacity: .45;
}

.shipping-method--disabled label {
    cursor: not-allowed;
}

/* Причина отказа при оформлении (самовывоза нет, доставка не посчиталась, не
   заполнено поле). У эталона такого блока нет: там сообщения рисовал плагин
   WooCommerce, а класс .woocommerce-error тема прячет display:none !important. */
.checkout-errors {
    margin: 0 0 24px;
    padding: 14px 18px;
    list-style: none;
    border: 1px solid #000;
    background: #fff;
    font-size: 14px;
    line-height: 1.4;
}

.checkout-errors li + li {
    margin-top: 6px;
}

/* Шапка при прокрутке (согласовано с владельцем, отступление от эталона).
   1) Эталон при скролле вниз уводит шапку наверх классом .hidden — отменяем,
      шапка должна оставаться на виду всегда.
   2) Компактный вид вешаем на СВОЙ класс .header--compact (ставит storefront.js
      при scrollY > 50), а не на .fixed/.hidden темы: те переключаются при каждой
      смене направления и .fixed остаётся даже наверху страницы.
   3) Чёрная линия снизу — чтобы шапка не сливалась с белым контентом. */
.header.hidden {
    transform: none;
}

.header {
    transition: transform .3s ease-in-out, padding .2s ease, border-color .2s ease;
}

.header--compact {
    border-bottom: 1px solid #0C0C0C;
}

@media screen and (min-width: 769px) {
    .header--compact {
        padding: 16px 0;
    }

    .header--compact .header-block__logo {
        font-size: 30px;
    }

    .header-block__logo {
        transition: font-size .2s ease;
    }
}

/* Наверху страницы линии быть не должно: тема оставляет свой класс .fixed
   (с бордером) даже после возврата к нулю прокрутки. */
.header:not(.header--compact) {
    border-bottom-color: transparent;
}

/* Уменьшенные копии фотографий (srcset + WebP) требуют обёртки <picture>, которой
   у эталона нет. Сам <picture> — строчный элемент, поэтому в тех местах, где тема
   рассчитывает на блочную или flex-раскладку картинки, он бы дал лишнюю строку и
   другую ширину. Делаем обёртку прозрачной для раскладки: размеры по-прежнему
   задаёт <img> правилами темы. */
.product-item-top picture,
.gallery-top-container picture,
.banner-block-images picture {
    display: block;
    width: 100%;
    line-height: inherit;
}

/* В .gallery-top-container картинка у эталона — flex-элемент, то есть блочная.
   Внутри <picture> она снова строчная и добавляет 5px базовой линии — возвращаем. */
.gallery-top-container picture img {
    display: block;
}

/* Срок доставки в блоке способа — под адресом выбранного пункта выдачи.
   У эталона такой строки нет вовсе (там и сроков нет), поэтому метрики берём
   от соседних подписей темы: размер как у .col-03 label, цвет чёрный, чтобы
   строка читалась, но не спорила с жирным адресом .pickup-title. */
.method-days {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #0C0C0C;
}

.method-days span {
    font-weight: 600;
}

@media (max-width: 768px) {
    .method-days {
        font-size: 14px;
    }
}

/* Текст под каталогом на странице категории (поле «Текст под каталогом» в админке).
   На эталоне такого блока нет — метрики берём от контейнера каталога: та же
   ширина .content-width, спокойный серый цвет, чтобы блок читался как справка,
   а не спорил с товарами. */
.catalog-seo-text {
    margin: 40px 0 8px;
}

/* Свёрнутое состояние: блок остаётся в разметке (его читают поисковики), но
   уезжает за пределы экрана — приём «visually hidden», а не display:none. */
.catalog-seo.is-collapsed .catalog-seo-text {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Кнопка над футером: тонкая ссылка, а не чёрная кнопка темы — она не должна
   спорить с «В корзину» на карточках. */
.catalog-seo__toggle {
    display: inline-block;
    margin: 32px 0 8px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    background: none;
    color: #1a1a1a;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.catalog-seo__toggle:hover {
    border-bottom-color: #1a1a1a;
}

/* Развернули — кнопка больше не нужна. */
.catalog-seo:not(.is-collapsed) .catalog-seo__toggle {
    display: none;
}

@media (max-width: 768px) {
    .catalog-seo__toggle {
        margin-top: 24px;
    }
}

.catalog-seo-text .content-width {
    color: #5a5a5a;
    font-size: 15px;
    line-height: 1.6;
}

/* Текст приходит из визуального редактора, поэтому в нём бывают заголовки,
   списки, ссылки и картинки — правила те же, что у текста тизера коллекции. */
.catalog-seo-text h2,
.catalog-seo-text h3,
.catalog-seo-text h4 {
    margin: 20px 0 8px;
    color: #1a1a1a;
    font-size: 18px;
    line-height: 1.3;
}

.catalog-seo-text h3 {
    font-size: 16px;
}

.catalog-seo-text h4 {
    font-size: 15px;
}

.catalog-seo-text p {
    margin: 0 0 12px;
}

.catalog-seo-text ul,
.catalog-seo-text ol {
    margin: 12px 0;
    padding-left: 20px;
}

.catalog-seo-text ul {
    list-style: disc;
}

.catalog-seo-text ol {
    list-style: decimal;
}

.catalog-seo-text li {
    margin-bottom: 6px;
}

.catalog-seo-text a {
    color: #1a1a1a;
    text-decoration: underline;
}

.catalog-seo-text img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .catalog-seo-text {
        margin-top: 28px;
    }
}

/* Текст над товарами: оформление текста берёт у .catalog-seo-text, свои только
   отступы — стоит между хлебными крошками и кнопкой «Фильтры» — и шрифт Jost
   (см. @font-face выше), которым этот блок должен набираться отдельно от
   остального сайта. */
.catalog-intro.catalog-seo-text {
    margin: 0 0 24px;
    font-family: 'Jost', sans-serif;
}

.catalog-intro .content-width > :last-child {
    margin-bottom: 0;
}

/* Боковой отступ — как у .filters и .catalog в media.css темы. */
@media screen and (max-width: 1350px) {
    .catalog-intro {
        padding: 0 16px;
    }
}

/* Плашка на странице предпросмотра раздела (видна только администраторам). */
.catalog-preview-bar {
    padding: 10px 16px;
    background: #1a1a1a;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.catalog-preview-bar a {
    margin-left: 8px;
    color: #fff;
    text-decoration: underline;
}

/* Закрытый раздел: страница с промокодом и пометка «только для просмотра» на
   карточке товара. На эталоне таких экранов нет — метрики берём от каталога:
   ширина .content-width, шрифт и кнопка как у форм оформления заказа. */
.category-lock {
    max-width: 520px;
    margin: 80px auto 120px;
    text-align: center;
}

.category-lock__title {
    font-size: 28px;
    margin-bottom: 16px;
}

.category-lock__text {
    color: #5a5a5a;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.category-lock__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-lock__input {
    box-sizing: border-box;
    width: 100%;
    height: 54px;
    padding: 0 16px;
    border: 1px solid #0C0C0C;
    font-size: 16px;
    text-align: center;
}

/* Высота и цвет достаются от .btn-black темы — здесь только курсор. */
.category-lock__btn {
    cursor: pointer;
}

.category-lock__error {
    margin-top: 16px;
    color: #c0392b;
    font-size: 15px;
}

/* Товар закрытого раздела: вместо кнопки покупки — спокойная подпись. */
.view-only-note {
    margin: 16px 0;
    font-size: 16px;
    color: #5a5a5a;
}

@media (max-width: 768px) {
    .category-lock {
        margin: 48px auto 80px;
        padding: 0 16px;
    }

    .category-lock__title {
        font-size: 22px;
    }
}

/* --- Страница запуска коллекции (обратный отсчёт) ------------------------- */
/* У эталона такой страницы нет: каркас взят от текстовых страниц, а баннер,
   отсчёт и текст под ним размечены здесь. Цвета и обводки — те же, что у кнопок
   темы (#0C0C0C по кремовому фону). */

.collection-teaser {
    max-width: 900px;
    margin: 0 auto 120px;
    text-align: center;
}

.collection-teaser__banner {
    margin-bottom: 48px;
}

.collection-teaser__banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* Селектор с тегом — иначе правило выше (тоже с тегом) перебивает по весу и видны обе картинки. */
.collection-teaser__banner img.collection-teaser__banner-mobile {
    display: none;
}

.collection-teaser__title {
    margin: 0 0 16px;
    font-size: 48px;
    line-height: 1.1;
    text-transform: uppercase;
}

.collection-teaser__lead {
    margin: 0 auto 48px;
    max-width: 620px;
    font-size: 18px;
    line-height: 1.6;
    color: #5a5a5a;
}

.collection-teaser__timer {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 56px;
}

.collection-teaser__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
    padding: 24px 12px;
    border: 1px solid #0C0C0C;
}

.collection-teaser__num {
    font-size: 56px;
    line-height: 1;
    /* Цифры не должны прыгать по ширине при смене секунды. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.collection-teaser__label {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5a5a5a;
}

/* Текст под отсчётом набирается в редакторе админки — задаём только базовую
   типографику, разметку внутри не трогаем. По центру, как заголовок и строка над
   таймером: выравнивание отдельного абзаца при этом можно задать в самом редакторе. */
.collection-teaser__text {
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
}

/* Списки в тексте: как в описаниях товаров у темы — точками с отступом. */
.collection-teaser__text ul {
    list-style: disc;
    padding-left: 20px;
    margin: 12px 0;
    /* Пункты читаются с левого края, а сам список стоит по центру колонки:
       при text-align: center маркеры и строки списка разъезжаются. */
    display: table;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.collection-teaser__text li {
    margin-bottom: 6px;
}

.collection-teaser__text img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .collection-teaser {
        margin-bottom: 72px;
        padding: 0 16px;
    }

    .collection-teaser__banner img.collection-teaser__banner-desktop {
        display: none;
    }

    .collection-teaser__banner img.collection-teaser__banner-mobile {
        display: block;
    }

    .collection-teaser__title {
        font-size: 28px;
    }

    .collection-teaser__lead {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .collection-teaser__timer {
        gap: 8px;
    }

    .collection-teaser__unit {
        min-width: 0;
        flex: 1;
        padding: 14px 4px;
    }

    .collection-teaser__num {
        font-size: 28px;
    }

    .collection-teaser__label {
        font-size: 10px;
    }
}

/* Утилиты «спрятать на мобильном/на десктопе» для текста, набранного в
   визуальном редакторе (кнопка «Исходный код» → добавить class на нужный
   блок). Брейкпоинт 768px — как везде в этом файле. */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* «С этим носят» на карточке товара: отступы как у слайдера новинок на главной
   (.new-collect-slider в main.css/media.css темы), у которого другой класс. */
.related-products {
    padding-top: 0;
}

.related-slider {
    margin-left: 63px !important;
    position: relative;
}

@media (max-width: 1350px) {
    .related-slider {
        margin-left: 16px !important;
    }
}

/* Выключенные стрелки (карточек меньше, чем помещается) — прозрачнее. */
.related-slider .swiper-button-disabled {
    opacity: .3;
    cursor: default;
}

/* На телефоне media.css темы гасит стрелки у всех слайдеров (у неё листают только
   свайпом). В «Смотрите ещё» и в новинках на главной они нужны, поэтому
   возвращаем — но своей раскладкой: одна у левого края, другая у правого, на
   белой подложке, чтобы читались и на тёмном фото. Позиции темы (обе стрелки
   справа, right: 41/92px) на узком экране не годятся, поэтому переопределяем
   и :hover-сдвиг. */
@media screen and (max-width: 768px) {
    .related-slider .slider__prevCol,
    .related-slider .slider__nextCol,
    .related-slider .slider__prevCol:hover,
    .related-slider .slider__nextCol:hover,
    .new-collect-slider .slider__prevCol,
    .new-collect-slider .slider__nextCol,
    .new-collect-slider .slider__prevCol:hover,
    .new-collect-slider .slider__nextCol:hover {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .85);
        top: 34%;
    }

    .related-slider .slider__prevCol,
    .related-slider .slider__prevCol:hover,
    .new-collect-slider .slider__prevCol,
    .new-collect-slider .slider__prevCol:hover {
        left: 8px;
        right: auto;
    }

    .related-slider .slider__nextCol,
    .related-slider .slider__nextCol:hover,
    .new-collect-slider .slider__nextCol,
    .new-collect-slider .slider__nextCol:hover {
        right: 12px;
        left: auto;
    }

    .related-slider .swiper-arrow-effects img,
    .new-collect-slider .swiper-arrow-effects img {
        width: 9px;
        height: auto;
    }
}

/* Строка «С этим носят» в списке спойлеров карточки — вид как у .spoiler-head
   (main.css / media.css темы), но это ссылка-якорь на блок под карточкой. */
.related-link-wrap {
    border-top: 1px solid #E7E7E7;
    border-bottom: 1px solid #E7E7E7;
}

.related-link {
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0;
    color: inherit;
}

@media screen and (max-width: 768px) {
    .related-link {
        font-size: 15px;
        padding: 23px 0;
    }
}

/* Шапка висит сверху — без отступа заголовок блока уехал бы под неё. */
#related {
    scroll-margin-top: 110px;
}