/* ==========================================================================
   HL — Публичная страница результатов подбора (розница).

   Источник истины по внешнему виду — утверждённый эскиз
   «Страница_Результат_поиска.png» (1536×1024). Значения сняты с эскиза.

   HL UI Specification v2.2, п.6 «Результаты подбора» — состав и поведение.
   Header и Footer приходят из единого каркаса (public_shell.css) и здесь
   не оформляются.

   Опорные величины эскиза:
       хлебные крошки        y 162…181
       заголовок             y 212…244
       ряд карточек          x 93…1398, зазор 20, карточка 441×546
       фото в карточке       y 280…511 (высота 232)
       название              y 530…553
       цена                  y 611…637
       статус наличия        y 663…679, цвет rgb(104,233,64)
       кнопка «В корзину»    377×77
       ссылка на статью      y 831…860, по центру
   ========================================================================== */

.hl-results {
    --hlr-bg: #000000;
    --hlr-card: #0d0d0d;
    --hlr-card-border: #24262a;
    --hlr-text: #ffffff;
    --hlr-accent: #c8030a;
    --hlr-instock: #68e940;
    --hlr-font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

    background: var(--hlr-bg);
    color: var(--hlr-text);
    font-family: var(--hlr-font);
    padding: 34px 0 0;
}

.hl-results *,
.hl-results *::before,
.hl-results *::after { box-sizing: border-box; }

.hl-results img { display: block; max-width: 100%; }

.hl-results :focus-visible {
    outline: 2px solid var(--hlr-accent);
    outline-offset: 2px;
}

/* Контейнер выровнен по полям утверждённого каркаса. */
.hl-results__shell {
    max-width: 1536px;
    margin: 0 auto;
    padding: 0 26px 0 44px;
}

/* --------------------------------------------------------------------------
   Хлебные крошки — эскиз y 162…181
   -------------------------------------------------------------------------- */
.hl-results__crumbs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    font-size: 17px;
}

.hl-results__crumb-sep { color: var(--hlr-text); opacity: 0.75; }

/*
   Текущая позиция в крошках. Ссылкой не является: это и есть открытая
   страница. href="#" не используется.
*/
.hl-results__crumb-current {
    color: var(--hlr-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Заголовок — эскиз y 212…244
   -------------------------------------------------------------------------- */
.hl-results__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 22px;
}

.hl-results__title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.hl-results__for { font-size: 20px; }

.hl-results__vehicle {
    color: var(--hlr-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Ряд карточек — эскиз: 3 в ряд, зазор 20
   -------------------------------------------------------------------------- */
.hl-results__grid {
    display: grid;
    /* Карточка уменьшена на 30%: 475 → 333. Ряд прижат к левому полю. */
    grid-template-columns: repeat(3, minmax(0, 333px));
    justify-content: start;
    gap: 14px;            /* 20 × 0.7 */
    align-items: stretch;
}

.hl-results__empty {
    padding: 28px 0;
    font-size: 18px;
    color: #9aa0a6;
}

/* --------------------------------------------------------------------------
   Карточка товара — эскиз 441×546
   -------------------------------------------------------------------------- */
.hl-card {
    display: flex;
    flex-direction: column;
    padding: 13px 22px 22px;   /* 18/32/32 × 0.7 */
    background: var(--hlr-card);
    border: 1px solid var(--hlr-card-border);
    border-radius: 6px;
}

/*
   Область фото. Показывается ТОЛЬКО если у товара есть изображение:
   пустая рамка и «сломанная» картинка не выводятся, карточка без фото
   перестраивается сама (решение владельца, п.2).
*/
.hl-card__photo {
    height: 162px;             /* 232 × 0.7 */
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hl-card__photo-img {
    max-height: 162px;
    width: auto;
    object-fit: contain;
}

.hl-card__name {
    margin: 0 0 auto;
    text-align: center;
    font-size: 14px;           /* 20 × 0.7 */
    font-weight: 400;
    line-height: 1.35;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.hl-card__price {
    margin: 15px 0 0;
    text-align: center;
    font-size: 17px;           /* 24 × 0.7 */
}

.hl-card__price-label {
    color: var(--hlr-accent);
    font-weight: 700;
}

/* Текстовый статус наличия. Цифры остатков не выводятся. */
.hl-card__stock {
    margin: 10px 0 0;
    text-align: center;
    font-size: 11px;           /* 16 × 0.7 */
    color: var(--hlr-instock);
}

/* Кнопка «В корзину» — эскиз 377×77 */
.hl-card__form { margin: 14px 0 0; }

.hl-card__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 42px;              /* 60 × 0.7 */
    border: 0;
    border-radius: 4px;
    background: var(--hlr-accent);
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;           /* 20 × 0.7 */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.hl-card__submit:hover { background: #e2050f; }
.hl-card__submit:active { background: #a10208; }

.hl-card__submit-icon { width: 17px; height: 16px; flex: none; }   /* 24×23 × 0.7 */

/* --------------------------------------------------------------------------
   Нижняя ссылка на статью — эскиз y 831…860, по центру

   Маршрута страницы статьи в проекте нет, поэтому элемент оформлен как
   неактивный — по тому же принципу, что кнопки «СТАТЬИ» и «Заказ дубликата
   ключа» в шапке: href="#" не используется, JavaScript-перехода нет.
   -------------------------------------------------------------------------- */
.hl-results__article {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 26px 0 34px;
    color: var(--hlr-text);
    font-size: 18px;
    cursor: default;
    user-select: none;
}

/*
   Блок статьи существует в двух видах: ссылка <a> (статья опубликована) и
   неактивный <div> (статья снята с публикации). Базовое правило выше
   задаёт `cursor: default` — он верен для неактивного блока, но перебивал
   браузерный указатель у ссылки, причём и у вложенных иконок с текстом,
   так как `cursor` наследуется.

   Селектор по элементу и классу (0,1,1) перекрывает правило по одному
   классу (0,1,0) — !important не нужен. `text-decoration: none` возвращает
   вид, который был до превращения элемента в ссылку: подчёркнут только
   текст, за это отвечает `.hl-results__article-text` ниже.
*/
a.hl-results__article {
    cursor: pointer;
    text-decoration: none;
}

.hl-results__article-icon { width: 22px; height: 26px; flex: none; }

.hl-results__article-text {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.hl-results__article-arrow { width: 18px; height: 12px; flex: none; }

/* --------------------------------------------------------------------------
   Адаптивность (UI Specification v2.2, п.37)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .hl-results__grid { grid-template-columns: repeat(2, minmax(0, 333px)); }
    .hl-results__shell { padding: 0 20px; }
}

@media (max-width: 767px) {
    .hl-results { padding-top: 20px; }
    .hl-results__grid { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
    .hl-results__title { font-size: 22px; }
    .hl-results__for { font-size: 16px; }
    .hl-results__crumbs { font-size: 14px; }
    .hl-card { padding: 14px 18px 22px; }
    .hl-card__photo { height: 150px; }
    .hl-card__photo-img { max-height: 150px; }
    .hl-results__article { font-size: 15px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hl-results * { transition-duration: 0.01ms !important; }
}


/* Переход из результатов поиска на публичную карточку товара. */
.hl-card__photo {
    text-decoration: none;
    cursor: pointer;
}

.hl-card__name-link {
    display: block;
    text-align: center;
    color: inherit;
    text-decoration: inherit;
}

.hl-card__name-link:hover {
    color: var(--hlr-accent);
}

.hl-search-result__article {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Task 14: выбор товаров для сравнения */
.hl-compare-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 18px;
    padding: 11px 14px;
    border: 2px solid #111;
    border-left: 6px solid #f2c500;
    background: #fff;
}

.hl-compare-toolbar__status {
    color: #111;
    font-size: 15px;
    font-weight: 600;
}

.hl-compare-toolbar__button {
    min-height: 40px;
    padding: 8px 18px;
    border: 2px solid #111;
    background: #f2c500;
    color: #111;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.hl-compare-toolbar__button:hover:not(:disabled) {
    background: #111;
    color: #fff;
}

.hl-compare-toolbar__button:disabled {
    cursor: default;
    opacity: .42;
}

.hl-compare-toolbar__message {
    flex-basis: 100%;
    min-height: 18px;
    color: #8d0000;
    font-size: 14px;
    font-weight: 600;
}

.hl-card__compare {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    /* Карточка тёмная (--hlr-card: #0d0d0d), поэтому подпись берёт тот же
       светлый цвет, что и остальной текст карточки. Прежнее значение #111
       на тёмном фоне практически не читалось. */
    color: var(--hlr-text);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

/* Наведение: подсветка без потери контраста — цвет не меняется. */
.hl-card__compare:hover { opacity: 0.85; }

/* Недоступен (выбраны уже 4 товара) — подпись гаснет вместе с квадратом. */
.hl-card__compare-input:disabled + span { opacity: 0.45; }

.hl-card__compare-input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #f2c500;
}

.hl-card__compare-input:disabled { cursor: not-allowed; }