/* Згенеровано web/packages/ui/scripts/sync-maket.mjs з design/maket/e. НЕ ПРАВИТИ руками — правки зникнуть при наступному запуску. */
/* ZRAZU · E «Кіно» — раскладки site і bare: шапка, мобільне меню, підвал-карта сайту, шапка сторінки. Спільний файл. */

/* ---------- Шапка ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid transparent;transition:border-color .3s ease}
.hdr.scrolled,.hdr-bare{border-bottom-color:var(--line)}
.hdr-in{width:min(1200px,calc(100% - 2*var(--gut)));margin-inline:auto;height:var(--hdr);display:flex;align-items:center;gap:20px}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500;padding:0 12px;min-height:40px;display:inline-flex;align-items:center;border-radius:999px;transition:color .2s ease,background-color .2s ease}
.nav a[aria-current]{color:var(--text);background:var(--fill-2)}
.hdr-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.hdr-login{color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500;min-height:40px;display:inline-flex;align-items:center;padding:0 8px;border-radius:10px;white-space:nowrap}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;min-width:44px;padding:0 10px 0 12px;border-radius:999px;border:1px solid var(--line);background:var(--fill-2);color:var(--text);cursor:pointer;transition:background-color .2s ease}
.cart-n{display:inline-grid;overflow:hidden;height:22px;min-width:22px;padding:0 6px;border-radius:11px;background:var(--fill-4);color:var(--text);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:22px;text-align:center}
.cart-n-v{display:block}
.cart-btn.has .cart-n{background:var(--btn-pri-bg);color:var(--btn-pri-fg)}
.menu-btn{display:none;appearance:none;border:1px solid var(--line);background:var(--fill-2);color:var(--text);width:44px;height:44px;border-radius:999px;place-items:center;cursor:pointer}
.mnav{border-top:1px solid var(--line);padding:12px var(--gut) 20px;background:var(--mnav-bg);max-height:calc(100svh - var(--hdr));overflow:auto}
/* Лише основний список меню: сегмент мови в .mnav-tools — теж <nav>, і правила для пунктів ставили його стовпчиком (Р278-25). */
.mnav > nav{display:flex;flex-direction:column;margin-bottom:14px}
.mnav > nav a{color:var(--text);text-decoration:none;font-size:20px;font-weight:600;letter-spacing:-.02em;min-height:52px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.mnav > nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.mnav-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (hover:hover) and (pointer:fine){
  .nav a:hover,.ft-col a:hover,.ft-legal a:hover,.hdr-login:hover{color:var(--text)}
  .theme-btn:hover,.cart-btn:hover{background:var(--fill-4)}
}

/* ---------- Шапка сторінки розділу ---------- */
.page-head{padding:28px 0 8px}
.page-head .crumbs{margin-bottom:22px}
.page-head .lead{margin-bottom:0}
.page-hero{position:relative;overflow:clip;isolation:isolate;padding:28px 0 56px}
.page-hero .crumbs{margin-bottom:22px}
.page-hero .spot{position:absolute;inset:0;pointer-events:none;z-index:-1}
.page-hero .spot i{position:absolute;display:block;border-radius:50%}
.page-hero .spot-a{left:50%;top:10%;width:60vw;height:32vw;max-height:520px;transform:translate(-70%,-30%);background:radial-gradient(closest-side,var(--spot-a),var(--spot-a2) 55%,var(--spot-a0))}
.page-hero .spot-b{left:50%;top:14%;width:60vw;height:34vw;max-height:540px;transform:translate(-10%,-30%);background:radial-gradient(closest-side,var(--spot-b),var(--spot-b2) 55%,var(--spot-b0))}

/* ---------- Підвал: карта сайту ---------- */
.ft{border-top:1px solid var(--line);padding:56px 0 72px;color:var(--text-2);font-size:14px;margin-top:40px}
.ft-in{display:grid;grid-template-columns:1.25fr repeat(5,minmax(0,1fr));gap:32px 24px}
.ft-brand img{width:132px;height:auto;margin-bottom:14px}
.ft-brand p{margin:0;max-width:30ch}
.ft h2{margin:0 0 10px;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.ft-col a{display:flex;align-items:center;min-height:32px;color:var(--text-2);text-decoration:none}
.ft-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 28px;padding-top:24px;border-top:1px solid var(--line)}
.ft-legal p{margin:0;max-width:60ch}
.ft-legal a{color:var(--text-2);text-decoration:none}
[data-theme="light"] .ft-brand img{filter:invert(1)}
.ft-bare{margin-top:0;padding:28px 0 40px}
.ft-bare .ft-legal{border-top:0;padding-top:0}

/* ---------- Світла тема: активний пункт меню й підвал-фінал ----------
   Підвал — фінал скролу: смуга луча зверху і теплий→бузковий тон; заголовки колонок продуктів — кольором продукту. */
html[data-theme="light"] .nav a[aria-current]{background:var(--accent-bg);color:var(--accent-ink)}
html[data-theme="light"] .mnav > nav a[aria-current]{text-decoration-color:var(--hue-ssl)}
html[data-theme="light"] .ft{border-top-color:transparent;background:var(--beam) top/100% 2px no-repeat,linear-gradient(180deg,var(--band-dom),var(--band-mon) 50%,var(--band-ssl))}
html[data-theme="light"] .ft-legal{border-top-color:rgba(var(--tone-ink-c),.14)}
html[data-theme] #ftD{color:var(--hue-dom)}
html[data-theme] #ftS{color:var(--hue-ssl)}
html[data-theme] #ftT{color:var(--hue-tool)}
html[data-theme="light"] .ft-bare{background:none;border-top-color:var(--line)}
/* Смуга розділу на всю ширину: шапка сторінки в тоні продукту (--band з tokens.css), eyebrow — колір продукту,
   H1 — градієнт луча (один ключовий заголовок на сторінку). .page-head стоїть у .wrap — смуга виноситься на всю
   ширину через border-image-outset (це ink overflow: горизонтального скролу не дає). */
html[data-theme="light"] .page-hero{background:linear-gradient(180deg,var(--band) 50%,transparent)}
html[data-theme="light"] .page-hero .spot{opacity:.4}   /* смуга вже дає колір; плями тихіші, щоб текст над ними тримав AA/AAA (eyebrow ≥ 4.66, --text-2 ≥ 7.3) */
html[data-theme="light"] .page-head{border-image:linear-gradient(180deg,var(--band) 40%,transparent) fill 0//0 100vmax 72px}
html[data-theme] .page-hero .eyebrow,html[data-theme] .page-head .eyebrow{background:none;-webkit-text-fill-color:currentColor;color:var(--band-ink)}
html[data-theme] .page-hero .h1,html[data-theme] .page-head .h1{color:var(--beam-solid);background:var(--beam-lg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:fit-content;max-width:100%}
/* Смуга внизу сторінки: секція з FAQ — на всю ширину в тоні розділу, з м'якими краями */
html[data-theme="light"][data-layout="site"] main section:has(> .faq){border-image:linear-gradient(180deg,transparent,var(--band) 64px,var(--band) calc(100% - 64px),transparent) fill 0//56px 100vmax}
/* bare (кошик, оплата, вхід): м'який тон зверху */
html[data-theme="light"] .bare-main{background:linear-gradient(180deg,var(--band),transparent 380px)}

/* ---------- Раскладка bare: вхід, оплата ---------- */
.bare-main{min-height:calc(100svh - var(--hdr) - 120px);padding:40px 0 56px}

/* ---------- Адаптив ---------- */
@media (max-width:1080px){
  .ft-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-brand{grid-column:1/-1}
}
/* 901–940: мобільна шапка ще не ввімкнулась, а десктопна вже не вміщається
   (на 901 в RU бракувало 22 px, в UK — 2 px). Стискаємо відступи, нічого не ховаючи. */
@media (min-width:901px) and (max-width:940px){
  .hdr-in{gap:12px}
  .nav a{padding:0 9px}
  .hdr-tools{gap:8px}
}
@media (max-width:900px){
  .nav,.hdr-login,.hdr:not(.hdr-bare) .hdr-tools > .lang-dd,.hdr:not(.hdr-bare) .hdr-tools > .theme-btn{display:none}
  .menu-btn{display:inline-grid}
}
@media (max-width:760px){
  .ft-in{grid-template-columns:1fr 1fr;gap:24px}
  /* п'ята колонка («Допомога») лишалася сама в ряду з порожньою правою половиною — на всю ширину, посилання у дві колонки */
  .ft-in > nav.ft-col:last-of-type{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-content:start}
  .ft-in > nav.ft-col:last-of-type > h2{grid-column:1/-1}
  .page-head{padding-top:18px}
}
@media (pointer:coarse){
  .cart-btn{height:44px}
  .theme-btn{width:44px;height:44px}
  .nav a,.hdr-login,.ft-col a,.ft-legal a{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
  .ft-col a{display:flex}                    /* посилання підвалу — кожне своїм рядком (inline-flex склеював «Пошук доменуУсі зони») */
  .brand{min-height:44px}
}

/* Р213-4: логотип у підвалі — та сама пара картинок під тему, без invert */
html .ft-brand .ft-lk{margin-bottom:14px}
html .ft-brand .ft-lk img{width:auto;height:26px;margin:0;filter:none}