/* =============================================
   BEAUTY BALM — сторінка товару (макет 3B / 3D)

   Галерея, блок покупки, плитка фактів, таби,
   схожі товари. Картка товару в блоці схожих —
   спільний компонент із components.css.

   Значення — тільки з tokens.css.
   ============================================= */


.bb-product {
    padding-top: 32px;
    padding-bottom: var(--bb-section);
}

.bb-product__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bb-gap-columns);
    align-items: start;
    padding-top: 28px;
}


/* ── Галерея ──────────────────────────────────── */

.bb-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

/* Одна стрічка зі скролом і прилипанням: на мобільній її гортають
   пальцем, на десктопі — перемикають мініатюрами. Дві різні галереї
   для двох екранів не потрібні. */
.bb-gallery__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--bb-radius-lg);
    background: var(--bb-photo-bg);
}

.bb-gallery__track::-webkit-scrollbar {
    display: none;
}

.bb-gallery__slide {
    flex: 0 0 100%;
    margin: 0;
    aspect-ratio: var(--bb-ratio-product);
    scroll-snap-align: start;
    background: var(--bb-photo-bg);
}

.bb-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bb-gallery__bars {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 14px);
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}

.bb-gallery__bar {
    width: 22px;
    height: 3px;
    border-radius: var(--bb-radius-pill);
    background: var(--bb-line-button);
}

.bb-gallery__bar.is-current {
    background: var(--bb-indigo);
}

.bb-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bb-gallery__thumb {
    position: relative;
    aspect-ratio: var(--bb-ratio-product);
    padding: 0;
    border: 0;
    border-radius: var(--bb-radius-sm);
    background: var(--bb-photo-bg);
    overflow: hidden;
    cursor: pointer;
}

.bb-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Рамка тінню, а не border — інакше активна мініатюра
   стрибала б на 3px відносно сусідніх. */
.bb-gallery__thumb.is-current {
    box-shadow: 0 0 0 1.5px var(--bb-indigo);
}

.bb-gallery__thumb:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1.5px var(--bb-periwinkle);
}


/* ── Права колонка ────────────────────────────── */

/* WooCommerce у своєму woocommerce-layout.css розкладає сторінку товару
   на float-колонки по 48% (`div.product div.summary`). Усередині CSS Grid
   це давало праву колонку вдвічі вужчою за потрібну, тому селектор тут
   навмисно з тим самим префіксом `.woocommerce div.product` — щоб виграти
   за специфічністю, а не глушити все через !important. */
.bb-product__summary,
.woocommerce div.product div.summary.bb-product__summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
}

.bb-product__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bb-product__eyebrow {
    font-size: var(--bb-fs-eyebrow);
    letter-spacing: var(--bb-ls-footer);
    text-transform: uppercase;
    color: var(--bb-periwinkle);
}

.bb-product__title {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-h2);
    font-weight: var(--bb-fw-medium);
    line-height: var(--bb-lh-h2);
    letter-spacing: -.015em;
    color: var(--bb-ink);
}

.bb-product__subline {
    font-size: 14px;
    color: var(--bb-secondary);
}

.bb-product__pricerow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px 0;
    border-top: 1px solid var(--bb-line);
    border-bottom: 1px solid var(--bb-line);
}

.bb-product__price {
    font-size: 34px;
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
    line-height: 1.1;
}

.bb-product__price del {
    font-size: 18px;
    font-weight: var(--bb-fw-regular);
    color: var(--bb-muted);
    margin-right: 10px;
}

.bb-product__price ins {
    text-decoration: none;
}

.bb-product__stock {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
}

.bb-product__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.bb-product__stock--in {
    color: var(--bb-success);
}

.bb-product__stock--backorder {
    color: var(--bb-periwinkle);
}

.bb-product__stock--out {
    color: var(--bb-muted);
}

.bb-product__telegram {
    align-self: flex-start;
    font-size: var(--bb-fs-small);
    color: var(--bb-periwinkle);
    text-decoration: none;
}

.bb-product__telegram:hover {
    color: var(--bb-indigo);
}


/* Рядок «3 в наявності» від WooCommerce. У макеті його немає, але
   точний залишок — корисна інформація, тож не ховаємо, а приглушуємо:
   головний статус уже сказано в рядку з ціною. */
.bb-product__summary p.stock,
.woocommerce div.product div.summary.bb-product__summary p.stock {
    margin: -8px 0 0;
    font-size: var(--bb-fs-caption);
    color: var(--bb-muted);
}


/* ── Форма «Додати в кошик» ───────────────────── */

/* Розмітку віддає сам WooCommerce (form.cart), тут тільки вигляд —
   так лишаються робочими варіації, зовнішні товари й додатки. */
.bb-product__summary form.cart,
.woocommerce div.product div.summary.bb-product__summary form.cart {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    flex-wrap: wrap;
}

.bb-product__summary form.cart .quantity {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--bb-line-input);
    border-radius: var(--bb-radius-pill);
    background: var(--bb-surface);
    flex: none;
}

.bb-product__summary form.cart .quantity input.qty {
    width: 34px;
    height: var(--bb-btn-h);
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--bb-font-ui);
    font-size: 15px;
    color: var(--bb-ink);
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.bb-product__summary form.cart .quantity input.qty::-webkit-outer-spin-button,
.bb-product__summary form.cart .quantity input.qty::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.bb-product__summary form.cart .quantity input.qty:focus {
    outline: none;
}

/* Кнопки −/+ додає js/single-product.js: у розмітці WooCommerce
   їх немає, а тицяти у крихітні системні стрілки незручно. */
.bb-qty-step {
    width: 46px;
    height: var(--bb-btn-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--bb-font-ui);
    font-size: 18px;
    line-height: 1;
    color: var(--bb-ink);
    cursor: pointer;
}

.bb-qty-step:disabled {
    color: var(--bb-muted);
    cursor: default;
}

.bb-product__summary form.cart button.single_add_to_cart_button,
.bb-product__summary form.cart .single_add_to_cart_button,
.woocommerce div.product div.summary.bb-product__summary form.cart .single_add_to_cart_button {
    flex: 1 1 160px;
    height: var(--bb-btn-h);
    padding: 0 32px;
    border: 0;
    border-radius: var(--bb-radius-pill);
    background: var(--bb-indigo);
    color: var(--bb-surface);
    font-family: var(--bb-font-ui);
    font-size: 15.5px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s;
}

.bb-product__summary form.cart button.single_add_to_cart_button:hover {
    background: var(--bb-indigo-hover);
}

.bb-product__summary form.cart button.single_add_to_cart_button:disabled {
    background: var(--bb-line-button);
    cursor: default;
}

/* Таблиця варіацій */
.bb-product__summary .variations {
    width: 100%;
    border: 0;
}

.bb-product__summary .variations th,
.bb-product__summary .variations td {
    padding: 0 0 10px;
    border: 0;
    text-align: left;
    font-size: 14px;
}

.bb-product__summary .variations select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--bb-line-input);
    border-radius: var(--bb-radius-sm);
    background: var(--bb-surface);
    font-family: var(--bb-font-ui);
    font-size: 14px;
    color: var(--bb-ink);
}


/* ── Плитка фактів ────────────────────────────── */

/* Проміжок 1px на кольоровому фоні дає лінії без жодної рамки. */
.bb-facts {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 4px 0 0;
    background: var(--bb-line);
    border-radius: var(--bb-radius-lg);
    overflow: hidden;
}

.bb-facts__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bb-surface);
}

.bb-facts__label {
    flex: none;
    width: 110px;
    margin: 0;
    font-size: 13.5px;
    font-weight: var(--bb-fw-regular);
    color: var(--bb-muted);
}

.bb-facts__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--bb-body);
}


/* ── Таби ─────────────────────────────────────── */

.bb-tabs {
    margin-top: 12px;
}

.bb-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--bb-line);
}

.bb-tabs__nav::before,
.bb-tabs__nav::after {
    content: none;
}

.bb-tabs__item {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.bb-tabs__item a {
    display: block;
    padding-bottom: 12px;
    font-size: var(--bb-fs-ui);
    color: var(--bb-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.bb-tabs__item.active a,
.bb-tabs__item a:hover {
    color: var(--bb-ink);
}

.bb-tabs__item.active a {
    border-bottom-color: var(--bb-indigo);
}

/* Панелі перемикає js/beauty-tabs.js класом .active-panel */
.bb-tabs__panel {
    display: none;
    padding-top: 18px;
    font-size: var(--bb-fs-ui);
    line-height: 1.65;
    color: var(--bb-body);
}

.bb-tabs__panel.active-panel {
    display: block;
}

.bb-tabs__panel > h2:first-child {
    display: none;
}

.bb-tabs__panel p {
    margin: 0 0 12px;
}


/* ── Схожі товари й апсейли ───────────────────── */

.bb-product .related,
.bb-product .up-sells {
    padding-top: var(--bb-section-tight);
}

.bb-product .related > h2,
.bb-product .up-sells > h2 {
    margin: 0 0 26px;
    font-family: var(--bb-font-display);
    font-size: 34px;
    font-weight: var(--bb-fw-medium);
    line-height: var(--bb-lh-h2);
    color: var(--bb-ink);
}


/* ── Планшет ──────────────────────────────────── */

@media (max-width: 991.98px) {

    .bb-product__layout {
        gap: 32px;
    }

    .bb-product__title {
        font-size: 32px;
    }

    .bb-product__price {
        font-size: 28px;
    }

    .bb-facts__label {
        width: 92px;
    }
}


/* ── Мобільна ─────────────────────────────────── */

@media (max-width: 767.98px) {

    .bb-product {
        padding-top: 16px;
    }

    .bb-product__layout {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 16px;
    }

    /* Галерея — на всю ширину екрана, поза полями контейнера */
    .bb-gallery {
        margin-inline: calc(var(--bb-gutter) * -1);
    }

    .bb-gallery__track {
        border-radius: 0;
    }

    /* Мініатюри замінюються смужками: гортати пальцем зручніше,
       ніж цілитись у квадратик 60px. */
    .bb-gallery__thumbs {
        display: none;
    }

    .bb-gallery__bars {
        display: flex;
        top: auto;
        bottom: 14px;
    }

    .bb-product__title {
        font-size: 30px;
        line-height: 1.12;
    }

    .bb-product__pricerow {
        padding: 16px 0;
        gap: 10px;
    }

    .bb-product__price {
        font-size: var(--bb-fs-price);
    }

    /* Панель покупки прилипає до низу екрана — кнопка завжди під рукою,
       скільки б не було опису. */
    .bb-product__summary form.cart {
        position: sticky;
        bottom: 0;
        z-index: 20;
        gap: 12px;
        margin-inline: calc(var(--bb-gutter) * -1);
        padding: 14px var(--bb-gutter) 20px;
        background: var(--bb-surface);
        border-top: 1px solid var(--bb-line);
    }

    .bb-product__summary form.cart .quantity input.qty {
        height: 48px;
    }

    .bb-qty-step {
        width: 40px;
        height: 48px;
    }

    .bb-product__summary form.cart button.single_add_to_cart_button {
        height: 50px;
        flex: 1 1 auto;
        padding: 0 16px;
    }

    .bb-facts__row {
        padding: 14px 16px;
    }

    .bb-facts__label {
        width: 84px;
    }

    .bb-tabs__nav {
        gap: 18px;
    }

    .bb-product .related > h2,
    .bb-product .up-sells > h2 {
        font-size: var(--bb-fs-h2);
        margin-bottom: 16px;
    }
}