/* ==========================================================================
   FLORISTERIA 2026 — plugins.css
   Перебивання стилів плагінів (YITH, WooSwipe, Saphali/prettyPhoto, IVPA, CusRev,
   GF) — етапи 4–8. Етап 2: лише вікно вибору міста fm-city (сніпет у БД, inline
   <style>: білий фон, #1b1b1b, радіуси 16/10, тінь), яке відкривають тригери
   .open-geomodal у топбарі й off-canvas. Специфічність body #fm-city … > .fm-city__*.
   ========================================================================== */

/* Binotel (віджет, z-index 99999999): поки відкритий off-canvas (body.is-locked) — ховаємо,
   щоб плаваючі кнопки не лежали поверх модальної панелі й не перехоплювали кліки */
body.is-locked #bwc-wrap,
body.is-locked [class^="bingc-"],
body.is-locked [class*=" bingc-"] { display: none !important; }
/* Кнопки Binotel (#bwc-widget-action, фіксовані в правому нижньому куті, ≈56–70px заввишки
   з відступом 10px) — коли сторінку прокручено до низу, нижній рядок футера (©, оплата, слоган)
   має стояти вище за них. Відступаємо знизу, а не справа: рядок лишається вирівняним по лінії
   й соцмережах (референс), а на mobile — по центру, як лого/меню/іконки над ним. */
.fl-footer { padding-bottom: 88px; }
/* Той самий запас під плаваючі кнопки Binotel на службових сторінках із коротким контентом:
   на mobile віджет лягав на H1 і рядок посилань 404 та на список соцмереж «Ми на зв'язку».
   Колір віджета — у кабінеті Binotel, у шарі теми не керується (передано замовнику). */
@media (max-width: 767px) {
  .fl-state__inner, .fl-contacts__socials { padding-bottom: 96px; }
}

/* ==========================================================================
   YITH Ajax Product Filter (пресет block-7 у sidebar-shop → drawer «Фільтр», етап 4).
   Опції плагіна в БД не чіпаємо: колір задаємо через його ж змінну --yith-wcan-*.
   ========================================================================== */
.fl-drawer--filter {
  --yith-wcan-filters_colors_accent: var(--fl-deep-sage);
  /* YITH збирає з цих трійок rgba() — лише числа, тому var() тут неможливий:
     мають відповідати --fl-deep-sage (#6F7E62) у tokens.css */
  --yith-wcan-filters_colors_accent_r: 111;
  --yith-wcan-filters_colors_accent_g: 126;
  --yith-wcan-filters_colors_accent_b: 98;
  --yith-wcan-filters_colors_titles: var(--fl-charcoal);
  --yith-wcan-filters_colors_background: transparent;
}
.fl-drawer__widgets, .fl-drawer__widgets li.homepage-widget-block { margin: 0; padding: 0; list-style: none; }
.fl-drawer__widgets > li + li { margin-top: 8px; }
.fl-drawer__widgets .widgettitle { display: none; }
.fl-drawer .yith-wcan-filters { margin: 0; padding: 0; border: 0; background: none; }
.fl-drawer .yith-wcan-filters .filters-container { padding: 0; }
.fl-drawer .yith-wcan-filters form { margin: 0; }
.fl-drawer .yith-wcan-filter { padding: 18px 0; border-bottom: 1px solid var(--fl-greige-50); }
.fl-drawer .yith-wcan-filter:last-child { border-bottom: 0; }
.fl-drawer .yith-wcan-filter .filter-title {
  margin: 0 0 12px; padding: 0; color: var(--fl-charcoal); background: none;
  font-family: var(--fl-font-main); font-size: var(--fl-label-size); line-height: var(--fl-label-lh);
  font-weight: var(--fl-w-medium); letter-spacing: var(--fl-label-ls); text-transform: uppercase;
}
.fl-drawer .yith-wcan-filter .filter-items .filter-item { margin: 0; padding: 0; }
.fl-drawer .yith-wcan-filter .filter-items label {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 0;
  font-family: var(--fl-font-main); font-weight: var(--fl-w-light); cursor: pointer;
}
/* Чекбокси: батьківський style.min.css робить їх рожевими (#f4abc0) з власною ::before-галочкою */
.fl-drawer .yith-wcan-filter .filter-items label input[type="checkbox"] {
  width: 18px; height: 18px; min-width: 18px; margin: 0; flex: 0 0 auto;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 1px solid var(--fl-line); border-radius: 0;
  position: relative; cursor: pointer;
}
.fl-drawer .yith-wcan-filter .filter-items label input[type="checkbox"]::before { content: none; display: none; }
.fl-drawer .yith-wcan-filter .filter-items label input[type="checkbox"]:checked {
  background: var(--fl-deep-sage); border-color: var(--fl-deep-sage);
}
.fl-drawer .yith-wcan-filter .filter-items label input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--fl-ivory); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.fl-drawer .yith-wcan-filter .filter-items .filter-item > label > a {
  font-family: var(--fl-font-main); font-size: 17px; font-weight: var(--fl-w-light);
  letter-spacing: var(--fl-body-ls); color: var(--fl-charcoal); text-transform: none;
}
/* Активний пункт: колір ТЕКСТУ — Charcoal (Deep Sage на Ivory = 4,07:1 < 4,5:1, а виняток
   decisions §29 обмежений топбаром); стан несуть вага Medium і позначений чекбокс (Deep Sage). */
.fl-drawer .yith-wcan-filter .filter-items .filter-item.active > label > a { color: var(--fl-charcoal); font-weight: var(--fl-w-medium); }
.fl-drawer .yith-wcan-filter .filter-items .filter-item > label > a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Лічильники «(67)»: правило плагіна
     .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item .item-count {color:#B4B4B4;font-size:1em}
   має специфічність (0,5,0) і перебивало наш попередній селектор (0,3,0) — на сторінці лічильники
   малювалися сірим #B4B4B4 (1,94:1 на Ivory, поза 8-тоновою палітрою: ТЗ п.1/п.18, WCAG 1.4.3)
   кеглем 17px замість 14px. Піднімаємо специфічність до (0,6,0), щоб перемагав каскад теми. */
.fl-drawer .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item .item-count,
.fl-drawer .yith-wcan-filter .item-count { color: var(--fl-charcoal-70); font-size: 14px; }
.fl-drawer .yith-wcan-filter .filter-items.level-0 ul { padding-left: 18px; }
/* Слайдер ціни: поля під Ivory/Cream, повзунок Deep Sage.
   overflow-x: clip — плашки значень (.irs-single / .irs-from / .irs-to) ion.rangeSlider ставить
   inline-стилем left відносно треку, і біля лівого краю шкали вони виходили за панель drawer-а
   (на 390 px — на темний оверлей). Обрізаємо їх у межах контентної колонки; самі значення
   лишаються видимими в полях «від / до» під шкалою. Вертикальне переповнення не чіпаємо (clip,
   а не hidden, тож повзунки не обрізаються зверху). */
.fl-drawer .yith-wcan-filter .price-slider.both { padding: 18px 12px 0; overflow-x: clip; }
.fl-drawer .yith-wcan-filter .price-slider.both .price-slider-min,
.fl-drawer .yith-wcan-filter .price-slider.both .price-slider-max {
  width: 104px; min-height: 44px; padding: 0 10px; margin: 0;
  font-family: var(--fl-font-main); font-size: 16px; font-weight: var(--fl-w-light); color: var(--fl-charcoal);
  background: var(--fl-cream); border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
  appearance: textfield; -moz-appearance: textfield;
}
/* Підписи «ЦІНА ВІД / ЦІНА ДО» над полями (обгортку .fl-price-field і <label for> додає
   assets/js/woo.js — у режимі «slider + fields» плагін жодного <label> не друкує).
   inline-grid, щоб обидва поля лишилися в одному рядку, як були. */
.fl-drawer .yith-wcan-filter .price-slider .fl-price-field {
  display: inline-grid; gap: 4px; vertical-align: top; margin-top: 4px;
}
.fl-drawer .yith-wcan-filter .price-slider .fl-price-field + .fl-price-field { margin-left: 10px; }
.fl-drawer .yith-wcan-filter .price-slider .fl-price-field__label {
  font-family: var(--fl-font-main); font-size: 11px; line-height: 1.4;
  letter-spacing: var(--fl-label-ls); text-transform: uppercase;
  font-weight: var(--fl-w-medium); color: var(--fl-charcoal-70); cursor: pointer;
}
.fl-drawer .yith-wcan-filter .price-slider .irs-line { background: var(--fl-greige-50); }
.fl-drawer .yith-wcan-filter .price-slider .irs-handle { border-width: 3px; }
.fl-drawer .yith-wcan-filter .price-slider :is(.irs-from, .irs-to, .irs-single) {
  font-family: var(--fl-font-main); font-size: 12px; letter-spacing: var(--fl-body-ls); border-radius: 0;
}
.fl-drawer .yith-wcan-filter .price-slider :is(.irs-min, .irs-max) { font-family: var(--fl-font-main); color: var(--fl-charcoal-70); }
/* Кнопка скидання плагіна: батьківський .button робить її рожевою на всю ширину */
.fl-drawer .yith-wcan-reset-filters {
  width: auto; margin: 16px 0 0; padding: 0 22px; min-height: 44px; overflow: visible;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fl-font-main); font-size: 12px; font-weight: var(--fl-w-medium); line-height: 1;
  letter-spacing: var(--fl-btn-ls); text-transform: uppercase;
  color: var(--fl-charcoal); background: transparent; border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
}
.fl-drawer .yith-wcan-reset-filters:hover { color: var(--fl-charcoal); background: transparent; border-color: var(--fl-charcoal); }
/* Оверлей завантаження YITH усередині drawer-а і каталогу */
.fl-catalog .blockUI.blockOverlay, .fl-drawer .blockUI.blockOverlay { background: var(--fl-ivory) !important; }

/* ==========================================================================
   WOOSWIPE (галерея товару, #wooswipe на woocommerce_before_single_product_summary 20)
   Етап 5: великий розмір фото задає фільтр single_product_large_thumbnail_size → large
   (inc/woo-single.php); тут — бренд-оформлення й приховування мініатюр при одному фото.
   ========================================================================== */
.fl-product__gallery #wooswipe { position: relative; display: grid; gap: 12px; margin: 0; width: 100%; }
/* Скидання фіксованої висоти контейнера: батько задає .single-product-main-image
   height: 580px (style.css:4871), calc(44.2vw - 10px) (:8777) і на <a> calc(94.1vw - 10px)
   (:9877), а плагін додає overflow: hidden (wooswipe/public/slick/slick.css:129) — портретне
   фото 4:5 обрізалося знизу на всіх ширинах. Висоту має задавати сама картинка (aspect-ratio). */
.fl-product__gallery #wooswipe .woocommerce-product-gallery__image,
.fl-product__gallery #wooswipe .single-product-main-image {
  margin: 0; width: 100%; max-width: 100%; height: auto; max-height: none;
  display: block; background: var(--fl-cream);
}
.fl-product__gallery #wooswipe .woocommerce-main-image {
  display: block; height: auto; max-height: none;
}
.fl-product__gallery #wooswipe .single-product-main-image img,
.fl-product__gallery #wooswipe .swiper-slide img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center;
  border-radius: var(--fl-radius);
}
/* Мініатюри: батьківський #wooswipe .thumbnails має width: calc(44.2vw - 10px) і центрування */
.fl-product__gallery #wooswipe .thumbnails {
  width: 100%; max-width: 100%; height: auto; margin: 0; display: block;
}
/* Трек slick центрувався в колонці (margin-left: auto від плагіна), тож мініатюри «висіли»
   посередині під фото шириною 716px. Притискаємо ліворуч — під край головного фото.
   Раніше тут стояло justify-content: flex-start, яке при display: block не діяло взагалі. */
.fl-product__gallery #wooswipe .thumbnails .slick-list,
.fl-product__gallery #wooswipe .thumbnails .slick-track { margin-left: 0; margin-right: auto; }
.fl-product__gallery #wooswipe .thumbnails .thumbnail-nav { width: 100%; margin: 0; padding: 0; }
.fl-product__gallery #wooswipe .thumbnails li { list-style: none; margin: 0; padding: 0 6px 0 0; }
.fl-product__gallery #wooswipe .thumbnails .thumb {
  cursor: pointer; background: var(--fl-cream); border: 1px solid transparent; border-radius: var(--fl-radius);
  overflow: hidden; transition: border-color var(--fl-dur) var(--fl-ease);
}
.fl-product__gallery #wooswipe .thumbnails .thumb:hover { border-color: var(--fl-greige); }
/* max-height: none — обов'язково: wooswipe.css задає .thumbnail-nav .slick-slide img
   { max-height: 100px } (0,3,1), і без скидання aspect-ratio 1/1 не спрацьовував — на 1440
   мініатюри виходили 128×102, а на 390 (ширина 97px < 100px) 97×97, тобто пропорція «стрибала». */
.fl-product__gallery #wooswipe .thumbnails .thumb img {
  display: block; width: 100%; height: auto; max-height: none;
  aspect-ratio: 1 / 1; object-fit: cover; background: var(--fl-cream);
}
.fl-product__gallery #wooswipe .thumbnails .slick-current .thumb { border-color: var(--fl-deep-sage); }
/* Стрілки slick: коло #000 з опцій плагіна — робимо непомітними, лишаємо клікабельність */
.fl-product__gallery #wooswipe .thumbnails .slick-arrow { width: 30px; height: 40px; opacity: 0.6; }
.fl-product__gallery #wooswipe .thumbnails .slick-arrow:hover { opacity: 1; }
.fl-product__gallery #wooswipe .wooswipe-popup svg circle { fill: var(--fl-charcoal) !important; }
/* Одне фото — мініатюр не показуємо (плагін друкує їх і для одного зображення:
   опція hide_thumbnails вимкнена, wooswipe-public-display.php: count>1 || !hide_thumbs) */
.fl-product--one-image #wooswipe .thumbnails { display: none; }

/* ==========================================================================
   SAPHALI BUY NOW («Купити в 1 клік», рішення п.13 — лишається, але менш акцентно)
   Плагін друкує inline <style> у body (float: left, padding), тому специфічність 0,2,0.
   ========================================================================== */
.fl-product .single-buy-now {
  float: none; width: auto; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
.fl-product .single-buy-now span { display: none; } /* «– або –» */
.fl-product .single-buy-now button.button,
.fl-product .single-buy-now .button {
  width: auto; min-height: 0; padding: 4px 0; margin: 0; overflow: visible;
  font-family: var(--fl-font-main); font-size: var(--fl-label-size); line-height: var(--fl-label-lh);
  font-weight: var(--fl-w-medium); letter-spacing: var(--fl-label-ls); text-transform: uppercase;
  color: var(--fl-charcoal); background: none; border: 0; border-bottom: 1px solid var(--fl-greige);
  border-radius: 0; cursor: pointer;
  transition: color var(--fl-dur) var(--fl-ease), border-color var(--fl-dur) var(--fl-ease);
}
.fl-product .single-buy-now button.button:hover,
.fl-product .single-buy-now .button:hover { color: var(--fl-charcoal); background: none; border-color: var(--fl-charcoal); }

/* ==========================================================================
   IVPA «Подарунки до букетів» (етап 6, ТЗ п.12).
   Вивід блоку з форми товару знято в PHP (inc/woo-gifts.php:
   fl_gifts_unhook_ivpa_output()) — подарунки тепер у блоці .fl-gifts
   (assets/css/woo.css) після додавання в кошик. Правило нижче — страхувальне:
   якщо хтось змінить хук у налаштуваннях плагіна, блок все одно не з’явиться
   в основній інформаційній зоні картки букета.
   ========================================================================== */
.fl-product #ivpa-content,
.fl-product .ivpa-content { display: none !important; }

/* Binotel: коли внизу екрана показано sticky «ДОДАТИ В КОШИК» (mobile), плаваючі кнопки
   віджета лягають поверх правої частини «ДОДАТИ В КОШИК» (перевірено elementFromPoint на 390px).
   Піднімаємо віджет над панеллю; !important — бо правила плагіна задані за id.
   Клас fl-sticky-atc-on на <body> ставить assets/js/woo.js разом із .is-visible: селектор :has()
   лишаємо другим рядком як запасний для випадку, якщо JS-клас не проставиться.
   ГОЛОВНЕ: фіксований контейнер кнопок — #bwc-widget-action (bottom: 20px; z-index: 99999998),
   а не #bwc-wrap (він static) — без нього правило нічого не зсувало. */
@media (max-width: 1023.98px) {
  body.fl-sticky-atc-on #bwc-widget-action,
  body.fl-sticky-atc-on #bingc-phone-button,
  body.fl-sticky-atc-on #bingc-passive,
  body.fl-sticky-atc-on #bingc-active,
  body.fl-sticky-atc-on #bwc-wrap,
  body:has(.fl-sticky-atc.is-visible) #bwc-widget-action,
  body:has(.fl-sticky-atc.is-visible) #bingc-phone-button,
  body:has(.fl-sticky-atc.is-visible) #bingc-passive,
  body:has(.fl-sticky-atc.is-visible) #bingc-active,
  body:has(.fl-sticky-atc.is-visible) #bwc-wrap { bottom: 96px !important; }
}

body #fm-city { font-family: var(--fl-font-main); letter-spacing: var(--fl-body-ls); }
body #fm-city .fm-city__backdrop { background: var(--fl-charcoal-55); }
body #fm-city .fm-city__card {
  background: var(--fl-ivory); color: var(--fl-charcoal);
  border-radius: var(--fl-radius); box-shadow: none; padding: 36px 28px 28px;
}
body #fm-city .fm-city__x { color: var(--fl-charcoal); font-family: var(--fl-font-main); }
body #fm-city .fm-city__title {
  font-family: var(--fl-font-main); font-size: 28px; line-height: 1.12; font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
}
body #fm-city .fm-city__hint {
  font-family: var(--fl-font-main); font-size: 17px; font-weight: var(--fl-w-light); color: var(--fl-charcoal);
}
body #fm-city .fm-city__btn {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--fl-charcoal); border-radius: var(--fl-radius);
  font-family: var(--fl-font-main); font-size: 14px; font-weight: var(--fl-w-medium);
  letter-spacing: var(--fl-btn-ls); text-transform: uppercase; color: var(--fl-charcoal); background: transparent;
}
body #fm-city .fm-city__btn:hover,
body #fm-city .fm-city__btn:focus-visible { background: var(--fl-charcoal); color: var(--fl-ivory); }

/* ==========================================================================
   Select2 / selectWoo (WooCommerce + ThemeHigh Checkout Field Editor), етап 7.
   ========================================================================== */
/* Поле «ЧАС ДОСТАВКИ» (#billing_time) — єдиний <select> на checkout. ThemeHigh безумовно
   ініціалізував на ньому selectWoo (`$("select.thwcfd-enhanced-select").selectWoo(...)`), тому
   нативний select із класами `fl-input fl-select` ховався до 1px (`.select2-hidden-accessible
   {width:1px!important}`), а видимий віджет малювався БІЛИМ із рамкою #e1e1e1, текстом #949494
   і батьківським ObjektivMk1_Trial_300 — browser-style, що заборонено ТЗ п.14.
   Основне виправлення — у шарі теми: `add_filter('thwcfd_enable_select2_for_select_fields',
   '__return_false')` (inc/woo-cart-checkout.php), після чого лишається наш нативний select.
   Правила нижче — СТРАХОВКА: якщо select2 з'явиться з іншого джерела (інший плагін, чи
   фільтр перевизначать), віджет однаково буде у фірмових кольорах, а не білим.
   Селектори з `.select2-container--default` (0,2,0)+ перебивають `select2.css` WooCommerce;
   `__rendered` з !important — бо батько ставить `color:#949494 !important`. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.woocommerce-input-wrapper .select2 .selection .select2-selection {
  min-height: 52px; padding: 0; box-sizing: border-box;
  background: var(--fl-cream); border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce-input-wrapper .select2 .selection .select2-selection .select2-selection__rendered {
  padding: 0 42px 0 16px; line-height: 50px;
  font-family: var(--fl-font-main) !important; font-size: 18px; font-weight: var(--fl-w-light);
  color: var(--fl-charcoal) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--fl-charcoal-70); }
/* Стрілка — та сама, що в .fl-select (батько підставляє свій arrow.svg) */
.select2-container--default .select2-selection--single .select2-selection__arrow,
.woocommerce-input-wrapper .select2 .selection .select2-selection .select2-selection__arrow {
  top: 0; right: 0; width: 42px; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C2A26' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--fl-deep-sage); }
.select2-container--default .select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
  font-family: var(--fl-font-main); color: var(--fl-charcoal);
  background: var(--fl-ivory); border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
}
.select2-container--default .select2-results__option {
  padding: 10px 16px; font-size: 17px; font-weight: var(--fl-w-light); color: var(--fl-charcoal);
}
/* Дефолт select2 — синій #0073aa (колір WP, поза палітрою) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--fl-cream); color: var(--fl-charcoal);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--fl-cream); color: var(--fl-charcoal); font-weight: var(--fl-w-medium);
}