/*!
 * Luxe Maroon & Gold — category card bar + hero banner slider.
 * Loaded only when one of the two features renders on the page.
 * Every colour derives from the theme tokens in inc/customizer.php.
 */

/* ---------------------------------------------------------------------
 * Shared keyframes (declared unconditionally: only referenced from inside
 * a `prefers-reduced-motion: no-preference` block, so reduced-motion users
 * never see the animation).
 * ------------------------------------------------------------------ */
@keyframes luxe-banner-kenburns {
	from { transform: scale(1.02); }
	to   { transform: scale(1.09); }
}

@keyframes luxe-banner-enter {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes luxe-card-enter {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
 * FEATURE 1 — compact premium category cards
 * ================================================================== */
.luxe-cards-bar {
	--luxe-card-size: clamp(96px, 8.6vw, 128px);
	position: relative;
	z-index: 3;
	padding: clamp(0.85rem, 1.8vw, 1.4rem) 0 clamp(1rem, 2.2vw, 1.7rem);
	background:
		radial-gradient(120% 160% at 50% -40%, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0) 62%),
		linear-gradient(180deg, var(--luxe-primary-dark) 0%, var(--luxe-primary) 100%);
	border-bottom: 1px solid rgba(212, 175, 55, 0.28);
	box-shadow: 0 18px 34px -28px rgba(0, 0, 0, 0.85);
}

.luxe-cards-bar::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 243, 196, 0.55), transparent);
	pointer-events: none;
}

/* When the compact rail replaces the old large grid, give it a little more
   breathing room below the header. */
.luxe-cards-bar--sole {
	padding-block: clamp(1rem, 2.1vw, 1.7rem) clamp(1.1rem, 2.4vw, 1.9rem);
}

.luxe-cards-bar__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-family: "Cormorant Garamond", "Times New Roman", serif;
	font-size: clamp(0.98rem, 1.2vw, 1.12rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--luxe-gold-light);
}

.luxe-cards-bar__title svg {
	color: var(--luxe-gold);
}

.luxe-cards-bar__rail {
	position: relative;
	display: flex;
	align-items: center;
}

.luxe-cards {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(0.5rem, 1.1vw, 0.85rem);
	margin: 0;
	padding: 0.35rem 0.15rem 0.55rem;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(212, 175, 55, 0.55) transparent;
	-webkit-overflow-scrolling: touch;
}

.luxe-cards::-webkit-scrollbar {
	height: 4px;
}

.luxe-cards::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.18);
	border-radius: 999px;
}

.luxe-cards::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, var(--luxe-gold-dark), var(--luxe-gold-light));
	border-radius: 999px;
}

.luxe-card {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: clamp(104px, calc((100% - (var(--luxe-cards-visible, 6) - 1) * 0.85rem) / var(--luxe-cards-visible, 6)), 168px);
}

.luxe-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	height: 100%;
	padding: 0.55rem 0.4rem 0.6rem;
	text-align: center;
	text-decoration: none;
	border-radius: var(--luxe-radius);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.24));
	border: 1px solid rgba(212, 175, 55, 0.34);
	box-shadow: 0 10px 22px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.32s ease, box-shadow 0.32s ease, background 0.32s ease;
}

.luxe-card__link::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(80% 60% at 50% 0%, rgba(255, 243, 196, 0.18), transparent 70%);
	opacity: 0;
	transition: opacity 0.32s ease;
	pointer-events: none;
}

.luxe-card__link:hover,
.luxe-card__link:focus-visible {
	transform: translateY(-4px);
	border-color: var(--luxe-gold);
	background: linear-gradient(160deg, rgba(212, 175, 55, 0.16), rgba(0, 0, 0, 0.3));
	box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(212, 175, 55, 0.45), 0 0 26px -6px rgba(212, 175, 55, 0.55);
}

.luxe-card__link:hover::before,
.luxe-card__link:focus-visible::before {
	opacity: 1;
}

.luxe-card__media {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--luxe-card-size);
	height: var(--luxe-card-size);
	overflow: hidden;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 26%, rgba(212, 175, 55, 0.3), rgba(14, 10, 12, 0.92) 72%);
	border: 1px solid rgba(212, 175, 55, 0.45);
	box-shadow: inset 0 0 18px -6px rgba(212, 175, 55, 0.45);
	flex: 0 0 auto;
}

.luxe-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.luxe-card__link:hover .luxe-card__img,
.luxe-card__link:focus-visible .luxe-card__img {
	transform: scale(1.08);
}

.luxe-card__icon {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--luxe-gold-light);
}

.luxe-card__sheen {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(120deg, transparent 32%, rgba(255, 255, 255, 0.42) 48%, transparent 64%);
	transform: translateX(-120%);
	transition: transform 0.7s ease;
	pointer-events: none;
}

.luxe-card__link:hover .luxe-card__sheen,
.luxe-card__link:focus-visible .luxe-card__sheen {
	transform: translateX(120%);
}

.luxe-card__name {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(0.76rem, 0.9vw, 0.86rem);
	font-weight: 600;
	line-height: 1.25;
	color: #FFF6E4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-wrap: balance;
}

.luxe-card__count {
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(212, 175, 55, 0.9);
}

.luxe-card__arrow {
	position: absolute;
	top: 0.45rem;
	inset-inline-end: 0.45rem;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	color: var(--luxe-gold);
	background: rgba(14, 10, 12, 0.55);
	border: 1px solid rgba(212, 175, 55, 0.35);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.luxe-card__link:hover .luxe-card__arrow,
.luxe-card__link:focus-visible .luxe-card__arrow {
	opacity: 1;
	transform: translateX(0);
}

/* Optional admin-configured heading labels the cards. */
.luxe-cards--icons .luxe-card__media {
	border-radius: var(--luxe-radius);
}

/* Scroll arrows */
.luxe-cards__nav {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--luxe-gold-light);
	background: linear-gradient(145deg, rgba(14, 10, 12, 0.92), rgba(91, 14, 30, 0.92));
	border: 1px solid rgba(212, 175, 55, 0.5);
	box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.95);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.luxe-cards__nav:hover,
.luxe-cards__nav:focus-visible {
	background: var(--luxe-gold-gradient);
	color: #2A0710;
	transform: scale(1.06);
}

.luxe-cards__nav svg {
	pointer-events: none;
}

.luxe-cards__nav--prev {
	inset-inline-start: -6px;
	transform: scaleX(-1);
}

.luxe-cards__nav--next {
	inset-inline-end: -6px;
}

.luxe-cards__nav[hidden] {
	display: none;
}

/* =====================================================================
 * FEATURE 2 — editable hero banner slider
 * ================================================================== */
.luxe-slider {
	--luxe-slider-overlay: 0.55;
	--luxe-slider-h: auto;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--luxe-primary-dark);
	border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}

.luxe-slider::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(14, 10, 12, 0.42) 0%, rgba(14, 10, 12, 0) 26%),
		linear-gradient(0deg, rgba(14, 10, 12, 0.5) 0%, rgba(14, 10, 12, 0) 32%);
}

.luxe-slider__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.luxe-slider__track {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.luxe-slider__slide {
	position: relative;
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 9;
	max-height: 88vh;
}

/* Fixed-height option from the admin screen. */
.luxe-slider[style*="--luxe-slider-h:"] .luxe-slider__slide {
	aspect-ratio: auto;
	height: var(--luxe-slider-h);
	max-height: 88vh;
}

.luxe-slider__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.luxe-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.luxe-slider--frame-contain .luxe-slider__img {
	object-fit: contain;
	background: radial-gradient(circle at 50% 40%, var(--luxe-primary) 0%, var(--luxe-dark) 78%);
}

.luxe-slider__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(14, 10, 12, calc(var(--luxe-slider-overlay) + 0.16)) 0%, rgba(14, 10, 12, var(--luxe-slider-overlay)) 42%, rgba(14, 10, 12, calc(var(--luxe-slider-overlay) * 0.35)) 100%),
		linear-gradient(0deg, rgba(91, 14, 30, 0.42) 0%, rgba(91, 14, 30, 0) 55%);
}

.luxe-slider__slide--center .luxe-slider__scrim {
	background: linear-gradient(0deg, rgba(14, 10, 12, calc(var(--luxe-slider-overlay) + 0.1)) 0%, rgba(14, 10, 12, var(--luxe-slider-overlay)) 100%);
}

.luxe-slider__slide--right .luxe-slider__scrim {
	background: linear-gradient(270deg, rgba(14, 10, 12, calc(var(--luxe-slider-overlay) + 0.16)) 0%, rgba(14, 10, 12, var(--luxe-slider-overlay)) 42%, rgba(14, 10, 12, calc(var(--luxe-slider-overlay) * 0.35)) 100%);
}

.luxe-slider__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 70% at 12% 92%, rgba(212, 175, 55, 0.26) 0%, rgba(212, 175, 55, 0) 62%),
		radial-gradient(45% 55% at 92% 8%, rgba(255, 243, 196, 0.16) 0%, rgba(255, 243, 196, 0) 65%);
	pointer-events: none;
}

.luxe-slider__inner {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	min-height: 100%;
	padding-block: clamp(2rem, 5vw, 4rem);
}

.luxe-slider__slide--center .luxe-slider__inner {
	justify-content: center;
	text-align: center;
}

.luxe-slider__slide--right .luxe-slider__inner {
	justify-content: flex-end;
	text-align: end;
}

.luxe-slider__copy {
	max-width: min(620px, 92%);
}

.luxe-slider__slide--center .luxe-slider__copy {
	margin-inline: auto;
}

.luxe-slider__title {
	margin: 0 0 0.5rem;
	font-family: "Cormorant Garamond", "Times New Roman", serif;
	font-size: clamp(1.8rem, 4.6vw, 3.6rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: #FFF9F0;
	text-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.luxe-slider__subtitle {
	margin: 0 0 0.7rem;
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(0.78rem, 1.3vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--luxe-gold-light);
}

.luxe-slider__text {
	margin: 0 0 1.35rem;
	font-size: clamp(0.92rem, 1.35vw, 1.08rem);
	line-height: 1.65;
	color: rgba(255, 249, 240, 0.88);
}

.luxe-slider__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.luxe-slider__slide--center .luxe-slider__actions {
	justify-content: center;
}

.luxe-slider__slide--right .luxe-slider__actions {
	justify-content: flex-end;
}

/* Cross-fade / slide mechanics */
.luxe-slider__slide {
	transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.65s;
}

.luxe-slider--fade .luxe-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	aspect-ratio: auto;
}

.luxe-slider--fade .luxe-slider__slide.is-active {
	position: relative;
	aspect-ratio: 16 / 9;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.luxe-slider--slide .luxe-slider__track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.luxe-slider--slide .luxe-slider__slide {
	flex: 0 0 100%;
	opacity: 0.35;
}

.luxe-slider--slide .luxe-slider__slide.is-active {
	opacity: 1;
}

/* Navigation */
.luxe-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 6;
	display: grid;
	place-items: center;
	width: clamp(36px, 3.4vw, 46px);
	height: clamp(36px, 3.4vw, 46px);
	margin-top: clamp(-23px, -1.7vw, -18px);
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--luxe-gold-light);
	background: linear-gradient(145deg, rgba(14, 10, 12, 0.82), rgba(91, 14, 30, 0.82));
	border: 1px solid rgba(212, 175, 55, 0.55);
	backdrop-filter: blur(6px);
	transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease, opacity 0.28s ease;
}

.luxe-slider__nav:hover,
.luxe-slider__nav:focus-visible {
	background: var(--luxe-gold-gradient);
	color: #2A0710;
	transform: scale(1.07);
}

.luxe-slider__nav svg {
	pointer-events: none;
}

.luxe-slider__nav--prev {
	inset-inline-start: clamp(0.5rem, 2vw, 1.4rem);
	transform: scaleX(-1);
}

.luxe-slider__nav--prev:hover,
.luxe-slider__nav--prev:focus-visible {
	transform: scaleX(-1) scale(1.07);
}

.luxe-slider__nav--next {
	inset-inline-end: clamp(0.5rem, 2vw, 1.4rem);
	transform: none;
}

.luxe-slider__nav[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Dots */
.luxe-slider__dots {
	position: absolute;
	bottom: clamp(0.75rem, 1.8vw, 1.35rem);
	inset-inline: 0;
	z-index: 6;
	display: flex;
	justify-content: center;
	gap: 0.45rem;
}

.luxe-slider__dot {
	width: 26px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	background: rgba(255, 249, 240, 0.34);
	transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.luxe-slider__dot > span {
	display: block;
	width: 100%;
	height: 100%;
}

.luxe-slider__dot:hover,
.luxe-slider__dot:focus-visible {
	background: rgba(255, 249, 240, 0.6);
}

.luxe-slider__dot.is-active {
	width: 42px;
	background: var(--luxe-gold-gradient);
	box-shadow: 0 0 14px -2px rgba(212, 175, 55, 0.8);
}

/* Reduced-motion friendly entrance + subtle motion, opt-in only. */
@media (prefers-reduced-motion: no-preference) {
	.luxe-slider__slide.is-active .luxe-slider__img {
		animation: luxe-banner-kenburns 14s ease-out both;
	}

	.luxe-slider__slide.is-active .luxe-slider__copy {
		animation: luxe-banner-enter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.luxe-js .luxe-card {
		animation: luxe-card-enter 0.5s ease both;
	}
}

@media (prefers-reduced-motion: reduce) {
	.luxe-cards {
		scroll-behavior: auto;
	}

	.luxe-slider__slide,
	.luxe-slider--slide .luxe-slider__track,
	.luxe-card__link,
	.luxe-card__img,
	.luxe-card__sheen {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.luxe-cards-bar {
		--luxe-card-size: clamp(88px, 12vw, 112px);
	}
}

@media (max-width: 760px) {
	.luxe-cards-bar {
		--luxe-card-size: clamp(80px, 21vw, 98px);
		padding-inline: 0;
	}

	.luxe-card {
		width: clamp(96px, 28vw, 128px);
	}

	.luxe-card__count {
		display: none;
	}

	.luxe-cards {
		gap: 0.5rem;
		padding-inline: 0.9rem;
	}

	.luxe-cards__nav {
		display: none;
	}

	.luxe-slider__slide {
		aspect-ratio: 16 / 9;
		min-height: 230px;
	}

	.luxe-slider__nav {
		display: none;
	}

	.luxe-slider__dots {
		bottom: 0.6rem;
	}

	.luxe-slider__inner {
		padding-block: clamp(1.1rem, 4vw, 1.6rem);
	}

	.luxe-slider__copy {
		max-width: 100%;
	}

	.luxe-slider__actions .luxe-btn--lg {
		padding-block: 0.6rem;
		font-size: 0.82rem;
	}
}

@media (max-width: 480px) {
	.luxe-card {
		width: clamp(92px, 30vw, 112px);
	}

	.luxe-slider__slide {
		min-height: 200px;
	}

	.luxe-slider__subtitle {
		letter-spacing: 0.14em;
	}
}

/* ---------------------------------------------------------------------
 * Dark mode
 * ------------------------------------------------------------------ */
[data-theme="dark"] .luxe-cards-bar {
	background:
		radial-gradient(120% 160% at 50% -40%, rgba(212, 175, 55, 0.14) 0%, rgba(212, 175, 55, 0) 62%),
		linear-gradient(180deg, #0A0709 0%, var(--luxe-primary-dark) 100%);
}

[data-theme="dark"] .luxe-card__link {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.4));
}

[data-theme="dark"] .luxe-slider {
	background: #0A0709;
}