/* Somio Hero Slider */

.somio-hero {
	--somio-hero-h: 74vh;
	--somio-hero-min-h: 460px;
	--somio-hero-nav: #fff;
	--hero-price-size: 46px;
	--hero-price-accent: #ed1c24;
	width: 100%;
	overflow: hidden;
}

/* `.swiper-autoheight .swiper-slide{height:auto}` зі swiper перебиває звичайний
   селектор — тому тримаємо висоту з тією ж специфічністю */
.somio-hero .somio-hero__slide,
.somio-hero.swiper-autoheight .somio-hero__slide {
	position: relative;
	height: var(--somio-hero-h);
	min-height: var(--somio-hero-min-h);
	overflow: hidden;
}

/* ── фото ─────────────────────────────────────────────────────────── */

.somio-hero__media {
	position: absolute;
	inset: 0;
}

/* Дві причини, чому кадр, нижчий за слайд, лишав сіру смугу знизу:
   1) <picture> за замовчуванням inline з висотою auto — тоді `height:100%`
      на <img> нема від чого рахувати;
   2) `.elementor img{height:auto}` (0,1,1) перебиває `.somio-hero__img` (0,1,0).
   Тому обгортка стає блоком на всю висоту, а в селектора картинки
   піднята специфічність. Без обох правок `object-fit: cover` не має що
   обрізати і просто нічого не робить. */
.somio-hero .somio-hero__media > picture {
	display: block;
	width: 100%;
	height: 100%;
}

.somio-hero .somio-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── відео (тільки мобільний) ──────────────────────────────────────── */

.somio-hero__video {
	display: none;
}

@media (max-width: 767px) {
	.somio-hero__video {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* ── затемнення зліва, щоб світлий текст читався на світлому кадрі ── */

.somio-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, transparent 46%);
}

/* ── текст ────────────────────────────────────────────────────────── */

.somio-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding-inline-start: 6%;
	padding-inline-end: 24px;
}

.somio-hero__inner {
	max-width: 520px;
}

.somio-hero__title {
	margin: 0;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 300;
	font-size: 64px;
	line-height: 1;
	letter-spacing: -.5px;
	color: #fff;
}

.somio-hero__sub {
	margin: 14px 0 0;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, .95);
}

/* ── кнопки ───────────────────────────────────────────────────────── */

.somio-hero__price {
	margin: 18px 0 0;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1;
}

/* стара ціна лежить просто на фото (скрим сюди не дотягується на мобільному),
   тому їй потрібні і щільність, і тінь — інакше зникає на світлих кадрах */
.somio-hero__price del {
	font-size: calc(var(--hero-price-size) * .5);
	font-weight: 500;
	color: rgba(255, 255, 255, .88);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.somio-hero__price ins {
	font-size: var(--hero-price-size);
	font-weight: 800;
	letter-spacing: -.5px;
	color: #fff;
	text-decoration: none;
}

/* значок знижки — рахується з цін у PHP */
.somio-hero__off {
	align-self: center;
	padding: .34em .6em;
	border-radius: 6px;
	background: var(--hero-price-accent);
	color: #fff;
	font-size: calc(var(--hero-price-size) * .42);
	font-weight: 800;
	letter-spacing: .3px;
	line-height: 1;
	white-space: nowrap;
}

/* вигляд «плашка»: нова ціна на кольоровому тлі */
.somio-hero__price.is-badge ins {
	padding: .2em .42em;
	border-radius: 8px;
	background: var(--hero-price-accent);
}

/* поруч із червоною плашкою значок мусить бути контрастним, а не напівпрозорим:
   на світлому фото 16% білого зникає */
.somio-hero__price.is-badge .somio-hero__off {
	background: #fff;
	color: var(--hero-price-accent);
}

.somio-hero__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.somio-hero__btn {
	display: inline-block;
	padding: 18px 34px;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #1a1a1a;
	background-color: #fff;
	border-radius: 0;
	text-decoration: none;
	transition: background-color .2s ease;
}

.somio-hero__btn:hover,
.somio-hero__btn:focus {
	color: #1a1a1a;
	text-decoration: none;
}

/* ── стрілки й крапки ─────────────────────────────────────────────── */

.somio-hero .somio-hero__arrow {
	color: var(--somio-hero-nav);
}

.somio-hero .somio-hero__arrow::after {
	font-size: 26px;
}

.somio-hero .somio-hero__dots {
	--swiper-pagination-color: var(--somio-hero-nav);
	--swiper-pagination-bullet-inactive-color: var(--somio-hero-nav);
	--swiper-pagination-bullet-inactive-opacity: .5;
}

/* ── мобільний: вертикальний кадр, текст поверх нього знизу ───────── */

@media (max-width: 767px) {

	/* висота задається контролом (як на десктопі) — щоб УСІ слайди були
	   однакові незалежно від пропорцій кадру чи відео */
	.somio-hero .somio-hero__slide,
	.somio-hero.swiper-autoheight .somio-hero__slide {
		height: var(--somio-hero-h);
		min-height: var(--somio-hero-min-h);
	}

	/* текст лежить НА кадрі знизу; градієнт знизу вгору дає контраст */
	.somio-hero__scrim {
		background: linear-gradient(180deg,
			rgba(0, 0, 0, 0) 34%,
			rgba(0, 0, 0, .38) 64%,
			rgba(0, 0, 0, .80) 100%) !important;
	}

	.somio-hero__content {
		justify-content: flex-end;
		/* крапки пагінації сидять на bottom:10px і мають 24px висоти — без цього
		   запасу кнопка слайда налазить на них */
		padding-block-end: 48px;
		padding-inline-end: 20px;
	}

	.somio-hero__inner { max-width: none; }

	.somio-hero__title {
		font-size: 30px;
		letter-spacing: -.3px;
	}

	.somio-hero__sub {
		font-size: 15px;
		margin-top: 8px;
	}

	.somio-hero { --hero-price-size: 32px; }
	.somio-hero__price { margin-top: 12px; gap: 8px; }

	.somio-hero__btns {
		margin-top: 16px;
		gap: 10px;
	}

	.somio-hero__btn {
		padding: 13px 20px;
		font-size: 14px;
	}

	/* стрілки на дотику зайві — лишається свайп */
	.somio-hero .somio-hero__arrow { display: none; }
}

@media (min-width: 768px) and (max-width: 1024px) {

	.somio-hero__title {
		font-size: 44px;
	}

	.somio-hero__sub {
		font-size: 16px;
	}

	.somio-hero__btn {
		padding: 15px 28px;
		font-size: 15px;
	}
}