/* LOOLA — главная §20. Источник: theme/demo/home.html.
   Правки вносить в wp/setup/proto/home-extra.css, пересобрать прототип
   и перенести сюда — прототип старше темы.

   Общая база (токены, типографика, кнопки, .main, .cats, .cat)
   приходит из header-footer.css, он подключается раньше. */

/* .sec вырезан из header-footer.css как часть демо-страницы прототипа,
   а на главной он нужен. */
/* ── Відступи між блоками — одне правило (demo/home-top.html, 23.09.2026) ──
   Поле блоку 48 на компʼютері й 32 на телефоні, зверху і знизу: між двома
   білими блоками виходить рівно 96 і 64 (§11). Раніше в кожного блоку було
   своє поле 96 з обох боків, вони складалися — і між вмістом стояло
   192–200 px на будь-якому екрані. Кольорові смуги («Тканини», «Клуб»)
   мають усередині 96 і 64: від краю смуги до тексту. Край смуги сам
   відділяє блок, тому перед ним досить звичайного поля. */
:root{ --sec-y:var(--s-7); --band-y:var(--s-9) }
@media (max-width:739px){ :root{ --sec-y:var(--s-6); --band-y:var(--s-8) } }
.sec{ max-width:var(--container); margin:0 auto; padding:var(--sec-y) var(--pad-page) }

/* ============================================================
   ГОЛОВНА — §20 (новий розділ дизайн-коду), версія 2

   Базові компоненти взяті з §17/§18: .sec, .cats, .cat, .btn.
   Тут лише те, чого ще не існувало.

   Що змінилося проти версії 1:
   · перший екран став на всю ширину і взяв категорії всередину —
     ліва колонка це і є заходи в розділи, як у lululemon;
   · сторінка отримала ритм: контейнер / на всю ширину / світле /
     темне. У версії 1 усе жило в одному контейнері й читалося рівно;
   · додано смугу клубу на інверсії;
   · кадри — сірі заглушки з форматом і брифом, як у решті прототипів.
   ============================================================ */

/* ── Заглушки кадрів ──────────────────────────────────────────
   Той самий компонент, що в product-page.html і catalog.html.   */
.ph{ display:flex; align-items:center; justify-content:center; text-align:center;
  padding:var(--s-5); background:var(--wash);
  border:1px dashed var(--line-strong); border-radius:var(--r-xs) }
.ph > span{ max-width:36ch; font-size:13px; line-height:1.55; color:var(--muted) }
.ph b{ display:block; margin-bottom:var(--s-2); font-family:var(--font-display); font-weight:500;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft) }
.ph i{ display:block; margin-top:var(--s-2); font-style:normal;
  font-size:11px; letter-spacing:.06em; color:var(--line-strong) }

/* ============================================================
   ПЕРШИЙ ЕКРАН
   Ліва колонка — бренд і заходи в розділи. Два кадри праворуч.
   Смуга йде від краю до краю: контейнер тут навмисно розірвано,
   інакше перший екран читається як ще одна секція серед решти.
   ============================================================ */
.hero{ display:grid; grid-template-columns:minmax(320px,4fr) 5fr 4fr;
  min-height:clamp(460px,76vh,760px);
  border-bottom:var(--hairline) solid var(--line);
  background:var(--canvas); padding:0; gap:0; text-align:left; place-items:stretch }

/* ── Ліва колонка ─────────────────────────────────────────── */
.hero-rail{ display:grid; align-content:space-between; gap:var(--s-7);
  padding:var(--s-8) var(--s-7) var(--s-7) var(--pad-page);
  border-right:var(--hairline) solid var(--line) }
.hero-say{ display:grid; gap:var(--s-4) }
/* Сітка квадратів — вхід у каталог на телефоні (варіант B). На ширших
   екранах її немає: там список. Спільна з шторкою, стилі — у базі */
.hero-sq{ display:none }
/* На планшеті й компʼютері перший екран закінчується кадрами до самого
   краю — полю наступного блоку ні на що спертися, тому воно подвійне:
   96 від краю кадру. На телефоні перший екран закінчується рейкою з
   власним полем, і там досить звичайного. */
@media (min-width:740px){ .hero + .sec{ padding-top:var(--s-9) } }
/* Кегль стриманий навмисне. У версії 2 заголовок був 46px і разом із
   суцільною кнопкою робив колонку важкою — три великих елементи один
   під одним. Тепер вага в кадрах, а рейка це спокійна навігація. */
/* Клас t-display-l лишається — це брендовий голос §5: Montserrat 300,
   капслок, трекінг. Тут лише збитий кегль, бо в рейці 40px завеликі. */
.hero-say h1{ font-size:clamp(24px,2.3vw,32px); line-height:1.2 }
.hero-say p{ color:var(--soft); font-size:16px; line-height:1.65; max-width:34ch }

/* Заходи в розділи — справжні категорії, а не вигадані угруповання.
   «Низ» і «Верх» звідси прибрані: це наші внутрішні слова, їх ніхто
   не шукає, а посилання тут найвагоміші на сайті. Кожен рядок веде
   на сторінку категорії з її власною назвою.                      */
.hero-nav{ display:grid; align-content:start }
.hero-nav .t-label{ color:var(--muted); margin-bottom:var(--s-3) }
.hero-links{ display:grid }
.hero-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) }
.hero-links a:last-child{ border-bottom:var(--hairline) solid var(--line) }
.hero-nav .n{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums }
.hero-nav .arw{ color:var(--line-strong); transition:transform var(--t-fast) var(--ease) }
.hero-nav a:hover{ color:var(--soft) }
.hero-nav a:hover .arw{ transform:translateX(4px) }
/* §7 · третій рівень. Кнопки тут більше немає: коли поруч сім
   справжніх посилань, загальне «дивитись каталог» лише додає ваги. */
.hero-all{ display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:44px; font-size:15px; color:var(--ink) }
.hero-all:hover{ text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px }

/* ── Кадри ────────────────────────────────────────────────── */
/* Обгортка кадрів на широкому екрані прозора: кадри лишаються
   колонками сітки героя. Стрічкою вона стає тільки на телефоні. */
.hero-frames{ display:contents }
.hero-panel{ position:relative; overflow:hidden;
  border-left:var(--hairline) solid var(--line) }
/* пунктир лишається: він і означає «кадру ще немає» */
.hero-panel .ph{ position:absolute; inset:0; border-radius:0 }
.hero-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* Підпис поверх кадру — єдине місце на сайті, де це дозволено.
   Умова: нижня третина кадру знята як вільне поле, світле й без
   моделі. Тоді текст лишається кольору --ink і підкладка не
   потрібна — а вона й заборонена, градієнтів у нас не буває. */
.hero-over{ position:absolute; z-index:1; left:var(--s-6); right:var(--s-6); bottom:var(--s-6);
  display:grid; gap:var(--s-3); justify-items:start }
.hero-over.to-right{ justify-items:end; text-align:right }
/* --ink, як і сказано вище. Сірі --soft і --muted на світлій підлозі
   давали 3.8 і 2.0 замість 4.5 (замір 28.09.2026 на 1440); --ink —
   від 5.5 до 16 на всіх ширинах від 390 до 1920. */
.hero-over .t-label{ color:var(--ink) }
.hero-over .hero-count{ font-size:14px; color:var(--ink) }
/* Кнопка на кадрі — не підпис, а елемент керування: у неї своя біла
   заливка, як у чипа стікера §8. Контурна пропадала на темному одязі
   другого кадру — на 390, 800, 1024 і 1280 під нею лосини, контраст 1.0. */
.hero-over .btn-secondary{ background:var(--canvas) }
.hero-over .btn-secondary:hover{ background:var(--ink) }
/* Нижній підпис — посилання в добірку комплектів. Лінія тільки під
   курсором: підпис лежить на кадрі, зайве підкреслення його шумить. */
.hero-over a.hero-count:hover{ color:var(--ink); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:4px }

/* ============================================================
   СЕКЦІЇ
   ============================================================ */
.sec-head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-4); margin-bottom:var(--s-6) }
.sec-head .more-link{ font-size:14px; color:var(--soft); white-space:nowrap }
.sec-head .more-link:hover{ color:var(--ink); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:4px }

/* Блоку «Категорії» з плитками 3:4 на головній більше немає (варіант B):
   він повторював список першого екрана. Вхід у каталог — список у рейці
   на компʼютері і сітка квадратів на телефоні (нижче, «Адаптив»). */

/* ── Стрічка товарів ──────────────────────────────────────────
   Той самий приём, що в полосі заходів каталогу: картки їдуть за
   край. Нова модель просто стає в чергу, розкладка не ламається.  */
.strip{ display:flex; gap:var(--s-4); overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity; padding-bottom:var(--s-2);
  margin-inline:calc(var(--pad-page) * -1); padding-inline:var(--pad-page);
  scroll-padding-inline:var(--pad-page) }
.strip::-webkit-scrollbar{ display:none }
.strip .card{ flex:0 0 clamp(210px,22vw,300px); scroll-snap-align:start }

/* ── Кнопки прокрутки стрічки ─────────────────────────────────
   Смуга прокрутки схована навмисно — вона псує ритм. Але тоді
   мишею стрічку не зрушити: колесо крутить сторінку, не її.
   Круглі кнопки поверх стрічки по краях, а не окремим рядом:
   ряд забирав висоту й відсував товар. Ті самі, що в каталозі. */
.strip-wrap{ position:relative }
.entry-nav{ position:absolute; top:calc(50% - var(--s-4)); transform:translateY(-50%); z-index:2;
  width:44px; height:44px; display:grid; place-items:center; padding:0;
  background:var(--surface); color:var(--ink);
  border:var(--hairline) solid var(--line-strong); border-radius:var(--r-pill);
  box-shadow:var(--elevation); cursor:pointer;
  transition:color var(--t-color) var(--ease-soft), border-color var(--t-fast) var(--ease) }
.entry-nav:hover{ border-color:var(--ink) }
.entry-nav[disabled]{ color:var(--line-strong); border-color:var(--line); cursor:default; box-shadow:none }
.entry-nav[hidden]{ display:none }
/* стрічка виходить за поле сторінки, тому кнопки притиснуті до її краю */
.entry-nav.prev{ left:calc(var(--pad-page) * -0.5) }
.entry-nav.next{ right:calc(var(--pad-page) * -0.5) }

/* На вузьких кнопок немає: там стрічку гортають пальцем, і круглі
   кнопки поверх картки тільки закривали б товар. */
@media (max-width:739px){
  .entry-nav{ display:none }
}

/* картка §10, скорочена: на головній немає ні швидких розмірів, ні обраного */
.card{ position:relative; display:block }
/* Кадр товару 2:3 — рівно як знімок (1200×1800), тому не ріжеться
   нічого. На Shop-Express вибору не було: платформа рахує пропорції
   десятими частками і вміла тільки 7:10, і зрізала по 43px зверху й
   знизу — голову та кросівки. Тут обмеження немає.                 */
.card-media{ position:relative; aspect-ratio:2/3; background:var(--wash);
  overflow:hidden; border-radius:var(--r-xs); margin-bottom:var(--s-3) }
.card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.card-media .ph{ position:absolute; inset:0; border-radius:0 }
.card-title{ font-size:14px; line-height:1.45; color:var(--ink) }
.card-details{ margin-top:var(--s-1); font-size:13px; line-height:1.45; color:var(--muted) }
.card-price{ margin-top:var(--s-2); font-size:14px; font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums }
/* Тільки там, де наведення існує: на дотику тап лишає :hover, і після
   «назад» картка стоїть підкресленою. Те саме в catalog.css. */
@media (hover:hover) and (pointer:fine){
  .card:hover .card-title{ text-decoration:underline;
    text-decoration-thickness:1px; text-underline-offset:4px }
}

/* ============================================================
   ТКАНИНА — кадр і три факти
   Після двох сіток поспіль потрібен інший ритм, тому тут
   макро-кадр ліворуч і числа праворуч, а фон — --wash.
   ============================================================ */
.fabric{ background:var(--wash) }
.fabric-in{ max-width:var(--container); margin:0 auto; padding:var(--band-y) var(--pad-page);
  display:grid; grid-template-columns:5fr 7fr; gap:var(--s-7); align-items:center }
.fabric-shot{ position:relative; overflow:hidden; aspect-ratio:1/1 }
.fabric-shot .ph{ width:100%; height:100%; background:var(--canvas) }
/* Правила для самого кадру не було — перший же кадр став би в
   натуральну величину. Вписується, як кадри героя. */
.fabric-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.facts{ display:grid; gap:var(--s-6) }
.fact{ display:grid; gap:var(--s-2); align-content:start;
  padding-top:var(--s-5); border-top:var(--hairline) solid var(--line-strong) }
.fact-n{ font-family:var(--font-display); font-weight:300;
  font-size:clamp(24px,2.6vw,30px); line-height:1.1; letter-spacing:.04em; color:var(--ink) }
.fact p{ color:var(--soft); font-size:15px; line-height:1.6 }

/* ============================================================
   КЛУБ — єдина темна смуга на сторінці
   Інверсія зроблена токенами на секції, як у підвалі §18:
   всередині немає жодного кольору хексом.
   ============================================================ */
.club{
  --ink:#F2F2F2; --body:#E2E2E2; --soft:#C7C7C7; --muted:#9A9A9A;
  --canvas:#121212; --surface:#1C1C1C; --wash:#1C1C1C;
  --line:#2E2E2E; --line-strong:#6E6E6E; --on-dark:#121212;
  --accent:#F2F2F2; --accent-hover:#FFFFFF; --accent-pressed:#D8D8D8; --on-accent:#121212;
  /* Червоний на тлі інверсії — той самий, що в підвалі §18 */
  --price-sale:#FF7A85;
  background:var(--canvas); color:var(--body) }
.club-in{ max-width:var(--container); margin:0 auto; padding:var(--band-y) var(--pad-page);
  display:grid; grid-template-columns:6fr 5fr; gap:var(--s-8); align-items:start }
.club h2{ color:var(--ink) }
.club-lead{ margin-top:var(--s-4); color:var(--soft); max-width:46ch }

/* Три рівні. Відсоток — єдина кольорова пляма на всій сторінці:
   закон 2 дозволяє червоний рівно для вигоди, а знижка це вона і є. */
.tiers{ display:grid; margin-top:var(--s-7) }
.tiers li{ display:grid; grid-template-columns:1fr auto; gap:var(--s-4);
  align-items:baseline; padding:var(--s-5) 0;
  border-top:var(--hairline) solid var(--line) }
.tiers li:last-child{ border-bottom:var(--hairline) solid var(--line) }
.tier-name{ font-family:var(--font-display); font-weight:500; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink) }
.tier-cond{ margin-top:var(--s-2); font-size:14px; line-height:1.5; color:var(--muted) }
.tier-off{ text-align:right }
.tier-off b{ display:block; font-family:var(--font-display); font-weight:300;
  font-size:clamp(24px,2.4vw,30px); line-height:1; letter-spacing:.02em;
  color:var(--price-sale); font-variant-numeric:tabular-nums }
.tier-off span{ display:block; margin-top:var(--s-2); font-size:13px; color:var(--muted) }
.club-form{ display:grid; gap:var(--s-3) }
.club-form p{ color:var(--soft); font-size:14px; line-height:1.6 }
.club-row{ display:flex; gap:var(--s-3); flex-wrap:wrap }
.club-form input{ flex:1 1 220px; min-width:0; height:54px; padding:0 var(--s-4);
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:transparent; border:var(--hairline) solid var(--line-strong);
  border-radius:var(--r-sm) }
.club-form input::placeholder{ color:var(--muted) }
.club-form input:focus{ outline:none; border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink) }
.club-form .fine{ font-size:13px; color:var(--muted) }
.club-form .fine a{ color:var(--soft); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px }

/* ============================================================
   РОЗМІР і ДОВІРА
   ============================================================ */
.sizeband{ border-top:var(--hairline) solid var(--line) }
.sizeband-in{ max-width:var(--container); margin:0 auto;
  padding:var(--sec-y) var(--pad-page);
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--s-6) }
.sizeband p{ margin-top:var(--s-3); color:var(--soft); max-width:56ch }
/* Посилання всередині абзацу — тихе підкреслення, як у довідці. */
.sizeband p a{ color:var(--ink); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:4px;
  text-decoration-color:var(--line-strong) }
.sizeband p a:hover{ text-decoration-color:currentColor }

.trust-band{ border-top:var(--hairline) solid var(--line) }
.trust-band-in{ max-width:var(--container); margin:0 auto;
  padding:var(--sec-y) var(--pad-page);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-5) }
/* Вирівнювання по центру, як у панелі покупки: зсув на 2px був би
   поза шкалою відступів (§11 — база 4px). */
.trust-band li{ display:flex; align-items:center; gap:var(--s-3);
  font-size:15px; color:var(--body) }
.trust-band svg{ flex:0 0 auto; color:var(--muted) }
/* Кожна обіцянка веде до своїх умов. Колір той самий, що в рядку:
   це не заклик, а можливість перевірити. */
.trust-band a{ color:inherit }
.trust-band a:hover{ color:var(--ink); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:4px }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1023px){
  /* Рейка на всю ширину, кадри під нею поруч */
  .hero{ grid-template-columns:repeat(2,minmax(0,1fr)); min-height:0 }
  .hero-rail{ grid-column:1 / -1; border-right:0;
    border-bottom:var(--hairline) solid var(--line);
    padding:var(--s-7) var(--pad-page) }
  .hero-panel{ aspect-ratio:3/4 }
  .hero-panel:first-of-type{ border-left:0 }
  .fabric-in{ grid-template-columns:minmax(0,1fr); gap:var(--s-6) }
  .fabric-shot{ aspect-ratio:16/9 }
  .club-in{ grid-template-columns:minmax(0,1fr); gap:var(--s-7) }
}
@media (max-width:739px){
  .hero{ grid-template-columns:minmax(0,1fr) }
  /* Рейка під кадрами: 32 від кадру, 32 між текстом і каталогом,
     32 знизу — разом із полем наступного блоку рівно 64 */
  .hero-rail{ gap:var(--s-6); padding:var(--s-6) var(--pad-page) }
  /* Вхід у каталог — квадрати, як у шторці, а не список */
  .hero-links, .hero-all{ display:none }
  .hero-sq{ display:grid }
  /* Другий кадр не ставимо під першим — так він з'їдав би ще один
     екран до того, як людина дійде до товару. Кадри лягають у стрічку
     з гортанням убік: обидва на місці, висота як в одного.

     Кадр вужчий за екран навмисно — край сусіднього видно, і тоді
     зрозуміло, що стрічку можна гортати. Смуга прокрутки схована:
     вона тут зайва, а підказка — сам кадр.

     Стрічка перед текстом: одяг продає фотографія, заголовок читають після. */
  .hero-frames{ display:flex; order:-1; overflow-x:auto; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none }
  .hero-frames::-webkit-scrollbar{ display:none }
  .hero-panel{ flex:0 0 86%; scroll-snap-align:start; aspect-ratio:4/5; border-left:0 }
  /* Другий кадр стає на місце правим краєм: ліворуч від нього лишається
     той самий край сусіда. Інакше стрічка не має куди докрутитися і
     Chrome тримає її між кадрами. */
  .hero-panel.is-second{ scroll-snap-align:end; border-left:var(--hairline) solid var(--line) }
  .tiers li{ grid-template-columns:minmax(0,1fr); gap:var(--s-3) }
  .tier-off{ text-align:left }
  .tier-off b{ display:inline }
  .tier-off span{ display:inline; margin-left:var(--s-2) }
  .facts{ gap:var(--s-5) }
  /* «Тканини LOOLA» і посилання поруч на телефон не вміщаються.
     Хай переходить посилання — заголовок ламався навпіл. */
  .fabric .sec-head{ flex-wrap:wrap }
  .fabric .sec-head h2{ white-space:nowrap }
  .trust-band-in{ grid-template-columns:minmax(0,1fr); gap:var(--s-4) }
  .sizeband-in{ grid-template-columns:minmax(0,1fr); gap:var(--s-5) }
  .strip .card{ flex:0 0 62vw }
  .club-form input{ flex:1 1 100% }
  .club-row .btn{ width:100% }
}