/*
 * Редизайн страницы товара по референсу ZipKidZ (2026-08-18).
 * Всё строго под body.single-product — не задевает каталог/архивы/
 * корзину/checkout/mega-menu. Классы либо стоковые WooCommerce/flexslider
 * (уже существующие, не создаются этим файлом), либо новые wb-product-*.
 * Ничего не подключает новых JS-библиотек (галерея/related — чистый CSS
 * поверх уже работающих flexslider/photoswipe/zoom).
 */

/* ===================== ОБЩИЙ КОНТЕЙНЕР ===================== */
/* Storefront по умолчанию держит #primary/#secondary как float 2-колонки
   (67%/33%) на КАЖДОЙ странице сайта, включая товар - референс ZipKidZ
   использует полную ширину без сайдбара. Убираем сайдбар и отдаём
   контенту всю ширину СТРОГО на странице товара - категорию/архив/поиск
   это не задевает (там #secondary остаётся как есть). */
body.single-product #secondary.widget-area {
    display: none;
}
body.single-product #primary.content-area {
    width: 100%;
    float: none;
}
/* Родная навигация Storefront "предыдущий/следующий товар"
   (storefront_single_product_pagination) верстается ссылками с фикс.
   шириной 500px, свисающими далеко за пределы контента (раньше это было
   незаметно - двухколоночный сайдбар держал контент узким и эти ссылки
   были за пределами видимой области экрана). После того как мы убрали
   сайдбар, они "выплыли" по краям вьюпорта чужими превью то предыдущего,
   то следующего товара - в референсе ZipKidZ такого блока нет, и по ТЗ
   он не требуется. Просто скрываем, только на странице товара. */
body.single-product nav.storefront-product-pagination {
    display: none;
}
body.single-product .content-area {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
/* Storefront сам ограничивает .col-full (родитель .content-area) своим
   собственным max-width (~1064px по факту вычисленного значения -
   зависит от темплейт-переменных Storefront, не CSS-переменная) -
   моего max-width на .content-area было недостаточно, потому что он
   применяется К УЖЕ ЗАУЖЕННОМУ родителю. Раздвигаем именно .col-full
   и только на странице товара - на других страницах это единственный
   пока не тронутый враппер, важно не задеть их. */
/* :has() уточняет, что раздвигаем ИМЕННО тот .col-full, что напрямую
   оборачивает #primary (центральную колонку контента) - класс .col-full
   переиспользуется Storefront'ом ещё и в шапке/подвале на той же
   странице, и без :has() шапка на странице товара тоже стала бы шире,
   чем на остальных страницах (мега-меню начинало переноситься иначе). */
body.single-product .col-full:has(> #primary) {
    max-width: 1440px;
}

body.single-product div.product {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
}
body.single-product div.product > .woocommerce-product-gallery {
    /* flex-grow:0 - галерея НЕ должна разрастаться сверх своего базиса
       и отжимать колонку с информацией на новую строку (именно это
       произошло с flex:1 1 640px - галерея "съедала" всю доступную
       ширину, summary уходил на wrap). */
    flex: 0 1 640px;
    min-width: 0;
}
body.single-product div.product > .summary.entry-summary {
    flex: 1 1 380px;
    min-width: 0;
    max-width: 500px;
}

/* ===================== ГАЛЕРЕЯ ===================== */
body.single-product .woocommerce-product-gallery {
    display: flex;
    /* Миниатюры (order:1) физически идут в DOM ПОСЛЕ главного фото
       (order:2) - обычного flex-direction:row достаточно, чтобы order
       поставил их слева. row-reverse здесь был лишним и на самом деле
       давал ДВОЙНОЙ разворот (row-reverse меняет "начало" оси на правый
       край, поэтому order:1 уезжал вправо) - миниатюры оказывались
       справа от фото вместо слева. */
    align-items: flex-start;
    gap: 16px;
}
body.single-product .woocommerce-product-gallery .flex-viewport {
    overflow: hidden; /* WC уже ставит это сам, но явно фиксируем -
       flexslider держит ВСЕ слайды в один widescreen-ряд через .slides,
       без overflow:hidden на .flex-viewport они бы бесконечно "растекались"
       по бокам за пределы видимого бокса при пересчёте ширины после
       нашего flex-рефлоу. */
}
body.single-product .woocommerce-product-gallery .flex-viewport {
    order: 2;
    flex: 1 1 auto;
    max-width: 600px;
    min-width: 0;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    margin: 0;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    overflow: hidden;
    background: #f6f6f6;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* фото 3:4 у нас уже честное - contain не растягивает и не режет */
    border-radius: 16px;
}
/* Существовавший до редизайна баг jquery.zoom: пока лупа не активна,
   .zoomImg лежит НЕВИДИМО (opacity:0) поверх главного фото, но
   pointer-events у него остаётся auto - клик по фото (открытие
   PhotoSwipe) на самом деле попадает в эту невидимую прослойку и
   ничего не открывает. Ни родительская тема, ни сам плагин это не
   лечат. Возвращаем клики законному <img> - трекинг мыши для эффекта
   лупы у jquery.zoom завязан на контейнер, а не на сам .zoomImg,
   поэтому pointer-events:none лупу не ломает (проверено вживую). */
body.single-product .woocommerce-product-gallery .zoomImg {
    pointer-events: none;
}
body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
    order: 1;
    display: flex;
    flex-direction: column;
    flex: 0 0 110px;
    width: 110px;
    max-height: 620px;
    overflow-y: auto;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* !important здесь не роскошь, а необходимость: у родительской темы
   Storefront уже есть встроенное правило
   ".single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li"
   (width:14.2857%; float:left) - оно на 1 HTML-элемент "весомее" нашего
   селектора (2 элемента в цепочке против наших 1), поэтому побеждает по
   специфичности несмотря на более поздний CSS mod time. Без !important
   миниатюры схлопывались до ~15px (25%/14% от узкой 110px-колонки). */
body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img {
    width: 100% !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    display: block;
    opacity: 0.75;
    transition: opacity .15s ease, border-color .15s ease;
}
body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img:hover {
    opacity: 1;
}
body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs img.flex-active {
    border-color: var(--wb-product-accent, #E2A330);
    opacity: 1;
}

@media (max-width: 1200px) {
    /* 480px главному фото + 110px миниатюрам не хватало места рядом с
       минимум 380px инфоколонки уже на 1024px viewport (реальный экран
       из обязательного списка проверки) - div.product в сумме требовал
       ~1052px, из-за чего summary "аварийно" переносился на новую
       строку flex-wrap'ом, но inheritил max-width:500px и не растягивался
       на всю ширину (в референсе на этой ширине сама галерея остаётся
       двухколоночной, а инфо-колонка при переносе тянется на 100%).
       Сузили фото и уменьшили миниатюры дальше, чтобы 1024px по-прежнему
       помещал галерею и инфоколонку РЯДОМ без переноса. */
    /* flex-basis:640px внешнего .woocommerce-product-gallery (десктопное
       правило) не сжимался вслед за внутренними миниатюрами/фото - flex
       рассчитывает перенос по basis РОДИТЕЛЯ, а не по контенту детей,
       поэтому переопределяем его тоже. */
    body.single-product div.product { gap: 24px; }
    /* div.product на самом деле держит 4 flex-детей (галерея, summary,
       .woocommerce-tabs, скрытый nav.storefront-product-pagination) - при
       обычном flex-wrap:wrap браузер решает перенос по СУММЕ элементов
       построчно, и .woocommerce-tabs с flex-basis:auto (по контенту)
       иногда "перетягивал" вместимость строки на себя ещё до достижения
       галереи+summary. Жёстко переносим вкладки на отдельную строку
       через flex-basis:100% - это не зависит от контентной ширины и
       освобождает всю строку для галереи+инфоколонки. */
    body.single-product div.product > .woocommerce-tabs.wc-tabs-wrapper { flex-basis: 100%; }
    body.single-product div.product > .woocommerce-product-gallery { flex-basis: 480px; }
    body.single-product .woocommerce-product-gallery .flex-viewport { max-width: 384px; }
    body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
        flex-basis: 80px; width: 80px; max-height: 460px;
    }
    /* Инфоколонке хватает 300px по контенту (текст переносится) - вместе
       с уменьшенной галереей (480+24 gap+300=804, запас от 900) стабильно
       помещается рядом даже на 1024px viewport без переноса на новую
       строку. Если перенос всё же случится на ещё более узких
       промежуточных ширинах - пусть колонка данных займёт всю строку,
       а не остаётся зажатой в 500px. */
    body.single-product div.product > .summary.entry-summary { flex-basis: 300px; max-width: 100%; }
}

@media (max-width: 991px) {
    /* align-items:flex-start (десктопное правило) в column-раскладке
       становится ГОРИЗОНТАЛЬНЫМ выравниванием и не даёт дочерним
       .woocommerce-product-gallery/.summary тянуться на всю ширину
       (сжимает их по контенту) - явно возвращаем stretch. */
    body.single-product div.product { flex-direction: column; gap: 20px; align-items: stretch; }
    body.single-product div.product > .woocommerce-product-gallery { flex-basis: auto; width: 100%; }
    body.single-product div.product > .summary.entry-summary { max-width: 100%; width: 100%; }
    body.single-product .woocommerce-product-gallery { flex-direction: column; align-items: stretch; }
    /* На мобильном лента миниатюр скрыта совсем - только свайп по фото,
       как в референсе ZipKidZ (ниже 991px там та же логика). */
    body.single-product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
        display: none !important;
    }
    body.single-product .woocommerce-product-gallery .flex-viewport {
        max-width: 100%;
        width: 100%;
    }
}

/* ===================== ПРАВАЯ КОЛОНКА: ПОРЯДОК БЛОКОВ ===================== */
body.single-product .summary.entry-summary {
    display: flex;
    flex-direction: column;
}
body.single-product .summary.entry-summary > h1.product_title { order: 1; margin-top: 0; }
body.single-product .summary.entry-summary > .wb-product-sku { order: 2; }
body.single-product .summary.entry-summary > .woocommerce-product-rating { order: 3; }
body.single-product .summary.entry-summary > p.price { order: 4; }
body.single-product .summary.entry-summary > form.variations_form.cart { order: 5; }
/* Подстраховка на случай товара без остатка (out-of-stock): JS
   (repositionSizeChartTrigger) обычно переносит .wbss-size-chart-trigger
   внутрь формы вариаций перед кнопкой "В корзину", но у товара без
   остатка форма вариаций WooCommerce вообще не рендерится - переносить
   не во что, триггер остаётся ПРЯМЫМ ребёнком .summary без заданного
   order и улетает в самый верх (перед h1) с дефолтным order:0. Явный
   order здесь не даёт этому случиться, даже если JS не сработал -
   когда JS всё-таки переносит триггер внутрь формы, это правило просто
   перестаёт совпадать (элемент больше не прямой ребёнок .summary). */
body.single-product .summary.entry-summary > .wbss-size-chart-trigger { order: 5; }
body.single-product .summary.entry-summary > .woocommerce-product-details__short-description { order: 6; }
body.single-product .summary.entry-summary > p.wbcro-earn-badge { order: 7; }
body.single-product .summary.entry-summary > p.wbcro-shipping-progress { order: 8; }
body.single-product .summary.entry-summary > .wbcro-trust-strip { order: 9; }
body.single-product .summary.entry-summary > .product_meta { order: 10; }

/* ===================== ЗАГОЛОВОК / АРТИКУЛ ===================== */
body.single-product h1.product_title {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 600;
}
body.single-product .wb-product-sku {
    color: #8a8a8a;
    font-size: 14px;
    margin: 4px 0 12px;
}
body.single-product .wb-product-sku span { color: #6c6c6c; }
/* Дублирующий SKU внизу (стоковый .product_meta) прячем - показываем только
   сверху, категории/теги того же блока оставляем как есть. !important -
   у Storefront здесь на 1 класс больше специфичности
   (".single-product div.product .product_meta .sku_wrapper"), обычный
   каскад её не перебивает. */
body.single-product .product_meta .sku_wrapper { display: none !important; }

/* ===================== ЦЕНА / СКИДКА ===================== */
body.single-product p.price {
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 16px;
}
body.single-product p.price del {
    font-size: 16px;
    font-weight: 400;
    color: #999;
    opacity: 1;
}
body.single-product p.price ins {
    text-decoration: none;
}
body.single-product .wb-product-discount-badge {
    display: inline-block;
    background: #f8604a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

/* ===================== ЦВЕТ / РАЗМЕР (поверх уже готовых WBSS-стилей) ===================== */
body.single-product .woocommerce-variation-item,
body.single-product table.variations,
body.single-product table.variations tbody,
body.single-product table.variations tr,
body.single-product table.variations td.value {
    display: block;
    width: 100%;
}
body.single-product table.variations th.label { display: none; } /* родной <th> скрываем - подпись рисуем сами ниже поверх wbss-разметки, см. .wbss-buttons::before */
body.single-product table.variations tr { margin-bottom: 14px; }
body.single-product .wbss-attribute-group { margin-bottom: 0; }
/* У плагина wonderbaby-size-selector подпись группы ("Цвет"/"Размер")
   есть только в aria-label (для скринридеров), визуально текст нигде не
   выводился - в референсе же явная подпись "Цвет — оливковый"/"Размер: 86"
   стоит прямо над кнопками. Рисуем её через content:attr(aria-label) -
   без правки шаблона плагина, значение берётся из уже готовой разметки. */
body.single-product .wbss-attribute-group .wbss-buttons::before {
    content: attr(aria-label);
    /* .wbss-buttons сам display:flex (кнопки в ряд с переносом) -
       ::before становится flex-item'ом среди кнопок, а не блоком НАД
       ними. order:-1 + flex-basis:100% - стандартный приём, чтобы
       псевдоэлемент-подпись всегда занимал всю строку первым, не
       трогая разметку/JS плагина. */
    order: -1;
    flex-basis: 100%;
    font-size: 14px;
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 4px;
}

body.single-product .wb-product-stock-msg {
    font-size: 13px;
    font-weight: 600;
    margin: -6px 0 10px;
}
body.single-product .wb-product-stock-msg--last { color: #d1372a; }
body.single-product .wb-product-stock-msg--low { color: #c07a00; }

/* Таблица размеров - визуально сразу под размерами, аккуратный текстовый триггер */
body.single-product .wbss-size-chart-trigger {
    margin: 0 0 14px;
}
body.single-product .wbss-size-chart-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    text-decoration: underline;
    color: #464451;
    cursor: pointer;
}

/* ===================== КОЛИЧЕСТВО + КНОПКА (единая пилюля) ===================== */
body.single-product .woocommerce-variation-add-to-cart.variations_button {
    display: flex;
    align-items: stretch;
    max-width: 340px;
    height: 52px;
    border: 1px solid #ddd;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}
body.single-product .woocommerce-variation-add-to-cart .quantity {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    margin: 0;
}
body.single-product .woocommerce-variation-add-to-cart .quantity input.qty {
    width: 48px;
    height: 100%;
    border: none;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    text-align: center;
    -moz-appearance: textfield;
}
body.single-product .quantity input.qty::-webkit-inner-spin-button,
body.single-product .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
body.single-product .wb-product-qty-btn {
    width: 40px;
    border: none;
    background: #fafafa;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #333;
}
body.single-product .wb-product-qty-btn:hover { background: #f0f0f0; }
body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    flex: 1 1 auto;
    border-radius: 0;
    margin: 0;
    height: 100%;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ===================== ВКЛАДКИ ===================== */
body.single-product .woocommerce-tabs.wc-tabs-wrapper { margin-top: 48px; }
body.single-product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid #eee;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}
body.single-product .woocommerce-tabs ul.tabs li { padding: 0; margin: 0; }
body.single-product .woocommerce-tabs ul.tabs li::before { content: none; }
body.single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 10px 0;
    font-weight: 600;
    color: #9a9a9a;
    text-decoration: none;
}
body.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #191919;
    border-bottom: 2px solid #191919;
}
@media (max-width: 768px) {
    body.single-product .woocommerce-tabs ul.tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
    }
}

/* ===================== RELATED PRODUCTS: CSS-only горизонтальный скролл ===================== */
body.single-product .related.products ul.products {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    flex-wrap: nowrap;
    padding: 4px 4px 12px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
}
body.single-product .related.products ul.products li.product {
    flex: 0 0 220px;
    width: 220px;
    min-width: 0; /* flex-элемент по умолчанию min-width:auto -> на кадр раздувается до 324px картинки при lazy-load; это убирает мелькание */
    scroll-snap-align: start;
}
body.single-product .related.products ul.products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}
@media (max-width: 767px) {
    body.single-product .related.products ul.products li.product {
        /* ВАЖНО: определённая ширина (vw), НЕ проценты. Процентный flex-basis
           против горизонтально-скроллящегося (indefinite width) контейнера даёт
           циклическую зависимость размера -> карточка раздувается до полной
           картинки (баг «мелькает огромное фото»). vw не зависит от контейнера. */
        flex: 0 0 62vw;
        width: 62vw;
        max-width: 240px;
        min-width: 0;
    }
    /* Строка «Рекомендуем» должна прокручиваться ВНУТРИ колонки контента,
       а не растягивать секцию на всю ширину контента (37 карточек => ~9500px,
       клип только на body => не прокрутить, фото мелькают). Ограничиваем секцию
       и ul шириной родителя, тогда overflow-x:auto у ul реально скроллит. */
    body.single-product .related.products {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    body.single-product .related.products ul.products {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        box-sizing: border-box;
    }
}

/* ===================== МОБИЛЬНЫЕ ДОРАБОТКИ ===================== */
@media (max-width: 480px) {
    body.single-product h1.product_title { font-size: 22px; }
    body.single-product p.price { font-size: 20px; }
    body.single-product .woocommerce-variation-add-to-cart.variations_button {
        max-width: 100%;
        height: 48px;
    }
}

/* ===================== FIX 2026-09-01 (v2): пилюля «количество + В корзину» на мобильном =====================
   iOS Safari НЕ обрезает overflow:hidden+border-radius у flex-контейнера, поэтому чёрная
   кнопка вылезала за скруглённый край. Надёжное решение — НЕ полагаться на обрезку контейнера:
   на мобильном делаем количество и «В корзину» двумя самостоятельными скруглёнными
   элементами (каждый скругляет свой фон — работает в любом движке, включая Safari),
   кнопка не может вылезти (min-width:0). Тот же приём, что у «Купить сейчас». */
@media (max-width: 768px) {
    body.single-product .woocommerce-variation-add-to-cart.variations_button {
        border: none;
        overflow: visible;
        background: transparent;
        gap: 10px;
        height: auto;
        max-width: 100%;
        align-items: stretch;
        -webkit-transform: none;
        transform: none;
    }
    body.single-product .woocommerce-variation-add-to-cart.variations_button .quantity {
        flex: 0 0 auto;
        height: 48px;
        border: 1px solid #ddd;
        border-radius: 999px;
        overflow: hidden;
    }
    body.single-product .woocommerce-variation-add-to-cart.variations_button .single_add_to_cart_button {
        flex: 1 1 auto;
        min-width: 0;
        height: 48px;
        border-radius: 999px;
        white-space: nowrap;
    }
}