/* ============================================================
   DLC Department Hero Slider - v1.1.2
   Desktop: fixed height track, image fills slide, text panel
            overlaid at bottom, accent strip below
   Mobile:  image fixed height, text panel stacks below,
            auto overall height, left-aligned text
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
.dlc-dept-hero-slider {
	position: relative;
	width: 100%;
	max-width: 1062px;
	margin-left: auto;
	margin-right: auto;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ── Track - desktop fixed height ────────────────────────── */
.dlc-dept-hero-slider__track {
	position: relative;
	width: 100%;
	height: var(--slide-height, 475px);
	overflow: visible;
}

/* ── Slides - desktop: absolute stacked, fade in/out ─────── */
.dlc-dept-hero-slider__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	pointer-events: none;
	overflow: visible;
}

.dlc-dept-hero-slider__slide--active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

.dlc-dept-hero-slider__slide--hidden {
	display: none !important;
}

/* ── Image link wrapper ───────────────────────────────────── */
/* Covers full slide but sits below text panel (z-index 1 vs panel z-index 2) */
/* Clicking the visible image area above the panel goes to image_url */
/* Clicking the text panel or Line 4 link still works correctly */
.dlc-dept-hero-slider__image-link {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ── Image - desktop: fills entire slide ─────────────────── */
.dlc-dept-hero-slider__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* ── Text Panel - overlaid at bottom of image on desktop ─── */
.dlc-dept-hero-slider__panel {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	padding: 0.3em 0;
	z-index: 2;
}

.dlc-dept-hero-slider__panel-inner {
	width: 100%;
	max-width: 1062px;
	margin: 0 auto;
	padding: 0 1em;
	box-sizing: border-box;
	text-align: left;
}

/* Department panel background colors (dept-color1-bg) */
.dlc-dept-hero-slider__panel--corset    { background: rgba(133, 82, 125, 0.8); }
.dlc-dept-hero-slider__panel--steampunk { background: rgba(119, 16, 0, 0.8); }
.dlc-dept-hero-slider__panel--bra       { background: rgba(197, 77, 112, 0.8); }
.dlc-dept-hero-slider__panel--leather   { background: rgba(35, 31, 32, 0.8); }
.dlc-dept-hero-slider__panel--costume   { background: rgba(223, 127, 32, 0.8); }
.dlc-dept-hero-slider__panel--hat       { background: rgba(0, 154, 190, 0.8); }
.dlc-dept-hero-slider__panel--all       { background: rgba(60, 60, 60, 0.8); }

/* ── Accent Strip - full viewport width ───────────────────── */
.dlc-dept-hero-slider__accent {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 32px;
	z-index: 2;
}

.dlc-dept-hero-slider__accent--corset    { background: rgba(157, 99, 153, 0.8); }
.dlc-dept-hero-slider__accent--steampunk { background: rgba(133, 30, 0, 0.8); }
.dlc-dept-hero-slider__accent--bra       { background: rgba(230, 65, 116, 0.8); }
.dlc-dept-hero-slider__accent--leather   { background: rgba(14, 14, 14, 0.8); }
.dlc-dept-hero-slider__accent--costume   { background: rgba(255, 135, 0, 0.8); }
.dlc-dept-hero-slider__accent--hat       { background: rgba(0, 190, 233, 0.8); }
.dlc-dept-hero-slider__accent--all       { background: rgba(80, 80, 80, 0.8); }

/* ── Text Lines ───────────────────────────────────────────── */
.dlc-dept-hero-slider__line1 {
	margin: 0;
	color: #d7b364;
	font-size: 16px;
	line-height: 1.42857;
	font-weight: normal;
}

.dlc-dept-hero-slider__line2 {
	margin: 0;
	color: #ffffff;
	font-size: 23px;
	line-height: 1.5em;
	font-weight: 700;
}

.dlc-dept-hero-slider__line3 {
	margin: 0;
	color: #ffffff;
	font-size: 16px;
	line-height: 1.42857;
}

.dlc-dept-hero-slider__line3 em {
	font-style: italic;
	color: #ffffff;
}

.dlc-dept-hero-slider__line4 {
	margin: 0;
	font-size: 16px;
	line-height: 1.42857;
}

.dlc-dept-hero-slider__line4 a {
	color: #d7b364;
	text-decoration: none;
}

.dlc-dept-hero-slider__line4 a:hover {
	text-decoration: underline;
}

/* Costume override - dark text on orange */
.dlc-dept-hero-slider__panel--costume .dlc-dept-hero-slider__line1,
.dlc-dept-hero-slider__panel--costume .dlc-dept-hero-slider__line4 a {
	color: #3f3f3f;
}

/* ── Controls - inline in accent strip, full viewport width ── */
.dlc-dept-hero-slider__controls {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 32px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.dlc-dept-hero-slider__arrow {
	background: none;
	color: #ffffff;
	border: none;
	cursor: pointer;
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease;
	user-select: none;
	flex-shrink: 0;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.dlc-dept-hero-slider__arrow:hover,
.dlc-dept-hero-slider__arrow:focus-visible {
	color: #d7b364;
	outline: none;
}

.dlc-dept-hero-slider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.dlc-dept-hero-slider__dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ffffff;
	border: none;
	cursor: pointer;
	padding: 2px;
	opacity: 0.75;
	transition: background 0.2s ease, opacity 0.2s ease;
	box-sizing: content-box;
	flex-shrink: 0;
}

.dlc-dept-hero-slider__dot--active {
	background: #4e443c;
	opacity: 1;
}

.dlc-dept-hero-slider__dot:hover {
	background: #000000;
	opacity: 1;
}

/* ── Mobile Layout ────────────────────────────────────────── */
@media (max-width: 768px) {

	/* Track: auto height, no CSS variable height bleeding through */
	.dlc-dept-hero-slider__track {
		height: auto !important;
		overflow: visible;
	}

	/* Slides: static positioning so they stack vertically */
	.dlc-dept-hero-slider__slide {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		opacity: 0;
		visibility: hidden;
		display: none;
	}

	.dlc-dept-hero-slider__slide--active {
		opacity: 1;
		visibility: visible;
		display: block;
	}

	/* Image link: reset to static so it doesn't cover slide */
	.dlc-dept-hero-slider__image-link {
		position: static;
		display: block;
	}

	/* Image: full width, auto height */
	.dlc-dept-hero-slider__image {
		width: 100%;
		height: auto;
		object-fit: cover;
		display: block;
	}

	/* Text panel: static, full width, stacks below image */
	.dlc-dept-hero-slider__panel {
		position: relative;
		bottom: auto;
		left: auto;
		width: 100%;
		transform: none;
		padding: 0.6em 0;
	}

	.dlc-dept-hero-slider__panel-inner {
		max-width: 100%;
		padding: 0 1em;
		text-align: left;
	}

	/* Slightly smaller text on mobile */
	.dlc-dept-hero-slider__line2 { font-size: 18px; }
	.dlc-dept-hero-slider__line1,
	.dlc-dept-hero-slider__line3,
	.dlc-dept-hero-slider__line4 { font-size: 14px; }

	/* Accent strip: static, full width, below panel */
	.dlc-dept-hero-slider__accent {
		position: relative;
		bottom: auto;
		left: auto;
		width: 100%;
		transform: none;
		height: 32px;
		display: block;
	}

	/* Controls: absolute over the accent strip */
	.dlc-dept-hero-slider__controls {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		transform: none;
		height: 32px;
		background: none;
	}

	/* Wrapper needs relative positioning so controls can anchor to accent strip */
	.dlc-dept-hero-slider {
		position: relative;
	}
}