/* ============================================================
   Zabota — главный CSS entry для Vite
   ------------------------------------------------------------
   В проде @import шрифтов рекомендуется заменить на локальные
   @font-face с preload и font-display: swap (см. inc/assets.php).
   ============================================================ */

/* Base layer (порядок важен — токены первыми, затем @font-face) */

/* === ./base/tokens.css === */
/* ============================================================
   Zabota — Дизайн-токены (CSS Custom Properties)
   Дизайн-система v2: Exo 2, зелёный акцент #2f6b3d,
   чистая светлая база без пастели, строгая сетка/линии.
   Accent = главные CTA (зелёный). Primary = тёмный (текст/вторичные CTA).
   ============================================================ */

@custom-media --sm (min-width: 480px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1024px);
@custom-media --xl (min-width: 1280px);
@custom-media --2xl (min-width: 1536px);

:root {
  color-scheme: light;

  /* ---------- Палитра ---------- */
  --z-color-bg:           #f5f5f7;   /* «холодный» фон страницы */
  --z-color-surface:      #ffffff;   /* плитки/карточки */
  --z-color-surface-alt:  #fafafa;   /* мягкие зоны (input bg, hover) */
  --z-color-surface-mute: #efeff2;   /* skeleton, разделители-плашки */
  --z-color-ink:          #0f0f10;   /* основной текст / CTA */
  --z-color-text:         #0f0f10;
  --z-color-ink-soft:     #1f1f23;
  --z-color-mute:         #8b8b91;
  --z-color-muted:        #8b8b91;
  --z-color-line:         #ebebef;
  --z-color-line-strong:  #d8d8de;

  /* Primary: тёмный — для основного текста и вторичных CTA */
  --z-color-primary:        #16181d;
  --z-color-primary-hover:  #1f1f23;
  --z-color-primary-on:     #ffffff;

  /* Accent: зелёный #2f6b3d — для главных CTA, бейджей, акцентов */
  --z-color-accent:         #2f6b3d;
  --z-color-accent-hover:   #245530;
  --z-color-accent-ink:     #ffffff;   /* контрастный текст НА зелёном фоне */
  --z-color-accent-strong:  #2f6b3d;  /* зелёный как «акцентный цвет» (иконки, ссылки) */

  /* Тёмные акценты для блоков (чекаут, hero-on-dark) */
  --z-color-dark:           #0f0f10;
  --z-color-dark-soft:      #1f1f23;
  --z-color-on-dark:        #ffffff;

  /* Семантические состояния */
  --z-color-success:        #1e9a5a;
  --z-color-success-soft:   #e3f6ec;
  --z-color-danger:         #d93636;
  --z-color-danger-soft:    #fdeaea;
  --z-color-warning:        #d6a02b;
  --z-color-warning-soft:   #fcf3dd;
  --z-color-info:           #2c6cf0;
  --z-color-info-soft:      #e7efff;

  /* Нейтральные плитки (категорийные карточки — фон .z-cat-card) */
  --z-tile-1: #f3f4f2;  /* светло-серый холодный */
  --z-tile-2: #eef0ec;  /* светло-серый зеленоватый */
  --z-tile-3: #f4f2ee;  /* тёплый бежевый */
  --z-tile-4: #eef1ee;  /* светлый нейтральный */
  --z-tile-5: #f2f1ed;  /* тёплый кремовый */
  --z-tile-6: #eff1f0;  /* светло-серый нейтральный */

  /* RGB для rgba()-теней и оверлеев */
  --z-rgb-ink:     15, 15, 16;
  --z-rgb-primary: 15, 15, 16;
  --z-rgb-accent:  47, 107, 61;  /* #2f6b3d */
  --z-rgb-danger:  217, 54, 54;

  /* ---------- Типографика ---------- */
  --z-font-sans:    "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --z-font-display: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --z-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Размеры */
  --z-fs-11: 0.6875rem;   /* 11 */
  --z-fs-12: 0.75rem;     /* 12 */
  --z-fs-13: 0.8125rem;   /* 13 */
  --z-fs-14: 0.875rem;    /* 14 */
  --z-fs-15: 0.9375rem;   /* 15 */
  --z-fs-16: 1rem;        /* 16 */
  --z-fs-18: 1.125rem;    /* 18 */
  --z-fs-20: 1.25rem;     /* 20 */
  --z-fs-22: 1.375rem;    /* 22 */
  --z-fs-26: 1.625rem;    /* 26 */
  --z-fs-32: 2rem;        /* 32 */
  --z-fs-40: 2.5rem;      /* 40 */
  --z-fs-48: 3rem;        /* 48 */
  --z-fs-56: 3.5rem;      /* 56 */

  /* Line-height */
  --z-lh-tight:   1.08;
  --z-lh-snug:    1.18;
  --z-lh-display: 1.12;
  --z-lh-base:    1.4;
  --z-lh-relaxed: 1.5;
  --z-lh-loose:   1.6;

  /* Letter-spacing */
  --z-ls-tight:   -0.02em;
  --z-ls-snug:    -0.01em;
  --z-ls-normal:   0;
  --z-ls-wide:     0.02em;
  --z-ls-wider:    0.06em;
  --z-ls-widest:   0.12em;

  /* Веса */
  --z-fw-regular:   400;
  --z-fw-medium:    500;
  --z-fw-semibold:  600;
  --z-fw-bold:      700;
  --z-fw-extrabold: 800;
  --z-fw-black:     900;

  /* ---------- Spacing ---------- */
  --z-space-0:  0;
  --z-space-2:  2px;
  --z-space-4:  4px;
  --z-space-6:  6px;
  --z-space-8:  8px;
  --z-space-12: 12px;
  --z-space-16: 16px;
  --z-space-20: 20px;
  --z-space-24: 24px;
  --z-space-32: 32px;
  --z-space-40: 40px;
  --z-space-48: 48px;
  --z-space-56: 56px;
  --z-space-72: 72px;
  --z-space-96: 96px;

  --z-space-xs: 4px;
  --z-space-sm: 8px;
  --z-space-md: 16px;
  --z-space-lg: 24px;
  --z-space-xl: 40px;
  --z-space-2xl: 72px;

  /* ---------- Radius ----------
     Шкала подтянута в сторону мягкого «cozy»-стиля
     (референс: travel-app c крупными скруглениями карточек/фото).
     Бывшие 6/10/14/20/28 → 8/12/16/22/32. */
  --z-radius-xs:   8px;
  --z-radius-sm:  12px;
  --z-radius-md:  16px;
  --z-radius-lg:  22px;
  --z-radius-xl:  32px;
  --z-radius-2xl: 40px;
  --z-radius-pill: 999px;
  --z-radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --z-shadow-subtle: 0 1px 2px rgba(15, 15, 16, 0.04);
  --z-shadow-card:   0 1px 2px rgba(15, 15, 16, 0.04), 0 4px 16px -6px rgba(15, 15, 16, 0.05);
  --z-shadow-pop:    0 6px 20px -10px rgba(15, 15, 16, 0.12), 0 1px 2px rgba(15, 15, 16, 0.04);
  --z-shadow-modal:  0 24px 64px -16px rgba(15, 15, 16, 0.22), 0 8px 16px -8px rgba(15, 15, 16, 0.10);
  --z-shadow-header: 0 1px 0 rgba(15, 15, 16, 0.04);
  --z-shadow-focus:  0 0 0 3px rgba(15, 15, 16, 0.14);

  /* ---------- Z-index ---------- */
  --z-z-base:             1;
  --z-z-sticky:           20;
  --z-z-header:           50;
  --z-z-mobilebar:        60;
  --z-z-drawer-backdrop:  99;
  --z-z-drawer:           100;
  --z-z-modal:            200;
  --z-z-toast:            300;

  /* ---------- Transitions ---------- */
  --z-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --z-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --z-transition-fast: 120ms var(--z-ease);
  --z-transition-base: 200ms var(--z-ease);
  --z-transition-slow: 320ms var(--z-ease-out);

  /* ---------- Контейнеры ---------- */
  --z-container-sm:  640px;
  --z-container-md:  768px;
  --z-container-lg:  1024px;
  --z-container-xl:  1200px;
  --z-container-2xl: 1320px;
  --z-container-gutter: 16px;

  /* ---------- Layout ---------- */
  --z-header-h:    60px;
  --z-header-h-md: 72px;
  --z-mobilebar-h: 64px;

  /* ---------- Алиасы обратной совместимости (legacy names) ---------- */
  --z-color-deep:        var(--z-color-primary);
  --z-color-deep-hover:  var(--z-color-primary-hover);
  --z-color-gold:        var(--z-color-accent-ink);
  --z-color-gold-hover:  var(--z-color-accent-ink);
  --z-rgb-deep:          var(--z-rgb-primary);
  --z-rgb-gold:          var(--z-rgb-accent);
  --z-fs-22:             1.375rem;
  --z-fs-28:             1.75rem;
  --z-fs-36:             2.25rem;
  --z-radius-card:       var(--z-radius-xl);
  --z-radius-media:      var(--z-radius-lg); /* картинки внутри карточек */
}

@media (min-width: 768px) {
  :root {
    --z-container-gutter: 24px;
  }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --z-transition-fast: 0ms linear;
    --z-transition-base: 0ms linear;
    --z-transition-slow: 0ms linear;
  }
}


/* === ./base/reset.css === */
/* ============================================================
   Zabota — Modern reset (Josh Comeau + Tailwind preflight)
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  line-height: var(--z-lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer: header + main(flex:1) + footer */
  display: flex;
  flex-direction: column;
}

/* main растягивается, чтобы footer всегда лежал внизу */
body > .z-main,
body > #z-main,
body > main {
  flex: 1 0 auto;
}

body > .z-footer,
body > footer {
  flex-shrink: 0;
}

html, body {
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img,
video {
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
  border: 0;
  border-top: 1px solid var(--z-color-line);
}

[hidden] {
  display: none !important;
}

#root,
#__next,
#app {
  isolation: isolate;
}

::selection {
  background: var(--z-color-ink);
  color: var(--z-color-on-dark);
}

/* Уменьшаем анимации по запросу пользователя */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* === ./base/typography.css === */
/* ============================================================
   Zabota — Типографика на Inter (локально, woff2, swap)
   Используем переменные --z-font-sans/--z-font-display
   (display = тот же Inter, но bold/tight).
   ============================================================ */

/* Inter, latin + cyrillic, веса 400/500/600/700. font-display: swap. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://soberemdom.ru/wp-content/themes/zabota/assets/fonts/inter-latin-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://soberemdom.ru/wp-content/themes/zabota/assets/fonts/inter-cyrillic-400.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://soberemdom.ru/wp-content/themes/zabota/assets/fonts/inter-latin-500.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://soberemdom.ru/wp-content/themes/zabota/assets/fonts/inter-cyrillic-500.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://soberemdom.ru/wp-content/themes/zabota/assets/fonts/inter-latin-600.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://soberemdom.ru/wp-content/themes/zabota/assets/fonts/inter-cyrillic-600.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://soberemdom.ru/wp-content/themes/zabota/assets/fonts/inter-latin-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://soberemdom.ru/wp-content/themes/zabota/assets/fonts/inter-cyrillic-700.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- Базовая типографика ---------- */
body {
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-15);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-text);
  background: var(--z-color-bg);
  font-weight: var(--z-fw-regular);
  font-feature-settings: "cv11", "ss01", "ss03";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.z-h1, .z-h2, .z-h3, .z-h4, .z-h5, .z-h6 {
  font-family: var(--z-font-display);
  font-weight: var(--z-fw-semibold);
  line-height: var(--z-lh-display);
  letter-spacing: var(--z-ls-tight);
  color: var(--z-color-ink);
  margin: 0;
}

h1, .z-h1 {
  font-size: var(--z-fs-32);
  line-height: var(--z-lh-tight);
  font-weight: var(--z-fw-extrabold);
  letter-spacing: -0.025em;
}

h2, .z-h2 {
  font-size: var(--z-fs-26);
  font-weight: var(--z-fw-semibold);
}

h3, .z-h3 {
  font-size: var(--z-fs-20);
  font-weight: var(--z-fw-semibold);
}

h4, .z-h4 {
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-semibold);
}

h5, .z-h5 {
  font-size: var(--z-fs-16);
  font-weight: var(--z-fw-semibold);
}

h6, .z-h6 {
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wide);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  h1, .z-h1 { font-size: var(--z-fs-40); }
  h2, .z-h2 { font-size: var(--z-fs-32); }
  h3, .z-h3 { font-size: var(--z-fs-22); }
}

@media (min-width: 1024px) {
  h1, .z-h1 { font-size: var(--z-fs-48); }
}

p {
  margin: 0;
  color: var(--z-color-text);
}

p + p {
  margin-top: var(--z-space-12);
}

a {
  color: var(--z-color-ink);
  text-decoration: none;
  transition: color var(--z-transition-fast), opacity var(--z-transition-fast);
}

a:hover {
  opacity: 0.7;
}

strong, b {
  font-weight: var(--z-fw-semibold);
}

small,
.z-small {
  font-size: var(--z-fs-13);
  color: var(--z-color-muted);
}

.z-eyebrow {
  display: inline-block;
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wider);
  text-transform: uppercase;
  color: var(--z-color-muted);
  margin-bottom: var(--z-space-12);
}

.z-lead {
  font-size: var(--z-fs-16);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-muted);
  font-weight: var(--z-fw-regular);
}

@media (min-width: 768px) {
  .z-lead { font-size: var(--z-fs-18); }
}

.z-muted { color: var(--z-color-muted); }

.z-display {
  font-family: var(--z-font-display);
  font-weight: var(--z-fw-bold);
  line-height: var(--z-lh-tight);
  letter-spacing: var(--z-ls-tight);
}

::selection {
  background: var(--z-color-ink);
  color: var(--z-color-on-dark);
}


/* === ./base/utilities.css === */
/* ============================================================
   Zabota — Утилитарные классы
   Контейнеры, сетки, Stack/Cluster, hidden, x-cloak.
   ============================================================ */

/* ---------- Container ---------- */
.z-container {
  width: 100%;
  max-width: var(--z-container-xl);
  margin-inline: auto;
  padding-inline: var(--z-container-gutter);
}

.z-container--sm {
  max-width: var(--z-container-sm);
}

.z-container--md {
  max-width: var(--z-container-md);
}

.z-container--lg {
  max-width: var(--z-container-lg);
}

.z-container--xl {
  max-width: var(--z-container-xl);
}

.z-container--2xl {
  max-width: var(--z-container-2xl);
}

.z-container--full {
  max-width: 100%;
}

/* ---------- Grid ---------- */
.z-grid {
  display: grid;
  gap: var(--z-space-16);
}

.z-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.z-grid--cols-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.z-grid--cols-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .z-grid {
    gap: var(--z-space-24);
  }

  .z-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .z-grid--cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .z-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Stack (вертикальный ритм) ---------- */
.z-stack {
  display: flex;
  flex-direction: column;
}

.z-stack > * + * {
  margin-top: var(--z-space-16);
}

.z-stack--xs > * + * {
  margin-top: var(--z-space-4);
}

.z-stack--sm > * + * {
  margin-top: var(--z-space-8);
}

.z-stack--md > * + * {
  margin-top: var(--z-space-16);
}

.z-stack--lg > * + * {
  margin-top: var(--z-space-24);
}

.z-stack--xl > * + * {
  margin-top: var(--z-space-40);
}

.z-stack--2xl > * + * {
  margin-top: var(--z-space-72);
}

/* ---------- Cluster (flex wrap + gap) ---------- */
.z-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-12);
  align-items: center;
}

.z-cluster--sm {
  gap: var(--z-space-8);
}

.z-cluster--lg {
  gap: var(--z-space-24);
}

.z-cluster--between {
  justify-content: space-between;
}

.z-cluster--end {
  justify-content: flex-end;
}

.z-cluster--center {
  justify-content: center;
}

/* ---------- Section spacing ---------- */
.z-section {
  padding-block: var(--z-space-40);
}

@media (min-width: 768px) {
  .z-section {
    padding-block: var(--z-space-72);
  }
}

@media (min-width: 1024px) {
  .z-section {
    padding-block: var(--z-space-96);
  }
}

.z-section--sm {
  padding-block: var(--z-space-32);
}

@media (min-width: 768px) {
  .z-section--sm {
    padding-block: var(--z-space-40);
  }
}

/* ---------- Visually hidden (sr-only) ---------- */
.z-visually-hidden,
.z-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- Alpine x-cloak ---------- */
[x-cloak] {
  display: none !important;
}

/* блокировка скролла страницы (модалка/drawer) */
.z-no-scroll { overflow: hidden; }

/* ---------- Text utilities ---------- */
.z-text-center {
  text-align: center;
}

.z-text-right {
  text-align: right;
}

.z-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.z-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.z-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Display ---------- */
.z-hidden {
  display: none;
}

@media (max-width: 767.98px) {
  .z-hidden-mobile {
    display: none;
  }
}

@media (min-width: 768px) {
  .z-hidden-desktop {
    display: none;
  }
}

/* ---------- Aspect ratios ---------- */
.z-aspect-square {
  aspect-ratio: 1 / 1;
}

.z-aspect-portrait {
  aspect-ratio: 3 / 4;
}

.z-aspect-video {
  aspect-ratio: 16 / 9;
}


/* === ./base/icons.css === */
/* ============================================================
   Иконки Tabler через inline-sprite (см. inc/icons.php).
   Все иконки наследуют currentColor; толщина управляется
   --z-icon-stroke (можно перебивать на конкретной иконке).
   ============================================================ */

.z-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.2em;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--z-icon-stroke, 1.75);
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Заполненные пиктограммы — heart-filled, star-filled и т.п. */
.z-icon--solid,
[id^="i-"][data-filled] {
  fill: currentColor;
  stroke: none;
}

.z-icon--xs { width: 14px; height: 14px; }
.z-icon--sm { width: 16px; height: 16px; }
.z-icon--md { width: 20px; height: 20px; }
.z-icon--lg { width: 24px; height: 24px; }
.z-icon--xl { width: 32px; height: 32px; }

/* Цветные модификаторы */
.z-icon--accent  { color: var(--z-color-accent-strong); }
.z-icon--muted   { color: var(--z-color-muted); }
.z-icon--success { color: var(--z-color-success); }
.z-icon--danger  { color: var(--z-color-danger); }


/* === ./base/animations.css === */
/* ============================================================
   Лёгкие микро-анимации (~120-320ms).
   prefers-reduced-motion обнуляет длительность в tokens.css.
   ============================================================ */

@keyframes z-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes z-fade-in-only {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes z-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes z-pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@keyframes z-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes z-spin {
  to { transform: rotate(360deg); }
}

/* Утилиты */
.z-anim-fade-in   { animation: z-fade-in var(--z-transition-slow) both; }
.z-anim-slide-up  { animation: z-slide-up var(--z-transition-slow) both; }
.z-anim-pulse     { animation: z-pulse-soft 1.4s ease-in-out infinite; }
.z-anim-spin      { animation: z-spin 0.75s linear infinite; }

/* Scroll-reveal: элементы появляются по мере прокрутки.
   JS добавляет класс .is-visible когда элемент в viewport. */
.z-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--z-transition-slow), transform var(--z-transition-slow);
  will-change: opacity, transform;
}
.z-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .z-reveal { opacity: 1; transform: none; }
}
.z-reveal[data-delay="1"] { transition-delay: 60ms; }
.z-reveal[data-delay="2"] { transition-delay: 120ms; }
.z-reveal[data-delay="3"] { transition-delay: 180ms; }
.z-reveal[data-delay="4"] { transition-delay: 240ms; }
.z-reveal[data-delay="5"] { transition-delay: 300ms; }

/* SPA-навигация: instant swap + тонкая полоса прогресса наверху.
   Никаких fade на .z-page — контент появляется мгновенно после fetch.
   Бар вставляется JS-ом (#z-progress) и анимируется здесь. */
#z-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--z-color-ink);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: width 240ms cubic-bezier(0.1, 0.6, 0.3, 1), opacity 200ms linear;
  box-shadow: 0 0 8px rgba(15, 15, 16, 0.35);
}
#z-progress.is-active {
  opacity: 1;
}
#z-progress.is-done {
  width: 100% !important;
  opacity: 0;
  transition: width 120ms ease-out, opacity 200ms 120ms linear;
}
@media (prefers-reduced-motion: reduce) {
  #z-progress { transition: opacity 100ms linear; }
}

/* Кнопка / интерактив — лёгкий «press» */
.z-press {
  transition: transform var(--z-transition-fast);
}
.z-press:active {
  transform: scale(0.97);
}


/* Layout layer */

/* === ./layout/header.css === */
/* ============================================================
   Zabota — Header (минимализм pay.yandex)
   Белая sticky-шапка с тонкой нижней линией.
   ============================================================ */

.z-header {
  position: sticky;
  top: 0;
  z-index: var(--z-z-header);
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid var(--z-color-line);
  transition: box-shadow var(--z-transition-base), background var(--z-transition-base);
}

/* Когда мобильное меню открыто — поднимаем шапку поверх всего,
   чтобы drawer (вложенный в шапку) был выше любого контента
   с собственным stacking context (hero, modal-backdrop и т.п.). */
.z-header.is-menu-open {
  z-index: var(--z-z-modal);
}

.z-header.is-scrolled {
  box-shadow: var(--z-shadow-header);
}


.z-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--z-space-16);
}

/* ---------- Лого ---------- */
.z-header__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--z-font-display);
  font-size: var(--z-fs-20);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
}
.z-header__logo:hover { opacity: 1; }

@media (min-width: 768px) {
  .z-header__logo { font-size: var(--z-fs-22); }
}

.z-logo__img {
  height: 83px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .z-logo__img { height: 108px; }
}

/* ---------- Навигация ---------- */
.z-header__nav { display: none; }

@media (min-width: 1024px) {
  .z-header__nav {
    display: flex;
    justify-self: center;
  }
}

.z-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.z-menu__item, .z-menu li { list-style: none; }

.z-menu a,
.z-menu__link,
.z-menu .z-menu__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  letter-spacing: var(--z-ls-snug);
  color: var(--z-color-ink-soft);
  text-decoration: none;
  border-radius: var(--z-radius-pill);
  transition: background var(--z-transition-fast), color var(--z-transition-fast), opacity var(--z-transition-fast);
}

.z-menu a:hover,
.z-menu .current-menu-item > a,
.z-menu .z-menu__link.is-active {
  background: var(--z-color-surface-mute);
  color: var(--z-color-ink);
  opacity: 1;
}

/* ---------- Actions (right) ---------- */
.z-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-8);
  justify-self: end;
}

.z-header__search-btn,
.z-header__wishlist-btn,
.z-header__account-btn { color: var(--z-color-ink); position: relative; }

.z-header__wishlist-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: var(--z-fw-semibold);
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

/* На мобиле и планшете (всюду, где есть бургер) скрываем иконки профиля и
   избранного в шапке — они дублируются внутри drawer-меню. */
@media (max-width: 1023.98px) {
  .z-header .z-header__account-btn,
  .z-header .z-header__wishlist-btn { display: none; }
}

/* Дополнительные ссылки в мобильном drawer (профиль, избранное) */
.z-header__mobile-extra {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-2);
  margin-top: var(--z-space-16);
  padding-top: var(--z-space-16);
  border-top: 1px solid var(--z-color-line);
}
.z-header__mobile-extra .z-menu__link {
  display: flex;
  align-items: center;
  gap: var(--z-space-12);
  padding: 14px 16px;
  font-size: var(--z-fs-15);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  text-decoration: none;
  border-radius: var(--z-radius-md);
}
.z-header__mobile-extra .z-menu__link:hover {
  background: var(--z-color-surface-mute);
}
.z-header__mobile-extra .z-icon { width: 20px; height: 20px; color: var(--z-color-ink-soft); }

/* Кнопка-корзина с лейблом (на десктопе виден текст + цена/счётчик) */
.z-header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-8);
  height: 40px;
  padding: 0 14px 0 12px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-surface-mute);
  color: var(--z-color-ink);
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  cursor: pointer;
  border: 0;
  transition: background var(--z-transition-fast), transform var(--z-transition-fast);
}
.z-header-cart:hover { background: var(--z-color-line); }
.z-header-cart:active { transform: scale(0.98); }

.z-header-cart .z-icon { width: 20px; height: 20px; }

.z-header-cart__label {
  display: none;
}

@media (min-width: 640px) {
  .z-header-cart__label { display: inline; }
}

.z-header-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-ink);
  color: var(--z-color-on-dark);
  font-size: var(--z-fs-11);
  font-weight: var(--z-fw-semibold);
  line-height: 1;
  pointer-events: none;
  transition: transform var(--z-transition-fast);
}

.z-header-cart.is-pulse .z-header-cart__count {
  animation: z-pulse-soft 380ms var(--z-ease);
}

/* ---------- Burger ---------- */
/* B3: убираем margin-right-компенсатор — бургер уже внутри .z-container
   и отступает на gutter симметрично логотипу слева. Иконка +10% (26→29px). */
.z-header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--z-color-ink);
}
.z-header__burger .z-icon { width: 29px; height: 29px; }
@media (min-width: 1024px) {
  .z-header .z-header__burger { display: none; }
}

/* ---------- Mobile menu drawer ---------- */
.z-header__mobile {
  position: fixed;
  inset: var(--z-header-h) 0 0 0;
  background: #ffffff;
  padding: var(--z-space-16) 0 var(--z-space-32);
  z-index: calc(var(--z-z-header) + 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 8px 24px -16px rgba(15, 15, 16, 0.18);
}

@media (min-width: 768px) {
  .z-header__mobile { inset: var(--z-header-h-md) 0 0 0; }
}

.z-header__mobile .z-menu,
.z-header__mobile .z-menu--mobile {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: var(--z-space-2);
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.z-header__mobile .z-menu a,
.z-header__mobile .z-menu__link,
.z-header__mobile .z-menu li > a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  font-size: var(--z-fs-16);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  text-decoration: none;
  border-radius: var(--z-radius-md);
  background: transparent;
}
.z-header__mobile .z-menu a:hover,
.z-header__mobile .z-menu a:active {
  background: var(--z-color-surface-mute);
}

/* На десктопе бургера нет — мобильное меню физически не должно открываться */
@media (min-width: 1024px) {
  [x-data] .z-header__mobile[x-show] { display: none; }
}

/* ---------- Top announcement bar (опционально) ---------- */
.z-announce {
  background: var(--z-color-ink);
  color: var(--z-color-on-dark);
  text-align: center;
  padding: var(--z-space-8) var(--z-space-16);
  font-size: var(--z-fs-12);
  letter-spacing: var(--z-ls-wide);
}

/* ===== Уровень 1 — топбар ===== */
.z-topbar { background: var(--z-color-surface-alt); border-bottom: 1px solid var(--z-color-line); font-size: var(--z-fs-13); }
.z-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: var(--z-space-16); }
.z-topbar__list { display: flex; gap: var(--z-space-20); list-style: none; margin: 0; padding: 0; }
.z-topbar__list a { color: var(--z-color-mute); }
.z-topbar__list a:hover { color: var(--z-color-accent-strong); opacity: 1; }
.z-topbar__aside { display: flex; align-items: center; gap: var(--z-space-16); }
.z-topbar__hours, .z-topbar__phone, .z-topbar__login { display: inline-flex; align-items: center; gap: 6px; color: var(--z-color-ink-soft); }
.z-topbar__phone:hover, .z-topbar__login:hover { opacity: 1; color: var(--z-color-accent-strong); }
.z-topbar__messengers { display: inline-flex; gap: var(--z-space-8); }
.z-topbar__msg { color: var(--z-color-mute); }
.z-topbar__msg:hover { color: var(--z-color-accent-strong); opacity: 1; }
.z-topbar__login { font-weight: var(--z-fw-semibold); color: var(--z-color-accent-strong); }
@media (max-width: 1023px) { .z-topbar { display: none; } }

/* ===== Уровень 2 — лого-строка ===== */
.z-header__main { background: var(--z-color-surface); height: var(--z-header-h); }
@media (min-width: 768px) { .z-header__main { height: var(--z-header-h-md); } }
.z-header__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--z-fw-semibold); color: var(--z-color-ink); margin-right: var(--z-space-16); }
.z-header__phone:hover { opacity: 1; color: var(--z-color-accent-strong); }
@media (max-width: 767px) { .z-header__phone-num { display: none; } }
/* B3: телефон скрыт на мобайле — на ур.2 только логотип+бургер */
@media (max-width: 1023px) { .z-header__phone { display: none; } }

/* ===== B1: Соцсети уровень 2 ===== */
.z-header__socials { display: inline-flex; align-items: center; gap: var(--z-space-8); margin-right: var(--z-space-12); }
.z-header__social { display: inline-flex; color: var(--z-color-mute); }
.z-header__social:hover { color: var(--z-color-accent-strong); opacity: 1; }
@media (max-width: 1023px) { .z-header__socials { display: none; } }

/* ===== Уровень 3 — зелёная меню-полоса ===== */
.z-menubar { background: var(--z-color-accent); }
/* B2: flex-обёртка inner для распределения меню и actions */
.z-menubar__inner { display: flex; align-items: center; justify-content: space-between; }
.z-menubar__list { display: flex; gap: var(--z-space-24); list-style: none; margin: 0; padding: 0; }
.z-menubar__item { margin: 0; }
.z-menubar__link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0; color: var(--z-color-accent-ink); font-weight: var(--z-fw-semibold); }
.z-menubar__link:hover { opacity: 0.85; }

/* B2: корзина + избранное справа на зелёной полосе */
.z-menubar__actions { display: flex; align-items: center; gap: var(--z-space-16); }
.z-menubar__action { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--z-color-accent-ink); font-weight: var(--z-fw-semibold); background: none; border: 0; cursor: pointer; font: inherit; padding: 10px 0; }
.z-menubar__action:hover { opacity: 0.85; }
.z-menubar__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #fff; color: var(--z-color-accent); font-size: var(--z-fs-12); font-weight: var(--z-fw-bold); line-height: 1; }

@media (max-width: 1023px) { .z-menubar { display: none; } }


/* === ./layout/footer.css === */
/* ============================================================
   Zabota — Footer (минимализм pay.yandex)
   Тонкая нижняя плашка: копирайт слева, оплаты справа.
   ============================================================ */

.z-footer {
  margin-top: var(--z-space-32);
  padding-block: var(--z-space-20);
  background: var(--z-color-bg);
  border-top: 1px solid var(--z-color-line);
  color: var(--z-color-muted);
  font-size: var(--z-fs-13);
}

/* На мобиле под фиксированный категорийный бар внизу. */
@media (max-width: 1023.98px) {
  .z-footer {
    padding-bottom: calc(var(--z-mobilebar-h) + env(safe-area-inset-bottom, 0px) + var(--z-space-16));
  }
}

@media (min-width: 768px) {
  .z-footer {
    margin-top: var(--z-space-56);
    padding-block: var(--z-space-24);
  }
}

.z-footer__widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--z-space-24);
  padding-bottom: var(--z-space-24);
  border-bottom: 1px solid var(--z-color-line);
  margin-bottom: var(--z-space-24);
}

@media (min-width: 768px) {
  .z-footer__widgets {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--z-space-40);
  }
}

.z-footer__col h2,
.z-footer__col h3,
.z-footer__col .widget-title {
  font-size: var(--z-fs-13);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wide);
  text-transform: uppercase;
  color: var(--z-color-ink);
  margin: 0 0 var(--z-space-12);
}

.z-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--z-space-8);
}

.z-footer__col a {
  color: var(--z-color-muted);
  text-decoration: none;
  transition: color var(--z-transition-fast);
}
.z-footer__col a:hover { color: var(--z-color-ink); opacity: 1; }

/* ── Верхний блок: бренд / навигация / контакты ── */
.z-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--z-space-24);
  padding-bottom: var(--z-space-24);
  margin-bottom: var(--z-space-24);
  border-bottom: 1px solid var(--z-color-line);
}

@media (min-width: 768px) {
  .z-footer__top {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--z-space-40);
    align-items: start;
  }
}

.z-footer__name {
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
}

.z-footer__tagline {
  margin: var(--z-space-4) 0 0;
  font-size: var(--z-fs-13);
  color: var(--z-color-muted);
}

.z-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--z-space-8);
}

.z-footer__link {
  color: var(--z-color-muted);
  text-decoration: none;
  transition: color var(--z-transition-fast);
}
.z-footer__link:hover { color: var(--z-color-ink); }

.z-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-8);
  font-style: normal;
}

.z-footer__contact {
  color: var(--z-color-muted);
  text-decoration: none;
}
.z-footer__contact--phone {
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
}
a.z-footer__contact:hover { color: var(--z-color-ink); }

.z-footer__bar {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-12);
  align-items: flex-start;
  justify-content: space-between;
}

@media (min-width: 640px) {
  .z-footer__bar {
    flex-direction: row;
    align-items: center;
  }
}

.z-footer__copy {
  font-size: var(--z-fs-13);
  color: var(--z-color-muted);
  margin: 0;
}

.z-footer__pay {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--z-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.z-footer__pay-item {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--z-radius-sm);
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  font-size: var(--z-fs-11);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink-soft);
  line-height: 1;
}


/* === ./layout/hero.css === */
/* ============================================================
   Zabota — Hero (дизайн-система v2)
   Сплошной нейтральный фон, чистый текст без капсул/чипов/blur.
   Полную переверстку (фото-фон, текст слева) делает Этап C.
   ============================================================ */

.z-hero {
  padding: var(--z-space-24) 0 var(--z-space-16);
}

@media (min-width: 768px) {
  .z-hero { padding: var(--z-space-32) 0 var(--z-space-24); }
}

.z-hero__inner {
  position: relative;
  padding: var(--z-space-32) var(--z-space-24);
  border-radius: var(--z-radius-xl);
  background: var(--z-color-surface-alt);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--z-space-24);
  align-items: center;
}

@media (min-width: 768px) {
  .z-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    padding: var(--z-space-56) var(--z-space-48);
    min-height: 360px;
  }
}

.z-hero--lavender .z-hero__inner {
  background: var(--z-color-surface-alt);
}

.z-hero__content { position: relative; z-index: 2; }

.z-hero__eyebrow {
  display: inline-block;
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wider);
  text-transform: uppercase;
  color: var(--z-color-accent-strong);
  margin-bottom: var(--z-space-16);
}

.z-hero__title {
  font-family: var(--z-font-display);
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.08;
  font-weight: var(--z-fw-bold);
  letter-spacing: -0.025em;
  color: var(--z-color-ink);
  margin: 0 0 var(--z-space-16);
  max-width: 14ch;
}

.z-hero__subtitle {
  font-size: var(--z-fs-16);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-ink-soft);
  margin: 0 0 var(--z-space-24);
  max-width: 44ch;
}

@media (min-width: 768px) {
  .z-hero__subtitle { font-size: var(--z-fs-18); }
}

.z-hero__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--z-space-12);
}

/* Чипы-декорации справа */
.z-hero__deco {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--z-space-12);
  z-index: 1;
}

@media (min-width: 768px) {
  .z-hero__deco {
    justify-self: end;
    width: 100%;
    max-width: 320px;
  }
}

.z-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-8);
  padding: 12px 16px;
  background: var(--z-color-surface);
  border-radius: var(--z-radius-pill);
  font-size: var(--z-fs-13);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  box-shadow: var(--z-shadow-subtle);
  white-space: nowrap;
  width: fit-content;
}

@media (min-width: 768px) {
  .z-hero__chip--1 { transform: translateX(20px); }
  .z-hero__chip--2 { transform: translateX(-10px); }
  .z-hero__chip--3 { transform: translateX(30px); }
}


/* === ./layout/catalog.css === */
/* ============================================================
   Zabota — Каталог: секции, грид, фильтры, пагинация
   ============================================================ */

/* ---------- Section ---------- */
/* padding-block задан в base/utilities.css (40/72/96) — дубль убран FIX-3. */
.z-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--z-space-16);
  margin-bottom: var(--z-space-24);
}

/* FIX-2: На мобайле — всегда колонка (заголовок над текстом, не сжимать). */
@media (max-width: 767.98px) {
  .z-section__head { flex-direction: column; align-items: flex-start; }
}

/* FIX-2: Центрированный вариант (квиз и т.п.): колонка по центру. */
.z-section__head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.z-section__head--center .z-section__lead,
.z-section__head--center p { max-width: 640px; margin-inline: auto; }

.z-section__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-22);
  font-weight: var(--z-fw-bold);
  letter-spacing: -0.02em;
  color: var(--z-color-ink);
  margin: 0;
}

@media (min-width: 768px) {
  .z-section__title { font-size: var(--z-fs-26); }
}

.z-section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-4);
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--z-transition-fast), opacity var(--z-transition-fast);
}
.z-section__link:hover { color: var(--z-color-ink); opacity: 1; }

/* ---------- Catalog grid ---------- */
.z-catalog {
  display: grid;
  gap: var(--z-space-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .z-catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--z-space-16);
  }
}

@media (min-width: 1024px) {
  .z-catalog {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--z-space-20);
  }
}

/* ---------- Категории-плитки на главной ---------- */
.z-cats {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--z-space-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .z-cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--z-space-16);
  }
}
@media (min-width: 1024px) {
  .z-cats { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Горизонтальный скролл со scroll-snap (мобильный свайп категорий) */
@media (max-width: 767.98px) {
  .z-cats--scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .z-cats--scroll::-webkit-scrollbar { display: none; }
  .z-cats--scroll > .z-cat-card {
    flex: 0 0 44%;
    scroll-snap-align: start;
  }
}

.z-cat-card {
  position: relative;
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--z-tile-1);
  transition: transform var(--z-transition-base), box-shadow var(--z-transition-base);
}
.z-cat-card:hover { transform: translateY(-2px); box-shadow: var(--z-shadow-card); }

.z-cat-card--t1 { background: var(--z-tile-1); }
.z-cat-card--t2 { background: var(--z-tile-2); }
.z-cat-card--t3 { background: var(--z-tile-3); }
.z-cat-card--t4 { background: var(--z-tile-4); }
.z-cat-card--t5 { background: var(--z-tile-5); }
.z-cat-card--t6 { background: var(--z-tile-6); }

.z-cat-card__link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  color: var(--z-color-ink);
  text-decoration: none;
  gap: 6px;
}

.z-cat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--z-radius-pill);
  background: rgba(255, 255, 255, 0.7);
  color: var(--z-color-ink-soft);
}
.z-cat-card__icon .z-icon { width: 22px; height: 22px; }

.z-cat-card__name {
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-semibold);
  line-height: 1.18;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.z-cat-card__count {
  font-size: var(--z-fs-12);
  color: var(--z-color-muted);
  font-weight: var(--z-fw-medium);
}

@media (min-width: 768px) {
  .z-cat-card__name { font-size: var(--z-fs-15); }
}

/* ---------- Заголовок страницы каталога ---------- */
.z-catalog-head {
  padding-block: var(--z-space-24) var(--z-space-16);
}
@media (min-width: 768px) {
  .z-catalog-head { padding-block: var(--z-space-40) var(--z-space-24); }
}

.z-catalog-head__eyebrow {
  display: inline-block;
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wide);
  text-transform: uppercase;
  color: var(--z-color-muted);
  margin-bottom: var(--z-space-8);
}

.z-catalog-head__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-32);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--z-color-ink);
  margin: 0;
  font-weight: var(--z-fw-bold);
}

@media (min-width: 768px) {
  .z-catalog-head__title { font-size: var(--z-fs-40); }
}

.z-catalog-head__desc {
  margin-top: var(--z-space-12);
  max-width: 640px;
  color: var(--z-color-muted);
  font-size: var(--z-fs-15);
  line-height: var(--z-lh-relaxed);
}

/* ---------- Toolbar ---------- */
.z-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-12);
  padding-block: var(--z-space-16);
  margin-bottom: var(--z-space-16);
}

.z-catalog-toolbar__count {
  font-size: var(--z-fs-13);
  color: var(--z-color-muted);
}

.z-catalog-toolbar__actions {
  display: inline-flex;
  gap: var(--z-space-8);
  align-items: center;
}

/* ---------- Layout с сайдбаром фильтров ---------- */
.z-catalog-layout {
  display: grid;
  gap: var(--z-space-24);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .z-catalog-layout {
    grid-template-columns: 248px 1fr;
    gap: var(--z-space-32);
  }
}

.z-catalog-sidebar { display: none; }
@media (min-width: 1024px) {
  .z-catalog-sidebar {
    display: block;
    position: sticky;
    top: calc(var(--z-header-h-md) + var(--z-space-24));
    align-self: start;
    max-height: calc(100vh - var(--z-header-h-md) - var(--z-space-24));
    overflow-y: auto;
  }
}

.z-filter-group {
  border-bottom: 1px solid var(--z-color-line);
  padding-block: var(--z-space-16);
}
.z-filter-group:first-child { padding-top: 0; }
.z-filter-group:last-child  { border-bottom: 0; }

.z-filter-group__title {
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wide);
  text-transform: uppercase;
  color: var(--z-color-ink);
  margin-bottom: var(--z-space-12);
}

.z-filter-group__list {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Pagination ---------- */
.z-pagination,
.woocommerce-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-4);
  margin-top: var(--z-space-32);
  list-style: none;
  padding: 0;
}

.z-pagination__item,
.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--z-space-12);
  border-radius: var(--z-radius-pill);
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  text-decoration: none;
  background: var(--z-color-surface);
  transition: background var(--z-transition-fast), color var(--z-transition-fast);
}

.z-pagination__item:hover,
.woocommerce-pagination .page-numbers:hover {
  background: var(--z-color-surface-mute);
}

.z-pagination__item.is-current,
.woocommerce-pagination .page-numbers.current {
  background: var(--z-color-ink);
  color: var(--z-color-on-dark);
}

/* ---------- Empty ---------- */
.z-catalog-empty {
  text-align: center;
  padding: var(--z-space-72) var(--z-space-16);
  color: var(--z-color-muted);
}

.z-catalog-empty__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-22);
  color: var(--z-color-ink);
  margin-bottom: var(--z-space-12);
  font-weight: var(--z-fw-semibold);
}


/* === ./layout/product.css === */
/* ============================================================
   Zabota — Страница товара (минимализм pay.yandex)
   2 колонки на десктопе, чистый sticky-блок справа.
   ============================================================ */

.z-product {
  display: grid;
  gap: var(--z-space-24);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--z-space-24);
}

.z-product__gallery { min-width: 0; }
.z-product__gallery-main { width: 100%; }
.z-product__gallery-main img,
.z-product__gallery-slide img { max-width: 100%; }

@media (min-width: 768px) {
  .z-product {
    padding-block: var(--z-space-32);
    gap: var(--z-space-32) var(--z-space-40);
  }
}

@media (min-width: 1024px) {
  .z-product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: var(--z-space-40) var(--z-space-56);
    padding-block: var(--z-space-40);
  }
}

/* Контент после грида (tabs, related) — на всю ширину */
.z-product__bottom {
  grid-column: 1 / -1;
}

/* Прячем кнопку галереи trigger от WC если она есть */
.woocommerce-product-gallery__trigger { display: none; }

/* ---------- Галерея ---------- */
.z-product__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-12);
}

.z-product__gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  max-height: 560px;
}

@media (min-width: 1024px) {
  .z-product__gallery-main { max-height: 620px; }
}

.z-product__gallery-main img,
.z-product__gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--z-space-24);
}

.z-product__gallery-slide {
  position: absolute;
  inset: 0;
}
.z-product__gallery-slide[hidden] { display: none; }

.z-product__gallery-slide {
  margin: 0;
}

.z-product__gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--z-space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .z-product__gallery-thumbs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.z-product__thumb,
.z-product__gallery-thumb {
  aspect-ratio: 1 / 1;
  background: var(--z-color-surface);
  border-radius: var(--z-radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--z-transition-fast);
  padding: 0;
}

.z-product__thumb img,
.z-product__gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.z-product__thumb.is-active,
.z-product__gallery-thumb.is-active {
  border-color: var(--z-color-ink);
}

/* ---------- Info column ---------- */
.z-product__info,
.summary.entry-summary {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
}

@media (min-width: 1024px) {
  .z-product__info,
  .summary.entry-summary {
    position: sticky;
    top: calc(var(--z-header-h-md) + var(--z-space-24));
    align-self: start;
  }
}

.z-product__eyebrow {
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wide);
  text-transform: uppercase;
  color: var(--z-color-muted);
}

.z-product__title,
.product_title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-26);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--z-color-ink);
  margin: 0;
  font-weight: var(--z-fw-bold);
}

@media (min-width: 768px) {
  .z-product__title,
  .product_title { font-size: var(--z-fs-32); }
}

.z-product__subtitle {
  font-size: var(--z-fs-15);
  color: var(--z-color-muted);
  margin: 0;
}

.z-product__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-8);
  font-size: var(--z-fs-13);
  color: var(--z-color-muted);
}

.z-product__price,
.price {
  display: flex;
  align-items: baseline;
  gap: var(--z-space-12);
  font-family: var(--z-font-display);
  font-size: var(--z-fs-26);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

.z-product__price del,
.price del {
  font-size: var(--z-fs-16);
  color: var(--z-color-muted);
  font-weight: var(--z-fw-regular);
}

.z-product__price ins,
.price ins {
  text-decoration: none;
  color: var(--z-color-ink);
}

.woocommerce-product-details__short-description {
  font-size: var(--z-fs-15);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-ink-soft);
}

/* ---------- Options / варианты ---------- */
.z-product__options {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
  padding-block: var(--z-space-12);
}

.z-product__option-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wide);
  text-transform: uppercase;
  color: var(--z-color-ink);
  margin-bottom: var(--z-space-8);
}

.z-product__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-8);
}

.z-product__swatch {
  min-width: 56px;
  height: 40px;
  padding: 0 var(--z-space-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-pill);
  font-size: var(--z-fs-14);
  color: var(--z-color-ink);
  background: var(--z-color-surface);
  cursor: pointer;
  transition: border-color var(--z-transition-fast), background var(--z-transition-fast), color var(--z-transition-fast);
}
.z-product__swatch:hover { border-color: var(--z-color-ink); }
.z-product__swatch.is-selected {
  border-color: var(--z-color-ink);
  background: var(--z-color-ink);
  color: var(--z-color-on-dark);
}
.z-product__swatch.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Buy row ---------- */
.z-add-to-cart,
.z-product__buy {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--z-space-12);
  margin-top: var(--z-space-8);
}

.z-add-to-cart__btn,
.z-product__buy .z-btn--block {
  flex: 1;
}

.z-qty--lg { height: 52px; padding: 6px; }
.z-qty--lg .z-qty__btn { width: 40px; }
.z-qty--lg .z-qty__input { width: 56px !important; font-size: var(--z-fs-16); }

/* ---------- WC qty stepper ---------- */
.z-qty,
.z-add-to-cart__qty .quantity,
.cart .quantity {
  display: inline-flex;
  align-items: stretch;
  height: 48px;
  background: var(--z-color-surface-mute);
  border-radius: var(--z-radius-pill);
  padding: 4px;
  flex-shrink: 0;
  width: fit-content;
}

.z-qty__btn,
.z-qty .z-qty__btn--minus,
.z-qty .z-qty__btn--plus {
  width: 36px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--z-color-ink);
  font-size: var(--z-fs-18);
  cursor: pointer;
  border-radius: var(--z-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--z-transition-fast);
}
.z-qty__btn:hover { background: var(--z-color-line); }
.z-qty__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Перебиваем глобальное правило input[type=number] из forms.css,
   которое навешивает background/border/height/padding и ломает
   pill-степпер. */
.z-qty__input,
input[type="number"].z-qty__input {
  width: 48px !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
  font-size: var(--z-fs-15);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}
.z-qty__input::-webkit-outer-spin-button,
.z-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.z-qty__input:focus { outline: 0; }

.quantity .qty-btn {
  width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--z-color-ink);
  font-size: var(--z-fs-18);
  cursor: pointer;
  border-radius: var(--z-radius-pill);
  transition: background var(--z-transition-fast);
}
.quantity .qty-btn:hover { background: var(--z-color-line); }

.quantity input.qty {
  width: 48px;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: var(--z-fs-15);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  padding: 0;
  -moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.quantity input.qty:focus { outline: 0; box-shadow: none; }
.quantity label.screen-reader-text { position: absolute; clip: rect(0,0,0,0); width: 1px; height: 1px; overflow: hidden; }

/* Спиннер «на тёмном» */
.z-spinner--on-dark::after {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

/* ---------- Meta / доставка ---------- */
.z-product__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--z-space-8);
  padding: var(--z-space-16);
  background: var(--z-color-surface);
  border-radius: var(--z-radius-md);
  font-size: var(--z-fs-13);
  color: var(--z-color-ink-soft);
}

@media (min-width: 768px) {
  .z-product__meta { grid-template-columns: 1fr 1fr; }
}

.z-product__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-8);
}

.z-product__meta strong { color: var(--z-color-ink); font-weight: var(--z-fw-semibold); }

/* ---------- Tabs ---------- */
.woocommerce-tabs,
.z-product-tabs {
  margin-top: var(--z-space-40);
}

.woocommerce-tabs .tabs,
.z-product-tabs__nav {
  display: inline-flex;
  gap: var(--z-space-8);
  list-style: none;
  margin: 0 0 var(--z-space-24);
  padding: 0;
  border-bottom: 1px solid var(--z-color-line);
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.woocommerce-tabs .tabs::-webkit-scrollbar,
.z-product-tabs__nav::-webkit-scrollbar { display: none; }

.woocommerce-tabs .tabs li,
.z-product-tabs__nav li {
  list-style: none;
}

.woocommerce-tabs .tabs li a,
.z-product-tabs__tab {
  position: relative;
  display: inline-flex;
  padding: 14px 0;
  margin-right: var(--z-space-24);
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-snug);
  color: var(--z-color-muted);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--z-transition-fast);
}
.woocommerce-tabs .tabs li a:hover,
.z-product-tabs__tab:hover { color: var(--z-color-ink); }
.woocommerce-tabs .tabs li.active a,
.z-product-tabs__tab.is-active {
  color: var(--z-color-ink);
}
.woocommerce-tabs .tabs li.active a::after,
.z-product-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--z-color-ink);
  border-radius: 2px;
}

.woocommerce-Tabs-panel,
.z-product-tabs__panel {
  max-width: 720px;
  font-size: var(--z-fs-15);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-ink-soft);
}

/* ---------- Related ---------- */
.related.products,
.up-sells.upsells.products {
  margin-top: var(--z-space-56);
}

.related.products > h2,
.up-sells > h2 {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-22);
  font-weight: var(--z-fw-bold);
  margin-bottom: var(--z-space-20);
  letter-spacing: -0.02em;
}

.related.products .products,
.up-sells .products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--z-space-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .related.products .products,
  .up-sells .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--z-space-16);
  }
}

@media (min-width: 1024px) {
  .related.products .products,
  .up-sells .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--z-space-20);
  }
}

/* ---------- Stock label ---------- */
.stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--z-radius-pill);
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-medium);
  width: fit-content;
}
.stock.in-stock { background: var(--z-color-success-soft); color: var(--z-color-success); }
.stock.out-of-stock { background: var(--z-color-danger-soft); color: var(--z-color-danger); }


/* === ./layout/checkout.css === */
/* ============================================================
   Zabota — Checkout layout (в стиле yandex pay demo)
   2 колонки desktop (форма | sticky summary), 1 col mobile.
   ============================================================ */

.z-checkout {
  display: grid;
  gap: var(--z-space-24);
  grid-template-columns: 1fr;
  padding-block: var(--z-space-24);
}

@media (min-width: 1024px) {
  .z-checkout {
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    gap: var(--z-space-40);
    padding-block: var(--z-space-40);
  }
}

@media (min-width: 1280px) {
  .z-checkout {
    gap: var(--z-space-56);
  }
}

/* ---------- Заголовок страницы ---------- */
.z-checkout-head {
  padding-block: var(--z-space-24) var(--z-space-16);
  text-align: center;
}

.z-checkout-head__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-28);
  letter-spacing: var(--z-ls-tight);
  color: var(--z-color-ink);
  margin: 0;
  font-weight: var(--z-fw-regular);
}

@media (min-width: 768px) {
  .z-checkout-head__title {
    font-size: var(--z-fs-36);
  }
}

/* ---------- Колонка формы ---------- */
.z-checkout__form {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
}

/* ---------- Карточка-блок (адрес, доставка, оплата) ---------- */
.z-checkout-card {
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-lg);
  padding: var(--z-space-20);
}

@media (min-width: 768px) {
  .z-checkout-card {
    padding: var(--z-space-24);
  }
}

.z-checkout-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-12);
  margin-bottom: var(--z-space-16);
}

.z-checkout-card__title {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-8);
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  margin: 0;
  letter-spacing: var(--z-ls-normal);
}

.z-checkout-card__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-deep);
  color: #fff;
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
}

.z-checkout-card__edit {
  font-size: var(--z-fs-14);
  color: var(--z-color-deep);
  background: transparent;
  cursor: pointer;
}

.z-checkout-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
}

/* ---------- Группы полей ---------- */
.z-checkout-fields {
  display: grid;
  gap: var(--z-space-12);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .z-checkout-fields--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.z-checkout-fields__span-2 {
  grid-column: 1 / -1;
}

/* ---------- Варианты доставки/оплаты как радио-карточки ---------- */
.z-radio-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-8);
}

.z-radio-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--z-space-12);
  padding: var(--z-space-16);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-md);
  background: var(--z-color-surface);
  cursor: pointer;
  transition: border-color var(--z-transition-fast), background var(--z-transition-fast);
}

.z-radio-card:hover {
  border-color: var(--z-color-line-strong);
}

.z-radio-card.is-selected {
  border-color: var(--z-color-deep);
  background: color-mix(in srgb, var(--z-color-deep) 4%, var(--z-color-surface));
}

.z-radio-card__radio {
  width: 20px;
  height: 20px;
  border-radius: var(--z-radius-pill);
  border: 1.5px solid var(--z-color-line-strong);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--z-transition-fast);
}

.z-radio-card.is-selected .z-radio-card__radio {
  border-color: var(--z-color-deep);
}

.z-radio-card.is-selected .z-radio-card__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-deep);
}

.z-radio-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--z-space-2);
}

.z-radio-card__title {
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
}

.z-radio-card__hint {
  font-size: var(--z-fs-12);
  color: var(--z-color-muted);
}

.z-radio-card__price {
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  margin-left: auto;
}

/* ---------- Summary (правая колонка) ---------- */
.z-checkout-summary {
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-lg);
  padding: var(--z-space-20);
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
}

@media (min-width: 1024px) {
  .z-checkout-summary {
    position: sticky;
    top: calc(var(--z-header-h-md) + var(--z-space-24));
    align-self: start;
    padding: var(--z-space-24);
  }
}

.z-checkout-summary__title {
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-16);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  margin: 0;
}

.z-checkout-summary__items {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-12);
  padding-block: var(--z-space-12);
  border-block: 1px solid var(--z-color-line);
}

.z-checkout-summary__item {
  display: flex;
  align-items: center;
  gap: var(--z-space-12);
  font-size: var(--z-fs-14);
}

.z-checkout-summary__item-media {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--z-radius-sm);
  overflow: hidden;
  background: var(--z-color-surface-alt);
  position: relative;
}

.z-checkout-summary__item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.z-checkout-summary__item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-ink);
  color: #fff;
  font-size: 11px;
  font-weight: var(--z-fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.z-checkout-summary__item-body {
  flex: 1;
  min-width: 0;
}

.z-checkout-summary__item-title {
  font-size: var(--z-fs-14);
  color: var(--z-color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.z-checkout-summary__item-price {
  font-size: var(--z-fs-14);
  color: var(--z-color-ink);
  font-weight: var(--z-fw-medium);
  white-space: nowrap;
}

/* ---------- Totals ---------- */
.z-checkout-summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-8);
}

.z-checkout-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--z-fs-14);
  color: var(--z-color-muted);
}

.z-checkout-summary__row strong {
  color: var(--z-color-ink);
  font-weight: var(--z-fw-medium);
}

.z-checkout-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--z-space-12);
  border-top: 1px solid var(--z-color-line);
  font-family: var(--z-font-display);
  font-size: var(--z-fs-22);
  color: var(--z-color-ink);
  font-weight: var(--z-fw-medium);
}

.z-checkout-summary__total span:last-child {
  font-size: var(--z-fs-28);
}

/* ---------- Promo code ---------- */
.z-checkout-promo {
  display: flex;
  gap: var(--z-space-8);
}

.z-checkout-promo .z-input {
  flex: 1;
}

/* ---------- Sticky pay bar (mobile) ---------- */
.z-checkout-pay-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: var(--z-color-surface);
  border-top: 1px solid var(--z-color-line);
  padding: var(--z-space-12) var(--z-container-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-12);
}

@media (min-width: 1024px) {
  .z-checkout-pay-bar {
    display: none;
  }
}

.z-checkout-pay-bar__total {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-22);
  font-weight: var(--z-fw-medium);
}

/* ---------- Auth toggle ---------- */
.z-checkout-auth {
  background: var(--z-color-surface-alt);
  border-radius: var(--z-radius-md);
  padding: var(--z-space-16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-12);
  font-size: var(--z-fs-14);
}

.z-checkout-auth a {
  color: var(--z-color-deep);
  font-weight: var(--z-fw-medium);
}

/* ============================================================
   WooCommerce Cart-Checkout Blocks (Gutenberg) — приведение
   к стилю pay.yandex: убираем дубль легенд, мягкие отступы.
   ============================================================ */

/* Дубль <legend>: WC выводит legend.screen-reader-text + h2.
   Прячем legend (он клонируется в h2). У некоторых версий WC класс
   называется .is-screen-reader-only, у других .screen-reader-text. */
.wp-block-woocommerce-checkout legend.screen-reader-text,
.wp-block-woocommerce-checkout legend.is-screen-reader-only,
.wp-block-woocommerce-cart legend.screen-reader-text,
.wp-block-woocommerce-cart legend.is-screen-reader-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.wp-block-woocommerce-checkout .wc-block-components-form .wc-block-components-checkout-step {
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  padding: var(--z-space-24);
  margin-bottom: var(--z-space-16);
  box-shadow: var(--z-shadow-subtle);
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-20);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
  margin: 0 0 var(--z-space-16);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
  border-top: 1px solid var(--z-color-line);
  padding-top: var(--z-space-12);
  margin-top: var(--z-space-12);
}

.wp-block-woocommerce-checkout-totals-block,
.wp-block-woocommerce-checkout-order-summary-block {
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  padding: var(--z-space-20);
  box-shadow: var(--z-shadow-subtle);
}

/* Большая CTA «Оформить заказ» */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  background: var(--z-color-primary) !important;
  color: var(--z-color-primary-on) !important;
  border-radius: var(--z-radius-pill) !important;
  font-family: var(--z-font-sans) !important;
  font-weight: var(--z-fw-medium) !important;
  font-size: var(--z-fs-15) !important;
  height: 52px !important;
  padding: 0 var(--z-space-32) !important;
  transition: background var(--z-transition-fast), transform var(--z-transition-fast) !important;
}
.wc-block-components-checkout-place-order-button:hover {
  background: var(--z-color-primary-hover) !important;
}
.wc-block-components-checkout-place-order-button:active { transform: scale(0.98) !important; }

/* ============================================================
   Order Summary (правая колонка): кладём всё в карточку.
   Пофикс: цены не должны вылезать за её границы; описание
   товара в сводке прячем (слишком длинное).
   ============================================================ */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar {
  min-width: 0;
}

/* sr-only внутри строки товара не должен попадать в flex-layout.
   Иначе он добавляет «псевдо-ячейку» с длинной непереносимой строкой,
   сжимая описание до 1ch и выкидывая цену вниз. */
.wc-block-components-order-summary-item > .screen-reader-text,
.wc-block-components-order-summary-item__quantity > .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Строка товара = flex (image | description | total) */
.wc-block-components-order-summary-item {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: var(--z-space-12) !important;
  padding-block: var(--z-space-12) !important;
  min-width: 0;
}

.wc-block-components-order-summary-item__image {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}

.wc-block-components-order-summary-item__description {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-size: var(--z-fs-14) !important;
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  margin: 0 0 4px;
  line-height: 1.35;
}

/* Длинный текст описания в сводке не нужен */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description {
  display: none !important;
}

/* Индивидуальная цена «4 860 ₽» рядом с названием */
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__individual-price {
  font-size: var(--z-fs-13) !important;
  color: var(--z-color-muted) !important;
}

/* Итоговая цена за позицию — фиксированная колонка справа */
.wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-size: var(--z-fs-14) !important;
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink) !important;
  align-self: flex-start;
}
.wc-block-components-order-summary-item__total-price .wc-block-formatted-money-amount {
  font-size: inherit !important;
  color: inherit !important;
}

/* Totals (Подытог / Итого) — две колонки строго в карточке */
.wc-block-components-totals-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: baseline;
  gap: var(--z-space-12);
  padding-block: var(--z-space-6) !important;
}
.wc-block-components-totals-item__label {
  font-size: var(--z-fs-14);
  color: var(--z-color-muted);
}
.wc-block-components-totals-item__value {
  text-align: right;
  white-space: nowrap;
  font-size: var(--z-fs-14);
  color: var(--z-color-ink);
  font-weight: var(--z-fw-medium);
}
.wc-block-components-totals-item__description {
  grid-column: 1 / -1;
}

/* Итог (footer) — крупный */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: var(--z-fs-18);
  color: var(--z-color-ink);
  font-weight: var(--z-fw-semibold);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  font-size: var(--z-fs-20) !important;
  color: var(--z-color-ink) !important;
  font-weight: var(--z-fw-semibold) !important;
}

/* Безопасность для всех денежных сумм в сводке */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-formatted-money-amount {
  position: static !important;
  transform: none !important;
  display: inline-block;
  max-width: 100%;
}

/* ============================================================
   Mobile: на узких экранах прячем дублирующиеся хвосты —
   нижнюю панель категорий не должно быть видно на checkout.
   ============================================================ */
@media (max-width: 1023px) {
  body.woocommerce-checkout .z-mobilebar,
  body.woocommerce-cart .z-mobilebar {
    display: none !important;
  }
}


/* === ./layout/account.css === */
/* ============================================================
   Auth (login) + Account (личный кабинет)
   ============================================================ */

/* ---------- Auth (страница входа) ---------- */
.z-auth {
  padding-block: var(--z-space-32) var(--z-space-56);
}

.z-auth .z-container {
  display: grid;
  gap: var(--z-space-32);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 900px) {
  .z-auth .z-container {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: var(--z-space-56);
    align-items: center;
  }
}

.z-auth__card {
  background: var(--z-color-surface);
  border-radius: var(--z-radius-xl);
  padding: var(--z-space-32);
  box-shadow: var(--z-shadow-card);
}

@media (min-width: 768px) {
  .z-auth__card { padding: var(--z-space-40); }
}

.z-auth__brand {
  display: inline-block;
  margin-bottom: var(--z-space-24);
}
.z-auth__brand img {
  display: block;
  height: 36px;
  width: auto;
}

.z-auth__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-26);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--z-space-8);
  color: var(--z-color-ink);
  font-weight: var(--z-fw-bold);
}
@media (min-width: 768px) {
  .z-auth__title { font-size: var(--z-fs-32); }
}

.z-auth__subtitle {
  color: var(--z-color-muted);
  font-size: var(--z-fs-15);
  line-height: var(--z-lh-relaxed);
  margin: 0 0 var(--z-space-24);
}

.z-auth__error {
  background: var(--z-color-danger-soft);
  color: var(--z-color-danger);
  padding: var(--z-space-12) var(--z-space-16);
  border-radius: var(--z-radius-md);
  font-size: var(--z-fs-14);
  margin-bottom: var(--z-space-16);
}

.z-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
}

.z-field {
  display: block;
}
.z-field__label {
  display: block;
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wide);
  text-transform: uppercase;
  color: var(--z-color-muted);
  margin-bottom: var(--z-space-8);
}
.z-field__input {
  width: 100%;
  height: 52px;
  padding: 0 var(--z-space-16);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-md);
  background: var(--z-color-surface);
  font-size: var(--z-fs-15);
  color: var(--z-color-ink);
  font-family: inherit;
  transition: border-color var(--z-transition-fast), box-shadow var(--z-transition-fast);
}
.z-field__input:focus {
  outline: 0;
  border-color: var(--z-color-ink);
  box-shadow: var(--z-shadow-focus);
}

.z-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-12);
  font-size: var(--z-fs-13);
  flex-wrap: wrap;
}

.z-check {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-8);
  color: var(--z-color-ink-soft);
  cursor: pointer;
  user-select: none;
}
.z-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--z-color-ink);
}

.z-auth__lost,
.z-auth__footer a {
  color: var(--z-color-ink);
  text-decoration: none;
  font-weight: var(--z-fw-medium);
  border-bottom: 1px solid var(--z-color-line);
  transition: border-color var(--z-transition-fast);
}
.z-auth__lost:hover,
.z-auth__footer a:hover { border-bottom-color: var(--z-color-ink); }

.z-auth__footer {
  margin-top: var(--z-space-24);
  text-align: center;
  font-size: var(--z-fs-14);
  color: var(--z-color-muted);
}
.z-auth__footer a { margin-left: 6px; }

/* ---------- Auth side (декоративная панель) ---------- */
.z-auth__side {
  position: relative;
  display: none;
  min-height: 480px;
  border-radius: var(--z-radius-xl);
  overflow: hidden;
  background: var(--z-tile-1);
}
@media (min-width: 900px) {
  .z-auth__side { display: block; }
}

.z-auth__side-blob {
  display: none;
}

.z-auth__side-card {
  position: absolute;
  left: var(--z-space-32);
  right: var(--z-space-32);
  bottom: var(--z-space-32);
  padding: var(--z-space-24);
  border-radius: var(--z-radius-lg);
  background: var(--z-color-surface);
}
.z-auth__side-eyebrow {
  display: block;
  font-size: var(--z-fs-11);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wider);
  text-transform: uppercase;
  color: var(--z-color-accent-strong);
  margin-bottom: var(--z-space-8);
}
.z-auth__side-text {
  margin: 0;
  font-size: var(--z-fs-16);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-ink);
}

/* ============================================================
   Account (личный кабинет)
   ============================================================ */
.z-account {
  padding-block: var(--z-space-24) var(--z-space-56);
}

.z-account__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--z-space-16);
  margin-bottom: var(--z-space-24);
}

.z-account__eyebrow {
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wide);
  text-transform: uppercase;
  color: var(--z-color-muted);
  margin: 0 0 var(--z-space-4);
}

.z-account__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-26);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--z-color-ink);
  font-weight: var(--z-fw-bold);
}
@media (min-width: 768px) {
  .z-account__title { font-size: var(--z-fs-32); }
}

.z-account__hint {
  color: var(--z-color-muted);
  font-size: var(--z-fs-14);
  margin: 0 0 var(--z-space-24);
}

/* Tabs */
.z-account__tabs {
  display: flex;
  gap: var(--z-space-4);
  margin-bottom: var(--z-space-24);
  border-bottom: 1px solid var(--z-color-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.z-account__tabs::-webkit-scrollbar { display: none; }

.z-account__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-8);
  padding: var(--z-space-12) var(--z-space-16);
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--z-transition-fast), border-color var(--z-transition-fast);
}
.z-account__tab:hover { color: var(--z-color-ink); }
.z-account__tab.is-active {
  color: var(--z-color-ink);
  border-bottom-color: var(--z-color-ink);
}
.z-account__tab .z-icon { width: 18px; height: 18px; }
.z-account__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-surface-mute);
  font-size: var(--z-fs-11);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink-soft);
}
.z-account__tab.is-active .z-account__tab-count {
  background: var(--z-color-ink);
  color: var(--z-color-on-dark);
}

/* Empty */
.z-account__empty {
  text-align: center;
  padding: var(--z-space-56) var(--z-space-16);
  border-radius: var(--z-radius-xl);
  background: var(--z-color-surface);
  color: var(--z-color-muted);
}
.z-account__empty .z-icon {
  width: 32px;
  height: 32px;
  color: var(--z-color-mute);
  margin-bottom: var(--z-space-16);
}
.z-account__empty h2 {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-20);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  margin: 0 0 var(--z-space-8);
}
.z-account__empty p {
  margin: 0 0 var(--z-space-24);
  font-size: var(--z-fs-14);
  line-height: var(--z-lh-relaxed);
}

.z-account__loader {
  display: flex;
  justify-content: center;
  padding: var(--z-space-56);
}

/* ---------- Orders ---------- */
.z-orders {
  display: grid;
  gap: var(--z-space-12);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .z-orders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--z-space-16); }
}

.z-order {
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  padding: var(--z-space-20);
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
  transition: box-shadow var(--z-transition-base), transform var(--z-transition-base);
}
.z-order:hover {
  box-shadow: var(--z-shadow-card);
}

.z-order__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--z-space-12);
}
.z-order__num {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
}
.z-order__date {
  font-size: var(--z-fs-12);
  color: var(--z-color-muted);
  margin-top: 2px;
}

.z-order__status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--z-radius-pill);
  font-size: var(--z-fs-11);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-snug);
  background: var(--z-color-surface-mute);
  color: var(--z-color-ink-soft);
  white-space: nowrap;
}
.z-order__status--completed { background: var(--z-color-success-soft); color: var(--z-color-success); }
.z-order__status--processing { background: var(--z-color-info-soft); color: var(--z-color-info); }
.z-order__status--on-hold,
.z-order__status--pending { background: var(--z-color-warning-soft); color: var(--z-color-warning); }
.z-order__status--cancelled,
.z-order__status--failed,
.z-order__status--refunded { background: var(--z-color-danger-soft); color: var(--z-color-danger); }

.z-order__thumbs {
  display: flex;
  gap: var(--z-space-8);
  align-items: center;
}
.z-order__thumbs img {
  width: 48px;
  height: 48px;
  border-radius: var(--z-radius-sm);
  object-fit: cover;
  background: var(--z-color-surface-mute);
}
.z-order__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--z-radius-sm);
  background: var(--z-color-surface-mute);
  color: var(--z-color-ink-soft);
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
}

.z-order__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--z-space-12);
  padding-top: var(--z-space-12);
  border-top: 1px solid var(--z-color-line);
}
.z-order__total {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
}
.z-order__link {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-4);
  font-size: var(--z-fs-13);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink-soft);
  text-decoration: none;
  transition: color var(--z-transition-fast);
}
.z-order__link:hover { color: var(--z-color-ink); }
.z-order__link .z-icon { width: 14px; height: 14px; }

/* ---------- Profile form ---------- */
.z-profile-form {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-32);
  max-width: 720px;
}
.z-profile-form__group {
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  padding: var(--z-space-24);
}
.z-profile-form__group legend {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  padding: 0;
  margin: 0 0 var(--z-space-4);
}
.z-profile-form__hint {
  font-size: var(--z-fs-13);
  color: var(--z-color-muted);
  margin: 0 0 var(--z-space-16);
}
.z-profile-form__grid {
  display: grid;
  gap: var(--z-space-16);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .z-profile-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.z-profile-form__notice {
  padding: var(--z-space-12) var(--z-space-16);
  border-radius: var(--z-radius-md);
  background: var(--z-color-success-soft);
  color: var(--z-color-success);
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
}
.z-profile-form__actions {
  display: flex;
}

/* ---------- Addresses ---------- */
.z-addresses {
  display: grid;
  gap: var(--z-space-16);
  grid-template-columns: 1fr;
  max-width: 720px;
}
@media (min-width: 640px) {
  .z-addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.z-address-card {
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  padding: var(--z-space-20);
}
.z-address-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--z-space-12);
  margin-bottom: var(--z-space-12);
}
.z-address-card__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-16);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  margin: 0;
}
.z-address-card__edit {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-4);
  color: var(--z-color-ink-soft);
  text-decoration: none;
  font-size: var(--z-fs-13);
  font-weight: var(--z-fw-medium);
  transition: color var(--z-transition-fast);
}
.z-address-card__edit:hover { color: var(--z-color-ink); }
.z-address-card__edit .z-icon { width: 16px; height: 16px; }
.z-address-card__body {
  margin: 0;
  font-size: var(--z-fs-14);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-ink-soft);
}
.z-address-card__empty {
  margin: 0;
  font-size: var(--z-fs-14);
  color: var(--z-color-muted);
  font-style: italic;
}

/* ---------- Контейнер вокруг WC-страницы (WC сама даёт wrapper) ---------- */
body.woocommerce-account .z-account {
  padding-block: var(--z-space-32) var(--z-space-56);
}
@media (min-width: 768px) {
  body.woocommerce-account .z-account {
    padding-block: var(--z-space-40) var(--z-space-72);
  }
}

/* Прячем дефолтный заголовок страницы «Мой аккаунт» — у нас свой блок «Привет…». */
body.woocommerce-account .z-page__head,
body.woocommerce-account .z-page__title,
body.woocommerce-account .entry-title {
  display: none;
}

/* Уменьшаем верхний/нижний padding у обёртки page для аккаунта. */
body.woocommerce-account .z-page {
  padding-block: 0;
}


/* === ./layout/not-found.css === */
/* ============================================================
   404 — «потерянная» страница.
   ============================================================ */

.z-404 {
  padding-block: var(--z-space-32) var(--z-space-72);
}

.z-404__hero {
  display: grid;
  gap: var(--z-space-32);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-bottom: var(--z-space-56);
}

@media (min-width: 900px) {
  .z-404__hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--z-space-56);
  }
}

/* ----- Art ----- */
.z-404__art {
  position: relative;
  min-height: 320px;
  border-radius: var(--z-radius-xl);
  overflow: hidden;
  background: var(--z-tile-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .z-404__art { min-height: 420px; }
}

/* Декоративные размытые «блобы» убраны (glassmorphism + пастель — антипаттерн v2). */
.z-404__blob,
.z-404__blob--a,
.z-404__blob--b {
  display: none;
}

@keyframes z-404-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, -30px) scale(1.08); }
}

.z-404__digits {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--z-space-12);
  font-family: var(--z-font-display);
  font-weight: var(--z-fw-bold);
  font-size: clamp(96px, 18vw, 200px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--z-color-ink);
}
.z-404__dot {
  display: inline-flex;
  width: clamp(80px, 14vw, 140px);
  height: clamp(80px, 14vw, 140px);
  animation: z-404-bob 3.2s ease-in-out infinite;
}
.z-404__dot svg { width: 100%; height: 100%; }

@keyframes z-404-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-8px) rotate(4deg); }
}

/* ----- Copy ----- */
.z-404__copy {
  max-width: 460px;
}
.z-404__eyebrow {
  display: inline-block;
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-wide);
  text-transform: uppercase;
  color: var(--z-color-muted);
  margin: 0 0 var(--z-space-12);
}
.z-404__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-32);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--z-color-ink);
  margin: 0 0 var(--z-space-12);
  font-weight: var(--z-fw-bold);
}
@media (min-width: 768px) {
  .z-404__title { font-size: var(--z-fs-40); }
}

.z-404__text {
  color: var(--z-color-muted);
  font-size: var(--z-fs-16);
  line-height: var(--z-lh-relaxed);
  margin: 0 0 var(--z-space-24);
}

.z-404__actions {
  display: flex;
  gap: var(--z-space-12);
  flex-wrap: wrap;
  margin-bottom: var(--z-space-20);
}

.z-404__search-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-8);
  padding: var(--z-space-12) var(--z-space-16);
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-pill);
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink-soft);
  cursor: pointer;
  transition: border-color var(--z-transition-fast), color var(--z-transition-fast);
}
.z-404__search-btn:hover {
  border-color: var(--z-color-ink);
  color: var(--z-color-ink);
}
.z-404__search-btn .z-icon { width: 16px; height: 16px; }

/* ----- Suggest ----- */
.z-404__suggest-title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-22);
  font-weight: var(--z-fw-bold);
  letter-spacing: -0.02em;
  color: var(--z-color-ink);
  margin: 0 0 var(--z-space-20);
}
@media (min-width: 768px) {
  .z-404__suggest-title { font-size: var(--z-fs-26); }
}

@media (prefers-reduced-motion: reduce) {
  .z-404__blob,
  .z-404__dot { animation: none !important; }
}


/* === ./layout/home.css === */
/* ============================================================
   Соберём дом — блоки главной страницы строительного сайта
   (типы домов, преимущества, этапы, квиз-плейсхолдер, блог)
   ============================================================ */

/* ---------- Квиз-плейсхолдер (до подключения настоящего квиза) ---------- */
.z-quiz-placeholder {
  text-align: center;
  padding: var(--z-space-40) var(--z-space-24);
  background: var(--z-color-accent);
  border-radius: var(--z-radius-xl);
}

.z-quiz-placeholder .z-section__title {
  margin: 0 0 var(--z-space-12);
}

.z-quiz-placeholder__text {
  max-width: 560px;
  margin: 0 auto var(--z-space-16);
  color: var(--z-color-ink-soft);
  line-height: var(--z-lh-relaxed);
}

.z-quiz-placeholder__soon {
  display: inline-block;
  padding: var(--z-space-8) var(--z-space-16);
  border-radius: var(--z-radius-pill);
  background: var(--z-color-surface);
  color: var(--z-color-accent-strong);
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
}

/* ---------- Сетка-обёртка для карточных блоков ---------- */
.z-house-types,
.z-benefits {
  display: grid;
  gap: var(--z-space-16);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .z-house-types,
  .z-benefits { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .z-house-types,
  .z-benefits { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Карточка типа дома ---------- */
.z-house-type,
.z-benefit {
  padding: var(--z-space-24);
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow-card);
}

.z-house-type__icon,
.z-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--z-space-16);
  border-radius: var(--z-radius-md);
  background: var(--z-color-accent);
  color: var(--z-color-accent-ink);
}

.z-house-type__title,
.z-benefit__title {
  margin: 0 0 var(--z-space-8);
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-semibold);
}

.z-house-type__desc,
.z-benefit__text {
  margin: 0;
  color: var(--z-color-mute);
  font-size: var(--z-fs-14);
  line-height: var(--z-lh-relaxed);
}

/* ---------- Этапы работы ---------- */
.z-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--z-space-16);
  grid-template-columns: 1fr;
  counter-reset: none;
}

@media (min-width: 768px) {
  .z-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .z-steps { grid-template-columns: repeat(3, 1fr); }
}

.z-step {
  display: flex;
  align-items: center;
  gap: var(--z-space-16);
  padding: var(--z-space-16) var(--z-space-20);
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-md);
}

.z-step__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--z-radius-full);
  background: var(--z-color-primary);
  color: var(--z-color-primary-on);
  font-weight: var(--z-fw-bold);
}

.z-step__text {
  font-size: var(--z-fs-15);
  font-weight: var(--z-fw-medium);
}

/* ---------- Блог на главной ---------- */
.z-blog-grid {
  display: grid;
  gap: var(--z-space-20);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .z-blog-grid { grid-template-columns: repeat(3, 1fr); }
}

.z-blog-card {
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
  box-shadow: var(--z-shadow-card);
}

.z-blog-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.z-blog-card__title {
  margin: var(--z-space-16) var(--z-space-16) var(--z-space-8);
  font-size: var(--z-fs-16);
  font-weight: var(--z-fw-semibold);
}

.z-blog-card__excerpt {
  margin: 0 var(--z-space-16) var(--z-space-16);
  color: var(--z-color-mute);
  font-size: var(--z-fs-14);
  line-height: var(--z-lh-relaxed);
}

/* ============================================================
   Hero с фоновым изображением (управляется из админки).
   Full-bleed фон во всю ширину + контент в центральном контейнере.
   ============================================================ */
/* A4: воздух под hero-фото перед следующей секцией */
.z-hero--photo {
  position: relative;
  padding: 0;
  isolation: isolate;
  margin-bottom: var(--z-space-32);
}

/* Full-bleed подложка: выходим за контейнер на всю ширину вьюпорта. */
.z-hero--photo .z-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.z-hero--photo .z-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Затемнение для читаемости белого текста поверх фото. */
/* A3: усиленный градиент слева (под текст) → почти прозрачно справа (чистое фото) */
.z-hero--photo .z-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 20, 28, 0.82) 0%, rgba(18, 20, 28, 0.62) 35%, rgba(18, 20, 28, 0.25) 70%, rgba(18, 20, 28, 0.05) 100%);
}

@media (max-width: 767.98px) {
  /* Мобайл: вертикальный градиент, чуть усиленный для читаемости */
  .z-hero--photo .z-hero__overlay {
    background: linear-gradient(180deg, rgba(18, 20, 28, 0.60) 0%, rgba(18, 20, 28, 0.80) 100%);
  }
}

/* Контент поверх фона, в центральном контейнере. */
.z-hero--photo .z-hero__inner {
  position: relative;
  z-index: 1;
  background: transparent;
  border-radius: 0;
  min-height: 460px;
  /* A1: убираем горизонтальный padding — контент идёт от края контейнера,
     вертикаль = логотипу (gutter контейнера). Горизонтальный отступ
     обеспечивается .z-container padding-inline. */
  padding-block: var(--z-space-56);
  padding-inline: 0;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}

@media (min-width: 768px) {
  .z-hero--photo .z-hero__inner {
    /* A2: десктоп высота +15-18% через clamp (было 520px → ~600-620px) */
    min-height: clamp(460px, 56vh, 640px);
    padding-block: var(--z-space-72);
  }
}

.z-hero--photo .z-hero__eyebrow {
  background: none;
  color: #fff;
}

.z-hero--photo .z-hero__title { color: #fff; max-width: 18ch; }
.z-hero--photo .z-hero__subtitle { color: rgba(255, 255, 255, 0.9); }

/* Декоративные чипы на фото скрываем — фон сам несёт картинку. */
.z-hero--photo .z-hero__deco { display: none; }

/* FIX-1: Ghost-кнопка на фото-hero — белая рамка/текст (тёмный фон). */
.z-hero--photo .z-hero__actions .z-btn--ghost {
  --_btn-fg: #fff;
  --_btn-bg: rgba(255, 255, 255, 0.08);
  --_btn-bg-hover: rgba(255, 255, 255, 0.18);
  --_btn-bd: rgba(255, 255, 255, 0.65);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.65);
}
.z-hero--photo .z-hero__actions .z-btn--ghost:hover {
  border-color: #fff;
  color: #fff;
}

/* FIX-4: Небольшой отрыв кнопок от подзаголовка. */
.z-hero--photo .z-hero__content .z-hero__actions {
  margin-top: var(--z-space-8);
}


/* Components layer */

/* === ./components/buttons.css === */
/* ============================================================
   Zabota — Buttons (минимализм а-ля pay.yandex)
   Чёрная primary, серая secondary, прозрачный ghost.
   ============================================================ */

.z-btn {
  --_btn-bg: transparent;
  --_btn-fg: var(--z-color-ink);
  --_btn-bd: transparent;
  --_btn-bg-hover: var(--z-color-surface-mute);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--z-space-8);
  position: relative;
  padding: 0 var(--z-space-20);
  height: 44px;
  border-radius: var(--z-radius-pill);
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-15);
  line-height: 1;
  font-weight: var(--z-fw-medium);
  letter-spacing: var(--z-ls-snug);
  color: var(--_btn-fg);
  background: var(--_btn-bg);
  border: 1px solid var(--_btn-bd);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  appearance: none;
  user-select: none;
  transition:
    background var(--z-transition-fast),
    color var(--z-transition-fast),
    border-color var(--z-transition-fast),
    transform var(--z-transition-fast),
    box-shadow var(--z-transition-fast),
    opacity var(--z-transition-fast);
}

.z-btn:hover {
  background: var(--_btn-bg-hover);
}

.z-btn:active {
  transform: scale(0.98);
}

.z-btn:focus-visible {
  outline: 0;
  box-shadow: var(--z-shadow-focus);
}

.z-btn:disabled,
.z-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.z-btn .z-icon,
.z-btn > svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---------- Variants ---------- */
.z-btn--primary {
  --_btn-bg: var(--z-color-primary);
  --_btn-fg: var(--z-color-primary-on);
  --_btn-bd: var(--z-color-primary);
  --_btn-bg-hover: var(--z-color-primary-hover);
}
.z-btn--primary:hover { border-color: var(--z-color-primary-hover); }

.z-btn--secondary {
  --_btn-bg: var(--z-color-surface);
  --_btn-fg: var(--z-color-ink);
  --_btn-bd: var(--z-color-line-strong);
  --_btn-bg-hover: var(--z-color-surface-mute);
}

.z-btn--soft {
  --_btn-bg: var(--z-color-surface-mute);
  --_btn-fg: var(--z-color-ink);
  --_btn-bg-hover: var(--z-color-line);
}

.z-btn--ghost {
  --_btn-bg: transparent;
  --_btn-fg: var(--z-color-ink);
  --_btn-bg-hover: var(--z-color-surface-mute);
}

.z-btn--accent {
  --_btn-bg: var(--z-color-accent);
  --_btn-fg: var(--z-color-accent-ink);
  --_btn-bd: var(--z-color-accent);
  --_btn-bg-hover: color-mix(in srgb, var(--z-color-accent) 85%, var(--z-color-accent-ink) 15%);
}

.z-btn--dark {
  --_btn-bg: var(--z-color-dark);
  --_btn-fg: var(--z-color-on-dark);
  --_btn-bd: var(--z-color-dark);
  --_btn-bg-hover: var(--z-color-dark-soft);
}

.z-btn--danger {
  --_btn-bg: var(--z-color-danger);
  --_btn-fg: #fff;
  --_btn-bd: var(--z-color-danger);
  --_btn-bg-hover: color-mix(in srgb, var(--z-color-danger) 88%, #000 12%);
}

.z-btn--link {
  height: auto;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--z-color-ink);
  font-weight: var(--z-fw-medium);
}
.z-btn--link:hover {
  background: transparent;
  opacity: 0.65;
}

/* ---------- Sizes ---------- */
.z-btn--xs { height: 28px; padding: 0 var(--z-space-12); font-size: var(--z-fs-12); }
.z-btn--sm { height: 36px; padding: 0 var(--z-space-16); font-size: var(--z-fs-13); }
.z-btn--lg { height: 52px; padding: 0 var(--z-space-32); font-size: var(--z-fs-16); }
.z-btn--xl { height: 60px; padding: 0 var(--z-space-40); font-size: var(--z-fs-16); border-radius: var(--z-radius-pill); }

.z-btn--block {
  width: 100%;
  display: flex;
}

/* ---------- Icon-only ---------- */
.z-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: var(--z-radius-pill);
  line-height: 1;
}
.z-btn--icon-sm { width: 32px; height: 32px; }
.z-btn--icon-lg { width: 48px; height: 48px; }

.z-btn--icon .z-icon,
.z-btn--icon > svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }

/* ---------- Loading state ---------- */
.z-btn.is-loading {
  pointer-events: none;
  color: transparent !important;
}
.z-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--_btn-fg) 35%, transparent);
  border-top-color: var(--_btn-fg);
  color: var(--_btn-fg);
  animation: z-spin 700ms linear infinite;
}

/* ---------- Group ---------- */
.z-btn-group {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-8);
  flex-wrap: wrap;
}

/* ---------- «Плюс» в углу карточки товара ---------- */
.z-btn--add-pill {
  position: absolute;
  right: var(--z-space-12);
  bottom: var(--z-space-12);
  z-index: 3;
  width: 40px; height: 40px;
  padding: 0;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-ink);
  color: var(--z-color-on-dark);
  border: 0;
  cursor: pointer;
  box-shadow: var(--z-shadow-pop);
  transition: transform 160ms var(--z-ease), background var(--z-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.z-btn--add-pill:hover {
  background: var(--z-color-ink-soft);
  transform: scale(1.08);
}
.z-btn--add-pill:active {
  transform: scale(0.94);
}
.z-btn--add-pill.is-success {
  background: var(--z-color-success);
}
.z-btn--add-pill .z-icon,
.z-btn--add-pill > svg { width: 20px; height: 20px; }

@media (max-width: 767.98px) {
  .z-btn--add-pill {
    width: 32px; height: 32px;
    right: var(--z-space-8);
    bottom: var(--z-space-8);
    box-shadow: 0 1px 2px rgba(15, 15, 16, 0.08);
  }
  .z-btn--add-pill .z-icon,
  .z-btn--add-pill > svg { width: 16px; height: 16px; }
}


/* === ./components/card.css === */
/* ============================================================
   Zabota — Product card (минимализм а-ля pay.yandex)
   Белая плитка, мягкий радиус, скруглённое медиа,
   pill-кнопка «+» в правом нижнем углу карточки.
   ============================================================ */

.z-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--z-color-surface);
  border-radius: var(--z-radius-card);
  padding: var(--z-space-12);
  text-decoration: none;
  color: inherit;
  transition: transform var(--z-transition-base), box-shadow var(--z-transition-base);
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 767.98px) {
  .z-card {
    padding: var(--z-space-8);
    border-radius: var(--z-radius-lg);
  }
}

@media (hover: hover) {
  .z-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--z-shadow-card);
  }
}

/* ---------- Media ---------- */
.z-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--z-radius-media);
  background: var(--z-color-surface-mute);
  margin-bottom: var(--z-space-12);
}

.z-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--z-transition-slow), opacity var(--z-transition-base);
}

.z-card__media-alt,
.z-card__img--secondary { opacity: 0; }

@media (hover: hover) {
  .z-card:hover .z-card__media img:first-child,
  .z-card:hover .z-card__img--primary { transform: scale(1.04); }
  .z-card:hover .z-card__media-alt,
  .z-card:hover .z-card__img--secondary { opacity: 1; }
}

/* ---------- Badge ---------- */
.z-card__badges {
  position: absolute;
  top: var(--z-space-12);
  left: var(--z-space-12);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}

.z-card__badge,
.z-card__badges .z-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-surface);
  color: var(--z-color-ink);
  font-size: var(--z-fs-11);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-snug);
  line-height: 1;
  box-shadow: var(--z-shadow-subtle);
}

.z-card__badge--sale,
.z-badge--sale { background: var(--z-color-danger); color: #fff; box-shadow: none; }
.z-card__badge--new,
.z-badge--new  { background: var(--z-color-accent); color: var(--z-color-accent-ink); box-shadow: none; }

/* ---------- Quick view / wishlist (top-right) ---------- */
.z-card__wishlist,
.z-card__quick-view {
  position: absolute;
  top: var(--z-space-12);
  right: var(--z-space-12);
  width: 36px; height: 36px;
  border-radius: var(--z-radius-pill);
  background: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--z-color-ink);
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background var(--z-transition-fast), color var(--z-transition-fast), transform var(--z-transition-fast);
  z-index: 5;
}

/* Quick-view (глаз) появляется только по hover на десктопе */
.z-card__quick-view { opacity: 0; }
@media (hover: hover) {
  .z-card:hover .z-card__quick-view { opacity: 1; }
}
@media (hover: none) {
  .z-card__quick-view { opacity: 1; }
}
@media (max-width: 767.98px) {
  .z-card__quick-view { display: none; }
}

.z-card__wishlist { color: var(--z-color-ink); }
.z-card__wishlist:hover { color: var(--z-color-danger); }
.z-card__wishlist.is-active { color: var(--z-color-danger); }
.z-card__quick-view:hover { background: #fff; transform: scale(1.05); }

.z-card__wishlist .z-icon,
.z-card__wishlist svg,
.z-card__quick-view .z-icon,
.z-card__quick-view svg { width: 20px; height: 20px; }

/* Outline/fill свитч + burst-анимация */
.z-card__wishlist .z-card__wishlist-outline,
.z-card__wishlist .z-card__wishlist-fill {
  width: 20px;
  height: 20px;
  transition: opacity 180ms var(--z-ease), transform 220ms var(--z-ease);
}
.z-card__wishlist .z-card__wishlist-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
}
.z-card__wishlist.is-active .z-card__wishlist-outline { opacity: 0; }
.z-card__wishlist.is-active .z-card__wishlist-fill {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.z-card__wishlist.is-burst .z-card__wishlist-fill {
  animation: z-heart-burst 600ms var(--z-ease-out);
}
.z-card__wishlist.is-burst::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--z-color-danger);
  opacity: 0.6;
  animation: z-heart-ring 600ms var(--z-ease-out) forwards;
  pointer-events: none;
}

@keyframes z-heart-burst {
  0%   { transform: translate(-50%, -50%) scale(0.5); }
  35%  { transform: translate(-50%, -50%) scale(1.35); }
  60%  { transform: translate(-50%, -50%) scale(0.92); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes z-heart-ring {
  0%   { transform: scale(0.5); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 767.98px) {
  .z-card__wishlist {
    width: 32px; height: 32px;
    top: var(--z-space-8);
    right: var(--z-space-8);
  }
  .z-card__wishlist .z-card__wishlist-outline,
  .z-card__wishlist .z-card__wishlist-fill { width: 18px; height: 18px; }
}

/* ---------- Body ---------- */
.z-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-4);
  padding: 0;
  /* отступ снизу-справа под «+» в углу карточки */
  padding-right: 48px;
  min-height: 64px;
}

@media (max-width: 767.98px) {
  .z-card__body {
    padding-right: 40px;
    padding-left: var(--z-space-4);
    padding-top: var(--z-space-4);
    gap: var(--z-space-2);
    min-height: 0;
  }
}

.z-card__subtitle {
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-12);
  letter-spacing: var(--z-ls-wider);
  text-transform: uppercase;
  color: var(--z-color-muted);
  margin: 0;
}

.z-card__title {
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-14);
  line-height: var(--z-lh-snug);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  margin: 0;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .z-card__title {
    font-size: var(--z-fs-13);
    font-weight: var(--z-fw-regular);
    color: var(--z-color-ink-soft);
    letter-spacing: var(--z-ls-snug);
  }
}

.z-card__title a { color: inherit; text-decoration: none; }

.z-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--z-fs-12);
  color: var(--z-color-muted);
}

.z-card__price {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  display: inline-flex;
  align-items: baseline;
  gap: var(--z-space-8);
  margin-top: var(--z-space-2);
  letter-spacing: var(--z-ls-snug);
}

@media (max-width: 767.98px) {
  .z-card__price {
    font-size: var(--z-fs-15);
    font-weight: var(--z-fw-medium);
    margin-top: var(--z-space-12);
    margin-bottom: var(--z-space-4);
  }
}

.z-card__price del {
  font-size: var(--z-fs-13);
  color: var(--z-color-muted);
  font-weight: var(--z-fw-regular);
  text-decoration: line-through;
}

.z-card__price ins {
  text-decoration: none;
  color: var(--z-color-ink);
}

/* ---------- Add to cart (плюсик в углу) ---------- */
.z-card__add,
.z-card .z-btn--add-pill {
  /* позиция внутри z-card, относительно его padding */
  right: var(--z-space-12);
  bottom: var(--z-space-12);
}

@media (max-width: 767.98px) {
  .z-card__add,
  .z-card .z-btn--add-pill {
    right: var(--z-space-4);
    bottom: var(--z-space-4);
  }
}

/* старый block-кнопка «В корзину» больше не используется в карточке —
   если в HTML остался .z-btn--block, заменяем визуально на pill «+» */
.z-card__add.z-btn--block {
  width: 40px;
  display: inline-flex;
  font-size: 0;
}

/* ---------- Stretched link ---------- */
.z-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Actions/wishlist должны быть выше stretched-link */
.z-card__actions,
.z-card__wishlist,
.z-card__quick-view,
.z-card__badges,
.z-card__add { z-index: 2; }

/* ---------- Variants ---------- */
.z-card--bordered { border: 1px solid var(--z-color-line); }

.z-card--horizontal {
  flex-direction: row;
  align-items: center;
  gap: var(--z-space-12);
  padding: var(--z-space-8);
}

.z-card--horizontal .z-card__media {
  width: 96px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
}

.z-card--horizontal .z-card__body {
  flex: 1;
  padding-right: 0;
  min-height: auto;
}


/* === ./components/cart-drawer.css === */
/* ============================================================
   Zabota — Cart drawer (правый side panel) + cart-item стили
   ============================================================ */

.z-cart-drawer,
.z-drawer {
  position: relative;
  pointer-events: none;
}

.z-cart-drawer__backdrop,
.z-drawer__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-z-drawer-backdrop);
  background: rgba(15, 15, 16, 0.42);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  pointer-events: auto;
}

.z-cart-drawer__panel,
.z-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  height: 100dvh;
  width: 440px;
  max-width: 100vw;
  z-index: var(--z-z-drawer);
  background: var(--z-color-surface);
  box-shadow: var(--z-shadow-modal);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  border-radius: var(--z-radius-xl) 0 0 var(--z-radius-xl);
  overflow: hidden;
}

/* Мобайл: bottom-sheet 80% высоты экрана */
@media (max-width: 767.98px) {
  .z-cart-drawer__panel,
  .z-drawer {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 80vh;
    height: 80dvh;
    max-height: 80dvh;
    border-radius: var(--z-radius-xl) var(--z-radius-xl) 0 0;
  }
}

/* Анимация bottom-sheet (моб) */
@media (max-width: 767.98px) {
  .z-trans-slide-in { animation: z-drawer-up-in 280ms var(--z-ease-out) both; }
  .z-trans-slide-out { animation: z-drawer-up-out 220ms var(--z-ease) both; }
  @keyframes z-drawer-up-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  @keyframes z-drawer-up-out {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
  }
}

/* x-transition классы из Alpine */
.z-trans-slide-in {
  animation: z-drawer-in 280ms var(--z-ease-out) both;
}
.z-trans-slide-out {
  animation: z-drawer-out 220ms var(--z-ease) both;
}
@keyframes z-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes z-drawer-out {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* ---------- Header ---------- */
.z-cart-drawer__head,
.z-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--z-space-20) var(--z-space-20) var(--z-space-12);
  flex-shrink: 0;
}

.z-cart-drawer__title,
.z-drawer__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-20);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--z-space-8);
}

.z-cart-drawer__count {
  font-size: var(--z-fs-14);
  color: var(--z-color-muted);
  font-weight: var(--z-fw-medium);
}

.z-cart-drawer__close,
.z-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-surface-mute);
  color: var(--z-color-ink);
  border: 0;
  cursor: pointer;
  transition: background var(--z-transition-fast);
}
.z-cart-drawer__close:hover,
.z-drawer__close:hover { background: var(--z-color-line); }
.z-cart-drawer__close svg,
.z-drawer__close svg { width: 18px; height: 18px; }

/* ---------- Body (scroll) ---------- */
.z-cart-drawer__body,
.z-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--z-space-12) var(--z-space-20);
}

/* ---------- Footer (sticky bottom) ---------- */
.z-cart-drawer__foot,
.z-drawer__footer {
  flex-shrink: 0;
  background: var(--z-color-surface);
  border-top: 1px solid var(--z-color-line);
  padding: var(--z-space-16) var(--z-space-20) calc(var(--z-space-20) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--z-space-12);
}

.z-cart-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.z-cart-drawer__total-label {
  font-size: var(--z-fs-14);
  color: var(--z-color-muted);
}
.z-cart-drawer__total-value {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-22);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
}

/* ---------- Cart item ---------- */
.z-cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.z-cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--z-space-12);
  padding: var(--z-space-12) 0;
  border-bottom: 1px solid var(--z-color-line);
  align-items: center;
}
.z-cart-item:first-child { padding-top: 0; }
.z-cart-item:last-child { border-bottom: 0; }

.z-cart-item__img {
  width: 64px;
  height: 64px;
  border-radius: var(--z-radius-md);
  object-fit: cover;
  background: var(--z-color-surface-mute);
}

.z-cart-item__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.z-cart-item__title {
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

.z-cart-item__price {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-15);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
}

.z-cart-item__qty {
  display: inline-flex;
  align-items: center;
  height: 28px;
  background: var(--z-color-surface-mute);
  border-radius: var(--z-radius-pill);
  padding: 0 4px;
  width: fit-content;
  margin-top: 4px;
  gap: 2px;
}

.z-qty-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--z-color-ink);
  font-size: var(--z-fs-14);
  border-radius: var(--z-radius-pill);
  cursor: pointer;
  transition: background var(--z-transition-fast);
}
.z-qty-btn:hover { background: var(--z-color-line); }
.z-qty-value {
  min-width: 20px;
  text-align: center;
  font-size: var(--z-fs-13);
  font-weight: var(--z-fw-semibold);
}

.z-cart-item__remove {
  align-self: start;
  width: 28px;
  height: 28px;
  border-radius: var(--z-radius-pill);
  background: transparent;
  border: 0;
  color: var(--z-color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--z-transition-fast), color var(--z-transition-fast);
}
.z-cart-item__remove:hover {
  background: var(--z-color-surface-mute);
  color: var(--z-color-danger);
}

/* ---------- Empty / skeleton ---------- */
.z-cart-drawer__empty {
  text-align: center;
  color: var(--z-color-muted);
  padding: var(--z-space-40) var(--z-space-16);
  font-size: var(--z-fs-14);
}

.z-cart-drawer__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-12);
}

/* ============================================================
   Cart page (/cart/) — большая 2-col компоновка
   ============================================================ */
.z-cart-page {
  padding-block: var(--z-space-24) var(--z-space-56);
}

.z-cart-page__head {
  padding-block: var(--z-space-12) var(--z-space-24);
}
.z-cart-page__title,
.z-page__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-32);
  font-weight: var(--z-fw-bold);
  letter-spacing: -0.025em;
  margin: 0 0 var(--z-space-24);
}
@media (min-width: 768px) {
  .z-cart-page__title,
  .z-page__title { font-size: var(--z-fs-40); }
}

.z-cart-page__empty {
  padding: var(--z-space-56) var(--z-space-16);
  text-align: center;
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
  align-items: center;
}

.z-cart-page__loader { display: flex; flex-direction: column; gap: var(--z-space-12); }

.z-cart-page__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--z-space-24);
}
@media (min-width: 900px) {
  .z-cart-page__grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--z-space-32);
    align-items: start;
  }
}

.z-cart-page__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  overflow: hidden;
}

.z-cart-page__item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--z-space-16);
  padding: var(--z-space-16);
  border-bottom: 1px solid var(--z-color-line);
  align-items: center;
}
.z-cart-page__item:last-child { border-bottom: 0; }

.z-cart-page__item-img {
  width: 88px;
  height: 88px;
  border-radius: var(--z-radius-md);
  overflow: hidden;
  background: var(--z-color-surface-mute);
  display: block;
}
.z-cart-page__item-img img { width: 100%; height: 100%; object-fit: cover; }

.z-cart-page__item-info {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-6);
  min-width: 0;
}

.z-cart-page__item-title {
  font-size: var(--z-fs-15);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.z-cart-page__item-price {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-15);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
}

.z-cart-page__item-remove {
  align-self: start;
  width: 32px;
  height: 32px;
  border-radius: var(--z-radius-pill);
  background: transparent;
  color: var(--z-color-muted);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--z-transition-fast), color var(--z-transition-fast);
}
.z-cart-page__item-remove:hover {
  background: var(--z-color-surface-mute);
  color: var(--z-color-danger);
}

/* ---------- Summary side ---------- */
.z-cart-page__summary {
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  padding: var(--z-space-20);
  display: flex;
  flex-direction: column;
  gap: var(--z-space-12);
  position: sticky;
  top: calc(var(--z-header-h-md) + var(--z-space-24));
}

.z-cart-page__summary-title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-semibold);
  margin: 0 0 var(--z-space-4);
}

.z-cart-page__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--z-fs-14);
  color: var(--z-color-ink-soft);
}

.z-cart-page__row--discount { color: var(--z-color-success); }

.z-cart-page__row--total {
  padding-top: var(--z-space-12);
  margin-top: var(--z-space-4);
  border-top: 1px solid var(--z-color-line);
  font-family: var(--z-font-display);
  font-size: var(--z-fs-20);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
  align-items: baseline;
}


/* === ./components/forms.css === */
/* ============================================================
   Zabota — Forms (input, select, textarea, checkbox, radio)
   ============================================================ */

.z-field {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-4);
}

.z-label {
  display: block;
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-medium);
  letter-spacing: var(--z-ls-wide);
  color: var(--z-color-ink);
  margin-bottom: var(--z-space-4);
}

.z-label--required::after {
  content: " *";
  color: var(--z-color-danger);
}

/* ---------- Input / Select / Textarea ---------- */
.z-input,
.z-select,
.z-textarea {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 var(--z-space-16);
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-md);
  font-family: var(--z-font-sans);
  font-size: 15px;
  line-height: var(--z-lh-snug);
  color: var(--z-color-ink);
  -webkit-appearance: none;
          appearance: none;
  transition:
    border-color var(--z-transition-fast),
    box-shadow var(--z-transition-fast),
    background var(--z-transition-fast);
}

.z-input::placeholder,
.z-textarea::placeholder {
  color: var(--z-color-muted);
}

.z-input:hover,
.z-select:hover,
.z-textarea:hover {
  border-color: var(--z-color-line-strong);
}

.z-input:focus,
.z-select:focus,
.z-textarea:focus {
  outline: 0;
  border-color: var(--z-color-deep);
  box-shadow: 0 0 0 3px rgba(var(--z-rgb-deep), 0.12);
}

.z-input:disabled,
.z-select:disabled,
.z-textarea:disabled {
  background: var(--z-color-surface-alt);
  color: var(--z-color-muted);
  cursor: not-allowed;
}

.z-textarea {
  height: auto;
  min-height: 120px;
  padding-block: var(--z-space-12);
  resize: vertical;
  line-height: var(--z-lh-relaxed);
}

/* ---------- Select arrow ---------- */
.z-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--z-space-16) center;
  background-size: 12px 8px;
  padding-right: calc(var(--z-space-16) * 2 + 12px);
  cursor: pointer;
}

/* ---------- Sizes ---------- */
.z-input--sm,
.z-select--sm {
  height: 36px;
  padding: 0 var(--z-space-12);
  font-size: var(--z-fs-14);
  border-radius: var(--z-radius-sm);
}

.z-input--lg,
.z-select--lg {
  height: 56px;
  padding: 0 var(--z-space-20);
  font-size: var(--z-fs-16);
  border-radius: var(--z-radius-md);
}

/* ---------- Error state ---------- */
.z-field--error .z-input,
.z-field--error .z-select,
.z-field--error .z-textarea,
.z-input.is-error,
.z-select.is-error,
.z-textarea.is-error {
  border-color: var(--z-color-danger);
}

.z-field--error .z-input:focus,
.z-input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(var(--z-rgb-danger), 0.15);
}

.z-field-error {
  font-size: var(--z-fs-12);
  color: var(--z-color-danger);
  margin-top: var(--z-space-4);
}

.z-field-hint {
  font-size: var(--z-fs-12);
  color: var(--z-color-muted);
  margin-top: var(--z-space-4);
}

/* ---------- Input with icon ---------- */
.z-input-group {
  position: relative;
}

.z-input-group__icon {
  position: absolute;
  top: 50%;
  left: var(--z-space-16);
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--z-color-muted);
  pointer-events: none;
}

.z-input-group--has-icon .z-input {
  padding-left: calc(var(--z-space-16) * 2 + 18px);
}

.z-input-group__action {
  position: absolute;
  top: 50%;
  right: var(--z-space-8);
  transform: translateY(-50%);
}

/* ---------- Checkbox ---------- */
.z-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--z-space-12);
  cursor: pointer;
  font-size: var(--z-fs-14);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-ink);
}

.z-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.z-checkbox__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--z-color-line-strong);
  border-radius: var(--z-radius-xs);
  background: var(--z-color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--z-transition-fast), border-color var(--z-transition-fast);
  margin-top: 2px;
}

.z-checkbox__box::after {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6L5 9L10 3' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity var(--z-transition-fast);
}

.z-checkbox__input:checked + .z-checkbox__box {
  background: var(--z-color-deep);
  border-color: var(--z-color-deep);
}

.z-checkbox__input:checked + .z-checkbox__box::after {
  opacity: 1;
}

.z-checkbox__input:focus-visible + .z-checkbox__box {
  box-shadow: var(--z-shadow-focus);
}

.z-checkbox__input:disabled + .z-checkbox__box {
  background: var(--z-color-surface-alt);
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Radio ---------- */
.z-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--z-space-12);
  cursor: pointer;
  font-size: var(--z-fs-14);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-ink);
}

.z-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.z-radio__circle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--z-color-line-strong);
  border-radius: var(--z-radius-pill);
  background: var(--z-color-surface);
  position: relative;
  transition: border-color var(--z-transition-fast);
  margin-top: 2px;
}

.z-radio__circle::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-deep);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--z-transition-fast), transform var(--z-transition-fast);
}

.z-radio__input:checked + .z-radio__circle {
  border-color: var(--z-color-deep);
}

.z-radio__input:checked + .z-radio__circle::after {
  opacity: 1;
  transform: scale(1);
}

.z-radio__input:focus-visible + .z-radio__circle {
  box-shadow: var(--z-shadow-focus);
}

/* ---------- Switch (toggle) ---------- */
.z-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-12);
  cursor: pointer;
}

.z-switch__input {
  position: absolute;
  opacity: 0;
}

.z-switch__track {
  width: 40px;
  height: 24px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-line-strong);
  position: relative;
  transition: background var(--z-transition-fast);
  flex-shrink: 0;
}

.z-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--z-radius-pill);
  background: #fff;
  box-shadow: var(--z-shadow-subtle);
  transition: transform var(--z-transition-base);
}

.z-switch__input:checked + .z-switch__track {
  background: var(--z-color-deep);
}

.z-switch__input:checked + .z-switch__track::after {
  transform: translateX(16px);
}

/* ---------- Fieldset / form sections ---------- */
.z-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
  border: 0;
  padding: 0;
  margin: 0;
}

.z-fieldset__legend {
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: var(--z-ls-widest);
  text-transform: uppercase;
  color: var(--z-color-muted);
  margin-bottom: var(--z-space-8);
}

/* ============================================================
   WooCommerce form selectors (input-text, .form-row, .select2)
   ============================================================ */
.woocommerce form .form-row,
.woocommerce-page form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-4);
  margin: 0 0 var(--z-space-12);
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  display: block;
  font-size: var(--z-fs-13);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  margin-bottom: var(--z-space-4);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], input[type="search"],
input[type="url"], textarea, select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 var(--z-space-16);
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-md);
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-15);
  line-height: 1.3;
  color: var(--z-color-ink);
  appearance: none;
  transition: border-color var(--z-transition-fast), box-shadow var(--z-transition-fast);
}

textarea {
  height: auto;
  min-height: 120px;
  padding: var(--z-space-12) var(--z-space-16);
  line-height: var(--z-lh-relaxed);
  resize: vertical;
}

input:focus, textarea:focus, select:focus,
.woocommerce form .form-row input.input-text:focus {
  outline: 0;
  border-color: var(--z-color-ink);
  box-shadow: var(--z-shadow-focus);
}

input::placeholder, textarea::placeholder {
  color: var(--z-color-muted);
}

.woocommerce form .form-row-first { grid-column: 1; }
.woocommerce form .form-row-last  { grid-column: 2; }
.woocommerce form .form-row-wide  { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-account-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--z-space-12);
  }
  .woocommerce-billing-fields__field-wrapper .form-row-wide,
  .woocommerce-shipping-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
  }
}

/* WC notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > div {
  padding: var(--z-space-12) var(--z-space-16);
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-md);
  font-size: var(--z-fs-14);
  margin: 0 0 var(--z-space-16);
  list-style: none;
}
.woocommerce-error { background: var(--z-color-danger-soft); border-color: transparent; color: var(--z-color-danger); }
.woocommerce-message { background: var(--z-color-success-soft); border-color: transparent; color: var(--z-color-success); }


/* === ./components/badges.css === */
/* ============================================================
   Zabota — Badges, pills, tags
   ============================================================ */

.z-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-4);
  padding: 4px 10px;
  border-radius: var(--z-radius-pill);
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-medium);
  letter-spacing: var(--z-ls-wide);
  line-height: 1;
  background: var(--z-color-line);
  color: var(--z-color-ink);
  white-space: nowrap;
}

.z-badge--xs {
  padding: 2px 6px;
  font-size: 10px;
}

.z-badge--lg {
  padding: 6px 14px;
  font-size: var(--z-fs-14);
}

/* ---------- Variants ---------- */
.z-badge--primary {
  background: var(--z-color-deep);
  color: #fff;
}

.z-badge--gold {
  background: var(--z-color-accent);
  color: var(--z-color-accent-ink);
}

.z-badge--dark {
  background: var(--z-color-dark);
  color: var(--z-color-on-dark);
}

.z-badge--outline {
  background: transparent;
  border: 1px solid var(--z-color-line-strong);
  color: var(--z-color-ink);
}

.z-badge--success {
  background: color-mix(in srgb, var(--z-color-success) 12%, transparent);
  color: var(--z-color-success);
}

.z-badge--danger {
  background: color-mix(in srgb, var(--z-color-danger) 12%, transparent);
  color: var(--z-color-danger);
}

.z-badge--warning {
  background: color-mix(in srgb, var(--z-color-warning) 14%, transparent);
  color: color-mix(in srgb, var(--z-color-warning) 70%, #000);
}

.z-badge--upper {
  text-transform: uppercase;
  letter-spacing: var(--z-ls-wider);
}

/* ---------- Dot indicator ---------- */
.z-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--z-radius-pill);
  background: currentColor;
}

/* ---------- Tag (closable chip) ---------- */
.z-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-4);
  padding: 6px 8px 6px 12px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  font-size: var(--z-fs-12);
  color: var(--z-color-ink);
  line-height: 1;
}

.z-tag__close {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--z-radius-pill);
  background: transparent;
  color: var(--z-color-muted);
  cursor: pointer;
  transition: background var(--z-transition-fast), color var(--z-transition-fast);
}

.z-tag__close:hover {
  background: var(--z-color-line);
  color: var(--z-color-ink);
}

.z-tag__close svg {
  width: 10px;
  height: 10px;
}


/* === ./components/skeleton.css === */
/* ============================================================
   Zabota — Skeleton loaders (shimmer)
   ============================================================ */

.z-skeleton {
  display: block;
  background: var(--z-color-surface-alt);
  border-radius: var(--z-radius-sm);
  position: relative;
  overflow: hidden;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.z-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: zShimmer 1400ms infinite;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

@media (prefers-color-scheme: dark) {
  .z-skeleton::after {
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 50%,
      transparent 100%
    );
  }
}

@keyframes zShimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .z-skeleton::after {
    animation: none;
    opacity: 0.4;
    transform: none;
  }
}

/* ---------- Shapes ---------- */
.z-skeleton--text {
  height: 1em;
  width: 100%;
  border-radius: var(--z-radius-xs);
}

.z-skeleton--text-sm {
  height: 0.875em;
}

.z-skeleton--title {
  height: 1.5em;
  width: 70%;
  border-radius: var(--z-radius-xs);
}

.z-skeleton--circle {
  border-radius: var(--z-radius-pill);
  aspect-ratio: 1 / 1;
}

.z-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--z-radius-pill);
}

.z-skeleton--media {
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: var(--z-radius-md);
}

.z-skeleton--square {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--z-radius-md);
}

.z-skeleton--button {
  height: 48px;
  width: 160px;
  border-radius: var(--z-radius-pill);
}

/* ---------- Card skeleton ---------- */
.z-card-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-12);
}

.z-card-skeleton__media {
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: var(--z-radius-md);
  background: var(--z-color-surface-alt);
  position: relative;
  overflow: hidden;
}

.z-card-skeleton__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: zShimmer 1400ms infinite;
}

.z-card-skeleton__lines {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-8);
  padding: 0 var(--z-space-4);
}


/* === ./components/modal.css === */
/* ============================================================
   Zabota — Modal dialog
   ============================================================ */

.z-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-z-modal);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--z-space-16);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--z-transition-base);
  overflow-y: auto;
}

.z-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.z-modal {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - var(--z-space-32));
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform var(--z-transition-base), opacity var(--z-transition-base);
  margin: auto;
}

.z-modal-backdrop.is-open .z-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ---------- Variants ---------- */
.z-modal--sm {
  max-width: 360px;
}

.z-modal--md {
  max-width: 480px;
}

.z-modal--lg {
  max-width: 720px;
}

.z-modal--xl {
  max-width: 960px;
}

/* ---------- Header ---------- */
.z-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-12);
  padding: var(--z-space-20) var(--z-space-24);
  border-bottom: 1px solid var(--z-color-line);
  flex-shrink: 0;
}

.z-modal__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-22);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  margin: 0;
}

.z-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--z-radius-pill);
  background: transparent;
  color: var(--z-color-ink);
  cursor: pointer;
  transition: background var(--z-transition-fast);
}

.z-modal__close:hover {
  background: var(--z-color-line);
}

.z-modal__close svg {
  width: 18px;
  height: 18px;
}

/* ---------- Body ---------- */
.z-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--z-space-24);
  color: var(--z-color-text);
  font-size: var(--z-fs-14);
  line-height: var(--z-lh-relaxed);
}

/* ---------- Footer ---------- */
.z-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--z-space-8);
  padding: var(--z-space-16) var(--z-space-24);
  border-top: 1px solid var(--z-color-line);
  flex-shrink: 0;
  background: var(--z-color-surface);
}

/* Mobile: модалка снизу как bottom-sheet */
@media (max-width: 479.98px) {
  .z-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .z-modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--z-radius-lg) var(--z-radius-lg) 0 0;
    transform: translateY(100%);
  }

  .z-modal-backdrop.is-open .z-modal {
    transform: translateY(0);
  }
}

/* ---------- Confirmation modal (центрированный текст) ---------- */
.z-modal--confirm .z-modal__body {
  text-align: center;
  padding-block: var(--z-space-32);
}

.z-modal--confirm .z-modal__footer {
  justify-content: center;
}


/* === ./components/quick-view.css === */
/* ============================================================
   Zabota — Quick view (попап-карточка товара)
   ============================================================ */

/* ---------- Контейнер модалки переопределяем под quick-view ---------- */
.z-modal--quick-view {
  max-width: 880px;
  width: calc(100vw - var(--z-space-32));
  max-height: calc(100vh - var(--z-space-64));
  position: relative;
  overflow: hidden;
}

/* Кнопка закрытия — справа сверху, абсолютная */
.z-modal--quick-view .z-modal__close {
  position: absolute;
  top: var(--z-space-12);
  right: var(--z-space-12);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.z-modal--quick-view .z-modal__close:hover {
  background: #fff;
}
.z-modal--quick-view .z-modal__close svg {
  width: 18px;
  height: 18px;
}

/* Тело модалки в quick-view — без внутреннего паддинга, чтобы галерея жила
   на белом фоне без двойных рамок. Внутренние отступы делает .z-qv. */
.z-modal--quick-view .z-modal__body {
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Layout: галерея слева, инфо справа (на ПК) ---------- */
.z-qv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #fff;
  border-radius: var(--z-radius-lg);
}

@media (min-width: 720px) {
  .z-qv {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: 480px;
  }
}

/* ---------- Media (галерея) ---------- */
.z-qv__media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--z-space-8);
  padding: var(--z-space-24) var(--z-space-16) var(--z-space-12);
  background: #fff;
}

@media (min-width: 720px) {
  .z-qv__media {
    padding: var(--z-space-40);
    border-right: 1px solid var(--z-color-line);
    background: #fff;
  }
}

.z-qv__badge {
  position: absolute;
  top: var(--z-space-16);
  left: var(--z-space-16);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--z-color-danger, #ef4444);
  color: #fff;
  font-size: var(--z-fs-12);
  font-weight: var(--z-fw-semibold);
  letter-spacing: 0.02em;
}

.z-qv__main-image {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .z-qv__main-image {
    max-width: 320px;
  }
}

.z-qv__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.z-qv__image--empty {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, transparent 49%, var(--z-color-line) 49%, var(--z-color-line) 51%, transparent 51%);
  opacity: 0.4;
}

/* Миниатюры */
.z-qv__thumbs {
  display: flex;
  gap: var(--z-space-8);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--z-space-8);
}

.z-qv__thumb {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--z-radius-md);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--z-transition-fast), transform var(--z-transition-fast);
}
.z-qv__thumb:hover { border-color: var(--z-color-line-strong, #d1d5db); }
.z-qv__thumb.is-active {
  border-color: var(--z-color-ink, #0f0f10);
}
.z-qv__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Body (инфо) ---------- */
.z-qv__body {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
  padding: var(--z-space-24) var(--z-space-24) var(--z-space-32);
}

@media (min-width: 720px) {
  .z-qv__body {
    padding: var(--z-space-40) var(--z-space-32);
    justify-content: flex-start;
  }
}

.z-qv__title {
  margin: 0;
  font-family: var(--z-font-display, inherit);
  font-size: var(--z-fs-22);
  font-weight: var(--z-fw-bold);
  line-height: 1.25;
  color: var(--z-color-ink);
  letter-spacing: -0.01em;
}

@media (min-width: 720px) {
  .z-qv__title { font-size: var(--z-fs-26); }
}

.z-qv__title-link {
  color: inherit;
  text-decoration: none;
}
.z-qv__title-link:hover { opacity: 0.75; }

.z-qv__price {
  font-size: var(--z-fs-22);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
}
.z-qv__price del {
  color: var(--z-color-muted, #98989a);
  font-weight: var(--z-fw-regular);
  font-size: var(--z-fs-16);
  margin-right: var(--z-space-8);
}
.z-qv__price ins {
  text-decoration: none;
  color: var(--z-color-danger, #ef4444);
}

.z-qv__excerpt {
  color: var(--z-color-ink-soft, #4a4a4d);
  font-size: var(--z-fs-14);
  line-height: 1.55;
}
.z-qv__excerpt p { margin: 0 0 var(--z-space-8); }
.z-qv__excerpt p:last-child { margin-bottom: 0; }

.z-qv__variations-notice {
  padding: var(--z-space-12) var(--z-space-16);
  background: var(--z-color-surface-mute, #f7f7f8);
  border-radius: var(--z-radius-md);
  color: var(--z-color-ink-soft);
  font-size: var(--z-fs-13);
  line-height: 1.5;
}

/* ---------- Actions (qty + add to cart) ---------- */
.z-qv__actions {
  display: flex;
  align-items: stretch;
  gap: var(--z-space-12);
  margin-top: var(--z-space-8);
  min-width: 0;
  flex-wrap: wrap;
}

.z-qv__qty {
  display: inline-flex;
  align-items: center;
  background: var(--z-color-surface-mute, #f7f7f8);
  border-radius: 999px;
  height: 48px;
  padding: 4px;
  width: auto;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.z-qv__qty-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  color: var(--z-color-ink);
  cursor: pointer;
  transition: background var(--z-transition-fast);
}
.z-qv__qty-btn:hover:not(:disabled) { background: var(--z-color-line); }
.z-qv__qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.z-qv .z-qv__qty-input {
  width: 36px;
  min-width: 0;
  max-width: 36px;
  height: 32px;
  text-align: center;
  font-size: var(--z-fs-15);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  -moz-appearance: textfield;
  appearance: textfield;
  flex: 0 0 36px;
}
.z-qv__qty-input::-webkit-outer-spin-button,
.z-qv__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.z-qv__qty-input:focus-visible { outline: 2px solid var(--z-color-ink); outline-offset: 2px; border-radius: 4px; }

.z-qv__add {
  flex: 1 1 0;
  min-width: 120px;
  height: 48px;
  padding: 0 var(--z-space-16);
  font-size: var(--z-fs-15);
  white-space: nowrap;
}

.z-qv__add.is-success {
  background: var(--z-color-success, #16a34a);
  border-color: var(--z-color-success, #16a34a);
}

/* Ссылка «открыть страницу товара» */
.z-qv__open-link {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-6);
  margin-top: var(--z-space-4);
  font-size: var(--z-fs-13);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink-soft, #4a4a4d);
  text-decoration: none;
  transition: color var(--z-transition-fast);
}
.z-qv__open-link:hover { color: var(--z-color-ink); }
.z-qv__open-link svg { width: 14px; height: 14px; }

/* Пока модалка открыта — скрываем мобильный нижний бар, чтобы не отвлекал */
html.z-no-scroll .z-mobilebar { display: none !important; }

/* ---------- Mobile (центрированное окно с боковыми отступами) ---------- */
@media (max-width: 719.98px) {
  /* Перебиваем общий .z-modal bottom-sheet — у нас centered modal с отступами */
  .z-modal-backdrop--quick-view {
    align-items: center !important;
    padding: var(--z-space-16) !important;
  }
  .z-modal-backdrop--quick-view .z-modal--quick-view {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - var(--z-space-32));
    border-radius: var(--z-radius-lg);
    transform: none;
  }
  .z-modal--quick-view .z-modal__close {
    top: var(--z-space-12);
    right: var(--z-space-12);
    width: 40px;
    height: 40px;
  }
  .z-modal--quick-view .z-modal__close svg {
    width: 18px;
    height: 18px;
  }
}


/* === ./components/toast.css === */
/* ============================================================
   Zabota — Toasts / Notifications
   ============================================================ */

.z-toast-region {
  position: fixed;
  top: var(--z-space-20);
  right: var(--z-space-20);
  z-index: var(--z-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--z-space-8);
  max-width: calc(100vw - var(--z-space-40));
  pointer-events: none;
}

.z-toast-region--bottom {
  top: auto;
  bottom: var(--z-space-20);
}

.z-toast-region--center {
  right: 50%;
  transform: translateX(50%);
}

@media (max-width: 479.98px) {
  .z-toast-region {
    top: auto;
    bottom: var(--z-space-16);
    right: var(--z-space-16);
    left: var(--z-space-16);
    max-width: none;
  }
}

.z-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--z-space-12);
  min-width: 280px;
  max-width: 380px;
  padding: var(--z-space-12) var(--z-space-16);
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-md);
  box-shadow: var(--z-shadow-card);
  font-size: var(--z-fs-14);
  color: var(--z-color-ink);
  transform: translateX(120%);
  opacity: 0;
  transition: transform var(--z-transition-base), opacity var(--z-transition-base);
  will-change: transform, opacity;
}

@media (max-width: 479.98px) {
  .z-toast {
    min-width: 0;
    max-width: 100%;
    transform: translateY(120%);
  }
}

.z-toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}

@media (max-width: 479.98px) {
  .z-toast.is-visible {
    transform: translateY(0);
  }
}

.z-toast.is-leaving {
  opacity: 0;
  transform: translateX(120%);
}

/* ---------- Icon ---------- */
.z-toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--z-color-deep);
  margin-top: 2px;
}

.z-toast__icon svg {
  width: 20px;
  height: 20px;
}

/* ---------- Body ---------- */
.z-toast__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.z-toast__title {
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  font-size: var(--z-fs-14);
}

.z-toast__text {
  color: var(--z-color-muted);
  font-size: var(--z-fs-12);
  line-height: var(--z-lh-relaxed);
}

/* ---------- Close ---------- */
.z-toast__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: var(--z-radius-pill);
  color: var(--z-color-muted);
  cursor: pointer;
  transition: background var(--z-transition-fast), color var(--z-transition-fast);
}

.z-toast__close:hover {
  background: var(--z-color-line);
  color: var(--z-color-ink);
}

.z-toast__close svg {
  width: 12px;
  height: 12px;
}

/* ---------- Variants ---------- */
.z-toast--success {
  border-color: color-mix(in srgb, var(--z-color-success) 30%, var(--z-color-line));
}

.z-toast--success .z-toast__icon {
  color: var(--z-color-success);
}

.z-toast--danger,
.z-toast--error {
  border-color: color-mix(in srgb, var(--z-color-danger) 30%, var(--z-color-line));
}

.z-toast--danger .z-toast__icon,
.z-toast--error .z-toast__icon {
  color: var(--z-color-danger);
}

.z-toast--warning {
  border-color: color-mix(in srgb, var(--z-color-warning) 30%, var(--z-color-line));
}

.z-toast--warning .z-toast__icon {
  color: var(--z-color-warning);
}

.z-toast--dark {
  background: var(--z-color-dark);
  color: var(--z-color-on-dark);
  border-color: var(--z-color-dark);
}

.z-toast--dark .z-toast__title,
.z-toast--dark .z-toast__text {
  color: var(--z-color-on-dark);
}

.z-toast--dark .z-toast__close {
  color: var(--z-color-on-dark);
}

/* ---------- Progress (auto-dismiss) ---------- */
.z-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.2;
  transform-origin: left center;
  animation: zToastProgress var(--z-toast-duration, 4000ms) linear forwards;
}

@keyframes zToastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}


/* === ./components/breadcrumbs.css === */
/* ============================================================
   Zabota — Breadcrumbs
   ============================================================ */

.z-breadcrumbs {
  font-family: var(--z-font-sans);
  font-size: var(--z-fs-11);
  letter-spacing: var(--z-ls-snug);
  color: var(--z-color-muted);
  padding-block: var(--z-space-12);
}

.z-breadcrumbs__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.z-breadcrumbs__list::-webkit-scrollbar { display: none; }

.z-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.z-breadcrumbs__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  margin-inline: var(--z-space-8);
  opacity: 0.45;
  flex-shrink: 0;
  vertical-align: middle;
}

.z-breadcrumbs__link {
  color: var(--z-color-muted);
  text-decoration: none;
  transition: color var(--z-transition-fast);
  white-space: nowrap;
}

/* Текущая страница может ужиматься с многоточием */
.z-breadcrumbs__item.is-current {
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--z-color-ink-soft);
}
.z-breadcrumbs__item.is-current > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.z-breadcrumbs__link:hover {
  color: var(--z-color-ink);
}

.z-breadcrumbs__item--current,
.z-breadcrumbs__item--current .z-breadcrumbs__link {
  color: var(--z-color-ink);
  pointer-events: none;
}

/* ---------- Со стрелкой вместо слеша ---------- */
.z-breadcrumbs--chevron .z-breadcrumbs__item:not(:last-child)::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
  margin-inline: var(--z-space-8);
  opacity: 0.5;
}


/* === ./components/extras.css === */
/* ============================================================
   Zabota — extras.css
   Дописанные правила под классы, которые PHP-шаблоны пишут
   в HTML, но для которых не было CSS-правил.
   Только токены, mobile-first. Без !important (кроме x-cloak).
   ============================================================ */

/* x-cloak (Alpine) */
[x-cloak] { display: none !important; }

/* Section / hero / cat-card / card стили перенесены в
   layout/catalog.css, layout/hero.css и components/card.css */

/* Header & icon-btn styling moved to layout/header.css and components/buttons.css */
.z-icon-btn {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--z-color-ink);
  border-radius: var(--z-radius-pill);
  cursor: pointer;
}
.z-icon-btn:hover { background: var(--z-color-surface-mute); }
.z-icon-btn svg { width: 20px; height: 20px; }

/* Cart drawer styling moved to components/cart-drawer.css */

/* Qty stepper — стили в product.css/cart-drawer.css */

/* ============================================================
   Search modal
   ============================================================ */
.z-search-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-z-modal);
  display: flex;
  flex-direction: column;
}
@media (max-width: 767.98px) {
  .z-search-modal__panel {
    margin-top: var(--z-space-12);
    width: calc(100% - 16px);
    border-radius: var(--z-radius-md);
  }
  .z-search-modal__head { padding: var(--z-space-12); }
  .z-search-modal__body { padding: var(--z-space-12); max-height: calc(100vh - 120px); }
  .z-search-field__input { font-size: 16px; } /* 16px чтоб не зумило iOS */
}
.z-search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.z-search-modal__panel {
  position: relative;
  max-width: 720px;
  width: calc(100% - 32px);
  margin: 80px auto 0;
  background: var(--z-color-surface);
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow-modal);
  z-index: 1;
}
.z-search-modal__head {
  display: flex;
  align-items: center;
  gap: var(--z-space-12);
  padding: var(--z-space-16) var(--z-space-20);
  border-bottom: 1px solid var(--z-color-line);
}
.z-search-modal__close { flex-shrink: 0; }
.z-search-modal__body {
  padding: var(--z-space-20);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.z-search-modal__empty {
  text-align: center;
  color: var(--z-color-muted);
  padding: var(--z-space-40);
}
.z-search-modal__results {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-12);
}

.z-search-field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--z-space-12);
}
.z-search-field__icon {
  width: 20px;
  height: 20px;
  color: var(--z-color-muted);
  flex-shrink: 0;
}
.z-search-field__input {
  flex: 1;
  border: none;
  font-size: var(--z-fs-18);
  background: transparent;
  outline: none;
  color: var(--z-color-ink);
  padding: 0;
  font-family: inherit;
}
.z-search-field__spinner { flex-shrink: 0; }

.z-search-modal__results {
  list-style: none;
  margin: 0;
  padding: 0;
}
.z-search-result {
  display: block;
  padding: var(--z-space-8) 0;
  border-radius: var(--z-radius-md);
  transition: background-color var(--z-transition-fast);
  list-style: none;
}
.z-search-result:hover { background: var(--z-color-surface-mute); }
.z-search-result__link {
  color: inherit;
  text-decoration: none;
  display: flex;
  gap: var(--z-space-12);
  align-items: flex-start;
  text-align: left;
  padding: var(--z-space-8);
}
.z-search-result__img {
  width: 56px;
  height: 56px;
  border-radius: var(--z-radius-sm);
  object-fit: contain;
  background: var(--z-color-surface-mute);
  flex-shrink: 0;
}
.z-search-result__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--z-space-4);
  min-width: 0;
  text-align: left;
  align-items: flex-start;
}
.z-search-result__name {
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  line-height: var(--z-lh-snug);
  text-align: left;
}
.z-search-result__price {
  font-size: var(--z-fs-13);
  color: var(--z-color-muted);
  text-align: left;
}

/* ============================================================
   USP блок
   ============================================================ */
.z-usp { /* контейнер секции */ }
.z-usp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--z-space-32);
}
@media (min-width: 768px) {
  .z-usp-grid { grid-template-columns: repeat(3, 1fr); }
}
.z-usp__icon {
  width: 56px;
  height: 56px;
  color: var(--z-color-deep);
}
.z-usp__title {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-20, 1.25rem);
  font-weight: var(--z-fw-medium);
  margin: var(--z-space-16) 0 var(--z-space-8);
  color: var(--z-color-ink);
}
.z-usp__text {
  font-size: var(--z-fs-14);
  color: var(--z-color-muted);
  line-height: var(--z-lh-relaxed);
  margin: 0;
}

/* Footer styling moved to layout/footer.css */

/* ============================================================
   Catalog (shop) page
   ============================================================ */
.z-shop { padding-block: var(--z-space-32); }
.z-shop__head { margin-bottom: var(--z-space-32); }
.z-shop__title {
  font-family: var(--z-font-display);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: var(--z-fw-medium);
  margin: 0 0 var(--z-space-16);
  line-height: var(--z-lh-display);
  color: var(--z-color-ink);
}
.z-shop__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--z-space-16);
  padding-block: var(--z-space-16);
  border-block: 1px solid var(--z-color-line);
  margin-bottom: var(--z-space-24);
  flex-wrap: wrap;
}
.z-shop__pagination {
  display: flex;
  justify-content: center;
  gap: var(--z-space-8);
  margin-top: var(--z-space-40);
  flex-wrap: wrap;
}
.z-catalog-wrapper { display: block; }

/* ============================================================
   Single product
   ============================================================ */
.z-product__panel { /* инфопанель */ }
@media (min-width: 1024px) {
  .z-product__panel {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}
.z-product__tabs { margin-top: var(--z-space-40); }
.z-product__tabs-nav {
  display: flex;
  gap: var(--z-space-24);
  border-bottom: 1px solid var(--z-color-line);
  margin-bottom: var(--z-space-24);
  flex-wrap: wrap;
}
.z-product__tab {
  padding-block: var(--z-space-16);
  background: transparent;
  border: none;
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--z-transition-fast), border-color var(--z-transition-fast);
}
.z-product__tab:hover { color: var(--z-color-ink); }
.z-product__tab.is-active {
  color: var(--z-color-ink);
  border-bottom-color: var(--z-color-deep);
}
.z-product__tabs-panels > [x-show] { padding-block: var(--z-space-8); }

.z-product__gallery-slide { display: none; }
.z-product__gallery-slide:first-child,
.z-product__gallery-slide.is-active { display: block; }

/* ============================================================
   Related slider
   ============================================================ */
.z-related {
  display: flex;
  gap: var(--z-space-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--z-space-16);
  scrollbar-width: thin;
}
.z-related__item {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

/* ============================================================
   Add to cart (single product) — qty и кнопка в одной строке.
   Раньше здесь было flex-direction:column + width:100% — это
   ломало layout и растягивало кнопку «В корзину» на всю
   карточку. Реальные правила лежат в layout/product.css.
   ============================================================ */
.z-add-to-cart {
  margin-top: var(--z-space-24);
}

/* ============================================================
   Badges / utilities
   ============================================================ */
.z-badge--new {
  background: var(--z-color-deep);
  color: #fff;
}

/* Стили breadcrumbs перенесены в components/breadcrumbs.css */

.z-burger__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--z-color-ink);
  border-radius: 1px;
}

.z-body,
.z-body--shop { /* hooks для js / без визуала */ }

.z-main { display: block; min-height: 50vh; }

/* ============================================================
   Spinner / skeleton
   ============================================================ */
.z-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--z-radius-full);
  animation: z-spin 600ms linear infinite;
}
@keyframes z-spin {
  to { transform: rotate(360deg); }
}

.z-skeleton--line,
.z-skeleton__line {
  display: block;
  height: 14px;
  background: linear-gradient(90deg, var(--z-color-line) 0%, var(--z-color-surface-alt) 50%, var(--z-color-line) 100%);
  background-size: 200% 100%;
  animation: z-shimmer 1.4s infinite;
  border-radius: var(--z-radius-sm);
}
@keyframes z-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Widget area
   ============================================================ */
.z-widget { margin-bottom: var(--z-space-24); }
.z-widget h2 {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-16);
  font-weight: var(--z-fw-medium);
  margin: 0 0 var(--z-space-12);
  color: var(--z-color-ink);
}


/* === ./components/mobile-bar.css === */
/* ============================================================
   Мобильный нижний бар с свайп-категориями (scroll-snap).
   Виден только на мобиле/планшете, прячется при скролле вверх
   (необязательно — добавим класс is-hidden из JS).
   ============================================================ */

.z-mobilebar {
  display: none;
}

@media (max-width: 1023.98px) {
  .z-mobilebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-z-mobilebar);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
            backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--z-color-line);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    transform: translateY(0);
    transition: transform var(--z-transition-base);
    display: block;
  }
  .z-mobilebar.is-hidden { transform: translateY(110%); }

  /* Резерв под фиксированный mobile-bar делает сам футер
     (см. footer.css). На body padding-bottom не ставим —
     иначе под футером появляется пустая полоса. */
}

.z-mobilebar__scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0 var(--z-container-gutter);
}
.z-mobilebar__scroll::-webkit-scrollbar { display: none; }

.z-mobilebar__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.z-mobilebar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-surface-mute);
  color: var(--z-color-ink);
  font-size: var(--z-fs-13);
  font-weight: var(--z-fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--z-transition-fast);
}
.z-mobilebar__link:hover {
  background: var(--z-color-line);
}
.z-mobilebar__link.is-active {
  background: var(--z-color-ink);
  color: var(--z-color-on-dark);
}
.z-mobilebar__link .z-icon { width: 16px; height: 16px; }


/* === ./components/quiz.css === */
/* ============================================================
   Zabota — Quiz Component
   Минимализм pay.yandex.ru: чистый фон, крупные радиусы,
   тонкая типографика, CTA — глубокий чёрный.
   Использует только токены из base/tokens.css.
   ============================================================ */

/* Скрывает элементы до инициализации Alpine.js */
[x-cloak] {
  display: none !important;
}

/* ── Корневой контейнер ── */
.z-quiz {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--z-space-32) var(--z-space-24);
  background: var(--z-color-surface);
  border-radius: var(--z-radius-xl);
  box-shadow: var(--z-shadow-card);
}

/* ── Прогресс-бар ── */
.z-quiz__progress {
  height: 6px;
  background: var(--z-color-surface-mute);
  border-radius: var(--z-radius-pill);
  overflow: hidden;
  margin-bottom: var(--z-space-32);
}

.z-quiz__progress-bar {
  height: 100%;
  background: var(--z-color-primary);
  border-radius: var(--z-radius-pill);
  transition: width 0.3s var(--z-ease);
}

/* ── Шаг ── */
.z-quiz__step {
  padding-block: var(--z-space-8) var(--z-space-24);
}

/* ── Заголовок вопроса ── */
.z-quiz__question {
  font-size: var(--z-fs-22);
  font-weight: var(--z-fw-bold);
  line-height: var(--z-lh-snug);
  letter-spacing: var(--z-ls-tight);
  color: var(--z-color-ink);
  margin-bottom: var(--z-space-24);
}

@media (min-width: 768px) {
  .z-quiz__question {
    font-size: var(--z-fs-26);
  }
}

/* ── Грид вариантов ── */
.z-quiz__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--z-space-12);
  margin-bottom: var(--z-space-24);
}

@media (min-width: 768px) {
  .z-quiz__options {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Карточка-вариант ── */
.z-quiz__option {
  display: flex;
  align-items: center;
  gap: var(--z-space-12);
  padding: var(--z-space-16) var(--z-space-20);
  background: var(--z-color-surface-alt);
  border: 1.5px solid var(--z-color-line);
  border-radius: var(--z-radius-md);
  font-size: var(--z-fs-15);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition:
    border-color var(--z-transition-base),
    box-shadow var(--z-transition-base),
    transform var(--z-transition-base),
    background var(--z-transition-base);
}

.z-quiz__option:hover {
  border-color: var(--z-color-primary);
  box-shadow: var(--z-shadow-pop);
  transform: translateY(-1px);
  background: var(--z-color-surface);
}

.z-quiz__option:active {
  transform: translateY(0);
  box-shadow: var(--z-shadow-subtle);
}

/* Выбранный вариант */
.z-quiz__option[aria-pressed="true"],
.z-quiz__option.is-selected {
  border-color: var(--z-color-primary);
  background: var(--z-color-surface);
  box-shadow: 0 0 0 2px var(--z-color-primary);
}

/* ── Вариант «Я не знаю» ── */
.z-quiz__option--unknown {
  border-style: dashed;
  border-color: var(--z-color-line-strong);
  color: var(--z-color-mute);
  background: var(--z-color-surface);
}

.z-quiz__option--unknown:hover {
  border-color: var(--z-color-primary);
  color: var(--z-color-ink);
  box-shadow: var(--z-shadow-subtle);
  transform: none;
}

/* ── Поле ввода (шаг 5) ── */
.z-quiz__field {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-8);
  margin-bottom: var(--z-space-24);
}

.z-quiz__field label {
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-mute);
}

.z-quiz__input {
  width: 100%;
  padding: var(--z-space-16) var(--z-space-20);
  background: var(--z-color-surface-alt);
  border: 1.5px solid var(--z-color-line);
  border-radius: var(--z-radius-sm);
  font-size: var(--z-fs-16);
  font-family: var(--z-font-sans);
  color: var(--z-color-ink);
  outline: none;
  transition: border-color var(--z-transition-base), box-shadow var(--z-transition-base);
}

.z-quiz__input::placeholder {
  color: var(--z-color-mute);
}

.z-quiz__input:focus {
  border-color: var(--z-color-primary);
  box-shadow: var(--z-shadow-focus);
  background: var(--z-color-surface);
}

/* ── Каналы связи (грид радио-карточек) ── */
.z-quiz__channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--z-space-8);
  margin-bottom: var(--z-space-24);
}

/* Скрываем нативный input внутри канала */
.z-quiz__channel input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.z-quiz__channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--z-space-6);
  padding: var(--z-space-12) var(--z-space-8);
  background: var(--z-color-surface-alt);
  border: 1.5px solid var(--z-color-line);
  border-radius: var(--z-radius-md);
  font-size: var(--z-fs-13);
  font-weight: var(--z-fw-medium);
  color: var(--z-color-ink);
  cursor: pointer;
  text-align: center;
  transition:
    border-color var(--z-transition-base),
    box-shadow var(--z-transition-base),
    background var(--z-transition-base);
}

.z-quiz__channel:hover {
  border-color: var(--z-color-line-strong);
  background: var(--z-color-surface);
}

/* Выбранный канал через :has() */
.z-quiz__channel:has(input:checked) {
  border-color: var(--z-color-primary);
  background: var(--z-color-surface);
  box-shadow: 0 0 0 2px var(--z-color-primary);
}

/* ── Согласие (чекбокс) ── */
.z-quiz__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--z-space-8);
  margin-bottom: var(--z-space-24);
  font-size: var(--z-fs-12);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-mute);
}

.z-quiz__consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--z-color-primary);
  cursor: pointer;
}

.z-quiz__consent a {
  color: var(--z-color-mute);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.z-quiz__consent a:hover {
  color: var(--z-color-ink);
}

/* ── Ряд кнопок ── */
.z-quiz__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z-space-12);
  padding-top: var(--z-space-8);
}

/* ── Кнопка «Назад» (ghost) ── */
.z-quiz__back {
  display: inline-flex;
  align-items: center;
  gap: var(--z-space-4);
  padding: var(--z-space-8) var(--z-space-12);
  background: transparent;
  border: none;
  border-radius: var(--z-radius-sm);
  font-size: var(--z-fs-14);
  font-weight: var(--z-fw-medium);
  font-family: var(--z-font-sans);
  color: var(--z-color-mute);
  cursor: pointer;
  transition: color var(--z-transition-base), background var(--z-transition-base);
}

.z-quiz__back:hover {
  color: var(--z-color-ink);
  background: var(--z-color-surface-mute);
}

.z-quiz__back:active {
  color: var(--z-color-ink);
}

/* ── Ошибка ── */
.z-quiz__error {
  display: flex;
  align-items: center;
  gap: var(--z-space-8);
  padding: var(--z-space-12) var(--z-space-16);
  background: var(--z-color-danger-soft);
  border-radius: var(--z-radius-xs);
  font-size: var(--z-fs-14);
  color: var(--z-color-danger);
  margin-bottom: var(--z-space-16);
}

/* ── Экран «Спасибо» ── */
.z-quiz__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--z-space-48) var(--z-space-24);
  gap: var(--z-space-16);
}

.z-quiz__done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--z-radius-full);
  background: var(--z-color-success-soft);
  color: var(--z-color-success);
  font-size: 2rem;
}

.z-quiz__done-title {
  font-size: var(--z-fs-22);
  font-weight: var(--z-fw-bold);
  line-height: var(--z-lh-snug);
  color: var(--z-color-ink);
}

.z-quiz__done-text {
  font-size: var(--z-fs-15);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-mute);
  max-width: 400px;
}

@media (min-width: 768px) {
  .z-quiz__done-title {
    font-size: var(--z-fs-26);
  }
}

/* ── Адаптив: мобильные поправки ── */
@media (max-width: 479px) {
  .z-quiz {
    padding: var(--z-space-24) var(--z-space-16);
    border-radius: var(--z-radius-lg);
  }

  .z-quiz__channels {
    grid-template-columns: repeat(2, 1fr);
  }

  .z-quiz__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .z-quiz__back {
    justify-content: center;
  }
}


/* === ./components/projects.css === */
/* ============================================================
   Zabota — Projects (каталог проектов домов)
   Архив /proekty/, карточка проекта, страница проекта.
   Карточка переиспользует .z-card; здесь только специфика.
   Использует только токены из base/tokens.css.
   ============================================================ */

/* ── Архив: шапка ── */
.z-projects__head {
  margin-bottom: var(--z-space-32);
}

.z-projects__title {
  font-size: var(--z-fs-36);
  line-height: var(--z-lh-display);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
  margin: 0 0 var(--z-space-8);
}

.z-projects__lead {
  font-size: var(--z-fs-16);
  color: var(--z-color-muted);
  max-width: 60ch;
  margin: 0;
}

/* ── Архив: фильтры ── */
.z-projects__filters {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-16);
  margin-bottom: var(--z-space-32);
  padding: var(--z-space-20);
  background: var(--z-color-surface-alt);
  border-radius: var(--z-radius-lg);
}

.z-projects__filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--z-space-12);
}

.z-projects__filter-label {
  flex: 0 0 auto;
  min-width: 96px;
  font-size: var(--z-fs-13);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-muted);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-wide);
}

.z-projects__filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Чип-фильтр (если .z-chip ещё не определён глобально — базовый вид) */
.z-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--z-space-6) var(--z-space-16);
  font-size: var(--z-fs-14);
  color: var(--z-color-ink);
  background: var(--z-color-surface);
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-pill);
  text-decoration: none;
  transition: var(--z-transition-fast);
}

.z-chip:hover {
  border-color: var(--z-color-line-strong);
}

.z-chip.is-active {
  color: var(--z-color-primary-on);
  background: var(--z-color-primary);
  border-color: var(--z-color-primary);
}

/* ── Грид проектов ── */
.z-catalog--projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--z-space-24);
}

/* ── Карточка проекта (поверх .z-card) ── */
.z-project-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-8) var(--z-space-16);
  margin: var(--z-space-8) 0 var(--z-space-12);
  padding: 0;
  list-style: none;
}

.z-project-card__spec {
  font-size: var(--z-fs-13);
  color: var(--z-color-muted);
}

.z-project-card__spec-val {
  color: var(--z-color-ink);
  font-weight: var(--z-fw-medium);
}

.z-project-card__price {
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
  margin-bottom: var(--z-space-12);
}

.z-project-card__cta {
  margin-top: auto;
}

.z-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  color: var(--z-color-mute);
  background: var(--z-color-surface-mute);
}

.z-badge--feature {
  background: var(--z-color-accent);
  color: var(--z-color-accent-ink);
}

/* ── Страница проекта ── */
.z-project__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--z-space-16);
  margin-bottom: var(--z-space-24);
}

.z-project__title {
  font-size: var(--z-fs-36);
  line-height: var(--z-lh-display);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-ink);
  margin: 0;
}

.z-project__price {
  font-size: var(--z-fs-26);
  font-weight: var(--z-fw-bold);
  color: var(--z-color-primary);
  white-space: nowrap;
}

.z-project__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--z-space-40);
  align-items: start;
}

@media (max-width: 900px) {
  .z-project__layout {
    grid-template-columns: 1fr;
  }
}

/* Галерея */
.z-project__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--z-space-12);
  margin-bottom: var(--z-space-32);
}

.z-project__gallery-item {
  margin: 0;
  border-radius: var(--z-radius-media);
  overflow: hidden;
  background: var(--z-color-surface-mute);
}

.z-project__gallery-item.is-main {
  grid-column: 1 / -1;
}

.z-project__gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.z-project__content {
  font-size: var(--z-fs-16);
  line-height: var(--z-lh-relaxed);
  color: var(--z-color-text);
}

.z-project__content > * + * {
  margin-top: var(--z-space-16);
}

/* Aside: характеристики + CTA (sticky на десктопе) */
.z-project__aside {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-24);
  position: sticky;
  top: calc(var(--z-header-h) + var(--z-space-24));
}

@media (max-width: 900px) {
  .z-project__aside {
    position: static;
  }
}

.z-project__specs-box,
.z-project__cta {
  padding: var(--z-space-24);
  background: var(--z-color-surface-alt);
  border-radius: var(--z-radius-lg);
}

.z-project__specs-title,
.z-project__cta-title {
  font-size: var(--z-fs-18);
  font-weight: var(--z-fw-semibold);
  color: var(--z-color-ink);
  margin: 0 0 var(--z-space-16);
}

.z-project__specs {
  margin: 0;
}

.z-project__spec-row {
  display: flex;
  justify-content: space-between;
  gap: var(--z-space-16);
  padding: var(--z-space-8) 0;
  border-bottom: 1px solid var(--z-color-line);
  font-size: var(--z-fs-15);
}

.z-project__spec-row:last-child {
  border-bottom: 0;
}

.z-project__spec-row dt {
  color: var(--z-color-muted);
  margin: 0;
}

.z-project__spec-row dd {
  color: var(--z-color-ink);
  font-weight: var(--z-fw-medium);
  margin: 0;
  text-align: right;
}

/* CTA-форма */
.z-project__form {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-12);
}

.z-project__form .z-btn {
  width: 100%;
  justify-content: center;
}

.z-project__form-error {
  font-size: var(--z-fs-13);
  color: var(--z-color-danger);
  margin: 0;
}

.z-project__form-done {
  font-size: var(--z-fs-15);
  color: var(--z-color-success);
  margin: 0;
}

/* Пагинация архива */
.z-projects__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-8);
  justify-content: center;
  margin-top: var(--z-space-40);
}

.z-projects__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--z-space-12);
  justify-content: center;
  border: 1px solid var(--z-color-line);
  border-radius: var(--z-radius-md);
  color: var(--z-color-ink);
  text-decoration: none;
}

.z-projects__pagination .page-numbers.current {
  background: var(--z-color-primary);
  color: var(--z-color-primary-on);
  border-color: var(--z-color-primary);
}

.z-projects__empty {
  padding: var(--z-space-48) 0;
  text-align: center;
  color: var(--z-color-muted);
}