/* =========================================================
   CHICA DIVINE — DROP 01
   Token system (референс дизайна — ssworldtour.ru):
   colors  — white / black / gray, без цветных акцентов
   type    — единая гротескная гарнитура (Inter) для всего UI,
             uppercase + letter-spacing в навигации, как в референсе
   signature — the scrub-viewer framed as a garment hang-tag
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --black: #111111;
  --black-soft: #1c1c1c;
  --white: #ffffff;
  --paper: #f7f6f4;
  --paper-dim: #efeeeb;
  --gray: #8a8a86;
  --line: rgba(17,17,17,0.1);
  --line-on-dark: rgba(255,255,255,0.14);

  --font-display: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif;

  --nav-h: 76px;
  --container: 1360px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img, video{ display:block; max-width:100%; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; }

.eyebrow{
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 500;
}

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 32px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- NAV ----------
   Плавает поверх hero прозрачным слоем (hero светлый — текст чёрный),
   после скролла получает сплошной фон — .scrolled добавляется скриптом,
   .nav-solid — статично на страницах без hero. */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 60;
  height: var(--nav-h);
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding: 0 32px;
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--black);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.nav.scrolled, .nav.nav-solid{
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  color: var(--black);
}
.nav-links{ grid-column:1; justify-self:start; display:flex; gap:28px; }
/* Прописные 13px и смешанный регистр 19px центрируются по-разному: у ссылок
   оптический центр глифов оказывается на ~2px выше логотипа. Компенсируем —
   только в шапке, в мобильной выпадающей панели этот сдвиг не нужен. */
@media (min-width: 861px){ .nav-links{ transform: translateY(2px); } }
.nav-links a{
  font-size: 13px; letter-spacing:1.6px; text-transform:uppercase;
  font-weight:500; color: inherit;
  padding-bottom:4px;
  border-bottom: 1px solid transparent;
  transition: opacity .15s ease;
}
.nav-links a:hover{ opacity:.5; }
.logo{
  grid-column:2; justify-self:center;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.nav-icons{ grid-column:3; justify-self:end; display:flex; gap:22px; }
.nav-icons button{ background:none; border:none; padding:4px; color:inherit; }
.nav-icons svg{ width:19px; height:19px; stroke-width:1.4; }
.cart-count{
  font-family: var(--font-body); font-size:10px; font-weight:600; background:var(--black); color:var(--white);
  border-radius:50%; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
  position:relative; top:-8px; left:-6px;
}
/* бургер — две линии, складывающиеся в ✕ */
.nav-burger{
  grid-column:1; justify-self:start; display:none;
  position:relative; width:22px; height:15px;
  background:none; border:none; padding:0; color:inherit;
}
.nav-burger span{
  position:absolute; left:0; right:0; height:1.5px; background:currentColor;
  transition: transform .3s cubic-bezier(.16,.84,.28,1);
}
.nav-burger span:nth-child(1){ top:2px; }
.nav-burger span:nth-child(2){ bottom:2px; }
.nav-burger.is-open span:nth-child(1){ transform: translateY(4.75px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ transform: translateY(-4.75px) rotate(-45deg); }

@media (max-width: 860px){
  /* панель всегда во flex-потоке, видимостью управляет .is-open —
     так открытие можно анимировать, а не дёргать display */
  .nav-links{
    display:flex;
    /* fixed, а не absolute: внутри grid абсолютный блок отсчитывается от своей
       колонки и упирается в паддинги шапки — панель получалась узкой.
       Шапка и сама fixed без transform, поэтому вложенный fixed берёт вьюпорт. */
    grid-column: 1 / -1; justify-self: stretch;
    position:fixed; top:var(--nav-h); left:0; width:100vw;
    flex-direction:column; align-items:stretch; gap:0;
    background: var(--white);
    border-bottom:1px solid var(--line);
    padding: 8px 0 20px;
    opacity:0; visibility:hidden; transform: translateY(-10px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.16,.84,.28,1), visibility .25s;
  }
  .nav-links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav-links a{
    color: var(--black);
    text-align:center; width:100%;
    padding:18px 24px; border-bottom:none;
    font-size:13px; letter-spacing:2px;
  }
  .nav-burger{ display:block; }
  .logo{ font-size:18px; }
}

/* ---------- HERO ----------
   Во весь экран при открытии сайта — 100vh/100dvh, ничего не видно ниже
   без скролла. Nav зафиксирован поверх и не занимает место в потоке.
   Композиция: нимб → пиксельные крылья → вордмарк → дроп. Крылья закрыты,
   на :hover/:focus-visible раскрываются и открывают CTA между собой. */
.hero{
  position:relative;
  height: 100vh;
  height: 100dvh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 60% 45% at 50% 38%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--white) 0%, var(--paper) 58%, var(--paper-dim) 100%);
  overflow:hidden;
}
.card-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.look-item img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.ph-label{
  position:absolute; bottom:18px; left:18px;
  font-family: var(--font-body); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; opacity:.5;
  padding:4px 8px; border:1px solid currentColor;
}
/* --- центральный лок-ап --- */
.hero-stage{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  padding-bottom: 4vh;
}
.hero-trigger{
  position:relative;
  background:none; border:none; padding:0;
  display:block; line-height:0;
  cursor:pointer;
}
.hero-trigger:focus{ outline:none; }
.hero-trigger:focus-visible{ outline:1px solid var(--line); outline-offset:18px; }
/* Графика — растровые элементы, вырезанные из исходного изображения
   (images/wing-left.png, wing-right.png, star.png). image-rendering: pixelated
   обязателен: без него браузер сглаживает пиксельные блоки при масштабировании
   и вся пиксельная эстетика исходника пропадает. */
.hero-art{
  position:relative;
  display:block;
  width: clamp(270px, 38vw, 470px);
}
.hero-wings{
  display:flex; align-items:flex-start; justify-content:center;
}
/* Оба крыла — ОДНА и та же картинка; правое зеркалится контейнером.
   Исходные вырезы левого/правого крыла чуть различаются (559×607 против 555×603),
   и при использовании обоих стороны визуально не совпадали — отсюда ощущение
   «неровной» анимации. Зеркалом симметрия точная по определению. */
.hero-wing-slot{ display:block; width:50%; }
.hero-wing-slot.is-mirrored{ transform: scaleX(-1); }
/* Покой — ровно поза с исходника (rotate 0, масштаб 1), картинка не тронута.
   Раскрытие — размах от «плеча»: крыло не едет вбок, а проворачивается на
   шарнире и одновременно расходится и подрастает. Точка вращения (92% 18%) —
   внутренний верх крыла, то есть место крепления; без неё движение читается
   как сдвиг двух картинок, а не как размах.
   Кривая с лёгким перелётом даёт «поймали воздух и осели». */
.hero-wing{
  display:block; width:100%; height:auto;
  image-rendering: pixelated;
  transform-origin: 92% 18%;
  transform: rotate(0) translateX(0) scale(1);
  transition: transform 1s cubic-bezier(.22,1.12,.36,1);
}
.hero-stage:hover .hero-wing,
.hero-trigger:focus-visible .hero-wing,
.hero-stage.is-open .hero-wing{ transform: rotate(-9deg) translateX(-34%) scale(1.07); }

/* крест-звезда — фирменный элемент композиции.
   Микроанимация намеренно еле заметная: медленное дыхание яркости и масштаба.
   При prefers-reduced-motion глобальное правило выше её останавливает. */
.hero-star{
  position:absolute; left:50%; top:0;
  width:9.5%; height:auto;
  transform: translate(-50%, -150%);
  image-rendering: pixelated;
  animation: star-breath 3.8s ease-in-out infinite;
}
@keyframes star-breath{
  0%, 100%{ opacity:.65; }
  50%     { opacity:1; }
}
.hero-stage:hover .hero-star,
.hero-trigger:focus-visible .hero-star{ animation-duration: 2.4s; }

/* CTA — до наведения не видна, появляется в просвете между раскрытыми крыльями */
.hero-cta{
  position:absolute; left:50%; top:84%;
  display:inline-flex; align-items:center; gap:8px;
  background: var(--white); color: var(--black);
  border:1px solid var(--black);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  line-height:1; white-space:nowrap;
  padding:12px 18px;
  pointer-events:none;
  opacity:0;
  transform: translate(-50%,-50%) scale(.94);
  transition: opacity .4s ease, transform .5s cubic-bezier(.16,.84,.28,1);
}
.hero-stage:hover .hero-cta,
.hero-trigger:focus-visible .hero-cta,
.hero-stage.is-open .hero-cta{
  opacity:1;
  transform: translate(-50%,-50%) scale(1);
  transition-delay: .22s;
}

/* вордмарк */
.hero-wordmark{
  margin: clamp(36px, 6vh, 64px) 0 0;
  text-align:center;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight:500; text-transform:uppercase;
  letter-spacing:.5em; text-indent:.5em;
  color: var(--black);
}
.hero-drop{
  display:block; margin-top:14px;
  font-size:10px; font-weight:500;
  letter-spacing:.32em; text-indent:.32em;
  color: var(--gray);
}

/* Тач-устройства: hover нет, поэтому раскрытие проигрывается по тапу —
   скрипт вешает .is-open и только после анимации уводит к каталогу.
   Крылья специально НЕ раскрыты заранее, иначе анимацию не увидеть. */
@media (hover: none){
  .hero-art{ display:flex; flex-direction:column; align-items:center; }
  /* Кнопка здесь в обычном потоке, а не абсолютная. Сдвиг translate(-50%,-50%)
     из десктопных правил (в т.ч. для .is-open) её бы увело влево — гасим оба. */
  .hero-cta,
  .hero-stage.is-open .hero-cta{
    position:static;
    opacity:1; transform:none;
    margin-top: 26px;
  }
}
@media (max-width: 600px){
  .hero-wordmark{ letter-spacing:.36em; text-indent:.36em; }
  /* при раскрытии крылья разъезжаются на четверть своей ширины в каждую сторону —
     композицию приходится ужимать, иначе на узком экране их срезает по краям */
  .hero-art{ width: min(60vw, 230px); }
}

/* ---------- SECTION SHELL ---------- */
section{ padding: 96px 0; }
.section-head{ margin-bottom: 48px; max-width: 640px; }
.section-head h2{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -.01em;
  margin: 10px 0 0;
}

/* ---------- ABOUT ---------- */
.about{ background: var(--white); color: var(--black); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about .eyebrow{ color: var(--gray); }
.about-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:64px; align-items:start; }
.about-copy p{ font-size: 15px; font-weight:300; color: #454542; max-width: 46ch; }
@media (max-width: 860px){ .about-grid{ grid-template-columns: 1fr; gap:32px; } }

/* ---------- CATALOG ---------- */
.catalog-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
@media (max-width: 720px){ .catalog-grid{ grid-template-columns: 1fr; } }

.product-card{
  background: var(--white);
  cursor: pointer;
  overflow:hidden;
}
.product-card:focus-visible{ outline: 2px solid var(--black); outline-offset:3px; }
.card-media{
  aspect-ratio: 3/4; position:relative; overflow:hidden;
  background: var(--paper-dim);
}
.card-media img{ transition: opacity .35s ease; }
.card-media .img-hover{ opacity:0; }
.product-card:hover .card-media .img-base{ opacity:0; }
.product-card:hover .card-media .img-hover{ opacity:1; }
.card-body{ padding: 20px 4px 0; text-align:center; }
.card-name{ font-size:15px; font-weight:400; text-transform:lowercase; letter-spacing:.01em; }
.card-price{ font-family: var(--font-body); font-size:14px; font-weight:300; color: var(--gray); margin-top:6px; }

/* ---------- GENERIC PLACEHOLDER SILHOUETTE (svg) ---------- */
.silhouette-wrap{ width:60%; height:70%; opacity:.9; }
.silhouette-wrap svg{ width:100%; height:100%; }

/* ---------- LOOKBOOK ---------- */
.lookbook{ background: var(--paper); }
/* Лента листается ТОЛЬКО стрелками. Прокрутку не отключить через overflow:
   hidden — он заодно блокирует и программный scrollBy. Поэтому окно режет
   содержимое (overflow:hidden на обёртке), а сама лента сдвигается transform-ом
   из обработчиков стрелок: перетащить её пальцем или трекпадом нельзя. */
.lookbook-carousel{ position:relative; }
.lookbook-viewport{ overflow:hidden; }
.lookbook-strip{
  display:flex; gap:20px;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.look-item{
  flex: 0 0 auto; width: 300px; aspect-ratio: 3/4;
  position:relative; overflow:hidden;
  background: var(--black-soft);
}
.look-item .ph-label{ color: var(--paper); }
.lookbook-arrow{
  position:absolute; top:calc(50% - 6px); transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background: var(--white); border:1px solid var(--line);
  font-size:20px; line-height:1; color:var(--black);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.lookbook-arrow.prev{ left:-10px; }
.lookbook-arrow.next{ right:-10px; }
.lookbook-arrow:hover{ background: var(--black); color: var(--white); }
/* На краях ленты стрелка гасится, чтобы не выглядела рабочей впустую. */
.lookbook-arrow:disabled{ opacity:.25; pointer-events:none; }
@media (max-width: 480px){
  .lookbook-arrow{ width:36px; height:36px; font-size:17px; }
  .lookbook-arrow.prev{ left:2px; }
  .lookbook-arrow.next{ right:2px; }
}

/* ---------- MODAL / VIEWER ---------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(17,17,17,.75);
  display:none; align-items:center; justify-content:center;
  z-index:100; padding: 24px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background: var(--white); max-width: 980px; width:100%;
  max-height: 92vh; overflow-y:auto;
  display:grid; grid-template-columns: 1.1fr .9fr;
  position:relative;
}
@media (max-width: 820px){ .modal{ grid-template-columns: 1fr; } }
.modal-close{
  position:absolute; top:14px; right:14px; z-index:20;
  background: var(--black); color: var(--white); border:none;
  width:34px; height:34px; font-size:16px;
}

/* hang-tag framed scrub viewer — SIGNATURE ELEMENT */
.tag-frame{
  position:relative; background: var(--black);
  padding: 18px;
}
.tag-frame::before{
  content:""; position:absolute; inset:8px;
  border: 1px dashed var(--line-on-dark);
  pointer-events:none;
}
.scrub-area{
  position:relative; aspect-ratio: 3/4; overflow:hidden;
  touch-action: pan-y;
  cursor: ew-resize;
}
.scrub-area img{ width:100%; height:100%; object-fit:cover; }
/* Товар без съёмки: силуэт-заглушка по центру. Курсор-стрелки тут не нужны —
   крутить нечего, иначе интерфейс обещает то, чего нет. */
.scrub-area.is-static{
  display:flex; align-items:center; justify-content:center;
  cursor: default; color: var(--paper); opacity:.55;
}
.scrub-hint{
  position:absolute; top:14px; left:14px; right:14px;
  display:flex; justify-content:space-between;
  font-family: var(--font-body); font-size:10px; letter-spacing:.06em;
  color: var(--white); text-transform:uppercase; opacity:.7; z-index:5;
  pointer-events:none;
}
.scrub-progress-track{
  position:absolute; left:18px; right:18px; bottom:18px; height:2px;
  background: var(--line-on-dark); z-index:5;
}
.scrub-progress-fill{
  height:100%; width:0%; background: var(--white);
  transition: width .03s linear;
}
.scrub-angle{
  position:absolute; bottom:26px; right:18px;
  font-family: var(--font-body); font-size:11px; color: var(--white); z-index:6;
}

.modal-info{ padding: 34px 32px; display:flex; flex-direction:column; }
.modal-info h3{ font-size:19px; font-weight:400; text-transform:lowercase; letter-spacing:.01em; margin: 6px 0 4px; }
.modal-price{ font-family: var(--font-body); font-size:15px; font-weight:300; color: var(--gray); margin-bottom:20px; }
.modal-desc{ font-size:14px; font-weight:300; color:#3a3a38; max-width: 46ch; margin-bottom:24px; }

.size-select{ display:flex; gap:10px; margin-bottom:22px; }
.size-btn{
  border:1px solid var(--black); background:transparent;
  padding:10px 18px; font-family: var(--font-body); font-size:13px;
}
.size-btn.active{ background: var(--black); color: var(--white); }

.btn-primary{
  font-family: var(--font-body); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background: var(--black); color: var(--white); border:none; padding:16px 22px;
  margin-top:auto;
  transition: background .2s ease;
}
.btn-primary:hover{ background: var(--black-soft); }
.btn-primary:disabled{ background: var(--gray); cursor:not-allowed; }

.care-note{ font-family: var(--font-body); font-size:11px; color: var(--gray); margin-top:14px; }

/* ---------- CART DRAWER ---------- */
.cart-overlay{
  position:fixed; inset:0; background: rgba(17,17,17,.5);
  display:none; justify-content:flex-end;
  z-index:110;
}
.cart-overlay.open{ display:flex; }
.cart-drawer{
  background: var(--white); width: 440px; max-width: 100%;
  height: 100%; overflow-y:auto;
  display:flex; flex-direction:column;
  padding: 28px 28px 32px;
}
@media (max-width: 480px){ .cart-drawer{ width:100%; } }
.cart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.cart-head h3{ font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin:0; }
.cart-close{
  background:none; border:none; font-size:18px; color:var(--black); padding:4px;
}
.cart-empty{ font-size:14px; color: var(--gray); }
.cart-items{ display:flex; flex-direction:column; gap:16px; margin-bottom:24px; }
.cart-item{ display:flex; gap:14px; align-items:flex-start; }
.cart-item-media{ width:64px; height:80px; flex-shrink:0; background: var(--paper-dim); overflow:hidden; }
.cart-item-media img{ width:100%; height:100%; object-fit:cover; }
.cart-item-info{ flex:1; }
.cart-item-name{ font-size:14px; text-transform:lowercase; }
.cart-item-size{ font-size:12px; color: var(--gray); margin-top:4px; }
.cart-item-price{ font-size:13px; color: var(--gray); margin-top:4px; }
.cart-item-remove{ background:none; border:none; font-size:14px; color: var(--gray); padding:4px; }
.cart-item-remove:hover{ color: var(--black); }

.cart-form{ display:flex; flex-direction:column; gap:16px; border-top:1px solid var(--line); padding-top:20px; margin-top:auto; }
.cart-form .field{ display:flex; flex-direction:column; gap:6px; }
.cart-form label{ font-family: var(--font-body); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color: var(--gray); }
.cart-form input{
  border:1px solid var(--line); background: transparent; padding:12px 14px; font-size:14px;
}
/* Селекты города и ПВЗ — внешне идентичны полям ввода, но со своей
   стрелкой: нативная стрелка в разных браузерах ломает минимальную вёрстку. */
.cart-form .field-select{
  border:1px solid var(--line); background: transparent; padding:12px 14px; font-size:14px;
  font-family: var(--font-body); color: var(--black); border-radius:0;
  appearance:none; -webkit-appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%),
                    linear-gradient(135deg, var(--black) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 12px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.cart-form .field-select:disabled{ color: var(--gray); border-color: var(--line); }
.cart-form .field-select + .field-select{ margin-top:6px; }

.delivery-toggle{ display:flex; gap:10px; }
.toggle-btn{
  flex:1; border:1px solid var(--black); background:transparent; padding:12px; font-size:12px; font-weight:600;
  font-family: var(--font-body); text-transform:uppercase;
}
.toggle-btn.active{ background: var(--black); color: var(--white); }
.cart-total{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-body); font-size:15px; font-weight:600;
  border-top:1px solid var(--line); padding-top:16px;
}
/* Строки «Товары» и «Доставка» — вспомогательные: без верхней линии,
   мельче и серым, чтобы итоговая сумма оставалась единственным акцентом. */
.cart-total.cart-total-line{
  border-top:none; padding-top:0; font-weight:500; font-size:13px; color: var(--gray);
}
.cart-total.cart-total-line + .cart-total.cart-total-line{ margin-top:-8px; }
.checkout-note{ font-size:12px; color: var(--gray); }
.checkout-note a{ text-decoration: underline; }
.cart-form .btn-primary{ width:100%; margin-top:4px; }

/* ---------- FOOTER ---------- */
footer{ background: var(--white); color: var(--black); padding: 56px 0 28px; border-top:1px solid var(--line); }
.footer-content{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.footer-logo{ font-family: var(--font-display); font-weight:700; font-size:20px; }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; }
.footer-links a{ font-size:13px; font-weight:500; color: var(--black); }
.footer-links a:hover{ opacity:.6; }
.footer-contacts{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; font-size:13px; color: var(--gray); }
.footer-legal{ margin:0; text-align:center; font-size:12px; line-height:1.7; color: var(--gray); }
.footer-legal a{ color: var(--gray); text-decoration: underline; }
.footer-legal a:hover{ color: var(--black); }
.footer-bottom{
  border-top:1px solid var(--line); margin-top:36px; padding-top:18px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  font-family: var(--font-body); font-size:12px; color: var(--gray);
}
.back-to-top{
  background:none; border:none; font-family: var(--font-body);
  font-size:12px; font-weight:600; letter-spacing:.03em; color: var(--black);
}
.back-to-top:hover{ opacity:.6; }

/* ---------- LEGAL PAGES ---------- */
.legal-body{ padding: calc(var(--nav-h) + 48px) 0 96px; }
.legal-body h1{ font-family: var(--font-body); font-weight:600; font-size: clamp(28px,3.6vw,40px); margin-bottom: 8px; }
.legal-updated{ font-family: var(--font-body); font-size:11px; color: var(--gray); margin-bottom:40px; }
.legal-body h2{ font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-top:40px; }
/* Подзаголовки внутри раздела — тише, чем h2, иначе структура договора читается
   как список равнозначных разделов. */
.legal-body h3{ font-size:14px; font-weight:600; margin-top:28px; margin-bottom:-4px; }
.legal-body p, .legal-body li{ font-size:14px; font-weight:300; color:#2c2c2a; max-width: 74ch; }
.legal-body a.back{ font-family: var(--font-body); font-size:12px; font-weight:500; color: var(--black); }

/* toast */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background: var(--black); color: var(--white); padding:14px 22px;
  font-family: var(--font-body); font-size:12px; letter-spacing:.02em;
  opacity:0; pointer-events:none; transition: all .25s ease; z-index:200;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }