/* =============================================
   BEAUTY BALM — кошик і оформлення (макет 3C)

   Підключається тільки на /cart/, /checkout/ і
   «замовлення отримано». Значення — з tokens.css.

   WooCommerce віддає підсумки таблицями, і ми їх
   свідомо лишили таблицями: на цих вузлах тримається
   AJAX-перерахунок. Тому нижче багато правил виду
   `.bb-summary__table th` — це стилізація таблиці,
   а не спроба вдати з неї сітку.
   ============================================= */


/* ── Модель коробки ────────────────────────────
   Дублює глобальний border-box, який дає Bootstrap.
   Тут він продубльований навмисно: без нього кожне
   `width: 100%` разом з padding вилазить за екран на
   390px — це вже ловилось на кнопці та полях форми.
   Якщо Bootstrap колись приберуть, ці екрани встоять. */

.bb-basket *, .bb-basket *::before, .bb-basket *::after,
.bb-checkout *, .bb-checkout *::before, .bb-checkout *::after,
.bb-thanks *, .bb-thanks *::before, .bb-thanks *::after,
.bb-basket-empty *, .bb-basket-empty *::before, .bb-basket-empty *::after {
    box-sizing: border-box;
}


/* ── Конфлікт імен з Bootstrap ─────────────────
   Bootstrap займає .col-1 … .col-12 під свою сітку, а WooCommerce
   тими самими іменами позначає колонки чекауту й кабінету
   (col2-set > col-1 / col-2, u-column1 / u-column2). Через це поля
   форми стискались до 8 % ширини. Свою розмітку ми вже почистили,
   це — страховка для тих шаблонів, які віддає плагін. */

.woocommerce-cart .col2-set > [class*="col-"],
.woocommerce-checkout .col2-set > [class*="col-"],
.woocommerce-account .col2-set > [class*="col-"],
.woocommerce-account .u-columns > [class*="col-"] {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    padding-inline: 0;
}


/* ── Float-сітка woocommerce-layout.css ────────
   WooCommerce досі розкладає кошик і чекаут флоатами й
   відсотковими ширинами. Наша розкладка — CSS Grid, і ці
   правила її ламають:

   .cart-collaterals .cart_totals  → float:right; width:48%
       панель підсумку ставала 182px замість 380 і тікала вправо;
   .shipping_calculator            → float:right; width:48%
       те саме всередині панелі;
   .form-row-first / -last         → width:47%
       флоати всередині grid ігноруються, а ширина — ні,
       тож поля імені та прізвища не заповнювали доріжку.

   Знімаємо їх тією ж специфічністю — наш файл підключається
   пізніше за woocommerce-layout.css, тож виграє. */

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .shipping_calculator,
.woocommerce-page .cart-collaterals .shipping_calculator {
    float: none;
    clear: none;
    width: auto;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
    float: none;
    width: auto;
}


/* ── Скидання стилів woocommerce.css ───────────
   Плагін оформлює ті самі вузли, що й ми, і часто виграє
   специфічністю (`#payment` — це вже (1,2,0)). Класи
   `shop_table` зі своїх таблиць ми прибрали, решту знімаємо тут.

   Окремо про clearfix-псевдоелементи: WooCommerce додає
   `::before`/`::after` з `display:table` для флоатів. У наших
   flex- і grid-контейнерах вони стають повноцінними елементами
   й малюють порожні комірки — тому їх треба гасити явно. */

/* Способи доставки: рідне `label { display: inline }` (0,3,0)
   збивало картку у рядок тексту й ховало кружечок радіо. */
.woocommerce ul#shipping_method li,
.woocommerce-page ul#shipping_method li {
    margin: 0;
    line-height: inherit;
}

.woocommerce ul#shipping_method li label,
.woocommerce-page ul#shipping_method li label {
    display: flex;
}

.woocommerce ul#shipping_method .amount,
.woocommerce-page ul#shipping_method .amount {
    font-weight: inherit;
}

/* Блок оплати: сірий фон, внутрішні відступи й рамка від плагіна */
.woocommerce-checkout #payment,
.woocommerce-cart #payment {
    background: none;
    border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods {
    padding: 0;
    border-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods::before,
.woocommerce-checkout #payment ul.payment_methods::after,
.woocommerce-cart #payment ul.payment_methods::before,
.woocommerce-cart #payment ul.payment_methods::after,
.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::before,
.woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-notice)::after,
.woocommerce-cart #payment ul.payment_methods li:not(.woocommerce-notice)::before,
.woocommerce-cart #payment ul.payment_methods li:not(.woocommerce-notice)::after {
    display: none;
}

.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-cart #payment ul.payment_methods li {
    line-height: inherit;
}

.woocommerce-checkout #payment ul.payment_methods li input,
.woocommerce-cart #payment ul.payment_methods li input {
    margin: 0;
}

.woocommerce-checkout #payment div.form-row,
.woocommerce-cart #payment div.form-row {
    padding: 0;
}

.woocommerce-checkout #payment div.payment_box,
.woocommerce-cart #payment div.payment_box {
    width: auto;
    margin: 8px 0 0;
    padding: 14px 16px;
    border-radius: var(--bb-radius-md);
    background: var(--bb-tint);
    font-size: var(--bb-fs-small);
    line-height: 1.6;
    color: var(--bb-secondary);
}

/* Трикутник-«хвостик» над блоком опису способу оплати */
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before {
    display: none;
}

/* Плитка фактів на «замовлення отримано» — рідний ul.order_details
   робить li плаваючими, капсом і 0.715em. */
.woocommerce ul.order_details.bb-thanks__facts::before,
.woocommerce ul.order_details.bb-thanks__facts::after {
    display: none;
}

.woocommerce ul.order_details.bb-thanks__facts li {
    float: none;
    margin: 0;
    padding: 16px 18px;
    border-right: 0;
    font-size: var(--bb-fs-body);
    line-height: inherit;
    text-transform: none;
}

.woocommerce ul.order_details.bb-thanks__facts li strong {
    font-size: var(--bb-fs-body);
    line-height: 1.4;
}

/* Таблиця складу замовлення на «замовлення отримано» —
   шаблон плагінний, клас shop_table звідти не прибрати. */
.woocommerce table.shop_table.woocommerce-table--order-details {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.woocommerce table.shop_table.woocommerce-table--order-details th,
.woocommerce table.shop_table.woocommerce-table--order-details td {
    padding: 12px 0;
}

/* Поле кількості: рідне .woocommerce .quantity .qty (0,3,0) ширше */
.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty {
    width: 44px;
}

/* Зірочку обовʼязкового поля WooCommerce ховає (visibility:hidden),
   бо натомість підписує необовʼязкові словом «(optional)». Ми цього
   не робимо, тож зірочку повертаємо — інакше в людини немає жодного
   натяку, що поле обовʼязкове. */
.woocommerce form .form-row .required,
.woocommerce-page form .form-row .required {
    visibility: visible;
    font-weight: var(--bb-fw-regular);
    color: var(--bb-sale);
}

/* Форма промокоду на чекауті */
.woocommerce form.checkout_coupon {
    margin: 0 0 24px;
    padding: 22px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
}


/* ── Контейнер сторінок WooCommerce ────────────
   Кошик, оформлення й кабінет малюються через page.php,
   у якого свого контейнера немає — текст лягав впритул
   до краю екрана. Каталог і сторінку товару це не
   зачіпає: там свої шаблони зі своїм .bb-container. */

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
    max-width: var(--bb-container);
    margin-inline: auto;
    padding-inline: var(--bb-gutter);
    padding-bottom: var(--bb-section);
}

.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header {
    margin-bottom: 28px;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-h1);
    font-weight: var(--bb-fw-medium);
    line-height: var(--bb-lh-h1);
    letter-spacing: var(--bb-ls-h1);
    color: var(--bb-ink);
}


/* ── Повідомлення WooCommerce ──────────────────
   Стандартні .woocommerce-message / -info / -error
   приходять з рамкою 3px і кольорами плагіна. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 1px solid var(--bb-line);
    border-left: 3px solid var(--bb-periwinkle);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
    list-style: none;
    font-size: var(--bb-fs-body);
    color: var(--bb-body);
}

.woocommerce-error {
    border-left-color: var(--bb-sale);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    content: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
    margin-left: auto;
}


/* =============================================
   КОШИК
   ============================================= */

.bb-basket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--bb-gap-columns);
    align-items: start;
}

.bb-basket__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--bb-line);
}

/* Рядок товару: фото · опис · кількість · сума · хрестик.
   Опис забирає весь вільний простір, решта колонок фіксовані —
   тож суми в усіх рядках стоять на одній вертикалі. */
.bb-basket__item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto 110px 28px;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--bb-line);
}

.bb-basket__media {
    aspect-ratio: var(--bb-ratio-card);
    border-radius: var(--bb-radius-sm);
    background: var(--bb-photo-bg);
    overflow: hidden;
}

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

.bb-basket__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

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

.bb-basket__title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-product);
    font-weight: var(--bb-fw-regular);
    line-height: var(--bb-lh-product);
    color: var(--bb-ink);
    text-decoration: none;
}

.bb-basket__title:hover,
.bb-basket__title:focus {
    color: var(--bb-indigo);
}

.bb-basket__meta,
.bb-basket__unit {
    font-size: var(--bb-fs-caption);
    color: var(--bb-muted);
}

.bb-basket__unit .amount {
    color: var(--bb-secondary);
}

.bb-basket__backorder {
    margin: 2px 0 0;
    font-size: var(--bb-fs-caption);
    color: var(--bb-accent-italic);
}

.bb-basket__sum {
    font-size: var(--bb-fs-price-card);
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
    text-align: right;
    white-space: nowrap;
}

.bb-basket__remove .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--bb-muted);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.bb-basket__remove .remove:hover,
.bb-basket__remove .remove:focus {
    background: var(--bb-tint);
    color: var(--bb-ink);
}


/* ── Кількість ─────────────────────────────────
   Степер −/+ дописує checkout.js. Без JavaScript
   лишається звичайне числове поле. */

.quantity {
    display: inline-flex;
    align-items: center;
    height: 44px;
    border: 1px solid var(--bb-line-input);
    border-radius: var(--bb-radius-pill);
    background: var(--bb-surface);
    overflow: hidden;
}

.quantity input.qty {
    width: 44px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--bb-font-ui);
    font-size: var(--bb-fs-ui);
    color: var(--bb-ink);
    text-align: center;
    -moz-appearance: textfield;
}

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

.bb-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    color: var(--bb-secondary);
    cursor: pointer;
    transition: color .2s;
}

.bb-step:hover:not(:disabled) {
    color: var(--bb-indigo);
}

.bb-step:disabled {
    color: var(--bb-line-button);
    cursor: default;
}


/* ── Промокод і «оновити кошик» ────────────────── */

.bb-basket__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 22px;
}

.bb-coupon {
    display: flex;
    gap: 10px;
    flex: 1 1 320px;
    /* Без цього поле вводу тягне блок до своєї типової ширини (~242px)
       і промокод разом з кнопкою вилазить за екран. */
    min-width: 0;
}

.bb-coupon__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--bb-line-input);
    border-radius: var(--bb-radius-pill);
    background: var(--bb-surface);
    font-family: var(--bb-font-ui);
    font-size: var(--bb-fs-ui);
    color: var(--bb-ink);
}

.bb-coupon__input::placeholder {
    color: var(--bb-muted);
}

.bb-coupon__input:focus {
    outline: none;
    border-color: var(--bb-periwinkle);
}

/* Зі скриптом кількість зберігається сама — кнопка ховається.
   Клас додає checkout.js, тож без JavaScript вона лишається видимою. */
.bb-basket--live .bb-basket__update {
    display: none;
}

.bb-basket__continue {
    display: inline-block;
    margin-top: 24px;
}


/* =============================================
   ПАНЕЛЬ ПІДСУМКУ — спільна для кошика й оформлення
   ============================================= */

.bb-summary {
    position: sticky;
    top: 24px;
    padding: 28px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
}

.bb-summary__title {
    margin: 0 0 18px;
    font-family: var(--bb-font-display);
    font-size: 26px;
    font-weight: var(--bb-fw-medium);
    line-height: 1.2;
    color: var(--bb-ink);
}

.bb-summary__table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
}

.bb-summary__table th,
.bb-summary__table td {
    padding: 9px 0;
    border: 0;
    font-size: var(--bb-fs-body);
    font-weight: var(--bb-fw-regular);
    line-height: 1.5;
    vertical-align: top;
}

.bb-summary__table th {
    text-align: left;
    color: var(--bb-secondary);
}

.bb-summary__table td {
    text-align: right;
    color: var(--bb-ink);
    white-space: nowrap;
}

/* Підсумок — окремим блоком, відділеним лінією */
.bb-summary__table tr.order-total th,
.bb-summary__table tr.order-total td {
    padding-top: 18px;
    border-top: 1px solid var(--bb-line);
    font-size: 17px;
}

.bb-summary__table tr.order-total td {
    font-size: 22px;
    font-weight: var(--bb-fw-medium);
}

.bb-summary__table tr.cart-discount td {
    color: var(--bb-success);
}

.bb-summary__action {
    margin-top: 22px;
}

.bb-summary__action .bb-btn,
.bb-checkout__submit {
    width: 100%;
}

.bb-summary__tg {
    display: block;
    margin-top: 14px;
    font-size: var(--bb-fs-ui);
    color: var(--bb-periwinkle);
    text-align: center;
    text-decoration: none;
}

.bb-summary__tg:hover,
.bb-summary__tg:focus {
    color: var(--bb-indigo);
}


/* ── Склад замовлення в підсумку оформлення ───── */

.bb-summary__items td {
    padding: 11px 0;
    border-bottom: 1px solid var(--bb-line-soft);
    vertical-align: top;
}

.bb-summary__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left !important;
    white-space: normal !important;
}

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

.bb-summary__product {
    font-size: var(--bb-fs-body);
    line-height: 1.4;
    color: var(--bb-ink);
}

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

.bb-summary__value {
    font-weight: var(--bb-fw-medium);
}

/* Перший рядок підсумків після складу замовлення */
.bb-summary__table--review tfoot tr:first-child th,
.bb-summary__table--review tfoot tr:first-child td {
    padding-top: 16px;
}


/* =============================================
   РАДІО-КАРТКИ — доставка й оплата
   ============================================= */

/* Рядок доставки займає всю ширину таблиці підсумку:
   картки не помістились би у вузьку праву колонку. */
.bb-ship__cell {
    padding: 18px 0 !important;
    border-top: 1px solid var(--bb-line);
    text-align: left !important;
    white-space: normal !important;
}

.bb-ship__legend,
.bb-pay__legend {
    display: block;
    margin-bottom: 10px;
    font-size: var(--bb-fs-eyebrow);
    letter-spacing: var(--bb-ls-label);
    text-transform: uppercase;
    color: var(--bb-muted);
}

.bb-ship__list,
.wc_payment_methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-option {
    position: relative;
    list-style: none;
}

/* Радіо ховаємо візуально, але лишаємо у потоці для
   клавіатури й скрінрідера — фокус ловимо через :focus-visible. */
.bb-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.bb-option__label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--bb-line-input);
    border-radius: var(--bb-radius-md);
    background: var(--bb-surface);
    font-size: var(--bb-fs-body);
    color: var(--bb-body);
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.bb-option__label:hover {
    border-color: var(--bb-line-button);
}

/* Обраний варіант — рамка 1.5px індиго й фон #F7F6FD (гайдлайн) */
.bb-option:has(.bb-option__input:checked) .bb-option__label {
    border: 1.5px solid var(--bb-indigo);
    padding: 13.5px 15.5px;
    background: var(--bb-selected-bg);
}

.bb-option:has(.bb-option__input:focus-visible) .bb-option__label {
    outline: 2px solid var(--bb-periwinkle);
    outline-offset: 2px;
}

.bb-option__mark {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--bb-line-button);
    border-radius: 50%;
    background: var(--bb-surface);
    transition: border-color .2s, box-shadow .2s;
}

.bb-option:has(.bb-option__input:checked) .bb-option__mark {
    border-color: var(--bb-indigo);
    box-shadow: inset 0 0 0 4px var(--bb-surface), inset 0 0 0 9px var(--bb-indigo);
}

.bb-option__name {
    flex: 1 1 auto;
    color: var(--bb-ink);
}

.bb-option:has(.bb-option__input:checked) .bb-option__name {
    font-weight: var(--bb-fw-medium);
}

.bb-option__price {
    flex: 0 0 auto;
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
    white-space: nowrap;
}

.bb-option__icon img {
    max-height: 20px;
    width: auto;
}

/* Опис способу оплати під обраною карткою */
.bb-option__box {
    margin: 8px 0 0;
    padding: 14px 16px;
    border-radius: var(--bb-radius-md);
    background: var(--bb-tint);
    font-size: var(--bb-fs-small);
    line-height: 1.6;
    color: var(--bb-secondary);
}

.bb-option__box p {
    margin: 0;
}

.bb-option__box p + p {
    margin-top: 8px;
}

/* Один-єдиний спосіб доставки WooCommerce віддає прихованим полем —
   картки без радіо не мають виглядати клікабельними. */
.bb-option:not(:has(.bb-option__input)) .bb-option__label {
    cursor: default;
}

.bb-option:not(:has(.bb-option__input)) .bb-option__mark {
    display: none;
}

.bb-ship__note {
    margin: 10px 0 0;
    font-size: var(--bb-fs-caption);
    line-height: 1.5;
    color: var(--bb-muted);
}

.bb-ship__note--warn {
    color: var(--bb-accent-italic);
}

.bb-ship__note strong {
    color: var(--bb-secondary);
    font-weight: var(--bb-fw-regular);
}

/* Калькулятор доставки в кошику */
.shipping-calculator-button {
    font-size: var(--bb-fs-caption);
    color: var(--bb-periwinkle);
    text-decoration: none;
}

.shipping-calculator-form {
    margin-top: 12px;
}


/* =============================================
   ОФОРМЛЕННЯ
   ============================================= */

.bb-checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: var(--bb-gap-columns);
    align-items: start;
}

.bb-checkout__details {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.bb-checkout__col > h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
    margin: 0 0 18px;
    font-family: var(--bb-font-display);
    font-size: 26px;
    font-weight: var(--bb-fw-medium);
    line-height: 1.2;
    color: var(--bb-ink);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* Поля, які завжди на всю ширину */
.form-row-wide,
#billing_address_1_field,
#billing_address_2_field,
#shipping_address_1_field,
#shipping_address_2_field,
#order_comments_field,
.woocommerce-additional-fields .form-row {
    grid-column: 1 / -1;
}

.form-row {
    margin: 0;
    padding: 0;
}

.form-row label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--bb-fs-caption);
    color: var(--bb-secondary);
}

.form-row .required {
    color: var(--bb-sale);
    text-decoration: none;
    border: 0;
}

.form-row .input-text,
.form-row select,
.select2-container .select2-selection--single {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--bb-line-input);
    border-radius: var(--bb-radius-md);
    background: var(--bb-surface);
    font-family: var(--bb-font-ui);
    font-size: var(--bb-fs-body);
    color: var(--bb-ink);
    transition: border-color .2s;
}

.form-row textarea.input-text {
    height: auto;
    min-height: 96px;
    padding: 12px 16px;
    line-height: 1.5;
    resize: vertical;
}

.form-row .input-text::placeholder {
    color: var(--bb-muted);
}

.form-row .input-text:focus,
.form-row select:focus {
    outline: none;
    border-color: var(--bb-periwinkle);
}

.form-row.woocommerce-invalid .input-text,
.form-row.woocommerce-invalid select,
.form-row.woocommerce-invalid .select2-container .select2-selection--single {
    border-color: var(--bb-sale);
}

/* Select2 підставляє свою висоту рядка й стрілку */
.select2-container .select2-selection--single {
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: inherit;
    color: var(--bb-ink);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 12px;
}

.select2-dropdown {
    border-color: var(--bb-line-input);
    border-radius: var(--bb-radius-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--bb-tint);
    color: var(--bb-ink);
}

/* Чекбокси: «доставити на іншу адресу», згода на розсилку */
.woocommerce-form__label-for-checkbox,
.bb-marketing-consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--bb-fs-body);
    color: var(--bb-body);
    cursor: pointer;
}

.woocommerce-form__input-checkbox,
.bb-marketing-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: var(--bb-check-size);
    height: var(--bb-check-size);
    margin-top: 4px;
    accent-color: var(--bb-indigo);
}

.bb-marketing-consent {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--bb-line-soft);
}

#ship-to-different-address {
    margin-bottom: 16px;
}

#ship-to-different-address .woocommerce-form__label-for-checkbox span {
    font-family: var(--bb-font-display);
    font-size: 26px;
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
}

/* Умови продажу над кнопкою */
.woocommerce-terms-and-conditions-wrapper {
    margin: 16px 0;
    font-size: var(--bb-fs-small);
    color: var(--bb-secondary);
}

.woocommerce-privacy-policy-text p {
    margin: 0 0 10px;
    font-size: var(--bb-fs-small);
    line-height: 1.6;
    color: var(--bb-muted);
}

.place-order {
    margin-top: 18px;
}

/* Логін і промокод угорі екрана оформлення */
.woocommerce-form-login,
.checkout_coupon {
    margin: 0 0 24px;
    padding: 22px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
}

.checkout_coupon .form-row {
    display: flex;
    gap: 10px;
}

/* Оверлей WooCommerce під час перерахунку */
.blockUI.blockOverlay {
    background: var(--bb-surface) !important;
}


/* =============================================
   ЗАМОВЛЕННЯ ОТРИМАНО
   ============================================= */

.bb-thanks {
    max-width: 760px;
}

.bb-thanks__head {
    margin-bottom: 28px;
}

.bb-thanks__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--bb-mint);
    color: var(--bb-success);
}

.bb-thanks__title {
    margin: 0 0 10px;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-h2);
    font-weight: var(--bb-fw-medium);
    line-height: var(--bb-lh-h2);
    color: var(--bb-ink);
}

.bb-thanks__lead {
    margin: 0;
    max-width: 52ch;
    font-size: var(--bb-fs-lead);
    line-height: var(--bb-lh-lead);
    color: var(--bb-body);
}

.bb-thanks__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin: 0 0 28px;
    padding: 0;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-line);
    list-style: none;
    overflow: hidden;
}

.bb-thanks__facts li {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 16px 18px;
    background: var(--bb-surface);
    border: 0;
}

.bb-thanks__label {
    font-size: var(--bb-fs-eyebrow);
    letter-spacing: var(--bb-ls-label);
    text-transform: uppercase;
    color: var(--bb-muted);
}

.bb-thanks__facts strong {
    font-size: var(--bb-fs-body);
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
}

.bb-thanks__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Реквізити банку — головне на цьому екрані для магазину на переказі */
.woocommerce-bacs-bank-details {
    margin: 0 0 32px;
    padding: 24px 26px;
    border: 1.5px solid var(--bb-indigo);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-selected-bg);
}

.wc-bacs-bank-details-heading {
    margin: 0 0 14px;
    font-family: var(--bb-font-display);
    font-size: 26px;
    font-weight: var(--bb-fw-medium);
    line-height: 1.2;
    color: var(--bb-ink);
}

.wc-bacs-bank-details {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wc-bacs-bank-details li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--bb-fs-caption);
    letter-spacing: var(--bb-ls-eyebrow);
    text-transform: uppercase;
    color: var(--bb-muted);
}

.wc-bacs-bank-details li strong {
    flex-basis: 100%;
    font-family: var(--bb-font-ui);
    font-size: 17px;
    font-weight: var(--bb-fw-medium);
    letter-spacing: 0;
    text-transform: none;
    color: var(--bb-ink);
    /* IBAN має легко виділятись і копіюватись */
    user-select: all;
    word-break: break-all;
}

/* Склад замовлення й адреси під реквізитами */
.woocommerce-order-details,
.woocommerce-customer-details {
    margin-bottom: 32px;
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
    margin: 0 0 14px;
    font-family: var(--bb-font-display);
    font-size: 26px;
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
}

.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--bb-fs-body);
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--bb-line-soft);
    text-align: left;
    font-weight: var(--bb-fw-regular);
    color: var(--bb-body);
}

.woocommerce-table--order-details thead th {
    font-size: var(--bb-fs-eyebrow);
    letter-spacing: var(--bb-ls-label);
    text-transform: uppercase;
    color: var(--bb-muted);
}

.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details th:last-child {
    text-align: right;
    white-space: nowrap;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: 0;
    font-size: 17px;
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
}

.woocommerce-customer-details .woocommerce-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

/* woocommerce.css чистить флоати через .col2-set::before / ::after
   (display: table). У грід-контейнері псевдоелементи стають повноцінними
   комірками: ::before займав першу, і «Платіжна адреса» їхала в праву
   колонку, а «Адреса доставки» — на рядок нижче. Флоатів у нас немає,
   тож і чистити нічого. Те саме для колонок чекауту. */
.woocommerce-customer-details .woocommerce-columns::before,
.woocommerce-customer-details .woocommerce-columns::after,
.bb-checkout__details::before,
.bb-checkout__details::after {
    content: none;
    display: none;
}

.woocommerce-customer-details address {
    padding: 18px 20px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
    font-style: normal;
    font-size: var(--bb-fs-body);
    line-height: 1.7;
    color: var(--bb-body);
}


/* ── Порожній кошик ────────────────────────────── */

.bb-basket-empty {
    max-width: 460px;
    padding: 44px 0 var(--bb-section);
}

.bb-basket-empty__title {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-h2);
    font-weight: var(--bb-fw-medium);
    line-height: var(--bb-lh-h2);
    color: var(--bb-ink);
}

.bb-basket-empty__text {
    margin: 0 0 24px;
    font-size: var(--bb-fs-lead);
    line-height: var(--bb-lh-lead);
    color: var(--bb-body);
}

.bb-basket-empty__action {
    margin: 0;
}


/* =============================================
   ПЛАНШЕТ І МОБІЛЬНА
   ============================================= */

@media (max-width: 1023.98px) {

    /* Підсумок їде під основну колонку — на 1024px він уже
       завузький, щоб у ньому вміщались картки доставки. */
    .bb-basket,
    .bb-checkout__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .bb-summary {
        position: static;
    }
}

@media (max-width: 767.98px) {

    .woocommerce-cart .site-main,
    .woocommerce-checkout .site-main,
    .woocommerce-account .site-main {
        padding-bottom: var(--bb-section-m);
    }

    /* Рядок товару: фото ліворуч, усе інше — колонкою праворуч,
       хрестик у верхньому куті.

       Третя колонка — auto, а не фіксовані 24px: у ній стоїть і хрестик,
       і сума, і саме сума задає потрібну ширину. З фіксованою колонкою
       сума не поміщалась і розпирала сторінку по горизонталі. */
    .bb-basket__item {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        grid-template-areas:
            "media body remove"
            "media qty  sum";
        align-items: start;
        gap: 8px 14px;
        padding: 18px 0;
    }

    .bb-basket__remove {
        justify-self: end;
    }

    .bb-basket__media  { grid-area: media; }
    .bb-basket__body   { grid-area: body; }
    .bb-basket__qty    { grid-area: qty; align-self: center; }
    .bb-basket__sum    { grid-area: sum; align-self: center; }
    .bb-basket__remove { grid-area: remove; }

    .bb-basket__title {
        font-size: var(--bb-fs-product);
    }

    .bb-basket__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* У колонковому флексі align-items: stretch не дотягує цей блок
       до ширини контейнера — задаємо явно. */
    .bb-coupon {
        flex: 1 1 auto;
        width: 100%;
    }

    .bb-summary {
        padding: 22px 20px;
    }

    /* Дві колонки полів на 390px не читаються */
    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper,
    .woocommerce-additional-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    .bb-option__label {
        flex-wrap: wrap;
        padding: 13px 14px;
    }

    .bb-thanks__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}