/* Z&S Wireframes — Design Tokens
 * Светлая палитра. Тёмные секции — только акценты (Решим или заменим, футер).
 * Шрифты: Onest (фирстиль — единый шрифт, Bold для заголовков, Regular для текста).
 * Готический логотип в шапке — UnifrakturCook (--f-gothic в site-chrome.css). Акцент #2A6FDB.
 */

:root {
  /* ─── Поверхности ─── */
  --zs-bg:           #FFFFFF;   /* основной фон страницы — чистый белый, как Apple Mac */
  --zs-surface:      #FFFFFF;   /* карточки */
  --zs-surface-2:    #F7F7F9;   /* muted-секция / приглушенный воздух между блоками */
  --zs-ink:          #0A0A0A;   /* тёмные секции-акценты */
  --zs-ink-soft:     #16161A;

  /* ─── Текст ─── */
  --zs-text:         #0A0A0A;
  --zs-text-2:       #5C5C66;
  --zs-text-3:       #8A8A93;
  --zs-text-inv:     #FFFFFF;
  --zs-text-inv-2:   rgba(255,255,255,0.7);

  /* ─── Акцент (бренд) ─── */
  --zs-accent:       #2A6FDB;
  --zs-accent-hov:   #1E5BB8;
  --zs-accent-soft:  #E8F0FC;

  /* ─── Границы ─── */
  --zs-line:         #E8E8EA;
  --zs-line-2:       #D0D0D5;

  /* ─── Радиусы (мягкое скругление, без pill) ─── */
  --zs-r-sm:         8px;
  --zs-r-md:         14px;

  /* ─── Тени ─── */
  --zs-shadow-1:     0 1px 2px rgba(10,10,10,0.04), 0 2px 8px rgba(10,10,10,0.06);
  --zs-shadow-2:     0 4px 16px rgba(10,10,10,0.08), 0 12px 32px rgba(10,10,10,0.10);

  /* ─── Шкала отступов ─── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ─── Контейнер ─── */
  --c-max:           1440px;
  --c-pad:           64px;

  /* ─── Типографика ─── */
  --f-display:       'Onest', system-ui, sans-serif;
  --f-body:          'Onest', system-ui, sans-serif;
  --f-track:         0.05em;
  --f-track-wide:    0.08em;
  --f-track-extra:   0.12em;

  /* ─── Размеры текста ─── */
  --t-h1:            clamp(40px, 4.8vw, 64px);
  --t-h2:            clamp(28px, 3.4vw, 44px);
  --t-h3:            clamp(20px, 2vw, 26px);
  --t-h4:            18px;
  --t-body:          17px;
  --t-small:         14px;
  --t-caption:       13px;

  /* ─── Движение ─── */
  --ease:            cubic-bezier(0.22, 1, 0.36, 1);
  --d-1:             140ms;
  --d-2:             240ms;
  --d-3:             420ms;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: var(--zs-text);
  background: var(--zs-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ─── Контейнер ─── */
.zs-container {
  max-width: var(--c-max);
  margin-inline: auto;
  padding-inline: var(--c-pad);
}

/* ─── Хедер ─── */
.zs-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--zs-surface);
  border-bottom: 1px solid var(--zs-line);
  height: 72px;
}
.zs-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-7);
  height: 100%;
}
.zs-logo {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: var(--f-track-extra);
  text-transform: uppercase;
  color: var(--zs-text);
  flex-shrink: 0;
}
.zs-nav {
  display: flex;
  gap: var(--s-6);
  flex: 1;
  justify-content: center;
}
.zs-nav a {
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: var(--f-track);
  text-transform: uppercase;
  color: var(--zs-text);
  position: relative;
  padding: 6px 0;
  transition: color var(--d-1) var(--ease);
}
.zs-nav a:hover { color: var(--zs-accent); }
.zs-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--zs-accent);
}
.zs-header__right {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-shrink: 0;
}
.zs-search-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  color: var(--zs-text);
  border-radius: var(--zs-r-sm);
  transition: background var(--d-1) var(--ease);
}
.zs-search-btn:hover { background: var(--zs-bg); }

/* ─── Кнопки ─── */
.zs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 52px;
  padding: 0 var(--s-6);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: var(--f-track);
  text-transform: uppercase;
  border-radius: var(--zs-r-sm);
  border: 1.5px solid transparent;
  transition: all var(--d-1) var(--ease);
  white-space: nowrap;
}
.zs-btn--sm { height: 40px; padding: 0 var(--s-5); font-size: var(--t-caption); }
.zs-btn--primary {
  background: var(--zs-accent);
  color: var(--zs-text-inv);
}
.zs-btn--primary:hover { background: var(--zs-accent-hov); }
.zs-btn--ghost {
  background: transparent;
  border-color: var(--zs-text);
  color: var(--zs-text);
}
.zs-btn--ghost:hover { background: var(--zs-text); color: var(--zs-text-inv); }
.zs-btn--inverse {
  background: transparent;
  border-color: var(--zs-text-inv);
  color: var(--zs-text-inv);
}
.zs-btn--inverse:hover { background: var(--zs-text-inv); color: var(--zs-text); }

/* ─── Eyebrow + section title ─── */
.zs-eyebrow {
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: var(--f-track-wide);
  text-transform: uppercase;
  color: var(--zs-text-2);
  display: inline-block;
  margin-bottom: var(--s-4);
}
.zs-section {
  padding: var(--s-9) 0;
}
.zs-section__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 0 var(--s-7);
  display: inline-block;
  position: relative;
  padding-bottom: var(--s-3);
}
.zs-section__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 40%;
  height: 3px;
  background: var(--zs-accent);
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ─── КАРТОЧКА ТОВАРА (.zs-card) — единый компонент сайта (spec-catalog-v1) ───
   Каталог использует полный вариант: фото 1:1 → бейдж → цена «от X ₽» →
   название (без бренда) → кнопка «Подробнее».
   На главной home-v3.css переопределяет карточку своим упрощённым стилем. */
.zs-card {
  position: relative;
  background: var(--zs-surface);
  border: 1px solid var(--zs-line);
  border-radius: var(--zs-r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  height: 100%;
  transition: box-shadow var(--d-2) var(--ease),
              transform var(--d-2) var(--ease);
}
.zs-card:hover {
  /* border-color НЕ меняется — рамка остаётся светло-серой */
  box-shadow: var(--zs-shadow-2);
  transform: translateY(-2px);
}

.zs-card__media {
  aspect-ratio: 1;
  background: var(--zs-surface-2);
  overflow: hidden;
  position: relative;
  flex-shrink: 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__badge {
  position: absolute; top: var(--s-4); left: var(--s-4);
  font-size: 10px; font-weight: 700;
  letter-spacing: var(--f-track-wide); text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--zs-r-sm);
  background: var(--zs-accent-soft); color: var(--zs-accent);
}
.zs-card__badge--new {
  background: var(--zs-text); color: var(--zs-text-inv);
}

.zs-card__body {
  padding: var(--s-4) var(--s-5) var(--s-5);
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--zs-line);
  flex: 1;
}
.zs-card__price {
  font-family: var(--f-body); font-size: 12px; font-weight: 500;
  color: var(--zs-text-3);
  margin: 0;
  letter-spacing: 0.02em;
}
.zs-card__price b { font-weight: 700; color: var(--zs-text-2); }

.zs-card__name {
  font-family: var(--f-body); font-size: 14px; font-weight: 700;
  color: var(--zs-text); line-height: 1.3;
  margin: 0 0 var(--s-3);
  letter-spacing: -0.005em;
}

.zs-card__btn {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 40px;
  background: var(--zs-accent);
  border: 1px solid var(--zs-accent);
  color: var(--zs-text-inv);
  font-family: var(--f-body); font-size: 12px; font-weight: 600;
  letter-spacing: var(--f-track); text-transform: uppercase;
  border-radius: var(--zs-r-sm);
  transition: all var(--d-1) var(--ease);
}
.zs-card:hover .zs-card__btn {
  background: var(--zs-accent-hov);
  border-color: var(--zs-accent-hov);
}