/* ═══════════════════════════════════════════════════════
   MILOVI CAKE — Premium Overrides v1
   Загружается после style.css. Не ломает структуру.
   Цели:
   • убрать визуальный шум (infinite-анимации без триггера)
   • привести типографику к люкс-стандарту (no text-shadow на h1/h2,
     no font-weight 600+ в Cormorant Garamond)
   • нормализовать scroll-margin для всех якорей
   • добавить плавные появления и микро-интеракции
   • поднять контраст лейблов формы
   ═══════════════════════════════════════════════════════ */

/* ── Scroll-margin для всех якорей (header 72px + 16px воздуха) ── */
#home, #about, #catalog, #fillings, #calculator,
#reviews, #why, #contacts, #delivery {
  scroll-margin-top: 88px;
}
@media (max-width: 768px) {
  #home, #about, #catalog, #fillings, #calculator,
  #reviews, #why, #contacts, #delivery {
    scroll-margin-top: 76px;
  }
}

/* ── Типографика заголовков: убрать тени, оставить тонкую разрядку ── */
h1, h2 {
  text-shadow: none !important;
  letter-spacing: -0.022em;
}
h3, h4 {
  text-shadow: none !important;
}

/* ── Cormorant Garamond: максимум 500 на крупных размерах ── */
.cart-line-total,
.cart-inline-total,
.modal-review-avatar,
.review-quote,
.cart-total .total-val,
.cart-count-badge {
  font-weight: 500;
}
.calc-result-price,
.calc-result-collapsed-price,
.stat-num,
.stat-text-title {
  font-weight: 500; /* было 600 */
}
.review-text {
  text-shadow: none; /* убираем «выпуклый» эффект */
  font-weight: 500;
}
.map-score-num {
  font-weight: 500;
}

/* ── Sticky CTA на мобильном: премиум-вариант (без uppercase-крика) ── */
.mobile-sticky-cta {
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  font-size: 15px !important;
}

/* ── Лейблы формы: чуть больше контраста (всё ещё мутно, но читаемо) ── */
.form-group label,
.form-group .calc-label,
.calc-row label,
.calc-row .calc-label {
  color: var(--brown-light, #6b4c38);
  font-weight: 400;
}

/* ── Премиум-кнопки: убираем infinite shimmer, оставляем только on-hover ── */
.btn-primary::before,
.btn-wa::before,
.calc-order-btn::before,
.header-order::before {
  animation: none !important;
}
.btn-primary:hover::before,
.btn-wa:hover::before,
.calc-order-btn:hover::before,
.header-order:hover::before {
  animation: shimmerBtnOnce 1.1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes shimmerBtnOnce {
  0%   { left: -120%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 160%;  opacity: 0; }
}

/* ── Цены: убираем infinite glow, оставляем только on-hover ── */
.product-card.in-view .price,
.product-card.visible .price,
.product-card .price {
  animation: none !important;
}
@media (hover: hover) {
  .product-card:hover .price {
    animation: priceGlowOnce 1.4s ease-out both;
  }
}
@keyframes priceGlowOnce {
  0%   { text-shadow: 0 0 8px  rgba(201,147,74,0.20); }
  60%  { text-shadow: 0 0 22px rgba(201,147,74,0.55), 0 0 44px rgba(201,147,74,0.15); }
  100% { text-shadow: 0 0 12px rgba(201,147,74,0.30); }
}

/* Калькулятор: цена без infinite пульсации */
.calc-result-price {
  animation: none !important;
}
.calc-result:hover .calc-result-price {
  filter: drop-shadow(0 0 14px rgba(201,147,74,0.35));
  transition: filter .35s ease;
}

/* ── Section title: убираем infinite shimmer, оставляем только при появлении ── */
.section-title.visible::before {
  animation: titleShimmerOnce 1.6s ease-out 0.2s both !important;
}
@keyframes titleShimmerOnce {
  0%   { left: -80%;  opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* ── Hero-orbs: только на десктопе с реальным hover ── */
@media (max-width: 900px), (hover: none) {
  .hero-orb-1,
  .hero-orb-2,
  .hero-orb-3 {
    animation: none !important;
    opacity: 0.6;
  }
}

/* ── Hero мессенджеры: убираем infinite breathe (оставляем только hover-glow) ── */
.btn-hero-wa,
.btn-hero-tg,
.btn-hero-max {
  animation: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .btn-hero-wa:hover {
    box-shadow: 0 6px 20px rgba(37,211,102,0.18);
    border-color: rgba(37,211,102,0.55);
  }
  .btn-hero-tg:hover {
    box-shadow: 0 6px 20px rgba(42,171,238,0.20);
    border-color: rgba(42,171,238,0.60);
  }
  .btn-hero-max:hover {
    box-shadow: 0 6px 20px rgba(107,78,255,0.20);
    border-color: rgba(107,78,255,0.60);
  }
}

/* ── Lightbox: премиум-плавность, но не «зависание» на мобильных ── */
.lb-box {
  transition:
    transform 0.55s cubic-bezier(0.4,0,0.2,1),
    opacity   0.4s ease,
    filter    0.55s cubic-bezier(0.4,0,0.2,1) !important;
  filter: blur(14px) !important;
}
.lb-overlay.active .lb-box {
  filter: blur(0px) !important;
}
@media (max-width: 768px) {
  .lb-box {
    transition:
      transform 0.36s cubic-bezier(0.4,0,0.2,1),
      opacity   0.28s ease,
      filter    0.36s ease !important;
    filter: blur(8px) !important;
  }
}

/* ── Reveal-fallback: если IntersectionObserver не успел / отключён ── */
@keyframes revealFallback {
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: revealFallback 0.6s ease-out 1.6s both;
}
.reveal.visible {
  animation: none;
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Reveal-задержки на каталоге: ускорить ── */
.product-card.reveal:nth-child(1) { transition-delay: 0s; }
.product-card.reveal:nth-child(2) { transition-delay: 0.05s; }
.product-card.reveal:nth-child(3) { transition-delay: 0.10s; }
.product-card.reveal:nth-child(4) { transition-delay: 0.15s; }
.product-card.reveal:nth-child(5) { transition-delay: 0.20s; }
.product-card.reveal:nth-child(6) { transition-delay: 0.25s; }

/* ── Тени карточек: чуть мягче для люкс-восприятия ── */
.cart-drawer.open {
  box-shadow:
    -8px 0 40px rgba(0,0,0,0.14),
    0 0 0 1px rgba(201,147,74,0.10);
}
@media (min-width: 769px) {
  .cart-drawer.open {
    box-shadow:
      0 32px 80px rgba(61,43,31,0.14),
      0 8px 24px rgba(61,43,31,0.08),
      0 0 0 1px rgba(201,147,74,0.10) !important;
  }
}

/* Review card: убрать «выпуклую» vignette */
.review-card::after {
  background: radial-gradient(ellipse 110% 100% at 50% 50%,
              transparent 60%, rgba(55,28,8,0.05) 100%) !important;
}

/* ── About-блоки: эмодзи в палитре ── */
.about-emoji {
  filter: grayscale(0.15) sepia(0.20) hue-rotate(-12deg) saturate(1.05);
}

/* ── Premium scroll padding на html для нативного scroll ── */
html {
  scroll-padding-top: 88px;
}

/* ── Премиум фокус-стиль ── */
:focus-visible {
  outline-color: var(--gold);
  outline-offset: 3px;
}

/* ── Мини-фикс: header-trust-num на 500 вместо 600 ── */
.header-trust-num {
  font-weight: 500;
}

/* ── Cookie-баннер кнопки: вес 500 ── */
#cookieAccept {
  font-weight: 500;
}

/* ── Avatar в отзывах: вес 500 ── */
.modal-review-avatar {
  font-weight: 500;
}

/* ── Кнопка add-btn-badge — допустимо 600 (мелкая цифра), оставляем ── */
/* ── Tag .badge-logo-y .badge-logo-gfb — 700 в маленьком кружке ок ── */

/* ═══════════════════════════════════════════════════════
   MERINGUE-ROLL: блок «Доставка по 14 пригородам»
   ═══════════════════════════════════════════════════════ */
.mr-cities {
  padding: 56px 24px 64px;
  background: linear-gradient(180deg, var(--cream, #f5f0e8) 0%, var(--cream-dark, #ede5d5) 100%);
}
.mr-cities__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.mr-cities__eyebrow {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #c9934a);
  margin-bottom: 14px;
}
.mr-cities__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 500;
  color: var(--brown, #3d2b1f);
  margin: 0 0 12px;
  letter-spacing: -0.012em;
}
.mr-cities__sub {
  font-size: 15px;
  color: var(--text-muted, #9a7a62);
  font-weight: 300;
  line-height: 1.7;
  margin: 0 auto 32px;
  max-width: 560px;
}
.mr-cities__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.mr-city-tag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(201,147,74,0.18);
  border-radius: 14px;
  text-decoration: none;
  color: var(--brown, #3d2b1f);
  font-family: 'Jost', sans-serif;
  transition:
    transform 0.32s cubic-bezier(.34,1.56,.64,1),
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}
.mr-city-tag:hover {
  transform: translateY(-3px);
  border-color: var(--gold, #c9934a);
  background: #fff;
  box-shadow: 0 10px 28px rgba(201,147,74,0.16);
}
.mr-city-tag__name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.mr-city-tag__price {
  font-size: 12px;
  color: var(--text-muted, #9a7a62);
  letter-spacing: 0.04em;
}
.mr-city-tag:hover .mr-city-tag__price {
  color: var(--gold, #c9934a);
}
.mr-cities__note {
  font-size: 13px;
  color: var(--text-muted, #9a7a62);
  font-weight: 300;
  margin-top: 14px;
  line-height: 1.6;
}
.mr-cities__note a {
  color: var(--gold, #c9934a);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,147,74,0.4);
  transition: border-color .25s, color .25s;
}
.mr-cities__note a:hover {
  color: #a87030;
  border-color: var(--gold, #c9934a);
}
@media (max-width: 600px) {
  .mr-cities {
    padding: 44px 18px 52px;
  }
  .mr-cities__grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mr-city-tag {
    padding: 12px 14px;
    border-radius: 12px;
  }
}

/* Подсветка целевого города при ?city=slug */
.mr-city-tag.is-target {
  background: linear-gradient(135deg, rgba(201,147,74,0.12), rgba(201,147,74,0.04));
  border-color: var(--gold, #c9934a);
  box-shadow: 0 8px 28px rgba(201,147,74,0.18);
}

/* ═══════════════════════════════════════════════════════
   PRIGORODY: персонализация meringue-promo через data-city
   ═══════════════════════════════════════════════════════ */
.meringue-promo[data-city] .meringue-promo__city {
  font-weight: 500;
  color: var(--gold, #c9934a);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   PRIGORODY: облегчение - убрать тяжёлые эффекты на лёгких страницах
   ═══════════════════════════════════════════════════════ */
.prigorody-page .hero-orb {
  display: none;
}

/* ═══════════════════════════════════════════════════════
   ПРЕМИУМ-ДЕТАЛИ: декоративный gold-shimmer для header при scroll
   ═══════════════════════════════════════════════════════ */
.site-header.scrolled::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(201,147,74,0.45) 50%,
              transparent 100%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   ПРЕМИУМ: form input/textarea - тонкий gold-glow на focus
   ═══════════════════════════════════════════════════════ */
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--gold, #c9934a) !important;
  box-shadow:
    0 0 0 3px rgba(201,147,74,0.10),
    0 6px 18px rgba(201,147,74,0.08) !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.4s cubic-bezier(.16,1,.3,1) !important;
}

/* ═══════════════════════════════════════════════════════
   PERFORMANCE: контентная видимость для тяжёлых секций ниже fold
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1px) {
  #fillings, #reviews, #why, #contacts {
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
  }
}

/* Reduce motion safety net for new animations */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover::before,
  .btn-wa:hover::before,
  .calc-order-btn:hover::before,
  .header-order:hover::before,
  .product-card:hover .price,
  .section-title.visible::before {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   PRIGORODY: meringue-promo полная стилизация (раньше отсутствовала)
   ═══════════════════════════════════════════════════════ */
.meringue-promo {
  background: linear-gradient(135deg, #faf6ef 0%, #f3e8d5 100%);
  padding: 36px 24px;
  position: relative;
  overflow: hidden;
}
.meringue-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,147,74,0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(201,147,74,0.06), transparent 50%);
  pointer-events: none;
}
.meringue-promo .container {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.meringue-promo__text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.65;
  color: var(--brown, #3d2b1f);
  text-align: center;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.meringue-promo__link {
  color: var(--gold, #c9934a);
  text-decoration: none;
  border-bottom: 1px dashed rgba(201,147,74,0.5);
  transition: color .25s ease, border-color .25s ease;
  font-weight: 500;
}
.meringue-promo__link:hover {
  color: #a87030;
  border-bottom-color: var(--gold, #c9934a);
  border-bottom-style: solid;
}
.meringue-promo__city {
  display: inline-block;
  color: var(--gold, #c9934a);
  font-weight: 500;
  font-style: italic;
  white-space: nowrap;
  position: relative;
}
.meringue-promo__city::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,147,74,0.5), transparent);
}
@media (max-width: 600px) {
  .meringue-promo {
    padding: 28px 18px;
  }
  .meringue-promo__text {
    font-size: 16px;
  }
}

/* ── fill-desc-panel: компактная таблетка по центру ── */
.fill-desc-panel {
  width: fit-content;
  max-width: 100%;
  margin: 6px auto 0;
  padding: 5px 14px;
  background: transparent;
  border: 1px solid rgba(201, 147, 74, 0.22);
  border-radius: 50px;
  min-height: auto;
  text-align: center;
}
.fill-desc-text {
  font-size: 11px;
  font-weight: 300;
  color: var(--text-muted, #9a7a62);
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: normal;
  text-align: center;
}
