/* ===== Hero Slider like example ===== */
.st-hero-slider{ padding: 16px 0; }

.st-hero-slider .carousel{
	border: 2px solid rgba(208,132,112,.55);
	border-radius: 6px;
	overflow: hidden;
	background: #f6f1ec;
}

.st-hero-slide{
	position: relative;
	min-height: 420px;
	background-size: cover;
	background-position: bottom right;
}

.st-hero-overlay{
	position:absolute; inset:0;
	background: linear-gradient(90deg, rgba(246,241,236,.92) 0%, rgba(246,241,236,.78) 45%, rgba(246,241,236,.30) 100%);
}

.st-hero-inner{ position: relative; z-index: 2; height: 100%; }
.st-hero-grid{
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: 24px;
	min-height: 420px;
	padding: 24px 0;
}

.st-hero-text{ max-width: 640px; text-align: center;}
.st-hero-kicker{
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(0,0,0,.55);
	
	margin-bottom: 6px;
	font-size: 20px;
}
.st-hero-headline{
	/* font-weight: 700; */
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgb(203 125 80);
	margin-bottom: 14px;
	font-size: 30px;
}
.st-hero-accent{
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(208,132,112,.95);
	margin: 8px 0 12px;
	font-size: 34px;
	line-height: 1.05;
}
.st-hero-title{
	font-size: 20px;
	line-height: 1.7;
	font-weight: 500;
	color: rgba(0,0,0,.75);
	margin-bottom: 16px;
}
.st-hero-note{
	font-size: 18px;
	color: rgba(0,0,0,.55);
	margin-bottom: 18px;
}

.st-hero-btn{
	display: inline-flex;
	align-items:center;
	justify-content:center;
	height: 42px;
	padding: 0 18px;
	border-radius: 3px;
	background: rgba(208,132,112,.95);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.st-hero-btn:hover{ color:#fff; filter: brightness(.95); }

.st-hero-media{
	display:flex;
	justify-content:center;
	align-items:center;
}
.st-hero-product{
	max-width: 520px;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 30px rgba(0,0,0,.22));
}

/* arrows (squares) */
.st-hero-arrow{
	width: auto;
	opacity: 1;
}
.st-hero-arrow__box{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 42px;
	height: 42px;
	background: rgba(208,132,112,.75);
	color: #fff;
	border-radius: 3px;
	font-size: 20px;
}
.st-hero-arrow:hover .st-hero-arrow__box{
	background: rgba(208,132,112,.88);
}

/* dots */
.st-hero-slider .carousel-indicators{
	margin-bottom: 10px;
}
.st-hero-slider .carousel-indicators [data-bs-target]{
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(208,132,112,.55);
	opacity: 1;
	border: 0;
}
.st-hero-slider .carousel-indicators .active{
	background: rgba(208,132,112,.95);
}

/* responsive */
@media (max-width: 991.98px){
	.st-hero-slide{ min-height: 360px; }
	.st-hero-grid{
		grid-template-columns: 1fr;
		min-height: 360px;
		padding: 18px 0;
	}
	.st-hero-media{ order: -1; }
	.st-hero-title{ font-size: 26px; }
	.st-hero-accent{ font-size: 28px; }
}

/* Slide can be a link (when btn_text empty) */
.st-hero-slide--link{
  display:block;
  color: inherit;
  text-decoration: none;
}
.st-hero-slide--link:hover{ color: inherit; text-decoration:none; }

/* Per-slide: disable overlay "blurring" */
.st-hero-slide--nooverlay .st-hero-overlay{ display:none; }

/* Optional: better layout when content missing */
.st-hero-grid--textonly{ grid-template-columns: 1fr; }
.st-hero-grid--mediaonly{
  grid-template-columns: 1fr;
  justify-items: center;
}

.dark .st-hero-kicker, .dark .st-hero-headline, .dark .st-hero-title, .dark .st-hero-note {
	color:#fff;
}


/* Desktop 4:1 */
@media (min-width: 992px){
  .st-hero-slide{
    width: 100%;
    min-height: 0;        /* убираем фиксированную высоту */
    aspect-ratio: 4 / 1;  /* 4:1 */
  }

  .st-hero-grid{
    min-height: 100%;
  }
}

/* Fallback для старых браузеров */
@supports not (aspect-ratio: 4 / 1){
  @media (min-width: 992px){
    .st-hero-slide::before{
      content:"";
      display:block;
      padding-top: 25%; /* 1/4 = 0.25 */
    }
    .st-hero-inner{
      position:absolute;
      inset:0;
    }
  }
}

/* Desktop 1600:522 */
@media (min-width: 992px){
  .st-hero-slide{
    width: 100%;
    min-height: 0;
    aspect-ratio: 1600 / 522;
  }

  .st-hero-grid{
    min-height: 100%;
  }
}

/* Fallback для старых браузеров */
@supports not (aspect-ratio: 1600 / 522){
  @media (min-width: 992px){
    .st-hero-slide::before{
      content:"";
      display:block;
      padding-top: 32.625%; /* 522/1600*100 */
    }
    .st-hero-inner{
      position:absolute;
      inset:0;
    }
  }
}
/* ===== HERO SLIDER: backgrounds from CSS vars ===== */
.st-hero-slide{
  position: relative;
  background-image: var(--st-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* мобильный фон */
@media (max-width: 767.98px){
  .st-hero-slide{
    background-image: var(--st-hero-bg-m);
  }
}

/* на мобиле кликаем весь слайд по btn_url */
.st-hero-tap{
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
}

@media (max-width: 767.98px){
  /* показываем слой-ссылку */
  .st-hero-tap{ display: block; }

  /* на мобиле используем только картинку: прячем текст/кнопки/медиа */
  .st-hero-inner{ display: none !important; }
}

/* чтобы гарантированно не давало горизонтальный скролл */
.st-hero-slider,
.carousel,
.carousel-inner{
  overflow-x: clip;
}

.st-hero-slide { position: relative; }
.st-hero-overlay { position:absolute; inset:0; z-index:2; }
.st-hero-tap { position:absolute; inset:0; z-index:5; display:none; }
.st-hero-inner { position:relative; z-index:4; }
@media (max-width: 767.98px){ .st-hero-tap{ display:block; } .st-hero-inner{ display:none !important; } }


.carousel-control-next, .carousel-control-prev  {
	z-index: 6;
}