/* =========================================================================
   Frisør Elite — Animated shop-image carousel
   Self-contained styles for .fe-shop-carousel*. Reuses the theme's :root
   design tokens with safe fallbacks in case a token is missing.
   The active progress-segment fill duration is set inline by JS via
   --fe-seg-duration so it always matches the autoplay dwell.
   ========================================================================= */

.fe-shop-carousel {
	/* Local token fallbacks (resolve to theme :root vars when present). */
	--fe-c-brass: var(--fe-brass, #b58f4d);
	--fe-c-brass-soft: var(--fe-brass-soft, #cba968);
	--fe-c-ink: var(--fe-ink, #14110d);
	--fe-c-ink-2: var(--fe-ink-2, #1b1712);
	--fe-c-cream: var(--fe-cream, #f6efe1);
	--fe-c-radius: var(--fe-radius, 12px);
	--fe-c-shadow: var(--fe-shadow, 0 24px 60px rgba(0, 0, 0, .4));
	--fe-c-ease: var(--fe-ease-standard, cubic-bezier(.2, .8, .2, 1));
	--fe-c-font-display: var(--fe-font-display, "Playfair Display", Georgia, ui-serif, serif);
	--fe-c-font-body: var(--fe-font-body, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	--fe-crossfade: 460ms;

	display: block;
	width: 100%;
	max-width: var(--fe-container, 1200px);
	margin-inline: auto;
}

/* ---- Stage (aspect-reserved, cross-fade layers) ------------------------- */

.fe-shop-carousel__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--fe-c-radius);
	overflow: hidden;
	border: 1px solid rgba(var(--fe-brass-rgb, 181, 143, 77), .34);
	box-shadow: var(--fe-c-shadow);
	background: var(--fe-c-ink-2);
}

/* Inset vignette — identical treatment to .fe-hero__media. */
.fe-shop-carousel__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -90px 120px rgba(16, 13, 9, .5);
}

.fe-shop-carousel__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--fe-crossfade) var(--fe-c-ease), visibility 0s linear var(--fe-crossfade);
	will-change: opacity;
}

.fe-shop-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--fe-crossfade) var(--fe-c-ease), visibility 0s;
}

/* Single-image variant — no absolute stacking needed. */
.fe-shop-carousel--single .fe-shop-carousel__slide {
	position: relative;
	opacity: 1;
	visibility: visible;
	transition: none;
}

/* Scoped under the carousel root (0,2,0) so it beats the theme's `body.fe-site img { height:auto }`
   (0,1,2) and GeneratePress `img { height:auto }` — otherwise object-fit:cover never engages and
   the slide letterboxes on the taller mobile (4/5) stage. */
.fe-shop-carousel .fe-shop-carousel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(.95) contrast(1.03);
}

.fe-shop-carousel--single .fe-shop-carousel__img {
	position: absolute;
}

.fe-shop-carousel__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 28px 22px 18px;
	color: var(--fe-c-cream);
	font-family: var(--fe-c-font-display);
	font-size: clamp(15px, 2vw, 19px);
	line-height: 1.3;
	letter-spacing: -.01em;
	background: linear-gradient(0deg, rgba(16, 13, 9, .72), transparent 55%);
}

/* ---- Gold segment progress indicator ------------------------------------ */

.fe-shop-carousel__progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

/* Each segment is a button with a padded hit-area; the visible bar is thin. */
.fe-shop-carousel__seg {
	position: relative;
	flex: 1 1 28px;
	min-width: 28px;
	max-width: 64px;
	height: 24px; /* >=44px combined hit area with padding below */
	padding: 10px 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* The visible 4px track. */
.fe-shop-carousel__seg::before {
	content: "";
	display: block;
	height: 4px;
	border-radius: 999px;
	background: rgba(246, 239, 225, .18);
}

/* Played segments: solid brass. */
.fe-shop-carousel__seg.is-played::before {
	background: var(--fe-c-brass);
}

/* Inner animated fill for the active segment. */
.fe-shop-carousel__seg-fill {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--fe-c-brass) 0%, var(--fe-c-brass-soft) 100%);
	box-shadow: 0 0 8px rgba(var(--fe-brass-soft-rgb, 203, 169, 104), .35);
	opacity: 0;
	pointer-events: none;
}

/* Active segment: reveal the fill; JS sets --fe-seg-duration + flips to scaleX(1). */
.fe-shop-carousel__seg.is-active .fe-shop-carousel__seg-fill {
	opacity: 1;
	transition: transform var(--fe-seg-duration, 0ms) linear;
}

/* When JS marks the fill as running, drive it to full width. */
.fe-shop-carousel__seg.is-active.is-filling .fe-shop-carousel__seg-fill {
	transform: translateY(-50%) scaleX(1);
}

.fe-shop-carousel__seg:focus-visible {
	outline: 3px solid var(--fe-c-brass-soft);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ---- Controls (ghost icon buttons) -------------------------------------- */

.fe-shop-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}

.fe-shop-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid rgba(var(--fe-brass-rgb, 181, 143, 77), .4);
	background: transparent;
	color: var(--fe-c-cream);
	cursor: pointer;
	transition: background var(--fe-c-ease) 180ms, border-color 180ms ease, transform 180ms var(--fe-c-ease);
}

.fe-shop-carousel__btn:hover,
.fe-shop-carousel__btn:focus-visible {
	border-color: var(--fe-c-brass);
	background: rgba(var(--fe-brass-rgb, 181, 143, 77), .1);
}

.fe-shop-carousel__btn:focus-visible {
	outline: 3px solid var(--fe-c-brass-soft);
	outline-offset: 3px;
}

.fe-shop-carousel__btn:active {
	transform: translateY(1px);
}

.fe-shop-carousel__icon {
	font-size: 22px;
	line-height: 1;
	font-family: var(--fe-c-font-body);
}

/* Pause/play glyphs drawn with CSS so no SVG dependency. */
.fe-shop-carousel__icon--pause {
	position: relative;
	width: 14px;
	height: 14px;
}
.fe-shop-carousel__icon--pause::before,
.fe-shop-carousel__icon--pause::after {
	content: "";
	position: absolute;
	top: 1px;
	bottom: 1px;
	width: 4px;
	background: currentColor;
	border-radius: 1px;
}
.fe-shop-carousel__icon--pause::before { left: 2px; }
.fe-shop-carousel__icon--pause::after { right: 2px; }

/* Play state: a triangle. */
.fe-shop-carousel__btn--toggle[aria-pressed="true"] .fe-shop-carousel__icon--pause {
	width: 0;
	height: 0;
}
.fe-shop-carousel__btn--toggle[aria-pressed="true"] .fe-shop-carousel__icon--pause::before,
.fe-shop-carousel__btn--toggle[aria-pressed="true"] .fe-shop-carousel__icon--pause::after {
	display: none;
}
.fe-shop-carousel__btn--toggle[aria-pressed="true"] .fe-shop-carousel__icon--pause {
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent currentColor;
	margin-left: 2px;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 767px) {
	.fe-shop-carousel__progress { gap: 10px; }
	.fe-shop-carousel__seg { max-width: 52px; }
	.fe-shop-carousel__caption { padding: 22px 16px 14px; }
}

/* Portrait stage for narrow viewports (photos often portrait on mobile). */
@media (max-width: 520px) {
	.fe-shop-carousel__stage { aspect-ratio: 4 / 5; }
}

/* ---- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fe-shop-carousel__slide {
		transition: none;
	}
	/* Discrete state only — no animated fill. */
	.fe-shop-carousel__seg-fill {
		transition: none !important;
		box-shadow: none;
	}
	/* Active segment reads as a solid position dot, not a running timer. */
	.fe-shop-carousel__seg.is-active::before {
		background: var(--fe-c-brass);
	}
	.fe-shop-carousel__seg.is-active .fe-shop-carousel__seg-fill {
		opacity: 0;
	}
	.fe-shop-carousel__seg.is-active.is-filling .fe-shop-carousel__seg-fill {
		transition: none !important;
		transform: translateY(-50%) scaleX(0);
	}
	.fe-shop-carousel__btn {
		transition: none;
	}
}