/* =======================================================
   HOME — BASE LAYOUT / TOKENS
   ======================================================= */

:root{
  --page-w: 1440px;
  --gutter: clamp(16px, 5vw, 70px);
  --page-max: 1440px;        /* загальна ширина сторінки */
  --gutter:   70px;          /* бокові гаттери */
  --smc-header-h: 80px;      /* висота шапки (JS може оновлювати) */
  --smc-ink:   #091311;
  --smc-green: #01A9A0;
}
/* Єдиний контейнер для всіх секцій */
.smc-container{
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* мобільні гаттери */
@media (max-width:1024px){
  :root{ --gutter:16px; }
}

/* прозорий хедер у верхній точці на головній */
.home .smc-site-header:not(.is-solid) .smc-header__bar{
  background: transparent;
  box-shadow: none;
}

/* =======================================================
   HOME — HERO
   ======================================================= */

.smc-hero{
  position: relative;
  isolation: isolate;
  color: #fff;
  margin: 0;
  padding: 0;
  min-height: var(--hero-min, 700px);
  overflow: hidden;

  /* фон їде під sticky header */
  margin-top: calc(-1 * var(--smc-header-h));
}

/* фон */
.smc-hero__bg{ position:absolute; inset:0; z-index:-1; }
.smc-hero__bg picture,
.smc-hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.smc-hero__overlay{
  position:absolute; inset:0; pointer-events:none;
  background: var(--smc-hero-overlay,
    linear-gradient(0deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.16) 31%,
      rgba(0,0,0,.53) 78%,
      rgba(0,0,0,.6) 87%
    )
  );
}

/* внутрішня обгортка героя (у контейнері 1440/70) */
.smc-hero .smc-hero-inner{
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* відступи задаються правилом з !important нижче в файлі (строчка 2339) */
}

/* робоча ширина під текст */
.smc-hero .smc-hero-inner > *{
  max-width: 661px;
  width: 100%;
}

/* ===== Typography */
.smc-hero__h0{
  font-family: Montserrat, system-ui, Arial;
  font-weight: 600;
  font-size: 72px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 16px;                 /* H0 → H1 = 16px */
}
.smc-hero__h1{
  font-family: Montserrat, system-ui, Arial;
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 32px;                 /* H1 → lead = 32px */
}
.smc-hero__lead{
  font-family: Montserrat, system-ui, Arial;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  margin: 0 0 64px;                 /* lead → CTA = 64px */
}

/* ===== CTA button */
.smc-hero a.smc-btn,
.smc-hero .smc-btn{
  width: auto !important;
  display: inline-flex !important;
}
.smc-btn--hero{
  --green: var(--smc-green);
  align-items: center; justify-content: center;
  min-width: 180px; height: 52px;
  padding: 14px 40px 16px;
  border: 0; border-radius: 10px;
  background: var(--green); color:#fff !important;
  font: 500 16px/22px Montserrat, system-ui, Arial;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(1,169,160,.25);
}
@media (hover:hover){ .smc-btn--hero:hover{ filter:brightness(.96); } }
.smc-btn--hero:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ===== Responsive HERO */
@media (max-width:1200px){
  .smc-hero__h0{ font-size:64px; }
  .smc-hero__h1{ font-size:40px; }
}

@media (max-width:480px){
  .smc-hero .smc-hero-inner{
    padding: calc(56px + var(--smc-header-h)) 20px 56px;
  }
  .smc-hero__h0{ font-size:48px; margin-bottom:14px; }
  .smc-hero__h1{ font-size:32px; margin-bottom:24px; }
  .smc-hero__lead{ font-size:18px; line-height:22px; margin-bottom:40px; }
  .smc-hero a.smc-btn, .smc-hero .smc-btn{width:259px !important;}
}

@media (max-width:640px){
  .smc-hero__h0{ font-size:48px; margin-bottom:12px; }
  .smc-hero__h1{ font-size: 32px; font-weight: 600; margin-bottom:20px; }
  .smc-hero__lead{ font-size:16px; font-weight:600; line-height:20px; margin-bottom:32px; }
  .smc-btn--hero{ min-width:160px; height:48px; padding:12px 28px 14px; }
}

/* =======================================================
   HOME — ABOUT (Про CM-ХІМ)
   ======================================================= */

/* секція — тільки вертикальні відступи */
.smc-about{
  padding: 140px 0 120px;
}

/* ───── контейнер 1300px для основної сітки ───── */
.smc-about__grid{
  max-width: 1440px;
  width: 100%;
  margin-inline: auto;
  padding-left: 70px;
  padding-right: 70px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(320px, 564px) minmax(480px, 661px); /* 564 + 102 + 661 */
  column-gap: 102px;
  align-items: start;
}

/* заголовок зліва */
.smc-about__title{
  margin: 0;
  font-family: Montserrat, system-ui, Arial;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.15;
  color: var(--smc-ink, #091311);
}

/* відступ між заголовком і кнопкою – 94px */
.smc-about__cta{ margin-top: 94px; }

/* правий стовпчик — текст (32/32) */
.smc-about__text{
  font-family: Montserrat, system-ui, Arial;
  font-weight: 500;
  font-size: 32px;
  line-height: 32px; /* 100% */
  color: var(--smc-ink, #091311);
}
.smc-about__text p{ margin: 0; }
.smc-about__text p + p{ margin-top: 12px; }

/* зелені акценти/посилання у тексті */
.smc-about__text a,
.smc-about__text .is-accent,
.smc-about__text strong,
.smc-about__text em{
  color: var(--smc-green, #01A9A0);
  font-weight: 500;
  font-style: normal;       /* без курсиву для em */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
@media (hover:hover){
  .smc-about__text a:hover{ border-color: currentColor; }
}

/* ───── контейнер 1300px для блоку карток ───── */
.smc-about__features{
  max-width: 1440px;
  width: 100%;
  margin: 60px auto 0;      /* той самий контейнер, центр */
  padding-left: 70px;
  padding-right: 70px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* картки */
.smc-about__card{
  background: var(--smc-bg-soft, #EFF7F6);
  border-radius: 20px;
  min-height: 200px;
  padding: 56px 40px 55px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* вертикальне вирівнювання */
  gap: 16px;
}

/* заголовки карток — 24/24, 600, зелений */
.smc-about__card-title{
  margin: 0;
  font-family: Montserrat, system-ui, Arial;
  font-weight: 600;
  font-size: 24px;
  line-height: 24px;
  color: var(--smc-green, #01A9A0);
}

/* описи карток — 16/≈22, 500 */
.smc-about__card-desc{
  margin: 0;
  font-family: Montserrat, system-ui, Arial;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--smc-ink, #091311);
}

/* кнопка-примара */
.smc-btn--ghost{
  --green: var(--smc-green, #01A9A0);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;
  padding: 14px 40px 16px 40px;        /* T/R/B/L */
  border: 1px solid var(--green);
  border-radius: 10px;

  color: #000 !important;
  background: transparent;
  text-decoration: none !important;
  font: 500 16px/1.4 Montserrat, system-ui, Arial;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
@media (hover:hover){
  .smc-btn--ghost:hover{
    background: color-mix(in srgb, var(--green) 8%, transparent);
    color: #000 !important;
    border-color: var(--green);
  }
}
.smc-btn--ghost:focus-visible{
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ───── адаптив ───── */
@media (max-width: 1200px){
  .smc-about{ padding-top: 110px; }
  .smc-about__title{ font-size: 44px; }
  .smc-about__text{ font-size: 28px; line-height: 28px; }
  .smc-about__card{ min-height: 190px; }
}

@media (max-width: 1024px){
  .smc-about{
    padding: 90px var(--gutter, clamp(16px, 5vw, 70px)) 100px;
  }
  .smc-about__grid{
    max-width: 100%;
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .smc-about__cta{ margin-top: 28px; }
  .smc-about__features{
    max-width: 100%;
    margin-top: 40px;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .smc-about__text{ font-size: 24px; line-height: 24px; }
  .smc-about__card{ min-height: 180px; padding: 28px; }
}

@media (max-width: 640px){
  .smc-about__title{ font-size: 36px; }
  .smc-about__text{ font-size: 20px; line-height: 22px; }
  .smc-about__features{ grid-template-columns: 1fr; gap: 12px; }
  .smc-about__card{ min-height: auto; padding: 20px; }
}

@media (max-width: 480px){
  .smc-about{
    padding: 90px 20px 100px;
  }
  
  .smc-about__grid{
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .smc-about__features{
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* =======================================================
   HOME — DIRECTIONS (Наші напрямлення, ACF)
   ======================================================= */

.smc-dir{ width:100%; padding:0; }
.smc-dir .smc-container{ display:flex; justify-content:center; }

/* робоча ширина 1300px у контейнері 1440/70 */
.smc-dir__inner{
  width: 100%;
  max-width: 1440px;
  height: 700px;
  padding: 140px 70px;
  border-radius: 20px;
  overflow: hidden;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 490px 1fr;
  gap: 70px;
  align-items: center;
  margin-inline: auto;

  /* фон: спочатку градієнт, потім хвиля з ACF (через --dir-bg) */
  background-image:
    radial-gradient(50% 50% at 50% 50%,
      rgba(180,240,231,0.7) 0%,
      rgba(93,206,196,0.7) 61%,
      rgba(1,169,160,0.7) 87%),
    var(--dir-bg);
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
}

/* Ліва колонка */
.smc-dir__left{ align-self: stretch; display:flex; flex-direction:column; }
.smc-dir__title{
  font-family: "Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--smc-ink);
  margin: 0 0 37px 0;
}
.smc-dir__list{
  list-style: none;
  margin: 0;
  margin-left: 56px;
  padding: 0;
  display:flex;
  flex-direction: column;
  gap: 19px;
  width: 490px;     /* з ТЗ */
  height: 531px;    /* з ТЗ */
}
.smc-dir__link{
  appearance:none;
  background:transparent;
  border:0;
  font: 500 32px/1 "Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--smc-ink);
  text-align:left;
  cursor:pointer;
  padding:0;
  transition:color .2s ease;
}
.smc-dir__li.is-active .smc-dir__link{
  font-weight: 600;
  color: var(--smc-ink);
}
.smc-dir__link:hover{ color: var(--smc-green); }

/* Права колонка */
.smc-dir__stage{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Mobile head (тільки мобільна) */
.smc-dir__head-mob{ display:none; }
.smc-dir__title-mob{
  font: 600 24px/1 "Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  text-align:center; color:var(--smc-ink);
  margin: 0 0 40px;
}
.smc-dir__active-name{
  font: 400 20px/1 "Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--smc-ink); text-align:center; margin: -20px 0 20px;
}

/* Viewer (власний слайдер) */
.smc-dir__viewer{
  position: relative;
  width: 506px;
  height: 444px;
}
.smc-dir__item{
  position: absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity .35s ease;
}
.smc-dir__item.is-active{ opacity:1; pointer-events:auto; }
.smc-dir__item img{
  width:344px; height:444px; object-fit:contain; display:block;
}

/* Навігація */
.smc-dir__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(20px);
  border:0; cursor:pointer;
}
.smc-dir__nav--prev{ left: -20px; }
.smc-dir__nav--next{ right: -20px; }

.smc-dir__nav::before{
  content:"";
  display:block; width:24px; height:24px; margin:8px;
  background: center/contain no-repeat;
  /* стрілка (SVG) */
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23091311' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.smc-dir__nav--prev::before{ transform: rotate(180deg); }

/* CTA */
.smc-dir__cta{
  margin-top: 18px;
  margin-bottom: 94px;
  min-width: 170px;
  height: 52px;
  padding: 14px 40px 16px 40px;
  border-radius:10px;
  border:1px solid var(--smc-green);
  color:var(--smc-ink);
  font:600 16px/1 "Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ===== Mobile ≤ 430 ===== */
@media (max-width: 430px){
  .smc-dir__inner{
    width:100%;
    height:600px;
    padding:78px 20px;
    border-radius:16px;
    grid-template-columns: 1fr; /* одна колонка */
    gap: 20px;
  }
  .smc-dir__left{ display:none; }
  .smc-dir__head-mob{ display:block; }
  .smc-dir__viewer{
    width:248px; height:320px; margin:0 auto;
  }
  .smc-dir__item img{ width:248px; height:320px; }
  .smc-dir__nav{ width:40px; height:40px; }
  .smc-dir__nav--prev{ left:-6px; }
  .smc-dir__nav--next{ right:-6px; }
  .smc-dir__cta{
    width:335px; height:52px; margin:40px auto 0;
  }
}

/* =======================================================
   HOME — WHY (Чому обирають нас?)
   ======================================================= */

/* Токени секції */
:root{
  /* бокові відступи сторінки (як у героя): 70px desktop, 16px мобільний */
  --gutter: clamp(16px, 5vw, 70px);

  /* кольори/лінії */
  --ink: var(--smc-ink, #091311);
  --line: #E6EDEE; /* тонка сіра лінія з макета */
}

/* Секція тільки з вертикальними відступами */
.smc-why{
  padding: 120px 0 120px;
  display: block;
}

/* Внутрішній контейнер 1300px */
.smc-why__inner{
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 70px;
  padding-right: 70px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(320px, 564px) minmax(560px, 1fr);
  column-gap: 101px;            /* як у макеті */
  align-items: start;
}

/* Лівий стовпчик */
.smc-why__title{
  margin: 0 0 24px 0;
  font-family: "Montserrat", system-ui, Arial;
  font-weight: 700;             /* H2 / Bold */
  font-size: 40px;
  line-height: 1;               /* Figma: normal/auto */
  color: var(--ink);
}

/* Підзаголовок (lead) — 32 Medium */
.smc-why__lead{
  margin: 0;
  font-family: "Montserrat", system-ui, Arial;
  font-weight: 500;             /* Medium */
  font-size: 32px;
  line-height: normal;          /* Figma auto */
  color: var(--ink);
}

/* Правий стовпчик (список) */
.smc-why__list{
  display: flex;
  flex-direction: column;
  gap: 0;                       /* лінії задаються елементам */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Один ряд (тільки нижня рамка!) */
.smc-why__item{
  display: grid;
  grid-template-columns: 92px 1fr 1fr; /* 60px іконка + 32px відступ, титли/тексти */
  align-items: center;
  gap: 24px;
  padding: 24px 0;              /* вертикальні відступи рядка */
  border-bottom: 1px solid var(--line);
}
.smc-why__item:last-child{ border-bottom: none; }

/* Іконка 60×60 */
.smc-why__icon{
  width: 60px;
  height: 60px;
  display: block;
  object-fit: contain;
}

/* Заголовок біля іконки — 24 SemiBold */
.smc-why__item-title{
  font-family: "Montserrat", system-ui, Arial;
  font-weight: 600;             /* SemiBold */
  font-size: 24px;
  line-height: normal;          /* Figma auto */
  color: var(--ink);
  margin: 0;
}

/* Опис (праворуч) — 16 / 140% */
.smc-why__item-text{
  font-family: "Montserrat", system-ui, Arial;
  font-weight: 500;             /* Medium */
  font-size: 16px;
  line-height: 1.4;             /* 140% */
  color: var(--ink);
  margin: 0;
}

/* ===================== Адаптив ===================== */
@media (max-width: 1200px){
  .smc-why{ padding-top: 100px; }
  .smc-why__title{ font-size: 36px; }
  .smc-why__lead{ font-size: 28px; }
}

@media (max-width: 1024px){
  .smc-why{
    padding: 90px var(--gutter) 100px;
  }
  .smc-why__inner{
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  /* Ряд на дві колонки: іконка + заголовок вище, текст нижче */
  .smc-why__item{
    grid-template-columns: 60px 1fr;
    align-items: start;
    gap: 16px;
  }
  .smc-why__item-title{
    margin-top: 6px;
  }
  .smc-why__item-text{
    grid-column: 1 / -1;
    margin-left: calc(60px + 16px);   /* під текст — відступ як у заголовка */
  }
}

@media (max-width: 640px){
  .smc-why__title{ font-size: 32px; }
  .smc-why__lead{ font-size: 22px; line-height: 1.2; }
  .smc-why__item{ padding: 18px 0; }
  .smc-why__item-title{ font-size: 20px; }
}

@media (max-width: 480px){
  .smc-why{
    padding: 90px 20px 100px;
  }
  
  .smc-why__inner{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* вирівнюємо старт обох колонок */
.smc-why__inner{
  margin-top: 0 !important; /* прибираємо штучний зсув */
}

.smc-why__item:first-child{
  padding-top: 0;           /* не опускаємо перший рядок списку */
}

/* (опційно) на мобільному теж фіксуємо */
@media (max-width: 1024px){
  .smc-why__item:first-child{ padding-top: 0; }
}

/* ===================== BRANDS — FINAL ===================== */
/* ================================
   Секція "Наші бренди" (стабільно у всіх браузерах)
   Без :has(), на flex — плавно й без «рейок»
   ================================ */
/* ======================  BRANDS  ====================== */

.smc-brands{
  /* геометрія */
  --h-card: 700px;
  --w-wide: 469px;
  --w-narrow: 177.75px;
  --gap: 30px;
  --radius: 20px;

  /* позиції */
  --prod-top-open: 64px;
  --prod-top-closed: 64px;
  --logo-size: 140px;
  --logo-bottom: 120px;
  --cta-bottom: 44px;

  /* фон */
  --bg-collapsed: var(--light-green-2, #E1F5F4);
  --bg-active: radial-gradient(50% 50% at 50% 50%,
                 #B4F0E7 0%, #5DCEC4 34%, #01A9A0 87%);

  /* анімації */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --t-basis: 440ms;      /* ширина */
  --t-pos: 380ms;        /* позиції елементів */
}

.smc-brands__inner{
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 70px;
  overflow-x: hidden;
}

.smc-brands__title{
  margin: 0 0 24px 0;
  color: var(--Black, rgba(9, 19, 17, 1));
  font-family: Montserrat;
  font-size: 40px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: left;
}

.smc-brands__row{
  display: flex;
  gap: var(--gap);
  align-items: stretch;
  max-width: 1300px;
  margin-inline: auto;
}

/* ------------------ КАРТКА ------------------ */
.smc-brand{
  position: relative;
  height: var(--h-card);
  flex: 0 0 var(--w-narrow);     /* базова ширина згорнутої */
  border-radius: var(--radius);
  background: var(--bg-collapsed);
  overflow: hidden;
  transition:
    flex-basis var(--t-basis) var(--e-out),
    background-color .28s ease,
    box-shadow .28s ease;
}

/* прошарок під фон (якщо знадобляться додаткові ефекти) */
.smc-brand__canvas{
  position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
}

/* ПРОДУКТ */
.smc-brand__product{
  position: absolute;
  top: var(--prod-top-closed);

  /* у згорнутій: показуємо праву половину пляшки */
  right: 0;               /* якір праворуч */
  left: auto;
  transform: translateX(50%);

  height: 404px; width: auto; pointer-events: none;
  transition:
    left var(--t-pos) var(--e-out),
    right var(--t-pos) var(--e-out),
    top var(--t-pos) var(--e-out),
    transform var(--t-pos) var(--e-out);
}

/* ЛОГО */
.smc-brand__logo,
.smc-brand__logo-fallback{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: var(--logo-bottom);
  width: var(--logo-size);
  height: var(--logo-size);
  object-fit: contain;
  display: flex; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.smc-brand__logo-fallback{ font: 700 28px/1.2 var(--h3, inherit); }

/* CTA (видима лише на відкритій) */
.smc-brand__btn{
  position: absolute;
  left: 50%; transform: translate(-50%, 6px);
  bottom: var(--cta-bottom);
  min-width: 180px; height: 52px;
  padding: 14px 40px 16px 40px;
  border-radius: 12px;
  background: #fff; color: var(--black, #091311);
  font-weight: 600; text-decoration: none;
  box-shadow: 0 10px 25px rgba(1,169,160,.15);
  opacity: 0; pointer-events: none;
  transition: transform .28s var(--e-out), opacity .28s ease;
}

/* ------------------ СТАНИ ------------------ */

/* ВІДКРИТА (активна) */
.smc-brand.is-active{
  flex-basis: var(--w-wide);
  background: var(--bg-active);
  box-shadow: 0 24px 60px rgba(1,169,160,.18);
}
.smc-brand.is-active .smc-brand__product{
  top: var(--prod-top-open);
  left: 50%; right: auto;
  transform: translateX(-50%);
}
.smc-brand.is-active .smc-brand__btn{
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* Ховер по самій картці (для браузерів без :has — базове розкриття) */
.smc-brand:hover{
  flex-basis: var(--w-wide);
  background: var(--bg-active);
  box-shadow: 0 24px 60px rgba(1,169,160,.18);
}
.smc-brand:hover .smc-brand__product{
  top: var(--prod-top-open);
  left: 50%; right: auto;
  transform: translateX(-50%);
}
.smc-brand:hover .smc-brand__btn{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------
   КЕРУВАННЯ РОЗКЛАДКОЮ ТІЛЬКИ КОЛИ Є ХОЧ ОДНА HOVER-КАРТКА
   (на gap нічого не змінюємо)
   ------------------------------------------------------------ */
@supports(selector(:has(*))){

  /* коли хоч одна картка під курсором — спершу звужуємо всі */
  .smc-brands__row:has(.smc-brand:hover) .smc-brand{
    flex-basis: var(--w-narrow);
    background: var(--bg-collapsed);
    box-shadow: none;
  }

  /* наведена — широка і відкрита */
  .smc-brands__row:has(.smc-brand:hover) .smc-brand:hover{
    flex-basis: var(--w-wide);
    background: var(--bg-active);
    box-shadow: 0 24px 60px rgba(1,169,160,.18);
  }
  .smc-brands__row:has(.smc-brand:hover) .smc-brand:hover .smc-brand__product{
    top: var(--prod-top-open);
    left: 50%; right: auto;
    transform: translateX(-50%);
  }
  .smc-brands__row:has(.smc-brand:hover) .smc-brand:hover .smc-brand__btn{
    opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
  }

  /* активна, яка НЕ під курсором, має вигляд згорнутої */
  .smc-brands__row:has(.smc-brand:hover) .smc-brand.is-active:not(:hover){
    background: var(--bg-collapsed);
    box-shadow: none;
  }
  .smc-brands__row:has(.smc-brand:hover) .smc-brand.is-active:not(:hover) .smc-brand__product{
    top: var(--prod-top-closed);
    left: auto; right: 0;
    transform: translateX(50%);
  }
  .smc-brands__row:has(.smc-brand:hover) .smc-brand.is-active:not(:hover) .smc-brand__btn{
    opacity: 0; pointer-events: none; transform: translate(-50%, 6px);
  }
}

/* пріоритет на випадок швидких рухів — щоб розкривалась без “клацань” */
.smc-brand { z-index: 0; }
.smc-brand:hover { z-index: 2; }

/* ===== NAV (mobile only) ===== */
.smc-brands__nav{ display:none; }
/* Тач: без hover — перша активна як дефолт */
@media (hover:none){
  .smc-brand:first-child{
    flex-basis: var(--w-wide);
    background: var(--bg-active);
  }
  .smc-brand:first-child .smc-brand__product{
    top: var(--prod-top-open);
    left: 50%; right: auto; transform: translateX(-50%);
  }
  .smc-brand:first-child .smc-brand__btn{
    opacity: 1; transform: translate(-50%,0); pointer-events: auto;
  }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .smc-brand, .smc-brand__product, .smc-brand__btn{
    transition: none !important;
  }
}
/* ====================== MOBILE ONLY (<=768px) ====================== */
@media (max-width: 768px){
  .smc-brands__inner{
    padding-inline: 20px;
  }
  
  .smc-brands__title {margin:0 0 24px 0;}
  .smc-brands__title {
    color: var(--Black, rgba(9, 19, 17, 1));
    font-family: Montserrat;
    font-size: 24px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: left;
  }

  .smc-brands{
    /* фіксовані розміри для мобі */
    --h-card: 600px;
    --w-wide: 300px;
    --w-narrow: 300px;
    --gap: 20px;

    /* ключові відступи, щоб нічого не наїжджало */
    --prod-top-open: 40px;   /* було 75 — підіймаємо пляшку вище */
    --prod-top-closed: 40px;

    --logo-size: 150px;
    --logo-bottom: 85px;     /* було 122 — опускаємо лого нижче продукту */
    --cta-bottom: 20px;      /* було 60 — опускаємо кнопку донизу */
  }

  .smc-brands__row{
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .smc-brand{
    flex: 0 0 300px !important;
    width: 300px;
    min-width: 300px;
    height: var(--h-card);
    scroll-snap-align: center;
    border-radius: 20px;
    position: relative;
  }

  /* ПРОДУКТ — завжди строго по центру, без правих якорів */
  .smc-brand__product{
    position: absolute;
    top: var(--prod-top-open) !important; /* 40px */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto;
    height: 320px;
    object-fit: contain;
    z-index: 1; /* під лого та кнопкою */
  }
  .smc-brand.is-active .smc-brand__product,
  .smc-brand:hover .smc-brand__product{
    top: var(--prod-top-open) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* ЛОГО — 150×150, не перетинається з продуктом */
  .smc-brand__logo,
  .smc-brand__logo-fallback{
    width: var(--logo-size);
    height: var(--logo-size);
    bottom: var(--logo-bottom); /* 85px */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; /* над продуктом, під кнопкою */
  }

  /* КНОПКА — 180×52, по центру, завжди вище інших */
  .smc-brand__btn{
    width: 180px;
    min-width: 180px;
    height: 52px;
    padding: 14px 0 16px 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--cta-bottom); /* 20px — ближче до краю */
    text-align: center;
    box-sizing: border-box;
    z-index: 3; /* поверх усього */
  }

  /* на мобі ширина карток не змінюється при :hover */
  .smc-brands__row:hover .smc-brand,
  .smc-brands__row:hover .smc-brand:hover,
  .smc-brands__row:hover .smc-brand.is-active{
    flex-basis: 300px !important;
  }
}




/* Хоризонтальний «снап» тільки на мобільному */
/* базовий вигляд кнопок навігації на мобільному */
@media (max-width: 640px){
  .smc-brands__nav{
    display:flex; justify-content:center; gap:16px; margin-top:12px;
  }
  .smc-brands__arrow{
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:200px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* за замовчуванням зделено, без обводки */
    background: var(--Green, rgba(1,169,160,1));
    color:#fff;
    border: none;
  }
  .smc-brands__arrow svg{ width:18px; height:18px; }

  /* модифікатори станів */
  .smc-brands__arrow.is-green{
    background: var(--Green, rgba(1,169,160,1));
    color:#fff;
    border:none;               /* <- важливо: без обводки */
  }
  .smc-brands__arrow.is-white{
    background:#fff;
    color: var(--Black, #091311);
    border:1px solid var(--Black, #091311);
  }
}


/* ====================== TRUST / Нам довіряють ====================== */
.smc-trust{
  --gap: 80px;             /* відстань між логотипами */
  --dur: 44s;              /* тривалість циклу */
  --track-h: 150px;        /* ВИСОТА каруселі */
  --logo-h: 80px;          /* ВИСОТА зображення логотипу */
  margin-top: 140px;
}

.smc-trust__inner{ 
  max-width: 1440px; 
  margin-inline: auto; 
  padding-inline: 70px;
  overflow-x: hidden;
}

@media (max-width: 1024px) {
  .smc-trust__inner {
    padding-inline: 16px;
  }
}

.smc-trust__title{
  margin: 0 0 40px 0;
  color: var(--Black, rgba(9,19,17,1));
  font-family: Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
  font-size: 40px; font-weight: 700; line-height: 100%; letter-spacing: 0; text-align: center;
}

.smc-trust__marquee{
  position: relative;
  height: var(--track-h);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.smc-trust__track{
  display: inline-flex; align-items: center; gap: var(--gap);
  height: 100%;
  list-style: none; margin: 0; padding: 0;
  animation: smc-trust-scroll var(--dur) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
@keyframes smc-trust-scroll { from {transform:translateX(0)} to {transform:translateX(-50%)} }

.smc-trust__item{
  flex: 0 0 auto; height: 100%;
  display: flex; align-items: center;
  list-style: none;
}

/* Обгортка логотипу */
.smc-trust__logo-wrap{
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%;
}

/* САМЕ ТУТ: фіксуємо висоту зображення = 80px */
.smc-trust .smc-trust__logo,
.smc-trust .smc-trust__logo-wrap > img{
  height: var(--logo-h) !important;   /* 80px */
  width: auto !important;             /* збереження пропорцій */
  max-height: var(--logo-h);
  max-width: 150px;                   /* підстраховка від надшироких */
  object-fit: contain;
  display: block;
}

/* У вьюпорті — запускаємо */
.smc-trust__marquee.is-inview .smc-trust__track{ animation-play-state: running; }

/* Підстраховки від маркерів */
.smc-trust__item::marker{ content: none; }

/* Якщо користувач просить менше анімацій */
@media (prefers-reduced-motion: reduce){
  .smc-trust__track{ animation:none !important; transform:none !important; }

}
.smc-trust__marquee:hover .smc-trust__track{ animation-play-state: paused; }
/* ======= MOBILE ≤ 640px ======= */
@media (max-width: 640px){
  .smc-trust{
    margin-top: 80px;            /* за ТЗ: 80px від попереднього блоку */
  }

  .smc-trust__title{
    font-size: 24px;             /* Montserrat 24 / 700 */
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;          /* центр на мобільному */
    margin: 0 0 -10px 0;          /* відступ до каруселі зберігаємо 40px */
  }

  /* Висоти як на ПК — залишаються */
  .smc-trust__marquee{ height: var(--track-h); }   /* 150px */
  .smc-trust .smc-trust__logo,
  .smc-trust .smc-trust__logo-wrap > img{
    height: var(--logo-h) !important;             /* 80px */
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .smc-trust__track{ animation: none !important; transform: none !important; }


}

/* ========== VLM Hero (alt) v2 — base ========== */
.smc-vlm--v2{
  --c1:#00a79a;
  --c2:#15b7aa;
  --c3:#8adfd7;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 600px;
  margin-top:140px;
  background:
    radial-gradient(42% 48% at 50% 56%, var(--c3) 0%, rgba(138,223,215,0) 56%),
    radial-gradient(120% 85% at 50% 0%, var(--c2) 0%, var(--c1) 62%);
}

.smc-vlm--v2 .smc-vlm__inner{
  max-width:1440px;
  margin:0 auto;
  position:relative;
  padding-inline: 70px;
  overflow-x: hidden;
}

/* фолбек-сітка < 1280px */
.smc-vlm--v2 .smc-vlm__grid{
  display:grid;
  grid-template-columns:minmax(420px,1fr) 440px minmax(420px,1fr);
  grid-template-rows:auto auto auto auto;
  grid-template-areas:
    "w1    center  w2"
    ".     center  w3"
    "left  center  w4"
    "left  center  right";
  column-gap:58px;
  row-gap:24px;
  align-items:start;
}

/* заголовок */
.smc-vlm--v2 .smc-vlm__heading{ display:contents; }
.smc-vlm--v2 .smc-vlm__word{
  display:block;
  color:#fff;
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  font-weight:700;
  font-size:72px;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
  text-shadow:0 4px 4px rgba(0,0,0,.25);
}

.w1{ grid-area:w1; } .w2{ grid-area:w2; }
.w3{ grid-area:w3; } .w4{ grid-area:w4; }

/* лівий/правий тексти */
.smc-vlm--v2 .smc-vlm__left{ grid-area:left; z-index:3; position:relative; }
.smc-vlm--v2 .smc-vlm__left-text{
  margin:0; color:#0a0a0a; font-weight:500;
  font-size: clamp(16px,1.7vw,24px);
  line-height:1.35;
}

.smc-vlm--v2 .smc-vlm__right{ grid-area:right; z-index:3; position:relative; }
.smc-vlm--v2 .smc-vlm__right-text{
  margin:0;
  color:#0a0a0a;
  font-weight:500;
  font-size:16px;
  line-height:20px;
}

/* Кнопка (параметри з макета) */
.smc-vlm--v2 .smc-vlm__btn{
  display:flex; align-items:center; justify-content:center;
  width:180px; height:52px;
  margin-top: 24px;
  padding:14px 40px 16px 40px;
  box-sizing:border-box;
  border:1px solid #01A9A0;
  border-radius:10px;
  background:#fff;
  color: var(--Black, rgba(9, 19, 17, 1));
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: left;
  text-decoration: none;
  transition:transform .18s ease, box-shadow .18s ease;
  z-index:3; position:relative;
}
.smc-vlm--v2 .smc-vlm__btn:hover{
  transform:translateY(-1px);
}

/* пляшка */
.smc-vlm--v2 .smc-vlm__center{ grid-area:center; }
.smc-vlm--v2 .smc-vlm__bottle{
  width:345.28px; height:520px; object-fit:contain; display:block;
  filter:drop-shadow(0 32px 64px rgba(0,0,0,.25));
  z-index:1; position:relative;
}

/* ===== DESKTOP ≥1280px — точні координати ===== */
@media (min-width:1280px){
  .smc-vlm--v2 .smc-vlm__grid{ display:block; }
  .smc-vlm--v2 .smc-vlm__inner{ min-height:600px; }

  /* слова */
  .smc-vlm--v2 .w1{ position:absolute; top:60px;  left:290px; }
  .smc-vlm--v2 .w2{ position:absolute; top:60px;  right:329px; }
  .smc-vlm--v2 .w3{ position:absolute; top:148px; right:88px;  }
  .smc-vlm--v2 .w4{ position:absolute; top:236px; right:318px; }

  /* ЛІВИЙ ТЕКСТ */
  .smc-vlm--v2 .smc-vlm__left{
    position:absolute;
    top:345px;
    left:70px;
    width:450px;
    max-width:none;
  }

  /* ПРАВИЙ ТЕКСТ */
  .smc-vlm--v2 .smc-vlm__right{
    position:absolute;
    top:400px;
    left:901px;
    width:355px;
    max-width:none;
  }

  /* КНОПКА */
  .smc-vlm--v2 .smc-vlm__inner > .smc-vlm__btn{
    position:absolute;
    left:901px;
    top: calc(400px + 142px + 24px);
    bottom:58px;
  }

  /* пляшка по центру */
  .smc-vlm--v2 .smc-vlm__center{ display:block; }
  .smc-vlm--v2 .smc-vlm__bottle{
    position:absolute; left:50%; transform:translateX(-50%);
    top:40px; width:345.28px; height:520px;
  }
}

/* прості адаптиви */
@media (max-width:1200px){
  .smc-vlm--v2 .smc-vlm__grid{
    grid-template-columns:minmax(360px,1fr) 380px minmax(360px,1fr);
  }
  .smc-vlm--v2 .smc-vlm__bottle{ width:300px; height:460px; }
}
@media (max-width:992px){
  .smc-vlm--v2{ padding:40px 28px 40px; }
  .smc-vlm--v2 .smc-vlm__grid{
    grid-template-columns:minmax(320px,1fr) 320px minmax(320px,1fr);
    row-gap:18px;
  }
  .smc-vlm--v2 .smc-vlm__bottle{ width:260px; height:400px; }
}
@media (max-width:768px){
  .smc-vlm--v2 .smc-vlm__grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto auto auto auto;
    grid-template-areas:
      "w1" "w2" "w3" "w4" "left" "center" "right";
  }
  .smc-vlm--v2 .smc-vlm__bottle{ width:240px; height:370px; }
  .smc-vlm--v2 .smc-vlm__btn{ width:100%; left:auto; top:auto; bottom:auto; }
}

/* --- Fix: кнопка не виходить за межі секції (ПК) --- */
.smc-vlm--v2 .smc-vlm__inner > .smc-vlm__btn{
  top:auto;
  bottom:58px;
  left:901px;
}

/* ===================== Анімації контенту (кросфейди) ===================== */
.smc-vlm--v2 .js-vlm-left-wrap{ position:relative; }
.smc-vlm--v2 .js-vlm-left-wrap > .smc-vlm__left-text{
  position:absolute; inset:0;
  opacity:1; transform:none; filter:none;
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform, filter;
}
.smc-vlm--v2 .js-vlm-left-wrap > .smc-vlm__left-text.is-hidden{
  opacity:0; transform: translateY(10px); filter: blur(6px);
}
.smc-vlm--v2 .js-vlm-bottle{
  opacity:1; filter:none;
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform, filter;
}
.smc-vlm--v2 .js-vlm-bottle.is-hidden{
  opacity:0; transform: translateY(10px); filter: blur(6px);
}
@media (prefers-reduced-motion: reduce){
  .smc-vlm--v2 .js-vlm-left-wrap > .smc-vlm__left-text,
  .smc-vlm--v2 .js-vlm-bottle{
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===================== BASE REVEAL (ПК / дефолт) ===================== */
.smc-vlm--v2.reveal-ready [data-reveal]{
  opacity: 0;
  transform: translateX(-64px);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity 1.1s ease;
  will-change: transform, opacity;
}
.smc-vlm--v2.reveal-ready [data-reveal].is-inview{
  opacity: 1;
  transform: none;
}
/* слова заголовка на ПК — окремо зі stagger */
.smc-vlm--v2.reveal-ready .smc-vlm__heading[data-reveal] .smc-vlm__word{
  opacity: 0;
  transform: translateX(-64px);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity 1.1s ease;
  will-change: transform, opacity;
}
.smc-vlm--v2.reveal-ready .smc-vlm__heading[data-reveal] .smc-vlm__word.is-inview{
  opacity: 1; transform: none;
}
.smc-vlm--v2 .smc-vlm__heading .smc-vlm__word{
  transition-delay: calc(var(--stg-word, 0) * 90ms);
}

/* =========================================================
   MOBILE ≤480px  (макет 375 × 700)
   ========================================================= */
@media (max-width: 480px){

  .smc-vlm--v2{
    min-height: 700px;
    margin-top:80px;
    padding: 0;
  }
  .smc-vlm--v2 .smc-vlm__inner{
    min-height: 700px;
    position: relative;
  }

  /* Заголовок */
  .smc-vlm--v2 .smc-vlm__grid{ display: block; }
  .smc-vlm--v2 .smc-vlm__heading{
    display: block;
    width: 335px;
    height: 132px;
    margin: 40px auto 0;
    padding: 0;
    text-align: center;
  }
  .smc-vlm--v2 .smc-vlm__word{
    display: inline;
    position: static !important;
    transform: none !important;
    color:#fff;
    font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
    font-weight:600;
    font-size:32px;
    line-height:1;
    text-transform:uppercase;
    text-shadow:0 4px 2px rgba(0,0,0,.25);
  }
  .smc-vlm--v2 .w1::after{ content:"\00A0"; }
  .smc-vlm--v2 .w1, .smc-vlm--v2 .w2{ white-space:nowrap; }
  .smc-vlm--v2 .w3, .smc-vlm--v2 .w4{ display:block; width:100%; }

  /* Пляшка 213×320 */
  .smc-vlm--v2 .smc-vlm__center{
    position: relative;
    height: 320px;
    margin: 24px auto 0;
  }
  .smc-vlm--v2 .smc-vlm__bottle{
    position: absolute; top:0; left:50%;
    transform: translateX(-50%);
    width: 213px; height: 320px;
    object-fit: contain;
  }

  /* Лівий текст ховаємо */
  .smc-vlm--v2 .smc-vlm__left{ display:none !important; }

  /* Правий текст 335×66 на Y=517 */
  .smc-vlm--v2 .smc-vlm__right{
    position: absolute;
    top: 517px; left: 20px;
    width: 335px; max-width: none;
    z-index: 2;
  }
  .smc-vlm--v2 .smc-vlm__right-text{
    margin: 0; color:#fff; font: 500 16px/20px "Montserrat",system-ui;
    text-align:left;
  }

  /* Кнопка 335×52, по центру на 624px */
  .smc-vlm--v2 .smc-vlm__inner > .smc-vlm__btn{
    position: absolute;
    top: 607px;
    left: 50%;
    transform: translateX(-50%);
    width: 335px; height: 52px;

    display:flex; align-items:center; justify-content:center;
    padding:14px 40px 16px;
    box-sizing:border-box;

    border:1px solid #01A9A0;
    border-radius:10px;
    background:#fff;
    z-index: 5;

    color: var(--Black, #091311);
    font: 500 16px/20px "Montserrat",system-ui;
    text-align:center;
  }

  /* ==== REVEAL (мобільний) ==== */
  .smc-vlm--v2.reveal-ready [data-reveal]{
    opacity: 0;
    transform: translateX(-30px);
    transition: transform .95s cubic-bezier(.16,1,.3,1), opacity .95s ease;
    will-change: transform, opacity;
  }
  .smc-vlm--v2.reveal-ready [data-reveal].is-inview{
    opacity: 1; transform: none;
  }
  .smc-vlm--v2.reveal-ready .smc-vlm__heading[data-reveal] .smc-vlm__word{
    opacity: 0;
    transform: translateX(-30px);
    transition: transform .95s cubic-bezier(.16,1,.3,1), opacity .95s ease;
    will-change: transform, opacity;
  }
  .smc-vlm--v2.reveal-ready .smc-vlm__heading[data-reveal] .smc-vlm__word.is-inview{
    opacity: 1; transform: none;
  }
  .smc-vlm--v2 .smc-vlm__heading .smc-vlm__word{
    transition-delay: calc(var(--stg-word, 0) * 90ms);
  }

  /* центрування кнопки під час reveal */
  .smc-vlm--v2.reveal-ready .smc-vlm__inner > .smc-vlm__btn[data-reveal]{
    transform: translateX(calc(-50% - 30px));
  }
  .smc-vlm--v2.reveal-ready .smc-vlm__inner > .smc-vlm__btn[data-reveal].is-inview{
    transform: translateX(-50%);
  }

  @media (prefers-reduced-motion: reduce){
    .smc-vlm--v2.reveal-ready [data-reveal],
    .smc-vlm--v2.reveal-ready [data-reveal].is-inview,
    .smc-vlm--v2.reveal-ready .smc-vlm__heading[data-reveal] .smc-vlm__word,
    .smc-vlm--v2.reveal-ready .smc-vlm__heading[data-reveal] .smc-vlm__word.is-inview{
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
  }
}


/* ===== Products carousel section ===== */
/* ===== Секція / конт. ===== */
.smc-prod-carousel{
  margin-top:140px;            /* від попередньої секції */
  min-height:822px;            /* висота блоку */
  width: 100%;                 /* на всю ширину */
  max-width: 100vw;            /* не виходимо за межі вікна */
  overflow: hidden;            /* запобігаємо горизонтальній прокрутці */
}
.smc-prod__inner{
  max-width: 1440px;           /* максимальна ширина контейнера */
  width: 100%;
  margin: 0 auto;
  padding: 0 70px;             /* відступи 70px зліва та справа */
  box-sizing: border-box;      /* враховуємо padding у загальну ширину */
}

/* ===== Шапка секції ===== */
.smc-prod__title{
  margin:0;
  color:var(--Black,#091311);
  font:700 40px/1 "Montserrat",system-ui;   /* 40 / 100% */
  text-align:center;
}
.smc-prod__subtitle{
  margin:18px auto 60px;       /* 60 до каруселі */
  max-width:1000px;
  color:var(--Black,#091311);
  font:500 32px/1 "Montserrat",system-ui;   /* 32 / 100% */
  text-align:center;
}

/* ===== Слайдер ===== */
.smc-prod__slider{ 
  position: relative; 
  overflow: visible; 
  width: 100%;
  max-width: 1300px;           /* робоча ширина: 1440px - 70px*2 */
  margin: 0 auto;
}
.smc-prod__slider .swiper{ 
  overflow: visible; 
  width: 100%;
}

.smc-prod__card{
  text-decoration:none;
  color:inherit;
  background:transparent;
  box-shadow:none;
  transition:transform .25s ease,opacity .25s ease;
  padding:0;
  display:block;
}

.smc-prod__fig{
  width:250px; height:250px;           /* бічні – 250×250 */
  margin:0 auto 14px;
  display:grid; place-items:center;
  transition:width .25s ease, height .25s ease;
}
.smc-prod__fig img{ max-width:100%; max-height:100%; object-fit:contain; }

/* активний (центральний) слайд — 360×360 */
.smc-prod__slider .swiper-slide-active .smc-prod__fig{
  width:360px; height:360px;
}

/* Текст під карткою — по центру */
.smc-prod__meta{ max-width:360px; margin:0 auto; text-align:center; }

.smc-prod__brand{
  color:rgba(14,124,105,1);
  font:500 20px/24px "Montserrat",system-ui;   /* бічні */
}
.smc-prod__name{
  color:var(--Black,#091311);
  font:500 20px/24px "Montserrat",system-ui;   /* бічні */
}

/* центральна картка — товстіше/більше */
.smc-prod__slider .swiper-slide-active .smc-prod__brand{
  font:600 24px/1 "Montserrat",system-ui;
}
.smc-prod__slider .swiper-slide-active .smc-prod__name{
  font:600 24px/1 "Montserrat",system-ui;
}

/* ===== Кнопка (під слайдером) ===== */
.smc-prod__cta{ display:flex; justify-content:center; margin-top:28px; }
.smc-prod__btn{
  min-width:214px; height:52px; padding:14px 32px 16px;
  border:1px solid #01A9A0; border-radius:10px; background:#fff;
  color:#091311; font:500 16px/20px "Montserrat",system-ui; text-decoration:none;
  text-align: center;
}

/* ===== Стрілки ===== */
.smc-prod__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:1px solid #01A9A0; border-radius:200px;
  backdrop-filter:blur(20px);
  background:#01A9A0; color:#fff;
  z-index:3;
}
.smc-prod__prev{ left:10px; }   /* всередині контейнера */
.smc-prod__next{ right:10px; }  /* всередині контейнера */

/* значок-стрілка через маску */
.smc-prod__nav::before{
  content:""; width:14px; height:14px; background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M10.53 1.47a.75.75 0 0 1 0 1.06L6.06 7l4.47 4.47a.75.75 0 0 1-1.06 1.06L4.47 7.53a.75.75 0 0 1 0-1.06l5-5a.75.75 0 0 1 1.06 0z"/></svg>') no-repeat center / contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M10.53 1.47a.75.75 0 0 1 0 1.06L6.06 7l4.47 4.47a.75.75 0 0 1-1.06 1.06L4.47 7.53a.75.75 0 0 1 0-1.06l5-5a.75.75 0 0 1 1.06 0z"/></svg>') no-repeat center / contain;
}
.smc-prod__next::before{ transform: rotate(180deg); }

/* неактивні (коли нема куди гортати) */
.smc-prod__nav.swiper-button-disabled{
  background:transparent; color:#01A9A0;
}

/* ===== Адаптив ===== */
@media (max-width:1200px){
  .smc-prod__inner{ padding: 0 50px; }  /* зменшуємо відступи для середніх екранів */
  .smc-prod__slider{ max-width: calc(100% - 0px); } /* підлаштовуємо ширину слайдера */
  .smc-prod__fig{ width:220px; height:220px; }
  .smc-prod__slider .swiper-slide-active .smc-prod__fig{ width:300px; height:300px; }
  .smc-prod__brand,.smc-prod__name{ font-size:18px; line-height:22px; }
  .smc-prod__slider .swiper-slide-active .smc-prod__brand,
  .smc-prod__slider .swiper-slide-active .smc-prod__name{ font-size:20px; }
  .smc-prod__prev{ left:6px; } .smc-prod__next{ right:6px; }
}
@media (max-width:768px){
  .smc-prod__inner{ padding: 0 20px; }  /* мобільні відступи */
  .smc-prod__slider{ max-width: calc(100% - 0px); } /* підлаштовуємо ширину слайдера */
  .smc-prod__title{ font-size:28px; }
  .smc-prod__subtitle{ font-size:18px; margin-bottom:32px; }
  .smc-prod__fig{ width:180px; height:180px; }
  .smc-prod__slider .swiper-slide-active .smc-prod__fig{ width:240px; height:240px; }
}

/* Mobile fix: ховаємо сусідні слайди, нічого більше не чіпаємо */
@media (max-width:480px){
  .smc-prod__slider,
  .smc-prod__slider .swiper{
    overflow: hidden;          /* щоб наступне зображення не виглядало */
  }
  .smc-prod__slider .swiper-wrapper{
    margin: 0;                 /* без бокових зсувів */
  }
  .smc-prod__slider .swiper-slide{
    width: 100% !important;    /* рівно один слайд у вікні */
  }
.smc-prod-carousel{
  min-height: 536px;
}


}

/* Mobile only */
@media (max-width:480px){
  /* ховаємо те, що поза вікном */
  .smc-prod__slider,
  .smc-prod__slider .swiper{
    overflow: hidden;
  }
/* ===== Products carousel: mobile button ≤480px ===== */
@media (max-width:480px){
  .smc-prod__cta{
    margin-top:24px;
    display:flex;
    justify-content:center; /* по центру */
  }
  .smc-prod__btn{
    width:335px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px 40px 16px 40px;
    box-sizing:border-box;

    border:none;
    border-radius:10px;
    background: var(--Green, #01A9A0);
    color:#fff;

    font:500 16px/20px "Montserrat", system-ui;
    text-align:center;
  }
}


  /* один слайд у вікні + центр контенту */
  .smc-prod__slider .swiper-slide{
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;     /* це вирівнює картинку по центру */
  }
  .smc-prod-carousel{
    margin-top:80px;
}

  /* на всяк. випадок: ніяких внутр. зсувів/падингів */
  .smc-prod__slider .swiper-wrapper{ margin:0; }

  /* фігура точно по центру */
  .smc-prod__fig{ margin: 0 auto 14px; }
}

/* ===== GEO MAP (desktop) ===== */
.smc-geo{                /* від попередньої секції */
  min-height:830px;                 /* висота блоку з макета */
  position:relative;
}

.smc-geo__inner{
  max-width:999px;                  /* ширина секції з макета */
  margin:0 auto;
  padding-inline: 70px;
  overflow-x: hidden;
}

.smc-geo__title{
  margin:0 0 18px 0;
  color:var(--Black, #091311);
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight:700;
  font-size:40px;
  line-height:1;                    /* 100% */
  letter-spacing:0;
  text-align:center;                  /* як у вимогах */
}

.smc-geo__subtitle{
  margin:0;
  color:var(--Black, #091311);
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight:500;
  font-size:32px;
  line-height:1;                    /* 100% */
  letter-spacing:0;
  text-align:center;
}

/* Карта + пін-шар */
.smc-geo__mapwrap{
  position:relative;
  margin-top:40px;                  /* від тексту до карти */
  width:100%;
  display:flex;
  justify-content:center;
}

.smc-geo__map{
  display:block;
  width:863px;
  height:600px;
  object-fit:contain;
}

/* Якщо картинки немає — показати градієнт-плейсхолдер потрібного розміру */
.smc-geo__map--placeholder{
  width:863px;
  height:600px;
  background: radial-gradient(71% 71% at 50% 50%,
              rgba(180,240,231,1) 0%,
              rgba(93,206,196,1) 34%,
              rgba(1,169,160,1) 87%);
  border-radius:12px;               /* можна прибрати, якщо не треба */
}

/* Шар позначок поверх карти */
.smc-geo__pins{
  position:absolute;
  inset:0;
  margin:0; padding:0;
  list-style:none;
  pointer-events:none;              /* кліки лише по посиланнях */
}

.smc-geo__pin{
  position:absolute;
  transform:translate(-50%, -50%);  /* координата = центр іконки */
  pointer-events:none;
}

.smc-geo__pin-link,
.smc-geo__pin-mark{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;          /* розмір іконки за макетом */
}

.smc-geo__pin-ico{
  display:block;
  width:24px; height:24px;
}

/* прихований текст для скрінрідерів */
.smc-geo__sr{
  position:absolute!important;
  width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important;
}

/* ===== GEO MAP — mobile ≤480px ===== */
@media (max-width:480px){
  .smc-geo {
   margin-top:80px;
   min-height:438px;
}
  /* типографіка */
  .smc-geo__title{
    font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight:700;
    font-size:24px;
    line-height:1;               /* 100% */
    letter-spacing:0;
    text-align:left;
    margin:0 20px 12px 20px;
  }
  .smc-geo__subtitle{
    font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight:500;
    font-size:18px;
    line-height:1;               /* 100% */
    letter-spacing:0;
    text-align:left;
    margin:0 20px 0 20px;                   /* без зайвих відступів */
  }

  /* обгортка карти: так само відступаємо від тексту */
  .smc-geo__mapwrap{
    margin-top:40px;             /* як у вимогах */
    justify-content:center;      /* карта по центру */
  }

  /* сама карта (img) */
  .smc-geo__map{
    width:335px;
    height:230px;
    object-fit:contain;
  }

  /* плейсхолдер-градієнт (коли немає зображення) */
  .smc-geo__map--placeholder{
    width:335px;
    height:230px;
    background: radial-gradient(71% 71% at 50% 50%,
                rgba(180,240,231,1) 0%,
                rgba(93,206,196,1) 34%,
                rgba(1,169,160,1) 87%);
    border-radius:8px;
  }

  /* шар з пін-іконками поверх карти (розмір під карту) */
  .smc-geo__pins{
    inset:0;                     /* розтягується по .smc-geo__mapwrap */
  }

  /* розміри іконки на мобільному */
  .smc-geo__pin-link,
  .smc-geo__pin-mark{
    width:24px;
    height:23.7px;
  }
  .smc-geo__pin-ico{
    width:24px;
    height:23.7px;
  }
}

/* YOUTUBE SECTION */
.smc-youtube {
  --green: var(--Green, #01A9A0);
  --title-fz: 40px; /* візуально під 49px висоту рядка */
  --card-w: 635px;
  --card-h: 300px;
  --gap: 30px;      /* 1300 - (635*2) = 30 */
  margin-top: 140px;
  padding: 0 16px;
}

.smc-youtube__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: 24px;
  min-height: 465px; /* загальна висота секції з макету */
  padding-inline: 70px;
  overflow-x: hidden;
}

/* Заголовок */
.smc-youtube__title {
  margin: 0;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--title-fz);
  line-height: 1;
  color: #091311;
}

/* Сітка карток */
.smc-youtube__grid {
  display: grid;
  grid-template-columns: var(--card-w) var(--card-w);
  gap: var(--gap);
}

/* Картка відео */
.smc-youtube__card {
  position: relative;
  display: block;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  isolation: isolate; /* для backdrop-filter кнопки */
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.smc-youtube__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}

/* Фон */
.smc-youtube__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Темний шар поверх (30% чорний, злегка градієнт вниз) */
.smc-youtube__overlay {
  position: absolute; inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 100%),
    rgba(0,0,0,0.30); /* #0000004D */
}

/* Play-кнопка по центру: 40×40, blur 20, фон #FFFFFF80 */
.smc-youtube__play {
  position: absolute;
  z-index: 3;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 200px;
  padding: 10px;
  background: rgba(255,255,255,0.5); /* #FFFFFF80 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 8px rgba(0,0,0,.20);
}
.smc-youtube__play svg { display:block; }

/* Підпис на зображенні (внизу ліворуч) */
.smc-youtube__caption {
  position: absolute;
  left: 20px; bottom: 20px;
  z-index: 3;
  color: var(--White, #fff);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  pointer-events: none;
}

/* Кнопка «Детальніше» (outline) */
.smc-youtube__cta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.smc-youtube__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 180px; height: 52px;
  padding: 14px 40px 16px 40px; /* як у макеті */
  box-sizing: border-box;
  border: 1px solid var(--green); /* #01A9A0 */
  border-radius: 10px;
  background: var(--White, #fff);
  color: #091311;
  text-decoration: none;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px; font-weight: 700; line-height: 1;
  transition: box-shadow .15s ease, transform .15s ease, filter .15s ease;
}
.smc-youtube__btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(1,169,160,.20); }
.smc-youtube__btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(1,169,160,.15); }

/* Адаптив */
@media (max-width: 1024px) {
  .smc-youtube__inner { min-height: unset; }
  .smc-youtube__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .smc-youtube__card {
    width: 100%;
    height: 240px;
  }
  .smc-youtube__caption { font-size: 20px; }
  .smc-youtube__title { font-size: 32px; }
}

@media (max-width: 480px) {
  .smc-youtube__card { height: 200px; }
  .smc-youtube__title { font-size: 28px; }
}/* ===== Mobile 375×429 ===== */
@media (max-width: 480px) {
  .smc-youtube { padding: 0 20px; margin-top: 80px; } /* щоб контент помістився: 20 + 335 + ~space */
  .smc-youtube__inner {
    min-height: 429px; /* як у макеті */
    row-gap: 16px;
  }

  /* Заголовок 24/700 */
  .smc-youtube__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;      /* 100% */
    color: var(--Black, rgba(9,19,17,1));
    margin-top: 0;
  }

  /* Горизонтальна стрічка: показуємо по 1 картці, решта — скрол */
  .smc-youtube__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 335px;  /* ширина однієї картки */
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .smc-youtube__grid::-webkit-scrollbar { display: none; } /* чистий вигляд на iOS/Chrome */

  /* Картка */
  .smc-youtube__card {
    width: 335px;
    height: 300px;
    border-radius: 20px;
    scroll-snap-align: start;
  }

  /* Темний шар поверх зображення: 30% чорний */
  .smc-youtube__overlay {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 100%),
      rgba(0,0,0,0.30);
  }

  /* Підпис на зображенні: 18/600, білий */
  .smc-youtube__caption {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;  /* 100% */
    color: var(--White, #fff);
    text-align: left;
    /* тінь для читабельності */
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
  }

  /* Play-кнопка без змін за розміром: 40×40, blur 20, #FFFFFF80 */

  /* CTA «Детальніше»: 335×52, outline зелений */
  .smc-youtube__cta {
    justify-content: center; /* за макетом по центру */
  }
  .smc-youtube__btn {
    width: 100%;
    max-width: 335px;
    height: 52px;
    padding: 14px 40px 16px 40px; /* з макета */
    box-sizing: border-box;
    border: 1px solid var(--Green, #01A9A0);
    border-radius: 10px;
    background: var(--White, #fff);
  }
}

/* === YouTube: вирівнюємо CTA під правий край гріда (2×635 + 30 = 1300) === */
@media (min-width: 1025px){
  .smc-youtube__cta{
    /* робимо контейнер кнопки тієї ж ширини, що й грід карток */
    width: calc(var(--card-w) * 2 + var(--gap)); /* 1300px за макетом */
    margin: 0;                                    /* без авто-центрування */
    display: flex;
    justify-content: flex-end;                    /* кнопка “впирається” у правий край гріда */
  }
}

/* На <=1024px лишаємо твою мобільну/планшетну логіку (по центру, 100% ширини) */
@media (max-width: 1024px){
  .smc-youtube__cta{
    width: 100%;
    justify-content: center;
  }
}


/* ===== Where to buy (Grid) ===== */
/* ===== Where to buy (Grid) — FULL CSS ===== */

.smc-buygrid {
  padding: 0 16px;
  --logo-max-h: 100px; /* десктоп: висота картинки в осередку 200×150 */
  margin-top: 140px;
  margin-bottom:140px;
}

.smc-buygrid__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 70px;
  overflow-x: hidden;
}

/* === Reveal animation for logos (desktop + mobile) === */
.smc-anim {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  will-change: transform, opacity;
}
.smc-anim.is-visible {
  opacity: 1;
  transform: none;
  transition: transform .45s ease, opacity .45s ease;
}
/* якщо увімкнено зменшення руху — показуємо одразу, без анімації */
@media (prefers-reduced-motion: reduce) {
  .smc-anim { opacity: 1; transform: none; }
  .smc-anim.is-visible { transition: none; }
}
/* плавність горизонтального скролу треку на мобільному */
.smc-buygrid__track { scroll-behavior: smooth; }

/* Заголовок / Підзаголовок (desktop) */
.smc-buygrid__title {
  width: 100%;
  margin: 32px 0 8px;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 40px; font-weight: 700; line-height: 1;
  color: var(--Black, rgba(9,19,17,1));
  text-align: center;
}
.smc-buygrid__subtitle {
  margin: 0 0 24px;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px; font-weight: 500; line-height: 20px;
  color: var(--Black, rgba(9,19,17,1));
  text-align: center;
  max-width: 980px;
}

/* Карта як фон */
.smc-buygrid__map {
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 16 / 9;          /* 1440×810 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  /*box-shadow: 0 8px 24px rgba(0,0,0,.05); */
}

/* Внутрішній фрейм */
.smc-buygrid__frame {
  max-width: 1170px;
  width: 100%;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}

/* ===== DESKTOP layout ===== */
.smc-buygrid__desktop { display: block; }
.smc-buygrid__mobile  { display: none;  }

/* Верхні 3 ряди × 5 з фіксованим gap 40px */
.smc-buygrid__grid--top {
  display: grid;
  grid-template-columns: repeat(5, 200px);
  grid-auto-rows: 150px;
  column-gap: 40px;
  row-gap: 40px;
  justify-content: center; /* точне центроване вирівнювання в 1170 */
}
/* Останній ряд ×3 по центру, той же gap 40px */
.smc-buygrid__grid--last3 {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-auto-rows: 150px;
  column-gap: 40px;
  justify-content: center;
}

/* Комірка 200×150 і картинка з лімітом висоти */
.smc-buygrid__logo {
  width: 200px; height: 150px;
  padding: 8px 10px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
}
.smc-buygrid__logo-img {
  max-height: var(--logo-max-h) !important;
  width: auto !important; height: auto !important;
  max-width: 100% !important;
  object-fit: contain; display: block;
}

/* ===== MOBILE (≤480px) ===== */
@media (max-width: 480px) {
  .smc-buygrid { margin-top: 80px; margin-bottom:80px; }
  .smc-buygrid__title { font-size: 24px; font-weight: 700; line-height: 1; text-align: left; }
  .smc-buygrid__subtitle { font-size: 16px; font-weight: 500; line-height: 20px; text-align: left; }

  /* Карта 333.51×224 */
  .smc-buygrid__map { width: 333.51px; height: 224px; aspect-ratio: auto; border-radius: 12px; box-shadow: none; }

  /* Фрейм під карусель */
  .smc-buygrid__frame { width: 333.51px; align-items: stretch; }

  /* Показуємо мобільний режим; десктоп ховаємо */
  .smc-buygrid__desktop { display: none; }
  .smc-buygrid__mobile  { display: block; }

  /* Трек-карусель: сторінки фіксованої ширини */
  .smc-buygrid__track {
    --page-w: 333.51px;       /* ширина “екрана” каруселі */
    --gap-h: 17.5px;          /* горизонтальний відступ між лого */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding-bottom: 6px;
  }
  .smc-buygrid__track::-webkit-scrollbar { display: none; }

  /* Сторінка: 2 ряди × 3; ширина = --page-w (вміст улізе з точними gap) */
  .smc-buygrid__page {
    flex: 0 0 var(--page-w);
    display: grid;
    grid-template-columns: repeat(3, calc((var(--page-w) - 2 * var(--gap-h)) / 3));
    grid-template-rows: repeat(2, 75px);
    column-gap: var(--gap-h);
    row-gap: 17.5px;
    justify-content: center;
    scroll-snap-align: start;
  }

  /* Комірка ~100×75 (ширина розрахована, висота фікс.) */
  .smc-buygrid__logo { width: auto; height: 75px; padding: 4px; }
  .smc-buygrid__logo-img { max-height: 60px !important; }

  /* Стрілки (правий нижній кут) */
  .smc-buygrid__arrows {
     position: static;          /* було: absolute */
    width: 100%;
    height: 40px;
    margin-top: 16px;          /* відступ від карти */
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;   /* центр по горизонталі */
  }

  .smc-buygrid__arrow {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 200px;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
    background: var(--Green, #01A9A0);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 6px 16px rgba(0,0,0,.20);
    border: none;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease, filter .15s ease;
  }
 .smc-buygrid__arrow.is-disabled {
    background: transparent;
    color: var(--Black, #091311);
    border: 1px solid var(--Black, #091311);
    box-shadow: none;
    cursor: default;
    opacity: .75;
  }
  .smc-buygrid__arrow.is-hidden { display: none; }
}


/* HERO: контейнер на всю ширину, падинги по 70px від краю вікна */

.smc-hero > .smc-container--fluid {
  max-width: 1440px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 70px !important;
  padding-right: 70px !important;
  box-sizing: border-box;
}

/* HERO: мобільні відступи 20px */
@media (max-width: 480px){
  .smc-hero > .smc-container--fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


.smc-hero .smc-hero-inner {
  /* top | right | bottom | left */
  padding-top: calc(151.5px + var(--smc-header-h)) !important;
  padding-bottom: 70px !important;
  width: 100% !important;
}

/* мобільний gutter 20px */
@media (max-width: 430px){
  .smc-hero .smc-hero-inner{
    padding: calc(388px + var(--smc-header-h)) 0px 70px 0px !important;
  }
}

/* ===== АДАПТИВНІ ПРАВИЛА ДЛЯ СЕКЦІЙ ===== */

/* Запобігаємо горизонтальній прокрутці в проблемних секціях */
.smc-brands,
.smc-youtube,
.smc-buygrid,
.smc-vlm,
.smc-trust,
.smc-geo,
.smc-prod-carousel {
  overflow-x: hidden;
}

@media (max-width: 1024px) {
  .smc-brands__inner,
  .smc-youtube__inner,
  .smc-buygrid__inner,
  .smc-vlm--v2 .smc-vlm__inner,
  .smc-geo__inner {
    padding-inline: 16px;
  }
}

@media (max-width: 640px) {
  .smc-brands__inner,
  .smc-youtube__inner,
  .smc-buygrid__inner,
  .smc-vlm--v2 .smc-vlm__inner,
  .smc-geo__inner {
    padding-inline: 16px;
  }
}