/* =====================================================================
   BLEU Hero Slider — frontend
   Colours + sizing come in as CSS vars on .bleu-hs (set per instance).
   Fonts: Playfair Display (headings) + Montserrat (body/buttons),
   loaded from Google Fonts by the plugin itself (see frontend_assets()
   in bleu-hero-slider.php), so no theme dependency.

   Layout: on desktop the uploaded image fills the entire slide as a
   full bleed background (object fit cover). It is expected to
   already be a wide, pre composited banner per slide, product
   positioned left with plain space baked into the right side of
   the file, since that is what the text sits on top of. On
   tablet/phone this switches to a plain, contained two up layout
   (image left, text right) to match the site's usual product card
   look. Only the swatch dots remain as navigation, pinned to the
   bottom left corner. The slide track can also be dragged with the
   mouse, not just swiped on touch.
   ===================================================================== */

.bleu-hs {
	--bleu-navy: #0B1C3B;
	--bleu-gold: #F9BD5A;
	--bleu-offwhite: #F5F3EE;
	--bleu-ink: #14203A;
	--bleu-maxw: 1400px;
	--bleu-height: 620px;
	--bleu-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--bleu-sans: 'Montserrat', Arial, Helvetica, sans-serif;

	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: var(--bleu-sans);
	background: #ffffff;
	overflow: hidden;
}
.bleu-hs *, .bleu-hs *::before, .bleu-hs *::after { box-sizing: border-box; }

/* Reset any theme (WoodMart etc.) button chrome that would leak in */
.bleu-hs button {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	min-height: 0;
	min-width: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: normal;
	font-family: inherit;
}
.bleu-hs button::before,
.bleu-hs button::after { content: none; }
.bleu-hs button:hover,
.bleu-hs button:focus { box-shadow: none; }

.bleu-hs__viewport { position: relative; height: var(--bleu-height); width: 100%; cursor: grab; touch-action: pan-y; }
.bleu-hs__viewport.is-dragging { cursor: grabbing; }
.bleu-hs__track { position: relative; height: 100%; width: 100%; }

/* --- SLIDE: full bleed background image + overlaid content --------- */
.bleu-hs__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease, visibility .7s ease;
	z-index: 1;
}
.bleu-hs__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* Scrim disabled: the uploaded image is expected to already carry the
   plain space the text sits on, so no gradient over the image is
   needed. If a client image ever comes through without that built in
   space, turn this back on. */
.bleu-hs__slide::after {
	content: none;
}

/* --- MEDIA: the uploaded image IS the slide background, edge to edge - */
.bleu-hs__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.bleu-hs__picture {
	display: block;
	width: 100%;
	height: 100%;
}
.bleu-hs__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	opacity: 0;
	transform: scale(1.06);
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}
.bleu-hs__slide.is-active .bleu-hs__img {
	animation: bleu-hs-media 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes bleu-hs-media {
	0%   { transform: scale(1.06); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}
.bleu-hs__img--placeholder {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	border: 1px dashed rgba(11,28,59,.3);
	color: rgba(11,28,59,.5);
	font-size: 14px; text-align: center; padding: 20px;
	transform: none; opacity: 1;
	background: #ffffff;
}

/* --- CONTENT: overlaid on the right side of the background image --- */
.bleu-hs__content {
	position: relative;
	z-index: 2;
	flex: none;
	width: 100%;
	max-width: 480px;
	padding: 0 clamp(24px, 4vw, 56px) 0 20px;
	color: var(--bleu-ink);
	text-align: left;
}
.bleu-hs__content > * {
	opacity: 0;
	transform: translateX(-22px);
}
.bleu-hs__slide.is-active .bleu-hs__content > * {
	animation: bleu-hs-in .75s cubic-bezier(.22,.61,.36,1) forwards;
}
.bleu-hs__slide.is-active .bleu-hs__eyebrow { animation-delay: .12s; }
.bleu-hs__slide.is-active .bleu-hs__title   { animation-delay: .22s; }
.bleu-hs__slide.is-active .bleu-hs__desc    { animation-delay: .34s; }
.bleu-hs__slide.is-active .bleu-hs__actions { animation-delay: .46s; }
@keyframes bleu-hs-in {
	0%   { opacity: 0; transform: translateX(-22px); }
	100% { opacity: 1; transform: translateX(0); }
}

.bleu-hs__eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--bleu-gold);
	filter: saturate(1.1) brightness(.86);
}
.bleu-hs__title {
	margin: 0 0 18px;
	font-family: var(--bleu-serif);
	font-weight: 600;
	line-height: 1.02;
	color: var(--bleu-navy);
	font-size: clamp(38px, 5vw, 72px);
	letter-spacing: -.02em;
}
.bleu-hs__subtitle {
	display: block;
	font-weight: 500;
	color: var(--bleu-ink);
	font-size: .5em;
	opacity: .75;
	margin-top: 6px;
	letter-spacing: 0;
}
.bleu-hs__desc {
	margin: 0 0 30px;
	max-width: 40ch;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(20,32,58,.8);
}

.bleu-hs__actions {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}
.bleu-hs__price {
	font-family: var(--bleu-serif);
	font-size: 28px;
	font-weight: 600;
	color: var(--bleu-navy);
}
.bleu-hs a.bleu-hs__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 38px;
	background: #0B1C3B;
	color: var(--bleu-gold);
	font-family: var(--bleu-sans);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 100px; /* full pill */
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
	box-shadow: 0 10px 26px rgba(120,170,255,.35);
}
.bleu-hs a.bleu-hs__btn:hover {
	transform: translateY(-3px);
	background: #0B1C3B;
	color: var(--bleu-gold);
	box-shadow: 0 16px 34px rgba(120,170,255,.55);
}
.bleu-hs a.bleu-hs__btn:focus-visible {
	outline: 2px solid #0B1C3B;
	outline-offset: 3px;
}

/* --- SWATCH DOTS with circular autoplay progress ring, bottom left -- */
.bleu-hs .bleu-hs__dots {
	position: absolute;
	left: 32px;
	bottom: 28px;
	display: flex;
	gap: 16px;
	z-index: 5;
	padding: 0;
	margin: 0;
	list-style: none;
}
.bleu-hs .bleu-hs__dot {
	position: relative;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	border-radius: 100px;
	cursor: pointer;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	line-height: 0;
}
/* the colour swatch itself */
.bleu-hs .bleu-hs__dot-swatch {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	transform: translate(-50%, -50%) scale(.82);
	border-radius: 100px;
	background: var(--sw, #8A93A3);
	box-shadow: inset 0 0 0 1px rgba(11,28,59,.18);
	transition: transform .3s ease;
}
.bleu-hs .bleu-hs__dot:hover .bleu-hs__dot-swatch { transform: translate(-50%, -50%) scale(1); }
.bleu-hs .bleu-hs__dot.is-active .bleu-hs__dot-swatch { transform: translate(-50%, -50%) scale(1); }

/* the progress ring */
.bleu-hs .bleu-hs__dot-ring {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	transition: opacity .3s ease;
}
.bleu-hs .bleu-hs__dot.is-active .bleu-hs__dot-ring { opacity: 1; }
.bleu-hs .bleu-hs__dot-ring svg {
	width: 34px;
	height: 34px;
	transform: rotate(-90deg);
}
.bleu-hs .bleu-hs__ring-track {
	fill: none;
	stroke: rgba(11,28,59,.14);
	stroke-width: 2;
}
.bleu-hs .bleu-hs__ring-fill {
	fill: none;
	stroke: var(--bleu-gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 113; /* 2 * PI * r (r=18) */
	stroke-dashoffset: 113; /* start empty */
}
.bleu-hs .bleu-hs__dot.is-active.is-playing .bleu-hs__ring-fill {
	animation: bleu-hs-ring var(--bleu-fill, 6000ms) linear forwards;
}
@keyframes bleu-hs-ring {
	from { stroke-dashoffset: 113; }
	to   { stroke-dashoffset: 0; }
}
.bleu-hs .bleu-hs__dot:focus-visible { outline: 2px solid var(--bleu-navy); outline-offset: 3px; }

/* Keyframe variant for mobile (must live outside the media query) */
@keyframes bleu-hs-in-y { 0% { opacity:0; transform: translateY(16px);} 100%{opacity:1;transform:translateY(0);} }

/* --- RESPONSIVE ------------------------------------------------------
   Desktop keeps the full bleed cover background with overlaid text.
   On tablet and phone the slide switches to a plain, contained
   two-up layout: the product image sits left on a plain background,
   the text sits right, mirroring the site's usual product-card look. */
@media (max-width: 900px) {
	.bleu-hs__viewport { height: 300px; }
	.bleu-hs__slide {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		background: var(--bleu-offwhite);
	}
	.bleu-hs__slide::after { content: none; }

	.bleu-hs__media {
		position: relative;
		inset: auto;
		width: 44%;
		height: 100%;
		flex: 0 0 44%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding: 18px;
	}
	.bleu-hs__picture { height: 65%; }
	.bleu-hs__img {
		object-fit: contain;
		object-position: center;
	}
	.bleu-hs__img--placeholder { position: relative; inset: auto; width: 100%; height: 100%; }

	.bleu-hs__content {
		width: 56%;
		max-width: none;
		flex: 1;
		padding: 0 18px;
		text-align: left;
	}
	.bleu-hs__eyebrow { font-size: 11px; margin-bottom: 8px; }
	.bleu-hs__title { font-size: clamp(20px, 5.5vw, 30px); margin-bottom: 8px; }
	.bleu-hs__desc { font-size: 13px; line-height: 1.45; margin-bottom: 14px; max-width: 28ch; }
	.bleu-hs__actions { gap: 14px; }
	.bleu-hs__price { font-size: 18px; }
	.bleu-hs a.bleu-hs__btn { padding: 10px 20px; font-size: 12px; }

	.bleu-hs .bleu-hs__dots { left: 16px; bottom: 14px; }
	.bleu-hs .bleu-hs__dot { width: 22px; height: 22px; }
	.bleu-hs .bleu-hs__dot-ring svg { width: 22px; height: 22px; }
	.bleu-hs .bleu-hs__dot-swatch { width: 12px; height: 12px; }
}
@media (max-width: 480px) {
	.bleu-hs__viewport { height: 260px; }
	.bleu-hs__media { padding: 12px; }
	.bleu-hs__title { font-size: clamp(18px, 6vw, 24px); }
	.bleu-hs__desc { font-size: 12px; margin-bottom: 10px; }
	.bleu-hs__price { font-size: 15px; }
	.bleu-hs a.bleu-hs__btn { padding: 9px 16px; font-size: 11px; }
	.bleu-hs__content { padding: 0 14px; }
}

/* --- Motion-safety -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.bleu-hs__slide, .bleu-hs__img, .bleu-hs__content > * { animation: none !important; transition: opacity .3s ease; }
	.bleu-hs__img { transform: none; opacity: 1; }
	.bleu-hs__content > * { opacity: 1; transform: none; }
	.bleu-hs__dot.is-active.is-playing .bleu-hs__ring-fill { animation: none; stroke-dashoffset: 0; }
}