/**
 * Product page hero slider (below the header).
 * Markup: template-parts/product-hero-slider.php
 * Heights come from the Customizer as --bp-hero-height / --bp-hero-height-mobile.
 */

.bp-hero {
	--bp-hero-green: #015640;
	--bp-hero-purple: #8b74a2;
	--bp-hero-speed: 600ms; /* keep in sync with SPEED in product-hero-slider.js */

	position: relative;
	width: 100%;
	margin: 0 auto 1.5rem;
	overflow: hidden;
	background-color: var(--bp-hero-green);
}

/* Boxed: same widths as the Hello Elementor page content (.site-main). */
.bp-hero--boxed {
	width: calc(100% - 20px);
}

@media (min-width: 576px) {
	.bp-hero--boxed { width: 100%; max-width: 500px; }
}

@media (min-width: 768px) {
	.bp-hero--boxed { max-width: 600px; }
}

@media (min-width: 992px) {
	.bp-hero--boxed { max-width: 800px; }
}

@media (min-width: 1200px) {
	.bp-hero--boxed { max-width: 1140px; }
}

/* ---------- Slides ---------- */

.bp-hero__viewport {
	position: relative;
	height: var(--bp-hero-height, 450px);
	touch-action: pan-y; /* let the page scroll up/down; left/right swipes change slides */
}

@media (max-width: 767px) {
	.bp-hero__viewport {
		height: var(--bp-hero-height-mobile, 220px);
	}
}

.bp-hero__slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
}

.bp-hero__slide.is-active {
	visibility: visible;
}

.bp-hero__slide.is-moving {
	transition: transform var(--bp-hero-speed) cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bp-hero .bp-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* ---------- Buttons (reset the theme's pink button style) ---------- */

.bp-hero button {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
}

.bp-hero button:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #fff;
}

/* Controls only work with the script, so hide them until it has started. */
.bp-hero:not(.is-ready) .bp-hero__arrow,
.bp-hero:not(.is-ready) .bp-hero__controls {
	display: none;
}

/* Arrows */
.bp-hero .bp-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	color: var(--bp-hero-green);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transform: translateY(-50%);
	transition: background-color 0.2s, color 0.2s;
}

.bp-hero .bp-hero__arrow:hover {
	background-color: var(--bp-hero-green);
	color: #fff;
}

.bp-hero .bp-hero__arrow:focus:not(:hover) {
	background-color: rgba(255, 255, 255, 0.85);
	color: var(--bp-hero-green);
}

.bp-hero__arrow--prev { left: 16px; }
.bp-hero__arrow--next { right: 16px; }

/* Bottom bar: pause button + dots */
.bp-hero__controls {
	position: absolute;
	left: 50%;
	bottom: 12px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.35);
	transform: translateX(-50%);
}

.bp-hero__dots {
	display: flex;
	align-items: center;
	gap: 2px;
}

.bp-hero .bp-hero__dot,
.bp-hero .bp-hero__pause {
	width: 26px;
	height: 26px;
	background-color: transparent;
	color: #fff;
}

.bp-hero .bp-hero__dot:hover,
.bp-hero .bp-hero__dot:focus,
.bp-hero .bp-hero__pause:hover,
.bp-hero .bp-hero__pause:focus {
	background-color: transparent;
	color: #fff;
}

.bp-hero__dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.55);
	transition: width 0.3s, background-color 0.3s;
}

.bp-hero__dot:hover::before {
	background-color: rgba(255, 255, 255, 0.85);
}

.bp-hero__dot[aria-current="true"]::before {
	width: 22px;
	background-color: #fff;
}

.bp-hero__pause .bp-hero__icon-play,
.bp-hero__pause.is-paused .bp-hero__icon-pause {
	display: none;
}

.bp-hero__pause.is-paused .bp-hero__icon-play {
	display: block;
}

/* ---------- Phones ---------- */

@media (max-width: 767px) {
	.bp-hero .bp-hero__arrow {
		width: 36px;
		height: 36px;
	}

	.bp-hero__arrow--prev { left: 8px; }
	.bp-hero__arrow--next { right: 8px; }

	.bp-hero__controls { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.bp-hero__slide.is-moving,
	.bp-hero .bp-hero__arrow,
	.bp-hero__dot::before {
		transition: none;
	}
}