/* ==========================================================================
FLORISTERIA 2026 — pages.css
Етап 7а: службові сторінки (рядок «С» мапи ТЗ, рішення п.25 і п.27).
Порядок: СПІЛЬНЕ (fl-page) → .fl-prose: core-блоки і класичний HTML → КОНТАКТИ
→ GRAVITY FORMS → БЛОГ / ПОСТ / АРХІВ → ВІДГУКИ → ПОДАРУНКИ → АКАУНТ (WooCommerce)
→ СТРАХУВАННЯ ПІСЛЯ DEQUEUE (етап 8).
Mobile-first. Брейкпоінти ті самі: base ≤640 · ≥768 · ≥1024 · ≥1440.
Підключається після woo.css і перед plugins.css (inc/enqueue.php), тому може
спиратися на .fl-prose, .fl-field, .fl-btn, .fl-pagination з site.css / woo.css.
========================================================================== */
/* ==========================================================================
1. СПІЛЬНЕ: текстова сторінка fl-page
========================================================================== */
.fl-page { display: block; background: var(--fl-bg); padding-block: 20px 64px; }
@media (min-width: 1024px) { .fl-page { padding-block: 24px 104px; } }
.fl-page__inner { display: block; }
/* Крихти + H1 ЗЛІВА (рішення п.25) */
.fl-page__head { display: grid; justify-items: start; gap: 10px; margin-bottom: 28px; max-width: 760px; }
@media (min-width: 1024px) { .fl-page__head { margin-bottom: 40px; } }
.fl-page__head .fl-breadcrumbs { margin-bottom: 6px; }
.fl-page__label { margin: 0; color: var(--fl-charcoal-70); }
.fl-page__title { margin: 0; }
.fl-page__lead { margin: 6px 0 0; font-size: 19px; line-height: 1.5; color: var(--fl-charcoal-70); }
/* Колонка тексту ~720px (рішення п.25: 680–760px) */
.fl-page__prose { max-width: 720px; }
.fl-page__empty { margin: 0; max-width: 60ch; font-size: 19px; color: var(--fl-charcoal-70); }
.fl-page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.fl-page__crumbs { padding-block: 16px 0; }
.fl-page__pages { margin-top: 32px; }
/* ==========================================================================
2. .fl-page .fl-prose: те, що РЕАЛЬНО є в контенті сторінок 103, 104, 107, 109, 110, 120,
1352, 11759 обох сайтів (перевірено по БД):
core-блоки columns / column / image (align left, size-medium) / paragraph /
heading (h1, h3) / list, прес(е)т has-medium-font-size;
класичний HTML: p, b, strong, h2[style="text-align: center"], ul > li з
табуляцією, img (alignnone / wp-image-N) без обгортки, figure, span.Apple-converted-space,
br на початку абзацу (останні три чистить fl_prose_clean() у PHP).
Базові правила .fl-prose (кегль, абзаци, списки, посилання) — у woo.css.
ВАЖЛИВО ПРО ОБЛАСТЬ ДІЇ: усі селектори цього розділу мають префікс `.fl-page`, бо
клас `.fl-prose` живе не лише на службових сторінках — він є на описі категорії
(`.fl-catalog__desc`, woo.css:149), у короткому описі й акордеоні товару
(`.fl-acc__body`) і в нотатках замовлення. Без префікса цей файл (він іде ПІСЛЯ
fl-woo в черзі, специфічність однакова) перебивав би типографіку, затверджену на
етапах 4 і 5. `.fl-page` є в обгортці кожного службового шаблону: page.php,
single.php, archive.php, page-blog.php, page-contacts.php, page-gift.php,
page-reviews.php, page-my-account.php.
========================================================================== */
.fl-page .fl-prose { font-size: 18px; line-height: 1.65; }
@media (min-width: 1024px) { .fl-page .fl-prose { font-size: 19px; } }
.fl-page__prose > :first-child { margin-top: 0; }
/* Заголовки в контенті: h2 центрований інлайн-стилем (сторінка 109) лишаємо зліва —
у новій сітці текстова колонка вузька, центрування ламає ритм. Інлайн `style` перебиваємо
лише для text-align (не для решти). */
.fl-page .fl-prose h1[style*="text-align"],
.fl-page .fl-prose h2[style*="text-align"],
.fl-page .fl-prose h3[style*="text-align"],
.fl-page .fl-prose p[style*="text-align: center"] { text-align: left !important; }
/* Кегль заголовків контенту НАВМИСНО нижчий за токени --fl-h2-size / --fl-h3-size
(32/36 і 26/28 px): ті розраховані на повноширинні секції головної, а тут колонка
~720px, де 32px H2 з'їдає рядок і ламає ритм читання. Шкала колонки: h1 30/32 → h2 26/28
→ h3 21/22 → h4 20 — рівні лишаються помітно різними.
`.fl-prose h1` потрібен, бо в контенті сторінок 444 і 18 (сайт 2) є власний ;
fl_prose_clean() знижує його до , але правило лишаємо страхувальним. */
.fl-page .fl-prose h1 { margin: 32px 0 12px; font-size: 30px; line-height: 1.2; }
.fl-page .fl-prose h2 { margin: 32px 0 12px; font-size: 26px; line-height: 1.2; }
.fl-page .fl-prose h3 { margin: 28px 0 10px; font-size: 21px; line-height: 1.25; }
.fl-page .fl-prose h4 { margin: 24px 0 8px; font-size: 20px; }
@media (min-width: 1024px) {
.fl-page .fl-prose h1 { font-size: 32px; }
.fl-page .fl-prose h2 { font-size: 28px; }
.fl-page .fl-prose h3 { font-size: 22px; }
}
.fl-page .fl-prose :is(h1, h2, h3, h4):first-child { margin-top: 0; }
.fl-page .fl-prose :is(p, ul, ol) { margin: 0 0 16px; }
/* Останній блок у колонці — без нижнього відступу (правило woo.css:282 має ту саму
специфічність, що й рядок вище, тому дублюємо його з префіксом). */
.fl-page .fl-prose :is(p, ul, ol):last-child { margin-bottom: 0; }
.fl-page .fl-prose :is(ul, ol) { padding-left: 22px; }
.fl-page .fl-prose li { margin-bottom: 6px; }
/* Класичні списки в БД мають табуляцію перед
— прибираємо «драбинку» від white-space */
.fl-page .fl-prose :is(ul, ol) { white-space: normal; }
/* Посилання в тексті — Charcoal + підкреслення (Deep Sage на Ivory/Cream не дає 4,5:1) */
.fl-page .fl-prose a { color: var(--fl-charcoal); text-decoration: underline; text-underline-offset: 3px; }
.fl-page .fl-prose a:hover { text-decoration-thickness: 2px; }
/* Тонка лінія-роздільник у тексті */
.fl-page .fl-prose hr { margin: 28px 0; border-top: 1px solid var(--fl-greige-50); }
/* Цитати */
.fl-page .fl-prose blockquote {
margin: 24px 0; padding: 4px 0 4px 20px; border-left: 1px solid var(--fl-greige);
font-size: 1.05em; color: var(--fl-charcoal-70);
}
/* --- Зображення: core-блок і класичний ![]()
------------------------------ */
.fl-page .fl-prose :is(img, figure) { max-width: 100%; }
.fl-page .fl-prose img { height: auto; display: block; border-radius: 0; }
.fl-page .fl-prose figure { margin: 20px 0; }
.fl-page .fl-prose figure:first-child { margin-top: 0; }
.fl-page .fl-prose figcaption {
margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--fl-charcoal-70);
}
/* wp:image align=left / alignleft у legacy-обгортці div.wp-block-image.
На mobile обтікання немає (колонка вузька), тому й бічних відступів немає — інакше фото
на 390px виходило вужчим за текст на 24px і виглядало зміщеним. */
.fl-page .fl-prose :is(.alignleft, .alignright, .wp-block-image.alignleft, .wp-block-image.alignright) { margin: 0 0 16px; }
.fl-page .fl-prose :is(.aligncenter, .wp-block-image.aligncenter) { margin-inline: auto; }
.fl-page .fl-prose .alignnone { margin: 20px 0; }
@media (min-width: 768px) {
.fl-page .fl-prose :is(.alignleft, .wp-block-image.alignleft) { float: left; max-width: 45%; margin: 0 24px 16px 0; }
.fl-page .fl-prose :is(.alignright, .wp-block-image.alignright) { float: right; max-width: 45%; margin: 0 0 16px 24px; }
}
/* Сторінка 110 «Оплата»: два «голі» ![]()
платіжних систем підряд — ставимо в рядок,
зменшуємо (у БД 352×250 і 445×250, для логотипів завелико). Селектор звужено до
`.fl-page__prose`: у нотатках замовлення й в акордеоні товару прямий ![]()
має
лишатися звичайним зображенням. */
.fl-page .fl-page__prose > img { max-height: 110px; width: auto; margin: 16px 16px 16px 0; display: inline-block; }
/* --- core-блок columns ---------------------------------------------------- */
/* Ядро WP 7.0 друкує стилі блоків inline (wp-block-columns-inline-css) до нашого CSS,
тому тут — лише відступи й ширина під нову колонку. */
.fl-page .fl-prose .wp-block-columns { gap: 24px; margin: 0 0 20px; }
.fl-page .fl-prose .wp-block-column { min-width: 0; }
.fl-page .fl-prose .wp-block-columns:last-child { margin-bottom: 0; }
/* --- прес(е)ти кеглю ядра ------------------------------------------------- */
.fl-page .fl-prose .has-small-font-size { font-size: 16px; }
.fl-page .fl-prose .has-medium-font-size { font-size: 20px; }
.fl-page .fl-prose .has-large-font-size { font-size: 24px; line-height: 1.3; }
.fl-page .fl-prose .has-x-large-font-size { font-size: 30px; line-height: 1.2; }
/* --- таблиці в контенті --------------------------------------------------- */
.fl-page .fl-prose table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 17px; }
.fl-page .fl-prose :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--fl-greige-50); text-align: left; }
.fl-page .fl-prose th { font-weight: var(--fl-w-medium); }
/* --- дрібне -------------------------------------------------------------- */
.fl-page .fl-prose :is(b, strong) { font-weight: var(--fl-w-medium); }
.fl-page .fl-prose :is(em, i) { font-style: normal; font-weight: var(--fl-w-medium); }
.fl-page .fl-prose iframe { max-width: 100%; }
/* ==========================================================================
3. КОНТАКТИ (page-contacts.php)
========================================================================== */
.fl-contacts__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
.fl-contacts__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
}
.fl-contacts__subtitle { margin: 0 0 18px; }
.fl-contacts__intro { margin: 0 0 22px; max-width: 46ch; color: var(--fl-charcoal-70); }
.fl-contacts__intro p { margin: 0 0 10px; }
.fl-contacts__intro p:last-child { margin-bottom: 0; }
.fl-contacts__list { display: grid; gap: 22px; margin: 0; }
.fl-contacts__row { display: grid; gap: 4px; }
.fl-contacts__row dt { margin: 0 0 2px; color: var(--fl-charcoal-70); }
.fl-contacts__row dd { margin: 0; font-size: 19px; line-height: 1.45; }
.fl-contacts__phone {
font-size: 22px; font-weight: var(--fl-w-medium); letter-spacing: 0.4px;
border-bottom: 1px solid transparent; transition: border-color var(--fl-dur) var(--fl-ease);
}
.fl-contacts__phone:hover { border-color: var(--fl-greige); }
.fl-contacts__socials { margin-top: 30px; display: grid; gap: 12px; }
.fl-contacts__socials p { margin: 0; color: var(--fl-charcoal-70); }
.fl-contacts__socials-list { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.fl-contacts__social {
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--fl-label-size); letter-spacing: var(--fl-label-ls); text-transform: uppercase;
font-weight: var(--fl-w-medium);
padding-bottom: 3px; border-bottom: 1px solid var(--fl-line);
transition: color var(--fl-dur) var(--fl-ease), border-color var(--fl-dur) var(--fl-ease);
}
.fl-contacts__social:hover { color: var(--fl-charcoal); border-color: var(--fl-charcoal); }
.fl-contacts__social .fl-social-icon { width: 18px; height: 18px; }
.fl-contacts__prose { margin-top: 28px; max-width: 46ch; }
.fl-contacts__form-note { margin: 0 0 22px; font-size: 17px; color: var(--fl-charcoal-70); max-width: 46ch; }
/* Карта — окремою секцією під сторінкою (site.css: .fl-map) */
/* ==========================================================================
4. GRAVITY FORMS (форма 1 «Контактна форма» на сторінці «Контакти»)
Розмітку друкує сам плагін — перестилізовуємо його класи під fl-field / fl-input.
Приховані поля (gform_submit, is_submit_N, state_N, gform_unique_id,
gform_target_page_number_N, gform_source_page_number_N, приховані частини поля згоди)
лишаються як є — шаблон їх не чіпає.
ПРО СПЕЦИФІЧНІСТЬ. Власний CSS GF (`gform_basic`, `gform_theme`) підключається ПІЗНІШЕ
за fl-pages.css, а його селектори мають вигляд `.gform_wrapper.gravity-theme input[type=text]`
(0,2,1). Тому всі правила, які перекривають GF, тут навмисно довші — з префіксом
`.fl-page .fl-gf .gform_wrapper` (0,3,1): за однакової специфічності виграв би пізніший
файл, тобто GF. Правила, яких у GF немає, лишаються короткими.
========================================================================== */
.fl-gf .gform_wrapper { margin: 0; }
.fl-gf .gform_wrapper form { margin: 0; }
/* Заголовок / опис форми з БД не показуємо: заголовок розділу дає H2 шаблону (рішення п.25 —
«один заголовок замість двох»). Легенду «* позначає обов'язкові поля» лишаємо. */
.fl-page .fl-gf .gform_wrapper .gform_heading > :not(.gform_required_legend) { display: none; }
.fl-page .fl-gf .gform_wrapper .gform_heading { margin: 0 0 18px; }
.fl-page .fl-gf .gform_wrapper .gform_required_legend {
margin: 0; font-size: 14px; line-height: 1.4; color: var(--fl-charcoal-70);
}
/* GF будує форму на сітці з 12 колонок: поля мають `grid-column: span 12` або `1 / -1`.
Тому кількість колонок НЕ переоголошуємо (інакше `1 / -1` схлопнеться в одну колонку і
частина полів стане вужчою за решту) — задаємо лише відбивки. */
.fl-page .fl-gf .gform_wrapper .gform_fields {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 22px; margin: 0; padding: 0; list-style: none;
}
.fl-page .fl-gf .gform_wrapper .gfield { list-style: none; margin: 0; padding: 0; max-width: none; }
.fl-page .fl-gf .gform_wrapper .gfield_label,
.fl-page .fl-gf .gform_wrapper legend.gfield_label {
display: block; margin: 0 0 8px; padding: 0; float: none; width: auto;
font-family: var(--fl-font-main);
font-size: var(--fl-label-size); line-height: var(--fl-label-lh); letter-spacing: var(--fl-label-ls);
text-transform: uppercase; font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
}
/* Поле згоди: GF ставить класу hidden_label і ховає легенду власним CSS — підстраховка */
.fl-page .fl-gf .gform_wrapper .gfield.hidden_label > .gfield_label { display: none; }
.fl-page .fl-gf .gform_wrapper .gfield_required { color: var(--fl-charcoal); text-decoration: none; }
.fl-page .fl-gf .gform_wrapper .gfield_required_text {
font-size: 11px; text-transform: none; letter-spacing: 0.4px;
}
/* GF звужує окремі контейнери (`.ginput_container_email` — під «підтвердження e-mail»,
~57% ширини поля) — в одноколонковій формі це виглядало як випадково коротший інпут. */
.fl-page .fl-gf .gform_wrapper .ginput_container { width: 100%; max-width: none; margin: 0; }
.fl-page .fl-gf .gform_wrapper input[type="text"],
.fl-page .fl-gf .gform_wrapper input[type="email"],
.fl-page .fl-gf .gform_wrapper input[type="tel"],
.fl-page .fl-gf .gform_wrapper input[type="url"],
.fl-page .fl-gf .gform_wrapper input[type="number"],
.fl-page .fl-gf .gform_wrapper input[type="password"],
.fl-page .fl-gf .gform_wrapper select,
.fl-page .fl-gf .gform_wrapper textarea {
width: 100%; max-width: none; min-height: 52px; padding: 0 16px;
font-family: var(--fl-font-main); font-size: 18px; font-weight: var(--fl-w-light);
letter-spacing: var(--fl-body-ls); line-height: 1.4; color: var(--fl-charcoal);
background: var(--fl-cream); border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
outline: none; box-shadow: none; margin: 0;
transition: border-color var(--fl-dur) var(--fl-ease);
}
.fl-page .fl-gf .gform_wrapper textarea {
min-height: 148px; padding: 14px 16px; line-height: 1.5; resize: vertical;
}
.fl-page .fl-gf .gform_wrapper :is(input, select, textarea):focus { border-color: var(--fl-deep-sage); }
.fl-page .fl-gf .gform_wrapper :is(input, select, textarea):focus-visible {
outline: 2px solid var(--fl-focus); outline-offset: 2px;
}
.fl-gf ::placeholder { color: var(--fl-charcoal-70); opacity: 1; }
.fl-page .fl-gf .gform_wrapper .gfield_description,
.fl-page .fl-gf .gform_wrapper .gform_fileupload_rules {
margin: 6px 0 0; padding: 0; font-size: 14px; line-height: 1.4; color: var(--fl-charcoal-70);
}
/* Чекбокси, радіо і згода */
.fl-page .fl-gf .gform_wrapper :is(.gfield_checkbox, .gfield_radio) {
display: grid; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.fl-page .fl-gf .gform_wrapper .gchoice { display: flex; align-items: flex-start; gap: 10px; list-style: none; margin: 0; }
.fl-page .fl-gf .gform_wrapper .ginput_container_consent { display: flex; align-items: flex-start; gap: 10px; }
.fl-page .fl-gf .gform_wrapper input[type="checkbox"],
.fl-page .fl-gf .gform_wrapper input[type="radio"] {
appearance: none; -webkit-appearance: none; position: relative;
flex: 0 0 auto; width: 20px; min-width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0;
background: var(--fl-ivory); border: 1px solid var(--fl-greige); border-radius: var(--fl-radius);
cursor: pointer;
}
.fl-page .fl-gf .gform_wrapper input[type="radio"] { border-radius: 50%; }
.fl-page .fl-gf .gform_wrapper :is(input[type="checkbox"], input[type="radio"])::before {
content: ""; position: absolute; inset: 3px; background: var(--fl-deep-sage); border-radius: 1px;
transform: scale(0); transition: transform var(--fl-dur) var(--fl-ease);
}
.fl-page .fl-gf .gform_wrapper input[type="radio"]::before { border-radius: 50%; }
.fl-page .fl-gf .gform_wrapper :is(input[type="checkbox"], input[type="radio"]):checked { border-color: var(--fl-deep-sage); }
.fl-page .fl-gf .gform_wrapper :is(input[type="checkbox"], input[type="radio"]):checked::before { transform: scale(1); }
.fl-page .fl-gf .gform_wrapper .gchoice label,
.fl-page .fl-gf .gform_wrapper .gfield_consent_label {
margin: 0; font-family: var(--fl-font-main);
font-size: 17px; line-height: 1.4; font-weight: var(--fl-w-light); color: var(--fl-charcoal);
text-transform: none; letter-spacing: var(--fl-body-ls); cursor: pointer;
}
/* Кнопка відправки — той самий вигляд, що .fl-btn--primary */
.fl-page .fl-gf .gform_wrapper .gform_footer {
margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.fl-page .fl-gf .gform_wrapper .gform_footer input[type="submit"],
.fl-page .fl-gf .gform_wrapper .gform_footer button,
.fl-page .fl-gf .gform_wrapper .gform_button {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: auto; min-width: 0; min-height: 56px; padding: 0 32px; margin: 0;
font-family: var(--fl-font-main); font-size: 14px; font-weight: var(--fl-w-medium); line-height: 1;
letter-spacing: var(--fl-btn-ls); text-transform: uppercase; text-align: center;
color: var(--fl-ivory); background: var(--fl-accent);
border: 1px solid var(--fl-accent); border-radius: var(--fl-radius); cursor: pointer;
transition: background-color var(--fl-dur) var(--fl-ease), border-color var(--fl-dur) var(--fl-ease);
}
.fl-page .fl-gf .gform_wrapper .gform_footer input[type="submit"]:hover,
.fl-page .fl-gf .gform_wrapper .gform_button:hover {
background: var(--fl-charcoal); border-color: var(--fl-charcoal);
}
.fl-gf .gform_ajax_spinner { margin-left: 10px; }
/* Валідація і підтвердження — Deep Sage / Charcoal, ніколи Rose (контраст, ТЗ п.1) */
.fl-page .fl-gf .gform_wrapper :is(.gform_validation_errors, .validation_error) {
margin: 0 0 24px; padding: 14px 16px;
background: var(--fl-cream); border: 1px solid var(--fl-deep-sage); border-radius: var(--fl-radius);
box-shadow: none; color: var(--fl-charcoal); font-size: 17px; line-height: 1.4;
}
/* Заголовок усередині блоку помилок GF має власну рамку й фон — інакше «коробка в коробці» */
.fl-page .fl-gf .gform_wrapper .gform_validation_errors :is(h2, .gform_submission_error) {
margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
font-family: var(--fl-font-main); font-size: 18px; font-weight: var(--fl-w-medium);
line-height: 1.4; color: var(--fl-charcoal);
}
.fl-page .fl-gf .gform_wrapper .gform_validation_errors :is(ol, ul) { margin: 8px 0 0; padding-left: 20px; }
.fl-page .fl-gf .gform_wrapper .gform_validation_errors li { list-style: disc; }
.fl-page .fl-gf .gform_wrapper :is(.gfield_validation_message, .validation_message) {
margin: 6px 0 0; padding: 0; background: none; border: 0;
/* Текст помилки — Charcoal: Deep Sage на Ivory = 4,07:1 < 4,5:1 (1.4.3), а стан поля
лишається позначеним рамкою Deep Sage (нетекстова ознака, 1.4.11). */
font-size: 14px; line-height: 1.35; color: var(--fl-charcoal); font-weight: var(--fl-w-medium);
}
.fl-page .fl-gf .gform_wrapper .gfield_error .gfield_label { color: var(--fl-charcoal); }
.fl-page .fl-gf .gform_wrapper .gfield_error :is(input, select, textarea) { border-color: var(--fl-deep-sage); }
.fl-page .fl-gf :is(.gform_confirmation_message, .gform_confirmation_wrapper) {
margin: 0; padding: 20px 22px;
background: var(--fl-cream); border: 1px solid var(--fl-greige-50); border-radius: var(--fl-radius);
font-size: 19px; line-height: 1.5; color: var(--fl-charcoal);
}
/* Службові вузли GF — не показуємо і не ламаємо */
.fl-gf .gform_hidden,
.fl-gf .gfield--type-honeypot,
.fl-gf .gform_validation_container { display: none !important; }
.fl-gf .screen-reader-text {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ==========================================================================
5. БЛОГ, ПОСТ, АРХІВИ
========================================================================== */
.fl-posts { display: grid; gap: 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .fl-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1024px) { .fl-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; } }
/* align-content: start — ОБОВ'ЯЗКОВО: .fl-posts розтягує картки на висоту найвищої в ряді,
а типовий align-content: stretch розділив би зайву висоту МІЖ рядками картки (медіа + тіло).
Фото не тягнеться (aspect-ratio 3/2), тож уся надлишкова висота йшла в зазор і дата/назва/
уривок нижчих карток з'їжджали вниз на половину різниці (заміряно до 27px при gap 16px).
Так само зроблено в .fl-reviews__item, .fl-card, .fl-product__summary, .fl-cart__body. */
.fl-post-card { display: grid; gap: 16px; align-content: start; list-style: none; margin: 0; }
.fl-post-card__media {
display: block; overflow: hidden; background: var(--fl-cream); aspect-ratio: 3 / 2;
}
.fl-post-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--fl-ease); }
.fl-post-card:hover .fl-post-card__img { transform: scale(1.03); }
.fl-post-card__body { display: grid; gap: 8px; }
.fl-post-card__title { margin: 0; font-size: 22px; line-height: 1.22; font-weight: var(--fl-w-medium); }
.fl-post-card__title a { border-bottom: 1px solid transparent; transition: border-color var(--fl-dur) var(--fl-ease); }
.fl-post-card:hover .fl-post-card__title a { border-color: var(--fl-greige); }
.fl-post-card__excerpt { margin: 0; font-size: 17px; line-height: 1.55; color: var(--fl-charcoal-70); }
.fl-post-card__more { justify-self: start; margin-top: 2px; }
.fl-post__date { display: block; color: var(--fl-charcoal-70); }
/* Стаття */
.fl-post .fl-post__date { margin-bottom: 20px; }
.fl-post__media { margin: 0 0 32px; max-width: 760px; background: var(--fl-cream); }
.fl-post__img { width: 100%; height: auto; display: block; }
/* ==========================================================================
6. ВІДГУКИ (page-reviews.php) — сітка, без зірок і owl (рішення п.25)
========================================================================== */
.fl-reviews__grid { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .fl-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1280px) { .fl-reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fl-reviews__item {
display: grid; gap: 14px; align-content: start; list-style: none; margin: 0;
padding: 24px; background: var(--fl-cream); border: 1px solid var(--fl-greige-50);
border-radius: var(--fl-radius);
}
.fl-reviews__head { display: flex; align-items: center; gap: 14px; }
.fl-reviews__avatar {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--fl-ivory); border: 1px solid var(--fl-greige);
font-size: 16px; font-weight: var(--fl-w-medium); letter-spacing: 0.5px; color: var(--fl-charcoal-70);
}
.fl-reviews__who { display: grid; gap: 2px; min-width: 0; }
.fl-reviews__author { margin: 0; font-size: 19px; font-weight: var(--fl-w-medium); line-height: 1.2; }
.fl-reviews__date { color: var(--fl-charcoal-70); }
.fl-reviews__text { font-size: 17px; line-height: 1.6; }
.fl-reviews__text p { margin: 0 0 10px; }
.fl-reviews__text p:last-child { margin-bottom: 0; }
.fl-reviews__product { justify-self: start; font-size: 15px; }
/* ==========================================================================
7. ПОДАРУНКИ (page-gift.php) — сітка карток, коли заповнений репітер gifts_list
========================================================================== */
.fl-gifts-page__grid { display: grid; gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .fl-gifts-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fl-gifts-page__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
/* align-content: start — та сама схема, що в .fl-post-card (фото 1:1 + текст різної
довжини): без нього зазор «розповзається», щойно репітер gifts_list буде заповнено. */
.fl-gifts-page__item { display: grid; gap: 12px; align-content: start; list-style: none; margin: 0; }
.fl-gifts-page__img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--fl-cream); }
.fl-gifts-page__text { margin: 0; font-size: 18px; line-height: 1.35; }
/* ==========================================================================
8. АКАУНТ (woocommerce/myaccount/*, page-my-account.php)
========================================================================== */
.fl-account__body { display: block; }
.fl-account__body .woocommerce { display: block; }
.fl-account__hint { margin: 0 0 24px; font-size: 17px; color: var(--fl-charcoal-70); max-width: 60ch; }
.fl-account__subtitle { margin: 32px 0 14px; }
/* --- Вхід / реєстрація (гість) ------------------------------------------- */
.fl-account__auth { display: grid; gap: 40px; max-width: 900px; }
@media (min-width: 768px) {
.fl-account__auth { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
}
.fl-account__auth-col { min-width: 0; }
@media (min-width: 768px) {
.fl-account__auth-col--register { padding-left: 40px; border-left: 1px solid var(--fl-greige-50); }
}
.fl-account__auth-title { margin: 0 0 20px; }
/* --- Форми акаунта ------------------------------------------------------- */
.fl-form { display: grid; gap: 20px; margin: 0; }
.fl-form--narrow { max-width: 480px; }
.fl-form__grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .fl-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fl-form__fields { display: grid; gap: 20px; }
.fl-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 0; }
.fl-form__row--submit { margin-top: 4px; }
.fl-form__hint { margin: 0; font-size: 17px; line-height: 1.5; color: var(--fl-charcoal-70); max-width: 60ch; }
.fl-form__fieldset { margin: 12px 0 0; padding: 22px 0 0; border: 0; border-top: 1px solid var(--fl-greige-50); display: grid; gap: 20px; }
.fl-form__legend { padding: 0; margin: 0 0 4px; color: var(--fl-charcoal-70); float: left; width: 100%; }
.fl-form .clear { clear: both; }
.fl-form .description {
display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--fl-charcoal-70);
}
/* Поля акаунта: ті самі, що на checkout (.fl-input у woo.css), плюс страхування
на WC-класи — для форм, яких ми не копіювали, і для плагінів. */
.fl-account__body :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="date"], select, textarea) {
width: 100%; min-height: 52px; padding: 0 16px;
font-family: var(--fl-font-main); font-size: 18px; font-weight: var(--fl-w-light);
letter-spacing: var(--fl-body-ls); color: var(--fl-charcoal);
background: var(--fl-cream); border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
outline: none; box-shadow: none;
transition: border-color var(--fl-dur) var(--fl-ease);
}
.fl-account__body textarea { min-height: 120px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.fl-account__body :is(input, select, textarea):focus { border-color: var(--fl-deep-sage); }
.fl-account__body :is(input, select, textarea):focus-visible { outline: 2px solid var(--fl-focus); outline-offset: 2px; }
.fl-account__body :is(input[type="checkbox"], input[type="radio"]) {
appearance: none; -webkit-appearance: none;
position: relative; flex: 0 0 auto;
width: 20px; min-width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0;
background: var(--fl-ivory); border: 1px solid var(--fl-greige); border-radius: var(--fl-radius);
cursor: pointer; vertical-align: middle;
}
.fl-account__body input[type="radio"] { border-radius: 50%; }
.fl-account__body :is(input[type="checkbox"], input[type="radio"])::before {
content: ""; position: absolute; inset: 3px; background: var(--fl-deep-sage); border-radius: 1px;
transform: scale(0); transition: transform var(--fl-dur) var(--fl-ease);
}
.fl-account__body input[type="radio"]::before { border-radius: 50%; }
.fl-account__body :is(input[type="checkbox"], input[type="radio"]):checked { border-color: var(--fl-deep-sage); }
.fl-account__body :is(input[type="checkbox"], input[type="radio"]):checked::before { transform: scale(1); }
/* Лейбли WC-форм, які ми не перебирали вручну */
.fl-account__body .woocommerce-form-row > label,
.fl-account__body .form-row > label {
display: block; margin: 0 0 8px;
font-size: var(--fl-label-size); line-height: var(--fl-label-lh); letter-spacing: var(--fl-label-ls);
text-transform: uppercase; font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
}
.fl-account__body .required { color: var(--fl-charcoal); text-decoration: none; }
.fl-account__body .fl-check > label,
.fl-account__body label.fl-check,
.fl-account__body label.woocommerce-form__label-for-checkbox {
display: inline-flex; align-items: center; gap: 10px; margin: 0;
font-size: 17px; line-height: 1.35; font-weight: var(--fl-w-light);
text-transform: none; letter-spacing: var(--fl-body-ls); cursor: pointer;
}
/* --- Навігація акаунта ---------------------------------------------------
DOM шорткоду: .fl-account__body > div.woocommerce > (nav.woocommerce-MyAccount-navigation
+ div.woocommerce-MyAccount-content). Сітку ставимо на div.woocommerce, бо сповіщення WC
(.woocommerce-notices-wrapper) друкуються всередині .woocommerce-MyAccount-content. */
.fl-account--user .fl-account__body > .woocommerce { display: grid; gap: 32px; }
@media (min-width: 1024px) {
.fl-account--user .fl-account__body > .woocommerce {
grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start;
}
}
.fl-account__nav { min-width: 0; }
.fl-account__nav-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fl-account__nav-item { list-style: none; margin: 0; border-bottom: 1px solid var(--fl-greige-50); }
.fl-account__nav-item:first-child { border-top: 1px solid var(--fl-greige-50); }
.fl-account__nav-link {
display: block; padding: 14px 0;
font-size: var(--fl-label-size); line-height: var(--fl-label-lh); letter-spacing: var(--fl-label-ls);
text-transform: uppercase; font-weight: var(--fl-w-medium); color: var(--fl-charcoal);
transition: color var(--fl-dur) var(--fl-ease);
}
/* Текст пунктів меню акаунта — Charcoal (1.4.3). Hover — підкреслення, поточний пункт —
вага Medium + лінія Deep Sage (нетекстова ознака, 1.4.11). */
.fl-account__nav-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fl-account__nav-item.is-active > .fl-account__nav-link,
.fl-account__nav-link[aria-current="page"] { color: var(--fl-charcoal); box-shadow: inset 2px 0 0 var(--fl-deep-sage); padding-left: 10px; }
.fl-account__body .woocommerce-MyAccount-content { min-width: 0; }
.fl-account__body .woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.fl-account__body .woocommerce-MyAccount-content p { margin: 0 0 14px; font-size: 18px; line-height: 1.6; }
.fl-account__body .woocommerce-MyAccount-content p:last-child { margin-bottom: 0; }
.fl-account__body .woocommerce-MyAccount-content a:not(.fl-btn) {
color: var(--fl-charcoal); text-decoration: underline; text-underline-offset: 3px;
}
/* --- Таблиці акаунта (замовлення, способи оплати) ------------------------ */
.fl-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 17px; }
.fl-table thead th {
padding: 0 12px 10px 0; border-bottom: 1px solid var(--fl-greige);
color: var(--fl-charcoal-70); font-weight: var(--fl-w-medium); text-align: left;
}
.fl-table tbody td, .fl-table tbody th {
padding: 16px 12px 16px 0; border-bottom: 1px solid var(--fl-greige-50);
text-align: left; vertical-align: middle; font-weight: var(--fl-w-light);
}
.fl-table tbody th { font-weight: var(--fl-w-medium); }
.fl-orders__number { font-weight: var(--fl-w-medium); border-bottom: 1px solid var(--fl-greige); }
.fl-orders__number:hover { color: var(--fl-charcoal); border-color: var(--fl-charcoal); }
.fl-orders__status { white-space: nowrap; }
.fl-orders .woocommerce-orders-table__cell-order-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-orders__pagination { display: flex; gap: 12px; margin-top: 28px; }
/* Mobile: таблиця замовлень — карточками через data-title (розмітка WC shop_table_responsive) */
@media (max-width: 767px) {
.fl-table, .fl-table thead, .fl-table tbody, .fl-table tr, .fl-table th, .fl-table td { display: block; }
.fl-table thead { display: none; }
.fl-table tbody tr {
padding: 18px 0; border-bottom: 1px solid var(--fl-greige-50);
}
/* justify-content: flex-end + margin-right: auto на підписі, а НЕ space-between:
у комірці «Загалом» два текстові вузли («12 000 ₴» і «за 1 позицію»), і space-between
розкидав би їх по різних краях. */
.fl-table tbody :is(th, td) {
padding: 4px 0; border: 0;
display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: flex-end; align-items: baseline;
text-align: right;
}
.fl-table tbody :is(th, td)::before {
content: attr(data-title); margin-right: auto; text-align: left;
font-size: var(--fl-label-size); letter-spacing: var(--fl-label-ls); text-transform: uppercase;
font-weight: var(--fl-w-medium); color: var(--fl-charcoal-70);
}
.fl-table tbody :is(th, td):empty { display: none; }
.fl-orders .woocommerce-orders-table__cell-order-actions { justify-content: flex-start; margin-top: 8px; }
.fl-orders .woocommerce-orders-table__cell-order-actions::before { width: 100%; }
}
/* --- Адреси -------------------------------------------------------------- */
.fl-account__addresses { display: grid; gap: 32px; }
@media (min-width: 768px) { .fl-account__addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
.fl-account__address { min-width: 0; }
.fl-account__address-head { display: grid; gap: 12px; justify-items: start; margin: 0 0 12px; }
.fl-account__address-title { margin: 0; }
.fl-account__address-text { font-style: normal; font-size: 18px; line-height: 1.6; color: var(--fl-charcoal); }
.fl-account__address-kind { margin: 0 0 18px; color: var(--fl-charcoal-70); }
.fl-account__address-form { max-width: 560px; }
/* --- Замовлення: статус і нотатки --------------------------------------- */
.fl-account__order-status { margin: 0 0 8px; font-size: 19px; line-height: 1.5; }
.fl-account__order-status mark { background: none; color: var(--fl-charcoal); font-weight: var(--fl-w-medium); }
.fl-account__notes { display: grid; gap: 18px; margin: 0 0 32px; padding: 0; list-style: none; }
.fl-account__note {
list-style: none; margin: 0; padding: 18px 20px;
background: var(--fl-cream); border: 1px solid var(--fl-greige-50); border-radius: var(--fl-radius);
}
.fl-account__note .meta { margin: 0 0 8px; color: var(--fl-charcoal-70); }
.fl-account__note .description p { margin: 0 0 8px; font-size: 17px; }
.fl-account__note .description p:last-child { margin-bottom: 0; }
/* Сповіщення WC на сторінці акаунта — стилі з woo.css (.woocommerce-notices-wrapper) */
.fl-account .woocommerce-notices-wrapper:empty { display: none; }
.fl-account .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
margin: 0 0 24px; padding: 14px 16px; list-style: none;
background: var(--fl-cream); border: 1px solid var(--fl-greige-50); border-radius: var(--fl-radius);
color: var(--fl-charcoal); font-size: 17px; line-height: 1.45;
display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
}
.fl-account .woocommerce-notices-wrapper .woocommerce-error { border-color: var(--fl-deep-sage); }
.fl-account .woocommerce-notices-wrapper li { list-style: none; }
.fl-account .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { content: none; }
/* ==========================================================================
9. СТРАХУВАННЯ ПІСЛЯ DEQUEUE monoflowers-style (етап 8)
Батьківські шаблони більше не використовуються ніде на фронтенді, але кілька
вузлів можуть прийти від плагінів або з батьківського page-hidden-admin.php
(приватна сторінка документації для адміна). Лишаємо мінімальну базу, щоб вони
не «розсипалися», і глушимо декор старого дизайну.
========================================================================== */
/* Старі секції-обгортки батька: дати їм хоч контейнер і відступи */
.fl-clean :is(.single-page__wrapper, .contact, .gift, .review, .blog, .article, .my-account, .pagination) > .container,
.fl-clean .breadcrumb > .container {
width: 100%; max-width: var(--fl-container); margin-inline: auto; padding-inline: var(--fl-page-x);
}
.fl-clean :is(.single-page__wrapper, .contact, .gift, .review, .blog, .article, .my-account) { padding-block: 32px; }
/* Старий блок карти батька (з the_custom_logo()) не виводиться: template-parts/map.php
перевизначено. Якщо якийсь плагін усе ж викличе батьківський парт — не показуємо старий
вигляд на всю ширину. */
.fl-clean .map__info { display: none; }