/* ==========================================================================
   11.11 SALE HERO + PRODUCT STRIP
   Markup: template-parts/promo/sale-1111-hero.php (homepage only, while the
   11.11 offer is live for everyone). Everything is scoped to .u1111 /
   .u1111-strip and resets the theme's global h1/h2/p/ul/li/a rules.
   Colours: blue #009DFF, black #000, white #FFF, light grey #F7F7F9.
   ========================================================================== */

.u1111,
.u1111-strip {
	--u-blue: #009DFF;
	--u-ink: #000;
	--u-grey: #F7F7F9;
	--u-bg: #04070d;
	--u-font: "Jost", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-family: var(--u-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.u1111 *,
.u1111-strip * {
	box-sizing: border-box;
	text-shadow: none;
}
/* The theme floats some headings/paragraphs on phones; keep ours in normal flow */
.u1111 h1,
.u1111 h2,
.u1111 p,
.u1111 ul,
.u1111-strip h2,
.u1111-strip p,
.u1111-strip ul {
	float: none;
	width: auto;
}

/* ---------- Hero frame ---------- */
.u1111 {
	/* topbar + header are fixed over the top of the page */
	--u-hdr: calc(var(--h-topbar, 36px) + var(--h-header, 56px));
	--u-h: clamp(560px, min(57.875vw, 100vh - var(--u-hdr)), 880px);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: calc(var(--u-hdr) + var(--u-h));
	padding-top: var(--u-hdr);
	background: var(--u-bg);
	color: #fff;
}
@supports (height: 100svh) {
	.u1111 { --u-h: clamp(560px, min(57.875vw, 100svh - var(--u-hdr)), 880px); }
}

/* Photo: below the header, full height of the hero, pinned right.
   Wide screens: the photo is narrower than the hero and fades in from the left.
   Narrower screens: the left side of the photo is cropped, the runner stays. */
.u1111__media {
	position: absolute;
	top: var(--u-hdr);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
	overflow: hidden;
}
.u1111__media picture { display: block; }
.u1111 .u1111__img {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
	margin: 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%), linear-gradient(to right, transparent 0, #000 24%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0, #000 14%), linear-gradient(to right, transparent 0, #000 24%);
	mask-composite: intersect;
}

/* Dark wash behind the copy so blue and white text stay readable */
.u1111__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(4, 7, 13, .94) 0%, rgba(4, 7, 13, .86) 30%, rgba(4, 7, 13, .5) 47%, rgba(4, 7, 13, 0) 62%),
		linear-gradient(0deg, rgba(4, 7, 13, .55) 0%, rgba(4, 7, 13, 0) 30%);
}

.u1111__inner {
	position: relative;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: var(--container, 1440px);
	margin: 0 auto;
	padding: clamp(36px, 5vh, 64px) var(--gutter-d, 40px);
}
.u1111__copy { max-width: 600px; }

/* ---------- Copy ---------- */
.u1111 p { max-width: none; }

.u1111 .u1111__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font: 500 13px/1.2 var(--u-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
}
.u1111 .u1111__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--u-blue);
}

.u1111 .u1111__title {
	display: block;
	margin: 0 0 30px -.05em;
	padding: 0;
	font: 600 clamp(104px, 14vw, 216px)/.8 var(--u-font);
	letter-spacing: -.04em;
	text-align: left;
	text-transform: none;
	color: var(--u-blue);
	text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.u1111 .u1111__stats {
	display: flex;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}
.u1111 .u1111__stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0 32px;
	border-left: 1px solid rgba(255, 255, 255, .28);
	line-height: 1.2;
	list-style: none;
}
.u1111 .u1111__stat:first-child { padding-left: 0; border-left: 0; }
.u1111 .u1111__pct {
	font: 600 clamp(44px, 4.4vw, 64px)/1 var(--u-font);
	letter-spacing: -.02em;
	color: #fff;
	white-space: nowrap;
}
.u1111 .u1111__stat--extra .u1111__pct { color: var(--u-blue); }
.u1111 .u1111__lbl {
	max-width: 19ch;
	font: 400 15px/1.35 var(--u-font);
	color: rgba(255, 255, 255, .9);
	text-wrap: balance;
}

.u1111 .u1111__sub {
	margin: 0 0 16px;
	font: 500 clamp(17px, 1.45vw, 20px)/1.4 var(--u-font);
	color: #fff;
	text-wrap: pretty;
}

.u1111 .u1111__hk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 28px;
	padding: 7px 16px 7px 12px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 999px;
	font: 500 14px/1.3 var(--u-font);
	letter-spacing: .01em;
	color: #fff;
}
.u1111 .u1111__hk::before {
	content: "i";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	color: #000;
	font: 700 12px/1 Georgia, "Times New Roman", serif;
	font-style: italic;
}

/* ---------- Buttons ---------- */
.u1111 .u1111__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}
.u1111 a.u1111__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	margin: 0;
	padding: 0 calc(28px - .09em) 0 calc(28px + .09em);
	border: 2px solid #fff;
	border-radius: 999px;
	font: 600 13px/1 var(--u-font);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* On the photo the email's black pill would vanish, so the primary is inverted: white with black text */
.u1111 a.u1111__btn--primary { background: #fff; color: #000; }
.u1111 a.u1111__btn--primary:hover,
.u1111 a.u1111__btn--primary:focus-visible { background: var(--u-blue); border-color: var(--u-blue); color: #000; }
.u1111 a.u1111__btn--ghost { background: transparent; color: #fff; }
.u1111 a.u1111__btn--ghost:hover,
.u1111 a.u1111__btn--ghost:focus-visible { background: #fff; color: #000; }
.u1111 a.u1111__btn:focus-visible { outline: 3px solid var(--u-blue); outline-offset: 3px; }

.u1111 .u1111__fine {
	max-width: 560px;
	margin: 30px 0 0;
	font: 400 12px/1.55 var(--u-font);
	color: rgba(255, 255, 255, .76);
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.u1111__inner { padding-left: var(--gutter-m, 24px); padding-right: var(--gutter-m, 24px); }
	.u1111__copy { max-width: min(600px, 58%); }
	.u1111 .u1111__stat { padding: 0 22px; }
	.u1111__shade {
		background:
			linear-gradient(90deg, rgba(4, 7, 13, .94) 0%, rgba(4, 7, 13, .86) 40%, rgba(4, 7, 13, .45) 58%, rgba(4, 7, 13, 0) 72%),
			linear-gradient(0deg, rgba(4, 7, 13, .55) 0%, rgba(4, 7, 13, 0) 30%);
	}
}

/* ---------- Phone: photo band on top, copy below ---------- */
@media (max-width: 767px) {
	.u1111 {
		display: block;
		min-height: 0;
	}
	.u1111__media {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		z-index: 0;
		aspect-ratio: 860 / 796;
	}
	.u1111 .u1111__img {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 0;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 88%, transparent 100%);
		-webkit-mask-composite: source-over;
		mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 88%, transparent 100%);
		mask-composite: add;
	}
	.u1111__shade { display: none; }
	.u1111__inner {
		z-index: 1;
		display: block;
		margin-top: -10px;
		padding: 0 var(--gutter-m, 24px) 44px;
	}
	.u1111__copy { max-width: none; }

	.u1111 .u1111__eyebrow { margin-bottom: 14px; font-size: 12px; }
	.u1111 .u1111__title { margin-bottom: 22px; font-size: 104px; }

	.u1111 .u1111__stats { flex-direction: column; margin-bottom: 22px; }
	.u1111 .u1111__stat {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding: 14px 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .18);
	}
	.u1111 .u1111__stat:first-child { padding-top: 0; border-top: 0; }
	.u1111 .u1111__pct { min-width: 2.55em; font-size: 46px; }
	.u1111 .u1111__lbl { max-width: none; font-size: 16px; }

	.u1111 .u1111__sub { font-size: 17px; }
	.u1111 .u1111__hk { margin-bottom: 24px; }

	.u1111 .u1111__ctas { flex-direction: column; }
	.u1111 a.u1111__btn { width: 100%; }

	.u1111 .u1111__fine { margin-top: 24px; }
}

/* ==========================================================================
   Product strip
   ========================================================================== */
.u1111-strip {
	position: relative;
	padding: 56px 0 64px;
	background: #fff;
	color: var(--u-ink);
}
.u1111-strip__wrap {
	max-width: var(--container, 1440px);
	margin: 0 auto;
	padding: 0 var(--gutter-d, 40px);
}
.u1111-strip p { max-width: none; }

.u1111-strip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 32px;
	margin-bottom: 26px;
}
.u1111-strip .u1111-strip__eyebrow {
	margin: 0 0 8px;
	font: 500 12px/1.2 var(--u-font);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #5c5f66;
}
.u1111-strip .u1111-strip__title {
	display: block;
	margin: 0;
	padding: 0;
	font: 600 clamp(28px, 2.6vw, 38px)/1.1 var(--u-font);
	letter-spacing: -.01em;
	text-align: left;
	text-transform: none;
	color: var(--u-ink);
}
.u1111-strip .u1111-strip__key {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 14px 0 0;
	font: 400 14px/1.4 var(--u-font);
	color: #2b2d31;
}
.u1111-strip__head > div:first-child { flex: 1 1 280px; min-width: 0; }
.u1111-strip__key > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }

.u1111-strip__nav { display: flex; align-items: center; gap: 8px; }
.u1111-strip a.u1111-strip__all {
	margin-right: 10px;
	font: 600 13px/1 var(--u-font);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--u-ink);
	border-bottom: 2px solid var(--u-ink);
	padding-bottom: 4px;
}
.u1111-strip a.u1111-strip__all:hover { color: var(--u-blue); border-color: var(--u-blue); }
.u1111-strip .u1111-strip__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--u-ink);
	border-radius: 50%;
	background: #fff;
	color: var(--u-ink);
	font: 500 18px/1 var(--u-font);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.u1111-strip .u1111-strip__arrow:hover:not(:disabled) { background: var(--u-ink); color: #fff; }
.u1111-strip .u1111-strip__arrow:disabled { opacity: .25; cursor: default; }
.u1111-strip .u1111-strip__arrow:focus-visible,
.u1111-strip a:focus-visible { outline: 3px solid var(--u-blue); outline-offset: 3px; }

/* position: relative on the track and cards keeps WooCommerce's absolutely
   positioned screen-reader price labels inside the scroller (else they widen the page on phones) */
.u1111-strip .u1111-strip__track {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 4 * 16px) / 5);
	gap: 16px;
	margin: 0;
	padding: 0 0 18px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.u1111-strip .u1111-card {
	position: relative;
	margin: 0;
	padding: 0;
	line-height: normal;
	list-style: none;
	scroll-snap-align: start;
}
.u1111-strip a.u1111-card__link { display: block; color: var(--u-ink); text-decoration: none; }
.u1111-strip .u1111-card__media {
	position: relative;
	display: block;
	aspect-ratio: 7 / 10;
	overflow: hidden;
	border-radius: 6px;
	background: var(--u-grey);
}
.u1111-strip .u1111-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform .5s ease;
}
.u1111-strip a.u1111-card__link:hover .u1111-card__media img { transform: scale(1.03); }
.u1111-strip .u1111-card__media .u1111-badge { position: absolute; top: 10px; left: 10px; }
.u1111-strip .u1111-card__name {
	display: block;
	margin: 12px 0 4px;
	font: 500 13px/1.35 var(--u-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--u-ink);
}
.u1111-strip .u1111-card__price {
	display: block;
	font: 400 14px/1.4 var(--u-font);
	color: var(--u-ink);
}
.u1111-strip .u1111-card__price del { color: #74777e; font-weight: 400; margin-right: 6px; }
.u1111-strip .u1111-card__price ins { color: var(--u-ink); font-weight: 600; text-decoration: none; background: none; }

/* Discount badges: black pill, blue for the stacked extra */
.u1111-strip .u1111-badge {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--u-ink);
	color: #fff;
	font: 600 12px/1 var(--u-font);
	letter-spacing: .03em;
	white-space: nowrap;
}
.u1111-strip .u1111-badge.is-extra { background: var(--u-blue); color: #000; }

@media (max-width: 1199px) {
	.u1111-strip .u1111-strip__track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
}
@media (max-width: 1023px) {
	.u1111-strip__wrap { padding: 0 var(--gutter-m, 24px); }
	.u1111-strip .u1111-strip__track { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; }
}
@media (max-width: 767px) {
	.u1111-strip { padding: 40px 0 48px; }
	.u1111-strip__wrap { padding: 0; }
	.u1111-strip__head { padding: 0 var(--gutter-m, 24px); margin-bottom: 20px; }
	.u1111-strip .u1111-strip__arrow { display: none; }
	.u1111-strip .u1111-strip__track {
		grid-auto-columns: 46%;
		gap: 12px;
		padding: 0 var(--gutter-m, 24px) 18px;
		scroll-padding: 0 var(--gutter-m, 24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.u1111 a.u1111__btn,
	.u1111-strip .u1111-card__media img { transition: none; }
	.u1111-strip a.u1111-card__link:hover .u1111-card__media img { transform: none; }
}