/* Beautix Tabbed Slider */
.bts {
	--bts-accent: #E61457;
	--bts-ink: #231018;
	--bts-surface: #FDF3F6;
	--bts-per-view: 3;
	--bts-gap: 20px;
	--bts-fit: cover;
	--bts-radius: 14px;
	--bts-tab-color: var(--bts-ink);
	--bts-tab-bg: var(--bts-surface);
	--bts-tab-active-color: #fff;
	--bts-btn: var(--bts-accent);
	--bts-btn-hover: #C10E48;
	color: var(--bts-ink);
	font-family: inherit;
}

/*
 * Inside Elementor flex containers the widget wrapper is sized from its content,
 * and Chrome measures a horizontal scroller far too short before its images load,
 * letting the next section overlap. A definite width gives the scroller a real
 * width to lay out against, so the slider reserves its full height immediately.
 */
.elementor-widget-beautix_tabbed_slider,
.elementor-widget-beautix_image_slider,
.elementor-widget-beautix_row_slider { width: 100%; }

/* Heading */
.bts__head { margin: 0 0 18px; text-align: center; }
.bts__title {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--bts-ink);
}
.bts__subtitle { margin: 6px 0 0; font-size: 15px; opacity: .75; }

/* Tabs: centered on desktop, swipeable pill row on mobile */
.bts__tabs {
	display: flex;
	gap: 8px;
	justify-content: flex-start;
	margin: 0 0 22px;
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.bts__tabs::-webkit-scrollbar { display: none; }
/* Auto margins center the row when it fits, and still scroll from the first tab when it overflows. */
.bts .bts__tab:first-child { margin-left: auto; }
.bts .bts__tab:last-child { margin-right: auto; }
.bts-align-left .bts__head { text-align: left; }
.bts-align-left .bts .bts__tab:first-child { margin-left: 0; }
.bts .bts__tab {
	flex: 0 0 auto;
	margin: 0;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--bts-tab-bg);
	color: var(--bts-tab-color);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.bts .bts__tab:hover { color: var(--bts-accent); }
.bts .bts__tab.is-active {
	background: var(--bts-accent);
	color: var(--bts-tab-active-color);
}
.bts .bts__tab:focus-visible { outline: 2px solid var(--bts-accent); outline-offset: 2px; }
.bts .bts__tab:active { transform: scale(.97); }

/* Panels */
.bts__panel[hidden] { display: none !important; }
.bts__panel.is-entering { animation: bts-in .45s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes bts-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* Track: native scroll-snap = app-like momentum swipe on phones */
.bts__viewport { position: relative; }
.bts__track {
	display: flex;
	gap: var(--bts-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.bts__track::-webkit-scrollbar { display: none; }
/* Free scroll and continuous: no snapping, the strip glides and stops where the finger leaves it. */
.bts--mode-free .bts__track,
.bts--mode-continuous .bts__track { scroll-snap-type: none; }
.bts--mode-free .bts__track { cursor: grab; }
.bts--mode-free .bts__track.is-dragging { cursor: grabbing; }
.bts__slide {
	flex: 0 0 calc((100% - var(--bts-gap) * (var(--bts-per-view) - 1)) / var(--bts-per-view));
	min-width: 0;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	list-style: none;
}
.bts__slide::before { content: none; }

/* Multi-row: one scrolling grid that fills column by column, so all rows move together. */
.bts--rows .bts__track {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--bts-rows, 2), auto);
	grid-auto-columns: calc((100% - var(--bts-gap) * (var(--bts-per-view) - 1)) / var(--bts-per-view));
	column-gap: var(--bts-gap);
	row-gap: var(--bts-row-gap, 20px);
}
.bts--rows .bts__slide { flex: none; width: auto; }
.bts__slide--empty { pointer-events: none; }

/*
 * Image shape lives on the <img> itself (aspect-ratio on a replaced element).
 * An empty aspect-ratio box gets measured too short by Chrome inside Elementor
 * flex containers, which let the next section overlap image-only sliders.
 */
.bts .bts__media {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	padding: 0;
	border-radius: var(--bts-radius);
	background: var(--bts-surface);
	-webkit-mask-image: -webkit-radial-gradient(white, black); /* clip zoomed image to radius in Safari */
}
.bts .bts__img {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;
	aspect-ratio: var(--bts-ratio-css, 4 / 5);
	object-fit: var(--bts-fit);
	border-radius: 0;
	opacity: 1;
	visibility: visible;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
/* Old iOS without aspect-ratio: padding box with the image pinned inside. */
@supports not (aspect-ratio: 1 / 1) {
	.bts .bts__media { height: 0; padding-bottom: var(--bts-ratio-pct, 125%); }
	.bts .bts__img { position: absolute; top: 0; left: 0; height: 100%; }
}
@media (hover: hover) {
	a.bts__media:hover .bts__img { transform: scale(1.04); }
}

/* Card body */
.bts__body { padding: 14px 2px 4px; text-align: left; }
.bts .bts__heading {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bts-ink);
}
.bts__text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bts-ink);
	opacity: .78;
}
.bts .bts__btn {
	display: inline-block;
	padding: 10px 20px;
	border: 1.5px solid var(--bts-btn);
	border-radius: 6px;
	background: var(--bts-btn);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.bts .bts__btn:hover,
.bts .bts__btn:focus-visible { background: var(--bts-btn-hover); border-color: var(--bts-btn-hover); color: #fff; }
.bts--btn-outline .bts__btn { background: transparent; color: var(--bts-btn); }
.bts--btn-outline .bts__btn:hover { color: #fff; }
.bts--btn-link .bts__btn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bts-btn);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.bts--btn-link .bts__btn:hover { background: none; color: var(--bts-btn-hover); }

/* Arrows (pointer devices only) */
.bts .bts__arrow {
	position: absolute;
	z-index: 2;
	top: calc((100% - 90px) / 2);
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(35, 16, 24, .08);
	border-radius: 50%;
	background: #fff;
	color: var(--bts-ink);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(35, 16, 24, .12);
	transform: translateY(-50%);
	transition: opacity .25s ease, background-color .2s ease, color .2s ease;
}
.bts .bts__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bts .bts__arrow:hover { background: var(--bts-accent); color: #fff; }
.bts--images .bts__arrow { top: 50%; }
.bts__arrow--prev { left: -14px; }
.bts__arrow--next { right: -14px; }
.bts .bts__arrow[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (min-width: 768px) {
	.bts .bts__arrow { display: flex; }
}

/* Dots */
.bts__dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.bts__dots:empty { display: none; }
.bts__dot {
	flex: 0 0 auto;
	cursor: pointer;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(35, 16, 24, .18);
	transition: width .3s ease, background-color .3s ease;
}
.bts__dot.is-active { width: 22px; background: var(--bts-accent); }

@media (max-width: 767px) {
	.bts__tabs { margin-bottom: 16px; }
	.bts .bts__tab { padding: 9px 16px; font-size: 13px; }
	.bts__body { padding-top: 12px; }
	.bts .bts__heading { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.bts__panel.is-entering { animation: none; }
	.bts .bts__img { transition: none; }
}