/* =====================================================
   WooCommerce Halo Halo Product Carousel
   halo-product-carousel.css  v2.0
   ===================================================== */

/* ---------- Keyframes ---------- */

@keyframes hh-float {
	0%, 100% { transform: translateX(-50%) translateY(0px); }
	50%       { transform: translateX(-50%) translateY(-12px); }
}

@keyframes hh-float-side-l {
	0%, 100% { transform: translateX(-50%) scale(0.85) translateY(0px); }
	50%       { transform: translateX(-50%) scale(0.85) translateY(-7px); }
}

@keyframes hh-float-side-r {
	0%, 100% { transform: translateX(-50%) scale(0.85) translateY(0px); }
	50%       { transform: translateX(-50%) scale(0.85) translateY(-7px); }
}

@keyframes hh-shadow-pulse-c {
	0%, 100% { transform: scaleX(1);    opacity: 1; }
	50%       { transform: scaleX(0.86); opacity: 0.7; }
}

@keyframes hh-shadow-pulse-s {
	0%, 100% { transform: scaleX(1);    opacity: 0.9; }
	50%       { transform: scaleX(0.8);  opacity: 0.6; }
}

@keyframes hh-dot-in {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.6); }
	70%  { transform: scale(0.88); }
	100% { transform: scale(1); }
}

@keyframes hh-title-enter {
	from { opacity: 0; transform: translateY(20px) scale(0.94); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes hh-shimmer {
	0%   { background-position: -200% center; }
	100% { background-position:  200% center; }
}

@keyframes hh-arrow-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(67,150,184,0.3); }
	50%       { box-shadow: 0 6px 24px rgba(67,150,184,0.58); }
}

@keyframes hh-ripple {
	0%   { transform: scale(0);   opacity: 0.5; }
	100% { transform: scale(3);   opacity: 0; }
}

@keyframes hh-stripe-drift {
	from { background-position-x: 0px; }
	to   { background-position-x: 86px; }
}

/* ---------- Wrapper ---------- */
.hh-product-carousel {
	position: relative;
	width: 100%;
	min-height: 720px;
	background-color: #fbf8ec;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	padding: 0 0 60px;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
}

/* Drifting stripe overlay — no background copy, purely CSS-generated */
.hh-product-carousel::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		90deg,
		transparent                    0px,
		transparent                    36px,
		rgba(255,255,255,0.42)         36px,
		rgba(255,255,255,0.42)         50px
	);
	pointer-events: none;
	opacity: 0.38;
	z-index: 0;
	animation: hh-stripe-drift 20s linear infinite;
}

/* ---------- Stage ---------- */
.hh-stage {
	position: relative;
	width: 100%;
	height: 440px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 1;
	flex-shrink: 0;
}

/* ---------- Slides ---------- */
.hh-slide {
	position: absolute;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	cursor: pointer;
	transition:
		left    0.6s cubic-bezier(0.34, 1.22, 0.64, 1),
		top     0.6s cubic-bezier(0.34, 1.22, 0.64, 1),
		opacity 0.45s ease,
		filter  0.45s ease;
	will-change: left, top, opacity;
}

/* ---- CENTER ---- */
.hh-slide.hh-position-center {
	left: 50%;
	transform: translateX(-50%);
	top: 30px;
	z-index: 3;
	opacity: 1;
	cursor: default;
	animation: hh-float 5s ease-in-out infinite;
	filter: drop-shadow(0 20px 36px rgba(0,0,0,0.14));
}

/* ---- LEFT ---- */
.hh-slide.hh-position-left {
	left: 16%;
	transform: translateX(-50%) scale(0.85);
	top: 80px;
	z-index: 2;
	opacity: 0.82;
	animation: hh-float-side-l 6.2s ease-in-out 1.6s infinite;
	filter: drop-shadow(0 10px 20px rgba(0,0,0,0.09));
}

/* ---- RIGHT ---- */
.hh-slide.hh-position-right {
	left: 84%;
	transform: translateX(-50%) scale(0.85);
	top: 80px;
	z-index: 2;
	opacity: 0.82;
	animation: hh-float-side-r 6.2s ease-in-out 0.7s infinite;
	filter: drop-shadow(0 10px 20px rgba(0,0,0,0.09));
}

/* Hover lift for side slides */
.hh-slide.hh-position-left:hover,
.hh-slide.hh-position-right:hover {
	opacity: 1;
	filter: drop-shadow(0 18px 30px rgba(0,0,0,0.16));
}

/* Pause float mid-transition so CSS position wins */
.hh-carousel-transitioning .hh-slide {
	animation-play-state: paused;
}

/* ---- Off-screen hidden ---- */
.hh-slide.hh-position-hidden-left {
	left: -7%;
	transform: translateX(-50%) scale(0.58);
	top: 120px;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	animation: none;
}

.hh-slide.hh-position-hidden-right {
	left: 107%;
	transform: translateX(-50%) scale(0.58);
	top: 120px;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	animation: none;
}

/* ---------- Image wrap ---------- */
.hh-slide-image-wrap {
	position: relative;
	transition: width 0.6s cubic-bezier(0.34, 1.22, 0.64, 1);
	will-change: width;
}

.hh-slide.hh-position-center .hh-slide-image-wrap        { width: 380px; }
.hh-slide.hh-position-left   .hh-slide-image-wrap,
.hh-slide.hh-position-right  .hh-slide-image-wrap        { width: 220px; }
.hh-slide.hh-position-hidden-left .hh-slide-image-wrap,
.hh-slide.hh-position-hidden-right .hh-slide-image-wrap  { width: 140px; }

.hh-slide-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	max-height: 380px;
	transition: opacity 0.28s ease;
}

.hh-slide-img.hh-img-loading { opacity: 0; }

/* ---------- Shadow ellipse ---------- */
.hh-slide-shadow {
	border-radius: 50%;
	margin-top: -6px;
	flex-shrink: 0;
	transition:
		background-color 0.55s ease,
		width            0.6s cubic-bezier(0.34, 1.22, 0.64, 1),
		height           0.6s cubic-bezier(0.34, 1.22, 0.64, 1);
}

.hh-slide.hh-position-center .hh-slide-shadow {
	background-color: #b97fc9;
	width: 160px;
	height: 48px;
	animation: hh-shadow-pulse-c 5s ease-in-out infinite;
}

.hh-slide.hh-position-left .hh-slide-shadow {
	background-color: #f0d060;
	width: 100px;
	height: 30px;
	animation: hh-shadow-pulse-s 6.2s ease-in-out 1.6s infinite;
}

.hh-slide.hh-position-right .hh-slide-shadow {
	background-color: #5cc4b0;
	width: 100px;
	height: 30px;
	animation: hh-shadow-pulse-s 6.2s ease-in-out 0.7s infinite;
}

.hh-slide.hh-position-hidden-left .hh-slide-shadow,
.hh-slide.hh-position-hidden-right .hh-slide-shadow {
	width: 70px;
	height: 20px;
	background-color: #cfcfcf;
	animation: none;
}

.hh-carousel-transitioning .hh-slide-shadow {
	animation-play-state: paused;
}

/* ---------- Product info ---------- */
.hh-product-info {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 20px;
	max-width: 600px;
	width: 100%;
	margin-top: 20px;
}

.hh-product-info-inner {
	transition: opacity 0.3s ease, transform 0.32s ease;
}

.hh-product-info-inner.hh-fade-out {
	opacity: 0;
	transform: translateY(16px) scale(0.96);
}

.hh-product-info-inner.hh-fade-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Title: shimmer gradient + bounce-in on slide change */
.hh-product-title {
	font-size: 3rem;
	font-weight: 800;
	margin: 0 0 10px;
	line-height: 1.1;
	letter-spacing: -0.5px;
	background: linear-gradient(
		90deg,
		#e8bb30 0%,
		#ffe988 35%,
		#f7cf4f 55%,
		#e8bb30 100%
	);
	background-size: 220% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: hh-shimmer 4s linear infinite;
}

.hh-product-info-inner.hh-fade-in .hh-product-title {
	animation:
		hh-title-enter 0.48s cubic-bezier(0.34, 1.3, 0.64, 1) both,
		hh-shimmer     4s linear 0.48s infinite;
}

.hh-product-price {
	font-size: 1.3rem;
	font-weight: 700;
	color: #4794b4;
	margin-bottom: 14px;
}

.hh-product-price .woocommerce-Price-amount,
.hh-product-price .woocommerce-Price-currencySymbol {
	color: inherit;
}

.hh-product-description {
	font-size: 1rem;
	color: #4794b4;
	max-width: 500px;
	margin: 0 auto;
	line-height: 1.65;
}

/* Add to cart */
.hh-product-atc { margin-top: 20px; }

.hh-product-atc a,
.hh-product-atc button {
	display: inline-block;
	background-color: #4396b8;
	color: #fff;
	padding: 12px 32px;
	border-radius: 50px;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: background-color 0.25s ease, transform 0.18s ease, box-shadow 0.25s ease;
}

.hh-product-atc a:hover,
.hh-product-atc button:hover {
	background-color: #337ea3;
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(67,150,184,0.42);
}

.hh-product-atc a::after,
.hh-product-atc button::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255,255,255,0.35);
	transform: scale(0);
	opacity: 0;
	pointer-events: none;
}

.hh-product-atc a:active::after,
.hh-product-atc button:active::after {
	animation: hh-ripple 0.5s ease-out forwards;
}

/* ---------- Arrows ---------- */
.hh-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-60%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #4396b8;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	overflow: hidden;
	animation: hh-arrow-pulse 2.6s ease-in-out infinite;
	transition:
		background-color 0.2s ease,
		transform        0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hh-arrow:hover {
	background-color: #337ea3;
	transform: translateY(-60%) scale(1.15);
	animation: none;
	box-shadow: 0 8px 26px rgba(67,150,184,0.52);
}

.hh-arrow:active { transform: translateY(-60%) scale(0.93); }

/* Ripple */
.hh-arrow::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.28);
	transform: scale(0);
	opacity: 0;
	pointer-events: none;
}
.hh-arrow:active::before { animation: hh-ripple 0.42s ease-out forwards; }

.hh-arrow:focus-visible { outline: 3px solid #337ea3; outline-offset: 3px; }

.hh-arrow svg {
	fill: #fff;
	display: block;
	transition: transform 0.18s ease;
}
.hh-arrow-prev:hover svg { transform: translateX(-2px); }
.hh-arrow-next:hover svg { transform: translateX(2px); }

.hh-arrow-prev { left: 24px; }
.hh-arrow-next { right: 24px; }

/* ---------- Dots ---------- */
.hh-dots {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
}

.hh-dot {
	height: 12px;
	width: 12px;
	border-radius: 6px;
	border: none;
	background-color: #cfcfcf;
	cursor: pointer;
	padding: 0;
	transition:
		background-color 0.3s ease,
		width            0.35s cubic-bezier(0.34, 1.3, 0.64, 1),
		border-radius    0.35s ease,
		transform        0.3s ease;
	flex-shrink: 0;
}

.hh-dot:hover {
	background-color: #a0a0a0;
	transform: scale(1.25);
}

/* Active: stretches to a pill + bounces in */
.hh-dot.hh-dot-active {
	background-color: #4396b8;
	width: 28px;
	border-radius: 6px;
	animation: hh-dot-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hh-dot:focus-visible { outline: 2px solid #4396b8; outline-offset: 3px; }

/* ---------- Responsive: Tablet ---------- */
@media (max-width: 1024px) {
	.hh-product-carousel { min-height: 620px; }
	.hh-stage { height: 360px; }

	.hh-slide.hh-position-center .hh-slide-image-wrap { width: 300px; }
	.hh-slide.hh-position-left  .hh-slide-image-wrap,
	.hh-slide.hh-position-right .hh-slide-image-wrap  { width: 170px; }

	.hh-slide.hh-position-left  { left: 14%; }
	.hh-slide.hh-position-right { left: 86%; }

	.hh-product-title { font-size: 2.4rem; }
}

/* ---------- Responsive: Mobile ---------- */
@media (max-width: 767px) {
	.hh-product-carousel { min-height: 520px; padding-bottom: 50px; }
	.hh-stage { height: 300px; }

	.hh-slide.hh-position-center .hh-slide-image-wrap { width: 220px; }
	.hh-slide.hh-position-left  .hh-slide-image-wrap,
	.hh-slide.hh-position-right .hh-slide-image-wrap  { width: 120px; }

	.hh-slide.hh-position-left  { left: 8%; }
	.hh-slide.hh-position-right { left: 92%; }

	.hh-slide.hh-position-center { top: 20px; }
	.hh-slide.hh-position-left,
	.hh-slide.hh-position-right  { top: 60px; }

	.hh-slide.hh-position-center .hh-slide-shadow { width: 120px; height: 36px; }
	.hh-slide.hh-position-left  .hh-slide-shadow,
	.hh-slide.hh-position-right .hh-slide-shadow  { width: 70px;  height: 20px; }

	.hh-product-title       { font-size: 1.9rem; }
	.hh-product-description { font-size: 0.9rem; }

	.hh-arrow-prev { left: 8px; }
	.hh-arrow-next { right: 8px; }
	.hh-arrow      { width: 40px; height: 40px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.hh-slide.hh-position-center,
	.hh-slide.hh-position-left,
	.hh-slide.hh-position-right,
	.hh-slide-shadow,
	.hh-arrow,
	.hh-product-carousel::before,
	.hh-product-title {
		animation: none;
	}
	.hh-product-info-inner { transition-duration: 0.01ms; }
}

/* ---------- Touch drag ---------- */
.hh-stage.hh-dragging .hh-slide {
	transition: none;
	cursor: grabbing;
}