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

body {
  min-width: 0;
}

.site-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  z-index: 50 !important;
}

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

.hero-mobile-motion {
  display: none;
}

.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;
    background: #13241B url("/uploads/landscape_transformation_5s_mobile_poster_v2.webp") center / cover no-repeat !important;
  }

  #heroVideo {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #heroVideo::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
  }

  #heroMobileMotion {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !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;
  }

  main section:first-of-type {
    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;
  }

  .home-planning-grid {
    grid-template-columns: repeat(3, 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;
  }

  .hero-section {
    min-height: calc(100svh - 150px) !important;
    padding: 46px 18px 58px !important;
    align-items: flex-end !important;
  }

  .hero-section h1 {
    font-size: clamp(34px, 10vw, 43px) !important;
  }

  .hero-section p {
    font-size: 15.5px !important;
    line-height: 1.58 !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;
  }
}