/* ФМ Форма — первый экран */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--gf-ff, system-ui, sans-serif);
  background: #121212;
  color: #f5f5f5;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection {
  background: rgba(176, 80, 16, 0.45);
  color: #fff;
}

.page {
  min-height: 100vh;
  overflow-x: hidden;
}

/* во время перелёта: НЕ трогаем overflow у html/body (ломает fixed-шапку и бар шрифтов).
   Силуэт уходит по траектории внутри вьюпорта; clip только у page по X остаётся. */
html.is-hoodie-flip .hero,
html.is-hoodie-flip .hero-grid,
html.is-hoodie-flip .hero-stage,
html.is-hoodie-flip .col-right {
  overflow: visible;
}

/* —— Hero —— */
.hero {
  --bg: #1a1a1a;
  --bg-glow: #2c2c2c;
  --text: #f5f5f5;
  --muted: rgba(245, 245, 245, 0.72);
  --cta-bg: #ffffff;
  --cta-fg: #1a1a1a;
  --ctrl-active-bg: #ffffff;
  --ctrl-active-fg: #1a1a1a;
  --ctrl-idle-bg: rgba(0, 0, 0, 0.32);
  --ctrl-idle-fg: rgba(255, 255, 255, 0.88);
  --focus: #ffffff;
  --hdr-fg: #f5f5f5;
  --hdr-mark-fg: #1a1a1a;
  position: relative;
  isolation: isolate;
  min-height: 94vh;
  color: var(--text);
  overflow: visible;
  transition: color 0.35s ease;
}

.hero[data-theme="sage"] {
  --bg: #8a8f7e;
  --bg-glow: #9ca193;
  --text: #2a2a2a;
  --muted: rgba(42, 42, 42, 0.78);
  --cta-bg: #1a1a1a;
  --cta-fg: #ffffff;
  --ctrl-active-bg: #1a1a1a;
  --ctrl-active-fg: #ffffff;
  --ctrl-idle-bg: rgba(0, 0, 0, 0.18);
  --ctrl-idle-fg: #2a2a2a;
  --focus: #1a1a1a;
  --hdr-fg: #2a2a2a;
  --hdr-mark-fg: #f5f5f5;
}

.hero[data-theme="terracotta"] {
  /* светлая глина / мягкий абрикос — не кислотный оранжевый */
  --bg: #d8c2a8;
  --bg-glow: #e6d4be;
  --text: #2a2a2a;
  --muted: rgba(42, 42, 42, 0.72);
  --cta-bg: #1a1a1a;
  --cta-fg: #ffffff;
  --ctrl-active-bg: #1a1a1a;
  --ctrl-active-fg: #ffffff;
  --ctrl-idle-bg: rgba(0, 0, 0, 0.14);
  --ctrl-idle-fg: #2a2a2a;
  --focus: #1a1a1a;
  --hdr-fg: #2a2a2a;
  --hdr-mark-fg: #f5f5f5;
}

.hero[data-theme="burgundy"] {
  /* приглушённый винный, без кричащего красного */
  --bg: #4a242c;
  --bg-glow: #5c323a;
  --text: #f3ecea;
  --muted: rgba(243, 236, 234, 0.72);
  --cta-bg: #ffffff;
  --cta-fg: #1a1a1a;
  --ctrl-active-bg: #ffffff;
  --ctrl-active-fg: #1a1a1a;
  --ctrl-idle-bg: rgba(0, 0, 0, 0.28);
  --ctrl-idle-fg: rgba(255, 255, 255, 0.88);
  --focus: #ffffff;
  --hdr-fg: #f3ecea;
  --hdr-mark-fg: #1a1a1a;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at 50% 42%, var(--bg-glow) 0%, transparent 70%),
    var(--bg);
  transition: background 0.55s ease;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.35fr) minmax(180px, 0.9fr);
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 94vh;
  padding:
    72px
    clamp(16px, 4vw, 56px)
    max(48px, calc(28px + env(safe-area-inset-bottom)));
}

.col-left {
  max-width: 340px;
  align-self: center;
}

.col-left h1 {
  margin: 0 0 14px;
  font-size: clamp(2.05rem, 3.7vw, 3.5rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.025em;
}

.lead {
  margin: 0 0 18px;
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.48;
  color: var(--muted);
  max-width: 30ch;
}

.cta-wrap { margin-bottom: 18px; }

.cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.cta:hover { transform: scale(1.03); filter: brightness(0.97); }
.cta:active { transform: scale(0.98); }
.cta:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.cta.is-loading { opacity: 0.85; pointer-events: none; }

.cta-fact {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  max-width: 28ch;
}

.sizes-label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--muted);
}

.size-row {
  display: flex;
  gap: 10px;
}

.size-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ctrl-idle-bg);
  color: var(--ctrl-idle-fg);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.size-btn:hover:not(.is-active) {
  transform: scale(1.05);
  filter: brightness(1.08);
}

.size-btn.is-active {
  background: var(--ctrl-active-bg);
  color: var(--ctrl-active-fg);
}

.sizes.is-nudge .size-row {
  animation: size-nudge 0.45s ease;
}

@keyframes size-nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
}

/* Stage / product */
.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(62vh, 640px);
  align-self: stretch;
  overflow: visible;
}

.hoodie-main-wrap {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  aspect-ratio: 3 / 4;
  transform-origin: 50% 45%;
  will-change: transform, opacity;
}

.hoodie-main {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.35));
  user-select: none;
  pointer-events: none;
}

.hoodie-shadow {
  display: none;
}

.slogan {
  position: absolute;
  left: 54%;
  bottom: 4%;
  z-index: 3;
  transform: translateX(-50%);
  margin: 0;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  text-align: center;
}

.col-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  padding: 8px 0 28px;
  min-height: min(62vh, 640px);
}

.price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  /* оператор: цену ниже на главном экране */
  margin-top: clamp(56px, 14vh, 160px);
}

.price-now {
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
}

.price-old {
  font-size: 0.95rem;
  color: var(--muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.price-num {
  font-variant-numeric: tabular-nums;
}

.hoodie-next {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  width: clamp(88px, 12vw, 132px);
  border-radius: 0;
  overflow: visible;
  transform-origin: center center;
  will-change: transform, opacity;
}

.hoodie-next img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
  border-radius: 0;
  display: block;
}

/* flip / hover ведёт GSAP (этап 7) */

@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero,
  .cta,
  .size-btn,
  .hoodie-next {
    transition: none !important;
  }
  .sizes.is-nudge .size-row {
    animation: none;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "stage stage"
      "left right";
    min-height: 94vh;
    padding-top: 64px;
    padding-bottom: 48px;
    gap: 20px;
  }

  .hero { min-height: 94vh; }
  .hero-stage { grid-area: stage; min-height: min(52vh, 560px); }
  .col-left { grid-area: left; max-width: none; }
  .col-right {
    grid-area: right;
    min-height: auto;
    justify-content: flex-start;
    gap: 28px;
    padding: 0;
  }

  .slogan { bottom: 2%; }
}

/* Phone ~390 */
@media (max-width: 640px) {
.hero,
.hero-grid {
    min-height: 94vh;
  }

.hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "meta"
      "left";
    padding: 56px 16px max(48px, calc(28px + env(safe-area-inset-bottom)));
    gap: 16px;
  }

  .hero-stage {
    grid-area: stage;
    min-height: 46vh;
  }

  .hoodie-main-wrap { width: min(100%, 360px); }

  .col-right {
    grid-area: meta;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .price { align-items: flex-start; text-align: left; }
  .price-now { font-size: 1.7rem; }

  .hoodie-next { width: 84px; }

  .price { margin-top: 28px; }

  .col-left { grid-area: left; }

  .col-left h1 {
    font-size: 2rem;
    max-width: 12ch;
  }

  .lead { max-width: none; font-size: 0.95rem; }

  .slogan {
    left: 50%;
    bottom: 0;
    white-space: normal;
    max-width: 90%;
    font-size: 0.78rem;
  }

  .sizes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
  }

  .sizes-label { margin: 0; }
}