/* ── Сторінка товару (woocommerce/content-single-product.php) ───────────────
   Значення зняті вимірюванням із прода (getComputedStyle на живій сторінці,
   не на око): дві колонки по 630px із проміжком 20px, h1 36/42 Open Sans 600,
   ціна 24px, короткий опис 22/35.2, кнопка 300×46 з радіусом 50px.

   Один свідомий відступ від прода — шрифт ціни. На проді діапазон цін
   намальовано Roboto Slab, а ціну вибраної варіації — звичайним Roboto
   (тобто прод сам із собою не збігається). Roboto Slab у темі немає, а
   правило №1 (docs/00-rules.md) забороняє підключати нові шрифти, тож обидві
   ціни йдуть на --font-body — це рівно те, чим прод малює ціну варіації.
   Цим же закривається відкрите питання з project.md «шрифт ціни: Poppins чи
   Roboto Slab».

   Частину селекторів доводиться писати по класах WooCommerce
   (.price, .quantity, .wc-tabs тощо): цю розмітку віддає плагін, своїх
   БЕМ-класів на неї повісити нема як. Скрізь, де так, селектор прибитий до
   свого блоку (.product-single__*), щоб не текло на інші сторінки. */

/* ── Верх: галерея + summary ─────────────────────────────────────────────── */
.product-single__top {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}
.product-single__gallery,
.product-single__summary {
    /* min-width:0 — щоб довга назва товару чи широка таблиця варіацій не
       розпирали колонку понад половину (flex-елемент за замовчуванням не
       стискається нижче ширини вмісту). */
    flex: 1 1 50%;
    min-width: 0;
}

/* Галерея — розмітка плагіна (flexslider + мініатюри). Ширину задає
   колонка, тому тут лише те, що плагін лишає на тему. */

/* position: relative — точка відліку для плашки знижки. WooCommerce кладе
   її в галерею з position:absolute, але позиціонованого предка тут не було,
   і плашка відлічувалась від сторінки: заміряно x = -7, y = -7, тобто вона
   висіла в лівому верхньому куті екрана поза галереєю. */
.product-single__gallery {
    position: relative;
}
/* Плашка «Акція» — та сама, що в сітці акційних пропозицій
   (css/pages/akczijni-propozycziyi.css): один знак на весь сайт. Дефолт
   WooCommerce тут — оливковий блок 83×50 із кутами під нуль.

   На проді цієї плашки на сторінці товару немає взагалі — це свідоме
   доповнення на запит Viktor. Ліворуч, а не по центру як у картці: галерея
   тут 630px, і пігулка посеред її верху висіла б у порожнечі й накривала
   сам товар. */
/* Селектор довгий навмисно: WooCommerce цілиться в `.woocommerce span.onsale`
   (два класи плюс тег), і коротше правило теми йому програвало — плашка
   лишалась оливковим кругом на 13px. Тут на клас більше. */
.product-single .product-single__gallery span.onsale {
    position: absolute;
    top: 20px;
    left: 20px;
    right: auto;
    bottom: auto;
    z-index: 2;
    /* WooCommerce робить із плашки круг: min-width/min-height 3.236em,
       line-height 3.236, радіус 100%. Усе це знімаємо — форма має бути та
       сама пігулка, що в сітці акційних пропозицій. */
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 10px 20px;
    border-radius: 50px;
    background: var(--color-accent);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
    text-align: center;
    color: var(--color-secondary);
}
.product-single__gallery .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
}
/* Мініатюри під головним фото: на проді 95×95 у рядок. */
.product-single__gallery .flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}
.product-single__gallery .flex-control-thumbs li {
    width: 95px;
    margin: 0;
}
.product-single__gallery .flex-control-thumbs img {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
    opacity: .6;
    transition: opacity var(--transition);
}
.product-single__gallery .flex-control-thumbs img.flex-active,
.product-single__gallery .flex-control-thumbs img:hover {
    opacity: 1;
}

/* ── Summary ─────────────────────────────────────────────────────────────── */
.product-single__summary .product_title {
    margin: 0 0 24px;
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.17;
    color: var(--color-text);
}

/* Ціна — одна, і це головне число на екрані. Для variable-товару її
   перераховує js/pages/product.js за обраними опціями (діапазон → точна
   сума), тож окремої «ціни обраної варіації» нижче більше не потрібно.
   Раніше тут стояв дрібний статичний діапазон 24px, а після вибору з'являлась
   друга, більша ціна — клієнти не розуміли, яка з двох справжня. */
.product-single__summary .price {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-text);
}
/* Акція. Стара ціна — сіра й дрібніша, нова — головне число. <ins> браузер
   за замовчуванням підкреслює (Firefox ще й підсвічує тлом), і нова ціна
   виглядала б як посилання — те саме гасимо й у картці товару. Червоним
   нову ціну не фарбуємо: червоний тут уже за плашкою «Акція». */
.product-single__summary .price del {
    margin-right: 10px;
    font-size: .6em;
    font-weight: 400;
    color: var(--color-muted);
}
.product-single__summary .price ins {
    background: none;
    text-decoration: none;
}
/* Текст «Діапазон цін: від … до …» WooCommerce додає для скрінрідерів —
   він і має лишатись тільки для них (на проді він протікає у видимий
   текст, docs/05-templates.md §5.3 називає це помилкою). */
.product-single__summary .price .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Короткий опис товару (post_excerpt) — розмітку задає редактор, тому
   стилізуємо за тегами всередині блоку, як і в інших місцях проєкту.
   Там реально трапляються списки й таблиці: із 61 товару 37 мають <ul>,
   а 28 із них ще й <table> «Рекомендації по відгодівлі» (перевірено через
   Store API, не припущення), тож без стилів це виглядало як злиплий текст. */
.product-single__summary .woocommerce-product-details__short-description {
    margin: 0 0 24px;
    font-size: 22px;
    line-height: 1.6;
    color: var(--color-text);
}
.product-single__summary .woocommerce-product-details__short-description p {
    margin: 0 0 8px;
}
.product-single__summary .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

/* Списки. Та сама логіка, що в css/pages/page.css: reset.css знімає
   маркери й робить li блоковим, а блоковий li маркер не малює взагалі —
   тому потрібні і list-style, і display: list-item. */
.product-single__summary .woocommerce-product-details__short-description ul,
.product-single__summary .woocommerce-product-details__short-description ol {
    margin: 0 0 16px;
    padding-left: 26px;
}
.product-single__summary .woocommerce-product-details__short-description ul {
    list-style: disc;
}
.product-single__summary .woocommerce-product-details__short-description ol {
    list-style: decimal;
}
.product-single__summary .woocommerce-product-details__short-description li {
    display: list-item;
    margin-bottom: 6px;
}
.product-single__summary .woocommerce-product-details__short-description li:last-child {
    margin-bottom: 0;
}

/* Таблиця «Рекомендації по відгодівлі». У редакторі в неї свій width
   (у різних товарів 292, 100% або жодного) і жодного <th> — усі комірки
   <td>, а перший рядок — заголовок через colspan. CSS перебиває
   HTML-атрибут width, тож таблиця скрізь однакової ширини колонки. */
.product-single__summary .woocommerce-product-details__short-description table {
    width: 100%;
    margin: 0 0 16px;
    border-collapse: collapse;
    font-size: 18px;
}
.product-single__summary .woocommerce-product-details__short-description td {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
/* Перший рядок — назва таблиці (одна комірка на всю ширину через colspan).
   Однаково в усіх перевірених товарах, тому оформлюємо як шапку. */
.product-single__summary .woocommerce-product-details__short-description tr:first-child td {
    background: var(--color-bg-alt);
    font-weight: 600;
}

/* ── Форма купівлі ───────────────────────────────────────────────────────── */
.product-single__summary form.cart {
    margin: 0 0 24px;
}
/* WooCommerce віддає вибір варіацій таблицею, де підпис («Вага») — окрема
   комірка ЗЛІВА від кнопок. Через це підпис висів по центру відносно ряду
   свотчів, а «Очистити» з'їжджало під праву колонку — саме та неохайність,
   яку видно на скріні. Розкладаємо комірки в стовпчик: підпис зверху,
   кнопки під ним, «Очистити» під ними — усе по одній лівій межі.
   Це чисто візуальна лінеаризація: таблиця тут не дані, а розмітка форми,
   тож нічого семантичного не втрачаємо. */
.product-single__summary .variations,
.product-single__summary .variations tbody,
.product-single__summary .variations tr,
.product-single__summary .variations th,
.product-single__summary .variations td {
    display: block;
    width: 100%;
}
.product-single__summary .variations {
    margin: 0 0 20px;
    border-collapse: collapse;
}
.product-single__summary .variations tr + tr {
    margin-top: 20px;
}
.product-single__summary .variations th,
.product-single__summary .variations td {
    padding: 0;
    text-align: left;
}
.product-single__summary .variations th.label {
    margin-bottom: 10px;
}
.product-single__summary .variations th.label label {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
}
/* Нативний <select> лишається робочим полем форми (його читає WooCommerce),
   а ховаємо ми його ТІЛЬКИ тоді, коли js/pages/product.js уже намалював
   кнопки й повісив свій клас. Ховати беззастережно не можна: якщо скрипт
   не відпрацює, варіацію не буде чим обрати — товар стане некупованим
   через оформлення. */
.product-single__form--swatched .variations select {
    display: none;
}
/* Поки кнопок немає — список має нормальний вигляд, а не дефолтний. */
.product-single__summary .variations select {
    appearance: none;
    width: 100%;
    max-width: 320px;
    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: 18px;
    color: var(--color-text);
}

/* Кнопки-«свотчі» (js/pages/product.js) — як на проді й як у сітці
   магазину. Розміри з прода: кегль 24px, кнопка ~36px заввишки. */
.product-single__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.product-single__swatch {
    padding: 6px 16px;
    border: 1px solid var(--color-text);
    border-radius: 6px;
    background: var(--color-bg);
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.3;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.product-single__swatch:hover {
    background: var(--color-bg-alt);
}
.product-single__swatch.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-secondary);
}
/* Комбінація, якої немає в наявності — сіра й закреслена, як у сітці. */
.product-single__swatch:disabled {
    border-color: var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-muted);
    text-decoration: line-through;
    cursor: not-allowed;
}
.product-single__summary .reset_variations {
    display: inline-block;
    margin-top: 10px;
    font-size: 16px;
    color: var(--color-muted);
    text-decoration: underline;
}
.product-single__summary .reset_variations:hover {
    color: var(--color-text);
}

/* ── Блок «обрана варіація + купівля» ─────────────────────────────────────
   Вигляд за референсом від Viktor: велика ціна, лічильник кількості
   пігулкою, широка кнопка купівлі під ними.

   ВАЖЛИВО, чому саме так, а не «ціна поруч зі степером», як на референсі:
   WooCommerce тримає ціну й кнопку в різних обгортках, і поставити їх в
   один рядок можна було б лише через `display: contents` на .single_variation.
   Спробував — і це ламає плагін: він показує цей блок джейквері-анімацією
   (slideDown), яка на contents-елементі рахує нульову висоту й лишає
   inline `display: none`. Ціна зникала зовсім (знайдено на живій сторінці).
   Тому display цього блоку віддано плагіну, а ми стилізуємо лише вміст. */
.product-single__summary .single_variation {
    margin: 0 0 16px;
}

/* Ціна обраної варіації — головне число на екрані, тому помітно більша за
   діапазон угорі (пряма вимога Viktor). */
.product-single__summary .woocommerce-variation-price .price {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
}
/* Нижню ціну варіації ховаємо — її місце зайняла верхня жива ціна. Лише коли
   скрипт справді підняв живу ціну (клас вішає він): без JS це правило не
   діє, і сторінка лишається з ціною, а не без неї. Наявність і опис варіації
   (.woocommerce-variation-availability / -description) лишаються. */
.product-single__form--live-price .woocommerce-variation-price {
    display: none;
}
.product-single__summary .woocommerce-variation-availability {
    margin: 8px 0 0;
}

/* Ряд купівлі: лічильник і кнопка в одному рядку, поки вони туди
   вміщаються. Ключове — саме «поки вміщаються»: з nowrap і min-width на
   кнопці степер на планшеті розчавлювало до 39px замість 146 (заміряно на
   769px, кнопка забирала всю ширину собі). Тому лічильник не стискається
   взагалі, а кнопка має basis, менший за колонку: коли обидва не влазять,
   вона переходить на власний рядок замість того, щоб душити сусіда.
   Цю обгортку плагін inline-стилями не чіпає (перевірено), тож flex
   тут безпечний. */
.product-single__summary .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.product-single__summary .quantity {
    flex: 0 0 auto;
}
/* Прихованих полів у цьому ряду кілька (variation_id тощо) — вони не мають
   ставати flex-елементами й тягнути gap. */
.product-single__summary .woocommerce-variation-add-to-cart input[type="hidden"] {
    display: none;
}

/* Простий товар без варіацій: та сама логіка рядка, але обгорток немає —
   кількість і кнопка лежать прямо у формі. */
.product-single__summary form.cart:not(.variations_form) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* Лічильник кількості: пігулка з −/+ по краях (кнопки додає
   js/pages/product.js). Поле лишається справжнім <input type="number"> —
   його читає WooCommerce, і без JS воно працює як звичайне поле. */
.product-single__quantity {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50px;
    overflow: hidden;
}
.product-single__quantity-btn {
    width: 44px;
    height: 46px;
    border: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition);
}
.product-single__quantity-btn:hover {
    background: var(--color-bg-alt);
}
.product-single__quantity-btn:disabled {
    color: var(--color-border);
    cursor: not-allowed;
}
.product-single__quantity-btn:disabled:hover {
    background: transparent;
}
.product-single__summary .quantity input.qty {
    width: 56px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 18px;
    text-align: center;
    color: var(--color-text);
    /* Нативні стрілочки браузера зайві — є свої кнопки. */
    appearance: textfield;
}
.product-single__summary .quantity input.qty::-webkit-outer-spin-button,
.product-single__summary .quantity input.qty::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}
/* Поки JS не намалював кнопки — поле лишається видимою рамкою саме по собі,
   інакше воно виглядало б як текст без поля. */
.product-single__summary .quantity:not(.product-single__quantity) input.qty {
    width: 100px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
/* Кнопку купівлі WooCommerce фарбує своїм фіолетовим (#7f54b3) через
   `.woocommerce button.button.alt` — це 3 класи + тег, тобто специфічніше
   за простий `.product-single__summary .single_add_to_cart_button` (2 класи),
   і наші колір/радіус/кегль тихо програвали (заміряно на живій сторінці:
   було 16px/700, радіус 3px, фіолетовий фон). Тому селектор навмисно
   тримає на клас більше. Клас `.alt` вішає сам плагін у своїх шаблонах
   add-to-cart — така сама гарантія, як і `.single_add_to_cart_button`. */
.product-single .product-single__summary button.single_add_to_cart_button.alt {
    /* basis 240px, а не min-width 300px: на широкій колонці кнопка однаково
       розтягується на все, що лишилось від степера, а на вузькій — чесно
       переходить на свій рядок, замість того щоб стискати степер. */
    flex: 1 1 240px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 54px;
    padding: 10px 15px;
    /* Не чорний #222 (запит Viktor: надто темний) і не чистий акцент
       (надто різкий): окремий токен --color-action. */
    border: 1px solid var(--color-action);
    border-radius: 50px;
    background: var(--color-action);
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
/* Ховер — темніший відтінок самого акценту, а не opacity: на червоному
   прозорість дає рожевуватий, «вимкнений» вигляд, тобто кнопка на наведенні
   виглядала б слабшою, а не активнішою. */
.product-single .product-single__summary button.single_add_to_cart_button.alt:hover,
.product-single .product-single__summary button.single_add_to_cart_button.alt:focus-visible {
    border-color: color-mix(in srgb, var(--color-action) 82%, #000);
    background: color-mix(in srgb, var(--color-action) 82%, #000);
}
.product-single .product-single__summary button.single_add_to_cart_button.alt:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ── Акція ───────────────────────────────────────────────────────────────── */
.product-single__promo {
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--color-accent);
}
.product-single__promo-title {
    display: block;
    font-weight: 600;
}

/* ── Артикул + категорії ─────────────────────────────────────────────────── */
.product-single__meta {
    font-size: 22px;
    line-height: 1.6;
    color: var(--color-text);
}
.product-single__sku,
.product-single__cats {
    display: block;
}
/* «Категорії:» і «Артикул:» — службові підписи, за якими людина орієнтується,
   тому жирні; значення (артикул, категорії-посилання) звичайної ваги,
   посилання підкреслені, щоб було видно, що по них можна клікнути. */
.product-single__label {
    font-weight: 700;
}
.product-single__meta a {
    color: var(--color-text);
    text-decoration: underline;
}
.product-single__meta a:hover {
    color: var(--color-primary);
}

/* ── Вкладки ─────────────────────────────────────────────────────────────── */
.product-single__tabs .wc-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px;
    margin: 0 0 32px;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    list-style: none;
}
.product-single__tabs .wc-tabs li {
    margin: 0;
    padding: 0;
}
.product-single__tabs .wc-tabs li a {
    display: block;
    padding: 0 0 14px;
    border-bottom: 2px solid transparent;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition);
}
.product-single__tabs .wc-tabs li a:hover,
.product-single__tabs .wc-tabs li.active a {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
}

/* Панелі вкладок — усередині звичайний контент редактора (опис товару з
   таблицями складу й поживності), тому теж за тегами. */
.product-single__tabs .woocommerce-Tabs-panel {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text);
}
.product-single__tabs .woocommerce-Tabs-panel h2 {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
}
.product-single__tabs .woocommerce-Tabs-panel p {
    margin: 0 0 16px;
}
/* Списки в описі — те саме, що й у короткому описі: без display:list-item
   маркер не малюється, бо reset.css робить li блоковим. */
.product-single__tabs .woocommerce-Tabs-panel ul,
.product-single__tabs .woocommerce-Tabs-panel ol {
    margin: 0 0 16px;
    padding-left: 26px;
}
.product-single__tabs .woocommerce-Tabs-panel ul {
    list-style: disc;
}
.product-single__tabs .woocommerce-Tabs-panel ol {
    list-style: decimal;
}
.product-single__tabs .woocommerce-Tabs-panel li {
    display: list-item;
    margin-bottom: 6px;
}
/* Таблиці (склад, схеми змішування, поживність) — ключові дані товару, і
   вони мають лишатись текстом, а не картинкою (docs/04-schema-geo.md §4.8).
   На вузьких екранах даємо їм горизонтальну прокрутку в межах свого блоку,
   щоб не розпирали сторінку. */
.product-single__tabs .woocommerce-Tabs-panel table {
    width: 100%;
    /* Верхній відступ — щоб таблиця не прилипала до заголовка над нею. Він
       менший за нижній навмисно: заголовок («Схема змішування 1») належить
       саме цій таблиці, тож має бути ближче до неї, ніж до попереднього
       блоку. Однаковий відступ згори й знизу розірвав би цю пару. */
    margin: 12px 0 24px;
    border: 2px solid var(--color-text);
    border-collapse: collapse;
    /* Цифри в цих таблицях стоять стовпчиком (відсотки, кКал), і пропорційні
       знаки роблять колонку рваною. tabular-nums дає всім цифрам однакову
       ширину — значення вирівнюються самі. */
    font-variant-numeric: tabular-nums;
}
.product-single__tabs .woocommerce-Tabs-panel th,
.product-single__tabs .woocommerce-Tabs-panel td {
    padding: 12px 16px;
    border: 1px solid var(--color-border-strong);
    text-align: left;
}
/* Якщо таблиця відкриває панель, верхній відступ зайвий — його вже дає
   сама панель. */
.product-single__tabs .woocommerce-Tabs-panel > table:first-child {
    margin-top: 0;
}

/* Однакові пропорції колонок у всіх таблицях опису.
   Було: ширину рахував браузер за вмістом, і в сусідніх таблицях на одній
   сторінці межа колонок стояла в різних місцях (заміряно на «БМВД КПК 22-34»:
   66% в одній схемі змішування проти 70% у наступній). Дрібниця, але око її
   ловить — таблиці перестають виглядати як один набір.

   :not(:only-child) — щоб правило не чіпало рядок-шапку з одного
   <td colspan="2"> («Поживність» у «Кормосуміші КОЗАЧОК»): він єдиний у
   своєму рядку, і задавати йому ширину колонки безглуздо. */
.product-single__tabs .woocommerce-Tabs-panel--description table td:first-child:not(:only-child),
.product-single__tabs .woocommerce-Tabs-panel--description table th:first-child:not(:only-child) {
    width: 60%;
}
/* Шапка таблиці — двома селекторами, бо в описах трапляються дві різні
   структури (перевірено на живих товарах):
     • «БМВД КПК 22-34» — нормальний рядок <th> («Інгредієнт» / «Вміст, %»);
     • «Кормосуміш КОЗАЧОК» — жодного <th> взагалі, а замість шапки перший
       рядок з одного <td colspan="2"> («Поживність»).
   Друга структура раніше не ловилась нічим, тож такі таблиці виглядали
   суцільною сіткою однакових клітинок без жодного орієнтира.

   Заливка — --color-action (запит Viktor: чорна шапка надто темна, а
   чистий червоний надто різкий). Розділювачі між клітинками шапки — темніший
   відтінок того ж кольору, а не чорні: чорні лінії різали б шапку на окремі
   плитки. */
.product-single__tabs .woocommerce-Tabs-panel--description th,
.product-single__tabs .woocommerce-Tabs-panel--description tr:first-child td[colspan] {
    border-color: color-mix(in srgb, var(--color-action) 80%, #000);
    background: var(--color-action);
    color: var(--color-secondary);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
}
/* Смуги через рядок. Таблиця розтягнута на всю ширину контенту, і без них
   око губить рядок на півдорозі від назви показника до його значення. */
.product-single__tabs .woocommerce-Tabs-panel tr:nth-child(even) td {
    background: var(--color-bg-muted);
}
/* Назва показника важить більше за сусідній текст — саме її шукають очима,
   коли порівнюють корми. */
.product-single__tabs .woocommerce-Tabs-panel td:first-child {
    font-weight: 500;
}

/* ── Додаткова інформація ────────────────────────────────────────────────────
   Вкладка з атрибутами товару (вага, фасування тощо) — WooCommerce віддає
   її таблицею `woocommerce-product-attributes`, де назва атрибута в <th>,
   значення в <td>. Це справжні табличні дані, тож таблицю лишаємо
   таблицею, лише прибираємо дефолтний вигляд плагіна. */
/* Селектори тут навмисно довші, ніж хотілося б: WooCommerce стилізує цю
   саму таблицю правилом `.woocommerce table.shop_attributes th` — 2 класи
   + 2 теги, тобто специфічніше за звичайне `.product-single__tabs
   .woocommerce-product-attributes th` (2 класи + 1 тег). Через це наші
   падінги й ширини тихо програвали, а `td` лишався з нульовим падінгом
   від reset.css — саме тому значення налазили на назви (заміряно на живій
   сторінці: td padding 0px, th width 150px замість наших). Додаємо третій
   клас — `shop_attributes` вішає сам плагін на цю таблицю. */
.product-single__tabs table.woocommerce-product-attributes.shop_attributes {
    width: 100%;
    margin: 0;
    border: 2px solid var(--color-text);
    border-collapse: collapse;
    /* Без fixed браузер стискає колонку назв під найкоротше слово («Вага»),
       і таблиця виглядає перекошеною. */
    table-layout: fixed;
}
.product-single__tabs table.woocommerce-product-attributes.shop_attributes th,
.product-single__tabs table.woocommerce-product-attributes.shop_attributes td {
    padding: 12px 16px;
    border: 1px solid var(--color-border-strong);
    text-align: left;
    vertical-align: top;
    font-size: 18px;
    line-height: 1.5;
}
/* Колонка назв атрибутів заливається, але НЕ темним, як рядок-шапка в
   таблицях опису: там шапка — один рядок зверху, а тут це ціла колонка на
   всю висоту таблиці, і темною вона перетягнула б на себе всю увагу з самих
   значень. Насичений сірий дає потрібну різницю, не перекошуючи таблицю.

   color задаємо явно, хоч він і збігається з успадкованим. Причина не в
   косметиці: правило шапки вище одного разу вже дотягнулось сюди й зробило
   ці назви білими на світло-сірому — тобто невидимими. Зараз воно обмежене
   панеллю опису, але явний color лишається страховкою: наступне правило для
   th у вкладках не зможе тихо погасити цю колонку. */
.product-single__tabs table.woocommerce-product-attributes.shop_attributes th {
    width: 280px;
    background: var(--color-bg-muted);
    color: var(--color-text);
    font-weight: 600;
}
/* Заливку доводиться повторювати з `tr` у селекторі — і це не зайвий рядок.
   WooCommerce фарбує парні рядки цієї таблиці власним
   `.woocommerce table.shop_attributes tr:nth-child(even) th` (два класи,
   псевдоклас і два теги), і коротше правило вище йому програвало: колонка
   назв у парних рядках втрачала заливку й ішла плямами (заміряно:
   rgba(0,0,0,.024) замість нашого #ececec).

   Смуг через рядок тут не хочемо взагалі: колонка назв уже залита суцільно,
   і зебра поверх неї дає двовимірну шахівницю замість списку. Рядки й так
   розділені — рамки тепер насичені. */
.product-single__tabs table.woocommerce-product-attributes.shop_attributes tr th {
    background: var(--color-bg-muted);
}
.product-single__tabs table.woocommerce-product-attributes.shop_attributes tr td {
    background: var(--color-bg);
}
.product-single__tabs table.woocommerce-product-attributes.shop_attributes td p {
    margin: 0;
}

/* ── Відгуки ─────────────────────────────────────────────────────────────────
   Розмітку віддає WooCommerce (список відгуків + форма коментаря WP), тому
   селектори — по її класах. Реальних відгуків поки немає (правило §6.2:
   вигадувати їх заборонено), тож головне тут — щоб порожній стан і форма
   виглядали як частина сайту, а не як дефолт плагіна. */
.product-single__tabs .woocommerce-Reviews {
    width: 100%;
}
.product-single__tabs .woocommerce-Reviews-title {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
}
.product-single__tabs .woocommerce-noreviews {
    margin: 0 0 32px;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    color: var(--color-muted);
}

/* Список наявних відгуків — на майбутнє, коли перші з'являться. */
.product-single__tabs .commentlist {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}
.product-single__tabs .commentlist .review {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
}
.product-single__tabs .comment-text {
    padding: 0;
    border: 0;
}
.product-single__tabs .woocommerce-review__author {
    font-weight: 600;
}
.product-single__tabs .woocommerce-review__published-date {
    color: var(--color-muted);
    font-size: 15px;
}

/* Форма «залишити відгук». */
.product-single__tabs .comment-reply-title {
    display: block;
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
}
.product-single__tabs .comment-notes {
    margin: 0 0 20px;
    color: var(--color-muted);
    font-size: 15px;
}
.product-single__tabs .comment-form label {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
}
.product-single__tabs .comment-form input[type="text"],
.product-single__tabs .comment-form input[type="email"],
.product-single__tabs .comment-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text);
}
.product-single__tabs .comment-form input[type="text"]:focus,
.product-single__tabs .comment-form input[type="email"]:focus,
.product-single__tabs .comment-form textarea:focus {
    outline: 2px solid var(--color-text);
    outline-offset: 1px;
}
.product-single__tabs .comment-form textarea {
    min-height: 120px;
    resize: vertical;
}
.product-single__tabs .comment-form p {
    margin: 0 0 16px;
}
/* Згода на збереження в куках — чекбокс поруч із текстом, а не над ним. */
.product-single__tabs .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.product-single__tabs .comment-form-cookies-consent label {
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    color: var(--color-muted);
}
/* Зірочки оцінки малює сам WooCommerce своїм іконковим шрифтом — розміри
   лишаємо його, задаємо лише положення й відступ. */
.product-single__tabs .comment-form-rating .stars {
    margin: 0 0 16px;
    font-size: 20px;
}
.product-single__tabs .comment-form-rating select {
    /* Дубль зірочок для доступності: WooCommerce ховає його своїм JS, але
       без JS він має лишатись видимим і робочим. */
    max-width: 240px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 16px;
}
/* Кнопка «Відправити» — той самий вигляд, що й «Придбати».
   Тут єдине місце в проєкті, де довелось узяти id у селектор, і це не
   недогляд: WooCommerce фарбує цю кнопку правилом `.woocommerce #respond
   input#submit` — два id, а два id класами не перебити в принципі
   (заміряно: наші колір і радіус програвали, лишався лавандовий фон
   плагіна з радіусом 3px). Тому селектор повторює обидва id плагіна й
   додає свої класи зверху. Розмітку з цими id віддає WooCommerce, ми її
   не контролюємо. */
.product-single__tabs #respond .form-submit input#submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 50px;
    padding: 10px 24px;
    border: 1px solid var(--color-action);
    border-radius: 50px;
    background: var(--color-action);
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.product-single__tabs #respond .form-submit input#submit:hover {
    border-color: color-mix(in srgb, var(--color-action) 82%, #000);
    background: color-mix(in srgb, var(--color-action) 82%, #000);
}

/* Відступ від футера — без нього вкладки впритул до нього (заміряно: 0px). */
.product-single {
    padding-bottom: 60px;
}

/* Видимий фокус для всього, що додав скрипт (свотчі й лічильник). Це
   вимога чеклиста README: керування з клавіатури має бути видно. Рідні
   поля WooCommerce свій фокус мають, а ці кнопки ми створили самі. */
.product-single__swatch:focus-visible,
.product-single__quantity-btn:focus-visible,
.product-single__tabs .wc-tabs li a:focus-visible,
.product-single__summary .reset_variations:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* ── Адаптив ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .product-single__summary .product_title {
        font-size: 30px;
    }
    /* Колонка тут уже вузька (355px на 769px екрана — заміряно), тому весь
       текст праворуч сходить на 18px. Промо йшло в цьому ж списку останнім:
       на 22px воно займало 132px висоти, тобто 5-6 рядків посеред блоку
       купівлі. */
    .product-single__summary .woocommerce-product-details__short-description,
    .product-single__meta,
    .product-single__promo {
        font-size: 18px;
    }
    /* Нижче десктопа сторінку гортають пальцем: свотч був 40px при
       орієнтирі ~44px — те саме, що вже виправлено в сітці магазину. */
    .product-single__swatch {
        padding: 9px 16px;
    }
}

@media (max-width: 768px) {
    /* Одна колонка: галерея зверху, як на проді. */
    .product-single__top {
        flex-direction: column;
        gap: 24px;
    }
    .product-single__summary .product_title {
        font-size: 28px;
    }
    /* Кнопка не має бути ширшою за екран: 300px мінімуму з десктопа тут
       завеликі (на 375px усередині контейнера лишається 335px). Ширину на
       весь рядок при цьому зберігаємо — інакше кнопка сідає поруч зі
       степером і стає вдвічі вужчою за палець. */
    /* На телефоні кнопка завжди окремим рядком на всю ширину — перенос тут
       уже не «як вийде», а правило: степер 146px лишив би їй менше за
       половину екрана. */
    .product-single .product-single__summary button.single_add_to_cart_button.alt {
        flex: 1 1 100%;
        height: 52px;
        font-size: 20px;
    }
    .product-single__summary .quantity input.qty,
    .product-single__quantity-btn {
        height: 50px;
    }
    .product-single__tabs .wc-tabs {
        gap: 16px 24px;
    }
    .product-single__tabs .wc-tabs li a {
        font-size: 18px;
    }
    /* Широкі таблиці складу/поживності на телефоні гортаються всередині
       своєї панелі, а не тягнуть за собою всю сторінку. */
    .product-single__tabs .woocommerce-Tabs-panel {
        overflow-x: auto;
    }
    /* Таблиця атрибутів на телефоні — назва над значенням. Раніше це робив
       woocommerce-smallscreen.css, але наші селектори тепер специфічніші
       за нього, тож стек треба задати самим — інакше на 335px екрана
       колонка назв у 280px лишила б значенню 55px. */
    .product-single__tabs table.woocommerce-product-attributes.shop_attributes {
        table-layout: auto;
    }
    .product-single__tabs table.woocommerce-product-attributes.shop_attributes th,
    .product-single__tabs table.woocommerce-product-attributes.shop_attributes td {
        display: block;
        width: auto;
        padding: 10px 14px;
    }
    .product-single__tabs table.woocommerce-product-attributes.shop_attributes th {
        border-bottom: 0;
    }
}

/* ── Лайтбокс галереї ────────────────────────────────────────────────────────
   Заміна PhotoSwipe (див. functions.php і js/pages/product.js). Нативний
   <dialog>, тож підложка — це ::backdrop, а не свій div: браузер малює її
   поверх усього сам, без гри в z-index. */
.product-lightbox {
    /* margin: auto — це центрування модального <dialog> за замовчуванням, і
       його треба повернути явно: наш reset знімає margin з усього підряд, а
       разом із ним і з діалога. Заміряно: без цього рядка діалог притиснутий
       до верху екрана, і кнопка закриття (top: -14px) опиняється ЗА межею
       viewport — закрити мишею неможливо. */
    margin: auto;
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}
.product-lightbox::backdrop {
    background: rgba(0, 0, 0, .8);
}
.product-lightbox__inner {
    position: relative;
    display: flex;
}
/* Розміри фото — у vw/vh, а не в px: лайтбокс має вкладатись у будь-який
   екран, і на телефоні в альбомній орієнтації обмежує саме висота. */
.product-lightbox__img {
    display: block;
    max-width: 90vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    background: var(--color-bg);
}
/* Кнопка стоїть ЗА межею фото, а не поверх нього: поверх вона неминуче
   лягла б на частину зображення, а вгадати, що там світле тло, не можна. */
.product-lightbox__close {
    position: absolute;
    top: -14px;
    right: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background var(--transition), color var(--transition);
}
.product-lightbox__close:hover,
.product-lightbox__close:focus-visible {
    background: var(--color-text);
    color: var(--color-secondary);
}
.product-lightbox__close:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}
/* Фото клікабельне — курсор має про це сказати. Лупи над картинкою більше
   немає, тож це єдина підказка, що зображення можна відкрити більшим. */
.product-single__gallery .woocommerce-product-gallery__image a {
    cursor: zoom-in;
}

@media (max-width: 480px) {
    /* На вузькому екрані фото займає майже всю ширину, і кнопка за його
       межею вилізла б за viewport — заводимо її всередину, у кут. */
    .product-lightbox__img {
        max-width: 94vw;
    }
    .product-lightbox__close {
        top: 8px;
        right: 8px;
    }
}

/* ── Каруселі під карткою товару ─────────────────────────────────────────────
   Дві секції на одному компоненті: «Супутні товари» й «Останні переглянуті»
   (pages/global/products-carousel.php). Оформлення самої картки — у
   css/pages/product-card-grid.css, спільному з каталогом і акціями; тут
   лише сама секція.

   Зразок структури — kyivcityroast.com.ua: заголовок, під ним ряд карток.
   Стрілки винесені в шапку секції, як у «Новинках» на головній, — щоб не
   накривати картки й не з'їдати ширину ряду. */
/* Відступ знизу має КОЖНА карусель, а верхній знімається в тієї, що йде
   одразу за іншою. Спершу тут стояло `:last-of-type`, але воно рахує останній
   <section> серед сусідів, а не останню карусель: досить будь-якому плагіну
   дописати свою секцію після наших — і нижній відступ мовчки поїде не туди.
   Сусідський `+` такої залежності не має взагалі. */
.products-carousel {
    padding-top: 48px;
    padding-bottom: 64px;
}
.products-carousel + .products-carousel {
    padding-top: 0;
}
.products-carousel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.products-carousel__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
}
.products-carousel__arrows {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}
.products-carousel__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.products-carousel__arrow:hover {
    background: var(--color-text);
    color: var(--color-secondary);
}
.products-carousel__arrow:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}
/* Іконка в спрайті одна — «шеврон вниз», тож стрілки робимо поворотом. */
.products-carousel__arrow--prev .products-carousel__arrow-icon {
    transform: rotate(90deg);
}
.products-carousel__arrow--next .products-carousel__arrow-icon {
    transform: rotate(-90deg);
}
/* Slick вимкнена в disabled-стані (коли слайдів рівно стільки, скільки
   влазить) не додає класів, тому кнопки лишаються активними на вигляд.
   Її власний .slick-disabled показуємо приглушено. */
.products-carousel__arrow.slick-disabled {
    opacity: .4;
    cursor: default;
}
.products-carousel__arrow.slick-disabled:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.products-carousel__slider {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* До ініціалізації Slick список має виглядати вже рядом карток, а не
   стовпчиком на весь екран: інакше на секунду стрибає висота сторінки.
   Тому flex із тими самими чотирма в ряд, що й у слайдера. */
.products-carousel__slider:not(.slick-initialized) {
    display: flex;
    gap: 20px;
    overflow: hidden;
}
.products-carousel__slider:not(.slick-initialized) > .products-carousel__slide {
    display: flex;
    flex: 0 0 calc(25% - 15px);
}
.products-carousel__slide {
    list-style: none;
}
/* Проміжок між слайдами в Slick — падінгом самих слайдів: сам слайдер
   ставить їх впритул, а gap на .slick-track не діє. */
.products-carousel__slider.slick-initialized .products-carousel__slide {
    display: flex;
    height: auto;
    padding: 0 10px;
}
/* Картки в ряду мають закінчуватись на одній лінії. У каталозі це робить
   грід сам, тут — ні: Slick тягне до однакової висоти слайд, а картка
   всередині лишається своєї (заміряно: 465 проти 523 там, де в сусіда є
   свотчі варіацій), і ряд кнопок «Придбати» йде сходинками. Тому слайд —
   флекс-контейнер, а картка розтягується на всю його висоту. */
.products-carousel__slide .product-card {
    flex: 1 1 auto;
    min-width: 0;
}
.products-carousel__slider .slick-track {
    display: flex;
    align-items: stretch;
}
.products-carousel__slider .slick-list {
    margin: 0 -10px;
}

@media (max-width: 1024px) {
    .products-carousel__title {
        font-size: 24px;
    }
    .products-carousel__slider:not(.slick-initialized) > .products-carousel__slide {
        flex: 0 0 calc(33.333% - 14px);
    }
}

@media (max-width: 480px) {
    /* Найширший діапазон «100,00 ₴ – 600,00 ₴» при 32px займав рівно всю
       колонку 335px (заміряно: 335 із 335) і на 320px уже не влізав. */
    .product-single__summary .price {
        font-size: 28px;
    }
}

@media (max-width: 360px) {
    .product-single__summary .price {
        font-size: 25px;
    }
}

@media (max-width: 768px) {
    .products-carousel {
        padding-top: 36px;
        padding-bottom: 48px;
    }
    .products-carousel + .products-carousel {
        padding-top: 0;
    }
    .products-carousel__title {
        font-size: 20px;
    }
    .products-carousel__slider:not(.slick-initialized) > .products-carousel__slide {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .products-carousel__title {
        font-size: 18px;
    }
    /* На 320px контейнер — 280px, і шапка сходилась впритул: заголовок
       «Останні переглянуті» займав 168px, дві кнопки з проміжками — 112px,
       рівно 280. Зменшуємо кнопки й проміжки, щоб лишався запас: 40px — це
       все ще прийнятний тач-таргет, а заголовку дістається на 26px більше. */
    .products-carousel__header {
        gap: 12px;
    }
    .products-carousel__arrows {
        gap: 6px;
    }
    .products-carousel__arrow {
        width: 40px;
        height: 40px;
    }
    .products-carousel__slider:not(.slick-initialized) > .products-carousel__slide {
        flex: 0 0 100%;
    }
    .products-carousel__slider.slick-initialized .products-carousel__slide {
        padding: 0 6px;
    }
    .products-carousel__slider .slick-list {
        margin: 0 -6px;
    }
}

/* ── Мобільний: крупніший дрібний текст ─────────────────────────────────────
   Сайт читає багато людей старшого віку, їм має бути зрозуміло, де і що
   (запит Viktor). Тому на ≤768px усі шрифти дрібніше 18px піднято за єдиною
   шкалою: 12→14, 13→15, 14→16, 15→16, 16→17, 17→18. Десктоп не чіпали.
   Правила, що вже були у мобільних медіа-блоках, підвищено на місці; сюди
   зібрано ті, що задавались лише для великих екранів. */
@media (max-width: 768px) {
    .product-single .product-single__gallery span.onsale { font-size: 17px; }
    .product-single__summary .reset_variations { font-size: 17px; }
    .product-single__tabs .woocommerce-Tabs-panel--description th, .product-single__tabs .woocommerce-Tabs-panel--description tr:first-child td[colspan] { font-size: 18px; }
    .product-single__tabs .woocommerce-review__published-date { font-size: 16px; }
    .product-single__tabs .comment-notes { font-size: 16px; }
    .product-single__tabs .comment-form input[type="text"], .product-single__tabs .comment-form input[type="email"], .product-single__tabs .comment-form textarea { font-size: 17px; }
    .product-single__tabs .comment-form-cookies-consent label { font-size: 16px; }
    .product-single__tabs .comment-form-rating select { font-size: 17px; }
}