/**
 * Homepage hero slider (CollabX 446).
 *
 * Everything is scoped under .dws-hero with class names Betheme does not use,
 * so the theme's page-local inline <style> (which loads AFTER enqueued
 * stylesheets and therefore wins ties) has nothing to collide with. Where a
 * bare element could be hit by a theme rule (ul, li, img, a, button) the reset
 * is written with the .dws-hero ancestor for enough specificity to hold.
 *
 * Width comes from Betheme's own section/column scaffold that inc/hero-slider.php
 * wraps this in, so the hero shares an edge with the content below it at every
 * breakpoint. The banners are 971px wide, so the widest desktop column (1100px)
 * upscales them ~1.13x — imperceptible on photographic artwork, and worth it to
 * avoid the hero sitting visibly inset from the rest of the page.
 *
 * aspect-ratio holds the frame open before the image decodes, so no layout shift.
 */

.dws-hero {
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 auto 40px;
	--dws-hero-radius: 10px;
}

/* Betheme's .column_attr is shrink-to-fit here, so without an explicit width it
   sizes to the flex track's min-content — ten slides wide — and everything
   inside it inherits that bogus containing block. Pinning it to the column
   width keeps percentage lengths inside the hero honest. */
.dws-hero-section .column_attr {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Betheme gives sections a default vertical rhythm; the hero sets its own. */
.dws-hero-section > .section_wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

.dws-hero__viewport {
	position: relative;
	width: 100%;
	min-width: 0;      /* stop the ten-slide track driving min-content upward */
	box-sizing: border-box;
	overflow: hidden;
	border-radius: var( --dws-hero-radius );
	background: #eceff3;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, .06 ), 0 8px 24px rgba( 16, 24, 40, .08 );
}

.dws-hero .dws-hero__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform .55s cubic-bezier( .22, .61, .36, 1 );
	will-change: transform;
}

.dws-hero .dws-hero__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dws-hero .dws-hero__link {
	position: relative;
	display: block;
	line-height: 0;          /* kill the inline-image descender gap */
	border: 0;
	text-decoration: none;
	outline-offset: 3px;
}

.dws-hero .dws-hero__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 971 / 301;
	object-fit: cover;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	max-width: 100%;
	transition: transform .6s cubic-bezier( .22, .61, .36, 1 );
}

/* A slow push-in on hover reads as "this is clickable" without moving layout. */
.dws-hero .dws-hero__link:hover .dws-hero__img,
.dws-hero .dws-hero__link:focus-visible .dws-hero__img {
	transform: scale( 1.025 );
}

/* ---- "Shop now" affordance -------------------------------------------- *
 * The artwork already carries the category name in large white type, so the
 * only overlay is the call to action plus the product count. Bottom-right,
 * over a short scrim so it stays legible on any of the ten photographs.
 */

.dws-hero .dws-hero__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 45%;
	pointer-events: none;
	background: linear-gradient( to top, rgba( 8, 12, 20, .55 ), rgba( 8, 12, 20, 0 ) );
}

.dws-hero .dws-hero__cta {
	position: absolute;
	right: 18px;
	bottom: 16px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, .94 );
	color: #11161f;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba( 8, 12, 20, .28 );
	transition: background-color .25s ease, transform .25s ease;
}

.dws-hero .dws-hero__cta-count {
	padding: 3px 8px;
	border-radius: 999px;
	background: #11161f;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.dws-hero .dws-hero__cta-arrow {
	transition: transform .25s ease;
}

.dws-hero .dws-hero__link:hover .dws-hero__cta,
.dws-hero .dws-hero__link:focus-visible .dws-hero__cta {
	background: #fff;
}

.dws-hero .dws-hero__link:hover .dws-hero__cta-arrow,
.dws-hero .dws-hero__link:focus-visible .dws-hero__cta-arrow {
	transform: translateX( 3px );
}

/* ---- arrows ------------------------------------------------------------ */

.dws-hero .dws-hero__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	transform: translateY( -50% );
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .92 );
	color: #11161f;
	box-shadow: 0 2px 10px rgba( 8, 12, 20, .22 );
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s ease, background-color .25s ease;
}

.dws-hero .dws-hero__nav:hover {
	background: #fff;
}

.dws-hero .dws-hero__nav--prev { left: 14px; }
.dws-hero .dws-hero__nav--next { right: 14px; }

/* Arrows stay out of the way until the user shows intent. Keyboard focus and
   touch both count as intent, so they are never unreachable. */
.dws-hero:hover .dws-hero__nav,
.dws-hero:focus-within .dws-hero__nav,
.dws-hero.is-touch .dws-hero__nav {
	opacity: 1;
}

/* ---- dots -------------------------------------------------------------- */

.dws-hero__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.dws-hero .dws-hero__dot {
	width: 9px;
	height: 9px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #c3cad6;
	cursor: pointer;
	transition: width .3s ease, background-color .3s ease;
}

.dws-hero .dws-hero__dot:hover {
	background: #97a2b4;
}

.dws-hero .dws-hero__dot.is-active {
	width: 26px;
	background: #11161f;
}

/* ---- responsive -------------------------------------------------------- */

@media ( max-width: 767px ) {
	/* Betheme drops the section gutter to zero below 767px, which left the hero
	   running edge to edge while everything under it kept a 33px margin — two
	   different left edges on the same page. This reproduces the content column's
	   box (550px max-width, centred, 33px gutter) at any viewport rather than
	   hardcoding a value per breakpoint, matching css/header-layout.css.
	   Measured: hero and content share an edge at 600px (58) and 390px (33).

	   The formula is in vw, NOT %. A percentage here resolves against Betheme's
	   shrink-to-fit .column_attr, which sizes to the flex track's min-content —
	   so `100%` fed back on itself and computed a 479px gutter, blowing the hero
	   out to 1443px inside a 390px column and pushing every slide off screen
	   (invisible, because an ancestor clips overflow-x). vw has no such loop. */
	.dws-hero {
		margin-bottom: 28px;
		padding-left: max( 33px, calc( ( 100vw - 550px ) / 2 + 33px ) );
		padding-right: max( 33px, calc( ( 100vw - 550px ) / 2 + 33px ) );
		--dws-hero-radius: 8px;
	}

	/* On a phone the arrows overlap the artwork badly and swipe is the natural
	   gesture, so the dots are the only visible control. */
	.dws-hero .dws-hero__nav {
		display: none;
	}

	/* At phone width the banner is only ~100px tall and the category name burned
	   into the artwork runs nearly edge to edge, so an overlaid pill sits on top
	   of the lettering. Below 767px the call to action becomes its own row under
	   the image instead — no collision, and a bigger tap target. */
	.dws-hero .dws-hero__link {
		line-height: normal;
	}

	.dws-hero .dws-hero__link::after {
		display: none;   /* scrim only exists to support the overlaid pill */
	}

	.dws-hero .dws-hero__cta {
		position: static;
		display: flex;
		justify-content: center;
		gap: 8px;
		padding: 11px 12px;
		border-radius: 0;
		background: #11161f;
		color: #fff;
		font-size: 12px;
		box-shadow: none;
	}

	.dws-hero .dws-hero__cta-count {
		padding: 2px 7px;
		background: rgba( 255, 255, 255, .16 );
		color: #fff;
		font-size: 10px;
	}

	.dws-hero__dots {
		margin-top: 12px;
	}
}

/* ---- accessibility ----------------------------------------------------- */

.dws-hero .dws-hero__link:focus-visible,
.dws-hero .dws-hero__nav:focus-visible,
.dws-hero .dws-hero__dot:focus-visible {
	outline: 2px solid #11161f;
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.dws-hero .dws-hero__track,
	.dws-hero .dws-hero__img,
	.dws-hero .dws-hero__cta,
	.dws-hero .dws-hero__cta-arrow,
	.dws-hero .dws-hero__dot {
		transition: none;
	}

	.dws-hero .dws-hero__link:hover .dws-hero__img,
	.dws-hero .dws-hero__link:focus-visible .dws-hero__img {
		transform: none;
	}
}

/* Before the script runs, the track is a plain row of slides; hiding the
   overflow means only the first is visible, so there is no flash of ten
   stacked banners on a slow connection. With JS off it degrades to a single
   static, linked banner — still useful. */
.dws-hero:not( .is-ready ) .dws-hero__nav,
.dws-hero:not( .is-ready ) .dws-hero__dots {
	visibility: hidden;
}