/* ============================================================================
 * GORILLA - КАРТОЧКА ТОВАРА (PDP), v2.3.0
 * ----------------------------------------------------------------------------
 * Переписан с нуля. До v2.3.0 этот файл был 2208-строчным дедупом <style>-блоков
 * из Shopify-фрагментов; сам фрагментный PDP заменён настоящим шаблоном
 * single-product.php на данных WooCommerce.
 * Фото-стек (.persona-stack) и айбрау/крошки приезжают из
 * gorilla-persona-detail.css - здесь только то, чего нет в общих файлах.
 * ============================================================================ */

/* --- Хиро: сетка фото | инфо ---------------------------------------------- */
/* Шапка на внутренних страницах лежит поверх потока - первому экрану нужен
   тот же верхний зазор, что у .persona-detail__inner на детальных персон. */
.g-section.g-pdp__hero { padding-top: calc(var(--g-header-h, 152px) + clamp(20px, 2vw, 32px)); } /* v2.10.3: реальная высота шапки (JS-переменная), клэмп 144px не покрывал шапку 152px - контент налезал */
/* Задние карточки стека разлетаются transform-ом на ~72px ниже своего бокса
   (transform не участвует в потоке) - без запаса они ложатся на следующую
   тёмную секцию. Запас на разлёт + тень. */
.g-pdp__hero .persona-stack-sticky { padding-bottom: 48px; }
@media (min-width: 900px) {
  .g-pdp__hero .persona-stack-sticky { padding-bottom: 96px; }
}

.g-pdp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
/* v2.4.7: без min-width:0 grid-item не ужимается - широкий контент
   (скролл-строка свотчей) распирал колонку до 470px на экране 390px,
   и стек «стоял криво», вылезая за правый край. */
.g-pdp__grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .g-pdp__grid { grid-template-columns: minmax(0, 46%) 1fr; }
}

/* Товарные рендеры - белые PNG-банки: даём им едва серое поле, как в карточках
   каталога, и вписываем целиком (не режем). !important на габаритах: у img из
   wp_get_attachment_image есть width/height-атрибуты, и глобальный сброс
   height:auto иначе растягивает картинку выше карточки (виз. «обрезка»). */
/* v2.7.8: у энергетиков на стеке висит .g-18 (агегейт), а его position:relative
   перебивал sticky из persona-detail - top:136px оставался у relative-бокса и
   ронял галерею на 136px ниже айбрау («огромный отступ»). Возвращаем sticky. */
@media (min-width: 900px) {
  .persona-stack.g-18--pdp { position: sticky; }
}
.g-pdp__stack .persona-stack__card { background: var(--g-color-paper, #f6f7f8); }
.g-pdp__stack .persona-stack__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: var(--g-color-paper, #f6f7f8);
}

/* Product packshots need their own proportions, independent of portrait photos.
   Keep the whole pack and gallery controls visible on a laptop screen. */
.g-pdp__stack { aspect-ratio: 1 / 1; }
@media (min-width: 1024px) {
  .g-pdp__stack {
    aspect-ratio: auto;
    height: clamp(400px, calc(100svh - var(--g-header-h, 152px) - 96px), 680px);
  }
}

.g-pdp__title {
  font-family: 'Jawbreak Latin', 'DIN 2014 UI', system-ui, sans-serif;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--g-color-navy);
  margin: 6px 0 10px;
}
/* v2.14.3: энергетики - название целиком фирменным шрифтом, включая кириллицу */
.g-pdp--energy .g-pdp__title {
  font-family: 'Jawbreak Sans Cut', 'Jawbreak Latin', 'DIN 2014 UI', system-ui, sans-serif;
}

.g-pdp__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin: 14px 0 0;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 14px;
  color: #4a4f63;
}
.g-pdp__rating { color: inherit; text-decoration: none; }
.g-pdp__rating:hover { color: var(--g-color-navy); }
/* Звёзды: заливка по проценту рейтинга через фон-градиент на тексте. */
.g-pdp__stars {
  background: linear-gradient(90deg, var(--g-color-navy) var(--g-rating, 100%), rgb(var(--g-navy-rgb) / .18) var(--g-rating, 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 2px;
}

.g-pdp__lead {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #4a4f63;
  max-width: 56ch;
  margin: 14px 0 0;
}
.g-pdp__lead p { margin: 0 0 8px; }

/* --- Чипы-факты линейки ----------------------------------------------------- */
.g-pdp__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
.g-pdp__chips li {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgb(var(--g-navy-rgb) / .06);
  color: var(--g-color-navy);
}

/* --- v2.9.1: плашка-инфо после описания (пример клиента - Berry Bloom) ------
   Чёрная сцена с зелёными буллитами: язык референса старого сайта
   (капс-строки на тёмной плашке), но в токенах темы. */
.g-pdp__facts {
  margin: 18px 0 0;
  background: var(--g-color-navy);
  border-radius: 16px;
  padding: 18px 20px;
}
.g-pdp__facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.g-pdp__facts li {
  position: relative;
  padding-left: 18px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.45;
  color: #fff;
}
.g-pdp__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--g-green-rgb));
}

/* --- 08.09 (ТЗ 8.4/8.5): ЕДИНЫЙ блок метрик у всех товаров ------------------
   09.09 (правка клиента): визуал светлый, как у прежних .g-pdp__stats -
   серая плашка, цифры тёмно-зелёным, шапки чёрным капсом; структура та же.
   Плитки «крупная цифра → шапка жирным капсом → мелкое серое пояснение»,
   ниже в той же плашке - галочки (зелёная галочка + шапка капсом + подпись).
   Сетка плиток: --g-cols из шаблона (2→2, 3→3, 4→4, 5→3+2, 6→3+3, 7→4+3);
   flex-grow растягивает остаток ряда - одинокой плитки на всю ширину нет.
   Разделители - «зазор как бордер»: фон сетки просвечивает в gap 1px.
   Старые светлые .g-pdp__checks / серые .g-pdp__stats заменены этим блоком. */
.g-pdp__metrics {
  margin: 18px 0 0;
  background: rgb(var(--g-navy-rgb) / .04);
  border-radius: 16px;
  overflow: hidden;
  color: var(--g-color-navy);
}
.g-pdp__metrics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: rgb(var(--g-navy-rgb) / .08);
}
.g-pdp__metric {
  flex: 1 1 calc(100% / var(--g-cols, 2) - 1px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 16px 16px;
  background: #f3f4f3;
}
.g-pdp__metric-num {
  display: block;
  font-family: 'Jawbreak Sans Cut', 'DIN 2014', system-ui, sans-serif;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 900;
  line-height: 1;
  color: rgb(var(--g-green-rgb)); /* фирменный зелёный - выбор клиента 09.09 */
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* созвон 01.09 (A5.1) и 08.09: подпись под цифрой - ОБЯЗАТЕЛЬНО жирный капс */
.g-pdp__metric-head {
  display: block;
  margin-top: 4px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--g-color-navy);
}
.g-pdp__metric-note {
  display: block;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.45;
  text-transform: none;
  color: rgb(var(--g-navy-rgb) / .6);
}
/* 4 в ряд в колонке 560px: плитка ~140px - «179 ККАЛ» в 34px не влезает,
   кегль цифры ниже и поля уже (проверено скрином: цифра резалась соседом) */
.g-pdp__metrics-grid[style*="--g-cols: 4"] .g-pdp__metric { padding-inline: 12px; }
.g-pdp__metrics-grid[style*="--g-cols: 4"] .g-pdp__metric-num { font-size: clamp(22px, 2vw, 25px); }
@media (min-width: 900px) {
  .g-pdp__metrics-grid[style*="--g-cols: 4"] .g-pdp__metric-head { font-size: 11px; letter-spacing: .04em; }
}
/* планшет/узкая колонка: 4 плитки → 2×2, 3 остаются в ряд */
@media (max-width: 899px) {
  .g-pdp__metrics-grid[data-count="4"] .g-pdp__metric { flex-basis: calc(50% - 1px); }
}
/* мобила: 2 в ряд; нечётная последняя растягивается на всю ширину (flex-grow) */
@media (max-width: 639px) {
  .g-pdp__metric { flex-basis: calc(50% - 1px); padding: 16px 14px 14px; }
  .g-pdp__metrics-grid .g-pdp__metric-num { font-size: 26px; }
}

/* галочки в той же плашке: волосяная линия от плиток, 2 колонки на ПК, 1 на мобиле */
.g-pdp__metrics-checks {
  list-style: none;
  margin: 0;
  padding: 16px 16px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  border-top: 1px solid rgb(var(--g-navy-rgb) / .08);
}
.g-pdp__metrics-checks--solo { border-top: 0; padding-top: 18px; }
.g-pdp__metrics-checks li {
  position: relative;
  padding-left: 28px;
  min-width: 0;
}
.g-pdp__metrics-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgb(var(--g-green-rgb)); /* сплошной зелёный круг, галка чёрная */
}
.g-pdp__metrics-checks li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 5px;
  width: 10px;
  height: 10px;
  background: #101010;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}
.g-pdp__check-head {
  display: block;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--g-color-navy);
}
.g-pdp__check-note {
  display: block;
  margin-top: 2px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  text-transform: none;
  color: rgb(var(--g-navy-rgb) / .62);
}
@media (max-width: 639px) {
  .g-pdp__metrics-checks { grid-template-columns: 1fr; gap: 10px; padding: 14px 14px 16px; }
}

/* --- v2.9.1: подпись «цена за бокс» у цены (батончики, мармелад) ------------ */
.g-pdp__boxnote {
  margin: 6px 0 0;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #4a4f63;
}

/* --- Свотчи вкусов ---------------------------------------------------------- */
.g-pdp__flavors { margin: 20px 0 0; }
.g-pdp__flavors-label {
  display: block;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #4a4f63;
  margin: 0 0 10px;
}
/* v2.8.6: свотчи ВСЕГДА в одну прокручиваемую строку - на ПК тоже (у спортпита
   8 вкусов переносились в два ряда и раздували первый экран - фидбек).
   v2.8.7: аффорданс на десктопе - зелёные стрелки по бокам (язык карусели
   товаров на главной), скроллбар скрыт; на мобиле нативный свайп с выносом
   до краёв контейнера. */
.g-pdp__flavors-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.g-pdp__flavors-row::-webkit-scrollbar { display: none; }
.g-pdp__flavor { flex: 0 0 auto; scroll-snap-align: start; }
.g-pdp__flavors-strip { position: relative; }
.g-pdp__flavors-arrow {
  position: absolute;
  top: var(--carousel-media-center, 50%);
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #0a0a0a;
  background: rgb(var(--g-green-rgb));
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}
.g-pdp__flavors-arrow svg { display: block; }
.g-pdp__flavors-arrow--prev { left: 0; }
.g-pdp__flavors-arrow--next { right: 0; }
.g-pdp__flavors-arrow:hover { transform: translateY(-50%) scale(1.08); }
.g-pdp__flavors-arrow:active { transform: translateY(-50%) scale(0.96); }
.g-pdp__flavors-arrow[hidden] { display: none; }
@media (max-width: 639px) {
  .g-pdp__flavors-arrow { display: none; } /* мобила: нативный свайп */
}
.g-pdp__flavor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 86px;
  padding: 10px 6px 8px;
  border: 1.5px solid rgb(var(--g-navy-rgb) / .12);
  border-radius: 14px;
  text-decoration: none;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.g-pdp__flavor:hover { border-color: rgb(var(--g-navy-rgb) / .4); }
.g-pdp__flavor.is-current {
  border-color: var(--g-color-navy);
  box-shadow: 0 0 0 1.5px var(--g-color-navy) inset;
  pointer-events: none;
}
.g-pdp__flavor-img {
  width: 44px !important;
  height: 62px !important;
  object-fit: contain;
}
/* 01.09: у снеков (батончики/мармелад) фото горизонтальные - в вертикальном
   боксе 44x62 они сжимались в полоску с пустотой; даём лежачий бокс и карточку
   пошире, чтобы миниатюра читалась */
.g-pdp__flavors--snack .g-pdp__flavor { width: 108px; }
.g-pdp__flavors--snack .g-pdp__flavor-img {
  width: 88px !important;
  height: 48px !important;
}
/* 01.09 (скрин юзера, L-Citrulline): у спортпита фото банок квадратные -
   в вертикальном боксе 44x62 миниатюра ужималась до ~25px и карточка
   выглядела пустой; квадратный бокс крупнее + карточка шире */
.g-pdp__flavors--supplement .g-pdp__flavor { width: 96px; }
.g-pdp__flavors--supplement .g-pdp__flavor-img {
  width: 64px !important;
  height: 64px !important;
}
.g-pdp__flavor-name {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--g-color-navy);
}

/* --- Тексты секций БЕЗ капса -------------------------------------------------
   Глобальное Shopify-наследие `p { text-transform: uppercase }` превращало
   абзацы PDP в сплошной капс - нечитаемо (v2.4.7). Капс остаётся только там,
   где задан явно (айбрау, чипы, имена, заголовки). */
.g-pdp__lead,
.g-pdp__lead p,
.g-pdp__trust li,
.g-pdp-faq__a {
  text-transform: none;
}


/* v2.4.9/v2.7.1: у ПЕРВОЙ секции после хиро возвращаем верхний паддинг
   (схлопыватель white+white его убивает, а задние карточки стека разлетаются
   вниз). После хиро теперь FAQ (v2.8.5). */
.g-pdp__hero + .g-section { padding-top: var(--g-section-pad, 56px); }

/* --- Коммерческая карточка (цена + покупка + гарантии) ----------------------
   v2.5.0: собранный блок на «бумаге» - визуальный язык панелей корзины. */
.g-pdp__buybox {
  container-type: inline-size;
  margin-top: 20px;
  background: var(--g-color-paper, #f6f7f8);
  border: 1px solid rgb(var(--g-navy-rgb) / .06);
  border-radius: 20px;
  padding: clamp(18px, 2vw, 24px);
}
/* v2.7.6: «Где купить» - энергетики на сайте не продаются, в буйбоксе кнопки
   ритейлеров (единые ссылки линейки) вместо цены и корзины. */
.g-pdp__retail-label {
  display: block;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #4a4f63;
  margin: 0 0 12px;
}
/* v2.9.2 (клиент): «Где купить» = раскрывающийся список. Кнопка - зелёная
   CTA-пилюля с шевроном; панель - белая карточка со строками магазинов
   (оригинальное лого или леттеринг в фирменном цвете), клик открывает
   магазин в новой вкладке. */
.g-pdp__retail-dd { position: relative; }
.g-pdp__retail-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}
.g-pdp__retail-chev { transition: transform .2s ease; }
.g-pdp__retail-btn[aria-expanded="true"] .g-pdp__retail-chev { transform: rotate(180deg); }
.g-pdp__retail-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  background: #fff;
  border: 1px solid rgb(var(--g-navy-rgb) / .1);
  border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgb(var(--g-navy-rgb) / .35);
  display: grid;
}
.g-pdp__retail-item {
  --rt: var(--g-color-navy);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s ease;
}
.g-pdp__retail-item:hover { background: rgb(var(--g-navy-rgb) / .05); }
.g-pdp__retail-list li + li { border-top: 1px solid rgb(var(--g-navy-rgb) / .06); }
/* важности перебивают .woocommerce img { height:auto; max-width:100% } */
.g-pdp__retail-item img.g-pdp__retail-logo {
  height: 15px !important;
  width: auto !important;
  max-width: 88px !important;
  display: block;
}
/* созвон 01.09 (A7): лого Озона и Магнита оптически крупнее леттеринга -
   уменьшаем, чтобы все пункты были «плюс-минус одинаковые» */
.g-pdp__retail-card--magnit img.g-pdp__retail-logo {
  height: 12px !important;
  max-width: 72px !important;
}
/* жирный воордмарк Озона оптически тяжелее всех - ещё меньше */
.g-pdp__retail-card--ozon img.g-pdp__retail-logo {
  height: 10px !important;
  max-width: 60px !important;
}
.g-pdp__retail-word {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--rt);
  text-transform: none;
  white-space: nowrap;
}
.g-pdp__retail-ext { margin-left: auto; color: rgb(var(--g-navy-rgb) / .35); flex-shrink: 0; }
.g-pdp__retail-item:hover .g-pdp__retail-ext { color: rgb(var(--g-navy-rgb) / .7); }
.g-pdp__retail-card--samokat     { --rt: #FF335F; }
/* созвон 01.09 (A7): «у меня ассоциация с голубым логотипом» - леттеринг
   Лавки голубым вместо тёмно-жёлтого (оригинальный лого-файл - когда найдём
   официальный SVG; примерка с клиентом) */
.g-pdp__retail-card--lavka       { --rt: #1F8EFA; }
.g-pdp__retail-card--pyaterochka { --rt: #E52322; }
.g-pdp__retail-card--perekrestok { --rt: #00563F; }
.g-pdp__retail-card--dixy        { --rt: #F47B20; }
.g-pdp__retail-card--magnit      { --rt: #C8102E; }
.g-pdp__retail-card--ozon        { --rt: #005BFF; }

/* v2.8.1: детали карточки - единый блок под буйбоксом. Буйбокс = только
   покупка; чтение (свайпер состава, «Почему Gorilla», «О продукте») идёт
   ниже в одном ритме: волосяные линии между подблоками и одинаковые
   заголовки-капсы .g-pdp__dhead. */
.g-pdp__details { margin-top: 8px; }
.g-pdp__dblock {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgb(var(--g-navy-rgb) / .08);
}
.g-pdp__dhead {
  display: block;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #4a4f63;
  margin: 0 0 12px;
}

/* v2.8.0: свайпер «Состав | Пищевая ценность» в карточке (после «Где купить»).
   Слайды листаются свайпом (scroll-snap), подписи снизу - и индикатор, и
   переключатель (JS в gorilla-pdp.js). */
.g-pdp-swipe { margin: 0; }
.g-pdp-swipe__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 12px;
  /* v2.8.4: контент стоял ВПЛОТНУЮ к краю клипа (overflow) - у жирных глифов
     («К») срезало выступ. Расширяем трек на 4px маргином, а поле даём КАЖДОМУ
     слайду (не треку): текст остаётся в одной вертикали с карточкой, а в
     приоткрытое окно клипа смотрит пустой отступ соседнего слайда, не его
     контент. */
  margin-inline: -4px;
}
.g-pdp-swipe__track::-webkit-scrollbar { display: none; }
.g-pdp-swipe__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-inline: 4px; /* поле от края клипа - см. коммент у трека */
}
.g-pdp-swipe__text {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  text-transform: none;
  color: #4a4f63;
  margin: 0;
}
.g-pdp-swipe__facts { margin: 0; }
.g-pdp-swipe__fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 13px;
}
.g-pdp-swipe__fact + .g-pdp-swipe__fact { border-top: 1px solid rgb(var(--g-navy-rgb) / .07); }
.g-pdp-swipe__fact dt { color: #4a4f63; text-transform: none; }
.g-pdp-swipe__fact dd { margin: 0; font-weight: 700; color: var(--g-color-navy); white-space: nowrap; }
.g-pdp-swipe__unit {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 11.5px;
  text-transform: none;
  color: #8a8f9c;
  margin: 8px 0 0;
}
/* v2.8.3: «Применение» - шаги строками с зелёными галочками и волосяными
   линиями (в языке trust-списка и таблицы фактов), а не сплошной абзац */
.g-pdp-swipe__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.g-pdp-swipe__steps li {
  position: relative;
  padding: 8px 0 8px 24px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  text-transform: none;
  color: #4a4f63;
}
.g-pdp-swipe__steps li + li { border-top: 1px solid rgb(var(--g-navy-rgb) / .07); }
.g-pdp-swipe__steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--g-color-green);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}
/* созвон 01.09 (A2): переключалка НАД текстом - «сначала табы, потом текст» */
.g-pdp-swipe__tabs {
  display: flex;
  justify-content: flex-start;
  gap: 22px;
  margin: 0 0 12px;
  border-bottom: 1px solid rgb(var(--g-navy-rgb) / .08);
}
.g-pdp-swipe__tab {
  appearance: none;
  background: none;
  border: 0;
  padding: 2px 0 6px;
  cursor: pointer;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9aa0ad;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.g-pdp-swipe__tab.is-active {
  color: var(--g-color-navy);
  border-bottom-color: var(--g-color-green);
}
/* 08.09 (ТЗ 8.6): одна заполненная вкладка - заголовок-таб активный, без
   переключения (клика нет) */
.g-pdp-swipe__tabs--single .g-pdp-swipe__tab { cursor: default; pointer-events: none; }

/* v2.8.0/v2.8.6: «О продукте» - текст карточки после панели покупки
   («Почему Gorilla» снова живёт отдельной секцией ниже). */
.g-pdp__about { max-width: 56ch; }

/* --- «Почему Gorilla» (v2.8.6) ----------------------------------------------
   Снова отдельная секция (запрос клиента): классическая чёрная сцена,
   зелёные editorial-иконки, ТРИ колонки главных бенефитов группы. */
.g-pdp-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 44px);
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 900px) { .g-pdp-benefits__grid { grid-template-columns: repeat(3, 1fr); } }
.g-pdp-benefit { text-align: center; }
.g-pdp-benefit__icon {
  display: block;
  height: 38px;
  width: auto !important;
  margin: 0 auto 14px;
}
.g-pdp-benefit__head {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff;
  margin: 0 0 8px;
}
.g-pdp-benefit__text {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  text-transform: none;
  color: rgba(255, 255, 255, .72);
  max-width: 36ch;
  margin: 0 auto;
}
.g-pdp__about p {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  text-transform: none;
  color: #4a4f63;
  margin: 0 0 10px;
}

/* --- 08.09 (ТЗ 9.2): «Информация о товаре» - юр-блок внизу карточки --------
   Компактно, мелким серым, не кричит: наименование / изготовитель / масса
   строками dt-dd, ниже дисклеймер категории с иконкой «i» (18+ у продуктов
   с кофеином - тот же бейдж, что у сноски категории энергетиков). */
.g-pdp__legal-rows { margin: 0; display: grid; gap: 6px; }
.g-pdp__legal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px 14px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  text-transform: none;
}
.g-pdp__legal-row dt { color: #8a8f9c; }
.g-pdp__legal-row dd { margin: 0; color: #4a4f63; }
@media (min-width: 480px) {
  .g-pdp__legal-row { grid-template-columns: 180px minmax(0, 1fr); }
}
.g-pdp__legal-disc {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  text-transform: none;
  color: #6b7080;
}
.g-pdp__legal-rows + .g-pdp__legal-disc { padding-top: 12px; border-top: 1px solid rgb(var(--g-navy-rgb) / .07); }
.g-pdp__legal-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--g-navy-rgb) / .3);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12px;
  font-weight: 700;
  color: #4a4f63;
}
.g-pdp__legal-ico--age {
  width: auto;
  min-width: 30px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  border-color: rgb(var(--g-navy-rgb) / .45);
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--g-color-navy);
}

.g-pdp__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
}
.g-pdp__price-now {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  color: var(--g-color-navy);
}
.g-pdp__price-old {
  font-size: 18px;
  font-weight: 500;
  color: rgb(var(--g-navy-rgb) / .45);
}
.g-pdp__off {
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(var(--g-green-rgb) / .16);
  color: #3f6300;
}

/* --- Покупка: степпер + кнопка -------------------------------------------- */
.g-pdp__buy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 18px 0 0;
  min-height: 52px; /* v2.4.7: степпер и кнопка в один рост */
}
.g-pdp__atc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g-pdp__qty {
  display: flex;
  align-items: center;
  border: 1.5px solid rgb(var(--g-navy-rgb) / .14);
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #fff; /* на «бумаге» карточки */
}
.g-pdp__qty-btn {
  width: 44px;
  height: 100%;
  min-height: 48px;
  border: 0;
  background: none;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--g-color-navy);
  cursor: pointer;
  transition: background .15s ease;
}
.g-pdp__qty-btn:hover { background: rgb(var(--g-navy-rgb) / .06); }
.g-pdp__qty-num {
  min-width: 28px;
  text-align: center;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--g-color-navy);
}
.g-pdp__atc { flex: 1 1 auto; text-align: center; }
.g-pdp__atc.is-added { background-color: var(--g-color-green) !important; }
.g-pdp__buy .g-pdp__atc { min-width: 0; padding-inline: 18px; }
.g-pdp__buy .added_to_cart,
.g-pdp-bar .added_to_cart { display: none !important; }
.g-pdp__atc.added::after { display: none; }
.g-pdp__cart-feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgb(var(--g-navy-rgb) / .1);
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.g-pdp__cart-feedback[hidden] { display: none; }
.g-pdp__cart-message { color: #416500; font-weight: 700; }
.g-pdp__cart-message::before { content: '✓'; margin-right: 8px; }
.g-pdp__cart-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgb(var(--g-navy-rgb) / .2);
  border-radius: 999px;
  color: var(--g-color-navy);
  text-decoration: none;
  font-weight: 700;
}
.g-pdp__cart-link:hover { background: #fff; border-color: var(--g-color-navy); }
.g-pdp__cart-link:focus-visible { outline: 2px solid var(--g-color-green); outline-offset: 3px; }
@container (max-width: 300px) {
  .g-pdp__buy { grid-template-columns: 1fr; }
  .g-pdp__buy .g-pdp__qty { justify-self: start; }
  .g-pdp__cart-link { width: 100%; }
}
.g-pdp__atc--off {
  background: rgb(var(--g-navy-rgb) / .08);
  color: rgb(var(--g-navy-rgb) / .5);
  cursor: not-allowed;
}


.g-pdp__trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 14px;
  color: #4a4f63;
}
.g-pdp__trust li { padding-left: 24px; position: relative; }
.g-pdp__trust li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--g-color-green);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center / contain no-repeat;
}

/* --- FAQ (нативные details/summary) ----------------------------------------
   v2.4.8: две колонки на ПК - вопросы | фирменное фото (как в исходном
   дизайне); на мобиле фото уходит под вопросы. */
.g-pdp-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: stretch;
  margin-top: clamp(16px, 2vw, 28px);
}
@media (min-width: 1024px) { .g-pdp-faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); } }
.g-pdp-faq__media { margin: 0; }
.g-pdp-faq__img {
  width: 100% !important;
  height: 100% !important;
  min-height: 260px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
/* 08.09: у спортпита рядом с FAQ - фото ТЕКУЩЕГО товара (не банки
   энергетиков): вписано целиком на «бумаге», как в стеке карточки */
.g-pdp-faq__media--product {
  background: var(--g-color-paper, #f6f7f8);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 40px);
}
.g-pdp-faq__media--product .g-pdp-faq__img {
  object-fit: contain;
  min-height: 0;
  max-height: 520px;
  border-radius: 0;
}
@media (max-width: 1023px) {
  .g-pdp-faq__media--product .g-pdp-faq__img { max-height: 360px; }
}
/* v2.8.8: анимированный аккордеон в языке FAQ главной - плавное раскрытие
   max-height (кубическая кривая как у .faq-answer-content), поворот шеврона,
   каскадное появление карточек при входе в вьюпорт (fadeInUp). */
.g-pdp-faq__list { display: grid; gap: 10px; align-content: start; }
.g-pdp-faq__item {
  border: 1.5px solid rgb(var(--g-navy-rgb) / .12);
  border-radius: 0;
  background: #fff;
  overflow: hidden;
  /* Questions remain readable before deferred JS and during quick scrolling. */
  opacity: 1;
  transform: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.g-pdp-faq__item.in-view { opacity: 1; transform: translateY(0); }
.g-pdp-faq__item:nth-child(1) { transition-delay: .05s; }
.g-pdp-faq__item:nth-child(2) { transition-delay: .1s; }
.g-pdp-faq__item:nth-child(3) { transition-delay: .15s; }
.g-pdp-faq__item:nth-child(4) { transition-delay: .2s; }
.g-pdp-faq__item:nth-child(5) { transition-delay: .25s; }
.g-pdp-faq__item:nth-child(6) { transition-delay: .3s; }
.g-pdp-faq__item:nth-child(7) { transition-delay: .35s; }
.g-pdp-faq__item:nth-child(8) { transition-delay: .4s; }
.g-pdp-faq__item:has(.g-pdp-faq__q[aria-expanded="true"]) {
  border-color: rgb(var(--g-navy-rgb) / .4);
  box-shadow: 0 10px 24px -16px rgb(var(--g-navy-rgb) / .5);
}
.g-pdp-faq__q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  border: 0;
  background: none;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--g-color-navy);
  transition: background .25s ease;
}
.g-pdp-faq__q:hover { background: rgb(var(--g-navy-rgb) / .04); }
.g-pdp-faq__chev {
  flex: 0 0 auto;
  display: flex;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.g-pdp-faq__q[aria-expanded="true"] .g-pdp-faq__chev { transform: rotate(180deg); }
.g-pdp-faq__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: max-height;
}
.g-pdp-faq__a {
  margin: 0;
  padding: 0 20px 16px;
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #4a4f63;
  max-width: 70ch;
}
@media (prefers-reduced-motion: reduce) {
  .g-pdp-faq__item { opacity: 1; transform: none; transition: none; }
  .g-pdp-faq__body { transition: none; }
  .g-pdp-faq__chev { transition: none; }
}

/* --- Конверсионная плашка (v2.8.1) -----------------------------------------
   Фиксированный низ экрана; JS показывает её, когда фото товара ушло из
   вьюпорта вверх: мини-фото, название и CTA под рукой на любой глубине
   страницы. Прячется трансформом (не display) - плавный въезд/выезд. */
.g-pdp-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990; /* под мобильным меню (9998) и модалкой 18+ (10001) */
  background: #fff;
  border-top: 1px solid rgb(var(--g-navy-rgb) / .1);
  box-shadow: 0 -12px 32px rgb(var(--g-navy-rgb) / .12);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.g-pdp-bar.is-on { transform: translateY(0); }
.g-pdp-bar__in {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.g-pdp-bar__thumb {
  flex: 0 0 auto;
  width: 44px !important;
  height: 52px !important;
  object-fit: contain;
  background: var(--g-color-paper, #f6f7f8);
  border-radius: 10px;
  padding: 3px;
}
.g-pdp-bar__id {
  min-width: 0;
  margin-right: auto;
  display: grid;
  gap: 2px;
}
.g-pdp-bar__name {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--g-color-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-pdp-bar__price {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--g-color-navy);
}
.g-pdp-bar__note {
  font-family: 'DIN 2014 UI', system-ui, sans-serif;
  font-size: 12.5px;
  text-transform: none;
  color: #6b7080;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* степпер в плашке компактнее карточного */
.g-pdp-bar__qty { flex: 0 0 auto; }
.g-pdp-bar__qty .g-pdp__qty-btn { width: 38px; min-height: 42px; font-size: 18px; }
.g-pdp-bar__qty .g-pdp__qty-num { min-width: 24px; font-size: 15px; }
.g-pdp-bar__atc { flex: 0 0 auto; padding: 13px 24px; }
/* мобила: фото товара ОСТАЁТСЯ (идентификация с одного взгляда - фидбек
   клиента), всё ужимается: мини-фото 36px, компактнее степпер и кнопка */
@media (max-width: 639px) {
  .g-pdp-bar__in { gap: 8px; }
  .g-pdp-bar__thumb { width: 36px !important; height: 44px !important; border-radius: 8px; padding: 2px; }
  .g-pdp-bar__name { font-size: 12px; }
  .g-pdp-bar__price { font-size: 13px; }
  .g-pdp-bar__note { font-size: 11px; }
  .g-pdp-bar__qty .g-pdp__qty-btn { width: 30px; min-height: 40px; font-size: 16px; }
  .g-pdp-bar__qty .g-pdp__qty-num { min-width: 20px; font-size: 14px; }
  .g-pdp-bar__atc { padding: 11px 14px; font-size: 12.5px; letter-spacing: .05em; }
}
/* плавающая кнопка корзины живёт в том же углу - при видимой плашке
   поднимаем её выше, чтобы не перекрывались */
html.g-pdpbar-on .sticky-cart-wrapper { bottom: 96px; }

/* v2.10.2: ответы FAQ - контент из визуального редактора (div вместо p):
   вложенные абзацы не должны ловить глобальный Shopify-капс */
.g-pdp-faq__a p { text-transform: none; margin: 0 0 8px; }
.g-pdp-faq__a p:last-child { margin-bottom: 0; }
.g-pdp-faq__a a { color: var(--g-color-green-dark, #23801c); }

/* Compact product details: the active slide controls the track height. */
.g-pdp-swipe__track{align-items:flex-start;overflow-y:hidden;border-radius:0}
.g-pdp-swipe__slide{height:auto}
.g-pdp__details .g-pdp__dblock{margin-top:16px;padding-top:16px}
.g-pdp__legal .g-pdp__legal-disc{margin:0 0 14px}
 .g-pdp-info{border-top:1px solid #e3e4e6;margin:0;padding:0}
.g-pdp-info .g-pdp-info__title{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 0;margin:0;font:700 12px/1.4 'DIN 2014 UI',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#51586b}
.g-pdp-info__body{padding:2px 0 16px}
.g-pdp-info__count{font-size:11px;font-weight:400;letter-spacing:0;white-space:nowrap;color:#828895;margin-left:auto}

.g-pdp__retail-card--wildberries { --rt: #a73afd; }