/**
 * ELBIN — каталог на телефоні (inc/elbin-redesign/catalog-mobile.php)
 *
 * Діє лише під body.elbin-r2-mview (категорії, /catalog/, хіти головної) і лише
 * до 600px; вигляд задає клас на <html>: .elbin-mview-list | .elbin-mview-grid.
 * Розмітка картки та сама, що на десктопі: у списку <article> стає сіткою, а
 * __body і __footer — display:contents, щоб їхні діти лягли в її клітинки.
 */

/* Швидкі фільтри — над товарами, телефон і планшет (на десктопі є сайдбар) */
.elbin-r2-quickf {
    display: none;
}

@media (max-width: 1023.98px) {
    .elbin-r2-quickf {
        display: flex;
        gap: 8px;
        margin: 0 0 12px;
        padding: 2px 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .elbin-r2-quickf::-webkit-scrollbar {
        display: none;
    }

    .elbin-r2-quickf__chip {
        flex: none;
        height: 36px;
        margin: 0;
        padding: 0 14px;
        border: 1px solid var(--elbin-r2-line);
        border-radius: var(--elbin-r2-r-pill, 999px);
        background: var(--elbin-r2-surface);
        box-shadow: none;
        color: var(--elbin-r2-text);
        font: 600 13px/1 var(--elbin-r2-font-ui);
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
        cursor: pointer;
    }

    .elbin-r2-quickf__chip[aria-pressed="true"] {
        border-color: var(--elbin-r2-accent);
        background: var(--elbin-r2-accent-50);
        color: var(--elbin-r2-ink-on-accent);
    }

    /* Шторка «Сортування» (<dialog>, archive.js): варіанти з select WC — телефон і планшет */
    .elbin-r2-sort-sheet {
        inset: auto 0 0;
        width: 100%;
        max-width: none;
        max-height: 80vh;
        margin: 0;
        padding: 0 0 env(safe-area-inset-bottom);
        border: 0;
        border-radius: 16px 16px 0 0;
        background: var(--elbin-r2-surface);
        color: var(--elbin-r2-ink);
        /* та сама анімація, що в шторок каталогу й кошика (mobile-nav.css,
           cart-drawer.css): виїзд знизу + фон проявляється (Данило 22.10) */
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .elbin-r2-sort-sheet.is-open {
        transform: translateY(0);
    }

    .elbin-r2-sort-sheet::backdrop {
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .elbin-r2-sort-sheet.is-open::backdrop {
        opacity: 1;
    }

    .elbin-r2-sort-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 8px 8px 16px;
        border-bottom: 1px solid var(--elbin-r2-line);
        font: 700 16px/1.2 var(--elbin-r2-font-ui);
    }

    .elbin-r2-sort-sheet__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--elbin-r2-text-2);
        font-size: 24px;
        line-height: 1;
    }

    .elbin-r2-sort-sheet__opt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 52px;
        padding: 0 16px;
        border: 0;
        border-bottom: 1px solid var(--elbin-r2-line);
        background: none;
        font: 500 15px/1.25 var(--elbin-r2-font-ui);
        color: inherit;
        text-align: left;
    }

    .elbin-r2-sort-sheet__opt[aria-pressed="true"] {
        font-weight: 700;
    }

    .elbin-r2-sort-sheet__opt[aria-pressed="true"]::after {
        content: "";
        width: 20px;
        height: 20px;
        background: var(--elbin-r2-accent-700);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

@media (max-width: 599.98px) {

    /* ── Шапка категорії: крихти → одна кнопка «‹ Батьківська», H1 + кількість ── */

    .elbin-r2-mview .elbin-r2-cat-hero,
    .elbin-r2-mview .elbin-r2-cat-hero.no-desc {
        padding: 10px 0 12px;
    }

    .elbin-r2-mview .elbin-r2-breadcrumb {
        display: block;
        margin: 0 0 10px;
        padding: 0;
        border: 0;
    }

    .elbin-r2-mview .elbin-r2-breadcrumb > * {
        display: none;
    }

    .elbin-r2-mview .elbin-r2-breadcrumb > a:last-of-type {
        position: relative;
        display: inline-block;
        max-width: 100%;
        height: 32px;
        padding: 0 12px 0 26px;
        border-radius: 999px;
        background: var(--elbin-r2-surface-3);
        color: var(--elbin-r2-text-2);
        font-size: 13px;
        font-weight: 600;
        line-height: 32px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: top;
    }

    .elbin-r2-mview .elbin-r2-breadcrumb > a:last-of-type::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 6px;
        width: 18px;
        height: 18px;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .elbin-r2-mview .elbin-r2-cat-hero__head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 8px;
    }

    .elbin-r2-mview .elbin-r2-cat-hero__title {
        margin: 0 !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
    }

    .elbin-r2-mview .elbin-r2-cat-hero__qty {
        display: inline;
        font-size: 13px;
        font-weight: 500;
        color: var(--elbin-r2-text-3);
        white-space: nowrap;
    }

    /* Вступ опису — не над товарами, а першим абзацом SEO-блоку під ними
       (archive-category.php, elbin_r2_cat_seo_text): «Детальніше» на 2 рядки
       часто відкривало одне слово (тест Данила 20.10, «Фрезери») */
    .elbin-r2-mview .elbin-r2-cat-hero__desc {
        display: none;
    }

    .elbin-r2-mview .elbin-r2-cat-seo__intro,
    .elbin-r2-mview .elbin-r2-cat-seo--intro-only {
        display: block;
    }

    /* ── Тулбар: [Сортування] [Фільтри] [список/сітка] ── */

    .elbin-r2-mview .elbin-r2-toolbar__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
        gap: 8px;
        padding: 10px 0;
    }

    .elbin-r2-mview .elbin-r2-toolbar__left,
    .elbin-r2-mview .elbin-r2-toolbar__right {
        display: contents;
    }

    .elbin-r2-mview .elbin-r2-toolbar__count,
    .elbin-r2-mview .elbin-r2-toolbar__grid,
    .elbin-r2-mview .elbin-r2-toolbar__sort-wrap, /* select лишається в DOM: його міняє шторка «Сортування» */
    .elbin-r2-mview .woo-listing-top { /* другий сорт Blocksy (кнопка ⇅ на пошуку) — є в тулбарі */
        display: none;
    }

    .elbin-r2-mview .elbin-r2-cat-layout {
        padding-top: 0; /* список товарів одразу під тулбаром (Данило 21.10) */
    }

    /* «Сортування» і «Фільтри» — один елемент .elbin-r2-toolbar__btn (Данило 21.10:
       прозорий select поверх обгортки мав іншу структуру й шрифт 16px). */
    .elbin-r2-mview .elbin-r2-toolbar__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        height: 44px;
        margin: 0;
        padding: 0 10px;
        border: 1px solid var(--elbin-r2-line);
        border-radius: 10px;
        background: var(--elbin-r2-surface);
        font: 600 14px/1 var(--elbin-r2-font-ui);
        color: var(--elbin-r2-ink);
        white-space: nowrap;
        cursor: pointer;
    }

    .elbin-r2-mview .elbin-r2-toolbar__btn svg {
        flex: none;
    }

    .elbin-r2-mview .elbin-r2-toolbar__sort-btn {
        order: 1;
    }

    .elbin-r2-mview .elbin-r2-toolbar__filters-btn {
        order: 2;
    }

    .elbin-r2-mview .elbin-r2-toolbar__view {
        order: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--elbin-r2-line);
        border-radius: 10px;
        background: var(--elbin-r2-surface);
        box-shadow: none;
        color: var(--elbin-r2-text-2);
        cursor: pointer;
    }

    /* іконка показує, НА ЩО перемкнемо */
    .elbin-mview-list .elbin-r2-toolbar__view-list,
    .elbin-mview-grid .elbin-r2-toolbar__view-grid {
        display: none;
    }

    .elbin-r2-mview .elbin-r2-toolbar__chips {
        order: 4;
        grid-column: 1 / -1;
    }

    /* ── Картка: спільне для списку й сітки ── */

    .elbin-r2-mview .elbin-r2-product-card__keyspecs {
        display: block;
        font-size: 12px;
        line-height: 16px;
        color: var(--elbin-r2-text-3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .elbin-r2-mview .elbin-r2-product-card__stock--in {
        color: #0B7A44; /* success #0F9D58 на білому 12px — 3,4:1, мало */
    }

    /* ── A · СПИСОК: фото ліворуч, рядки під лінію ── */

    /* плитки підкатегорій (/catalog/, батьківські категорії) живуть у тій самій ul.products — їх не чіпаємо */
    .elbin-mview-list .elbin-r2-mview ul.products:not(:has(> .product-category)),
    .elbin-mview-list .elbin-r2-mview .elbin-r2-hits__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto; /* бандл дає рядкам 1fr — кожен рядок списку тягнувся до найвищого */
        gap: 0;
        /* на всю ширину екрана, як у макеті: поля контейнера (16px) — всередину рядка */
        margin-left: -16px;
        margin-right: -16px;
        background: var(--elbin-r2-surface);
        border-top: 1px solid var(--elbin-r2-line);
        border-bottom: 1px solid var(--elbin-r2-line);
    }

    /* у категорії лінію над списком дає нижній бордер тулбара — інакше подвійна */
    .elbin-mview-list .elbin-r2-mview .elbin-r2-cat-products ul.products {
        border-top: 0;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr) 44px;
        /* лише auto: рядок 1fr Chrome роздував до ~68px (картка 173 → 131px) */
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas:
            "img name  name"
            "img keys  keys"
            "img meta  meta"
            "img stock cta"
            "img price cta";
        column-gap: 6px;
        padding: 12px 16px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card + .elbin-r2-product-card {
        border-top: 1px solid var(--elbin-r2-line);
    }

    /* Категорія показує і підкатегорії, і товари (display=both, на проді 4 шт.:
       «Приладдя»…) — усе в одній ul: плитки лишаються сіткою, товар — рядком
       на всю її ширину, окремою білою карткою (між ними gap сітки, не лінія). */
    /* …і на 320–374 теж 2 колонки (база там дає 1 — 25 плиток «Приладдя» на всю ширину) */
    .elbin-r2-mview ul.products:has(> .product-category):has(> .elbin-r2-product-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* перший товар — з нового рядка, а не в порожній клітинці поруч із плиткою */
    .elbin-r2-mview ul.products > .product-category + .elbin-r2-product-card {
        grid-column-start: 1;
    }

    .elbin-mview-list .elbin-r2-mview ul.products:has(> .product-category) > .elbin-r2-product-card {
        grid-column: 1 / -1;
        border: 0;
        border-radius: 12px;
        background: var(--elbin-r2-surface);
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__body,
    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__footer {
        display: contents;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__img-wrap {
        grid-area: img;
        align-self: start;
        width: 96px;
        height: 96px;
        margin-right: 6px;
        aspect-ratio: auto;
        border-radius: 8px;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__img {
        padding: 6px;
        transform: none;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__badges {
        top: 4px;
        left: 4px;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__badges .elbin-r2-badge {
        padding: 2px 5px;
        font-size: 10px;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__name {
        grid-area: name;
        min-height: 0;
        max-height: 3.96em;
        font-size: 14px;
        line-height: 1.32;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__keyspecs {
        grid-area: keys;
        margin-top: 4px;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__metarow {
        grid-area: meta;
        margin-top: 4px;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__stock {
        grid-area: stock;
        align-self: end;
        margin-top: 6px;
        font-size: 12px;
    }

    /* Ціна зі знижкою — одним рядком: «3072 ₴ 3840 ₴». Чип «−768 ₴» ховаємо —
       знижку вже каже бейдж «−20%» на фото. Не влізло (5 знаків на 360px) —
       стара ціна переноситься під нову, а не навпаки. */
    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__price {
        grid-area: price;
        align-self: end;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 6px;
        row-gap: 0;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-price-old {
        order: 1;
    }

    /* і в сітці: на 320–390 чип заїжджав під кошик (Данило 26.10) */
    :is(.elbin-mview-list, .elbin-mview-grid) .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-price-save {
        display: none;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-price-current {
        font-size: 18px;
        white-space: nowrap;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__cta {
        grid-area: cta;
        align-self: end;
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 10px;
        background-size: 20px 20px;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__specs {
        display: none !important;
    }

    /* Серце: на 320–359 у рядку ціни немає місця (ціна + 2 кнопки) — лише на
       сторінці товару; з 360px — поруч із кошиком, як у макеті */
    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-wishlist-btn {
        display: none;
    }

    /* ── B · СІТКА 2×: і на 320–374 (базова сітка там 1 колонка) ── */

    .elbin-mview-grid .elbin-r2-mview ul.products:not(:has(> .product-category)),
    .elbin-mview-grid .elbin-r2-mview .elbin-r2-hits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .elbin-mview-grid .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__body {
        padding: 8px 10px 10px;
        gap: 6px;
    }

    .elbin-mview-grid .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__img {
        padding: 8px;
    }

    .elbin-mview-grid .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__name {
        font-size: 13px;
    }

    .elbin-mview-grid .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__keyspecs {
        font-size: 11.5px;
    }

    .elbin-mview-grid .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-price-current {
        font-size: 15px;
        white-space: nowrap;
    }

    .elbin-mview-grid .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__footer {
        gap: 6px;
    }

    .elbin-mview-grid .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-product-card__cta {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 10px;
        background-size: 18px 18px;
    }
}

@media (min-width: 360px) and (max-width: 599.98px) {
    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card {
        grid-template-columns: 96px minmax(0, 1fr) 44px 44px;
        grid-template-areas:
            "img name  name  name"
            "img keys  keys  keys"
            "img meta  meta  meta"
            "img stock heart cta"
            "img price heart cta";
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-wishlist-btn {
        grid-area: heart;
        align-self: end;
        position: static;
        display: inline-flex;
        width: 44px;
        height: 44px;
        border: 1px solid var(--elbin-r2-line);
        border-radius: 10px;
        background: var(--elbin-r2-surface);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        transform: none;
    }
}

@media (max-width: 374.98px) {
    /* 360 — найчастіший Android: 5-значна ціна зі знижкою «19899 ₴ 21629 ₴» при 18/13px
       не влазить у колонку (~126px) і стара переїжджала рядком нижче */
    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-price-current {
        font-size: 16px;
    }

    .elbin-mview-list .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-price-old del {
        font-size: 12px;
    }

    .elbin-mview-grid .elbin-r2-mview :is(ul.products, .elbin-r2-hits__grid) > .elbin-r2-product-card .elbin-r2-price-current {
        font-size: 14px;
    }
}