/*
 * Styles for the sections the plugin draws itself.
 *
 * Deliberately thin. Every colour, font and rhythm value comes from the theme's own custom
 * properties (assets/css/theme-tokens.css), so these bands follow the Obsidian/Maroon switcher and
 * the type scale without knowing either exists. Nothing here hard-codes a brand colour.
 *
 * Loaded ONLY when one of these sections is on the page — see AssetCollector.
 */

/* ---------------------------------------------------------------- video */

.yzhp-video__frame {
	margin-top: clamp(1.5rem, 4vw, 3rem);
	border-radius: 2px;
	overflow: hidden;
	background: color-mix(in srgb, var(--yz-ink, #14161b) 88%, #fff);
}

.yzhp-video__player {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ---------------------------------------------------------------- numbers */

.yzhp-stats__grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	margin-top: clamp(1.5rem, 4vw, 3rem);
	text-align: center;
}

.yzhp-stats__value {
	display: block;
	font-family: var(--yz-font-display, inherit);
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.05;
	/* The gold accent is the theme's; falling back to currentColor keeps it legible on both
	   backgrounds if the token is ever renamed. */
	color: var(--yz-gold, currentColor);
}

.yzhp-stats__label {
	display: block;
	margin-top: 0.5rem;
	opacity: 0.75;
}

/* ---------------------------------------------------------------- questions */

.yzhp-faq__list {
	max-width: 46rem;
	margin: clamp(1.5rem, 4vw, 3rem) auto 0;
}

.yzhp-faq__item {
	border-block-end: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.yzhp-faq__q {
	cursor: pointer;
	padding: 1rem 2rem 1rem 0;
	position: relative;
	font-size: 1.0625rem;
	list-style: none;
}

/* Safari still paints its own triangle without this. */
.yzhp-faq__q::-webkit-details-marker {
	display: none;
}

.yzhp-faq__q::after {
	content: '+';
	position: absolute;
	inset-inline-end: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	opacity: 0.6;
	transition: transform 0.2s ease;
}

.yzhp-faq__item[open] .yzhp-faq__q::after {
	content: '−';
}

.yzhp-faq__a {
	padding: 0 2rem 1.25rem 0;
	opacity: 0.85;
	line-height: 1.7;
}

/* The reveal animation must never be the reason content is invisible. */
@media (prefers-reduced-motion: reduce) {
	.yzhp-video__frame,
	.yzhp-stats__item,
	.yzhp-faq__item {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------------------------------------------------------------- brands */

.yzhp-brands__grid {
	display: grid;
	gap: clamp(1rem, 3vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	align-items: center;
	margin-top: clamp(1.25rem, 3vw, 2.5rem);
}

.yzhp-brands__item {
	text-align: center;
}

.yzhp-brands__logo {
	max-width: 100%;
	height: auto;
	max-height: 3.5rem;
	width: auto;
	/* Marks are rarely supplied in one palette. Desaturating until hover keeps the row calm
	   without asking anyone to re-cut their logo. */
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.yzhp-brands__item:hover .yzhp-brands__logo {
	filter: grayscale(0);
	opacity: 1;
}

/* ---------------------------------------------------------------- call to action */

.yzhp-cta {
	position: relative;
	text-align: center;
	background-size: cover;
	background-position: center;
}

.yzhp-cta__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--yz-ink, #14161b) 55%, transparent),
		color-mix(in srgb, var(--yz-ink, #14161b) 80%, transparent)
	);
}

.yzhp-cta__inner {
	position: relative;
}

.yzhp-cta__title {
	margin-block: 0.5rem;
}

.yzhp-cta__intro {
	max-width: 40rem;
	margin-inline: auto;
	opacity: 0.85;
}

.yzhp-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

/* ---------------------------------------------------------------- flash sale */

.yzhp-sale__timer {
	display: flex;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	justify-content: center;
	margin-top: 1.25rem;
	/* Tabular figures stop the row jittering every second as digit widths change. */
	font-variant-numeric: tabular-nums;
}

.yzhp-sale__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 3rem;
}

.yzhp-sale__unit b {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 500;
	color: var(--yz-gold, currentColor);
}

.yzhp-sale__unit i {
	font-style: normal;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}

.yzhp-sale__more {
	margin-top: clamp(1.25rem, 3vw, 2rem);
	text-align: center;
}

/* ---------------------------------------------------------------- journal */

.yzhp-blog__grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin-top: clamp(1.5rem, 4vw, 3rem);
}

.yzhp-blog__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.yzhp-blog__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: 0.875rem;
}

.yzhp-blog__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.yzhp-blog__link:hover .yzhp-blog__media img {
	transform: scale(1.04);
}

.yzhp-blog__title {
	display: block;
	margin-top: 0.35rem;
	font-size: 1.125rem;
	line-height: 1.35;
}

.yzhp-blog__excerpt {
	display: block;
	margin-top: 0.5rem;
	opacity: 0.75;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.yzhp-brands__logo,
	.yzhp-blog__media img {
		transition: none;
	}
}

/* ---------------------------------------------------------------- hero slider */

.yzhp-hero {
	position: relative;
	padding: 0;
	overflow: hidden;
	/* svh, not vh: on mobile browsers vh includes the collapsing address bar, so a 100vh hero is
	   taller than the screen on first paint and the button sits below the fold. */
	min-height: min(88svh, 46rem);
	color: #fff;
}

.yzhp-hero__track {
	display: grid;
	min-height: inherit;
}

.yzhp-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	min-height: inherit;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease;
}

.yzhp-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.yzhp-hero__media,
.yzhp-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yzhp-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--yz-ink, #14161b) calc(var(--yzhp-hero-overlay, 0.45) * 130%), transparent),
		color-mix(in srgb, var(--yz-ink, #14161b) calc(var(--yzhp-hero-overlay, 0.45) * 60%), transparent)
	);
}

.yzhp-hero__inner {
	position: relative;
	width: 100%;
	padding-block: clamp(3rem, 10vh, 7rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.yzhp-hero__slide.is-align-center .yzhp-hero__inner {
	align-items: center;
	text-align: center;
}

.yzhp-hero__slide.is-align-end .yzhp-hero__inner {
	align-items: flex-end;
	text-align: end;
}

.yzhp-hero__title {
	margin: 0;
	font-size: clamp(2rem, 6vw, 4rem);
	line-height: 1.05;
}

.yzhp-hero__subtitle {
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	opacity: 0.9;
}

.yzhp-hero__desc {
	max-width: 34rem;
	opacity: 0.85;
	line-height: 1.65;
}

.yzhp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.yzhp-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.yzhp-hero__nav:hover {
	background: rgba(0, 0, 0, 0.45);
}

/* Logical properties so the arrows swap sides on the RTL version without a second rule. */
.yzhp-hero__nav.is-prev { inset-inline-start: clamp(0.5rem, 2vw, 1.5rem); }
.yzhp-hero__nav.is-next { inset-inline-end: clamp(0.5rem, 2vw, 1.5rem); }

.yzhp-hero__dots {
	position: absolute;
	inset-inline: 0;
	bottom: 1.25rem;
	z-index: 2;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

.yzhp-hero__dot {
	width: 2rem;
	height: 3px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
}

.yzhp-hero__dot.is-active {
	background: var(--yz-gold, #fff);
}

/* Every control needs a visible focus ring — these sit on photographs, where the browser default
   is often invisible. */
.yzhp-hero__nav:focus-visible,
.yzhp-hero__dot:focus-visible {
	outline: 2px solid var(--yz-gold, #fff);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.yzhp-hero__slide {
		transition: none;
	}
}

/* ---------------------------------------------------------------- product carousel */

.yzhp-carousel__viewport {
	position: relative;
	margin-top: clamp(1.25rem, 3vw, 2.5rem);
}

.yzhp-carousel__track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Room for the card's own hover lift and focus ring, which a clipped track would cut off. */
	padding-block: 0.25rem;
}

.yzhp-carousel__track::-webkit-scrollbar {
	display: none;
}

/* WooCommerce renders <ul class="products"><li class="product">. The rail is that list turned
   horizontal, so every card keeps the theme's own styling, hooks and badges. */
.yzhp-carousel__track ul.products {
	display: flex;
	gap: var(--yzhp-gap, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

.yzhp-carousel__track ul.products::before,
.yzhp-carousel__track ul.products::after {
	content: none;
}

/* `li.yzhp-more` is the rail's closing "View all" card (ProductRail) — sized, snapped and scrolled
   exactly like a product card, which is what keeps it in step with the row. */
.yzhp-carousel__track ul.products li.product,
.yzhp-carousel__track ul.products li.yzhp-more {
	flex: 0 0 calc(
		( 100% - ( var(--yzhp-per-desktop, 4) - 1 ) * var(--yzhp-gap, 1.25rem) ) / var(--yzhp-per-desktop, 4)
	);
	margin: 0 !important;
	width: auto !important;
	scroll-snap-align: start;
}

@media ( max-width: 1024px ) {
	.yzhp-carousel__track ul.products li.product,
	.yzhp-carousel__track ul.products li.yzhp-more {
		flex-basis: calc(
			( 100% - ( var(--yzhp-per-tablet, 3) - 1 ) * var(--yzhp-gap, 1.25rem) ) / var(--yzhp-per-tablet, 3)
		);
	}
}

@media ( max-width: 600px ) {
	.yzhp-carousel__track ul.products li.product,
	.yzhp-carousel__track ul.products li.yzhp-more {
		/* The 0.12 sliver is deliberate: a partially visible next card is what tells someone the
		   rail scrolls, without needing an arrow they may not see. */
		flex-basis: calc(
			( 100% - ( var(--yzhp-per-mobile, 1) - 1 ) * var(--yzhp-gap, 1.25rem) ) /
			( var(--yzhp-per-mobile, 1) + 0.12 )
		);
	}
}

.yzhp-carousel__nav {
	position: absolute;
	top: 40%;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 50%;
	background: var(--yz-ivory, #fff);
	color: inherit;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}

.yzhp-carousel__nav[hidden] {
	display: none;
}

.yzhp-carousel__nav.is-prev { inset-inline-start: -0.75rem; }
.yzhp-carousel__nav.is-next { inset-inline-end: -0.75rem; }

/* Autoplay progress (ProductRail `progress`): a short hairline under the rail that fills until the
   next step. The fill animation is the clock — sections.js steps the rail on `animationend` and
   pauses it with `.is-paused` — so what the visitor sees and what happens always agree.
   `transform: scaleX` only; a reduced-motion visitor gets no autoplay and so no running bar. */
.yzhp-carousel__progress {
	display: block;
	width: clamp(7.5rem, 16vw, 13rem);
	height: 1px;
	margin: clamp(1.25rem, 2vw, 1.75rem) auto 0;
	background: var(--yz-hairline, rgba(20, 18, 16, 0.14));
	overflow: hidden;
}
.yz-feature-row .yzhp-feature--ground-dark .yzhp-carousel__progress { background: rgba(245, 241, 233, 0.16); }
.yzhp-carousel__progress-bar {
	display: block;
	height: 100%;
	background: var(--yz-sand, #cbb78f);
	transform: scaleX(0);
	transform-origin: left center;
}
[dir='rtl'] .yzhp-carousel__progress-bar { transform-origin: right center; }
.yzhp-carousel__progress-bar.is-running { animation: yzhp-progress linear forwards; }
.is-paused > .yzhp-carousel__progress > .yzhp-carousel__progress-bar { animation-play-state: paused; }
@keyframes yzhp-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
	.yzhp-carousel__progress { display: none; }
}

/* ---------------------------------------------------------------- full-width product rail

   commafootball's product row, drawn by ProductRail for the Best Sellers and category bands: the
   cards run the whole width of the page with a narrow gutter each side, the arrows are thin
   chevrons IN those gutters (never over a photograph), and a short row keeps its card size and
   centres instead of stretching two rings across the screen. Measured on the reference at 1440px:
   52px gutters, 10px between cards, six cards to a screen, arrows centred on the card.

   The band around the rail owns the space above and below it (home.css); the rail adds none. */
.yzhp-rail {
	--yzhp-gap: 10px;
	--yzhp-gutter: clamp(16px, 3.6vw, 52px);
}

.yzhp-rail .yzhp-carousel__viewport {
	margin-top: 0;
	padding-inline: var(--yzhp-gutter);
}

/* `safe`: a row that overflows falls back to starting at its first card — a plain `center` would
   push the first cards past the scroll origin, where they can never be scrolled back into view. */
.yzhp-rail .yzhp-carousel__track ul.products {
	justify-content: safe center;
}

/* The theme's card lifts 6px with a 48px shadow on hover. Inside a scroller both are clipped by the
   track's edge, so a lifted card looked cut off; the rail's cards stay flat, as the reference's do,
   and keep their photo zoom and rising buy bar. */
.yzhp-rail .yzhp-carousel__track ul.products li.product.yz-card:hover,
.yzhp-rail .yzhp-carousel__track ul.products li.product.yz-card:focus-within {
	translate: none;
	box-shadow: none;
}

/* Arrows: a thin chevron filling the gutter, centred on the row. The resets undo Astra's global
   `button` padding / background, which otherwise stretch the target into a filled pill; colour
   follows the text token so the chevron reads on both the light and the burgundy band. */
.yzhp-rail .yzhp-carousel__nav {
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: var(--yzhp-gutter);
	min-width: 24px;
	height: 4rem;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--yz-text, #141210);
	opacity: 0.8;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.yzhp-rail .yzhp-carousel__nav:hover,
.yzhp-rail .yzhp-carousel__nav:focus-visible {
	background: transparent;
	color: var(--yz-accent, currentColor);
	opacity: 1;
}

/* Restated because the `display: grid` above ties the base `[hidden]` rule on specificity and wins
   on source order — without this, an arrow with nothing to scroll to would still be drawn. */
.yzhp-rail .yzhp-carousel__nav[hidden] {
	display: none;
}

.yzhp-rail .yzhp-carousel__nav.is-prev { inset-inline-start: 0; }
.yzhp-rail .yzhp-carousel__nav.is-next { inset-inline-end: 0; }

/* The chevrons are drawn pointing left / right; in Arabic "previous" sits on the right and must
   point there. */
[dir="rtl"] .yzhp-rail .yzhp-carousel__nav svg {
	transform: scaleX(-1);
}

/* A phone's gutter is too narrow for a target, and a phone swipes anyway — the 0.12 sliver of the
   next card (above) is what says the row moves. */
@media ( max-width: 767px ) {
	.yzhp-rail .yzhp-carousel__nav {
		display: none;
	}
}

/* ---------------------------------------------------------------- "View all" end card

   The last card of a rail. Its panel takes the product photos' 4:5 frame so its edges line up with
   the images beside it; the space below, where the cards carry their captions, stays empty. Brand
   fill (`--yz-primary`) in both themes: obsidian on the light band, wine on the burgundy one. */
.yzhp-more {
	list-style: none;
}

.yzhp-more__link {
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--yz-primary, #141210);
	color: var(--yz-on-primary, #f5f1e9);
	text-decoration: none;
}

.yzhp-more__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	height: 100%;
	padding: 1rem;
	text-align: center;
}

.yzhp-more__label {
	font-family: var(--yz-font-body, inherit);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yz-sand, currentColor);
}

.yzhp-more__title {
	font-family: var(--yz-font-display, inherit);
	font-size: clamp(1.25rem, 1.6vw, 1.625rem);
	font-weight: 500;
	line-height: 1.15;
	max-width: 12ch;
}

.yzhp-more__arrow {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-top: 0.25rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* Hover fills the circle rather than recolouring the card: the sand label keeps its contrast. The
   colour is pinned because Astra's `a:hover` would otherwise turn the title blue. */
.yzhp-more__link:hover,
.yzhp-more__link:focus {
	color: var(--yz-on-primary, #f5f1e9);
}


.yzhp-more__link:hover .yzhp-more__arrow,
.yzhp-more__link:focus-visible .yzhp-more__arrow {
	background: var(--yz-on-primary, #f5f1e9);
	color: var(--yz-primary, #141210);
	transform: translateX(4px);
}

.yzhp-more__link:focus-visible {
	outline: 2px solid var(--yz-focus, currentColor);
	outline-offset: 3px;
}

[dir="rtl"] .yzhp-more__arrow svg {
	transform: scaleX(-1);
}

[dir="rtl"] .yzhp-more__link:hover .yzhp-more__arrow,
[dir="rtl"] .yzhp-more__link:focus-visible .yzhp-more__arrow {
	transform: translateX(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.yzhp-more__arrow {
		transition: none;
	}

	.yzhp-more__link:hover .yzhp-more__arrow,
	.yzhp-more__link:focus-visible .yzhp-more__arrow {
		transform: none;
	}
}

.yzhp-carousel__track:focus-visible,
.yzhp-carousel__nav:focus-visible {
	outline: 2px solid var(--yz-gold, currentColor);
	outline-offset: 3px;
}

.yzhp-carousel__more {
	margin-top: clamp(1rem, 2.5vw, 1.75rem);
	text-align: center;
}

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

/* ---------------------------------------------------------------- product grid */

/* The carousel's rail and this grid render the SAME WooCommerce markup —
   <ul class="products"><li class="product"> — so the theme's card, its badges, its swatch dots and
   its hover lift are inherited by both. Only the container differs. */
.yzhp-grid__items {
	margin-top: clamp(1.25rem, 3vw, 2.5rem);
}

.yzhp-grid__items ul.products {
	display: grid;
	grid-template-columns: repeat(var(--yzhp-cols-desktop, 4), minmax(0, 1fr));
	gap: var(--yzhp-gap, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

/* Astra/WooCommerce clear their float-era grid with pseudo-elements. Inside a CSS grid those become
   two extra grid items, which shows up as a phantom gap in the last row. */
.yzhp-grid__items ul.products::before,
.yzhp-grid__items ul.products::after {
	content: none;
}

.yzhp-grid__items ul.products li.product {
	/* !important is load-bearing here: WooCommerce ships per-column width rules
	   (`.columns-4 li.product { width: 22.05% }`) at a higher specificity than this file can reach
	   without them, and a percentage width inside a grid track produces cards narrower than their
	   own cell. */
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.yzhp-grid__more {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
}

@media (max-width: 991px) {
	.yzhp-grid__items ul.products {
		grid-template-columns: repeat(var(--yzhp-cols-tablet, 3), minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.yzhp-grid__items ul.products {
		grid-template-columns: repeat(var(--yzhp-cols-mobile, 2), minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- split banner (categories)

   CategoriesWidget `split`: commafootball's split hero, where the categories share the page edge to
   edge with no gap, one photograph each, name and a Shop button over the bottom of the image. The
   frame follows how many share the row — one is a wide banner, two are 4:3 (the ring photographs
   are 3:2 landscape, so a tall frame would crop them to a sliver), three or more are portrait tiles
   that flow onto as many rows as they need. */
.yzhp-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.yzhp-split--one { grid-template-columns: minmax(0, 1fr); }
.yzhp-split--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.yzhp-split__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	isolation: isolate;
	background: var(--yz-ink, #141210);
	color: var(--yz-ivory, #f5f1e9);
	text-decoration: none;
}

.yzhp-split--one .yzhp-split__card { aspect-ratio: 21 / 9; }
.yzhp-split--two .yzhp-split__card { aspect-ratio: 4 / 3; }

.yzhp-split__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

/* Two classes on purpose: Elementor's `.elementor img { height: auto }` (0,1,1) beat a single
   class, so the photo kept its own 3:2 height — 57px short of a 4:3 card (a dark strip under it)
   and, in the taller poster band, 337px too tall and pinned to the top instead of centred. */
.yzhp-split__media .yzhp-split__img,
.yzhp-poster__media .yzhp-poster__img {
	height: 100%;
	max-width: none;
	object-position: center;
}

.yzhp-split__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--mo-ease-out, ease);
}

.yzhp-split__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(12, 11, 10, 0.74) 0%, rgba(12, 11, 10, 0.2) 45%, rgba(12, 11, 10, 0) 72%);
}

.yzhp-split__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	padding: clamp(1.25rem, 2.6vw, 2.5rem);
}

.yzhp-split__name {
	font-family: var(--yz-font-display, inherit);
	font-size: clamp(1.625rem, 2.8vw, 2.625rem);
	font-weight: 600;
	line-height: 1.05;
}

/* Drawn like the site's ghost button (the hero's CTA) — a span, because the whole card is the link. */
.yzhp-split__cta {
	display: inline-block;
	padding: 0.7rem 1.6rem;
	border: 1px solid currentColor;
	font-family: var(--yz-font-body, inherit);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
}

@media (hover: hover) {
	.yzhp-split__card:hover .yzhp-split__img { transform: scale(1.04); }
}

/* Astra's `a:hover { color: var(--ast-global-color-1) }` (0,1,1) outranks the card's own colour and
   turned the stone name blue — pin the ivory through hover and focus. */
.yzhp-split__card:hover,
.yzhp-split__card:focus {
	color: var(--yz-ivory, #f5f1e9);
}

.yzhp-split__card:hover .yzhp-split__cta,
.yzhp-split__card:focus-visible .yzhp-split__cta {
	background: var(--yz-ivory, #f5f1e9);
	color: var(--yz-ink, #141210);
}

/* Inset: the cards touch each other and the page edge, where an outset ring would be clipped. */
.yzhp-split__card:focus-visible {
	outline: 2px solid var(--yz-ivory, #fff);
	outline-offset: -6px;
}

@media (max-width: 767px) {
	.yzhp-split,
	.yzhp-split--two { grid-template-columns: minmax(0, 1fr); }

	.yzhp-split__card,
	.yzhp-split--one .yzhp-split__card { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
	.yzhp-split__img { transition: none; }
}

/* ---------------------------------------------------------------- featured row (FeatureRowWidget)

   commafootball's "TRENDING — Crowd favourites." band: the label in a narrow column at the start,
   the rail running to the page edge beside it. Below 992px the label sits above the rail, with its
   "View all" on the same line. */
.yzhp-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

.yzhp-feature__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1rem;
	padding: 0.5rem var(--yzhp-gutter, clamp(16px, 3.6vw, 52px)) 1rem;
}

/* Two classes deep: the theme's `.yazan h2` (0,1,1) would otherwise set the size and colour. */
.yzhp-feature .yzhp-feature__title {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--yz-font-display, inherit);
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--yz-text, #141210);
}

.yzhp-feature__intro {
	order: 3;
	flex-basis: 100%;
	margin: 0;
	font-size: 0.875rem;
	color: var(--yz-text-muted, #6e6a63);
}

.yzhp-feature__link {
	font-family: var(--yz-font-body, inherit);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yz-text, #141210);
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 1px;
}

.yzhp-feature__link:hover {
	color: var(--yz-accent, currentColor);
}

@media (min-width: 992px) {
	.yzhp-feature:not(.yzhp-feature--headless) {
		grid-template-columns: clamp(13rem, 22vw, 21rem) minmax(0, 1fr);
	}

	.yzhp-feature__head {
		flex-direction: column;
		align-items: flex-start;
		padding-block: 0;
		padding-inline-end: 0;
	}

	.yzhp-feature__intro {
		order: 0;
		flex-basis: auto;
	}

	.yzhp-feature__link {
		margin-top: 0.75rem;
	}
}

.yzhp-feature__empty,
.yzhp-poster__empty {
	padding: 2rem;
	text-align: center;
	opacity: 0.7;
}

/* ---------------------------------------------------------------- poster band (PosterWidget)

   commafootball's campaign banner: a photograph edge to edge, nearly a screen tall, the words
   centred low on it, and a small light button. */
.yzhp-poster {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* max(…, 42vw): on a short, wide window the band keeps enough height for a 3:2 photo's centre
	   (the ring) to stay whole and centred — see .yz-bigimage in the theme's home.css. */
	min-height: clamp(26rem, max(88vh, 42vw), 53rem);
	overflow: hidden;
	isolation: isolate;
	background: var(--yz-ink, #141210);
	color: var(--yz-ivory, #f5f1e9);
	text-decoration: none;
}

.yzhp-poster__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.yzhp-poster__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 1.6s var(--mo-ease-out, ease);
}

.yzhp-poster__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, rgba(12, 11, 10, 0.62) 0%, rgba(12, 11, 10, 0.18) 40%, rgba(12, 11, 10, 0) 65%);
}

.yzhp-poster__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	max-width: 44rem;
	padding: 0 1rem clamp(2.5rem, 7vh, 4.5rem);
	text-align: center;
}

.yzhp-poster__title {
	font-family: var(--yz-font-display, inherit);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-weight: 600;
	line-height: 1.05;
}

.yzhp-poster__intro {
	font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
	opacity: 0.92;
}

.yzhp-poster__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.5rem;
	padding: 0.75rem 1.4rem;
	background: var(--yz-ivory, #f5f1e9);
	color: var(--yz-ink, #141210);
	font-family: var(--yz-font-body, inherit);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.yzhp-poster__cta svg {
	transition: transform 0.3s ease;
}

@media (hover: hover) {
	a.yzhp-poster:hover .yzhp-poster__img { transform: scale(1.03); }
	a.yzhp-poster:hover .yzhp-poster__cta svg { transform: translateX(3px); }
}

/* Astra's `a:hover { color: var(--ast-global-color-1) }` (0,1,1) turned the title and intro blue. */
a.yzhp-poster:hover,
a.yzhp-poster:focus {
	color: var(--yz-ivory, #f5f1e9);
}

[dir="rtl"] .yzhp-poster__cta svg { transform: scaleX(-1); }

a.yzhp-poster:focus-visible {
	outline: 2px solid var(--yz-ivory, #fff);
	outline-offset: -6px;
}

@media (max-width: 767px) {
	.yzhp-poster { min-height: clamp(24rem, 75vh, 40rem); }
}

@media (prefers-reduced-motion: reduce) {
	.yzhp-poster__img,
	.yzhp-poster__cta svg { transition: none; }
}

/* ---------------------------------------------------------------- banner */

.yzhp-banner {
	position: relative;
	display: grid;
	align-items: center;
	overflow: hidden;
	/* No horizontal padding of its own: the image is full-bleed and .yz-container inside handles
	   the text gutter, exactly as the theme's own bands do. */
	padding-inline: 0;
}

.yzhp-banner--short  { min-height: clamp(14rem, 26vw, 20rem); }
.yzhp-banner--medium { min-height: clamp(20rem, 38vw, 30rem); }
.yzhp-banner--tall   { min-height: clamp(26rem, 52vw, 40rem); }
/* svh, not vh: on mobile Safari `100vh` is the address-bar-hidden height, so a full-height banner
   is taller than the screen until the user scrolls. */
.yzhp-banner--full   { min-height: 100svh; }

.yzhp-banner__media,
.yzhp-banner__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The focal point of a ring photograph is nearer the top than the middle. */
	object-position: center 40%;
}

.yzhp-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / var(--yzhp-banner-overlay, 0.35));
	pointer-events: none;
}

.yzhp-banner__inner {
	position: relative;
	z-index: 1;
	display: flex;
}

/* Logical properties throughout, so the Arabic homepage mirrors without a second rule set. */
.yzhp-banner--start  .yzhp-banner__inner { justify-content: flex-start; }
.yzhp-banner--center .yzhp-banner__inner { justify-content: center; }
.yzhp-banner--end    .yzhp-banner__inner { justify-content: flex-end; }

.yzhp-banner__copy {
	max-width: 34rem;
	color: var(--yz-ivory, #f4f1ea);
}

.yzhp-banner--center .yzhp-banner__copy {
	text-align: center;
}

.yzhp-banner__eyebrow {
	margin: 0 0 0.75rem;
}

.yzhp-banner__heading {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.1;
	color: inherit;
}

.yzhp-banner__text {
	margin: 0.85rem 0 0;
	font-size: clamp(0.95rem, 1.4vw, 1.1rem);
	line-height: 1.7;
	opacity: 0.9;
}

.yzhp-banner__cta {
	margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
}

/* A banner is one photograph with words on it; on a phone the words come first and the height
   shrinks so the section does not become a full screen of dimmed image. */
@media (max-width: 599px) {
	.yzhp-banner--tall,
	.yzhp-banner--full {
		min-height: clamp(20rem, 70svh, 28rem);
	}

	.yzhp-banner__copy {
		max-width: none;
	}
}

/* ---------------------------------------------------------------- custom content */

.yzhp-custom__inner {
	margin-inline: auto;
}

.yzhp-custom--narrow .yzhp-custom__inner {
	/* ~68 characters at the theme's body size. Prose at full container width is a 1400px measure,
	   which is where readers lose their place returning to the next line. */
	max-width: 42rem;
}

.yzhp-custom--wide .yzhp-custom__inner {
	max-width: 62rem;
}

.yzhp-custom--center .yzhp-custom__inner {
	text-align: center;
}

.yzhp-custom__heading {
	margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
}

.yzhp-custom__body > :first-child { margin-block-start: 0; }
.yzhp-custom__body > :last-child  { margin-block-end: 0; }

.yzhp-custom__body p,
.yzhp-custom__body ul,
.yzhp-custom__body ol {
	line-height: 1.8;
}

/* Lists keep their markers on the reading-start side under both directions. */
.yzhp-custom__body ul,
.yzhp-custom__body ol {
	padding-inline-start: 1.25rem;
}

/* ---------------------------------------------------------------- elementor sections */

/*
 * The wrapper YAZAN puts around an Elementor-designed section.
 *
 * Deliberately almost empty. Everything INSIDE belongs to Elementor — that is the whole division of
 * labour — so this rule exists only to give the band the same full-bleed footing as every other
 * section and to stop Elementor's own container padding from being doubled by the theme's.
 */
.yzhp-elementor {
	padding-inline: 0;
}

.yzhp-elementor > .elementor {
	width: 100%;
}

/* Category cards, for the Elementor widget. The homepage's own collection grid is a theme template
   with its own markup; this is the same idea rebuilt on the tokens, for use inside a builder
   layout where the theme's band is not available. */
.yzhp-elcards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.yzhp-elcard {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	/* A stable box before the image loads, so a row of cards does not reflow the page under the
	   reader's cursor as each thumbnail arrives. */
	aspect-ratio: 3 / 4;
	background: var(--yz-ink-soft, #1c1a17);
}

.yzhp-elcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.yzhp-elcard:hover .yzhp-elcard__img,
.yzhp-elcard:focus-visible .yzhp-elcard__img {
	transform: scale(1.04);
}

.yzhp-elcard__name {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 1rem;
	color: var(--yz-ivory, #f4f1ea);
	background: linear-gradient(to top, rgb(0 0 0 / 0.65), transparent);
	font-size: 0.95rem;
}

/* These cards sit on photographs, where the browser's default focus ring is frequently invisible. */
.yzhp-elcard:focus-visible {
	outline: 2px solid var(--yz-agate, #8c2f24);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.yzhp-elcard__img {
		transition: none;
	}

	.yzhp-elcard:hover .yzhp-elcard__img,
	.yzhp-elcard:focus-visible .yzhp-elcard__img {
		transform: none;
	}
}

@media (max-width: 991px) {
	.yzhp-elcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.yzhp-elcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- per-section design */

/*
 * The wrapper exists only for sections that have design of their own. Everything it does is driven
 * by custom properties written into a scoped rule, so this file never needs to know what any
 * particular section chose.
 */
.yzhp-sec {
	display: block;
	padding-block: var(--yzhp-pt, 0) var(--yzhp-pb, 0);
}

.yzhp-sec.has-bg-image {
	position: relative;
}

.yzhp-sec.has-bg-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / var(--yzhp-overlay, 0.4));
	pointer-events: none;
}

.yzhp-sec.has-bg-image > * {
	position: relative;
}

/* ---------------------------------------------------------------- entrance */

/*
 * The animation is applied by a class the observer adds, NOT by the presence of the attribute —
 * so if the script never runs, the section is simply visible. An entrance animation must never be
 * the reason content cannot be read.
 */
.yzhp-anim {
	--yzhp-anim-duration: 600ms;
	--yzhp-anim-delay: 0ms;
}

.yzhp-anim.is-armed {
	opacity: 0;
	will-change: opacity, transform;
}

.yzhp-anim.is-armed[data-yzhp-anim='rise'] {
	transform: translateY(1.5rem);
}

.yzhp-anim.is-armed[data-yzhp-anim='scale'] {
	transform: scale(0.97);
}

.yzhp-anim.is-inview {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--yzhp-anim-duration) ease var(--yzhp-anim-delay),
		transform var(--yzhp-anim-duration) ease var(--yzhp-anim-delay);
}

@media (prefers-reduced-motion: reduce) {
	.yzhp-anim.is-armed,
	.yzhp-anim.is-inview {
		opacity: 1;
		transform: none;
		transition: none;
	}
}