/*
 * com_articart — страница развёрнутой выдачи поиска (view=search).
 *
 * Файл сознательно отделён от articart.css: тот перенесён 1:1 из старого
 * Content Cart и правится только по необходимости, а это — новая разметка.
 * Все цвета вынесены в переменные, чтобы шаблон сайта мог переопределить
 * их без правки файла (он перезаписывается при обновлении компонента).
 */
.ac-search-page {
    --ac-search-radius: 10px;
    --ac-search-border: #e2e5e9;
    --ac-search-bg: #fff;

    /*
     * ПАЛИТРА ПОД ТЁМНЫЙ ФОН ШАБЛОНА (1.9.52).
     *
     * Страница выдачи лежит на фоне сайта (#8A0A1D, бордо), а цвета до 1.9.52
     * подбирались под белый лист: синие кнопки (#2563eb) выпадали из
     * золото-бордовой гаммы, а серые пояснения (#6b7280) на бордо почти не
     * читались — контраст около 2:1. Теперь:
     *
     *   accent       золото, как заголовки сайта — кнопки, активный чип, фокус;
     *   accent-ink   тёмное бордо — текст НА золоте (контраст ≈ 8:1);
     *   note         кремовый — пояснения, счётчик, «звёздочка» (≈ 7,5:1 на бордо);
     *   muted        приглушённый кремовый — бренд, фасовка в карточке (≈ 6:1).
     *
     * Внутри БЕЛОЙ выпадашки подсказок свои цвета (--ac-search-panel-*):
     * кремовый на белом был бы той же нечитаемой бледностью, только наоборот.
     *
     * Все значения — переменные: шаблон другого сайта переопределит их у
     * .ac-search-page, не трогая файл.
     */
    --ac-search-accent: #f2b84b;
    --ac-search-accent-strong: #ffd27a;
    --ac-search-accent-ink: #4a0510;
    --ac-search-note: #f3e2c3;
    --ac-search-muted: #e6cfa6;
    --ac-search-chip-border: rgba(242, 184, 75, .6);
    --ac-search-chip-text: #f3e2c3;
    --ac-search-panel-text: #2b1a1c;
    --ac-search-panel-muted: #6b5d5f;
    --ac-search-panel-link: #8a0a1d;
    --ac-search-panel-hover: #fbf1ea;
    --ac-search-price-old: #c9b08a;

    /*
     * ЦВЕТА СОСТОЯНИЙ ПОДНЯТЫ ПО СВЕТЛОТЕ (1.9.36).
     *
     * Прежние значения (#17825a, #b91c1c) подбирались под БЕЛУЮ карточку,
     * которой больше нет: карточка стала прозрачной и лежит на фоне шаблона,
     * а он тёмный. Тёмно-зелёное «В наявності» на тёмном фоне превращается в
     * пятно. Выбраны средние тона: они читаются и на тёмном, и на светлом —
     * страница выдачи обязана работать в любом шаблоне, а не только в этом.
     */
    --ac-search-in-stock: #35b57e;
    --ac-search-out-of-stock: #e35d5d;
    --ac-search-awaiting: #d69b2b;
    --ac-search-preorder: #6c9bf5;
    --ac-search-discontinued: #9ca3af;

    /*
     * РАМКА КАРТОЧКИ — ЗОЛОТАЯ, КАК У ТОВАРА В СТАТЬЕ.
     *
     * В статье рамку товара (.articart-product) рисует currentColor, и на
     * этом сайте она выходит золотой, потому что таков цвет текста. Здесь
     * currentColor не годится: в карточке текст свой (название — ссылка), и
     * рамка меняла бы цвет вместе с ним при наведении. Поэтому цвет назван
     * явно и тем же тоном, что рамка плашки заказа (rgba(214,164,46,…)) —
     * это один и тот же предмет в трёх местах магазина.
     */
    --ac-search-frame: rgba(214, 164, 46, .35);
    --ac-search-frame-hover: rgba(214, 164, 46, .75);

    /*
     * Ширина колонки и предел гнезда картинки приходят ИНЛАЙНОМ из шаблона
     * (ThumbMaker::CARD_WIDTH и cardSize()). Значения ниже — только запасные,
     * на случай разметки от прежней версии: файл стилей обновляется вместе с
     * шаблоном, но кэш страницы живёт своей жизнью.
     */
    --ac-card-min: 400px;
    --ac-thumb-max: 300px;
    --ac-plate-width: 380px;

    /*
     * ЗАЗОР МЕЖДУ КАРТИНКОЙ И ПЛАШКОЙ (1.9.37).
     *
     * Пока под картинкой стояла подпись, зазора хватало обычного строчного.
     * Плашка — отдельный предмет со своей рамкой и фоном, и вплотную к
     * картинке она читается как её нижний край. Величина вынесена в
     * переменную не ради настройки, а потому что её же занимает лента: она
     * вынесена за угол картинки на --ribbon-offset, и слишком малый зазор
     * положил бы ножку ленты на рамку плашки.
     */
    --ac-plate-gap: 0.85rem;

    max-width: 1140px;
}

.ac-search-page * {
    box-sizing: border-box;
}

.ac-search-page__form {
    margin: 0 0 1.5rem;
}

.ac-search-page__label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.ac-search-page__row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ac-search-page__input {
    flex: 1 1 280px;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--ac-search-border);
    border-radius: var(--ac-search-radius);
    font-size: 1rem;
}

.ac-search-page__input:focus {
    outline: 2px solid var(--ac-search-accent);
    outline-offset: 1px;
}

/* Кнопка «Знайти» — золото с тёмно-бордовой надписью, как главные кнопки
   сайта, а не синяя (1.9.52). */
.ac-search-page__submit {
    padding: 0.6rem 1.4rem;
    border: 0;
    border-radius: var(--ac-search-radius);
    background: var(--ac-search-accent);
    color: var(--ac-search-accent-ink);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ac-search-page__submit:hover,
.ac-search-page__submit:focus-visible {
    background: var(--ac-search-accent-strong);
}

.ac-search-page__submit:focus-visible {
    outline: 2px solid var(--ac-search-note);
    outline-offset: 2px;
}

.ac-search-page__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-top: 0.75rem;
}

.ac-search-page__select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--ac-search-border);
    border-radius: var(--ac-search-radius);
    background: var(--ac-search-bg);
    max-width: 100%;
}

/*
 * ЧИПЫ «ПРОПОЗИЦІЇ» (1.9.50, перенос строк — 1.9.52).
 *
 * До 1.9.52 ряд прокручивался вбок, чтобы не отнимать высоту у выдачи. С
 * шестым чипом («Встигніть») на телефоне шириной 360–390 px за краем
 * оставались «Свіже» и «Хіт» — и признака, что там что-то есть, не было
 * никакого. Подборки, о которых покупатель не знает, для него не существуют,
 * поэтому ряд переносится: вторая строка стоит ~48 px, неизвестная подборка
 * стоит дороже. Высота чипа — не меньше 40 px: это цель для пальца.
 */
.ac-search-page__chips {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ac-search-page__chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.35rem 0.95rem;
    border: 1px solid var(--ac-search-chip-border);
    border-radius: 999px;
    color: var(--ac-search-chip-text);
    font-size: 0.95rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ac-search-page__chip:hover,
.ac-search-page__chip:focus-visible {
    border-color: var(--ac-search-accent);
    background: rgba(242, 184, 75, .14);
    color: var(--ac-search-chip-text);
    text-decoration: none;
}

.ac-search-page__chip:focus-visible {
    outline: 2px solid var(--ac-search-accent);
    outline-offset: 2px;
}

/* Выбранный чип — залит золотом, как кнопка «Знайти»: видно издалека,
   где ты сейчас. */
.ac-search-page__chip[aria-current] {
    border-color: var(--ac-search-accent);
    background: var(--ac-search-accent);
    color: var(--ac-search-accent-ink);
    font-weight: 600;
}

/*
 * ПУСТОЙ ЧИП (1.9.52): кликабельный, но видно, что пусто. Пунктирная рамка
 * вместо сплошной и приглушённая (но читаемая, ≈ 5:1) подпись. Число не
 * рисуется; слово «поки порожньо» есть для экранного диктора и в
 * подсказке при наведении.
 */
.ac-search-page__chip--empty {
    border-style: dashed;
    border-color: rgba(243, 226, 195, .45);
    color: rgba(243, 226, 195, .78);
}

.ac-search-page__chip--empty[aria-current] {
    border-style: solid;
}

.ac-search-page__chip-count {
    min-width: 1.5em;
    padding: 0 0.4em;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    font-size: 0.8em;
    text-align: center;
}

.ac-search-page__chip[aria-current] .ac-search-page__chip-count {
    background: rgba(74, 5, 16, .15);
}

/* Только для экранного диктора: на экране пустоту показывает пунктир. */
.ac-search-page__chip-empty-note {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * ПУСТАЯ ПОДБОРКА (1.9.52): заголовок, строка пояснения, две кнопки.
 * Главная кнопка — «Перейти до каталогу», залита золотом; «Написати нам» —
 * контуром: действие второе, и две одинаковые кнопки рядом спорили бы.
 */
.ac-search-page__offers-empty {
    margin: 1.75rem 0 1rem;
    max-width: 38rem;
}

.ac-search-page__offers-title {
    margin: 0 0 0.4rem;
    color: var(--ac-search-accent);
    font-size: 1.3rem;
    line-height: 1.3;
}

.ac-search-page__offers-text {
    margin: 0 0 1rem;
    color: var(--ac-search-note);
    font-size: 1rem;
    line-height: 1.5;
}

.ac-search-page__offers-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
}

.ac-search-page__offers-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--ac-search-accent);
    border-radius: var(--ac-search-radius);
    color: var(--ac-search-note);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.ac-search-page__offers-link:hover,
.ac-search-page__offers-link:focus-visible {
    background: rgba(242, 184, 75, .14);
    color: var(--ac-search-note);
    text-decoration: none;
}

.ac-search-page__offers-link--primary {
    background: var(--ac-search-accent);
    color: var(--ac-search-accent-ink);
}

.ac-search-page__offers-link--primary:hover,
.ac-search-page__offers-link--primary:focus-visible {
    background: var(--ac-search-accent-strong);
    color: var(--ac-search-accent-ink);
}

.ac-search-page__check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.ac-search-page__reset,
.ac-search-page__hint,
.ac-search-page__count {
    color: var(--ac-search-note);
    font-size: 0.95rem;
}

/*
 * СЕТКА ВЫДАЧИ.
 *
 * Ширина колонки приходит из PHP (ThumbMaker::CARD_WIDTH), потому что от неё же
 * считается предел гнезда картинки. Число росло дважды и оба раза по одной
 * причине — в карточку добавлялся предмет: 240 -> 300 в 1.9.36 (лента, угловой
 * штамп и строка «Закінчується! Встигніть купити останні 3 шт»), 300 -> 400 в
 * 1.9.37 (плашка с кнопкой «У кошик» шириной 380 px; колонка не имеет права
 * быть уже того, что в ней стоит).
 *
 * На узком экране колонка подменяется на одну — см. блок @media в конце файла:
 * minmax() не умеет сжиматься ниже своего минимума, и 400 px на экране 360 px
 * дали бы горизонтальную прокрутку.
 */
.ac-search-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ac-card-min, 300px), 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

/*
 * КАРТОЧКА: ЗОЛОТАЯ РАМКА НА ФОНЕ ШАБЛОНА, БЕЗ СОБСТВЕННОГО ФОНА (1.9.36).
 *
 * Белая заливка была здесь с самого начала и на светлом шаблоне выглядела
 * уместно. На этом сайте она превращала выдачу в набор белых прямоугольников
 * посреди тёмной страницы — товар выглядел вырезанным из чужого макета.
 * Теперь фона нет вовсе, а границу отбивает рамка того же золотого тона, каким
 * обведён товар в статье.
 *
 * OVERFLOW: HIDDEN УБРАН, И ЭТО НЕ УБОРКА. Лента вынесена за угол картинки на
 * --ribbon-offset, а угловой штамп выходит за край плашки: обрезка по рамке
 * срезала бы у ленты ножки, а у штампа — половину. Ради этого же у карточки
 * появились поля: знакам нужно место, чтобы выйти за край и никуда не упереться.
 */
.ac-search-card {
    position: relative;
    /* Карточка стала колонкой сама (1.9.37): раньше столбиком выстраивалась
       ссылка внутри неё, но ссылка больше не оборачивает всю карточку —
       в плашке стоит кнопка, а кнопку в ссылку класть нельзя. */
    display: flex;
    flex-direction: column;
    padding: .55rem;
    border: 1px solid var(--ac-search-frame);
    border-radius: var(--ac-search-radius);
    background: transparent;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.ac-search-card:hover {
    border-color: var(--ac-search-frame-hover);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

.ac-search-card--muted {
    opacity: 0.75;
}

/* Ссылка-картинка. Столбиком её больше строить нечего — внутри одна
   картинка, — но блочной она быть обязана: инлайновая ссылка добавила бы
   под гнездом полоску базовой линии, и зазор до плашки перестал бы
   совпадать с заданным. */
.ac-search-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Название товара — вторая ссылка карточки. Подчёркивание появляется только
   при наведении: в сетке из сорока карточек сорок подчёркнутых заголовков
   читаются как список ссылок, а не как товары. */
.ac-search-card__head {
    color: inherit;
    text-decoration: none;
}

.ac-search-card__head:hover .ac-search-card__title,
.ac-search-card__head:focus-visible .ac-search-card__title {
    text-decoration: underline;
}

/*
 * ГНЕЗДО КАРТИНКИ.
 *
 * Пропорция приходит переменной из шаблона: это та же пара чисел, которой
 * задан размер файла превью (thumb_w / thumb_h в настройках). Запасное
 * значение 170/220 — заводское, на случай если разметка осталась старой, а
 * файл стилей уже новый. Гнездо другой пропорции, чем файл, означает поля по
 * бокам у каждой карточки, а с object-fit: cover — срезанную упаковку.
 */
/*
 * ГНЕЗДО НЕ КРУПНЕЕ ФАЙЛА (1.9.36) — ГЛАВНОЕ ПРАВИЛО ЭТОГО БЛОКА.
 *
 * Колонка сетки резиновая: на телефоне она во всю ширину экрана, на широком
 * мониторе — шире 300 px. Гнездо, растянутое вместе с ней, растягивало и
 * картинку: превью 170×220 доезжало до 500 px и рассыпалось пикселями.
 * Симптом обманчив — выглядит так, будто в выдачу попало полноразмерное фото
 * вместо превью, хотя файл ровно тот же, что показывает витрина.
 *
 * --ac-thumb-max приходит из PHP и равен min(ширина колонки, ширина файла).
 * Больше этого гнездо не станет ни при какой ширине экрана; лишнее место
 * уходит в поля, картинка встаёт по центру. Хочется крупнее — поднимается
 * размер ФАЙЛА в настройках и нажимается «Пересобрать превью»: увеличивать
 * разметкой то, чего нет в файле, нельзя по определению.
 *
 * DISPLAY: BLOCK ОБЯЗАТЕЛЕН. Гнездо заодно служит обёрткой ленты
 * (.articart-ribbon-host), а общее правило обёртки делает её inline-block —
 * это нужно в статье, чтобы лента прижималась к картинке, а не к краю текста.
 * В сетке от inline-block карточки съезжают по ширине; та же строчка по той же
 * причине стоит в витрине (.articart-showcase__image.articart-ribbon-host).
 */
.ac-search-card__media {
    display: block;
    position: relative;
    width: 100%;
    max-width: var(--ac-thumb-max, 300px);
    margin-inline: auto;
    aspect-ratio: var(--ac-thumb-ratio, 170 / 220);
    background: transparent;
}

/* Тот же приоритет, что у витрины: перебиваем inline-block обёртки ленты. */
.ac-search-card__media.articart-ribbon-host {
    display: block;
}

.ac-search-card__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain, а не cover: товар в выдаче обязан быть похож на товар на
       витрине, а это один и тот же файл. */
    object-fit: contain;
    display: block;
}

/*
 * СОСТОЯНИЕ «ФОТО НЕТ» (1.9.35).
 *
 * Заглушка подаётся приглушённо и с полями: это силуэт, а не фотография
 * товара, и выглядеть как фотография он не должен. Фон гнезда чуть темнее
 * карточки — видно, что место под картинку есть, а картинки у товара нет.
 */
.ac-search-card__media--empty {
    /* Полупрозрачная подложка вместо прежней светло-серой: карточка теперь
       прозрачная, и любой непрозрачный цвет тут стал бы вторым фоном, который
       пришлось бы подбирать под шаблон. currentColor с малой непрозрачностью
       темнеет на светлом фоне и светлеет на тёмном сам. */
    background: rgba(128, 128, 128, .12);
    border-radius: calc(var(--ac-search-radius) - 4px);
}

.ac-search-card__thumb--placeholder {
    padding: 16%;
    box-sizing: border-box;
    opacity: 0.55;
}

/* ============================================================
   НИЖНЯЯ ЧАСТЬ КАРТОЧКИ — ПЛАШКА (1.9.36)
   ============================================================

   Разметка надевает НА ЭТОТ ЖЕ элемент класс .cart-action-module, то есть
   плашка выдачи — это та же плашка, что в статье, а не её копия: рамка, фон,
   скругление и внутренний свет приходят из общих правил (articart.css и
   user.css сайта). Здесь перебивается только РАСКЛАДКА.

   ПОЧЕМУ ПЕРЕБИВАТЬ ПРИХОДИТСЯ. Плашка в статье выстроена в строку
   (display:flex; nowrap; space-between) — там название, цена и кнопка стоят
   в ряд. В карточке шириной 300 px в ряд не встанет ничего, поэтому здесь
   столбик. Точность селектора (два класса) выбрана НЕ «побольше на всякий
   случай»: правила плашки в user.css записаны одним классом, и двух хватает,
   чтобы выиграть у них, не отбирая при этом ничего у более точных правил
   вроде .cart-action-module .cart-action-price. */
.ac-search-card__body,
.ac-search-card__body.cart-action-module {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /* Плашка в статье выстроена в строку и переносит её на телефоне
       (flex-wrap: wrap в её мобильном правиле). В столбике перенос означал бы
       вторую КОЛОНКУ: строки уехали бы вбок, стоило содержимому не поместиться
       в высоту ряда сетки. */
    flex-wrap: nowrap;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem 0.9rem;
    /* Плашка занимает остаток высоты карточки: у соседей в ряду разное число
       строк, а нижние края обязаны стоять вровень. */
    flex: 1 1 auto;

    /*
     * ШИРИНА ПЛАШКИ — min(380px, 100%), И ЭТО ОДНА ВЕЛИЧИНА ВМЕСТО ДВУХ
     * (1.9.37).
     *
     * Просили так: 380 px, а на экранах уже 430 px — во всю ширину. Через
     * @media это два числа, которые обязаны быть согласованы (380 + поля
     * карточки ≈ 400, и «уже 430» подобрано под них), причём согласованность
     * их держится только в голове у того, кто их подбирал: поменяй одно —
     * второе молча начнёт врать.
     *
     * min() выражает то же самое ОДНИМ числом и по существу: плашка шириной
     * 380 px, но не шире того места, что ей досталось. Работает это не только
     * на телефоне, но и в узкой колонке на широком мониторе — случай, который
     * media query по ширине ЭКРАНА не ловит вовсе (сетка резиновая, и колонка
     * бывает узкой при любом экране).
     *
     * Число 380 приходит инлайном из PHP (ThumbMaker::PLATE_WIDTH) — рядом с
     * шириной колонки, потому что колонка обязана быть не уже плашки.
     */
    width: min(var(--ac-plate-width, 380px), 100%);
    margin: var(--ac-plate-gap, 0.85rem) auto 0;
}

/* Шапка плашки: название, бренд, фасовка. Своим блоком — потому что только
   ей нужен отступ под угловой штамп (см. ниже). */
.ac-search-card__head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ac-search-card__title {
    font-weight: 600;
    line-height: 1.3;
}

.ac-search-card__brand,
.ac-search-card__pack,
.ac-search-card__packs {
    color: var(--ac-search-muted);
    font-size: 0.88rem;
}

/*
 * ЦЕНА НОСИТ КЛАСС ПЛАШКИ (.cart-action-price) — за цветом и кеглем, которые
 * шаблон сайта уже подобрал. Но раскладку плашки надо снять: там цена стоит
 * справа в строке и отбита вертикальной чертой слева, а здесь она — строка в
 * столбике, и черта повисла бы посреди карточки.
 *
 * Селектор из двух классов взят не для запаса: правила плашки в user.css сайта
 * записаны одним классом и подключаются ПОЗЖЕ этого файла — одного класса не
 * хватило бы, и черта вернулась бы ровно на том сайте, ради которого всё это
 * пишется.
 */
.ac-search-card__body .ac-search-card__price {
    margin-top: 0.35rem;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    border-left: 0;
    padding-left: 0;
    white-space: normal;
}

.ac-search-card__price strong {
    font-size: 1.1rem;
}

.ac-search-card__price s {
    color: var(--ac-search-price-old);
    font-size: 0.9rem;
}

.ac-search-card__from {
    color: var(--ac-search-muted);
    font-size: 0.85rem;
}

/* ------------------------------------------------------------
   УГЛОВОЙ ШТАМП НА ПЛАШКЕ ВЫДАЧИ.

   ВИД ШТАМПА ЗАДАН В articart.css (с 1.9.41 — там, а не в user.css сайта).
   Здесь остаётся только КРЕПЛЕНИЕ и РАЗМЕР: в статье штамп висит на плашке
   заказа, а тут плашка другого размера и стоит в сетке.

   РАЗМЕР ПЕРЕОПРЕДЕЛЯЕТСЯ ПЕРЕМЕННОЙ, А НЕ max-width, И ЭТО ТА САМАЯ ОШИБКА,
   ИЗ-ЗА КОТОРОЙ ШТАМП СТАНОВИЛСЯ ОВАЛОМ. max-width сжимает ТОЛЬКО ширину,
   высота при этом остаётся прежней, и border-radius: 50% от прямоугольника
   даёт овал. Одна величина --articart-seal-size меняет обе стороны сразу,
   и разъехаться им негде.
   ------------------------------------------------------------ */
.ac-search-card .cart-action-corner-seal {
    /* Плашка выдачи мельче статейной, штамп на ней тоже. Верхняя граница —
       примерно треть ширины карточки: рядом стоит название товара. */
    --articart-seal-size: clamp(44px, 9vw, 62px);

    position: absolute;
    top: -.35rem;
    left: -.35rem;
    z-index: 3;
    /* Штамп — метка, а не собеседник: клик по любому месту карточки обязан
       вести на товар, поэтому события мыши он не перехватывает. */
    pointer-events: none;
}

/*
 * МЕСТО ПОД ШТАМП: ОТСТУП У ШАПКИ, А НЕ У ПЛАШКИ ЦЕЛИКОМ.
 *
 * Штамп выпал из потока (position: absolute) и сам собой ничего не
 * отодвигает. Отодвинуть надо ровно то, что стоит с ним на одной высоте, —
 * название, бренд и фасовку. Отступ на всей плашке отнял бы у каждой строки
 * ниже пятую часть ширины, а там стоят самые длинные фразы магазина
 * («Закінчується! Встигніть купити останні 3 шт»).
 *
 * Размер штампа задаёт user.css сайта, и здесь он неизвестен — поэтому и
 * отступ, и минимальная высота вынесены в переменную: подобрать её под свой
 * штамп можно, не трогая этот файл (он перезаписывается при обновлении).
 * Запасные значения рассчитаны на круглую медаль ≈ 74 px.
 *
 * Признак «штамп есть» ставит ШАБЛОН (модификатор --seal), а не селектор
 * :has(): условие уже посчитано в PHP, и второй его экземпляр в файле стилей
 * однажды разошёлся бы с первым.
 */
.ac-search-card__body--seal .ac-search-card__head {
    padding-left: var(--ac-seal-space, 5.25rem);
    min-height: var(--ac-seal-height, 4.4rem);
}

.ac-search-card__status {
    margin-top: 0.25rem;
    font-size: 0.85rem;
}

/*
 * СИГНАЛЫ ПОД ЦЕНОЙ («свіжа партія», «залишилось»).
 *
 * Оформление у них общее с плашкой в статье (articart.css) — здесь только
 * поведение длинной строки в узкой карточке.
 *
 * NOWRAP, А НЕ WRAP, И ЭТО НЕ ОПЕЧАТКА. Оба блока — flex-строка «значок +
 * текст». При wrap длинный текст целиком уезжает на вторую строку, и значок
 * остаётся висеть один на первой: молния сама по себе, «Закінчується!…» под
 * ней. Нужно обратное — значок стоит на месте, а переносится текст ВНУТРИ
 * себя, для чего flex-элементу и требуется min-width: 0 (иначе он не
 * позволяет себя сжать ниже длины самого длинного слова).
 */
.ac-search-card__body .cart-action-fresh,
.ac-search-card__body .cart-action-last {
    flex-wrap: nowrap;
    align-items: flex-start;
    line-height: 1.3;
}

.ac-search-card__body .cart-action-fresh > *,
.ac-search-card__body .cart-action-last__text {
    min-width: 0;
}

/* Значок и «пульс» свежей партии не сжимаются вместе с текстом. */
.ac-search-card__body .cart-action-last__icon,
.ac-search-card__body .pulse-dot {
    flex: 0 0 auto;
}

/* ============================================================
   КНОПКА «У КОШИК» В КАРТОЧКЕ ВЫДАЧИ (1.9.37)
   ============================================================

   ЗДЕСЬ ЗАДАНА ТОЛЬКО РАСКЛАДКА РЯДА, И ЭТО ПРИНЦИПИАЛЬНО — ровно та же
   причина, по которой в компоненте нет правил углового штампа. Вид кнопки,
   счётчика и предупреждения (.cart-action-button, .cart-action-count,
   .cart-action-notice) живёт в user.css сайта; напиши мы здесь свой фон,
   рамку и кегль — кнопка в выдаче перестала бы совпадать с кнопкой в статье,
   притом что это одна и та же кнопка одного и того же магазина.

   СЕЛЕКТОР ИЗ ДВУХ КЛАССОВ ВЗЯТ НЕ ДЛЯ ЗАПАСА. user.css подключается ПОЗЖЕ
   этого файла, и правило в один класс там победило бы наше правило в один
   класс просто по порядку. Два класса выигрывают у одного по точности, но не
   отбирают ничего у более точных правил вроде
   «.cart-action-module .cart-action-button».

   ТРОГАТЬ РАЗРЕШЕНО РОВНО ТРИ ВЕЛИЧИНЫ: как элементы стоят друг относительно
   друга, сколько места занимает поле ввода и не мельче ли палец. Всё
   остальное — чужое. */
.ac-search-card__body .cart-action-buttons {
    display: flex;
    align-items: center;
    /* wrap, а не nowrap: у кнопки бывает длинная подпись («Замовити
       передзамовлення»), и в 380 px она с счётчиком в строку не встанет.
       Здесь перенос безвреден — в отличие от строки «значок + текст», где он
       оставляет значок одного (см. правило .cart-action-last выше). */
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/*
 * СЧЁТЧИК НЕ РАСТЯГИВАЕТСЯ, КНОПКА ЗАБИРАЕТ ОСТАТОК.
 *
 * Поле для числа от 1 до 999 шире четырёх с половиной знаков быть не должно:
 * растянутое на пол-плашки, оно читается как поле для текста, и в него
 * начинают писать словами. Кнопка же — главное действие карточки, и остаток
 * строки принадлежит ей.
 */
.ac-search-card__body .cart-action-count {
    flex: 0 0 auto;
    width: 4.75rem;
    /* 44 px — нижняя граница удобного нажатия пальцем (Apple HIG; у Material
       48). Речь именно о ВЫСОТЕ ряда, а не о кегле: кегль задаёт user.css. */
    min-height: 44px;
    /*
     * НЕ МЕЛЬЧЕ 16 px — И ЭТО НЕ ВОПРОС ВКУСА.
     * Safari на iOS приближает страницу при фокусе в поле, у которого кегль
     * меньше 16 px, и обратно не отдаляет. Покупатель нажимает на счётчик —
     * и оказывается на увеличенной странице, где кнопка «У кошик» уехала за
     * край экрана. Лечится только кеглем самого поля.
     */
    font-size: max(1rem, 16px);
}

.ac-search-card__body .cart-action-button {
    flex: 1 1 auto;
    min-height: 44px;
}

.ac-search-card__body .cart-action-notice {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.35;
}

/* Атрибут hidden обязан быть подкреплён правилом: display из соседнего
   правила сильнее атрибута. Четвёртый раз в проекте — см. 02-Грабли.md. */
.ac-search-card__body .cart-action-notice[hidden] {
    display: none;
}

/* Число фасовок стало ссылкой на товар — подчёркивание только при наведении,
   как у названия. */
.ac-search-card__packs {
    color: var(--ac-search-muted);
    text-decoration: none;
}

.ac-search-card__packs:hover,
.ac-search-card__packs:focus-visible {
    text-decoration: underline;
}

.ac-search-card__status--available {
    color: var(--ac-search-in-stock);
}

.ac-search-card__status--out_of_stock {
    color: var(--ac-search-out-of-stock);
}

.ac-search-card__status--awaiting {
    color: var(--ac-search-awaiting);
}

.ac-search-card__status--preorder {
    color: var(--ac-search-preorder);
}

.ac-search-card__status--discontinued {
    color: var(--ac-search-discontinued);
}

.ac-search-page__pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.ac-search-page__page {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--ac-search-border);
    border-radius: var(--ac-search-radius);
    text-decoration: none;
}

.ac-search-page__page-info {
    color: var(--ac-search-note);
    font-size: 0.9rem;
}

.ac-search-page__subheading {
    margin-top: 2rem;
    font-size: 1.15rem;
}

.ac-search-page__articles {
    margin: 0;
    padding-left: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
    .ac-search-card {
        transition: none;
    }

    .ac-search-card:hover {
        transform: none;
    }
}

/* ============================================================
   ЖИВЫЕ ПОДСКАЗКИ НА ПОЛЕ ЭТОЙ ЖЕ СТРАНИЦЫ (1.9.34)
   ============================================================

   Строка поиска получает позиционирование, а выпадашка ложится под неё
   абсолютом ВНУТРИ строки: так она едет вместе с полем при любой ширине
   экрана и не требует пересчёта координат при прокрутке — координаты,
   посчитанные один раз в скрипте, разъезжались бы с полем при первом же
   изменении размера окна.
*/
.ac-search-page__row {
    position: relative;
}

.ac-suggest {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--ac-search-border);
    border-radius: var(--ac-search-radius);
    background: var(--ac-search-bg);
    box-shadow: 0 12px 28px rgba(20, 23, 28, 0.14);
    /* Свой цвет текста (1.9.52): без него название товара наследовало
       кремовый цвет страницы — бледный текст на белом. */
    color: var(--ac-search-panel-text);
}

/* Атрибут hidden обязан быть подкреплён правилом: display, заданный в
   другом правиле, сильнее атрибута — записанная грабля (.cart-action-last). */
.ac-suggest[hidden] {
    display: none;
}

.ac-suggest__list {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
}

.ac-suggest__item + .ac-suggest__item {
    border-top: 1px solid var(--ac-search-border);
}

.ac-suggest__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.5rem;
    color: inherit;
    text-decoration: none;
    border-radius: calc(var(--ac-search-radius) - 4px);
}

.ac-suggest__item.is-active .ac-suggest__link,
.ac-suggest__link:hover,
.ac-suggest__link:focus {
    background: var(--ac-search-panel-hover);
    color: var(--ac-search-panel-text);
}

.ac-suggest__media {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: calc(var(--ac-search-radius) - 4px);
    background: #f5f6f8;
}

.ac-suggest__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Заглушка и в подсказке — тем же приглушённым силуэтом, что в карточке
   выдачи (1.9.35). Раньше место под картинку тут просто не рисовалось, и
   строки без фото стояли со сдвигом относительно соседних. */
.ac-suggest__media img.is-placeholder {
    padding: 6px;
    box-sizing: border-box;
    opacity: 0.55;
}

.ac-suggest__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.5rem;
    min-width: 0;
}

.ac-suggest__title {
    flex: 1 1 100%;
    font-weight: 600;
    line-height: 1.25;
}

.ac-suggest__meta,
.ac-suggest__from {
    color: var(--ac-search-panel-muted);
    font-size: 0.85rem;
}

/* «от» и цена лежат в одном span, а не в flex-строке: зазор между ними
   задаётся отступом, gap родителя сюда не достаёт. */
.ac-suggest__from {
    margin-right: 0.25rem;
}

.ac-suggest__price s {
    margin-left: 0.35rem;
    color: #9a8f90;
    font-size: 0.85rem;
}

.ac-suggest__status {
    font-size: 0.8rem;
    color: var(--ac-search-panel-muted);
}

.ac-suggest__status--available    { color: var(--ac-search-in-stock); }
.ac-suggest__status--out_of_stock { color: var(--ac-search-out-of-stock); }
.ac-suggest__status--awaiting     { color: var(--ac-search-awaiting); }
.ac-suggest__status--preorder     { color: var(--ac-search-preorder); }
.ac-suggest__status--discontinued { color: var(--ac-search-discontinued); }

/* Подсказка про звёздочку: мелким под фильтрами, но кремовым, а не серым —
   на бордо серый не читался (1.9.52). Кегль не ниже 14 px. */
.ac-search-page__starhint {
    margin: 0.6rem 0 0;
    color: var(--ac-search-note);
    font-size: max(0.9rem, 14px);
    line-height: 1.45;
}

/* ============================================================
   ТЕЛЕФОНЫ: ЧТО СЧИТАТЬ УЗКИМ И КАКОЙ КЕГЛЬ ДЕРЖАТЬ (1.9.37)
   ============================================================

   НИЖНЯЯ ГРАНИЦА, НА КОТОРУЮ ВЁРСТКА ОБЯЗАНА ВСТАВАТЬ, — 320 CSS-px.
   Это ширина iPhone SE первого поколения и добрая половина кнопочно-смартфонных
   Android; телефонов уже её в обиходе нет, если не считать раскладушки Galaxy
   Fold первых поколений с обложкой 280 px. Ходовые же ширины сегодня такие:

     320 px  iPhone SE 1, старые бюджетные Android — крайний случай;
     360 px  САМАЯ РАСПРОСТРАНЁННАЯ в мире (Galaxy A, большинство Android);
     375 px  iPhone SE 2/3, iPhone 6–8, 13 mini;
     390–393 px  iPhone 14/15/16, Pixel 7–9 — сегодняшняя «норма»;
     402–440 px  «Plus» и «Pro Max», Galaxy S Ultra.

   Верстать надо под 360 и проверять на 320: между ними всего 40 px, и
   раскладка, которая держится на 320, держится везде.

   ПОЧЕМУ ЗДЕСЬ НЕТ @media (max-width: 430px) ДЛЯ ШИРИНЫ ПЛАШКИ. Она задана
   как min(380px, 100%) выше, и это работает строже: плашка сжимается по
   МЕСТУ, которое ей досталось, а не по ширине экрана. Колонка сетки бывает
   узкой и на широком мониторе — media query этот случай не ловит вовсе.

   КЕГЛЬ. Правило простое: основной текст — 16 px и ни в коем случае не
   меньше в полях ввода (иначе Safari на iOS приближает страницу при фокусе
   и обратно не отдаляет). Вспомогательные строки — бренд, фасовка, статус —
   14 px, ниже 12 px не опускается ничто: это граница читаемости на
   расстоянии вытянутой руки. Цена — крупнее основного текста, 18–20 px:
   её ищут глазами. Межстрочный интервал 1.4–1.5. */
@media (max-width: 480px) {
    /*
     * ОДНА КОЛОНКА НА УЗКОМ ЭКРАНЕ.
     * minmax(400px, 1fr) в сетке на экране 360 px даёт колонку ШИРЕ экрана:
     * minmax не умеет сжимать ниже своего минимума, и страница уезжает вбок
     * горизонтальной прокруткой. Подменять число здесь надёжнее, чем
     * записывать min() в самой сетке: grid-template-columns с min() внутри
     * minmax поддержан не везде.
     */
    .ac-search-page__grid {
        grid-template-columns: 1fr;
    }

    /* Вспомогательные строки — 14 px, а не 0.88rem от чужого корня: шаблон
       сайта мог задать html { font-size } своё, и «доля от корня» на
       телефоне превратилась бы в 11 px. */
    .ac-search-card__brand,
    .ac-search-card__pack,
    .ac-search-card__packs,
    .ac-search-card__status {
        font-size: 14px;
    }

    .ac-search-card__title {
        font-size: 16px;
        line-height: 1.35;
    }

    .ac-search-card__price strong {
        font-size: 19px;
    }

    /* Поле поиска — ровно та же причина, что у счётчика количества: кегль
       ниже 16 px заставляет Safari приблизить страницу при фокусе. */
    .ac-search-page__input,
    .ac-search-page__submit,
    .ac-search-page__select {
        font-size: max(1rem, 16px);
        min-height: 44px;
    }
}