/* ── Магазин / категорія товару (woocommerce/archive-product.php) ──────────
   MVP-прохід (docs/05-templates.md §5.2): без сайдбару з фільтрами (його й
   на проді фактично нема — Elementor його ховає) і без SEO-тексту під
   лістингом (реальні норми годівлі — окрема задача з контентом від Viktor).

   Оформлення самої картки товару (global/product-card.php) переїхало в
   css/pages/product-card-grid.css — той самий вигляд потрібен ще й на
   сторінці акцій, і дві копії правил розійшлися б на першій же правці.
   Тут лишається тільки те, що належить саме магазину: заголовок, опис
   категорії, панель сортування, сітка. */

/* Той самий шрифт і кегль, що й .content-page__title (page.css) — це та
   сама роль "заголовок сторінки", просто інший шаблон. Глобальний
   `h1{font-family:var(--font-heading)}` (main.css) тут навмисно
   перебивається — на решті контентних сторінок h1 теж на --font-body. */
.shop__title {
    position: relative;
    margin: 0 0 32px;
    padding-bottom: 18px;
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
    text-align: center;
    /* Заголовок тут — не тільки «Магазин», а й будь-яка назва категорії:
       «Індики та перепела», «Аксесуари для тварин». Довгі назви без balance
       ламаються криво — одне слово лишається на другому рядку. */
    text-wrap: balance;
}
/* Кегль лишаємо 36px: він навмисно збігається з .content-page__title (це та
   сама роль «заголовок сторінки»), і збільшувати його тут означало б розвести
   сторінки між собою. Заголовку бракувало не розміру, а опори — він висів
   голим рядком за 24px від тулбара, і сторінка починалась ніби з середини.

   Риска — той самий прийом, що під заголовками футера: у проєкті це вже
   усталена мітка «це заголовок», тож сторінка читається як частина того
   самого сайту, а не як окреме рішення. Тут вона по центру, бо й заголовок
   по центру. */
.shop__title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    background: var(--color-accent);
}

/* Опис категорії (woocommerce_archive_description) — звичайний текст
   редактора WP, той самий підхід, що й .content-page__content деінде:
   стилізуємо за тегами, бо розмітку задає редактор, не БЕМ-класи. */
.shop__description {
    max-width: 780px;
    margin: 0 0 32px;
    color: var(--color-muted);
    font-size: 18px;
    line-height: 1.6;
}
.shop__description p {
    margin: 0 0 16px;
}
.shop__description p:last-child {
    margin-bottom: 0;
}

/* ── Панель "N товарів" + сортування ────────────────────────────────────────
   Обидва — вивід самого WooCommerce (woocommerce_result_count() /
   woocommerce_catalog_ordering()), функціональність не чіпаємо, лише
   вирівнювання й типографіка навколо. */
.shop__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 16px;
}
.shop__count {
    margin: 0;
    color: var(--color-muted);
    font-size: 15px;
}
/* Та сама історія, що з формою сортування нижче: WooCommerce вішає на свій
   лічильник margin-bottom: 1em. Обгортка через це виходила 39px замість 24,
   і текст «Показано 1–12 із 61» ставав на ~7px вище за центр select'а поруч —
   рядок тулбара читався як невирівняний. Селектор із тегом, бо вуківський
   (.woocommerce .woocommerce-result-count) має два класи. */
.shop__count p.woocommerce-result-count {
    margin: 0;
}
/* Стрілка — та сама icon-chevron-down зі спрайту, що й у шевронах хедера
   (header.php, home/*.php), не нативна стрілка select (у різних браузерах
   виглядає по-різному, у деяких — взагалі відсутня). appearance:none знімає
   нативну, іконка — окремий SVG поруч, allowed-events:none, щоб клік крізь
   неї падав на сам select. */
/* Власна ширина select'а — по найдовшому варіанту ("Сортувати за середнім
   рейтингом"), а це 337px: на 375px екрана він вилазив за свій контейнер
   (335px) — заміряно, не припущення. Самого max-width на select'і мало:
   .shop__ordering — теж flex-елемент, і його min-width:auto (дефолт flex)
   не дає стиснутись нижче ширини вмісту, тобто того ж select'а. Тому
   min-width:0 на обгортці + width:100% на select'і. */
.shop__ordering {
    position: relative;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
}
/* WooCommerce вішає на свою форму margin-bottom: 1em. Через нього обгортка
   виходила на 16px вищою за сам select (58 проти 42 — заміряно), і стрілка,
   відцентрована по обгортці, з'їжджала на 8px вниз, тобто рівно на половину
   цього відступу. Заодно під тулбаром лишався мертвий проміжок.

   Селектор навмисно довший за вуківський (.woocommerce .woocommerce-ordering —
   два класи): коротшим його не перебити. */
.shop__ordering form.woocommerce-ordering {
    margin: 0;
}
.shop__ordering select {
    appearance: none;
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text);
}
.shop__ordering-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text);
}

/* ── Грід карток ─────────────────────────────────────────────────────────── */
.shop__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

/* WooCommerce (woocommerce.css/woocommerce-layout.css) стилізує ту саму
   розмітку своїми селекторами — і майже всі специфічніші за прості
   `.shop__pagination ul/li/a`: там по 2-3 класи + 2-4 теги (nav, ul, li,
   a). Найпомітніше — `li{float:left; border-right:1px solid …}`, через що
   кнопки виглядали суцільною смугою без проміжків замість окремих боксів
   із відступом. Тому кожен селектор тут навмисно тримає МІНІМУМ стільки ж
   класів, скільки в конкурентного правила WooCommerce (звірено через
   getMatchedCSSRules на живій сторінці, не навмання) — це і є "покращена"
   пагінація: власний вигляд замість того, що дає плагін за замовчуванням. */
.shop__pagination {
    margin: 16px 0 40px;
}
.shop__pagination .woocommerce-pagination {
    display: flex;
    justify-content: center;
}
.shop__pagination .woocommerce-pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    /* woocommerce.css вішає рамку (1px 0 1px 1px, лавандова) прямо на цей
       <ul> — залишок «суцільної смуги» дизайну плагіна, зайвий тепер, коли
       кожна кнопка вже своя окрема рамка. */
    border: none;
    list-style: none;
}
.shop__pagination .woocommerce-pagination .page-numbers li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    border-right: none;
}
.shop__pagination .woocommerce-pagination a.page-numbers,
.shop__pagination .woocommerce-pagination span.page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.shop__pagination .woocommerce-pagination a.page-numbers:hover,
.shop__pagination .woocommerce-pagination a.page-numbers:focus-visible {
    background: var(--color-bg-alt);
    border-color: var(--color-primary);
}
.shop__pagination .woocommerce-pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-secondary);
}

/* Іконка «вперед»/«назад» — та сама icon-arrow-right зі спрайту (не текст
   «→»), просто розвернута на 180° для «назад». stroke="currentColor" у
   спрайті — тому колір іде за текстом кнопки й сам міняється в
   hover/current, окремого правила під колір не треба. */
.shop__pagination-icon {
    display: block;
}
.shop__pagination-icon--prev {
    transform: rotate(180deg);
}

/* Порожній каталог/категорія (woocommerce_no_products_found) виводиться
   тим самим `.woocommerce-info`, що й решта повідомлень WooCommerce, а їх
   тепер оформлює головний css/main.css — глобально, бо вони трапляються і
   в кошику, і на сторінці товару. Своє правило тут прибрано: воно лише
   дублювало падінги й до того ж перебивало шорткатом `border` лівий
   кольоровий кант із глобального стилю. */

/* ── Адаптив ────────────────────────────────────────────────────────────────
   Заміряно на живій сторінці на 375/481/768/1024/1920 (getBoundingClientRect,
   не на око): горизонтального переповнення немає ніде, картки в межах рядка
   однакової висоти скрізь. Правки нижче — про дві речі, які вимірювання
   показали: дрібні тач-таргети й задесктопний падінг на вузькій картці. */

@media (max-width: 1024px) {
    .shop__grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 768px) {
    .shop__title {
        margin-bottom: 24px;
        padding-bottom: 14px;
        font-size: 28px;
    }
    .shop__title::after {
        width: 48px;
    }
    .shop__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }
    .shop__toolbar {
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .shop__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Мобільний: крупніший дрібний текст ─────────────────────────────────────
   Сайт читає багато людей старшого віку, їм має бути зрозуміло, де і що
   (запит Viktor). Тому на ≤768px усі шрифти дрібніше 18px піднято за єдиною
   шкалою: 12→14, 13→15, 14→16, 15→16, 16→17, 17→18. Десктоп не чіпали.
   Правила, що вже були у мобільних медіа-блоках, підвищено на місці; сюди
   зібрано ті, що задавались лише для великих екранів. */
@media (max-width: 768px) {
    .shop__count { font-size: 16px; }
    .shop__ordering select { font-size: 16px; }
    .shop__pagination .woocommerce-pagination a.page-numbers, .shop__pagination .woocommerce-pagination span.page-numbers { font-size: 16px; }
}