/* home-v3.css — извлечено из wireframes/index.html <style> блока (spec v3 §9.2)
   Дизайн-токены в tokens.css. Этот файл — только стили секций главной.
   Сгенерировано автоматически, без ручных правок переноса. */

/* =================================================================
   Главная Z&S — wireframe v3 (правки от 03.06.2026)
   01 Hero · 02 Категории (без заголовка) · 03 Z&S Kitchen (табы серий)
   · 04 Новинки (dark + видео-mosaic) · 05 Популярные (карусель)
   · 06 Слоган · 07 Видео · 08 Контент · 09 Соцсети · Подвал
   ================================================================= */


/* ─────────────────────────────────────────────────────────────────
   01. HERO  (без изменений с v2)
   ───────────────────────────────────────────────────────────────── */
.zs-hero {
  position: relative; background: var(--zs-surface); overflow: hidden;
  --zs-hero-h: min(80vh, 820px);
}
.zs-hero__inner {
  display: grid;
  grid-template-columns: 1fr calc(var(--zs-hero-h) * 3 / 4);
  align-items: stretch; gap: var(--s-4);
  min-height: var(--zs-hero-h);
  max-width: var(--c-max); margin-inline: auto; position: relative;
}
.zs-hero__copy {
  min-width: 0;
  padding: var(--s-5) var(--s-4) var(--s-5) var(--c-pad);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 2; background: var(--zs-surface);
}
.zs-hero__eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: var(--f-track-wide); text-transform: uppercase;
  color: var(--zs-text-2); margin-bottom: var(--s-5);
  display: flex; align-items: center; gap: var(--s-2);
}
.zs-hero__eyebrow b { color: var(--zs-accent); font-weight: 600; }
.zs-hero__brand-block { position: relative; padding-left: var(--s-5); }
.zs-hero__brand-block::before {
  content: ''; position: absolute; left: 0; top: 4px;
  height: calc(100% - 12px); width: 3px; background: var(--zs-accent);
}
.zs-hero__h1 {
  font-family: var(--f-display);
  /* размер подобран так, чтобы длинное «приготовления» (958px@100px) влезало
     в колонку (~427px@1280) целиком, без разрыва слова: 41px@1280, 46px@1440 */
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.025em;
  color: var(--zs-text); margin: 0; max-width: none;
  overflow-wrap: break-word; /* страховка для аномально узких экранов */
}
.zs-hero__model {
  display: inline-block; font-family: var(--f-body);
  font-size: 16px; font-weight: 500; color: var(--zs-text-2);
  margin-top: var(--s-4); letter-spacing: 0.02em;
}
.zs-hero__model::before {
  content: ''; display: inline-block; width: 32px; height: 1px;
  background: var(--zs-line-2); vertical-align: middle; margin-right: var(--s-3);
}
.zs-hero__sub {
  font-size: 18px; color: var(--zs-text-2); line-height: 1.55;
  max-width: 460px; margin: var(--s-6) 0 var(--s-7);
}
.zs-hero__ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.zs-hero__media {
  position: relative; background: var(--zs-surface);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: 100%; height: 100%;
  border-radius: var(--zs-r-md, 12px);
}
.zs-hero__media-bg {
  display: none; /* бежевая подложка убрана — товар «вшит» в белую страницу, без рамки */
}
.zs-hero__media img {
  position: relative; z-index: 2; width: 86%; height: 86%;
  object-fit: contain;
  /* фото товара на белом квадрате: multiply сливает белый фон со страницей, без серой рамки */
  mix-blend-mode: multiply;
}

/* Баннеры (3:4 кадры) и видео (3:4 натив) — оба заполняют 3:4 контейнер целиком. */
.zs-hero__media--banner img,
.zs-hero__media--video .zs-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  mix-blend-mode: normal;
  display: block; z-index: 2;
}
.zs-hero__media--video { background: #fff; }
/* Логотип Z&S вшит в видео ZCM-884 (плавающий вотермарк сверху/снизу справа) —
   приглушаем правый край мягкой вуалью, чтобы бренд не дублировал готический
   логотип в шапке. Полное удаление возможно только перекодированием видео. */
.zs-hero__media--video::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 34%; z-index: 3; pointer-events: none;
  background: linear-gradient(270deg, rgba(18,18,20,0.78) 0%, rgba(18,18,20,0.30) 50%, rgba(18,18,20,0) 100%);
}
.zs-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--zs-surface); border: 1px solid var(--zs-line);
  color: var(--zs-text); display: grid; place-items: center;
  box-shadow: var(--zs-shadow-1); transition: all var(--d-1) var(--ease); z-index: 5;
  /* Стрелки прижаты к краям контейнера (1440px), центрированного на странице.
     Левый отступ края контейнера = max(0, (100vw - c-max)/2). */
  --hero-edge: max(var(--s-5), calc((100vw - var(--c-max)) / 2 + var(--s-5)));
}
.zs-hero__arrow:hover { background: var(--zs-text); color: var(--zs-text-inv); border-color: var(--zs-text); }
/* next — у правого края медиа; prev — у левого края медиа-зоны.
   Медиа-колонка на десктопе ≈ 380–460px шириной (зависит от высоты hero);
   разносим стрелки фиксированно, на узких экранах они скрыты (<900px). */
.zs-hero__arrow--next { right: calc(var(--hero-edge) + var(--s-4)); }
.zs-hero__arrow--prev { right: calc(var(--hero-edge) + clamp(300px, 28vw, 400px)); left: auto; }
.zs-hero__arrow svg { width: 18px; height: 18px; }
.zs-hero__bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-5) var(--c-pad);
  display: flex; align-items: center; gap: var(--s-6); z-index: 4;
}
.zs-hero__dots { display: flex; align-items: center; gap: var(--s-2); }
.zs-hero__dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--zs-line-2); transition: all var(--d-2) var(--ease);
}
.zs-hero__dots span.is-active { width: 28px; border-radius: 4px; background: var(--zs-accent); }
.zs-hero__counter { font-size: var(--t-caption); color: var(--zs-text-2);
  font-variant-numeric: tabular-nums; margin-left: auto; letter-spacing: 0.05em; }
.zs-hero__counter b { color: var(--zs-text); font-weight: 600; }
.zs-hero__pause {
  background: transparent; border: 0; color: var(--zs-text-2);
  font-size: var(--t-caption); letter-spacing: 0.05em; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
  text-transform: uppercase; font-weight: 500;
}
.zs-hero__pause svg { width: 12px; height: 12px; }
.zs-hero__pause:hover { color: var(--zs-text); }


/* ─────────────────────────────────────────────────────────────────
   02. КАТЕГОРИИ — без заголовка, иконки в воздухе, синий акцент
   ───────────────────────────────────────────────────────────────── */
.zs-cats {
  /* короткая пауза между двумя крупными секциями (Hero ↔ Z&S Kitchen) */
  padding: var(--s-4) 0;          /* ~50% от прежнего: 16px+16px = 32px */
  background: var(--zs-surface);   /* без серого фона */
  border-top: 1px solid var(--zs-line);
  border-bottom: 1px solid var(--zs-line);
}
.zs-cats__grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
}
.zs-cat {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  text-decoration: none; color: inherit;
  transition: transform var(--d-2) var(--ease);
  border-radius: var(--zs-r-sm);
}
.zs-cat:hover { transform: translateY(-2px); }
.zs-cat__media {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  color: var(--zs-text);
  position: relative;
}
.zs-cat__media svg { width: 100%; height: 100%; }
.zs-cat__media .zs-cat__accent {
  stroke: var(--zs-accent);
  fill: none;
}
.zs-cat__title {
  font-size: 13px; font-weight: 500;
  color: var(--zs-text); line-height: 1.35;
  text-align: center;
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────────
   03. Z&S KITCHEN — табы 4 серий по паттерну Redmond «Пылесосы»
   ───────────────────────────────────────────────────────────────── */
.zs-kitchen {
  background: var(--zs-surface-2);
  padding: var(--s-10) 0;
  position: relative;
}
.zs-kitchen__head {
  text-align: center;
  margin-bottom: var(--s-7);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.zs-kitchen__eyebrow {
  font-size: var(--t-caption); font-weight: 600;
  letter-spacing: var(--f-track-wide); text-transform: uppercase;
  color: var(--zs-accent);
}
.zs-kitchen__title {
  font-family: var(--f-display); font-size: var(--t-h2);
  font-weight: 600; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--zs-text); margin: 0;
}
.zs-kitchen__lede {
  font-size: 16px; color: var(--zs-text-2);
  max-width: 580px; margin: 0;
}

/* CSS-radio переключатели */
.zs-kitchen input[name="zs-series"] { position: absolute; opacity: 0; pointer-events: none; }

.zs-kitchen__tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--zs-line);
  border-bottom: 1px solid var(--zs-line);
  margin-bottom: var(--s-8);
}
.zs-kitchen__tab {
  padding: var(--s-5) var(--s-4);
  text-align: center;
  font-family: var(--f-body); font-size: 14px; font-weight: 600;
  letter-spacing: var(--f-track); text-transform: uppercase;
  color: var(--zs-text-2);
  cursor: pointer;
  position: relative;
  border-right: 1px solid var(--zs-line);
  background: var(--zs-surface-2);
  transition: all var(--d-1) var(--ease);
}
.zs-kitchen__tab:last-child { border-right: 0; }
.zs-kitchen__tab:hover { color: var(--zs-text); background: var(--zs-surface); }
.zs-kitchen__tab b { display: block; font-size: 16px; color: inherit; margin-bottom: 4px; }
.zs-kitchen__tab small {
  display: block; font-size: 11px; font-weight: 500;
  letter-spacing: 0.03em; text-transform: none;
  color: var(--zs-text-3); margin-top: 2px;
}
.zs-kitchen__tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--zs-accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--d-2) var(--ease);
}

/* Активация табов через CSS-radio */
#zs-s-country:checked  ~ .zs-kitchen__tabs label[for="zs-s-country"],
#zs-s-hitech:checked   ~ .zs-kitchen__tabs label[for="zs-s-hitech"],
#zs-s-primary:checked  ~ .zs-kitchen__tabs label[for="zs-s-primary"],
#zs-s-style:checked    ~ .zs-kitchen__tabs label[for="zs-s-style"] {
  background: var(--zs-surface);
  color: var(--zs-text);
}
#zs-s-country:checked  ~ .zs-kitchen__tabs label[for="zs-s-country"]::after,
#zs-s-hitech:checked   ~ .zs-kitchen__tabs label[for="zs-s-hitech"]::after,
#zs-s-primary:checked  ~ .zs-kitchen__tabs label[for="zs-s-primary"]::after,
#zs-s-style:checked    ~ .zs-kitchen__tabs label[for="zs-s-style"]::after {
  transform: scaleX(1);
}
#zs-s-country:checked  ~ .zs-kitchen__tabs label[for="zs-s-country"] b,
#zs-s-hitech:checked   ~ .zs-kitchen__tabs label[for="zs-s-hitech"] b,
#zs-s-primary:checked  ~ .zs-kitchen__tabs label[for="zs-s-primary"] b,
#zs-s-style:checked    ~ .zs-kitchen__tabs label[for="zs-s-style"] b {
  color: var(--zs-text);
}

/* Панели серий */
.zs-kitchen__panels {
  position: relative;
  max-width: var(--c-max); margin-inline: auto;
  padding-inline: var(--c-pad);
}
.zs-kitchen__panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  min-height: 480px;
}
#zs-s-country:checked ~ .zs-kitchen__panels .zs-kitchen__panel--country,
#zs-s-hitech:checked  ~ .zs-kitchen__panels .zs-kitchen__panel--hitech,
#zs-s-primary:checked ~ .zs-kitchen__panels .zs-kitchen__panel--primary,
#zs-s-style:checked   ~ .zs-kitchen__panels .zs-kitchen__panel--style {
  display: grid;
}
.zs-kitchen__media {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--zs-surface);
  border-radius: var(--zs-r-md);
  overflow: hidden;
  box-shadow: var(--zs-shadow-1);
}
.zs-kitchen__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-3) var(--ease);
}
.zs-kitchen__media:hover img { transform: scale(1.04); }

.zs-kitchen__copy { padding: var(--s-5) 0; }
.zs-kitchen__series-name {
  font-family: var(--f-display);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 600; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--zs-text); margin: 0 0 var(--s-3);
}
.zs-kitchen__series-tag {
  font-size: 15px; font-weight: 600;
  letter-spacing: var(--f-track-wide); text-transform: uppercase;
  color: var(--zs-accent); margin-bottom: var(--s-5);
  display: block;
}
.zs-kitchen__series-text {
  font-size: 17px; line-height: 1.55;
  color: var(--zs-text-2);
  max-width: 460px; margin: 0 0 var(--s-7);
}
.zs-kitchen__series-cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.zs-kitchen__counter {
  text-align: center;
  margin-top: var(--s-7);
  font-size: var(--t-caption); color: var(--zs-text-2);
  letter-spacing: 0.05em;
}
.zs-kitchen__counter b { color: var(--zs-accent); font-weight: 600; }
/* Мобильный бар-переключатель серий — скрыт на десктопе (там табы) */
.zs-kitchen__switch { display: none; }


/* ─────────────────────────────────────────────────────────────────
   04. НОВИНКИ — тёмный фон + видео-mosaic (1 крупное + 4 товара)
   ───────────────────────────────────────────────────────────────── */
.zs-news {
  background: var(--zs-ink);
  color: var(--zs-text-inv);
  padding: var(--s-10) 0;
}
.zs-news__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: var(--s-5); margin-bottom: var(--s-7);
}
.zs-news__title-wrap {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.zs-news__eyebrow {
  font-size: var(--t-caption); font-weight: 600;
  letter-spacing: var(--f-track-wide); text-transform: uppercase;
  color: var(--zs-accent);
}
.zs-news__title {
  font-family: var(--f-display); font-size: var(--t-h2);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--zs-text-inv); margin: 0;
  position: relative; padding-bottom: var(--s-3);
}
.zs-news__title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; background: var(--zs-accent);
}
.zs-news__link {
  font-size: var(--t-small); color: var(--zs-text-inv-2);
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--d-1) var(--ease);
}
.zs-news__link:hover { color: var(--zs-accent); }
.zs-news__link svg { width: 14px; height: 14px; }

.zs-news__mosaic {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;   /* видео широкое слева + 2×2 справа */
  grid-template-rows: auto auto;
  gap: var(--s-4);
}
.zs-news__cell {
  position: relative;
  background: var(--zs-ink-soft);
  border-radius: var(--zs-r-md);
  overflow: hidden;
  display: block;
  text-decoration: none; color: inherit;
}
.zs-news__cell--feature {
  grid-column: 1;
  grid-row: span 2;
  aspect-ratio: 16/9;             /* видео реально прямоугольное 16:9 */
}

/* Карточка-видео (большая) */
.zs-news__video {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  overflow: hidden;
  display: block;
  text-decoration: none; color: var(--zs-text-inv);
}
.zs-news__video-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.7;
  transition: opacity var(--d-2) var(--ease), transform var(--d-3) var(--ease);
}
.zs-news__video:hover .zs-news__video-poster { opacity: 0.85; transform: scale(1.04); }
.zs-news__video-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.4) 40%, rgba(10,10,10,0.92) 100%);
}
.zs-news__video-chip {
  position: absolute; top: var(--s-5); left: var(--s-5);
  background: rgba(255,255,255,0.12); color: var(--zs-text-inv);
  font-size: 11px; font-weight: 600; letter-spacing: var(--f-track);
  text-transform: uppercase; padding: 8px 14px;
  border-radius: var(--zs-r-sm); backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.zs-news__video-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--zs-accent); box-shadow: 0 0 0 4px rgba(42,111,219,0.18);
}
.zs-news__video-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: var(--zs-text);
  display: grid; place-items: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  transition: transform var(--d-1) var(--ease);
}
.zs-news__video:hover .zs-news__video-play { transform: translate(-50%, -50%) scale(1.08); }
.zs-news__video-play svg { width: 32px; height: 32px; }
.zs-news__video-cap {
  position: absolute; left: var(--s-6); right: var(--s-6); bottom: var(--s-6); z-index: 2;
}
.zs-news__video-cap-eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: var(--f-track-wide); text-transform: uppercase;
  color: var(--zs-accent); margin-bottom: var(--s-3);
}
.zs-news__video-cap-title {
  font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--zs-text-inv); margin: 0;
  max-width: 360px;
}

/* ─── Карточка товара — унифицированная для всех секций ───
   Текст ВНИЗУ под фото (паттерн Redmond «Популярные модели»):
   фото большое квадратное → категория мелкая серая → название bold.
   Кнопки нет — кликабельна вся карточка. */
.zs-card {
  position: relative;
  background: var(--zs-surface);
  border-radius: var(--zs-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: box-shadow var(--d-2) var(--ease), transform var(--d-2) var(--ease);
  height: 100%;
}
.zs-card:hover { box-shadow: var(--zs-shadow-2); transform: translateY(-2px); }
.zs-card__media {
  aspect-ratio: 1;
  background: var(--zs-surface-2);  /* единая «рамка» — тёплый off-white */
  overflow: hidden; position: relative;
  flex-shrink: 0;
  border-radius: var(--zs-r-md) var(--zs-r-md) 0 0;
}
.zs-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;                /* фото заполняет рамку, обрезается по краям */
  object-position: center;
  display: block;
  transition: transform var(--d-3) var(--ease);
}
.zs-card:hover .zs-card__media img { transform: scale(1.08); }
.zs-card__body {
  padding: var(--s-4) var(--s-5) var(--s-5);
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--zs-line);
}
.zs-card__cat {
  font-size: 12px; font-weight: 500;
  color: var(--zs-text-2); line-height: 1.3;
  letter-spacing: 0.01em;
}
.zs-card__name {
  font-family: var(--f-body); font-size: 14px; font-weight: 700;
  color: var(--zs-text); line-height: 1.3; margin: 0;
  letter-spacing: -0.005em;
}


/* ─────────────────────────────────────────────────────────────────
   05. ПОПУЛЯРНЫЕ МОДЕЛИ — карусель в одну линию + стрелки
   ───────────────────────────────────────────────────────────────── */
.zs-popular {
  padding: var(--s-10) 0;
  background: var(--zs-surface);
}
.zs-popular__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: var(--s-5); margin-bottom: var(--s-7);
}
.zs-popular__title-wrap { display: flex; flex-direction: column; gap: var(--s-2); }
.zs-popular__eyebrow {
  font-size: var(--t-caption); font-weight: 600;
  letter-spacing: var(--f-track-wide); text-transform: uppercase;
  color: var(--zs-accent);
}
.zs-popular__title {
  font-family: var(--f-display); font-size: var(--t-h2);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--zs-text); margin: 0;
  position: relative; padding-bottom: var(--s-3);
}
.zs-popular__title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; background: var(--zs-accent);
}
.zs-popular__arrows {
  display: flex; gap: var(--s-3); align-items: center;
}
.zs-popular__all { /* ghost-кнопка «Смотреть весь каталог» в head */ }
.zs-popular__count {
  font-size: var(--t-caption); color: var(--zs-text-2);
  letter-spacing: 0.05em; margin-left: var(--s-4);
}
.zs-popular__count b { color: var(--zs-text); font-weight: 600; }

/* Viewport с боковыми стрелками-навигации */
.zs-popular__viewport {
  position: relative;
}

/* Карусель — горизонтальный scroll с snap */
.zs-popular__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--s-5) * 3) / 4);
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
}
.zs-popular__track::-webkit-scrollbar { display: none; }
.zs-popular__track .zs-card { scroll-snap-align: start; }

/* Боковые стрелки навигации — позиция на уровне фото карточки */
.zs-popular__side {
  position: absolute;
  top: calc(50% - 40px);            /* приподнимаем к центру media (фото), а не центру всей карточки */
  transform: translateY(-50%);
  z-index: 10;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--zs-surface);
  border: 1px solid var(--zs-line);
  color: var(--zs-text);
  display: grid; place-items: center;
  box-shadow: var(--zs-shadow-1);
  cursor: pointer;
  transition: all var(--d-1) var(--ease);
}
.zs-popular__side:hover {
  background: var(--zs-text); color: var(--zs-text-inv);
  border-color: var(--zs-text); box-shadow: var(--zs-shadow-2);
}
.zs-popular__side:disabled {
  opacity: 0.35; cursor: not-allowed;
  background: var(--zs-surface); color: var(--zs-text); border-color: var(--zs-line); box-shadow: none;
}
.zs-popular__side--prev { left: -28px; }
.zs-popular__side--next { right: -28px; }
.zs-popular__side svg { width: 18px; height: 18px; }


/* ─────────────────────────────────────────────────────────────────
   06. СЛОГАН-БАННЕР  (без изменений)
   ───────────────────────────────────────────────────────────────── */
.zs-slogan { position: relative; height: 460px; overflow: hidden; }
.zs-slogan__photo {
  position: absolute; inset: 0;
  /* изображение приходит из переменной --zs-slogan-img (ставится в PHP),
     градиент-вуаль задаётся в CSS → можно менять по брейкпоинтам */
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.45) 40%, transparent 72%),
    var(--zs-slogan-img, none);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.zs-slogan__inner {
  position: relative; z-index: 2;
  max-width: var(--c-max); margin-inline: auto;
  padding: var(--s-10) var(--c-pad);
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-5);
}
.zs-slogan__brand-block { position: relative; padding-left: var(--s-5); }
.zs-slogan__brand-block::before {
  content: ''; position: absolute; left: 0; top: 8px;
  bottom: 12px; width: 3px; background: var(--zs-accent);
}
.zs-slogan__h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--zs-text); margin: 0; max-width: 560px;
}
.zs-slogan__h2 b { font-weight: 700; color: var(--zs-text); }
.zs-slogan__sub {
  font-size: 17px; color: var(--zs-text-2); line-height: 1.5;
  max-width: 460px;
}


/* ─────────────────────────────────────────────────────────────────
   07. ВИДЕО — 3 длинных обзора
   ───────────────────────────────────────────────────────────────── */
.zs-videos { padding: var(--s-10) 0; background: var(--zs-surface-2); }
.zs-videos__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: var(--s-5); margin-bottom: var(--s-7);
}
.zs-videos__title {
  font-family: var(--f-display); font-size: var(--t-h2);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--zs-text); margin: 0;
  position: relative; padding-bottom: var(--s-3);
}
.zs-videos__title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; background: var(--zs-accent);
}
.zs-videos__lede {
  font-size: 15px; color: var(--zs-text-2); max-width: 380px; text-align: right;
}
.zs-videos__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-5);
}
.zs-video-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: transparent;
  text-decoration: none; color: inherit;
  transition: transform var(--d-2) var(--ease);
}
.zs-video-card:hover { transform: translateY(-2px); }
.zs-video-card__media {
  position: relative; display: block;
  background: var(--zs-text);
  border-radius: var(--zs-r-md); overflow: hidden;
  aspect-ratio: 16/9;   /* совпадает с постерами 1280×720 — текст на постере не режется */
}
.zs-video-card__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;    /* теперь контейнер той же пропорции, что постер → без обрезки */
  transition: transform var(--d-3) var(--ease);
}
.zs-video-card:hover .zs-video-card__poster { transform: scale(1.05); }
.zs-video-card__veil { display: none; }
.zs-video-card__chip { display: none;
}
.zs-video-card__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: grid; place-items: center; color: var(--zs-text);
  box-shadow: 0 8px 28px rgba(10,10,10,0.35);
  transition: transform var(--d-1) var(--ease);
}
.zs-video-card:hover .zs-video-card__play { transform: translate(-50%, -50%) scale(1.08); }
.zs-video-card__play svg { width: 28px; height: 28px; }
.zs-video-card__caption { display: none; }
.zs-video-card__title {
  font-family: var(--f-body); font-size: 16px; font-weight: 500;
  color: var(--zs-text); margin: 0; line-height: 1.35;
}
.zs-video-card__meta { display: none; }


/* ─────────────────────────────────────────────────────────────────
   08. КОНТЕНТ-ЦЕНТР
   ───────────────────────────────────────────────────────────────── */
.zs-content { padding: var(--s-10) 0; background: var(--zs-surface); }
.zs-content__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: var(--s-5); margin-bottom: var(--s-7);
}
.zs-content__title {
  font-family: var(--f-display); font-size: var(--t-h2);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--zs-text); margin: 0;
  position: relative; padding-bottom: var(--s-3);
}
.zs-content__title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 56px; height: 3px; background: var(--zs-accent);
}
.zs-content__link {
  font-size: var(--t-small); font-weight: 500; color: var(--zs-text-2);
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--d-1) var(--ease);
}
.zs-content__link:hover { color: var(--zs-accent); }
.zs-content__link svg { width: 14px; height: 14px; }

.zs-content__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
}
.zs-article {
  background: var(--zs-surface);
  border: 1px solid var(--zs-line);
  border-radius: var(--zs-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all var(--d-2) var(--ease);
  text-decoration: none; color: inherit;
}
.zs-article:hover {
  border-color: var(--zs-line-2);
  box-shadow: var(--zs-shadow-1);
  transform: translateY(-2px);
}
.zs-article__media {
  aspect-ratio: 16/10; overflow: hidden;
  background: var(--zs-surface-2);
}
.zs-article__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d-3) var(--ease);
}
.zs-article:hover .zs-article__media img { transform: scale(1.05); }
.zs-article__body { padding: var(--s-5) var(--s-5) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.zs-article__meta {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 12px; letter-spacing: var(--f-track-wide);
  text-transform: uppercase; font-weight: 600;
}
.zs-article__cat { color: var(--zs-accent); }
.zs-article__dot { color: var(--zs-line-2); }
.zs-article__date { color: var(--zs-text-3); font-weight: 500; }
.zs-article__title {
  font-family: var(--f-display); font-size: 22px; font-weight: 600;
  color: var(--zs-text); line-height: 1.2; margin: 0;
  letter-spacing: -0.01em;
}
.zs-article__lede { font-size: 14px; color: var(--zs-text-2); line-height: 1.5; margin-top: auto; }


/* ─────────────────────────────────────────────────────────────────
   09. СОЦСЕТИ + СВЯЗАТЬСЯ
   ───────────────────────────────────────────────────────────────── */
.zs-social {
  background: var(--zs-surface-2);
  padding: var(--s-9) 0;
  border-top: 1px solid var(--zs-line);
  border-bottom: 1px solid var(--zs-line);
}
.zs-social__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; }
.zs-social__left, .zs-social__right { display: flex; flex-direction: column; gap: var(--s-4); }
.zs-social__h3 {
  font-family: var(--f-display); font-size: 28px; font-weight: 600;
  line-height: 1.1; letter-spacing: -0.01em;
  color: var(--zs-text); margin: 0;
}
.zs-social__sub { font-size: 15px; color: var(--zs-text-2); }
.zs-social__icons { display: flex; gap: var(--s-3); margin-top: var(--s-2); }
.zs-social__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--zs-surface); border: 1px solid var(--zs-line);
  color: var(--zs-text); display: grid; place-items: center;
  transition: all var(--d-1) var(--ease);
}
.zs-social__icon:hover { background: var(--zs-text); color: var(--zs-text-inv); border-color: var(--zs-text); }
.zs-social__icon svg { width: 20px; height: 20px; }
.zs-social__cta { display: flex; gap: var(--s-3); margin-top: var(--s-3); }


/* ─────────────────────────────────────────────────────────────────
   ПОДВАЛ
   ───────────────────────────────────────────────────────────────── */
.zs-footer { background: var(--zs-ink); color: var(--zs-text-inv); padding: var(--s-9) 0 var(--s-6); }
.zs-footer__main {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--s-7);
}
.zs-footer__brand-col { display: flex; flex-direction: column; gap: var(--s-4); }
.zs-footer__logo {
  font-family: var(--f-display); font-size: 22px; font-weight: 500;
  letter-spacing: var(--f-track-extra); text-transform: uppercase;
}
.zs-footer__brand-tag { font-size: 13px; color: var(--zs-text-inv-2); line-height: 1.5; max-width: 280px; }
.zs-footer__col-title {
  font-size: 13px; font-weight: 600; letter-spacing: var(--f-track-wide);
  text-transform: uppercase; color: var(--zs-text-inv); margin: 0 0 var(--s-4);
}
.zs-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.zs-footer__list a { font-size: 14px; color: var(--zs-text-inv-2); transition: color var(--d-1) var(--ease); }
.zs-footer__list a:hover { color: var(--zs-accent); }
.zs-footer__bottom {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-5); flex-wrap: wrap;
}
.zs-footer__copy { font-size: 13px; color: var(--zs-text-inv-2); }
.zs-footer__legal { display: flex; gap: var(--s-5); }
.zs-footer__legal a { font-size: 12px; color: var(--zs-text-inv-2); transition: color var(--d-1) var(--ease); }
.zs-footer__legal a:hover { color: var(--zs-text-inv); }


/* ─────────────────────────────────────────────────────────────────
   Z&S ПОМОЩНИК — тёмная карта-CTA (личный кабинет покупателя).
   Эталон: wireframes/where-to-buy.html .wb-helper (copy-часть).
   ───────────────────────────────────────────────────────────────── */
.zs-assistant {
  padding: var(--s-10) 0;
  background: var(--zs-surface);
}
.zs-assistant__card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0A0A0A 0%, #16161A 100%);
  color: var(--zs-text-inv);
  border-radius: var(--zs-r-md);
  padding: var(--s-9) var(--s-8);
}
.zs-assistant__card::before {
  content: ''; position: absolute; bottom: -150px; left: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(42,111,219,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.zs-assistant__copy { position: relative; z-index: 2; max-width: 720px; }
.zs-assistant__eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: var(--f-track-wide); text-transform: uppercase;
  color: var(--zs-accent); margin-bottom: var(--s-4);
}
.zs-assistant__title {
  font-family: var(--f-display); font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--zs-text-inv); margin: 0 0 var(--s-5);
}
.zs-assistant__sub {
  font-size: 16px; color: rgba(255,255,255,0.75); line-height: 1.55;
  max-width: 560px; margin: 0;
}
.zs-assistant__list {
  list-style: none; padding: 0; margin: var(--s-6) 0 var(--s-7);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-6);
  max-width: 600px;
}
.zs-assistant__list li {
  font-size: 14px; color: rgba(255,255,255,0.9);
  display: flex; gap: var(--s-2); align-items: center;
}
.zs-assistant__list li svg { width: 18px; height: 18px; color: var(--zs-accent); flex-shrink: 0; }
.zs-assistant__buttons { display: flex; gap: var(--s-3); flex-wrap: wrap; }


/* ─────────────────────────────────────────────────────────────────
   АДАПТИВ
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  :root { --c-pad: 32px; }
  .zs-cats__grid { grid-template-columns: repeat(6, 1fr); }
  .zs-news__mosaic { grid-template-columns: 1.2fr 1fr; }
  .zs-videos__grid { grid-template-columns: 1fr 1fr; }
  .zs-videos__grid > :nth-child(3) { display: none; }
  .zs-content__grid { grid-template-columns: 1fr 1fr; }
  .zs-content__grid > :nth-child(3) { display: none; }
  .zs-footer__main { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .zs-footer__main > :nth-child(5) { display: none; }
  .zs-popular__track { grid-auto-columns: calc((100% - var(--s-5) * 2) / 3); }
}
@media (max-width: 900px) {
  /* ── HERO (mobile): КОМПАКТНЫЙ стек — крупный товар сверху + сжатый текст снизу.
     У Redmond текст оверлеем на тёмном фото; у нас приборы чёрные на БЕЛОМ
     (e-commerce-вырезки) + светлая тема → оверлей с тёмным текстом не читается.
     Поэтому: компактный текст (без абзаца-описания и 2-й кнопки) под товаром,
     чтобы hero+категории помещались, как требовалось. ── */
  .zs-hero { overflow: hidden; }
  .zs-hero__inner {
    display: flex; flex-direction: column;
    grid-template-columns: none; min-height: 0;
  }
  .zs-hero__media {
    order: -1; position: relative; width: 100%;
    height: 38vh; max-height: 300px; min-height: 220px; aspect-ratio: auto;
  }
  .zs-hero__media-bg { inset: 0; }
  .zs-hero__media img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center center;
    transform: scale(1.06);
  }
  /* Banner на мобайле: cover (мобайл показывает только продукт, чтобы не дублировать HTML-копию). */
  .zs-hero__media--banner img,
  .zs-hero__media--video .zs-hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-position: center;
    transform: none;
  }
  .zs-hero__media--banner { padding: 0; }
  .zs-hero__media--banner img { object-fit: cover; object-position: center right; border-radius: 0; }
  .zs-hero__media--video .zs-hero__video { object-fit: contain; }
  .zs-hero__arrow { display: none; }            /* свайп + дотс */

  /* компактный текст под товаром */
  .zs-hero__copy { position: static; padding: var(--s-4) var(--c-pad) var(--s-3); background: none; }
  .zs-hero__copy::before { display: none; }
  .zs-hero__sub { display: none; }              /* без абзаца-описания — компактно */
  .zs-hero__ctas { width: 100%; margin-top: var(--s-2); }
  .zs-hero__ctas .zs-btn { width: 100%; }
  .zs-hero__ctas .zs-btn--ghost { display: none; }  /* одна кнопка, как Redmond */

  .zs-hero__bottom {
    position: static; padding: var(--s-3) var(--c-pad) var(--s-5);
    justify-content: center;
  }
  .zs-hero__counter { display: none; }

  .zs-kitchen__tabs { grid-template-columns: 1fr 1fr; }
  .zs-kitchen__tab:nth-child(2) { border-right: 0; }
  .zs-kitchen__tab:nth-child(-n+2) { border-bottom: 1px solid var(--zs-line); }
  .zs-kitchen__panel { grid-template-columns: 1fr; gap: var(--s-5); }
  .zs-news__mosaic { grid-template-columns: 1fr; grid-template-rows: auto; }
  .zs-news__cell--feature { grid-row: span 1; aspect-ratio: 16/10; }
  .zs-popular__track { grid-auto-columns: calc((100% - var(--s-5)) / 2); }
  .zs-videos__grid, .zs-content__grid { grid-template-columns: 1fr; }
  /* на 1 колонке показываем ВСЕ карточки (десктоп прятал 3-ю) */
  .zs-videos__grid > :nth-child(3),
  .zs-content__grid > :nth-child(3) { display: block; }
  .zs-social__row { grid-template-columns: 1fr; gap: var(--s-6); }
  .zs-footer__main { grid-template-columns: 1fr 1fr; }

  /* Категории — горизонтальный скролл (паттерн Redmond mobile) */
  .zs-cats__grid {
    display: flex; grid-template-columns: none;
    gap: var(--s-2);
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(var(--c-pad) * -1); padding-inline: var(--c-pad);
  }
  .zs-cats__grid::-webkit-scrollbar { display: none; }
  .zs-cat { flex: 0 0 30%; scroll-snap-align: start; padding: var(--s-4) var(--s-2); }
  .zs-cat__media { width: 52px; height: 52px; }
  .zs-cat__title { font-size: 12px; }
}


/* =================================================================
   v3-glue — связки, которых нет в wireframe <style> (Swiper-структура,
   skip-link, sticky-тень, видео-модал, reveal, focus-ring).
   ================================================================= */

/* Skip-link для доступности */
.zs-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--zs-accent); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--zs-r-sm) 0;
  font-size: 14px; font-weight: 600;
}
.zs-skip:focus { left: 0; }

/* Сброс отступов main */
.zs-home-v3__main { display: block; }

/* Swiper-структура внутри Hero (wireframe рисовал 1 слайд статично) */
.zs-hero__slider.swiper { width: 100%; overflow: hidden; }
.zs-hero__slider .swiper-wrapper { display: flex; }
.zs-hero__slider .swiper-slide { width: 100%; flex-shrink: 0; }

/* Swiper fade — слайды наложены, нужен предсказуемый размер */
.zs-hero__slider .swiper-slide { height: auto; }

/* Маппинг swiper-буллетов на вид дотов из wireframe */
.zs-hero__dots .swiper-pagination-bullet {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--zs-line-2); opacity: 1; margin: 0;
  transition: all var(--d-2) var(--ease); cursor: pointer;
}
.zs-hero__dots .swiper-pagination-bullet-active {
  width: 28px; border-radius: 4px; background: var(--zs-accent);
}

/* Sticky-тень шапки при скролле */
.zs-header.is-scrolled { box-shadow: var(--zs-shadow-1); }

/* Видео-модал */
.zs-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: var(--s-5);
}
.zs-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: zsFade var(--d-2) var(--ease);
}
.zs-modal__box {
  position: relative; z-index: 2;
  width: min(960px, 100%);
  animation: zsPop var(--d-2) var(--ease);
}
.zs-modal--instant .zs-modal__backdrop,
.zs-modal--instant .zs-modal__box { animation: none; }
.zs-modal__frame {
  position: relative; aspect-ratio: 16/9;
  background: #000; border-radius: var(--zs-r-md); overflow: hidden;
  box-shadow: var(--zs-shadow-2);
}
.zs-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.zs-modal__close {
  position: absolute; top: -52px; right: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff; border: 0;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--d-1) var(--ease);
}
.zs-modal__close:hover { background: rgba(255,255,255,0.24); }
@keyframes zsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zsPop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Reveal секций при скролле */
.zs-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease); }
.zs-reveal.is-revealed { opacity: 1; transform: none; }

/* Единый focus-ring (a11y) */
.zs-home-v3 a:focus-visible,
.zs-home-v3 button:focus-visible,
.zs-home-v3 .zs-btn:focus-visible,
.zs-home-v3 [tabindex]:focus-visible {
  outline: 2px solid var(--zs-accent);
  outline-offset: 2px;
  border-radius: var(--zs-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .zs-reveal { opacity: 1 !important; transform: none !important; }
}

/* =================================================================
   ТЕЛЕФОНЫ (≤600px) — финальная мобильная подгонка (2026-06-03).
   Цель: ничего не «едет», нет горизонтального скролла, крупный
   читаемый текст без переполнения. Эталон поведения — Redmond mobile.
   ================================================================= */
@media (max-width: 600px) {
  :root { --c-pad: 20px; }

  /* защита от горизонтального переполнения */
  html, body, .zs-home-v3, .zs-home-v3__main { max-width: 100%; overflow-x: clip; }

  /* меньше воздуха между секциями */
  .zs-kitchen, .zs-news, .zs-popular, .zs-videos, .zs-content { padding-block: var(--s-8); }
  .zs-social { padding-block: var(--s-7); }

  /* ── HERO (компактный текст под товаром) ── */
  .zs-hero__h1 {
    font-size: clamp(23px, 6.8vw, 30px);
    line-height: 1.03; letter-spacing: -0.02em; max-width: 100%;
  }
  .zs-hero__eyebrow { margin-bottom: var(--s-2); font-size: 12px; }
  .zs-hero__model { font-size: 12px; margin-top: var(--s-2); }
  .zs-hero__model::before { display: none; }   /* убираем тире — модель в одну строку */

  /* ── Заголовки секций ── */
  .zs-section__title, .zs-kitchen__title,
  .zs-news__title, .zs-popular__title,
  .zs-videos__title, .zs-content__title {
    font-size: clamp(24px, 7vw, 30px);
  }
  .zs-kitchen__series-name { font-size: clamp(32px, 10vw, 42px); }

  /* ── Z&S Kitchen ── */
  .zs-kitchen__head { margin-bottom: var(--s-5); }
  .zs-kitchen__lede { font-size: 14px; }
  .zs-kitchen__tab { padding: var(--s-4) var(--s-2); }
  .zs-kitchen__tab b { font-size: 15px; }
  .zs-kitchen__panel { min-height: 0; }
  .zs-kitchen__series-text { font-size: 15px; margin-bottom: var(--s-5); }

  /* ── Новинки ── */
  /* видео-плитка крупная — занимает ~80% экрана (как просил Данила) */
  .zs-news__cell--feature {
    aspect-ratio: auto;
    height: 80vh; max-height: 620px; min-height: 440px;
  }
  .zs-news__video-poster { object-position: center 42%; } /* кофеварка остаётся в кадре при cover-кропе */
  .zs-news__video-cap-title { font-size: 20px; }
  .zs-news__video-cap { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); }

  /* ── Популярные: 1.25 карточки в кадре ── */
  .zs-popular__track { grid-auto-columns: 78%; }
  .zs-popular__head { flex-wrap: wrap; gap: var(--s-3); }
  .zs-popular__all { display: none; }            /* кнопка дублируется ссылкой в подвале */
  .zs-popular__side { display: none; }            /* свайп вместо стрелок */

  /* ── Слоган: фикс «текст едет на фото» ── */
  .zs-slogan { height: auto; min-height: 340px; }
  .zs-slogan__photo {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.6) 100%),
      var(--zs-slogan-img, none);
  }
  .zs-slogan__inner { padding: var(--s-8) var(--c-pad); gap: var(--s-4); }
  .zs-slogan__h2 { font-size: clamp(26px, 8vw, 34px); max-width: 100%; }
  .zs-slogan__sub { font-size: 15px; max-width: 100%; }

  /* ── Видео-обзоры ── единый контейнер 16:9 везде, как постеры ── */
  .zs-video-card__media { aspect-ratio: 16 / 9; }
  .zs-videos__lede { display: none; }

  /* ── Контент ── */
  .zs-article__title { font-size: 19px; }

  /* ── Соцсети ── */
  .zs-social__h3 { font-size: 24px; }
  .zs-social__cta { flex-direction: column; align-items: stretch; }
  .zs-social__cta .zs-btn { width: 100%; }

  /* ── Подвал ── */
  .zs-footer__main { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .zs-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .zs-footer__legal { flex-wrap: wrap; gap: var(--s-3); }
}

/* совсем узкие (≤380px) — подвал в одну колонку */
@media (max-width: 380px) {
  .zs-footer__main { grid-template-columns: 1fr; }
}

/* =================================================================
   СПЕКА «Hero + Категории (мобайл)» — Claude Design bundle z-s (2026-06-05).
   Раскладка: экран = шапка(56) + Hero(flex, товар ~70%) + лента категорий,
   всё в один 100dvh. Контент Hero — текущие вырезки товара (решение Данилы:
   «оставить вырезки, взять только раскладку»). Десктоп НЕ затрагивается.
   Идёт последним — переопределяет мобильные правила выше.
   ================================================================= */
@media (max-width: 600px) {
  :root { --zs-hdr-h: 56px; --zs-mcats-h: 96px; }

  /* ── HERO: вертикальный flex на весь экран минус шапка и лента категорий ── */
  .zs-hero {
    height: calc(100vh - var(--zs-hdr-h) - var(--zs-mcats-h));
    height: calc(100dvh - var(--zs-hdr-h) - var(--zs-mcats-h));
    min-height: 460px;
    display: flex; flex-direction: column;
    overflow: hidden; background: #fff;
  }
  .zs-hero__slider.swiper { flex: 1; min-height: 0; height: auto; }
  .zs-hero__slider .swiper-wrapper { height: 100%; }
  .zs-hero__slider .swiper-slide { height: 100%; }
  .zs-hero__inner {
    height: 100%; min-height: 0;
    display: flex; flex-direction: column;
  }

  /* фото-зона забирает весь остаток — товар доминирует (~70%) */
  .zs-hero__media {
    order: -1; flex: 1; min-height: 0;
    width: 100%; height: auto; max-height: none; aspect-ratio: auto;
    position: relative; background: #fff;
  }
  .zs-hero__media-bg { display: none; }
  .zs-hero__media img {
    position: relative; inset: auto;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    transform: none; mix-blend-mode: multiply;
    padding: 2px 8px 0;   /* у вырезок свои поля — фото крупнее, товар доминирует */
  }
  /* Banner / video на 600- мобайле: full-bleed; banner-cover, video-contain. */
  .zs-hero__media--banner img,
  .zs-hero__media--video .zs-hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-position: center;
    padding: 0; mix-blend-mode: normal; transform: none;
  }
  .zs-hero__media--banner { padding: 0; }
  .zs-hero__media--banner img { object-fit: cover; object-position: center right; border-radius: 0; }
  .zs-hero__media--video .zs-hero__video { object-fit: contain; }
  .zs-hero__arrow { display: none; }

  /* ── текст-полоса (info strip): белая, компактная, под фото ── */
  .zs-hero__copy {
    order: 0; flex-shrink: 0;
    position: static; background: #fff;
    border-top: 1px solid #EAEAED;
    padding: 11px 20px 13px;
    display: flex; flex-direction: column; gap: 4px;
    justify-content: flex-start;
  }
  .zs-hero__copy::before { display: none; }

  /* eyebrow → бейдж-пилюля */
  .zs-hero__eyebrow {
    align-self: flex-start; margin: 0 0 1px; gap: 0;
    font-family: var(--f-body); font-size: 9px; line-height: 1; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: #fff; background: #0E0E10;
    padding: 4px 8px; border-radius: 2px;
  }
  .zs-hero__eyebrow b { color: #fff; font-weight: 700; }

  /* без акцентной полоски на мобайле */
  .zs-hero__brand-block { padding-left: 0; }
  .zs-hero__brand-block::before { display: none; }

  /* h1 → заголовок 18px (вдвое меньше — маркирует товар, не конкурирует с фото) */
  .zs-hero__h1 {
    font-family: var(--f-body);
    font-size: 18px; line-height: 1.12; font-weight: 800;
    letter-spacing: -.022em; color: #0E0E10;
    max-width: 100%; text-wrap: balance;
  }
  /* model → подзаголовок-строка */
  .zs-hero__model {
    margin-top: 0; letter-spacing: 0;
    font-size: 12.5px; line-height: 1.3; font-weight: 400; color: #72727A;
  }
  .zs-hero__model::before { display: none; }
  .zs-hero__sub { display: none; }   /* длинное описание скрыто — компактно */

  /* CTA → одна кнопка-пилюля (контур, акцент); :active — заливка */
  .zs-hero__ctas { margin-top: 6px; gap: 0; width: auto; }
  .zs-hero__ctas .zs-btn--ghost { display: none; }
  .zs-hero__ctas .zs-btn--primary {
    width: auto; align-self: flex-start; height: auto;
    font-family: var(--f-body); font-size: 11px; line-height: 1; font-weight: 700;
    letter-spacing: .055em; text-transform: uppercase;
    padding: 9px 18px; border-radius: 999px;
    border: 1.5px solid var(--zs-accent); background: transparent; color: var(--zs-accent);
  }
  .zs-hero__ctas .zs-btn--primary:active { background: var(--zs-accent); color: #fff; }

  /* ── точки: белая полоса по центру (7px / активная капсула 22px) ── */
  .zs-hero__bottom {
    order: 1; flex-shrink: 0; position: static;
    height: 32px; padding: 0;
    background: #fff; border-top: 1px solid #F0F0F3;
    display: flex; align-items: center; justify-content: center;
  }
  .zs-hero__counter, .zs-hero__pause { display: none; }
  .zs-hero__dots { gap: 6px; }
  .zs-hero__dots .swiper-pagination-bullet { width: 7px; height: 7px; background: #D0D0D6; }
  .zs-hero__dots .swiper-pagination-bullet-active { width: 22px; border-radius: 4px; background: var(--zs-accent); }

  /* ── ЛЕНТА КАТЕГОРИЙ: тёмная плашка, горизонт. скролл, сразу под слайдером ── */
  .zs-cats {
    height: var(--zs-mcats-h);
    padding: 0; background: #16161A;
    border: 0; border-top: 1px solid rgba(255,255,255,.05);
  }
  .zs-cats .zs-container { max-width: none; padding: 0; }
  .zs-cats__grid {
    display: flex; grid-template-columns: none;
    gap: 2px; height: 100%;
    overflow-x: auto; scroll-snap-type: none;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0; padding: 13px 14px 17px;
    align-items: flex-start;
  }
  .zs-cats__grid::-webkit-scrollbar { display: none; }
  .zs-cat {
    flex: 0 0 70px; gap: 7px; padding: 0;
    align-items: center; text-align: center;
  }
  .zs-cat:hover { transform: none; }
  .zs-cat__media { width: 34px; height: 34px; color: var(--zs-accent); }
  .zs-cat__media svg { width: 28px; height: 28px; color: var(--zs-accent); stroke: currentColor; }
  .zs-cat__title {
    font-size: 10px; line-height: 1.25; font-weight: 600;
    color: rgba(255,255,255,.82); letter-spacing: .01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* =================================================================
   Z&S KITCHEN — мобильная переверстка (стиль Redmond, по просьбе Данилы):
   фото во всю ширину, бар-переключатель серий стрелками сверху,
   поверх фото — название серии + короткий текст + кнопка на /series/{slug}/.
   Десктоп (4 таба + сплит-панель) НЕ затрагивается.
   ================================================================= */
@media (max-width: 600px) {
  /* бесшовный стык: фото серии примыкает к тёмным «Новинкам» без светлого зазора */
  .zs-kitchen { padding-bottom: 0; }

  /* шапка: только заголовок по центру (как «Пылесосы» у Redmond) */
  .zs-kitchen__head { text-align: center; }
  .zs-kitchen__eyebrow { display: none; }
  .zs-kitchen__lede { display: none; }

  /* табы прячем, показываем бар-переключатель стрелками */
  .zs-kitchen__tabs { display: none; }
  .zs-kitchen__switch {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 var(--c-pad); padding: 8px 6px;
    background: var(--zs-surface-2); border-bottom: 2px solid var(--zs-accent);
  }
  .zs-kitchen__switch-arrow {
    width: 34px; height: 34px; flex-shrink: 0;
    display: grid; place-items: center;
    background: transparent; border: 0; color: var(--zs-text);
    cursor: pointer; border-radius: var(--zs-r-sm);
  }
  .zs-kitchen__switch-arrow:active { background: rgba(0,0,0,.06); }
  .zs-kitchen__switch-name {
    flex: 1; text-align: center;
    font-size: 14px; font-weight: 700; color: var(--zs-text); letter-spacing: .01em;
  }

  /* панель: фото во всю ширину, копи оверлеем сверху (grid-stacking) */
  .zs-kitchen__panels { max-width: none; margin: 0; padding: 0; }
  .zs-kitchen__panel {
    grid-template-columns: 1fr; grid-template-rows: auto;
    gap: 0; min-height: 0; align-items: stretch;
  }
  .zs-kitchen__media, .zs-kitchen__copy { grid-column: 1; grid-row: 1; }

  .zs-kitchen__media {
    aspect-ratio: 3 / 4; height: auto;
    border-radius: 0; box-shadow: none;
  }
  .zs-kitchen__media::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(8,10,14,.76) 0%, rgba(8,10,14,.36) 26%, rgba(8,10,14,0) 54%);
  }
  .zs-kitchen__media img { transition: none; }
  .zs-kitchen__media:hover img { transform: none; }

  /* копи — поверх фото, сверху слева, белым */
  .zs-kitchen__copy {
    position: relative; z-index: 2;
    align-self: start; padding: 20px 20px 22px; margin: 0; color: #fff;
  }
  .zs-kitchen__series-tag { color: rgba(255,255,255,.85); margin-bottom: 8px; font-size: 12px; }
  .zs-kitchen__series-name { color: #fff; font-size: clamp(28px, 8.5vw, 38px); margin-bottom: 8px; }
  .zs-kitchen__series-text {
    color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.4;
    max-width: 100%; margin: 0 0 16px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .zs-kitchen__series-text b { color: #fff !important; }
  .zs-kitchen__series-cta { height: auto; padding: 11px 20px; font-size: 13px; }
}

/* Z&S Помощник — мобайл: карта компактнее, список 1 колонка, кнопки на всю ширину */
@media (max-width: 600px) {
  .zs-assistant { padding-block: var(--s-8); }
  .zs-assistant__card { padding: var(--s-7) var(--s-5); }
  .zs-assistant__title { font-size: clamp(24px, 7vw, 32px); }
  .zs-assistant__sub { font-size: 14px; }
  .zs-assistant__list { grid-template-columns: 1fr; gap: var(--s-3); margin: var(--s-5) 0 var(--s-6); }
  .zs-assistant__buttons { flex-direction: column; }
  .zs-assistant__buttons .zs-btn { width: 100%; }
}

/* =================================================================
   ВСЕ БЛОКИ ВО ВСЮ ШИРИНУ (моб.) — решение Данилы 2026-06-05.
   ПРИЧИНА бага: site-chrome.css безусловно ставит :root{--c-pad:64px}
   и грузится ПОЗЖЕ home-v3 → перебивал мобильный отступ, давая 64px
   чёрные поля по бокам. Фикс: переопределяем --c-pad на .zs-home-v3__main
   (ближе по дереву → выигрывает у :root). Медиа — full-bleed (без полей).
   ================================================================= */
@media (max-width: 600px) {
  .zs-home-v3__main { --c-pad: 16px; }   /* узкий gutter (было 64px из-за утечки site-chrome) */

  /* контейнеры медиа-секций — во всю ширину: медиа едет от края до края */
  .zs-news .zs-container,
  .zs-popular .zs-container,
  .zs-videos .zs-container,
  .zs-content .zs-container,
  .zs-assistant .zs-container { padding-inline: 0; max-width: 100%; }

  /* текстовые шапки секций возвращают читаемый отступ */
  .zs-news__head,
  .zs-popular__head,
  .zs-videos__head,
  .zs-content__head { padding-inline: var(--c-pad); }

  /* карусель «Популярные» — отступ слева для peek-эффекта */
  .zs-popular__track { padding-inline: var(--c-pad); }

  /* карта «Помощник» — во всю ширину, без скруглений */
  .zs-assistant__card { border-radius: 0; }
}