/*
 * Плитки категорій на головній (п. 17), блок carbon-fields/category-tiles-section.
 * Підключається лише на сторінці, де блок є в контенті (enqueue-script-style.php).
 *
 * Заміри з макетів (Figma «Головна», 18.10):
 *   1740–1920 — 4×2, плитка 420×500 при контейнері 1680, без проміжків;
 *   768–1739  — 4×2 на ширину контейнера «Топових», та сама пропорція;
 *   360–767   — 2×4 на всю ширину екрана, без полів і проміжків.
 * Підпис і бейдж рахуються від ширини плитки, як у макетах:
 *   шрифт ≈ 5,7% плитки (24 px на 420), відступ ≈ 9,5% (40 px на 420),
 *   на мобільному відступ ≈ 8% (15 px на 180).
 *
 * Секція свідомо без __anim: на проді інлайн-правило
 * `main > .__anim._anim_act { display: none }` ховає такі секції (№137).
 */

.tiles {
    --tiles-font: clamp(12px, 1.4vw, 24px);
    --tiles-inset: clamp(14px, 2.3vw, 40px);
    margin: calc(var(--i1) * 1.375) 0 var(--i1);
}

/*
 * Лінія між заголовком і «Усі …» — у плитках і «Топових», як у макеті (рішення 19.10).
 * Відрізок малює тема (main.min.css, .popular_top:before): 1 px, min(12.5vw, 200px), на ≤1199 тягнеться.
 * custom-dev.css ховає його глобально через display:none!important — тут повертаємо специфічнішим селектором.
 * Колір — заміряний з макета 1920@2x (тема має #656564, темніший).
 * Лінія — фоном висотою 1 px замість рамки, щоб ховати «хвостик»: коли між заголовком і посиланням лишається
 * менше 24 px (найкоротша лінія в макетах ≈ 23 px), прозора частина градієнта займає всю ширину.
 * На сторінці товару (upsale, cross-sells — той самий .popular_top) лінії немає: цей файл там не підключається.
 */
.tiles .popular_top:before,
.popular .popular_top:before {
    display: block !important;
    height: 1px;
    border-bottom: 0;
    background: linear-gradient(to right, transparent clamp(0px, (24px - 100%) * 9999, 100%), #A39A91 0);
}

/*
 * «Топові товари» (рішення 20.10): кількість товарів задається в блоці, список гортається вбік (custom-dev.css:75-135).
 * ≥768 видно рівно 5 / 4 / 3 цілих картки, решта — прокруткою; смуга прокрутки — як була.
 * custom-dev.css рахує колонку з відступом 15 px, а реальний відступ — var(--inner_g) (19,2 px на 1920) → список ширший
 * за контейнер, остання видима картка зрізана (№139); а межа max-width:1740px дає 4 колонки рівно на 1740.
 * Тут колонка рахується через той самий var(--inner_g), межі 1739/1740, 1199/1200, 767/768 — як у темі.
 * ≤767 — два ряди, що гортаються разом «сторінками» 2×2 (перший екран — як у макеті 360–767), див. нижче.
 * Скоуп — клас секції .popular; на сторінці товару (upsale / cross-sells) цей файл не підключається.
 */
.popular .popular_list ul {
    --popular-cols: 5;
    grid-auto-columns: calc((100% - (var(--popular-cols) - 1) * var(--inner_g)) / var(--popular-cols));
}

@media only screen and (max-width: 1739px) {
    .popular .popular_list ul {
        --popular-cols: 4;
    }
}

@media only screen and (max-width: 1199px) {
    .popular .popular_list ul {
        --popular-cols: 3;
    }
}

/*
 * ≤767 — «сторінки» 2×2 у порядку рядків: 1 2 / 3 4, далі 5 6 / 7 8 (рішення 20.10).
 * Порядок у DOM не міняється (клавіатура і скрінрідер — 1→8), лише розміщення: 1-а і 2-а картка кожної четвірки — у верхній ряд,
 * 3-я і 4-а — у нижній. Картка з визначеним рядком стає в ньому після попередніх (grid-auto-flow: row), тож колонки йдуть парами по сторінках.
 * Ряди однакової висоти (1fr); другий ряд з'являється, лише якщо в ньому є картки.
 * Прилипання — до початку сторінки (1-а картка четвірки), по одній сторінці за жест.
 */
@media only screen and (max-width: 767px) {
    .popular .popular_list {
        scroll-snap-type: x mandatory;
    }

    .popular .popular_list ul {
        --popular-cols: 2;
        grid-template-rows: none;
        grid-auto-rows: 1fr;
        grid-auto-flow: row;
    }

    .popular .popular_list li:nth-child(4n + 1),
    .popular .popular_list li:nth-child(4n + 2) {
        grid-row: 1;
    }

    .popular .popular_list li:nth-child(4n + 3),
    .popular .popular_list li:nth-child(4n + 4) {
        grid-row: 2;
    }

    .popular .popular_list li:nth-child(4n + 1) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /*
     * Остання сторінка з однією карткою (5, 9 товарів): картка займає обидві колонки сторінки, а праву колонку забирає
     * відступ (100% тут — ширина двох колонок з проміжком, тож уміст = одна колонка). Інакше друга колонка порожня, браузер
     * не враховує її в ширині прокрутки, і остання сторінка не доходить до краю (прокрутка зупиняється на пів-сторінки).
     */
    .popular .popular_list li:nth-child(4n + 1):last-child {
        grid-column-end: span 2;
        padding-right: calc((100% + var(--inner_g)) / 2);
    }
}

.tiles_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(20px, 4.17vw, 60px);
}

.tiles_item {
    position: relative;
    min-width: 0;
}

.tiles_link {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 420 / 500;
    background-color: #E9E5DE;
}

.tiles_link .tiles_image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}

/* Тема фарбує кожен елемент через `* { color: var(--color) }` — тож змінна, як у .master. */
.tiles_text {
    --color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5em;
    position: absolute;
    left: var(--tiles-inset);
    right: var(--tiles-inset);
    bottom: var(--tiles-inset);
    font-family: var(--family);
    font-size: var(--tiles-font);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: .02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.tiles_badge {
    padding: .4em .48em;
    line-height: 1;
    background-color: var(--red);
}

.tiles_link:focus {
    outline: none;
}

.tiles_link:focus-visible {
    z-index: 1;
    outline: 2px solid var(--white);
    outline-offset: -6px;
    box-shadow: inset 0 0 0 4px var(--black);
}

@media (hover: hover) {
    .tiles_link:hover .tiles_image {
        transform: scale(1.03);
    }
}

@media only screen and (max-width: 767px) {
    .tiles {
        --tiles-font: clamp(12px, 3.33vw, 24px);
        --tiles-inset: clamp(14px, 4.15vw, 32px);
    }

    .tiles_list {
        grid-template-columns: repeat(2, 1fr);
        margin-left: calc(var(--bone) * -1);
        margin-right: calc(var(--bone) * -1);
    }

    .tiles_badge {
        padding: .3em .45em;
    }
}

/*
 * До 389 px «Категорії товарів» і так стоїть у два рядки, але блок заголовка лишається широким
 * і забирає все місце лінії. Звужуємо його до найдовшого слова — лінія стає від «Категорії» до посилання, як у макеті 360.
 * Від 390 px заголовок уміщається в рядок, і правило не діє (інакше заголовок переносився б).
 */
@media only screen and (max-width: 389px) {
    .tiles .popular_title {
        flex: 0 1 min-content;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tiles_link .tiles_image {
        transition: none;
    }

    .tiles_link:hover .tiles_image {
        transform: none;
    }
}