/* ============================================================================
 * GORILLA - ЕДИНАЯ СИСТЕМА ЛЕЙАУТА (контейнер, секции, заголовки, кнопки)
 * ----------------------------------------------------------------------------
 * Единственный источник правды для ШИРИНЫ КОНТЕЙНЕРА и ВЕРТИКАЛЬНОГО РИТМА
 * СЕКЦИЙ. Все шаблоны (главная, /lichnosti/, /platformy/, коллекции, хедер,
 * футер) ссылаются на одни и те же токены - контейнер меняется одной строкой.
 *
 * Грузится после gorilla-type-scale, до critical и стилей секций.
 * ============================================================================ */
:root {
  /* --- Контейнер: шире прежних 1200/1400, одинаковые боковые поля везде --- */
  --g-container-max: 1440px;
  --g-container-pad: clamp(19px, 4vw, 48px);

  /* --- Вертикальный ритм секций (v1.1.1: ↓ по фидбеку - были «гигантские») --- */
  --g-section-pad: clamp(36px, 5vw, 64px);

  /* --- Отступ под заголовком секции --- */
  --g-title-gap: clamp(20px, 3vw, 32px);

  /* --- Единое скругление карточек (persona-card, платформы, соцсети) --- */
  --g-radius-card: clamp(20px, 3vw, 28px);

  /* --- Единый зазор карточной сетки (и его половина - для каруселей) --- */
  --g-grid-gap: clamp(28px, 4vw, 40px);
  --g-grid-gap-half: clamp(14px, 2vw, 20px);
}

/* --- Контейнер ------------------------------------------------------------ */
.g-container {
  width: 100%;
  max-width: var(--g-container-max);
  margin-inline: auto;
  padding-inline: var(--g-container-pad);
}

/* --- Секция --------------------------------------------------------------- */
.g-section { padding-block: var(--g-section-pad); }
.g-section--white { background-color: #fff; }
.g-section--dark { background-color: var(--g-color-navy); }
/* v2.4.8: зелёная секция - третий фон для чередования с чёрными */
.g-section--green { background-color: var(--g-color-green); }
.g-section--green .g-section__title { color: #000; }
.g-section--green .g-section__title::before { background-color: #000; }
/* компактная полоса (стат-строка и подобные узкие ленты) */
.g-section--tight { padding-block: clamp(32px, 4vw, 52px); }

/* Две белые секции подряд: двойной зазор (низ одной + верх другой) читался
   как дыра - верхний паддинг схлопываем, ритм задаёт только нижний. */
.g-section--white + .g-section--white { padding-top: 0; }

/* --- Заголовок секции ------------------------------------------------------
   Тот же рецепт, что у .persona-list__title на /lichnosti/: Jawbreak, КАПС,
   по центру, «клыки»-корона сверху (::before добавляется в gorilla-type-scale
   общим списком селекторов). На тёмных секциях - белые текст и корона. */
.g-section__title {
  font-family: 'Jawbreak Sans Cut', 'DIN 2014', system-ui, sans-serif;
  color: var(--g-color-navy);
  font-weight: 900;
  line-height: var(--g-lh-heading, 1.1);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: var(--g-fs-h1);
  margin: 0 0 var(--g-title-gap);
}
.g-section--dark .g-section__title { color: #fff; }
.g-section--dark .g-section__title::before { background-color: #fff; }

/* Вводный абзац под заголовком секции - по центру, ограниченной ширины. */
.g-section__lead {
  max-width: 62ch;
  margin: calc(-1 * var(--g-title-gap) + 16px) auto var(--g-title-gap);
  text-align: center;
  color: #4a4f5c;
  font-size: var(--g-fs-lead);
  line-height: 1.6;
}

/* Центрированный ряд под контентом секции (кнопка «все …»). */
.g-section__more { text-align: center; margin-top: var(--g-title-gap); }

/* --- Кнопки -----------------------------------------------------------------
   Один компонент вместо hero-cta-* / lifestyle-cta-* / g-catalog__more-btn:
   одинаковые паддинги, кегль и анимация на всём сайте. */
.g-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 34px;
  border: 0;
  border-radius: var(--g-radius-pill, 999px);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.15s ease;
}
.g-btn:hover { transform: scale(1.04); }

.g-btn--green {
  background-color: var(--g-color-green);
  color: #0a0a0a; /* v2.6.6: бренд-стандарт - чёрный текст на зелёном */
  box-shadow: 0 4px 20px rgb(var(--g-green-rgb) / 0.40);
}
/* v2.6.6: единый ховер зелёных кнопок - «бумага» с тёмным текстом (эталон
   .nav-btn-try «Купить» в шапке) */
.g-btn--green:hover { background-color: var(--g-color-paper, #f6f7f8); color: #0a0a0a; }

/* контурная на тёмном фото/фоне; ховер - полная инверсия (зеркально
   .g-btn--ghost-dark на светлых секциях) */
.g-btn--ghost-light {
  background-color: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.70);
  padding: 12px 32px;
}
.g-btn--ghost-light:hover {
  border-color: #fff;
  background-color: #fff;
  color: var(--g-color-navy);
}

/* контурная на светлом фоне */
.g-btn--ghost-dark {
  background-color: transparent;
  color: var(--g-color-navy);
  border: 2px solid var(--g-color-navy);
  padding: 12px 38px;
}
.g-btn--ghost-dark:hover {
  background-color: var(--g-color-navy);
  color: #fff;
}

@media (max-width: 767px) {
  /* v1.6.0: компактнее (фидбек «кнопки гигантские») */
  .g-btn { font-size: 13px; padding: 12px 22px; }
  .g-btn--ghost-light, .g-btn--ghost-dark { padding: 10px 20px; }
}

/* --- Соцсети «Подпишись» -----------------------------------------------------
   Яркий конверсионный блок над футером (template-parts/social-band.php, на
   всех страницах). Инверсия по фидбеку клиента: карточки СРАЗУ в фирменном
   цвете сети (--soc задаётся в разметке; TikTok #FF0050), ховер - светлый:
   белая карточка, цветная иконка. Компактнее прежнего блока с главной. */
.g-social__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--g-grid-gap-half);
}
/* Карточка сети - liquid glass в языке дропдаунов шапки (v1.4.8): тёмное
   стекло с тонкой кромкой и бликом, иконка - фирменным цветом сети (--soc из
   разметки), при наведении карточка заливается цветом сети целиком. */
.g-soc {
  --soc: var(--g-color-navy);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 132px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--g-radius-card);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.10) inset;
  transition: transform .25s ease, box-shadow .25s ease,
              background .25s ease, border-color .25s ease;
}
.g-soc:hover,
.g-soc:focus-visible {
  transform: translateY(-4px);
  background: var(--soc);
  border-color: var(--soc);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.55);
}
.g-soc__icon { width: 34px; height: 34px; color: var(--soc); transition: color .25s ease; }
.g-soc:hover .g-soc__icon,
.g-soc:focus-visible .g-soc__icon { color: #fff; }
.g-soc__name {
  font-family: 'DIN 2014 UI', 'DIN 2014', system-ui, sans-serif; /* v2.4.4: лейбл - без Jawbreak */
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  text-transform: uppercase;
  margin-top: auto;
}
.g-soc__handle {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  overflow-wrap: anywhere;
  transition: color .25s ease;
}
.g-soc:hover .g-soc__handle,
.g-soc:focus-visible .g-soc__handle { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 767px) {
  .g-social__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .g-soc { min-height: 116px; padding: 15px 16px; border-radius: 16px; gap: 8px; }
  .g-soc__icon { width: 28px; height: 28px; }
  .g-soc__name { font-size: 16px; }
  .g-soc__handle { font-size: 11px; }
}

/* --- Футер -----------------------------------------------------------------
   Часть единой оболочки (как .g-container в шапке): 2 колонки меню +
   соцсети. На мобильном соцсети переезжают на свою строку под меню -
   раньше три колонки давились в 390px и «ОБРАТНАЯ СВЯЗЬ» ломалась
   по словам. */
.g-footer {
  background-color: #fff;
  padding: clamp(36px, 5vw, 64px) 0 clamp(24px, 3vw, 36px);
}
.g-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px var(--g-grid-gap);
  margin-bottom: clamp(28px, 4vw, 48px);
}
@media (min-width: 768px) {
  /* соцсети переехали в яркий блок над футером - остались 2 колонки меню */
  .g-footer__grid {
    grid-template-columns: repeat(2, max-content);
    column-gap: clamp(64px, 12vw, 200px);
  }
}
.g-footer__col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.g-footer__col a { white-space: nowrap; }
.g-footer__bottom {
  border-top: 1px solid rgb(var(--g-navy-rgb) / 0.25);
  padding-top: clamp(18px, 2.5vw, 26px);
}
.g-footer__copyright {
  margin: 0;
  color: var(--g-color-navy);
  font-family: 'DIN 2014', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: clamp(12px, 2vw, 15px);
  text-align: center;
}


/* ============================ Зум по двойному тапу =========================
   iOS трактует два быстрых тапа как «увеличить», поэтому частые клики по «+»
   в карточке, по стрелкам ряда или по чипам категорий внезапно зумили
   страницу. touch-action: manipulation отключает ИМЕННО двойной тап
   (обычный скролл, свайп ленты и пинч продолжают работать) и заодно убирает
   300ms задержку отклика на тач-экранах. */
a,
button,
[role="button"],
input,
select,
textarea,
label,
.product-pill,
.product-pill__btn,
.product-card,
.g-tab,
.gstream-chip,
.g-catrow__arrow,
.g-catrow__track,
.gorilla-hbtn {
  touch-action: manipulation;
}

/* Цвета соцсетей (v2.2.0): были инлайновым style="--soc:#..." прямо в
   разметке - фирменный цвет это данные, но их место в стилях. */
.g-soc--vk { --soc: #0077FF; }
.g-soc--tg { --soc: #29A9EB; }
.g-soc--tt { --soc: #FF0050; }
.g-soc--yt { --soc: #FF0000; }