/* ==========================================================================
   Главная страница
   ========================================================================== */

.gr-home { background: var(--gr-ground); }

/* --- Первый экран ----------------------------------------------------------- */
.gr-hero {
  background: var(--gr-hero-bg);
  color: var(--gr-hero-fg);
  overflow: hidden;
}

/* Двухколоночный первый экран: слева заявление, справа фотография
   в край. Раньше правая половина была пустой на 1354px, а магазин
   одежды открывался вообще без единого снимка. */
.gr-hero__inner {
  max-width: 1570px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 850px) {
  .gr-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

.gr-hero__text {
  padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1rem, 3vw, 2rem) clamp(1.25rem, 2.4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gr-hero__media {
  position: relative;
  min-height: 320px;
  background: #f0f2f0;
}

/* Фото занимает свою половину целиком и уходит в край экрана. */
.gr-hero__media .gr-hero__img,
.gr-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

@media (max-width: 849px) {
  /* На телефоне порядок обратный: сначала кадр, потом заявление —
     иначе первый экран снова становится стеной текста. */
  .gr-hero__media { order: -1; aspect-ratio: 16 / 11; min-height: 0; }
  .gr-hero__media .gr-hero__img,
  .gr-hero__media img { position: static; height: 100%; }
  .gr-hero__text { padding-top: clamp(1.25rem, 4vw, 2rem); }
}

.gr-hero__slogan {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.9;
  /* Заявление должно занимать экран, а не помещаться в строку. */
  font-size: clamp(2.5rem, 10vw, 5.5rem);
  margin: 0;
  color: var(--gr-hero-fg);
}

.gr-hero__slogan em {
  font-style: normal;
  color: var(--gr-hero-em);
}

.gr-hero__sub {
  font-family: var(--gr-mono);
  align-self: flex-start;
  font-size: clamp(0.72rem, 1.4vw, 0.85rem);
  letter-spacing: 0.05em;
  margin: 0.9rem 0 0;
  max-width: 36ch;
  opacity: 0.85;
}

.gr-hero__cta {
  display: inline-block;
  /* .gr-hero__text — флекс-колонка, поэтому inline-block растягивается
     на всю ширину. Прижимаем к левому краю по своему содержимому. */
  align-self: flex-start;
  margin-top: 1.1rem;
  padding: 1em 2em;
  min-height: var(--gr-tap);
  background: var(--gr-ink);
  color: #fff;
  font-family: var(--gr-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.gr-hero__cta:hover { background: var(--gr-mint-deep); color: #fff; }

[data-gr-scheme="dark"] .gr-hero__cta { background: var(--gr-orange); color: var(--gr-ink); }
[data-gr-scheme="mint"] .gr-hero__cta { background: var(--gr-ink); color: #fff; }

/* --- Панель «пищевой ценности» ---------------------------------------------- */
.gr-facts {
  align-self: flex-start;
  font-family: var(--gr-mono);
  font-size: clamp(0.72rem, 1.6vw, 0.78rem);
  line-height: 1.65;
  margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1.5px solid currentColor;
  padding: 0.7rem 0.85rem;
  max-width: 24rem;
}

.gr-facts__row { display: flex; justify-content: space-between; gap: 1rem; }
.gr-facts__row--big { font-size: 0.82rem; font-weight: 700; }
.gr-facts__rule { border-top: 1px solid currentColor; margin: 0.4rem 0; opacity: 0.45; }

.gr-facts__barcode {
  display: flex;
  gap: 1px;
  height: 15px;
  align-items: flex-end;
  margin-top: 0.55rem;
}

.gr-facts__barcode i { display: block; background: currentColor; }

/* --- Витрина ------------------------------------------------------------------- */
.gr-zine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Без разделителей: карточки стыкуются встык. Хайрлайн из gap+подложки
     на разноцветных фонах товаров читался как таблица, а не как витрина. */
  gap: 0;
  /* Врезка занимает две колонки. Если до конца ряда осталась одна,
     она переносится и оставляет дыру. dense подтягивает в неё
     следующую одноколоночную плитку. */
  grid-auto-flow: row dense;
}

@media (max-width: 849px) { .gr-zine { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 549px) { .gr-zine { grid-template-columns: repeat(2, 1fr); } }

.gr-tile { background: var(--gr-ground); display: block; position: relative; }

.gr-tile--product img {
  display: block;
  width: 100%;
  height: auto;
}

.gr-tile__meta { display: block; padding: 0.6rem 0.7rem 0.9rem; }

.gr-tile__title {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gr-ink);
}

.gr-tile__price {
  display: block;
  font-family: var(--gr-mono);
  font-weight: 700;
  font-size: 0.8rem;
  margin-top: 0.15rem;
  color: var(--gr-ink);
}

.gr-tile--product:hover .gr-tile__title { color: var(--gr-mint-deep); }

/* --- Врезка ------------------------------------------------------------------
   Плитка на две колонки. Раньше текст занимал примерно десятую часть её
   площади и читался как пустой чёрный прямоугольник, поэтому кегль поднят
   почти вдвое, а фон ожил.

   Градиент собран из мягких радиальных пятен, а не из filter: blur().
   Блюр на площади ~950x690 пересчитывается каждый кадр и роняет плавность
   прокрутки на телефоне; растянутые радиальные стопы дают тот же эффект
   бесплатно. Движение — transform, то есть на композиторе, без перерисовки.
   -------------------------------------------------------------------------- */
.gr-tile--quote {
  grid-column: span 2;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gr-quote-bg);
  color: var(--gr-quote-fg);
  display: flex;
  align-items: center;
  padding: clamp(1.25rem, 3.5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.88;
  font-size: clamp(1.9rem, 5.2vw, 4.25rem);
}

.gr-tile--quote > span {
  position: relative;
  z-index: 1;
}

/* Два пятна дрейфуют в противофазе — рисунок не повторяется на глаз. */
.gr-tile--quote::before,
.gr-tile--quote::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform;
  pointer-events: none;
}

.gr-tile--quote::before {
  top: -55%;
  left: -30%;
  background: radial-gradient(circle closest-side,
              rgba(127, 186, 163, 0.55), rgba(127, 186, 163, 0) 70%);
  animation: gr-drift-a 26s ease-in-out infinite alternate;
}

.gr-tile--quote::after {
  bottom: -60%;
  right: -25%;
  background: radial-gradient(circle closest-side,
              rgba(212, 85, 42, 0.42), rgba(212, 85, 42, 0) 70%);
  animation: gr-drift-b 34s ease-in-out infinite alternate;
}

@keyframes gr-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14%, 18%, 0) scale(1.25); }
}

@keyframes gr-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.15); }
  to   { transform: translate3d(-16%, -12%, 0) scale(1); }
}

/* Уважаем системную настройку: движение выключается, картинка остаётся. */
@media (prefers-reduced-motion: reduce) {
  .gr-tile--quote::before,
  .gr-tile--quote::after {
    animation: none;
  }
}

/* --- Ссылка в каталог ---------------------------------------------------------- */
.gr-more { padding: clamp(2rem, 5vw, 4rem) 1rem; text-align: center; }

.gr-more__link {
  display: inline-block;
  padding: 1em 2.4em;
  min-height: var(--gr-tap);
  border: 1.5px solid var(--gr-ink);
  color: var(--gr-ink);
  font-family: var(--gr-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.gr-more__link:hover { background: var(--gr-ink); color: #fff; }


/* --- Высота первого экрана -------------------------------------------------
   Товар обязан попадать в первый экран: магазин, который на старте не
   показывает ни одной карточки, заставляет скроллить вслепую.
   Держим герой ниже трёх четвертей вьюпорта, чтобы первый ряд витрины
   выглядывал и было понятно, что ниже есть что смотреть.
   -------------------------------------------------------------------------- */
@media (min-width: 850px) {
  .gr-hero__inner { max-height: 74vh; }
  .gr-hero__text  { max-height: 74vh; }
}

/* --- Мобильный первый экран -------------------------------------------------
   На 844px высоты герой занимал 745px и товар не попадал в экран вовсе.
   Ужимаем кадр и панель: пользователь должен увидеть край первой карточки
   без прокрутки, иначе непонятно, что ниже вообще есть магазин.
   -------------------------------------------------------------------------- */
@media (max-width: 849px) {
  .gr-hero__media { aspect-ratio: 16 / 9; }

  .gr-hero__text {
    padding-top: 1rem;
    padding-bottom: 1.1rem;
  }

  .gr-hero__slogan { line-height: 0.86; }

  .gr-hero__sub { margin-top: 0.7rem; }

  .gr-hero__cta { margin-top: 0.8rem; padding: 0.85em 1.6em; }

  .gr-facts {
    margin-top: 0.85rem;
    padding: 0.5rem 0.7rem;
    line-height: 1.45;
  }

  /* Штрихкод — украшение. На маленьком экране он стоит 25px высоты,
     которые нужнее товару. */
  .gr-facts__barcode { display: none; }
}

/* --- Кадр первого экрана кликабелен ------------------------------------------
   Снимок показывает конкретную футболку, значит должен на неё вести.
   Подпись проявляет, что это ссылка, — без неё кликабельность не читается.
   -------------------------------------------------------------------------- */
.gr-hero__media { display: block; text-decoration: none; }

.gr-hero__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  max-width: calc(100% - 1rem);
  padding: 0.7em 1.1em;
  background: var(--gr-ink);
  color: #fff;
  font-family: var(--gr-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease;
}

.gr-hero__media:hover .gr-hero__tag { background: var(--gr-mint-deep); }

.gr-hero__media:focus-visible { outline: 3px solid var(--gr-mint-deep); outline-offset: -3px; }

@media (max-width: 849px) {
  .gr-hero__tag { font-size: 0.62rem; padding: 0.6em 0.9em; }
}