/* public/styles/hero-swiper.css */
/* >>> ЕДИНАЯ ТОЧКА НАСТРОЙКИ <<< */
:root{
  --header-h: 0px;            /* JS пишет реальную высоту шапки */
  --hero-top-gap: 32.4px;     /* отступ сверху от шапки */
  --hero-bottom-gap: 32.4px;  /* отступ снизу */
  --hero-side-gap: 24px;      /* боковые поля СНАРУЖИ холста */
  --hero-max-width: 1600px;   /* <<< МЕНЯЕШЬ ТУТ ШИРИНУ БАННЕРА/ХОЛСТА >>> */
}

body{ padding-top: var(--header-h); }

/* ХОЛСТ баннера */
.swip.swiper{
  width: min(var(--hero-max-width), calc(100vw - 2*var(--hero-side-gap)));
  margin: var(--hero-top-gap) auto var(--hero-bottom-gap);
  border-radius: 16px;
  overflow: hidden;
}

/* ШАПКА: контент шапки ровно той же ширины, что и холст баннера */
.u-header .u-sheet-1,
.header-inner{
  width: min(var(--hero-max-width), calc(100vw - 2*var(--hero-side-gap)));
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* Содержимое слайдов */
.swiper-wrapper{ align-items: stretch; }
.swiper-slide{ display:flex; align-items:center; justify-content:center; background:#fff; }
.swiper-slide img{ width:100%; height:100%; object-fit: contain; display:block; }

/* ЛОКАЛЬНО: внешние стрелки для главного баннера */
.hero-swiper {
  position: relative;
  display: block;
  width: fit-content;
  margin: var(--hero-top-gap) auto var(--hero-bottom-gap);
  /* резервируем место под внешние стрелки, чтобы они не обрезались родителем */
  padding-left: 60px;  /* 44px кнопка + 16px зазор */
  padding-right: 60px;
}
/* Центруем сам баннер внутри оболочки и убираем его внешние маргины */
.hero-swiper > .swip.swiper{ margin: 0 !important; }
.hero-nav-next, .hero-nav-prev {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; z-index: 100; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background-color: rgba(0,0,0,0.20); color: #fff; border-radius: 50%;
  border: 0; outline: 0; transition: background-color .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  pointer-events: auto;
}
/* Делаем стрелки чуть «снаружи», но чтобы они не выпадали за край экрана */
/* Кнопки располагаем в «паддингах» оболочки */
.hero-nav-prev { left: 8px;  transform: translateY(-50%); z-index: 1000; }
.hero-nav-next { right: 8px; transform: translateY(-50%); z-index: 1000; }
.hero-nav-next:hover, .hero-nav-prev:hover { background-color: rgba(0,0,0,0.35); }
.hero-nav-next::before, .hero-nav-prev::before, .hero-nav-next::after, .hero-nav-prev::after { content: ''; position: absolute; }
.hero-nav-next::before { width:16px; height:2px; background: currentColor; top:50%; left:14px; transform: translateY(-50%); }
.hero-nav-prev::before { width:16px; height:2px; background: currentColor; top:50%; right:14px; transform: translateY(-50%); }
.hero-nav-next::after { border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:8px solid currentColor; top:50%; right:12px; transform: translateY(-50%); }
.hero-nav-prev::after { border-top:6px solid transparent; border-bottom:6px solid transparent; border-right:8px solid currentColor; top:50%; left:12px; transform: translateY(-50%); }