/* ==========================================================
   Category Hover Gallery
   ========================================================== */
ul.products li.product,
.products .product {
	position: relative;
	overflow: hidden;
}

ul.products li.product img.wp-post-image,
.products .product img.wp-post-image {
	transition: opacity 0.15s ease-in-out;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

@media (hover: none) {
	.products .product img.wp-post-image {
		cursor: pointer;
	}
}

/* ==========================================================
   Header Promo / Offer Bar
   ========================================================== */
.promo-bar {
	width: 100%;
	overflow: hidden;
	font-size: 0.8rem;
	text-align: center;
}

.promo-bar__track {
	position: relative;
	height: 36px;
}

.promo-bar__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease-in-out;
	padding: 0 12px;
}

.promo-bar__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.promo-bar__slide a,
.promo-bar__slide span {
	color: inherit;
	text-decoration: none;
}

.promo-bar__code {
	padding: 1px 6px;
	border: 1px dashed currentColor;
	border-radius: 3px;
	letter-spacing: 0.5px;
}

@media (max-width: 480px) {
	.promo-bar {
		font-size: 0.7rem;
	}
	.promo-bar__slide {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ==========================================================
   Homepage Hero Banner (image or video)
   ========================================================== */
.hero-banner {
	position: relative;
	width: 100%;
	/* Full viewport height (bellissimo.asia reference) rather than a
	   partial 60vh/80vh banner — min-height, not height, so genuinely
	   tall heading/subheading/CTA content on a short/narrow screen can
	   still push the box taller instead of getting clipped.
	   Three layered fallbacks, weakest first: 100vh, then 100dvh for
	   browsers that support it (still not reliable enough in testing to
	   stop there — see below), then var(--wl-vh) — real, current
	   window.innerHeight in px, kept in sync by initViewportHeight() in
	   assets/js/main.js. Plain vh on mobile Safari/Chrome is computed
	   against a viewport size that doesn't track the address/toolbar's
	   own show/hide, leaving a real gap of page background below the
	   banner once the true visible viewport differs from what vh
	   assumed at layout time; dvh targets exactly that but its real
	   support/behavior is still inconsistent enough across mobile
	   browsers that it didn't fully close the gap either. innerHeight
	   always reflects the actual visible viewport on every mobile
	   browser regardless of dvh support, so it's the last and
	   authoritative word here once JS has run. */
	min-height: 100vh;
	min-height: 100dvh;
	min-height: var(--wl-vh, 100dvh);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Clears the fixed, transparent header stack sitting on top of this
	   banner (see .site-header-stack in main.css) so the centered content
	   below isn't vertically centered as if the header weren't there —
	   set from real measured height by initHeaderStackHeight() in
	   assets/js/main.js, since the stack's actual height varies (promo
	   bar on/off, nav wrapping) and would drift out of sync as a fixed
	   number. Falls back to a reasonable flat estimate before that JS
	   runs / if it doesn't. */
	padding-top: var(--wl-header-stack-height, 130px);
	box-sizing: border-box;
}

.hero-banner__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero-banner__content {
	position: relative;
	z-index: 1;
	padding: 24px;
	color: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero-banner__content h1 {
	font-size: 1.8rem;
	line-height: 1.2;
	margin: 0 0 8px;
	font-family: var(--wl-font-heading);
}

.hero-banner__cta {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 20px;
	background: #fff;
	color: #111;
	text-decoration: none;
	border-radius: 2px;
	font-weight: 600;
}

@media (min-width: 768px) {
	.hero-banner__content {
		padding: 60px;
		max-width: 640px;
	}
	.hero-banner__content h1 {
		font-size: 3rem;
	}
}