/* свои правила магазина: подключаются последними, обновления шаблона их не трогают */

/* На телефоне длинный каталог виден сразу: reveal с порогом по высоте всей
   секции мог оставлять товары прозрачными на небольшом экране. */
@media (max-width: 720px) {
  .section--catalog[data-reveal],
  .section--catalog .catalog-grid[data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

/* Вторичные кнопки на тёмном фоне: не даём браузеру заливать их белым,
   надпись остаётся светлой и читаемой. */
.btn--ghost {
  background: transparent;
  color: var(--fg, #111);
}
.btn--ghost:hover {
  background: var(--surface-2, #f5f5f5);
  color: var(--fg, #111);
}

/* «Сделано на века»: римские цифры крупнее (просьба владельца) */
.b-facts__n { font-size: clamp(28px, 3.2vw, 44px); letter-spacing: .06em; }

/* Первый экран: бейдж, заголовок, подпись и кнопка слева, слайдер товаров справа;
   кадры изделий показываем целиком, без обрезки (contain) */
.hero--slider .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 20px 56px;
  align-items: center;
}
/* текст собран в колонку и отцентрован по высоте относительно слайдера */
.hero--slider .hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  align-self: center;
}
.hero--slider .hero__text > * { margin-block: 0; }
.hero--slider .hero__slider {
  margin-top: 0;
  /* слайдер на 20% меньше своей колонки, по центру */
  width: 80%;
  justify-self: center;
  align-self: center;
}
/* заголовок держим в левой колонке, не заезжает под слайдер */
.hero--slider h1 { font-size: clamp(40px, 4.6vw, 78px); overflow-wrap: break-word; }
.hero--slider .hero__slide img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--surface, #f2f2f2);
}
@media (max-width: 900px) {
  .hero--slider .hero__inner { grid-template-columns: 1fr; }
  .hero--slider .hero__slider { width: 100%; }
}