/* LOOLA — інформаційні сторінки §22.
   Джерело: theme/demo/info-page.html (збирається з wp/setup/proto/info-extra.css).
   Правки вносити в прототип і переносити сюди, а не навпаки. */

/* §22 · ІНФОРМАЦІЙНІ СТОРІНКИ
   Стилі поверх бази з header-footer.html. Токени, кнопки, типографіка
   й підвал звідти ж — тут тільки те, чого в базі немає. */

.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--pad-page) }
.crumbs{ padding:var(--s-3) 0; font-size:13px; color:var(--muted) }
.crumbs a{ color:var(--muted) } .crumbs a:hover{ color:var(--ink) }
.crumbs span{ padding:0 var(--s-2) }

.screen{ padding-bottom:var(--s-9) }
.screen + .screen{ margin-top:var(--s-9); padding-top:var(--s-8);
  border-top:var(--hairline) solid var(--line) }
.screen-h{ margin-bottom:var(--s-6) }

/* Відступ до підвалу дає обгортка, а не екран: у темі всередині .wrap
   лежить одна сторінка, а не чотири екрани демо. Значення те саме, що
   під пагінацією каталогу — впритул читається як обрив сторінки. */
main.wrap{ padding-bottom:var(--s-8) }
.screen:last-child{ padding-bottom:0 }

/* ── Дві колонки: розділи ліворуч, текст праворуч ─────────────
   Той самий лад, що в кабінеті §21: перелік вузькою колонкою,
   вміст широкою. Око вже знає цей ритм, і довідка не читається
   як інший сайт.

   Уся сторінка довідки — одна колонка по центру, під логотипом
   (22.09.2026). Раніше перелік і текст тулилися до лівого краю
   контейнера 1440, а праворуч лишалася третина порожнього екрана —
   сторінка читалася зсунутою. Ширина обгортки — рівно перелік,
   проміжок і міра тексту, тож крихти й заголовок стоять над
   переліком, а не деінде.                                     */
:root{ --info-nav:220px; --info-measure:580px }
main.info-page{ max-width:calc(var(--info-nav) + var(--s-7) + var(--info-measure) + 2 * var(--pad-page)) }
.info{ display:grid; grid-template-columns:var(--info-nav) minmax(0,1fr); gap:var(--s-7); align-items:start }
/* Сторінка поза довідкою — без переліку: колонка з одним пунктом
   не орієнтир, а порожнє місце. */
.info-solo{ grid-template-columns:minmax(0,1fr) }

/* Перелік липне: у довгому документі людина не має гортати вгору,
   щоб перейти до сусіднього розділу. */
.info-nav{ display:grid; gap:var(--s-1) }
.info-nav a{ display:flex; align-items:center; min-height:44px; padding:0 var(--s-3);
  margin-inline:calc(-1 * var(--s-3)); border-radius:var(--r-sm);
  font-size:15px; color:var(--body);
  transition:background-color var(--t-color) var(--ease-soft), color var(--t-color) var(--ease-soft) }
.info-nav a:hover{ background:var(--wash); color:var(--ink) }
.info-nav a[aria-current]{ color:var(--ink); margin-left:calc(-1 * var(--s-3)) }
/* Поточний розділ позначено рискою, а не заливкою: заливка на екрані
   одна, і це кнопка купівлі (§1). */
.info-nav a[aria-current]::before{ content:''; width:12px; height:var(--hairline);
  margin-right:var(--s-3); background:var(--ink) }
/* Правові документи стоять окремою групою: їх читають не так, як
   довідку, і в переліку вони мають бути видимо іншими.

   Лінія — між пунктами, а не на самому пункті (22.09.2026). Раніше
   лінія й відступ над нею належали посиланню «Публічна оферта», і
   підсвітка при наведенні захоплювала їх — виходив кривий прямокутник
   з лінією всередині. Колір — як у решти: групу видно по лінії,
   а один сірий пункт читався вимкненим. Лінія починається там, де
   текст пунктів, і закінчується по краю колонки. */
.info-nav .apart{ position:relative; margin-top:calc(2 * var(--s-4) + var(--hairline)) }
.info-nav .apart::after{ content:''; position:absolute; left:var(--s-3); right:var(--s-3);
  top:calc(-1 * var(--s-4) - var(--hairline)); height:var(--hairline); background:var(--line) }

/* ── Згортка «Розділи» (22.09.2026) ──────────────────────────────
   Перелік лежить у <details> (inc/info.php). На десктопі він відкритий
   завжди, а рядок «Розділи» схований — стовпчик ліворуч, як і був.
   На планшеті й телефоні — надзаголовок «Розділи» над назвою сторінки,
   перелік за дотиком (theme/demo/info-nav.html 3B + info-top.html A).
   Тихий підпис, а не рядок у рамці: той самий t-label, що «Про LOOLA»
   над заголовком сторінки бренду. Липне згортка, а не сам перелік:
   вона — комірка сітки .info. */
.info-pick{ position:sticky; top:calc(var(--hd-h) + var(--s-5)) }
.info-pick > summary{ display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px;
  cursor:pointer; list-style:none; color:var(--muted);
  transition:color var(--t-color) var(--ease-soft) }
.info-pick > summary:hover,.info-pick[open] > summary{ color:var(--ink) }
.info-pick > summary::-webkit-details-marker{ display:none }
.info-pick-chev{ flex:none; transition:transform var(--t-fast) var(--ease) }
.info-pick[open] .info-pick-chev{ transform:rotate(180deg) }
@media (min-width:1024px){
  .info-pick[open] > summary{ display:none }
}

/* ── Текст ────────────────────────────────────────────────────
   Ширина абзацу обмежена не сіткою, а мірою рядка: на 1440 текст
   без обмеження йшов би на 997px — це близько 127 знаків, майже
   вдвічі більше за читабельне.

   Одна міра на все — абзаци, списки, таблиці, зміст (22.09.2026).
   Раніше абзац тримав 58ch (~550px), а таблиці йшли на 780px і
   вилазили за текст на третину: правий край колонки був рваним.
   580px при 15px — ті самі ~70 знаків у рядку. Таблиці вміщаються:
   найширша, розмірна, — чотири короткі колонки.                 */
.info-body{ max-width:var(--info-measure) }
.info-body :where(p,li){ text-wrap:pretty }
.info-body :where(h2,h3){ text-wrap:balance }
.info-body > * + *{ margin-top:var(--s-4) }

.info-body h2{ font-family:var(--font-display); font-weight:500; font-size:16px;
  line-height:1.5; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  margin-top:var(--s-8) }
.info-body h2:first-child{ margin-top:0 }
.info-body h3{ font-family:var(--font-display); font-weight:500; font-size:13px;
  line-height:1.5; letter-spacing:.16em; text-transform:uppercase; color:var(--soft);
  margin-top:var(--s-6) }
.info-body p{ font-size:15px; line-height:1.7; color:var(--body) }
.info-body .lead{ font-size:17px; line-height:1.7; color:var(--soft) }
.info-body strong{ font-weight:500; color:var(--ink) }
.info-body a{ color:inherit; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-strong);
  transition:text-decoration-color var(--t-color) var(--ease-soft) }
.info-body a:hover{ color:var(--ink); text-decoration-color:var(--ink) }
/* Кнопка в тексті довідки. Правило посилань .info-body a (колір від
   батька, підкреслення) сильніше за .btn-buy — без цього напис на темній
   кнопці ставав темним. */
.info-body a.btn{ text-decoration:none }
.info-body a.btn-buy,.info-body a.btn-buy:hover{ color:var(--on-accent) }
.info-body a.btn-secondary{ color:var(--ink) }
.info-body a.btn-secondary:hover{ color:var(--canvas) }

/* Маркер — риска, а не крапка: та сама хайрлайнова мова, що й решта
   сайту (§6). Крапка в цій гарнітурі виглядає як бруд на екрані. */
.info-body ul,.info-body ol{ display:grid; gap:var(--s-2); padding:0; list-style:none }
.info-body li{ position:relative; padding-left:var(--s-5);
  font-size:15px; line-height:1.7; color:var(--body) }
.info-body ul > li::before{ content:''; position:absolute; left:0; top:.85em;
  width:10px; height:var(--hairline); background:var(--line-strong) }
/* Номер без крапки й без риски: крапка в цій гарнітурі читається як кома,
   а риска з двозначним номером не влазить у відступ і наїжджає на текст.
   Відступ на щабель більший за маркер списку — під «11» потрібне місце. */
.info-body ol{ counter-reset:i }
.info-body ol > li{ counter-increment:i; padding-left:var(--s-6) }
.info-body ol > li::before{ content:counter(i); position:absolute; left:0; top:0;
  font-size:13px; line-height:1.95; color:var(--muted); font-variant-numeric:tabular-nums }

/* Таблиця — в обгортці: прокрутка вбік, якщо колись не вміститься,
   живе на обгортці, а сама таблиця лишається таблицею на всю ширину.
   Раніше на телефоні таблиця ставала display:block і стискалася
   по вмісту — лінії рядків закінчувалися де прийдеться. */
.info-body .info-table{ margin-top:var(--s-5); overflow-x:auto }
.info-body table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
.info-body th,.info-body td{ padding:var(--s-3) var(--s-3) var(--s-3) 0; text-align:left;
  font-size:14px; line-height:1.5; color:var(--body);
  border-bottom:var(--hairline) solid var(--line) }
.info-body th{ font-family:var(--font-display); font-weight:500; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
/* Остання колонка — впритул до правого краю, як абзаци над нею */
.info-body :is(th,td):last-child{ padding-right:0 }
/* Значення не рвуться: «60–66 см» — одне значення, а не два рядки */
.info-body td + td{ white-space:nowrap }
/* Пари «що — скільки» (способи доставки): значення праворуч,
   як у таблиці доставки на картці товару */
.info-table.is-pairs :is(th,td):last-child{ text-align:right }
/* Назва способу — одним рядком: інакше на телефоні заголовок
   «Орієнтовний термін» забирав ширину, і «Нова пошта — відділення»
   ламалася навпіл, хоча місця на неї вистачає */
.info-table.is-pairs td:first-child{ white-space:nowrap }
/* Текстові колонки (способи оплати) переносяться як звичайний текст */
.info-table.is-stack td + td{ white-space:normal }
/* Назва способу оплати — одним рядком, переносяться пояснення поруч */
.info-table.is-stack td:first-child{ white-space:nowrap }

/* Дата останньої правки — для документів, які змінюються */
.info-date{ margin-top:var(--s-8); padding-top:var(--s-4);
  border-top:var(--hairline) solid var(--line); font-size:13px; color:var(--muted) }

/* ── Зміст довгого документа ──────────────────────────────────
   Оферта і політика — це чотирнадцять розділів. Без змісту людина
   не знайде потрібний, а згортати розділи не можна: юридичний текст
   мають бачити цілком і шукати в ньому пошуком браузера.       */
.info-toc{ padding:var(--s-5) var(--s-6); background:var(--wash); border-radius:var(--r-xs) }
.info-toc .t-label{ display:block; margin-bottom:var(--s-3); color:var(--soft) }
.info-toc ol{ gap:var(--s-1); max-width:none }
.info-toc li{ font-size:14px; line-height:1.6 }
.info-toc li::before{ line-height:1.75 }

/* ── Контакти ─────────────────────────────────────────────────
   Канал і значення рядками: людина шукає очима «телефон», а не
   читає абзац, у якому телефон десь усередині.                */
.info-contacts{ display:grid; gap:var(--s-4); max-width:none }
/* Відступ від ліда більший за звичайний абзацний: контакти — окремий блок */
.info-body .info-contacts{ margin-top:var(--s-6) }
.info-contacts > div{ display:grid; gap:var(--s-1); align-content:start; padding-bottom:var(--s-4);
  border-bottom:var(--hairline) solid var(--line) }
/* align-content:start — у дві колонки комірка тягнеться на висоту сусідньої
   (графік на три рядки), і без нього значення відʼїжджало від підпису */
.info-contacts dt{ font-family:var(--font-display); font-weight:500; font-size:11px;
  line-height:1.5; letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
.info-contacts dd{ font-size:17px; line-height:1.6; color:var(--ink) }
.info-contacts dd small{ display:block; margin-top:var(--s-1);
  font-size:13px; line-height:1.5; color:var(--muted) }
/* График: день и время столбиками, время выровнено — его сравнивают
   по вертикали. Тише, чем телефон и почта: это справка, а не действие. */
.info-contacts .info-hours{ display:grid; grid-template-columns:max-content max-content;
  gap:var(--s-1) var(--s-4); font-size:15px; color:var(--body); font-variant-numeric:tabular-nums }
/* Від планшета — дві колонки: пʼять каналів одним стовпчиком тягнулися
   на пів екрана. Адреса — на всю ширину, щоб не стояла сама в рядку. */
@media (min-width:740px){
  .info-contacts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5) var(--s-6) }
  .info-contacts > .wide{ grid-column:1 / -1 }
}

/* ── Клуб LOOLA ───────────────────────────────────────────────
   Рівні — той самий лад, що в клубі на головній (home.css .tiers):
   назва рівня великими, умова тихо, відсоток червоним — єдина кольорова
   пляма на сторінці (закон 2: червоний тільки для вигоди). Таблиця, а не
   список: заголовки колонок — частина тексту власника. На телефоні рядок
   стає карткою: назва й умова ліворуч, відсоток праворуч.

   Правило тільки в темі: у прототипі info-page.html екрана клубу немає. */
.club-join{ margin-top:var(--s-5) }
.info-body .club-tiers td{ padding:var(--s-5) var(--s-4) var(--s-5) 0; vertical-align:baseline }
.info-body .club-tiers td + td{ white-space:normal }
.info-body .club-tiers :is(th,td):last-child{ padding-right:0; text-align:right }
.club-tiers .tier-name{ font-family:var(--font-display); font-weight:500; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink); white-space:nowrap }
.club-tiers .tier-cond{ font-size:14px; line-height:1.5; color:var(--muted) }
.club-tiers .tier-off b{ display:block; font-family:var(--font-display); font-weight:300;
  font-size:28px; line-height:1; letter-spacing:.02em; color:var(--price-sale);
  font-variant-numeric:tabular-nums; white-space:nowrap }
/* Подпись под процентом — одной строкой: колонка скидки берёт её ширину,
   иначе «на наступні / замовлення» ломалось надвое */
.club-tiers .tier-off span{ display:block; margin-top:var(--s-2); font-size:13px; line-height:1.4; color:var(--muted); white-space:nowrap }
@media (max-width:739px){
  .club-tiers thead{ position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap }
  .club-tiers :is(table,tbody){ display:block }
  .club-tiers tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-1) var(--s-4);
    align-items:start; padding:var(--s-4) 0; border-bottom:var(--hairline) solid var(--line) }
  .club-tiers tr:first-child{ border-top:var(--hairline) solid var(--line) }
  .info-body .club-tiers td{ display:block; padding:0; border:0 }
  .club-tiers .tier-name,.club-tiers .tier-cond{ grid-column:1; text-align:left }
  .club-tiers .tier-off{ grid-column:2; grid-row:1 / span 2 }
}

/* ── Наші тканини ─────────────────────────────────────────────
   Розділ на лінію: рядок-обіцянка під заголовком, опис, паспорт
   тканини і перехід у каталог. Назва лінії — вхідна точка, тому
   нова модель з новим складом дописується своїм розділом.

   Правило тільки в темі: у прототипі info-page.html екрана
   з тканинами немає, вішати туди стилі без розмітки ні до чого. */
.fabric-say{ font-size:17px; line-height:1.6; color:var(--ink) }

/* Паспорт тканини. Не таблиця й не фіксована колонка: підписи
   різної довжини — від «Склад» до «Склад однотонних моделей», —
   тому колонка росте по найдовшому, і рядки лишаються вирівняними.
   Цифри моноширинні: склад читають стовпчиком, звіряючи відсотки. */
.fabric-spec{ display:grid; grid-template-columns:max-content minmax(0,1fr);
  gap:var(--s-3) var(--s-5); margin-top:var(--s-5); padding-top:var(--s-4);
  border-top:var(--hairline) solid var(--line) }
.fabric-spec dt{ font-family:var(--font-display); font-weight:500; font-size:11px;
  line-height:1.9; letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
.fabric-spec dd{ font-size:14px; line-height:1.9; color:var(--body);
  font-variant-numeric:tabular-nums }

/* Перехід у каталог — той самий, що на «Про LOOLA» (.go в about.css):
   підкреслюється лише слово, бо спільне підкреслення зі стрілкою
   рветься на gap і читається як дві рисочки. Стилі не спільні —
   about.css і info.css на одну сторінку разом не потрапляють. */
.fabric-go{ display:flex; flex-wrap:wrap; gap:0 var(--s-6);
  margin-top:var(--s-4); max-width:none }
.info-body .fabric-go a{ display:inline-flex; align-items:center; gap:var(--s-3);
  min-height:44px; font-size:15px; color:var(--ink); text-decoration:none }
.info-body .fabric-go a:hover .go-t{ text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:4px }
.fabric-go .arw{ color:var(--line-strong); transition:transform var(--t-fast) var(--ease) }
.info-body .fabric-go a:hover .arw{ transform:translateX(4px) }
/* Переходи до розділів цієї ж сторінки («Обмін і повернення»): той самий
   рядок, стрілка вниз і зсув униз — ведуть не геть, а нижче. */
.info-body .info-jump a:hover .arw{ transform:translateY(3px) }

/* ── Правило і чому ───────────────────────────────────────────
   Пояснення під списком правил. Тихіше за самі правила: людина,
   яка відкрила сторінку подивитись режим прання, читає список,
   а не абзац. Відбите лінією ліворуч — той самий прийом, що
   в рядку посадки на картці товару (.fit у loola.css).        */
.info-body .why{ padding-left:var(--s-4);
  border-left:var(--hairline) solid var(--line);
  font-size:14px; line-height:1.75; color:var(--muted) }

/* Останній рядок сторінки веде далі, а не підсумовує. Лінія над ним
   потрібна, щоб він не читався як частина останнього розділу. */
.info-body .onward{ margin-top:var(--s-7); padding-top:var(--s-5);
  border-top:var(--hairline) solid var(--line) }

/* ── Заготовка ────────────────────────────────────────────────
   Сторінка, текст якої ще пишуть. Каже це прямо, а не вдає
   готовий розділ порожнім абзацом.                            */
.info-draft{ padding:var(--s-6); border:var(--hairline) dashed var(--line-strong);
  border-radius:var(--r-xs); display:grid; justify-items:start; gap:var(--s-4) }
.info-draft p{ color:var(--soft) }

/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width:1023px){
  .info{ grid-template-columns:minmax(0,1fr); gap:var(--s-6) }
  /* Верх сторінки — варіант A (theme/demo/info-top.html, 22.09.2026).
     Крихти сховані: логотип і так веде на головну, а остання ланка
     повторювала заголовок (BreadcrumbList для Google — окремим JSON-LD,
     від видимого рядка не залежить). Надзаголовок «Розділи» стає над
     назвою: згортка живе в сітці .info, тож .info розчиняється
     (display:contents), а main шикує дітей стовпчиком і ставить
     згортку першою. Назва сторінки — один раз; від шапки до тексту
     ~100px замість 192. */
  /* .screen — екран прототипу (info-page.html), на сайті його немає */
  main.info-page,main.info-page > .screen{ display:flex; flex-direction:column }
  main.info-page .crumbs{ display:none }
  main.info-page .info{ display:contents }
  main.info-page .screen-h{ margin-bottom:var(--s-5) }
  .info-pick{ position:static; order:-1 }
  /* Розгорнутий перелік — над заголовком, відбитий лінією знизу */
  .info-pick .info-nav{ padding:var(--s-1) 0 var(--s-4); margin-bottom:var(--s-4);
    border-bottom:var(--hairline) solid var(--line) }
  /* Без переліку збоку обгортка — сама міра тексту, по центру */
  main.info-page{ max-width:calc(var(--info-measure) + 2 * var(--pad-page)) }
}
@media (max-width:739px){
  .info-toc{ padding:var(--s-5) }
  /* Підпис над значенням: «Склад однотонних моделей» поруч зі значенням
     лишає йому третину рядка. Пари тримаються купи відступом перед
     наступним підписом, а не спільним gap. */
  .fabric-spec{ grid-template-columns:minmax(0,1fr); gap:var(--s-1) }
  .fabric-spec dt{ line-height:1.5 }
  .fabric-spec dd + dt{ margin-top:var(--s-3) }
  /* Способи оплати на телефоні — не три вузькі колонки по два слова,
     а картка на рядок: назва способу, як платити, комісія тихіше.
     Заголовки колонок сховані лише з екрана — читач екрана їх чує. */
  .info-table.is-stack thead{ position:absolute; width:1px; height:1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  .info-table.is-stack :is(table,tbody,tr,td){ display:block }
  .info-table.is-stack tr{ padding:var(--s-3) 0; border-bottom:var(--hairline) solid var(--line) }
  .info-table.is-stack tr:first-child{ border-top:var(--hairline) solid var(--line) }
  .info-table.is-stack td{ padding:0; border:0; white-space:normal }
  .info-table.is-stack td:first-child{ font-weight:500; color:var(--ink); white-space:normal }
  .info-table.is-stack td:last-child{ color:var(--muted) }
}

/* ── Сторінка 404 ─────────────────────────────────────────────
   Той самий лад, що в довідці: пояснення широкою колонкою,
   перелік вузькою. Праворуч — справжні розділи каталогу з
   числом моделей, тому з помилкової адреси видно, куди йти.

   Заливки на екрані немає: єдина суцільна кнопка в системі —
   це купівля (§1), а тут її немає.                           */
/* Ширина блока обмежена: у повні 1280px між текстом і переліком
   лишалося 436px порожнечі — дві колонки читалися як два острови. */
.nf{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:var(--s-8);
  align-items:start; max-width:1000px; padding:var(--s-6) 0 var(--s-9) }
.nf-say{ display:grid; justify-items:start; gap:var(--s-5); max-width:58ch }
.nf-code{ color:var(--muted) }

/* Пошук — той самий рядок, що в оверлеї шапки (.srch-row у базі).
   Своє тут двоє: праве поле під хрестик не потрібне, а кегль збитий —
   поруч із заголовком 40px рядок на 28px сперечався б із ним. */
.nf-search{ display:grid; justify-items:start; gap:var(--s-5); width:100%; max-width:440px }
.nf-search .srch-row{ width:100%; padding-right:0 }
.nf-search .srch-row input{ font-size:clamp(17px,2vw,20px) }
.nf-help a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px }

/* Перелік розділів — той самий рядок, що в рейці головної §20:
   назва, число моделей, стрілка. Хайрлайн зверху в кожного,
   знизу — тільки в останнього, інакше під списком дві лінії. */
.nf-nav{ display:grid; align-content:start }
.nf-nav .t-label{ color:var(--muted); margin-bottom:var(--s-3) }
.nf-links{ display:grid }
.nf-links a{ display:grid; grid-template-columns:1fr auto auto; align-items:center;
  gap:var(--s-3); min-height:44px; font-size:15px; color:var(--ink);
  border-top:var(--hairline) solid var(--line) }
.nf-links a:last-child{ border-bottom:var(--hairline) solid var(--line) }
.nf-nav .n{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums }
.nf-nav .arw{ color:var(--line-strong); transition:transform var(--t-fast) var(--ease) }
.nf-nav a:hover{ color:var(--soft) }
.nf-nav a:hover .arw{ transform:translateX(4px) }
.nf-all{ display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:44px; margin-top:var(--s-2); font-size:15px }
.nf-all:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }

@media (max-width:979px){
  /* Перелік іде під текст: 280px поруч із абзацом на планшеті
     лишають колонці менше рядка, ніж вона варта. */
  .nf{ grid-template-columns:minmax(0,1fr); gap:var(--s-7); padding-bottom:var(--s-8) }
  .nf-nav{ max-width:440px }
}