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

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

   Шкала отступов (21.09.2026), общая с витриной: 8 / 12 / 16 / 20 /
   24 / 32 / 40 / 48. Всё от 12px приведено к ближайшему шагу, при
   ничье — к меньшему; радиусы — к 12 / 16 / 24 и 999px у пилюль.
   Промо-секции отбиваются одинаково: 48px на десктопе, 32px на
   телефоне. Мельче 12px не трогали — там внутренности плашек и
   стрелок, где пиксель задаёт размер элемента, а не ритм.
   ============================================================ */

/* ---------- общая колонка ---------- */
.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: 20px; }
.gzp-terms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
/* На английской и вьетнамской витрине плашек три: Geizer Coin — программа
   русская, и обещать монеты там нечем (tools/chemistry-promo.py). В ряду
   из четырёх колонок три плашки оставляли справа пустую четверть. */
.gzp-terms-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gzp-term {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 12px 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: 12px;
  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;
}
/* Снимки вместо значков (23.09.2026, решение владельца). Сторона 56:
   на 36 фотография читается как пятно, а предмет на ней узнаётся
   только крупно. Сам снимок квадратный, скругление даёт рамка. */
.gzp-term-ico--pic {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  background: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(4, 18, 40, .45);
}
.gzp-term-ico--pic img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Монета — единственный знак на прозрачном фоне: она круглая и своей
   плашки не имеет, поэтому рамка ей не нужна. */
.gzp-term-ico--pic:has(img[src*="coin"]) {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(4, 18, 40, .4);
}
.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; }
}

/* ============================================================
   ЛЕНТЫ ТОВАРОВ: новинки и сезон
   ============================================================ */
/* Шаг между промо-секциями один на все четыре (21.09.2026): ленты, марки
   и журнал — блоки одного веса, а стояли на 40, 48, 72 и 72px. Разнобой
   читался так, будто журнал важнее новинок. Теперь 48px на десктопе и
   32px на телефоне — одинаково у всех, см. блоки .gzp-brands и
   .gzp-journal ниже. */
.gzp-rail-sec.section { padding: 48px 0 0; }
.gzp-season.section { padding: 48px 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: 16px;
  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 16px 16px;            /* 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 16px;
  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: 16px;
  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: 12px;
  /* Цвет края кадра (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: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.gzp-add { border: 0; background: #0a6fd8; color: #fff; }  /* #0c80f5 давал 3,9:1 с белым, нужно ≥ 4,5 (аудит 26.09.2026) */
.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: 32px; }
  .gzp-season.section { padding-top: 32px; }
  .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: 48px 0 0; }
.gzp-brands-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.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: 12px;
}
.gzp-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 24px 20px 20px;
  border: 1px solid rgba(69, 187, 255, .18);
  border-radius: 16px;
  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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line, #225185);
  border-radius: 12px;
  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 { border-color: var(--cyan, #45bbff); color: #fff; }

@media (max-width: 940px) {
  .gzp-brand-grid { grid-template-columns: minmax(0, 1fr); }
  .gzp-brand { padding: 20px 16px 16px; }
}
@media (max-width: 640px) {
  .gzp-brands.section { padding-top: 32px; }
  .gzp-brands-head { align-items: center; }

}

/* ============================================================
   ССЫЛКИ НА РАЗДЕЛЫ ПОД КАТЕГОРИЯМИ ВИТРИНЫ
   ============================================================ */
.gzp-kinds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: min(var(--max, 1240px), calc(100% - 56px));
  margin: 16px 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: 16px; }
.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 12px;
  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: 32px; }
.kp-sec h2 { margin: 0 0 12px; 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: 16px;
  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: 32px 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: 48px 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: 12px;
}
/* Ссылка растянута на всю карточку через ::after: кликается любое место,
   а в разметке одна ссылка на статью, а не три. */
.jr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 20px 20px 16px;
  overflow: hidden;                        /* приближенный снимок не вылезает за рамку */
  border: 1px solid rgba(69, 187, 255, .18);
  border-radius: 16px;
  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 12px;
  margin: 10px 0 24px;
  color: #8fa8c8;
  font-size: 13px;
}
.jr-body { max-width: 900px; }
.jr-body > h2 {
  margin: 40px 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 12px; 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: 32px; }
  .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: 32px; }
.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: 16px;
  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 { transition: none; }
  .gzp-card:hover, .gzp-brand:hover { transform: none; }

}

/* Сердце «отложить» на карточке ленты (22.09.2026). Владелец: «в этом
   блоке нет возможности добавить в избранное». Вид тот же, что у сетки
   каталога (.pc-fav в styles.css): человек не должен гадать, одна это
   кнопка или разные. Карточка ленты — позиционированный li, сердце
   ложится в её правый верхний угол поверх снимка-ссылки. */
.gzp-card { position: relative; }
.gzp-card .gzp-fav {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  display: grid; place-items: center;
  width: 36px; height: 36px; margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #0a2547;
  box-shadow: 0 4px 12px rgba(0, 8, 24, .25);
  cursor: pointer;
}
.gzp-card .gzp-fav svg { width: 19px; height: 19px; }
.gzp-card .gzp-fav:hover { background: #fff; color: #e0245e; }
.gzp-card .gzp-fav[aria-pressed="true"] { color: #e0245e; }
.gzp-card .gzp-fav[aria-pressed="true"] svg { fill: currentColor; }
.gzp-card .gzp-fav:focus-visible { outline: 2px solid var(--cyan, #45bbff); outline-offset: 2px; }
/* Бейдж «Новинка» стоит слева сверху — сердцу он не мешает. */

/* ── Цель «отложить» в лентах на телефоне (23.09.2026) ────────────────
   Кружок 36 px виден правильно, но пальцем в него попадают через раз, а
   промах открывает товар вместо «отложить». В сетке каталога это уже
   решено прозрачным полем вокруг (styles.css); повторяем приём здесь,
   не меняя вид: сам кружок остаётся 36 px, область нажатия — 44. */
@media (max-width: 760px) {
  .gzp-card .gzp-fav {
    right: 6px;
    top: 6px;
    width: 44px;
    height: 44px;
    background: transparent;
    box-shadow: none;
  }
  .gzp-card .gzp-fav::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 12px rgba(0, 8, 24, .25);
  }
  .gzp-card .gzp-fav svg { position: relative; z-index: 1; }
}
/* Category, brand and editorial cards use the storefront surface system. */
.gzp-card{background:#0b203c;border-color:#38516f;border-radius:18px;box-shadow:0 6px 20px rgba(0,8,22,.12)}
.gzp-card:hover{border-color:#6b96be;box-shadow:0 10px 24px rgba(0,8,22,.2);transform:none}
.gzp-card-title{font-weight:650;line-height:1.4}
.gzp-card-brand,.gzp-card-meta,.gzp-card-spec{color:#b7c9df}
.gzp-card-price b{font-size:21px;font-weight:750;letter-spacing:-.025em}
.gzp-card-price i{font-size:13px;color:#b7c9df;font-weight:500}
.gzp-add{min-height:44px;border-radius:11px;font-weight:650}
.gzp-add:hover{background:#0868c5}
.gzp-card :is(a,button):focus-visible,.kp :is(a,button,summary):focus-visible{outline:3px solid #8bd4ff;outline-offset:3px}
.kp-kinds a{min-height:40px;display:inline-flex;align-items:center;border-color:#3c5677}
.kp-table-wrap{border-color:#38516f;border-radius:16px;background:#0b203c}
.kp-table :is(th,td){padding:14px 12px;line-height:1.55}
.jr-card{background:#0b203c;border-color:#38516f;border-radius:18px;box-shadow:0 6px 20px rgba(0,8,22,.1)}
@media(max-width:720px){.gzp-card-title{font-size:14px}.gzp-card-price b{font-size:19px}.gzp-card-price i{font-size:12px}.kp-kinds a{min-height:44px}}
@media(prefers-reduced-motion:reduce){.gzp-card,.gzp-add,.jr-card{transition:none;transform:none}}

/* Campaign art direction: display headline, factual pack offer, product photography. */
body main .chem-hero-banner.gzp-entry{width:min(var(--max,1240px),calc(100% - 56px));margin:0 auto;padding:108px 0 0;display:block}
.gzp-entry > h1{font-size:20px;font-weight:600;line-height:1.35;letter-spacing:-.015em;margin:0 0 16px;color:#e8f2fb}
.gzp-campaign-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(2,215px);gap:14px}
.gzp-campaign{position:relative;isolation:isolate;display:block;min-width:0;overflow:hidden;border:1px solid rgba(166,204,236,.2);border-radius:16px;background:#081a2e;color:#fff;text-decoration:none}
.gzp-campaign-main{grid-row:1/3}
.gzp-campaign > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.gzp-campaign::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,16,30,.3),transparent 66%);pointer-events:none}
.gzp-campaign-copy{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:28px;max-width:56%;box-sizing:border-box}
.gzp-campaign-copy small{font-size:20px;line-height:1.2;color:#83d9f8;margin-bottom:4px;font-weight:750;letter-spacing:-.025em}
.gzp-campaign-product{font-size:14px;font-weight:600;line-height:1.3;color:#e0effb;margin-bottom:16px}
.gzp-campaign-copy strong{max-width:100%;font-size:34px;line-height:1;letter-spacing:-.04em;font-weight:900;hyphens:none;overflow-wrap:normal}
.gzp-campaign-copy .gzp-campaign-headline{font-family:"Arial Black",Arial,sans-serif;font-size:clamp(38px,4vw,58px);line-height:.98;letter-spacing:-.055em;text-transform:uppercase;color:#f6fbff;text-shadow:0 2px 14px rgba(0,18,38,.25)}
.gzp-campaign-headline > span{display:block}
.gzp-campaign-offer{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;margin-top:18px;padding:10px 22px 11px 16px;clip-path:polygon(0 0,100% 0,94% 100%,0 100%);background:#77d6f7;color:#072840;max-width:100%;box-sizing:border-box}
.gzp-campaign-offer > b{grid-row:1/3;font-family:"Arial Black",Arial,sans-serif;font-size:70px;font-weight:900;line-height:.95;letter-spacing:-.06em}
.gzp-campaign-offer > span{font-size:21px;font-weight:850;line-height:1.15;letter-spacing:-.02em}
.gzp-campaign-offer > i{font-size:12px;font-style:normal;font-weight:650;line-height:1.5;white-space:nowrap}
.gzp-campaign-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 16px;border:1px solid #9bdff5;border-radius:8px;background:#092c47;color:#effaff;font-size:13px;font-weight:750;margin-top:16px;line-height:1.4}
.gzp-campaign-side .gzp-campaign-copy{padding:22px;max-width:61%}
.gzp-campaign-side small{font-size:15px;margin-bottom:9px;color:#b7e8f9}
.gzp-campaign-side strong{font-family:"Arial Black",Arial,sans-serif;font-size:38px;letter-spacing:-.05em}
.gzp-campaign-purpose{font-size:12px;line-height:1.35;margin-top:9px;color:#e3f2fc}
.gzp-campaign-link{display:inline-block;font-size:12px;line-height:1.5;margin-top:16px;border-bottom:1px solid rgba(160,218,250,.7);color:#e4f5ff}
.gzp-campaign-link i{font-style:normal}
.gzp-campaign:hover{border-color:#7ecdf3}.gzp-campaign:hover .gzp-campaign-cta{background:#154a68}
.gzp-entry a:focus-visible,.gzp-story:focus-visible{outline:3px solid #9cddff;outline-offset:4px}
@media(max-width:1000px){.gzp-campaign-grid{grid-template-rows:repeat(2,210px)}.gzp-campaign-copy{padding:22px;max-width:58%}.gzp-campaign-copy .gzp-campaign-headline{font-size:40px}.gzp-campaign-side .gzp-campaign-copy{padding:17px}.gzp-campaign-side strong{font-size:29px}.gzp-campaign-offer > b{font-size:58px}.gzp-campaign-offer > span{font-size:16px}.gzp-campaign-offer > i{font-size:10px}.gzp-campaign-offer{padding:10px 16px 10px 12px}}
@media(max-width:760px){body main .chem-hero-banner.gzp-entry{width:calc(100% - 36px);padding-top:94px}.gzp-entry > h1{font-size:18px;margin-bottom:12px}.gzp-campaign-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:300px 175px;gap:10px}.gzp-campaign-main{grid-column:1/-1;grid-row:auto}.gzp-campaign-main > img{object-position:76% center}.gzp-campaign-main::after{background:linear-gradient(90deg,rgba(3,16,30,.7),rgba(3,16,30,.15) 52%,transparent 78%)}.gzp-campaign-main .gzp-campaign-copy{padding:14px;max-width:63%}.gzp-campaign-copy small{font-size:13px;margin-bottom:3px}.gzp-campaign-product{font-size:11px;margin-bottom:12px}.gzp-campaign-copy .gzp-campaign-headline{font-size:clamp(25px,7.4vw,36px);line-height:1.02}.gzp-campaign-offer{margin-top:13px;padding:8px 12px 8px 9px;column-gap:7px}.gzp-campaign-offer > b{font-size:44px}.gzp-campaign-offer > span{font-size:12px}.gzp-campaign-offer > i{font-size:9px}.gzp-campaign-cta{font-size:11px;padding:8px 10px;margin-top:13px;white-space:nowrap}.gzp-campaign-side .gzp-campaign-copy{padding:12px;max-width:100%;justify-content:flex-end}.gzp-campaign-side small{font-size:11px;margin-bottom:6px}.gzp-campaign-side strong{font-size:24px}.gzp-campaign-purpose{font-size:10px;line-height:1.3;margin-top:6px;max-width:95px}.gzp-campaign-link{font-size:11px;margin-top:9px}.gzp-campaign-side::after{background:linear-gradient(0deg,rgba(3,16,30,.94),rgba(3,16,30,0) 85%)}}
/* Purchase details are one quiet information strip, not four competing cards. */
body main .gzp-terms .gzp-terms-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-block:1px solid rgba(166,204,236,.18);padding:0;overflow:visible}
body main .gzp-terms .gzp-terms-list--3{grid-template-columns:repeat(3,minmax(0,1fr))}
body main .gzp-terms .gzp-term{display:block;min-width:0;border:0;border-radius:0;box-shadow:none;background:none;padding:14px 16px}
body main .gzp-terms .gzp-term + .gzp-term{border-left:1px solid rgba(166,204,236,.18)}
body main .gzp-terms .gzp-term-ico{display:none}
body main .gzp-terms .gzp-term-txt b{font-size:12px;line-height:1.4;font-weight:600;color:#e7f1fa}
body main .gzp-terms .gzp-term-txt > span{font-size:12px;line-height:1.45;color:#b6c9dc}
@media(max-width:760px){body main .gzp-terms .gzp-terms-list,body main .gzp-terms .gzp-terms-list--3{grid-template-columns:repeat(2,minmax(0,1fr))}body main .gzp-terms .gzp-term{padding:10px}body main .gzp-terms .gzp-term:nth-child(odd){border-left:0}body main .gzp-terms .gzp-term:nth-child(n+3){border-top:1px solid rgba(166,204,236,.18)}}
.gzp-stories{width:min(var(--max,1240px),calc(100% - 56px));margin:28px auto 0;display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,2.4fr);gap:24px;align-items:center}
.gzp-stories-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:0}
.gzp-stories-head h2{margin:0;color:#f0f7ff;font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.25}
.gzp-stories-head p{margin:0;color:#b6cce1;font-size:14px;line-height:1.5}
.gzp-stories-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:660px;gap:14px;list-style:none;padding:0;margin:0;overflow:visible}
.gzp-stories-grid li{min-width:0}
.gzp-story{position:relative;display:block;isolation:isolate;aspect-ratio:3/4;overflow:hidden;border:1px solid rgba(166,204,236,.25);border-radius:18px;background:#0b2947;color:#fff;text-decoration:none}
.gzp-story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gzp-story::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,23,43,.05) 20%,rgba(5,23,43,.94))}
.gzp-story span{position:absolute;z-index:1;left:20px;right:20px;bottom:22px;max-width:22ch;font-size:22px;font-weight:700;line-height:1.25;text-wrap:balance;overflow-wrap:anywhere}
.gzp-story:hover{border-color:#8fd4ff}
.gzp-story-dialog{width:min(430px,calc(100% - 24px));height:min(740px,calc(100dvh - 24px));max-width:none;max-height:none;box-sizing:border-box;padding:90px 22px 22px;border:1px solid rgba(166,204,236,.32);border-radius:20px;background:#071c33;color:#fff;isolation:isolate;overflow:hidden;box-shadow:0 25px 90px rgba(0,0,0,.5)}
.gzp-story-dialog[open]{display:flex;flex-direction:column;justify-content:flex-end}
.gzp-story-dialog::backdrop{background:rgba(2,11,23,.85);backdrop-filter:blur(8px)}
.gzp-story-dialog::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,16,30,.1),rgba(3,16,30,.94) 78%);pointer-events:none}
.gzp-story-dialog__image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.gzp-story-dialog__progress{position:absolute;top:14px;left:16px;width:calc(100% - 32px);height:3px;border:0;appearance:none}
.gzp-story-dialog__progress::-webkit-progress-bar{background:rgba(255,255,255,.3)}
.gzp-story-dialog__progress::-webkit-progress-value{background:#77d3f4}
.gzp-story-dialog__progress::-moz-progress-bar{background:#77d3f4}
.gzp-story-dialog__close{position:absolute;top:28px;right:16px;min-height:44px;padding:8px 12px;background:rgba(5,24,43,.88)}
.gzp-story-dialog__title{font-size:28px;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;overflow-wrap:anywhere}
.gzp-story-dialog__text{font-size:14px;line-height:1.55;color:#d4e1ee;margin:0 0 20px}
.gzp-story-dialog__actions{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
.gzp-story-dialog button{border:1px solid rgba(166,204,236,.3);border-radius:9px;color:#eef7ff;font:inherit;font-size:12px;font-weight:600;line-height:1.35;cursor:pointer;min-height:44px;white-space:normal;overflow-wrap:anywhere}
.gzp-story-dialog__actions button{padding:8px;background:rgba(5,24,43,.88)}
.gzp-story-dialog__read{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;background:#6acdf2;color:#06233d;border-radius:9px;text-decoration:none;font-size:14px;font-weight:750}
.gzp-story-dialog :is(a,button):focus-visible{outline:3px solid #9cddff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.gzp-story-dialog::backdrop{backdrop-filter:none}}
@media(max-width:760px){
  .gzp-stories{width:calc(100% - 36px);margin-top:28px;grid-template-columns:minmax(0,1fr);gap:12px}.gzp-stories-head{margin-bottom:0}.gzp-stories-head h2{font-size:23px}
  .gzp-stories-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gzp-story{max-height:none;aspect-ratio:3/4;border-radius:14px}.gzp-story span{left:13px;right:13px;bottom:16px;font-size:17px}
}
/* Procurement previews: explicit grids, no sideways navigation or autoplay.
   The scoped selectors also supersede older catalogue rules in styles.css. */
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) :is(.gzp-rail-wrap,.gzp-season-wrap){grid-template-columns:minmax(0,1fr);gap:16px}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-side{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:0;border:0;background:none;box-shadow:none}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-side > :is(.eyebrow,h2,p){grid-column:1}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-side-media{grid-column:2;grid-row:1/4;min-height:0;height:auto;margin:0;padding:0;background:none;overflow:visible;align-self:center}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-side-img,
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-side-media::after{display:none}
body main #sezon.gzp-season.section .gzp-side-media{display:none}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-rail{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:visible;scroll-snap-type:none;padding:0}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-tabs{flex-wrap:wrap;overflow:visible;gap:8px}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-card-link{display:flex;flex-direction:column;gap:6px}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-card-pic{grid-row:auto;aspect-ratio:1;margin:0 0 4px}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-card :is(.gzp-card-brand,.gzp-card-title){padding-right:0}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-card[hidden]{display:none}
body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-card-price{flex-wrap:wrap;white-space:normal}
body main .gzp-terms-list{overflow:visible;scroll-snap-type:none}
body main .gzp-brands .gzp-brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:721px) and (max-width:940px){body main .gzp-brands .gzp-brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){
  body main .gzp-terms-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0}
  body main .gzp-term{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;padding:10px;gap:8px;min-width:0}
  body main .gzp-term .gzp-term-ico--pic{width:28px;height:28px;flex-basis:28px}
  body main .gzp-term .gzp-term-txt b{font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
  body main .gzp-term .gzp-term-txt > span{font-size:12px;line-height:1.45}
  body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-side{grid-template-columns:minmax(0,1fr);gap:6px}
  body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-side-media{grid-column:1;grid-row:auto;min-height:0;align-self:start;justify-self:start;width:auto;margin-top:4px}
  body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-side-btn{width:auto;min-height:44px;padding:10px 16px;font-size:13px}
  body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-card{padding:10px;min-width:0}
  body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-card-title{font-size:14px;line-height:1.35;min-height:2.7em}
  body main :is(#novinki.gzp-rail-sec.section,#sezon.gzp-season.section) .gzp-card-price b{font-size:16px}
  body main .gzp-brands .gzp-brand-grid{grid-template-columns:minmax(0,1fr)}
}



.gzp-story-dialog__actions :is(.gzp-story-dialog__prev,.gzp-story-dialog__next){font-size:0}.gzp-story-dialog__prev::before{content:"←";font-size:24px}.gzp-story-dialog__next::before{content:"→";font-size:24px}.gzp-story-dialog__toggle{white-space:nowrap!important;overflow-wrap:normal!important}