/* ============================================================
   hero.css — экран 1. Поток по содержимому (ТЗ-10 §1.2), кегли из шкалы.
   Пачка — пропорции из макета (§9А.1): ширина 207px, высота авто.
   ============================================================ */

.hero {
  width: 390px; background: var(--c-ivory);
  padding: 22px var(--side) 30px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.hero__eyebrow {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-cap);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--fa-ink);
}
.hero__h1 {
  margin-top: 8px;
  font-family: var(--ff-head); font-weight: 800;
  font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: 0; color: var(--c-ink);
}
.hero__sub {
  margin-top: 12px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--c-muted);
}

.hero__pack {
  margin: 14px 0 4px;
  display: flex; align-items: center; justify-content: center;
}
.hero__pack img {
  width: 207px; height: auto; object-fit: contain;
  filter: drop-shadow(0 9px 24px rgba(46,31,71,.18));
}

.hero__name {
  margin-top: 10px;
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-h3);
  line-height: 1.1; letter-spacing: .3px; text-transform: uppercase; color: var(--fa);
}
.hero__tag {
  margin-top: 4px;
  font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--c-muted);
}

/* ---------- макро-строка (белый пилл, 4 колонки) ---------- */
.mstrip {
  margin-top: 16px; width: 100%;
  display: flex; align-items: stretch;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-strip);
  box-shadow: var(--sh-card);
  padding: 12px 0;
}
.mstrip li {
  flex: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.mstrip li + li { border-left: 1px solid var(--c-border); }
.mstrip b {
  font-weight: 700; font-size: var(--fs-num-md); line-height: 1; color: var(--fa);
}
.mstrip span {
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: 1;
  letter-spacing: .6px; text-transform: uppercase; color: var(--c-muted);
}

.hero__link {
  margin-top: 16px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-cap); letter-spacing: .3px;
  text-transform: uppercase; color: var(--c-ink);
}

/* ---------- селектор вкуса (5 плиток) ---------- */
.fsel {
  margin-top: 8px; width: 100%;
  display: flex; gap: 6px;
  /* ТЗ-11 §2.2 шаг 3: ряд прокручиваем (страховка). Плитки держим равными по
     ширине — единый размер превью пачек из макета; подпись Barlow не вылезает. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.fsel::-webkit-scrollbar { display: none; }
.fsel__t {
  flex: 1 0 0; min-width: 0; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.fsel__ph {
  width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-tile);
}
.fsel__t.is-on .fsel__ph { border: 2px solid var(--fa); }
/* ТЗ-12 §5.2: пачку в плитке селектора увеличили до 85% высоты квадрата. */
.fsel__ph img { height: 85%; width: auto; object-fit: contain; }
.fsel__l {
  font-family: var(--ff-head);
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: 1;
  letter-spacing: .2px; text-transform: uppercase; color: var(--c-muted);
  white-space: nowrap;
}
.fsel__t.is-on .fsel__l { color: var(--fa-ink); }

.hero__cta { margin-top: 22px; }

.hero__ships {
  margin-top: 12px;
  font-size: var(--fs-cap); color: var(--c-muted);
}