/* ═══════════════════════════════════════════════════════════════════
   Milovi Cake — final surgical fixes v21
   ДОЛЖЕН подключаться последним. Исправляет hero CTA, WA/TG/MAX labels,
   dark hero, prigorody FAQ/delivery. Галерею не ломает.
   ═══════════════════════════════════════════════════════════════════ */

/* 1) HERO CTA под блоком “Изготовление / Доставка / Натуральные продукты”.
   Полностью убираем внутреннюю рамку: старые ::before/::after, conic-ring,
   shimmer, ripple/gold-ripple визуальные круги и inner outline. */
.hero .btn-primary.btn-primary--hero,
.hero-actions .btn-primary.btn-primary--hero,
:root:not([data-theme="dark"]) .hero .btn-primary.btn-primary--hero,
html:not([data-theme="dark"]) .hero .btn-primary.btn-primary--hero,
[data-theme="dark"] .hero .btn-primary.btn-primary--hero {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  outline: 0 !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(201,147,74,.24) !important;
}

.hero .btn-primary.btn-primary--hero::before,
.hero .btn-primary.btn-primary--hero::after,
.hero-actions .btn-primary.btn-primary--hero::before,
.hero-actions .btn-primary.btn-primary--hero::after,
.hero .btn-primary.btn-primary--hero:hover::before,
.hero .btn-primary.btn-primary--hero:hover::after,
.hero-actions .btn-primary.btn-primary--hero:hover::before,
.hero-actions .btn-primary.btn-primary--hero:hover::after,
.hero .btn-primary.btn-primary--hero:focus::before,
.hero .btn-primary.btn-primary--hero:focus::after,
.hero .btn-primary.btn-primary--hero:active::before,
.hero .btn-primary.btn-primary--hero:active::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  inset: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: none !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.hero .btn-primary.btn-primary--hero .ripple-circle,
.hero .btn-primary.btn-primary--hero .gold-ripple-circle,
.hero-actions .btn-primary.btn-primary--hero .ripple-circle,
.hero-actions .btn-primary.btn-primary--hero .gold-ripple-circle {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

/* Перебиваем mc-2026.css: :root:not([data-theme="dark"]) .btn-primary:hover */
:root:not([data-theme="dark"]) .hero .btn-primary.btn-primary--hero:hover,
html:not([data-theme="dark"]) .hero .btn-primary.btn-primary--hero:hover,
[data-theme="dark"] .hero .btn-primary.btn-primary--hero:hover,
.hero .btn-primary.btn-primary--hero:hover {
  background: var(--gold-light, #d4a76a) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    0 16px 36px rgba(201,147,74,.30),
    0 5px 14px rgba(61,43,31,.12) !important;
}

.hero .btn-primary.btn-primary--hero:focus:not(:focus-visible),
.hero-actions .btn-primary.btn-primary--hero:focus:not(:focus-visible) {
  outline: 0 !important;
}
.hero .btn-primary.btn-primary--hero:focus-visible {
  outline: 2px solid var(--gold-light, #e8b87a) !important;
  outline-offset: 5px !important;
}
@media (prefers-contrast: more) {
  .hero .btn-primary.btn-primary--hero,
  .hero .btn-primary.btn-primary--hero:hover {
    outline: 0 !important;
    outline-offset: 5px !important;
  }
}

/* 2) Hero WA / TG / MAX: увеличиваем именно всплывающую ВВЕРХ надпись.
   Расстояние подъёма и размер иконок не меняем. */
.hero-actions .btn-hero-messenger .hero-flat-text,
.hero-actions .btn-hero-messenger [id^="flat-text-"] {
  font-size: 13.2px !important;
  font-weight: 700 !important;
  letter-spacing: .15px !important;
  opacity: 0 !important;
  paint-order: stroke fill !important;
  stroke: rgba(8,5,2,.26) !important;
  stroke-width: .42px !important;
  transform-origin: 24px 10px !important;
  transition: opacity .28s ease, transform .42s cubic-bezier(.16,1,.3,1) !important;
}
@media (hover:hover) and (pointer:fine) {
  .hero-actions .btn-hero-messenger:hover .hero-flat-text,
  .hero-actions .btn-hero-messenger:hover [id^="flat-text-"] {
    opacity: 1 !important;
    transform: translateY(-13px) scale(1.06) !important;
  }
  .hero-actions .btn-hero-messenger:hover .hero-ring-text,
  .hero-actions .btn-hero-messenger:hover [id^="ring-text-"] {
    opacity: 0 !important;
    transform: translateY(-12px) rotate(-18deg) scale(.94) !important;
  }
}

/* MAX icon: original direct glyph, centered inside the ring */
.hero-actions .btn-hero-max > svg > g {
  transform: translate(6px, 3.5px) scale(0.27) !important;
  transform-origin: 0 0 !important;
  transform-box: view-box !important;
}

/* 3) Галерея — страховка прелоадера */
#preloader.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 4) Тёмная тема hero — убираем чёрный прямоугольник */
[data-theme="dark"] .hero-content::before,
[data-theme="dark"] .hero-content::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
}

/* 5) Пригороды: delivery glassmorphism без “коробочных” рамок */
/* ЕДИНСТВЕННОЕ определение dark .delivery-card (consolidated, удалены дубли из v20-fixes.css и premium-overrides.css) */
[data-theme="dark"] .delivery-card {
  border: 1px solid rgba(212,167,106,.15) !important;
  background: rgba(26,17,8,.88) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(12px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
}
[data-theme="dark"] .delivery-card::before,
[data-theme="dark"] .delivery-card::after {
  content: none !important;
  display: none !important;
}
.faq-list,
.delivery-faq,
.faq-item,
.faq-answer {
  visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════════
   v22 micro-fixes
   1) WA/TG/MAX labels: same size, shorter flight.
   2) MAX glyph: force centered normalized SVG mark.
   3) Hero subtitle: keep synesthesia hover, do NOT dim other words.
   ═══════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine) {
  .hero-actions .btn-hero-messenger:hover .hero-flat-text,
  .hero-actions .btn-hero-messenger:hover [id^="flat-text-"] {
    /* было -13px — чуть ближе к кружку */
    transform: translateY(-10.5px) scale(1.055) !important;
  }
  .hero-actions .btn-hero-messenger:hover .hero-ring-text,
  .hero-actions .btn-hero-messenger:hover [id^="ring-text-"] {
    transform: translateY(-9.5px) rotate(-18deg) scale(.94) !important;
  }
}

/* Не затемнять соседние слова в hero subtitle. Hover-слово остаётся с эффектом. */
.hero-subtitle .w,
.hero-subtitle .w.near,
.hero-subtitle:hover .w,
.hero-subtitle:hover .w:not(:hover) {
  opacity: 1 !important;
  filter: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}
@media (hover:hover) and (pointer:fine) {
  .hero-subtitle .w:hover {
    transform: scaleY(1.08) translateY(-1px) !important;
    color: rgba(160, 210, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(160, 210, 255, 0.82) !important;
  }
  .hero-subtitle .w.near:not(:hover) {
    transform: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v23 — Hero heading & suburb fixes (rev3)
   1) Hero subtitle: smooth whole-text stretch instead of per-word blue.
   2) Suburb hero h1: multi-line layout, city bluish italic, blue "от", interactive brand.
   3) .hero-title-brand: interactive stretch (no glare).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1) Hero subtitle: smooth whole-text stretch, kill per-word blue ── */
/* Note: premium-overrides.css R5 has .hero-subtitle:hover { transform: translateX(4px) !important }
   Since final-fixes.css loads last, same-specificity !important rules here win. */
.hero-subtitle {
  display: inline-block;
  transform-origin: left center; /* match R5 origin */
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              letter-spacing 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              text-shadow 0.45s ease;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .hero-subtitle:hover {
    transform: scaleX(1.018) scaleY(1.018) !important; /* important: overrides R5 translateX */
    color: rgba(255, 238, 205, 0.92) !important;        /* warm, not dark; overrides R5 */
    letter-spacing: 0.035em;
    text-shadow: 0 0 18px rgba(201,147,74,0.22) !important;
  }
}
.hero-subtitle .w,
.hero-subtitle .w.near,
.hero-subtitle:hover .w,
.hero-subtitle:hover .w:not(:hover) {
  transition: none !important;
  transform: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  opacity: 1 !important;
  filter: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .hero-subtitle .w:hover,
  .hero-subtitle .w.near:not(:hover) {
    transform: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
  }
}

/* ── 2) Suburb hero h1: multi-line structured layout ── */
.hero-title--geo {
  line-height: 1.2;
}

/* All lines blue by default inside geo h1 */
.hero-title--geo .hero-title-line {
  color: rgba(140, 195, 240, 0.88);
  -webkit-text-fill-color: rgba(140, 195, 240, 0.88);
}
[data-theme="dark"] .hero-title--geo .hero-title-line {
  color: rgba(140, 200, 245, 0.82);
  -webkit-text-fill-color: rgba(140, 200, 245, 0.82);
}

/* "в Мурино" — bluish italic */
.hero-title-line--city {
  display: block;
  font-style: italic;
  transition: color 0.4s ease,
              -webkit-text-fill-color 0.4s ease,
              text-shadow 0.4s ease,
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .hero-title-line--city:hover {
    color: rgba(100, 180, 245, 1);
    -webkit-text-fill-color: rgba(100, 180, 245, 1);
    text-shadow: 0 0 14px rgba(100, 180, 245, 0.35);
    transform: scaleX(1.015);
  }
}

/* "от" — same blue, no italic, subtle */
.hero-title-line--accent {
  display: block;
  transition: color 0.4s ease, -webkit-text-fill-color 0.4s ease;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .hero-title-line--accent:hover {
    color: rgba(140, 195, 240, 0.92);
    -webkit-text-fill-color: rgba(140, 195, 240, 0.92);
  }
}

/* ── 3) .hero-title-brand: interactive stretch (no glare) ── */
.hero-title .hero-title-brand {
  display: inline;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              letter-spacing 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              text-shadow 0.45s ease;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .hero-title .hero-title-brand:hover {
    transform: scaleX(1.035) scaleY(1.025);
    letter-spacing: 0.04em;
    text-shadow: 0 0 22px rgba(201,147,74,0.35);
  }
}
@media (hover: none) {
  .hero-title .hero-title-brand:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-subtitle,
  .hero-title .hero-title-brand,
  .hero-title-line--city,
  .hero-title-line--accent {
    transition: none !important;
  }
  .hero-subtitle:hover,
  .hero-title .hero-title-brand:hover,
  .hero-title-line--city:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v24 — Professional fixes (r40) — 2026-05-19
   1) City hero: padding-top compensates for header-city full height.
   2) hero-subtitle: zero wave-text colour effects, stretch only.
   3) hero-title--geo: compact size, .hero-title-line--brand styling.
   4) header-logo-sub city: brand tagline, no "Главная".
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1) City pages: push hero content below fixed header (72px row + ~40px crumb) ── */
.site-header.header-city ~ main > .hero {
  padding-top: 112px !important;
  /* important: inline style="padding-top:0" removed from template r40 */
}
@media (max-width: 900px) {
  .site-header.header-city ~ main > .hero {
    padding-top: 100px !important; /* 64px hdr-main-row + ~36px crumb */
  }
}
@media (max-width: 768px) {
  .site-header.header-city ~ main > .hero {
    /* Mobile: flex-column layout — photo-bg first, hero-content below.
       Header overlaps the photo naturally (by design). No padding needed.
       important: v24 wrongly added 90px here, creating white gap. */
    padding-top: 0 !important;
    padding-bottom: 0 !important; /* hero-content has own 40px bottom padding */
  }
}

/* ── 2) hero-subtitle: FULL wave-text kill — whole-element stretch only ── */
/* All word-level effects (color, opacity, transform) killed for .hero-subtitle.
   Whole-element hover stretch from v23 stays intact. */
.hero-subtitle .w,
.hero-subtitle .w.near,
.hero-subtitle .w:hover,
.hero-subtitle .w.w-auto,
.hero-subtitle .w.w-auto-near,
.hero-subtitle:hover .w,
.hero-subtitle:hover .w.near,
.hero-subtitle:hover .w:hover,
.hero-subtitle:hover .w.w-auto,
.hero-subtitle:hover .w.w-auto-near {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
  transition: none !important;
  animation: none !important;
}

/* ── 3) hero-title--geo: tighter, 3-line layout ── */
.hero-title--geo {
  font-size: clamp(38px, 4.6vw, 66px) !important;
  line-height: 1.08 !important;
  margin-bottom: 16px !important;
}
/* "от Milovi Cake" combined line: warm gold, no italic */
.hero-title-line--brand {
  display: block;
  font-style: normal;
  color: rgba(245, 225, 175, 0.82) !important;
  -webkit-text-fill-color: rgba(245, 225, 175, 0.82) !important;
  transition: color 0.4s ease,
              -webkit-text-fill-color 0.4s ease,
              transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-theme="dark"] .hero-title-line--brand {
  color: rgba(248, 232, 195, 0.78) !important;
  -webkit-text-fill-color: rgba(248, 232, 195, 0.78) !important;
}
@media (hover: hover) and (pointer: fine) {
  .hero-title-line--brand:hover {
    transform: scaleX(1.012);
    color: rgba(248, 230, 190, 0.95) !important;
    -webkit-text-fill-color: rgba(248, 230, 190, 0.95) !important;
  }
}
/* Tighten gap between lines inside geo-hero */
.hero-title--geo .hero-title-line,
.hero-title--geo .hero-title-line--city,
.hero-title--geo .hero-title-line--brand {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ── 4) header-logo-sub in city mode: ensure brand tone ── */
.site-header.header-city .header-logo-sub {
  color: rgba(255, 235, 185, 0.38) !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  text-transform: lowercase !important;
}
.site-header.header-city.scrolled .header-logo-sub {
  color: rgba(201, 147, 74, 0.55) !important;
}

/* ── Reduced-motion: no transforms on geo lines ── */
@media (prefers-reduced-motion: reduce) {
  .hero-title-line--brand {
    transition: none !important;
  }
  .hero-title-line--brand:hover {
    transform: none !important;
  }
}