/* ============================================================
   ПРОМО-БЛОКИ ВИТРИНЫ: условия покупки, новинки, сезон, марки.
   Разметку собирает tools/chemistry-promo.py — руками её не правят.

   Правила, которые здесь нельзя нарушать (разбор 15.09.2026):
   * ленты только на нативной прокрутке, автопрокрутки у товаров нет;
   * всё, что движется само, ставится на паузу кнопкой, наведением и
     фокусом, а при «уменьшить движение» не движется вообще;
   * над каталогом — не больше четырёх блоков, остальное ниже.
   ============================================================ */

/* ---------- общая колонка ---------- */
.gzp-terms,
.gzp-rail-sec,
.gzp-season,
.gzp-brands {
  width: min(var(--max, 1240px), calc(100% - 56px));
  margin-inline: auto;
}
@media (max-width: 640px) {
  .gzp-terms, .gzp-rail-sec, .gzp-season, .gzp-brands { width: calc(100% - 36px); }
}

.gzp-terms a,
.gzp-side a:not(.button),
.gzp-brand-txt a {
  color: #8fd4ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gzp-terms a:hover { color: #fff; }

:where(.gzp-terms, .gzp-rail-sec, .gzp-season, .gzp-brands) :is(a, button):focus-visible {
  outline: 2px solid var(--cyan, #45bbff);
  outline-offset: 2px;
}

/* ============================================================
   СТРОКА УСЛОВИЙ ПОКУПКИ
   ============================================================ */
.gzp-terms { margin-top: 22px; }
.gzp-terms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.gzp-term {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(69, 187, 255, .16);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(13, 44, 90, .72), rgba(8, 31, 66, .72));
}
.gzp-term-ico {
  flex: 0 0 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(69, 187, 255, .11);
  color: #7cc9ff;
}
.gzp-term-ico svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gzp-term-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gzp-term-txt b { color: #fff; font-size: 13.5px; line-height: 1.3; }
.gzp-term-txt > span { color: #a8bcd8; font-size: 12.5px; line-height: 1.45; }

@media (max-width: 1020px) {
  .gzp-terms-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* На телефоне четыре плашки столбиком заняли бы весь экран до
     категорий. Лентой со свайпом: видна первая и край второй. */
  .gzp-terms-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    padding-bottom: 6px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .gzp-terms-list::-webkit-scrollbar { display: none; }
  .gzp-term { flex: 0 0 80%; scroll-snap-align: start; }
}

/* ============================================================
   ЛЕНТЫ ТОВАРОВ: новинки и сезон
   ============================================================ */
.gzp-rail-sec.section { padding: 40px 0 0; }
.gzp-season.section { padding: 56px 0 0; }

.gzp-rail-wrap {
  display: grid;
  grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.gzp-season-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 16px;
  align-items: stretch;
}

/* Боковая карточка: заголовок подборки и путь «ко всем». Блик — тот же
   голубой, что у активных фильтров, чтобы карточка читалась частью
   магазина, а не рекламной вставкой. */
.gzp-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  --gzp-side-pad: 22px;                    /* им же снимок уходит под рамку */
  padding: var(--gzp-side-pad);
  border: 1px solid rgba(69, 187, 255, .24);
  border-radius: 20px;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(69, 187, 255, .22), transparent 58%),
    linear-gradient(165deg, #0f3570, #081f42);
}
.gzp-side--season {
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(143, 212, 255, .2), transparent 58%),
    linear-gradient(165deg, #123a6e, #081f42);
}
.gzp-side h2 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.gzp-side p { margin: 0; color: #b6c8e0; font-size: 13.5px; line-height: 1.55; }
.gzp-side .gzp-side-btn { margin-top: auto; align-self: flex-start; }
/* Снимок — не вставка, а низ самой карточки: во всю ширину до рамки,
   верхний край растворяется в фоне, кнопка лежит на снимке. Текст на
   снимок не заходит, поэтому контраст абзаца от кадра не зависит.
   Высоту карточки задаёт лента справа, снимок забирает остаток.
   Проект агента-дизайнера, 15.09.2026. */
.gzp-side-media {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 190px;                       /* иначе lazy-снимок может не загрузиться */
  margin: 0 calc(-1 * var(--gzp-side-pad)) calc(-1 * var(--gzp-side-pad));
  padding: var(--gzp-side-pad);
  overflow: hidden;
  border-radius: 0 0 19px 19px;            /* 20 у карточки минус рамка */
}
.gzp-side-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(transparent, rgba(0, 0, 0, .35) 18%, #000 46%);
          mask-image: linear-gradient(transparent, rgba(0, 0, 0, .35) 18%, #000 46%);
  transition: transform 1.2s cubic-bezier(.2, 0, 0, 1);
}
/* Затемнение снизу только под кнопкой: синяя кнопка не теряется на пене.
   В «Сезоне» кнопки нет, и снег не сереет. */
.gzp-side-media--btn::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(6, 20, 44, .82));
  pointer-events: none;
}
.gzp-side-media .gzp-side-btn { position: relative; z-index: 1; }
/* Приближение — только при наведении на кнопку: сама карточка не ссылка,
   и зум всей плашки обещал бы клик, которого нет. */
.gzp-side-media:has(.gzp-side-btn:hover, .gzp-side-btn:focus-visible) .gzp-side-img { transform: scale(1.04); }
.gzp-side-img--novinki { object-position: 40% 80%; }   /* машина ниже зоны растворения */
.gzp-side-img--sezon { object-position: 45% 75%; }

.gzp-rail-main { min-width: 0; }
.gzp-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.gzp-tabs { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.gzp-tab {
  min-height: 38px;
  padding: 7px 15px;
  border: 1px solid var(--line, #225185);
  border-radius: 999px;
  background: #0a2450;
  color: #cfe0f5;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.gzp-tab:hover { border-color: #3b8bdd; color: #fff; }
.gzp-tab.is-on {
  border-color: var(--cyan, #45bbff);
  background: rgba(69, 187, 255, .15);
  color: #fff;
}
.gzp-arrows { display: flex; gap: 6px; flex: 0 0 auto; }
.gzp-arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line, #225185);
  border-radius: 12px;
  background: #0a2450;
  color: #fff;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.gzp-arrow:hover:not(:disabled) { border-color: var(--cyan, #45bbff); }
.gzp-arrow:disabled { opacity: .35; cursor: default; }

/* Сама лента: сетка в строку, четыре карточки в видимой части. Колонка
   считается от ширины ленты, а не экрана, — рядом стоит боковая карточка. */
.gzp-rail {
  list-style: none;
  margin: 0;
  padding: 2px 2px 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px) / 4);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #2a5b8f transparent;
  overscroll-behavior-x: contain;
}
.gzp-rail--static {
  grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-columns: auto;
  overflow: visible;
  padding-bottom: 0;
}

.gzp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line, #225185);
  border-radius: 18px;
  background: linear-gradient(160deg, #0c2a56, #081f42);
  scroll-snap-align: start;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.gzp-card[hidden] { display: none; }
.gzp-card:hover {
  border-color: #3b8bdd;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, .6);
}
.gzp-card-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}
.gzp-card-pic {
  display: grid;
  place-items: center;
  /* 3:4 — как рамка карточки каталога (styles.css). */
  aspect-ratio: 3 / 4;
  margin-bottom: 4px;
  border-radius: 14px;
  /* Цвет края кадра (tools/chemistry-photo-meta.py): снимок не на белом
     продолжается своим фоном, а не стоит с белыми полями. */
  background: var(--plate-bg, #fff);
  overflow: hidden;
}
.gzp-card-pic img { width: 86%; height: 86%; object-fit: contain; }
/* Постер со своим фоном — во всю рамку: класс is-fill (shop-head.js),
   общий стиль всех рамок магазина — в shop-head.css. */
.gzp-card-brand {
  color: #8ba2c2;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.gzp-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.5em;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.gzp-card-link:hover .gzp-card-title { color: #8fd4ff; }
/* Ровные карточки в ряду (владелец 15.09.2026: «пустые места, не адаптивно»).
   Цена прижата к низу (margin-top:auto), и любая строка, которая у одной
   карточки переносилась, — артикул с фасовкой, цена за кг, свойства —
   растягивала ряд, а у соседей над ценой оставалась дыра до 47 px. Теперь
   у каждой строки своё постоянное число строк. */
.gzp-card-meta { overflow: hidden; color: #9fb6d6; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.gzp-card-spec {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.9em;
  color: #c7e6ff;
  font-size: 12px;
  line-height: 1.45;
}
.gzp-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  margin-top: auto;
  padding-top: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gzp-card-price b { flex: none; color: #fff; font-size: 18px; font-weight: 900; white-space: nowrap; }
.gzp-card-price i { min-width: 0; overflow: hidden; color: #9fbadb; font-size: 11.5px; font-style: normal; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.gzp-card-price.is-ask { color: #cfe0f5; font-size: 13px; font-weight: 700; }

.gzp-add,
.gzp-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.gzp-add { border: 0; background: #0c80f5; color: #fff; }
.gzp-add:hover { background: #2b95ff; }
/* Тёмный текст на зелёном — как у карточки каталога: белый даёт 2:1. */
.gzp-add[aria-pressed="true"] { background: var(--green, #31d889); color: #04281a; }
.gzp-more { border: 1px solid var(--line, #225185); background: #0a2450; color: #dce7f7; }
.gzp-more:hover { border-color: var(--cyan, #45bbff); color: #fff; }

/* Место плашки «Новинка» на снимке. Сам вид — общее стекло в styles.css
   (:is(.pc-badge.is-new, .gzp-badge)): одна плашка на весь магазин. */
.gzp-badge {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .gzp-rail { grid-auto-columns: calc((100% - 24px) / 3); }
}
@media (max-width: 940px) {
  /* Боковая карточка встаёт заголовком над лентой. */
  .gzp-rail-wrap, .gzp-season-wrap { grid-template-columns: minmax(0, 1fr); }
  .gzp-side { --gzp-side-pad: 18px; }
  .gzp-side .gzp-side-btn { margin-top: 4px; }
  .gzp-side-media { flex: none; min-height: 0; height: 200px; }
  .gzp-rail { grid-auto-columns: calc((100% - 24px) / 3); }
}
@media (max-width: 640px) {
  .gzp-rail-sec.section { padding-top: 28px; }
  .gzp-season.section { padding-top: 40px; }
  .gzp-side-media { height: 170px; }        /* полоса-баннер над лентой, кнопка на ней */
  .gzp-arrows { display: none; }             /* на телефоне листают пальцем */
  .gzp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gzp-tabs::-webkit-scrollbar { display: none; }
  .gzp-tab { flex: 0 0 auto; }
  /* Две карточки и край третьей: видно, что лента листается. */
  .gzp-rail { grid-auto-columns: 44%; gap: 10px; }
  .gzp-rail--static {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 72%;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .gzp-card { padding: 10px; }
  .gzp-card-title { font-size: 14px; }
  .gzp-card-price b { font-size: 16px; }
  .gzp-badge { top: 16px; left: 16px; }
}

/* ============================================================
   МАРКИ: карточки и лента составов в движении
   ============================================================ */
.gzp-brands.section { padding: 72px 0 0; }
.gzp-brands-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.gzp-brands-head h2 {
  margin: 6px 0 0;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.gzp-brand-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.gzp-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 24px 22px 20px;
  border: 1px solid rgba(69, 187, 255, .18);
  border-radius: 20px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(69, 187, 255, .12), transparent 60%),
    linear-gradient(165deg, #0d2d5c, #081f42);
  transition: border-color .25s, transform .25s;
}
.gzp-brand:hover { border-color: rgba(69, 187, 255, .45); transform: translateY(-2px); }
.gzp-brand-logo {
  width: auto;
  height: 30px;
  max-width: 100%;
  align-self: flex-start;
  margin-bottom: 6px;
  object-fit: contain;
}
/* Ровные карточки марок: у Shine Systems кнопки «Страница марки» и «Все
   товары Shine Systems» не влезали в строку, карточка вырастала, и у
   соседей между текстом и кнопками оставалось до 49 px пустоты. Кнопки —
   одной строкой (подпись «Все товары», марка — в aria-label), текст —
   постоянным числом строк. */
.gzp-brand-n { margin: 0; color: #8fd4ff; font-size: 12.5px; font-weight: 800; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gzp-brand-txt { margin: 0; color: #b6c8e0; font-size: 13.5px; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.gzp-brand-acts { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.gzp-brand-acts > * { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
@media (min-width: 941px) {
  .gzp-brand-n { min-height: 2.9em; }
  .gzp-brand-txt { min-height: 4.65em; }
}
.gzp-brand-page,
.gzp-brand-all,
.gzp-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line, #225185);
  border-radius: 11px;
  background: #0a2450;
  color: #dce7f7;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.gzp-brand-page:hover,
.gzp-brand-all:hover,
.gzp-pause:hover { border-color: var(--cyan, #45bbff); color: #fff; }
.gzp-pause { flex: 0 0 auto; }

/* Лента составов — «редакционная строка» (владелец 15.09.2026: «товары
   больше, лаконичные красивые надписи, дорого»; проект креативного агента,
   вариант B2 из трёх). Крупный снимок 3:4, справа марка золотом, название,
   тонкая линия и цена; между товарами — золотая нить.
   Две одинаковые копии списка и сдвиг ровно на −50% — шов не виден. Отступы
   только внутри li: тогда половины дорожки совпадают до пикселя. Без
   растворения краёв: на белой плитке оно читалось грязной полосой. */
.gzp-reel{position:relative;margin-top:14px;overflow:hidden;border-radius:24px;
  background:radial-gradient(60% 140% at 50% 130%,rgba(69,187,255,.12),transparent 62%),linear-gradient(180deg,rgba(10,36,80,.6),rgba(6,20,44,.85));
  box-shadow:inset 0 0 0 1px rgba(143,212,255,.12),inset 0 1px 0 rgba(255,255,255,.05)}
.gzp-reel-track{display:flex;width:max-content;animation:gzp-reel var(--reel-dur,360s) linear infinite}
.gzp-reel-track ul{display:flex;margin:0;padding:0;list-style:none}
.gzp-reel li{position:relative;display:flex;padding:24px 28px}
.gzp-reel li::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:linear-gradient(transparent,rgba(255,216,115,.26),transparent)}
.gzp-reel-item{position:relative;display:flex;align-items:center;gap:22px;color:inherit;text-decoration:none;border-radius:18px}
/* Мягкий голубой свет под снимком. */
.gzp-reel-item::before{content:"";position:absolute;left:10px;top:192px;width:130px;height:20px;border-radius:50%;background:radial-gradient(closest-side,rgba(69,187,255,.32),transparent);filter:blur(5px);transition:opacity .45s,transform .45s cubic-bezier(.2,0,0,1)}
.gzp-reel-pic{position:relative;flex:none;display:grid;place-items:center;width:150px;height:200px;overflow:hidden;border-radius:18px;background:var(--plate-bg,#fff);
  box-shadow:0 1px 1px rgba(0,0,0,.18),0 16px 28px -16px rgba(0,0,0,.7);transition:transform .45s cubic-bezier(.2,0,0,1),box-shadow .45s cubic-bezier(.2,0,0,1)}
.gzp-reel-pic img{width:84%;height:84%;object-fit:contain}
.gzp-reel-txt{display:flex;flex-direction:column;width:150px;min-width:0}
.gzp-reel-brand{font-size:10.5px;font-weight:700;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,216,115,.85)}
.gzp-reel-name{margin-top:8px;font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.012em;color:#fff;text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:color .3s}
.gzp-reel-price{display:flex;flex-direction:column;gap:3px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(143,212,255,.14);font-variant-numeric:tabular-nums}
.gzp-reel-price b{font-size:15px;font-weight:600;color:#eaf2ff;white-space:nowrap}
.gzp-reel-price i{font-style:normal;font-size:12px;line-height:1.3;color:#8ea6c6}
.gzp-reel-item:focus-visible{outline-offset:6px}
@media (hover:hover){
  .gzp-reel-item:hover .gzp-reel-pic{transform:translateY(-5px);box-shadow:0 1px 1px rgba(0,0,0,.18),0 26px 36px -18px rgba(0,0,0,.75)}
  .gzp-reel-item:hover::before{opacity:.55;transform:scaleX(.86)}
  .gzp-reel-item:hover .gzp-reel-name{color:#ffd873}
}
.gzp-reel:hover .gzp-reel-track,.gzp-reel:focus-within .gzp-reel-track,.gzp-brands.is-paused .gzp-reel-track{animation-play-state:paused}
@keyframes gzp-reel{to{transform:translateX(-50%)}}

@media (max-width: 940px) {
  .gzp-brand-grid { grid-template-columns: minmax(0, 1fr); }
  .gzp-brand { padding: 20px 18px 18px; }
}
@media (max-width: 640px) {
  .gzp-brands.section { padding-top: 52px; }
  .gzp-brands-head { align-items: center; }
  /* На телефоне лента не едет, её листают пальцем: свайп спорил бы с движением. */
  .gzp-reel{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:20px}
  .gzp-reel::-webkit-scrollbar{display:none}
  .gzp-reel-track{animation:none}
  .gzp-reel-track ul[aria-hidden="true"],.gzp-brands .gzp-pause{display:none}
  .gzp-reel li{padding:18px 20px;scroll-snap-align:start}
  .gzp-reel-item{gap:16px}
  .gzp-reel-item::before{left:8px;top:136px;width:92px;height:16px}
  .gzp-reel-pic{width:108px;height:144px;border-radius:14px}
  .gzp-reel-txt{width:126px}
  .gzp-reel-name{font-size:15px}
  .gzp-reel-price{margin-top:10px;padding-top:9px}
  .gzp-reel-price b{font-size:14px}
}

/* ============================================================
   ССЫЛКИ НА РАЗДЕЛЫ ПОД КАТЕГОРИЯМИ ВИТРИНЫ
   ============================================================ */
.gzp-kinds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: min(var(--max, 1240px), calc(100% - 56px));
  margin: 18px auto 0;
}
.gzp-kinds-h { margin-right: 2px; color: #9fb6d6; font-size: 13px; font-weight: 700; }

/* ============================================================
   СТРАНИЦЫ РАЗДЕЛОВ (tools/chemistry-kind-pages.py)
   Ширину и отступ под шапку даёт .cartp из cart.css и shop-head.css.
   ============================================================ */
.kp.cartp { max-width: 1240px; }
.kp h1 { text-wrap: balance; }
.kp .cart-lead { max-width: 72ch; margin-bottom: 18px; }
.kp :is(a, button):focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }

.kp-facts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kp-facts li {
  padding: 7px 12px;
  border: 1px solid rgba(69, 187, 255, .22);
  border-radius: 999px;
  background: rgba(69, 187, 255, .08);
  color: #cfe6ff;
  font-size: 13px;
  font-weight: 700;
}

.kp-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.kp-kinds a,
.gzp-kinds a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--line, #225185);
  border-radius: 999px;
  background: #0a2450;
  color: #dce7f7;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.kp-kinds a:hover,
.gzp-kinds a:hover { border-color: var(--cyan, #45bbff); color: #fff; }
.kp-kinds a[aria-current="page"] {
  border-color: var(--cyan, #45bbff);
  background: rgba(69, 187, 255, .15);
  color: #fff;
}
.gzp-kinds a:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
/* Без дублей с шапкой: на планшете и ПК те же разделы стоят строкой в шапке
   (tools/chemistry-shop-header.py). На телефоне строки разделов в шапке нет —
   там лента остаётся. Ссылки остаются в разметке для поисковых роботов.
   Строку «Разделы каталога по теме» в статьях журнала не трогаем: это подборка. */
@media (min-width: 641px) {
  .gzp-kinds, .kp-facts + .kp-kinds { display: none; }
}

.kp-sec { margin-top: 34px; }
.kp-sec h2 { margin: 0 0 14px; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; letter-spacing: -.02em; }

.gzp-rail.kp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kp-noimg { color: #6d84a6; font-size: 13px; font-weight: 800; }

/* Таблица листается внутри своей рамки, страница вбок не едет. */
.kp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line, #225185);
  border-radius: 16px;
  background: rgba(8, 31, 67, .45);
}
.kp-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13.5px; }
.kp-table thead th {
  padding: 11px 12px;
  background: #0c2a56;
  color: #9fb6d6;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.kp-table tbody th,
.kp-table td {
  padding: 10px 12px;
  border-top: 1px solid rgba(34, 81, 133, .6);
  color: #cfe0f5;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}
.kp-table tbody th a { color: #fff; font-weight: 800; text-decoration: none; }
.kp-table tbody th a:hover { color: #8fd4ff; text-decoration: underline; }
.kp-table .is-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.kp-table tbody tr:nth-child(even) > * { background: rgba(8, 31, 67, .4); }
.kp-note { margin: 10px 0 0; color: #8fa8c8; font-size: 12.5px; line-height: 1.55; }
.kp-note a { color: #8fd4ff; }

.kp-howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kp-howto article {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(69, 187, 255, .16);
  border-radius: 16px;
  background: rgba(8, 31, 67, .5);
}
.kp-howto h3 { margin: 0 0 4px; font-size: 17px; }
.kp-howto h3 a { color: #fff; text-decoration: none; }
.kp-howto h3 a:hover { color: #8fd4ff; }
.kp-howto dl { margin: 0; }
.kp-howto dt {
  margin-top: 12px;
  color: #8fd4ff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kp-howto dd { margin: 4px 0 0; color: #cfe0f5; font-size: 13.5px; line-height: 1.55; }

.kp-back { margin: 36px 0 0; }
.kp-back a { color: #8fd4ff; font-weight: 700; }

@media (max-width: 1080px) {
  .gzp-rail.kp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kp-howto { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* На странице раздела карточки — сеткой в две колонки, а не лентой:
     человек пришёл выбирать среди всех, а не листать. */
  .gzp-rail.kp-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    padding-bottom: 0;
  }
  .gzp-kinds { width: calc(100% - 36px); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gzp-kinds::-webkit-scrollbar { display: none; }
  .gzp-kinds a, .gzp-kinds-h { flex: 0 0 auto; }
  .kp-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kp-kinds::-webkit-scrollbar { display: none; }
  .kp-kinds a { flex: 0 0 auto; }
}

/* ============================================================
   ЖУРНАЛ (tools/chemistry-journal.py) и его карточки на витрине
   ============================================================ */
.gzp-journal { width: min(var(--max, 1240px), calc(100% - 56px)); margin-inline: auto; }
.gzp-journal.section { padding: 72px 0 0; }
.gzp-journal :is(a, button):focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
.gzp-journal .jr-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.jr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
/* Ссылка растянута на всю карточку через ::after: кликается любое место,
   а в разметке одна ссылка на статью, а не три. */
.jr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 22px 18px;
  overflow: hidden;                        /* приближенный снимок не вылезает за рамку */
  border: 1px solid rgba(69, 187, 255, .18);
  border-radius: 20px;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(69, 187, 255, .12), transparent 60%),
    linear-gradient(165deg, #0d2d5c, #081f42);
  transition: border-color .25s, transform .25s;
}
.jr-card:hover { border-color: rgba(69, 187, 255, .45); transform: translateY(-2px); }
/* Заголовок и описание — постоянное число строк: дата прижата к низу, и
   разная длина текста оставляла у соседей в ряду дыру до 77 px. */
.jr-card-h { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.jr-card-h a { color: #fff; text-decoration: none; }
.jr-card-h a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.jr-card:hover .jr-card-h a { color: #8fd4ff; }
.jr-card p { margin: 0; color: #b6c8e0; font-size: 14px; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* Одинаковая высота нужна, только когда карточки стоят рядом. */
@media (min-width: 641px) {
  .jr-card-h { min-height: 3.75em; }
  .jr-card p { min-height: 4.65em; }
}
.jr-card time { margin-top: auto; padding-top: 4px; color: #8fa8c8; font-size: 12.5px; }
/* Снимок во всю ширину карточки, низ растворяется в фоне полностью, без
   полупрозрачного «хвоста», который читался краем прямоугольника. Углы
   обрезает сама карточка (overflow), свой радиус снимку не нужен. */
.jr-card-img {
  display: block;
  width: calc(100% + 44px);
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: -22px -22px -6px;                /* рубрика ближе к прозрачному краю, но не на нём */
  object-fit: cover;
  -webkit-mask-image: linear-gradient(#000 55%, rgba(0, 0, 0, .6) 72%, rgba(0, 0, 0, .2) 88%, transparent);
          mask-image: linear-gradient(#000 55%, rgba(0, 0, 0, .6) 72%, rgba(0, 0, 0, .2) 88%, transparent);
  transition: transform .9s cubic-bezier(.2, 0, 0, 1);
}
.jr-card:hover .jr-card-img { transform: scale(1.04); }
.jr-rubric { color: #ffd873; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.jr-article h1 { max-width: 30ch; text-wrap: balance; }
.jr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 10px 0 26px;
  color: #8fa8c8;
  font-size: 13px;
}
.jr-body { max-width: 900px; }
.jr-body > h2 {
  margin: 38px 0 10px;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.jr-body > p { max-width: 70ch; margin: 0 0 14px; color: #cfe0f5; font-size: 16px; line-height: 1.7; }
.jr-body > p a { color: #8fd4ff; text-decoration: underline; text-underline-offset: 2px; }
.jr-body > p.jr-lead { color: #eaf3ff; font-size: 18px; line-height: 1.6; }
.jr-body .kp-table-wrap,
.jr-body .kp-grid { margin: 16px 0 20px; }
.jr-body .gzp-rail.kp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jr-table-narrow { min-width: 480px; }
.jr-table-narrow caption { padding: 12px 12px 6px; font-weight: 800; text-align: left; }
.jr-table-narrow caption a { color: #fff; text-decoration: none; }
.jr-table-narrow caption a:hover { color: #8fd4ff; text-decoration: underline; }
.jr-more .jr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1020px) {
  .gzp-journal .jr-list,
  .jr-more .jr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gzp-journal.section { padding-top: 52px; }
  .jr-list,
  .gzp-journal .jr-list,
  .jr-more .jr-list { grid-template-columns: minmax(0, 1fr); }
  .jr-body .gzp-rail.kp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-body > p { font-size: 15.5px; }
  .jr-body > p.jr-lead { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-card { transition: none; }
  .jr-card:hover { transform: none; }
  .jr-card-img, .gzp-side-img { transition: none; }
  .jr-card:hover .jr-card-img,
  .gzp-side-media:has(.gzp-side-btn:hover, .gzp-side-btn:focus-visible) .gzp-side-img { transform: none; }
}

/* ============================================================
   МЕСТА ПОКАЗА МАРОК (placements.js, api/placements.php)
   Пустой блок скрыт; скрипт заполняет его, только если есть
   размещение, и всегда ставит подпись «Предложение марки».
   ============================================================ */
.gzs-slot[hidden] { display: none !important; }
.gzs-slot--home,
.gzs-slot--catalog { width: min(var(--max, 1240px), calc(100% - 56px)); margin-inline: auto; }
.gzs-slot--home { margin-top: 16px; }
.gzs-slot--catalog { margin-top: 40px; }
.gzs-slot--kind { margin-top: 30px; }
.gzs-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.gzs-label { color: #8fa8c8; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.gzs-label.is-ad { color: #ffd873; }
.gzs-slot--home > .gzs-label { display: block; margin-top: 6px; }

.gzs-strip {
  position: relative;
  display: block;
  aspect-ratio: 6.2 / 1;
  overflow: hidden;
  border: 1px solid rgba(69, 187, 255, .2);
  border-radius: 20px;
  background: #0a2450;
  color: #fff;
  text-decoration: none;
}
.gzs-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gzs-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 21, 46, .85) 0%, rgba(5, 21, 46, .35) 55%, transparent 80%);
}
.gzs-strip-txt {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(16px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(60%, 540px);
  transform: translateY(-50%);
}
.gzs-strip-txt b { font-size: clamp(17px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.gzs-strip-txt span { color: #cfe0f5; font-size: clamp(12.5px, 1.3vw, 15px); line-height: 1.4; }
.gzs-strip:hover { border-color: rgba(69, 187, 255, .5); }
.gzs-strip:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 3px; }

.gzs-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kp .gzs-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 640px) {
  .gzs-slot--home,
  .gzs-slot--catalog { width: calc(100% - 36px); }
  .gzs-strip { aspect-ratio: 3 / 1; }
  .gzs-strip-txt { max-width: 82%; }
  .gzs-strip-txt span { display: none; }
  /* На телефоне полоса товаров листается, как остальные ленты. */
  .gzs-items,
  .kp .gzs-items { grid-template-columns: none; }
}

/* ---------- «уменьшить движение» ---------- */
@media (prefers-reduced-motion: reduce) {
  .gzp-card, .gzp-brand, .gzp-tab, .gzp-reel-pic, .gzp-reel-item::before, .gzp-reel-name { transition: none; }
  .gzp-card:hover, .gzp-brand:hover, .gzp-reel-item:hover .gzp-reel-pic { transform: none; }
  /* Лента не едет сама, её листают. Вторая копия и кнопка паузы не нужны. */
  .gzp-reel { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #2a5b8f transparent; }
  .gzp-reel-track { animation: none; }
  .gzp-reel-track ul[aria-hidden="true"] { display: none; }
  .gzp-pause { display: none; }
}