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

/*
    Цветовые свотчи. Тема жёстко задаёт обёртке цвета 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;
}

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

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

/* Закрытый раздел: страница с промокодом и пометка «только для просмотра» на
   карточке товара. На эталоне таких экранов нет — метрики берём от каталога:
   ширина .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;
    }
}