/* ==========================================================================
   FLORISTERIA 2026 — site.css (дочірня тема floristeria-2026, на основі прототипу)
   Mobile-first. Брейкпоінти: base ≤640 · ≥768 tablet · ≥1024 desktop · ≥1440 wide
   Порядок: FONTS → GLOBAL → SCOPE-RESET → TYPO → UI → TOP BAR → HEADER → 01 HERO
   → 02 КАТЕГОРІЇ → 03 НОВИНКИ (картка) → ПОПУЛЯРНІ (опційно) → РЯД «ПРО + ФРЕСКА»
   → РЯД «ПЕРЕВАГИ + INSTAGRAM» → 08 INSTAGRAM (інші сторінки) → FOOTER (світлий) → ОБОЛОНКА WP → A11Y/MOTION

   ВАЖЛИВО: батьківський monoflowers-style від'єднано на етапі 8 (inc/cleanup.php), але
   структура файла лишається тією самою — глобальні правила тут мінімальні (фон/колір body,
   reset накреслень), а базовий reset прототипу застосовується всередині .fl-scope (шапка,
   off-canvas, Instagram, футер, нові блоки). Селектори reset-у загорнуті в :where(), щоб
   мати специфічність елемента: вони не перебивають класи компонентів fl-*.
   ========================================================================== */

/* ---------- FONTS (self-hosted, лише 3 накреслення) ---------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- GLOBAL ---------------------------------------------------------
   ЕТАП 8: батьківський style.min.css від'єднано (inc/cleanup.php), тому базові стилі
   елементів тепер наші. Селектори тут — на елементах (специфічність 0,0,1), тобто слабші
   за будь-який клас компонента, і ті самі значення, що в reset-і .fl-scope нижче: так
   розкладка нових блоків не змінюється, а чужа розмітка (WooCommerce, Gravity Forms,
   core-блоки в контенті сторінок) отримує адекватну базу замість браузерних дефолтів.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: stable — місце під системну смугу прокрутки резервується завжди.
   Без нього `body.is-locked { overflow: hidden }` (drawer фільтра/сортування, off-canvas,
   пошук) прибирає смугу без компенсації, і вся сторінка стрибком розширюється на її
   ширину (~15px на desktop із класичними смугами) при кожному відкритті панелі. */
html { -webkit-text-size-adjust: 100%; font-synthesis: none; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--fl-bg);
  color: var(--fl-text);
  font-family: var(--fl-font-main);
  font-weight: var(--fl-w-light);
  font-size: var(--fl-body-size);
  line-height: var(--fl-body-lh);
  letter-spacing: var(--fl-body-ls);
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4, h5, h6) { margin: 0; font-family: inherit; font-weight: var(--fl-w-medium); line-height: 1.15; }
:where(p, figure, blockquote, dl, dd, pre) { margin: 0; }
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(img, svg, video, iframe) { max-width: 100%; }
:where(img, video) { height: auto; }
:where(a) { color: inherit; text-decoration: none; }
:where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
:where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
:where(table) { width: 100%; border-collapse: collapse; }
:where(th, td) { padding: 0; text-align: left; vertical-align: top; }
:where(fieldset) { margin: 0; padding: 0; border: 0; min-width: 0; }
:where(legend) { padding: 0; }
:where(hr) { height: 0; margin: 24px 0; border: 0; border-top: 1px solid var(--fl-line); }
:where(mark) { background: none; color: inherit; }
:where(small) { font-size: 0.85em; }
:where(sup, sub) { font-size: 0.7em; }
:focus-visible { outline: 2px solid var(--fl-focus); outline-offset: 2px; }
body.is-locked { overflow: hidden; }
/* Декоративні «листки» старого дизайну (mono-flowers style.min.css: body::before/::after,
   background-left/right.png, видимі при ≥1421px і right:-80px → scrollWidth +80px).
   ТЗ п.18: прибираємо, не чекаючи dequeue monoflowers-style на етапі 8. */
body.fl-theme::before,
body.fl-theme::after { content: none; display: none; }
/* Reset накреслень: WC-розмітка інакше підтягує/синтезує Regular, Bold і курсив */
strong, b, th { font-weight: var(--fl-w-medium); }
address, em, i, cite, dfn, var { font-style: normal; }
[hidden] { display: none !important; }

/* ---------- SCOPE-RESET (.fl-scope — нові компоненти) --------------------- */
.fl-scope {
  font-family: var(--fl-font-main);
  font-weight: var(--fl-w-light);
  font-size: var(--fl-body-size);
  line-height: var(--fl-body-lh);
  letter-spacing: var(--fl-body-ls);
  color: var(--fl-text);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.fl-scope, :where(.fl-scope) *, :where(.fl-scope) *::before, :where(.fl-scope) *::after { box-sizing: border-box; }
section:where(.fl-scope), :where(.fl-scope) section { margin: 0; }
:where(.fl-scope) :is(img, svg) { display: block; max-width: 100%; }
:where(.fl-scope) img { height: auto; }
:where(.fl-scope) a { color: inherit; text-decoration: none; }
:where(.fl-scope) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(.fl-scope) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.fl-scope) li { list-style: none; }
:where(.fl-scope) :is(h1, h2, h3, h4, p) { margin: 0; font-family: inherit; color: inherit; }
:where(.fl-scope) p { font-size: inherit; line-height: inherit; }
:where(.fl-scope) input { margin: 0; font-family: inherit; }

.fl-container {
  width: 100%;
  max-width: var(--fl-container);
  margin-inline: auto;
  padding-inline: var(--fl-gutter);
}
.fl-section { padding-block: var(--fl-section-y); }
.fl-section--cream { background: var(--fl-bg-alt); }

.fl-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fl-skip {
  position: absolute; left: var(--fl-gutter); top: -100px; z-index: 100;
  padding: 8px 16px; background: var(--fl-deep-sage); color: var(--fl-ivory);
  font-weight: var(--fl-w-medium); letter-spacing: var(--fl-label-ls); text-transform: uppercase;
  font-size: var(--fl-label-size); line-height: var(--fl-label-lh);
}
.fl-skip:focus { top: 8px; }
/* SVG-спрайт із symbol #fl-logo (замість inline style) */
.fl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (min-width: 768px) {
  :root { --fl-gutter: 32px; --fl-grid-gap: 24px; --fl-section-y: 80px; }
}
@media (min-width: 1024px) {
  :root {
    --fl-gutter: 56px; --fl-grid-gap: 32px; --fl-section-y: 104px;
    --fl-h1-size: 56px; --fl-h2-size: 36px; --fl-h3-size: 24px; --fl-header-h: 120px;
  }
}

/* ---------- TYPOGRAPHY ---------------------------------------------------- */
.fl-h1, .fl-h2, .fl-h3 { font-weight: var(--fl-w-medium); }
.fl-h1 { font-size: var(--fl-h1-size); line-height: var(--fl-h1-lh); letter-spacing: var(--fl-h1-ls); }
.fl-h2 { font-size: var(--fl-h2-size); line-height: var(--fl-h2-lh); letter-spacing: var(--fl-h2-ls); }
.fl-h3 { font-size: var(--fl-h3-size); line-height: var(--fl-h3-lh); letter-spacing: var(--fl-h3-ls); }
/* Утиліт .fl-body / .fl-body--lg тут немає свідомо: основний текст задають base (site.css:51)
   і .fl-prose, тож окремі класи лишалися мертвим кодом. Кеглі — у токенах --fl-body-*. */
.fl-label {
  font-size: var(--fl-label-size); line-height: var(--fl-label-lh); letter-spacing: var(--fl-label-ls);
  font-weight: var(--fl-w-medium); text-transform: uppercase;
}
.fl-logotype {
  font-weight: var(--fl-w-medium); text-transform: uppercase; letter-spacing: var(--fl-logo-ls); line-height: 1;
}
.fl-slogan {
  font-family: var(--fl-font-slogan); font-style: italic; font-weight: var(--fl-w-reg);
  letter-spacing: var(--fl-slogan-ls); text-transform: none; line-height: 1.3;
}
/* Модифікатора .fl-slogan--rose немає свідомо: Rose — не для тексту (decisions п.28,
   tokens.css:10), а Rose на Ivory/Cream дає 2,25:1. Слогани лишаються Charcoal/Greige-тонами. */

/* Заголовок секції: H2 зліва + посилання справа */
.fl-section__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 24px;
  margin-bottom: 28px;
}
/* На вузьких екранах лінка опускається під H2 одним рядком, а не ламається на два */
.fl-section__head .fl-h2 { min-width: 0; }
@media (min-width: 1024px) { .fl-section__head { margin-bottom: 44px; } }

/* ---------- UI: buttons, links, fields, icons ----------------------------- */
.fl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px;
  font-weight: var(--fl-w-medium); font-size: 14px; line-height: 1;
  letter-spacing: var(--fl-btn-ls); text-transform: uppercase;
  border-radius: var(--fl-radius); border: 1px solid 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-btn--primary { background: var(--fl-accent); color: var(--fl-ivory); border-color: var(--fl-accent); }
.fl-btn--primary:hover, .fl-btn--primary.is-hover { background: var(--fl-charcoal); border-color: var(--fl-charcoal); }
.fl-btn--secondary { background: transparent; color: var(--fl-charcoal); border-color: var(--fl-charcoal); }
.fl-btn--secondary:hover, .fl-btn--secondary.is-hover { background: var(--fl-charcoal); color: var(--fl-ivory); }
.fl-btn--ghost { background: transparent; color: var(--fl-charcoal); border-color: var(--fl-greige); }
.fl-btn--ghost:hover, .fl-btn--ghost.is-hover { border-color: var(--fl-charcoal); }
/* Модифікатора .fl-btn--inv (outline-кнопка на Deep Sage) у розмітці немає — прибрано як
   мертвий код; на Deep Sage-панелях використовується .fl-benefitsrow__go / .fl-insta__go. */
.fl-btn--sm { min-height: 44px; padding: 0 22px; font-size: 12px; }
.fl-btn .fl-arrow { font-size: 1.15em; line-height: 0; }

.fl-link {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; flex-shrink: 0; /* «ДИВИТИСЯ ВСІ →» — завжди один рядок */
  font-size: var(--fl-label-size); line-height: var(--fl-label-lh); letter-spacing: var(--fl-label-ls);
  font-weight: var(--fl-w-medium); text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid var(--fl-line);
  transition: color var(--fl-dur) var(--fl-ease), border-color var(--fl-dur) var(--fl-ease);
}
/* Акцент для ТЕКСТУ — Charcoal (Deep Sage на Ivory = 4,07:1 < 4,5:1 за 1.4.3; виняток
   decisions §29 стосується лише топбара). Hover читається по лінії, що темніє. */
.fl-link:hover, .fl-link.is-hover { color: var(--fl-charcoal); border-color: var(--fl-charcoal); }
.fl-link--inv { color: var(--fl-ivory); border-color: var(--fl-greige-50); }
.fl-link--inv:hover { color: var(--fl-ivory); border-color: var(--fl-ivory); }
.fl-arrow { display: inline-block; }

.fl-field { display: grid; gap: 8px; }
.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); }
.fl-input {
  width: 100%; min-height: 52px; padding: 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);
  appearance: none; -webkit-appearance: none; outline: none;
  transition: border-color var(--fl-dur) var(--fl-ease);
}
.fl-input::placeholder { color: var(--fl-charcoal-70); opacity: 1; } /* Greige на Cream ≈1.7:1 — нечитабельно */
.fl-input:focus, .fl-input.is-focus { border-color: var(--fl-deep-sage); }
/* Батьківський input:focus{outline:0} (0,1,1) перебиває глобальний :focus-visible — повертаємо обводку */
.fl-input:focus-visible { outline: 2px solid var(--fl-focus); outline-offset: 2px; }

.fl-icon { width: 22px; height: 22px; stroke: currentColor; stroke-width: var(--fl-stroke); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fl-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; border-radius: var(--fl-radius);
  transition: color var(--fl-dur) var(--fl-ease);
}
.fl-iconbtn:hover { color: var(--fl-deep-sage); }

:focus-visible { outline: 2px solid var(--fl-focus); outline-offset: 3px; }
.is-focus { outline: 2px solid var(--fl-focus); outline-offset: 3px; }

/* ==========================================================================
   Нижче — розкладка за ЗАТВЕРДЖЕНИМ РЕФЕРЕНСОМ ГОЛОВНОЇ (docs/reference-home.png,
   decisions.md пп.1–10). Розміри на референсі перераховані на 1440 px (×1,69).
   ========================================================================== */

/* Широкий контейнер референсу: бокові поля ~5% ширини (шапка, топбар, Новинки, футер) */
:root { --fl-page-x: 16px; }
@media (min-width: 768px)  { :root { --fl-page-x: 32px; } }
@media (min-width: 1024px) { :root { --fl-page-x: clamp(40px, 5vw, 96px); } }
.fl-wide {
  width: 100%; max-width: 1920px; margin-inline: auto;
  padding-inline: var(--fl-page-x);
}

/* ---------- TOP BAR (як раніше: Deep Sage, 3 тексти, mobile — лише центр) --- */
.fl-topbar {
  background: var(--fl-deep-sage); color: var(--fl-text-inv);
  height: var(--fl-topbar-h);
  font-size: 11px; line-height: 1; letter-spacing: 2px; text-transform: uppercase; font-weight: var(--fl-w-medium);
}
.fl-topbar__inner { display: flex; align-items: center; justify-content: center; height: 100%; }
.fl-topbar__side { display: none; }
.fl-topbar__center { text-align: center; }
@media (min-width: 768px) {
  .fl-topbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .fl-topbar__side { display: block; }
  .fl-topbar__side--right { text-align: right; }
}
@media (min-width: 1024px) { :root { --fl-topbar-h: 38px; } }

/* ---------- HEADER --------------------------------------------------------- */
/* Mobile: бургер — лого — пошук + кошик. Desktop (≥1200): [бургер + БУКЕТИ · КОМПОЗИЦІЇ ·
   ТРОЯНДИ] — [лого + Flower boutique] — [ПРО НАС · ДОСТАВКА · КОНТАКТИ + пошук, серце, сумка],
   висота ~90px (референс п.2). 1024–1199: два ряди (див. нижче). */
.fl-header { background: var(--fl-ivory); position: relative; z-index: 40; }
/* Поки відкрита шторка кошика — піднімаємо контекст шапки над віджетами Binotel
   (#bingc-* мають z-index 99999999 у корені): z-index самої шторки обмежений
   контекстом .fl-header, тож інакше кнопки дзвінка лягали б поверх «ОФОРМЛЕННЯ ЗАМОВЛЕННЯ». */
body:has(.fl-minicart.is-open) .fl-header { z-index: 100000000; }
.fl-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: var(--fl-header-h);
}
.fl-header__start { display: flex; align-items: center; justify-self: start; gap: 24px; min-width: 0; }
.fl-header__burger { flex: none; }
.fl-header__burger .fl-icon { width: 24px; height: 24px; }
.fl-header__nav--left { display: none; }
:is(.fl-header__nav--left, .fl-header__nav--right > nav) ul { display: flex; gap: 36px; }
:is(.fl-header__nav--left, .fl-header__nav--right > nav) a {
  display: inline-block; padding: 6px 0; white-space: nowrap;
  font-size: 13px; line-height: 1.2; letter-spacing: var(--fl-label-ls); text-transform: uppercase; font-weight: var(--fl-w-medium);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fl-dur) var(--fl-ease), color var(--fl-dur) var(--fl-ease);
}
:is(.fl-header__nav--left, .fl-header__nav--right > nav) a:hover { border-color: var(--fl-charcoal); }
.fl-header__nav--right { justify-self: end; display: flex; align-items: center; gap: 44px; }
.fl-header__nav--right nav { display: none; }
.fl-header__actions { display: flex; align-items: center; gap: 0; }
.fl-header__actions .fl-iconbtn--fav { display: none; }

.fl-brand { display: grid; justify-items: center; gap: 2px; padding: 8px 0; color: var(--fl-charcoal); }
.fl-brand__logo { width: 160px; height: auto; color: inherit; } /* мінімум гайду 160px */
.fl-brand__slogan { display: none; font-size: 15px; line-height: 1.2; } /* трекінг 3px — з .fl-slogan (гайд §03) */
/* Лічильник: 14px Medium з вирівняними (lining) цифрами — старостильна «1» у 12px нечитабельна на mobile */
.fl-cart__count {
  font-size: 14px; font-weight: var(--fl-w-medium); letter-spacing: 0.5px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  min-width: 1ch; text-align: left;
}
.fl-cart__count.is-bump { animation: fl-bump 320ms var(--fl-ease); }
@keyframes fl-bump { 40% { transform: translateY(-3px); } }

/* < 390px: логотип по центру з охоронним полем ≥ 1X (гайд §04, план §6 п.2). */
@media (max-width: 389px) {
  .fl-header__actions .fl-iconbtn, .fl-header__burger { min-width: 40px; }
  .fl-header__actions { gap: 0; margin-right: -8px; }
  .fl-header__burger { margin-left: -8px; }
}
@media (max-width: 359px) {
  .fl-brand__logo { width: 128px; }
}

/* ≥1024: один ряд ~90px, як на референсі (п.2): [бургер + каталог] — [лого] — [сторінки + іконки].
   1024–1199 — щільніше: пункти 12px, проміжки 12–14px, лого 160px (мінімум гайду), іконки 40px;
   на 1024 лого зміщене від центру на ≈8px (правий блок ширший за лівий), з ~1080 — по центру. */
@media (min-width: 1024px) {
  .fl-header__bar {
    grid-template-columns: 1fr auto 1fr; column-gap: 14px;
    grid-template-areas: "start brand right";
    row-gap: 0; padding-block: 0; min-height: 90px;
  }
  .fl-brand { grid-area: brand; justify-self: center; }
  .fl-header__start { grid-area: start; gap: 14px; }
  .fl-header__nav--left { display: block; }
  .fl-header__nav--right { grid-area: right; gap: 6px; }
  .fl-header__nav--right nav { display: block; }
  :is(.fl-header__nav--left, .fl-header__nav--right > nav) a { font-size: 12px; }
  :is(.fl-header__nav--left, .fl-header__nav--right > nav) ul { gap: 14px; }
  .fl-header__nav--right > nav ul { gap: 12px; }
  .fl-header__actions .fl-iconbtn { min-width: 40px; }
  .fl-header__actions .fl-iconbtn--fav { display: inline-flex; }
  .fl-brand__logo { width: 160px; }
  .fl-brand__slogan { display: block; }
}
@media (min-width: 1200px) {
  .fl-header__bar {
    grid-template-columns: 1fr auto 1fr; column-gap: 20px;
    grid-template-areas: "start brand right";
    row-gap: 0; padding-block: 0; min-height: 90px;
  }
  .fl-header__start { gap: 24px; }
  :is(.fl-header__nav--left, .fl-header__nav--right > nav) a { font-size: 12px; }
  :is(.fl-header__nav--left, .fl-header__nav--right > nav) ul { gap: 18px; }
  .fl-header__nav--right { gap: 20px; }
  .fl-header__actions .fl-iconbtn { min-width: 44px; }
  .fl-brand__logo { width: 200px; }
}
@media (min-width: 1360px) {
  .fl-header__start { gap: clamp(40px, 5vw, 80px); }
  :is(.fl-header__nav--left, .fl-header__nav--right > nav) a { font-size: 13px; }
  :is(.fl-header__nav--left, .fl-header__nav--right > nav) ul { gap: clamp(24px, 2.4vw, 40px); }
  .fl-header__nav--right { gap: clamp(24px, 2.8vw, 48px); }
  .fl-brand__logo { width: 232px; }
}

/* Панель пошуку */
.fl-search {
  border-top: 1px solid var(--fl-greige-50); border-bottom: 1px solid var(--fl-greige-50);
  background: var(--fl-ivory); padding: 20px 0;
}
.fl-search__form { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; max-width: 720px; margin-inline: auto; }
.fl-search__form .fl-btn { min-height: 52px; }

/* Off-canvas меню (mobile і, за референсом, desktop — бургер ліворуч) */
.fl-offcanvas { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.fl-offcanvas.is-open { visibility: visible; }
.fl-offcanvas__overlay {
  position: absolute; inset: 0; background: var(--fl-charcoal-55);
  opacity: 0; transition: opacity var(--fl-dur) var(--fl-ease);
}
.fl-offcanvas.is-open .fl-offcanvas__overlay { opacity: 1; }
.fl-offcanvas__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 400px);
  background: var(--fl-ivory); color: var(--fl-charcoal);
  display: flex; flex-direction: column;
  padding: 16px var(--fl-gutter) 32px;
  transform: translateX(-100%); transition: transform 280ms var(--fl-ease);
  overflow-y: auto;
}
@media (min-width: 1024px) { .fl-offcanvas__panel { padding: 24px 40px 40px; } }
.fl-offcanvas.is-open .fl-offcanvas__panel { transform: none; }
.fl-offcanvas__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.fl-offcanvas__logo { width: 160px; }
.fl-offcanvas__nav a {
  display: block; padding: 14px 0;
  font-size: 20px; font-weight: var(--fl-w-medium); letter-spacing: var(--fl-nav-ls); text-transform: uppercase;
  border-bottom: 1px solid var(--fl-greige-50);
}
.fl-offcanvas__nav--secondary a { font-size: 15px; padding: 12px 0; }
.fl-offcanvas__nav + .fl-offcanvas__nav { margin-top: 20px; }
.fl-offcanvas__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 8px; }
.fl-offcanvas__phone { font-size: 22px; font-weight: var(--fl-w-medium); letter-spacing: 0.5px; }
.fl-offcanvas__slogan { font-size: 16px; }

/* Сповіщення WC на головній (не-AJAX ?add-to-cart=); повний стиль notices — етапи 4–7а */
.fl-notices { padding-top: 16px; padding-bottom: 16px; }
.fl-notices .woocommerce-message,
.fl-notices .woocommerce-info,
.fl-notices .woocommerce-error {
  margin: 0; padding: 14px 18px; list-style: none;
  background: var(--fl-cream); color: var(--fl-charcoal);
  border: var(--fl-stroke) solid var(--fl-line); border-radius: var(--fl-radius);
  font-family: var(--fl-font-main); font-weight: var(--fl-w-light); font-size: 17px; line-height: 1.4;
}
.fl-notices .woocommerce-message::before,
.fl-notices .woocommerce-info::before,
.fl-notices .woocommerce-error::before { content: none; }
/* Текстове посилання в нотисі — Charcoal, не Deep Sage: Deep Sage на Cream = 3,70:1,
   нижче за 4,5:1 (decisions §29 обмежує виняток 4,07:1 топбаром). Роль посилання
   передає підкреслення + Medium, а не колір. */
.fl-notices a.button,
.fl-notices .wc-forward { float: right; margin-left: 16px; color: var(--fl-charcoal); text-decoration: underline; background: none; padding: 0; font-weight: var(--fl-w-medium); }
/* Не-AJAX додавання (`?add-to-cart=ID` — перехід за посиланням картки без JS, повернення по
   історії): WC друкує нотис із кнопкою «Переглянути кошик», і ОДНОЧАСНО програмно
   відкривається міні-кошик (ТЗ п.12, блок «Доповнити подарунок?»), який накриває правий край
   нотиса разом із цією кнопкою — вона стає недосяжною. Панель уже має «ПЕРЕГЛЯНУТИ КОШИК»
   і «ОФОРМЛЕННЯ ЗАМОВЛЕННЯ», тож дубль у нотисі ховаємо, поки панель відкрита.
   Лише для .is-open (програмне відкриття) — на hover нотис не «стрибає».
   Нотис живе то в .fl-notices (наші шаблони), то в .woocommerce-notices-wrapper (каталог,
   хук woocommerce_before_main_content), тому селектор без прив'язки до обгортки. */
body:has(.fl-minicart.is-open) .woocommerce-message a.button,
body:has(.fl-minicart.is-open) .woocommerce-message .wc-forward { display: none; }
/* До 1024px панель накриває нотис ЦІЛКОМ (панель x16–374 / y86–606, нотис x16–374 / y315–403
   на 390×844), тобто на екрані лишається невидимий дубль підтвердження, який після закриття
   панелі «виринає» і зсуває сітку. Тому ховаємо весь нотис додавання, поки панель відкрита:
   підтвердження лишається рівно одне — сама панель. */
@media (max-width: 1023px) {
  body:has(.fl-minicart.is-open) .woocommerce-message { display: none; }
}

/* ---------- 01 HERO — слайдер на всю ширину (референс п.3) ----------------- */
/* Mobile (<768): фото 4:5 зверху, під ним керування і текст на Ivory.
   ≥768: фото edge-to-edge, висота clamp(460px, 40vw, 680px), текст поверх фото зліва. */
/* container-type: inline-size — щоб рядок керування (.fl-hero__controls) на mobile можна було
   прив'язати до РЕАЛЬНОЇ ширини блока (1cqw), а не до 1vw. 100vw включає системну смугу
   прокрутки, тож у браузерах із класичними (не оверлейними) смугами керування з'їжджало
   нижче краю фото на 1,25 × ширини смуги (≈19px при 15px смузі). */
.fl-hero { display: block; position: relative; container-type: inline-size; background: var(--fl-ivory); isolation: isolate; } /* display: block — перебиває flex із батьківського CSS */
.fl-hero__slides { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
.fl-hero--slider .fl-hero__slides { touch-action: pan-y pinch-zoom; } /* свайп: вертикальний скрол і масштабування лишаються за браузером */
.fl-hero__slide {
  grid-area: 1 / 1; position: relative; min-width: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 700ms var(--fl-ease), visibility 0s linear 700ms;
}
.fl-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 700ms var(--fl-ease), visibility 0s; }
.fl-hero__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--fl-cream); }
.fl-hero__media picture { display: contents; }
.fl-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
}
.fl-hero__content {
  padding: 76px var(--fl-page-x) 44px; /* зверху — місце під рядок керування */
  display: flex; flex-direction: column; align-items: flex-start;
}
.fl-hero--slider .fl-hero__content { padding-top: 76px; }
.fl-hero:not(.fl-hero--slider) .fl-hero__content { padding-top: 36px; }
.fl-hero__title {
  margin: 0; font-size: clamp(40px, 11.5vw, 48px); line-height: 1.05; letter-spacing: 0;
  font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
}
.fl-hero__sub {
  margin-top: 16px; max-width: 30ch;
  font-size: 19px; line-height: 1.4; letter-spacing: var(--fl-body-ls); font-weight: var(--fl-w-light);
}
.fl-hero__cta { margin-top: 28px; min-height: 56px; padding: 0 32px; }

/* Керування: коло (пауза / відтворення + прогрес) · 01 / 0N · ← → */
.fl-hero__controls {
  position: absolute; z-index: 3; left: calc(var(--fl-page-x) - 12px);
  /* під фото 4:5 на mobile: висота .fl-hero__media = 125 % ШИРИНИ БЛОКА.
     Перший рядок — фолбек для браузерів без container queries (там 100vw = ширина в'юпорта
     разом зі смугою прокрутки); другий — точне значення через 1cqw = 1 % ширини .fl-hero. */
  top: calc(125vw + 6px);
  top: calc(125cqw + 6px);
  display: flex; align-items: center; gap: 2px; color: var(--fl-charcoal);
}
.fl-hero__toggle, .fl-hero__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: inherit; border-radius: var(--fl-radius);
  transition: color var(--fl-dur) var(--fl-ease);
}
.fl-hero__arrow:hover, .fl-hero__toggle:hover { color: var(--fl-deep-sage); }
.fl-hero__arrow .fl-icon { width: 22px; height: 22px; stroke-width: 1.25px; }
.fl-hero__toggle svg { width: 18px; height: 18px; transform: rotate(-90deg); overflow: visible; }
.fl-hero__toggle circle { fill: none; stroke: currentColor; stroke-width: 1.25px; }
.fl-hero__ring-bg { opacity: 0.35; }
.fl-hero__ring { stroke-dasharray: 100; stroke-dashoffset: 100; }
.fl-hero.is-playing .fl-hero__ring { animation: fl-hero-ring var(--fl-hero-interval, 6500ms) linear forwards; }
.fl-hero.is-paused .fl-hero__ring { stroke-dashoffset: 0; opacity: 0.35; }
.fl-hero.is-paused .fl-hero__toggle circle.fl-hero__ring-bg { fill: currentColor; opacity: 1; } /* пауза — суцільне коло */
@keyframes fl-hero-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.fl-hero__counter {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 10px 0 2px;
  font-size: 12px; line-height: 1; letter-spacing: var(--fl-label-ls); font-weight: var(--fl-w-medium);
  font-variant-numeric: lining-nums tabular-nums;
}
.fl-hero__sep { opacity: 0.6; }

/* Золота F + «FLORISTERIA» внизу праворуч на фото — усередині слайда, лише коли слайд дозволяє
   (вільне поле навколо знака, гайд §04). Mobile: знак на фото не ставимо (decisions п.3 — фото 4:5,
   текст під ним). Слово-логотип — .fl-logotype (трекінг 0.9px).
   ВАЖЛИВО: assets/img/sygnet-gold.webp обрізаний по самій літері (127×174, без прозорих полів),
   тому ширина в CSS = ширина видимої F. Раніше асет мав 240×300 з полями і «64px» давали літеру
   лише 32×45 px — удвічі меншу за референс (ref-top@2x: F ≈ 59×86 px у масштабі 1440). */
.fl-hero__brand { display: none; }
.fl-hero__sygnet { width: 40px; height: auto; }
.fl-hero__brandname { font-size: 10px; color: var(--fl-charcoal); }

@media (min-width: 768px) {
  .fl-hero__slides { height: clamp(460px, 40vw, 680px); }
  .fl-hero__media { position: absolute; inset: 0; aspect-ratio: auto; }
  /* Дефолтні фото: букет у правій третині, ліва частина — рівна «стіна» під текст */
  .fl-hero__img { object-position: 72% center; }
  /* М'яке Ivory-згасання зліва — читабельність тексту на будь-якому фото з ACF (без нових кольорів) */
  .fl-hero__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--fl-ivory-70) 0%, var(--fl-ivory-0) 52%);
    opacity: 0.55;
  }
  .fl-hero__content, .fl-hero--slider .fl-hero__content, .fl-hero:not(.fl-hero--slider) .fl-hero__content {
    position: absolute; z-index: 2; left: 7vw; top: 0; bottom: 0;
    width: min(52vw, 640px); padding: 0 0 36px;
    justify-content: center;
  }
  .fl-hero__title { font-size: clamp(44px, 5.2vw, 80px); }
  .fl-hero__sub { margin-top: clamp(16px, 1.6vw, 26px); max-width: 32ch; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.35; }
  .fl-hero__cta { margin-top: clamp(24px, 2.4vw, 40px); min-height: 60px; padding: 0 44px; gap: 16px; }
  .fl-hero__controls { top: auto; bottom: clamp(20px, 2.6vw, 44px); left: calc(3.5vw - 12px); }
  /* Розміри звірені з референсом (docs/ref-top@2x.png, 1 ref px = 0.844 px макета 1440):
     F ≈ 59×86 px, просвіт до підпису ≈ 19 px, «FLORISTERIA» ≈ 103 px завширшки (кегль ≈15px). */
  .fl-hero__brand {
    position: absolute; z-index: 2; right: var(--fl-page-x); bottom: clamp(24px, 2.8vw, 48px);
    display: grid; justify-items: center; gap: clamp(14px, 1.35vw, 22px); pointer-events: none;
  }
  .fl-hero__sygnet { width: clamp(48px, 4.4vw, 72px); }  /* 1440 → 63×86 px видимої літери */
  .fl-hero__brandname { font-size: clamp(12px, 0.97vw, 15px); }
}
@media (min-width: 1024px) {
  /* CTA «ОБРАТИ КВІТИ →» ≈277×56 на референсі: 14px (рішення п.28), ширший трекінг і поля */
  .fl-hero__cta { padding: 0 52px; letter-spacing: 2.5px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fl-hero__media::after { opacity: 0.9; }
  .fl-hero__img { object-position: 78% center; }
}

/* ---------- 02 КАТЕГОРІЇ (референс п.4) ------------------------------------ */
/* Горизонтальні картки ~1.43:1, бокові поля ~2.5%, gap ~22px; mobile — swipe (~82vw) */
.fl-cats { padding-top: 16px; }
.fl-cats__wrap { padding-inline: var(--fl-page-x); }
.fl-cats__grid {
  display: flex; gap: 12px;
  margin-inline: calc(-1 * var(--fl-page-x)); padding-inline: var(--fl-page-x);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--fl-page-x);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-block: 6px; margin-block: -6px; /* запас під outline фокусу */
}
.fl-cats__grid::-webkit-scrollbar { display: none; }
.fl-cat {
  position: relative; flex: 0 0 82vw; max-width: 460px; scroll-snap-align: start;
  overflow: hidden; display: block; color: var(--fl-ivory); aspect-ratio: 1.43 / 1; background: var(--fl-cream);
}
.fl-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--fl-ease); }
/* М'який темний градієнт знизу (референс п.4) — його призначення читабельність підпису
   (BRIEF.md п.02). Попередній варіант (0.75 на висоті 70 %) на найсвітлішому фото
   (cat-kompozytsii-fresco.jpg) під назвою давав лише 2,4–3,3:1 (на 768px — від 2,1:1),
   бо в зоні чорнила назви альфа ще 0,37–0,51. Тому градієнт на всю висоту картки
   з проміжною зупинкою 0.45: під назвою ≥3:1 (поріг великого тексту), під лейблом ≥4,5:1
   на всіх ширинах. На темних фото (cat-troiandy) зміна майже непомітна — градієнт
   згасає в ті самі тони. Тони — лише Charcoal із прозорістю (ТЗ п.1/п.18). */
.fl-cat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--fl-charcoal-75) 0%, var(--fl-charcoal-45) 38%, var(--fl-charcoal-0) 72%);
  pointer-events: none;
}
.fl-cat__caption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; display: grid; gap: 10px; justify-items: start; }
.fl-cat__title { font-size: 32px; font-weight: var(--fl-w-medium); letter-spacing: 0; text-transform: none; line-height: 1; }
.fl-cat__more { display: inline-flex; gap: 10px; align-items: center; letter-spacing: var(--fl-label-ls); font-size: 11px; }
.fl-cat__more .fl-arrow { font-size: 15px; line-height: 0; }
@media (hover: hover) { .fl-cat:hover .fl-cat__img { transform: scale(1.03); } }
@media (min-width: 768px) {
  .fl-cats__wrap { padding-inline: clamp(16px, 2.5vw, 48px); }
  .fl-cats__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.55vw, 28px);
    margin-inline: 0; padding-inline: 0; overflow: visible;
  }
  .fl-cat { flex: none; max-width: none; }
  .fl-cat__caption { left: 7%; right: 7%; bottom: 10%; gap: clamp(10px, 1.4vw, 22px); }
  .fl-cat__title { font-size: clamp(28px, 3.05vw, 50px); }
  .fl-cat__more { font-size: 11px; }
}
@media (min-width: 1024px) { .fl-cats { padding-top: clamp(16px, 1.7vw, 28px); } }

/* ---------- 03 НОВИНКИ · картка товару (референс п.5) ---------------------- */
.fl-new, .fl-popular { padding-block: 44px 48px; }
.fl-new .fl-section__head, .fl-popular .fl-section__head { margin-bottom: 20px; align-items: center; }
.fl-new .fl-h2, .fl-popular .fl-h2 { font-size: clamp(28px, 2.35vw, 38px); }
.fl-new .fl-link, .fl-popular .fl-link { border-bottom: 0; padding-bottom: 0; gap: 12px; }
/* Ці посилання без лінії (border-bottom: 0 вище), тож hover позначаємо підкресленням:
   колір лишається Charcoal (Deep Sage-текст на Ivory не дає 4,5:1). */
.fl-new .fl-link:hover, .fl-popular .fl-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.fl-products {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 12px;
}
@media (min-width: 768px)  { .fl-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; } }
@media (min-width: 1024px) { .fl-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(20px, 1.75vw, 32px); } }
@media (min-width: 1280px) { .fl-products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fl-new, .fl-popular { padding-block: clamp(36px, 3vw, 56px) clamp(40px, 3.4vw, 64px); } }
/* Новинки → ряд «Про»: на референсі ≈31px від цін до фото ряду */
@media (min-width: 1024px) { .fl-new { padding-bottom: 24px; } }

/* Один повний ряд на головній (у HTML — 6 карток): mobile 2×2, tablet 3×2, 1024 — 4, ≥1280 — 5 */
.fl-home .fl-products .fl-card:nth-child(n+5) { display: none; }
@media (min-width: 768px)  { .fl-home .fl-products .fl-card:nth-child(n+5) { display: grid; } }
@media (min-width: 1024px) { .fl-home .fl-products .fl-card:nth-child(n+5) { display: none; } }
@media (min-width: 1280px) { .fl-home .fl-products .fl-card:nth-child(5) { display: grid; } }

.fl-card { display: grid; gap: 14px; align-content: start; }
/* Фото майже квадратне (1:1) — ТА САМА картка в каталозі, обраному, related (референс п.5) */
.fl-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--fl-cream); }
.fl-card__link { display: block; height: 100%; }
.fl-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 700ms var(--fl-ease); }
/* Маленьке outline-серце вгорі праворуч, без підкладки (референс) */
.fl-card__fav {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--fl-charcoal); border-radius: var(--fl-radius);
}
.fl-card__fav .fl-icon { width: 20px; height: 20px; stroke-width: 1.25px; }
.fl-card__fav[aria-pressed="true"] .fl-icon { fill: var(--fl-rose); stroke: var(--fl-charcoal); }
.fl-card__fav:hover { color: var(--fl-deep-sage); }
/* Фокус на серці: кільце лежить поверх фото товару (offset відʼємний, бо .fl-card__media має
   overflow: hidden), а тон фото непередбачуваний. Тому індикатор двоколірний — Ivory-обводка
   на Charcoal-підкладці: пара між собою ≥6:1, тобто 1.4.11 виконується на будь-якому фото. */
.fl-card__fav:focus-visible {
  outline-color: var(--fl-ivory); outline-offset: -4px;
  box-shadow: inset 0 0 0 6px var(--fl-charcoal-75);
}
.fl-card__add {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  min-height: 48px; display: none; align-items: center; justify-content: center;
  background: var(--fl-deep-sage); color: var(--fl-ivory);
  font-size: 12px; font-weight: var(--fl-w-medium); letter-spacing: var(--fl-btn-ls); text-transform: uppercase; line-height: 1;
  transform: translateY(100%); opacity: 0;
  transition: transform var(--fl-dur) var(--fl-ease), opacity var(--fl-dur) var(--fl-ease), background-color var(--fl-dur) var(--fl-ease);
}
.fl-card__add:hover { background: var(--fl-charcoal); }
/* Кільце фокуса лежить на власному тлі кнопки (Deep Sage), тому колір — Ivory (4,07:1 ≥ 3:1
   за 1.4.11), як уже зроблено для .fl-topbar a і .fl-benefitsrow__insta a. Без цього
   обводка --fl-focus = Deep Sage на Deep Sage давала 1:1, тобто фокус був невидимий. */
.fl-card__add:focus-visible { outline-color: var(--fl-ivory); outline-offset: -4px; }
.fl-card__plus {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fl-deep-sage); color: var(--fl-ivory);
}
.fl-card__plus .fl-icon { width: 16px; height: 16px; stroke-width: 1.5px; }
/* Обгортка «+» (woocommerce/loop/add-to-cart.php): сама по собі нічого не змінює в розкладці,
   але дає куди повісити приховування на desktop, якщо фільтр плагіна віддав свою розмітку */
.fl-card__plus-box { display: contents; }
.fl-card__body { display: grid; gap: 6px; }
.fl-card__title {
  font-size: 18px; line-height: 1.25; font-weight: var(--fl-w-medium); letter-spacing: var(--fl-h3-ls);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* до 2 рядків */
}
.fl-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Ціна — акцент (рішення користувача 22.09): більша за назву, Medium, Charcoal, знак ₴ */
.fl-card__price {
  font-size: 21px; line-height: 1.2; font-weight: var(--fl-w-medium); letter-spacing: var(--fl-body-ls);
  color: var(--fl-charcoal); white-space: nowrap; margin-top: 2px;
}
@media (min-width: 768px) {
  .fl-card__title { font-size: 20px; }
  .fl-card__price { font-size: 23px; }
}

/* Пристрої з hover (desktop): «+» ховаємо, «ДОДАТИ В КОШИК» виїжджає при hover/focus */
@media (hover: hover) and (pointer: fine) {
  .fl-card__plus, .fl-card__plus-box { display: none; }
  .fl-card__add { display: flex; }
  .fl-card__media:hover .fl-card__add,
  .fl-card:focus-within .fl-card__add { transform: none; opacity: 1; }
  .fl-card__media:hover .fl-card__img { transform: scale(1.03); }
}

/* Картка у WP: кнопки — a.add_to_cart_button (AJAX WC). Посилання «View cart», яке WC
   дописує після кнопки, не показуємо (кошик у шапці оновлюється фрагментами). */
.fl-card .added_to_cart { display: none !important; }
.fl-card__add, .fl-card__plus { text-decoration: none; cursor: pointer; }
.fl-card__add:hover, .fl-card__add:focus { color: var(--fl-ivory); }
.fl-card__add.loading, .fl-card__plus.loading { opacity: 0.6; pointer-events: none; }
.fl-card__plus.added { background: var(--fl-charcoal); }
.fl-card__price del { opacity: 0.6; margin-right: 6px; }
.fl-card__price ins { text-decoration: none; }

/* «Популярні» — лише якщо fl_popular_show (дефолт вимкнено), той самий грід на Cream */
.fl-popular .fl-card__media { background: var(--fl-ivory); }

/* ---------- РЯД «ПРО + ФРЕСКА» (референс п.6) ------------------------------ */
/* Desktop: 44% фото / 27% Cream-панель / 29% фреска, висота ~330px на 1440.
   Tablet: фото + панель, фреска на всю ширину нижче. Mobile: стопкою (4:3, панель, 4:3). */
.fl-aboutrow { display: grid; grid-template-columns: 1fr; background: var(--fl-cream); }
.fl-aboutrow__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.fl-aboutrow__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fl-aboutrow__panel {
  /* Cream, трохи темніший за ряд переваг нижче (як на референсі) — Greige 25% поверх Cream */
  background: linear-gradient(var(--fl-greige-25), var(--fl-greige-25)), var(--fl-cream);
  padding: 40px var(--fl-page-x) 48px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.fl-aboutrow__title { font-size: 32px; }
/* Лейбл — дрібний службовий ТЕКСТ (ТЗ п.8), тому не Greige: Greige на тонованій Cream-панелі
   дає 1,48:1. Той самий токен, яким decisions §29 перевів решту дрібного тексту:
   --fl-charcoal-70 = 4,73:1 на цій панелі (5,01:1 на чистому Cream). Greige лишається
   тільки для ліній і рамок (tokens.css:13). Тон і далі світліший за заголовок — як на референсі. */
.fl-aboutrow__label {
  margin-top: 10px; color: var(--fl-charcoal-70);
  font-size: 11px; line-height: 1.4; letter-spacing: var(--fl-label-ls); text-transform: uppercase; font-weight: var(--fl-w-medium);
}
.fl-aboutrow__text { margin-top: 24px; max-width: 42ch; display: grid; gap: 10px; font-size: 17px; line-height: 1.6; font-weight: var(--fl-w-light); }
.fl-aboutrow__link { margin-top: 26px; }
.fl-aboutrow__fresco { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--fl-cream); }
/* Фреска — кроп ОРИГІНАЛУ без дзеркалення (ТЗ п.7): у кадрі рокайльна рама й квітуча гілка
   з білою трояндою ліворуч (як у третій колонці на docs/ref-bottom@2x.png), права половина —
   рівний тиньк під слоган. Путті тут НЕМАЄ: цей мотив закріплений за карткою «Композиції»
   (cat-kompozytsii-fresco.jpg, decisions п.10), і два однакові кадри на одному екрані —
   дублювання. */
.fl-aboutrow__fresco-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* Слоган праворуч, на рівній стіні (орнамент оригінального кропу — ліворуч); трекінг 3px — з .fl-slogan */
.fl-aboutrow__slogan {
  position: absolute; z-index: 1; right: 8%; top: 50%; transform: translateY(-50%);
  font-size: 36px; line-height: 1.12;
  /* Колір — ЧИСТИЙ Rose із 8-тонової палітри (decisions п.6: тут дозволено «колір Rose/Greige»
     для великого декоративного слогана; ТЗ п.1 і п.18 забороняють будь-які нові тони).
     Раніше тут стояв color-mix(Rose+Greige+Charcoal) — він рендерився як rgb(182,154,150),
     тобто дев'ятий тон поза палітрою (спосіб запису через токени цього не змінює).
     Контраст на фресці ≈1,52:1 — для декоративного напису 36px це прийнятно і збігається
     з референсом docs/reference-home.png (там ≈1,73:1). */
  color: var(--fl-rose);
}
@media (min-width: 768px) {
  .fl-aboutrow { grid-template-columns: 1fr 1fr; }
  .fl-aboutrow__media { aspect-ratio: auto; min-height: 340px; }
  .fl-aboutrow__panel { padding: 48px 40px; }
  .fl-aboutrow__fresco { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
  .fl-aboutrow--nofresco .fl-aboutrow__media { min-height: 380px; }
}
@media (min-width: 1024px) {
  .fl-aboutrow { grid-template-columns: 44fr 27fr 29fr; height: clamp(300px, 23vw, 440px); }
  .fl-aboutrow--nofresco { grid-template-columns: 60fr 40fr; }
  .fl-aboutrow__media { min-height: 0; }
  /* Текст у 2–3 рядки (референс п.6): колонка тексту ≈310–325px на 1440, правий відступ ≈24px */
  .fl-aboutrow__panel { padding: 24px clamp(20px, 1.7vw, 32px) 24px clamp(24px, 2.7vw, 52px); min-width: 0; }
  .fl-aboutrow__title { font-size: clamp(30px, 2.65vw, 44px); }
  .fl-aboutrow__label { margin-top: 12px; }
  .fl-aboutrow__text { margin-top: clamp(18px, 2.2vw, 36px); max-width: none; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; }
  .fl-aboutrow__link { margin-top: clamp(18px, 2.4vw, 40px); }
  .fl-aboutrow__fresco { grid-column: auto; aspect-ratio: auto; }
  .fl-aboutrow__slogan { right: 9%; top: 44%; font-size: clamp(28px, 2.8vw, 46px); }
}
/* 1024–1279: панелі більше ширини (27% дає 5 рядків тексту) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .fl-aboutrow { grid-template-columns: 38fr 34fr 28fr; }
  .fl-aboutrow__text { font-size: 15px; }
}

/* ---------- РЯД «ПЕРЕВАГИ + INSTAGRAM» (референс п.7) ---------------------- */
/* Desktop: 66% Cream (01 | Щоденна доставка …, вертикальні лінії Greige) + 34% Deep Sage
   (СТЕЖТЕ ЗА НАМИ / В INSTAGRAM, 3 мініатюри 1:1, кругла кнопка →), висота ~140px на 1440. */
.fl-benefitsrow { display: grid; grid-template-columns: 1fr; }
.fl-benefitsrow__list { background: var(--fl-cream); display: grid; padding-inline: var(--fl-page-x); }
.fl-benefitsrow__item {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 0; border-top: 1px solid var(--fl-greige-50);
}
.fl-benefitsrow__item:first-child { border-top: 0; }
.fl-benefitsrow__num {
  flex: none; align-self: stretch; display: flex; align-items: center;
  padding-right: 18px; border-right: 1px solid var(--fl-greige);
  /* Номер помітний (референс): Charcoal 70 % — темніший за Greige-лінію праворуч від нього */
  font-size: 24px; line-height: 1; font-weight: var(--fl-w-light); color: var(--fl-charcoal-70);
  font-variant-numeric: lining-nums;
}
.fl-br-lg { display: none; } /* розрив назви переваги — лише ≥1024 (fl_two_line_html) */
.fl-benefitsrow__title {
  font-size: 19px; line-height: 1.3; font-weight: var(--fl-w-medium); letter-spacing: var(--fl-h3-ls);
  transition: color var(--fl-dur) var(--fl-ease);
}
a.fl-benefitsrow__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.fl-benefitsrow__insta {
  background: var(--fl-deep-sage); color: var(--fl-ivory);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px 16px;
  padding: 28px var(--fl-page-x);
}
.fl-benefitsrow__insta-title {
  grid-column: 1 / -1;
  font-size: 12px; line-height: 1.7; letter-spacing: var(--fl-label-ls); text-transform: uppercase; font-weight: var(--fl-w-medium);
  white-space: nowrap; /* 2 рядки з <br>: «Стежте за нами / в Instagram» */
}
.fl-benefitsrow__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fl-benefitsrow__photo { display: block; overflow: hidden; aspect-ratio: 1 / 1; background: var(--fl-sage); }
.fl-benefitsrow__img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--fl-ease); }
@media (hover: hover) { .fl-benefitsrow__photo:hover .fl-benefitsrow__img { transform: scale(1.04); } }
.fl-benefitsrow__go {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fl-ivory-70);
  display: inline-flex; align-items: center; justify-content: center; color: var(--fl-ivory);
  transition: background-color var(--fl-dur) var(--fl-ease), color var(--fl-dur) var(--fl-ease);
}
.fl-benefitsrow__go .fl-icon { width: 18px; height: 18px; }
.fl-benefitsrow__go:hover { background: var(--fl-ivory); color: var(--fl-deep-sage); }
.fl-benefitsrow a:focus-visible { outline-offset: 2px; }
.fl-benefitsrow__insta a:focus-visible { outline-color: var(--fl-ivory); }
/* MOBILE: кругла кнопка-стрілка — єдиний доступний тап-таргет блоку (три фото мають
   aria-hidden / tabindex="-1"), і в правому нижньому куті панелі вона потрапляла рівно під
   fixed-віджет чату Binotel: коли блок опинявся внизу екрана, тап не доходив до посилання
   (elementsFromPoint повертав кнопку віджета зверху). Переносимо стрілку в рядок із
   заголовком (праворуч угорі), фото — на всю ширину нижче. Порядок у DOM не змінюється. */
@media (max-width: 767px) {
  .fl-benefitsrow__insta-title { grid-column: 1; }
  .fl-benefitsrow__go { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
  .fl-benefitsrow__photos { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .fl-benefitsrow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 28px; }
  .fl-benefitsrow__item { padding: 4px 24px; border-top: 0; border-left: 1px solid var(--fl-greige); }
  .fl-benefitsrow__item:first-child { border-left: 0; padding-left: 0; }
  .fl-benefitsrow__insta { grid-template-columns: auto 1fr auto; }
  .fl-benefitsrow__insta-title { grid-column: auto; }
  .fl-benefitsrow__photos { grid-template-columns: repeat(3, 88px); justify-content: end; }
}
@media (min-width: 1024px) {
  /* Назви у 2 рядки (референс п.7): розрив <br class="fl-br-lg">, пункти — за шириною вмісту */
  .fl-benefitsrow { grid-template-columns: minmax(0, 66fr) minmax(min-content, 34fr); min-height: clamp(120px, 9.8vw, 168px); }
  .fl-benefitsrow__list {
    grid-template-columns: repeat(3, auto); justify-content: space-between;
    padding: 0 clamp(24px, 3vw, 56px) 0 clamp(24px, 4vw, 72px); align-items: center;
  }
  .fl-benefitsrow__item { padding: 10px clamp(12px, 1.8vw, 32px); height: 64%; min-height: 72px; gap: clamp(12px, 1.25vw, 18px); }
  .fl-benefitsrow__item:last-child { padding-right: 0; }
  .fl-benefitsrow__num { font-size: clamp(20px, 1.7vw, 28px); padding-right: clamp(12px, 1.25vw, 24px); }
  .fl-benefitsrow__title { font-size: clamp(16px, 1.32vw, 21px); max-width: none; white-space: nowrap; }
  .fl-br-lg { display: inline; }
  .fl-benefitsrow__insta { padding: 0 clamp(16px, 1.8vw, 40px); gap: clamp(10px, 1.1vw, 20px); }
  .fl-benefitsrow__insta-title { font-size: 11px; }
  .fl-benefitsrow__photos { grid-template-columns: repeat(3, clamp(48px, 5.3vw, 92px)); gap: 4px; }
  .fl-benefitsrow__go { width: 38px; height: 38px; }
}

/* ---------- 08 INSTAGRAM — окремий блок (усі сторінки, крім головної) ------- */
.fl-insta { background: var(--fl-deep-sage); color: var(--fl-text-inv); }
.fl-insta__grid { display: grid; gap: 32px; }
.fl-insta__intro { display: grid; gap: 16px; align-content: center; justify-items: start; }
.fl-insta__title { font-size: 22px; font-weight: var(--fl-w-medium); letter-spacing: var(--fl-nav-ls); text-transform: uppercase; line-height: 1.2; max-width: 14ch; }
.fl-insta__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fl-insta__item { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--fl-sage); }
.fl-insta__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 700ms var(--fl-ease), opacity var(--fl-dur) var(--fl-ease); }
@media (hover: hover) { .fl-insta__item:hover .fl-insta__img { transform: scale(1.03); } }
@media (min-width: 1024px) {
  .fl-insta__grid { grid-template-columns: 3fr 7fr; gap: 64px; }
  .fl-insta__photos { gap: var(--fl-grid-gap); }
  .fl-insta__title { font-size: 26px; }
}

/* ---------- FOOTER — світлий, Ivory (референс п.8) ------------------------- */
.fl-footer { background: var(--fl-ivory); color: var(--fl-charcoal); padding-block: 48px 24px; }
.fl-footer__top { display: grid; justify-items: center; gap: 32px; text-align: center; }
/* Майстер-композиція (гайд §04): слоган центрований під логотипом */
.fl-footer__brand { display: grid; justify-items: center; gap: 4px; color: var(--fl-charcoal); }
.fl-footer__logo { width: 200px; height: auto; color: inherit; }
.fl-footer__slogan { font-size: 16px; } /* трекінг 3px — з .fl-slogan */
.fl-footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.fl-footer__nav a {
  display: inline-block; padding: 6px 0;
  font-size: 12px; line-height: 1.3; letter-spacing: var(--fl-label-ls); text-transform: uppercase; font-weight: var(--fl-w-medium);
  border-bottom: 1px solid transparent; transition: border-color var(--fl-dur) var(--fl-ease);
}
.fl-footer__nav a:hover, .fl-footer__nav a[aria-current="page"] { border-color: var(--fl-charcoal); }
.fl-footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.fl-footer__social a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  color: var(--fl-charcoal); border-radius: var(--fl-radius); transition: color var(--fl-dur) var(--fl-ease);
}
.fl-footer__social a:hover { color: var(--fl-deep-sage); }
.fl-social-icon { width: 20px; height: 20px; display: block; }
.fl-footer__bottom {
  display: grid; justify-items: center; gap: 10px; text-align: center;
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--fl-greige);
}
.fl-footer__copy { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: 13px; line-height: 1.5; letter-spacing: 0.3px; font-weight: var(--fl-w-light); }
/* Способи оплати — максимально непомітно (ТЗ п.17, на референсі їх немає), але це ТЕКСТ:
   Greige на Ivory = 1,83:1, тому --fl-charcoal-70 (5,24:1) — як решта дрібного службового
   тексту за decisions §29. Приглушеність дає кегль 10px і трекінг, не колір. */
.fl-footer__payments {
  color: var(--fl-charcoal-70); font-size: 10px; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; font-weight: var(--fl-w-medium);
}
.fl-footer__slogan-bottom { font-size: 15px; } /* трекінг 3px — з .fl-slogan */
@media (min-width: 1024px) {
  .fl-footer { padding-block: clamp(48px, 4.2vw, 72px) 24px; }
  .fl-footer__top { grid-template-columns: 1fr auto 1fr; justify-items: stretch; text-align: left; gap: 32px; align-items: center; }
  .fl-footer__brand { justify-self: start; }
  .fl-footer__logo { width: clamp(200px, 16vw, 260px); }
  .fl-footer__nav ul { gap: 10px clamp(24px, 2.6vw, 48px); }
  .fl-footer__social { justify-self: end; justify-content: flex-end; gap: 0 clamp(4px, 0.8vw, 12px); }
  .fl-footer__bottom {
    grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: stretch; text-align: left;
    margin-top: clamp(28px, 3vw, 48px); padding-top: 18px;
  }
  .fl-footer__copy { justify-content: flex-start; font-size: 12px; }
  .fl-footer__payments { text-align: center; }
  .fl-footer__slogan-bottom { text-align: right; }
}
/* 1024–1279: лого + соцмережі в першому ряду, посилання — другим рядом (в один ряд не вміщуються) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .fl-footer__top { grid-template-columns: 1fr auto; grid-template-areas: "brand social" "nav nav"; row-gap: 20px; }
  .fl-footer__brand { grid-area: brand; }
  .fl-footer__social { grid-area: social; }
  .fl-footer__nav { grid-area: nav; }
  .fl-footer__nav ul { justify-content: flex-start; }
}
.fl-footer__social { flex-wrap: nowrap; }

/* ---------- ОБОЛОНКА WP (доповнення до прототипу) ------------------------- */
.fl-skip { font-family: var(--fl-font-main); }
.fl-main { display: block; }
.fl-main:focus { outline: none; }
.fl-topbar, .fl-header, .fl-offcanvas, .fl-footer, .fl-insta { font-family: var(--fl-font-main); }

/* Топбар: міста — два посилання (кнопка вікна вибору міста — лише в off-canvas, як на референсі) */
.fl-topbar__cities { align-items: center; gap: 8px; }
.fl-topbar__city { padding-block: 3px; border-bottom: 1px solid transparent; transition: border-color var(--fl-dur) var(--fl-ease); }
.fl-topbar__city:hover { border-color: var(--fl-greige-50); }
/* Поточне місто підкреслюємо делікатно (на референсі підкреслення немає зовсім) */
.fl-topbar__city.is-current { border-color: var(--fl-ivory-45); }
.fl-topbar a:focus-visible { outline-color: var(--fl-ivory); outline-offset: 2px; }
@media (min-width: 768px) {
  .fl-topbar__side.fl-topbar__cities { display: flex; }
}

/* Іконки-посилання (обране, кошик) — поза стилями пунктів меню (ті обмежені самими меню) */
.fl-header__actions a.fl-iconbtn { padding: 0; border-bottom: 0; font-size: inherit; letter-spacing: 0; }
.fl-header__actions a.fl-iconbtn:not(.fl-iconbtn--fav) { display: inline-flex; }
@media (min-width: 1024px) { .fl-header__actions a.fl-iconbtn--fav { display: inline-flex; } }

/* Шапка: активний пункт */
:is(.fl-header__nav--left, .fl-header__nav--right > nav) .current-menu-item > a,
:is(.fl-header__nav--left, .fl-header__nav--right > nav) a[aria-current="page"] { border-color: var(--fl-charcoal); }

/* Лічильники (кошик, обране) — порожні при 0 */
.fl-cart__count:empty, .fl-fav__count:empty, .fl-offcanvas__count:empty { display: none; }
.fl-fav__count {
  font-size: var(--fl-label-size); font-weight: var(--fl-w-medium); letter-spacing: 0.5px; line-height: 1;
}
.fl-offcanvas__count {
  display: inline-block; margin-left: 6px; font-size: var(--fl-label-size); letter-spacing: 0.5px; vertical-align: middle;
}

/* Випадний кошик (desktop, hover / фокус / після додавання) */
.fl-header__cartwrap { position: relative; display: inline-flex; }
.fl-minicart {
  display: none; position: absolute; top: 100%; right: 0; z-index: 50;
  width: 380px; max-width: calc(100vw - 2 * var(--fl-gutter));
  padding-top: 8px; /* місток для hover між іконкою і панеллю */
}
/* Панель — grid «тіло 1fr + футер auto»: прокручується лише .fl-minicart__scroll, а кнопки
   («ПЕРЕГЛЯНУТИ КОШИК» / «ОФОРМЛЕННЯ ЗАМОВЛЕННЯ») стоять у нерухомому футері
   (woocommerce/cart/mini-cart.php). Раніше кнопки були останнім елементом самого скролера і
   трималися внизу через position: sticky — і накривали низ блоку «Доповнити подарунок?»
   (сховані назва і ціна, ТЗ п.12). */
.fl-minicart__body {
  background: var(--fl-ivory); color: var(--fl-charcoal);
  border: 1px solid var(--fl-greige-50); padding: 20px;
  max-height: min(70vh, 560px); overflow: hidden;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  font-size: 16px; line-height: 1.4;
}
.fl-minicart__scroll { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
@media (hover: hover) and (min-width: 1024px) {
  /* :not(.is-dismissed) — WCAG 1.4.13 (Dismissible): панель, розкриту наведенням або фокусом,
     має закривати Esc. Клас ставить closeMinicart() (assets/js/site.js) і знімає mouseleave /
     focusout обгортки; без нього видимість тримало саме це правило, і Esc був no-op. */
  .fl-header__cartwrap:hover .fl-minicart:not(.is-dismissed),
  .fl-header__cartwrap:focus-within .fl-minicart:not(.is-dismissed) { display: block; }
  /* Панель, розкрита ФОКУСОМ (клавіатура), теж має видимий хрестик — інакше єдиний спосіб
     закриття був би недоступний. На hover мишею хрестик не потрібен. */
  .fl-header__cartwrap:focus-within .fl-minicart:not(.is-dismissed) .fl-minicart__close { display: flex; }
  .fl-header__cartwrap:focus-within .fl-minicart:not(.is-dismissed) .fl-minicart__body { padding-right: 44px; }
}
/* Панель, відкрита програмно (після додавання в кошик — етап 6): працює на всіх ширинах.
   Правка користувача 23.09: раніше панель була прив'язана до іконки в шапці (position:absolute),
   тож після додавання товару знизу довгого каталогу вона з'являлася вгорі сторінки — покупець
   не бачив ні підтвердження, ні блоку «Доповнити подарунок?». Тепер відкрита панель — fixed,
   тобто завжди в полі зору: на телефоні як нижня шторка, на desktop — угорі праворуч.
   z-index вищий за віджети Binotel (#bingc-* мають 99999999), інакше їхні кнопки лягали б
   поверх шторки й перекривали «ОФОРМИТИ ЗАМОВЛЕННЯ». */
.fl-minicart.is-open { display: block; position: fixed; z-index: 100000000; }
@media (max-width: 1023px) {
  /* Без hover: панель відкриває лише JS, тож місток зверху не потрібен */
  .fl-minicart.is-open {
    inset: auto 0 0 0; width: auto; max-width: none; padding-top: 0;
  }
  .fl-minicart.is-open .fl-minicart__body {
    max-height: min(76vh, 560px); padding: 16px;
    border-inline: 0; border-bottom: 0;
  }
}
@media (min-width: 1024px) {
  .fl-minicart.is-open { top: 16px; right: 16px; bottom: auto; left: auto; padding-top: 0; }
}
/* Хрестик — лише у відкритій панелі (на hover він не потрібен) */
.fl-minicart__close {
  display: none; position: absolute; top: 8px; right: 0; z-index: 2;
  width: 40px; height: 40px; padding: 0; border: 0; background: none;
  color: var(--fl-charcoal); cursor: pointer;
  align-items: center; justify-content: center;
}
.fl-minicart.is-open .fl-minicart__close { display: flex; }
.fl-minicart__close .fl-icon { width: 18px; height: 18px; }
.fl-minicart.is-open .fl-minicart__body { padding-right: 44px; }

/* Пошук: форма WC (label + input + button + hidden) і кнопка закриття поруч */
.fl-search__inner { display: flex; align-items: center; gap: 12px; }
.fl-search__inner .fl-search__form { flex: 1 1 auto; max-width: 720px; margin-inline: auto; grid-template-columns: 1fr auto; }
@media (max-width: 479px) {
  .fl-search__inner .fl-search__form { grid-template-columns: 1fr; }
  .fl-search__inner .fl-search__form .fl-btn { width: 100%; }
}
/* Та сама форма поза шапкою (батьківські сторінки пошуку) */
.fl-search__form { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.fl-search__form .fl-input { font-family: var(--fl-font-main); font-weight: var(--fl-w-light); width: 100%; padding: 0 16px; }
.fl-search__form .fl-btn { font-family: var(--fl-font-main); cursor: pointer; }

/* Off-canvas: «Усі категорії», соцмережі, зміна міста */
.fl-offcanvas__all summary {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
  padding: 14px 0; border-bottom: 1px solid var(--fl-greige-50);
  font-size: 15px; font-weight: var(--fl-w-medium); letter-spacing: var(--fl-nav-ls); text-transform: uppercase;
}
.fl-offcanvas__all summary::-webkit-details-marker { display: none; }
.fl-offcanvas__all summary::after { content: "+"; font-size: 20px; line-height: 1; font-weight: var(--fl-w-light); }
.fl-offcanvas__all[open] summary::after { content: "−"; }
.fl-offcanvas__all ul { padding-left: 0; }
.fl-offcanvas__all ul ul { padding-left: 16px; }
.fl-offcanvas__all a {
  font-size: 15px; padding: 10px 0; letter-spacing: var(--fl-label-ls);
}
.fl-offcanvas__all ul ul a { font-size: 14px; font-weight: var(--fl-w-light); text-transform: none; letter-spacing: var(--fl-body-ls); border-bottom: 0; padding: 8px 0; }
/* Поточна сторінка: колір ТЕКСТУ лишається Charcoal, стан позначає лінія Deep Sage
   (нетекстова ознака, 4,07:1 ≥ 3:1 за 1.4.11) — 1.4.3 при цьому виконано. */
.fl-offcanvas__nav a[aria-current="page"] { color: var(--fl-charcoal); border-bottom-color: var(--fl-deep-sage); }
.fl-offcanvas__foot { gap: 14px; }
.fl-offcanvas__social { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fl-offcanvas__social a, .fl-offcanvas__geo {
  font-size: var(--fl-label-size); line-height: var(--fl-label-lh); letter-spacing: var(--fl-label-ls);
  font-weight: var(--fl-w-medium); text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid var(--fl-line);
}
.fl-offcanvas__geo { justify-self: start; display: inline-flex; gap: 6px; text-align: left; }
.fl-offcanvas__geo-city { font-weight: var(--fl-w-light); }
.fl-offcanvas__social a:hover, .fl-offcanvas__geo:hover { color: var(--fl-charcoal); border-color: var(--fl-charcoal); }

/* Футер: активний пункт і перенос юр. рядків */
/* Футер світлий (референс п.8): активний пункт і фокус — Charcoal (див. блок FOOTER) */
.fl-insta a:focus-visible { outline-color: var(--fl-ivory); }

/* Карта (лише «Контакти», рішення п.27) */
.fl-map { padding-block: var(--fl-section-y) 0; }
/* width/max-width обов'язкові: без визначеної inline-ширини `min-height: 320px` разом із
   `aspect-ratio` переноситься в мінімальну ширину (320 × 16/9 ≈ 568.9px) і на екранах
   вужчих за ~600px дає горизонтальний скрол сторінки (ТЗ п.20 — mobile-first без скролу). */
.fl-map__frame { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; min-height: 320px; background: var(--fl-cream); }
@media (max-width: 767px) { .fl-map__frame { aspect-ratio: 4 / 3; min-height: 0; } }
.fl-map__frame iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }

/* «Обране» (/?fl_favorites=1, рішення п.3): шапка й сітка — ті самі, що в каталозі
   (.fl-catalog__head, .fl-products--catalog у woo.css); картки рендерить assets/js/woo.js */

/* ---------- A11Y / MOTION ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}