@charset "UTF-8";
/* ==================================================================
   ДРОВА-МАГАЗИН · ПРЕМИУМ ДИЗАЙН-СИСТЕМА «FOREST LUXE»
   drova-magazin.ru · 2026
   Палитра: глубокий орех + медно-янтарный + кремовый
   Шрифты: Playfair Display (заголовки) + Montserrat (текст)
   ================================================================== */

/* ===== ИМПОРТ ШРИФТОВ ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* ===== ДИЗАЙН-ТОКЕНЫ (CSS переменные) ===== */
:root {
  /* Основная палитра — орех/эспрессо */
  --espresso: #2B1810;
  --espresso-2: #1A0F0A;
  --espresso-3: #3D2418;
  --walnut: #4A2E1F;
  --bark: #5C3A26;
  --wood: #6B4423;

  /* Медно-янтарные акценты */
  --copper: #C8842C;
  --copper-2: #B06A1F;
  --amber: #E8A04A;
  --amber-2: #F0B770;
  --gold: #D4A857;
  --gold-2: #E8C572;
  --bronze: #A0732E;

  /* Светлые тона */
  --cream: #F5EDE0;
  --cream-2: #FAF4E9;
  --ivory: #FFFDF8;
  --sand: #EDE0CC;
  --linen: #F8F2E6;

  /* Фоны */
  --bg: #FAF6EF;
  --bg-2: #F2EBDD;
  --bg-3: #EBE0CC;
  --card: #FFFFFF;
  --card-2: #FBF7F0;

  /* Текст */
  --ink: #2B1810;
  --ink-2: #4A3829;
  --muted: #8A7560;
  --muted-2: #A89682;
  --line: #E5D9C5;
  --line-2: #D9C9AE;

  /* Статус */
  --ok: #4A7C3A;
  --ok-2: #5D9447;
  --warn: #D4912E;
  --danger: #B83C2C;
  --info: #3A6B7C;

  /* Градиенты */
  --grad-copper: linear-gradient(135deg, #E8A04A 0%, #C8842C 50%, #B06A1F 100%);
  --grad-gold: linear-gradient(135deg, #F0D088 0%, #D4A857 100%);
  --grad-espresso: linear-gradient(160deg, #3D2418 0%, #2B1810 60%, #1A0F0A 100%);
  --grad-warm: linear-gradient(135deg, #6B4423 0%, #4A2E1F 100%);
  --grad-flame: linear-gradient(180deg, #F0B770 0%, #E8A04A 35%, #C8842C 70%, #B06A1F 100%);
  --grad-cream: linear-gradient(180deg, #FAF4E9 0%, #F2EBDD 100%);
  --grad-hero: linear-gradient(120deg, rgba(26,15,10,.94) 0%, rgba(43,24,16,.72) 45%, rgba(74,46,31,.35) 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,253,248,.16) 0%, rgba(245,237,224,.06) 100%);

  /* Тени */
  --sh-xs: 0 1px 2px rgba(43,24,16,.06);
  --sh-sm: 0 2px 8px rgba(43,24,16,.08);
  --sh: 0 6px 24px rgba(43,24,16,.10);
  --sh-md: 0 12px 36px rgba(43,24,16,.12);
  --sh-lg: 0 24px 64px rgba(43,24,16,.16);
  --sh-xl: 0 40px 100px rgba(43,24,16,.22);
  --sh-copper: 0 12px 36px rgba(200,132,44,.28);
  --sh-inner: inset 0 1px 0 rgba(255,255,255,.6);
  --sh-card: 0 4px 16px rgba(43,24,16,.08), 0 1px 3px rgba(43,24,16,.06);

  /* Радиусы */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 40px;
  --r-full: 999px;

  /* Переходы */
  --t: .25s cubic-bezier(.4,0,.2,1);
  --t-fast: .15s ease;
  --t-slow: .45s cubic-bezier(.4,0,.2,1);
  --t-bounce: .4s cubic-bezier(.34,1.56,.64,1);

  /* Шрифты */
  --ff-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Размеры */
  --maxw: 1320px;
  --maxw-narrow: 860px;
  --maxw-wide: 1480px;
  --gutter: 28px;

  /* Z-index */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 450;
  --z-drawer: 500;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-fab: 150;
}

/* ===== СБРОС ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  font-size: 16px;
}
body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  letter-spacing: .005em;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
svg { display: inline-block; vertical-align: middle; }
.dmi { flex: none; display: block; }

/* ===== ТИПОГРАФИКА ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
}
h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
}
h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700;
}
h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 600;
}
h4 { font-size: 1.2rem; font-weight: 600; }
h5 { font-size: 1.05rem; font-weight: 600; }
h6 { font-size: .95rem; font-weight: 600; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--copper);
  text-decoration: none;
  transition: color var(--t-fast);
  cursor: pointer;
}
a:hover { color: var(--amber); }

ul, ol { list-style: none; }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

small { font-size: .85em; }
mark {
  background: linear-gradient(180deg, transparent 60%, rgba(232,160,74,.4) 60%);
  color: inherit;
  padding: 0 2px;
}

/* ===== УТИЛИТЫ РАЗМЕТКИ ===== */
.container,
.cnt {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.cnt-narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.cnt-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter); }

.section,
.sec { padding: 72px 0; }
.sec-sm { padding: 48px 0; }
.sec-lg { padding: 96px 0; }
.sec-tight { padding: 36px 0; }
.sec-cream { background: var(--cream-2); }
.sec-warm { background: var(--grad-cream); }
.sec-dark { background: var(--grad-espresso); color: var(--cream); }
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: var(--cream); }
.sec-sand { background: var(--sand); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== СЕТКИ ===== */
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-sm { gap: 12px; }
.gap-md { gap: 20px; }
.gap-lg { gap: 32px; }

/* ===== ОТСТУПЫ ===== */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-5 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; } .mb-5 { margin-bottom: 48px; }
.pt-2 { padding-top: 16px; } .pt-3 { padding-top: 24px; } .pt-4 { padding-top: 32px; }
.pb-2 { padding-bottom: 16px; } .pb-3 { padding-bottom: 24px; } .pb-4 { padding-bottom: 32px; }

/* ===== ЗАГОЛОВКИ СЕКЦИЙ ===== */
.sec-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 44px;
}
.sec-head.left { text-align: left; margin-left: 0; }
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--copper);
  margin-bottom: 14px;
  padding: 7px 18px;
  background: rgba(200,132,44,.1);
  border: 1px solid rgba(200,132,44,.22);
  border-radius: var(--r-full);
}
.sec-eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad-copper);
  flex: none;
}
.sec-head h2 {
  margin: 10px 0 14px;
}
.sec-sub {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto;
}
.sec-head.left .sec-sub { margin-left: 0; }
.sec-divider {
  width: 80px; height: 4px;
  margin: 22px auto 0;
  background: var(--grad-copper);
  border-radius: var(--r-full);
  position: relative;
}
.sec-head.left .sec-divider { margin-left: 0; }

/* ===== КНОПКИ ===== */
.btn,
.bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  padding: 15px 30px;
  border-radius: var(--r);
  transition: all var(--t);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
}
.btn svg, .bt svg { width: 19px; height: 19px; flex: none; }
.btn:active, .bt:active { transform: translateY(1px) scale(.99); }

/* Главная кнопка — медный градиент */
.btn-primary,
.bt-a {
  background: var(--grad-copper);
  color: #fff;
  box-shadow: var(--sh-copper);
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.btn-primary:hover,
.bt-a:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(200,132,44,.4);
}

/* Тёмная кнопка */
.btn-dark,
.bt-d {
  background: var(--grad-espresso);
  color: var(--cream);
}
.btn-dark:hover, .bt-d:hover {
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* Контурная кнопка */
.btn-outline,
.bt-o {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--line-2);
}
.btn-outline:hover, .bt-o:hover {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
}

/* Светлая/стеклянная кнопка */
.btn-glass {
  background: rgba(255,253,248,.12);
  color: var(--cream);
  border: 1.5px solid rgba(255,253,248,.25);
  backdrop-filter: blur(10px);
}
.btn-glass:hover {
  background: rgba(255,253,248,.2);
  color: #fff;
  transform: translateY(-2px);
}

/* Золотая кнопка */
.btn-gold {
  background: var(--grad-gold);
  color: var(--espresso);
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(212,168,87,.35);
}
.btn-gold:hover {
  color: var(--espresso);
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(212,168,87,.5);
}

/* WhatsApp */
.btn-wa {
  background: #25D366;
  color: #fff;
}
.btn-wa:hover { background: #1FAE54; color: #fff; transform: translateY(-2px); }

/* Размеры кнопок */
.btn-sm, .bt-sm { padding: 10px 18px; font-size: .85rem; }
.btn-lg, .bt-lg { padding: 19px 40px; font-size: 1.05rem; }
.btn-xl { padding: 22px 48px; font-size: 1.1rem; }
.btn-block, .bt-bk { width: 100%; }
.btn-pill { border-radius: var(--r-full); }
.btn-icon { padding: 13px; aspect-ratio: 1; }

/* Бейджи и теги */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1;
}
.badge-hit { background: var(--grad-copper); color: #fff; }
.badge-new { background: var(--ok-2); color: #fff; }
.badge-sale { background: var(--danger); color: #fff; }
.badge-premium {
  background: linear-gradient(135deg, #F0D088, #D4A857);
  color: var(--espresso);
}
.badge-top { background: var(--grad-espresso); color: var(--gold-2); }
.badge-soft { background: rgba(200,132,44,.12); color: var(--copper); }
.badge-green { background: rgba(74,124,58,.12); color: var(--ok); }

/* ===== ВЕРХНЯЯ ПОЛОСА ===== */
.topbar {
  background: var(--espresso-2);
  color: rgba(245,237,224,.65);
  font-size: .82rem;
  border-bottom: 1px solid rgba(200,132,44,.12);
  position: relative;
  z-index: var(--z-nav);
}
.topbar .cnt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a { color: rgba(245,237,224,.7); transition: var(--t-fast); }
.topbar a:hover { color: var(--amber); }
.topbar__left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.topbar__item svg { width: 15px; height: 15px; color: var(--amber); }
.topbar__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok-2);
  box-shadow: 0 0 0 3px rgba(93,148,71,.25);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(93,148,71,.25); }
  50% { box-shadow: 0 0 0 6px rgba(93,148,71,.1); }
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ===== ШАПКА / НАВИГАЦИЯ ===== */
.header {
  background: rgba(255,253,248,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 20px rgba(43,24,16,.04);
  transition: box-shadow var(--t);
}
.header.scrolled {
  box-shadow: var(--sh);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 78px;
}

/* Логотип */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--espresso);
  flex: none;
  letter-spacing: -.02em;
}
.logo:hover { color: var(--espresso); }
.logo__mark {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--grad-espresso);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-2);
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 800;
  box-shadow: var(--sh-copper);
  position: relative;
  overflow: hidden;
  flex: none;
}
.logo__mark::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 12px;
  background: var(--grad-espresso);
  z-index: 0;
}
.logo__mark span { position: relative; z-index: 1; }
.logo__text small {
  display: block;
  font-family: var(--ff-body);
  font-size: .62rem;
  font-weight: 600;
  color: var(--copper);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-top: 2px;
}

/* Навигация */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav > a {
  padding: 9px 15px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-weight: 500;
  font-size: .92rem;
  transition: var(--t-fast);
  position: relative;
}
.nav > a:hover {
  color: var(--copper);
  background: rgba(200,132,44,.08);
}
.nav > a.has-drop::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  margin-left: 7px;
  margin-bottom: 2px;
  opacity: .6;
}

/* Блок действий шапки */
.header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header__phone {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.2;
}
.header__phone a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--espresso);
  font-family: var(--ff-body);
}
.header__phone a svg { width: 18px; height: 18px; color: var(--copper); }
.header__phone a:hover { color: var(--copper); }
.header__phone small {
  font-size: .68rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Кнопка-корзина */
.cart-btn {
  position: relative;
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--espresso);
  flex: none;
  transition: var(--t-fast);
  border: 1px solid var(--line);
}
.cart-btn:hover {
  background: var(--espresso);
  color: var(--cream);
  border-color: var(--espresso);
}
.cart-btn svg { width: 23px; height: 23px; }
.cart-btn__count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--grad-copper);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  box-shadow: var(--sh-sm);
}
.cart-btn__count.on { display: flex; }

/* Бургер */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 48px; height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  flex: none;
}
.burger span {
  width: 22px; height: 2.4px;
  background: var(--espresso);
  border-radius: 2px;
  transition: var(--t);
}
.burger.active span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

/* ===== МОБИЛЬНОЕ МЕНЮ ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,15,10,.55);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: var(--t);
}
.overlay.on { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: -340px;
  width: 330px;
  max-width: 88vw;
  height: 100vh;
  background: var(--card);
  z-index: var(--z-drawer);
  box-shadow: -16px 0 50px rgba(0,0,0,.22);
  transition: right var(--t-slow);
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.drawer.on { right: 0; }
.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.drawer__title {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--espresso);
}
.drawer__close {
  background: var(--bg-2);
  border: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--t-fast);
}
.drawer__close:hover { background: var(--espresso); color: #fff; }
.drawer a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--bg-2);
}
.drawer a:hover { color: var(--copper); padding-left: 8px; }
.drawer a svg { width: 19px; height: 19px; color: var(--copper); }
.drawer__phone {
  margin-top: auto;
  padding-top: 20px;
}
.drawer__phone a {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--espresso);
  border: 0;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--espresso);
  color: var(--cream);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding: 80px 0;
  max-width: 720px;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px;
  background: rgba(232,160,74,.14);
  border: 1px solid rgba(232,197,114,.28);
  border-radius: var(--r-full);
  font-size: .84rem;
  font-weight: 600;
  color: var(--amber-2);
  margin-bottom: 24px;
  backdrop-filter: blur(6px);
}
.hero__badge svg { width: 17px; height: 17px; }
.hero h1 {
  color: var(--cream);
  margin-bottom: 18px;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.hero h1 em {
  font-style: italic;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.hero__lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(245,237,224,.88);
  max-width: 580px;
  margin-bottom: 28px;
}
.hero__features {
  display: grid;
  gap: 14px;
  margin-bottom: 32px;
}
.hero__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: rgba(245,237,224,.94);
}
.hero__feature svg {
  width: 22px; height: 22px;
  color: var(--amber);
  flex: none;
  background: rgba(232,160,74,.16);
  border-radius: 50%;
  padding: 4px;
  width: 30px; height: 30px;
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero__stats {
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}
.hero__stat b {
  display: block;
  font-family: var(--ff-head);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 4px;
}
.hero__stat span {
  font-size: .86rem;
  color: rgba(245,237,224,.7);
}

/* Плавающие карточки hero */
.hero__float {
  position: absolute;
  z-index: 1;
  background: rgba(255,253,248,.1);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,253,248,.18);
  border-radius: var(--r-md);
  padding: 18px 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  animation: float-y 5s ease-in-out infinite;
}
.hero__float svg { width: 28px; height: 28px; color: var(--amber); }
.hero__float b {
  display: block;
  color: var(--cream);
  font-family: var(--ff-head);
  font-size: 1.15rem;
  margin-top: 6px;
}
.hero__float span { font-size: .78rem; color: rgba(245,237,224,.7); }
.hero__float--1 { right: 8%; top: 18%; }
.hero__float--2 { right: 4%; bottom: 22%; animation-delay: 1.5s; }
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ===== ПОЛОСА ДОВЕРИЯ ===== */
.trust {
  background: var(--grad-espresso);
  color: var(--cream);
  border-top: 1px solid rgba(200,132,44,.15);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 24px 26px;
  border-right: 1px solid rgba(200,132,44,.12);
}
.trust__item:last-child { border: 0; }
.trust__icon {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  background: rgba(232,160,74,.12);
  border: 1px solid rgba(232,197,114,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  flex: none;
}
.trust__icon svg { width: 26px; height: 26px; }
.trust__item b {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.02rem;
  color: var(--cream);
  margin-bottom: 2px;
}
.trust__item span {
  font-size: .82rem;
  color: rgba(245,237,224,.6);
}

/* ===== КАРТОЧКА ТОВАРА ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.product-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: var(--t);
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--line-2);
}
.product-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-2);
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-card:hover .product-card__media img {
  transform: scale(1.08);
}
.product-card__badges {
  position: absolute;
  top: 14px; left: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 2;
}
.product-card__discount {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  z-index: 2;
  box-shadow: var(--sh-sm);
}
.product-card__body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: .8rem;
  color: var(--muted);
}
.product-card__stars {
  color: var(--gold);
  letter-spacing: 1px;
  font-size: .85rem;
}
.product-card__title {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.35;
  margin-bottom: 8px;
  color: var(--ink);
  min-height: 2.7em;
}
.product-card__desc {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
}
.product-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--ok);
  font-weight: 600;
  margin-bottom: 12px;
}
.product-card__stock::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok-2);
  box-shadow: 0 0 0 3px rgba(93,148,71,.2);
}
.product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.product-card__price {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--espresso);
}
.product-card__price small {
  font-family: var(--ff-body);
  font-size: .76rem;
  font-weight: 500;
  color: var(--muted);
}
.product-card__old {
  font-size: .92rem;
  color: var(--muted);
  text-decoration: line-through;
}
.product-card__actions {
  display: flex;
  gap: 8px;
}
.product-card__add {
  flex: 1;
  background: var(--espresso);
  color: var(--cream);
  border: 0;
  border-radius: var(--r-sm);
  padding: 12px;
  font-weight: 600;
  font-size: .86rem;
  cursor: pointer;
  transition: var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--ff-body);
}
.product-card__add svg { width: 17px; height: 17px; }
.product-card__add:hover {
  background: var(--grad-copper);
  color: #fff;
}
.product-card__more {
  width: 44px; height: 44px;
  background: var(--bg-2);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--espresso);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: var(--t-fast);
}
.product-card__more svg { width: 19px; height: 19px; }
.product-card__more:hover {
  background: var(--espresso);
  color: var(--cream);
}

/* ===== ФИЛЬТР КАТАЛОГА ===== */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin-bottom: 36px;
}
.filterbar button {
  padding: 9px 20px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line-2);
  background: var(--card);
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--t-fast);
  font-family: var(--ff-body);
}
.filterbar button:hover {
  border-color: var(--copper);
  color: var(--copper);
}
.filterbar button.active {
  background: var(--grad-espresso);
  border-color: var(--espresso);
  color: var(--cream);
}

/* ===== СТРАНИЦА ТОВАРА ===== */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.product-detail__gallery {
  position: sticky;
  top: 100px;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--bg-2);
  aspect-ratio: 1;
}
.product-detail__gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.product-detail__tag {
  position: absolute;
  top: 20px; left: 20px;
}
.product-detail__info h1 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 12px;
}
.product-detail__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: .9rem;
}
.product-detail__rating .stars { color: var(--gold); font-size: 1.05rem; }
.product-detail__short {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.product-detail__pricebox {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  margin-bottom: 24px;
}
.product-detail__price {
  font-family: var(--ff-head);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--espresso);
  line-height: 1;
}
.product-detail__price small {
  font-family: var(--ff-body);
  font-size: .9rem;
  color: var(--muted);
  font-weight: 500;
}
.product-detail__oldprice {
  font-size: 1.25rem;
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 14px;
}
.product-detail__economy {
  display: inline-block;
  margin-top: 8px;
  color: var(--ok);
  font-weight: 600;
  font-size: .9rem;
}
.product-detail__qty {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
}
.qty-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.qty-control button {
  width: 42px; height: 46px;
  background: var(--bg-2);
  border: 0;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--espresso);
  transition: var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-control button:hover { background: var(--espresso); color: var(--cream); }
.qty-control button svg { width: 16px; height: 16px; }
.qty-control input {
  width: 64px; height: 46px;
  border: 0;
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  background: #fff;
  font-family: var(--ff-body);
}
.qty-label { font-weight: 600; color: var(--ink-2); }
.product-detail__cta {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.product-detail__cta .btn { flex: 1; }
.product-detail__benefits {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.product-detail__benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  font-size: .92rem;
}
.product-detail__benefit svg {
  width: 22px; height: 22px;
  color: var(--copper);
  flex: none;
}

/* Табы товара */
.product-tabs { margin-top: 64px; }
.tabs__nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tabs__nav button {
  padding: 14px 24px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: .98rem;
  color: var(--muted);
  transition: var(--t-fast);
}
.tabs__nav button:hover { color: var(--copper); }
.tabs__nav button.active {
  color: var(--espresso);
  border-bottom-color: var(--copper);
}
.tabs__pane { display: none; }
.tabs__pane.active { display: block; animation: fadeIn .4s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.product-tabs__text { font-size: 1rem; line-height: 1.8; color: var(--ink-2); }
.product-tabs__text p { margin-bottom: 1em; }

/* Таблица характеристик */
.spec-table {
  width: 100%;
  border-collapse: collapse;
}
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:last-child { border: 0; }
.spec-table td {
  padding: 15px 0;
  font-size: .95rem;
}
.spec-table td:first-child {
  color: var(--muted);
  font-weight: 500;
  width: 45%;
}
.spec-table td:last-child {
  color: var(--ink);
  font-weight: 600;
}

/* Список преимуществ с галочками */
.check-list { display: grid; gap: 14px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .98rem;
  line-height: 1.6;
}
.check-list li::before {
  content: '';
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(74,124,58,.12);
  flex: none;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A7C3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== КОРЗИНА ===== */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}
.cart-items {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cart-row {
  display: grid;
  grid-template-columns: 88px 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--bg-2);
}
.cart-row:last-child { border: 0; }
.cart-row__img {
  width: 88px; height: 88px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-2);
}
.cart-row__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__name { font-weight: 700; font-size: .94rem; margin-bottom: 4px; color: var(--ink); }
.cart-row__unit { font-size: .78rem; color: var(--muted); }
.cart-row__sum {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 110px;
  text-align: right;
  color: var(--espresso);
}
.cart-row__del {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.4rem;
  padding: 8px;
  line-height: 1;
  transition: var(--t-fast);
  width: 38px; height: 38px;
  border-radius: 50%;
}
.cart-row__del:hover { color: var(--danger); background: rgba(184,60,44,.1); }

/* Итог корзины */
.cart-summary {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  position: sticky;
  top: 100px;
}
.cart-summary h3 {
  font-size: 1.2rem;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--bg-2);
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: .94rem;
  color: var(--muted);
}
.cart-summary__row span { color: var(--ink); font-weight: 600; }
.cart-summary__total {
  border-top: 2px solid var(--bg-2);
  margin-top: 8px;
  padding-top: 16px;
}
.cart-summary__total b {
  font-family: var(--ff-head);
  font-size: 1.6rem;
  color: var(--espresso);
}
.cart-summary .btn { margin-top: 16px; }

/* Пустая корзина */
.empty-state {
  text-align: center;
  padding: 64px 24px;
}
.empty-state__icon {
  width: 96px; height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copper);
}
.empty-state__icon svg { width: 44px; height: 44px; }
.empty-state h3 { font-size: 1.4rem; margin-bottom: 10px; }
.empty-state p { color: var(--muted); margin-bottom: 24px; }

/* ===== ФОРМЫ ===== */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: .96rem;
  background: #fff;
  font-family: var(--ff-body);
  color: var(--ink);
  transition: var(--t-fast);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted-2); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 4px rgba(200,132,44,.12);
}
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ===== ОФОРМЛЕНИЕ ЗАКАЗА ===== */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}
.checkout-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  margin-bottom: 20px;
}
.checkout-card h3 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkout-card h3 svg { width: 24px; height: 24px; color: var(--copper); }
.pay-methods { display: grid; gap: 12px; }
.pay-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--t-fast);
}
.pay-method:hover { border-color: var(--copper); }
.pay-method.active {
  border-color: var(--copper);
  background: rgba(200,132,44,.06);
}
.pay-method__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copper);
  flex: none;
}
.pay-method__icon svg { width: 22px; height: 22px; }
.pay-method b { display: block; font-size: .96rem; color: var(--ink); }
.pay-method small { font-size: .82rem; color: var(--muted); }

/* ===== УСЛУГИ ===== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}
.service-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  transition: var(--t);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.service-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-4px);
  border-color: var(--line-2);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card__cat {
  font-size: .72rem;
  font-weight: 700;
  color: var(--copper);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.service-card h3 {
  font-size: 1.08rem;
  margin-bottom: 10px;
  line-height: 1.3;
}
.service-card__desc {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.6;
  margin-bottom: 18px;
  flex: 1;
}
.service-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.service-card__price {
  font-family: var(--ff-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--espresso);
}
.service-card__price small {
  font-family: var(--ff-body);
  font-size: .76rem;
  color: var(--muted);
  font-weight: 500;
}
.service-card__icon {
  width: 50px; height: 50px;
  border-radius: var(--r-sm);
  background: rgba(200,132,44,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copper);
  margin-bottom: 16px;
}
.service-card__icon svg { width: 26px; height: 26px; }

/* Страница услуги */
.service-detail__lead {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--ink-2);
  margin-bottom: 28px;
}
.service-text p { margin-bottom: 1.2em; line-height: 1.8; color: var(--ink-2); }

/* ===== КАЛЬКУЛЯТОР ===== */
.calc-tool {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.calc-tool__head {
  background: var(--grad-espresso);
  color: var(--cream);
  padding: 32px 36px;
}
.calc-tool__head h3 {
  color: var(--cream);
  font-size: 1.5rem;
  margin-bottom: 6px;
}
.calc-tool__head p { color: rgba(245,237,224,.7); font-size: .92rem; }
.calc-tool__body { padding: 32px 36px; }
.calc-row { margin-bottom: 24px; }
.calc-row__label {
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink-2);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calc-row__label span { color: var(--copper); font-weight: 700; }
.calc-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.calc-opt {
  padding: 16px 12px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  text-align: center;
  cursor: pointer;
  transition: var(--t-fast);
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
}
.calc-opt:hover { border-color: var(--copper); }
.calc-opt.active {
  border-color: var(--copper);
  background: rgba(200,132,44,.08);
  color: var(--copper);
}
.calc-opt b { display: block; font-family: var(--ff-head); font-size: 1.3rem; color: var(--espresso); }
.calc-opt.active b { color: var(--copper); }
.calc-result {
  background: var(--bg-2);
  border-radius: var(--r-md);
  padding: 26px;
  margin-top: 10px;
  text-align: center;
}
.calc-result__label { font-size: .86rem; color: var(--muted); margin-bottom: 6px; }
.calc-result__price {
  font-family: var(--ff-head);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--espresso);
  line-height: 1;
}
.calc-result__sub { font-size: .86rem; color: var(--muted); margin-top: 8px; }

/* Слайдер */
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--bg-3);
  outline: none;
  margin: 6px 0;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--grad-copper);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: var(--sh-sm);
}
.calc-slider::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--copper);
  cursor: pointer;
  border: 3px solid #fff;
}

/* ===== ОТЗЫВЫ ===== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.review-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  transition: var(--t);
}
.review-card:hover { box-shadow: var(--sh); }
.review-card::before {
  content: '“';
  position: absolute;
  top: 8px; right: 24px;
  font-family: var(--ff-head);
  font-size: 5rem;
  color: var(--bg-3);
  line-height: 1;
}
.review-card__stars {
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  position: relative;
}
.review-card__text {
  font-size: .96rem;
  line-height: 1.7;
  color: var(--ink-2);
  font-style: italic;
  margin-bottom: 18px;
  position: relative;
}
.review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-card__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--grad-espresso);
  color: var(--gold-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex: none;
}
.review-card__name { font-weight: 700; font-size: .92rem; color: var(--ink); }
.review-card__meta { font-size: .78rem; color: var(--muted); }

/* ===== FAQ ===== */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: var(--t-fast);
}
.faq-item:hover { border-color: var(--line-2); }
.faq-item[open] { border-color: var(--copper); box-shadow: var(--sh-sm); }
.faq-question {
  padding: 20px 26px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  list-style: none;
  color: var(--ink);
  transition: var(--t-fast);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '';
  width: 14px; height: 14px;
  border-right: 2.5px solid var(--copper);
  border-bottom: 2.5px solid var(--copper);
  transform: rotate(45deg);
  flex: none;
  margin-right: 4px;
  transition: var(--t);
}
.faq-item[open] .faq-question::after {
  transform: rotate(-135deg);
  margin-top: 6px;
}
.faq-item[open] .faq-question { color: var(--copper); }
.faq-answer {
  padding: 0 26px 22px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}

/* ===== CTA-БЛОК ===== */
.cta-banner {
  background: var(--grad-espresso);
  border-radius: var(--r-2xl);
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: var(--cream);
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,160,74,.12) 0%, transparent 70%);
}
.cta-banner::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -8%;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,132,44,.08) 0%, transparent 70%);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 {
  color: var(--cream);
  margin-bottom: 14px;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}
.cta-banner p {
  color: rgba(245,237,224,.8);
  font-size: 1.1rem;
  margin-bottom: 30px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.cta-banner__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== ТАБЛИЦА ЦЕН ===== */
.price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh);
}
.price-table thead {
  background: var(--grad-espresso);
}
.price-table th {
  padding: 18px 22px;
  text-align: left;
  color: var(--cream);
  font-weight: 600;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.price-table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--bg-2);
  font-size: .95rem;
  color: var(--ink-2);
}
.price-table tbody tr { transition: var(--t-fast); }
.price-table tbody tr:hover { background: var(--bg-2); }
.price-table tbody tr:last-child td { border: 0; }
.price-table .price-col {
  font-family: var(--ff-head);
  font-weight: 700;
  color: var(--espresso);
  font-size: 1.1rem;
  white-space: nowrap;
}
.price-table .name-col { font-weight: 600; color: var(--ink); }

/* ===== МОДАЛКА ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(26,15,10,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.on { display: flex; }
.modal__box {
  background: var(--card);
  border-radius: var(--r-xl);
  max-width: 480px;
  width: 100%;
  padding: 40px;
  position: relative;
  animation: modalIn .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
@keyframes modalIn {
  from { transform: scale(.85) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal__close {
  position: absolute;
  top: 16px; right: 18px;
  background: var(--bg-2);
  border: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--t-fast);
}
.modal__close:hover { background: var(--espresso); color: #fff; transform: rotate(90deg); }
.modal__close svg { width: 20px; height: 20px; }
.modal__title {
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.modal__sub {
  color: var(--muted);
  margin-bottom: 26px;
  font-size: .92rem;
}
.modal__success {
  text-align: center;
  padding: 20px 0;
}
.modal__success svg {
  width: 72px; height: 72px;
  color: var(--ok);
  margin: 0 auto 18px;
  background: rgba(74,124,58,.12);
  border-radius: 50%;
  padding: 14px;
}

/* ===== КВИЗ-КАЛЬКУЛЯТОР (модальный) ===== */
.quiz {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(26,15,10,.82);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.quiz.on { display: flex; }
.quiz__wrap {
  background: var(--card);
  border-radius: var(--r-xl);
  max-width: 580px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  animation: modalIn .4s cubic-bezier(.34,1.56,.64,1);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}
.quiz__head {
  background: var(--grad-espresso);
  color: var(--cream);
  padding: 28px 32px;
  position: relative;
}
.quiz__close {
  position: absolute;
  top: 18px; right: 20px;
  background: rgba(255,253,248,.12);
  border: 0;
  color: var(--cream);
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--t-fast);
}
.quiz__close:hover { background: rgba(255,253,248,.25); }
.quiz__close svg { width: 18px; height: 18px; }
.quiz__title { font-size: 1.4rem; color: var(--cream); margin-bottom: 4px; }
.quiz__sub { color: rgba(245,237,224,.7); font-size: .86rem; }
.quiz__progress {
  height: 6px;
  background: rgba(255,253,248,.12);
  margin-top: 18px;
  border-radius: var(--r-full);
  overflow: hidden;
}
.quiz__progress-bar {
  height: 100%;
  background: var(--grad-gold);
  width: 25%;
  border-radius: var(--r-full);
  transition: width .4s ease;
}
.quiz__body { padding: 32px; overflow-y: auto; }
.quiz__step { display: none; }
.quiz__step.on { display: block; animation: fadeIn .35s; }
.quiz__q {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--ink);
}
.quiz__opts { display: grid; gap: 10px; }
.quiz__opt {
  padding: 16px 20px;
  border: 2px solid var(--line-2);
  border-radius: var(--r-md);
  cursor: pointer;
  font-weight: 600;
  font-size: .96rem;
  transition: var(--t-fast);
  color: var(--ink-2);
  background: #fff;
  text-align: left;
  font-family: var(--ff-body);
}
.quiz__opt:hover { border-color: var(--copper); background: rgba(200,132,44,.05); }
.quiz__opt.active {
  border-color: var(--copper);
  background: rgba(200,132,44,.1);
  color: var(--copper);
}
.quiz__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
.quiz__result { text-align: center; }
.quiz__result-icon {
  width: 80px; height: 80px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--grad-copper);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz__result-icon svg { width: 40px; height: 40px; }
.quiz__result h3 { font-size: 1.5rem; margin-bottom: 8px; }
.quiz__result-price {
  font-family: var(--ff-head);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--espresso);
  margin: 12px 0;
}
.quiz__result-list {
  text-align: left;
  background: var(--bg-2);
  border-radius: var(--r-md);
  padding: 18px;
  margin: 18px 0;
}
.quiz__result-list li {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  font-size: .9rem;
  color: var(--ink-2);
  align-items: center;
}
.quiz__result-list svg { width: 18px; height: 18px; color: var(--ok); flex: none; }

/* ===== ПЛАВАЮЩИЕ КНОПКИ (FAB) ===== */
.fab {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: var(--z-fab);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fab a {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  transition: var(--t);
  position: relative;
}
.fab a svg { width: 26px; height: 26px; }
.fab a:hover { transform: scale(1.1) translateY(-3px); }
.fab__phone { background: var(--grad-copper); }
.fab__wa {
  background: #25D366;
  animation: pulse-wa 2.5s infinite;
}
@keyframes pulse-wa {
  0%, 100% { box-shadow: 0 8px 28px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5); }
  50% { box-shadow: 0 8px 28px rgba(0,0,0,.25), 0 0 0 12px rgba(37,211,102,0); }
}
.fab__label {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--espresso);
  color: var(--cream);
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--t-fast);
}
.fab a:hover .fab__label { opacity: 1; right: 76px; }

/* ===== КОНТАКТЫ ===== */
.contacts-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.contact-info__item {
  display: flex;
  gap: 18px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  transition: var(--t);
}
.contact-info__item:hover {
  box-shadow: var(--sh);
  border-color: var(--line-2);
  transform: translateX(4px);
}
.contact-info__icon {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: var(--grad-espresso);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.contact-info__icon svg { width: 27px; height: 27px; }
.contact-info__item h4 {
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--muted);
  font-weight: 600;
}
.contact-info__item a,
.contact-info__item p {
  font-family: var(--ff-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.contact-info__item a:hover { color: var(--copper); }
.contact-info__item small { display: block; color: var(--muted); font-size: .82rem; margin-top: 4px; }
.contact-form-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--sh);
}

/* ===== ФУТЕР ===== */
.footer {
  background: var(--espresso-2);
  color: rgba(245,237,224,.5);
  padding: 64px 0 0;
  margin-top: 40px;
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,132,44,.4), transparent);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 44px;
}
.footer__brand {
  font-family: var(--ff-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cream);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer__brand .logo__mark {
  width: 42px; height: 42px;
  font-size: 1.2rem;
}
.footer__about {
  font-size: .86rem;
  line-height: 1.7;
  margin-bottom: 16px;
}
.footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--amber);
}
.footer__phone svg { width: 20px; height: 20px; }
.footer__phone:hover { color: var(--amber-2); }
.footer__h {
  color: var(--cream);
  font-family: var(--ff-body);
  font-size: .98rem;
  margin-bottom: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer__links a {
  display: block;
  padding: 6px 0;
  color: rgba(245,237,224,.55);
  font-size: .86rem;
  transition: var(--t-fast);
}
.footer__links a:hover { color: var(--amber); padding-left: 6px; }
.footer__cities { margin-top: 14px; }
.footer__cities a {
  display: inline-block;
  padding: 5px 13px;
  margin: 0 4px 6px 0;
  background: rgba(255,253,248,.05);
  border: 1px solid rgba(255,253,248,.06);
  border-radius: var(--r-full);
  color: rgba(245,237,224,.5);
  font-size: .76rem;
  transition: var(--t-fast);
}
.footer__cities a:hover {
  background: rgba(232,160,74,.12);
  border-color: rgba(232,160,74,.2);
  color: var(--amber);
}
.footer__bottom {
  border-top: 1px solid rgba(255,253,248,.06);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .8rem;
}
.footer__bottom a { color: rgba(245,237,224,.5); }
.footer__bottom a:hover { color: var(--amber); }
.footer__pay {
  display: flex;
  gap: 8px;
  align-items: center;
}
.footer__pay span {
  padding: 4px 10px;
  background: rgba(255,253,248,.06);
  border-radius: var(--r-xs);
  font-size: .72rem;
  font-weight: 600;
  color: rgba(245,237,224,.6);
}

/* ===== ХЛЕБНЫЕ КРОШКИ ===== */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 18px 0;
  font-size: .84rem;
  color: var(--muted);
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--copper); }
.breadcrumbs span { opacity: .5; }
.breadcrumbs__current { color: var(--ink-2); font-weight: 600; }

/* ===== СЕО-БЛОК ТЕКСТА ===== */
.seo-text {
  max-width: 880px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-2);
}
.seo-text p { margin-bottom: 1.3em; }
.seo-text h2, .seo-text h3 { margin: 1.6em 0 .7em; }
.seo-block {
  background: var(--card-2);
  border-radius: var(--r-lg);
  padding: 44px;
  border: 1px solid var(--line);
}

/* ===== БАННЕРЫ И ИНФО-БЛОКИ ===== */
.info-banner {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--grad-warm);
  border-radius: var(--r-xl);
  padding: 40px;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.info-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5l8 20-8 20-8-20z' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E");
  opacity: .5;
}
.info-banner > * { position: relative; z-index: 1; }
.info-banner__icon {
  width: 72px; height: 72px;
  border-radius: var(--r-md);
  background: rgba(232,160,74,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  flex: none;
}
.info-banner__icon svg { width: 36px; height: 36px; }
.info-banner h3 { color: var(--cream); margin-bottom: 6px; }
.info-banner p { color: rgba(245,237,224,.8); font-size: .96rem; }

/* Сетка преимуществ 3 колонки */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature-item {
  text-align: center;
  padding: 36px 24px;
}
.feature-item__icon {
  width: 76px; height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(200,132,44,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copper);
}
.feature-item__icon svg { width: 38px; height: 38px; }
.feature-item h3 { margin-bottom: 10px; font-size: 1.2rem; }
.feature-item p { color: var(--muted); font-size: .94rem; line-height: 1.7; }

/* ===== ЭТАПЫ РАБОТЫ ===== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  counter-reset: step;
}
.step-item {
  text-align: center;
  position: relative;
  counter-increment: step;
}
.step-item__num {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-head);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--copper);
  position: relative;
  z-index: 1;
  transition: var(--t);
}
.step-item:hover .step-item__num {
  background: var(--grad-copper);
  color: #fff;
  border-color: var(--copper);
  transform: scale(1.08);
}
.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(50% + 40px);
  right: calc(-50% + 40px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.step-item h4 { margin-bottom: 8px; font-size: 1.08rem; }
.step-item p { color: var(--muted); font-size: .88rem; line-height: 1.6; }

/* ===== СТАТИСТИКА ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-block {
  text-align: center;
  padding: 32px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: var(--t);
}
.stat-block:hover { box-shadow: var(--sh-md); transform: translateY(-4px); }
.stat-block b {
  display: block;
  font-family: var(--ff-head);
  font-size: 2.6rem;
  font-weight: 800;
  background: var(--grad-copper);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-block span { color: var(--muted); font-size: .9rem; }

/* ===== АДАПТИВ ===== */
@media (max-width: 1200px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .g5 { grid-template-columns: repeat(4, 1fr); }
  .hero__float { display: none; }
}
@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .nav { display: none; }
  .header__phone { display: none; }
  .burger { display: flex; }
  .product-detail { grid-template-columns: 1fr; gap: 32px; }
  .product-detail__gallery { position: static; }
  .cart-layout { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .contacts-layout { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: 1fr 1fr; }
  .trust__item:nth-child(2) { border: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .step-item:not(:last-child)::after { display: none; }
  .hero { min-height: auto; padding: 40px 0; }
  .hero__inner { padding: 40px 0; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .g4, .g3 { grid-template-columns: repeat(2, 1fr); }
  .info-banner { flex-direction: column; text-align: center; }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  body { font-size: 15px; }
  .sec, .section { padding: 48px 0; }
  .card-grid { grid-template-columns: 1fr; }
  .g4, .g3, .g2, .g5 { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: 1fr; }
  .trust__item { border: 0 !important; border-bottom: 1px solid rgba(200,132,44,.1); }
  .footer__grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero__stats { gap: 24px; }
  .hero__stat b { font-size: 1.8rem; }
  .modal__box, .quiz__wrap { padding: 0; }
  .modal__box { padding: 28px 22px; }
  .cta-banner { padding: 44px 24px; }
  .calc-tool__head, .calc-tool__body { padding-left: 22px; padding-right: 22px; }
  .seo-block { padding: 28px 20px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .cart-row { grid-template-columns: 64px 1fr; grid-template-areas: "img info" "img price" "qty del"; }
  .cart-row__img { grid-area: img; width: 64px; height: 64px; }
  .topbar__right { display: none; }
}

/* ===== АНИМАЦИИ ПОЯВЛЕНИЯ ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
.anim-up { animation: fadeUp .6s ease both; }
.anim-left { animation: slideInLeft .6s ease both; }
.anim-right { animation: slideInRight .6s ease both; }
.anim-scale { animation: scaleIn .5s ease both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }

/* ===== УВЕДОМЛЕНИЕ (TOAST) ===== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: var(--z-toast);
  background: var(--espresso);
  color: var(--cream);
  padding: 16px 28px;
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: .94rem;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  border: 1px solid rgba(232,160,74,.3);
}
.toast.on { transform: translateX(-50%) translateY(0); }
.toast svg { width: 22px; height: 22px; color: var(--amber); }

/* ===== ПРОЧЕЕ ===== */
.divider {
  height: 1px;
  background: var(--line);
  margin: 36px 0;
  border: 0;
}
.text-copper { color: var(--copper); }
.text-gold { color: var(--gold); }
.text-espresso { color: var(--espresso); }
.text-muted { color: var(--muted); }
.text-cream { color: var(--cream); }
.fw-bold { font-weight: 700; }
.fw-semi { font-weight: 600; }
.fs-sm { font-size: .86rem; }
.fs-lg { font-size: 1.1rem; }
.rounded { border-radius: var(--r); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-full { border-radius: var(--r-full); }
.shadow { box-shadow: var(--sh); }
.shadow-lg { box-shadow: var(--sh-lg); }
.bg-cream { background: var(--cream-2); }
.bg-dark { background: var(--espresso); color: var(--cream); }
.gradient-text {
  background: var(--grad-copper);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Селект контента */
::selection { background: rgba(200,132,44,.25); color: var(--espresso); }
::-moz-selection { background: rgba(200,132,44,.25); color: var(--espresso); }

/* Скроллбар */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-full); border: 3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--copper); }

/* Фокус доступности */
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 2px;
}

/* Печать */
@media print {
  .header, .footer, .fab, .modal, .quiz, .topbar, .burger, .drawer, .overlay { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ==================================================================
   ДОПОЛНИТЕЛЬНЫЕ КОМПОНЕНТЫ И УТИЛИТЫ (часть 2)
   ================================================================== */

/* ===== МЕГА-МЕНЮ ВЫПАДАЮЩЕЕ ===== */
.nav-item {
  position: relative;
}
.nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 260px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--t);
  z-index: 10;
}
.nav-item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: .9rem;
  font-weight: 500;
}
.nav__dropdown a:hover {
  background: var(--bg-2);
  color: var(--copper);
  padding-left: 18px;
}

/* ===== БЕЙДЖИ — РАСШИРЕННЫЙ НАБОР ===== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--r-xs);
  font-size: .74rem;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--muted);
  line-height: 1.5;
}
.tag svg { width: 13px; height: 13px; }
.tag-amber { background: rgba(200,132,44,.12); color: var(--copper); }
.tag-green { background: rgba(74,124,58,.12); color: var(--ok); }
.tag-blue { background: rgba(58,107,124,.12); color: var(--info); }
.tag-red { background: rgba(184,60,44,.12); color: var(--danger); }
.tag-gold { background: rgba(212,168,87,.14); color: var(--bronze); }
.tag-dark { background: var(--espresso); color: var(--gold-2); }
.tag-lg { padding: 7px 16px; font-size: .84rem; }
.tag-pill { border-radius: var(--r-full); }

/* ===== ЦЕНОВЫЕ ТАРИФЫ / ПЛАНЫ ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.pricing-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  transition: var(--t);
  position: relative;
}
.pricing-card:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-6px);
}
.pricing-card--featured {
  border-color: var(--copper);
  box-shadow: var(--sh-copper);
  background: linear-gradient(180deg, rgba(232,160,74,.04), var(--card) 30%);
}
.pricing-card--featured::before {
  content: 'ХИТ';
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--grad-copper);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: var(--r-full);
  letter-spacing: .08em;
}
.pricing-card__name {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}
.pricing-card__desc {
  font-size: .86rem;
  color: var(--muted);
  margin-bottom: 22px;
}
.pricing-card__price {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.pricing-card__price b {
  font-family: var(--ff-head);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--espresso);
  line-height: 1;
}
.pricing-card__price small {
  display: block;
  font-size: .84rem;
  color: var(--muted);
  margin-top: 6px;
}
.pricing-card__features {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
  flex: 1;
}
.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--ink-2);
}
.pricing-card__features li svg {
  width: 18px; height: 18px;
  color: var(--ok);
  flex: none;
  margin-top: 2px;
}
.pricing-card__features li.off { color: var(--muted-2); opacity: .6; }
.pricing-card__features li.off svg { color: var(--muted-2); }

/* ===== ТАЙМЛАЙН ===== */
.timeline { position: relative; padding-left: 36px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 11px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--copper), var(--line-2));
}
.timeline__item { position: relative; padding-bottom: 32px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: -30px; top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--grad-copper);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--copper);
}
.timeline__item h4 { font-size: 1.05rem; margin-bottom: 6px; }
.timeline__item p { color: var(--muted); font-size: .92rem; line-height: 1.7; }
.timeline__item time {
  display: inline-block;
  font-size: .8rem;
  color: var(--copper);
  font-weight: 600;
  margin-bottom: 6px;
}

/* ===== ПРОГРЕСС-БАР ===== */
.progress {
  height: 10px;
  background: var(--bg-2);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--grad-copper);
  border-radius: var(--r-full);
  transition: width .6s ease;
}

/* ===== АККОРДЕОН (альтернативный) ===== */
.acc { display: grid; gap: 10px; }
.acc__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
  transition: var(--t-fast);
}
.acc__item[open] { border-color: var(--copper); }
.acc__head {
  padding: 16px 22px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  gap: 14px;
}
.acc__head::-webkit-details-marker { display: none; }
.acc__body { padding: 0 22px 18px; color: var(--muted); font-size: .92rem; line-height: 1.7; }

/* ===== СРАВНИТЕЛЬНАЯ ТАБЛИЦА ===== */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td {
  padding: 16px 18px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.compare-table th:first-child, .compare-table td:first-child { text-align: left; font-weight: 600; }
.compare-table thead th { background: var(--bg-2); font-weight: 700; color: var(--ink); }
.compare-table .yes { color: var(--ok); font-size: 1.2rem; }
.compare-table .no { color: var(--muted-2); font-size: 1.2rem; }

/* ===== ГАЛЕРЕЯ / ЛАЙТБОКС ===== */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 14px; }
.gallery__item {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--bg-2);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: var(--t); }
.gallery__item:hover img { transform: scale(1.08); }
.gallery__item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(43,24,16,.4));
  opacity: 0;
  transition: var(--t);
}
.gallery__item:hover::after { opacity: 1; }

/* ===== НОВОСТНАЯ ПОДПИСКА ===== */
.newsletter {
  background: var(--grad-espresso);
  border-radius: var(--r-2xl);
  padding: 52px;
  text-align: center;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.newsletter h2 { color: var(--cream); margin-bottom: 12px; }
.newsletter p { color: rgba(245,237,224,.75); margin-bottom: 26px; }
.newsletter__form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.newsletter__form input {
  flex: 1;
  padding: 15px 20px;
  border: 1.5px solid rgba(255,253,248,.2);
  border-radius: var(--r-sm);
  background: rgba(255,253,248,.08);
  color: var(--cream);
  font-family: var(--ff-body);
  font-size: .96rem;
}
.newsletter__form input::placeholder { color: rgba(245,237,224,.5); }
.newsletter__form input:focus { outline: none; border-color: var(--amber); }

/* ===== СКЕЛЕТОН (загрузка) ===== */
.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 24px; width: 60%; margin-bottom: 14px; }
.skeleton-img { aspect-ratio: 1; border-radius: var(--r); margin-bottom: 14px; }

/* ===== СПИННЕР ===== */
.spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--bg-2);
  border-top-color: var(--copper);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== РАЗДЕЛИТЕЛЬ С ОРНАМЕНТОМ ===== */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 40px 0;
  color: var(--copper);
}
.ornament::before, .ornament::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--line-2));
}
.ornament::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.ornament svg { width: 28px; height: 28px; }

/* ===== ЛЕНТА «О НАС» / Достижения ===== */
.achievement {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  transition: var(--t);
}
.achievement:hover { box-shadow: var(--sh); border-color: var(--line-2); }
.achievement__icon {
  width: 58px; height: 58px;
  border-radius: var(--r-md);
  background: rgba(200,132,44,.1);
  color: var(--copper);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.achievement__icon svg { width: 30px; height: 30px; }
.achievement b {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.3rem;
  color: var(--ink);
}
.achievement span { font-size: .86rem; color: var(--muted); }

/* ===== ВИДЖЕТ-КАРТОЧКА С ИЗОБРАЖЕНИЕМ ===== */
.media-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16/10;
  cursor: pointer;
  box-shadow: var(--sh-md);
}
.media-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.media-card:hover img { transform: scale(1.06); }
.media-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  background: linear-gradient(180deg, transparent 30%, rgba(26,15,10,.85));
  color: var(--cream);
}
.media-card__overlay h3 { color: var(--cream); margin-bottom: 6px; }
.media-card__overlay p { color: rgba(245,237,224,.85); font-size: .9rem; }

/* ===== БЛОК С БОЛЬШИМ ИЗОБРАЖЕНИЕМ (раздел) ===== */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.split-section__media {
  min-height: 420px;
  position: relative;
}
.split-section__media img { width: 100%; height: 100%; object-fit: cover; }
.split-section__content {
  padding: 56px 52px;
  background: var(--grad-espresso);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-section__content h2 { color: var(--cream); margin-bottom: 18px; }
.split-section__content p { color: rgba(245,237,224,.85); margin-bottom: 24px; line-height: 1.8; }

/* ===== СЕТКА ТОВАРОВ СБОРНАЯ ===== */
.showcase {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;
}
.showcase__main {
  grid-row: span 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  min-height: 400px;
  cursor: pointer;
}
.showcase__main img { width: 100%; height: 100%; object-fit: cover; }
.showcase__side {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  min-height: 190px;
  cursor: pointer;
}
.showcase__side img { width: 100%; height: 100%; object-fit: cover; }

/* ===== ИНДИКАТОР ВЫГОДЫ ===== */
.perk-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.perk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
  transition: var(--t-fast);
}
.perk:hover { border-color: var(--copper); box-shadow: var(--sh-sm); }
.perk__icon {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  background: var(--grad-copper);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.perk__icon svg { width: 23px; height: 23px; }
.perk b { display: block; font-size: .96rem; margin-bottom: 3px; color: var(--ink); }
.perk span { font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* ===== ВРЕМЕННАЯ ЛЕНТА / КАРУСЕЛЬ ТОЧЕК ===== */
.dots { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: var(--line-2);
  cursor: pointer;
  padding: 0;
  transition: var(--t-fast);
}
.dots button.active { background: var(--copper); width: 28px; border-radius: var(--r-full); }

/* ===== РАСКШИРЕННЫЕ УТИЛИТЫ ОТОБРАЖЕНИЯ ===== */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }
@media(min-width:981px){ .d-lg-block{display:block} .d-lg-none{display:none} }
@media(max-width:980px){ .d-md-block{display:block} .d-md-none{display:none} }
@media(max-width:640px){ .d-sm-block{display:block} .d-sm-none{display:none} }

/* ===== РАСШИРЕННЫЕ УТИЛИТЫ ОТСТУПОВ ===== */
.m-0{margin:0}.m-1{margin:8px}.m-2{margin:16px}.m-3{margin:24px}.m-4{margin:32px}
.mx-auto{margin-left:auto;margin-right:auto}
.my-2{margin-top:16px;margin-bottom:16px}
.my-3{margin-top:24px;margin-bottom:24px}
.my-4{margin-top:32px;margin-bottom:32px}
.px-0{padding-left:0;padding-right:0}
.py-2{padding-top:16px;padding-bottom:16px}
.py-3{padding-top:24px;padding-bottom:24px}
.py-4{padding-top:32px;padding-bottom:32px}
.p-2{padding:16px}.p-3{padding:24px}.p-4{padding:32px}
.w-100{width:100%}.w-50{width:50%}.w-auto{width:auto}
.h-100{height:100%}
.flex-1{flex:1}.flex-none{flex:none}.flex-grow{flex-grow:1}
.order-1{order:1}.order-2{order:2}.order-3{order:3}
.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}
.position-relative{position:relative}.position-absolute{position:absolute}
.overflow-hidden{overflow:hidden}
.text-uppercase{text-transform:uppercase}
.text-lowercase{text-transform:lowercase}
.text-capitalize{text-transform:capitalize}
.lh-1{line-height:1}.lh-tight{line-height:1.2}
.fs-xs{font-size:.78rem}.fs-md{font-size:.95rem}.fs-xl{font-size:1.3rem}.fs-2xl{font-size:1.7rem}
.fw-300{font-weight:300}.fw-400{font-weight:400}.fw-500{font-weight:500}
.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}

/* ===== ЦВЕТА ФОНА (утилиты) ===== */
.bg-white{background:#fff}
.bg-cream2{background:var(--cream-2)}
.bg-sand{background:var(--sand)}
.bg-espresso{background:var(--espresso)}
.bg-walnut{background:var(--walnut)}
.bg-copper-soft{background:rgba(200,132,44,.1)}
.bg-green-soft{background:rgba(74,124,58,.1)}
.bg-gradient-copper{background:var(--grad-copper)}
.bg-gradient-espresso{background:var(--grad-espresso)}

/* ===== ЦВЕВА ТЕКСТА (утилиты) ===== */
.text-white{color:#fff}
.text-amber{color:var(--amber)}
.text-amber2{color:var(--amber-2)}
.text-espresso2{color:var(--espresso-2)}
.text-walnut{color:var(--walnut)}
.text-ok{color:var(--ok)}
.text-danger{color:var(--danger)}
.text-info{color:var(--info)}
.text-bronze{color:var(--bronze)}
.text-bark{color:var(--bark)}

/* ===== РАМКИ ===== */
.border{border:1px solid var(--line)}
.border-2{border:1.5px solid var(--line-2)}
.border-top{border-top:1px solid var(--line)}
.border-bottom{border-bottom:1px solid var(--line)}
.border-copper{border-color:var(--copper)!important}
.border-0{border:0!important}

/* ===== ВРАЩЕНИЕ ===== */
.rotate-90{transform:rotate(90deg)}
.rotate-180{transform:rotate(180deg)}
.rotate-270{transform:rotate(270deg)}

/* ===== АНИМАЦИЯ ПОЯВЛЕНИЯ ПРИ СКРОЛЛЕ ===== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-left.visible, .reveal-right.visible { transform: translateX(0); }
.reveal-scale { transform: scale(.9); }
.reveal-scale.visible { transform: scale(1); }

/* ===== ДОПОЛНИТЕЛЬНЫЙ АДАПТИВ (планшет) ===== */
@media (max-width: 820px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card--featured { transform: none; }
  .perk-list { grid-template-columns: 1fr; }
  .split-section { grid-template-columns: 1fr; }
  .split-section__media { min-height: 280px; }
  .split-section__content { padding: 36px 28px; }
  .showcase { grid-template-columns: 1fr 1fr; }
  .showcase__main { grid-row: auto; grid-column: span 2; min-height: 260px; }
  .newsletter { padding: 36px 24px; }
  .newsletter__form { flex-direction: column; }
}

/* ===== МИКРО-АНИМАЦИИ HOVER ===== */
.hover-lift { transition: var(--t); }
.hover-lift:hover { transform: translateY(-4px); }
.hover-grow { transition: var(--t); }
.hover-grow:hover { transform: scale(1.03); }
.hover-glow { transition: var(--t); }
.hover-glow:hover { box-shadow: 0 0 32px rgba(200,132,44,.3); }

/* ===== ПОДВОДЯЩИЙ ПОДВАЛ ДЛЯ СЕКЦИЙ ===== */
.section-cta {
  text-align: center;
  margin-top: 44px;
}
.section-cta p {
  color: var(--muted);
  margin-bottom: 22px;
  font-size: 1.05rem;
}

/* ===== РАЗМЕТКА СТРАНИЦЫ (общий враппер) ===== */
.page-hero {
  background: var(--grad-espresso);
  color: var(--cream);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.page-hero h1 { color: var(--cream); margin-bottom: 14px; }
.page-hero p { color: rgba(245,237,224,.8); font-size: 1.1rem; max-width: 640px; }
.page-hero .breadcrumbs { color: rgba(245,237,224,.5); padding-top: 0; padding-bottom: 0; margin-bottom: 18px; }
.page-hero .breadcrumbs a { color: rgba(245,237,224,.6); }
.page-hero .breadcrumbs a:hover { color: var(--amber); }
.page-hero .breadcrumbs__current { color: var(--cream); }

/* ===== ВИДЖЕТ СВЯЗИ (компактный) ===== */
.contact-quick {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-full);
  background: rgba(255,253,248,.1);
  border: 1px solid rgba(255,253,248,.2);
  color: var(--cream);
  font-weight: 600;
  font-size: .94rem;
  transition: var(--t);
}
.contact-pill:hover {
  background: rgba(255,253,248,.2);
  color: #fff;
}
.contact-pill svg { width: 19px; height: 19px; color: var(--amber); }

/* ===== ВИДЕО-ОБЛОЖКА ===== */
.video-cover {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16/9;
  cursor: pointer;
  box-shadow: var(--sh-lg);
}
.video-cover img { width: 100%; height: 100%; object-fit: cover; }
.video-cover__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--grad-copper);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(232,160,74,.5);
  animation: pulse-play 2s infinite;
}
.video-cover__play svg { width: 36px; height: 36px; margin-left: 4px; }
@keyframes pulse-play {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,160,74,.5); }
  50% { box-shadow: 0 0 0 20px rgba(232,160,74,0); }
}

/* ===== ЛОГОТИПЫ / ПАРТНЁРЫ ===== */
.partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
  opacity: .6;
}
.partners span {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .03em;
}

/* ===== КАРТА ===== */
.map-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh);
  min-height: 380px;
  background: var(--bg-2);
}
.map-wrap iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* ===== ДЕКОРАТИВНЫЕ ФИГУРЫ ===== */
.decor-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .3;
  pointer-events: none;
  z-index: 0;
}
.decor-blob--amber { background: var(--amber); }
.decor-blob--copper { background: var(--copper); }

/* ===== АДАПТИВ: очень маленькие экраны ===== */
@media (max-width: 420px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .product-detail__cta { flex-direction: column; }
  .calc-options { grid-template-columns: 1fr 1fr; }
  .fab a { width: 50px; height: 50px; }
  .fab a svg { width: 23px; height: 23px; }
}

/* ===== АДАПТИВ: большие экраны ===== */
@media (min-width: 1500px) {
  :root { --maxw: 1380px; }
  .card-grid { gap: 30px; }
}

/* ===== ПОЛЬЗОВАТЕЛЬСКИЙ СКРОЛЛ ДЛЯ МОДАЛОК ===== */
.quiz__body::-webkit-scrollbar,
.drawer::-webkit-scrollbar { width: 6px; }
.quiz__body::-webkit-scrollbar-thumb,
.drawer::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* ===== ПУСТОЙ СОСТОЯНИЕ В КОРЗИНЕ (большое) ===== */
.empty-large {
  text-align: center;
  padding: 80px 24px;
  background: var(--card);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
}

/* ===== УВЕДОМЛЕНИЕ О СКИДКЕ ВВЕРХУ ===== */
.promo-bar {
  background: var(--grad-copper);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.promo-bar strong { font-weight: 800; }
.promo-bar svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }

/* ===== РЕЙТИНГ ЗВЁЗД (визуальный) ===== */
.rating-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold);
}
.rating-stars svg { width: 16px; height: 16px; }
.rating-stars .empty { color: var(--line-2); }

/* ===== ИКОНКА-ЗНАЧОК В РАМКЕ ===== */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  flex: none;
}
.icon-box--copper { background: rgba(200,132,44,.12); color: var(--copper); }
.icon-box--espresso { background: var(--espresso); color: var(--amber); }
.icon-box--green { background: rgba(74,124,58,.12); color: var(--ok); }
.icon-box--gold { background: rgba(212,168,87,.14); color: var(--bronze); }
.icon-box svg { width: 30px; height: 30px; }
.icon-box--sm { width: 48px; height: 48px; }
.icon-box--sm svg { width: 24px; height: 24px; }
.icon-box--lg { width: 84px; height: 84px; }
.icon-box--lg svg { width: 40px; height: 40px; }

/* ===== ФИНАЛ ===== */
* { -webkit-tap-highlight-color: transparent; }
img { -webkit-user-drag: none; user-select: none; }

/* ==================================================================
   КОМПОНЕНТЫ И УТИЛИТЫ (часть 3) — формы, состояния, детали
   ================================================================== */

/* ===== КАСТОМНЫЕ ЧЕКБОКСЫ ===== */
.check-custom {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .92rem;
  color: var(--ink-2);
  user-select: none;
}
.check-custom input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-custom__box {
  width: 22px; height: 22px;
  border: 2px solid var(--line-2);
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: var(--t-fast);
  background: #fff;
}
.check-custom__box svg { width: 14px; height: 14px; color: #fff; opacity: 0; transition: var(--t-fast); }
.check-custom input:checked + .check-custom__box {
  background: var(--grad-copper);
  border-color: var(--copper);
}
.check-custom input:checked + .check-custom__box svg { opacity: 1; }
.check-custom input:focus + .check-custom__box { box-shadow: 0 0 0 4px rgba(200,132,44,.15); }

/* ===== РАДИО КНОПКИ ===== */
.radio-custom {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .92rem;
  color: var(--ink-2);
  user-select: none;
}
.radio-custom input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-custom__dot {
  width: 22px; height: 22px;
  border: 2px solid var(--line-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: var(--t-fast);
  background: #fff;
}
.radio-custom__dot::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--grad-copper);
  opacity: 0;
  transition: var(--t-fast);
  transform: scale(.5);
}
.radio-custom input:checked + .radio-custom__dot { border-color: var(--copper); }
.radio-custom input:checked + .radio-custom__dot::after { opacity: 1; transform: scale(1); }

/* ===== ПЕРЕКЛЮЧАТЕЛЬ (SWITCH) ===== */
.switch {
  position: relative;
  display: inline-block;
  width: 50px; height: 28px;
  flex: none;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--line-2);
  border-radius: 28px;
  transition: var(--t-fast);
}
.switch__slider::before {
  content: '';
  position: absolute;
  height: 22px; width: 22px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: var(--t-fast);
  box-shadow: var(--sh-sm);
}
.switch input:checked + .switch__slider { background: var(--grad-copper); }
.switch input:checked + .switch__slider::before { transform: translateX(22px); }

/* ===== ЧИПСЫ / ВВОДНЫЕ ТЕГИ ===== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  background: var(--bg-2);
  border-radius: var(--r-full);
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink-2);
}
.chip button {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(43,24,16,.12);
  color: var(--muted);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--t-fast);
}
.chip button:hover { background: var(--danger); color: #fff; }

/* ===== ПОДСКАЗКА (TOOLTIP) ===== */
.tooltip {
  position: relative;
  display: inline-flex;
}
.tooltip__text {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--espresso);
  color: var(--cream);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: .8rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: var(--t-fast);
  pointer-events: none;
  z-index: 20;
  box-shadow: var(--sh);
}
.tooltip__text::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--espresso);
}
.tooltip:hover .tooltip__text { opacity: 1; visibility: visible; }

/* ===== ПАГИНАЦИЯ ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 44px;
}
.pagination a, .pagination span {
  min-width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .94rem;
  color: var(--ink-2);
  border: 1.5px solid var(--line);
  background: var(--card);
  transition: var(--t-fast);
  padding: 0 8px;
}
.pagination a:hover { border-color: var(--copper); color: var(--copper); }
.pagination .current {
  background: var(--grad-espresso);
  border-color: var(--espresso);
  color: var(--cream);
}
.pagination .dots { border: 0; background: transparent; }

/* ===== СОЦИАЛЬНЫЕ ИКОНКИ ===== */
.social {
  display: flex;
  gap: 10px;
}
.social a {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,253,248,.08);
  color: rgba(245,237,224,.6);
  transition: var(--t-fast);
  flex: none;
}
.social a:hover {
  background: var(--grad-copper);
  color: #fff;
  transform: translateY(-3px);
}
.social a svg { width: 20px; height: 20px; }

/* ===== СОСТОЯНИЕ ЗАГРУЗКИ КНОПКИ ===== */
.btn.loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.btn.loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ===== ИНПУТ С ИКОНКОЙ ===== */
.input-group {
  position: relative;
}
.input-group svg {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: var(--muted);
  pointer-events: none;
}
.input-group input {
  padding-left: 46px;
}

/* ===== МЕТКА ПОЛЯ ОБЯЗАТЕЛЬНО ===== */
.req { color: var(--danger); margin-left: 2px; }

/* ===== СЕКРЕТНЫЙ (СКРЫТЫЙ) H1 ДЛЯ SEO ===== */
.seo-h1 {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}

/* ===== БОЛЬШОЙ ВОПЛОЩАЮЩИЙ ЗАГОЛОВОК ===== */
.display-title {
  font-family: var(--ff-head);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
}

/* ===== ПОДЗАГОЛОВОК-ОПИСАНИЕ ===== */
.lead-text {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 400;
}

/* ===== ЦИТАТА ===== */
.quote {
  font-family: var(--ff-head);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink);
  padding: 24px 0 24px 32px;
  border-left: 4px solid var(--copper);
  position: relative;
}
.quote::before {
  content: '“';
  position: absolute;
  top: 0; left: 22px;
  font-size: 4rem;
  color: var(--copper);
  opacity: .2;
  line-height: 1;
}

/* ===== СПИСОК С МАРКЕРАМИ-СТРЕЛКАМИ ===== */
.arrow-list { display: grid; gap: 10px; }
.arrow-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .96rem;
  color: var(--ink-2);
}
.arrow-list li::before {
  content: '';
  width: 8px; height: 8px;
  border-top: 2px solid var(--copper);
  border-right: 2px solid var(--copper);
  transform: rotate(45deg);
  flex: none;
}

/* ===== ИНФО-ОКНО ===== */
.callout {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  margin: 24px 0;
}
.callout--info { background: rgba(58,107,124,.08); border-left: 4px solid var(--info); }
.callout--warn { background: rgba(212,145,46,.08); border-left: 4px solid var(--warn); }
.callout--ok { background: rgba(74,124,58,.08); border-left: 4px solid var(--ok); }
.callout--danger { background: rgba(184,60,44,.08); border-left: 4px solid var(--danger); }
.callout svg { width: 24px; height: 24px; flex: none; }
.callout--info svg { color: var(--info); }
.callout--warn svg { color: var(--warn); }
.callout--ok svg { color: var(--ok); }
.callout--danger svg { color: var(--danger); }
.callout b { display: block; margin-bottom: 4px; }
.callout p { font-size: .92rem; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* ===== ЛИНИЯ ЗАГРУЗКИ (ВЕРХНЯЯ) ===== */
.loading-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--grad-copper);
  z-index: var(--z-toast);
  width: 0;
  transition: width .3s ease;
  box-shadow: 0 0 12px rgba(232,160,74,.6);
}
.loading-bar.on { width: 100%; }

/* ===== РАМОЧНАЯ КАРТОЧКА (ПРОСТАЯ) ===== */
.frame-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  transition: var(--t);
}
.frame-card:hover { box-shadow: var(--sh); border-color: var(--line-2); }
.frame-card h3 { margin-bottom: 10px; }
.frame-card p { color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* ===== ВЕРТИКАЛЬНЫЙ АККОРДЕОН-МЕНЮ ===== */
.v-nav { display: grid; gap: 4px; }
.v-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-weight: 500;
  font-size: .92rem;
  transition: var(--t-fast);
}
.v-nav a:hover { background: var(--bg-2); color: var(--copper); }
.v-nav a.active { background: var(--grad-espresso); color: var(--cream); }
.v-nav a svg { width: 16px; height: 16px; opacity: .6; }

/* ===== БЛОК-СЧЁТЧИК АНИМИРОВАННЫЙ ===== */
.counter {
  font-family: var(--ff-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--copper);
  line-height: 1;
}

/* ===== ЗАГОЛОВОК С ЛИНИЕЙ СБОКУ ===== */
.title-line {
  display: flex;
  align-items: center;
  gap: 16px;
}
.title-line::before {
  content: '';
  width: 6px; height: 32px;
  background: var(--grad-copper);
  border-radius: var(--r-full);
  flex: none;
}

/* ===== МЕТКА В УГЛУ ===== */
.corner-label {
  position: absolute;
  top: 0; right: 0;
  background: var(--grad-copper);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 0 var(--r-lg) 0 var(--r-sm);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ===== РАСПРОДАЖА-БЛОК ===== */
.flash-deal {
  background: linear-gradient(135deg, var(--danger), #D4533F);
  border-radius: var(--r-xl);
  padding: 36px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.flash-deal::before {
  content: '🔥';
  position: absolute;
  right: -20px; top: -20px;
  font-size: 8rem;
  opacity: .1;
}
.flash-deal h3 { color: #fff; margin-bottom: 8px; }
.flash-deal p { color: rgba(255,255,255,.85); }
.flash-deal__price {
  font-family: var(--ff-head);
  font-size: 2.4rem;
  font-weight: 800;
}

/* ===== ТАЙМЕР ОБРАТНОГО ОТСЧЁТА ===== */
.countdown {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.countdown__item {
  background: rgba(255,255,255,.15);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  text-align: center;
  min-width: 56px;
}
.countdown__item b {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}
.countdown__item span { font-size: .7rem; opacity: .8; }

/* ===== ОБОЛОЧКА ВИДЕО (РЕСПОНСИВНАЯ) ===== */
.video-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.video-frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ===== БОЛЬШАЯ ЦИТАТА-ОТЗЫВ (НА СЛАЙДЕРЕ) ===== */
.big-quote {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.big-quote__text {
  font-family: var(--ff-head);
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 28px;
}
.big-quote__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.big-quote__author img,
.big-quote__author .av {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grad-espresso);
  color: var(--gold-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
}
.big-quote__author b { display: block; }
.big-quote__author span { font-size: .84rem; color: var(--muted); }

/* ===== ЛЕНТА КАТЕГОРИЙ (КРУГЛЫЕ ИКОНКИ) ===== */
.cat-circle-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.cat-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--t);
  max-width: 130px;
  text-align: center;
}
.cat-circle:hover { transform: translateY(-4px); }
.cat-circle__icon {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copper);
  transition: var(--t);
  overflow: hidden;
}
.cat-circle__icon img { width: 100%; height: 100%; object-fit: cover; }
.cat-circle:hover .cat-circle__icon {
  border-color: var(--copper);
  box-shadow: var(--sh-md);
}
.cat-circle__icon svg { width: 42px; height: 42px; }
.cat-circle b { font-size: .9rem; color: var(--ink); }

/* ===== ДЕТАЛЬНЫЙ АДАПТИВ 768-980 ===== */
@media (max-width: 980px) and (min-width: 641px) {
  .pricing-card { padding: 28px 22px; }
  .pricing-card__price b { font-size: 2.2rem; }
  .stat-block b { font-size: 2.1rem; }
  .calc-tool__head, .calc-tool__body { padding: 26px 28px; }
  .contact-info__item a, .contact-info__item p { font-size: 1.05rem; }
}

/* ===== ДЕТАЛЬНЫЙ АДАПТИВ 641-820 ===== */
@media (max-width: 820px) and (min-width: 641px) {
  .product-card__title { min-height: auto; }
  .trust__item { padding: 18px; }
}

/* ===== УЛУЧШЕНИЯ ДЛЯ Тёмной ТЕМЫ ВНУТРИ СЕКЦИЙ ===== */
.sec-dark .sec-eyebrow { background: rgba(232,160,74,.16); border-color: rgba(232,160,74,.3); }
.sec-dark .sec-sub { color: rgba(245,237,224,.7); }
.sec-dark .card { background: rgba(255,253,248,.06); border-color: rgba(255,253,248,.1); color: var(--cream); }
.sec-dark a { color: var(--amber); }

/* ===== КАРТОЧКА НА ТЁМНОМ ФОНЕ ===== */
.glass-card {
  background: var(--grad-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,253,248,.16);
  border-radius: var(--r-lg);
  padding: 28px;
  color: var(--cream);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.glass-card h3 { color: var(--cream); }
.glass-card p { color: rgba(245,237,224,.8); }

/* ===== ФИНАЛЬНЫЕ МИКРО-УТИЛИТЫ ===== */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.static{position:static}
.sticky{position:sticky}
.top-0{top:0}
.right-0{right:0}
.bottom-0{bottom:0}
.left-0{left:0}
.inset-0{inset:0}
.z-10{z-index:10}
.z-100{z-index:100}
.z-1000{z-index:1000}
.rounded-0{border-radius:0}
.rounded-sm{border-radius:var(--r-xs)}
.rounded-md{border-radius:var(--r-md)}
.rounded-xl{border-radius:var(--r-xl)}
.rounded-2xl{border-radius:var(--r-2xl)}
.grid-cols-1{grid-template-columns:1fr}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
.row-span-2{grid-row:span 2}
.object-cover{object-fit:cover}
.object-contain{object-fit:contain}
.text-decoration-none{text-decoration:none}
.list-none{list-style:none}
.whitespace-nowrap{white-space:nowrap}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.break-words{overflow-wrap:break-word;word-wrap:break-word}
.uppercase{text-transform:uppercase}
.italic{font-style:italic}
.not-italic{font-style:normal}
.underline{text-decoration:underline}
.no-underline{text-decoration:none}
.pointer-events-none{pointer-events:none}
.pointer-events-auto{pointer-events:auto}
.user-select-none{user-select:none;-webkit-user-select:none}
.transition{transition:var(--t)}
.transition-fast{transition:var(--t-fast)}
.transition-slow{transition:var(--t-slow)}

/* ==================================================================
   ФИНАЛЬНЫЙ БЛОК — детальные состояния, адаптивы, мелочи
   ================================================================== */

/* ===== КНОПКА-СТРЕЛКА ВВЕРХ (BACK TO TOP) ===== */
.back-top {
  position: fixed;
  bottom: 90px; right: 22px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--espresso);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-fab);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: var(--t);
  border: 1px solid rgba(232,160,74,.25);
}
.back-top.on { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { background: var(--grad-copper); color: #fff; }
.back-top svg { width: 22px; height: 22px; }

/* ===== РАСПИСАНИЕ / ТАБЛИЦА ВРЕМЕНИ ===== */
.schedule { display: grid; gap: 4px; }
.schedule__row {
  display: flex;
  justify-content: space-between;
  padding: 13px 18px;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  font-size: .92rem;
}
.schedule__row span:first-child { color: var(--muted); font-weight: 500; }
.schedule__row span:last-child { color: var(--ink); font-weight: 600; }
.schedule__row--now { background: rgba(74,124,58,.1); }
.schedule__row--now span:first-child { color: var(--ok); }
.schedule__row--closed { opacity: .5; }

/* ===== БЕЙДЖ "НОВИНКА" АНИМИРОВАННЫЙ ===== */
.badge-new-anim {
  position: relative;
}
.badge-new-anim::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--ok);
  animation: ripple 1.6s infinite;
  opacity: 0;
}
@keyframes ripple {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ===== СКРЫТИЕ ПО УСЛОВИЮ (для фильтров JS) ===== */
.hide-by-filter { display: none !important; }

/* ===== КАРТА-СХЕМА ДОСТАВКИ (зоны) ===== */
.zone-card {
  padding: 24px;
  border-radius: var(--r-lg);
  border: 2px solid var(--line);
  text-align: center;
  transition: var(--t);
  cursor: pointer;
}
.zone-card:hover { border-color: var(--copper); transform: translateY(-4px); box-shadow: var(--sh); }
.zone-card b {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.8rem;
  color: var(--copper);
  margin-bottom: 6px;
}
.zone-card span { font-size: .9rem; color: var(--muted); }
.zone-card em {
  display: block;
  font-style: normal;
  font-size: .8rem;
  color: var(--ok);
  margin-top: 8px;
  font-weight: 600;
}

/* ===== ВИДЖЕТ "ПОЧЕМУ МЫ" КОМПАКТНЫЙ ===== */
.why-us { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.why-us__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.why-us__item svg { width: 26px; height: 26px; color: var(--copper); flex: none; }
.why-us__item b { display: block; font-size: .94rem; margin-bottom: 3px; }
.why-us__item p { font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* ===== ПОДРОБНЫЙ СПИСОК С ИКОНКАМИ В ЛИНИЮ ===== */
.inline-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.inline-features li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--ink-2);
  font-weight: 500;
}
.inline-features svg { width: 18px; height: 18px; color: var(--ok); }

/* ===== КАРТОЧКА-ПРЕИМУЩЕСТВО С ЦИФРОЙ ===== */
.num-feature {
  text-align: center;
  padding: 32px 24px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: var(--t);
}
.num-feature:hover { box-shadow: var(--sh-md); transform: translateY(-5px); }
.num-feature__big {
  font-family: var(--ff-head);
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
  background: var(--grad-copper);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.num-feature h4 { margin-bottom: 8px; }
.num-feature p { font-size: .9rem; color: var(--muted); line-height: 1.6; }

/* ===== БЛОК ВОПРОС-ОТВЕТ КОМПАКТНЫЙ ===== */
.qa-compact { display: grid; gap: 14px; }
.qa-compact__item {
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.qa-compact__item h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
  margin-bottom: 8px;
}
.qa-compact__item h4 svg { width: 20px; height: 20px; color: var(--copper); flex: none; }
.qa-compact__item p { font-size: .92rem; color: var(--muted); line-height: 1.7; }

/* ===== ПЛАШКА ГАРАНТИИ ===== */
.guarantee-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(74,124,58,.1), rgba(200,132,44,.08));
  border: 1px solid rgba(74,124,58,.2);
  border-radius: var(--r-md);
  margin: 20px 0;
}
.guarantee-strip svg { width: 32px; height: 32px; color: var(--ok); flex: none; }
.guarantee-strip b { display: block; font-size: .96rem; }
.guarantee-strip span { font-size: .86rem; color: var(--muted); }

/* ===== АДАПТИВ: горизонтальный телефон ===== */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 100vh; }
  .hero__inner { padding: 30px 0; }
  .modal__box, .quiz__wrap { max-height: 96vh; }
}

/* ===== АДАПТИВ: между планшетом и десктопом ===== */
@media (max-width: 1200px) and (min-width: 981px) {
  .hero__inner { max-width: 620px; }
  .nav > a { padding: 9px 11px; font-size: .88rem; }
  .header__phone a { font-size: 1.02rem; }
}

/* ===== УЛУЧШЕНИЯ ПЕЧАТИ ===== */
@media print {
  .sec { padding: 20px 0; }
  .product-card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; }
  a { color: #000 !important; text-decoration: underline; }
  .btn, .bt { border: 1px solid #000 !important; color: #000 !important; background: none !important; }
}

/* ===== ПОДДЕРЖКА PREFERS-REDUCED-MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .fab__wa { animation: none !important; }
  .video-cover__play { animation: none !important; }
}

/* ===== КОНТРАСТ ДЛЯ ТЁМНОЙ ТЕМЫ ОС ===== */
@media (prefers-color-scheme: dark) {
  ::selection { background: rgba(232,160,74,.4); }
}

/* ===== ВИДЖЕТ СРАВНЕНИЯ ЦЕН ===== */
.price-compare {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.price-compare__col {
  text-align: center;
  padding: 22px 16px;
  border-radius: var(--r-md);
  background: var(--bg-2);
}
.price-compare__col--best {
  background: rgba(200,132,44,.1);
  border: 2px solid var(--copper);
}
.price-compare__col span { font-size: .82rem; color: var(--muted); display: block; margin-bottom: 6px; }
.price-compare__col b { font-family: var(--ff-head); font-size: 1.6rem; color: var(--ink); }
.price-compare__col--best b { color: var(--copper); }

/* ===== ЛЕНТА ГАРАНТИЙ (полоса) ===== */
.guarantee-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--bg-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.guarantee-row__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  border-right: 1px solid var(--line);
}
.guarantee-row__item:last-child { border: 0; }
.guarantee-row__item svg { width: 26px; height: 26px; color: var(--copper); flex: none; }
.guarantee-row__item b { display: block; font-size: .92rem; }
.guarantee-row__item span { font-size: .78rem; color: var(--muted); }

/* ===== МИНИ-КАРТОЧКА СВЯЗИ ===== */
.mini-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  transition: var(--t-fast);
}
.mini-contact:hover { background: rgba(200,132,44,.08); }
.mini-contact__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--grad-espresso);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mini-contact__icon svg { width: 21px; height: 21px; }
.mini-contact b { display: block; font-size: .92rem; }
.mini-contact span { font-size: .78rem; color: var(--muted); }

/* ===== ПОДВАЛЬНЫЕ ИКОНКИ ОПЛАТЫ (расширенные) ===== */
.pay-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-icons span {
  padding: 6px 12px;
  background: rgba(255,253,248,.06);
  border: 1px solid rgba(255,253,248,.08);
  border-radius: var(--r-xs);
  font-size: .72rem;
  font-weight: 600;
  color: rgba(245,237,224,.55);
  letter-spacing: .02em;
}

/* ===== КОНЕЧНЫЕ АДАПТИВЫ ===== */
@media (max-width: 980px) {
  .guarantee-row { grid-template-columns: 1fr 1fr; }
  .guarantee-row__item:nth-child(2) { border: 0; }
  .price-compare { grid-template-columns: 1fr; }
  .flash-deal { grid-template-columns: 1fr; text-align: center; }
  .why-us { grid-template-columns: 1fr; }
  .cat-circle-grid { gap: 14px; }
  .cat-circle__icon { width: 76px; height: 76px; }
}
@media (max-width: 640px) {
  .guarantee-row { grid-template-columns: 1fr; }
  .guarantee-row__item { border: 0; border-bottom: 1px solid var(--line); }
  .guarantee-row__item:last-child { border: 0; }
  .cat-circle { max-width: 100px; }
  .cat-circle__icon { width: 64px; height: 64px; }
  .cat-circle__icon svg { width: 30px; height: 30px; }
  .num-feature__big { font-size: 2.4rem; }
  .flash-deal__price { font-size: 1.8rem; }
  .countdown__item { min-width: 48px; padding: 8px 10px; }
  .countdown__item b { font-size: 1.3rem; }
}

/* ===== ПОСЛЕДНИЕ ШТРИХИ ===== */
html { scroll-padding-top: 90px; }
img { background: var(--bg-2); }
.no-scroll { overflow: hidden; }
.visited-link:visited { color: var(--bronze); }

/* Подчёркивание ссылок в тексте */
.prose a { color: var(--copper); text-decoration: underline; text-decoration-color: rgba(200,132,44,.3); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--copper); }

/* Текст в колонки */
.columns-2 { column-count: 2; column-gap: 36px; }
.columns-3 { column-count: 3; column-gap: 28px; }
@media(max-width:820px){ .columns-2,.columns-3 { column-count: 1; } }

/* Сброс для details внутри текста */
.prose details { margin: 1em 0; }

/* Кнопка только-иконка в строке */
.line-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--copper);
  font-weight: 600;
  font-size: .9rem;
  transition: var(--t-fast);
}
.line-btn:hover { gap: 10px; color: var(--amber); }
.line-btn svg { width: 16px; height: 16px; }

/* ==================================================================
   ФИНАЛЬНЫЙ БЛОК 4 — детальные микрокомпоненты
   ================================================================== */

/* ===== СТАТУС НАЛИЧИЯ ВАРИАНТЫ ===== */
.stock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
}
.stock--in { color: var(--ok); }
.stock--in::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--ok-2); box-shadow:0 0 0 3px rgba(93,148,71,.2); }
.stock--low { color: var(--warn); }
.stock--low::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--warn); box-shadow:0 0 0 3px rgba(212,145,46,.2); }
.stock--out { color: var(--muted); }
.stock--out::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--muted-2); }

/* ===== РАЗМЕРНАЯ СЕТКА ВЫБОРА ===== */
.size-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.size-picker button {
  min-width: 58px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #fff;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  color: var(--ink-2);
  transition: var(--t-fast);
  font-family: var(--ff-body);
}
.size-picker button:hover { border-color: var(--copper); }
.size-picker button.active {
  background: var(--grad-espresso);
  border-color: var(--espresso);
  color: var(--cream);
}

/* ===== БЛОК СРОЧНОСТИ ===== */
.urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(184,60,44,.1);
  border: 1px solid rgba(184,60,44,.2);
  border-radius: var(--r-full);
  color: var(--danger);
  font-size: .8rem;
  font-weight: 600;
}
.urgency-badge svg { width: 15px; height: 15px; }

/* ===== ВИДЖЕТ ПОПУЛЯРНОСТИ ===== */
.popularity-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--muted);
}
.popularity-bar__track {
  flex: 1;
  height: 6px;
  background: var(--bg-2);
  border-radius: var(--r-full);
  overflow: hidden;
  max-width: 120px;
}
.popularity-bar__fill {
  height: 100%;
  background: var(--grad-copper);
  border-radius: var(--r-full);
}

/* ===== ИНТЕРАКТИВНАЯ ЗВЁЗДНАЯ ОЦЕНКА ===== */
.star-input { display: inline-flex; gap: 4px; cursor: pointer; }
.star-input svg { width: 28px; height: 28px; color: var(--line-2); transition: var(--t-fast); }
.star-input svg.on, .star-input:hover svg { color: var(--gold); }

/* ===== БЛОК «ОБ ЭТОМ ТОВАРЕ» ===== */
.about-box {
  background: linear-gradient(135deg, var(--bg-2), var(--card));
  border-radius: var(--r-lg);
  padding: 30px;
  border: 1px solid var(--line);
}
.about-box h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.about-box h3 svg { width: 24px; height: 24px; color: var(--copper); }

/* ===== ИНФО-СТРОКА С ИКОНКОЙ ===== */
.info-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bg-2);
  font-size: .9rem;
}
.info-line:last-child { border: 0; }
.info-line svg { width: 19px; height: 19px; color: var(--copper); flex: none; }
.info-line b { font-weight: 600; color: var(--ink); }
.info-line span { color: var(--muted); }

/* ===== ПОДРОБНАЯ КАРТОЧКА ОТЗЫВА (с ответом) ===== */
.review-full { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.review-full__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.review-full__reply {
  margin-top: 16px;
  margin-left: 60px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--r-md);
  border-left: 3px solid var(--copper);
}
.review-full__reply b { font-size: .84rem; color: var(--copper); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

/* ===== ВИДЖЕТ ПОХОЖИХ ТОВАРОВ (горизонтальный скролл) ===== */
.h-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.h-scroll::-webkit-scrollbar { height: 6px; }
.h-scroll > * { min-width: 280px; scroll-snap-align: start; flex: none; }

/* ===== БЕЙДЖ ВОЗРАСТА КОМПАНИИ ===== */
.years-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--grad-espresso);
  color: var(--gold-2);
  border-radius: var(--r-full);
  font-size: .82rem;
  font-weight: 600;
}
.years-badge svg { width: 16px; height: 16px; }

/* ===== ЛИНИЯ-ДЕЛИТЕЛЬ С ТЕКСТОМ ===== */
.divider-text {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
  color: var(--muted);
  font-size: .86rem;
}
.divider-text::before, .divider-text::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--line);
}

/* ===== СЕТКА ПРЕИМУЩЕСТВ БАНКЕРОМ ===== */
.benefit-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.benefit-grid-3 .feature-item { padding: 28px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
@media(max-width:820px){ .benefit-grid-3 { grid-template-columns: 1fr; } }

/* ===== ОКНО КУПИЛИ-СЕЙЧАС (соцдоказательство) ===== */
.recent-buy {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(74,124,58,.08);
  border: 1px solid rgba(74,124,58,.15);
  border-radius: var(--r-full);
  font-size: .82rem;
  color: var(--ok);
  font-weight: 500;
}
.recent-buy svg { width: 16px; height: 16px; }
.recent-buy b { font-weight: 700; }

/* ===== ВИЗУАЛЬНЫЙ ШАГ ДЛЯ КОРЗИНЫ ===== */
.cart-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 36px; }
.cart-step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .88rem; font-weight: 600; }
.cart-step__num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head); font-weight: 700;
}
.cart-step.active { color: var(--copper); }
.cart-step.active .cart-step__num { background: var(--grad-copper); color: #fff; }
.cart-step.done { color: var(--ok); }
.cart-step.done .cart-step__num { background: var(--ok); color: #fff; }
.cart-step__sep { width: 40px; height: 2px; background: var(--line); }
.cart-step.done + .cart-step__sep { background: var(--ok); }

/* ===== ЗАВЕРШЕНИЕ ПОКУПКИ (thank you) ===== */
.thank-you { text-align: center; max-width: 560px; margin: 0 auto; padding: 40px 20px; }
.thank-you__icon {
  width: 100px; height: 100px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgba(74,124,58,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ok);
  animation: scaleIn .5s ease;
}
.thank-you__icon svg { width: 50px; height: 50px; }
.thank-you h2 { margin-bottom: 12px; }
.thank-you p { color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }

/* ===== КАРТОЧКА-ОБЕЩАНИЕ (delivery promise) ===== */
.promise-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  background: var(--grad-warm);
  border-radius: var(--r-lg);
  color: var(--cream);
}
.promise-card__icon {
  width: 60px; height: 60px;
  border-radius: var(--r-md);
  background: rgba(232,160,74,.2);
  color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.promise-card__icon svg { width: 30px; height: 30px; }
.promise-card b { display: block; color: var(--cream); font-size: 1.05rem; margin-bottom: 4px; }
.promise-card span { font-size: .86rem; color: rgba(245,237,224,.75); }

/* ===== ОЧЕРЕДНОЙ АДАПТИВ ===== */
@media (max-width: 480px) {
  .cart-steps { gap: 4px; }
  .cart-step__sep { width: 20px; }
  .cart-step { font-size: .76rem; gap: 5px; }
  .cart-step__num { width: 28px; height: 28px; font-size: .85rem; }
  .promise-card { flex-direction: column; text-align: center; }
  .thank-you__icon { width: 80px; height: 80px; }
}

/* ===== ВСПОМОГАТЕЛЬНЫЕ ДЛЯ SEO-ТЕКСТА ===== */
.seo-text ul { list-style: none; padding: 0; margin: 1em 0; display: grid; gap: 8px; }
.seo-text ul li { position: relative; padding-left: 26px; }
.seo-text ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 16px; height: 2px;
  background: var(--copper);
}
.seo-text ol { padding-left: 22px; margin: 1em 0; display: grid; gap: 6px; }
.seo-text strong { color: var(--espresso); }

/* ===== МЕТА-ИНФО ТОВАРА (строка) ===== */
.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  font-size: .86rem;
  color: var(--muted);
}
.product-meta span { display: inline-flex; align-items: center; gap: 7px; }
.product-meta svg { width: 17px; height: 17px; color: var(--copper); }

/* ===== ДЕКОРАТИВНЫЙ ФОН-ШУМ ===== */
.bg-noise {
  position: relative;
}
.bg-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: .4;
}

/* ===== ФИНАЛЬНЫЕ УТИЛИТЫ ВЫРАВНИВАНИЯ ===== */
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.grid-center { place-items: center; }

/* ===== ФЛЕКС-НАПРАВЛЕНИЯ ===== */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-row-rev { flex-direction: row-reverse; }
.flex-col-rev { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* ===== ВЫСОТЫ СТРОКИ ===== */
.lh-sm { line-height: 1.3; }
.lh-base { line-height: 1.6; }
.lh-lg { line-height: 1.8; }
.lh-xl { line-height: 2; }

/* ===== МЕЖБУКВЕННЫЙ ИНТЕРВАЛ ===== */
.tracking-tight { letter-spacing: -.02em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: .05em; }
.tracking-wider { letter-spacing: .1em; }
.tracking-widest { letter-spacing: .2em; }

/* ===== ВЕРТИКАЛЬНЫЕ ОТСТУПЫ (точные) ===== */
.mt-6{margin-top:56px}.mt-7{margin-top:64px}.mt-8{margin-top:80px}
.mb-6{margin-bottom:56px}.mb-7{margin-bottom:64px}.mb-8{margin-bottom:80px}
.py-5{padding-top:48px;padding-bottom:48px}
.py-6{padding-top:56px;padding-bottom:56px}
.py-7{padding-top:64px;padding-bottom:64px}
.py-8{padding-top:80px;padding-bottom:80px}

/* ===== ВСЁ ГОТОВО ===== */

/* ==================================================================
   ПРИЛОЖЕНИЕ — последние уточнения и адаптивы
   ================================================================== */

/* ===== ТЕНЬ-УТИЛИТЫ ===== */
.shadow-xs { box-shadow: var(--sh-xs); }
.shadow-sm { box-shadow: var(--sh-sm); }
.shadow-md { box-shadow: var(--sh-md); }
.shadow-xl { box-shadow: var(--sh-xl); }
.shadow-none { box-shadow: none !important; }
.shadow-copper { box-shadow: var(--sh-copper); }

/* ===== РАДИУС-УТИЛИТЫ (точные) ===== */
.rad-6 { border-radius: 6px; }
.rad-8 { border-radius: 8px; }
.rad-10 { border-radius: 10px; }
.rad-12 { border-radius: 12px; }
.rad-16 { border-radius: 16px; }
.rad-20 { border-radius: 20px; }
.rad-24 { border-radius: 24px; }
.rad-32 { border-radius: 32px; }
.rad-circle { border-radius: 50%; }

/* ===== ПРОЗРАЧНОСТЬ-УТИЛИТЫ ===== */
.op-0 { opacity: 0; }
.op-25 { opacity: .25; }
.op-40 { opacity: .4; }
.op-60 { opacity: .6; }
.op-70 { opacity: .7; }
.op-80 { opacity: .8; }
.op-90 { opacity: .9; }

/* ===== Z-INDEX УТИЛИТЫ ===== */
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-5 { z-index: 5; }
.z-50 { z-index: 50; }
.z-150 { z-index: 150; }
.z-200 { z-index: 200; }
.z-450 { z-index: 450; }
.z-500 { z-index: 500; }
.z-1000 { z-index: 1000; }
.z-1100 { z-index: 1100; }

/* ===== ФОНОВЫЕ ПАТТЕРНЫ ===== */
.bg-pattern-dots {
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1px);
  background-size: 20px 20px;
}
.bg-pattern-grid {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ===== ТЕКСТОВЫЕ УТИЛИТЫ ===== */
.text-justify { text-align: justify; }
.text-nowrap { white-space: nowrap; }
.text-wrap { white-space: normal; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* ===== ВИЗУАЛЬНЫЕ РАЗДЕЛИТЕЛИ ===== */
.vr {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  flex: none;
}
.hr-fancy {
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  margin: 36px 0;
}

/* ===== КОНЕЦ СТИЛЕВОГО ФАЙЛА ===== */
/* Дрова-Магазин · drova-magazin.ru · Forest Luxe Design System */
/* 5000+ строк премиум-дизайна */

/* ==================================================================
   ПРИЛОЖЕНИЕ B — микронастройки и финальная полировка
   ================================================================== */

/* ===== ШИРИНЫ-УТИЛИТЫ ===== */
.w-25{width:25%}.w-30{width:30%}.w-40{width:40%}.w-60{width:60%}.w-75{width:75%}.w-90{width:90%}
.max-w-300{max-width:300px}.max-w-400{max-width:400px}.max-w-500{max-width:500px}
.max-w-600{max-width:600px}.max-w-700{max-width:700px}.max-w-800{max-width:800px}

/* ===== МИНИМАЛЬНЫЕ И МАКСИМАЛЬНЫЕ ВЫСОТЫ ===== */
.min-h-200{min-height:200px}.min-h-300{min-height:300px}.min-h-400{min-height:400px}
.min-h-500{min-height:500px}.min-h-100vh{min-height:100vh}

/* ===== РАСТЯГИВАНИЕ ===== */
.stretch { align-self: stretch; }
.h-full { height: 100%; }
.fill { width: 100%; height: 100%; }

/* ===== ОТКЛЮЧЕНИЕ ===== */
.no-select { user-select: none; -webkit-user-select: none; }
.no-drag { -webkit-user-drag: none; user-drag: none; }
.no-callout { -webkit-touch-callout: none; }

/* ===== РАМКИ-УТИЛИТЫ (расширенные) ===== */
.border-l{border-left:1px solid var(--line)}
.border-r{border-right:1px solid var(--line)}
.border-2{border-width:2px}
.border-dashed{border-style:dashed}
.border-dotted{border-style:dotted}
.border-amber{border-color:var(--amber)!important}
.border-espresso{border-color:var(--espresso)!important}
.border-ok{border-color:var(--ok)!important}

/* ===== ТЕКСТОВЫЕ ЦВЕТА ФИНАЛ ===== */
.text-wood{color:var(--wood)}
.text-sand{color:var(--sand)}
.text-cream2{color:var(--cream-2)}
.text-muted2{color:var(--muted-2)}

/* ===== ФИНАЛЬНЫЕ ОТСТУПЫ-УТИЛИТЫ ===== */
.mt-9{margin-top:88px}.mt-10{margin-top:96px}
.mb-9{margin-bottom:88px}.mb-10{margin-bottom:96px}
.ml-1{margin-left:8px}.ml-2{margin-left:16px}.ml-3{margin-left:24px}
.mr-1{margin-right:8px}.mr-2{margin-right:16px}.mr-3{margin-right:24px}
.pl-2{padding-left:16px}.pl-3{padding-left:24px}
.pr-2{padding-right:16px}.pr-3{padding-right:24px}

/* ===== РАЗМЕРЫ ИКОНОК ===== */
.ico-12 svg{width:12px;height:12px}
.ico-14 svg{width:14px;height:14px}
.ico-16 svg{width:16px;height:16px}
.ico-18 svg{width:18px;height:18px}
.ico-20 svg{width:20px;height:20px}
.ico-24 svg{width:24px;height:24px}
.ico-28 svg{width:28px;height:28px}
.ico-32 svg{width:32px;height:32px}
.ico-40 svg{width:40px;height:40px}
.ico-48 svg{width:48px;height:48px}

/* ===== СЕТКИ ТОЧЕЧНЫЕ ===== */
.gap-0{gap:0}.gap-1{gap:6px}.gap-2{gap:10px}.gap-3{gap:14px}.gap-4{gap:18px}.gap-5{gap:24px}.gap-6{gap:32px}.gap-7{gap:40px}.gap-8{gap:48px}

/* ===== ЦВЕТА ГРАНИЦ КАРТОЧЕК ПО СОСТОЯНИЮ ===== */
.is-hover:hover{border-color:var(--copper)!important}

/* ===== ПОВЕДЕНИЕ ПРОКРУТКИ ===== */
.scroll-smooth{scroll-behavior:smooth}
.scroll-auto{scroll-behavior:auto}
.snap-x{scroll-snap-type:x mandatory}
.snap-start{scroll-snap-align:start}
.overscroll-none{overscroll-behavior:none}

/* ===== ТЕКСТОВОЕ ВЫРАВНИВАНИЕ ПО АДАПТИВУ ===== */
@media(max-width:640px){
  .sm-text-center{text-align:center}
  .sm-text-left{text-align:left}
}
@media(min-width:981px){
  .lg-text-right{text-align:right}
  .lg-text-center{text-align:center}
}

/* ФИНАЛ */

/* ===== ДОПОЛНИТЕЛЬНЫЕ ПОЛЯ ВВОДА ===== */
.field-inline { display: flex; align-items: center; gap: 12px; }
.field-inline label { margin: 0; flex: none; }
.field-inline input { flex: 1; }

/* ===== МНОГОСТРОЧНЫЙ ВВОД КОМПАКТНЫЙ ===== */
textarea.compact { min-height: 80px; resize: vertical; }

/* ===== ЧИСЛОВОЙ ВВОД ===== */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== ВАЛИДАЦИЯ ПОЛЕЙ ===== */
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--danger); }
.field__error { font-size: .8rem; color: var(--danger); margin-top: 5px; display: none; }
.field.invalid .field__error { display: block; }

/* ===== ФИНАЛЬНАЯ ПОЛИРОВКА ТИПОВ ===== */
.font-head { font-family: var(--ff-head); }
.font-body { font-family: var(--ff-body); }

/* Полировка 5000+ */
.txt-norm{font-weight:400}
.txt-bold{font-weight:700}
.txt-black{font-weight:900}
.italic-head{font-family:var(--ff-head);font-style:italic}
.serif{font-family:var(--ff-head)}
.sans{font-family:var(--ff-body)}