/* ================================================================
   ДИГАС — Ритуальные услуги
   style.css — Mobile First, Premium Design
   ================================================================ */

/* ── CUSTOM PROPERTIES ──────────────────────────────────────── */
:root {
  /* Palette */
  --c-bg:          #0c0c0e;
  --c-bg-2:        #111114;
  --c-bg-3:        #18181d;
  --c-surface:     #1e1e24;
  --c-surface-2:   #26262e;
  --c-border:      rgba(201,169,110,.15);
  --c-border-2:    rgba(255,255,255,.07);

  --c-gold:        #c9a96e;
  --c-gold-light:  #dfc08a;
  --c-gold-dim:    rgba(201,169,110,.12);
  --c-gold-glow:   rgba(201,169,110,.35);

  --c-text:        #f0ede8;
  --c-text-2:      #a8a49f;
  --c-text-3:      #6b6865;
  --c-white:       #ffffff;

  --c-red:         #c0392b;
  --c-green:       #2ecc71;

  /* Typography */
  --f-serif:   'Oswald', 'Arial Narrow', sans-serif;
  --f-sans:    'Oswald', 'Arial Narrow', sans-serif;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* Radius */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.35);
  --shadow-md:   0 8px 32px rgba(0,0,0,.5);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.6);
  --shadow-gold: 0 8px 32px rgba(201,169,110,.25);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-base:   300ms ease;
  --t-slow:   600ms cubic-bezier(.25,.46,.45,.94);

  /* Layout */
  --max-w:   1280px;
  --header-h: 60px;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  display: block;
  font-family: var(--f-sans);
  font-weight: 300;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: clip; /* prevents horizontal scroll without breaking position:sticky */
  letter-spacing: .01em;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-gold); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-gold-light); }
button { font-family: var(--f-sans); cursor: pointer; border: none; background: none; }
input, textarea { font-family: var(--f-sans); }
ul, ol { list-style: none; }
svg { flex-shrink: 0; }

/* ── UTILITY ────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.section { padding: var(--space-2xl) 0; }
.section--dark { background: var(--c-bg-2); }
.section--accent { background: var(--c-bg-3); }

/* Force all top-level sections to stack vertically — defensive rule */
.hero, .usp-bar, .categories, .featured, .services, .howworks,
.promo-strip, .testimonials, .cta-band, .faq, .contacts {
  display: block;
  width: 100%;
  float: none;
  clear: both;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
.section-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--space-sm);
}
.section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.section-header--light .section-title,
.section-header--light .section-desc { color: var(--c-text); }
.section-title {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-text);
  margin-bottom: var(--space-md);
  word-break: break-word;
  overflow-wrap: break-word;
}
.section-title--light { color: var(--c-white); }
.section-desc {
  font-size: .95rem;
  color: var(--c-text-2);
  max-width: 560px;
  margin: 0 auto;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  border-radius: var(--r-full);
  transition: all var(--t-base);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.06);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.btn:hover::after { opacity: 1; }

.btn--gold {
  background: linear-gradient(135deg, var(--c-gold) 0%, #a8833d 100%);
  color: #0c0c0e;
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(201,169,110,.45);
  color: #0c0c0e;
}

.btn--outline {
  background: transparent;
  border: 1.5px solid var(--c-border);
  color: var(--c-text);
}
.btn--outline:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

.btn--outline-light {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.25);
  color: var(--c-text);
}
.btn--outline-light:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

.btn--sm { padding: 10px 20px; font-size: .82rem; }
.btn--lg { padding: 18px 36px; font-size: 1rem; }
.btn--full { width: 100%; justify-content: center; }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: var(--r-full);
}
.badge--hit  { background: var(--c-gold-dim); color: var(--c-gold); border: 1px solid var(--c-gold); }
.badge--sale { background: rgba(192,57,43,.15); color: #e74c3c; border: 1px solid rgba(192,57,43,.4); }
.badge--new  { background: rgba(46,204,113,.12); color: #2ecc71; border: 1px solid rgba(46,204,113,.35); }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes a-force-reveal {
  to { opacity: 1; transform: none; }
}
[data-animate] {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.25,.46,.45,.94),
              transform .7s cubic-bezier(.25,.46,.45,.94);
}
[data-animate].will-animate {
  opacity: 0;
  transform: translateY(24px);
  /* CSS-фоллбек: если JS не добавит is-visible — показать через 0.8с */
  animation: a-force-reveal 0.6s cubic-bezier(.25,.46,.45,.94) 0.8s forwards;
}
[data-animate="fade-left"].will-animate { transform: translateX(40px); }
[data-animate].is-visible {
  opacity: 1;
  transform: none;
  /* JS сработал — отменяем CSS-анимацию, показываем сразу */
  animation: none;
}

/* ── HEADER ─────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow var(--t-base), background var(--t-base);
}
.site-header.is-scrolled {
  background: rgba(12,12,14,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
}

.header-top {
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-border);
  padding: 8px 0;
  display: none;
}
.header-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.header-top__contacts { display: flex; gap: var(--space-lg); align-items: center; }
.header-top__phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--c-text-2);
  transition: color var(--t-fast);
}
.header-top__phone:hover { color: var(--c-gold); }
.free-label {
  font-size: .7rem;
  background: var(--c-gold-dim);
  color: var(--c-gold);
  padding: 1px 6px;
  border-radius: var(--r-full);
}
.header-top__meta { display: flex; align-items: center; gap: var(--space-lg); }
.header-top__hours {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: var(--c-text-3);
}
.header-top__messengers { display: flex; gap: var(--space-sm); }
.messenger-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--c-text-2);
  transition: all var(--t-fast);
}
.messenger-link svg { width: 20px; height: 20px; }
.messenger-link--tg:hover { background: #0088cc; color: #fff; }
.messenger-link--wa:hover { background: #25d366; color: #fff; }

.header-main { padding: 14px 0; }
.header-main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo__symbol {
  font-size: 1.4rem;
  color: var(--c-gold);
  line-height: 1;
}
.logo__text { display: flex; flex-direction: column; }
.logo__name {
  font-family: var(--f-serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-text);
  line-height: 1;
}
.logo__tagline {
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-top: 2px;
}

/* Nav — базовые стили (mobile-first: фиксированная панель справа) */
.main-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  z-index: 850;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 80px var(--space-lg) var(--space-lg);
  box-shadow: var(--shadow-lg);
  /* Скрыта за правым краем экрана */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 320ms cubic-bezier(.4,0,.2,1), visibility 320ms;
}
.main-nav.is-mobile-open {
  transform: translateX(0);
  visibility: visible;
}
.main-nav__list { display: flex; align-items: center; gap: 4px; }
.main-nav__item { position: relative; }
.main-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: .87rem;
  font-weight: 450;
  color: var(--c-text-2);
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
  white-space: nowrap;
}
.main-nav__link:hover,
.main-nav__item.is-active .main-nav__link {
  color: var(--c-text);
  background: var(--c-surface);
}

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 180px);
  gap: var(--space-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--t-base);
  z-index: 200;
}
.nav-dropdown--small { grid-template-columns: 200px; }
.nav-dropdown--cats {
  grid-template-columns: repeat(3, 1fr);
  width: 620px;
  max-width: 90vw;
}
.nav-dropdown--cats .nav-dropdown__all {
  font-weight: 600;
  color: var(--c-gold) !important;
}
.main-nav__item--has-drop:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown__col { display: flex; flex-direction: column; gap: 4px; }
.nav-dropdown__heading {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}
.nav-dropdown a {
  font-size: .85rem;
  color: var(--c-text-2);
  padding: 5px 8px;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
}
.nav-dropdown a:hover { background: var(--c-surface-2); color: var(--c-gold); }

/* Header CTA */
.header-cta { display: none; gap: 12px; align-items: center; }

/* Burger */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  transition: background var(--t-fast);
}
.burger:hover { background: var(--c-surface-2); }
.burger span {
  display: block;
  height: 1.5px;
  background: var(--c-text);
  border-radius: 2px;
  transition: all var(--t-base);
}
.burger.is-open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* Mobile overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 800;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.mobile-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* ── MOBILE NAV child styles ─────────────────────────────────── */
.main-nav.is-mobile-open .main-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.main-nav.is-mobile-open .main-nav__link {
  padding: 12px 14px;
  font-size: .95rem;
}
.main-nav.is-mobile-open .nav-dropdown {
  position: static;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: var(--c-bg-2);
  border: none;
  padding: 8px 0 8px 12px;
  box-shadow: none;
  border-radius: 0;
  gap: 2px;
  width: auto;
}
.main-nav.is-mobile-open .nav-dropdown__col { gap: 2px; }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;    /* fallback for browsers without svh */
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--header-h) + 40px) 0 60px;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(201,169,110,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(201,169,110,.04) 0%, transparent 70%),
    var(--c-bg);
}
.hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(12,12,14,1) 0%, rgba(12,12,14,.85) 50%, rgba(20,18,14,.7) 100%);
}
.hero__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--space-lg);
}
.hero__label-line {
  flex: 1;
  max-width: 40px;
  height: 1px;
  background: currentColor;
  opacity: .4;
}

.hero__title {
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, 9vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-white);
  margin-bottom: var(--space-lg);
}
.hero__title em {
  font-style: normal;
  color: var(--c-gold);
  font-weight: 300;
}

.hero__subtitle {
  font-size: 1rem;
  color: var(--c-text-2);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 480px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
  width: fit-content;
  margin: 0 auto;
}
.hero__trust-item { text-align: center; }
.hero__trust-item strong {
  display: block;
  font-family: var(--f-serif);
  font-size: 1.3rem;
  color: var(--c-gold);
  line-height: 1;
}
.hero__trust-item span {
  font-size: .72rem;
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
  display: block;
}
.hero__trust-divider {
  width: 1px;
  height: 36px;
  background: var(--c-border);
}

.hero__visual { display: none; }

.hero__monument-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-width: 300px;
  margin: 0 auto;
}
.hero__monument-img { position: relative; }
.hero__monument-img img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}
.hero__monument-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: var(--c-gold);
  color: #0c0c0e;
  padding: 6px 14px;
  border-radius: var(--r-full);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.hero__monument-badge span { font-size: .65rem; }
.hero__monument-badge strong { font-size: 1rem; font-weight: 700; }
.hero__monument-info {
  padding: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: var(--c-text-2);
}
.hero__monument-link { color: var(--c-gold); font-size: .8rem; }

.hero__scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-3);
  animation: fadeInUp 2s 1.5s both;
}
.hero__scroll-arrow {
  width: 20px;
  height: 30px;
  border: 1.5px solid currentColor;
  border-radius: 10px;
  position: relative;
}
.hero__scroll-arrow::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  background: currentColor;
  border-radius: 2px;
  animation: scrollDot 2s infinite;
}
@keyframes scrollDot {
  0%, 100% { opacity: 1; top: 6px; }
  50%       { opacity: 0; top: 14px; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── USP BAR ────────────────────────────────────────────────── */
.usp-bar {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: var(--space-xl) 0;
}
.usp-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.usp-bar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.usp-bar__icon {
  color: var(--c-gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.usp-bar__icon svg { width: 44px; height: 44px; }
.usp-bar__text { display: flex; flex-direction: column; gap: 4px; }
.usp-bar__text strong { font-size: .95rem; color: var(--c-text); }
.usp-bar__text span   { font-size: .82rem; color: var(--c-text-3); }

/* ── CATEGORIES ─────────────────────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.cat-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  display: block;
  aspect-ratio: 3/4;
}
.cat-card--wide {
  grid-column: 1 / -1;
  aspect-ratio: 16/7;
}
.cat-card__img {
  position: absolute;
  inset: 0;
}
.cat-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.cat-card:hover .cat-card__img img { transform: scale(1.06); }
.cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
  transition: background var(--t-base);
}
.cat-card:hover .cat-card__overlay {
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 50%, transparent 100%);
}
.cat-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-card__title {
  font-family: var(--f-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-white);
  line-height: 1.2;
}
.cat-card__count {
  font-size: .78rem;
  color: var(--c-gold);
}
.cat-card__arrow {
  display: none;
  font-size: .85rem;
  color: var(--c-text-2);
  transition: transform var(--t-fast);
}
.cat-card:hover .cat-card__arrow { transform: translateX(4px); }
.cat-card__badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: 3px 10px;
  background: var(--c-gold);
  color: #0c0c0e;
  font-size: .7rem;
  font-weight: 700;
  border-radius: var(--r-full);
  letter-spacing: .05em;
}
.cat-card__badge--red { background: var(--c-red); color: #fff; }

.categories__footer {
  margin-top: var(--space-xl);
  text-align: center;
}

/* ── FEATURED PRODUCTS ──────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.product-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--t-base);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: var(--c-gold);
  box-shadow: 0 8px 32px rgba(201,169,110,.12);
  transform: translateY(-4px);
}
.product-card__img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.product-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
  background: var(--c-surface-2);
}
.product-card:hover .product-card__img-wrap img { transform: scale(1.05); }
.product-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-card__quick {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: rgba(12,12,14,.8);
  backdrop-filter: blur(4px);
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all var(--t-fast);
  border: 1px solid var(--c-border);
}
.product-card:hover .product-card__quick { opacity: 1; }
.product-card__quick:hover { background: var(--c-gold); color: #0c0c0e; }

.product-card__body { padding: var(--space-md); flex: 1; display: flex; flex-direction: column; }
.product-card__name {
  font-family: var(--f-serif);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 4px;
}
.product-card__name a { color: var(--c-text); }
.product-card__name a:hover { color: var(--c-gold); }
.product-card__material {
  font-size: .75rem;
  color: var(--c-text-3);
  margin-bottom: var(--space-sm);
}
.product-card__price { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-sm); }
.product-card__price-old {
  font-size: .78rem;
  color: var(--c-text-3);
  text-decoration: line-through;
}
.product-card__price-cur {
  font-size: .95rem;
  font-weight: 600;
  color: var(--c-gold);
}
.product-card__cta { width: 100%; justify-content: center; margin-top: auto; }

.featured__footer { margin-top: var(--space-xl); text-align: center; }

/* ── SERVICES ───────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.service-card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all var(--t-base);
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-gold), transparent);
  opacity: 0;
  transition: opacity var(--t-base);
}
.service-card:hover {
  border-color: var(--c-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-4px);
}
.service-card:hover::before { opacity: 1; }
.service-card__num {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--f-serif);
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(201,169,110,.08);
  line-height: 1;
  pointer-events: none;
}
.service-card__icon {
  color: var(--c-gold);
  margin-bottom: var(--space-md);
}
.service-card__icon svg { width: 48px; height: 48px; }
.service-card__title {
  font-family: var(--f-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: var(--space-sm);
}
.service-card__desc {
  font-size: .85rem;
  color: var(--c-text-2);
  line-height: 1.65;
  margin-bottom: var(--space-md);
}
.service-card__link {
  font-size: .82rem;
  color: var(--c-gold);
  font-weight: 500;
}

/* ── HOW IT WORKS ───────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.step {
  position: relative;
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.step__num {
  font-family: var(--f-serif);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--c-gold);
  line-height: 1;
  flex-shrink: 0;
  min-width: 44px;
}
.step__connector { display: none; }
.step__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 6px;
}
.step__desc {
  font-size: .85rem;
  color: var(--c-text-2);
  line-height: 1.65;
}
.howworks__cta { text-align: center; }
.howworks__note {
  margin-top: var(--space-sm);
  font-size: .8rem;
  color: var(--c-text-3);
}

/* ── PROMOS ─────────────────────────────────────────────────── */
.promo-slider {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.promo-slide {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  overflow: hidden;
}
.promo-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--c-gold-dim) 0%, transparent 60%);
  pointer-events: none;
}
.promo-slide__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--c-gold);
  color: #0c0c0e;
  font-size: .9rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--r-full);
}
.promo-slide__title {
  font-family: var(--f-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: var(--space-sm);
}
.promo-slide__desc {
  font-size: .85rem;
  color: var(--c-text-2);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}
.promo-slide__until {
  display: block;
  font-size: .78rem;
  color: var(--c-gold);
  margin-bottom: var(--space-md);
}

/* ── TESTIMONIALS ───────────────────────────────────────────── */
.reviews-slider {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.review-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--space-lg);
  position: relative;
}
.review-card::before {
  content: '"';
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--f-serif);
  font-size: 4rem;
  color: var(--c-gold);
  opacity: .15;
  line-height: 1;
}
.review-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.review-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--r-full);
  background: var(--c-gold-dim);
  border: 1.5px solid var(--c-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-gold);
  flex-shrink: 0;
}
.review-card__meta { flex: 1; }
.review-card__meta strong { display: block; font-size: .9rem; color: var(--c-text); }
.review-card__stars {
  color: var(--c-gold);
  font-size: .75rem;
  letter-spacing: 1px;
}
.review-card__source {
  font-size: .72rem;
  color: var(--c-text-3);
  background: var(--c-surface-2);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.review-card__text {
  font-size: .88rem;
  color: var(--c-text-2);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: var(--space-sm);
}
.review-card__date {
  font-size: .75rem;
  color: var(--c-text-3);
}
.testimonials__footer { margin-top: var(--space-xl); text-align: center; }

/* ── CTA BAND ───────────────────────────────────────────────── */
.cta-band {
  position: relative;
  background: linear-gradient(135deg, var(--c-bg-3) 0%, rgba(201,169,110,.07) 100%);
  padding: var(--space-2xl) 0;
}
/* Gradient gold lines top and bottom — look intentional, not random */
.cta-band::before,
.cta-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,169,110,.6) 20%,
    var(--c-gold) 50%,
    rgba(201,169,110,.6) 80%,
    transparent 100%
  );
}
.cta-band::before { top: 0; }
.cta-band::after  { bottom: 0; }
.cta-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.cta-band__title {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: var(--space-sm);
  text-wrap: balance;
  -webkit-text-wrap: balance;
  max-width: 420px;
}
.cta-band__desc { font-size: .9rem; color: var(--c-text-2); }

.inline-form { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.inline-form__input {
  flex: 0 1 210px;
  min-width: 120px;
  padding: 14px 20px;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-full);
  color: var(--c-text);
  font-size: .9rem;
  transition: border-color var(--t-fast);
  outline: none;
}
.inline-form__input:focus { border-color: var(--c-gold); }
.inline-form__input::placeholder { color: var(--c-text-3); }
.inline-form__note {
  margin-top: var(--space-sm);
  font-size: .75rem;
  color: var(--c-text-3);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 6px; max-width: 760px; margin: 0 auto; }
.faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.faq-item.is-open { border-color: var(--c-gold); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-text);
  transition: color var(--t-fast);
}
.faq-item__q:hover { color: var(--c-gold); }
.faq-item__arrow {
  flex-shrink: 0;
  color: var(--c-text-3);
  transition: transform var(--t-base);
}
.faq-item.is-open .faq-item__arrow { transform: rotate(180deg); }
.faq-item__a {
  height: 0;
  overflow: hidden;
  transition: height var(--t-base);
}
.faq-item__a p {
  padding: 0 var(--space-lg) var(--space-md);
  font-size: .87rem;
  color: var(--c-text-2);
  line-height: 1.7;
}

/* ── CONTACTS ───────────────────────────────────────────────── */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
.contacts-info .section-title--light { margin-bottom: var(--space-lg); }
.contacts-info__list { display: flex; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.contacts-info__item { display: flex; gap: var(--space-md); align-items: flex-start; }
.contacts-info__icon {
  color: var(--c-gold);
  margin-top: 2px;
  flex-shrink: 0;
}
.contacts-info__item > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contacts-info__item strong {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.contacts-info__item span,
.contacts-info__item a {
  font-size: .9rem;
  color: var(--c-text-2);
  display: block;
}
.contacts-info__item a:hover { color: var(--c-gold); }
.contacts-info__messengers { display: flex; gap: var(--space-sm); }
.contacts-map { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-border); }
.contacts-map iframe { display: block; min-height: 280px; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.footer {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-border);
  padding: var(--space-2xl) 0 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.footer__brand .logo { margin-bottom: var(--space-md); }
.footer__about {
  font-size: .83rem;
  color: var(--c-text-3);
  line-height: 1.65;
  margin-bottom: var(--space-md);
  max-width: 300px;
}
.footer__social { display: flex; gap: var(--space-sm); }
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--c-text-2);
  border: 1px solid var(--c-border);
  transition: all var(--t-fast);
}
.social-link:hover { background: var(--c-gold); color: #0c0c0e; border-color: var(--c-gold); }
.footer__heading {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--space-md);
}
.footer__links { display: flex; flex-direction: column; gap: 8px; }
.footer__links a {
  font-size: .85rem;
  color: var(--c-text-3);
  transition: color var(--t-fast);
}
.footer__links a:hover { color: var(--c-gold); }
.footer__bottom {
  border-top: 1px solid var(--c-border);
  padding: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer__copy {
  font-size: .78rem;
  color: var(--c-text-3);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer__legal a {
  font-size: .75rem;
  color: var(--c-text-3);
}
.footer__legal a:hover { color: var(--c-gold); }
.footer__dev {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: var(--space-md) 0 0;
  text-align: center;
}
.footer__dev a {
  font-size: .72rem;
  color: var(--c-text-3);
  text-decoration: none;
  opacity: .6;
  transition: opacity .2s;
}
.footer__dev a:hover { opacity: 1; color: var(--c-gold); }

/* ── MODALS ─────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
}
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.modal__box {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--space-xl) var(--space-lg);
  width: 100%;
  max-width: 460px;
  max-height: 90svh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: scale(.95) translateY(20px);
  transition: transform var(--t-base);
}
.modal.is-open .modal__box {
  transform: scale(1) translateY(0);
}
.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.modal__close:hover { background: var(--c-border); color: var(--c-text); }
.modal__icon { color: var(--c-gold); margin-bottom: var(--space-md); }
.modal__title {
  font-family: var(--f-serif);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: var(--space-sm);
}
.modal__desc {
  font-size: .87rem;
  color: var(--c-text-2);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}
.modal__product-name { color: var(--c-gold); font-style: italic; }

/* Forms */
.modal-form { display: flex; flex-direction: column; gap: var(--space-md); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field__label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--c-text-2);
}
.req { color: var(--c-gold); }
.form-field__input,
.form-field__textarea {
  padding: 13px 16px;
  background: var(--c-bg-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: .9rem;
  transition: border-color var(--t-fast);
  outline: none;
  width: 100%;
}
.form-field__input:focus,
.form-field__textarea:focus { border-color: var(--c-gold); }
.form-field__input::placeholder,
.form-field__textarea::placeholder { color: var(--c-text-3); }
.form-field__textarea { resize: vertical; min-height: 80px; }
.modal-form__note {
  text-align: center;
  font-size: .74rem;
  color: var(--c-text-3);
}
.modal-form__note a { color: var(--c-text-3); text-decoration: underline; }
.modal-form__success {
  text-align: center;
  padding: var(--space-xl) 0;
}
.success-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--r-full);
  background: rgba(46,204,113,.15);
  border: 2px solid var(--c-green);
  color: var(--c-green);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}
.modal-form__success h3 {
  font-family: var(--f-serif);
  font-size: 1.4rem;
  color: var(--c-text);
  margin-bottom: var(--space-sm);
}
.modal-form__success p {
  font-size: .88rem;
  color: var(--c-text-2);
  line-height: 1.65;
}

/* ── CHAT WIDGET ────────────────────────────────────────────── */
.chat-widget {
  position: fixed;
  bottom: 20px;
  right: var(--space-md);
  z-index: 950;
}
.chat-widget__toggle {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--c-gold) 0%, #a8833d 100%);
  color: #0c0c0e;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(201,169,110,.4);
  transition: all var(--t-base);
  position: relative;
}
.chat-widget__toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 32px rgba(201,169,110,.55);
}
.chat-widget__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: #e74c3c;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-bg);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

.chat-widget__panel {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: min(340px, 90vw);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: chatSlideIn .3s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes chatSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-widget__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-border);
}
.chat-widget__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--c-gold-dim);
  border: 1.5px solid var(--c-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-gold);
  flex-shrink: 0;
  position: relative;
}
.chat-widget__online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  background: var(--c-green);
  border-radius: var(--r-full);
  border: 2px solid var(--c-bg-2);
}
.chat-widget__info { flex: 1; }
.chat-widget__info strong { display: block; font-size: .9rem; color: var(--c-text); }
.chat-widget__info span { font-size: .75rem; color: var(--c-text-3); }
.chat-widget__close-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--c-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.chat-widget__close-btn:hover { background: var(--c-surface-2); color: var(--c-text); }

.chat-widget__messages {
  height: 200px;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  scroll-behavior: smooth;
}
.chat-msg { max-width: 85%; }
.chat-msg--in {
  align-self: flex-start;
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: 4px var(--r-md) var(--r-md) var(--r-md);
}
.chat-msg--out {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--c-gold) 0%, #a8833d 100%);
  border-radius: var(--r-md) 4px var(--r-md) var(--r-md);
}
.chat-msg p {
  padding: 8px 12px;
  font-size: .84rem;
  line-height: 1.55;
}
.chat-msg--in p { color: var(--c-text-2); }
.chat-msg--out p { color: #0c0c0e; }
.chat-msg__time {
  display: block;
  text-align: right;
  font-size: .65rem;
  color: var(--c-text-3);
  padding: 0 10px 5px;
}
.chat-msg--out .chat-msg__time { color: rgba(12,12,14,.5); }

.chat-widget__quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px var(--space-md) 0;
}
.chat-quick-btn {
  padding: 5px 12px;
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: .78rem;
  color: var(--c-text-2);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.chat-quick-btn:hover { border-color: var(--c-gold); color: var(--c-gold); }

.chat-widget__form { padding: var(--space-sm) var(--space-md) var(--space-md); }
.chat-widget__input-wrap {
  display: flex;
  gap: 6px;
  background: var(--c-bg-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-full);
  padding: 4px 4px 4px 14px;
  transition: border-color var(--t-fast);
}
.chat-widget__input-wrap:focus-within { border-color: var(--c-gold); }
.chat-widget__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--c-text);
  font-size: .84rem;
  padding: 6px 0;
  min-width: 0;
}
.chat-widget__input::placeholder { color: var(--c-text-3); }
.chat-widget__send {
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: var(--c-gold);
  color: #0c0c0e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.chat-widget__send:hover { background: var(--c-gold-light); transform: scale(1.05); }
.chat-widget__phone-row {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.chat-widget__phone-row .chat-widget__input {
  flex: 1;
  background: var(--c-bg-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-full);
  padding: 8px 14px;
  font-size: .84rem;
}

/* ── SCROLL TO TOP ──────────────────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 20px;
  right: 84px;   /* side-by-side with chat widget: 56px btn + 12px gap + 16px */
  z-index: 940;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.scroll-top:hover { background: var(--c-gold); color: #0c0c0e; border-color: var(--c-gold); }

/* ── PHONE MASK ─────────────────────────────────────────────── */
input[type="tel"].is-error { border-color: #e74c3c !important; }
input[type="tel"].is-success { border-color: var(--c-green) !important; }

/* ================================================================
   MEDIA QUERIES — Mobile First
   ================================================================ */

/* Small phones → tablets  (≥ 480px) */
@media (min-width: 480px) {
  .cat-grid { gap: var(--space-md); }
  .cat-card__arrow { display: block; }
  .products-grid { grid-template-columns: 1fr 1fr; }
}

/* Tablets (≥ 768px) */
@media (min-width: 768px) {
  :root { --header-h: 120px; }

  .header-top { display: block; }
  .container { padding: 0 var(--space-xl); }
  .section { padding: var(--space-3xl) 0; }

  .hero { padding-top: calc(var(--header-h) + 60px); }
  .hero__inner { grid-template-columns: 1fr 1fr; }
  .hero__visual { display: flex; justify-content: center; }

  .usp-bar__grid { grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-card--wide { grid-column: span 2; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .promo-slider { grid-template-columns: repeat(3, 1fr); }
  .reviews-slider { grid-template-columns: repeat(2, 1fr); }
  .cta-band__inner { flex-direction: row; align-items: center; }
  .cta-band__text { flex: 1; }
  .cta-band__form { flex: 1; min-width: 300px; }
  .contacts-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }

  .chat-widget { bottom: 32px; right: 32px; }
  .scroll-top { bottom: 32px; right: 104px; width: 44px; height: 44px; }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .header-cta { display: flex; }
  .burger { display: none; }
  /* Сбрасываем мобильное позиционирование — обычный горизонтальный nav */
  .main-nav {
    position: static;
    width: auto;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    overflow-y: visible;
    flex-direction: row;
    transform: none;
    visibility: visible;
    flex: 1;
    justify-content: center;
    transition: none;
  }

  .hero__title { font-size: 4.5rem; }
  .usp-bar__grid { grid-template-columns: repeat(4, 1fr); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .cat-card--wide { grid-column: span 2; }
  .products-grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .step__connector {
    display: block;
    position: absolute;
    top: 50%;
    right: -14px;
    width: 28px;
    height: 1px;
    background: var(--c-border);
    z-index: 1;
  }
  .step:last-child .step__connector { display: none; }
  .reviews-slider { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 2.5fr 1fr 1fr 1fr; }
}

/* Large screens (≥ 1280px) */
@media (min-width: 1280px) {
  .hero__title { font-size: 5.2rem; }
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
  background: var(--c-surface-2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); }

/* ── FOCUS VISIBLE ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-animate] { opacity: 1; transform: none; }
}

/* ================================================================
   INNER PAGES — Page Hero, Breadcrumb, Rich Text, CMS Pages,
   Catalog, Monument, Blog, Promotions, Pagination
   ================================================================ */

/* ── PAGE HERO ──────────────────────────────────────────────── */
.page-hero {
  padding: calc(var(--header-h) + var(--space-2xl)) 0 var(--space-2xl);
  background: var(--c-bg-3);
  border-bottom: 1px solid var(--c-border);
}
.page-hero--sm {
  padding-top: calc(var(--header-h) + var(--space-xl));
  padding-bottom: var(--space-xl);
}
.page-hero--xs {
  padding-top: calc(var(--header-h) + var(--space-lg));
  padding-bottom: var(--space-lg);
}
.page-hero__title {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--c-text);
  margin-top: var(--space-sm);
  line-height: 1.25;
}
.page-hero__desc {
  color: var(--c-text-2);
  margin-top: var(--space-sm);
  font-size: 1rem;
  max-width: 560px;
}

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: .78rem;
  color: var(--c-text-3);
}
.breadcrumb a { color: var(--c-text-3); }
.breadcrumb a:hover { color: var(--c-gold); }
.breadcrumb__sep { color: var(--c-text-3); opacity: .5; }
.breadcrumb [aria-current="page"] { color: var(--c-text-2); }

/* ── RICH TEXT ──────────────────────────────────────────────── */
.rich-text { max-width: 820px; }
.rich-text h1,.rich-text h2,.rich-text h3,.rich-text h4 {
  font-family: var(--f-serif);
  color: var(--c-text);
  margin: var(--space-xl) 0 var(--space-md);
  line-height: 1.3;
}
.rich-text h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; }
.rich-text h2 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 600; }
.rich-text h3 { font-size: 1.15rem; font-weight: 600; }
.rich-text h2:first-child, .rich-text h1:first-child { margin-top: 0; }
.rich-text p { color: var(--c-text-2); margin-bottom: var(--space-md); line-height: 1.75; }
.rich-text ul, .rich-text ol { padding-left: var(--space-lg); margin-bottom: var(--space-md); }
.rich-text li { color: var(--c-text-2); margin-bottom: var(--space-sm); line-height: 1.7; list-style: disc; }
.rich-text ol li { list-style: decimal; }
.rich-text strong { color: var(--c-text); font-weight: 600; }
.rich-text a { color: var(--c-gold); }
.rich-text a:hover { color: var(--c-gold-light); }
.rich-text table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
  font-size: .9rem;
}
.rich-text th, .rich-text td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--c-border);
  text-align: left;
}
.rich-text th { background: var(--c-surface); color: var(--c-text); font-weight: 600; }
.rich-text td { color: var(--c-text-2); }
.rich-text img { border-radius: var(--r-md); margin: var(--space-md) 0; }
.rich-text blockquote {
  border-left: 3px solid var(--c-gold);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  background: var(--c-surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-text-2);
  font-style: italic;
}

/* ── ABOUT STATS ────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}
.about-stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--space-lg);
  text-align: center;
}
.about-stat strong {
  display: block;
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--c-gold);
  font-weight: 600;
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.about-stat span { font-size: .82rem; color: var(--c-text-3); }

/* ── CMS PAGE ───────────────────────────────────────────────── */
.cms-page { min-height: 40vh; }
.cms-block { margin-bottom: var(--space-2xl); }
.cms-block:last-child { margin-bottom: 0; }
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.feature-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--space-lg);
}
.feature-card__icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}
.feature-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--space-xs);
}
.inline-cta { text-align: center; }
.inline-cta h3 { font-family: var(--f-serif); font-size: 1.4rem; margin-bottom: var(--space-sm); }
.inline-cta p { color: var(--c-text-2); margin-bottom: var(--space-lg); }

/* ── PROMOTIONS ─────────────────────────────────────────────── */
.promos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.promo-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.promo-card:hover {
  border-color: var(--c-gold);
  box-shadow: var(--shadow-gold);
}
.promo-card__badge {
  display: inline-block;
  background: var(--c-gold);
  color: #0c0c0e;
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-md);
}
.promo-card__img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.promo-card__body {
  padding: var(--space-lg) var(--space-xl);
}
.promo-card__title {
  font-family: var(--f-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--space-sm);
}
.promo-card__subtitle {
  color: var(--c-text-2);
  margin-bottom: var(--space-sm);
}
.promo-card__desc { color: var(--c-text-2); margin-bottom: var(--space-md); }
.promo-card__desc p { color: var(--c-text-2); margin-bottom: var(--space-sm); }
.promo-card__until {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--c-text-3);
  margin-bottom: var(--space-lg);
}

/* ── BLOG ───────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.blog-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base);
}
.blog-card:hover { border-color: var(--c-gold); transform: translateY(-4px); }
.blog-card--dark { background: var(--c-bg-3); }
.blog-card__img-wrap { display: block; overflow: hidden; }
.blog-card__img-wrap img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.blog-card:hover .blog-card__img-wrap img { transform: scale(1.05); }
.blog-card__body { padding: var(--space-lg); }
.blog-card__cat {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-gold);
  margin-bottom: var(--space-sm);
}
.blog-card__title {
  font-family: var(--f-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}
.blog-card__title a { color: inherit; }
.blog-card__title a:hover { color: var(--c-gold); }
.blog-card__excerpt { font-size: .85rem; color: var(--c-text-2); margin-bottom: var(--space-md); }
.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border-top: 1px solid var(--c-border-2);
  padding-top: var(--space-md);
}
.blog-card__date { font-size: .78rem; color: var(--c-text-3); }
.blog-card__link { font-size: .82rem; color: var(--c-gold); font-weight: 500; }
.blog-card__link:hover { color: var(--c-gold-light); }

/* Blog article */
.blog-article { background: var(--c-bg); }
.blog-article__wrap { max-width: 780px; margin: 0 auto; }
.blog-article__header { margin-bottom: var(--space-xl); }
.blog-article__title {
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.25;
  margin: var(--space-sm) 0;
}
.blog-article__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: .8rem;
  color: var(--c-text-3);
}
.blog-article__author { color: var(--c-text-2); }
.blog-article__cover {
  margin: 0 0 var(--space-xl);
  border-radius: var(--r-md);
  overflow: hidden;
}
.blog-article__cover img { width: 100%; height: auto; }
.blog-article__body { margin-bottom: var(--space-2xl); }
.blog-article__cta {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--space-xl);
  text-align: center;
  margin-top: var(--space-2xl);
}
.blog-article__cta h3 {
  font-family: var(--f-serif);
  font-size: 1.4rem;
  margin-bottom: var(--space-sm);
}
.blog-article__cta p { color: var(--c-text-2); margin-bottom: var(--space-lg); }
.blog-related { background: var(--c-bg-2); }

/* ── MONUMENT DETAIL ────────────────────────────────────────── */
.monument-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.monument-gallery__main {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 5/7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.monument-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.monument-gallery__placeholder {
  flex-direction: column;
  gap: var(--space-md);
  color: var(--c-text-3);
  font-size: .85rem;
}
.monument-gallery__thumbs {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.monument-gallery__thumb {
  width: 72px;
  height: 90px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--t-fast);
  cursor: pointer;
  padding: 0;
}
.monument-gallery__thumb.is-active,
.monument-gallery__thumb:hover { border-color: var(--c-gold); }
.monument-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.monument-detail__category { font-size: .8rem; color: var(--c-gold); margin-bottom: var(--space-xs); }
.monument-detail__category a { color: inherit; }
.monument-detail__title {
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--space-md);
  line-height: 1.2;
}
.monument-detail__short-desc { color: var(--c-text-2); margin-bottom: var(--space-lg); }
.monument-detail__badges { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.monument-detail__specs {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-xl);
  font-size: .88rem;
}
.monument-detail__specs th,
.monument-detail__specs td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--c-border-2);
  text-align: left;
}
.monument-detail__specs th {
  color: var(--c-text-3);
  font-weight: 500;
  width: 40%;
}
.monument-detail__specs td { color: var(--c-text-2); }
.monument-detail__price-block { margin-bottom: var(--space-xl); }
.monument-detail__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}
.monument-detail__price-old {
  font-size: 1rem;
  color: var(--c-text-3);
  text-decoration: line-through;
}
.monument-detail__price-cur {
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--c-gold);
  font-weight: 600;
}
.monument-detail__price-note { font-size: .78rem; color: var(--c-text-3); }
.monument-detail__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.monument-detail__trust { display: flex; flex-direction: column; gap: var(--space-sm); }
.trust-item { display: flex; align-items: center; gap: var(--space-sm); font-size: .82rem; color: var(--c-text-2); }
.trust-item svg { color: var(--c-gold); flex-shrink: 0; }
.monument-detail__desc { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: 1px solid var(--c-border); }
.monument-detail__desc h2 { font-family: var(--f-serif); font-size: 1.5rem; margin-bottom: var(--space-lg); }

/* ── CATALOG TABS & TOOLBAR ─────────────────────────────────── */
.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.cat-tab {
  padding: 6px 16px;
  border-radius: var(--r-full);
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-text-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
}
.cat-tab:hover, .cat-tab.is-active {
  color: #0c0c0e;
  background: var(--c-gold);
  border-color: var(--c-gold);
}
/* ── CATALOG DROPDOWN ───────────────────────────────────────── */
.cat-dropdown {
  position: relative;
  display: inline-block;
}
.cat-dropdown__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.cat-dropdown__btn:hover,
.cat-dropdown__btn.is-active {
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.cat-dropdown__chevron {
  flex-shrink: 0;
  transition: transform var(--t-fast);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cat-dropdown.is-open .cat-dropdown__chevron { transform: rotate(180deg); }
.cat-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  z-index: 200;
}
.cat-dropdown.is-open .cat-dropdown__menu { display: block; }
.cat-dropdown__option {
  display: block;
  padding: 9px 18px;
  font-size: .85rem;
  color: var(--c-text-2);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.cat-dropdown__option:hover {
  background: rgba(255,255,255,.06);
  color: var(--c-white);
}
.cat-dropdown__option.is-active {
  color: var(--c-gold);
  font-weight: 600;
}
.cat-dropdown__reset {
  flex-shrink: 0;
}

/* ── CATALOG TOTAL ──────────────────────────────────────────── */
.catalog-total {
  font-size: .85rem;
  color: var(--c-text-3);
  margin-bottom: var(--space-lg);
}
.catalog-total span {
  color: var(--c-gold);
  font-weight: 700;
  font-size: 1rem;
}

.catalog-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--c-border-2);
}
.catalog-toolbar__count { font-size: .85rem; color: var(--c-text-2); }
.catalog-toolbar__count strong { color: var(--c-text); }
.catalog-toolbar__sort {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: .82rem;
  color: var(--c-text-2);
}
.catalog-toolbar__sort select {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  color: var(--c-text);
  padding: 5px 10px;
  font-size: .82rem;
  font-family: var(--f-sans);
  cursor: pointer;
}
.catalog-toolbar__sort select:focus { outline: none; border-color: var(--c-gold); }

/* ── EMPTY STATE ────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-md);
  color: var(--c-text-2);
  grid-column: 1 / -1;
}
.empty-state svg { margin: 0 auto var(--space-md); }
.empty-state a { color: var(--c-gold); }

/* ── PAGINATION ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-2xl);
}
.pagination__item a,
.pagination__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-sm);
  border-radius: var(--r-sm);
  font-size: .85rem;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-2);
  transition: all var(--t-fast);
  text-decoration: none;
}
.pagination__item a:hover { border-color: var(--c-gold); color: var(--c-gold); }
.pagination__item.is-active a,
.pagination__item.is-active span {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #0c0c0e;
  font-weight: 600;
}
.pagination__item--dots span { background: none; border-color: transparent; }
.pagination__item--disabled span { opacity: .35; cursor: not-allowed; }

/* ── INLINE FORM NOTE ───────────────────────────────────────── */
.inline-form__note {
  font-size: .75rem;
  color: var(--c-text-3);
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── PROJECTS GRID (hardcoded pages) ────────────────────────── */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.project-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base);
}
.project-card:hover { border-color: var(--c-gold); transform: translateY(-4px); }
.project-card__img {
  background: var(--c-surface-2);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.project-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.project-card:hover .project-card__img img { transform: scale(1.05); }
.project-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--c-text-3);
  font-size: .8rem;
  text-align: center;
}
.project-card__body { padding: var(--space-lg); }
.project-card__title {
  font-family: var(--f-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--space-xs);
}
.project-card__desc { font-size: .85rem; color: var(--c-text-2); margin-bottom: var(--space-md); }
.project-card__tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--c-gold);
  background: var(--c-gold-dim);
  padding: 3px 10px;
  border-radius: var(--r-full);
  margin-bottom: var(--space-sm);
}

/* ── VALUES LIST (about page) ───────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.value-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--space-lg);
}
.value-card__title {
  font-family: var(--f-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--space-xs);
}
.value-card__desc { font-size: .87rem; color: var(--c-text-2); line-height: 1.65; }

/* ── PRODUCTION STEPS (about page) ─────────────────────────── */
.production-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.production-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: center;
}
.production-card__img {
  background: var(--c-surface-2);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-3);
  font-size: .8rem;
  gap: var(--space-sm);
  flex-direction: column;
}
.production-card__body { padding: var(--space-lg); }
.production-card__num {
  font-family: var(--f-serif);
  font-size: 2rem;
  color: var(--c-gold);
  opacity: .4;
  font-weight: 600;
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.production-card__title { font-size: 1rem; font-weight: 600; color: var(--c-text); margin-bottom: var(--space-xs); }
.production-card__desc { font-size: .85rem; color: var(--c-text-2); }

/* ── CONTACT FORM ───────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.contact-form-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--space-xl);
}
.contact-form-box h3 {
  font-family: var(--f-serif);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

/* ── INNER PAGE MEDIA QUERIES ───────────────────────────────── */
@media (min-width: 480px) {
  .about-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .page-hero { padding-top: calc(var(--header-h) + var(--space-3xl)); padding-bottom: var(--space-3xl); }
  .promos-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .production-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-layout { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: repeat(4, 1fr); }
  .promos-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .monument-detail__grid { grid-template-columns: 1fr 1fr; }
  .projects-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   RESPONSIVE FIXES — Mobile & Desktop Layout Improvements
   ================================================================ */

/* Prevent overflow from fade-left animation on contacts section */
.contacts-map { overflow: hidden; }

/* ── Very small phones (< 480px) ────────────────────────────── */
@media (max-width: 479px) {
  /* Tighter side padding on tiny screens */
  .container { padding-inline: 12px; }

  /* Single-column product grid — cards are too narrow at 2-up */
  .products-grid { grid-template-columns: 1fr; }

  /* Hero: clamp title size so it doesn't overflow */
  .hero__title { font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important; }

  /* Hero trust bar: wrap and drop dividers */
  .hero__trust { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .hero__trust-divider { display: none; }

  /* CTA inline form: stack vertically */
  .inline-form { flex-direction: column; }
  .inline-form .btn { width: 100%; justify-content: center; }

  /* Tighter category grid gap */
  .cat-grid { gap: 6px; }

  /* Modal box: full-width with small margin */
  .modal__box { margin: var(--space-sm); width: calc(100% - 2 * var(--space-sm)); }

  /* Section padding reduced */
  .section { padding: var(--space-xl) 0; }
  .section, .cta-band, .usp-bar { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
}

/* ── Mobile (480px – 767px) ─────────────────────────────────── */
@media (min-width: 480px) and (max-width: 767px) {
  /* 2 columns for products */
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet landscape (768px – 1023px) ──────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 3-column product grid on wider tablets */
  .products-grid { grid-template-columns: repeat(3, 1fr); }

  /* Wider burger panel on tablets */
  .main-nav { width: min(400px, 85vw); }
}

/* ── Desktop dropdown alignment ─────────────────────────────── */
@media (min-width: 1024px) {
  /* Last two nav items: align dropdown to the right to avoid off-screen */
  .main-nav__item:nth-last-child(-n+2) .nav-dropdown {
    left: auto;
    right: 0;
  }
}

/* ── Better touch targets on mobile (WCAG 2.5.5) ────────────── */
@media (max-width: 1023px) {
  .burger { width: 44px; height: 44px; }
  .btn { min-height: 44px; }
  .main-nav__link { min-height: 44px; }
  .faq-item__q { min-height: 48px; }
  .cat-tab { padding: 8px 18px; }
}

/* ── Inner page hero: appropriate padding on all screens ────── */
@media (max-width: 767px) {
  .page-hero    { padding-top: calc(var(--header-h) + var(--space-md)); padding-bottom: var(--space-xl); }
  .page-hero--sm{ padding-top: calc(var(--header-h) + var(--space-sm)); padding-bottom: var(--space-lg); }
  .page-hero--xs{ padding-top: calc(var(--header-h) + 8px);            padding-bottom: var(--space-md); }
}

/* ── Ensure footer links are readable on mobile ─────────────── */
@media (max-width: 767px) {
  .footer__grid { gap: var(--space-lg); }
  .footer__brand { max-width: 100%; }
  .footer__bottom { text-align: center; }
  .footer__legal { justify-content: center; }
}

/* ── Review cards: 1 column on mobile ───────────────────────── */
@media (max-width: 767px) {
  .reviews-slider { grid-template-columns: 1fr; }
}

/* ── Better hero on mobile: ensure content is always visible ── */
@media (max-width: 767px) {
  .hero { padding-top: calc(var(--header-h) + 32px); padding-bottom: 48px; }
  .hero__inner { gap: var(--space-lg); }
  .hero__content { text-align: center; }
  .hero__label { justify-content: center; }
  .hero__actions { justify-content: center; }
  .hero__trust { justify-content: center; }
}

/* ── Contacts section: proper grid on mobile ────────────────── */
@media (max-width: 767px) {
  .contacts-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ── Services grid: 1 column on mobile ──────────────────────── */
@media (max-width: 767px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   UI POLISH — fixes for header, CTA, FAQ, decorative elements
   ================================================================ */

/* ── Header: ensure btn--gold doesn't bleed outside header bg ─ */
.header-main { padding: 16px 0; }
.header-main__inner { align-items: center; }

/* ── CTA band: inline-form stacks well on medium screens ──────── */
@media (max-width: 900px) {
  .inline-form {
    flex-direction: column;
    align-items: stretch;
  }
  .inline-form__input {
    flex: unset;
    width: 100%;
    max-width: 100%;
  }
  .inline-form .btn { width: 100%; justify-content: center; }
  .cta-band__title { max-width: 100%; }
}

/* ── FAQ: guarantee heading is never clipped ─────────────────── */
.faq .section-header {
  overflow: visible;
  position: relative;
}
.faq .section-title {
  white-space: normal;
  overflow-wrap: break-word;
}

/* ── Hero label line: constrain so it can't cause overflow ────── */
.hero__label { overflow: hidden; }
.hero__label-line { flex: 0 0 32px; max-width: 32px; }

/* ── Messenger links tooltip hint for accessibility ──────────── */
.header-top__messengers {
  gap: 6px;
  align-items: center;
}

/* ── Header CTA buttons: sufficient spacing ──────────────────── */
.header-cta__call { letter-spacing: .02em; }
.header-cta__order { letter-spacing: .02em; }

/* ── CTA + FAQ: one-column layout, aligned widths ────────────── */
/* Both .cta-band__inner and .faq-list are centred at 760px max  */
.cta-band__inner {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ================================================================
   REDESIGNED CARDS — Feature cards, Contact cards, Messenger cards
   ================================================================ */

/* ── Feature cards (used in о-нас, CMS features blocks) ──────── */
.feature-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--space-lg);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  display: flex;
  flex-direction: column;
}
.feature-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(201,169,110,.1);
}
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--c-gold-dim);
  border: 1px solid rgba(201,169,110,.2);
  border-radius: var(--r-sm);
  color: var(--c-gold);
  margin-bottom: var(--space-md);
  flex-shrink: 0;
  font-size: inherit;
}
.feature-card__title {
  font-family: var(--f-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--space-xs);
}
.feature-card__desc {
  font-size: .87rem;
  color: var(--c-text-2);
  line-height: 1.65;
  margin: 0;
}
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
@media (min-width: 480px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Contact cards ────────────────────────────────────────────── */
.contact-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.contact-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.contact-card:hover {
  border-color: var(--c-gold);
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(201,169,110,.08);
  transform: translateY(-2px);
}
.contact-card__icon-wrap {
  width: 46px;
  height: 46px;
  min-width: 46px;
  background: var(--c-gold-dim);
  border: 1px solid rgba(201,169,110,.2);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
}
.contact-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.contact-card__label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.contact-card__value {
  font-size: .95rem;
  color: var(--c-text);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-card__value a {
  color: var(--c-text);
  transition: color var(--t-fast);
}
.contact-card__value a:hover { color: var(--c-gold); }
.contact-card__sub {
  font-size: .78rem;
  color: var(--c-text-3);
}
@media (min-width: 480px) {
  .contact-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Messenger cards ──────────────────────────────────────────── */
.messenger-cards {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.messenger-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px var(--space-md);
  color: var(--c-text-2);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.messenger-card:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(201,169,110,.15);
}

/* ── CMS page: richtext blocks as visual cards ────────────────── */
.cms-block--card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-md) !important;
}
.cms-block--card:last-child { margin-bottom: 0 !important; }

/* Service-like items inside CMS blocks */
.cms-block--card strong:first-child {
  display: block;
  font-family: var(--f-serif);
  font-size: 1.05rem;
  color: var(--c-text);
  margin-bottom: var(--space-xs);
}
.cms-block--card p + p { margin-top: var(--space-sm); }

/* Price/срок строки — gold accent */
.cms-block--card p:last-child:not(:first-child) {
  font-size: .85rem;
  color: var(--c-gold);
  border-top: 1px solid var(--c-border);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
}

/* Advantages list inside CMS blocks */
.cms-block--card ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding-left: 0;
  list-style: none;
  margin-top: var(--space-md);
}
.cms-block--card ul li {
  display: flex;
  gap: var(--space-sm);
  font-size: .9rem;
  color: var(--c-text-2);
  line-height: 1.5;
  padding: var(--space-sm) var(--space-md);
  background: var(--c-bg-3);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--c-gold);
}
.cms-block--card ul li::before {
  content: '';
  display: none;
}
@media (min-width: 768px) {
  .cms-block--card ul { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   СВО — АКЦЕНТНЫЕ СТИЛИ
   ================================================================ */

/* ── Пункт меню СВО (дропдаун) ────────────────────────────────── */
.nav-dropdown__link--svo {
  color: var(--c-gold) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}
.nav-dropdown__link--svo:hover {
  background: var(--c-gold-dim) !important;
  color: var(--c-gold-light) !important;
}

/* ── SVO-баннер на главной ──────────────────────────────────────── */
.svo-banner {
  background: linear-gradient(135deg, #1a1200 0%, #0c0c0e 40%, #1a1200 100%);
  border-top: 1px solid rgba(201,169,110,.25);
  border-bottom: 1px solid rgba(201,169,110,.25);
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.svo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(201,169,110,.03) 40px,
    rgba(201,169,110,.03) 80px
  );
  pointer-events: none;
}
.svo-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  position: relative;
}
.svo-banner__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--c-gold);
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: var(--c-gold-dim);
  border: 1px solid rgba(201,169,110,.4);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  min-width: 66px;
  text-align: center;
}
.svo-banner__content {
  flex: 1;
  min-width: 200px;
}
.svo-banner__title {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: var(--c-text);
  margin: 0 0 4px;
  line-height: 1.25;
}
.svo-banner__sub {
  font-size: .88rem;
  color: var(--c-gold);
  margin: 0;
  opacity: .9;
}
.svo-banner__btn {
  flex-shrink: 0;
}

/* ── Кнопка btn--svo ──────────────────────────────────────────── */
.btn--svo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--c-gold);
  color: var(--c-gold);
  font-family: var(--f-serif);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), box-shadow var(--t-base);
  text-decoration: none;
}
.btn--svo:hover {
  background: var(--c-gold);
  color: #0c0c0e;
  box-shadow: 0 0 20px var(--c-gold-glow);
}

/* ── Героический блок категории СВО ──────────────────────────── */
.page-hero--svo {
  background: linear-gradient(160deg, #1a1200 0%, #0c0c0e 50%, #0e100e 100%);
  border-bottom: 1px solid rgba(201,169,110,.2);
}
.page-hero--svo .page-hero__title {
  color: var(--c-gold-light);
}
.svo-hero-sub {
  color: var(--c-gold) !important;
  opacity: .9;
  margin-top: var(--space-xs);
  font-size: .9rem;
}

/* ── Адаптив баннера ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .svo-banner__inner { flex-direction: column; align-items: flex-start; }
  .svo-banner__badge { flex-direction: row; min-width: auto; }
  .svo-banner__btn { width: 100%; justify-content: center; }
}

/* ================================================================
   LOAD MORE — анимация появления новых карточек + кнопка
   ================================================================ */

/* fadeIn: плавное появление снизу */
@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card--animate {
  animation: cardFadeIn .38s ease both;
}

/* Обёртка кнопки «Показать ещё» */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl, 48px);
}

/* Кнопка в стиле сайта: тёмный фон + золотая рамка */
.load-more-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 40px;
  background: transparent;
  border: 2px solid var(--c-gold);
  border-radius: 4px;
  color: var(--c-gold);
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow: hidden;
}

/* Золотое свечение при наведении */
.load-more-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--c-gold) 0%, #a8833d 100%);
  opacity: 0;
  transition: opacity .22s ease;
  border-radius: 2px;
}

.load-more-btn:hover::before,
.load-more-btn:focus-visible::before {
  opacity: 1;
}

.load-more-btn:hover,
.load-more-btn:focus-visible {
  color: #0c0c0e;
  box-shadow: 0 0 24px var(--c-gold-glow, rgba(201,169,110,.35));
  outline: none;
}

.load-more-btn .load-more-btn__text {
  position: relative;
  z-index: 1;
}

.load-more-btn .load-more-btn__sub {
  position: relative;
  z-index: 1;
  font-family: sans-serif;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .65;
}

.load-more-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Мобильный: кнопка на всю ширину */
@media (max-width: 480px) {
  .load-more-btn {
    width: 100%;
    padding: 14px 20px;
  }
}

/* ================================================================
   CATALOG — КАРУСЕЛЬ КАТЕГОРИЙ, ВКЛАДКИ, INTERSECTION OBSERVER
   ================================================================ */

/* ── Карусель категорий (главная + каталог) ───────────────────── */
.cat-carousel {
  position: relative;
  overflow: hidden;
  margin: 0 -8px;
  padding-bottom: 4px; /* prevent nav-btn shadow clip */
}
.cat-carousel__track {
  display: flex;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.cat-carousel__track:active { cursor: grabbing; }
.cat-carousel__slide {
  padding: 0 8px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.cat-carousel__slide .cat-card { height: 100%; aspect-ratio: 3/4; }
.cat-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-surface-2, #1c1c1e);
  border: 1px solid var(--c-border, rgba(255,255,255,.12));
  color: var(--c-white);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background .2s, color .2s, opacity .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.cat-carousel__nav:hover { background: var(--c-gold); color: #0c0c0e; }
.cat-carousel__nav:disabled { opacity: .25; pointer-events: none; }
.cat-carousel__nav--prev { left: 4px; }
.cat-carousel__nav--next { right: 4px; }

/* ── Кнопка "Показать все категории" ─────────────────────────── */
.cat-expand-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl, 48px);
}
.cat-grid--full {
  margin-top: var(--space-xl, 48px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px)  { .cat-grid--full { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cat-grid--full { grid-template-columns: repeat(4, 1fr); } }

/* ── Вкладки страницы каталога ────────────────────────────────── */
.catalog-tabs-bar {
  background: var(--c-surface, #141416);
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,.08));
  position: sticky;
  top: 0;
  z-index: 20;
}
.catalog-tabs {
  display: flex;
}
.catalog-tab {
  position: relative;
  padding: 14px 24px;
  background: transparent;
  border: none;
  color: var(--c-text-2, rgba(255,255,255,.55));
  font-family: var(--f-serif, 'Oswald', sans-serif);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.catalog-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.catalog-tab--active,
.catalog-tab:hover { color: var(--c-white); }
.catalog-tab--active::after { transform: scaleX(1); }
.catalog-tab__badge {
  background: var(--c-gold);
  color: #0c0c0e;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0;
  font-family: sans-serif;
}

/* ── Intersection Observer — спиннер и конец списка ──────────── */
.io-sentinel {
  padding: 48px 0 24px;
  text-align: center;
  min-height: 80px;
}
.io-spinner {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.io-spinner span {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-gold);
  animation: ioBounce 1.2s ease-in-out infinite both;
}
.io-spinner span:nth-child(2) { animation-delay: .18s; }
.io-spinner span:nth-child(3) { animation-delay: .36s; }
@keyframes ioBounce {
  0%, 80%, 100% { transform: scale(.65); opacity: .4; }
  40%           { transform: scale(1);   opacity: 1;  }
}
.io-end {
  color: var(--c-text-2);
  font-size: .88rem;
  letter-spacing: .04em;
}