/* --- sense-main --- */
/* =============================================================================
SENSE — main.css
ЄДИНЕ місце оголошення токенів (`:root` у `@layer tokens`). Сторінковий CSS
тільки споживає `var(--*)`; дублювати числа деінде не можна — саме через це
правило «одна роль → одне значення» тримається без ручної звірки.
Тут же оголошено порядок шарів: `reset → tokens → base → components → page →
wp`. Шар `vendor` існує для чужих бібліотек — їхній CSS без шару бив би
будь-яке наше правило незалежно від специфічності.
============================================================================= */
/* Порядок шарів: пізніший виграє незалежно від специфічності.
unlayered-стилі б'ють будь-який шар → Woo-дефолти глушимо у WP-шарі/enqueue.
`vendor` — стилі чужих бібліотек (зараз лише intl-tel-input). Вони вантажаться
через `@import ... layer(vendor)` саме заради цього рядка: інакше чужий CSS
лишається поза шарами і б'є будь-який наш, скільки б класів ми не додали. */
@layer reset, tokens, base, vendor, components, page, wp;
/* =============================================================================
@layer tokens — :root (єдине оголошення)
============================================================================= */
@layer tokens {
:root {
/* ---- Палітра: бренд-аркуш ---- */
--color-bg: var(--color-cream); --color-cream: #FFFBEF; --color-bg-warm: #FAF6EB; --color-product-cream: #DBD8C8; --color-product-grey: #C6C4BC; /* ---- ПАЛІТРА (текст/бренд) ---- */
--color-text: #000000; --color-brand: #9CBBCA; --color-deep-blue: #3D464B; --color-gold: #B5945A; --color-brand-sage: #8EA093; --color-muted-base: #8F8D86;
--color-text-muted: #6D6B66; --color-control-border: #86847E; /* Активне поле — фірмовий блакит, той самий, що фон підвала.
⚠️ Свідомий виняток із 1.4.11: на кремі це 1.9:1 при нормі 3:1 для
індикатора стану. Компенсація — рамка потовщується до 2px. */
--color-focus: var(--color-brand);
/* ---- Статусні кольори: нотіси й помилки полів ----
Підібрані в тон палітри (теракота і глибока шавлія), а не системні
#f00/#0a0; обидва ≥4.5:1 і на кремі, і на бежі. */
--color-error: #A33A2B; --color-success: #4F6B57;
/* ---- ПАЛІТРА (функціональні дрібні; злиті/замінені) ---- */
--color-rule: #585551;
--color-border: color-mix(in srgb, var(--color-text) 12%, transparent);
/* ---- rgb-пара для прозоростей (де треба alpha від тексту) ---- */
--color-text-rgb: 0 0 0;
/* ---- ШРИФТИ ---- */
--font-main: "EB Garamond", Georgia, "Times New Roman", serif; --font-accent: "Great Vibes", "Segoe Script", cursive; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;
/* ---- Типо-шкала: базовий сегмент 375→991 ---- */
--fs-h1: clamp(1.8750rem, 1.289444rem + 2.459016vw, 2.8125rem); --fs-h2: clamp(1.7500rem, 1.2173rem + 2.2727vw, 2.6250rem); /* 28→42 */
/* ---- Роль H3 / підзаголовок ---- */
--fs-subhead: clamp(1.2500rem, 0.8695rem + 1.6234vw, 1.5000rem); --fs-subhead-lg: clamp(1.2500rem, 0.8695rem + 1.6234vw, 1.8750rem); --fs-body: clamp(0.9375rem, 0.8614rem + 0.3247vw, 1.0625rem); --fs-accent-lg: clamp(2.1250rem, 1.6684rem + 1.9481vw, 2.8750rem); /* ---- Роль «рукопис» (Great Vibes sm) ---- */
--fs-accent-sm: 1.0625rem; /* 17 @375–639 */
/* ---- Роль UI: кнопки / мітки / breadcrumbs / бейджі / підписи ---------
Тече 13@375 → 15@991 і далі стоїть: UI-текст сидить у коробках, які
течуть (кнопка 45→55, контроль 28→38), тож літера має рости в тій самій
пропорції. Один токен на всю роль — окремого --fs-btn немає.
Поля вводу цей токен не вживають: там ≥16 проти iOS-зуму. */
--fs-ui: clamp(0.8125rem, 0.8125rem + (100vw - 375px) * 2 / 616, 0.9375rem); /* 13→15 */
--lh-heading: 0.83; --lh-subhead: 1; --lh-body: 1.25; --lh-ui: 1.34; --lh-accent-lg: 1.1;
--lh-accent-sm: 0.9;
--ls-accent-lg: -0.02em;
/* ---- КАРКАС (фluїд, сегмент 375→991) ---- */
--gutter: clamp(1.25rem, 0.489042rem + 3.246753vw, 2.5rem); --header-h: clamp(6.9375rem, 5.4536rem + 6.3312vw, 9.3750rem); /* 111→150 */
--container: min(99rem, 100% - 2 * var(--gutter)); /* 335 / 911 / 1584 */
--edge: max(var(--gutter), (100% - 99rem) / 2);
/* ---- РАДІУСИ / ТІНІ / РУХ ---- */
--radius-card: 1.875rem; --radius-input: 1.25rem; --radius-pill: 6.25rem; --shadow-text: 0 4px 4px rgba(0, 0, 0, 0.25); --transition: 0.2s ease;
--gap-3xs: 0.625rem; --gap-2xs: 1.125rem; --gap-xs: 1.25rem; --gap-sm: 1.5625rem; --gap-card-stack: clamp(0.9375rem, 0.5532rem + 1.639344vw, 1.5625rem); /* 15→25 */
--gap-md: 1.875rem; --gap-lg: 2.25rem; --gap-xl: 2.5rem; --gap-section-heading: 5.875rem; --gap-cue: 0.125rem; /* 2 */
--size-cue: 0.3125rem; /* 5 */
/* ---- РОЗМІР КОНТРОЛУ (закон М3 «контроль = контроль») ---- */
--control-size: clamp(1.75rem, 1.673156rem + 0.327869vw, 1.875rem); /* 28→30 */
/* ---- Контроль форми: чекбокс, радіо, маркер вибору ----
Окремий токен від `--control-size`: той виведений із картки товару, де
контролів мало і вони головні (степер, свотч). У формі їх десяток, вони
службові й стоять біля рядка тексту — 38 важило б удвічі більше за
літери.
⚠️ Клікабельна ціль лишається ≥24 — її дає рядок-лейбл
(`min-height: 1.5rem` на `.check`/`.radio`), а не сам квадрат. */
--control-form: clamp(1rem, 1rem + (100vw - 375px) * 2 / 616, 1.125rem); /* 16→18 */
/* ---- Ритм краю секції ---- */
--rhythm-edge: clamp(2.5rem, 2.5rem + (100vw - 375px) * 30 / 615, 4.375rem); /* 40→70 */
/* ---- Відступ під заголовком ---- */
--gap-under-heading: clamp(1.875rem, 1.487624rem + 1.652893vw, 2.5rem); /* 30→40 */
--card-pad-block: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 616, 2.5rem); /* 30→40 */
--card-pad-inline: clamp(1.5625rem, 1.5625rem + (100vw - 375px) * 15 / 616, 2.5rem); /* 25→40 */
/* ---- ШИРИНА КНОПКИ ---- */
--btn-min: 0;
}
@media (min-width: 640px) {
:root { --btn-min: 14.375rem; } /* 230 */
}
@media (min-width: 640px) { :root { --fs-accent-sm: 1.1875rem; } } /* 19 */
@media (min-width: 860px) { :root { --fs-accent-sm: 1.3125rem; } } /* 21 */
@media (min-width: 991px) { :root { --fs-accent-sm: 1.4375rem; } } /* 23 */
@media (min-width: 1208px) { :root { --fs-accent-sm: 1.7500rem; } } /* 28 */
@media (min-width: 1424px) { :root { --fs-accent-sm: 2.0625rem; } } /* 33 */
@media (min-width: 1727px) { :root { --fs-accent-sm: 2.5000rem; } } /* 40 */
@media (min-width: 991px) {
:root {
--fs-h1: clamp(2.8125rem, 1.1457rem + 2.6911vw, 4.3750rem); /* 45→70 */
--fs-h2: clamp(2.6250rem, 1.4249rem + 1.9376vw, 3.7500rem); /* 42→60 */
--fs-subhead: 1.8750rem; --fs-subhead-lg: clamp(1.8750rem, 1.2083rem + 1.0764vw, 2.5000rem); /* 30→40 */
--fs-body: clamp(1.0625rem, 0.8625rem + 0.3229vw, 1.2500rem); /* 17→20 */
--fs-accent-lg: clamp(2.8750rem, 1.6082rem + 2.0452vw, 4.0625rem); /* 46→65 */
--gutter: clamp(2.5rem, -6.0801rem + 13.852814vw, 10.5rem); /* 40→168 (4-4) */
--header-h: clamp(9.3750rem, 8.0416rem + 2.1529vw, 10.6250rem); /* 150→170 */
--control-size: clamp(1.875rem, 1.338163rem + 0.866739vw, 2.375rem); /* 30→38 */
--control-form: clamp(1.125rem, 1.125rem + (100vw - 991px) * 2 / 929, 1.25rem); /* 18→20 */
--rhythm-edge: clamp(4.375rem, 4.375rem + (100vw - 991px) * 30 / 909, 6.25rem); /* 70→100 */
--gap-under-heading: clamp(2.5rem, 1.818627rem + 1.100110vw, 3.125rem); /* 40→50 */
}
}
@media (min-width: 1920px) {
:root {
--fs-h1: 4.3750rem; /* 70 */
--fs-h2: 3.7500rem; /* 60 */
--fs-subhead: 1.8750rem; --fs-subhead-lg: 2.5000rem; /* 40 */
--fs-body: 1.2500rem; /* 20 */
--fs-accent-lg: 4.0625rem; /* 65 */
--gutter: 10.5rem; --header-h: 10.6250rem; /* 170 */
--control-size: 2.375rem; --control-form: 1.25rem; --rhythm-edge: 6.25rem; --gap-under-heading: 3.125rem; }
}
}
/* =============================================================================
@layer reset — мінімальний reset (box-sizing критичний: без нього всі
фіксовані ширини/паддінги рахуються content-box і геометрія пливе)
============================================================================= */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; }
/* Форм-контроли не успадковують шрифт від body — браузер ставить свій
дефолт (13.3333px Arial). У кнопок-іконок це не видно, але дає дробові
кеглі й ламає перевірку .qa/check-fonts.js. Явні правила компонентів
(шар components) це не зачіпає — вони переважають reset. */
button, input, select, textarea { font: inherit; }
button { padding: 0; }
/* iOS: подвійний тап по контролю (швидкі кліки по «+»/«−») інакше зумить
сторінку. touch-action:manipulation прибирає лише double-tap-zoom і 300ms
затримку — pan/scroll та pinch-zoom лишаються. На всі інтерактивні цілі. */
button, a, label, summary, [role="button"] { touch-action: manipulation; }
}
/* =============================================================================
@layer base — мінімальний фундамент (розширюється у build)
============================================================================= */
@layer base {
html {
/* iOS: колір ПРУЖНОГО overscroll береться з КОРЕНЯ (html), а не з body —
тому над закріпленою шапкою (Telegram/Safari in-app) у щілину bounce
блимав дефолт-канвас/контент, а не крем (шапка). Градієнт на всю висоту
документа: верхній край = крем (=шапка), нижній = бренд (=підвал), тож
КОЖЕН край overscroll показує свій колір. Тіло (крем) і секції малюються
поверх — у середині градієнт не видно. Доповнює `.header::before`-шторку. */
background: linear-gradient(var(--color-cream) 0 50%, var(--color-brand) 50% 100%);
scroll-padding-top: calc(var(--header-h) - 3.375rem); /* фокус не пірнає під sticky-шапку (2.4.11) */
/* Скролбар сторінки — фірмовий синій (запит 3-29). scrollbar-color =
Chrome/Edge/Firefox; Safari властивість ігнорує й лишає системний
скролбар — свідомий progressive enhancement (BASELINE-2026). */
scrollbar-color: var(--color-brand) var(--color-cream);
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-main);
font-weight: var(--fw-medium);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---- ТЕКСТОВІ РОЛІ — спільні для ВСІХ сторінок (запит 3-14). ---- */
/* ---- Skip-link (2.4.1) ---- */
.skip-link {
position: absolute;
top: 0; left: 0;
z-index: 200;
translate: 0 -200%;
padding: 0.75rem 1.25rem;
background: var(--color-cream);
color: var(--color-text);
font-size: var(--fs-ui);
line-height: var(--lh-ui);
text-decoration: underline;
border-radius: 0 0 var(--radius-input) 0;
box-shadow: 0 2px 8px rgb(16 5 5 / 0.25);
}
/* :focus, а не :focus-visible — skip-link отримує фокус і програмно
(наприклад, після повернення з модалки), а :focus-visible у такому разі
не спрацьовує і посилання лишається невидимим. */
.skip-link:focus {
translate: 0 0;
outline: 2px solid var(--color-text);
outline-offset: -2px;
}
#main:focus { outline: none; }
h1, .text-h1 {
margin: 0;
font-size: var(--fs-h1); /* 30 → 45 → 70 */
line-height: var(--lh-heading);
font-weight: var(--fw-medium);
}
h2, .text-h2 {
margin: 0;
font-size: var(--fs-h2); /* 28 → 42 → 60 */
line-height: var(--lh-heading);
font-weight: var(--fw-medium);
}
h3, h4, .text-h3 {
margin: 0;
font-size: var(--fs-subhead); line-height: var(--lh-subhead);
font-weight: var(--fw-medium);
}
.text-subhead-lg {
margin: 0;
font-size: var(--fs-subhead-lg);
line-height: var(--lh-subhead);
font-weight: var(--fw-medium);
}
p {
margin: 0;
font-size: var(--fs-body); /* 15 → 17 → 20 */
line-height: var(--lh-body);
}
.text-ui {
font-size: var(--fs-ui);
line-height: var(--lh-ui);
}
.text-accent {
font-family: var(--font-accent);
font-weight: var(--fw-regular); font-size: var(--fs-accent-lg); /* 34 → 46 → 65 */
line-height: var(--lh-accent-lg);
letter-spacing: var(--ls-accent-lg);
}
.text-accent--sm {
font-size: var(--fs-accent-sm); /* 25 → 31 → 40 */
line-height: var(--lh-accent-sm);
letter-spacing: normal;
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}
@layer components {
/* ---------------------------------------------------------------------------
Фокус-кільце гасне під вказівником
---------------------------------------------------------------------------
Chrome матчить `:focus-visible` на кнопці і після кліку мишею, тож кільце
вискакувало на стрілках слайдера і свотчах просто від тику. Клас
`is-pointer` ставить `js/main.js`, доки останній ввід — вказівник; перший
натиск клавіші його знімає, тому клавіатурна навігація кільце зберігає.
Другий селектор — про кільце на сусіді: у свотча кольору фокус на
прихованому ``, а `outline` малюється на `+ .option-color__swatch`.
⚠️ Клас тричі — не описка. Правило живе в `@layer components`, як і самі
кільця, а компонентні файли підключаються після main.css: при рівній вазі
переміг би останній. Найважчий селектор кільця дає (0,3,1), три класи —
(0,4,1), і питання знімається без `!important` і без нового шару. */
html.is-pointer.is-pointer.is-pointer :focus-visible,
html.is-pointer.is-pointer.is-pointer :focus-visible + * {
outline: none;
}
}
@layer wp {
a.header__lang-option { text-decoration: none; }
}
/* ---- @font-face — self-host .woff2 (subset latin+cyrillic; джерело Google Fonts v33) ---- */
@font-face {
font-family: "EB Garamond";
src: url("https://sensebaby.com/wp-content/themes/sense/fonts/eb-garamond-var-latin.woff2") format("woff2");
font-weight: 500 700; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "EB Garamond";
src: url("https://sensebaby.com/wp-content/themes/sense/fonts/eb-garamond-var-cyrillic.woff2") format("woff2");
font-weight: 500 700; font-style: normal; font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "EB Garamond";
src: url("https://sensebaby.com/wp-content/themes/sense/fonts/eb-garamond-var-italic-latin.woff2") format("woff2");
font-weight: 500 700; font-style: italic; font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "EB Garamond";
src: url("https://sensebaby.com/wp-content/themes/sense/fonts/eb-garamond-var-italic-cyrillic.woff2") format("woff2");
font-weight: 500 700; font-style: italic; font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Great Vibes";
src: url("https://sensebaby.com/wp-content/themes/sense/fonts/great-vibes-400-latin.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: block;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Great Vibes";
src: url("https://sensebaby.com/wp-content/themes/sense/fonts/great-vibes-400-cyrillic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* --- sense-c-header --- */
/* =============================================================================
HEADER — шапка SENSE (спільний компонент, усі сторінки).
⚠️ Хуки двигунів (не міняти): `#burgerBtn` `#mobileNav` `#navOverlay`
`#catalogWrap` `#catalogBtn` `.header__cart-badge` — `docs/JS-HOOKS.md`.
Контур піл = `--color-control-border`, а не прозорий чорний: прозорість
тексту й контурів у проєкті не вживається.
============================================================================= */
@layer components {
.header {
position: sticky;
top: 0;
z-index: 70;
background: var(--color-cream); transition: opacity 0.3s ease;
}
/* «ШТОРКА» над шапкою (запит 4-8, Telegram in-app браузер на iOS).
Симптом: під час rubber-band overscroll угору над закріпленою шапкою
мигав контент сторінки — у Safari/Chrome не видно, бо там зверху сама
шапка, а Telegram тягне полотно нижче своєї панелі. Псевдоелемент —
смуга кольору шапки НАД нею: у спокої вона поза вʼюпортом і ні на що
не впливає (absolute — поза потоком, скрол угору браузер не дає),
а на bounce у щілину видно крем, а не контент.
*/
.header::before {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 100%;
height: 100vh;
background: var(--color-cream);
pointer-events: none;
}
/* Відкрите меню (html.nav-open ставить js/main.js): шапка плавно ТАНЕ — на
екрані лишається тільки хрестик панелі (запит 3-32). pointer-events:none —
невидима шапка не має перехоплювати кліки по панелі. */
html.nav-open .header {
opacity: 0;
pointer-events: none;
}
/* ---- Верхній ряд (bar) ---- */
.header__bar {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: min(100%, 120rem); margin-inline: auto;
height: calc(var(--header-h) - 3.375rem); padding-inline: var(--gutter);
}
/* ---- Лого (центр @1920, зліва нижче) ---- */
.header__logo {
/* flex, не block: гліф 70×20.7 сам по собі нижчий за мінімальну ціль 24
(2.5.8), тож посилання добирає висоту до 24 і центрує лого в ній.
На саму картинку це не впливає — росте лише клікабельна зона. */
display: flex;
align-items: center;
min-height: 1.5rem;
flex-shrink: 0;
width: clamp(3.125rem, 0.880175rem + 9.577922vw, 6.8125rem);
color: var(--color-text); }
.header__logo svg { display: block; width: 100%; height: auto; }
/* ---- Навігація (лише @1920) ---- */
.header__nav { display: none; }
.header__menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--gap-md); /* 30 */
align-items: center;
}
.header__menu-link {
display: block;
padding: 0; border: 0;
background: none;
font-family: var(--font-main);
font-size: var(--fs-ui);
font-weight: var(--fw-bold);
line-height: var(--lh-ui);
text-transform: uppercase;
color: var(--color-text);
text-decoration: none;
cursor: pointer;
}
@media (hover: hover) {
.header__menu-link:hover { color: var(--color-brand-sage); }
}
/* ---- Dropdown категорій (двигун: #catalogWrap.is-open) -----------------
«каталог» = (WP ul>li>a) плюс окрема кнопка-тоглер (хук #catalogBtn).
Hover відкриває wrap; клік по лінку веде на сторінку категорії.
Відступ до пташки однаковий у каталозі й у пілах мови/валюти: кнопка
завбільшки з сам гліф, а обовʼязкову ціль 24×24 дає невидимий ::before. */
.header__catalog { position: relative; display: inline-flex; align-items: center; gap: 0.15625rem; /* 2.5 */ }
.header__catalog-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--size-cue); height: var(--size-cue); padding: 0;
border: 0;
background: none;
color: var(--color-text);
cursor: pointer;
}
/* Клік-ціль 24×24 навколо гліфа (2.5.8). НЕВИДИМА — це вона підсвічується
синім в інспекторі, не сама пташка (фідбек 3-15: «птичка завелика»).
Розміри від токенів, тож зміна --size-cue не ламає ні 24×24, ні зазор. */
.header__catalog-toggle::before {
content: "";
position: absolute;
inset:
calc((1.5rem - var(--size-cue)) / -2) calc(var(--size-cue) - 1.5rem) calc((1.5rem - var(--size-cue)) / -2) 0; }
.header__catalog-toggle:focus-visible { outline: none; }
.header__catalog-toggle:focus-visible::before {
outline: 2px solid var(--color-text);
outline-offset: 0;
}
/* ---- Пташка (єдиний гліф сайту) ---- */
.header__catalog-toggle svg,
.header__pill svg {
width: var(--size-cue);
height: auto;
flex-shrink: 0;
transition: transform var(--transition);
}
@media (hover: hover) {
.header__catalog:hover .header__catalog-toggle svg,
.header__select:hover .header__pill svg { transform: rotate(180deg); }
}
.header__catalog.is-open .header__catalog-toggle svg,
.header__select.is-open .header__pill svg { transform: rotate(180deg); }
.header__dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 30;
display: none;
width: max-content;
padding: var(--gap-xs) 1.5625rem; /* 20 / 25 */
background: var(--color-cream);
border: 1px solid var(--color-control-border);
border-radius: var(--radius-input);
}
.header__catalog.is-open .header__dropdown { display: block; }
.header__dropdown-list {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--gap-3xs);
}
.header__dropdown-link {
display: block;
font-size: var(--fs-ui);
line-height: var(--lh-ui);
color: var(--color-text);
text-decoration: none;
}
@media (hover: hover) {
.header__dropdown-link:hover { color: var(--color-brand-sage); }
}
/* ---- Правий кластер дій ---- */
.header__actions {
display: flex;
align-items: center;
gap: var(--gap-3xs); /* 10 @375 */
}
/* Піл-селектори мова/валюта (двигун initDropdownSelect): контур
функціональний, тому колір із токена рамки контролу. */
.header__select { position: relative; display: none; } .header__pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gap-cue); width: 3.25rem; height: 3.25rem; /* 52 */
border: 1px solid var(--color-control-border);
border-radius: var(--radius-pill);
background: none;
font-family: var(--font-main);
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
line-height: var(--lh-ui);
text-transform: uppercase;
color: var(--color-text);
cursor: pointer;
transition: border-color var(--transition);
}
@media (hover: hover) {
.header__pill:hover { border-color: var(--color-text-muted); }
}
.header__select-dropdown {
position: absolute;
top: 100%;
left: 50%;
translate: -50%;
z-index: 30;
display: none;
width: 100%; padding: 0;
background: var(--color-cream);
border: 1px solid var(--color-control-border);
border-top: 0;
border-radius: 0 0 var(--radius-pill) var(--radius-pill);
text-align: center;
}
.header__select.is-open .header__select-dropdown { display: grid; gap: 0; }
.header__select.is-open .header__pill {
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.header__lang-option,
.header__currency-option {
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
padding: 0;
border: 0;
background: none;
font-family: var(--font-main);
font-size: var(--fs-ui);
font-weight: var(--fw-medium);
line-height: var(--lh-ui);
text-transform: uppercase;
color: var(--color-text);
cursor: pointer;
border-radius: var(--radius-pill);
}
.header__lang-option.is-active,
.header__currency-option.is-active { background: var(--color-bg-warm); }
.header__lang-option[hidden],
.header__currency-option[hidden] { display: none; }
@media (hover: hover) {
.header__lang-option:hover,
.header__currency-option:hover { color: var(--color-brand); }
}
.header__lang-option:active,
.header__currency-option:active { color: var(--color-brand); }
.header__icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem; height: 1.75rem; /* 28 @375 */
border-radius: var(--radius-pill);
color: var(--color-brand); transition: color var(--transition), border-color var(--transition);
}
.header__icon-btn svg { display: block; width: 100%; height: 100%; }
.header__tg {
display: none; /* @991+ */
border: 1px solid var(--color-control-border);
}
@media (hover: hover) {
.header__tg:hover {
border-color: var(--color-text-muted);
color: var(--color-brand-sage); }
.header__cart:hover { color: var(--color-brand-sage); } }
/* Бейдж кошика (хук .header__cart-badge; двигун тогл-ить .visible). */
.header__cart-badge {
position: absolute;
top: -0.375rem; right: -0.375rem; display: none;
min-width: 1.375rem; height: 1.375rem; /* 22 */
padding-inline: 0.25rem;
align-items: center; justify-content: center;
background: var(--color-brand);
border-radius: var(--radius-pill);
box-shadow: 0 0 0 0.125rem var(--color-cream);
font-size: 0.75rem;
line-height: 1;
color: var(--color-cream);
}
.header__cart-badge.visible { display: inline-flex; }
.header__contact {
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--control-size); padding-inline: var(--gap-3xs); border: 0;
border-radius: var(--radius-pill);
background: var(--color-brand); font-family: var(--font-main);
font-size: var(--fs-ui); font-weight: var(--fw-bold);
line-height: var(--lh-ui);
text-transform: uppercase;
text-decoration: none; color: var(--color-cream); cursor: pointer;
transition: background-color var(--transition), color var(--transition),
border-color var(--transition);
}
@media (hover: hover) {
.header__contact:hover { background: var(--color-brand-sage); } }
.header__contact:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 2px;
}
/* Бургер (хук #burgerBtn; зникає @1920 — межа зламу = adapt).
3 лінії-спани (не SVG): на .is-open верх/низ складаються в хрестик,
середня тане (запит 3-31; код свій, референс-поведінка codepen). */
.header__burger {
position: relative;
display: inline-block;
width: 1.625rem; height: 1.5rem; /* зона ≥24px (2.5.8); гліф 26×17 */
padding: 0;
border: 0;
background: none;
color: var(--color-text);
cursor: pointer;
}
.header__burger-line {
position: absolute;
left: 0;
width: 100%; height: 1px;
translate: 0 -50%;
background: currentColor;
transition: top 0.3s ease, rotate 0.3s ease, opacity 0.3s ease;
}
.header__burger-line:nth-child(1) { top: calc(50% - 0.5rem); }
.header__burger-line:nth-child(2) { top: 50%; }
.header__burger-line:nth-child(3) { top: calc(50% + 0.5rem); }
.header__burger.is-active .header__burger-line:nth-child(1) { top: 50%; rotate: 45deg; }
.header__burger.is-active .header__burger-line:nth-child(2) { opacity: 0; }
.header__burger.is-active .header__burger-line:nth-child(3) { top: 50%; rotate: -45deg; }
/* ---- Корп-стрічка (54 const, шавлія) ---- */
.header__ribbon {
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-3xs);
height: clamp(2.75rem, 2.3657rem + 1.639344vw, 3.375rem);
padding-inline: var(--gutter);
background: var(--color-brand-sage);
text-align: center;
text-decoration: none;
font-family: var(--font-main);
font-size: clamp(0.6250rem, 0.429819rem + 0.819672vw, 0.9375rem); /* 10→15 */
font-weight: var(--fw-medium);
line-height: 1.19;
text-transform: uppercase;
color: var(--color-cream); }
.header__ribbon svg {
flex-shrink: 0;
width: clamp(0.3125rem, 0.1011rem + 0.901639vw, 0.65625rem);
height: auto;
}
.header__ribbon-link {
color: inherit;
text-decoration: none;
}
/* Хрестик закриття. Малюнок і розмір лишились ті самі (правило svg вище),
тут — тільки скидання кнопки. Клікабельна зона розтягнута до 24px
псевдоелементом: сам хрестик 5–10.5px, і збільшувати його не можна, а
пальцем у нього треба потрапляти. */
.header__ribbon[hidden] { display: none; }
.header__ribbon-close {
position: relative;
display: flex;
align-items: center;
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
}
.header__ribbon-close::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 1.5rem;
height: 1.5rem;
}
.header__ribbon-close:focus-visible {
outline: 2px solid var(--color-cream);
outline-offset: 2px;
}
.header__ribbon-cue { text-underline-offset: 0.15em; }
@media (min-width: 495px) {
.header__ribbon-br { display: none; }
}
/* ---- Мобільна панель навігації (хуки #mobileNav/#navOverlay) -----------
Повноекранна, пункти по центру. Закритий стан ховаємо visibility, а не
transform-зсувом: невидиме меню не має ловити Tab. */
.mobile-nav {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: var(--gap-xl) var(--gutter);
background: var(--color-cream);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav__menu {
list-style: none; margin: 0; padding: 0;
display: grid;
gap: var(--gap-md); /* 30 */
justify-items: center;
text-align: center;
}
.mobile-nav__link {
/* ціль ≥24 (2.5.8): рядок добирає висоту флексом, ритм тримає gap */
display: flex;
align-items: center;
min-height: 1.5rem;
font-size: var(--fs-subhead); font-weight: var(--fw-medium);
line-height: var(--lh-subhead);
text-transform: uppercase;
color: var(--color-text);
text-decoration: none;
}
@media (hover: hover) {
.mobile-nav__link:hover { color: var(--color-brand-sage); }
}
.mobile-nav__link:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 4px;
}
/* Каталог у мобільному меню (запит 4-5, уточнено 4-6): той самий двигун
.header__catalog, але підменю НЕ плашка-попап — пункти категорій
зʼявляються В ПОТОЦІ ПІД «каталогом» (меню нижче зсувається), і читаються
як підменю: менший кегль (15 проти 20), без капсу, приглушений колір,
по центру. Відкриття на тачі — лише з натискання (ховер і так під
hover:hover). */
.mobile-nav__catalog {
flex-wrap: wrap; justify-content: center;
--size-cue: 0.5625rem; gap: 0.5rem; }
.mobile-nav__catalog .header__dropdown {
position: static; translate: none;
width: 100%;
margin-top: 0.9375rem; padding: 0;
border: 0; background: none;
}
.mobile-nav__catalog .header__dropdown-list {
justify-items: center;
gap: 0.75rem; }
.mobile-nav__catalog .header__dropdown-link {
color: var(--color-text-muted); font-size: 1.0625rem; }
.mobile-nav__close {
position: absolute;
top: calc((var(--header-h) - 3.375rem) / 2 - 0.75rem);
right: var(--gutter);
width: 1.625rem; height: 1.5rem; padding: 0;
border: 0;
background: none;
color: var(--color-text);
cursor: pointer;
}
.mobile-nav__close::before,
.mobile-nav__close::after {
content: "";
position: absolute;
top: 50%; left: 0;
width: 100%; height: 1px;
translate: 0 -50%;
background: currentColor;
}
.mobile-nav__close::before { rotate: 45deg; }
.mobile-nav__close::after { rotate: -45deg; }
.mobile-nav__extras {
position: absolute;
bottom: var(--gap-xl);
left: 50%;
translate: -50%;
display: flex;
align-items: center;
gap: var(--gap-xs); /* 20 */
}
.mobile-nav__extras .header__select { display: inline-block; }
.mobile-nav__extras .header__select-dropdown {
top: auto;
bottom: 100%; border-top: 1px solid var(--color-control-border);
border-bottom: 0;
border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}
.mobile-nav__extras .header__select.is-open .header__pill {
border-bottom: 1px solid var(--color-control-border);
border-bottom-left-radius: var(--radius-pill);
border-bottom-right-radius: var(--radius-pill);
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.mobile-nav__tg {
display: inline-flex;
width: 2.75rem; height: 2.75rem; }
.mobile-nav__close:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 4px;
}
.nav-overlay {
position: fixed;
inset: 0;
z-index: 50;
display: none;
background: rgb(var(--color-text-rgb) / 0.4);
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-overlay.is-visible { opacity: 1; }
/* ---- ПЛАНШЕТНИЙ КЛАСТЕР — дзеркало якоря 991, з 640 ---- */
@media (min-width: 640px) {
.header__actions { gap: var(--gap-xs); } /* 20 */
.header__select { display: inline-block; }
.header__tg { display: inline-flex; }
.header__icon-btn { width: 3.25rem; height: 3.25rem; } /* 52 */
.header__contact { display: none; }
.header__burger { width: 1.8125rem; height: 1.5rem; } }
/* ---- Сегмент 991→1920: РОЗМІРИ (не структура) ---- */
@media (min-width: 991px) {
.header__logo { width: clamp(6.8125rem, 2.3165rem + 7.258938vw, 11rem); }
.header__ribbon {
font-size: clamp(0.9375rem, 0.599946rem + 0.541712vw, 1.2500rem); /* 15→20 */
}
}
/* ---- ДЕСКТОПНИЙ КЛАСТЕР — дзеркало якоря 1920, з 1280 ---- */
@media (min-width: 1280px) {
.header__nav { display: block; }
.header__menu-item:last-child { display: none; }
.header__logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.header__burger { display: none; }
.mobile-nav, .nav-overlay { display: none; }
}
/* ---- @1920 (десктоп, точний) ---- */
@media (min-width: 1920px) {
.header__menu-item:last-child { display: block; }
}
}
/* =============================================================================
«ТОВАР УПАВ У КОШИК» — кулька летить від кнопки «Додати в кошик» до
іконки кошика, і кошик із бейджем «ловлять» її кивком.
Двигун — js/shop.js (flyToCart/catchBump): один на сторінку товару й картки.
Рух — transform+opacity; кивок — translate (без scale: у бейджі текст).
============================================================================= */
@layer components {
.cart-fly {
position: fixed;
z-index: 80; width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem; border-radius: 50%;
overflow: hidden;
background: var(--color-brand);
box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.25);
pointer-events: none;
animation: sense-cart-fly 0.55s cubic-bezier(0.15, 0.75, 0.35, 1) forwards;
}
.cart-fly img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
}
@keyframes sense-cart-fly {
0% { translate: 0 0; scale: 1; opacity: 1; }
100% { translate: var(--fly-x) var(--fly-y); scale: 0.22; opacity: 0.35; }
}
@media (prefers-reduced-motion: no-preference) {
.header__cart.is-catch { animation: sense-cart-catch 0.4s ease; }
.header__cart-badge.is-catch { animation: sense-cart-catch 0.4s ease 0.08s; }
}
@keyframes sense-cart-catch {
0% { translate: 0 0; }
35% { translate: 0 0.25rem; }
70% { translate: 0 -0.125rem; }
100% { translate: 0 0; }
}
}
/* --- sense-c-footer --- */
/* =============================================================================
FOOTER — підвал SENSE (спільний компонент, усі сторінки).
⚠️ Крем-текст на блакиті дає 1.97:1 — це СВІДОМИЙ виняток 1.4.3, ухвалений
дизайном, а не недогляд. Не «виправляти» потемнінням.
Меню = `ul > li > a` (під `wp_nav_menu`). Акордеон-хуків немає — колонки
видимі завжди.
============================================================================= */
@layer components {
.footer {
position: relative;
background: var(--color-brand);
color: var(--color-cream); padding-block: 1.5625rem 1.25rem; }
.footer__inner {
width: min(100%, 120rem);
margin-inline: auto;
padding-inline: var(--gutter);
}
.footer__logo {
display: block;
width: clamp(9.28125rem, 2.0002rem + 31.065574vw, 21.125rem);
color: currentColor;
}
.footer__logo svg { display: block; width: 100%; height: auto; }
/* ---- Колонки лінків (стек @375; ряд @1920) ---- */
.footer__cols {
display: flex;
flex-direction: column;
gap: var(--gap-xs); margin-top: var(--gap-xl);
}
.footer__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--gap-3xs); align-content: start;
}
.footer__link {
font-family: var(--font-main);
font-size: var(--fs-ui); font-weight: var(--fw-bold); line-height: var(--lh-ui);
text-transform: uppercase;
color: currentColor;
text-decoration: none;
}
@media (hover: hover) {
.footer__link:hover { text-decoration: underline; }
}
/* ---- GV-акцент «Збирай сенси!» (декор, ЖИВИЙ ШРИФТ, не картинка) ---- */
.footer__accent {
display: block;
margin-top: var(--gap-xl);
font-family: var(--font-accent); font-size: var(--fs-accent-lg); /* 34→46→65 */
font-weight: var(--fw-regular); line-height: var(--lh-accent-lg); /* 110% */
letter-spacing: var(--ls-accent-lg);
color: currentColor; padding-inline-end: 0.18em;
margin-bottom: 0.2em;
}
/* ---- Нижній ряд політик ---- */
.footer__policy {
display: flex;
flex-wrap: wrap; gap: var(--gap-3xs) 1.75rem; margin: var(--gap-xl) 0 0;
padding: 0;
list-style: none;
}
.footer__policy .footer__link { font-weight: var(--fw-medium); }
/* ---- ≤639 (мобайл — дзеркало 375) ---- */
@media (max-width: 639.98px) {
.footer__list { gap: 0.3125rem; } /* 5 */
.footer__cols { gap: 1.875rem; } .footer__cols { margin-top: 1.875rem; }
.footer__accent { margin-top: 1.875rem; }
.footer__policy { margin-top: 1.875rem; gap: 0.3125rem 1.75rem; }
}
/* ---- Планшет ---- */
@media (min-width: 640px) {
.footer { padding-block: 3.125rem; } .footer__inner {
display: grid;
grid-template-columns: 1fr auto; row-gap: 0; }
.footer__logo {
grid-column: 1 / -1;
justify-self: start;
}
.footer__inner > nav {
grid-column: 1 / -1;
justify-self: stretch; margin-top: 3.75rem; }
.footer__cols {
display: grid;
grid-template-columns: repeat(3, max-content);
justify-content: space-between;
gap: var(--gap-xl); margin: 0;
}
.footer__policy {
grid-column: 1; grid-row: 3;
align-self: end;
margin: 3.75rem 0 0; gap: 2.9375rem; /* 47 */
}
.footer__accent {
grid-column: 2; grid-row: 3;
justify-self: end;
align-self: end;
margin: 0 0 0.2em;
}
}
/* ---- @1280+ (дзеркало десктоп-якоря) ---- */
@media (min-width: 1280px) {
.footer { padding-block: 3.125rem 1.875rem; } .footer__inner {
grid-template-columns: 1fr 1fr;
align-content: space-between; min-height: 18.9375rem; column-gap: var(--gap-xl);
}
.footer__logo { grid-column: 1; grid-row: 1; align-self: start; }
.footer__inner > nav {
grid-column: 2; grid-row: 1;
justify-self: stretch; align-self: start;
margin-top: 0;
}
.footer__policy { grid-column: 1; grid-row: 2; margin: 0; }
.footer__accent { grid-column: 2; grid-row: 2; margin: 0 0 0.2em; }
}
}
/* --- sense-c-to-top --- */
/* =============================================================================
TO-TOP — кнопка «вгору» (спільний компонент).
Коло бренд-шавлія + крем-стрілка, підпис праворуч на десктопі й під колом у
адаптиві. Логіка — `js/to-top.js`; сторінка підключає обидва файли.
⚠️ Обидва файли обовʼязкові разом. Поки стилі жили в `index.css`, а логіка в
`js/index.js`, на будь-якій іншій сторінці кнопка ставала статичною, SVG
розгортався в інтринсік 76px, `is-visible` ніхто не вмикав — і під підвалом
світилась біла смуга.
============================================================================= */
@layer components {
.to-top {
position: fixed;
right: min(var(--gutter), 2.5rem);
bottom: 1.5625rem; /* 25 */
z-index: 40;
display: inline-flex;
flex-direction: row; align-items: center;
gap: 0.5rem; border: 0;
padding: 0;
background: none;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(0.625rem);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
-webkit-tap-highlight-color: transparent;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 2.875rem; height: 2.875rem; } .to-top__label {
color: var(--color-brand-sage); font-family: var(--font-main); font-size: var(--fs-ui); font-weight: var(--fw-medium); /* 500 */
line-height: 1.19; /* 119% */
letter-spacing: -0.03125rem; text-align: left;
}
.to-top:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }
@media (max-width: 990.98px) {
.to-top { flex-direction: column; gap: var(--gap-cue); }
.to-top__label { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.to-top { transition: opacity var(--transition), visibility var(--transition); transform: none; }
.to-top.is-visible { transform: none; }
}
}
/* --- sense-c-buttons --- */
/* =============================================================================
BUTTONS — кнопки SENSE (primary заливка / outline контурна).
Текст primary — ТЕМНИЙ: білий на фірмовому блакиті дає 1.9:1.
Ширина padding-based + `min-width`, а не жорстка: інакше довший напис
обрізається замість того, щоб розсунути кнопку.
Стани — `docs/INTERACTION-STATES.md`: hover лише під `@media (hover:hover)`,
`:active` і `:focus-visible` — завжди.
============================================================================= */
@layer components {
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: clamp(2.8125rem, 2.4282rem + 1.639344vw, 3.4375rem);
padding-inline: clamp(2rem, 1.6926rem + 1.311475vw, 2.5rem); /* 32→40 */
min-width: var(--btn-min);
max-width: 100%;
border-radius: var(--radius-pill);
font-family: var(--font-main);
font-size: var(--fs-ui); /* 13→15 */
font-weight: var(--fw-bold);
line-height: var(--lh-ui);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background-color var(--transition), color var(--transition),
border-color var(--transition);
}
.btn:focus-visible {
outline: 2px solid var(--color-text); outline-offset: 2px;
}
/* `aria-disabled` — для кнопок-ПОСИЛАНЬ (у Woo CTA кошика це ``, тож
атрибута `disabled` там не буває). Вигляд той самий, клік гасить JS.
*/
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5; cursor: not-allowed;
}
/* ---- Primary (заливка бренд-синій #A2B9C7 + білий текст) ---- */
.btn--primary {
border: 1px solid var(--color-brand);
background: var(--color-brand);
color: var(--color-cream);
}
@media (hover: hover) {
.btn--primary:hover:not(:disabled) { background: var(--color-brand-sage);
border-color: var(--color-brand-sage);
color: var(--color-cream);
}
}
.btn--primary:active:not(:disabled) {
background: color-mix(in srgb, var(--color-brand) 85%, var(--color-text));
border-color: transparent;
color: var(--color-cream);
}
/* ---- Outline (контурна) ---- */
.btn--outline {
min-width: 20.6875rem;
border: 1px solid var(--color-control-border);
background: transparent;
color: var(--color-text);
}
@media (hover: hover) {
.btn--outline:hover:not(:disabled) { background: var(--color-brand);
border-color: var(--color-brand);
color: var(--color-cream);
}
}
.btn--outline:active:not(:disabled) {
background: color-mix(in srgb, var(--color-brand) 85%, var(--color-text));
border-color: transparent;
color: var(--color-cream);
}
/* ---- @375 (мобайл) ---- */
@media (max-width: 639.98px) {
.btn--outline { width: 100%; min-width: 0; }
}
}
@layer components {
/* ---- Light (біла заливка → синя на ховері) ---- */
.btn--light {
border: 1px solid var(--color-cream);
background: var(--color-cream);
color: var(--color-brand-sage);
}
@media (hover: hover) {
.btn--light:hover:not(:disabled) {
background: var(--color-brand);
border-color: var(--color-brand);
color: var(--color-cream);
}
}
.btn--light:active:not(:disabled) {
background: color-mix(in srgb, var(--color-brand) 85%, var(--color-text));
border-color: transparent;
color: var(--color-cream);
}
}
/* --- sense-c-form-field --- */
/* =============================================================================
FORM-FIELD — ЄДИНИЙ рецепт поля вводу (кошик, чекаут, модалка).
Модалка вживає ці самі `.field` / `.field__control` / `.check`;
`form-modal.css` лишає тільки модальне (шар, діалог, скрол, декор, хрестик).
Один модальний виняток — висота textarea: діалог і так високий.
Хуки під Woo: `.field` = майбутній `.form-row`, у ньому лейбл, контрол,
підказка і вузол помилки — кожне поле самостійне, бо Woo друкує помилку
всередину рядка поля.
============================================================================= */
@layer components {
/* Поле = самостійний row-контейнер (мапиться на Woo `.form-row`).
Явний «схований» стан — див. коментар у checkout.css. */
.field[hidden] { display: none; }
.field {
display: grid;
gap: var(--gap-3xs); /* ⚠️ Рядки не розтягуються. Помилка в сусідньому полі робить рядок
`.field-grid` вищим, і `align-content: stretch` роздав би цю висоту
рядкам самого поля: `.combo` виросла б, а разом із нею з'їхали б і
стрілка (`height: calc(100% - 2px)`), і випадний список
(`top: calc(100% + 6px)`). `start` тримає рядки на висоті вмісту. */
align-content: start;
}
/* Видимий лейбл над полем. Чому видимий, а не placeholder-як-лейбл:
placeholder зникає при вводі (3.3.2), а Woo свої поля і так рендерить
з `