/* Gorilla collection (product category) - Phase B.
   Head (H1 + SEO description), brand filter bar, pagination, empty-state.
   The product grid itself re-uses .related-grid/.related-card from critical.css. */

.gorilla-collection { padding: 32px 0 64px; }
.gorilla-collection__inner {
  max-width: var(--g-container-max, 1440px);
  margin: 0 auto;
  padding: 0 var(--g-container-pad, clamp(19px, 4vw, 48px));
}

/* --- Head ---------------------------------------------------------------- */
.gorilla-collection__head { margin-bottom: 24px; }
.gorilla-collection__title {
  font-family: 'Jawbreak Sans Cut', 'DIN 2014', system-ui, sans-serif;
  text-transform: uppercase; color: var(--gorilla-blue, var(--g-color-navy));
  font-size: var(--g-fs-h1, clamp(32px, 5vw, 48px)); letter-spacing: 0.01em; font-weight: 900;
  margin: 0 0 12px; line-height: var(--g-lh-heading, 1.1);
}
.gorilla-collection__desc {
  color: #4a4f63; max-width: 820px; font-size: 15px; line-height: 1.6;
}
.gorilla-collection__desc p { margin: 0 0 8px; }

/* --- Навигация по категориям ---------------------------------------------
   Фильтр цены и сортировка удалены (v1.4.8) - только чипы категорий.
   Desktop: центрированный ряд под заголовком. Mobile: фиксированная
   стеклянная плашка снизу экрана (.gorilla-catbar). */
.gorilla-filters__cats {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 2px 0 22px; border-bottom: 1px solid #ececf1; margin-bottom: 24px;
}
@media (max-width: 767px) {
  .gorilla-catbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    margin: 0;
    padding: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: #000;
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(255, 255, 255, 0.10) inset;
  }
  .gorilla-catbar::-webkit-scrollbar { display: none; }
  .gorilla-catbar .gorilla-cat-chip {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 12px;
    padding: 8px 14px;
  }
  .gorilla-catbar .gorilla-cat-chip:hover { background: rgba(255, 255, 255, 0.18); }
  .gorilla-catbar .gorilla-cat-chip .cnt { opacity: 0.5; }
  .gorilla-catbar .gorilla-cat-chip.is-active { background: var(--g-color-green); color: #0a0a0a; }
  /* плашка не накрывает последний ряд товаров */
  .gorilla-collection { padding-bottom: 104px; }
}
.gorilla-cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 50px; text-decoration: none;
  background: #f2f3f7; color: var(--gorilla-blue, var(--g-color-navy));
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  transition: all .2s ease; border: 1px solid transparent;
}
.gorilla-cat-chip:hover { background: #e6e8f2; }
.gorilla-cat-chip.is-active { background: var(--g-color-green); color: #0a0a0a; border-color: var(--g-color-green); box-shadow: 0 6px 18px -6px rgb(var(--g-green-rgb) / .6); }
.gorilla-cat-chip .cnt { opacity: .55; font-weight: 700; }
.gorilla-cat-chip.is-active .cnt { opacity: .7; }



.gorilla-collection__count { color: #888; font-size: 13px; font-weight: 700; margin: 0 0 16px; text-transform: uppercase; letter-spacing: .03em; }

/* --- Карточка товара (v1.7.0, маркетплейс-стиль по референсу клиента) ------
   Подложка со скруглением под фото + бейдж скидки, название в 2 строки,
   мета серым и ЦЕНА-ПИЛЮЛЯ с кнопкой «+» (акцент - фирменный зелёный).
   Один вид на всех экранах: мобайл → ПК, меняется только число колонок. */
.gorilla-collection__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 12px;
  align-items: start;
}
@media (min-width: 640px)  { .gorilla-collection__grid { grid-template-columns: repeat(3, 1fr); gap: 26px 16px; } }
@media (min-width: 1024px) { .gorilla-collection__grid { grid-template-columns: repeat(4, 1fr); gap: 32px 20px; } }

.product-card { display: flex; flex-direction: column; }
.product-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 18px;
  background: #f3f4f6;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  text-decoration: none;
}
.product-card .product-card__img {
  /* v2.6.8: !important - у img из WP есть width/height-атрибуты, и в Safari
     глобальный сброс height:auto перебивал 100%: вытянутые фото (Cold Brew
     300×886) вылезали из квадрата. Тот же фикс, что у фото-стека (v2.4.7). */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  transition: transform .45s ease-out;
}
.product-card:hover .product-card__img { transform: scale(1.05); }
/* бейдж скидки - в углу подложки */
.product-card__off {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--g-color-navy);
  color: #fff;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.product-card__body { padding: 10px 2px 0; text-align: left; }
.product-card__cat {
  display: inline-block;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: #9aa0ad;
  text-decoration: none;
  margin-bottom: 4px;
  transition: color .2s ease;
}
.product-card__cat:hover { color: rgb(var(--g-green-rgb)); }
/* Название товара - один из немногих брендовых акцентов, где фирменный
   Jawbreak оставлен (v2.1.0): заголовки секций и названия товаров. Интерфейс
   вокруг (навигация, кнопки, цены) набран нейтральным системным.
   v2.1.1: фирменное начертание достаётся только английским словам - семейство
   «Jawbreak Latin» объявлено с unicode-range на латиницу (critical-*.css),
   поэтому кириллица в смешанных названиях подхватывает следующий шрифт
   стека - фирменный DIN 2014, а не шрифт операционной системы. */
.product-card__title {
  margin: 0 0 3px;
  font-family: 'Jawbreak Latin', 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--g-color-navy);
  /* Латиница в Jawbreak и так рисуется капсом, поэтому кириллическая часть
     смешанного названия («Арбуз-дыня», «Protein Bar Арахис-Карамель») шла
     строчными и выбивалась. Капс на всю строку выравнивает обе половины. */
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) { .product-card__title { font-size: 16px; } }
.product-card__title a { color: inherit; text-decoration: none; }
.product-card__title a:hover { color: rgb(var(--g-green-rgb)); }
.product-card__sub {
  margin: 0 0 8px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  color: #9aa0ad;
}

/* --- Цена-пилюля с «+» --------------------------------------------------- */
.product-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  background: #f3f4f6;
}
/* v1.9.7: у товара со скидкой пилюля НЕ зеленеет - та же нейтральная
   подложка, что и у обычной цены (зелёный остаётся только на кнопке «+») */
.product-pill--sale { background: #f3f4f6; }
/* v2.7.6: энергетики без цены - пилюля-ссылка «Где купить» на PDP */
.product-pill--where {
  padding: 9px 16px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--g-color-navy);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.product-pill--where:hover { background: var(--g-color-green); color: #0a0a0a; }
.product-pill__prices { display: inline-flex; align-items: baseline; gap: 6px; }
.product-pill__old {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  color: #9aa0ad;
  text-decoration: line-through;
}
.product-pill__old .woocommerce-Price-currencySymbol { display: none; }
.product-pill__now {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--g-color-navy);
  white-space: nowrap;
}
.product-pill--sale .product-pill__now { color: #000000; }
.product-pill__btn {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--g-color-green);
  color: #fff;
  font-size: 18px; font-weight: 700; line-height: 1;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
}
.product-pill__btn:hover { background: var(--g-color-paper, #f6f7f8); color: #0a0a0a; } /* v2.6.6: единый ховер */
.product-pill__btn:active { transform: scale(.92); }
.product-pill__btn.loading { opacity: .5; pointer-events: none; }
.product-pill__btn.is-added { background: var(--g-color-navy); }
.product-pill__btn--off { background: #c7cad6; cursor: default; }
/* авто-ссылка WooCommerce «Просмотр корзины» под кнопкой не нужна */
.product-card .added_to_cart { display: none !important; }
@media (min-width: 1024px) {
  .product-pill { padding: 5px 5px 5px 14px; }
  .product-pill__now { font-size: 15px; }
  .product-pill__btn { width: 30px; height: 30px; }
}

/* Group label used on the empty-state "Похожие товары" block. */
.collection-group-label {
  font-size: 20px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gorilla-blue, var(--g-color-navy)); margin: 32px 0 16px;
}

/* --- Empty state --------------------------------------------------------- */
.gorilla-collection__empty { text-align: center; padding: 40px 0 8px; }
.gorilla-empty-title { font-size: var(--g-fs-h2); font-weight: 900; text-transform: uppercase; color: var(--gorilla-blue, var(--g-color-navy)); margin: 0 0 8px; }
.gorilla-empty-sub { color: #6b7080; font-size: 15px; margin: 0 0 18px; }
.gorilla-empty-reset {
  display: inline-block; padding: 11px 26px; border-radius: 50px; text-decoration: none;
  background: var(--gorilla-green, var(--g-color-green)); color: #fff; font-weight: 800; text-transform: uppercase; font-size: 13px;
}

/* --- Pagination ---------------------------------------------------------- */
.gorilla-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.gorilla-pagination .page-numbers {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border-radius: 12px; background: #f2f3f7; color: var(--gorilla-blue, var(--g-color-navy));
  text-decoration: none; font-weight: 800; font-size: 15px; transition: all .2s ease;
}
.gorilla-pagination .page-numbers:hover { background: #e6e8f2; }
.gorilla-pagination .page-numbers.current { background: var(--g-color-green); color: #0a0a0a; }
.gorilla-pagination .page-numbers.dots { background: transparent; }

/* ============================================================================
   «Сквозная лента» .gstream (v1.6.0) - каталог и амбассадоры.
   ПК: капсула чипов в стиле мобильной плашки (но сверху, в потоке), группы
   категорий с подписями - переходы между категориями бесшовные (JS
   gorilla-stream.js: скролл + pushState на реальные SEO-страницы).
   Мобайл: горизонтальная snap-лента (товары 2×2 = 4 в кадре + хвост колонки,
   персоны - 1 ряд), капсула становится плавающей плашкой снизу.
   ========================================================================== */
.gstream-nav {
  /* ПК: прилипает под шапкой и не мешает скроллу (высота шапки ~112px) */
  position: sticky;
  top: 124px;
  z-index: 30;
  display: flex;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 32px;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: #000;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.30), 0 1px 0 rgba(255, 255, 255, 0.10) inset;
}
.gstream-nav::-webkit-scrollbar { display: none; }
.gstream-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.gstream-chip:hover { background: rgba(255, 255, 255, 0.18); }
.gstream-chip.is-active { background: var(--g-color-green); color: #0a0a0a; }

.gstream__group { margin: 0 0 44px; }
.gstream__group:last-child { margin-bottom: 0; }
/* Подпись группы товаров - тот же рецепт, что у подписи ряда на главной
   (.g-catrow__title): нейтральный DIN, а не дисплейный Jawbreak. Это
   навигационная метка внутри ленты, а не заголовок секции. */
.gstream__label {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--g-color-navy);
  margin: 0 0 16px;
}
.gstream--products .gstream__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 20px;
}
/* v2.3.2: лента персон - компактно, как блок товаров на главной: жёлоб 16px
   вместо 40, а неполная группа занимает столько колонок, сколько в ней персон
   (класс --nN из PHP) - соседние неполные группы садятся в одну строку, дыр
   от одиночных дисциплин нет. Внешняя сетка пакует ГРУППЫ, внутренняя - карточки. */
.gstream--personas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 16px;
  row-gap: clamp(24px, 3vw, 36px);
  align-items: start;
}
.gstream--personas .gstream__group { grid-column: span 3; }
.gstream--personas .gstream__group--n1 { grid-column: span 1; }
.gstream--personas .gstream__group--n2 { grid-column: span 2; }
.gstream--personas .gstream__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gstream--personas .gstream__group--n1 .gstream__grid { grid-template-columns: 1fr; }
.gstream--personas .gstream__group--n2 .gstream__grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) and (max-width: 1023px) {
  .gstream--products .gstream__grid { grid-template-columns: repeat(3, 1fr); }
  /* планшет: 2 колонки - группа шире 2 занимает всю строку; dense подтягивает
     следующую одиночную дисциплину в дыру рядом с предыдущей одиночной
     (в 2 колонках группы 1+2 иначе не сесть в строку) */
  .gstream--personas { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row dense; }
  .gstream--personas .gstream__group { grid-column: span 2; }
  .gstream--personas .gstream__group--n1 { grid-column: span 1; }
  .gstream--personas .gstream__group--n2 { grid-column: span 2; }
  .gstream--personas .gstream__grid { grid-template-columns: repeat(2, 1fr); }
  .gstream--personas .gstream__group--n1 .gstream__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* капсула → плавающая плашка снизу (появление вешает JS: .is-visible).
     top: auto ОБЯЗАТЕЛЕН - иначе унаследованный от ПК-sticky top:124px вместе
     с bottom растягивает fixed-элемент на всю высоту экрана. */
  .gstream-nav {
    position: fixed;
    top: auto;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    width: auto;
    margin: 0;
    justify-content: flex-start;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(0.98);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.32, 0.72, 0.33, 1);
  }
  .gstream-nav.is-visible { opacity: 1; pointer-events: auto; transform: none; }

  /* v1.7.0: вертикальная лента - 2 колонки в ширину, ~2.5 карточки в высоту;
     горизонтального скролла нет, группы идут одна за другой сверху вниз */
  .gstream { overflow: visible; }
  .gstream .gstream__group { display: block; margin-bottom: 26px; }
  .gstream--products .gstream__grid,
  .gstream--personas .gstream__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }
  /* v2.3.2: персоны - как товары: одиночная дисциплина занимает одну колонку,
     соседняя одиночная встаёт рядом в ту же строку */
  .gstream--personas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row dense; /* одиночные дисциплины садятся парой в строку */
    column-gap: 12px;
    row-gap: 20px;
    align-items: start;
  }
  .gstream--personas .gstream__group { display: block; margin-bottom: 0; grid-column: span 2; }
  .gstream--personas .gstream__group--n1 { grid-column: span 1; }
  .gstream--personas .gstream__group--n1 .gstream__grid { grid-template-columns: 1fr; }
  .gstream__label {
    display: block;
    font-size: 17px;
    margin-bottom: 12px;
  }
  /* плашка не накрывает низ контента */
  .gorilla-collection, .persona-list__inner { padding-bottom: 110px; }

  /* компактные карточки товара (фидбек: 4 на экран, без гигантских
     отступов/кнопок) - правила ниже базовых, перекрывают их на мобиле */
  .product-card__image-wrap { padding: 4px; }
  .product-card .product-card__img { height: 138px; }
  .product-card__footer { padding-bottom: 8px; }
  .product-card__title { font-size: 12px; margin-bottom: 3px; }
  .product-card__meta { font-size: 11px; margin: 0 0 8px; }
  .product-card__btn { font-size: 11px; padding: 7px 16px; }
}

/* --- Степпер в пилюле (v1.7.1): «+» разворачивается в −/N/+ ---------------- */
.product-pill__stepper {
  display: inline-flex;
  align-items: center;
  /* внутренний зазор = внешнему (см. .product-pill.is-open ниже), иначе цифра
     стоит вплотную к «−» и кажется смещённой относительно центра степпера */
  gap: 6px;
  /* свёрнут: нулевая ширина, ничего не ловит */
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .3s cubic-bezier(.32,.72,.33,1), opacity .2s ease, margin .3s ease;
}
.product-pill.is-open { gap: 6px; }
.product-pill.is-open .product-pill__stepper {
  max-width: 84px;
  opacity: 1;
  margin-left: 2px;
}
.product-pill__qty {
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;   /* цифры не «прыгают» при смене */
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: var(--g-color-navy);
}
.product-pill__btn--minus { background: rgb(var(--g-navy-rgb) / .10); color: var(--g-color-navy); }
.product-pill__btn--minus:hover { background: rgb(var(--g-navy-rgb) / .18); }
.product-pill.is-busy { opacity: .6; pointer-events: none; }

/* Фон секции каталога (v2.2.0) - был инлайном на <section> в шаблонах
   archive-product.php / taxonomy-product_cat.php. */
.gorilla-collection { background-color: #fff; }