/* ───────────────────────────────────────────────────────────────────────────
   brick24 — точечные правки интерфейса, 25.08.2026

   ОТДЕЛЬНЫМ ФАЙЛОМ, а не правкой style.bundle.css: бандл минифицирован
   и собирается сборщиком (память проекта mobile-perf-pipeline), правка в нём
   потерялась бы при следующей сборке и не откатывалась бы по одному файлу.
   Подключается ПОСЛЕ бандла — поэтому специфичность повышать не нужно там,
   где селектор тот же.

   Каждый блок объясняет, ЧТО измерено и ПОЧЕМУ меняется.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. ПЛАШКА ВЫБОРА РЕГИОНА НЕ ДОЛЖНА ЗАКРЫВАТЬ ШАПКУ ──────────────────────
   Замер до правки (Playwright, 375×812, карточка товара):
     .js-location-popup  position:fixed  top:20  height:202
     перекрывает: a.header__logo, a.header__phone-link, div.js-burger,
                  ul.breadcrumbs (целиком), h1.item-block__name
     document.elementFromPoint в её середине возвращает саму плашку,
     то есть она ещё и перехватывает касания в этой зоне.
   68% трафика — смартфоны, отказы на них 45,7%. Первое, что видит
   человек из поиска, — вопрос о регионе поверх названия товара.

   Решение: убрать её с верха вниз и сделать одной строкой.
   Низ выбран потому, что там нет ничего важного: кнопка звонка Envybox
   висит в 57–113 px от нижнего края, полоса высотой ~64 px её не задевает. */
@media (max-width: 1024px) {
    .header__location-popup {
        /* position задаём ЯВНО. В бандле `position:fixed` лежит в медиа-запросе
           max-width:767px, а этот блок — до 1024px. Понадеявшись на наследование,
           я на 768 получил absolute + bottom:0 + min-width:0 => коробку 32 px
           за пределами экрана. Разбор — FINDINGS §1.52: правило из чужого файла
           берётся вместе с УСЛОВИЕМ ЕГО ПРИМЕНЕНИЯ, а не по имени селектора. */
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 0.75rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        box-shadow: 0 -0.125rem 0.75rem rgba(20, 24, 62, 0.14);
        z-index: 30;
    }

    /* Вопрос в одну строку вместо двух абзацев друг под другом */
    .header__location-popup .header__location-question {
        display: flex;
        align-items: baseline;
        gap: 0.3em;
        flex-wrap: wrap;
        margin: 0;
        min-width: 0;
    }

    .header__location-popup .header__location-question p {
        margin: 0;
        font-size: 0.9375rem;
        line-height: 1.2;
    }

    .header__location-popup .header__location-buttons {
        display: flex;
        gap: 0.5rem;
        flex: 0 0 auto;
    }

    /* Кнопки — не меньше 44 px по высоте: это минимальная цель для пальца */
    .header__location-popup .header__location-button {
        min-height: 2.75rem;
        padding: 0 0.875rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-size: 0.875rem;
    }
}

/* Вопрос и две кнопки в одну строку помещаются только начиная с планшета.
   На телефоне ставим кнопки ПОД вопрос — всегда, а не по подобранному порогу.
   Почему не порог: сперва я поставил перенос на 360 px и на 375 кнопки наехали
   на текст (снимок popup-fixed-375). Ширина, при которой станет тесно, зависит
   не от экрана, а от длины названия города: «Москва» короче, чем
   «Санкт-Петербург». Порог, подобранный под один город, сломается на другом. */
@media (max-width: 767px) {
    .header__location-popup {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 0.625rem;
    }
    .header__location-popup .header__location-question {
        flex: 1 1 100%;
    }
    .header__location-popup .header__location-buttons {
        flex: 1 1 100%;
        width: 100%;
    }
    .header__location-popup .header__location-button {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ── 2. НА ДЕСКТОПЕ ПЛАШКА ПЕРЕКРЫВАЕТ ХЛЕБНЫЕ КРОШКИ ───────────────────────
   Замер: top=117, h=82 — перекрывает ul.breadcrumbs (h1 НЕ задет, проверено).
   Здесь это осознанно оставлено как есть: плашка привязана к переключателю
   города, то есть ведёт себя как выпадающий список, и перекрытие того, что
   под ним, — нормальное поведение выпадающего списка. Подъём её выше загнал бы
   её внутрь полосы шапки, что хуже.
   Единственное, чего не хватало, — она не читалась как всплывающий слой:
   плоская коробка на плоском фоне выглядит как съехавший блок вёрстки.
   Даём тень и явный порядок наложения. */
@media (min-width: 1025px) {
    .header__location-popup {
        z-index: 40;
        box-shadow: 0 0.5rem 1.5rem rgba(20, 24, 62, 0.12);
    }
}

/* ── 2б. КОРЗИНА В ШАПКЕ НА ТЕЛЕФОНЕ ────────────────────────────────────────
   Замер до правки: на 375 все ссылки на /cart/ имели поле 0×0 либо top=-154
   (внутри закрытого меню). Видимой корзины не было вовсе, при том что
   68% трафика — смартфоны.
   На десктопе корзина уже есть сбоку, поэтому в шапке показываем её только
   до 1024 px — иначе получилось бы два значка об одном и том же. */
.header__cart {
    display: none;
}

@media (max-width: 1024px) {
    .header__cart {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }

    /* Кнопка приходит из общего шаблона виджета — там она позиционируется
       родителем. В шапке возвращаем её в обычный поток. */
    .header__cart .widget__button {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0;
    }

    /* Счётчик товаров — маленькая метка в углу значка. Прячем, когда пусто:
       кружок с нулём сообщает «пусто» хуже, чем его отсутствие. */
    .header__cart .widget__button-count {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 1.125rem;
        height: 1.125rem;
        padding: 0 0.25rem;
        border-radius: 0.5625rem;
        font-size: 0.6875rem;
        line-height: 1.125rem;
        text-align: center;
    }

    .header__cart .widget__button-count:empty {
        display: none;
    }

    .header__cart .widget__button:focus-visible {
        outline: 0.125rem solid #14183e;
        outline-offset: 0.125rem;
    }
}

/* ── 2в. МЁРТВЫЙ ВОЗДУХ В ПЛИТКЕ КАТАЛОГА ────────────────────────────────────
   Замер до правки (боевой, 1440): плитка «Кирпич» 504×760, картинка 504×504 —
   между заголовком и изображением 199 px пустоты, у «Напольная плитка» 103 px.
   На 1025 то же: 2 плитки с дырой.

   ПРИЧИНА. Мозаика задана правилами nth-of-type(12n+N) с фиксированными
   высотами. У всех плиток, кроме 12n+1 и 12n+7, рядом задан и max-height
   картинки, подобранный под высоту. У этих двух высота 47.5rem (760 px),
   а ограничение картинки не задано — она остаётся квадратной по ширине плитки,
   и треть плитки пустует.

   ПОЧЕМУ ИМЕННО ТАК, А НЕ ИНАЧЕ. Проверено на стенде три варианта:
     — сделать плитку флекс-колонкой и вписать картинку в остаток высоты:
       СТАЛО ХУЖЕ. В мозаике четыре разные формы плиток, и contain оставляет
       поля везде, где пропорции не совпали: «Строительные блоки» съёжились
       в угол, мёртвого воздуха прибавилось;
     — заставить картинку заполнять плитку с обрезкой (cover):
       ТОЖЕ ХУЖЕ. Обрезка режет товар — от мешка «Сухие смеси» оставался кусок
       с надписью, товар переставал узнаваться;
     — привести ВЫСОТУ ДВУХ ПЛИТОК к размеру картинки: подошло. Картинки не
       трогаем вовсе, ничего не режется, блок каталога стал компактнее
       (2040 -> 1888 px на 1440).
   Правим только эти две плитки: у остальных всё подобрано и работает. */
@media (min-width: 1440px) {
    .catalog__category-item:nth-of-type(12n+1),
    .catalog__category-item:nth-of-type(12n+7) {
        height: 38rem;
    }
}

@media (min-width: 1025px) and (max-width: 1439px) {
    .catalog__category-item:nth-of-type(12n+1),
    .catalog__category-item:nth-of-type(12n+7) {
        height: 23rem;
    }
}

/* Заголовок плитки лежит ПОВЕРХ картинки — так задумано. Но длинный заголовок
   («Тротуарная плитка и брусчатка» в три строки) попадает на цветную часть
   изображения и теряет читаемость. Светлая подложка сверху не видна на белом
   фоне картинки и проявляется там, где под текстом цвет. */
.catalog__item-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 60%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.75) 55%,
        rgba(255, 255, 255, 0) 100%);
}

.catalog__item-name {
    position: relative;
    z-index: 2;
}

/* ── 3. «ПОД ЗАКАЗ» БЫЛО ПОКРАШЕНО ЗЕЛЁНЫМ ──────────────────────────────────
   Зелёный на карточке товара везде означает «есть, можно брать» (цена
   за штуку тоже зелёная). Красить им «Под заказ» — сообщать обратное тому,
   что написано. Наличие оставляем зелёным, отсутствие — нейтральным. */
.item-block__availability--not-in-stock,
.item-block--not-in-stock .item-block__availability {
    color: #6b7086;
}

/* ── 4. «РАСПЕЧАТАТЬ» НА ТЕЛЕФОНЕ ───────────────────────────────────────────
   Замер: на 375 ссылка «Распечатать» видима дважды (top=672 и top=1147)
   и стоит ВЫШЕ блока покупки. Печать со смартфона — не сценарий покупателя,
   а место в первом экране она занимает. Прячем только на узких экранах. */
@media (max-width: 767px) {
    .detail__absolute-buttons .detail__absolute-button,
    .detail__bottom-links .detail__bottom-link--print {
        display: none;
    }
}

/* ── 5. КНОПКА «В КОРЗИНУ» ДОЛЖНА БЫТЬ ФОКУСИРУЕМОЙ ─────────────────────────
   Она свёрстана как <div class="detail__buy-button">, а не <button>.
   Разметку меняем в шаблоне (добавлены role/tabindex), здесь — видимый
   контур фокуса, иначе управление с клавиатуры не видно глазом. */
.detail__buy-button:focus-visible,
.item-block__buy-button:focus-visible {
    outline: 0.1875rem solid #14183e;
    outline-offset: 0.125rem;
}

/* ── 6. СООБЩЕНИЯ БРАУЗЕРА О НЕЗАПОЛНЕННЫХ ПОЛЯХ ────────────────────────────
   Подпись к полю согласия на обработку персональных данных. */
.form__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #6b7086;
}

.form__consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.0625rem 0 0;
    cursor: pointer;
}

.form__consent a {
    color: inherit;
    text-decoration: underline;
}

.form__consent input[type="checkbox"]:focus-visible {
    outline: 0.125rem solid #14183e;
    outline-offset: 0.125rem;
}