/* LOOLA — шапка §17 и подвал §18. Источник: theme/demo/header-footer.html.
   Грузится на каждой странице последним: общие компоненты (.ico, .drawer,
   кнопки, токены) описаны здесь, страничные файлы их только повторяют. */


/* ============================================================
   ТОКЕНИ — LOOLA-DESIGN-CODE.md v2.4 §2, без змін
   ============================================================ */
:root{
  --ink:#1A1A1A; --body:#2D2D2D; --soft:#555555; --muted:#767676;
  --canvas:#FFFFFF; --surface:#FFFFFF; --wash:#F6F6F6;
  --line:#E5E5E5; --line-strong:#949494; --on-dark:#FFFFFF;
  --scrim:rgba(26,26,26,.55);
  --accent:#1A1A1A; --accent-hover:#3D3D3D; --accent-pressed:#000000; --on-accent:#FFFFFF;
  --price-sale:#BE1128; --danger:#BE1128;
  --st-quiet:#FFFFFF; --on-st-quiet:#1A1A1A; --st-urgent:#1A1A1A; --on-st-urgent:#FFFFFF;
  --st-sale:#BE1128; --on-st:#FFFFFF;
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --hairline:1px; --focus-ring:2px; --icon-stroke:1.5;
  --r-xs:0px; --r-sm:2px; --r-md:4px; --r-pill:999px;
  --elevation:0 1px 2px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.10);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --container:1440px; --gutter:24px; --pad-page:20px;
  --hd-h:64px;   /* висота липкого ряду шапки */
  --hd-ico:34px; /* ширина слота кнопки в шапці; тач-зона завжди 44px */
  --ease:cubic-bezier(0.22,0.61,0.36,1); --ease-soft:ease-in-out; --ease-out:cubic-bezier(0,0,0.2,1);
  --t-fast:200ms; --t-media:200ms; --t-color:300ms; --t-panel:325ms; --t-reveal:400ms; --t-hover:500ms;
}
/* Інвертована ділянка — тільки підвал. Теми на весь сайт немає. */
.ft{
  --ink:#F2F2F2; --body:#E2E2E2; --soft:#C7C7C7; --muted:#9A9A9A;
  --canvas:#121212; --surface:#1C1C1C; --wash:#1C1C1C;
  --line:#2E2E2E; --line-strong:#6E6E6E; --on-dark:#121212;
  --accent:#D8D8D8; --accent-hover:#FFFFFF; --accent-pressed:#B4B4B4; --on-accent:#121212;
  --danger:#FF7A85;
  --elevation:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.55);
}
@media (min-width:768px){ :root{ --pad-page:48px; --hd-ico:40px } }
@media (min-width:1024px){ :root{ --pad-page:80px; --hd-ico:44px } }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-padding-top:calc(var(--hd-h) + var(--s-4)) }
body{ margin:0; background:var(--canvas); color:var(--body);
  font-family:var(--font-body); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background var(--t-color) var(--ease-soft), color var(--t-color) var(--ease-soft) }
body.locked{ overflow:hidden }
h1,h2,h3,h4{ margin:0; font-weight:400; color:var(--ink) }
p{ margin:0 } img{ max-width:100%; display:block }
/* Скидання списків — у базі, а не в кожному сторінковому файлі.
   ol обов'язково: браузер дає йому ті самі 40px відступу, і будь-який
   наш список на <ol> (шкала підтримки, анатомія, рівні клубу) з'їжджає
   праворуч від решти колонки. */
ul,ol{ margin:0; padding:0; list-style:none }
/* dd з браузерним відступом 40px: у «Контактах» значення стояло на 40px
   правіше за свій підпис, хоча ряд — сітка з проміжком 4px. Скидання тут,
   а не в сторінкових файлах: у loola.css і shop.css воно вже було, у
   info.css і home.css — ні, і сторінки розходилися. */
dl,dd,figure{ margin:0 }
a{ color:var(--ink); text-decoration:none; transition:color var(--t-color) var(--ease-soft) }
:focus-visible{ outline:var(--focus-ring) solid var(--ink); outline-offset:2px }

.t-display-xl{ font-family:var(--font-display); font-weight:300; font-size:clamp(32px,6.5vw,60px); line-height:1.12; letter-spacing:.06em; text-transform:uppercase }
.t-display-l{ font-family:var(--font-display); font-weight:300; font-size:clamp(26px,4.4vw,40px); line-height:1.2; letter-spacing:.08em; text-transform:uppercase }
.t-h2{ font-family:var(--font-display); font-weight:500; font-size:16px; line-height:1.5; letter-spacing:.16em; text-transform:uppercase }
.t-h3{ font-weight:600; font-size:16px; line-height:1.5 }
.t-caption{ font-size:13px; line-height:1.45; color:var(--muted) }
.t-label{ font-family:var(--font-display); font-weight:500; font-size:11px; line-height:1.5; letter-spacing:.18em; text-transform:uppercase }

/* Посилання, що пропускає до контенту — обов'язкове, коли навігація в панелі */
.skip{ position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--canvas); padding:12px 18px;
  font-family:var(--font-display); font-size:11px; letter-spacing:.18em; text-transform:uppercase }
.skip:focus{ left:0 }

/* ── Логотип ─────────────────────────────────────────────────
   Файл, а не набране слово: у знака своя ширина літер і своя
   петля в «OO», шрифтом це не повторюється. Розмір той самий,
   що на бойовій: 91px по ширині, пропорція 786:173.          */
.logo{ display:block; line-height:0; color:var(--ink) }
.logo img{ display:block; width:91px; height:auto; aspect-ratio:786 / 173 }

/* ── Кнопки ──────────────────────────────────────────── */
.btn{ --btn-h:44px; --btn-px:28px; --btn-fs:12px; --btn-ls:.16em;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--btn-h); padding:0 var(--btn-px);
  font-family:var(--font-display); font-weight:500; font-size:var(--btn-fs);
  letter-spacing:var(--btn-ls); text-transform:uppercase;
  border-radius:var(--r-sm); border:var(--hairline) solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft),
             border-color var(--t-hover) var(--ease-soft) }
.btn::after{ content:''; position:absolute; inset:50% 0 auto; transform:translateY(-50%); height:44px }
.btn-lg{ --btn-h:54px; --btn-px:36px; --btn-fs:13px }
.btn-block{ display:flex; width:100% }
.btn-buy{ background:var(--accent); color:var(--on-accent) }
.btn-buy:hover{ background:var(--accent-hover) }
.btn-buy:active{ transition:none; background:var(--accent-pressed) }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--ink) }
.btn-secondary:hover{ background:var(--ink); color:var(--canvas) }

/* ============================================================
   ШАПКА — варіант C
   ============================================================ */
/* Висота смуги — 34px, як на бойовій: рядок тексту 15px і по 4px повітря
   зверху й знизу не дотягують до неї, тому висоту тримає min-height. */
.announce{
  min-height:34px; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--canvas);
  font-family:var(--font-display); font-weight:500; font-size:10px; line-height:1.5;
  letter-spacing:.18em; text-transform:uppercase; text-align:center;
  padding:var(--s-1) var(--pad-page);
}
.announce a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }

.hd{ position:sticky; top:0; z-index:40;
  background:var(--canvas); border-bottom:var(--hairline) solid var(--line);
  transition:background var(--t-color) var(--ease-soft) }
.hd-in{ max-width:var(--container); margin:0 auto; padding:0 var(--pad-page) }
.hd-bar{ height:var(--hd-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center }
/* Кнопки стоять впритул: між ними немає зазору, бо кожна вже несе
   власне поле — 44px тач-зони довкола іконки 20px. */
.hd-left{ display:flex }
.hd-mid{ display:grid; place-items:center }
.hd-right{ display:flex; justify-content:flex-end }

.ico{ width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent;
  color:var(--ink); cursor:pointer; position:relative; border-radius:var(--r-sm);
  transition:color var(--t-color) var(--ease-soft) }
.ico::after{ content:''; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%) }
/* Слот вужчає тільки в шапці: там п'ять кнопок в одному ряду з логотипом.
   Тач-зона лишається 44px — її тримає псевдоелемент, як у §7. Хрестики
   шторок і пошуку до цього не мають стосунку і лишаються 44px.        */
.hd .ico{ width:var(--hd-ico) }
.ico:hover{ color:var(--muted) }
.ico .cnt{ position:absolute; top:4px; right:0; min-width:16px; height:16px; padding:0 4px;
  display:grid; place-items:center; background:var(--ink); color:var(--canvas);
  font-family:var(--font-body); font-size:10px; font-weight:600; line-height:16px;
  border-radius:var(--r-pill) }
/* display у класі перебиває браузерне [hidden]{display:none} — повертаємо */
.ico .cnt[hidden]{ display:none }

/* ── Панель навігації ────────────────────────────────── */
.drawer{ position:fixed; inset:0; z-index:70; pointer-events:none; visibility:hidden;
  transition:visibility 0s linear var(--t-panel) }
.drawer.open{ pointer-events:auto; visibility:visible; transition-delay:0s }
.drawer .veil{ position:absolute; inset:0; background:var(--scrim); opacity:0;
  transition:opacity var(--t-panel) var(--ease-out) }
.drawer.open .veil{ opacity:1 }
/* Шторка — варіант B1 (demo/drawer.html, розділ 06), 23.09.2026.
   Прокручується середина, а заголовок і низ із входом стоять на місці:
   вхід і «Обране» мають бути видно на будь-якому телефоні. */
.drawer .panel{ position:absolute; top:0; bottom:0; left:0; width:min(400px,90%);
  background:var(--surface); border-right:var(--hairline) solid var(--line);
  transform:translateX(-100%); transition:transform var(--t-panel) var(--ease-out);
  overflow:hidden; display:flex; flex-direction:column }
.drawer.open .panel{ transform:none }
.pn-head{ flex:0 0 auto; display:flex; justify-content:space-between; align-items:center;
  padding:var(--s-3) var(--s-4) var(--s-3) var(--s-5); border-bottom:var(--hairline) solid var(--line) }
.pn-body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain }

/* Категорії — усі одразу, квадратні кадри в три колонки. Правило Baymard:
   товарні розділи першим рівнем, без проміжного «Каталогу». Три колонки —
   найщільніша розкладка: без прокрутки вміщається одинадцять категорій.
   Висота кадру — через ширину колонки (cqw): широка плитка «Усі товари»
   мусить стати врівень із сусіднім кадром, а aspect-ratio цього не дасть. */
/* Сітка квадратів — одна на два місця: шторка і перший екран головної
   на телефоні (loola_category_squares(), inc/drawer.php). Поля навколо
   дає місце, де вона стоїть: у шторці — .pn-body, на головній — рейка. */
.sq-grid{ container-type:inline-size; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-4) var(--s-2) }
.pn-body > .sq-grid{ padding:var(--s-4) var(--s-5) var(--s-2) }
/* Плитка не ширша за колонку — ні сама (min-width:0), ні її внутрішня
   колонка (minmax(0,1fr)): на телефоні 360 слово «велосипедками» ширше
   за колонку, і без цього плитка розʼїжджалася в сусідню */
.sq-tile{ min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-2);
  align-content:start; color:var(--ink) }
.sq-ph{ display:block; height:calc((100cqw - 2 * var(--s-2)) / 3); overflow:hidden; background:var(--wash) }
.sq-ph img{ display:block; width:100%; height:100%; object-fit:cover }
/* Заглушка: кадри для шторки власник кадрує сам (квадрат по самій речі) */
.sq-stub{ display:grid; place-items:center; height:100%; border:var(--hairline) dashed var(--line-strong);
  font-family:var(--font-display); font-weight:500; font-size:13px; letter-spacing:.08em; color:var(--muted) }
/* Довге слово переноситься з дефісом: мʼякі переноси ставить loola_soft_hyphens()
   (inc/drawer.php) — словник переносів є не в кожному браузері. break-word — запас */
.sq-nm{ font-size:13px; line-height:1.3; overflow-wrap:break-word }
.sq-tile:hover .sq-nm{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }
/* «Усі товари» закриває останній ряд: is-1, is-2 клітинки або is-3 — весь ряд */
.sq-all .sq-ph{ display:grid; align-content:center; justify-items:start; gap:var(--s-1);
  padding:var(--s-3) var(--s-4); border:var(--hairline) solid var(--line); background:transparent }
.sq-all.is-2{ grid-column:span 2 }
.sq-all.is-3{ grid-column:1 / -1 }
.sq-all-t{ font-size:15px; font-weight:500; line-height:1.3 }
.sq-all-n{ font-size:13px; color:var(--muted) }
/* В одну клітинку — у два рядки, стрілка тримається за слово (&nbsp;) */
.sq-all.is-1 .sq-ph{ padding:var(--s-2) var(--s-3) }
.sq-all.is-1 .sq-all-t{ font-size:14px }

/* Додаткові входи: «Нове · Усі комплекти · Sale». Рядок переноситься,
   а не обрізається; зона дотику — 44px, як у .chip */
.pn-chips{ list-style:none; margin:0; display:flex; flex-wrap:wrap; gap:var(--s-2);
  padding:var(--s-4) var(--s-5) var(--s-5) }
.pn-chips a{ position:relative; display:inline-flex; align-items:center; min-height:36px; padding:0 var(--s-3);
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-pill); font-size:13px; color:var(--ink);
  transition:border-color var(--t-fast) var(--ease) }
.pn-chips a::after{ content:''; position:absolute; inset:50% 0 auto; transform:translateY(-50%); height:44px }
.pn-chips a:hover{ border-color:var(--ink) }
/* WordPress вішає клас пункту меню на <li>, колір потрібен посиланню */
.pn-chips li.sale > a{ color:var(--price-sale) }

/* Службове — нижче, дрібніше, після риски. Групи згорнуті */
.pn-more{ border-top:var(--hairline) solid var(--line) }
.pn-acc + .pn-acc{ border-top:var(--hairline) solid var(--line) }
.pn-acc summary{ display:flex; align-items:center; justify-content:space-between; min-height:52px;
  padding:0 var(--s-5); list-style:none; cursor:pointer;
  font-family:var(--font-display); font-weight:500; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--soft); transition:color var(--t-fast) var(--ease) }
.pn-acc summary::-webkit-details-marker{ display:none }
.pn-acc summary:hover{ color:var(--ink) }
.pn-pm{ position:relative; flex:0 0 auto; width:12px; height:12px }
.pn-pm::before,.pn-pm::after{ content:''; position:absolute; left:0; right:0; top:50%;
  height:var(--hairline); background:currentColor; transition:transform var(--t-fast) var(--ease) }
.pn-pm::after{ transform:rotate(90deg) }
.pn-acc[open] .pn-pm::after{ transform:rotate(0) }
.pn-links{ list-style:none; margin:0; padding:0 var(--s-5) var(--s-3); display:grid }
.pn-links a{ display:flex; align-items:center; min-height:40px; font-size:14px; color:var(--body) }
.pn-links a:hover{ color:var(--ink) }
.pn-loc{ margin:0; padding:var(--s-4) var(--s-5) var(--s-5); border-top:var(--hairline) solid var(--line);
  font-size:13px; color:var(--muted) }

/* Низ: вхід і «Обране». Вхід ширший: під ним рівень клубу */
.pn-foot{ flex:0 0 auto; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  border-top:var(--hairline) solid var(--line); background:var(--surface) }
.pn-me{ display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:var(--s-3);
  align-items:center; align-content:center; min-height:64px; padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  color:var(--ink) }
.pn-me + .pn-me{ border-left:var(--hairline) solid var(--line) }
.pn-me svg{ grid-row:1 / span 2 }
.pn-t{ font-size:14px; font-weight:500; line-height:1.3 }
.pn-s{ grid-column:2; font-size:13px; line-height:1.3; color:var(--muted) }
/* Відсоток — червоним, бо це вигода (закон 2); лічильник обраного — тихо */
.pn-off{ margin-left:var(--s-1); font-weight:400; color:var(--price-sale) }
.pn-n{ margin-left:var(--s-1); font-weight:400; color:var(--muted) }

/* ── Оверлей пошуку ──────────────────────────────────── */
.srch{ position:fixed; inset:0; z-index:80; pointer-events:none; visibility:hidden;
  transition:visibility 0s linear var(--t-panel) }
.srch.open{ pointer-events:auto; visibility:visible; transition-delay:0s }
.srch .veil{ position:absolute; inset:0; background:var(--scrim); opacity:0;
  transition:opacity var(--t-panel) var(--ease-out) }
.srch.open .veil{ opacity:1 }
.srch .sheet{ position:absolute; left:0; right:0; top:0; background:var(--surface);
  border-bottom:var(--hairline) solid var(--line); box-shadow:var(--elevation);
  transform:translateY(-100%); transition:transform var(--t-panel) var(--ease-out);
  padding:var(--s-5) var(--pad-page) var(--s-6) }
.srch.open .sheet{ transform:none }
.srch-in{ position:relative; max-width:var(--container); margin:0 auto; display:grid; gap:var(--s-5) }
/* Рядок — це <label>, тому в поле влучає весь рядок, а не самі літери:
   так тач-зона виходить 47px при полі 34px, і §14 виконано без
   роздування самого поля. Праворуч 56px — місце під хрестик, щоб довгий
   запит не заповзав під нього: 44px кнопки плюс повітря по шкалі §11. */
.srch-row{ display:flex; gap:var(--s-3); align-items:center; cursor:text;
  border-bottom:var(--hairline) solid var(--ink);
  padding:0 var(--s-8) var(--s-3) 0 }
.srch-row svg{ flex:0 0 22px; color:var(--muted) }
.srch-row input{ flex:1; min-width:0; border:0; background:transparent; outline:0; padding:0;
  font-family:var(--font-display); font-weight:300; font-size:clamp(20px,3vw,28px);
  line-height:1.2; letter-spacing:.04em; color:var(--ink) }
.srch-row input::placeholder{ color:var(--muted) }
/* Хрестик, який браузер сам малює в полі type="search": він синій,
   малюється системою і жодному нашому правилу не підпорядковується —
   в монохромному інтерфейсі це чужий елемент. Прибираємо; очистити
   поле є чим — виділенням або Esc. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; appearance:none }
/* Хрестик у правому верхньому куті аркуша, а не в рядку: інакше він
   розриває лінію під полем. Ширина завжди 44px — це не слот шапки. */
.srch-close{ position:absolute; top:0; right:0; width:44px }
.srch-sug{ display:flex; gap:var(--s-2); flex-wrap:wrap }
.chip{ position:relative; display:inline-flex; align-items:center; min-height:36px; padding:0 18px;
  font-family:var(--font-display); font-weight:500; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; background:transparent; color:var(--soft);
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-pill); cursor:pointer;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) }
.chip::after{ content:''; position:absolute; inset:50% 0 auto; transform:translateY(-50%); height:44px }
.chip:hover{ border-color:var(--ink); color:var(--ink) }

/* ============================================================
   КОНТЕНТ — щоб шапка й підвал були в реальному оточенні
   ============================================================ */
.main{ min-height:60vh }

/* Категорії в контенті — головна компенсація схованої навігації */
.cats{ display:grid; gap:var(--s-4); grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:768px){ .cats{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.cat{ display:grid; gap:var(--s-3) }
.cat .thumb{ aspect-ratio:3/4; background:var(--wash); display:grid; place-items:center; overflow:hidden }
.cat .thumb svg{ width:32%; color:var(--line-strong); opacity:.45 }
.cat span{ font-family:var(--font-display); font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink) }
.cat:hover span{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }

/* ============================================================
   ПІДВАЛ — інверсія локальними токенами (§18)
   ============================================================ */
.ft{ background:var(--canvas); color:var(--body); border-top:var(--hairline) solid var(--line) }
.ft-band{ border-bottom:var(--hairline) solid var(--line) }
.ft-band-in{ max-width:var(--container); margin:0 auto; padding:var(--s-7) var(--pad-page);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5) }
/* Дії відкидаються до правого краю, текст тримає ліву колонку. Поруч
   із кнопкою — тихе посилання на умови: кнопка кличе, посилання
   пояснює, і вони не сперечаються за увагу. На телефоні дії йдуть
   під текстом від лівого краю — праворуч вони повисали б. */
.ft-band-act{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5) }
@media (min-width:768px){ .ft-band-act{ margin-left:auto } }
.ft-band-more{ font-size:14px; color:var(--soft); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--line-strong) }
.ft-band-more:hover{ color:var(--ink); text-decoration-color:currentColor }
.ft-band-note{ max-width:62ch; font-size:14px; line-height:1.6; color:var(--soft) }
.ft-band h4{ margin-bottom:var(--s-2) }
.ft-in{ max-width:var(--container); margin:0 auto; padding:var(--s-8) var(--pad-page) var(--s-6) }
/* На телефоні — дві колонки: чотири групи одна під одною давали підвал
   у півтора екрана. Порядок читання той самий — зліва направо, згори
   вниз. Від планшета колонки розкладаються самі. */
.ft-top{ display:grid; gap:var(--s-7) var(--s-5); grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:768px){
  .ft-top{ gap:var(--s-7); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }
}
.ft h4{ font-family:var(--font-display); font-weight:500; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--s-4) }
/* Шаг між пунктами — той самий, що й був (18 + 16 замість 22 + 12), але
   рядки всередині пункту тепер тісніші за проміжок між пунктами: на вузькому
   телефоні «Обмін і / повернення» переноситься і має читатися одним пунктом. */
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4) }
.ft ul li{ line-height:1.3 }
.ft ul a{ font-size:14px; color:var(--body) }
.ft ul a:hover{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }
/* Соцмережі — таким самим списком, що й сусідні групи: назва поруч
   зі знаком читається швидше за сам знак, і колонка тримає ритм. */
.ft-social a{ display:inline-flex; align-items:center; gap:var(--s-2) }
.ft-social svg{ flex:0 0 auto; color:var(--muted); transition:color var(--t-fast) var(--ease) }
.ft-social a:hover svg{ color:var(--ink) }
.ft-bottom{ margin-top:var(--s-8); padding-top:var(--s-5); border-top:var(--hairline) solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; justify-content:space-between }
/* На телефоні документи й копірайт — стовпчиком: у рядок «© 2026»
   чіплялося до «Публічної оферти», а «Політика» падала окремо. */
.ft-legal{ display:flex; flex-direction:column; gap:var(--s-3); font-size:13px; color:var(--muted) }
@media (min-width:768px){ .ft-legal{ flex-direction:row; flex-wrap:wrap; gap:var(--s-4) } }
.ft-legal a{ color:var(--muted) } .ft-legal a:hover{ color:var(--ink) }
/* Знаки платіжних систем — готові файли, кожен на власній білій плашці.
   Висота однакова, ширина в кожного своя — пропорцію тримають атрибути
   width/height у розмітці, інакше до завантаження файлу рядок стрибає. */
.ft-pay{ display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center }
.ft-pay img{ display:block; height:32px; width:auto }
.locale{ position:relative; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-sm);
  font-family:var(--font-display); font-weight:500; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); background:transparent; cursor:pointer;
  transition:border-color var(--t-fast) var(--ease) }
.locale::after{ content:''; position:absolute; inset:50% 0 auto; transform:translateY(-50%); height:44px }
.locale:hover{ border-color:var(--ink) }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important }
}

/* ── Дополнения темы к прототипу ───────────────────────────
   В прототипе визуально скрытые подписи были прописаны инлайном;
   в теме их несколько, поэтому вынесены в класс. */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }

/* Ціна зі знижкою. Стікера знижки в системі немає (demo/stickers.html:
   червоний чіп вимкнено), тому вигоду несе сама ціна.

   WooCommerce друкує <del> перед <ins> — порядок міняємо розкладкою:
   спершу нова ціна, стара перекреслена поруч. Червоне означає рівно
   одне — вигоду (§1), тому колір дістається тільки новій ціні;
   перекреслена лишається сірою.

   Правило в базі, а не в сторінковому файлі: ціна зі знижкою є і в
   каталозі, і на сторінці товару, і в стрічці на головній. Доки воно
   лежало в catalog.css, на сторінці товару червоніли обидві ціни. */
.card-price, .pdp-price{ display:inline-flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap }
.card-price ins, .pdp-price ins{ order:1; text-decoration:none; color:var(--price-sale) }
.card-price del, .pdp-price del{ order:2; color:var(--muted); font-weight:400;
  text-decoration:line-through }