/*
 * Редизайн basics.in.ua.
 * Підключається в header.twig останнім, тому перекриває стилі теми, custom.css і responsive.css.
 * Шрифти Onest і Geologica підключені з Google Fonts там же.
 */

:root {
    --bh-dark: #16181C;
    --bh-yellow: #FDCE02;
    --bh-yellow-hover: #FFDC3D;
    --bh-yellow-shadow: #C69F00;
    --bh-border: #E4E9F0;
    --bh-input-bg: #F8FAFC;
    --bh-hover-bg: #F1F4F8;
    --bh-muted: #8A93A0;
    --bh-font: 'Onest', system-ui, sans-serif;
    --bh-font-head: 'Geologica', sans-serif;
    --bh-container: 1432px;
}

/* ============================================================
   ШАПКА: верхня смуга
   ============================================================ */
body{
    font-family: var(--bh-font);
}
.bh-topbar {
    background: var(--bh-dark);
    color: #C9CFD8;
    font-family: var(--bh-font);
    font-size: 13px;
    letter-spacing: .01em;
}

.bh-topbar-inner {
    max-width: var(--bh-container);
    height: 42px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bh-topbar-left,
.bh-topbar-right {
    display: flex;
    align-items: center;
}

.bh-topbar-left {
    gap: 22px;
    min-width: 0;
}

.bh-topbar-right {
    gap: 18px;
    flex: none;
}

.bh-topbar-item {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.bh-topbar-item svg {
    flex: none;
}

.bh-topbar a {
    text-decoration: none;
}

.bh-topbar .bh-topbar-mail {
    color: #C9CFD8;
}

.bh-topbar .bh-topbar-mail:hover {
    color: #fff;
}

.bh-topbar-sep {
    width: 1px;
    height: 16px;
    background: #333840;
}

.bh-topbar .bh-topbar-phone {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
    white-space: nowrap;
}

.bh-topbar .bh-topbar-phone:hover {
    color: var(--bh-yellow);
}

.bh-topbar-social {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bh-social {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s;
}

.bh-social:hover {
    opacity: .85;
}

.bh-social-phone {
    display: none;
    background: var(--bh-yellow);
}

.bh-social-tg {
    background: #2AABEE;
}

.bh-social-viber {
    background: #7360F2;
}

/* ============================================================
   ШАПКА: основний рядок
   ============================================================ */

.ds-header {
    background: #fff;
    border-bottom: 1px solid var(--bh-border);
    box-shadow: 0 2px 14px rgba(16, 24, 40, .05);
    font-family: var(--bh-font);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ds-header > .container-xl {
    max-width: var(--bh-container);
    padding: 0 32px;
}

.ds-header > .container-xl > .d-flex {
    min-height: 78px;
    margin-bottom: 0 !important;
    gap: 16px;
}

.ds-header-left {
    flex: none;
    gap: 16px;
}

/* Логотип */
.ds-header #logo {
    display: block;
    width: auto;
    height: 38px;
    max-width: 140px;
}

/* Бургер (до 1200px): темна квадратна кнопка з жовтою іконкою */
.ds-header .ds-mobile-burger,
.ds-header .ds-mobile-burger:hover,
.ds-header .ds-mobile-burger:focus,
.ds-header .ds-mobile-burger:active {
    width: 46px;
    height: 46px;
    margin-right: 0 !important;
    padding: 0;
    border-radius: 12px;
    background: var(--bh-dark) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ds-header .ds-mobile-burger svg path {
    fill: var(--bh-yellow);
}

@media (min-width: 1200px) {
    .ds-header .ds-mobile-burger {
        display: none !important;
    }
}

/* Кнопка «Каталог» (функціонал буде пізніше) */
.bh-catbtn {
    height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: var(--bh-dark);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    font-family: var(--bh-font);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
}

.bh-catbtn:hover {
    background: #2C3037;
}

/* Кнопка — посилання на /shop: без підкреслення й зміни кольору від стилів посилань теми */
.ds-header a.bh-catbtn,
.ds-header a.bh-catbtn:hover,
.ds-header a.bh-catbtn:focus {
    color: #fff;
    text-decoration: none;
}

/* Права частина: пошук зліва, іконки притиснуті праворуч */
.ds-header-right {
    justify-content: flex-start !important;
    gap: 6px;
    padding-right: 0 !important;
    min-width: 0;
}

/* Іконки обране / кошик: 44×44, без роздільників старої шапки */
.ds-header-right > .button-transparent:not(.header__client-wrapper),
.ds-header-right > .ds-header-wishlist-button,
.ds-header-right > .ds-header-cart-button {
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    border-left: 0;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: background .15s;
}

/* Іконки й кнопка «Клієнту» притиснуті праворуч (специфічність вища за правило розміру іконок) */
.ds-header .ds-header-right > .ds-header-wishlist-button {
    margin-left: auto !important;
}

.ds-header-right > .ds-header-cart-button {
    display: flex;
}

/* Обране видно на всіх ширинах (d-lg-block теми ставить display: block від 992px) */
.ds-header-right > .ds-header-wishlist-button {
    display: flex !important;
}

.ds-header-right > .button-transparent:not(.header__client-wrapper):hover,
.ds-header-right > .ds-header-wishlist-button:hover,
.ds-header-right > .ds-header-cart-button:hover {
    background: var(--bh-hover-bg);
}

.ds-header .ds-header-right > .ds-header-wishlist-button svg,
.ds-header .ds-header-right > .ds-header-cart-button svg {
    width: 21px;
    height: 21px;
    margin: 0;
}

/* Лічильники */
/* custom.css підключається вдруге у футері (після redesign.css), тому селектор сильніший за його .ds-header .badge */
.ds-header .ds-header-right .badge,
.ds-header .ds-header-right .badge.active {
    top: 3px;
    right: 2px;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 1px 5px;
    border-radius: 20px;
    background: var(--bh-yellow);
    color: #212529;
    font-family: var(--bh-font);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

/* Кнопка «Клієнту»: вигляд з нового макета, функціонал теми без змін */
.ds-header-right .header__client-wrapper {
    margin-left: 0 !important;
    padding-left: 0;
    border-left: 0;
    flex: none;
}

/* custom.css: .ds-header-right > .button-transparent { padding-left: 24px; border-left: 1px solid #F2F2F2 } —
   роздільники старої шапки; у новій їх немає (обгортка «Клієнту» теж має клас button-transparent) */
.ds-header .ds-header-right > .button-transparent {
    padding-left: 0 !important;
    border-left: 0 !important;
}

.ds-header .header__client-button {
    height: 46px;
    margin-right: 0 !important;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--bh-yellow);
    box-shadow: 0 4px 0 var(--bh-yellow-shadow);
    gap: 9px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s;
}

.ds-header .header__client-button:hover,
.ds-header .ds-dropdown-box.active .header__client-button {
    background: var(--bh-yellow-hover);
}

.ds-header .header__client-button svg {
    margin: 0 !important;
    flex: none;
}

.ds-header .header__client-button svg path {
    stroke: var(--bh-dark);
}

.ds-header .header__client-wrapper .header__client-button .header__button-text,
.ds-header .ds-dropdown-box.active .ds-dropdown-toggle .header__button-text {
    color: var(--bh-dark) !important;
    font-family: var(--bh-font);
    font-size: 14.5px;
    font-weight: 800;
}

/* Випадне меню клієнта. Показ/приховування — класом .active зі скрипта теми */
.ds-header .bh-acc,
.ds-header .ds-dropdown-box.active .bh-acc {
    top: calc(100% + 10px);
    left: auto;
    right: 0;
    width: min(306px, calc(100vw - 32px));
    min-width: 0;
    padding-top: 0;
    transform: none;
}

/* Невидимий місток над дропдауном: щоб при переведенні курсора через зазор 10px меню не закривалось */
.ds-header .bh-acc::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 10px;
}

.ds-header .bh-acc-inner {
    min-width: 0;
    padding: 0;
    border: 1px solid #F2F2F2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .16);
    overflow-x: hidden;
    font-family: var(--bh-font);
    color: var(--bh-dark);
}

.bh-acc-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: #FAFAFA;
    border-bottom: 1px solid #F2F2F2;
    color: var(--bh-dark);
    text-decoration: none;
}

.bh-acc-user:hover {
    color: var(--bh-dark);
    background: #F5F7F9;
}

.bh-acc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bh-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-weight: 800;
    font-size: 15px;
}

.bh-acc-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bh-acc-user-name {
    font-weight: 700;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bh-acc-user-sub {
    font-size: 12.5px;
    color: #6C757D;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bh-acc-section {
    padding: 14px 16px;
    border-bottom: 1px solid #F2F2F2;
}

.ds-header .bh-acc-action {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: var(--bh-dark);
    color: var(--bh-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--bh-font);
    font-weight: 800;
    font-size: 14.5px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}

.ds-header .bh-acc-action:hover {
    background: #2C3037;
    color: var(--bh-yellow);
}

.ds-header .bh-acc-action svg path {
    stroke: currentColor;
    fill: none;
}

/* Мова: підпис ліворуч, перемикач-сегмент праворуч */
.bh-acc-lang {
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bh-acc-lang-title {
    font-size: 13px;
    color: #6C757D;
}

.bh-acc-lang .language-normalized-box {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 3px;
    border-radius: 9px;
    background: #F5F7F9;
}

.bh-acc-lang .language-normalized-btn {
    min-width: 0;
    height: auto;
    padding: 5px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6C757D;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
}

.bh-acc-lang .language-normalized-btn:hover {
    background: #fff;
    color: var(--bh-dark);
}

.bh-acc-lang .language-normalized-btn.active,
.bh-acc-lang .language-normalized-btn.active:hover {
    background: #212529;
    color: #fff;
    font-weight: 700;
}

/* Посилання (меню з налаштувань теми) */
.bh-acc-links {
    padding: 8px;
}

.bh-acc-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 14px;
    color: var(--bh-dark);
    text-decoration: none;
    transition: background .15s;
}

.bh-acc-link:hover {
    background: #FAFAFA;
    color: var(--bh-dark);
}

.bh-acc-link svg path {
    fill: none;
}

/* ============================================================
   ШАПКА: пошук (common/search_header.twig)
   ============================================================ */

/* Як у макеті каталогу: пошук займає всю вільну ширину між «Каталогом» та іконками */
.bh-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 220px;
    height: 46px;
    margin: 0;
    padding: 0 6px 0 14px;
    border: 1px solid #EBEBEB;
    border-radius: 10px;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color .15s, background .15s;
}

.bh-search:focus-within {
    border-color: var(--bh-yellow);
    background: #fff;
}

.bh-search-icon {
    flex: none;
}

.bh-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bh-dark);
    font-family: var(--bh-font);
    font-size: 14.5px;
}

.bh-search input::placeholder {
    color: var(--bh-muted);
    font-size: 14.5px;
}

.bh-search-submit {
    flex: none;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: var(--bh-yellow);
    color: var(--bh-dark);
    font-family: var(--bh-font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.bh-search-submit:hover {
    background: var(--bh-yellow-hover);
}

.bh-search.bh-search-loading .bh-search-icon {
    animation: bhSearchPulse .8s ease-in-out infinite alternate;
}

@keyframes bhSearchPulse {
    to { opacity: .3; }
}

/* Результати живого пошуку: випадний блок під полем */
.bh-search .bh-livesearch {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    bottom: auto;
    width: min(720px, calc(100vw - 32px));
    max-height: 0;
    border-radius: 14px;
}

.bh-search .bh-livesearch.expanded {
    max-height: calc(100vh - 160px);
}

/* Іконка пошуку для мобільного */
.bh-search-toggle {
    display: none;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1.5px solid var(--bh-border);
    border-radius: 12px;
    background: var(--bh-input-bg);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ============================================================
   ШАПКА: адаптив
   ============================================================ */

@media (max-width: 1199.98px) {
    .bh-catbtn {
        display: none;
    }
}

@media (max-width: 899.98px) {
    .bh-topbar-sec,
    .bh-topbar .bh-topbar-phone {
        display: none;
    }

    .bh-social-phone {
        display: flex;
    }

    .bh-topbar-inner,
    .ds-header > .container-xl {
        padding: 0 16px;
    }

    .ds-header > .container-xl > .d-flex {
        min-height: 70px;
        gap: 10px;
    }

    .ds-header-right {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .bh-search-toggle {
        display: flex;
    }

    .bh-search {
        display: none;
    }

    .bh-search.bh-search-open {
        display: flex;
        order: 5;
        flex-basis: 100%;
        min-width: 0;
        margin-bottom: 12px;
    }

    /* Іконка пошуку лишається зліва; обране, кошик і «Клієнту» відсуває праворуч margin-left: auto обраного */

    .ds-header .header__client-button {
        width: 46px;
        padding: 0;
        justify-content: center;
    }

    .ds-header .header__client-button .header__button-text,
    .ds-header .header__client-button .ds-arrow-down {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ds-header #logo {
        height: 30px;
    }

    .bh-search .bh-livesearch {
        right: 0;
        width: auto;
    }
}

/* ============================================================
   МЕНЮ КАТЕГОРІЙ (octemplates/menu/oct_menu.twig)
   Показ, позиція і висота на головній — скрипт і стилі теми (.with-slideshow)
   ============================================================ */

.ds-menu-catalog.ds-menu-main-catalog {
    font-family: var(--bh-font);
}

/* Верхній рівень: пункти без рамок, з підсвіткою при наведенні */
.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items {
    border: 0;
    background: transparent;
}

.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item {
    padding: 11px 12px;
    border: 0 !important;
    border-radius: 9px;
    gap: 10px;
    transition: background .15s;
}

.ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > li:hover {
    background: #FAFAFA;
}

.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item .ds-menu-maincategories-item-title {
    margin-left: 0 !important;
    color: var(--bh-dark);
    font-size: 13.5px;
    font-weight: 400 !important;
    line-height: 1.35;
}

.ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > li:hover .ds-menu-maincategories-item-title {
    color: var(--bh-dark);
    text-decoration: none;
}

.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item > svg {
    flex: none;
}

.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item > svg path {
    fill: #9CA3AF;
}

/* «Усі категорії» внизу меню */
.bh-menu-all {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 13px;
    border-top: 1px solid #F2F2F2;
    background: #fff;
    color: var(--bh-dark);
    font-family: var(--bh-font);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.bh-menu-all:hover {
    color: var(--bh-dark);
    background: #FAFAFA;
}

.bh-menu-all svg {
    flex: none;
    transition: transform .15s;
}

.bh-menu-all:hover svg {
    transform: translateX(3px);
}

/* Десктоп: біла картка; список прокручується, «Усі категорії» закріплене знизу */
@media (min-width: 1200px) {
    .ds-header .ds-menu-catalog.ds-menu-main-catalog {
        display: flex;
        flex-direction: column;
        padding: 12px 12px 0;
        border: 1px solid #F2F2F2;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(16, 24, 40, .05);
    }

    .ds-header .ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner {
        flex: 1 1 auto;
        min-height: 0;
        margin-right: -4px;
        padding-right: 4px;
    }

    .ds-header .ds-menu-main-catalog > .bh-menu-all {
        border-radius: 0 0 15px 15px;
    }
}

/* ============================================================
   СЛАЙДЕР ГОЛОВНОЇ (octemplates/module/oct_slideshow_plus_home.twig)
   Ширина видимої області і ефект «випливання» — JS у шаблоні
   ============================================================ */

/* Обрізає слайди, що виходять за видиму область (стопка праворуч) */
.bh-hslider-track {
    position: relative;
    overflow: hidden;
}

/* Видима область = N повних слайдів; решта видно через overflow: visible */
.bh-hslider .bh-hslider-view {
    max-width: 100%;
    margin: 0;
    overflow: visible;
}

.bh-hslider .swiper-wrapper {
    align-items: center;
}

.bh-hslide {
    aspect-ratio: 250 / 450;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
    background: #E9EDF1;
    box-shadow: 0 8px 26px rgba(16, 24, 40, .10);
    transform-origin: left center;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.bh-hslide-link,
.bh-hslide picture {
    display: block;
    width: 100%;
    height: 100%;
}

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

/* Затухання праворуч над стопкою */
.bh-hslider-fade {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    width: 120px;
    z-index: 7;
    pointer-events: none;
    background: linear-gradient(270deg, var(--ds-body-bg-light-color, #F5F8FB) 22%, rgba(245, 248, 251, .62) 64%, rgba(245, 248, 251, 0));
}

.bh-hslider-nopeek .bh-hslider-fade {
    display: none;
}

/* Стрілки */
.bh-hslider-arrow {
    position: absolute;
    top: 50%;
    z-index: 9;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    cursor: pointer;
    transition: background .15s;
}

.bh-hslider-arrow:hover {
    background: var(--bh-yellow);
}

.bh-hslider-prev {
    left: 14px;
}

.bh-hslider-next {
    right: 14px;
}

@media (max-width: 760px) {
    .bh-hslider-prev {
        left: 4px;
    }

    .bh-hslider-next {
        right: 4px;
    }
}

/* ============================================================
   «ЧОМУ З НАМИ ПРАЦЮЮТЬ ОПТОМ» (модуль HTML-контент на головній)
   ============================================================ */

.bh-perks {
    margin: 56px 0 62px;
    border: 1px solid var(--bh-border);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
    font-family: var(--bh-font);
    color: var(--bh-dark);
}

.bh-perks-grid {
    display: grid;
    grid-template-columns: 236px repeat(4, minmax(0, 1fr));
}

.bh-perks-head {
    padding: 26px 24px;
    background: #212529;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}

.bh-perks-title {
    margin: 0;
    color: #fff;
    font-family: var(--bh-font-head);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.01em;
}

.bh-perks-title span {
    color: var(--bh-yellow);
}

.bh-perks .bh-perks-link {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--bh-yellow);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.bh-perks .bh-perks-link:hover {
    color: #FFDA33;
}

.bh-perks-link svg {
    flex: none;
    transition: transform .15s;
}

.bh-perks-link:hover svg {
    transform: translateX(3px);
}

.bh-perk {
    padding: 26px 22px;
    border-left: 1px solid #EEF1F6;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background .18s;
}

.bh-perk:hover {
    background: #FFFDF2;
}

.bh-perk-icon {
    display: flex;
    align-items: center;
}

.bh-perk-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.bh-perk-text {
    margin-top: 5px;
    color: #6B7280;
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 1024px) {
    .bh-perks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Заголовок на всю ширину, переваги — по дві в ряд */
    .bh-perks-head {
        grid-column: 1 / -1;
    }

    .bh-perk {
        border-top: 1px solid #EEF1F6;
    }

    .bh-perk:nth-child(2n) {
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .bh-perks {
        margin: 42px 0;
    }
}

@media (max-width: 560px) {
    .bh-perks-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-perk {
        border-left: 0;
    }
}

/* ============================================================
   «BASICS — ОПТОВИЙ НАПРЯМОК» (модуль HTML-контент на головній)
   ============================================================ */

.bh-offer {
    position: relative;
    margin: 66px 0 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--bh-dark);
    color: #fff;
    font-family: var(--bh-font);
}

/* Жовте світіння у правому верхньому куті */
.bh-offer::before {
    content: '';
    position: absolute;
    top: -180px;
    right: -120px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 0, .16), transparent 65%);
    pointer-events: none;
}

.bh-offer-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 44px;
    align-items: stretch;
}

.bh-offer-txt {
    padding: 40px 40px 42px;
}

.bh-offer-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 210, 0, .35);
    border-radius: 40px;
    background: rgba(255, 210, 0, .14);
    color: var(--bh-yellow);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.bh-offer .bh-offer-title {
    margin: 14px 0 0;
    color: #fff;
    font-family: var(--bh-font-head);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
}

.bh-offer-title span {
    color: var(--bh-yellow);
}

.bh-offer-text {
    max-width: 620px;
    margin: 12px 0 0;
    color: #B9C0CA;
    font-size: 15.5px;
    line-height: 1.55;
}

.bh-offer-btns {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.bh-offer .bh-offer-btn {
    height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

.bh-offer .bh-offer-btn-main {
    background: var(--bh-yellow);
    box-shadow: 0 4px 0 var(--bh-yellow-shadow);
    color: var(--bh-dark);
    font-size: 16.5px;
    font-weight: 800;
}

.bh-offer .bh-offer-btn-main:hover {
    background: var(--bh-yellow-hover);
    color: var(--bh-dark);
}

.bh-offer .bh-offer-btn-ghost {
    padding: 0 20px;
    border: 1.5px solid #3A4048;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.bh-offer .bh-offer-btn-ghost:hover {
    border-color: var(--bh-yellow);
    color: #fff;
}

.bh-offer-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    color: #8F98A4;
    font-size: 14px;
}

.bh-offer-note svg {
    flex: none;
}

.bh-offer-img {
    position: relative;
    min-height: 300px;
    border-radius: 24px;
    overflow: hidden;
    background: #22252B;
}

.bh-offer-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .bh-offer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .bh-offer-txt {
        padding: 28px 24px 8px;
    }

    .bh-offer-img {
        min-height: 220px;
        margin: 0 24px 24px;
    }
}

@media (max-width: 760px) {
    .bh-offer {
        margin-top: 42px;
    }

    .bh-offer .bh-offer-title {
        font-size: 24px;
        line-height: 1.2;
    }
}

@media (max-width: 640px) {
    .bh-offer-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .bh-offer .bh-offer-btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }

    .bh-offer-note {
        align-items: flex-start;
    }
}

/* ============================================================
   «УМОВИ СПІВПРАЦІ» (модуль HTML-контент на головній, якір #terms)
   ============================================================ */

.bh-terms {
    margin: 66px 0 0;
    padding: 44px;
    border: 1px solid var(--bh-border);
    border-radius: 24px;
    background: #fff;
    color: var(--bh-dark);
    font-family: var(--bh-font);
    scroll-margin-top: 100px;
}

.bh-terms-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.bh-terms-eyebrow {
    color: #A88400;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bh-terms .bh-terms-title {
    margin: 12px 0 0;
    color: var(--bh-dark);
    font-family: var(--bh-font-head);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.bh-terms-lead {
    margin: 0;
    color: #4B5361;
    font-size: 16.5px;
    line-height: 1.6;
}

/* Тарифи для груп клієнтів */
.bh-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.bh-tier {
    padding: 26px;
    border: 1.5px solid var(--bh-border);
    border-radius: 18px;
    background: #FAFBFD;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bh-tier-name {
    font-family: var(--bh-font-head);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.bh-tier-min {
    color: #6B7280;
    font-size: 14px;
}

.bh-tier-min b {
    display: block;
    margin-top: 3px;
    color: var(--bh-dark);
    font-weight: 700;
}

.bh-tier-sep {
    height: 1px;
    background: var(--bh-border);
}

.bh-tier-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bh-tier-list li {
    display: flex;
    gap: 10px;
    color: #333A45;
    font-size: 14.5px;
    line-height: 1.45;
}

.bh-tier-list svg {
    flex: none;
    margin-top: 3px;
}

.bh-terms .bh-tier-btn {
    height: 46px;
    margin-top: auto;
    border-radius: 14px;
    background: var(--bh-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.bh-terms .bh-tier-btn:hover {
    background: #2C3037;
    color: var(--bh-yellow);
}

.bh-tier-soon {
    height: 46px;
    margin-top: auto;
    border-radius: 12px;
    background: #F0F1F3;
    color: #A8AEB6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    cursor: not-allowed;
}

/* Кроки 01–04 */
.bh-terms-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px dashed #D8DFE8;
}

.bh-terms-step {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.bh-terms-step-num {
    flex: none;
    display: flex;
    align-items: center;
    color: #E3E8EE;
    font-family: var(--bh-font-head);
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
}

.bh-terms-step-title {
    font-size: 15px;
    font-weight: 800;
}

.bh-terms-step-text {
    color: #6B7280;
    font-size: 13.5px;
    line-height: 1.45;
}

@media (max-width: 1024px) {
    .bh-terms-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .bh-tiers,
    .bh-terms-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .bh-terms {
        margin-top: 42px;
        padding: 22px;
    }

    .bh-terms .bh-terms-title {
        font-size: 24px;
        line-height: 1.18;
    }
}

@media (max-width: 560px) {
    .bh-tiers,
    .bh-terms-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-terms-steps {
        gap: 22px;
    }
}

@media (max-width: 520px) {
    .bh-terms {
        padding: 16px;
    }

    .bh-terms .bh-terms-title {
        font-size: 21px;
    }
}

/* ============================================================
   ЗАГОЛОВКИ СЕКЦІЙ ГОЛОВНОЇ
   ============================================================ */

.bh-section-title {
    margin: 0;
    color: var(--bh-dark);
    font-family: var(--bh-font-head);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

@media (max-width: 760px) {
    .bh-section-title {
        font-size: 24px;
        line-height: 1.18;
    }
}

@media (max-width: 520px) {
    .bh-section-title {
        font-size: 21px;
    }
}

/* ============================================================
   «КАТЕГОРІЇ СКЛАДУ» (модуль bh_stock_categories)
   ============================================================ */

.bh-stock-cats {
    margin: 66px 0 0;
    font-family: var(--bh-font);
    color: var(--bh-dark);
}

.bh-stock-cats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.bh-stock-cat {
    position: relative;
    padding: 16px;
    border: 1px solid #F2F2F2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .05);
    display: flex;
    gap: 16px;
    transition: border-color .15s;
}

.bh-stock-cat-linked:hover {
    border-color: var(--bh-yellow);
}

.bh-stock-cat-img {
    flex: none;
    width: 66px;
    height: 66px;
    border-radius: 10px;
    overflow: hidden;
    background: #FAFAFA;
}

.bh-stock-cat-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bh-stock-cat-body {
    min-width: 0;
}

.bh-stock-cats .bh-stock-cat-title {
    color: var(--bh-dark);
    font-family: var(--bh-font-head);
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Посилання назви розтягнуте на всю картку */
.bh-stock-cats a.bh-stock-cat-title::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
}

.bh-stock-cat-count {
    margin-top: 4px;
    color: #9CA3AF;
    font-size: 12.5px;
}

.bh-stock-cat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

/* Пункти над «розтягнутим» посиланням картки */
.bh-stock-cats .bh-stock-cat-tag {
    position: relative;
    z-index: 1;
    padding: 3px 9px;
    border: 1px solid #EDF0F3;
    border-radius: 20px;
    background: #F5F7F9;
    color: #4B5361;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}

.bh-stock-cats a.bh-stock-cat-tag:hover {
    border-color: var(--bh-yellow);
    background: var(--bh-yellow);
    color: #212529;
}

.bh-stock-cats a.bh-stock-cat-tag:active {
    border-color: #E0B802;
    background: #E0B802;
}

@media (max-width: 1024px) {
    .bh-stock-cats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .bh-stock-cats {
        margin-top: 42px;
    }
}

@media (max-width: 560px) {
    .bh-stock-cats-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   «НАШІ ФАВОРИТИ» (модуль bh_favorites)
   ============================================================ */

.bh-favorites {
    margin: 66px 0 0;
    font-family: var(--bh-font);
}

.bh-favorites-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.bh-favorites .bh-favorite {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: #212529;
    color: #212529;
    text-decoration: none;
}

/* Картинка зберігає пропорції макета 330×236 */
.bh-favorite-img {
    display: block;
    aspect-ratio: 330 / 236;
    overflow: hidden;
}

.bh-favorite-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.bh-favorites a.bh-favorite:hover .bh-favorite-img img {
    transform: scale(1.03);
}

/* Заглушка — по центру в натуральному розмірі */
.bh-favorite-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bh-favorite-img-placeholder img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.bh-favorite-title {
    height: 46px;
    padding: 0 12px;
    margin-top: auto;
    background: var(--bh-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    transition: background .15s;
}

.bh-favorites a.bh-favorite:hover .bh-favorite-title {
    background: #FFDA33;
}

@media (max-width: 1024px) {
    .bh-favorites-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .bh-favorites {
        margin-top: 42px;
    }
}

@media (max-width: 560px) {
    .bh-favorites-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   НАДЗАГОЛОВОК СЕКЦІЙ («БРЕНДИ», «УМОВИ СПІВПРАЦІ» тощо)
   ============================================================ */

.bh-eyebrow {
    margin-bottom: 12px;
    color: #A88400;
    font-family: var(--bh-font);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ============================================================
   «НАЙКРАЩІ БРЕНДИ» (модуль bh_brands)
   ============================================================ */

.bh-brands {
    margin: 66px 0 0;
    font-family: var(--bh-font);
}

.bh-brands-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 40px;
    flex-wrap: wrap;
}

.bh-brands-text {
    max-width: 420px;
    margin: 0 0 6px;
    color: #6B7280;
    font-size: 15px;
    line-height: 1.55;
}

.bh-brands-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.bh-brands .bh-brand {
    padding: 12px 18px;
    border: 1px solid var(--bh-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 0 #E9EDF2;
    color: #333A45;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.bh-brands .bh-brand:hover {
    border-color: var(--bh-dark);
    color: var(--bh-dark);
}

.bh-brands .bh-brand-all,
.bh-brands .bh-brand-all:hover {
    border-color: var(--bh-dark);
    background: var(--bh-dark);
    box-shadow: none;
    color: var(--bh-yellow);
    font-weight: 800;
}

.bh-brands .bh-brand-all:hover {
    background: #2C3037;
}

@media (max-width: 760px) {
    .bh-brands {
        margin-top: 42px;
    }

    .bh-brands .bh-brand {
        padding: 10px 14px;
        font-size: 13.5px;
    }
}

/* ============================================================
   КРУГЛІ СТРІЛКИ СЛАЙДЕРІВ (відгуки, клієнти тощо)
   ============================================================ */

.bh-round-arrows {
    display: flex;
    flex: none;
    gap: 8px;
}

.bh-round-arrow {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 18px rgba(56, 44, 20, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}

.bh-round-arrow:hover {
    background: var(--bh-yellow);
}

.bh-round-arrow.swiper-button-disabled {
    opacity: .4;
    cursor: default;
}

.bh-round-arrow.swiper-button-disabled:hover {
    background: #fff;
}

/* ============================================================
   «ЩО КАЖУТЬ ПАРТНЕРИ + НАШІ КЛІЄНТИ» (модуль bh_partners)
   Бежевий фон на всю ширину екрана без горизонтальної прокрутки:
   box-shadow розтягує фон, clip-path обрізає його по вертикалі
   ============================================================ */

.bh-partners {
    margin: 66px 0 0;
    padding: 66px 0;
    background: #F2EDE3;
    box-shadow: 0 0 0 100vmax #F2EDE3;
    clip-path: inset(0 -100vmax);
    font-family: var(--bh-font);
    color: var(--bh-dark);
}

.bh-partners-head,
.bh-clients-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.bh-partners .bh-section-title {
    font-size: 36px;
}

.bh-reviews {
    margin-top: 28px;
}

.bh-reviews .swiper-wrapper {
    align-items: stretch;
}

.bh-review {
    height: auto;
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(56, 44, 20, .06);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bh-review-quote {
    flex: none;
}

.bh-review-text {
    color: #333A45;
    font-size: 15.5px;
    line-height: 1.6;
}

.bh-review-author {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #EFE9DE;
}

.bh-review-name {
    font-size: 14.5px;
    font-weight: 800;
}

.bh-review-company {
    color: #6B7280;
    font-size: 13px;
}

/* Пагінація «пігулкою»: активна крапка видовжена */
.bh-reviews-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
}

.bh-partners .bh-reviews-dots .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0;
    border-radius: 6px;
    background: #D6CEBE;
    opacity: 1;
    transition: width .2s, background .2s;
}

.bh-partners .bh-reviews-dots .swiper-pagination-bullet-active {
    width: 22px;
    background: var(--bh-yellow);
}

.bh-reviews-dots.swiper-pagination-lock {
    display: none;
}

/* Клієнти */
.bh-clients {
    margin-top: 46px;
    padding-top: 34px;
    border-top: 1px solid #E2DACC;
}

.bh-clients-alone {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.bh-clients-head {
    align-items: center;
}

.bh-clients-head .bh-eyebrow {
    margin-bottom: 0;
}

.bh-clients-slider {
    margin-top: 20px;
}

.bh-client {
    height: 74px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bh-client img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 760px) {
    .bh-partners {
        margin-top: 42px;
        padding: 42px 0;
    }

    .bh-partners .bh-section-title {
        font-size: 24px;
    }

    .bh-review {
        padding: 22px;
    }
}

@media (max-width: 520px) {
    .bh-partners .bh-section-title {
        font-size: 21px;
    }
}

/* ============================================================
   «ДРОПШИПІНГ» (модуль HTML-контент на головній)
   ============================================================ */

.bh-drop {
    margin: 66px 0 0;
    padding: 48px;
    border-radius: 24px;
    background: #103C43;
    color: #fff;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    font-family: var(--bh-font);
}

.bh-drop-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .1);
    color: #9FD9D0;
    font-size: 13px;
    font-weight: 700;
}

.bh-drop .bh-drop-title {
    margin: 20px 0 0;
    color: #fff;
    font-family: var(--bh-font-head);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.bh-drop-text {
    margin: 18px 0 0;
    color: #C3DAD7;
    font-size: 16.5px;
    line-height: 1.6;
}

.bh-drop .bh-drop-btn {
    height: 54px;
    margin-top: 28px;
    padding: 0 26px;
    border-radius: 14px;
    background: var(--bh-yellow);
    box-shadow: 0 4px 0 var(--bh-yellow-shadow);
    color: var(--bh-dark);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition: background .15s;
}

.bh-drop .bh-drop-btn:hover {
    background: var(--bh-yellow-hover);
    color: var(--bh-dark);
}

.bh-drop-img {
    height: 340px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}

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

@media (max-width: 1024px) {
    .bh-drop {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .bh-drop-img {
        height: 260px;
    }
}

@media (max-width: 760px) {
    .bh-drop {
        margin-top: 42px;
        padding: 22px;
    }

    .bh-drop .bh-drop-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .bh-drop .bh-drop-title br {
        display: none;
    }

    .bh-drop-img {
        height: 220px;
    }
}

@media (max-width: 520px) {
    .bh-drop {
        padding: 16px;
    }

    .bh-drop .bh-drop-title {
        font-size: 21px;
    }

    .bh-drop .bh-drop-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================================
   «СТАТИ КЛІЄНТОМ» (модуль HTML-контент, «Дві хвилини — і ви бачите свої ціни»)
   ============================================================ */

.bh-join {
    position: relative;
    margin: 66px 0 0;
    padding: 44px;
    border-radius: 24px;
    background: var(--bh-dark);
    color: #fff;
    overflow: hidden;
    font-family: var(--bh-font);
}

.bh-join::before {
    content: '';
    position: absolute;
    top: -90px;
    right: -90px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 206, 2, .14), transparent 66%);
    pointer-events: none;
}

.bh-join-grid {
    position: relative;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 48px;
    align-items: center;
}

.bh-join-badge {
    color: var(--bh-yellow);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bh-join .bh-join-title {
    margin: 14px 0 0;
    color: #fff;
    font-family: var(--bh-font-head);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.bh-join-text {
    margin: 16px 0 0;
    color: #A9B1BC;
    font-size: 15.5px;
    line-height: 1.6;
}

.bh-join .bh-join-btn {
    height: 50px;
    margin-top: 24px;
    padding: 0 24px;
    border-radius: 14px;
    background: var(--bh-yellow);
    box-shadow: 0 4px 0 var(--bh-yellow-shadow);
    color: var(--bh-dark);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15.5px;
    font-weight: 800;
    text-decoration: none;
}

.bh-join .bh-join-btn:hover {
    background: var(--bh-yellow-hover);
    color: var(--bh-dark);
}

.bh-join-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bh-join-step {
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 10px;
    align-items: start;
    transition: background .18s, border-color .18s;
}

.bh-join-step:hover {
    border-color: rgba(253, 206, 2, .35);
    background: rgba(253, 206, 2, .09);
}

.bh-join-num {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bh-yellow);
    color: var(--bh-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bh-font-head);
    font-size: 18px;
    font-weight: 700;
}

.bh-join-step-title {
    font-family: var(--bh-font-head);
    font-size: 18px;
    font-weight: 600;
}

.bh-join-step-time {
    margin-top: 4px;
    color: var(--bh-yellow);
    font-size: 12.5px;
    font-weight: 700;
}

.bh-join-step-text {
    grid-column: 1 / -1;
    color: #A9B1BC;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .bh-join-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 760px) {
    .bh-join {
        margin-top: 42px;
        padding: 22px;
    }

    .bh-join .bh-join-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .bh-join .bh-join-title br {
        display: none;
    }
}

@media (max-width: 520px) {
    .bh-join {
        padding: 16px;
    }

    .bh-join .bh-join-title {
        font-size: 21px;
    }

    .bh-join .bh-join-btn {
        width: 100%;
        justify-content: center;
    }

    .bh-join-step {
        padding: 16px;
        column-gap: 14px;
    }
}


/* ============================================================
   «ДОСТАВКА І ОПЛАТА» (модуль HTML-контент на головній, якір #delivery)
   ============================================================ */

.bh-delivery {
    margin: 66px 0 0;
    font-family: var(--bh-font);
    color: var(--bh-dark);
    scroll-margin-top: 100px;
}

.bh-delivery .bh-section-title {
    font-size: 36px;
}

.bh-delivery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.bh-delivery-card {
    position: relative;
    padding: 26px 26px 28px;
    border: 1px solid var(--bh-border);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}

.bh-delivery-card:hover {
    border-color: var(--bh-yellow);
    box-shadow: 0 10px 28px rgba(16, 24, 40, .07);
}

/* Жовте коло в правому верхньому куті */
.bh-delivery-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #FFFBE8;
}

.bh-delivery-card-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.bh-delivery-card-head svg {
    flex: none;
}

.bh-delivery-card-title {
    font-family: var(--bh-font-head);
    font-size: 19px;
    font-weight: 600;
}

.bh-delivery-sep {
    height: 1px;
    margin: 20px 0 18px;
    background: #EEF1F6;
}

.bh-delivery-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
    color: #333A45;
    font-size: 14.5px;
    line-height: 1.45;
}

.bh-delivery-list li {
    display: flex;
    gap: 10px;
}

.bh-delivery-list svg {
    flex: none;
    margin-top: 3px;
}

/* Недоступний пункт — сірий, з хрестиком */
.bh-delivery-list .bh-delivery-off {
    color: #6B7280;
}

@media (max-width: 760px) {
    .bh-delivery {
        margin-top: 42px;
    }

    .bh-delivery .bh-section-title {
        font-size: 24px;
    }

    .bh-delivery-card {
        padding: 22px;
    }
}

@media (max-width: 560px) {
    .bh-delivery-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .bh-delivery .bh-section-title {
        font-size: 21px;
    }
}

/* ============================================================
   «FAQ» (модуль bh_faq, якір #faq)
   ============================================================ */

.bh-faq {
    margin: 66px 0 0;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 48px;
    align-items: start;
    font-family: var(--bh-font);
    color: var(--bh-dark);
    scroll-margin-top: 100px;
}

.bh-faq .bh-section-title {
    font-size: 36px;
}

.bh-faq-subtitle {
    margin: 18px 0 0;
    color: #6B7280;
    font-size: 15.5px;
    line-height: 1.6;
}

.bh-faq-messengers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.bh-faq .bh-faq-msg {
    height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s;
}

.bh-faq .bh-faq-msg:hover {
    color: #fff;
    opacity: .9;
}

.bh-faq-msg-tg {
    background: #2AABEE;
}

.bh-faq-msg-viber {
    background: #7360F2;
}

.bh-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bh-faq-item {
    border: 1px solid var(--bh-border);
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s;
}

.bh-faq-item:hover {
    border-color: #C9D2DE;
}

.bh-faq .bh-faq-q {
    width: 100%;
    padding: 20px 24px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--bh-dark);
    font-family: var(--bh-font);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

/* Плюс / мінус у жовтому квадраті */
.bh-faq-sign {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #FFF6D0;
}

.bh-faq-sign::before,
.bh-faq-sign::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2.4px;
    border-radius: 2px;
    background: var(--bh-dark);
    transform: translate(-50%, -50%);
    transition: transform .2s;
}

.bh-faq-sign::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.bh-faq-open .bh-faq-sign::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.bh-faq-a {
    display: none;
    max-width: 640px;
    padding: 0 24px 20px;
    margin-top: -6px;
    color: #4B5361;
    font-size: 15px;
    line-height: 1.6;
}

.bh-faq-open .bh-faq-a {
    display: block;
}

@media (max-width: 1024px) {
    .bh-faq {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 760px) {
    .bh-faq {
        margin-top: 42px;
    }

    .bh-faq .bh-section-title {
        font-size: 24px;
    }

    .bh-faq .bh-faq-q {
        padding: 16px 18px;
        font-size: 15px;
    }

    .bh-faq-a {
        padding: 0 18px 16px;
        font-size: 14.5px;
    }
}

@media (max-width: 520px) {
    .bh-faq .bh-section-title {
        font-size: 21px;
    }
}

/* ============================================================
   «ФОРМА ЗВ'ЯЗКУ» (модуль bh_contact_form, якір #form)
   ============================================================ */

.bh-lead {
    margin: 66px 0 76px;
    padding: 48px;
    border-radius: 24px;
    background: var(--bh-yellow);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    font-family: var(--bh-font);
    color: var(--bh-dark);
    scroll-margin-top: 100px;
}

.bh-lead .bh-lead-title {
    margin: 0;
    color: var(--bh-dark);
    font-family: var(--bh-font-head);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.bh-lead-text {
    margin: 18px 0 0;
    color: #3A3520;
    font-size: 16.5px;
    line-height: 1.6;
}

.bh-lead-contacts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(22, 24, 28, .18);
}

.bh-lead .bh-lead-phone {
    color: var(--bh-dark);
    font-family: var(--bh-font-head);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
    white-space: nowrap;
}

.bh-lead .bh-lead-phone:hover {
    color: var(--bh-dark);
}

.bh-lead-messengers {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bh-lead-msg {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bh-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.bh-lead-msg:hover {
    background: #2C3037;
}

/* Картка з формою */
.bh-lead-card {
    padding: 30px;
    border-radius: 18px;
    background: #fff;
}

.bh-lead-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bh-lead-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.bh-lead-label {
    color: #4B5361;
    font-size: 13px;
    font-weight: 700;
}

.bh-lead-field input,
.bh-lead-field select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--bh-border);
    border-radius: 11px;
    outline: 0;
    background: #fff;
    color: var(--bh-dark);
    font-family: var(--bh-font);
    font-size: 15px;
    transition: border-color .15s;
}

.bh-lead-field select {
    padding: 0 12px;
}

.bh-lead-field input:focus,
.bh-lead-field select:focus {
    border-color: var(--bh-yellow);
}

.bh-lead-field input::placeholder {
    color: #9CA3AF;
}

.bh-lead-invalid input,
.bh-lead-invalid select {
    border-color: #E5484D;
}

.bh-lead-error {
    color: #E5484D;
    font-size: 12.5px;
}

.bh-lead-error:empty {
    display: none;
}

/* Поле-пастка для ботів */
.bh-lead-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.bh-lead .bh-lead-submit {
    height: 54px;
    margin-top: 4px;
    border: 0;
    border-radius: 14px;
    background: var(--bh-dark);
    color: var(--bh-yellow);
    font-family: var(--bh-font);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}

.bh-lead .bh-lead-submit:hover {
    background: #2C3037;
}

.bh-lead .bh-lead-submit:disabled {
    opacity: .6;
    cursor: wait;
}

.bh-lead-consent {
    color: #8A93A0;
    font-size: 12.5px;
    line-height: 1.45;
}

.bh-lead-success {
    padding: 24px 4px;
    color: var(--bh-dark);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 1024px) {
    .bh-lead {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 760px) {
    .bh-lead {
        margin: 42px 0 56px;
        padding: 22px;
    }

    .bh-lead .bh-lead-title {
        font-size: 26px;
    }

    .bh-lead-card {
        padding: 20px;
    }
}

@media (max-width: 640px) {
    .bh-lead-contacts {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* Mobile header: keep the logo visible on every screen width. */
@media (max-width:499.98px) {
    .ds-header-left > span:has(> #logo),
    .ds-header-left > a:has(> #logo) {display:block !important;flex:0 0 auto;}
    .ds-header #logo {display:block !important;width:auto;height:28px;max-width:105px;object-fit:contain;}
    .ds-header-left {gap:8px;}
    .ds-header .ds-mobile-burger {margin-right:0 !important;}
    .ds-header > .container-xl > .d-flex {flex-wrap:wrap;gap:8px;padding-top:8px;padding-bottom:8px;}
    .ds-header-right {gap:6px;min-width:0;}
}
@media (max-width:359.98px) {
    .ds-header > .container-xl {padding-left:12px;padding-right:12px;}
    .ds-header-right {flex-basis:100%;padding-right:0 !important;}
}

/* ============================================================
   СТОРІНКА КАТЕГОРІЇ: хлібні крихти й заголовок (.bh-cat-head у product/category.twig)
   ============================================================ */

.bh-cat-head {
    margin-bottom: 20px;
    font-family: var(--bh-font);
}

/* Крихти: сірий текст, роздільник «/», поточна сторінка темна */
.bh-cat-head .ds-breadcrumb,
.bh-cat-head .ds-breadcrumb.mb-3 {
    margin: 0 !important;
    padding: 4px 0 10px !important;
    gap: 9px;
    color: #6C757D;
    font-size: 13.5px;
    line-height: 1.3;
}

.bh-cat-head .ds-breadcrumb-item,
.bh-cat-head .ds-breadcrumb-item + .ds-breadcrumb-item {
    padding-left: 0;
}

.bh-cat-head .ds-breadcrumb-item + .ds-breadcrumb-item::before {
    content: '/';
    width: auto;
    height: auto;
    margin-right: 9px;
    padding: 0;
    background: none;
    color: #6C757D;
    float: none;
}

.bh-cat-head .ds-breadcrumb-item a {
    color: #6C757D;
    text-decoration: none;
    transition: color .15s;
}

.bh-cat-head .ds-breadcrumb-item a:hover {
    color: var(--bh-dark);
}

.bh-cat-head .ds-breadcrumb-item[aria-current="page"] {
    color: #212529;
}

/* Іконка «Головна» — по центру рядка */
.bh-cat-head .ds-breadcrumb-item:first-child {
    width: auto;
    height: auto;
}

.bh-cat-head .ds-breadcrumb-item:first-child > a {
    display: flex;
    align-items: center;
}

/* Заголовок категорії */
.bh-cat-head .ds-page-title {
    padding: 0 !important;
}

.bh-cat-head .ds-page-title h1 {
    margin: 0;
    color: var(--bh-dark);
    font-family: var(--bh-font-head);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
}

@media (max-width: 640px) {
    .bh-cat-head .ds-page-title h1 {
        font-size: 26px;
    }
}

/* ============================================================
   СТОРІНКА КАТЕГОРІЇ: панель над товарами (пошук + сортування + кількість)
   .ds-category-sort у product/category.twig, пошук — common/search.twig ({{ search }})
   ============================================================ */

.ds-category-sort.category-header__wrapper {
    margin-top: 0;
    padding: 14px 18px !important;
    border: 0;
    border-radius: 12px;
    background: #212529;
    box-shadow: none;
    align-items: center;
    gap: 16px;
    font-family: var(--bh-font);
}

/* Пошук: білий «інпут» на всю доступну ширину.
   До 768px тема робить форму fixed і виносить за екран, а її скрипт ставить висоту шапки — повертаємо в потік */
.ds-category-sort .ds-header-search {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 5;
    flex: 1 1 auto;
    min-width: 0;
    height: 44px !important;
    border-radius: 9px;
    background: #fff;
    display: flex;
    align-items: center;
    transform: none !important;
}

.ds-category-sort .ds-header-search .form-control {
    height: 100%;
    padding: 0 14px 0 40px !important;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: #212529;
    font-family: var(--bh-font);
    font-size: 14px;
}

.ds-category-sort .ds-header-search .form-control:focus {
    border: 0;
    background: transparent;
}

.ds-category-sort .ds-header-search .form-control::placeholder {
    color: #8A93A0;
    font-size: 14px;
}

.ds-category-sort .ds-header-search-button {
    left: 14px;
    right: auto;
    top: 50%;
    width: 16px;
    height: 16px;
    padding: 0;
    transform: translateY(-50%);
}

.ds-category-sort .ds-header-search-button svg {
    width: 16px;
    height: 16px;
}

.ds-category-sort .ds-header-search-button svg path {
    stroke: #6C757D;
}

/* Хрестик закриття мобільного пошуку теми тут не потрібен */
.ds-category-sort .ds-header-search-close {
    display: none !important;
}

/* Сортування й кількість */
.ds-category-sort .ds-category-sort-limit {
    flex: none;
    gap: 10px;
    justify-content: flex-end;
}

.ds-category-sort .ds-category-sort-title {
    flex: none !important;
    padding-right: 0;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    white-space: nowrap;
}

.ds-category-sort .form-select {
    height: 44px;
    margin: 0 !important;
    padding: 0 34px 0 12px;
    border: 0;
    border-radius: 9px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23212529' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    box-shadow: none;
    color: #212529;
    font-family: var(--bh-font);
    font-size: 14px;
    line-height: normal;
    cursor: pointer;
}

.ds-category-sort .ds-category-limit-select {
    width: auto;
    max-width: none;
    min-width: 76px;
}

/* До 900px (як у макеті): прозора панель, сортування на всю ширину, під ним пошук; кількість ховаємо */
@media (max-width: 900px) {
    .ds-category-sort.category-header__wrapper {
        padding: 0 !important;
        background: transparent;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ds-category-sort .ds-category-sort-limit {
        order: 1;
        flex: 1 1 100%;
        min-width: 0;
    }

    .ds-category-sort .ds-category-sort-title,
    .ds-category-sort .ds-category-limit-select {
        display: none !important;
    }

    .ds-category-sort .ds-category-sort-select {
        width: 100%;
        max-width: none;
        min-width: 0;
        text-overflow: ellipsis;
    }

    .ds-category-sort .ds-header-search {
        order: 2;
        flex: 1 1 100%;
    }

    .ds-category-sort .ds-header-search,
    .ds-category-sort .form-select {
        height: 48px !important;
        border: 1px solid var(--bh-border);
    }
}

/* ============================================================
   СТОРІНКА КАТЕГОРІЇ: ТАБЛИЦЯ ТОВАРІВ (.bh-plist у product/category.twig)
   Сітка колонок з макета: фото / назва / наявність / к-сть / ціна / роздріб / обране / кошик.
   До 900px рядок перебудовується в картку з 3 рядків тією ж розміткою.
   ============================================================ */

.bh-plist-head,
.bh-plist > .bh-prow {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 106px 104px 148px 84px 34px 36px;
    grid-template-areas: "img name stock qty price retail fav cart";
    align-items: center;
    gap: 12px;
}

.bh-pcol-img { grid-area: img; }
.bh-pcol-name { grid-area: name; }
.bh-pcol-stock { grid-area: stock; }
.bh-pcol-qty { grid-area: qty; }
.bh-pcol-price { grid-area: price; }
.bh-pcol-retail { grid-area: retail; }
.bh-pcol-fav { grid-area: fav; }
.bh-pcol-cart { grid-area: cart; }

/* Шапка таблиці */
.bh-plist-head {
    padding: 12px 16px 10px;
    color: #6C757D;
    font-family: var(--bh-font);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* Список і рядок */
.bh-plist {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    font-family: var(--bh-font);
    color: #212529;
}

.bh-plist > .bh-prow {
    position: relative;
    width: auto;
    max-width: none;
    flex: none;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    transition: background .15s;
}

.bh-plist > .bh-prow:hover {
    background: #FCFCFA;
}

/* Лічильник і кошик: контейнер .ds-module-cart «прозорий» для сітки */
.bh-prow .bh-prow-buy {
    display: contents;
}

/* Фото */
.bh-prow-img {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.bh-prow-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bh-prow-img.ds-no-stock img {
    opacity: .5;
}

.bh-prow-stickers {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.bh-prow-stickers .ds-module-sticker {
    margin: 0;
    padding: 2px 0;
    border-radius: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

/* Назва */
.bh-prow-name {
    min-width: 0;
    padding-right: 10px;
}

.bh-prow-name .ds-module-title {
    color: #212529;
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
}

.bh-prow-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* Наявність */
.bh-stock {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.bh-stock-in { background: #EFF9F2; color: #177245; }
.bh-stock-low { background: #FFF6E6; color: #B26A00; }
.bh-stock-out { background: #FBEDEF; color: #C7263D; }

/* Кількість */
.bh-plist .bh-qty {
    width: auto;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.bh-plist .bh-qty .ds-module-quantity-btn {
    flex: none;
    width: 28px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6C757D;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.bh-plist .bh-qty .ds-module-quantity-btn:hover {
    background: #F2F2F2;
}

.bh-plist .bh-qty .form-control {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: #212529;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.bh-plist .bh-qty-out {
    justify-content: center;
    border-style: dashed;
    border-color: #E0E4E9;
    background: #F7F8F9;
    color: #A8AEB6;
    font-size: 11.5px;
    font-weight: 600;
}

/* Ціна: для гостя «Увійти», для клієнта ціну групи вставляє Display Group Prices */
.bh-prow-price {
    min-width: 0;
    padding-right: 10px;
    font-family: var(--bh-font-head);
    font-size: 17px;
    font-weight: 600;
}

.bh-plist .bh-login-price {
    color: #212529;
    font-family: var(--bh-font-head);
    font-size: 17px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--bh-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.bh-plist .bh-login-price:hover {
    color: #8A7300;
}

/* Роздріб / МРЦ */
.bh-prow-retail {
    white-space: nowrap;
}

.bh-prow-retail .ds-price-new {
    color: #212529;
    font-size: 15px;
    font-weight: 500;
}

.bh-rlabel {
    display: none;
}

/* Обране */
.bh-plist .bh-fav-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #212529;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}

.bh-plist .bh-fav-btn:hover {
    background: #FBEDEF;
}

.bh-plist .bh-fav-btn svg path {
    fill: none;
}

/* У обраному (клас added ставить setAddedCompareWishlist() теми) */
.bh-plist .bh-fav-btn.added {
    color: #C7263D;
}

.bh-plist .bh-fav-btn.added svg path {
    fill: #C7263D;
}

/* Кошик */
.bh-plist .bh-cart-btn {
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #212529;
    color: var(--bh-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.bh-plist .bh-cart-btn svg path,
.bh-plist .bh-cart-btn svg circle {
    fill: none;
    stroke: currentColor;
}

.bh-plist .bh-cart-btn:hover:not(.bh-cart-btn-off) {
    background: var(--bh-yellow);
    color: #212529;
}

.bh-plist .bh-cart-btn:active:not(.bh-cart-btn-off) {
    background: #E0B802;
}

/* Уже в кошику (клас added ставить setCartBtnAdded() теми) */
.bh-plist .bh-cart-btn.added,
.bh-plist .bh-cart-btn.added:hover {
    background: var(--bh-yellow);
    border-color: var(--bh-yellow);
    color: #212529;
}

/* Тема (.ds-module-cart-btn.added svg path { fill: white }) вантажиться пізніше — іконка має бути чорною лінією */
.bh-plist .bh-cart-btn.added svg path,
.bh-plist .bh-cart-btn.added svg circle,
.bh-plist .bh-cart-btn.added:hover svg path,
.bh-plist .bh-cart-btn.added:hover svg circle {
    fill: none;
    stroke: #212529;
}

.bh-plist .bh-cart-btn-notify {
    background: #FFF6D0;
    color: #8A7300;
}

.bh-plist .bh-cart-btn-off {
    background: #F0F1F3;
    color: #B6BBC2;
    cursor: not-allowed;
}

/* Таблиця товарів: нейтралізуємо старі правила теми для лічильника й ціни.
   custom.css: .ds-module-quantity { max-width: 13%; min-width: 13%; padding: 4px 0 } — стискало лічильник до смужки;
   main.min.css: .ds-module-quantity .form-control { max-width: 2.5rem };
   responsive.css (до 500px): .ds-module-quantity { min/max-width: 100% !important; background: unset !important },
                              .login-price, .price-auth-user { display: none !important } — ховало ціну й «Увійти» */
.bh-plist .bh-qty {
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    background: #FAFAFA !important;
    text-align: left;
}

.bh-plist .bh-qty-out {
    background: #F7F8F9 !important;
}

.bh-plist .bh-qty .form-control {
    max-width: none;
    line-height: normal;
}

.bh-plist .bh-prow-price.price-auth-user {
    display: block !important;
}

/* Тема додає рядкам .product-price, і custom.css (.product-price .ds-category-item-rating) стискає блок ціни
   до width/min-width/max-width: 15% — знімаємо, щоб блок займав свою колонку сітки */
.bh-plist .bh-prow-price.ds-category-item-rating.price-auth-user {
    width: auto;
    min-width: unset;
    max-width: unset;
}

.bh-plist a.bh-login-price.login-price {
    display: inline !important;
}

/* ---------- До 900px: картка з 3 рядків ---------- */
@media (max-width: 900px) {
    .bh-plist-head {
        display: none;
    }

    .bh-plist {
        gap: 0;
        margin-top: 10px;
    }

    .bh-plist > .bh-prow {
        grid-template-columns: 76px minmax(0, 1fr) auto auto;
        grid-template-areas:
            "img name name fav"
            "img retail retail retail"
            "img price qty cart";
        gap: 6px 10px;
        padding: 12px;
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: none;
    }

    .bh-prow-stock {
        display: none;
    }

    .bh-prow-img {
        width: 76px;
        height: 96px;
    }

    .bh-prow-name {
        align-self: end;
        padding-right: 0;
    }

    .bh-prow-name .ds-module-title {
        font-size: 15px;
        line-height: 1.3;
    }

    .bh-prow-fav {
        justify-self: end;
        align-self: start;
    }

    .bh-plist .bh-fav-btn {
        width: 30px;
        height: 30px;
    }

    .bh-prow-retail {
        white-space: normal;
        font-size: 12px;
    }

    .bh-rlabel {
        display: inline;
        color: #6C757D;
        font-size: 12px;
        font-weight: 500;
    }

    .bh-prow-retail .ds-price-new {
        font-size: 12px;
        font-weight: 500;
    }

    .bh-prow-price {
        padding-right: 0;
        font-size: 14px;
        font-weight: 700;
    }

    .bh-plist .bh-login-price {
        font-size: 14px;
        font-weight: 700;
    }

    .bh-plist .bh-qty {
        width: 104px;
        height: 38px;
    }

    .bh-plist .bh-cart-btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 560px) {
    .bh-plist > .bh-prow {
        grid-template-columns: 64px minmax(0, 1fr) auto auto;
        gap: 5px 7px;
    }

    .bh-prow-img {
        width: 64px;
        height: 82px;
    }

    .bh-prow-name .ds-module-title {
        font-size: 14px;
    }

    .bh-plist .bh-qty {
        width: 84px;
        height: 34px;
        justify-self: end;
    }

    .bh-plist .bh-cart-btn {
        width: 34px;
        height: 34px;
        justify-self: end;
    }
}

/* ============================================================
   СТОРІНКА КАТЕГОРІЇ: ПАГІНАЦІЯ (.bh-pagination > ul.pagination з system/library/pagination.php)
   ============================================================ */

.bh-pagination {
    margin-top: 22px;
    margin-bottom: 40px;
    padding-top: 20px;
    border-top: 1px solid #EBEBEB;
    font-family: var(--bh-font);
}

.bh-pagination .pagination {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.bh-pagination .pagination li {
    margin: 0;
}

.bh-pagination .pagination li > a,
.bh-pagination .pagination li > span {
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border: 1px solid #EBEBEB;
    border-radius: 9px;
    background: #fff;
    color: #212529;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.bh-pagination .pagination li > a:hover {
    border-color: #212529;
    color: #212529;
}

/* Поточна сторінка */
.bh-pagination .pagination li.active > span {
    border-color: #212529;
    background: #212529;
    color: #fff;
}

@media (max-width: 560px) {
    .bh-pagination .pagination {
        gap: 4px;
    }

    .bh-pagination .pagination li > a,
    .bh-pagination .pagination li > span {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }
}

/* ============================================================
   СТОРІНКА КАТЕГОРІЇ: «ПОКАЗАТИ ЩЕ» (.bh-more у product/category.twig)
   ============================================================ */

.bh-more {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: var(--bh-font);
}

.bh-more-count {
    color: #6C757D;
    font-size: 13.5px;
}

.bh-more-bar {
    width: 300px;
    max-width: 100%;
    height: 4px;
    border-radius: 4px;
    background: #EBEBEB;
    overflow: hidden;
}

.bh-more-bar-fill {
    height: 100%;
    background: var(--bh-yellow);
    transition: width .3s ease;
}

.bh-more .ds-module-showmore {
    margin: 0;
    padding: 0;
}

.bh-more .bh-more-btn {
    height: 48px;
    padding: 0 28px;
    border: 1px solid #212529;
    border-radius: 11px;
    background: #fff;
    color: #212529;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--bh-font);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
}

.bh-more .bh-more-btn:hover {
    border-color: var(--bh-yellow);
    background: var(--bh-yellow);
}

.bh-more .bh-more-btn svg path {
    fill: none;
    stroke: currentColor;
}

/* Під час завантаження (клас is-loading ставить скрипт категорії) */
.bh-more .bh-more-btn.is-loading,
.bh-more .bh-more-btn:disabled {
    opacity: .6;
    cursor: wait;
}

.bh-more .bh-more-btn.is-loading svg {
    animation: bhMoreBounce .6s ease-in-out infinite alternate;
}

@keyframes bhMoreBounce {
    to { transform: translateY(3px); }
}

/* ============================================================
   ФІЛЬТР (OCFilter): кількість товарів біля пункту
   custom.css ховав її (.ocf-value-count { display: none }); OCFilter малює «пігулку» — у макеті це сірий текст праворуч
   ============================================================ */

.ocf-value .ocf-value-count,
.ocf-container.ocf-theme-light .ocf-value .ocf-value-count {
    display: inline-block;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #6C757D;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

.ocf-value .ocf-value-count:empty {
    display: none;
}

.ocf-disabled .ocf-value .ocf-value-count,
.ocf-value.ocf-disabled .ocf-value-count {
    color: #B6BBC2;
}

/* ============================================================
   ФІЛЬТР (OCFilter): вигляд з макету «Каталог v4»
   Лише CSS: розмітку й JS-хуки OCFilter (data-ocf, data-filter-key, data-value-id, id ocf-*) не чіпаємо.
   Префікс .ocf-container.ocf-theme-light — щоб перекрити тему OCFilter (окремий ocf.cache.*.css) і custom.css
   ============================================================ */

.ocf-container.ocf-theme-light {
    --bh-ocf-muted: #6C757D;
    --bh-ocf-line: #F2F2F2;
    font-family: var(--bh-font);
}

/* Картка фільтра */
.ocf-container.ocf-theme-light .ocf-content {
    padding: 22px;
    border: 1px solid var(--bh-ocf-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .05);
}

.ocf-container.ocf-theme-light .ocf-header {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    background: none;
    color: #212529;
    font-family: var(--bh-font-head);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

/* «Ви вибрали» */
.ocf-container.ocf-theme-light .ocf-selected-card {
    margin: 0 0 20px;
    padding: 14px;
    border: 1px solid var(--bh-ocf-line);
    border-radius: 12px;
    background: #FAFAFA;
    box-shadow: none;
}

.ocf-container.ocf-theme-light .ocf-selected-header {
    margin: 0 0 11px;
    padding: 0;
    color: #212529;
    font-family: var(--bh-font-head);
    font-size: 14px;
    font-weight: 700;
}

.ocf-container.ocf-theme-light .ocf-selected-filter {
    margin: 0 0 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.ocf-container.ocf-theme-light .ocf-selected-filter-name {
    margin-right: 2px;
    color: #9AA1AA;
    font-size: 12px;
    font-weight: 600;
}

/* Вибране значення — «чип» з червоним хрестиком */
.ocf-container.ocf-theme-light .ocf-selected-discard {
    margin: 0;
    padding: 6px 9px 6px 10px;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    background: #fff;
    color: #16181C;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--bh-font-head);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s;
}

.ocf-container.ocf-theme-light .ocf-selected-discard:hover {
    border-color: #C7263D;
}

.ocf-container.ocf-theme-light .ocf-selected-discard::after {
    content: '';
    flex: none;
    width: 11px;
    height: 11px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23C7263D' stroke-width='2' stroke-linecap='round'><path d='M2 2l8 8M10 2l-8 8'/></svg>") center / contain no-repeat;
}

/* Кнопки під вибраним: «Скасувати» (червоний текст) і «Уточнити» (жовта) */
.ocf-container.ocf-theme-light .ocf-selected-card .ocf-between {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ocf-container.ocf-theme-light .ocf-selected-card .ocf-btn {
    margin: 0;
    font-family: var(--bh-font-head);
    font-size: 13px;
    text-decoration: none;
}

.ocf-container.ocf-theme-light .ocf-selected-card .ocf-btn.ocf-text-danger {
    padding: 0;
    border: 0;
    background: none;
    color: #C7263D;
    font-weight: 600;
}

.ocf-container.ocf-theme-light .ocf-selected-card .ocf-btn.ocf-text-danger:hover {
    color: #9E1B2F;
}

.ocf-container.ocf-theme-light .ocf-selected-card .ocf-btn:not(.ocf-text-danger) {
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: var(--bh-yellow);
    color: #16181C;
    font-weight: 700;
}

.ocf-container.ocf-theme-light .ocf-selected-card .ocf-btn:not(.ocf-text-danger):hover {
    background: #E9BE02;
}

/* Групи фільтра, розділені лінією */
.ocf-container.ocf-theme-light .ocf-filter {
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--bh-ocf-line);
}

.ocf-container.ocf-theme-light .ocf-filter + .ocf-filter,
.ocf-container.ocf-theme-light .ocf-selected-card + .ocf-filter {
    margin-top: 20px;
}

.ocf-container.ocf-theme-light .ocf-filter-header {
    margin: 0 0 14px;
    padding: 0;
    background: none;
}

.ocf-container.ocf-theme-light .ocf-filter-name {
    color: #212529;
    font-size: 14px;
    font-weight: 700;
}

/* Значення: чекбокс + назва ліворуч, кількість праворуч */
.ocf-container.ocf-theme-light .ocf-value {
    width: 100%;
    margin: 0 0 13px;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
}

.ocf-container.ocf-theme-light .ocf-value:last-child {
    margin-bottom: 0;
}

.ocf-container.ocf-theme-light .ocf-value-name {
    color: var(--bh-ocf-muted);
    font-size: 14px;
    font-weight: 400;
}

.ocf-container.ocf-theme-light .ocf-value:hover .ocf-value-name {
    color: #212529;
}

.ocf-container.ocf-theme-light .ocf-value.ocf-selected .ocf-value-name {
    color: #212529;
    font-weight: 700;
}

/* Чекбокс: сіра рамка, вибраний — темний (жовта галочка — з custom.css) */
.ocf-container.ocf-theme-light .ocf-value-input-checkbox::before {
    border: 1.5px solid #C9CED4;
    border-radius: 4px;
    background-color: #fff;
}

.ocf-container.ocf-theme-light .ocf-value:hover .ocf-value-input-checkbox::before {
    border-color: #212529;
}

.ocf-container.ocf-theme-light .ocf-selected .ocf-value-input-checkbox::before {
    border-color: #212529;
    background-color: #212529;
}

/* Неактивні значення (0 товарів) */
.ocf-container.ocf-theme-light .ocf-value.ocf-disabled .ocf-value-name {
    color: #B6BBC2;
}

/* Ціна: поля «від — до» */
.ocf-container.ocf-theme-light .ocf-form-control {
    height: 38px;
    padding: 0 11px;
    border: 1px solid #EBEBEB;
    border-radius: 9px;
    background: #FAFAFA;
    box-shadow: none;
    color: #212529;
    font-family: var(--bh-font);
    font-size: 13.5px;
}

.ocf-container.ocf-theme-light .ocf-form-control:focus {
    border-color: #212529;
    background: #fff;
}

.ocf-container.ocf-theme-light .ocf-input-group-addon {
    border: 0;
    background: none;
    color: var(--bh-ocf-muted);
}

/* ============================================================
   ФУТЕР (common/footer.twig, .bh-footer)
   custom.css (.ds-footer) вантажиться вдруге після redesign.css — селектори з префіксом .ds-footer.bh-footer
   ============================================================ */

.ds-footer.bh-footer {
    margin: 0;
    padding: 0;
    background: #212529;
    color: #A9B1BC;
    font-family: var(--bh-font);
}

.ds-footer.bh-footer a {
    text-decoration: none;
    transition: color .15s, opacity .15s;
}

.bh-footer .bh-footer-main {
    max-width: var(--bh-container);
    margin: 0 auto;
    padding: 50px 32px 28px;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1fr;
    gap: 40px;
}

/* Колонка «про компанію» */
.bh-footer .bh-footer-logo {
    display: inline-block;
}

.bh-footer .bh-footer-logo img {
    display: block;
    width: auto;
    height: 38px;
}

.bh-footer .bh-footer-text {
    max-width: 320px;
    margin: 18px 0 0;
    color: #A9B1BC;
    font-size: 14px;
    line-height: 1.6;
}

.ds-footer.bh-footer .bh-footer-phone {
    display: block;
    margin-top: 18px;
    color: #fff;
    font-family: var(--bh-font-head);
    font-size: 21px;
    font-weight: 600;
}

.ds-footer.bh-footer .bh-footer-phone:hover {
    color: var(--bh-yellow);
}

.ds-footer.bh-footer .bh-footer-mail {
    display: block;
    margin-top: 6px;
    color: #A9B1BC;
    font-size: 14px;
}

.ds-footer.bh-footer .bh-footer-mail:hover {
    color: #fff;
}

.bh-footer .bh-footer-place {
    margin-top: 4px;
    font-size: 14px;
}

.bh-footer .bh-footer-messengers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.ds-footer.bh-footer .bh-footer-msg {
    height: 40px;
    padding: 0 15px;
    border-radius: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.ds-footer.bh-footer .bh-footer-msg:hover {
    color: #fff;
    opacity: .9;
}

.bh-footer .bh-footer-msg-tg {
    background: #2AABEE;
}

.bh-footer .bh-footer-msg-viber {
    background: #7360F2;
}

/* Колонки меню */
.bh-footer .bh-footer-col-title {
    color: #fff;
    font-family: var(--bh-font-head);
    font-size: 14px;
    font-weight: 600;
}

.bh-footer .bh-footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    font-size: 14px;
}

.ds-footer.bh-footer .bh-footer-links a {
    color: #A9B1BC;
}

.ds-footer.bh-footer .bh-footer-links a:hover {
    color: #fff;
}

/* Нижній рядок */
.bh-footer .bh-footer-bottom {
    max-width: var(--bh-container);
    margin: 0 auto;
    padding: 18px 32px 30px;
    border-top: 1px solid #333A41;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.ds-footer.bh-footer .bh-footer-dev {
    color: #A9B1BC;
    text-decoration: underline;
}

.ds-footer.bh-footer .bh-footer-dev:hover {
    color: #fff;
}

@media (max-width: 760px) {
    .bh-footer .bh-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    .bh-footer .bh-footer-about {
        grid-column: 1 / -1;
    }

    .bh-footer .bh-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .bh-footer .bh-footer-main,
    .bh-footer .bh-footer-bottom {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 520px) {
    .bh-footer .bh-footer-main {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   НИЖНЯ МОБІЛЬНА ПАНЕЛЬ ТЕМИ (.ds-mobile-bottom-nav) — прихована
   Клас d-flex дає display: flex !important, тому теж !important.
   Тема резервує під панель body { padding-bottom: 69px } — прибираємо, щоб унизу не лишалось порожнечі
   ============================================================ */

.ds-mobile-bottom-nav {
    display: none !important;
}

@media (max-width: 991.98px) {
    html body {
        padding-bottom: 0;
    }
}

/* ============================================================
   ТАБЛИЦЯ ТОВАРІВ на сторінках бренду й пошуку (product/bh_product_table.twig)
   Ціна клієнта — з product.price / product.special (у категорії її малює Display Group Prices)
   ============================================================ */

.bh-prow-price .bh-price-cur {
    color: #212529;
    font-family: var(--bh-font-head);
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
}

.bh-prow-price .bh-price-old {
    display: block;
    color: #9CA3AF;
    font-family: var(--bh-font);
    font-size: 12.5px;
    font-weight: 400;
    text-decoration: line-through;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .bh-prow-price .bh-price-cur {
        font-size: 14px;
        font-weight: 700;
    }
}

/* «Показати ще» на бренді й пошуку: під час завантаження тема ставить клас oct-animated */
.bh-more .bh-more-btn.oct-animated {
    opacity: .6;
    cursor: wait;
}

.bh-more .bh-more-btn.oct-animated svg {
    animation: bhMoreBounce .6s ease-in-out infinite alternate;
}

/* Step 02: existing homepage offer as a vertical information-page sidebar card. */
#information-information #column-right {display:block !important;}
#information-information #column-right .bh-offer {margin:0; width:100%; box-sizing:border-box;}
#information-information #column-right .bh-offer-grid {grid-template-columns:minmax(0,1fr); gap:24px;}
#information-information #column-right .bh-offer-txt {padding:28px 24px 8px; min-width:0;}
#information-information #column-right .bh-offer-badge {white-space:normal; line-height:1.45;}
#information-information #column-right .bh-offer .bh-offer-title {font-size:24px; line-height:1.2; overflow-wrap:break-word;}
#information-information #column-right .bh-offer-text {max-width:none; font-size:15.5px; line-height:1.55;}
#information-information #column-right .bh-offer-btns {flex-direction:column; align-items:stretch;}
#information-information #column-right .bh-offer .bh-offer-btn {
    width:100%; min-width:0; box-sizing:border-box; min-height:48px; height:auto;
    padding:10px 16px; white-space:normal; justify-content:center; line-height:1.4;
}
#information-information #column-right .bh-offer-note {align-items:flex-start; line-height:1.5;}
#information-information #column-right .bh-offer-img {min-height:220px; margin:0 24px 24px;}
@media(max-width:1199.98px) {
    #information-information #column-right {flex:0 0 100%; width:100%; max-width:100%;}
    #information-information #column-right .bh-offer {max-width:420px; margin:24px auto 0;}
}

/* Compact sidebar card; preserve the complete source image. Replaces full-height spacing. */
#information-information #column-right .bh-offer-txt {display:block; padding:24px 24px 8px;}
#information-information #column-right .bh-offer-grid {display:grid; grid-template-rows:auto auto; gap:24px;}
#information-information #column-right .bh-offer .bh-offer-title {margin:16px 0 0;}
#information-information #column-right .bh-offer-text {margin:16px 0 0;}
#information-information #column-right .bh-offer-btns {margin:24px 0 0;}
#information-information #column-right .bh-offer-note {margin:24px 0 0;}
#information-information #column-right .bh-offer-img {
    height:auto; min-height:0; margin:0 24px 24px; background:transparent;
}
#information-information #column-right .bh-offer-img img {
    position:static; inset:auto; display:block; width:100%; height:auto;
    max-width:100%; object-fit:contain;
}
@media(min-width:1200px) {
    #information-information main > .row.g-3 {align-items:stretch;}
    #information-information #column-right {display:block !important; align-self:stretch;}
    #information-information #column-right > .bh-offer {position:sticky; top:100px; height:auto;}
}

/* Step 09: readable pagination hover, keyboard focus and selected page. */
body .pagination li > a:hover,
body .pagination li > a:focus-visible,
body .pagination .page-link:hover,
body .pagination .page-link:focus-visible {
    background:#212529 !important; border-color:#212529 !important; color:#fff !important;
    text-decoration:none;
}
body .pagination li.active > a,
body .pagination li.active > span,
body .pagination .page-item.active .page-link {
    background:#212529 !important; border-color:#212529 !important; color:#fff !important;
}
body .pagination a:hover svg,
body .pagination a:focus-visible svg {color:inherit;}
body .pagination a:hover svg path[stroke],
body .pagination a:focus-visible svg path[stroke] {stroke:currentColor;}
body .pagination a:focus-visible {outline:2px solid #fdce02; outline-offset:3px;}

/* Step 12: FAQ answers animate to their natural height. */
.bh-faq .bh-faq-a.bh-faq-animated {
    display:grid;grid-template-rows:0fr;overflow:hidden;padding:0 24px;margin-top:0;
    opacity:0;transition:grid-template-rows .3s ease,opacity .25s ease;
}
.bh-faq .bh-faq-open .bh-faq-a.bh-faq-animated {grid-template-rows:1fr;opacity:1;}
.bh-faq-a-inner {min-height:0;overflow:hidden;}
.bh-faq-a-content {padding-bottom:20px;}
@media(max-width:760px){.bh-faq .bh-faq-a.bh-faq-animated{padding-left:18px;padding-right:18px;}}
@media(prefers-reduced-motion:reduce){.bh-faq .bh-faq-a.bh-faq-animated,.bh-faq-sign::before,.bh-faq-sign::after{transition:none;}}

/* Step 16: align desktop logo with the content container (32px -> 12px gutters). */
@media(min-width:1200px) {
    .ds-header > .container-xl {padding-left:12px;padding-right:12px;}
    .bh-topbar-inner {padding-left:12px;padding-right:12px;}
    .ds-header-left > a:has(> #logo),
    .ds-header-left > span:has(> #logo) {margin-left:0;padding-left:0;}
    .ds-header #logo {margin-left:0;}
}

/* Keep the header catalog button; remove its duplicate above the left filter. */
#product-category #column-left > .colum-left-catalog-button,
#product-search #column-left > .colum-left-catalog-button {display:none !important;}

/* Step 19: align visible button edges, including the primary button's 4px shadow. */
.bh-offer .bh-offer-btns {align-items:flex-start;}
.bh-offer .bh-offer-btn {box-sizing:border-box;}
.bh-offer .bh-offer-btn-main {height:48px;}
.bh-offer .bh-offer-btn-ghost {height:52px;}
@media(max-width:640px){.bh-offer .bh-offer-btns{align-items:stretch;}}

/* Keep a visible space between the retail label and the amount. */
.bh-prow-retail .bh-rlabel {margin-inline-end:.3em;}

.ocf-selected-card [data-ocf="specify"] {
    display: none !important;
}

@media (max-width: 767.98px) {
    #common-home {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }
}

#account-wishlist {
    padding-bottom: 32px;
}
#octStockNotifier .modal-body-buttons .blue-link {
    color: #000 !important;
}

#octStockNotifier .modal-body-buttons .blue-link svg path {
    fill: #000 !important;
}

.bh-cart-btn-notify {
    color: #000 !important;
}

.bh-cart-btn-notify svg {
    stroke: #000 !important;
}

#common-success {
    padding-bottom: 32px !important;
}
#common-success .ds-account-column-nav > li:has(a[href$="/login"]) {
    display: none !important;
}

div[id^="account-"].container-fluid {
    padding-bottom: 32px !important;
}

@media (max-width: 1199.98px) {
    .bh-filterbar-ready [data-ocf="mobile"]:not(.ocf-close-mobile),
    .bh-filterbar-ready .ocf-btn-mobile-fixed {
        display: none !important;
    }
}

.custom-font-color{
    color: #000;
}