/**
 * Haat — storefront sections.
 *
 * Loaded only on the front page and the shop (see inc/enqueue.php), because
 * nothing here paints anything on a post or a page.
 *
 * @package Haat
 */

.haat-section {
	padding-block: 2.5rem;
}

/* The first section sits directly under the chrome and supplies its own top
 * spacing, so the doubled gap is removed rather than reduced. */
.haat-section:first-child {
	padding-top: 1.5rem;
}

.haat-section--trust-badges {
	padding-block: 1.5rem;
}

.haat-front-intro {
	padding-block: 2rem;
}

/* ── Hero ────────────────────────────────────────────────────────────────*/
.haat-hero {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax( 0, 1fr );
}

/*
 * 1200px, not 1024.
 *
 * The rail sets the hero's height, so as the viewport narrows the banner gets
 * narrower without getting shorter — it grows proportionally taller and
 * object-fit:cover starts eating its SIDES, where the product is. Between
 * roughly 1024 and 1200 that crop passes the point the artwork can absorb.
 * Above 1200 there is room for both columns; below it the banner goes
 * full-width and back to its own aspect ratio, which crops nothing.
 */
@media ( min-width: 1200px ) {
	.haat-hero {
		grid-template-columns: 15rem minmax( 0, 1fr );
	}

	.haat-hero--no-rail {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 1199px ) {
	/* The rail is a desktop affordance. On a phone the same categories are one
	 * tap away in the menu drawer, and a ten-item list above the banner would
	 * push the promotion below the fold on every device.
	 *
	 * Deliberately longer than `.haat-hero__rail`. This block sits ABOVE the
	 * base rule, and that rule sets `display: flex` at the same 0-1-0
	 * specificity -- so source order handed the win to the base rule and the
	 * rail was never hidden at any width. Measured at 390px it still rendered
	 * full height. Raising the specificity fixes it wherever the block sits,
	 * which a reorder would not. */
	.haat-hero.haat-hero .haat-hero__rail {
		display: none;
	}
}

.haat-hero__rail {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-lg );
	/*
	 * The rail is the HEIGHT AUTHORITY for the hero.
	 *
	 * It sizes to its own items, so the column is exactly as tall as the
	 * categories in it — no slack to distribute and no empty tail — and the
	 * banner beside it stretches to match. The item count (Customizer, capped
	 * at 12) is therefore the single control over how tall the hero is.
	 *
	 * The consequence, which the artwork is drawn for: the banner's aspect
	 * ratio moves with that count, so object-fit:cover crops it. The hero art is
	 * drawn 2:1 with the subject centred vertically, so the crop is always
	 * VERTICAL and takes background rather than product.
	 */
	align-self: start;
	/*
	 * No overflow here, deliberately.
	 *
	 * `overflow-y: auto` makes this a scroll container, and a scroll container
	 * clips on BOTH axes whatever the other axis is set to — so every category
	 * flyout, which is absolutely positioned to the right of this box, was
	 * sliced off at the rail's edge. The list length is bounded by the
	 * Customizer's category count instead, which is the right place to control
	 * it: a merchant choosing to show thirty departments should get a taller
	 * rail, not thirty items hidden behind a scrollbar nobody looks for.
	 */
}

.haat-hero__rail::-webkit-scrollbar {
	display: none;
}

.haat-hero__rail-list {
	display: flex;
	flex-direction: column;
	/*
	 * Rows sit tight against each other. This used to be space-evenly, which
	 * spread every pixel of leftover height between EVERY row — so the taller
	 * the banner got, the further apart the categories drifted, and a list of
	 * ten short links read as ten unrelated items.
	 *
	 * Slack is collected in one place instead: the "All categories" link below
	 * is pushed to the foot of the rail, so any spare height lands as a single
	 * gap above a closing action, which reads as deliberate.
	 */
	flex: 0 0 auto;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.haat-hero__rail-item {
	position: relative;
}

.haat-hero__rail-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	border-radius: var( --haat-radius-md );
	color: var( --haat-foreground );
	/* Was text-sm. This is a primary navigation column on the first screen of
	 * the store, not a caption — at 14px it read as fine print beside a banner
	 * with 48px type. */
	font-size: var( --haat-text-base );
	font-weight: var( --haat-weight-medium );
	line-height: 1.2;
}

.haat-hero__rail-link:hover {
	background: var( --haat-flame-50 );
	color: var( --haat-flame-700 );
	text-decoration: none;
}

.haat-hero__rail-chevron {
	width: 0.6rem;
	height: 0.6rem;
	margin-left: auto;
	flex-shrink: 0;
	background: currentColor;
	opacity: 0.45;
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E" );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.haat-hero__rail-all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	/* Sits directly under the last category. There is no spare height to absorb
	 * any more — the rail is exactly as tall as its contents. */
	margin-top: 0.35rem;
	padding: 0.7rem 0.85rem;
	border-top: 1px solid var( --haat-border );
	color: var( --haat-primary );
	font-size: var( --haat-text-sm );
	font-weight: var( --haat-weight-semibold );
}

.haat-hero__rail-all:hover {
	text-decoration: none;
}

.haat-hero__flyout {
	position: absolute;
	top: -0.5rem;
	left: 100%;
	z-index: var( --haat-z-dropdown );
	min-width: 16rem;
	padding: 1.25rem;
	background: var( --haat-surface );
	border: 1px solid var( --haat-border );
	border-radius: var( --haat-radius-lg );
	box-shadow: var( --haat-shadow-pop );
	visibility: hidden;
	opacity: 0;
	transition: opacity var( --haat-duration-fast ) var( --haat-ease-out ),
		visibility 0s linear var( --haat-duration-fast );
}

.haat-hero__rail-item--has-flyout:hover > .haat-hero__flyout,
.haat-hero__rail-item--has-flyout:focus-within > .haat-hero__flyout {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.haat-hero__flyout-title {
	margin: 0 0 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var( --haat-border );
	font-weight: var( --haat-weight-bold );
	font-size: var( --haat-text-sm );
}

.haat-hero__flyout-list {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 7rem, 1fr ) );
	gap: 0.4rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --haat-text-sm );
}

.haat-hero__flyout-list a {
	color: var( --haat-muted-foreground );
}

.haat-hero__flyout-list a:hover {
	color: var( --haat-primary );
}

/* ── Hero slider ─────────────────────────────────────────────────────────*/
.haat-hero__slider {
	position: relative;
	/* Fills the grid row rather than sitting inside it. The rail sets the row
	 * height, so a fixed-ratio slider left a pale band beneath the banner that
	 * the carousel dots then sat on — reading as a broken edge rather than as
	 * part of the hero. */
	align-self: stretch;
	display: flex;
	overflow: hidden;
	border-radius: var( --haat-radius-xl );
	background: var( --haat-muted );
}

.haat-hero__track {
	display: flex;
	width: 100%;
	transition: transform var( --haat-duration-slow ) var( --haat-ease-out );
}

.haat-hero__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	/* A floor, not a fixed height: the banner is at least this shape, and grows
	 * to whatever the row needs. */
	min-height: 0;
	/* Matches the artwork, so a full-width banner is uncropped. */
	aspect-ratio: 2 / 1;
}

/*
 * 1200px, matching the breakpoint that actually puts the rail on screen.
 *
 * These rules used to open at 1024 while the rail is hidden below 1199, so
 * between those two widths the banner was told to take its height from a rail
 * that was not there. It survived only because height:100% silently fell back
 * to the image's own ratio; once the track went out of flow the same gap
 * collapsed the hero to ZERO height. A rule that depends on a sibling has to
 * live at the breakpoint where that sibling exists.
 */
@media ( min-width: 1200px ) {
	/*
	 * Beside the rail the banner takes its height from the RAIL and stretches
	 * to match. The rail sizes to its own items, so the category count is the
	 * single control over how tall the hero is; the artwork is drawn 2:1 with
	 * the subject centred so the resulting crop is vertical and takes
	 * background rather than product.
	 */
	.haat-hero:not( .haat-hero--no-rail ) .haat-hero__slide {
		/* No ratio of its own beside the rail: the row height comes from the
		 * rail and the slide fills it. Without a rail — below this breakpoint,
		 * and when the merchant turns it off — the slide keeps its own ratio,
		 * because then there is nothing else to take a height from. */
		aspect-ratio: auto;
		height: 100%;
	}

	/*
	 * Absolute, so the banner contributes NO intrinsic height to the grid row.
	 *
	 * height:100% on the slide resolves against an indefinite row height, so it
	 * falls back to auto and the image's own 2:1 intrinsic size sets the row --
	 * the rail then has no say at all. That went unnoticed for as long as the
	 * rail happened to be the taller of the two: at fourteen rows it out-grew
	 * the banner and the layout looked correct by accident. Capping the rail at
	 * ten made the banner the taller one and the same bug reappeared.
	 *
	 * Taking the track out of flow leaves the rail as the only thing in the row
	 * with a height, which is what "the rail is the height authority" has to
	 * mean mechanically. The slider itself still stretches to the row, so the
	 * track fills it via inset.
	 */
	.haat-hero:not( .haat-hero--no-rail ) .haat-hero__track {
		position: absolute;
		inset: 0;
		height: auto;
	}
}

@media ( max-width: 767px ) {
	.haat-hero__slide {
		aspect-ratio: 16 / 10;
	}
}

.haat-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.haat-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.6rem;
	padding: clamp( 1.25rem, 4vw, 3.5rem );
	color: #fff;
	/* A left-weighted scrim rather than a flat overlay: the text sits on the
	 * left, so darkening the right half as well would only dull the product
	 * photography the banner exists to show. */
	background: linear-gradient( 90deg, rgba( 10, 14, 39, 0.75 ) 0%, rgba( 10, 14, 39, 0.35 ) 45%, transparent 75% );
}

.haat-hero__eyebrow {
	margin: 0;
	padding: 0.2rem 0.6rem;
	background: var( --haat-flame-500 );
	border-radius: var( --haat-radius-full );
	font-size: var( --haat-text-xs );
	font-weight: var( --haat-weight-bold );
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.haat-hero__title {
	max-width: 18ch;
	margin: 0;
	font-family: var( --haat-font-display );
	font-size: clamp( 1.5rem, 1rem + 2.6vw, var( --haat-text-5xl ) );
	font-weight: var( --haat-weight-black );
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.haat-hero__subtitle {
	max-width: 34ch;
	margin: 0;
	font-size: var( --haat-text-base );
	opacity: 0.9;
}

.haat-hero__cta {
	margin-top: 0.5rem;
}

/* ── Deals ───────────────────────────────────────────────────────────────*/
.haat-deals__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.haat-deals__title-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.haat-deals__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var( --haat-text-3xl );
}

.haat-deals__flame {
	width: 1.5rem;
	height: 1.5rem;
	background: var( --haat-flame-500 );
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2c1 4-2 5-2 8a2 2 0 0 0 4 0c0-1 0-2 1-3 2 2 3 4.5 3 7a6 6 0 0 1-12 0c0-4 3-8 6-12z'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2c1 4-2 5-2 8a2 2 0 0 0 4 0c0-1 0-2 1-3 2 2 3 4.5 3 7a6 6 0 0 1-12 0c0-4 3-8 6-12z'/%3E%3C/svg%3E" );
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.haat-deals__timer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var( --haat-text-sm );
	color: var( --haat-muted-foreground );
}

.haat-deals__controls {
	display: flex;
	gap: 0.5rem;
}

@media ( max-width: 767px ) {
	/* The rail is already swipeable on touch, so the arrows buy nothing and
	 * cost header space. */
	.haat-deals__controls {
		display: none;
	}
}

/* ── Reduced motion ──────────────────────────────────────────────────────
 * base.css already collapses animation durations globally, which stops the
 * marquee mid-scroll at whatever offset it happened to reach — leaving the
 * duplicated second track visible as a stray half row. Resetting the transform
 * puts the row back to its natural start position instead of freezing it. */
@media ( prefers-reduced-motion: reduce ) {
	.haat-marquee__track {
		animation: none;
		transform: none;
	}

	/* Wrap into a static block rather than becoming a scroller. The scroll
	 * fallback put a raw grey scrollbar under the row on every machine with
	 * "reduce motion" on — which is a real slice of visitors, not an edge case
	 * — and hiding that bar would have cost them the only way to reach the
	 * logos past the fold. Wrapping shows every brand at once instead, so
	 * nothing scrolls and nothing is out of reach. The mask goes with it:
	 * there are no cut-off ends left to fade. */
	.haat-marquee {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.haat-marquee__track {
		flex-wrap: wrap;
		justify-content: center;
		/*
		 * flex-shrink: 0 is what stops the animated track collapsing to the
		 * container width, and it defeats wrapping just as effectively -- the
		 * row stayed wider than its box and still overflowed, animation or no.
		 * Wrapping needs the track to be allowed to reach the container width
		 * first.
		 */
		flex-shrink: 1;
		width: 100%;
	}

	/* The duplicate exists only to make the loop seamless. With no loop it is
	 * a second copy of every logo in a now-scrollable row. */
	.haat-marquee__track[aria-hidden="true"] {
		display: none;
	}
}