html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  min-width: 0;
}

/* Правка A4: шапку закрепляем (было position:relative). Скроллится body, а не
   html, поэтому sticky считается от него — top:0 работает и на мобиле. */
.site-header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  z-index: 50 !important;
}

/* --- Шапка: навигационные кнопки (чтобы читались как кнопки) --- */
.site-nav-btn {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #3C443B;
  padding: 8px 15px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.site-nav-btn:hover {
  background: rgba(28, 59, 46, 0.09);
  color: #16271E;
  border-color: rgba(28, 59, 46, 0.18);
}
.site-nav-btn:active { transform: translateY(1px); }

/* Активная вкладка = текущая страница */
.site-nav--services .nav-services,
.site-nav--materials .nav-materials,
.site-nav--projects .nav-projects,
.site-nav--constructor .nav-constructor {
  background: #1C3B2E;
  color: #F3F0E8;
  border-color: #1C3B2E;
}
.site-nav--services .nav-services:hover,
.site-nav--materials .nav-materials:hover,
.site-nav--projects .nav-projects:hover,
.site-nav--constructor .nav-constructor:hover {
  background: #16311F;
  color: #F3F0E8;
  border-color: #16311F;
}

/* --- Кнопка «На главную» на под-страницах --- */
.btn-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid #DDD7C9;
  color: #1C3B2E;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-home:hover {
  background: #F3F0E8;
  border-color: #C9A86A;
  box-shadow: 0 2px 10px rgba(15, 33, 24, 0.08);
}
.btn-home--ghost {
  background: transparent;
  color: #F3F0E8;
  border-color: rgba(243, 240, 232, 0.4);
}
.btn-home--ghost:hover {
  background: rgba(243, 240, 232, 0.1);
  border-color: rgba(243, 240, 232, 0.7);
  box-shadow: none;
}

/* Логотип — визуально кликабелен (ведёт на главную) */
.site-brand { transition: opacity .15s ease; }
.site-brand:hover { opacity: 0.72; }

/* Сетка проектов — адаптив (страница «Проекты») */
@media (max-width: 900px) {
  .home-projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .home-projects-grid { grid-template-columns: 1fr !important; }
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* Слой «после» показывается на всех экранах — с 01.08 герой везде собран из
   двух кадров, а не из видео на десктопе (см. блок «Герой: до → после» ниже). */
.hero-mobile-motion {
  display: block;
}

.project-macro-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2.4vw, 30px) !important;
}

.project-macro-grid image-slot[shape="rounded"],
.project-macro-grid image-slot[classname="project-macro-media"] {
  height: clamp(300px, 25vw, 340px) !important;
}

.home-planning-card,
.home-drainage-card,
.home-paving-card,
.home-terraces-card,
.home-gabions-card,
.home-assembly-card,
.home-pool-card,
.home-banya-card,
.home-rockery-card {
  min-width: 0;
}

.home-planning-media,
.home-drainage-media,
.home-paving-media,
.home-terraces-media,
.home-gabions-media,
.home-assembly-media,
.home-pool-media,
.home-banya-media,
.home-rockery-media,
image-slot[id^="home-paving-"],
image-slot[id^="home-terraces-"],
image-slot[id^="home-gabions-"],
image-slot[id^="home-assembly-"],
image-slot[id^="home-pool-"],
image-slot[id^="home-banya-"],
image-slot[id^="home-rockery-"] {
  --image-slot-rect-right: 0px;
}

button,
a,
input,
select,
textarea,
label {
  max-width: 100%;
}

main,
section,
footer,
header,
main > div,
section > div {
  min-width: 0;
}

@media (max-width: 1100px) {
  header {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 12px 16px !important;
    gap: 10px 14px !important;
  }

  header > nav {
    order: 3 !important;
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 2px !important;
    scrollbar-width: none;
  }

  header > nav::-webkit-scrollbar {
    display: none;
  }

  header > div:last-child {
    margin-left: auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    max-width: calc(100vw - 32px) !important;
  }

  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="grid-template-columns:1.6fr 1fr auto auto"] {
    grid-template-columns: minmax(0, 1fr) minmax(130px, .55fr) auto !important;
  }

  input,
  select,
  textarea,
  label {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 1024px) {
  #siteBg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 100svh !important;
    min-height: 760px !important;
    /* Кадр «до» лежит отдельным слоем <img id="heroBefore"> — так обе картинки
       героя масштабируются одинаково (object-fit:cover на одном и том же боксе)
       и гарантированно совпадают. CSS-фоном этого добиться нельзя: background-size
       и object-fit считают «cover» по-разному на нецелых плотностях. */
    background: #13241B !important;
  }

}

/* ---------- Герой: «до» → «после» (правка 01.08, 3-я итерация) ----------
   Два кадра одного и того же вида, геометрически совмещённые (см. большой
   комментарий у разметки в index.html). Верхний слой — готовый участок —
   просто проявляется поверх нижнего. Только opacity: ни transform, ни маски,
   ни изменения размеров — двигаться нечему, поэтому нет ни зума, ни рывков,
   и браузер отдаёт переход композитору.

   Сделано ПЕРЕХОДОМ, а не @keyframes, и это принципиально. Пока анимация в
   состоянии running, вычисленный opacity берётся из неё, а не из базового
   значения: стоит браузеру притормозить тики (фоновая вкладка, экономия
   батареи, герой вне вьюпорта при восстановлении скролла) — кадр застревал
   на 0% и фон пропадал совсем. Здесь базовое состояние всегда «видно»:
   прозрачность включает скрипт внизу index.html ровно на один проход и
   снимает её по таймеру-страховке, поэтому застрять на нуле нечему. */
#heroBefore,
#heroMobileMotion {
  display: block;
  visibility: visible;
}

/* Горизонтальная посадка кадра на телефоне (правка 01.08 по замечанию
   «дом миллиметра на три ближе к левому краю, чем к правому»).

   Портретный экран уже кадра (390x844 это 0.462 против 0.596 у файла), поэтому
   object-fit:cover показывает 77.5% ширины и режет бока — при центровке окно
   стоит на 11.25%..88.75%. Сдвигаем окно влево на 3.5% ширины файла, кадр на
   экране уезжает вправо примерно на 4.5% ширины экрана — те самые ~3 мм.
   Ход по p ограничен: обрезается всего 22.5% ширины, поэтому 50% -> 34.5%
   по object-position дают всего 4.5% сдвига на экране.

   ОБА слоя обязаны иметь ОДНО значение: разные object-position — это разный
   crop, и кадры «до»/«после» разъедутся при перетекании, ровно та жалоба,
   с которой начиналась история (см. комментарий у разметки в index.html).
   Десктопной пары правило не касается: <picture> отдаёт её от 1025px. */
@media (max-width: 1024px) {
  #heroBefore,
  #heroMobileMotion {
    object-position: 34.5% 50% !important;
  }
}

#heroMobileMotion {
  opacity: 1;
}

/* Взведённое состояние: кадр «после» спрятан, виден пустой участок. */
#heroMobileMotion.hero-reveal-arm {
  opacity: 0;
}

/* Проход: готовый участок проявляется поверх пустого. Кривая почти линейная —
   как обычный кросс-диссолв в монтаже. Ease-out тут не годится: он проскакивает
   больше половины прозрачности за первую четверть времени, и вторая картинка
   как будто «подставляется», а не перетекает. */
#heroMobileMotion.hero-reveal-run {
  opacity: 1;
  transition: opacity 1600ms cubic-bezier(.45, .05, .55, .95) !important;
}

/* Без анимации: дом сразу на месте. */
@media (prefers-reduced-motion: reduce) {
  #heroMobileMotion.hero-reveal-arm,
  #heroMobileMotion.hero-reveal-run {
    opacity: 1;
    transition: none !important;
  }
}

@media (max-width: 760px) {
  header {
    padding: 10px 12px !important;
  }

  header > button:first-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  header > button:first-child > span:last-child,
  header > button:first-child > span:last-child span {
    min-width: 0 !important;
    white-space: normal !important;
  }

  header > nav {
    order: 2 !important;
    width: 100% !important;
    gap: 16px !important;
  }

  header > nav button {
    flex: 0 0 auto !important;
    font-size: 13px !important;
  }

  header > div:last-child {
    order: 3 !important;
    width: 100% !important;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-width: 100% !important;
  }

  header > div:last-child a,
  header > div:last-child button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  main section,
  footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* :not(.hero-section) — иначе этот общий сброс (специфичность 0,1,2) забивал
     собственные правила героя (0,1,0) даже при !important, и на главной высота
     первого экрана всегда схлопывалась в auto. Для внутренних страниц, где
     первая секция — обычный заголовочный блок, поведение прежнее. */
  main section:first-of-type:not(.hero-section) {
    min-height: auto !important;
    padding-top: 54px !important;
    padding-bottom: 64px !important;
  }

  h1 {
    font-size: clamp(34px, 10vw, 44px) !important;
    letter-spacing: 0 !important;
  }

  h2 {
    font-size: clamp(27px, 8vw, 34px) !important;
    letter-spacing: 0 !important;
  }

  h3,
  p,
  span,
  button,
  a,
  div {
    overflow-wrap: anywhere;
  }

  div[style*="grid-template-columns:repeat(auto-fit"],
  div[style*="grid-template-columns:repeat(auto-fill"],
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:1.6fr 1fr auto auto"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="width: 354px"] {
    width: auto !important;
    height: auto !important;
  }

  div[style*="align-items:baseline;justify-content:flex-end"],
  div[style*="align-items:baseline;justify-content:space-between"] {
    flex-wrap: wrap !important;
  }

  image-slot {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  image-slot[shape="rect"] {
    --image-slot-rect-right: 0px;
    height: min(66vw, 280px) !important;
  }

image-slot[shape="rounded"] {
  height: min(64vw, 300px) !important;
}

  .project-macro-grid image-slot[shape="rounded"] {
    height: clamp(280px, 26vw, 340px) !important;
  }

  image-slot:not([data-editable]) {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }

  button[style*="white-space:nowrap"],
  a[style*="white-space:nowrap"],
  div[style*="white-space:nowrap"],
  span[style*="white-space:nowrap"] {
    white-space: normal !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    min-width: 0 !important;
  }

  label {
    min-width: 0 !important;
  }

  body.cms-editing .cms-panel {
    inset: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100svh - 20px) !important;
  }
}

@media (max-width: 430px) {
  main section,
  footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  div[style*="padding:18px 22px"],
  div[style*="padding:18px 20px"],
  div[style*="padding: 26px 26px 28px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  button {
    min-width: 0 !important;
  }
}

/* Robust mobile layout hooks. These classes avoid depending on exact inline
   style strings, which is fragile across CMS/rendering changes. */
@media (max-width: 1024px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* Вариантов планировки четыре — в три колонки они давали 3 + сироту. */
  .home-planning-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  .home-drainage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  .home-paving-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  .home-terraces-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  .home-gabions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  .home-assembly-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  .home-pool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  .home-banya-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  .home-rockery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }

  .home-planning-media,
  .home-drainage-media {
    height: clamp(180px, 21vw, 230px) !important;
  }

  .home-paving-media,
  .home-terraces-media,
  .home-gabions-media,
  .home-assembly-media,
  .home-pool-media,
  .home-banya-media,
  .home-rockery-media,
  image-slot[id^="home-paving-"],
  image-slot[id^="home-terraces-"],
  image-slot[id^="home-gabions-"],
  image-slot[id^="home-assembly-"],
  image-slot[id^="home-pool-"],
  image-slot[id^="home-banya-"],
  image-slot[id^="home-rockery-"] {
    height: clamp(220px, 31vw, 337px) !important;
    min-height: 0 !important;
  }

  .catalog-card,
  .package-card,
  .home-planning-card,
  .home-drainage-card,
  .home-paving-card,
  .home-terraces-card,
  .home-gabions-card,
  .home-assembly-card,
  .home-pool-card,
  .home-banya-card,
  .home-rockery-card {
    contain-intrinsic-size: 1px 560px;
    content-visibility: auto;
    min-width: 0 !important;
    width: 100% !important;
  }

  .catalog-media,
  .package-media {
    --image-slot-rect-right: 0px;
  }

  .package-body {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {
  .site-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 9px !important;
    padding: 10px 18px 14px !important;
  }

  .site-brand {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .site-brand > span:first-child {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    font-size: 24px !important;
  }

  .site-brand > span:last-child {
    min-width: 0 !important;
  }

  .site-brand > span:last-child > span:first-child {
    font-size: 21px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  .site-brand > span:last-child > span:last-child {
    font-size: 9.5px !important;
    letter-spacing: 1.55px !important;
  }

  .site-nav {
    order: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 4px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .site-nav button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 7px 4px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .site-header-actions {
    order: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    gap: 8px !important;
    margin-left: 0 !important;
  }

  .site-header-actions a,
  .site-header-actions button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .site-header-actions a {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  .site-header-actions button {
    padding: 13px 18px !important;
    font-size: 14px !important;
  }

  /* Правка 01.08: «слишком низкое фото и большой информационный блок».
     Секция героя тянется почти на весь первый экран (было −150px, стало −104px:
     +46px кадра), а сам текстовый блок ужат примерно на 110px — заголовок,
     лид и кнопки. В сумме над текстом освобождается ~150px чистой фотографии,
     и дом наконец читается целиком, а не выглядывает из-за заголовка. */
  .hero-section {
    min-height: calc(100svh - 104px) !important;
    padding: 34px 18px 30px !important;
    align-items: flex-end !important;
  }

  /* Вуаль героя развёрнута по вертикали. Исходные 105deg рассчитаны на широкий
     экран: тёмный край слева, картинка справа. На узком телефоне «слева» — это
     почти весь кадр, дом уходил под заливку 0.92 и не читался. Текст на мобиле
     прижат вниз (align-items:flex-end), поэтому темним низ, а верх открываем.
     Точку затемнения опустили (34%→46%, 68%→74%) вслед за ужатым текстом. */
  .hero-section > div:first-child {
    background: linear-gradient(180deg,
      rgba(15, 33, 24, 0.16) 0%,
      rgba(15, 33, 24, 0.30) 46%,
      rgba(15, 33, 24, 0.78) 74%,
      rgba(15, 33, 24, 0.94) 100%) !important;
  }

  .hero-section h1 {
    font-size: clamp(30px, 8.6vw, 36px) !important;
    line-height: 1.04 !important;
    margin-bottom: 14px !important;
  }

  .hero-section p {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }

  /* Кнопки в одну строку: стопкой они съедали ~65px первого экрана. */
  .hero-section p + div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .hero-section p + div button {
    width: 100% !important;
    padding: 14px 10px !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }

  main [style*="display:grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .packages-grid,
  .catalog-grid,
  .home-drainage-grid,
  .home-paving-grid,
  .home-terraces-grid,
  .home-gabions-grid,
  .home-assembly-grid,
  .home-pool-grid,
  .home-banya-grid,
  .home-rockery-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .package-media {
    height: clamp(220px, 58vw, 300px) !important;
  }

  .project-macro-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .project-macro-grid image-slot[shape="rounded"] {
    height: clamp(250px, 72vw, 340px) !important;
  }

  .package-body {
    padding: 20px 18px 22px !important;
  }

  .catalog-section {
    padding: 30px 18px 44px !important;
  }

  .catalog-heading {
    align-items: flex-start !important;
    gap: 15px !important;
    margin-bottom: 18px !important;
  }

  .catalog-heading > div,
  .catalog-heading p {
    max-width: 100% !important;
  }

  .catalog-section h2 {
    font-size: clamp(32px, 10.3vw, 42px) !important;
    line-height: 1.06 !important;
  }

  .catalog-heading p {
    font-size: 15px !important;
    line-height: 1.56 !important;
  }

  .catalog-card {
    border-radius: 18px !important;
  }

  .catalog-media {
    height: clamp(220px, 58vw, 310px) !important;
  }

  .home-planning-grid {
    margin-bottom: 20px !important;
  }

  .home-drainage-grid {
    margin-bottom: 22px !important;
  }

  .home-paving-grid {
    margin-bottom: 22px !important;
  }

  .home-terraces-grid {
    margin-bottom: 22px !important;
  }

  .home-gabions-grid {
    margin-bottom: 22px !important;
  }

  .home-assembly-grid {
    margin-bottom: 22px !important;
  }

  .home-pool-grid {
    margin-bottom: 22px !important;
  }

  .home-banya-grid {
    margin-bottom: 22px !important;
  }

  .home-rockery-grid {
    margin-bottom: 22px !important;
  }

  .home-planning-media,
  .home-drainage-media {
    height: clamp(210px, 58vw, 300px) !important;
    min-height: 0 !important;
  }

  .home-paving-media,
  .home-terraces-media,
  .home-gabions-media,
  .home-assembly-media,
  .home-pool-media,
  .home-banya-media,
  .home-rockery-media,
  image-slot[id^="home-paving-"],
  image-slot[id^="home-terraces-"],
  image-slot[id^="home-gabions-"],
  image-slot[id^="home-assembly-"],
  image-slot[id^="home-pool-"],
  image-slot[id^="home-banya-"],
  image-slot[id^="home-rockery-"] {
    height: clamp(220px, 58vw, 310px) !important;
    min-height: 0 !important;
  }

  .home-planning-body,
  .home-drainage-body,
  .home-paving-body,
  .home-terraces-body,
  .home-gabions-body,
  .home-assembly-body,
  .home-pool-body,
  .home-banya-body,
  .home-rockery-body {
    padding: 19px 18px 21px !important;
    gap: 14px !important;
  }

  .home-planning-card h3,
  .home-drainage-card h3,
  .home-paving-card h3,
  .home-terraces-card h3,
  .home-gabions-card h3,
  .home-assembly-card h3,
  .home-pool-card h3,
  .home-banya-card h3,
  .home-rockery-card h3 {
    font-size: 25px !important;
  }

  .catalog-card-body {
    padding: 17px 18px 19px !important;
  }

  .catalog-card h3 {
    font-size: 18px !important;
    line-height: 1.18 !important;
  }

  .catalog-card p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 390px) {
  .site-header {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .site-brand > span:last-child > span:first-child {
    font-size: 19px !important;
  }

  .site-nav button {
    font-size: 11.5px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .catalog-section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Высота карусели проектов задаётся компонентом <proj-gallery>
   (см. proj-gallery.js), поэтому отдельное правило высоты не нужно. */

/* --- Блок «Планировка»: на мобиле вместо трёх карточек показываем
   один вертикальный постер (#home-planning-poster). На десктопе постер
   скрыт, карточки видны. --- */
@media (max-width: 720px) {
  .catalog-section .home-planning-grid {
    display: none !important;
  }

  .catalog-section .home-planning-poster {
    display: block !important;
  }
}

/* --- Блок «Мощение»: на мобиле вместо трёх карточек показываем
   один вертикальный постер (image-slot #home-paving-poster). На десктопе
   постер скрыт, карточки видны. --- */
@media (max-width: 720px) {
  .catalog-section .home-paving-grid {
    display: none !important;
  }

  .catalog-section .home-paving-poster {
    display: block !important;
  }
}

/* --- Блок «Габионы»: на мобиле вместо трёх карточек показываем
   один вертикальный постер (#home-gabions-poster). На десктопе постер
   скрыт, карточки видны. --- */
@media (max-width: 720px) {
  .catalog-section .home-gabions-grid {
    display: none !important;
  }

  .catalog-section .home-gabions-poster {
    display: block !important;
  }
}

/* --- Блок «Ассамблея» (костёр + мангал): на мобиле вместо трёх карточек
   показываем один вертикальный постер (#home-assembly-poster). --- */
@media (max-width: 720px) {
  .catalog-section .home-assembly-grid {
    display: none !important;
  }

  .catalog-section .home-assembly-poster {
    display: block !important;
  }
}

/* --- Блок «Чаны/купели/бассейны»: на мобиле вместо трёх карточек
   показываем один вертикальный постер (#home-pool-poster). --- */
@media (max-width: 720px) {
  .catalog-section .home-pool-grid {
    display: none !important;
  }

  .catalog-section .home-pool-poster {
    display: block !important;
  }
}

/* --- Блок «Бани»: на мобиле вместо трёх карточек показываем один
   вертикальный постер (#home-banya-poster). --- */
@media (max-width: 720px) {
  .catalog-section .home-banya-grid {
    display: none !important;
  }

  .catalog-section .home-banya-poster {
    display: block !important;
  }
}

/* --- Блок «Рокарии»: на мобиле вместо трёх карточек показываем один
   вертикальный постер (#home-rockery-poster). --- */
@media (max-width: 720px) {
  .catalog-section .home-rockery-grid {
    display: none !important;
  }

  .catalog-section .home-rockery-poster {
    display: block !important;
  }
}






/* --- Тематический скроллбар (в тон сайту): золотисто-зелёный бегунок
   на кремовой дорожке. Только десктоп — на мобилках нативный. --- */
@media (min-width: 721px) {
  /* Firefox */
  html {
    scrollbar-width: auto;
    scrollbar-color: #1C3B2E #E6E1D6;
  }

  /* WebKit / Chromium — цепляем на html, body и одиночный селектор, т.к.
     вьюпортный бегунок может брать псевдоэлемент с любого из них. */
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  ::-webkit-scrollbar {
    width: 14px;
  }
  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  ::-webkit-scrollbar-track {
    background: #E6E1D6;
  }
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-thumb {
    background-color: #1C3B2E;
    border: 3px solid #E6E1D6;
    border-radius: 8px;
    min-height: 48px;
  }
  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:hover {
    background-color: #C9A86A;
  }
}

/* --- A2. Блок «Террасы, навесы, перголы»: на мобиле вместо трёх карточек
   показываем один вертикальный композит (.home-terraces-poster), как у
   остальных троек главной. --- */
@media (max-width: 720px) {
  .catalog-section .home-terraces-grid {
    display: none !important;
  }

  .catalog-section .home-terraces-poster {
    display: block !important;
  }
}

/* --- A4. Компактная липкая шапка на телефоне.
   Шапка стала sticky, а в мобильной раскладке она грузилась в три ряда (бренд,
   навигация, телефон + кнопка) и занимала ~190px — почти треть экрана, которая
   теперь висела бы постоянно. Сжимаем: бренд и телефон в один ряд, навигация
   вторым рядом, крупная кнопка «Рассчитать стоимость» на телефоне убирается —
   она продублирована в герое, в каждом шаге каталога и в футере. --- */
@media (max-width: 720px) {
  .site-header {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 6px 12px !important;
    padding: 8px 16px 10px !important;
  }

  .site-brand {
    grid-column: 1 !important;
    gap: 10px !important;
  }

  .site-brand > span:first-child {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    font-size: 20px !important;
  }

  .site-brand > span:last-child > span:first-child {
    font-size: 17px !important;
  }

  .site-brand > span:last-child > span:last-child {
    font-size: 8.5px !important;
    letter-spacing: 1.2px !important;
  }

  .site-header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    width: auto !important;
    gap: 0 !important;
  }

  .site-header-actions a {
    font-size: 14.5px !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  .site-header-actions > button {
    display: none !important;
  }

  .site-nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .site-nav button {
    padding: 6px 4px !important;
    font-size: 12px !important;
  }
}


/* --- Мобильная раскладка каталога (правка по замечанию 30.07, отступы 01.08).
   На телефоне вместо сеток показываем готовые композиты 3-в-1. Каждая группа
   карточек имеет свой композит, поэтому ни одна позиция не выпадает
   (раньше «Чаны и фурако» на мобиле не показывался вообще).
   Композиты шире колонки контента, но НЕ впритык к краям экрана: раньше они
   лежали ровно в 100vw и прилипали к рамке телефона — заказчик отметил это
   отдельно. Оставляем поля по 12px и возвращаем скругление, чтобы композит
   читался как карточка, а не как обрыв вёрстки. --- */
@media (max-width: 720px) {
  /* Дренаж (1.2) намеренно не в этих списках — у него отдельный блок ниже:
     на телефоне там не композит, а карточки по позициям (правка 01.08). */
  .catalog-section .home-planning-grid,
  .catalog-section .home-paving-grid,
  .catalog-section .home-terraces-grid,
  .catalog-section .home-assembly-grid,
  .catalog-section .home-spa-grid,
  .catalog-section .home-gabions-grid,
  .catalog-section .home-rockery-grid {
    display: none !important;
  }

  .catalog-section .home-planning-poster,
  .catalog-section .home-paving-poster,
  .catalog-section .home-terraces-poster,
  .catalog-section .home-assembly-poster,
  .catalog-section .home-spa-poster-a,
  .catalog-section .home-spa-poster-b,
  .catalog-section .home-spa-poster-c,
  .catalog-section .home-gabions-poster,
  .catalog-section .home-rockery-poster {
    display: block !important;
    width: calc(100vw - 24px) !important;
    margin-left: calc(50% - 50vw + 12px) !important;
    margin-right: calc(50% - 50vw + 12px) !important;
    margin-bottom: 20px !important;
  }

  .catalog-section [class*="-poster"] > img {
    border-radius: 14px !important;
  }

  .catalog-section [class*="-poster-cta"] {
    width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
}

/* --- Дренаж (1.2) на телефоне: отдельные карточки, как в пункте 1.3 (правка 01.08).
   Было (30.07): во всю ширину лежал композит 2-в-1 с выносками 1·2·3·4, а под ним —
   те же позиции, но БЕЗ фотографий. Кадр был общий на обе позиции, поэтому не читалось,
   где кончается «Поверхностный» и начинается «Глубинный», а описание выглядело подписью
   к картинке, а не самостоятельным блоком.
   Стало: композит на мобиле убран, каждая позиция — своя карточка с собственным фото
   16:9, ценой, пронумерованным «пирогом», примечанием и кнопкой расчёта. Ровно тот же
   приём, что у плиток 1.3 «Устройство основания» (.cat-grid), — отсюда и 16:9.
   Цепляемся за `.home-drainage-grid image-slot`, а не за `.home-drainage-media`: движок
   отдаёт class кастомных элементов атрибутом classname, и селекторы по классу на
   image-slot не срабатывают вообще. --- */
@media (max-width: 720px) {
  .catalog-section .home-drainage-poster {
    display: none !important;
  }

  .catalog-section .home-drainage-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 0 0 26px !important;
  }

  /* 160/99 = 16:9, поднятые по высоте на 10% (правка 01.08 по замечанию
     заказчика «фото делай больше процентов на 10, а белый блок — меньше»). */
  .catalog-section .home-drainage-grid image-slot {
    display: block !important;
    aspect-ratio: 160 / 99 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .catalog-section .home-drainage-card {
    content-visibility: visible !important;
  }

  .catalog-section .home-drainage-body {
    gap: 14px !important;
    padding: 19px 18px 21px !important;
  }
}