/* Контент-примітиви content-blocks.php (Ф5, S5.1): FAQ / переваги (tapki_features) / картка / порівняння
   + inline-іконка [tapki_ico]. Єдиний заказчик — шорткоди content-blocks.php.
   Стилі решти модулів винесено у власні файли (se1 D7, «один заказчик — один файл»):
   чипси→catalog-chips.css, контент каталогу→catalog-content.css, картка товару+Хіт→product-card.css,
   ТТХ→product-specs.css, попап зразка→inline у sample-popup.php.
   Mobile-first ≤549px (MEMORY). Кольори — бренд-токени з fallback на зелений #23856D. */

/* ── FAQ (акордеон) ── */
.tapki-faq { margin: 24px 0; }
.tapki-faq__item {
  border: 1px solid var(--tapki-green-100);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20,45,32,.04), 0 6px 18px rgba(45,168,112,.06); /* глибина (Ф13/R2) */
}
.tapki-faq__q {
  cursor: pointer;
  padding: 14px 44px 14px 16px;
  font-weight: 600;
  font-size: 15.5px;
  position: relative;
  list-style: none;
  color: var(--tapki-ink);
}
.tapki-faq__q::-webkit-details-marker { display: none; }
.tapki-faq__q::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: var(--tapki-green-tx,#2e7564);
  transition: transform .2s;
}
.tapki-faq__item[open] .tapki-faq__q::after { content: "\2212"; } /* − */
.tapki-faq__a {
  padding: 0 16px 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tapki-ink2);
}
.tapki-faq__a > div > :first-child { margin-top: 0; }
.tapki-faq__a > div > :last-child { margin-bottom: 0; }
.tapki-faq__q:hover { background: var(--tapki-green-50,#f1f9f7); }
.tapki-faq__item[open] .tapki-faq__q { background: var(--tapki-green-50,#f1f9f7); } /* відкрите питання — легкий зелений фон */

/* ── Бренд-іконка inline у тексті (Ф13/D3, [tapki_ico]) ── */
.tapki-ico{ display:inline-flex; align-items:center; justify-content:center; color:var(--tapki-green-600,#2e7564); vertical-align:-0.15em; }
.tapki-feature__icon .tapki-svg{ display:block; }

/* ── Переваги (grid) ── */
.tapki-features { display: grid; gap: 18px; margin: 24px 0; }
.tapki-features--2 { grid-template-columns: repeat(2, 1fr); }
.tapki-features--3 { grid-template-columns: repeat(3, 1fr); }
.tapki-features--4 { grid-template-columns: repeat(4, 1fr); }
.tapki-feature {
  padding: 22px;
  border: 1px solid var(--tapki-green-100);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  /* глибина — у спільному правилі нижче, не тут */
}
.tapki-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--tapki-green-100); /* коло-підложка іконки */
  font-size: 26px;
  color: var(--tapki-green-600);
  margin-bottom: 12px;
}
.tapki-feature--link { display: block; text-decoration: none; color: inherit; }
.tapki-feature--link:hover { transform: translateY(-4px); border-color: var(--tapki-green-300); }
.tapki-feature__title { font-size: 16px; margin: 0 0 6px; font-weight: 600; }
.tapki-feature__text { font-size: 14px; line-height: 1.55; color: var(--tapki-ink2); }

/* ── Універсальна контент-картка (напр. картки методів на стор.179): біла з глибиною, токени бренду ── */
.tapki-card {
  background: #fff;
  border: 1px solid var(--tapki-green-100);
  border-radius: 14px;
  padding: 26px;
  height: 100%;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  /* глибина — у спільному правилі нижче */
}
.tapki-card:hover { transform: translateY(-4px); border-color: var(--tapki-green-300); }

/* ── Глибина контентної картки — ОДНЕ значення на обидва примітиви ──────────────────────
   Клієнт (21.08.2026) попросив «зробити тіні» на трьох картках головної, посилаючись на
   розділ «Блог». Замір показав, що там ТА САМА тінь: обидва місця — один шорткод
   [tapki_features]. Розходилось не значення, а читабельність: на головній три колонки,
   у блозі дві, і те саме розмиття на вужчій картці читається як бруд біля краю, а не як
   глибина. Тобто просьба була не «як у блозі», а «сильніше».

   Значення взяте НЕ з голови: це рівень, який у темі вже був у .tapki-card (картки методів
   на «Доставка та оплата»). Тепер воно одне на обидва примітиви — раніше два майже однакових
   літерали жили в різних правилах одного файла й тихо розходились.

   ⚠ Сильніший варіант (зелений на .18 у спокої) відхилено свідомо: зелений ореол — рівно те,
   що вже забракували на ховері картки товару, «зелень виглядала як рамка більша за фото»
   (tapki-theme.css). Глибина не має ставати підсвіткою.

   ⚠ .tapki-faq__item лишається слабшою навмисно: це стос рядків-акордеона, а не картка.
   Сильна тінь на стосі читається як бруд між рядками. Інша роль — інше значення. */
.tapki-feature,
.tapki-card { box-shadow: 0 2px 6px rgba(20,45,32,.06), 0 16px 40px rgba(45,168,112,.12); }

.tapki-feature--link:hover,
.tapki-card:hover { box-shadow: 0 4px 10px rgba(20,45,32,.09), 0 24px 50px rgba(45,168,112,.18); }
.tapki-card > :first-child { margin-top: 0; }
.tapki-card > :last-child { margin-bottom: 0; }

/* ── Порівняння (таблиця, горизонтальний скрол на вузьких) ── */
.tapki-compare__wrap { overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; }
.tapki-compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.tapki-compare th,
.tapki-compare td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--tapki-border); }
.tapki-compare th {
  background: var(--tapki-green-bg,#f1f9f7);
  font-weight: 600;
  color: var(--tapki-green-tx);
  white-space: nowrap;
}
.tapki-compare tbody tr:hover { background: #fafafa; }
/* На телефоні min-width:480px і був причиною зрізаної четвертої колонки: контейнер там 360px,
   тому таблиця або вилазила, або ховалась у горизонтальну прокрутку, якої ніхто не помічав.
   Знімаємо мінімум, розкладаємо колонки порівну й дозволяємо переносити слова.
   white-space:normal обовʼязково: у шапки стоїть nowrap, через нього «Тип використання»
   тримав 138px замість 90 і таблиця не вміщалась навіть із fixed-розкладкою (заміряно).
   Блок стоїть ПІСЛЯ базових правил — інакше nowrap із наступного правила перебивав його. */
@media (max-width: 549px) {
  .tapki-compare { min-width: 0; table-layout: fixed; font-size: 12px; }
  /* overflow-wrap, а не hyphens: авто-переноси українською браузер робить грубо —
     «ПРИЗНАЧЕ-ННЯ» рвалось посеред слова (видно на скріншоті першої спроби). */
  .tapki-compare th,
  .tapki-compare td { padding: 7px 5px; overflow-wrap: break-word; white-space: normal; }
  /* Колонки не порівну: довгі слова шапки («Призначення», «використання») при рівних 90px
     рвались посеред слова. Останній колонці дано більше — у статті там «Тип використання»,
     а слово «використання» саме по собі 79px і не влазило в 63-78px (заміряно на 360/390/430). */
  .tapki-compare th:nth-child(1), .tapki-compare td:nth-child(1) { width: 19%; }
  .tapki-compare th:nth-child(2), .tapki-compare td:nth-child(2) { width: 21%; }
  .tapki-compare th:nth-child(3), .tapki-compare td:nth-child(3) { width: 31%; }
  .tapki-compare th:nth-child(4), .tapki-compare td:nth-child(4) { width: 29%; }
  .tapki-compare th { font-size: 11px; letter-spacing: 0; }
}


/* ── Mobile ≤549px ── */
@media (max-width: 549px) {
  .tapki-features--2,
  .tapki-features--3,
  .tapki-features--4 { grid-template-columns: 1fr; }
  .tapki-faq__q { font-size: 14.5px; padding: 12px 40px 12px 14px; }

  /* ── Компактніші картки переваг на телефоні (23.08, прохання власника) ──
     Заміряно на iPhone 390: блок із трьох карток займав 585 px — майже три чверті екрана,
     і це при тому, що на телефоні вони йдуть однією колонкою одна під одною. Читач гортає
     три майже однакові прямокутники поспіль.
     Ріжемо ПОРОЖНЄ МІСЦЕ, не зміст: відступи, розмір іконки й проміжок сітки. Жодне слово
     тексту не зникає — саме тому це безпечно робити без погодження формулювань. */
  .tapki-features { gap: 12px; margin: 18px 0; }
  .tapki-feature { padding: 16px; }
  .tapki-feature__icon { width: 40px; height: 40px; font-size: 21px; margin-bottom: 8px; border-radius: 10px; }
  .tapki-feature__title { margin-bottom: 4px; }
}


/* ── Симетрія карток у рядку (23.08, прохання власника) ──
   Заміряно на сторінці «Нанесення логотипу»: «Вишивка» 293 px, «Шовкографія» 269 —
   різниця в 24 px від одного зайвого рядка в абзаці. Рядок .row уже flex, тож КОЛОНКИ
   рівні (обидві 323), а от .col-inner всередині лишався заввишки по вмісту — і картка
   всередині теж.

   ⚠ Правило написане по ІСНУЮЧИХ класах (.col-inner, .tapki-card), а не по новому
   класу-обгортці. Причина заміряна сьогодні ж на ступенях цін: RUCSS вирізає з бойового
   used-css правила по НОВИХ класах, і вирівнювання просто не доїхало б до продакшну.
   Ці два класи вже присутні в used-css, бо застосовуються по всьому сайту.

   Звужено до .row: поза рядком (наприклад картка на всю ширину) розтягувати нема від чого. */
/* ⚠ Перша спроба (height:100%) НЕ спрацювала, і це показав замір: правило доїхало
   (ruleReached:true), а висота лишилась 293 при колонці 323. Причина — відсоток рахується
   від висоти батька, а в .col вона auto: flex розтягує колонку візуально, але обчисленої
   висоти не дає. Тому розтягуємо ланцюжком flex, а не відсотком. */
/* ⚠ ДРУГЕ виправлення, теж від заміру. Правило спершу застосовувалось до ВСІХ колонок сайту —
   і мовчки зсунуло кнопку «До кошика» на картці товару з 801 на 836 px (короткий опис почав
   переноситись інакше). Перша перевірка регресії цього не побачила: я міряв переповнення й
   схлопнуті колонки, а не ВИСОТИ елементів. Прилад дивився не на те.
   Тепер :has() звужує дію до колонок, у яких справді є наша картка. */
.row > .col:has(.tapki-card) { display: flex; flex-direction: column; }
.row > .col:has(.tapki-card) > .col-inner { flex: 1 1 auto; }
.row > .col > .col-inner > .tapki-card { height: 100%; box-sizing: border-box; }

/* ── Закріплена шапка: суцільний фон (23.08, прохання власника) ──
   Заміряно computed-стилями під час прокрутки: .header-bg-color має rgba(255,255,255,0.9) —
   ті самі 10% прозорості, крізь які просвічує текст сторінки. У незакріпленому стані це
   задумано (шапка лягає на банер), тому чіпаємо ТІЛЬКИ .stuck: мінімальне втручання, яке
   лікує рівно названу проблему й не міняє вигляд першого екрана.

   ⚠ Правило по ІСНУЮЧИХ класах Flatsome (.header-wrapper, .stuck, .header-bg-color).
   Новий клас RUCSS вирізав би з бойового used-css — сьогодні це вже коштувало двох
   переробок (стрілка ступенів, симетрія карток). */
.header-wrapper.stuck .header-bg-color { background-color: #fff !important; }
.header-wrapper.stuck { box-shadow: 0 2px 10px rgba(17, 24, 39, .08); }

/* ── Типографіка сторінки «Доставка та оплата» (23.08, прохання власника) ──
   Заміряно до правки: h1 26px / h2 24.5px, обидва вагою 400 — заголовки майже не
   відрізнялись ні один від одного, ні від тексту. Сторінка читалась пласко.

   НОВОГО ШРИФТУ НЕ ДОДАЄМО. Montserrat уже підвантажується з вагами 600 і 700
   (див. посилання Google Fonts у <head>), тож виразність беремо з уже оплаченого:
   вага, розмір, щільність міжлітерника. Ще один файл шрифту коштував би ваги
   сторінки й нічого б не додав.

   ⚠ Прив'язка до .page-id-204 навмисна: це оформлення однієї сторінки, а не сайту.
   Клас генерує WordPress, він існує в розмітці — RUCSS такий селектор лишає (на
   відміну від наших нових класів, які він вирізає). Крихкість прив'язки до ID
   прикрита тестом: він звіряє, що 204 — це справді «Доставка та оплата». */
.page-id-204 h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.page-id-204 h2 {
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
/* Вступний абзац — крупніший і світліший за основний текст: дає сторінці «вхід». */
.page-id-204 .section:nth-of-type(2) p { font-size: 1.15em; line-height: 1.65; color: var(--tapki-ink2, #4b5563); }
/* Заголовки карток — важчі за текст, щоб ряд читався переліком, а не суцільним полотном. */
.page-id-204 .tapki-feature__title { font-weight: 700; letter-spacing: -0.01em; }

/* ── Вертикальний ритм ──
   Власник: «дуже велика відстань». Заміряно: у кожної секції padding 52px зверху й знизу,
   тобто між сусідніми блоками 104px порожнечі. Для сторінки з вісьмома розділами це
   розтягує читання на зайвий екран. Ріжемо до 36px — це 72px між блоками, все ще
   вільно, але без провалів. Порожнє місце, не зміст. */
.page-id-204 .section { padding-top: 36px !important; padding-bottom: 36px !important; }
.page-id-204 .section:first-of-type { padding-top: 0 !important; padding-bottom: 0 !important; }
@media (max-width: 549px) {
  .page-id-204 .section { padding-top: 26px !important; padding-bottom: 26px !important; }
}
/* ── Типографіка й ритм сторінки «Договір публічної оферти» (24.08, прохання власника) ──
   Прив'язка до .page-id-209 навмисна — оформлення однієї сторінки, а не сайту. Клас генерує
   WordPress, він є в розмітці, тому RUCSS такий селектор лишає (на відміну від наших нових
   класів, які він вирізає). Крихкість прив'язки до ID прикрита тестом: він звіряє, що 209 —
   це справді «Договір публічної оферти».

   ⚠ Новий CSS тут МІНІМАЛЬНИЙ, і це свідомо. Уся типографіка тексту вже є в
   content-typography.css за скоупом .tapki-content, тож сторінка обгорнута ним — заголовки,
   абзаци, списки, таблиця реквізитів і довжина рядка 68ch приходять звідти без жодного
   нового правила. Тут лишається рівно те, що поза .tapki-content: h1 у вступі й ритм секцій.

   ⚠ Друга сторінка з page-id-блоком у цьому файлі (перша — 204). Якщо з'явиться третя —
   ці блоки пора виносити в окремий файл page-typography.css: у header'а цього файла
   заказчик інший (шорткоди content-blocks.php), і розходження вже помітне. */
.page-id-209 h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* Вертикальний ритм — те саме значення, що на 204: 36px дає 72px між блоками.
   Документ на вісімнадцять розділів і без того довгий, зайва порожнеча розтягує його
   ще на екран. Перша секція без верхнього поля — заголовок починає сторінку. */
.page-id-209 .section { padding-top: 36px !important; padding-bottom: 36px !important; }
.page-id-209 .section:first-of-type { padding-top: 0 !important; }
@media (max-width: 549px) {
  .page-id-209 .section { padding-top: 26px !important; padding-bottom: 26px !important; }
}
/* Переходи зі «Змісту»: без цього закріплена шапка накриває заголовок розділу, і читач
   потрапляє на середину попереднього пункту. 90px — висота шапки в закріпленому стані. */
.page-id-209 .tapki-content h2[id] { scroll-margin-top: 90px; }