/* ===== fb-search-look ===== */
/* поле пошуку в шапці — за зразком бойового сайту */
.qodef-widget-holder.qodef--one { flex: 1 1 auto; justify-content: flex-end; align-items: center; gap: 0; }
/* власні відступи віджетів по 12px з боків дають рівно 24px між блоками — як на бойовому */
.qodef-widget-holder.qodef--one > .widget:has(.aws-container) { flex: 1 1 auto; max-width: 480px; }
.qodef-widget-holder .aws-container {
    flex: 1 1 auto;
    width: 100%;
    max-width: 480px;
    margin: 0;                      /* відступи задає gap у шапці: 24px між усіма */
}
.qodef-widget-holder .aws-container .aws-search-form {
    display: flex;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    align-items: center;
}
.qodef-widget-holder .aws-container .aws-search-form .aws-wrapper { flex: 1 1 auto; }
.qodef-widget-holder .aws-container .aws-search-form .aws-search-field {
    border: 0;
    background: transparent;
    height: 36px;
    padding: 0 12px 0 18px;
    font-size: 14px;
    color: #000;
    box-shadow: none;
}
.qodef-widget-holder .aws-container .aws-search-form .aws-search-field:focus { outline: none; box-shadow: none; }
/* напис у порожньому полі — світло-сірий, як на бойовому */
.qodef-widget-holder .aws-container .aws-search-form .aws-search-field::placeholder { color: #777; opacity: 1; }
.qodef-widget-holder .aws-container .aws-search-form .aws-search-field::-webkit-input-placeholder { color: #777; opacity: 1; }
/* перемичка між полем і лупою */
.qodef-widget-holder .aws-container .aws-search-form .aws-search-btn {
    background: #fff;
    border: 0;
    border-left: 1px solid #ededee;
    width: 46px;
    height: 36px;
    flex: 0 0 46px;
}
.qodef-widget-holder .aws-container .aws-search-form .aws-search-btn:hover { background: #f7f7f7; }
@media (max-width: 1024px) {
    .qodef-widget-holder.qodef--one > .widget { margin-left: 6px; margin-right: 6px; }
}

/* ===== fb-hide-avatar ===== */
/* Іконка фото біля імені: власник 03.09.2026 — «Убрать». */
.qodef-login-opener-widget img,
.qodef-m-user img,
.woocommerce-MyAccount-content img.avatar { display: none !important; }

/* ===== fb-sale-color ===== */
/* Плашка «ЗНИЖКА» на картці товару.
   08.09.2026 власник: «давай спробуємо помаранчевий замінити на цей
   червоний» — #FF5C00 → #FC4335. Правка в одному місці, відкат теж. */
.qodef-woo-product-mark.qodef-woo-onsale,
.qodef-woo-onsale,
span.onsale {
    background-color: #FC4335 !important;
}
/* Ціна зі знижкою: пілюлі немає, сама сума червона.
   Було: біла сума на червоній пілюлі (фон, поля 0 16px, радіус 999).
   Стало: фон прозорий, поля прибрані, колір цифр #FC4335. */
/* Селектори з `body` попереду — навмисно. Далі на сторінці йде власний
   блок стилів підрядника з таким самим правилом і `!important`:
   `.price ins { padding: 0 16px !important; border-radius: 999px !important }`.
   Вага в нас була однакова, а він нижче — і перемагав. Зайвий `body`
   піднімає вагу нашого правила, і порядок уже не вирішує. */
body .price ins,
body .qodef-woo-product-price ins,
body .summary .price ins,
body ins.woocommerce-Price-amount {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #FC4335 !important;
    text-decoration: none !important;
}
body .price ins .woocommerce-Price-amount,
body .price ins .woocommerce-Price-currencySymbol,
body .qodef-woo-product-price ins .woocommerce-Price-amount,
body .qodef-woo-product-price ins .woocommerce-Price-currencySymbol {
    color: #FC4335 !important;
}

/* ===== fb-catalog-align ===== */
.qodef-woo-product-list .qodef-e-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.qodef-woo-product-list .qodef-woo-product-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* місце під назву — рівно два рядки, щоб ціна не стрибала */
.qodef-woo-product-list .qodef-woo-product-title {
    min-height: 2.7em;              /* рівно два рядки при інтервалі 1.35 */
    line-height: 1.35 !important;   /* назва у два рядки більше не злипається */
    margin-bottom: 10px;
}
/* ціна з підписом ваги — завжди внизу картки */
.qodef-woo-product-list .qodef-woo-product-price {
    margin-top: auto;
}
@media (max-width: 680px) {
    .qodef-woo-product-list .qodef-woo-product-title { min-height: 0; }
}

/* ===== fb-sale-look ===== */
/* плашка знижки: півколо праворуч, як решта елементів сайту */
.qodef-woo-product-mark,
.qodef-woo-onsale,
span.onsale {
    border-radius: 0 999px 999px 0 !important;
    padding: 4px 16px 4px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: .04em;
    height: auto !important;
    width: auto !important;
}
/* на сторінці товару плашка лягала на край картинки — зсуваємо всередину */
.qodef-woo-single-image .qodef-woo-product-mark {
    margin-top: 16px;
    margin-left: 21px;
}
/* підпис ваги/обʼєму: свій колір і однакова відстань від ціни
   у товарів зі знижкою і без неї */
.qodef-woo-product-list .weight,
.summary .price .weight {
    color: #475467;
    display: block;
    width: 100%;
    margin-top: 6px;
}
/* рядок ціни завжди однакової висоти: пігулка знижки вища за звичайний текст */
.qodef-woo-product-list .qodef-woo-product-price {
    min-height: 34px;
}
/* блок ціни — вирівнюємо все по центру рядка */
.qodef-woo-product-list .qodef-woo-product-price,
.summary .price {
    align-items: center;
    flex-wrap: wrap;
}
/* рядок ціни: стара ціна і пігулка знижки — строго на одній лінії */
.qodef-woo-product-list .qodef-woo-product-price,
.summary .price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 40px;
}
.price ins,
.qodef-woo-product-price ins,
.summary .price ins {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 16px !important;
    margin: 0 0 0 10px !important;
    border-radius: 999px !important;
    line-height: 1;
    text-decoration: none;
}
.price del,
.qodef-woo-product-price del,
.summary .price del {
    display: inline-flex;
    align-items: center;
    height: 34px;
}
/* сума всередині пігулки не додає своєї висоти рядка */
.price ins .woocommerce-Price-amount,
.qodef-woo-product-price ins .woocommerce-Price-amount,
.summary .price ins .woocommerce-Price-amount {
    line-height: 20px !important;
    display: inline-block;
}
/* Пігулка ціни зі знижкою — рівні відступи зверху і знизу.
   Корінь перекосу. У шрифті Bebas базова лінія стоїть на 0,25em нижче
   середини рядка, а в цифр немає нижніх виносних. Тому цифри завжди
   сидять на 0,125em вище центру свого бокса — скільки б ми не рівняли
   сам бокс, перекіс лишався. Заміряно по пікселях: у каталозі при кеглі
   28px було 3px зверху і 10px знизу, на сторінці товару при 32px — 1px
   і 9px.
   Рішення з двох кроків, щоб не зрушити текст:
   1) саму пігулку піднімаємо на 0,125em — вона стає по центру цифр;
   2) суму всередині опускаємо на ті самі 0,125em — вона лишається
      на місці, на одній лінії зі старою ціною і з цінами без знижки.
   Величина в em, а не в пікселях: тоді вона вірна при будь-якому кеглі. */
.price ins,
.qodef-woo-product-price ins,
.summary .price ins {
    position: relative;
    top: -0.125em;
}
.price ins .woocommerce-Price-amount,
.qodef-woo-product-price ins .woocommerce-Price-amount,
.summary .price ins .woocommerce-Price-amount {
    position: relative;
    top: 0.125em;
}
/* У каталозі ціна зі знижкою стояла на 7px нижче за звичайні ціни сусідніх
   карток: у звичайної ціни рядок 27px, а всередині пігулки — 20px, і базові
   лінії не збігалися. Заміряно: звичайна 958,2 — зі знижкою 965,2.
   Піднімаємо стару ціну і пігулку на 0,25em — цифри всіх цін у ряду стають
   на одну лінію. На сторінці товару цього не робимо: там ціна одна. */
.qodef-woo-product-list .price del {
    position: relative;
    top: -0.25em;
}
.qodef-woo-product-list .price ins {
    top: -0.375em;
}
/* кнопки на сторінці товару — однакова висота 54 px і вміст по центру */
.summary button.single_add_to_cart_button {
    height: 54px !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.summary .quantity {
    height: 54px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.summary .quantity input,
.summary .quantity .qodef-quantity-input {
    height: auto !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}
.summary .quantity .qodef-quantity-minus,
.summary .quantity .qodef-quantity-plus,
.summary .quantity span,
.summary .quantity a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    line-height: 1 !important;
}
/* звичайна ціна теж 34 px заввишки — щоб рядок ціни був однаковий
   у товарів зі знижкою і без неї, і підпис ваги не з'їжджав */
.qodef-woo-product-list .qodef-woo-product-price > .woocommerce-Price-amount,
.summary .price > .woocommerce-Price-amount {
    display: inline-flex;
    align-items: center;
    height: 34px;
}
/* кнопка «Фільтрувати» — 50 px, текст по центру */
.qodef-qi-button.qodef-shortcode {
    height: 50px !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ===== fb-swatches ===== */
/* варіанти ділять ширину порівну — відступ справа такий самий, як зліва */
.qvsfw-select-options-container {
    gap: 4px !important;         /* зазор між пігулками, щоб не злипались */
    padding: 4px !important;
    box-sizing: border-box;
}
.qvsfw-select-options-container > .qvsfw-select-option {
    flex: 1 1 0 !important;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
}
/* порожній контейнер (коли значення одне) більше не тонка смужка */
.qvsfw-select-options-container:empty {
    display: none !important;
}
/* дубль вибору: тема малює select2, плагін свотчів — пігулки. Показуємо лише
   пігулки, і лише там, де вони справді є (інакше вибір варіанта зникне зовсім). */
form.variations_form tr:has(.qvsfw-select-options-container) .select2-container {
    display: none !important;
}
/* пігулка єдиного значення — такий самий вигляд, як у обраного варіанта */
.fb-single-value {
    color: #000;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 46px;
    background: #fff;
    border-radius: 200px;
    font-size: 16px;
}

/* ===== fb-catalog-row ===== */
/* Розділи каталогу. Еталон — екран власника, MacBook Pro 14": ширина вікна 1512px.
   На ньому: поля 32px по краях, зазор між плитками 61px — це стеля зазору.
   Ширший екран: рядок не розтягуємо, він стає по центру, зазор лишається 61px.
   Вужчий: зазор зменшується, але не менше 8px; поля — не менше 16px;
   далі звужуються самі плитки, лишаючись квадратними. */
@media (min-width: 1024px) {
    .qodef-category-holder .qodef-e-options-wrapper {
        box-sizing: border-box !important;
        max-width: 1512px !important;      /* стеля: ширина екрана власника */
        margin-left: auto !important;
        margin-right: auto !important;
        /* 32px на широкому екрані, плавно до 16px на вузькому */
        padding-left: clamp(16px, calc(16px + (100vw - 1000px) * 0.08), 32px) !important;
        padding-right: clamp(16px, calc(16px + (100vw - 1000px) * 0.08), 32px) !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        gap: 8px !important;               /* підлога зазору */
    }
    .qodef-category-holder .qodef-m-filter-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 1 90px !important;
        max-width: 90px !important;
        min-width: 0 !important;
    }
    /* плитка строго квадратна: частина картинок має пропорцію 90x102 і витягувала плитку */
    .qodef-category-holder .qodef-m-filter-item picture {
        display: block !important;
    }
    .qodef-category-holder .qodef-m-filter-item img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }
    /* Підпис — рівно по центру плитки, в один рядок. «Ферментована» при 16px
       займає 108px проти 90px плитки: розривати слово посередині не можна,
       тому рядок лишається цілим, а на вузькому екрані шрифт зменшується,
       щоб підписи сусідів не налазили одна на одну.
       Ширина по тексту (max-content) + зсув на півширини — тоді підпис стоїть
       рівно по центру плитки навіть коли він ширший за неї. Заодно підкреслення
       активного розділу (це фонова смуга linear-gradient на самому підписі)
       стає рівно по довжині слова, а не на всю ширину плитки. */
    .qodef-category-holder .qodef-m-filter-item .qodef-m-category-name {
        display: block !important;
        width: max-content !important;
        max-width: none !important;
        margin-left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        font-size: clamp(11.5px, calc(11.5px + (100vw - 1024px) * 0.00922), 16px) !important;
    }
}

/* ===== fb-price-slider ===== */
.wpfPriceFilterRange .ui-slider-handle,
.qodef-price-slider .ui-slider-handle,
.ui-slider .ui-slider-handle {
    border-radius: 999px !important;
    width: 22px !important;
    height: 22px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    border: 1px solid #d8d8d8 !important;
    cursor: pointer;
}
/* ліва ручка — півсфера ліворуч, права — праворуч */
.wpfPriceFilterRange .ui-slider-handle:first-of-type,
.qodef-price-slider .ui-slider-handle:first-of-type {
    border-radius: 999px 0 0 999px !important;
}
.wpfPriceFilterRange .ui-slider-handle:last-of-type,
.qodef-price-slider .ui-slider-handle:last-of-type {
    border-radius: 0 999px 999px 0 !important;
}
/* сама смуга теж скруглена */
.wpfPriceFilterRange,
.qodef-price-slider,
.ui-slider .ui-slider-range {
    border-radius: 999px !important;
}

/* ===== fb-select-look ===== */
.summary .select2-container .select2-selection--single,
.summary .select2-selection {
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center;
    padding: 0 22px !important;
    box-sizing: border-box;
}
.summary .select2-selection__rendered {
    line-height: 1 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    height: 100%;
}
.summary .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 18px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
/* сама стрілка: select2 зсуває її вгору на 2px власними полями —
   прибираємо зсув і центруємо засобами розмітки */
.summary .select2-selection__arrow b,
.summary .select2-selection__arrow svg,
.summary .select2-selection__arrow i {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
}
.summary .variations select {
    height: 54px !important;
    border-radius: 999px !important;
    padding: 0 22px !important;
    background-position: right 18px center !important;
}

/* ===== fb-cart-icon ===== */
.qodef-woo-product-list .qodef-woo-product-image-inner a.add_to_cart_button.product_type_variable,
.qodef-woo-product-list .qodef-woo-product-image-inner a.product_type_variable {
    display: flex !important;
    width: 50px !important;
    height: 50px !important;
    align-items: center;
    justify-content: center;
    background: #fff;
    /* радіус не задаємо — лишається такий самий, як у простих товарів */
}

/* ===== fb-mobile ===== */
@media (max-width: 1024px) {
    /* Бургер: три смужки по 2px із зазором 3px.
       Тема малює його картинкою у дві смужки — картинку ховаємо
       і малюємо смужки фоном: смуга 2px, крок 5px (2 + 3 зазор),
       висота 12px = 2+3+2+3+2. Колір беремо той самий, що у тексту. */
    a.qodef-mobile-header-opener svg,
    a.qodef-mobile-header-opener .qodef-svg--menu {
        display: none !important;
    }
    a.qodef-mobile-header-opener {
        display: inline-block !important;
        width: 31px !important;
        height: 12px !important;
        background-image: linear-gradient(currentColor 2px, transparent 2px) !important;
        background-size: 100% 5px !important;
        background-repeat: repeat-y !important;
        background-position: left top !important;
    }

    /* Логотип у шапці.
       Було: PNG 256x256 з білим фоном, запеченим у файл, і картинка
       62x62 вилазила вниз зі свого посилання — центр не збігався
       з пілюлею кошика. Стало: SVG без фону, посилання тієї ж висоти,
       що й пілюля (38px), і вирівнювання по центру. Зсув на 12px
       більше не потрібен — центри збігаються самі. Пілюлю не чіпаємо. */
    a.qodef-mobile-header-logo-link,
    .qodef-mobile-header-logo-link {
        display: flex !important;
        align-items: center !important;
        height: 38px !important;
    }
    a.qodef-mobile-header-logo-link img.qodef-header-logo-image,
    .qodef-mobile-header-logo-link img.qodef-header-logo-image {
        position: static !important;
        top: auto !important;
        /* Ширину задаємо числом, а не `auto`: у цього SVG немає власних
           розмірів у файлі, і при `width: auto` картинка схлопується в нуль.
           236.1 / 188.1 = 1.2552, при висоті 38 виходить 48. */
        height: 38px !important;
        width: 48px !important;
        max-width: none !important;
        object-fit: contain !important;
    }

    /* Кнопка «Переглянути кошик» у підвалі бічного кошика на телефоні
       зайва — `.xoo-wsc-ft-btn-cart`. Та, що WooCommerce додає після
       натискання «Додати в кошик» (`a.added_to_cart`), з 12.09.2026
       схована на всіх ширинах — блок 37. */
    .xoo-wsc-ft-btn-cart,
    a.xoo-wsc-ft-btn.xoo-wsc-ft-btn-cart {
        display: none !important;
    }
}

/* ---------- Плаваючий кошик унизу праворуч ----------
   Було: біле коло 70×70 з напівпрозорим фоном, лічильник у лівому
   верхньому куті, і коло видно навіть коли кошик порожній.
   Стало: тільки іконка без кола, лічильник праворуч, а коли порожньо —
   не показуємо взагалі. Порожнечу видно лише з тексту лічильника,
   тому клас ставить скрипт. */
body .xoo-wsc-basket {
    background: transparent !important;
    /* Рамку теж прибираємо. Прибрати саму лише заливку мало: у кошика
       була ще рамка `1px solid #121212`, і без скруглення вона
       перетворилася на квадрат навколо іконки. */
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* І розмиття. Прозорий фон його не прибирає: `backdrop-filter`
       розмиває те, що лежить **за** елементом, тому навколо іконки
       лишалася мутна пляма розміром у весь відступ (`padding: 1.2em`).
       Правило `backdrop-filter: blur(5px)` стоїть у власному блоці
       стилів підрядника (Q135) — у нас такого правила не було взагалі,
       перебивати не було чого. Safari на Mac розуміє лише префіксне
       написання, тому пишемо обидва. `filter` — про запас. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}
.xoo-wsc-basket .xoo-wsc-items-count {
    left: auto !important;
    right: -12px !important;
    /* Контур прибираємо: у плагіні лічильник має `border: 1px solid #000`,
       а контурів ми ніде не використовуємо (власник 07.09). Лишається
       тільки зелена заливка й цифра. Знімаємо своїм правилом, а не
       налаштуванням плагіна: налаштування не відкотиш одним рядком. */
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
/* Лічильник на 8px лівіше: `-12px` + 8 = `-4px`.
   Спершу правило було тільки для телефона: там лічильник вилазив на 2px
   за екран. 08.09 власник попросив так само й на десктопі, тому
   media-запит знято — значення одне на всі ширини.
   `body` попереду і місце **після** загального правила — щоб виграти
   і за вагою, і за порядком (урок Q135). */
body .xoo-wsc-basket .xoo-wsc-items-count {
    right: -4px !important;
}
/* 12.09.2026: правило `.xoo-wsc-basket.fb-cart-empty { display:none }` знято —
   плаваюча корзина тепер невидима ціль польоту картинки, блок 37. */


/* Кружок під самою іконкою — щоб корзину було видно на темній картці.
   Розмір не на око: гліф шрифта `Woo-Side-Cart` (символ U+E911)
   намальовано на полотні, пораховано пікселі з фарбою і знайдено
   мінімальне коло, що їх накриває — 41,7 px при кеглі 30 px. Беремо 42.
   Заливка й розмиття ті самі, що стояли в підрядника (`#FFFFFF8A`,
   `blur(5px)`), просто розміром з іконку, а не 68 px. Рамки немає.
   Власник 07.09 попросив «на 4px більше і фон сильніше розмитий»:
   мінімум 42 → **46 px**, розмиття 5 → **10 px**. Коло лишається
   всередині коробки корзини (68×68 при іконці 30×30 — поля по 19 px).
   Малюємо `::after`, а не фоном іконки: фон змінив би розмір коробки,
   коробка посунула б лічильник, і вчорашні 8px поїхали б назад.
   `::before` зайнятий — там сам гліф. */
body .xoo-wsc-basket .xoo-wsc-bki {
    position: relative;
}
body .xoo-wsc-basket .xoo-wsc-bki::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF8A;
    backdrop-filter: blur(75px);
    -webkit-backdrop-filter: blur(75px);
    z-index: -1;
    pointer-events: none;
}

/* ===== fb-home-gaps ===== */
/* Власник 08.09: «На мобільній версії поверни як було все. Правимо тільки
   десктоп». Усі просвіти нижче заміряні при ширині 1440 і на вузькому екрані
   ламають розкладку — тому вони діють лише від 1025px. */
@media (min-width: 1025px) {
    /* Перший просвіт власник попросив повернути: між нижнім краєм банера
       і плашкою статистики й було рівно 60. Правку знято. */
    .elementor-top-section[data-id="3940b50a"] { margin-top: -96px !important; }
    .elementor-top-section[data-id="8202fd2"]  { margin-top: -60px !important; }
    .elementor-top-section[data-id="1c0ef17"]  { margin-top: -30px !important; }
    .elementor-top-section[data-id="4bba721"]  { margin-top: -70px !important; }
    
    /* Блок із заголовком FAQ. Просвіт від карток «Чому Fresh Black?» був 120. */
    .elementor-element-2c48b5a { margin-top: -60px !important; }
    
    /* Секція з питаннями. Від заголовка FAQ до першої плашки було 60,
       власник просив 32. І знизу до підвала було 170 при відступі секції 150 —
       лишаємо 40, тоді до підвала виходить 60. */
    .elementor-top-section[data-id="3efb1335"] {
        margin-top: -28px !important;
        padding-bottom: 40px !important;
    }
    
    /* ---------- КАТАЛОГ ----------
       Розмітка власника: від заголовка FAQ до першої плашки 32 (було 60),
       від останньої плашки до підвала 60 (було 275). */
    /* Від низу останньої ціни в сітці товарів до верху зеленого блока
       було 92 — власник просив 60. */
    .elementor-top-section[data-id="45072782"] { margin-top: -32px !important; }
    .elementor-top-section[data-id="6a51b5f6"] {
        margin-top: -28px !important;
        padding-bottom: 0 !important;
        margin-bottom: -65px !important;
    }
    
    /* ---------- ПРО НАС ----------
       Ця сторінка зібрана не секціями, а контейнерами Elementor.
       Скрізь 60, і два винятки: від шапки до першого заголовка 32
       і від заголовка «Fresh Black це:» до трьох колонок 32. */
    .e-con.e-parent[data-id="61beaef"] { margin-top: -96px !important; }   /* 128 → 32 */
    .e-con.e-parent[data-id="f091065"] { margin-top: -68px !important; }   /* 128 → 60 */
    .e-con.e-parent[data-id="046b3cc"] { margin-top: -78px !important; }   /* 138 → 60 */
    .e-con.e-parent[data-id="eab017d"] { margin-top: -68px !important; }   /* 128 → 60 */
    .e-con.e-parent[data-id="9dac0ad"] { margin-top: -68px !important; }   /* 128 → 60 */
    .e-con.e-parent[data-id="79f86e7"] { margin-top: 12px !important; }    /*  48 → 60 */
    .e-con.e-parent[data-id="dcdab0f"] { margin-top: -68px !important; }   /* 128 → 60 */
    .e-con.e-parent[data-id="b655202"] { margin-top: -68px !important; }   /* 128 → 60 */
    .e-con.e-parent[data-id="52a3fe4"] { margin-top: 12px !important; }    /*  48 → 60 */
    .e-con.e-parent[data-id="eceb29e"] { margin-top: -244px !important;    /* 304 → 60 */
                                         margin-bottom: -16px !important; } /* 76 → 60 до підвала.
       Раніше тут стояло -966: замір збрехав, бо плашки з роками до прокрутки
       мають visibility: hidden — місце займають, а видимими стають лише коли
       до них домотаєш. Підвал через це виліз у середину сторінки. */
}

/* ===== fb-mobile-fix ===== */
@media (max-width: 767px) {
    /* ---------- 1. Однакова ширина блоків ----------
       У більшості блоків поля по краях 12. Заміряно при 375:
       плашка статистики стояла на 20 (поле обгортки віджета),
       FAQ — на 26 (поля контейнера 26.25). Зводимо все до 12. */
    .elementor-top-section[data-id="4187dbb"] > .elementor-container > .elementor-column > .elementor-widget-wrap,
    .elementor-top-section[data-id="45072782"] > .elementor-container > .elementor-column > .elementor-widget-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .elementor-top-section[data-id="3efb1335"] > .elementor-container,
    .elementor-top-section[data-id="6a51b5f6"] > .elementor-container {
        margin-left: 12px !important;
        margin-right: 12px !important;
        max-width: none !important;
        /* у контейнера була задана ширина 322.5 — без цього рядка він просто
           з'їжджав ліворуч, а не ширшав */
        width: auto !important;
    }

    /* ---------- 2. Меню поверх смуги розділів ----------
       Смуга розділів у каталозі має z-index 1000, а шапка з меню — 100.
       Через це відкрите меню опинялося під смугою. Піднімаємо шапку. */
    #qodef-page-mobile-header { z-index: 1100 !important; }

    /* ---------- 3. «Наші партнери» на сторінці «Про нас» ----------
       Мобільна версія блока — слайдер без картинок: у слайдах лежить лише
       заголовок з назвою файла («01-03», «01-04»), і він виїжджав за екран
       великими літерами. Ховаємо цей слайдер і показуємо справжню сітку
       логотипів, яку тема ховала на телефоні. */
    .elementor-element-b655202 .elementor-element[data-id="37d9686"] { display: none !important; }
    .elementor-element-52a3fe4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
        align-items: center !important;
        padding: 0 12px !important;
    }
    .elementor-element-52a3fe4 .elementor-hidden-mobile { display: block !important; }
    .elementor-element-52a3fe4 img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* ===== fb-new-badge ===== */
.qodef-e.qodef-grid-item.product.fb-new .qodef-woo-product-image-wrapper { position: relative; }
.qodef-e.qodef-grid-item.product.fb-new .qodef-woo-product-image-wrapper::before {
    content: "НОВИНКА";
    position: absolute;
    top: 18px;
    left: 0;
    z-index: 3;
    padding: 4px 16px 4px 12px;
    border-radius: 0 999px 999px 0;
    background-color: #5EFF95;
    color: #0C0C0C;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.84px;
    text-transform: uppercase;
    pointer-events: none;
}

/* Фірмовий зелений один на весь сайт — #5EFF95. У стилях підрядника
   одна кнопка на слайдах була пофарбована в #60FF95: на око не видно,
   але це вже інший колір. Вирівнюємо. */
.slide-button { background: #5EFF95 !important; }

/* ===== fb-filter-btn-flash ===== */
/* Кнопка «Фільтрувати» лежить absolute усередині блока Elementor. Поки
   сторінка розкладається, вона встигає майнути вгорі і потім стрибнути
   на місце — власник 09.09: «кнопка филтра изначально отрисовывается
   вверху и через мгновение поправляется как надо».
   Ховаємо її, поки скрипт не поставить на місце. Якщо скрипт з якоїсь
   причини не спрацює, показуємо через 2 секунди самі — кнопка не може
   лишитись невидимою. Тільки десктоп: на телефоні вона у звичайному потоці
   і не стрибає. */
/* СНЯТО 10.09.2026. Причину стрибка усунуто в корені: головний файл
   розкладки Elementor тепер вантажиться в шапці, і кнопка стоїть на місці
   вже в першому кадрі (заміряно на сторінці без скриптів: absolute, x = 20).
   А сама заглушка перетворилась на ваду: кнопка щоразу зникала й з'являлась.
   Власник 10.09: «кнопка фильтра постоянно исчезает и перепоявляется». */

/* ===== fb-accordion ===== */
/* Розділ FAQ і роки на сторінці «Про нас».
   Власник 09.09: «сейчас при наведении черный круг появляется а надо белый
   и если скрыт ответ то + если раскрыт то -».

   Було: при наведенні кружок ставав чорним (правило підрядника
   `.accord_main .qodef-e-title-holder:hover .qodef-e-mark{background:black}`),
   а всередині нічого не малювалося — значки плюса й мінуса в темі порожні.

   Стало: кружок білий, усередині малюємо самі. Горизонтальна риска є завжди,
   вертикальна зникає, коли відповідь розкрита: згорнуто «+», розкрито «−». */
/* `!important` тут потрібен: стилі підрядника з налаштувань теми
   друкуються пізніше за наш файл і без цього перебивають його. */
.accord_main .qodef-e-title-holder:hover .qodef-e-mark {
    background: #FFFFFF !important;
    color: #121212 !important;
}
.accord_main .qodef-e-title-holder:hover path {
    fill: #121212 !important;
}
.accord_main .qodef-e-title-holder .qodef-e-mark {
    position: relative;
    color: #121212;
}
.accord_main .qodef-e-title-holder .qodef-e-mark::before,
.accord_main .qodef-e-title-holder .qodef-e-mark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    border-radius: 1px;
}
.accord_main .qodef-e-title-holder .qodef-e-mark::before {
    width: 14px;
    height: 2px;
}
.accord_main .qodef-e-title-holder .qodef-e-mark::after {
    width: 2px;
    height: 14px;
    transition: opacity 0.2s ease-out;
}
.accord_main .qodef-e-title-holder.ui-state-active .qodef-e-mark::after {
    opacity: 0;
}

/* ===== fb-cat-arrow ===== */
/* Кружок зі стрілкою біля заголовка «Каталог». Тільки телефон. */
@media (max-width: 1024px) {
    .fb-cat-arrow {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 50%;
        background: #FFFFFF;
        color: #121212;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: none;
        -webkit-appearance: none;
        appearance: none;
    }
    .fb-cat-arrow:hover,
    .fb-cat-arrow:focus {
        background: #FFFFFF;
        color: #121212;
        outline: none;
    }
}
@media (min-width: 1025px) {
    .fb-cat-arrow { display: none !important; }
}

/* ===== fb-about-gap ===== */
/* Сторінка «Про нас», телефон: просвіт від низу шапки до заголовка
   «Ми віримо, що світ став би краще…».
   Власник 09.09: «поправь отступ на 32px от низа хедера... только в моб версии».
   Заміряно до правки: низ шапки 70, верх заголовка 218 — просвіт 148 px.
   Верхній відступ блока був 128, лишаємо 12 — це і дає рівно 32. */
@media (max-width: 1024px) {
    .page-id-1495 .elementor-element-61beaef > .e-con-inner {
        padding-top: 12px !important;
    }
}

/* ===== fb-breadcrumbs ===== */
/* Хлібні крихти. Власник 09.09: «цвет шрифта 98A2B3 — Roboto Condensed —
   regular 16». Roboto Condensed уже підвантажений темою, окремо не тягнемо. */
.fb-breadcrumbs,
.fb-breadcrumbs a,
.fb-breadcrumbs span {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #98A2B3;
    text-decoration: none;
    letter-spacing: 0;
    text-transform: none;
}
.fb-breadcrumbs a:hover {
    color: #121212;
}
.fb-breadcrumbs .fb-bc-sep {
    margin: 0 10px;
    color: #98A2B3;
}

/* колір посилання перебиває тема — ставимо жорстко */
body .fb-breadcrumbs a,
body .fb-breadcrumbs a:link,
body .fb-breadcrumbs a:visited {
    color: #98A2B3 !important;
}
body .fb-breadcrumbs a:hover {
    color: #121212 !important;
}
/* відступи від країв — такі самі, як у решти сторінки */
body .fb-breadcrumbs {
    padding: 12px 20px 10px;
}
@media (min-width: 1025px) {
    body .fb-breadcrumbs { padding: 14px 40px 10px; }
}

/* ===== fb-hide-dimensions ===== */
/* Габарити потрібні для розрахунку коробки, а не для показу покупцю.
   Після їх заповнення 09.09.2026 у таблиці характеристик з'явився рядок
   «Розміри: Невідомо» — на бойовому такого рядка немає. Ховаємо. */
.woocommerce-product-attributes-item--dimensions,
.woocommerce-product-attributes-item--weight {
    display: none !important;
}

/* ===== fb-login-form ===== */
/* Форма входу в кабінет. Власник 09.09: «кнопка войти не по центру»,
   «красным отметил лишний элемент — надо убрать», «окно ввода пароля углы
   сделай радиусы как у окна ввода почты», «окна ввода пароля и логина
   сделай по высоте 40».

   Заміряно до правки: логін і пароль по 26 px заввишки, у пароля кут 0
   замість 8, кнопка зсунута праворуч на 20 px власним `margin-left`.
   «Зайвий елемент» — кнопка показу пароля від WooCommerce: тема її не
   оформлює, і вона малюється сірим прямокутником 16×6 під полем. */

/* 1. Кнопка «Увійти» — рівно під полями */
.woocommerce-form-login button[name="login"],
.woocommerce-form-login button[type="submit"] {
    margin-left: 0 !important;
}

/* 2. Кнопка показу пароля — прибрати */
.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input,
.woocommerce-ResetPassword .show-password-input,
.woocommerce-EditAccountForm .show-password-input {
    display: none !important;
}

/* 3 і 4. Однакові поля: висота 40, кути 8 */
.woocommerce-form-login #username,
.woocommerce-form-login #password,
.woocommerce-form-register #reg_email,
.woocommerce-form-register #reg_password {
    height: 40px !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   10.09.2026. Правки власника по каталогу і слайдеру головної.
   ========================================================================== */

/* 1. Точки слайдера головної: 16 px від низу слайда.
   Було: контейнер точок стояв на 50 px від низу, видимий кружок — за 58 px.
   У кружка є прозорий запас 10 px з кожного боку (правило доступності
   в `fb-a11y.css`), тому зсув рахуємо від нього: 16 = відступ + 8. */
/* Підрядник тримає це правило у своєму блоці стилів, який друкується
   після нашого файлу, з тією ж вагою і `!important` (`.nolazy
   .swiper-pagination { bottom: 5.8vh }`). Перебиваємо вагою: додаємо `body`. */
body .qodef-qi-image-slider .swiper-pagination{
  bottom: 7px !important;   /* заміряно: дає рівно 16 px від низу слайда */
}

/* 2. Галочка у фільтрах каталогу — кругла, і 16 px до слова.
   Було: квадрат 20×20 із заокругленням 6 px, слово впритул. */
.wpfCheckbox label{
  border-radius: 50% !important;
}
.wpfCheckbox{
  margin-right: 16px !important;
}

/* 3. Повзунок ціни: ручки — рівні півкола по центру полоски.
   Було: 22×22 із заокругленням тільки зліва в обох ручок, зсунуті вгору
   на 2,5 px відносно полоски. Стало: 11×22 — рівно половина кола,
   ліва ручка заокруглена ліворуч, права праворуч, обидві по центру. */
.wpfPriceFilterRange .ui-slider-handle{
  width: 11px !important;
  height: 22px !important;
  top: 50% !important;
  margin-top: -11px !important;
  background-color: #fff !important;
}
.wpfPriceFilterRange .ui-slider-handle:first-of-type{
  border-radius: 11px 0 0 11px !important;
}
.wpfPriceFilterRange .ui-slider-handle:last-of-type{
  border-radius: 0 11px 11px 0 !important;
}

/* 4. Тільки телефон і планшет: картка фільтра поверх пілюлі кошика.
   `[Факт]` Перевірено 10.09 на вузькому вікні: панель фільтра — це
   прибитий до екрана контейнер Elementor із `z-index: 9999`, а пілюля
   кошика лежить у прибитому віджеті з `z-index: 10000`. Тобто пілюля
   вигравала рівно одним пунктом. Піднімаємо панель на 10001.
   Сітку товарів цей контейнер не містить, тому нічого іншого не зачіпає.
   Перша спроба (z-index на `.wpfMainWrapper`) не спрацювала: він лежить
   усередині панелі, а дитина не може вилізти вище свого шару. */
@media (max-width: 1024px){
  .elementor-element-6146b172{
    z-index: 10001 !important;
  }
}

/* 5. Кнопки фільтра — пігулки, «Застосувати» чорна.
   Було: обидві сірі прямокутники із заокругленням 4 px. */
/* Свій стиль плагіна `frontend.woofilters.css` вантажиться після нашого
   файлу і має `!important`, тому беремо вагою селектора: три класи проти
   двох. Перевірено 10.09: інакше чорний фон не застосовується. */
.wpfFilterButtons button.wpfFilterButton.wpfButton{
  background: #121212 !important;
  background-color: #121212 !important;
  color: #fff !important;
  border-radius: 100px !important;
  border: none !important;
}
.wpfFilterButtons button.wpfFilterButton.wpfButton:hover{
  background: #232323 !important;
  background-color: #232323 !important;
  color: #fff !important;
}
.wpfFilterButtons button.wpfClearButton.wpfButton{
  border-radius: 100px !important;
}

/* 6. Списки у фільтрах — цілком, без прокрутки всередині.
   Власник 10.09.2026: «сделай дропдаун в фильтре чтобы без скрола внутри
   а полным списком выподал». Було: висота списку обмежена 200 px
   і всередині зʼявлялася своя смуга прокрутки. */
.wpfFilterVerScroll{
  max-height: none !important;
  overflow-y: visible !important;
}

/* ==========================================================================
   10.09.2026. Панель фільтра: три зони, кнопки в рядок, чорні кружки.
   Завдання власника списком, підтверджене того ж дня.
   ========================================================================== */

/* 8. Три зони: список зверху гортається, ціна і кнопки прибиті знизу.
   Обгортки `fb-filter-body` і `fb-filter-foot` створює наш скрипт:
   плагін кладе всі блоки поруч, згрупувати їх у розмітці нічим. */
.wpfMainWrapper{
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.fb-filter-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* каталог за панеллю не гортається */
}
.fb-filter-foot{
  flex: 0 0 auto;
  background: #fff;
  padding-top: 8px;
}

/* 9. Цифри діапазону — над повзунком, а не під ним. */
.fb-filter-foot .wpfFilterContent{
  display: flex;
  flex-direction: column;
}
.wpfPriceInputs{
  order: -1;
}

/* 10. Кнопки в один рядок: «Очистити» ліворуч, «Застосувати» праворуч. */
.wpfFilterButtons{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 12px;
}
.wpfFilterButtons button.wpfClearButton.wpfButton{
  order: 1;
  flex: 1 1 0;
  width: auto !important;
  min-width: 0 !important;
}
.wpfFilterButtons button.wpfFilterButton.wpfButton{
  order: 2;
  flex: 1 1 0;
  width: auto !important;
  min-width: 0 !important;
}

/* 11. Кружок вибору заповнюється чорним, а не блакитним. */
.wpfCheckbox input[type="checkbox"]:checked + label{
  background-color: #121212 !important;
  border-color: #121212 !important;
}

/* 12. Плюс і мінус біля назви розділу — не жирні і на одній вертикалі
   з хрестиком закриття панелі.
   `[Факт]` Заміряно 10.09 удруге, уже після того, як плюс став власною
   картинкою 14×14: центр хрестика за 34 px від правого краю панелі,
   центр плюса без зсуву — за 28 px. Вирівнюємо саме центри, а не ліві краї:
   зсуваємо плюс на 6 px ліворуч. Перший замір (18 px) робився по старому
   значку шрифту, у якого була інша ширина, — від нього збіглися ліві краї. */
.wpfTitleToggle{
  font-weight: 400 !important;
  position: relative;
  right: 6px;
}



/* ==========================================================================
   10.09.2026, друга правка. Панель фільтра — окремий шар поверх усього.
   Власник намалював: синя рамка — панель, ні від чого не залежить і завжди
   зверху; зелена — назва «Фільтри», хрестик і список розділів, починається
   від верху екрана; червона — ціна і кнопки, не рухаються ніколи, відступи
   по 16 px. Попередня спроба (липкий блок на компʼютері) зламала розкладку —
   панель їхала разом із каталогом. Тут вона прибита до екрана.
   ========================================================================== */

/* 13. Сама панель. Закрита вона `display: none` — тому висоту й ширину
   ставимо сміливо, у закритому стані їх ніхто не побачить. */
/* ВАЖЛИВО: тільки цей контейнер, без `:has(.wpfMainWrapper)`.
   `[Факт]` 10.09: селектор `:has()` збігався і з контейнером каталогу —
   фільтр лежить усередині нього. Каталог теж став прибитим на 420 px,
   сторінка розʼїхалася. Ловимо панель за її власним класом. */
.elementor-element-6146b172{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  width: 420px !important;
  max-width: 92vw !important;
  z-index: 100000 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* 14. Шапка панелі: назва і хрестик прибиті зверху. */
.elementor-element-6146b172 > .elementor-element-83bd912{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 16px !important;
  margin: 0 !important;
  background: #fff;
  z-index: 2;
}

/* 15. Тіло панелі: від шапки до низу екрана. */
.elementor-element-6146b172 > .elementor-element-7822c06f{
  position: absolute !important;
  top: 86px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 0 16px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.elementor-element-6146b172 > .elementor-element-7822c06f > .elementor-widget-container,
.elementor-element-6146b172 > .elementor-element-7822c06f > .elementor-widget-container > .elementor-shortcode{
  height: 100% !important;
}

/* 16. Відступи внизу: 16 px над цифрами, 16 між цифрами і повзунком,
   16 під кнопками. */
.fb-filter-foot{
  padding: 16px 0 !important;
}
.fb-filter-foot .wpfPriceInputs{
  margin: 0 0 16px 0 !important;
}
.fb-filter-foot .wpfPriceFilterRange{
  margin-top: 0 !important;
}
.fb-filter-foot .wpfFilterButtons{
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* 17. Назви розділів і плюси — тонким шрифтом. Було 700. */
.wfpTitle,
.wpfFilterTitle,
.wpfTitleToggle{
  font-weight: 300 !important;
}

/* 18. Лічильник вибраного праворуч від назви розділу: тільки цифра,
   без фону і рамки, сірий як підписи в каталозі, на 50 % більший за назву. */
.fb-count{
  margin-left: 10px;
  color: #959595;
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
  /* Низ цифри збігається з низом назви розділу: обидва стоять на спільній
     лінії рядка. Було `middle` — цифра сідала на 5,8 px нижче назви. */
  vertical-align: baseline;
}

/* 19. Відступи внизу рівно по 16 px.
   `[Факт]` Заміряно: у повзунка власні поля 20 зверху і 15 знизу, у блоку
   ще 10 знизу — разом виходило 36 і 37 замість 16. Знімаємо їх. */
/* Власне правило плагіна `.wpfFilterWrapper .ui-slider-horizontal`
   стоїть із `!important` і вантажиться після нас — беремо вагою. */
.fb-filter-foot .wpfFilterWrapper .ui-slider-horizontal,
.fb-filter-foot .wpfFilterWrapper .wpfPriceFilterRange{
  margin: 0 !important;
}
.fb-filter-foot .wpfFilterContent{
  padding-bottom: 0 !important;
}

/* 20. Плюс і мінус малюємо самі тонкими лініями.
   `[Факт]` Товщина йшла не від `font-weight`, а від самого значка шрифту
   FontAwesome — там одна насиченість, легшої немає. Тому значок ховаємо
   і малюємо дві лінії по 1 px. */
.wpfTitleToggle{
  font-size: 0 !important;
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
}
.wpfTitleToggle::before,
.wpfTitleToggle::after{
  content: '' !important;
  position: absolute;
  background: #121212;
}
.wpfTitleToggle::before{
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
}
.wpfTitleToggle::after{
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
}
.wpfTitleToggle.fa-minus::after{
  display: none;   /* у мінуса вертикальної лінії немає */
}

/* 21. Кружок вибору при наведенні — чорний контур, а не блакитний.
   `[Факт]` Блакитний колір ставить сам плагін правилом
   `.wpfCheckbox label:hover { border-color: #56e1ff }`, яке друкується
   в тілі сторінки після нашого файлу. Вага однакова, тому беремо
   `!important`: у плагіна його немає. */
.wpfCheckbox label:hover,
.wpfCheckbox input[type="checkbox"]:hover + label,
.wpfCheckbox input[type="checkbox"]:focus + label{
  border-color: #121212 !important;
}

/* 22. Роздільна лінія — угорі нижнього блоку, а не під повзунком.
   Було: сіра лінія `1px #ececec` йшла знизу блоку ціни, тобто під повзунком,
   а зверху блок нічим не відділявся. Стало: лінія зверху блоку, від неї
   рівно 16 px до цифр. `[Факт]` Заміряно після правки на екрані 375×600:
   лінія → цифри 16 · цифри → повзунок 16 · повзунок → кнопки 16 ·
   кнопки → низ екрана 16. */
.fb-filter-foot{
  border-top: 1px solid #ececec !important;
}
.fb-filter-foot > .wpfFilterWrapper{
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}
/* Останній розділ у списку своєї лінії не має: коли список догортано донизу,
   вона ставала другою лінією за 12 px від верхньої лінії нижнього блоку. */
.fb-filter-body > .wpfFilterWrapper:last-child{
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 23. Меню шапки навпаки: звичайні пункти сірі, поточний — чорний.
   Власник 10.09: «давай наоборот сделаем изначально серое (как сейчас
   выбранное) а выбранное наоборот черное».
   Було: звичайні #000, поточний #959595. Стало навпаки. Наведення теж
   чорне — щоб пункт під пальцем читався як активний.
   Правило теми друкується після нашого файлу з тією ж вагою, тому додаємо
   `body` і `!important`. Випадаючий список «Ще…» не чіпаємо — у нього своя
   панель і свої кольори. */
body .qodef-header-navigation > ul > li > a,
body .qodef-mobile-header-navigation > ul > li > a{
  color: #959595 !important;
}
body .qodef-header-navigation > ul > li.current-menu-item > a,
body .qodef-header-navigation > ul > li.current-menu-ancestor > a,
body .qodef-header-navigation > ul > li > a:hover,
body .qodef-mobile-header-navigation > ul > li.current-menu-item > a,
body .qodef-mobile-header-navigation > ul > li.current-menu-ancestor > a,
body .qodef-mobile-header-navigation > ul > li > a:hover{
  color: #000 !important;
}

/* 24. У хлібних крихтах поточна сторінка — підкреслена.
   Було 10.09 жирним, власник того ж дня попросив підкреслення. */
.fb-breadcrumbs .breadcrumb_last{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   25. Перехід між сторінками — перетікання, а не спалах.
   Власник 10.09.2026: «очень не приятно переключать категории» ·
   «Давай попробуем перетекание».
   `[Факт]` Зміна розділу — це повне перезавантаження: браузер тримає стару
   сторінку, потім малює нову, і між ними виходить різкий кадр. Просимо
   браузер зробити перехід самому: він знімає стару картинку, чекає нову
   і плавно переводить одну в іншу. Шапку називаємо окремо — тоді вона не
   перемальовується, а лишається на місці.
   Скриптів тут немає: усе робить браузер. Хто так не вміє — побачить рівно
   те саме, що й до цієї правки.
   ========================================================================== */
@view-transition{
  navigation: auto;
}
/* Імена шапці й підвалу СНЯТО 10.09.2026.
   `[Факт]` Власник упіймав кадр переходу на телефоні: пігулка кошика і бургер
   стояли місцями навпаки, обидва напівпрозорі. Причина — саме імена. Названий
   елемент браузер знімає окремим шаром, а пігулку наш скрипт виносить зі шапки
   в кінець сторінки. Виходить, що на старій сторінці пігулка вже поза шапкою
   (і потрапляє в загальний шар), а на новій ще всередині шапки (і потрапляє
   в шар шапки). Два шари накладаються — і на час переходу видно два різних
   розташування.
   Без імен уся сторінка знімається одним шаром: старий кадр і новий у цьому
   місці однакові, тому переходу не видно. Саме перетікання лишається. */

/* Кому рух заважає — переходу немає, сторінка просто змінюється. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation: none !important;
  }
}

/* 26. Пігулка кошика: власного лівого поля не має.
   `[Факт]` Заміряно 10.09: у телефонної пігулки ліве поле 20 px, у настільної
   12 px. Поле живе на самій пігулці, а скрипт виносить пігулку зі шапки і
   ставить замість неї розпірку — поле йде разом із пігулкою, шапка стискається,
   сусіди стрибають. Прибираємо поле зовсім: тоді до і після роботи скрипта
   шапка виглядає однаково, а проміжок до бургера тримає його власне поле 20 px
   (рішення власника 08.09 про зазор 20). */
#block-46,
#block-48{
  margin-left: 0 !important;
}


/* ==========================================================================
   27. Шапка телефона і пігулка кошика — правила перенесені сюди з `fb-foot.css`
   10.09.2026.
   `[Факт]` Причина: `fb-foot.css` друкується всередині сторінки, тобто
   застосовується вже після першого кадру. Тому телефон малював шапку
   в порядку розмітки — спершу пігулка, потім бургер — і лише потім міняв
   їх місцями. Власник: «на мобильном все еще также прыгает бургер с пилюлей».
   Тут вони діють із першого кадру. Нижче — без змін, тільки місце інше.
   ========================================================================== */

/* ===== fb-header-cart ===== */
/* Плаваючий кошик унизу прибираємо з очей повністю, але **не** через
   `display:none`: бічний кошик (xoo-wsc) цілить політ картинки товару
   саме в нього, а у схованого елемента координати 0,0 — картинка летіла
   в лівий верхній кут. З 12.09.2026 корзина невидима (1×1, прозора,
   без натискань) і стоїть у центрі пілюлі кошика — координати ставить
   `fb-fly-target` у `fb-foot.js` (правилом стилів: перед польотом плагін
   перемальовує кошик, inline-стилі зникають). Плагін сам робить
   `.show()/.hide()`, тому `display` — з `!important` через `body`;
   `transition` знято — інакше координати доїжджають пізніше за політ. */
body .xoo-wsc-basket,
body .xoo-wsc-basket.fb-cart-empty {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    right: auto !important;
    bottom: auto !important;
    z-index: -1 !important;
    transition: none !important;
    transform: none !important;
}

/* Пігулка стоїть на місці завжди. Координати ставить скрипт по підпорці.
   `translateZ(0)` — щоб телефон малював пігулку окремим шаром: без цього
   Safari під час прокручування перемальовує закріплені елементи ривками
   і вони блимають. */
body > #block-46,
body > #block-48 {
    position: fixed !important;
    z-index: 10000 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

@media (min-width: 1025px) {
    body > #block-48 { display: none !important; }
}

@media (max-width: 1024px) {
    body > #block-46 { display: none !important; }

    /* Порядок у шапці телефона: логотип · бургер · пігулка.
       Місце під пігулку тримає підпорка. Без перестановки бургер з'їжджав
       праворуч і опинявся під пігулкою — заміряно: бургер ставав 318…349,
       пігулка 289…349. */
    #qodef-page-mobile-header-inner > .qodef-mobile-header-logo-link {
        margin-right: auto !important;
    }
    #qodef-page-mobile-header-inner > .qodef-widget-holder {
        flex: 0 0 auto !important;
        order: 3 !important;
    }
    #qodef-page-mobile-header-inner > .qodef-mobile-header-opener {
        order: 2 !important;
        /* Проміжок 20 між бургером і пігулкою — такий самий, як був
           між пігулкою і бургером до перестановки. */
        margin-right: 20px !important;
    }
}

/* 28. СНЯТО 10.09.2026, через півгодини після появи.
   Я підмінював банер на телефоні своєю зменшеною копією настільного —
   і зіпсував картинку: на сайті **два слайдери**, окремо для компʼютера
   і для телефона, зі своїми банерами. Мій запис `#swiper-slide-0` збігався
   з першим слайдом обох, тому на телефоні замість рідного банера
   `image_2026-07-06_16-31-26.webp` (50 КБ) показувалась зменшена копія
   настільного. Власник: «на мобе колд брю не та что для моба».
   Нічого підміняти не треба: телефонні банери й так легкі. */

/* 29. Телефон: від низу логотипа до верху слайда — рівно 16 px.
   `[Факт]` Заміряно на екрані 390: низ логотипа 54, верх слайда 115 —
   просвіт 61. Зайві 45 px дає верхній відступ першої секції головної:
   у налаштуваннях Elementor для телефона там 85 px. Знімаємо 45 — лишається
   40, і слайд починається на 70, тобто рівно за 16 px під логотипом.
   Правило тільки для телефона: на компʼютері відступ свій і його не чіпаємо. */
@media (max-width: 767px){
  body .elementor-6 .elementor-element.elementor-element-c690bdf{
    margin-top: 40px !important;
  }
}

/* ==========================================================================
   30. Картки товарів — однакові всюди, ціна в ряду на одній лінії.
   Власник 11.09.2026, за розміткою на знімку: від картинки до назви 8 px,
   від назви до ціни 16 px, від ціни до підпису 16 px. «Карточки всегда везде
   должны быть одинаковые. И проверь чтобы цена всегда во всех карточках была
   на одном уровне».
   `[Факт]` Заміряно до правки: у ряду каталогу лінія цін гуляла на 6,5 px —
   ціни зі знижкою стояли вище за звичайні. Причина — старі зсуви `top` для
   пігулки знижки (блок вище, «Пігулка ціни зі знижкою…»): пігулку давно
   прибрали, а зсуви лишились. Схожі товари на сторінці товару мали іншу
   картку: ціна 20 px замість 28, інші відступи.
   Числа нижче — відстані між блоками, а не між літерами: у шрифтів свій
   внутрішній запас над і під літерами. Підібрані замірами так, щоб на екрані
   вийшло 8 / 16 / 16 між самими літерами і краєм картинки.
   Ціна: всі частини — стара, нова і звичайна — стоять на одній базовій лінії.
   Картинка: одна пропорція 600×704 для всіх — деякі фото були на 1 px вищі,
   і ціна під ними опускалась на 1,4 px.
   Для назви лишається місце на два рядки (блок fb-catalog-align вище) — тому
   ціни в ряду на одній лінії, навіть коли назва в один рядок.
   Відкат — видалити цей блок.
   ========================================================================== */
body .qodef-woo-product-list li.product .qodef-woo-product-content { margin-top: 1px !important; }
body .qodef-woo-product-list li.product .qodef-woo-product-title { margin: 0 !important; }
body .qodef-woo-product-list li.product .qodef-woo-product-image-wrapper > img {
  aspect-ratio: 600 / 704; width: 100% !important; height: auto !important; object-fit: cover;
}
body .qodef-woo-product-list li.product .price {
  display: flex !important; flex-wrap: wrap !important; align-items: baseline !important;
  margin: 8px 0 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important;
  font-size: 28px !important; line-height: 1 !important;
}
body .qodef-woo-product-list li.product .price del,
body .qodef-woo-product-list li.product .price ins,
body .qodef-woo-product-list li.product .price > .woocommerce-Price-amount {
  height: auto !important; line-height: 1 !important; position: static !important; top: auto !important; font-size: 28px !important;
}
body .qodef-woo-product-list li.product .price del .woocommerce-Price-amount,
body .qodef-woo-product-list li.product .price ins .woocommerce-Price-amount {
  display: inline !important; line-height: 1 !important; position: static !important; top: auto !important; font-size: 28px !important;
}
body .qodef-woo-product-list li.product .price .weight {
  display: block !important; width: 100% !important; margin: 6px 0 0 !important; line-height: 20px !important;
}

/* ==========================================================================
   31. Картки товарів: кути картинки r20 і поля тексту 20 px.
   Власник 11.09.2026: «чтобы всегда углы скруглялись на r20» · «окно
   размещения названия с отступами 20 слева и 20 справа от краёв карточки.
   И цены так же соответственно и объём».
   `[Факт]` Досі скруглення було намальоване в самих файлах фото — прозорі
   кути, на екрані 1512 px близько 13 px, і воно мінялось разом із шириною
   картки. Тепер радіус задає стиль — рівно 20 px: найбільша картка на
   перевірених екранах 516 px, скруглення у файлі там 19 px, менше за 20,
   тож видно саме 20. Обрізка `overflow: hidden` разом із фото обрізає і
   смугу «super size», і плашку «ЗНИЖКА».
   Поля 20 px — у блока з назвою, ціною і підписом.
   Зазор між старою і новою ціною — 20 px праворуч від старої, у нової полів
   немає: якщо ціна не влазить у рядок і переноситься, нова стає рівно під
   старою. `column-gap` не годиться — він розсуває «/» у цінах «від / до»
   звичайних товарів (перевірено знімком на 1366 px).
   `[Факт]` Не влазить у двох товарів зі знижкою і ціною «від / до»
   (COLOMBIA SANTA BARBARA, INDONESIA FRINSA ESTATE) на екранах 900–1366 px
   і 600 px: нова ціна переходить на другий рядок. На 1512, 1440, 768 і на
   телефоні — в один рядок.
   Відкат — видалити цей блок.
   ========================================================================== */
body .qodef-woo-product-list li.product .qodef-woo-product-image {
  border-radius: 20px !important; overflow: hidden !important;
}
body .qodef-woo-product-list li.product .qodef-woo-product-content {
  padding-left: 20px !important; padding-right: 20px !important;
}
body .qodef-woo-product-list li.product .price { column-gap: 0 !important; row-gap: 0 !important; }
body .qodef-woo-product-list li.product .price del { margin: 0 20px 0 0 !important; }
body .qodef-woo-product-list li.product .price ins { margin: 0 !important; }

/* ==========================================================================
   32. Ціна «від / до» — з пробілами навколо косої; Super Size — з нового рядка.
   Власник 11.09.2026: «549 ₴ / 2299 ₴ — так правильно!» · «можно все Super
   Size перенести на вторую строку в названиях именно в карточках каталогов».
   `[Факт]` Рядок ціни був flex: у flex пробіли по краях тексту « / » між
   сумами зникають, і виходило «549 ₴/2299 ₴». Тепер рядок ціни — звичайний
   текст: пробіли на місці, суми стоять на одній базовій лінії, як і раніше.
   Стара й нова ціна всередині не розриваються (`nowrap`); зазор між ними
   20 px — 16 px поля плюс пробіл.
   `.fb-ss` — «Super Size» у назві картки, його розставляє fb-head.js
   (блок fb-ss-break). Заголовок на сторінці товару не чіпаємо.
   Відкат — видалити цей блок і блок fb-ss-break у fb-head.js.
   ========================================================================== */
body .qodef-woo-product-list li.product .price {
  display: block !important;
}
body .qodef-woo-product-list li.product .price del,
body .qodef-woo-product-list li.product .price ins,
body .qodef-woo-product-list li.product .price > .woocommerce-Price-amount {
  display: inline !important;
  white-space: nowrap !important;
}
body .qodef-woo-product-list .qodef-woo-product-title .fb-ss {
  display: block;
}
body .qodef-woo-product-list li.product .price del { margin: 0 16px 0 0 !important; }

/* ==========================================================================
   33. Плитки розділів каталогу: картинка на всю плитку, без білої рамки.
   Власник 11.09.2026: «Можно увеличить чтобы картинка занимала всю площадь
   и светлый фон чтобы ушёл? Радиусы должны быть как у светлого фона. Если да
   то сделай и если не понравится вернём как сейчас».
   `[Факт]` Біла рамка — не від малих файлів: файли від 378 px, для Ретини
   на плитку 90 px треба 180. Рамку дає стиль підрядника в «Додатковому CSS»:
   у картинки поле 10 px і білий фон. Прибираємо поле і фон — фото займає
   всю плитку 90×90, радіус той самий, 20 px.
   Обраний розділ: раніше чорна лінія йшла по краю білої рамки. На краю
   темного фото вона б зникла, тому тепер це тонке кільце з просвітом 3 px
   довкола плитки — видно на будь-якому фото.
   Розділи без картинки (Лімітована, Капсули) показують заглушку WooCommerce —
   світлу, як і раніше.
   Відкат — видалити цей блок.
   ========================================================================== */
body .qodef-woo-product-list.qodef-category-filter-type--icon .qodef-filter-category-singular .qodef-m-filter-item img {
  padding: 0 !important; background: transparent !important; border-radius: 20px !important; object-fit: cover !important;
}
body .qodef-woo-product-list .qodef-m-filter-item.qodef--active img {
  border: 0 !important; outline: 1px solid #000; outline-offset: 3px;
}

/* ==========================================================================
   34. Середні екрани: назва й ціна в картці трохи менші.
   Власник 11.09.2026: «Согласен на А» — назва влазить у два рядки, ціна
   в один, повні назви й ціни лишаються (Q178).
   Кегль залежить від ширини самої картки (одиниці `cqw`, картка — контейнер):
   назва до 20 px, ціна до 28 px; на вужчих картках менше, але не менше
   16 і 22 px. Коефіцієнти заміряні по найдовших назвах і найширшій ціні
   каталогу (дві картки зі знижкою і ціною «від / до») з запасом ~1 %,
   щоб і Safari не переносив. Зазор між старою і новою ціною — 0,57 em,
   тобто 16 px при 28 px, і зменшується разом із ціною.
   `[Факт]` Де картка настільки вузька, що впирається в нижню межу 16 / 22 px
   (4 колонки на 1025–1240 px, 3 колонки на 769–900 px, 2 колонки на
   481–600 px), дві ціни «від / до» зі знижкою ще переносяться, а на 769,
   481 і 1025 px 1–3 найдовші назви займають три рядки.
   Відкат — видалити цей блок.
   ========================================================================== */
body .qodef-woo-product-list li.product { container-type: inline-size; }
body .qodef-woo-product-list li.product .qodef-woo-product-title,
body .qodef-woo-product-list li.product .qodef-woo-product-title a {
  font-size: clamp(16px, calc((100cqw - 40px) * 0.0655), 20px) !important;
}
body .qodef-woo-product-list li.product .price,
body .qodef-woo-product-list li.product .price del,
body .qodef-woo-product-list li.product .price ins,
body .qodef-woo-product-list li.product .price > .woocommerce-Price-amount,
body .qodef-woo-product-list li.product .price del .woocommerce-Price-amount,
body .qodef-woo-product-list li.product .price ins .woocommerce-Price-amount {
  font-size: clamp(22px, calc((100cqw - 40px) * 0.0905), 28px) !important;
}
body .qodef-woo-product-list li.product .price del { margin: 0 0.57em 0 0 !important; }

/* ==========================================================================
   35. Уточнення 11.09.2026: окантовка плиток розділів і відступ до назви.
   Власник: «Сделай белую окантовку 3px и у выбранных черный контур как
   сейчас. По принципу как было раньше только белый контур 3px» · «название
   от низа карточки 8px увеличь до 12».
   Плитка розділу: біла рамка 3 px усередині плитки 90×90 (фото 84×84),
   радіус зовні 20 px; у вибраного — чорна лінія 1 px одразу по краю білої
   рамки, без просвіту — як було раніше, тільки біле поле тонше.
   Картка товару: від картинки до назви на екрані 12 px. Поле рахується від
   кегля назви (`12px - 0.335em`), бо кегль тепер залежить від ширини картки
   (блок 34), а внутрішній запас шрифту — від кегля.
   Ціна на картках від 345 px (екран власника 1512 px і ширші, телефон) —
   рівно 28 px, як до блоку 34: там вона влазить і так, а відступи 16 / 16
   на екрані виходять точні.
   Відкат — видалити цей блок (повернуться блоки 33 і 34 як були).
   ========================================================================== */
body .qodef-woo-product-list.qodef-category-filter-type--icon .qodef-filter-category-singular .qodef-m-filter-item img {
  border: 3px solid #fff !important; box-sizing: border-box !important; background: #fff !important;
}
body .qodef-woo-product-list .qodef-m-filter-item.qodef--active img {
  outline: 1px solid #000 !important; outline-offset: 0 !important;
}
body .qodef-woo-product-list li.product .qodef-woo-product-content { margin-top: 0 !important; }
body .qodef-woo-product-list li.product .qodef-woo-product-title { margin-top: calc(12px - 0.335em) !important; }
@container (min-width: 345px) {
  body .qodef-woo-product-list li.product .price,
  body .qodef-woo-product-list li.product .price del,
  body .qodef-woo-product-list li.product .price ins,
  body .qodef-woo-product-list li.product .price > .woocommerce-Price-amount,
  body .qodef-woo-product-list li.product .price del .woocommerce-Price-amount,
  body .qodef-woo-product-list li.product .price ins .woocommerce-Price-amount {
    font-size: 28px !important;
  }
}

/* ==========================================================================
   36. Стара ціна (закреслена) — сіра #98A2B3.
   Власник 11.09.2026: «У товаров где есть цена со скидкой, цену без скидки
   ту что зачёркнута сделай цвет 98A2B3».
   І в картках товарів, і на сторінці товару; лінія закреслення того ж
   кольору. Нова ціна лишається червоною #FC4335.
   Відкат — видалити цей блок.
   ========================================================================== */
body .qodef-woo-product-list li.product .price del,
body .qodef-woo-product-list li.product .price del .woocommerce-Price-amount,
body .qodef-woo-product-list li.product .price del .woocommerce-Price-currencySymbol,
body .summary .price del,
body .summary .price del .woocommerce-Price-amount,
body .summary .price del .woocommerce-Price-currencySymbol {
  color: #98A2B3 !important;
  text-decoration-color: #98A2B3 !important;
}

/* ==========================================================================
   37. Іконка кошика на картці — кругла; після «Додати в кошик» нічого
   не міняється. Власник 12.09.2026: «иконка корзины сделай ее круглой»,
   «убери везде после нажатия кнопки добавить в кошик чтобы кнопка
   уменьшалась и появлялась кнопка переглянуть кошик, убери и на мобе
   и на десктоп».
   Було: іконка 50×50 з радіусом 20; після натискання тема ховала кнопку
   (`.added { display:none }`) і на її місці показувала посилання
   «Переглянути кошик» (`a.added_to_cart`); на сторінці товару це
   посилання ставало поруч із кнопкою і стискало її (479 → 150 px).
   Відкат — видалити цей блок.
   ========================================================================== */
body .qodef-woo-product-list .qodef-woo-product-image-inner a.add_to_cart_button,
body .qodef-woo-product-list .qodef-woo-product-image-inner a.product_type_variable,
body .qodef-woo-product-list .qodef-woo-product-image-inner a.added_to_cart,
body li.wc-block-grid__product .wp-block-button__link,
body li.wc-block-grid__product .add_to_cart_button,
body li.wc-block-grid__product .wc-block-grid__product-add-to-cart .button {
    border-radius: 50% !important;
}
/* Обгортка іконки (`.qodef-woo-product-image-inner`, 50×50) лишалась
   квадратною, а тінь теми `0 0 15px rgba(0,0,0,.07)` лежить саме на ній —
   довкола кола проступав квадрат (власник 12.09: «видно что изначально
   это квадрат»). Скругляємо обгортку — тінь іде за радіусом. */
body .qodef-woo-product-list .qodef-woo-product-image-inner {
    border-radius: 50% !important;
}
/* Сіра дужка зліва по контуру (власник 12.09) — рамка теми
   `1px solid #dfdfdf` на самій кнопці; на колі вона видна як дуга.
   Перевірено підміною стилів у браузері: без рамки край чистий. */
body .qodef-woo-product-list .qodef-woo-product-image-inner a.add_to_cart_button,
body .qodef-woo-product-list .qodef-woo-product-image-inner a.add_to_cart_button.added,
body li.wc-block-grid__product .add_to_cart_button {
    border: 0 !important;
}
/* посилання «Переглянути кошик» після додавання — ніде не показуємо */
body a.added_to_cart,
body a.added_to_cart.wc-forward {
    display: none !important;
}
/* кнопка на картці лишається на місці й після додавання.
   На сторінці товару (обгортка `#qodef-woo-page`) тема має правило
   `#qodef-woo-page .button.added { width: auto !important; margin-right: 10px }`
   — у «схожих товарах» після додавання коло стискалось до смужки 0×50
   (власник 12.09: «какое-то пятно»; відтворено у WebKit). Селектор з ID
   переважує його. */
body .qodef-woo-product-list .qodef-woo-product-image-inner a.add_to_cart_button.added,
#qodef-woo-page .qodef-woo-product-list .qodef-woo-product-image-inner a.add_to_cart_button.added,
body li.wc-block-grid__product .add_to_cart_button.added,
#qodef-woo-page li.wc-block-grid__product .add_to_cart_button.added {
    display: flex !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    margin: 0 !important;
}
/* на сторінці товару тема давала кнопці відступ під посилання — знімаємо;
   у товару з вибором кнопка після додавання ужималась 479 → 150 px —
   лишаємо їй усю ширину ряду, як до натискання */
body .summary button.single_add_to_cart_button.added {
    margin-right: 0 !important;
}
body .summary .variations_button button.single_add_to_cart_button.added {
    flex: 1 1 auto !important;
}

/* ==========================================================================
   38. Пілюля кошика: лічильник — коло радіусом 14 у центрі правої дуги,
   іконка — у центрі лівої; цифра по центру кола; порожній кошик — біле коло,
   є товари — зелене. Власник 12.09.2026: «в пилюле корзины круг счетчика
   сделай радиусом 14, выстави чтобы центр радиуса пилюли справа и центр круга
   счетчика совпадали и вертикально и горизонтально. Внутри круга счетчика
   также выровняй цифры по центру круга. Если товаров 0, то фон белый, если
   что-то есть то зеленый как сейчас».
   Було: пілюля 60×38 (поле 0 10), у ній рядок 40×18 — іконка 16 px і коло
   18 px з чорною рамкою 1 px, цифра рядком 18 px. Стало: пілюля ті самі
   60×38 (розмір лишаємо — по ньому скрипт ставить розпірку), діти стоять
   абсолютно: іконка з центром (19; 19), коло 22 px (спершу 28, потім
   власник: «уменьши с 28 до 22») з центром (41; 19) —
   це центри дуг пілюлі радіусом 19 (радіус 20 браузер ріжe до половини
   висоти). Клас порожнечі `fb-count-empty` ставить `fb-head.js`.
   Селектори без `body >`: скрипт переносить пілюлю в `body` уже після
   розбору шапки, а стилі мають діяти з першого кадру — інакше лічильник
   на мить малюється старим (зелене коло 18 px).
   Відкат — видалити цей блок і блок скрипта.
   ========================================================================== */
#block-46,
#block-48 {
    position: relative;   /* до перенесення скриптом; після — fixed із блоку 27 (селектор точніший) */
    width: 60px !important;
    height: 38px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
#block-46 > p,
#block-48 > p {
    margin: 0 !important;
    height: 100% !important;
    line-height: 0 !important;
}
#block-46 .xoo-wsc-sc-cont,
#block-48 .xoo-wsc-sc-cont {
    position: static !important;
    height: 100% !important;
}
#block-46 .xoo-wsc-cart-trigger,
#block-48 .xoo-wsc-cart-trigger {
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    display: block !important;
    margin: 0 !important;
}
#block-46 .xoo-wsc-sc-bki,
#block-48 .xoo-wsc-sc-bki {
    position: absolute !important;
    left: 11px !important;
    top: 11px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    line-height: 16px !important;
}
#block-46 span.xoo-wsc-sc-count,
#block-48 span.xoo-wsc-sc-count {
    position: absolute !important;
    right: 8px !important;   /* 12.09 15:30, власник: «уменьши с 28 до 22» — центр той самий (41; 19) */
    top: 8px !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    font-size: 13px !important;
    text-align: center !important;
    background: #5EFF95 !important;
    color: #000 !important;
}
#block-46 span.xoo-wsc-sc-count.fb-count-empty,
#block-48 span.xoo-wsc-sc-count.fb-count-empty {
    background: #fff !important;
}

/* ===== fb-awaiting ===== */
/* Плашка «Очікуємо» (14.09.2026, `fb-awaiting.php`): геометрія та сама, що в «ЗНИЖКА»
   (блок fb-sale-look). Колір — власник 15.09.2026: «Цвет плашки 65E1FF» (було: фон #0C0C0C,
   напис білий); напис чорний — білий на світло-голубому не читається. Під плашкою на сторінці
   товару — напис замість кнопки «в кошик». */
.qodef-woo-product-mark.fb-awaiting-mark {
    background-color: #65E1FF !important;
    color: #0C0C0C !important;
}
.fb-awaiting-note {
    display: inline-block;
    margin: 16px 0 0;
    padding: 12px 24px;
    border-radius: 999px;
    background: #F2F4F7;
    color: #0C0C0C;
    font-size: 16px;
    line-height: 1.2;
}

/* ===== fb-no-hairline ===== */
/* 17.09.2026, власник: «внизу серого фона в разделе направлений каталога 100% убери
   полоску. Мы нигде не используем полосок при переходе цветом».
   `[Факт]` лінію малює вставка підрядника у сторінці: `.qodef-category-holder`
   з `border-bottom: 1px solid #ddd` (коментар «Разделитель»). Знімаємо тільки лінію,
   сірий фон #EDEFF2 лишається — перехід кольором без розділювача. */
.qodef-category-holder {
    border-bottom: 0 !important;
}