/* ==========================================================================
   FLORISTERIA 2026 — woo.css
   Етап 2: випадний кошик у шапці (розмітка — cart/mini-cart.php батька, до копії
   шаблону з WC 10.1.4 на етапі 7).
   Етап 4: каталог і пошук (шапка каталогу, сітка, drawer-и ФІЛЬТР / СОРТУВАННЯ,
   пагінація, порожній стан, сповіщення, крихти, сторінка «Обране»).
   Товар, кошик, checkout, форми, акаунт — етапи 5–7а.
   ========================================================================== */

/* ---------- MINI-CART (усередині .fl-minicart__body) --------------------- */
/* Батьківський .cart_list: height 300px + overflow: scroll, Objektiv uppercase у назвах — скидаємо */
.fl-minicart__body .woocommerce-mini-cart { display: grid; gap: 16px; margin: 0; padding: 0; height: auto; overflow: visible; }
/* Футер панелі (woocommerce/cart/mini-cart.php): відбивка й лінія — ті самі, що раніше давав
   липкий блок кнопок, тому власний margin-top кнопок тут знімаємо. */
.fl-minicart__foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--fl-greige-50);
}
.fl-minicart__foot .woocommerce-mini-cart__buttons { margin-top: 0; }
.fl-minicart__body .woocommerce-mini-cart-item > div > a,
.fl-minicart__body .woocommerce-mini-cart-item .variation {
  font-family: var(--fl-font-main); color: var(--fl-charcoal); text-transform: none;
  white-space: normal; width: auto; overflow-wrap: anywhere;
}
.fl-minicart__body .woocommerce-mini-cart-item a.remove { background: none; }
.fl-minicart__body .woocommerce-mini-cart-item {
  position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start;
  padding: 0 28px 16px 0; margin: 0; border-bottom: 1px solid var(--fl-greige-50);
  list-style: none;
}
/* Батьківське .cart_list li .mini-cart_img{70×70} (0,2,1) — перебиваємо вищою специфічністю */
.fl-minicart__body .cart_list li .mini-cart_img {
  display: block; min-width: 0; width: 64px; height: auto; aspect-ratio: 4 / 5; padding: 0; margin: 0;
  overflow: hidden; background: var(--fl-cream); border: 0;
}
.fl-minicart__body .mini-cart_img img { width: 100%; height: 100%; object-fit: cover; }
.fl-minicart__body .woocommerce-mini-cart-item > div { display: grid; gap: 4px; min-width: 0; }
.fl-minicart__body .woocommerce-mini-cart-item > div > a {
  font-size: 17px; line-height: 1.25; font-weight: var(--fl-w-medium); letter-spacing: var(--fl-h3-ls);
}
.fl-minicart__body .woocommerce-mini-cart-item > div > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fl-minicart__body .quantity { font-family: var(--fl-font-main); font-size: 16px; font-weight: var(--fl-w-light); color: var(--fl-charcoal); }
.fl-minicart__body .variation { margin: 0; font-size: 14px; display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; }
.fl-minicart__body .variation dt, .fl-minicart__body .variation dd { margin: 0; }
/* Батьківські .cart_list li div span (0,1,3) і .cart_list li div .variation dd p (0,2,4) ставлять
   Objektiv 14px #151515 на ціну, «1 ×» і назви подарунків IVPA — повертаємо Cormorant / Charcoal (ТЗ п.1) */
.fl-minicart__body .cart_list li.woocommerce-mini-cart-item div span:not(.quantity),
.fl-minicart__body .cart_list li.woocommerce-mini-cart-item div .variation dd,
.fl-minicart__body .cart_list li.woocommerce-mini-cart-item div .variation dd p {
  font-family: var(--fl-font-main); font-size: inherit; font-weight: inherit; color: inherit;
  letter-spacing: inherit; text-transform: none;
}
.fl-minicart__body .cart_list li.woocommerce-mini-cart-item div .variation dd p { margin: 0; }
/* «×» видалення — без іконок батька */
.fl-minicart__body a.remove {
  position: absolute; top: 0; right: 0; transform: none; padding: 0; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fl-charcoal); font-size: 0; line-height: 1;
}
.fl-minicart__body a.remove::before { content: "×"; font-size: 22px; font-weight: var(--fl-w-light); }
/* «×» — це гліф-текст, тож hover не кольором (Deep Sage на Ivory = 4,07:1 < 4,5:1),
   а вагою: контраст лишається 13,4:1. */
.fl-minicart__body a.remove:hover { color: var(--fl-charcoal); }
.fl-minicart__body a.remove:hover::before { font-weight: var(--fl-w-medium); }

.fl-minicart__body .woocommerce-mini-cart__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 16px 0 0; font-size: 18px;
}
.fl-minicart__body .woocommerce-mini-cart__total strong {
  font-size: var(--fl-label-size); letter-spacing: var(--fl-label-ls); text-transform: uppercase;
}
.fl-minicart__body .woocommerce-mini-cart__buttons { display: grid; gap: 8px; margin: 16px 0 0; }
.fl-minicart__body .woocommerce-mini-cart__buttons a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  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;
  border: 1px solid var(--fl-greige); border-radius: var(--fl-radius); color: var(--fl-charcoal); background: transparent;
  transition: background-color var(--fl-dur) var(--fl-ease), color var(--fl-dur) var(--fl-ease), border-color var(--fl-dur) var(--fl-ease);
}
.fl-minicart__body .woocommerce-mini-cart__buttons a:hover { border-color: var(--fl-charcoal); }
.fl-minicart__body .woocommerce-mini-cart__buttons a.checkout {
  background: var(--fl-accent); border-color: var(--fl-accent); color: var(--fl-ivory);
}
.fl-minicart__body .woocommerce-mini-cart__buttons a.checkout:hover { background: var(--fl-charcoal); border-color: var(--fl-charcoal); }
.fl-minicart__body .woocommerce-mini-cart__empty-message { margin: 0; font-size: 17px; text-align: center; }
.fl-minicart__body .blockUI.blockOverlay { background: var(--fl-ivory) !important; }

/* ==========================================================================
   КАТАЛОГ І ПОШУК (ТЗ п.10, рішення п.23) — woocommerce/archive-product.php
   ========================================================================== */

/* #content — контейнер AJAX-заміни YITH; фон і відступи сторінки каталогу */
.fl-catalog { padding-block: 20px 64px; background: var(--fl-bg); }
@media (min-width: 1024px) { .fl-catalog { padding-block: 24px 96px; } }
.fl-catalog.is-loading { opacity: 0.55; pointer-events: none; transition: opacity var(--fl-dur) var(--fl-ease); }

/* ---------- Крихти (Yoast, стиль label — рішення п.14) --------------------
   Кегль — рівно label (12 px, TYPOGRAPHY_GUIDE §05): у шапці каталогу поруч лічильник товарів
   і кнопки ФІЛЬТР / СОРТУВАННЯ того ж стилю. */
.fl-breadcrumbs {
  display: block; margin-bottom: 20px; color: var(--fl-charcoal-70);
  font-size: var(--fl-label-size); letter-spacing: var(--fl-label-ls); text-transform: uppercase; line-height: 1.5;
}
.fl-breadcrumbs a { color: var(--fl-charcoal-70); }
/* Акцент для ТЕКСТУ — Charcoal, не Deep Sage: Deep Sage на Ivory = 4,07:1 < 4,5:1, а виняток
   decisions §29 обмежений топбаром. Роль hover передає підкреслення (нетекстова ознака). */
.fl-breadcrumbs a:hover { color: var(--fl-charcoal); text-decoration: underline; text-underline-offset: 3px; }
.fl-breadcrumbs .breadcrumb_last { color: var(--fl-charcoal); }

/* ---------- Шапка каталогу ------------------------------------------------ */
.fl-catalog__head { display: grid; gap: 18px; margin-bottom: 28px; }
.fl-catalog__heading { display: grid; gap: 8px; }
.fl-catalog__title { margin: 0; }
.fl-catalog__count { margin: 0; color: var(--fl-charcoal-70); }
.fl-catalog__tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.fl-catalog__tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; width: 100%;
  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); cursor: pointer;
  transition: border-color var(--fl-dur) var(--fl-ease), color var(--fl-dur) var(--fl-ease);
}
.fl-catalog__tool:hover { border-color: var(--fl-charcoal); }
.fl-catalog__tool .fl-icon { width: 18px; height: 18px; }
/* Стан «фільтр застосовано»: Deep Sage лишається на НЕтекстових ознаках — рамка кнопки
   і крапка .fl-catalog__dot (для них достатньо 3:1 за 1.4.11, 4,07:1 проходить),
   а підпис кнопки — Charcoal (13,4:1), бо 12px Medium вимагає 4,5:1 за 1.4.3. */
.fl-catalog__tool.is-active { border-color: var(--fl-deep-sage); color: var(--fl-charcoal); }
.fl-catalog__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fl-deep-sage); }
.fl-catalog__search { max-width: 520px; }
@media (min-width: 768px) {
  .fl-catalog__head { grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 36px; }
  .fl-catalog__tools { grid-template-columns: repeat(2, auto); }
  .fl-catalog__tool { width: auto; }
  .fl-catalog__search { grid-column: 1 / -1; }
}
@media (min-width: 1024px) { .fl-catalog__head { margin-bottom: 44px; } }

/* ---------- Сітка (ТЗ п.10: mobile 2, desktop 3–4, більші проміжки) ------- */
.fl-products--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; }
@media (min-width: 768px)  { .fl-products--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; } }
@media (min-width: 1024px) { .fl-products--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; } }
@media (min-width: 1200px) { .fl-products--catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px clamp(24px, 2.4vw, 40px); } }

/* Бейдж «Акція» на фото картки */
.fl-card__badge {
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: 7px 12px; background: var(--fl-deep-sage); color: var(--fl-ivory);
  font-size: 11px; font-weight: var(--fl-w-medium); line-height: 1;
  letter-spacing: var(--fl-label-ls); text-transform: uppercase;
}

/* Опис категорії під сіткою (ACF product_cat_desc). Батьківський клас category-description на
   блоці НЕ ставимо (style.min.css дає йому фон #fafafa, padding 80/120, Objektiv, #151515 і
   uppercase-заголовки по центру — ТЗ п.1/п.10/п.18); типографіку задаємо тут самі. */
.fl-catalog__desc {
  max-width: 760px; margin-top: 56px; padding: 0; background: none; display: block;
  font-family: var(--fl-font-main); color: var(--fl-charcoal);
  font-size: 17px; line-height: 1.7; letter-spacing: var(--fl-body-ls); text-align: left;
}
.fl-catalog__desc :is(p, li, h2, h3, h4, strong, b, em, blockquote, a) {
  font-family: var(--fl-font-main); color: inherit; text-transform: none; text-align: left;
}
.fl-catalog__desc :is(h2, h3, h4) { font-weight: var(--fl-w-medium); margin: 28px 0 12px; font-size: 24px; line-height: 1.2; }
.fl-catalog__desc h3 { font-size: 21px; }
.fl-catalog__desc p { margin: 0 0 14px; }
.fl-catalog__desc :is(ul, ol) { margin: 0 0 14px; padding-left: 22px; }
.fl-catalog__desc ul li { list-style: disc; margin-bottom: 6px; }
.fl-catalog__desc ol li { list-style: decimal; margin-bottom: 6px; }
.fl-catalog__desc blockquote {
  margin: 0 0 16px; padding: 16px 20px; background: var(--fl-cream);
  border: 0; border-left: 2px solid var(--fl-deep-sage);
}
.fl-catalog__desc blockquote p:last-child { margin-bottom: 0; }
.fl-catalog__desc :is(strong, b) { font-weight: var(--fl-w-medium); }
.fl-catalog__desc a { color: var(--fl-charcoal); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Пагінація ----------------------------------------------------- */
.fl-pagination { margin-top: 48px; }
.fl-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fl-pagination li { list-style: none; margin: 0; }
.fl-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  font-family: var(--fl-font-main); font-size: 17px; font-weight: var(--fl-w-light); color: var(--fl-charcoal);
  border: 1px solid transparent; border-radius: var(--fl-radius); background: transparent;
  transition: color var(--fl-dur) var(--fl-ease), border-color var(--fl-dur) var(--fl-ease);
}
/* Номери сторінок — ТЕКСТ, тож колір завжди Charcoal (4,5:1 за 1.4.3). Стан передають
   нетекстові ознаки: рамка (hover — Charcoal, поточна — Deep Sage) і вага Medium. */
.fl-pagination a.page-numbers:hover { border-color: var(--fl-charcoal); }
.fl-pagination .page-numbers.current { color: var(--fl-charcoal); border-color: var(--fl-deep-sage); font-weight: var(--fl-w-medium); }
.fl-pagination .page-numbers.dots { min-width: 24px; padding: 0; }

/* ---------- Порожній стан (каталог, пошук, обране) ------------------------ */
.fl-empty { display: grid; gap: 14px; justify-items: start; max-width: 640px; padding-block: 28px 8px; }
.fl-empty__title { margin: 0; }
.fl-empty__text { margin: 0; font-size: 18px; }
.fl-empty__cats { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 14px 0 0; padding: 0; list-style: none; }
.fl-empty__cats li { list-style: none; }
.fl-empty p { margin: 0; }
/* Стоковий блок WC (коли порожній стан малює wc_print_notice) */
.fl-catalog .woocommerce-no-products-found > .woocommerce-info { margin: 0; }

/* ---------- Сповіщення WC у каталозі і на товарі (?add-to-cart=ID) -------- */
/* .fl-product__notices — обгортка хука woocommerce_before_single_product
   (woocommerce/content-single-product.php): без неї нотис ішов на всю ширину вікна
   і в батьківському Objektiv / рожевій кнопці. */
:is(.fl-catalog, .fl-product__notices, .fl-cart, .fl-checkout, .fl-thanks, .fl-state) .woocommerce-notices-wrapper:empty { display: none; }
.fl-product__notices { padding-top: 16px; }
.fl-product__notices:not(:has(.woocommerce-message, .woocommerce-info, .woocommerce-error)) { padding-top: 0; }
/* ВАЖЛИВО: зведення помилок валідації checkout WooCommerce вставляє НЕ в
   .woocommerce-notices-wrapper, а окремим блоком .woocommerce-NoticeGroup прямо в form.checkout
   (checkout.js: submit_error → $checkout_form.prepend(), і update_order_review →
   .woocommerce-NoticeGroup-updateOrderReview). Тому обидві обгортки перелічені разом —
   інакше блок помилок лишається без фону, рамки й відступів (виглядає як звичайний абзац). */
:is(.fl-catalog, .fl-product__notices, .fl-cart, .fl-checkout, .fl-thanks, .fl-state) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin: 0 0 24px; padding: 16px 20px; list-style: none;
  font-family: var(--fl-font-main); font-size: 17px; font-weight: var(--fl-w-light); color: var(--fl-charcoal);
  background: var(--fl-cream); border: 1px solid var(--fl-greige-50); border-radius: var(--fl-radius);
}
/* Помилку відрізняємо від успіху в межах палітри: щільніша ліва межа Deep Sage (нетекстова
   ознака, 1.4.11) + список у стовпчик, бо рядків валідації буває кілька. */
:is(.fl-catalog, .fl-product__notices, .fl-cart, .fl-checkout, .fl-thanks, .fl-state) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error {
  display: grid; gap: 6px; border-left: 3px solid var(--fl-deep-sage);
}
:is(.fl-catalog, .fl-product__notices, .fl-cart, .fl-checkout, .fl-thanks, .fl-state) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) li { list-style: none; }
:is(.fl-catalog, .fl-product__notices, .fl-cart, .fl-checkout, .fl-thanks, .fl-state) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error :is(a, strong) { color: inherit; }
:is(.fl-catalog, .fl-product__notices, .fl-cart, .fl-checkout, .fl-thanks, .fl-state) :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) .woocommerce-error strong { font-weight: var(--fl-w-medium); }
:is(.fl-catalog, .fl-product__notices, .fl-cart, .fl-checkout, .fl-thanks, .fl-state) .woocommerce-notices-wrapper a.button {
  order: 2; width: auto; padding: 0 22px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; overflow: visible;
  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-ivory); background: var(--fl-accent); border: 1px solid var(--fl-accent); border-radius: var(--fl-radius);
}
:is(.fl-catalog, .fl-product__notices, .fl-cart, .fl-checkout, .fl-thanks, .fl-state) .woocommerce-notices-wrapper a.button:hover { color: var(--fl-ivory); background: var(--fl-charcoal); border-color: var(--fl-charcoal); }

/* ==========================================================================
   DRAWER-И ФІЛЬТР / СОРТУВАННЯ (ТЗ п.10; JS — assets/js/woo.js)
   ========================================================================== */
.fl-drawer { position: fixed; inset: 0; z-index: 70; visibility: hidden; }
.fl-drawer.is-open { visibility: visible; }
.fl-drawer__overlay {
  position: absolute; inset: 0; background: var(--fl-charcoal-55);
  opacity: 0; transition: opacity var(--fl-dur) var(--fl-ease);
}
.fl-drawer.is-open .fl-drawer__overlay { opacity: 1; }
.fl-drawer__panel {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(92vw, 420px);
  display: flex; flex-direction: column;
  background: var(--fl-ivory); color: var(--fl-charcoal);
  padding: 0 var(--fl-gutter) 16px;
  transform: translateX(100%); transition: transform 280ms var(--fl-ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.fl-drawer.is-open .fl-drawer__panel { transform: none; }
.fl-drawer.is-instant .fl-drawer__panel, .fl-drawer.is-instant .fl-drawer__overlay { transition: none; }
.fl-drawer__panel:focus { outline: none; }
.fl-drawer__head {
  position: sticky; top: 0; z-index: 2; background: var(--fl-ivory);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--fl-greige-50);
}
.fl-drawer__title { margin: 0; }
.fl-drawer__body { flex: 1 1 auto; padding-block: 8px 16px; }
.fl-drawer__foot {
  position: sticky; bottom: 0; z-index: 2; background: var(--fl-ivory);
  display: flex; gap: 12px; padding: 14px 0 0; border-top: 1px solid var(--fl-greige-50);
}
.fl-drawer__apply { flex: 1 1 auto; }
@media (min-width: 1024px) { .fl-drawer__panel { padding: 0 32px 20px; } }

/* Список сортування */
.fl-sort { display: grid; margin: 0; padding: 0; list-style: none; }
.fl-sort li { list-style: none; }
.fl-sort__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 0; border-bottom: 1px solid var(--fl-greige-50);
  font-size: 15px; font-weight: var(--fl-w-medium); letter-spacing: var(--fl-label-ls); text-transform: uppercase;
}
/* Текст пунктів — Charcoal (1.4.3). Стан позначає ✓ нижче, hover — підкреслення. */
.fl-sort__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fl-sort__link[aria-current] { color: var(--fl-charcoal); }
.fl-sort__link[aria-current]::after { content: "✓"; font-size: 14px; line-height: 1; }

/* ==========================================================================
   «ОБРАНЕ» (рішення п.3) — картки рендерить assets/js/woo.js
   ========================================================================== */
.fl-favs .fl-empty { padding-block: 8px 0; }

/* ==========================================================================
   ТИПОГРАФІКА ТЕКСТОВИХ БЛОКІВ .fl-prose (короткий опис, акордеон, відгуки)
   ========================================================================== */
/* Основний текст — TYPOGRAPHY_GUIDE §05: Light 300, 18–20 px, інтерліньяж 1,6 */
.fl-prose {
  font-family: var(--fl-font-main); font-weight: var(--fl-w-light); color: var(--fl-charcoal);
  font-size: var(--fl-body-size); line-height: var(--fl-body-lh); letter-spacing: var(--fl-body-ls); text-align: left;
}
.fl-prose :is(p, li, h2, h3, h4, strong, b, em, blockquote, a, span, div) {
  font-family: var(--fl-font-main); color: inherit; text-transform: none; text-align: left; font-style: normal;
}
.fl-prose :is(p, ul, ol) { margin: 0 0 12px; }
.fl-prose :is(p, ul, ol):last-child { margin-bottom: 0; }
.fl-prose :is(ul, ol) { padding-left: 20px; }
.fl-prose ul li { list-style: disc; margin-bottom: 4px; }
.fl-prose ol li { list-style: decimal; margin-bottom: 4px; }
.fl-prose :is(strong, b) { font-weight: var(--fl-w-medium); }
.fl-prose :is(h2, h3, h4) { margin: 20px 0 10px; font-size: 21px; line-height: 1.2; font-weight: var(--fl-w-medium); }
/* Посилання в тексті — Charcoal + підкреслення: Deep Sage на Ivory/Cream не дає 4,5:1 (1.4.3),
   а підкреслення саме по собі відрізняє посилання від тексту (1.4.1 теж виконано). */
.fl-prose a { color: var(--fl-charcoal); text-decoration: underline; text-underline-offset: 3px; }
.fl-prose img { height: auto; max-width: 100%; }

/* ==========================================================================
   КІЛЬКІСТЬ ± (woocommerce/global/quantity-input.php) — товар, кошик, mini-cart
   ========================================================================== */
.fl-qty {
  display: inline-grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch;
  width: 132px; min-height: 52px;
  border: 1px solid var(--fl-line); border-radius: var(--fl-radius); background: transparent;
}
.fl-qty--readonly { grid-template-columns: minmax(0, 1fr); width: auto; min-width: 64px; }
.fl-qty__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; width: auto; height: auto; min-height: 0;
  color: var(--fl-charcoal); background: none; border: 0; border-radius: 0; cursor: pointer;
  transition: color var(--fl-dur) var(--fl-ease);
}
.fl-qty__btn:hover { color: var(--fl-deep-sage); background: none; }
.fl-qty__btn .fl-icon { width: 14px; height: 14px; stroke-width: 1.5px; }
.fl-qty .fl-qty__input,
.fl-qty input.qty {
  width: 100%; min-width: 0; height: auto; min-height: 0; padding: 0; margin: 0; text-indent: 0;
  font-family: var(--fl-font-main); font-size: 18px; font-weight: var(--fl-w-light); line-height: 1;
  letter-spacing: var(--fl-body-ls); color: var(--fl-charcoal); text-align: center;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  appearance: textfield; -moz-appearance: textfield;
}
.fl-qty input[type="number"]::-webkit-outer-spin-button,
.fl-qty input[type="number"]::-webkit-inner-spin-button { appearance: none; -webkit-appearance: none; margin: 0; }
.fl-qty .fl-qty__input:focus { outline: none; }
/* Те саме для степера: (0,3,0) перебивало глобальне :focus-visible. Offset від'ємний — рамку
   несе обгортка .fl-qty, тож обводка лягає всередину. */
.fl-qty .fl-qty__input:focus-visible { outline: 2px solid var(--fl-focus); outline-offset: -2px; }
.fl-qty:focus-within { border-color: var(--fl-deep-sage); }

/* ==========================================================================
   СТОРІНКА ТОВАРУ (ТЗ п.11) — woocommerce/content-single-product.php
   ========================================================================== */
.fl-product { padding-block: 20px 64px; background: var(--fl-bg); }
@media (min-width: 1024px) { .fl-product { padding-block: 24px 96px; } }
.fl-product .fl-breadcrumbs { margin-bottom: 18px; }

/* Сітка: desktop 56–57% фото / 40–41% інформація (ТЗ п.11: 55–60 / 40–45).
   Частки рахуються від ширини БЕЗ gap, тому 58/42 при gap ≈ 3,2% дають у відсотках
   від контейнера ≈ 56 / 40,7 — обидва значення всередині діапазонів ТЗ. */
.fl-product__top { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) {
  .fl-product__top {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: clamp(28px, 3.2vw, 56px);
  }
}

/* ---------- Колонка інформації ------------------------------------------- */
.fl-product__summary { display: grid; gap: 18px; align-content: start; }
@media (min-width: 1024px) { .fl-product__summary { gap: 20px; } }
.fl-product__label { margin: 0; color: var(--fl-charcoal-70); }
/* H1 — TYPOGRAPHY_GUIDE §05: Medium 500, 48–56 px, lh 1,05. Стеля 48 px (нижня межа гайду):
   у колонці інформації ≈525 px на 1440 довга назва в 2–3 рядки ще читається. */
.fl-product__title { margin: 0; font-size: clamp(30px, 4.4vw, 48px); line-height: var(--fl-h1-lh, 1.05); }
.fl-product .fl-product__price,
.fl-product p.price {
  margin: 0; padding: 0; display: block;
  /* Ціна — акцент (рішення користувача 22.09): Medium і більший кегль */
  font-family: var(--fl-font-main); font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
  font-size: clamp(28px, 3vw, 34px); line-height: 1.15; letter-spacing: var(--fl-body-ls); text-transform: none;
}
.fl-product .price :is(del, ins, bdi, .amount, .woocommerce-Price-amount) {
  font-family: inherit; font-weight: inherit; color: inherit; font-size: inherit; text-decoration: none;
}
.fl-product .price del { opacity: 0.55; margin-right: 10px; text-decoration: line-through; }
.fl-product__excerpt { max-width: 46ch; }
.fl-product .stock {
  margin: 0; font-size: var(--fl-label-size); letter-spacing: var(--fl-label-ls);
  /* Статус наявності — ТЕКСТ 11px Medium, тому Charcoal (Deep Sage на Ivory дає 4,07:1) */
  text-transform: uppercase; font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
}
.fl-product .stock.out-of-stock { color: var(--fl-charcoal-70); }

/* Форма: кількість + ДОДАТИ В КОШИК */
.fl-product .fl-product__form { display: grid; gap: 18px; margin: 4px 0 0; padding: 0; }
.fl-product__buy { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.fl-product__buy .fl-qty { flex: 0 0 auto; min-height: 56px; }
.fl-product .fl-product__add {
  flex: 1 1 200px; min-height: 56px; width: auto; max-width: none;
  font-size: 14px; letter-spacing: var(--fl-btn-ls);
}
.fl-product .fl-product__add:hover { color: var(--fl-ivory); }

/* Категорії під кнопками */
.fl-product__meta { margin: 0; color: var(--fl-charcoal-70); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fl-product__meta a { color: var(--fl-charcoal-70); border-bottom: 1px solid var(--fl-greige-50); }
.fl-product__meta a:hover { color: var(--fl-charcoal); border-color: var(--fl-charcoal); }

/* ---------- Акордеон СКЛАД / ДОСТАВКА / ДОГЛЯД / ОПИС -------------------- */
.fl-acc { margin-top: 8px; border-top: 1px solid var(--fl-greige-50); }
.fl-acc__item { border-bottom: 1px solid var(--fl-greige-50); }
.fl-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  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);
}
.fl-acc__head::-webkit-details-marker { display: none; }
.fl-acc__head:hover { text-decoration: underline; text-underline-offset: 3px; }
.fl-acc__head:focus-visible { outline: 2px solid var(--fl-focus); outline-offset: 2px; }
.fl-acc__icon { position: relative; flex: none; width: 14px; height: 14px; }
.fl-acc__icon::before,
.fl-acc__icon::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px;
  background: currentColor; transition: transform var(--fl-dur) var(--fl-ease);
}
.fl-acc__icon::after { transform: rotate(90deg); }
.fl-acc__item[open] .fl-acc__icon::after { transform: rotate(0deg); }
.fl-acc__body { padding: 0 0 20px; }
.fl-acc__body > :last-child { margin-bottom: 0; }

/* ---------- Ряди «Вам також сподобається» / up-sells ---------------------- */
/* .related / .up-sells мають ще й клас products, якому батьківський style.min.css дає
   display: flex — примусово повертаємо блок, інакше заголовок і ряд стають flex-колонками */
.fl-product__row { display: block; margin-top: 64px; }
@media (min-width: 1024px) { .fl-product__row { margin-top: 96px; } }
/* «Вам також сподобається» батько виводить на woocommerce_after_single_product, тобто ПІСЛЯ
   .fl-product — відступ уже дає нижній padding блоку товару, другий не потрібен */
.fl-product + .fl-product__row { margin-top: 0; }
.fl-product__row-inner { display: block; }
.fl-product__row-title { margin: 0 0 24px; }
@media (min-width: 1024px) { .fl-product__row-title { margin-bottom: 36px; } }
/* mobile — горизонтальний скрол зі scroll-snap, без бібліотек (як категорії на головній).
   grid-template-columns: none обов'язкове: базовий .fl-products задає 2 явні колонки, і без
   скидання картки розкладаються в них, а не в автоколонки ряду. */
.fl-products--row {
  display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%;
  gap: 14px; margin: 0; padding: 0 var(--fl-page-x) 4px;
  margin-inline: calc(var(--fl-page-x) * -1);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--fl-page-x); scrollbar-width: none;
}
.fl-products--row::-webkit-scrollbar { display: none; }
.fl-products--row > .fl-card { scroll-snap-align: start; }
@media (min-width: 768px) {
  .fl-products--row { grid-auto-columns: 42%; gap: 20px; }
}
@media (min-width: 1024px) {
  .fl-products--row {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px clamp(20px, 1.75vw, 32px);
    margin-inline: 0; padding: 0; overflow: visible;
  }
}

/* ---------- Відгуки (без зірок, рішення п.5) ------------------------------ */
/* .fl-wide дає бокові поля; ширину тексту обмежуємо всередині */
.fl-product__reviews { margin-top: 64px; }
/* Смуга акордеону «ВІДГУКИ» йде на всю ширину контенту — як ряд «Вам також сподобається»
   нижче (обидва в .fl-wide). Попередній max-width: 820px обривав лінію на довільній
   вертикалі: ні по краю фото (789px), ні по краю контенту (1354px) — ТЗ п.11 про єдину сітку.
   Читабельність обмежуємо всередині (.fl-reviews__body, #comments), а не на смузі. */
.fl-product__reviews > .woocommerce-Reviews { max-width: none; }
@media (min-width: 1024px) { .fl-product__reviews { margin-top: 96px; } }
/* Батьківські .woocommerce-Reviews / .commentlist (flex row, ObjektivMk1, #151515) — скидаємо */
.fl-product__reviews .woocommerce-Reviews { display: grid; gap: 36px; flex-direction: column; }
@media (min-width: 1024px) { .fl-product__reviews .woocommerce-Reviews { grid-template-columns: minmax(0, 1fr); } }
/* Відгуки — один згорнутий пункт акордеону в оформленні СКЛАД / ДОСТАВКА / ДОГЛЯД:
   заголовок живе в <summary>, тому скидаємо йому власну типографіку h2 на успадковану. */
.fl-reviews__acc { margin-top: 0; }
.fl-product__reviews .fl-acc__head .fl-reviews__title {
  margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.fl-product__reviews .fl-reviews__body { display: grid; gap: 28px; padding-bottom: 28px; max-width: 68ch; }
.fl-product__reviews #comments { display: grid; gap: 20px; max-width: 100%; }
.fl-product__reviews #comments h2,
.fl-product__reviews .comment-reply-title {
  margin: 0; font-family: var(--fl-font-main); font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
  font-size: var(--fl-h3-size); line-height: var(--fl-h3-lh); letter-spacing: var(--fl-h3-ls); text-transform: none;
}
.fl-product__reviews .commentlist { display: grid; gap: 16px; margin: 0; padding: 0; }
.fl-product__reviews .commentlist li { display: block; margin: 0; padding: 0; list-style: none; }
.fl-product__reviews .commentlist li .comment_container {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start;
  width: 100%; padding: 20px; background: var(--fl-cream); border: 0; border-radius: var(--fl-radius);
}
.fl-product__reviews .commentlist li .comment_container img { width: 56px; height: 56px; border-radius: 50%; }
.fl-product__reviews .commentlist .comment-text { display: grid; gap: 10px; width: 100%; }
.fl-product__reviews .commentlist .comment-text .meta,
.fl-product__reviews .commentlist .comment-text .description p {
  font-family: var(--fl-font-main); font-weight: var(--fl-w-light); color: var(--fl-charcoal);
  font-size: 16px; font-style: normal; padding: 0; margin: 0;
}
.fl-product__reviews .commentlist .comment-text .meta { color: var(--fl-charcoal-70); }
/* Зірки: розмітку прибрано в шаблонах (single-product/review-rating.php, single-product-reviews.php
   без поля «Ваша оцінка»). Страховка на випадок, якщо зірки поверне плагін або WC-скрипт
   single-product.js (він перетворює select#rating на p.stars). */
.fl-product__reviews :is(.star-rating, .stars, .comment-form-rating) { display: none; }
.fl-product__reviews .woocommerce-noreviews { margin: 0; font-size: 17px; color: var(--fl-charcoal-70); }
.fl-product__reviews #review_form_wrapper { max-width: 100%; }
.fl-product__reviews .comment-form { display: grid; gap: 14px; }
.fl-product__reviews .comment-form p { margin: 0; display: grid; gap: 8px; }
/* Шрифт форми: батько задає .comment-form label і .comment-form .comment-notes > span
   в ObjektivMk1_Trial (style.min.css) — декларація перебиває успадкування від .fl-scope,
   тож font-family проставляємо тут. Селектор із .comment-form (0,3,1) сильніший за
   батьківський .comment-form .comment-notes > span (0,2,1). */
.fl-product__reviews .comment-form :is(label, .comment-notes, .required-field-message, .required),
.fl-product__reviews .comment-form .comment-notes span {
  font-family: var(--fl-font-main);
}
/* Підписи під формою. Селектор із .comment-notes span (0,3,1) потрібен, щоб перебити
   батьківське .comment-form .comment-notes > span (0,2,1): 16px і колір #151515. */
.fl-product__reviews .comment-form :is(.comment-notes, .required-field-message),
.fl-product__reviews .comment-form .comment-notes span {
  font-size: 15px; line-height: 1.5; font-weight: var(--fl-w-light); color: var(--fl-charcoal-70);
}
/* Зірочки обов'язкових полів: батьківський CSS робить їх чистим червоним —
   палітра бренду (child-theme-plan.md, ряд 1: Charcoal або Deep Sage, не Rose). */
.fl-product__reviews .comment-form :is(.required, .required-field-message),
.fl-product__reviews .comment-form .comment-notes .required {
  color: var(--fl-charcoal-70);
}
.fl-product__reviews .comment-form label {
  font-size: var(--fl-label-size); line-height: var(--fl-label-lh); letter-spacing: var(--fl-label-ls);
  text-transform: uppercase; font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
}
.fl-product__reviews .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font-family: var(--fl-font-main); font-size: 17px; 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);
}
.fl-product__reviews .comment-form textarea { min-height: 128px; resize: vertical; }
.fl-product__reviews .comment-form :is(input, textarea):focus { border-color: var(--fl-deep-sage); outline: none; }
/* Обводку, знятну рядком вище, ОБОВ'ЯЗКОВО повертаємо для клавіатури: селектор (0,3,1) інакше
   перебиває і глобальне :focus-visible, і .fl-input:focus-visible (site.css). Сама лише зміна
   border-color Greige→Deep Sage дає 2,22:1 — недостатньо (BRIEF.md «Якість»: outline Deep Sage). */
.fl-product__reviews .comment-form :is(input, textarea):focus-visible {
  outline: 2px solid var(--fl-focus); outline-offset: 2px;
}
.fl-product__reviews .comment-form .submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; justify-self: start; min-height: 52px; padding: 0 28px; overflow: visible;
  font-family: var(--fl-font-main); font-size: 14px; font-weight: var(--fl-w-medium); line-height: 1;
  letter-spacing: var(--fl-btn-ls); text-transform: uppercase;
  color: var(--fl-ivory); background: var(--fl-accent); border: 1px solid var(--fl-accent); border-radius: var(--fl-radius);
  cursor: pointer;
}
.fl-product__reviews .comment-form .submit:hover { color: var(--fl-ivory); background: var(--fl-charcoal); border-color: var(--fl-charcoal); }

/* ==========================================================================
   STICKY «ДОДАТИ В КОШИК» НА MOBILE (ТЗ п.20)
   ========================================================================== */
.fl-sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--fl-ivory); border-top: 1px solid var(--fl-greige-50);
  padding: 10px var(--fl-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%); opacity: 0; visibility: hidden;
  transition: transform var(--fl-dur) var(--fl-ease), opacity var(--fl-dur) var(--fl-ease), visibility var(--fl-dur);
}
.fl-sticky-atc.is-visible { transform: none; opacity: 1; visibility: visible; }
.fl-sticky-atc__inner { display: flex; align-items: center; gap: 12px; }
.fl-sticky-atc__info { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.fl-sticky-atc__name {
  font-size: 12px; line-height: 1.2; letter-spacing: var(--fl-label-ls); text-transform: uppercase;
  color: var(--fl-charcoal-70); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ціна — акцент (рішення користувача 22.09): Medium 500, Charcoal; кегль як у картці товару */
.fl-sticky-atc__price { font-size: 21px; line-height: 1.2; font-weight: var(--fl-w-medium); color: var(--fl-charcoal); }
.fl-sticky-atc__price :is(bdi, .amount, del, ins) { font-family: inherit; font-weight: inherit; color: inherit; text-decoration: none; }
.fl-sticky-atc__price del { display: none; }
.fl-sticky-atc .fl-sticky-atc__btn { flex: 0 0 auto; min-height: 48px; padding: 0 20px; }
/* На desktop основна кнопка завжди поруч із фото — sticky не потрібен */
@media (min-width: 1024px) { .fl-sticky-atc { display: none; } }
/* Поки відкрито off-canvas / drawer — не перекриваємо модальну панель */
body.is-locked .fl-sticky-atc { display: none; }


/* ==========================================================================
   «ДОПОВНИТИ ПОДАРУНОК?» (ТЗ п.12, етап 6)
   Блок після додавання букета в кошик: Cream-панель, дрібні картки, горизонтальний
   слайдер на scroll-snap без бібліотек. Візуально тихіший за картки квітів: менший
   кегль, тонкі лінії, без тіней і скруглень.
   ========================================================================== */
/* Розмітка — лише span/button (див. шапку template-parts/gifts-upsell.php), тож розкладку
   цілком задає CSS: display на кожному рівні обов'язковий. */
.fl-gifts {
  display: block; margin: 14px 0 0; padding: 14px; text-align: left; max-width: 100%;
  background: var(--fl-cream); border: 1px solid var(--fl-greige-50);
  font-family: var(--fl-font-main); color: var(--fl-charcoal);
}
/* Блок живе і поза .fl-scope (рядок кошика — батьківська розмітка), де border-box не заданий:
   без цього картка 88px фактично займала 102px і фото подарунка ставало більшим за фото букета. */
.fl-gifts, .fl-gifts *, .fl-gifts *::before, .fl-gifts *::after { box-sizing: border-box; }
.fl-gifts.is-busy { opacity: 0.6; pointer-events: none; }
.fl-gifts__title {
  display: block; margin: 0 0 10px; font-size: 12px; line-height: 1.3; font-weight: var(--fl-w-medium);
  letter-spacing: var(--fl-label-ls); text-transform: uppercase; color: var(--fl-charcoal);
}
/* contain: inline-size обнуляє внесок треку в min-content предків: у кошику блок лежить
   у shrink-to-fit `p.product-name` всередині flex-колонки, і без цього ряд товару розпирало
   за межі екрана на 390px (сторінка при body{overflow-x:hidden} не скролилась, останні
   картки подарунків були фізично недосяжні). Тепер переповнення живе всередині треку. */
.fl-gifts__track {
  display: flex; gap: 10px; margin: 0; padding: 0 0 4px; list-style: none;
  min-width: 0; max-width: 100%; contain: inline-size;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.fl-gifts__track::-webkit-scrollbar { display: none; }

/* ---------- Слайдер: трек + стрілки ◀ ▶ ---------------------------------
   Смуга прокрутки в треку прихована, тому на desktop мишею трек не гортався зовсім: стрілок
   не було, перетягування немає, а вертикальне колесо прокручує сторінку. У міні-кошику видима
   ширина треку — рівно 284px, тобто 3 картки 88px із gap 10px БЕЗ «визирання» четвертої, тож
   недосяжними ставали 4-й подарунок (Ужгород) і 4–5-й (Львів) — платні опції, про існування
   яких ніщо не підказувало (ТЗ п.12 «Горизонтальный slider»).
   Стрілки — вказівникова допомога (на touch працює свайп), тому показуємо їх лише для точного
   вказівника з hover; клас is-scrollable / can-prev / can-next ставить assets/js/gifts.js,
   коли трек справді переповнений. */
.fl-gifts__slider { display: block; position: relative; }
.fl-gifts__slider + .fl-gifts__slider { margin-top: 12px; }
/* Видима ознака прокрутки для ВСІХ вказівників (і там, де стрілок немає): підрізаємо край треку. */
.fl-gifts__slider.can-next:not(.can-prev) > .fl-gifts__track {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), rgba(0, 0, 0, 0.25));
          mask-image: linear-gradient(to right, #000 calc(100% - 26px), rgba(0, 0, 0, 0.25));
}
.fl-gifts__slider.can-prev.can-next > .fl-gifts__track {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), #000 26px, #000 calc(100% - 26px), rgba(0, 0, 0, 0.25));
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), #000 26px, #000 calc(100% - 26px), rgba(0, 0, 0, 0.25));
}
.fl-gifts__slider.can-prev:not(.can-next) > .fl-gifts__track {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), #000 26px);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.25), #000 26px);
}
.fl-gifts__nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .fl-gifts__slider.is-scrollable > .fl-gifts__nav {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
    width: 26px; height: 34px; padding: 0; cursor: pointer;
    font-family: var(--fl-font-main); font-size: 18px; line-height: 1;
    color: var(--fl-charcoal); background: var(--fl-ivory);
    border: 1px solid var(--fl-greige-50); border-radius: 0;
    transition: background var(--fl-dur) var(--fl-ease), color var(--fl-dur) var(--fl-ease);
  }
  .fl-gifts__slider.is-scrollable > .fl-gifts__nav--prev { left: -7px; }
  .fl-gifts__slider.is-scrollable > .fl-gifts__nav--next { right: -7px; }
  .fl-gifts__slider.is-scrollable > .fl-gifts__nav:hover {
    color: var(--fl-ivory); background: var(--fl-charcoal); border-color: var(--fl-charcoal);
  }
  /* Кінець треку — стрілку приховуємо (місце лишається, щоб трек не «стрибав») */
  .fl-gifts__slider.is-scrollable > .fl-gifts__nav[disabled] { opacity: 0; pointer-events: none; }
}
.fl-gifts__item {
  display: block; position: relative; flex: 0 0 auto; width: 88px; scroll-snap-align: start;
  background: var(--fl-ivory); border: 1px solid var(--fl-greige-50); padding: 6px;
}
.fl-gifts__item.is-selected { border-color: var(--fl-deep-sage); }
.fl-gifts__media {
  display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--fl-cream);
  margin-bottom: 6px;
}
.fl-gifts__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-gifts__media--text { display: flex; align-items: center; justify-content: center; }
.fl-gifts__mark {
  font-size: 28px; line-height: 1; font-weight: var(--fl-w-medium);
  color: var(--fl-greige); letter-spacing: 0.9px;
}
/* До 2 рядків — як у назві картки товару (.fl-card__title): назва подарунка обов'язкова за
   ТЗ п.12, а «Maitre Truffout» в один рядок 74–82px не влазив і обрізався трикрапкою. */
.fl-gifts__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 13px; line-height: 1.25; font-weight: var(--fl-w-light);
  color: var(--fl-charcoal); overflow: hidden; white-space: normal;
  overflow-wrap: anywhere; min-height: 2.5em;
}
.fl-gifts__price {
  display: block; margin-top: 2px; font-size: 13px; line-height: 1.2;
  font-weight: var(--fl-w-medium); color: var(--fl-charcoal-70);
}
.fl-gifts__price :is(bdi, .amount) { font-family: inherit; font-weight: inherit; color: inherit; }
.fl-gifts__btn {
  position: absolute; top: 2px; right: 2px;
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fl-font-main); font-size: 17px; line-height: 1;
  color: var(--fl-ivory); background: var(--fl-deep-sage);
  border: 1px solid var(--fl-deep-sage); border-radius: 0;
  transition: background var(--fl-dur) var(--fl-ease), color var(--fl-dur) var(--fl-ease);
}
.fl-gifts__btn:hover { background: var(--fl-charcoal); border-color: var(--fl-charcoal); }
.fl-gifts__btn[aria-pressed="true"] { color: var(--fl-charcoal); background: var(--fl-ivory); border-color: var(--fl-greige); }
.fl-gifts__btn[aria-pressed="true"]:hover { color: var(--fl-ivory); background: var(--fl-charcoal); border-color: var(--fl-charcoal); }
.fl-gifts__btn:focus-visible { outline: 2px solid var(--fl-focus); outline-offset: 2px; }
.fl-gifts__btn[disabled] { cursor: default; opacity: 0.6; }
.fl-gifts__note--error {
  display: block; margin: 8px 0 0; font-size: 13px; line-height: 1.35; font-weight: var(--fl-w-light);
  color: var(--fl-charcoal);
}
/* На сторінці кошика блок стоїть під кожною позицією, тож у міні-кошику він зайвий.
   PHP-перевірка is_cart() не спрацьовує для фрагмента, який wc-cart-fragments перезапитує
   окремим wc-ajax-запитом (там is_cart() = false), тому ховаємо ще й стилем. */
.woocommerce-cart #fl-minicart .fl-gifts { display: none; }
/* На оформленні блоку бути не повинно: склад замовлення (#order_review) рендериться сервером
   і після нашого AJAX не оновлюється — покупець бачив би одну суму, а замовлення пішло б з
   іншою. PHP-guard is_checkout() у fl_gifts_minicart() не спрацьовує для фрагмента, який
   wc-cart-fragments перезапитує окремим wc-ajax-запитом, тому ховаємо ще й стилем. */
.woocommerce-checkout #fl-minicart .fl-gifts { display: none; }
/* У кошику блок стоїть усередині p.product-name — тримаємо його вужчим і в межах рядка */
.fl-gifts--cart { max-width: min(560px, 100%); }
@media (min-width: 768px) {
  .fl-gifts--cart .fl-gifts__item { width: 96px; }
}
/* Mobile: картка подарунка мусить бути дрібнішою за фото букета (у батьківському кошику воно
   80px ≤620px і 65px ≤480px) — ТЗ п.12 «не конкурувати з квітами». */
@media (max-width: 620px) {
  .fl-gifts--cart .fl-gifts__item { width: 78px; }
  .fl-gifts--cart .fl-gifts__name { font-size: 12px; }
}
/* Батьківські flex-контейнери рядка кошика мають min-width: auto, тобто беруть min-content
   дитини — знімаємо підлогу, щоб блок подарунків не міг розпирати рядок. */
.woocommerce-cart .cart__body-right,
.woocommerce-cart .cart__body-top,
.woocommerce-cart p.product-name { min-width: 0; }
/* .cart__body-top — flex-колонка з align-items: flex-start, тож абзац назви стискався до
   fit-content і слайдер подарунків отримував випадкову ширину (355px на 1440). Розтягуємо
   абзац на ширину рядка — панель тримається в межах своїх max-width. */
.woocommerce-cart .cart__body-top > p.product-name { align-self: stretch; }
/* Кнопки міні-кошика («ПЕРЕГЛЯНУТИ КОШИК» / «ОФОРМЛЕННЯ ЗАМОВЛЕННЯ») мусять бути видимі
   завжди — їх винесено в нерухомий футер панелі (.fl-minicart__foot, див. вище і
   woocommerce/cart/mini-cart.php). Липкий блок кнопок усередині скролера тут був НЕ ПРИДАТНИЙ:
   sticky піднімається на всю величину переповнення і непрозорою Ivory-панеллю накривав низ
   цього блоку — назву й ціну подарунка (ТЗ п.12 вимагає «фото + назва + ціна + «+»»). */

/* ==========================================================================
   ЕТАП 7 — КОШИК, ОФОРМЛЕННЯ, «ДЯКУЄМО», СТАНИ ОПЛАТИ, 404, МАСКОТ
   ТЗ п.13, п.14, п.15; decisions «Маскот» і «Повернення з WayForPay».
   ========================================================================== */

/* ---------- Скидання батьківського `section { display: flex }` ------------ */
/* `mono-flowers/assets/css/style.min.css` має глобальне правило `.footer, section{display:flex}`.
   Воно чіпляє КОЖЕН вкладений <section> нової розмітки: у секціях checkout заголовок «01
   ОТРИМУВАЧ» ставав окремою flex-колонкою поруч із полями, блоки «Дякуємо» й станів оплати
   розповзалися в рядок. Батьківський CSS від'єднуємо лише на етапі 8, тому до того часу
   повертаємо блок явно. Правило стоїть ПЕРШИМ у блоці етапу 7: специфічність однакова,
   тож власні `display: grid` нижче перемагають. */
:is(.fl-cart, .fl-checkout, .fl-thanks, .fl-state,
    .fl-checkout__section, .fl-order, .fl-order__customer, .fl-order__addresses,
    .fl-cross, .fl-calc__form) { display: block; }

/* Cross-sells на кошику (`cart/cross-sells.php`): секція без власних стилів ставала flex-рядком
   (заголовок поруч зі сіткою) — зараз не видно лише тому, що «Перехресні продажі» не
   заповнені; щойно замовник їх додасть, верстка зламалася б. */
.fl-cross { margin-top: 64px; }
@media (min-width: 1024px) { .fl-cross { margin-top: 96px; } }
.fl-cross__title { margin: 0 0 24px; }
@media (min-width: 1024px) { .fl-cross__title { margin-bottom: 36px; } }

/* ---------- МАСКОТ: фірмова арка (decisions «Маскот») --------------------- */
/* Арка — декоративна форма з брендбука (наліпки «arch»), а не скруглення UI: тому
   border-radius тут великий і навмисний, і він не поширюється на кнопки/поля.
   Фон самих картинок теплий кремовий, тому арка «сідає» на Cream без видимого шва. */
.fl-mascot { width: 100%; max-width: 240px; }
.fl-mascot__arch {
  overflow: hidden;
  background: var(--fl-cream);
  border-radius: 50% 50% 0 0 / 38% 38% 0 0;
}
.fl-mascot__img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) { .fl-mascot { max-width: 280px; } }
@media (min-width: 1024px) { .fl-mascot { max-width: 320px; } }

/* ==========================================================================
   КОШИК (ТЗ п.13): Ivory, мінімум рамок, фото зліва — назва / кількість / ціна справа
   ========================================================================== */
.fl-cart { background: var(--fl-bg); }
.fl-cart__inner { padding-block: 24px var(--fl-section-y); }
.fl-cart__title { margin: 8px 0 28px; }
@media (min-width: 1024px) { .fl-cart__title { margin-bottom: 44px; } }

.fl-cart__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) {
  .fl-cart__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; }
}
@media (min-width: 1280px) {
  .fl-cart__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; }
}
.fl-cart__form { min-width: 0; margin: 0; }

/* Позиції: тонкі горизонтальні лінії замість «таблиці».
   Клас `cart_item` на <li> обов'язковий (фільтр `woocommerce_cart_item_class`, на нього
   спираються плагіни), а батьківський style.min.css робить із нього БІЛУ КАРТКУ:
   `.cart_item{padding:40px;…;border:1px solid #e1e1e1;background:#fff;position:relative}`
   (+ `padding:24px` у @media ≤480px). ТЗ п.13 («фон Ivory, мінімум рамок») і п.1 («білий
   не як основний фон») цього не допускають, тому скидаємо всі чотири властивості явно, не
   чекаючи від'єднання батьківського CSS на етапі 8. `padding-inline: 0` у базовому правилі
   перебиває і мобільний батьківський блок (однакова специфічність, дочірній файл пізніше). */
.fl-cart__list { border-top: 1px solid var(--fl-greige-50); }
.fl-cart__item {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px;
  padding-block: 20px; padding-inline: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--fl-greige-50);
  position: static;
}
@media (min-width: 768px) {
  .fl-cart__item { grid-template-columns: 140px minmax(0, 1fr); gap: 28px; padding-block: 28px; }
}
.fl-cart__thumb { min-width: 0; align-self: start; }
/* Посилання-обгортка фото: батько має `.cart_item > a{max-width:124px;height:124px}` (80px
   від 768px, 65px від 480px). У нашій розмітці `<a>` лежить усередині `.fl-cart__thumb`,
   тобто дитячим селектором не збігається, але лишається інлайновим і «стискав» би картинку —
   робимо його блоком на всю колонку і страхуємося від обрізання. */
.fl-cart__thumb > a { display: block; max-width: none; width: 100%; height: auto; }
.fl-cart__thumb img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--fl-radius);
}
.fl-cart__body { display: grid; align-content: start; gap: 14px; min-width: 0; }
/* Блок «Доповнити подарунок?» (етап 6) стоїть усередині назви — не даємо йому розпирати рядок */
.fl-cart__name { min-width: 0; }
.fl-cart__link {
  display: inline-block; font-size: 19px; line-height: 1.25; font-weight: var(--fl-w-medium);
  color: var(--fl-charcoal);
}
.fl-cart__link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .fl-cart__link { font-size: 22px; } }
/* Мета позиції (подарунки IVPA людськими назвами — fl_gifts_item_data_names()) */
.fl-cart__name dl.variation { display: grid; gap: 2px; margin: 8px 0 0; font-size: 15px; }
.fl-cart__name dl.variation dt { font-weight: var(--fl-w-medium); }
.fl-cart__name dl.variation dd { margin: 0 0 4px; }
.fl-cart__name dl.variation dd p { margin: 0; }
/* Повідомлення «Custom Product Message» за порогом custom_threshold_price */
.fl-cart__note {
  margin: 10px 0 0; padding: 10px 14px;
  /* Батьківське `.custom-cart-message{font-family:ObjektivMk1_Trial_300}` (0,1,0) — однакова
     специфічність, але оголосити гарнітуру треба явно, інакше правило батька виграє як єдине
     джерело (ТЗ п.1, decisions п.16). */
  font-family: inherit;
  font-size: 15px; line-height: 1.4; color: var(--fl-charcoal);
  background: var(--fl-cream); border-radius: var(--fl-radius);
}
.fl-cart__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.fl-cart__qty { flex: 0 0 auto; }
.fl-cart__price {
  flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: 21px; font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
}
@media (min-width: 768px) { .fl-cart__price { font-size: 23px; } }
.fl-cart__unit { font-size: 14px; font-weight: var(--fl-w-light); color: var(--fl-charcoal-70); }
.fl-cart__remove { flex: 0 0 auto; margin-left: auto; }
/* Батьківський style.min.css робить `a.remove` абсолютним (top/right 40px) — у новій сітці
   хрестик через це стрибав до заголовка позиції, а `.product-remove` лишався 0×0.
   Повертаємо його в потік рядка «кількість — сума — видалити». */
/* Правка користувача 23.09: самого хрестика було мало — покупець його шукав. Додаємо
   підпис «ВИДАЛИТИ» (label-стиль) прямо в кнопку. Розмітку не чіпаємо: текст додається
   через ::after, тож AJAX-видалення WooCommerce (`.product-remove > a.remove`) працює як було. */
.fl-cart__remove a.remove {
  position: static; top: auto; right: auto; inset: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: auto; min-height: 40px; padding: 0 12px; font-size: 19px; line-height: 1;
  color: var(--fl-charcoal-70); background: none; border: 0; border-radius: var(--fl-radius);
  transition: color var(--fl-dur) var(--fl-ease), background-color var(--fl-dur) var(--fl-ease);
}
.fl-cart__remove a.remove::after {
  content: "Видалити";
  font-size: var(--fl-label-size); letter-spacing: var(--fl-label-ls);
  font-weight: var(--fl-w-medium); text-transform: uppercase; line-height: 1;
}
.fl-cart__remove a.remove:hover { color: var(--fl-charcoal); background: var(--fl-cream); }

/* Купон і прихована кнопка «Оновити кошик» */
.fl-cart__actions { padding-block: 24px 0; }
/* Батьківський `.coupon{padding:40px;…;background:#fafafa}` малював тут окрему майже-білу
   плиту (#fafafa поза 8-тоновою палітрою, ТЗ п.1 і п.13). Скидаємо фон і відступи; панель
   лишається прозорою на Ivory, а Cream тримає саме поле — так купон не «плита», а рядок. */
.fl-cart__coupon,
.fl-cart__actions .coupon.fl-cart__coupon {
  display: grid; gap: 8px; max-width: 420px;
  padding: 0; background: transparent; border: 0;
}
.fl-cart__coupon-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* Батьківські `.coupon input{width:calc(100% - 62px);padding:20px 30px;color:#151515;
   font-family:ObjektivMk1_Trial_300;border:1px solid #e1e1e1}` (0,1,1) і `.coupon .button
   {width:100%}` (0,2,0) сильніші за `.fl-input` / `.fl-btn` — повертаємо вигляд теми. */
.fl-cart__coupon-row input.fl-input {
  flex: 1 1 180px; min-width: 0; width: auto; padding: 0 16px;
  font: inherit; font-size: 18px; color: var(--fl-charcoal);
  background: var(--fl-cream); border: 1px solid var(--fl-line);
}
.fl-cart__coupon-row .fl-btn { flex: 0 0 auto; width: auto; }
/* Помилку купона WC (`cart.js` → show_coupon_error) вставляє в `.coupon` під полем */
.fl-cart__coupon .coupon-error-notice {
  /* Текст помилки — Charcoal (план: «помилки … Charcoal або Deep Sage», але Deep Sage на Ivory
     дає 4,07:1 < 4,5:1). Помилковий стан додатково тримає рамка поля (Deep Sage, 1.4.11). */
  display: block; margin: 4px 0 0; font-size: 15px; line-height: 1.35; color: var(--fl-charcoal);
}
.fl-cart__coupon #coupon_code.has-error { border-color: var(--fl-deep-sage); }

/* Підсумок */
.fl-cart__aside { min-width: 0; }
@media (min-width: 1024px) { .fl-cart__aside { position: sticky; top: 24px; } }
.fl-totals { padding: 24px; background: var(--fl-cream); border-radius: var(--fl-radius); }
@media (min-width: 768px) { .fl-totals { padding: 28px 32px; } }
.fl-totals__title { margin: 0 0 18px; }
.fl-totals__table { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.fl-totals__table tr { border: 0; }
.fl-totals__table th,
.fl-totals__table td {
  padding: 10px 0; border: 0; text-align: left; vertical-align: top;
  font-size: 17px; font-weight: var(--fl-w-light); color: var(--fl-charcoal);
}
/* Панель підсумку вузька (≈400px), і довга сума в td стискала підпис до min-content
   («Сума / товарів» у два рядки) — лишаємо підписи одним рядком, переносити можна суму. */
.fl-totals__table th { padding-right: 16px; font-weight: var(--fl-w-light); white-space: nowrap; }
.fl-totals__table td { text-align: right; }
.fl-totals__table tr.order-total th,
.fl-totals__table tr.order-total td {
  padding-top: 16px; border-top: 1px solid var(--fl-greige); font-size: 21px; font-weight: var(--fl-w-medium);
}
.fl-totals__table tr.order-total strong { font-weight: var(--fl-w-medium); }
.fl-totals__cta { margin-top: 22px; }
.fl-totals__btn { width: 100%; }

/* Клас `shop_table_responsive` на таблиці підсумку лишається (WC-шаблон, на нього спираються
   плагіни доставки), але батьківський style.min.css вішає на нього СВОЮ мобільну верстку
   в `@media (max-width: 1080px)` — тобто на 1024 і 390, двох із трьох обов'язкових ширин:
     table.shop_table_responsive tbody th{display:none}                       (0,1,3)
     table.shop_table_responsive tr td{display:flex;justify-content:flex-end}  (0,1,3)
     table.shop_table_responsive tr td[data-title]::before{content:attr(data-title) ": ";
       font-family:ObjektivMk1_Trial_400;position:absolute;left:10px}          (0,2,4)
   Через це підписи «Сума товарів / Доставка / До сплати» малювалися старим trial-шрифтом
   абсолютним псевдоелементом ПОВЕРХ вмісту, а в рядку доставки список методів, адреса і
   форма «Змінити адресу» ставали одним нерозривним flex-рядком у комірці ≈310px.
   Скидаємо з достатньою специфічністю: (0,2,3) і (0,3,4) відповідно. Розкладка рядка
   доставки на mobile — природна стопка блоків у поверненій table-cell (список → адреса →
   «Змінити адресу»), відступи дають .fl-shipping-dest і .fl-calc. */
table.fl-totals__table.shop_table_responsive tbody th,
table.fl-totals__table.shop_table_responsive tr th { display: table-cell; }
table.fl-totals__table.shop_table_responsive tr td { display: table-cell; position: static; }
table.fl-totals__table.shop_table_responsive tr td[data-title]::before { content: none; }

/* Способи доставки в підсумку кошика (cart/cart-shipping.php) */
.fl-shipping-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fl-shipping-list__item { display: flex; align-items: flex-start; gap: 10px; list-style: none; }
.fl-shipping-list input[type="radio"] { flex: 0 0 auto; margin: 4px 0 0; accent-color: var(--fl-deep-sage); }
.fl-shipping-list label { font-size: 16px; line-height: 1.35; font-weight: var(--fl-w-light); cursor: pointer; }
.fl-shipping-dest { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: var(--fl-charcoal-70); }
.fl-shipping-dest strong { font-weight: var(--fl-w-medium); color: var(--fl-charcoal); }

/* Калькулятор доставки (Львів).
   ВАЖЛИВО: усе це живе в комірці підсумку, якій `.fl-totals__table td` дає text-align: right
   (це зроблено для довгих сум). Форма успадковувала right, тому посилання «ЗМІНИТИ АДРЕСУ»,
   підписи КРАЇНА / ОБЛАСТЬ / МІСТО / ІНДЕКС, значення select2 і кнопка «ОНОВИТИ» тиснулися
   праворуч, а текст, який людина вводить у поля, лишався ліворуч (input {text-align: start}).
   Повертаємо ліве вирівнювання самим блокам у цій комірці — НЕ через `.fl-calc *`, щоб не
   протекло в дропдаун select2, який рендериться поза формою. */
.fl-shipping-list,
.fl-shipping-dest,
.fl-calc,
.fl-calc__toggle,
.fl-calc__form,
.fl-calc__form .fl-field,
.fl-calc__form .fl-field__label,
.fl-calc__form .fl-input,
.fl-calc__form .select2-container .select2-selection__rendered,
.fl-calc__submit { text-align: left; }
.fl-calc { margin: 14px 0 0; }
.fl-calc__toggle {
  display: inline-block; font-size: var(--fl-label-size); letter-spacing: var(--fl-label-ls);
  text-transform: uppercase; font-weight: var(--fl-w-medium);
  padding-bottom: 3px; border-bottom: 1px solid var(--fl-greige);
}
.fl-calc__toggle:hover { color: var(--fl-charcoal); border-color: var(--fl-charcoal); }
.fl-calc__form { display: grid; gap: 14px; margin: 16px 0 0; }
.fl-calc__form .fl-input { background: var(--fl-ivory); }
.fl-calc__submit { margin: 0; }

/* ==========================================================================
   СТАНИ З МАСКОТОМ: порожній кошик, 404, «оплата обробляється / не пройшла»
   ========================================================================== */
/* Подача за decisions «Маскот»: секція Cream, портрет у фірмовій арці, ПІД НИМ H1 / текст /
   кнопка — тобто вертикальна стопка на всіх ширинах (бокової розкладки на ≥1024 немає:
   макетів станів ТЗ п.21 ще не погоджено, а decisions має приоритет над припущенням). */
.fl-cart__empty,
.fl-state__inner {
  display: grid; justify-items: center; gap: 24px;
  padding-block: 40px var(--fl-section-y); text-align: center;
}
.fl-cart__empty {
  padding: 40px 20px; margin-bottom: 8px;
  background: var(--fl-cream); border-radius: var(--fl-radius);
}
@media (min-width: 768px) { .fl-cart__empty { padding: 56px 32px; } }
.fl-cart__empty > .woocommerce-notices-wrapper { width: 100%; }
.fl-cart__empty-title { margin: 0; }
.fl-cart__empty-text,
.fl-state__text { margin: 0; max-width: 52ch; }
.fl-cart__empty-cta, .fl-state__actions { margin: 6px 0 0; }

/* decisions «Маскот»: секція Cream (арка теплого кремового «сідає» на неї без шва) */
.fl-state { background: var(--fl-cream); }
/* Крихти 404 — перший елемент сторінки і ліворуч, як на решті службових сторінок
   (сам стан лишається центрованим). */
.fl-state__crumbs { justify-self: stretch; width: 100%; text-align: left; }
.fl-state__crumbs .fl-breadcrumbs { margin-bottom: 0; }
.fl-state__body { display: grid; justify-items: center; gap: 18px; max-width: 640px; }
.fl-state__code { margin: 0; color: var(--fl-charcoal-70); }
.fl-state__title { margin: 0; }
.fl-state__wait { margin: 0; font-size: 16px; color: var(--fl-charcoal-70); }
/* Секція вже Cream, тому вкладена панель — Ivory (інакше зливалася б) */
.fl-state__order {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px;
  margin: 4px 0 0; padding: 18px 24px; background: var(--fl-ivory); border-radius: var(--fl-radius);
}
.fl-state__order-row { display: grid; gap: 4px; }
.fl-state__order dt { color: var(--fl-charcoal-70); }
.fl-state__order dd { margin: 0; font-size: 19px; font-weight: var(--fl-w-medium); }
.fl-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fl-state__links-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
/* 520px: при 420px поле виходило 279px (247px під текст), і плейсхолдер
   «Що шукаєте? Наприклад, півонії» (246px у Cormorant Light) обрізався на пів слова. */
.fl-state__search { width: 100%; max-width: 520px; }
.fl-state__help { margin: 0; font-size: 16px; color: var(--fl-charcoal-70); }
.fl-state__help a { border-bottom: 1px solid var(--fl-greige); }
.fl-state .fl-breadcrumbs { margin: 0; color: var(--fl-charcoal-70); }
/* Поля на Cream-секції — Ivory (пошук на 404) */
.fl-state .fl-input, .fl-cart__empty .fl-input { background: var(--fl-ivory); }

/* ==========================================================================
   ОФОРМЛЕННЯ ЗАМОВЛЕННЯ (ТЗ п.14)
   ========================================================================== */
.fl-checkout { background: var(--fl-bg); }
.fl-checkout__inner { padding-block: 24px var(--fl-section-y); }
.fl-checkout__title { margin: 8px 0 28px; }
@media (min-width: 1024px) { .fl-checkout__title { margin-bottom: 44px; } }

.fl-checkout__grid { display: grid; gap: 40px; align-items: start; }
/* MOBILE (<1024px): склад замовлення і «До сплати» ПЕРЕД секціями 01–04.
   У DOM aside стоїть після .fl-checkout__main (одна колонка = стек), тож на 390px сума
   опинялася на ~860px НИЖЧЕ кнопки «Підтвердити замовлення» — покупець підтверджував
   замовлення, не бачачи ні переліку, ні суми (ТЗ п.20: mobile проєктується окремо, ТЗ п.14).
   Липкого підсумку на mobile немає, тому підсумок ставимо першим: підсумок → 01 → 02 → 03 → 04.
   DOM не дублюємо (другий #order_review зламав би фрагменти WC), порядок табуляції лишається
   логічним, бо grid-order у стеку збігається з візуальним порядком читання. */
@media (max-width: 1023px) {
  .fl-checkout__grid { gap: 32px; }
  .fl-checkout__aside { order: -1; }
}
@media (min-width: 1024px) {
  .fl-checkout__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; }
}
@media (min-width: 1280px) {
  .fl-checkout__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; }
}
.fl-checkout__main { min-width: 0; display: grid; gap: 0; }

/* Секції 01–04 */
.fl-checkout__section { padding-block: 28px; border-top: 1px solid var(--fl-greige-50); }
/* Перша секція («01 ОТРИМУВАЧ») без верхньої лінії — вона стоїть одразу під H1.
   `:first-child` тут не працює: WooCommerce друкує в `#customer_details` службовий
   `<wc-order-attribution-inputs>` ПЕРЕД блоком білінгу, а прямі діти `.fl-checkout__main` —
   це `#customer_details`, секція оплати й `.woocommerce-additional-fields`, тобто сама
   `.fl-checkout__section` там ніколи не перша. Цілимось у блок білінгу за його класом WC. */
.fl-checkout__main .woocommerce-billing-fields > .fl-checkout__section:first-of-type,
.fl-checkout__sections > .fl-checkout__block:first-of-type > .fl-checkout__section {
  border-top: 0; padding-top: 0;
}
.fl-checkout__legend {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 20px; font-size: var(--fl-h3-size); line-height: var(--fl-h3-lh); font-weight: var(--fl-w-medium);
}
.fl-checkout__num {
  flex: 0 0 auto; font-size: var(--fl-label-size); letter-spacing: var(--fl-label-ls);
  font-weight: var(--fl-w-medium); color: var(--fl-charcoal-70);
}
.fl-checkout__legend-text { min-width: 0; }
.fl-checkout__hint { margin: -8px 0 18px; font-size: 16px; color: var(--fl-charcoal-70); }

/* Сітка полів: одна колонка на mobile, дві від 768px.
   `grid-template-areas: none` і `grid-auto-columns: auto` тут ОБОВ'ЯЗКОВІ: батьківський
   style.min.css робить `.woocommerce-billing-fields__field-wrapper` грідом з областями
   `"tl tr" "bl br"` (двома колонками) і `grid-auto-columns: minmax(0,1fr)`. Області самі
   створюють другу колонку, тому одного `grid-template-columns` не досить — поля ставали
   у два стовпці навіть на 390px. */
.fl-checkout__fields {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none;
  grid-auto-columns: auto; gap: 18px;
}
.fl-checkout__fields:empty { display: none; }
/* Батько ще й розставляє окремі поля по своїх іменованих областях
   (`.woocommerce-billing-fields__field-wrapper #billing_first_name_field{grid-column-start:tl-start}`
   і т.д., специфічність 1,1,0). Після зняття `grid-template-areas` такі імена створюють
   ІМПЛІЦИТНІ лінії — сітка розповзалася на 4 колонки, а поля ставали не на свої місця.
   Тому явно повертаємо автопотік селектором з id-предком (1,2,0). */
#customer_details .fl-checkout__fields > .form-row,
#customer_details .fl-checkout__subfields .form-row { grid-area: auto; grid-column: auto; grid-row: auto; }
@media (min-width: 768px) {
  .fl-checkout__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
  /* Селектор з `#customer_details` — щоб перебити скидання `grid-column: auto` вище
     (там теж 1,2,0; виграє те, що стоїть пізніше у файлі). */
  #customer_details .fl-checkout__fields > .form-row-wide,
  .fl-checkout__fields > .form-row-wide,
  .fl-checkout__fields > #order_comments_field,
  .fl-checkout__fields > #billing_text_field { grid-column: 1 / -1; }
  /* `form-row-first` без пари `form-row-last` (у ThemeHigh так налаштоване «Ім'я») —
     самотнє поле на півряду виглядало обрізаним, тягнемо його на всю ширину. */
  #customer_details .fl-checkout__fields > .form-row-first:not(:has(+ .form-row-last)),
  .fl-checkout__fields > .form-row-first:not(:has(+ .form-row-last)) { grid-column: 1 / -1; }
}
.fl-checkout__subfields {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; padding: 18px 20px;
  background: var(--fl-cream); border-radius: var(--fl-radius);
}
.fl-checkout__toggle { margin: 18px 0 0; }
.fl-checkout__account { padding-block: 0 28px; }
.fl-checkout__account-toggle { margin: 0; }

/* --------------------------------------------------------------------------
   Скидання батьківського Objektiv (TRIAL) у блоках етапу 7.
   ТЗ п.1 — Cormorant на всьому сайті; ТЗ п.18 — прибрати стару типографіку;
   decisions п.16 — «Objektiv (TRIAL) після редизайну не підключається». Наслідувати
   Cormorant із `.fl-scope` ці вузли не можуть: батько оголошує гарнітуру на них ПРЯМО і
   зі специфічністю, вищою за наші класи. Числа: батько → ми.
   -------------------------------------------------------------------------- */
/* Ті самі батьківські правила ставлять і колір #151515 — він поза палітрою теми
   (Charcoal — #2C2A26, tokens.css: «тільки з палітри, без нових кольорів»), тому скидаємо
   разом із гарнітурою. */
/* `.woocommerce-billing-fields__field-wrapper p label` / `.woocommerce-shipping-fields__…`
   / `.woocommerce-additional-fields__field-wrapper .notes label` (0,1,2) — підписи полів 01–04 */
.fl-checkout .fl-checkout__fields .fl-field__label,
.fl-checkout .fl-checkout__fields .fl-field__label span { font-family: inherit; color: var(--fl-charcoal); }
.fl-checkout .fl-checkout__fields .fl-field__label .optional { color: var(--fl-charcoal-70); }
/* `.woocommerce-checkout .woocommerce .woocommerce-form-login-toggle .woocommerce-info` (0,4,0) */
.fl-checkout .woocommerce .fl-checkout__login-toggle .woocommerce-info {
  font-family: inherit; color: var(--fl-charcoal);
}
/* `.woocommerce-checkout-payment .wc_payment_methods li div label|p` (0,3,3) — описи шлюзів */
.fl-checkout .fl-payment .fl-payment__list li .fl-payment__box,
.fl-checkout .fl-payment .fl-payment__list li .fl-payment__box p,
.fl-checkout .fl-payment .fl-payment__list li .fl-payment__label {
  font-family: inherit; color: var(--fl-charcoal);
}
/* `.woocommerce-checkout-payment .place-order .woocommerce-privacy-policy-text p` (0,3,2) */
.fl-checkout .fl-payment .fl-terms .woocommerce-privacy-policy-text p,
.fl-checkout .fl-payment .fl-terms p { font-family: inherit; color: var(--fl-charcoal); }
/* Глобальне батьківське `.button, .added_to_cart, .wc-forward {font-family:ObjektivMk1_Trial_400}`
   (0,1,0) — те саме джерело, що давало рожевий #f4abc0 і `width:calc(100% - 2px)`. */
:is(.fl-cart, .fl-checkout, .fl-thanks, .fl-state, .fl-order) .fl-btn { font-family: inherit; }

/* Поля: Ivory / Cream, тонка Greige рамка, Charcoal текст — не browser-style */
.fl-field { display: grid; gap: 8px; margin: 0; }
.fl-field__label {
  font-size: var(--fl-label-size); line-height: var(--fl-label-lh); letter-spacing: var(--fl-label-ls);
  text-transform: uppercase; font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
}
.fl-field .woocommerce-input-wrapper { display: block; }
.fl-field .required { color: var(--fl-charcoal); text-decoration: none; }
.fl-field .optional {
  font-size: 11px; letter-spacing: 0.6px; text-transform: none;
  font-weight: var(--fl-w-light); color: var(--fl-charcoal-70);
}
.fl-field .description { display: block; margin-top: 6px; font-size: 14px; color: var(--fl-charcoal-70); }
.fl-textarea { min-height: 112px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
/* Нативний select без browser-style: власна стрілка, без system-ui шрифту */
.fl-select {
  padding-right: 42px; cursor: pointer;
  background-image: 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");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
/* ПОЛЕ «ДАТА» — стилізуємо ЗА ТИПОМ, а не за класом.
   ThemeHigh реєструє власний рендерер `woocommerce_form_field_date`
   (`woo-checkout-field-editor-pro/public/class-thwcfd-public-checkout.php:73`) і в case 'date'
   друкує `<input type="date" name id value />` хардкодом — без `$args['input_class']`, тому
   клас `fl-input`, який додає `fl_form_field_args()`, до розмітки не потрапляє взагалі.
   Через це поле єдине на checkout лишалося browser-style (а точніше — з батьківським
   `input,textarea{width:calc(100% - 62px);padding:19px 30px;color:#151515;
   font-family:ObjektivMk1_Trial_300;border:1px solid #e1e1e1}`), що прямо суперечить ТЗ п.14.
   Селектор (0,2,1) перебиває і батьківський (0,0,1), і залишиться правильним після етапу 8.
   `appearance` НЕ скидаємо: на input[type=date] це ламає нативний вибір дати. */
.fl-field--date .fl-input,
.fl-field--date input[type="date"],
.fl-field .woocommerce-input-wrapper > input[type="date"] {
  width: 100%; min-height: 52px; padding: 0 12px 0 16px;
  font: inherit; font-size: 18px; letter-spacing: var(--fl-body-ls); color: var(--fl-charcoal);
  background: var(--fl-cream); border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
  outline: none; transition: border-color var(--fl-dur) var(--fl-ease);
}
.fl-field--date input[type="date"]:focus,
.fl-field .woocommerce-input-wrapper > input[type="date"]:focus { border-color: var(--fl-deep-sage); }
.fl-field--date input[type="date"]:focus-visible,
.fl-field .woocommerce-input-wrapper > input[type="date"]:focus-visible {
  outline: 2px solid var(--fl-focus); outline-offset: 2px;
}
.fl-field--date input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.fl-field--date input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Рядок «дата / час» — окремий блок після адреси; без власного відступу він злипався з полем
   «Назва вулиці» (`.fl-checkout__fields` має тільки `gap`, а між блоками gap не діє). */
.fl-checkout__fields--when { margin-top: 18px; }
/* Помилки валідації WC (checkout.js додає класи на .form-row) */
.fl-field.woocommerce-invalid .fl-input { border-color: var(--fl-deep-sage); }
/* Лейбл і текст помилки — Charcoal (1.4.3: 14px не «великий текст»); сам стан «invalid»
   позначає рамка поля Deep Sage (нетекстова ознака, 4,07:1 ≥ 3:1 за 1.4.11) і сам текст помилки. */
.fl-field.woocommerce-invalid .fl-field__label { color: var(--fl-charcoal); }
.fl-field .checkout-inline-error-message {
  margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--fl-charcoal);
}
.fl-field.woocommerce-validated .fl-input { border-color: var(--fl-greige); }

/* Чекбокси й радіо.
   Батьківський style.min.css перемальовує їх власним контролем: `appearance:none`,
   рамка #e1e1e1 і рожева (#f4abc0) крапка `::before` — тобто ні `accent-color`, ні нативний
   вигляд там не працюють, а селектори `input[type="radio"]` (0,1,1) сильніші за наші класи.
   Тому малюємо свій контроль у фірмових кольорах із вищою специфічністю (0,2,1). */
:is(.fl-cart, .fl-checkout, .fl-thanks, .fl-state, .fl-order) :is(input[type="radio"], input[type="checkbox"]) {
  appearance: none; -webkit-appearance: none;
  position: relative; display: inline-block; flex: 0 0 auto;
  min-width: 20px; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
  background: var(--fl-ivory); border: 1px solid var(--fl-greige); border-radius: var(--fl-radius);
  cursor: pointer; vertical-align: middle;
  transition: border-color var(--fl-dur) var(--fl-ease);
}
:is(.fl-cart, .fl-checkout, .fl-thanks, .fl-state, .fl-order) input[type="radio"] { border-radius: 50%; }
:is(.fl-cart, .fl-checkout, .fl-thanks, .fl-state, .fl-order) :is(input[type="radio"], input[type="checkbox"])::before {
  content: ""; position: absolute; inset: 3px; top: 3px; left: 3px; width: auto; height: auto;
  background: var(--fl-deep-sage); border-radius: 1px;
  transform: scale(0); transition: transform var(--fl-dur) var(--fl-ease);
}
:is(.fl-cart, .fl-checkout, .fl-thanks, .fl-state, .fl-order) input[type="radio"]::before { border-radius: 50%; }
:is(.fl-cart, .fl-checkout, .fl-thanks, .fl-state, .fl-order) :is(input[type="radio"], input[type="checkbox"]):checked {
  border-color: var(--fl-deep-sage);
}
:is(.fl-cart, .fl-checkout, .fl-thanks, .fl-state, .fl-order) :is(input[type="radio"], input[type="checkbox"]):checked::before {
  transform: scale(1);
}
:is(.fl-cart, .fl-checkout, .fl-thanks, .fl-state, .fl-order) :is(input[type="radio"], input[type="checkbox"]):focus-visible {
  outline: 2px solid var(--fl-focus); outline-offset: 2px;
}

.fl-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.fl-check__input { flex: 0 0 auto; margin: 2px 0 0; }
.fl-check__text, .fl-check > span { font-size: 17px; line-height: 1.35; font-weight: var(--fl-w-light); }

/* Блок 02: спосіб доставки (checkout/fl-shipping-methods.php) */
.fl-shipping-methods { display: grid; gap: 10px; margin: 0 0 22px; }
.fl-shipping-methods:empty { display: none; margin: 0; }
.fl-shipping-methods__label { display: block; color: var(--fl-charcoal); }
.fl-shipping-methods__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fl-shipping-methods__item {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; list-style: none;
  border: 1px solid var(--fl-greige-50); border-radius: var(--fl-radius); background: var(--fl-cream);
}
.fl-shipping-methods__item + .fl-shipping-methods__item { margin-top: 10px; }
.fl-shipping-methods__item:has(input:checked) { border-color: var(--fl-deep-sage); }
.fl-shipping-methods__item input[type="radio"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; }
.fl-shipping-methods__label-text {
  flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1.3; font-weight: var(--fl-w-light); cursor: pointer;
}
.fl-shipping-methods__label-text .woocommerce-Price-amount { font-weight: var(--fl-w-medium); }

/* Блок 03: оплата */
.fl-payment { margin: 0; }
.fl-payment__list { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
/* display:block обов'язковий: батьківський style.min.css має
   `.woocommerce-checkout-payment .wc_payment_methods li { display: flex }` (специфічність
   0,2,1), і в такому flex-контейнері радіо з лейблом «блокифікуються» — стають у стовпчик.
   Тому селектор нижче навмисно довший (0,3,1). */
.fl-payment .fl-payment__list li.fl-payment__item { display: block; }
.fl-payment__item {
  padding: 14px 16px; list-style: none;
  border: 1px solid var(--fl-greige-50); border-radius: var(--fl-radius); background: var(--fl-cream);
}
.fl-payment__item:has(input:checked) { border-color: var(--fl-deep-sage); }
.fl-payment__item > input[type="radio"] { margin: 0 12px 0 0; }
/* Батьківський `input, textarea { width: calc(100% - 62px) }` робить лейбл і радіо в стовпчик —
   тримаємо їх одним рядком. */
.fl-payment__label { display: inline-flex; align-items: center; gap: 10px; width: auto; font-size: 17px; font-weight: var(--fl-w-light); cursor: pointer; }
.fl-payment__icon img { display: inline-block; max-height: 24px; width: auto; }
.fl-payment__box {
  margin: 12px 0 0; padding: 14px 0 0; border-top: 1px solid var(--fl-greige-50);
  font-size: 16px; line-height: 1.5;
}
.fl-payment__box p { margin: 0 0 8px; }
.fl-payment__box p:last-child { margin-bottom: 0; }
.fl-payment__submit { margin: 0; }
.fl-payment__btn { width: 100%; min-height: 58px; }
.fl-payment__noscript { margin: 0 0 12px; font-size: 16px; }
/* Один спосіб оплати — WC ховає радіо через checkout.js, лишаємо лейбл без відступу */
.fl-payment__list li:only-child > input[type="radio"][style*="none"] + .fl-payment__label { margin-left: 0; }

.fl-terms { margin: 0 0 18px; font-size: 16px; }
.fl-terms p { margin: 0 0 8px; }
/* Чекбокс згоди CusRev: батько фарбує його `.woocommerce-checkout-payment .place-order
   .cr-customer-consent span` / `… .woocommerce-form__label span` (0,3,1) в Objektiv і #151515
   (не токен теми). Однакова специфічність — дочірній файл пізніше, тому виграємо. */
.fl-checkout .fl-terms .cr-customer-consent span,
.fl-checkout .fl-terms .woocommerce-form__label span {
  font-family: inherit; color: var(--fl-charcoal);
}

/* Права колонка: компактний склад замовлення */
.fl-checkout__aside { min-width: 0; }
@media (min-width: 1024px) { .fl-checkout__aside { position: sticky; top: 24px; } }
.fl-checkout__summary { padding: 24px; background: var(--fl-cream); border-radius: var(--fl-radius); }
@media (min-width: 768px) { .fl-checkout__summary { padding: 28px 32px; } }
.fl-checkout__summary-title { margin: 0 0 18px; }
.fl-review { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.fl-review thead { display: none; }
/* Батьківський style.min.css має `.cart_item{display:flex}`, а клас `cart_item` на рядку
   таблиці складу обов'язковий (фільтр `woocommerce_cart_item_class`, на нього спираються
   плагіни). Через flex рядок випадав з таблиці, і колонка назви отримувала випадкові 152px.
   Повертаємо табличну розкладку явно (до етапу 8, коли батьківський CSS від'єднається). */
.fl-review tr, .fl-review tr.cart_item { display: table-row; border: 0; }
.fl-review td, .fl-review th { display: table-cell; }
.fl-review td, .fl-review th {
  padding: 12px 0; border: 0; text-align: left; vertical-align: top;
  font-size: 16px; font-weight: var(--fl-w-light); color: var(--fl-charcoal);
}
.fl-review tbody tr + tr td { border-top: 1px solid var(--fl-greige-50); }
/* `display:flex` на самій <td> ламає табличну розкладку (комірка випадає з таблиці і
   колонка назви отримує випадкову ширину) — тому flex на внутрішній обгортці. */
.fl-review td.product-name { min-width: 0; }
.fl-review__row { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.fl-review__thumb { flex: 0 0 auto; width: 52px; }
.fl-review__thumb img {
  width: 52px; height: 65px; object-fit: cover; border-radius: var(--fl-radius);
}
.fl-review__info { flex: 1 1 auto; min-width: 0; }
.fl-review__title { display: block; line-height: 1.3; }
.fl-review__title .product-quantity { font-weight: var(--fl-w-medium); white-space: nowrap; }
.fl-review__info dl.variation { display: grid; gap: 2px; margin: 6px 0 0; font-size: 14px; }
.fl-review__info dl.variation dd { margin: 0; }
.fl-review__info dl.variation dd p { margin: 0; }
.fl-review td.product-total { text-align: right; white-space: nowrap; }
.fl-review tfoot tr:first-child th,
.fl-review tfoot tr:first-child td { border-top: 1px solid var(--fl-greige); padding-top: 16px; }
.fl-review tfoot td { text-align: right; white-space: nowrap; }
.fl-review tfoot tr.order-total th,
.fl-review tfoot tr.order-total td {
  padding-top: 14px; border-top: 1px solid var(--fl-greige); font-size: 20px; font-weight: var(--fl-w-medium);
}
.fl-review tfoot tr.order-total strong { font-weight: var(--fl-w-medium); }

/* Купон і форма входу над формою оформлення */
.fl-checkout__coupon-toggle, .fl-checkout__login-toggle { margin: 0 0 8px; }
.fl-checkout__coupon, .fl-login {
  display: grid; gap: 16px; margin: 0 0 24px; padding: 20px 24px;
  background: var(--fl-cream); border-radius: var(--fl-radius);
}
.fl-checkout__coupon { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.fl-checkout__coupon .form-row { margin: 0; }
.fl-checkout__coupon-submit { display: flex; align-items: flex-end; }
.fl-checkout__coupon .clear { display: none; }
/* Батьківське `.woocommerce-checkout .woocommerce .woocommerce-form-login{max-width:50%;
   width:100%;margin-bottom:20px;display:none;padding:40px;background:#fff;
   border:1px solid #e1e1e1}` (0,3,0) перебивало все, що оголошує `.fl-login` (0,1,0):
   розгорнута форма входу була БІЛОЮ карткою з рамкою #e1e1e1 і вдвічі вужчою за колонку
   форми, тоді як сусідня панель купона (тією ж декларацією) — правильною Cream. ТЗ п.1 і
   п.18. Селектор нижче — (0,3,1). */
.woocommerce-checkout .woocommerce form.fl-login {
  margin: 0 0 24px; padding: 20px 24px; max-width: none; width: auto;
  background: var(--fl-cream); border: 0; border-radius: var(--fl-radius);
}
/* `display` лишається за jQuery: `slideToggle()` виставляє інлайновий `display:block`, тому
   `gap` форми на розгортанні не працює — вертикальні відступи задаємо margin-ами частин. */
.fl-login__message { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.fl-login__message p { margin: 0; }
.fl-login__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 16px; }
@media (min-width: 768px) { .fl-login__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } }
.fl-login__grid .form-row { margin: 0; }
.fl-login__grid .fl-input { background: var(--fl-ivory); }
.fl-login__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0; }
.fl-login .clear { display: none; }
.fl-login__lost { margin-left: auto; }
/* Посилання в скоупі checkout: батько фарбує їх у #f4abc0 (поза палітрою, контраст ≈1,7:1
   на Ivory — ТЗ п.18 «випадкові кольори поза brand guide», WCAG 1.4.3 і пряма вимога плану
   «нотиси — Charcoal або Deep Sage, не Rose»). Селектори батька: `.woocommerce-checkout
   .woocommerce .woocommerce-form-login-toggle .woocommerce-info a` (0,4,1) і
   `.woocommerce-checkout-payment .place-order .woocommerce-privacy-policy-text p a` (0,3,2),
   тому наші — (0,4,1) і (0,4,2). Charcoal дає ~13:1. */
.fl-checkout .woocommerce .fl-checkout__login-toggle .woocommerce-info a,
.fl-checkout .woocommerce .fl-checkout__coupon-toggle .woocommerce-info a,
.fl-checkout .fl-payment .fl-payment__submit .woocommerce-privacy-policy-text p a,
.fl-checkout .fl-terms .woocommerce-privacy-policy-text p a {
  color: var(--fl-charcoal); border-bottom: 1px solid var(--fl-greige);
}
.fl-checkout .woocommerce .fl-checkout__login-toggle .woocommerce-info a:hover,
.fl-checkout .woocommerce .fl-checkout__coupon-toggle .woocommerce-info a:hover,
.fl-checkout .fl-payment .fl-payment__submit .woocommerce-privacy-policy-text p a:hover,
.fl-checkout .fl-terms .woocommerce-privacy-policy-text p a:hover {
  color: var(--fl-charcoal); border-color: var(--fl-charcoal);
}

/* ==========================================================================
   «ДЯКУЄМО ЗА ЗАМОВЛЕННЯ» і склад замовлення (ТЗ п.15)
   ========================================================================== */
.fl-thanks { background: var(--fl-bg); }
.fl-thanks .fl-checkout__inner { padding-block: 24px var(--fl-section-y); }
/* decisions «Маскот»: секція Cream, під маскотом H1 / текст / кнопка (стопка на всіх ширинах) */
.fl-thanks__hero {
  display: grid; justify-items: center; gap: 24px; text-align: center;
  padding: 40px 20px; background: var(--fl-cream); border-radius: var(--fl-radius);
}
@media (min-width: 768px) { .fl-thanks__hero { padding: 56px 32px; } }
.fl-thanks__hero-body { display: grid; justify-items: center; gap: 16px; max-width: 640px; }
.fl-thanks__title { margin: 0; }
.fl-thanks__text { margin: 0; max-width: 52ch; font-size: 18px; }
.fl-thanks__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 6px 0 0; }
/* Hero вже Cream, тому вкладена панель — Ivory */
.fl-thanks__overview {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 40px;
  margin: 10px 0 0; padding: 20px 24px; list-style: none;
  background: var(--fl-ivory); border-radius: var(--fl-radius);
}
.fl-thanks__overview li { display: grid; gap: 4px; list-style: none; text-align: left; }
.fl-thanks__overview .fl-label { color: var(--fl-charcoal-70); }
.fl-thanks__overview strong { font-size: 18px; font-weight: var(--fl-w-medium); }
.fl-thanks__more { margin: 32px 0 0; }

/* Гілка «підтвердіть e-mail» (checkout/form-verify-email.php). Батько має ГЛОБАЛЬНЕ
   `.button{width:calc(100% - 2px);background:#f4abc0;border-color:#f4abc0;
   font-family:ObjektivMk1_Trial_400}` — колір і шрифт приборкує `.fl-btn--primary`, але
   `width` він не оголошує, тому кнопка розтягувалася на всю ширину контенту (1279px). */
.fl-verify { display: grid; gap: 16px; max-width: 520px; margin: 28px 0 0; }
.fl-verify__text { margin: 0; font-size: 17px; line-height: 1.5; }
.fl-verify__text a { color: var(--fl-charcoal); border-bottom: 1px solid var(--fl-greige); }
.fl-verify__text a:hover { color: var(--fl-charcoal); border-color: var(--fl-charcoal); }
.fl-verify__field { margin: 0; }
.fl-verify__submit { margin: 4px 0 0; }
.fl-verify__submit .fl-btn { width: auto; }
.fl-thanks__hero--verify { margin-bottom: 8px; }
/* Інструкції шлюзу (bacs — реквізити, cod — пояснення): хук woocommerce_thankyou_{gateway}.
   Шлюзи друкують просто <p> / <h2> без класів прямо в .fl-thanks__order, тому стилізуємо
   дітей-без-класу (у наших власних <p> клас є — .fl-thanks__more тощо). */
.fl-thanks__order .woocommerce-bacs-bank-details,
.fl-thanks__order .wc-bacs-bank-details-heading,
.fl-thanks__order > h2 { margin: 40px 0 14px; font-size: var(--fl-h3-size); font-weight: var(--fl-w-medium); }
.fl-thanks__order > p:not([class]) {
  margin: 28px 0 0; padding: 16px 20px; font-size: 17px; line-height: 1.5;
  background: var(--fl-cream); border-radius: var(--fl-radius);
}
.fl-thanks__order .wc-bacs-bank-details { display: grid; gap: 8px; margin: 0; padding: 20px 24px; list-style: none; background: var(--fl-cream); border-radius: var(--fl-radius); }
.fl-thanks__order .wc-bacs-bank-details li { list-style: none; font-size: 17px; }

/* Ширина змістової колонки замовлення. Без обмеження таблиця «Склад замовлення» і рядки
   додаткових полів («Дата:», «Час доставки:», «Текст листівки:») розтягувалися на всі 1281px
   контейнера .fl-wide: підпис біля лівого краю, значення біля правого, між ними ~1200px
   порожнечі (ТЗ п.18). Сусідні гілки того самого потоку вже обмежені: order-pay .fl-pay
   720px, підсумок checkout 360/400px, .fl-thanks__hero-body 640px. Hero-смугу з маскотом
   НЕ обмежуємо — вона лишається на всю ширину. */
.fl-order { margin: 40px 0 0; max-width: 760px; }
.fl-order__customer { max-width: 760px; }
.fl-order__title, .fl-order__subtitle { margin: 0 0 16px; }
.fl-order__table { width: 100%; margin: 0 0 28px; border: 0; border-collapse: collapse; }
.fl-order__table tr { border: 0; }
.fl-order__table th, .fl-order__table td {
  padding: 12px 0; border-bottom: 1px solid var(--fl-greige-50); text-align: left; vertical-align: top;
  font-size: 17px; font-weight: var(--fl-w-light);
}
.fl-order__table thead th { font-weight: var(--fl-w-medium); }
.fl-order__table td:last-child, .fl-order__table tfoot th + td { text-align: right; }
.fl-order__table tfoot tr:last-child th, .fl-order__table tfoot tr:last-child td { font-weight: var(--fl-w-medium); }
.fl-order__table .wc-item-meta { display: grid; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 15px; }
.fl-order__table .wc-item-meta li { list-style: none; }
.fl-order__table .wc-item-meta p { display: inline; margin: 0; }
.fl-order__customer { margin: 8px 0 0; }
.fl-order__addresses { display: grid; gap: 28px; }
@media (min-width: 768px) { .fl-order__addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
.fl-order__customer address { font-style: normal; font-size: 17px; line-height: 1.6; }
.fl-order__customer address p { margin: 4px 0 0; }
.fl-order__again { margin: 0 0 24px; }

/* --------------------------------------------------------------------------
   Скидання батьківського оформлення «Складу замовлення» і блоку адрес.
   Батьківський style.min.css має для цих блоків правила зі специфічністю ВИЩОЮ за наші
   класи `fl-*`, тому вся таблиця й адреси малювалися старим trial-гротеском, кольором
   #151515, по центру, в сітці рамок #e1e1e1 — «типовий магазин», що прямо заборонено
   ТЗ п.1 (Cormorant на всьому сайті), ТЗ п.18 і decisions п.16 (Objektiv не підключається).
   Числа специфічності батька → наші: (0,2,0)→(0,2,1), (0,2,3)→(0,2,4), (0,2,1)→(0,3,1),
   (0,4,0)→(0,4,1); для `address p` у батька стоїть `!important`, тому і в нас.
   -------------------------------------------------------------------------- */
.woocommerce-order-details h2.woocommerce-order-details__title.fl-order__title {
  font-family: inherit; font-size: var(--fl-h3-size); line-height: var(--fl-h3-lh);
  font-weight: var(--fl-w-medium); color: var(--fl-charcoal); text-align: left; text-transform: none;
}
.woocommerce-order-details table.fl-order__table {
  width: 100%; table-layout: auto; border: 0; border-collapse: collapse;
}
.woocommerce-order-details table.fl-order__table thead tr th,
.woocommerce-order-details table.fl-order__table tbody tr th,
.woocommerce-order-details table.fl-order__table tbody tr td,
.woocommerce-order-details table.fl-order__table tfoot tr th,
.woocommerce-order-details table.fl-order__table tfoot tr td {
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--fl-greige-50);
  font-family: inherit; font-size: 17px; font-weight: var(--fl-w-light);
  color: var(--fl-charcoal); text-align: left; vertical-align: top; word-break: normal;
}
.woocommerce-order-details table.fl-order__table thead tr th { font-weight: var(--fl-w-medium); }
.woocommerce-order-details table.fl-order__table tbody tr td:last-child,
.woocommerce-order-details table.fl-order__table tfoot tr th + td { text-align: right; }
.woocommerce-order-details table.fl-order__table tfoot tr:last-child th,
.woocommerce-order-details table.fl-order__table tfoot tr:last-child td { font-weight: var(--fl-w-medium); }
.woocommerce-order-details table.fl-order__table tbody tr td a,
.woocommerce-order-details table.fl-order__table tbody tr td strong,
.woocommerce-order-details table.fl-order__table tbody tr td span,
.woocommerce-order-details table.fl-order__table tbody tr td bdi,
.woocommerce-order-details table.fl-order__table tfoot tr td bdi {
  font-family: inherit; font-size: inherit; color: var(--fl-charcoal);
}
.woocommerce-order-details table.fl-order__table tbody tr td strong { font-weight: var(--fl-w-medium); }
/* Кнопки дій замовлення в tfoot лишаються .fl-btn — батьківський `.button{background:#f4abc0}`
   вже приборканий у site.css, тут тільки вирівнювання. */
.woocommerce-order-details table.fl-order__table tfoot tr td .fl-btn { margin: 0; width: auto; }

/* Таблиця додаткових полів ThemeHigh («Час доставки», «Текст листівки») — плагін вішає її на
   `woocommerce_order_details_after_order_table`, а стилів для ПЛЮРАЛЬНОГО класу
   `woocommerce-table--custom-fields` немає ні в батька (там однина), ні в WC (батько знімає
   CSS ядра `woocommerce_enqueue_styles`), тому вона рендерилася браузерним дефолтом поруч зі
   стилізованою `.fl-order__table`. План §2 прямо вимагає перебити цей клас. */
.fl-order table.woocommerce-table--custom-fields {
  width: 100%; margin: 0 0 28px; border: 0; border-collapse: collapse; table-layout: auto;
}
.fl-order table.woocommerce-table--custom-fields tr { border: 0; }
.fl-order table.woocommerce-table--custom-fields th,
.fl-order table.woocommerce-table--custom-fields td {
  padding: 12px 0; border: 0; border-bottom: 1px solid var(--fl-greige-50);
  font-family: inherit; font-size: 17px; font-weight: var(--fl-w-light);
  color: var(--fl-charcoal); text-align: left; vertical-align: top;
}
.fl-order table.woocommerce-table--custom-fields td { text-align: right; }

/* Блок адрес «Замовник / Отримувач і доставка» */
.woocommerce-customer-details .woocommerce-columns.fl-order__addresses { grid-gap: 28px; gap: 28px; }
@media (min-width: 768px) {
  .woocommerce-customer-details .woocommerce-columns.fl-order__addresses { grid-gap: 40px; gap: 40px; }
}
.woocommerce-customer-details h2.woocommerce-column__title,
.woocommerce-customer-details .woocommerce-columns .woocommerce-column h2.woocommerce-column__title {
  font-family: inherit; font-size: var(--fl-h3-size); line-height: var(--fl-h3-lh);
  font-weight: var(--fl-w-medium); color: var(--fl-charcoal); text-align: left; text-transform: none;
}
.woocommerce-customer-details.fl-order__customer address,
.woocommerce-customer-details.fl-order__customer .woocommerce-columns .woocommerce-column address {
  font-family: inherit; font-style: normal; font-size: 17px; line-height: 1.6;
  color: var(--fl-charcoal); text-align: left;
}
/* Батько ставить тут `font-family`, `font-size:14px` і `margin-bottom:0` з `!important` —
   інакше телефон і e-mail лишалися 14px гротеском і без відступу. */
.woocommerce-customer-details.fl-order__customer address p,
.woocommerce-customer-details.fl-order__customer .woocommerce-columns .woocommerce-column address p {
  font-family: inherit !important; font-size: 17px !important; color: var(--fl-charcoal);
  margin: 4px 0 0 !important;
}

/* ==========================================================================
   Сторінка order-pay («Оплатити ще раз»)
   ========================================================================== */
.fl-pay { display: grid; gap: 28px; max-width: 720px; }
.fl-pay__table { width: 100%; border: 0; border-collapse: collapse; }
/* Як і в .fl-review: батьківський `.order_item{display:flex}` / `.cart_item{display:flex}`
   ламає табличні рядки — повертаємо їх явно. */
.fl-pay__table tr, .fl-pay__table tr.order_item { display: table-row; border: 0; }
.fl-pay__table td, .fl-pay__table th { display: table-cell; }
.fl-order__table tr, .fl-order__table tr.order_item,
.fl-order__table tr.woocommerce-table__line-item { display: table-row; }
.fl-order__table td, .fl-order__table th { display: table-cell; }
.fl-totals__table tr { display: table-row; }
.fl-totals__table td, .fl-totals__table th { display: table-cell; }
.fl-pay__table th, .fl-pay__table td {
  padding: 12px 0; border-bottom: 1px solid var(--fl-greige-50); text-align: left; vertical-align: top;
  font-size: 17px; font-weight: var(--fl-w-light);
}
.fl-pay__table thead th { font-weight: var(--fl-w-medium); }
.fl-pay__table td.product-subtotal, .fl-pay__table td.product-total { text-align: right; white-space: nowrap; }
.fl-state__search .fl-search__form { margin-inline: 0; max-width: 100%; }
@media (max-width: 479px) {
  .fl-state__search .fl-search__form { grid-template-columns: 1fr; }
  .fl-state__search .fl-search__form .fl-btn { width: 100%; }
}

/* ==========================================================================
   ЦІНА — АКЦЕНТ НА ВСІХ ЕКРАНАХ (рішення користувача 22.09, розділ «Валюта і ціна»)
   Картка (site.css .fl-card__price), сторінка товару (.fl-product p.price), sticky-кнопка
   і кошик (.fl-cart__price) вже Medium і більші за назву. Тут добираємо місця, де сума
   лишалася Light/дрібною: міні-кошик, таблиці замовлення (thank-you, «Мій акаунт»,
   повторна оплата) і рядок підсумку в checkout.
   Сам знак ₴ дає inc/currency.php (фільтр woocommerce_currency_symbol, лише фронт) — не чіпаємо.
   ========================================================================== */
/* Міні-кошик: «1 × 12 000 ₴» — виділяємо саме суму, «1 ×» лишається Light.
   Селектор довгий навмисно: вище є скидання `… li.woocommerce-mini-cart-item div
   span:not(.quantity) { font-weight: inherit }` зі специфічністю (0,4,3) — воно б перебило
   коротший запис і повернуло ціні Light. */
.fl-minicart__body .cart_list li.woocommerce-mini-cart-item div .quantity .woocommerce-Price-amount {
  font-weight: var(--fl-w-medium); color: var(--fl-charcoal); white-space: nowrap;
}
.fl-minicart__body .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-size: 21px; line-height: 1.2; font-weight: var(--fl-w-medium); color: var(--fl-charcoal); white-space: nowrap;
}
/* Таблиці «Склад замовлення» (thank-you, перегляд замовлення, сторінка оплати) і підсумок
   checkout: суми — Medium, щоб читалися сильніше за назви позицій. */
.fl-order__table td .woocommerce-Price-amount,
.fl-order__table tfoot .woocommerce-Price-amount,
.fl-pay__table td .woocommerce-Price-amount,
.fl-review td .woocommerce-Price-amount,
.fl-review tfoot .woocommerce-Price-amount,
.fl-totals__table td .woocommerce-Price-amount {
  font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
}
/* white-space: nowrap — лише там, де його НЕМАЄ на рівні комірки: у .fl-pay__table td і
   .fl-review td/tfoot він уже заданий вище (одне джерело правди, без дублювання). */
.fl-order__table td .woocommerce-Price-amount,
.fl-order__table tfoot .woocommerce-Price-amount,
.fl-totals__table td .woocommerce-Price-amount {
  white-space: nowrap;
}
/* «Мій акаунт → Замовлення»: колонка «Разом» */
.fl-orders .woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
  font-weight: var(--fl-w-medium); color: var(--fl-charcoal); white-space: nowrap;
}
/* Перекреслена стара ціна ніде не має конкурувати з новою */
:is(.fl-order__table, .fl-pay__table, .fl-review, .fl-totals__table, .fl-minicart__body) del .woocommerce-Price-amount {
  font-weight: var(--fl-w-light); opacity: 0.55;
}