/* ============================================================
   ПРОБА 585 — светлый retail-дизайн по ТЗ (сайт2/3/4):
   «берём цвет основного фона у 585 Золотой», «скруглённые светлые контейнеры»,
   «чёрный преимущественно для типографики», «зелёный — фирменный action-color»,
   «СТА — красный», trust strip — на светло-зелёном фоне.
   Тёмным остаётся ТОЛЬКО ценовой блок: ТЗ требует белый шрифт и доминирующую цифру.
   ============================================================ */

html body .hero{
  background: var(--p-bg) !important;
  color: var(--p-ink) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 34px 0 40px !important;
}
/* тёмные подложки/градиенты старого героя */
html body .hero::before,
html body .hero::after{ display: none !important; }

/* --- типографика: чёрная --- */
html body .hero .hero-h1{ color: var(--p-ink) !important; }
html body .hero .hero-h1 .sub{ color: var(--p-ink-2) !important; font-weight: 600 !important; }
html body .hero .hero-left .pill.pill-neutral{
  background: #FFF !important; color: var(--p-green) !important;
  border: 1px solid var(--p-border) !important; box-shadow: var(--p-sh) !important;
}

/* --- быстрые якоря --- */
html body .hero .hero-quick a{
  color: var(--p-ink) !important;
  border-bottom-color: rgba(19,139,69,.45) !important;
}
html body .hero .hero-quick a:hover{ color: var(--p-green) !important; }

/* --- абзац и плашки-преимущества --- */
html body .hero .hero-pitch{ color: var(--p-ink-2) !important; }
html body .hero .usp-row .usp-card{
  background: #FFF !important; color: var(--p-ink) !important;
  border: 1px solid var(--p-border) !important; box-shadow: var(--p-sh) !important;
}
html body .hero .usp-row .usp-card .label{ color: var(--p-ink) !important; }
html body .hero .usp-row .usp-card .icon-square{
  background: var(--p-green-sf) !important; color: var(--p-green) !important; border-color: transparent !important;
}

/* --- три блока контактов: светлые карточки --- */
html body .hero .hero-contacts .hero-contact{
  background: #FFF !important;
  border: 1px solid var(--p-border) !important;
  box-shadow: var(--p-sh) !important;
  color: var(--p-ink) !important;
}
html body .hero .hero-contacts .hero-contact:hover{
  border-color: var(--p-green-2) !important; box-shadow: var(--p-sh-mid) !important;
}
html body .hero .hero-contact__body b{ color: var(--p-ink) !important; }
html body .hero .hero-contact__body em{ color: var(--p-ink-2) !important; }
html body .hero .hero-contact__ic{
  background: var(--p-green-sf) !important; color: var(--p-green) !important; border-color: transparent !important;
}
html body .hero .hero-contact--reserve{
  background: #FFF !important; border: 1px dashed var(--p-border) !important; box-shadow: none !important;
}

/* --- кнопки: зелёный action-color, вторая — контурная --- */
html body .hero .actions .btn.btn-primary{
  background: var(--p-green-2) !important; border-color: var(--p-green-2) !important; color: #FFF !important;
}
html body .hero .actions .btn.btn-primary:hover{ background: var(--p-green) !important; border-color: var(--p-green) !important; }
html body .hero .actions .btn.btn-secondary{
  background: #FFF !important; color: var(--p-ink) !important; border: 1px solid var(--p-border) !important;
}
html body .hero .actions .btn.btn-secondary:hover{ border-color: var(--p-green-2) !important; color: var(--p-green) !important; }
html body .hero .actions .btn.btn-max{
  background: #FFF !important; color: var(--p-ink) !important; border: 1px solid var(--p-border) !important;
}

/* --- ценовой блок остаётся тёмным (ТЗ: белый шрифт, цифра доминирует) --- */
html body .hero .hero-price{
  background: linear-gradient(135deg, #0F5A32 0%, #0B4527 100%) !important;
  color: #FFF !important;
  border-radius: var(--p-r-lg) !important;
  box-shadow: var(--p-sh-lg) !important;
  border: 0 !important;
}
html body .hero .hero-price__label{ color: rgba(255,255,255,.82) !important; }
html body .hero .hero-price__metal{ color: #FFF !important; }
html body .hero .hero-price__value,
html body .hero .hero-price__unit{ color: var(--p-gold) !important; }
html body .hero .hero-price__meta,
html body .hero .hero-price__note{ color: rgba(255,255,255,.78) !important; }
html body .hero .hero-price .pill.pill-accent{
  background: rgba(255,255,255,.14) !important; color: #FFF !important; border: 1px solid rgba(255,255,255,.22) !important;
}

/* --- trust strip: светло-зелёные скруглённые блоки (прямо по ТЗ) --- */
html body .hero .trust-strip{ gap: 10px !important; }
html body .hero .trust-strip__item{
  background: var(--p-green-sf) !important;
  border: 1px solid rgba(19,139,69,.14) !important;
  border-radius: var(--p-r) !important;
  color: var(--p-ink) !important;
  box-shadow: none !important;
}
html body .hero .trust-strip__item b{ color: var(--p-ink) !important; }
html body .hero .trust-strip__item em{ color: var(--p-ink-2) !important; }
html body .hero .trust-strip__ic{
  background: #FFF !important; color: var(--p-green) !important; border-color: transparent !important;
}

/* --- hero-media-column: фото было растянуто абсолютом на весь экран и красило hero в тёмный.
       По ТЗ фон светлый, а фото — скруглённый контейнер справа. --- */
html body .hero .hero-grid{
  grid-template-columns: 1.02fr .98fr !important;
  align-items: start !important;
  gap: 28px !important;
}
html body .hero .hero-media{
  position: static !important;
  width: auto !important; height: auto !important;
  inset: auto !important;
  background: transparent !important;
  margin: 0 !important;
}
html body .hero .hero-media__frame{
  position: relative !important;
  width: 100% !important; height: 100% !important;
  min-height: 520px !important;
  inset: auto !important;
  border-radius: var(--p-r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--p-sh-mid) !important;
  border: 1px solid var(--p-border) !important;
  background: #FFF !important;
}
html body .hero .hero-media__frame .hero-slides{ position: absolute !important; inset: 0 !important; }
html body .hero .hero-media__frame .hero-slide img,
html body .hero .hero-media__frame .hero-slide picture{
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}

/* --- закрытое мобильное меню давало горизонтальную прокрутку на десктопе --- */
html body{ overflow-x: hidden !important; }
@media (min-width: 992px){
  html body .m-drawer{ display: none !important; }
}

@media (max-width: 767px){
  html body .hero{ padding: 16px 0 26px !important; }
  html body .hero .hero-media{ display: none !important; }
}


/* hero-fix-2 */
/* frame стоял на height:100% у статичного родителя без высоты — фото схлопывалось */
html body .hero .hero-media__frame{
  height: 560px !important;
  min-height: 560px !important;
}
html body .hero .hero-media__frame .hero-slides{ position: absolute !important; inset: 0 !important; height: 100% !important; }
html body .hero .hero-media__frame .hero-slide{
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
}
html body .hero .hero-media__frame .hero-slide.is-active{ opacity: 1 !important; visibility: visible !important; }
html body .hero .hero-media__frame picture{ display: block !important; width: 100% !important; height: 100% !important; }
html body .hero .hero-media__frame img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* подзаголовок наезжал сам на себя */
html body .hero .hero-left .hero-h1 .sub{
  display: block !important;
  line-height: 1.5 !important;
  margin-top: 14px !important;
  font-size: 17px !important;
  letter-spacing: 0 !important;
}
@media (max-width:767px){
  html body .hero .hero-left .hero-h1 .sub{ font-size: 14.5px !important; line-height: 1.45 !important; }
}


/* hero-fix-3: .hero-grid был переведён в display:block (фото держалось на absolute).
   Возвращаем двухколоночную сетку: слева контент, справа фото. */
html body .hero .container{ height: auto !important; }
html body .hero .hero-grid{
  display: grid !important;
  grid-template-columns: 1.02fr .98fr !important;
  grid-template-rows: auto !important;
  align-items: start !important;
  gap: 28px !important;
  height: auto !important;
}
html body .hero .hero-left{
  grid-column: 1 !important; grid-row: 1 !important;
  height: auto !important; padding: 0 !important;
}
html body .hero .hero-media{
  grid-column: 2 !important; grid-row: 1 !important;
  display: block !important;
}
html body .hero .hero-media__frame{ position: sticky !important; top: 24px !important; }

@media (max-width: 991px){
  html body .hero .hero-grid{ grid-template-columns: 1fr !important; }
  html body .hero .hero-media{ grid-column: 1 !important; grid-row: 2 !important; }
  html body .hero .hero-media__frame{ position: relative !important; height: 320px !important; min-height: 320px !important; }
}


/* hero-fix-4: поджимаем первый экран, чтобы цена (главный conversion trigger по ТЗ) была видна целиком */
html body .hero{ padding-top: 24px !important; padding-bottom: 32px !important; }
html body .hero .hero-media__frame{ height: 468px !important; min-height: 468px !important; }
html body .hero .hero-media__frame img{ object-position: center center !important; }
html body .hero .hero-left .hero-quick{ margin: 14px 0 16px !important; }
html body .hero .hero-left .hero-contacts{ margin-bottom: 16px !important; }
html body .hero .hero-left .hero-h1{ margin-bottom: 0 !important; }


/* hero-fix-5: заголовок чуть компактнее — по ТЗ «короткие заголовки, цифры крупнее объяснений»,
   при этом красный CTA ценового блока поднимается в зону первого экрана. */
@media (min-width: 992px){
  html body .hero .hero-left .hero-h1{ font-size: clamp(30px, 3.3vw, 46px) !important; line-height: 1.08 !important; }
  html body .hero .hero-left .hero-h1 .sub{ font-size: 16px !important; margin-top: 12px !important; }
  html body .hero .hero-media__frame{ height: 430px !important; min-height: 430px !important; }
}


/* hero-fix-6: колонки грида не сжимались ниже min-content (620px) и распирали телефон */
html body .hero .hero-grid{
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
}
html body .hero .hero-left,
html body .hero .hero-media{ min-width: 0 !important; max-width: 100% !important; }

@media (max-width: 991px){
  html body .hero .hero-grid{ grid-template-columns: minmax(0, 1fr) !important; }
  html body .hero .container{ padding-left: 16px !important; padding-right: 16px !important; }
  html body .hero .hero-left > *,
  html body .hero .hero-price,
  html body .hero .hero-contacts{ max-width: 100% !important; }
}
@media (max-width: 767px){
  /* на телефоне фото не нужно: первый экран отдан цене (ТЗ сайт4) */
  html body .hero .hero-media{ display: none !important; }
}


/* hero-fix-7: hero больше не «колонка» — фото держит правую половину на всю высоту,
   trust strip и кнопки идут во всю ширину под ними. */
html body .hero .hero-grid{ align-items: stretch !important; row-gap: 22px !important; }
html body .hero .hero-left{ align-self: stretch !important; }

html body .hero .hero-media{ align-self: stretch !important; height: 100% !important; }
html body .hero .hero-media__frame{
  position: relative !important;
  top: auto !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* trust strip и кнопки — на всю ширину сетки */
html body .hero .hero-grid > .trust-strip,
html body .hero .hero-grid > .actions{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0 !important;
}
html body .hero .hero-grid > .trust-strip{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
html body .hero .hero-grid > .trust-strip .trust-strip__item{
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  gap: 6px !important; padding: 16px 18px !important; height: 100% !important;
}
html body .hero .hero-grid > .actions{
  display: flex !important; flex-wrap: wrap !important; gap: 12px !important;
}

@media (max-width: 991px){
  html body .hero .hero-grid > .trust-strip{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 767px){
  html body .hero .hero-grid > .trust-strip{ grid-template-columns: 1fr !important; gap: 8px !important; }
  html body .hero .hero-grid > .trust-strip .trust-strip__item{ padding: 12px 14px !important; }
  html body .hero .hero-grid > .actions .btn{ width: 100% !important; }
}


/* hero-fix-8: hero жил на своей сетке (контейнер во всю ширину, отступ внутри левой колонки),
   из-за чего вынесенные блоки прижались к краю, а контент не совпадал с остальными секциями.
   Переводим hero на общую сетку сайта. */
html body .hero > .container{
  max-width: 1264px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: auto !important;
}
html body .hero .hero-left{ padding-left: 0 !important; padding-right: 0 !important; }

/* фото в hero не должно обрезать смысловую часть кадра */
html body .hero .hero-media__frame img{ object-position: center center !important; }

@media (max-width: 767px){
  html body .hero > .container{ padding-left: 16px !important; padding-right: 16px !important; }
}


/* hero-fix-9: выравниваем hero ровно по сетке остальных секций (x = 88px при 1440) */
html body .hero > .container{ padding-left: 0 !important; padding-right: 0 !important; }
html body .hero .hero-left{
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}
@media (max-width: 1320px){
  html body .hero > .container{ padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 767px){
  html body .hero > .container{ padding-left: 16px !important; padding-right: 16px !important; }
}


/* hero-fix-10: анимация появления смещала левую колонку и заголовок наползал на фото */
html body .hero .hero-left,
html body .hero .hero-left[data-reveal],
html body .hero .hero-grid > [data-reveal]{
  transform: none !important;
  opacity: 1 !important;
}
html body .hero .hero-left{ overflow-wrap: break-word !important; }
html body .hero .hero-media__frame{ overflow: hidden !important; }


/* hero-fix-11: у .hero-grid оставался внутренний отступ слева — левая колонка уезжала
   на 124px и заголовок заходил под фото. */
html body .hero .hero-grid{ padding: 0 !important; }
html body .hero .hero-grid > .hero-left{ padding: 0 !important; margin: 0 !important; }
html body .hero .hero-h1{ max-width: 100% !important; }


/* hero-fix-12: у .hero-left был жёсткий сдвиг left:124px (остаток тёмного полноэкранного героя) —
   из-за него колонка уезжала вправо и заголовок лез под фото. */
html body .hero .hero-left{
  position: relative !important;
  left: auto !important; right: auto !important; top: auto !important;
  inset: auto !important;
}