/*!
 * WPMobileTabBar – Hero slider
 * Zero libraries. Transform/opacity-only animation (compositor friendly),
 * logical properties for perfect RTL, and full prefers-reduced-motion support.
 */

.wmtb-hero {
	--hero-accent: var(--wmtb-accent, #6d5efc);
	--hero-accent-2: var(--wmtb-accent-2, var(--hero-accent));
	--hero-radius: calc(var(--wmtb-radius, 22px) + 6px);
	--hero-container: var(--wmtb-container, 1280px);
	position: relative;
	font-family: var(--wmtb-hero-font, inherit);
	overflow: hidden;
	isolation: isolate;
	contain: layout style paint;
	direction: ltr; /* media box; content direction set per-site below */
}

.wmtb-hero *,
.wmtb-hero *::before,
.wmtb-hero *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Layouts: full / wide / card / fit / custom
   ========================================================================== */

.wmtb-hero--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline-start: calc(50% - 50vw);
}

/* At body level a plain block already spans the viewport – skipping the
   100vw trick removes the scrollbar-width overflow entirely (that overflow
   made the page pannable and the fixed bottom bar drift off-edge). */
.wmtb-hero--at-root.wmtb-hero--bleed {
	width: auto;
	max-width: none;
	margin-inline: 0;
}

/* full = edge-to-edge (bleed class added by PHP when full_bleed is on) */
.wmtb-hero--layout-full:not(.wmtb-hero--bleed) {
	width: 100%;
}

/* wide = theme container width */
.wmtb-hero--layout-wide {
	width: 100%;
	max-width: var(--wmtb-container, 1280px);
	margin-inline: auto;
}

/* card = floating rounded panel */
.wmtb-hero--layout-card {
	width: 100%;
	max-width: var(--wmtb-container, 1280px);
	margin-inline: auto;
	margin-block: max(12px, var(--wmtb-hero-vm, 0px));
	border-radius: var(--wmtb-hero-rc, 24px);
	overflow: hidden;
}

/* fit = fill the screen height (JS trims the sticky-bar chrome) */
.wmtb-hero--layout-fit .wmtb-hero__viewport {
	height: calc(100vh - var(--wmtb-hero-chrome, 0px));
	height: calc(100svh - var(--wmtb-hero-chrome, 0px));
}

/* custom = user-defined width, margins and radius */
.wmtb-hero--layout-custom {
	width: 100%;
	max-width: var(--wmtb-hero-maxw, 1280px);
	margin-inline: auto;
	margin-block: var(--wmtb-hero-vm, 0px);
	border-radius: var(--wmtb-hero-rc, 24px);
	overflow: hidden;
}

/* ==========================================================================
   Effects: shadow / glow / 3D / text shadow / image filters
   ========================================================================== */

.wmtb-hero--sh-soft { box-shadow: 0 10px 30px rgba(10, 12, 24, .10); }
.wmtb-hero--sh-medium { box-shadow: 0 18px 44px rgba(10, 12, 24, .16); }
.wmtb-hero--sh-strong { box-shadow: 0 28px 70px rgba(10, 12, 24, .26); }

.wmtb-hero--glow-soft {
	box-shadow: 0 0 42px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .22);
}

.wmtb-hero--glow-strong {
	box-shadow:
		0 0 60px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .38),
		0 0 140px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .18);
}

/* shadow + glow combine cleanly */
.wmtb-hero--sh-soft.wmtb-hero--glow-soft,
.wmtb-hero--sh-medium.wmtb-hero--glow-soft,
.wmtb-hero--sh-strong.wmtb-hero--glow-soft,
.wmtb-hero--sh-soft.wmtb-hero--glow-strong,
.wmtb-hero--sh-medium.wmtb-hero--glow-strong,
.wmtb-hero--sh-strong.wmtb-hero--glow-strong {
	box-shadow:
		0 18px 44px rgba(10, 12, 24, .16),
		0 0 60px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .30);
}

/* 3D tilt: the viewport is the transformed layer. `contain: paint` on the
   base rule would clip the rotated corners, so relax it here. */
.wmtb-hero--3d-tilt {
	perspective: 1100px;
	overflow: visible;
	contain: layout style;
}

.wmtb-hero--3d-tilt .wmtb-hero__viewport {
	transform-style: preserve-3d;
	transition: transform .25s ease-out;
	border-radius: inherit;
	overflow: hidden;
}

/* 3D depth: media and content drift in opposite directions */
.wmtb-hero--3d-depth .wmtb-hero__media {
	transform: translate3d(calc(var(--wmtb-depth-x, 0px) * -0.6), calc(var(--wmtb-depth-y, 0px) * -0.6), 0) scale(1.04);
	transition: transform .3s ease-out;
}

.wmtb-hero--3d-depth .wmtb-hero__content {
	transform: translate3d(var(--wmtb-depth-x, 0px), var(--wmtb-depth-y, 0px), 0);
	transition: transform .3s ease-out;
}

/* title/text shadows for legibility over busy media */
.wmtb-hero--ts-soft .wmtb-hero__title,
.wmtb-hero--ts-soft .wmtb-hero__sub {
	text-shadow: 0 2px 14px rgba(6, 8, 14, .35);
}

.wmtb-hero--ts-strong .wmtb-hero__title,
.wmtb-hero--ts-strong .wmtb-hero__sub {
	text-shadow: 0 3px 8px rgba(6, 8, 14, .55), 0 10px 34px rgba(6, 8, 14, .35);
}

.wmtb-hero--ts-none .wmtb-hero__title,
.wmtb-hero--ts-none .wmtb-hero__sub {
	text-shadow: none;
}

/* image filters */
.wmtb-hero--ifx-vivid .wmtb-hero__img,
.wmtb-hero--ifx-vivid .wmtb-hero__video { filter: saturate(1.28) contrast(1.06); }

.wmtb-hero--ifx-soft .wmtb-hero__img,
.wmtb-hero--ifx-soft .wmtb-hero__video { filter: brightness(1.06) saturate(.92) contrast(.96); }

.wmtb-hero--ifx-mono .wmtb-hero__img,
.wmtb-hero--ifx-mono .wmtb-hero__video { filter: grayscale(1) contrast(1.05); }

.wmtb-hero--ifx-vintage .wmtb-hero__img,
.wmtb-hero--ifx-vintage .wmtb-hero__video { filter: sepia(.42) saturate(1.1) contrast(.95) brightness(1.03); }

.wmtb-hero--ifx-drama .wmtb-hero__img,
.wmtb-hero--ifx-drama .wmtb-hero__video { filter: contrast(1.18) saturate(1.1) brightness(.92); }

/* ==========================================================================
   Viewport + slides
   ========================================================================== */

.wmtb-hero__viewport {
	position: relative;
	height: var(--wmtb-hero-hd, 460px);
}

.wmtb-hero__slide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .7s ease, visibility .7s, transform .7s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1));
	will-change: opacity, transform;
}

.wmtb-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

/* device visibility (mobile < bp ≤ tablet ≤ 1024 < desktop) */
@media (max-width: 1024px) {
	.wmtb-hero__viewport { height: var(--wmtb-hero-ht, 400px); }
	.wmtb-hero__slide:not([data-devices~="tablet"]) { display: none !important; }
}

@media (max-width: 782px) {
	.wmtb-hero__viewport { height: var(--wmtb-hero-hm, 340px); }
	.wmtb-hero__slide:not([data-devices~="mobile"]) { display: none !important; }
}

@media (min-width: 1025px) {
	.wmtb-hero__slide:not([data-devices~="desktop"]) { display: none !important; }
}

/* transitions */
.wmtb-hero--slide .wmtb-hero__slide {
	transform: translateX(6%);
}

[dir="rtl"] .wmtb-hero--slide .wmtb-hero__slide,
.wmtb-hero--slide[data-dir="rtl"] .wmtb-hero__slide {
	transform: translateX(-6%);
}

.wmtb-hero--slide .wmtb-hero__slide.is-active {
	transform: translateX(0);
}

.wmtb-hero--zoom .wmtb-hero__img,
.wmtb-hero--zoom .wmtb-hero__video {
	transform: scale(1.12);
	transition: transform 6s linear;
}

.wmtb-hero--zoom .wmtb-hero__slide.is-active .wmtb-hero__img,
.wmtb-hero--zoom .wmtb-hero__slide.is-active .wmtb-hero__video {
	transform: scale(1);
}

/* ==========================================================================
   Media
   ========================================================================== */

.wmtb-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--wmtb-hero-mediabg, linear-gradient(120deg, rgba(var(--wmtb-accent-rgb, 109, 94, 252), .18), rgba(20, 22, 31, .08)));
}

.wmtb-hero__img,
.wmtb-hero__video {
	width: 100%;
	height: 100%;
	object-fit: var(--wmtb-hero-fit, cover);
	display: block;
}

.wmtb-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(8, 10, 18, calc(.72 * var(--wmtb-hero-scrim, .4))) 0%, rgba(8, 10, 18, calc(.28 * var(--wmtb-hero-scrim, .4))) 46%, rgba(8, 10, 18, calc(.08 * var(--wmtb-hero-scrim, .4))) 100%),
		linear-gradient(to right, rgba(8, 10, 18, calc(.4 * var(--wmtb-hero-scrim, .4))) 0%, transparent 60%);
}

.wmtb-hero__slide[data-theme="light"] { color: #14161f; }
.wmtb-hero__slide[data-theme="dark"] { color: #fff; }

/* Per-slide / global font override (variables resolve at slide level so a
   slide can carry its own --wmtb-hero-font). */
.wmtb-hero__slide {
	font-family: var(--wmtb-hero-font, inherit);
}

/* Optional text colours: empty variables fall back to the theme colour. */
.wmtb-hero__title { color: var(--wmtb-hero-title-c, inherit); }
.wmtb-hero__sub,
.wmtb-hero__text { color: var(--wmtb-hero-text-c, inherit); }

/* ==========================================================================
   Content
   ========================================================================== */

.wmtb-hero__content {
	position: relative;
	z-index: 1;
	align-self: center;
	justify-self: start;
	width: 100%;
	max-width: var(--hero-container);
	margin-inline: auto;
	padding: 24px clamp(20px, 6vw, 64px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: start;
}

[dir="rtl"] .wmtb-hero__content { direction: rtl; }

.wmtb-hero--align-center .wmtb-hero__content,
.wmtb-hero__slide.wmtb-hero--a-center .wmtb-hero__content {
	align-items: center;
	text-align: center;
}

.wmtb-hero--align-end .wmtb-hero__content,
.wmtb-hero__slide.wmtb-hero--a-end .wmtb-hero__content {
	align-items: flex-end;
	text-align: end;
}

.wmtb-hero--align-start .wmtb-hero__content,
.wmtb-hero__slide.wmtb-hero--a-start .wmtb-hero__content {
	align-items: flex-start;
	text-align: start;
}

.wmtb-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 13px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--hero-accent), var(--hero-accent-2));
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .5px;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .4);
	width: max-content;
}

.wmtb-hero__sub {
	margin: 0;
	font-size: calc(clamp(12px, 1.4vw, 14.5px) * var(--wmtb-hero-txtsc, 1));
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	opacity: .82;
}

.wmtb-hero__title {
	margin: 0;
	font-size: clamp(24px, var(--wmtb-hero-title, 44px), 84px);
	line-height: 1.12;
	font-weight: 850;
	letter-spacing: var(--wmtb-hero-ls, -.02em);
	max-width: 18ch;
	text-wrap: balance;
}

.wmtb-hero__text {
	margin: 0;
	font-size: calc(clamp(13px, 1.25vw, 15.5px) * var(--wmtb-hero-txtsc, 1));
	line-height: 1.75;
	opacity: .88;
	max-width: 46ch;
}

/* product meta chips */
.wmtb-hero__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.wmtb-hero__price {
	display: inline-flex;
	align-items: baseline;
	padding: 6px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 16px;
	font-weight: 800;
}

.wmtb-hero__slide[data-theme="light"] .wmtb-hero__price {
	background: rgba(20, 22, 31, .06);
	border-color: rgba(20, 22, 31, .12);
}

.wmtb-hero__price del { opacity: .6; font-weight: 500; font-size: 12.5px; margin-inline-end: 6px; }
.wmtb-hero__price ins { text-decoration: none; }

.wmtb-hero__rating {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	font-size: 13px;
	color: rgba(255, 255, 255, .42);
}

.wmtb-hero__slide[data-theme="light"] .wmtb-hero__rating { color: rgba(20, 22, 31, .3); }

.wmtb-hero__rating .is-on { color: #f5b301; }
.wmtb-hero__rating em { font-style: normal; font-weight: 700; margin-inline-start: 6px; color: inherit; opacity: .9; }

.wmtb-hero__stock {
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(18, 184, 134, .18);
	border: 1px solid rgba(18, 184, 134, .4);
	color: #0ca678;
	font-size: 11.5px;
	font-weight: 700;
}

.wmtb-hero__slide[data-theme="dark"] .wmtb-hero__stock { color: #38d9a9; }

/* CTA buttons */
.wmtb-hero__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.wmtb-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: calc(50px * var(--wmtb-hero-btnsc, 1));
	padding: 0 calc(28px * var(--wmtb-hero-btnsc, 1));
	border-radius: var(--wmtb-hero-btnr, 16px);
	font: inherit;
	font-size: calc(15px * var(--wmtb-hero-btnsc, 1));
	font-weight: 750;
	text-decoration: none !important;
	cursor: pointer;
	border: 2px solid transparent;
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, background .22s ease, color .22s ease;
}

.wmtb-hero__btn:active { transform: scale(.97); }

.wmtb-hero__btn .wmtb-ico { width: 17px; height: 17px; }
[dir="rtl"] .wmtb-hero__btn .wmtb-ico { transform: scaleX(-1); }

/* button styles */
.wmtb-hero--btn-solid .wmtb-hero__btn.is-primary {
	background: var(--hero-accent);
	color: #fff;
	box-shadow: 0 10px 26px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .4);
}

.wmtb-hero--btn-gradient .wmtb-hero__btn.is-primary {
	background: linear-gradient(135deg, var(--hero-accent), var(--hero-accent-2));
	color: #fff;
	box-shadow: 0 12px 30px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .42);
}

.wmtb-hero--btn-outline .wmtb-hero__btn.is-primary {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

.wmtb-hero--btn-ghost .wmtb-hero__btn.is-primary {
	background: rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}

.wmtb-hero--btn-ghost .wmtb-hero__slide[data-theme="light"] .wmtb-hero__btn.is-primary {
	background: rgba(20, 22, 31, .07);
	border-color: rgba(20, 22, 31, .14);
	color: #14161f;
}

.wmtb-hero__btn.is-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }

.wmtb-hero__btn.is-secondary {
	background: transparent;
	color: inherit;
	border-color: rgba(255, 255, 255, .4);
}

.wmtb-hero__slide[data-theme="light"] .wmtb-hero__btn.is-secondary { border-color: rgba(20, 22, 31, .28); }
.wmtb-hero__btn.is-secondary:hover { background: rgba(255, 255, 255, .12); }
.wmtb-hero__slide[data-theme="light"] .wmtb-hero__btn.is-secondary:hover { background: rgba(20, 22, 31, .06); }

/* ==========================================================================
   Templates
   ========================================================================== */

/* center */
.wmtb-hero--center .wmtb-hero__content {
	align-items: center;
	text-align: center;
	justify-self: center;
}

.wmtb-hero--center .wmtb-hero__scrim {
	background: radial-gradient(ellipse at center, rgba(8, 10, 18, calc(.1 * var(--wmtb-hero-scrim, .4))) 0%, rgba(8, 10, 18, calc(.66 * var(--wmtb-hero-scrim, .4))) 100%);
}

/* minimal */
.wmtb-hero--minimal .wmtb-hero__scrim { opacity: .35; }
.wmtb-hero--minimal .wmtb-hero__title { font-weight: 700; letter-spacing: -.01em; }
.wmtb-hero--minimal .wmtb-hero__content { gap: 8px; }

/* card */
.wmtb-hero--card {
	max-width: var(--hero-container);
	margin-inline: auto;
	padding: 14px 16px;
	overflow: visible;
}

.wmtb-hero--card .wmtb-hero__viewport {
	border-radius: var(--hero-radius);
	box-shadow: 0 24px 60px rgba(10, 12, 24, .18);
	overflow: hidden;
}

.wmtb-hero--card.wmtb-hero--bleed { width: auto; margin-inline: auto; }

/* split: media right, content left (desktop) */
.wmtb-hero--split .wmtb-hero__slide {
	grid-template-columns: 1.05fr .95fr;
}

.wmtb-hero--split .wmtb-hero__media {
	position: relative;
	inset: auto;
	grid-column: 2;
	grid-row: 1;
	height: 100%;
	clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}

[dir="rtl"] .wmtb-hero--split .wmtb-hero__media {
	grid-column: 1;
	clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

.wmtb-hero--split .wmtb-hero__scrim {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	inset: auto;
	background: var(--wmtb-surface-solid, #14161f);
}

[dir="rtl"] .wmtb-hero--split .wmtb-hero__scrim { grid-column: 2; }

.wmtb-hero--split .wmtb-hero__content {
	grid-column: 1;
	grid-row: 1;
	z-index: 3;
	justify-self: start;
}

[dir="rtl"] .wmtb-hero--split .wmtb-hero__content { grid-column: 2; }

.wmtb-hero--split .wmtb-hero__slide[data-theme="dark"] { color: #fff; }
.wmtb-hero--split .wmtb-hero__slide[data-theme="dark"] .wmtb-hero__scrim { background: #14161f; }
.wmtb-hero--split .wmtb-hero__slide[data-theme="light"] .wmtb-hero__scrim { background: var(--wmtb-surface-solid, #ffffff); }

@media (max-width: 900px) {
	.wmtb-hero--split .wmtb-hero__slide { grid-template-columns: 1fr; }
	.wmtb-hero--split .wmtb-hero__media { position: absolute; inset: 0; grid-column: auto; grid-row: auto; clip-path: none; }
	.wmtb-hero--split .wmtb-hero__scrim { position: absolute; inset: 0; grid-column: auto; background: linear-gradient(to top, rgba(8, 10, 18, calc(.75 * var(--wmtb-hero-scrim, .4))), rgba(8, 10, 18, calc(.12 * var(--wmtb-hero-scrim, .4)))); }
	.wmtb-hero--split .wmtb-hero__slide[data-theme="dark"] { color: #fff; }
	.wmtb-hero--split .wmtb-hero__content { grid-column: auto; align-self: end; max-width: none; }
}

/* product: emphasise the meta chips row */
.wmtb-hero--product .wmtb-hero__content { gap: 10px; }
.wmtb-hero--product .wmtb-hero__title { font-size: clamp(22px, calc(var(--wmtb-hero-title, 44px) * .72), 56px); }

/* ==========================================================================
   Controls
   ========================================================================== */

.wmtb-hero__nav {
	position: absolute;
	top: 50%;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background: rgba(16, 18, 28, .34);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1), background .2s ease;
	padding: 0;
}

.wmtb-hero:hover .wmtb-hero__nav,
.wmtb-hero__nav:focus-visible { opacity: 1; }

.wmtb-hero__nav:active { transform: scale(.9); }
.wmtb-hero__nav:hover { background: rgba(16, 18, 28, .55); }

.wmtb-hero__nav.is-prev { inset-inline-start: 16px; }
.wmtb-hero__nav.is-next { inset-inline-end: 16px; }
.wmtb-hero__nav .wmtb-ico { width: 20px; height: 20px; }
[dir="rtl"] .wmtb-hero__nav .wmtb-ico { transform: scaleX(-1); }

@media (max-width: 782px) {
	.wmtb-hero__nav { width: 38px; height: 38px; margin-top: -19px; opacity: 1; }
	.wmtb-hero__nav.is-prev { inset-inline-start: 8px; }
	.wmtb-hero__nav.is-next { inset-inline-end: 8px; }
}

.wmtb-hero__dots {
	position: absolute;
	inset-inline: 0;
	bottom: 14px;
	z-index: 6;
	display: flex;
	justify-content: center;
	gap: 7px;
}

.wmtb-hero__dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: width .3s cubic-bezier(.32, .72, 0, 1), background .25s ease;
}

.wmtb-hero__dots button.is-active {
	width: 26px;
	background: var(--hero-accent);
}

.wmtb-hero__progress {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 6;
	height: 3px;
	background: rgba(255, 255, 255, .14);
}

.wmtb-hero__progress span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--hero-accent), var(--hero-accent-2));
}

.wmtb-hero__progress.is-running span {
	animation: wmtb-hero-progress var(--wmtb-hero-interval, 6s) linear forwards;
}

@keyframes wmtb-hero-progress {
	from { width: 0; }
	to   { width: 100%; }
}

/* content entrance animation */
.wmtb-hero__slide.is-active .wmtb-hero__badge,
.wmtb-hero__slide.is-active .wmtb-hero__sub,
.wmtb-hero__slide.is-active .wmtb-hero__title,
.wmtb-hero__slide.is-active .wmtb-hero__text,
.wmtb-hero__slide.is-active .wmtb-hero__meta,
.wmtb-hero__slide.is-active .wmtb-hero__cta {
	animation: wmtb-hero-in .6s cubic-bezier(.22, 1, .36, 1) both;
}

.wmtb-hero__slide.is-active .wmtb-hero__sub   { animation-delay: .05s; }
.wmtb-hero__slide.is-active .wmtb-hero__title { animation-delay: .12s; }
.wmtb-hero__slide.is-active .wmtb-hero__text  { animation-delay: .2s; }
.wmtb-hero__slide.is-active .wmtb-hero__meta  { animation-delay: .28s; }
.wmtb-hero__slide.is-active .wmtb-hero__cta   { animation-delay: .34s; }

@keyframes wmtb-hero-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wmtb-hero__slide,
	.wmtb-hero__img,
	.wmtb-hero__video {
		transition-duration: .01ms !important;
		animation: none !important;
	}

	.wmtb-hero__slide.is-active .wmtb-hero__badge,
	.wmtb-hero__slide.is-active .wmtb-hero__sub,
	.wmtb-hero__slide.is-active .wmtb-hero__title,
	.wmtb-hero__slide.is-active .wmtb-hero__text,
	.wmtb-hero__slide.is-active .wmtb-hero__meta,
	.wmtb-hero__slide.is-active .wmtb-hero__cta {
		animation: none !important;
	}

	.wmtb-hero--zoom .wmtb-hero__img,
	.wmtb-hero--zoom .wmtb-hero__video { transform: none !important; }
}

/* ==========================================================================
   Media control: fit, focal point, edge fade, separators
   ========================================================================== */

.wmtb-hero__img,
.wmtb-hero__video {
	object-position: var(--wmtb-hero-fx, 50%) var(--wmtb-hero-fy, 50%);
}

/* Smart edge fade --------------------------------------------------------
   The JS engine measures the rendered image rectangle (contain mode) and
   places this overlay EXACTLY over the image, flagging only the sides whose
   edge does not reach the hero frame (data-fade="l r t b"). Each flagged
   seam paints a gradient from the auto-detected page background colour into
   the image, erasing the hard border between product photo and hero. Sides
   that already touch the frame are never painted. */
.wmtb-hero__fade {
	position: absolute;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity .25s ease;
}

.wmtb-hero__fade[data-fade] {
	opacity: 1;
	background-image: var(--fl, none), var(--fr, none), var(--ft, none), var(--fb, none);
}

.wmtb-hero__fade[data-fade~="l"] {
	--fl: linear-gradient(to right, var(--fc, #10131f) 0, transparent var(--wmtb-hero-fade, 80px));
}

.wmtb-hero__fade[data-fade~="r"] {
	--fr: linear-gradient(to left, var(--fc, #10131f) 0, transparent var(--wmtb-hero-fade, 80px));
}

.wmtb-hero__fade[data-fade~="t"] {
	--ft: linear-gradient(to bottom, var(--fc, #10131f) 0, transparent var(--wmtb-hero-fade, 80px));
}

.wmtb-hero__fade[data-fade~="b"] {
	--fb: linear-gradient(to top, var(--fc, #10131f) 0, transparent var(--wmtb-hero-fade, 80px));
}

/* Contained / percent-fit images sit on a flat background (the auto-detected
   page colour when available) so the fade blends into one seamless surface –
   the --wmtb-hero-mediabg variable is emitted per device by the hero's own
   scoped stylesheet whenever that device's fit is not "cover". */

.wmtb-hero--sep-line {
	border-top: 1px solid var(--wmtb-border, rgba(16, 20, 40, .1));
}

.wmtb-hero--sep-shadow {
	box-shadow: inset 0 14px 22px -14px rgba(8, 10, 18, .45);
}

/* Boot gate: no entrance animation flash on the very first paint. */
.wmtb-hero.is-booting .wmtb-hero__slide.is-active .wmtb-hero__badge,
.wmtb-hero.is-booting .wmtb-hero__slide.is-active .wmtb-hero__sub,
.wmtb-hero.is-booting .wmtb-hero__slide.is-active .wmtb-hero__title,
.wmtb-hero.is-booting .wmtb-hero__slide.is-active .wmtb-hero__text,
.wmtb-hero.is-booting .wmtb-hero__slide.is-active .wmtb-hero__meta,
.wmtb-hero.is-booting .wmtb-hero__slide.is-active .wmtb-hero__cta {
	animation: none !important;
}

/* ==========================================================================
   Template: cards (coverflow carousel)
   ========================================================================== */

.wmtb-hero--cards .wmtb-hero__viewport {
	perspective: 1200px;
}

.wmtb-hero--cards .wmtb-hero__slide {
	position: absolute;
	inset: 12px auto 12px 50%;
	width: min(430px, 74vw);
	margin-inline-start: calc(min(430px, 74vw) / -2);
	border-radius: 26px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(8, 10, 18, .28);
	opacity: 0;
	visibility: hidden;
	transform: translateX(calc(var(--pos, 0) * 62%)) scale(calc(1 - min(var(--pos-abs, 3), 3) * .12)) rotateY(calc(var(--pos, 0) * -8deg));
	transition: transform .55s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1)), opacity .4s ease, visibility .4s;
}

.wmtb-hero--cards .wmtb-hero__slide[data-pos] {
	opacity: 1;
	visibility: visible;
}

/* RTL documents flip the deck direction to match the slide transition. */
[dir="rtl"] .wmtb-hero--cards .wmtb-hero__slide,
.wmtb-hero--cards[data-dir="rtl"] .wmtb-hero__slide {
	transform: translateX(calc(var(--pos, 0) * -62%)) scale(calc(1 - min(var(--pos-abs, 3), 3) * .12)) rotateY(calc(var(--pos, 0) * 8deg));
}

.wmtb-hero--cards .wmtb-hero__slide[data-pos="0"] {
	z-index: 5;
}

.wmtb-hero--cards .wmtb-hero__slide[data-pos="1"],
.wmtb-hero--cards .wmtb-hero__slide[data-pos="-1"] {
	z-index: 4;
}

.wmtb-hero--cards .wmtb-hero__slide[data-pos="2"],
.wmtb-hero--cards .wmtb-hero__slide[data-pos="-2"] {
	z-index: 3;
}

.wmtb-hero--cards .wmtb-hero__slide:not([data-pos]) {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
}

.wmtb-hero--cards .wmtb-hero__content {
	justify-self: stretch;
	align-self: end;
	padding: 18px 20px;
	background: linear-gradient(to top, rgba(8, 10, 18, .78), transparent);
}

.wmtb-hero--cards .wmtb-hero__title {
	font-size: clamp(18px, calc(var(--wmtb-hero-title, 44px) * .5), 30px);
	max-width: none;
}

.wmtb-hero--cards .wmtb-hero__text { display: none; }

.wmtb-hero--cards .wmtb-hero__nav { opacity: 1; }

/* ==========================================================================
   Template: editorial (full-bleed + bottom title strip)
   ========================================================================== */

.wmtb-hero--editorial .wmtb-hero__content {
	align-self: end;
	padding-bottom: 84px;
}

.wmtb-hero--editorial .wmtb-hero__title {
	font-weight: 800;
	letter-spacing: -.015em;
}

.wmtb-hero__strip {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 7;
	display: flex;
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
	background: linear-gradient(to top, rgba(8, 10, 18, .62), rgba(8, 10, 18, .25));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	overflow-x: auto;
	scrollbar-width: none;
}

.wmtb-hero__strip::-webkit-scrollbar { display: none; }

.wmtb-hero__strip button {
	flex: 1 1 0;
	min-width: 150px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 0;
	border-inline-start: 1px solid rgba(255, 255, 255, .14);
	background: transparent;
	color: rgba(255, 255, 255, .78);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.wmtb-hero__strip button:first-child { border-inline-start: 0; }

.wmtb-hero__strip button i {
	font-style: normal;
	font-size: 10px;
	font-weight: 800;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

.wmtb-hero__strip button span {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wmtb-hero__strip button:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.wmtb-hero__strip button.is-active {
	color: #fff;
	background: rgba(255, 255, 255, .12);
	box-shadow: inset 0 3px 0 var(--hero-accent);
}

.wmtb-hero--editorial .wmtb-hero__dots { display: none; }

/* ==========================================================================
   Template: showcase (content + floating side cards)
   ========================================================================== */

.wmtb-hero--showcase .wmtb-hero__content {
	max-width: min(46%, 560px);
	padding-block: 32px;
}

.wmtb-hero__side {
	position: absolute;
	inset-inline-end: clamp(16px, 5vw, 72px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	display: flex;
	gap: 14px;
	align-items: center;
}

.wmtb-hero__side button {
	position: relative;
	width: 148px;
	height: 196px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 18px;
	overflow: hidden;
	cursor: pointer;
	background: #171a25;
	box-shadow: 0 18px 40px rgba(8, 10, 18, .38);
	transition: transform .3s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1)), box-shadow .3s ease, opacity .3s ease;
	opacity: .82;
}

.wmtb-hero__side button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wmtb-hero__side button b {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 26px 12px 10px;
	background: linear-gradient(to top, rgba(8, 10, 18, .85), transparent);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	text-align: start;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wmtb-hero__side button:hover { opacity: 1; transform: translateY(-6px); }

.wmtb-hero__side button.is-active {
	opacity: 1;
	transform: translateY(-10px) scale(1.04);
	box-shadow: 0 26px 54px rgba(8, 10, 18, .5), 0 0 0 2px var(--hero-accent);
}

@media (max-width: 1024px) {
	.wmtb-hero__side { display: none; }
	.wmtb-hero--showcase .wmtb-hero__content { max-width: none; }
}

@media (max-width: 782px) {
	.wmtb-hero--cards .wmtb-hero__slide {
		width: min(340px, 82vw);
		margin-inline-start: calc(min(340px, 82vw) / -2);
	}

	.wmtb-hero__strip button { min-width: 128px; font-size: 11px; padding: 10px 12px; }
}

/* ==========================================================================
   Template: glass (frosted glassmorphism content panel)
   ========================================================================== */

.wmtb-hero--glass .wmtb-hero__content {
	align-self: center;
	width: min(620px, calc(100% - 2 * clamp(20px, 6vw, 64px)));
	max-width: min(620px, 90%);
	margin-inline: clamp(20px, 6vw, 64px);
	padding: clamp(20px, 3.4vw, 34px);
	border-radius: 26px;
	background: rgba(12, 14, 22, .38);
	border: 1px solid rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	backdrop-filter: blur(18px) saturate(1.5);
	box-shadow: 0 24px 64px rgba(6, 8, 14, .34), inset 0 1px 0 rgba(255, 255, 255, .12);
	gap: 10px;
}

.wmtb-hero--glass.wmtb-hero--align-center .wmtb-hero__content,
.wmtb-hero--glass .wmtb-hero__slide.wmtb-hero--a-center .wmtb-hero__content {
	margin-inline: auto;
}

.wmtb-hero--glass.wmtb-hero--align-end .wmtb-hero__content,
.wmtb-hero--glass .wmtb-hero__slide.wmtb-hero--a-end .wmtb-hero__content {
	margin-inline: auto clamp(20px, 6vw, 64px) auto auto;
}

.wmtb-hero--glass .wmtb-hero__slide[data-theme="light"] .wmtb-hero__content,
.wmtb-hero--glass .wmtb-hero__slide[data-theme="light"].wmtb-hero__content {
	background: rgba(255, 255, 255, .5);
	border-color: rgba(20, 22, 31, .08);
	box-shadow: 0 24px 64px rgba(20, 22, 31, .14), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.wmtb-hero--glass .wmtb-hero__scrim { opacity: .55; }

/* ==========================================================================
   Template: aurora (animated mesh-gradient light + centred type)
   ========================================================================== */

.wmtb-hero--aurora { overflow: hidden; }

.wmtb-hero--aurora .wmtb-hero__viewport::before,
.wmtb-hero--aurora .wmtb-hero__viewport::after {
	content: "";
	position: absolute;
	z-index: 3; /* above the active slide (slides are stacking contexts); the
	               screen blend keeps white text crisp while light washes the media */
	pointer-events: none;
	width: 70vmax;
	height: 70vmax;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .5;
	mix-blend-mode: screen;
}

.wmtb-hero--aurora .wmtb-hero__viewport::before {
	top: -38vmax;
	inset-inline-start: -18vmax;
	background:
		radial-gradient(circle at 30% 30%, var(--hero-accent), transparent 60%),
		radial-gradient(circle at 70% 60%, var(--hero-accent-2), transparent 55%);
	animation: wmtb-aurora-a 17s ease-in-out infinite alternate;
}

.wmtb-hero--aurora .wmtb-hero__viewport::after {
	bottom: -42vmax;
	inset-inline-end: -22vmax;
	background:
		radial-gradient(circle at 60% 40%, var(--hero-accent-2), transparent 58%),
		radial-gradient(circle at 30% 70%, #22d3ee, transparent 52%);
	animation: wmtb-aurora-b 21s ease-in-out infinite alternate;
}

@keyframes wmtb-aurora-a {
	from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
	to   { transform: translate3d(7vmax, 4vmax, 0) scale(1.16) rotate(24deg); }
}

@keyframes wmtb-aurora-b {
	from { transform: translate3d(0, 0, 0) scale(1.06) rotate(0deg); }
	to   { transform: translate3d(-6vmax, -5vmax, 0) scale(.92) rotate(-18deg); }
}

.wmtb-hero--aurora .wmtb-hero__media { opacity: .92; }

.wmtb-hero--aurora .wmtb-hero__content {
	z-index: 2;
	align-self: center;
	align-items: center;
	text-align: center;
	justify-self: center;
	gap: 14px;
}

.wmtb-hero--aurora .wmtb-hero__title {
	max-width: 22ch;
	background: linear-gradient(120deg, #fff 20%, color-mix(in srgb, #ffffff 55%, var(--hero-accent)) 60%, #fff 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 4px 18px rgba(6, 8, 14, .4));
}

.wmtb-hero--aurora .wmtb-hero__slide[data-theme="light"] .wmtb-hero__title {
	background: linear-gradient(120deg, #14161f 20%, var(--hero-accent) 60%, #14161f 90%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: none;
}

.wmtb-hero--aurora .wmtb-hero__badge {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .26);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.wmtb-hero--aurora .wmtb-hero__viewport::before,
	.wmtb-hero--aurora .wmtb-hero__viewport::after {
		animation: none !important;
	}
}

/* ==========================================================================
   Template: filmstrip (main stage + thumbnail rail)
   ========================================================================== */

.wmtb-hero--filmstrip .wmtb-hero__viewport { height: calc(var(--wmtb-hero-hd, 460px) - 96px); }

@media (max-width: 1024px) {
	.wmtb-hero--filmstrip .wmtb-hero__viewport { height: calc(var(--wmtb-hero-ht, 400px) - 88px); }
}

@media (max-width: 782px) {
	.wmtb-hero--filmstrip .wmtb-hero__viewport { height: calc(var(--wmtb-hero-hm, 340px) - 74px); }
}

.wmtb-hero__thumbs {
	position: relative;
	z-index: 6;
	display: flex;
	gap: 10px;
	padding: 12px clamp(12px, 4vw, 40px);
	overflow-x: auto;
	scrollbar-width: thin;
	background: linear-gradient(to top, rgba(8, 10, 18, .55), rgba(8, 10, 18, .18));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.wmtb-hero__thumbs button {
	position: relative;
	flex: 0 0 auto;
	width: 108px;
	height: 72px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	background: #171a25;
	opacity: .58;
	filter: saturate(.7);
	transition: opacity .25s ease, transform .25s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1)), filter .25s ease, box-shadow .25s ease;
}

.wmtb-hero__thumbs button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wmtb-hero__thumbs button i {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(var(--wmtb-accent-rgb, 109, 94, 252), .5), rgba(16, 19, 31, .8));
}

.wmtb-hero__thumbs button b {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 16px 8px 6px;
	background: linear-gradient(to top, rgba(8, 10, 18, .9), transparent);
	color: #fff;
	font-size: 10.5px;
	font-weight: 600;
	text-align: start;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wmtb-hero__thumbs button:hover { opacity: .86; }

.wmtb-hero__thumbs button.is-active {
	opacity: 1;
	filter: none;
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 0 0 2px var(--hero-accent), 0 14px 26px rgba(8, 10, 18, .4);
}

.wmtb-hero--filmstrip .wmtb-hero__dots { display: none; }

@media (max-width: 782px) {
	.wmtb-hero__thumbs button { width: 84px; height: 58px; }
	.wmtb-hero__thumbs button b { display: none; }
}

/* ==========================================================================
   Template: stack (deck of cards, active on top)
   ========================================================================== */

.wmtb-hero--stack .wmtb-hero__viewport { perspective: 1400px; }

.wmtb-hero--stack .wmtb-hero__slide {
	inset: 10px 6% 18px;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 22px 54px rgba(8, 10, 18, .3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(calc(var(--pos, 0) * 13px)) scale(calc(1 - min(var(--pos-abs, 3), 3) * .045));
	transition: transform .5s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1)), opacity .35s ease, visibility .35s, filter .5s ease;
	filter: brightness(calc(1 - min(var(--pos-abs, 3), 3) * .14));
}

[dir="rtl"] .wmtb-hero--stack .wmtb-hero__slide { transform: translateY(calc(var(--pos, 0) * 13px)) scale(calc(1 - min(var(--pos-abs, 3), 3) * .045)); }

.wmtb-hero--stack .wmtb-hero__slide[data-pos] {
	opacity: 1;
	visibility: visible;
}

.wmtb-hero--stack .wmtb-hero__slide[data-pos="0"] { z-index: 6; }
.wmtb-hero--stack .wmtb-hero__slide[data-pos="1"],
.wmtb-hero--stack .wmtb-hero__slide[data-pos="-1"] { z-index: 5; }
.wmtb-hero--stack .wmtb-hero__slide[data-pos="2"],
.wmtb-hero--stack .wmtb-hero__slide[data-pos="-2"] { z-index: 4; }

.wmtb-hero--stack .wmtb-hero__slide:not([data-pos]) {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
}

.wmtb-hero--stack .wmtb-hero__content {
	align-self: end;
	background: linear-gradient(to top, rgba(8, 10, 18, .72), transparent);
	padding-block: 26px 22px;
}

.wmtb-hero--stack .wmtb-hero__dots { bottom: 6px; }

/* ==========================================================================
   Template: parallax (layered depth on scroll)
   ========================================================================== */

.wmtb-hero--parallax .wmtb-hero__media {
	inset: -12% 0;
	height: 124%;
	transform: translate3d(0, calc(var(--wmtb-para, 0px) * -1), 0);
	transition: transform .18s linear;
}

.wmtb-hero--parallax .wmtb-hero__scrim {
	background:
		linear-gradient(to top, rgba(8, 10, 18, calc(.8 * var(--wmtb-hero-scrim, .4))) 0%, transparent 55%),
		linear-gradient(to right, rgba(8, 10, 18, calc(.45 * var(--wmtb-hero-scrim, .4))) 0%, transparent 65%);
}

.wmtb-hero--parallax .wmtb-hero__content {
	transform: translate3d(0, calc(var(--wmtb-para, 0px) * .35), 0);
	transition: transform .18s linear;
}

.wmtb-hero--parallax .wmtb-hero__title { font-weight: 870; }

@media (prefers-reduced-motion: reduce) {
	.wmtb-hero--parallax .wmtb-hero__media,
	.wmtb-hero--parallax .wmtb-hero__content { transform: none !important; }
}

/* ==========================================================================
   Template: duotone (accent-tinted monochrome + poster type)
   ========================================================================== */

.wmtb-hero--duotone .wmtb-hero__img,
.wmtb-hero--duotone .wmtb-hero__video {
	filter: grayscale(1) contrast(1.08) brightness(.96);
}

.wmtb-hero--duotone .wmtb-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(135deg, var(--hero-accent), var(--hero-accent-2));
	mix-blend-mode: color;
	opacity: .62;
}

.wmtb-hero--duotone .wmtb-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(120% 90% at 78% 18%, rgba(255, 255, 255, .14), transparent 55%);
}

.wmtb-hero--duotone .wmtb-hero__title {
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .01em;
	max-width: 15ch;
}

.wmtb-hero--duotone .wmtb-hero__sub {
	color: #fff;
	opacity: .92;
	background: var(--hero-accent);
	padding: 4px 10px;
	border-radius: 6px;
	width: max-content;
}

/* The smart fade overlay must sit above the duotone tint. */
.wmtb-hero--duotone .wmtb-hero__fade { z-index: 3; }

/* ==========================================================================
   Template: frame (gallery mat around the media)
   ========================================================================== */

.wmtb-hero--frame {
	padding: clamp(10px, 2vw, 22px);
	background: var(--wmtb-hero-bgeff, var(--wmtb-hero-bg, #10131f));
}

.wmtb-hero--frame .wmtb-hero__viewport {
	border-radius: calc(var(--wmtb-hero-rc, 24px) * .6);
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .12),
		0 26px 60px rgba(6, 8, 14, .35);
}

.wmtb-hero--frame .wmtb-hero__content {
	padding-inline: clamp(22px, 5vw, 56px);
}

.wmtb-hero--frame .wmtb-hero__title { font-weight: 800; letter-spacing: -.015em; }

/* filmstrip + fit-screen combo: the thumb rail must not overflow the viewport */
.wmtb-hero--layout-fit.wmtb-hero--filmstrip .wmtb-hero__viewport {
	height: calc(100vh - var(--wmtb-hero-chrome, 0px) - 96px);
	height: calc(100svh - var(--wmtb-hero-chrome, 0px) - 96px);
}

/* ==========================================================================
   Template: bento (content as discrete glass tiles)
   ========================================================================== */

.wmtb-hero--bento .wmtb-hero__content {
	gap: 10px;
	max-width: min(780px, calc(100% - 2 * clamp(20px, 6vw, 64px)));
}

.wmtb-hero--bento .wmtb-hero__badge,
.wmtb-hero--bento .wmtb-hero__sub,
.wmtb-hero--bento .wmtb-hero__title,
.wmtb-hero--bento .wmtb-hero__text,
.wmtb-hero--bento .wmtb-hero__meta,
.wmtb-hero--bento .wmtb-hero__cta {
	background: rgba(12, 14, 22, .44);
	border: 1px solid rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	border-radius: 18px;
	padding: 12px 18px;
	box-shadow: 0 14px 34px rgba(6, 8, 14, .22);
}

.wmtb-hero--bento .wmtb-hero__badge {
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: none;
}

.wmtb-hero--bento .wmtb-hero__title { max-width: none; }
.wmtb-hero--bento .wmtb-hero__text { max-width: 48ch; }

.wmtb-hero--bento .wmtb-hero__slide[data-theme="light"] .wmtb-hero__badge,
.wmtb-hero--bento .wmtb-hero__slide[data-theme="light"] .wmtb-hero__sub,
.wmtb-hero--bento .wmtb-hero__slide[data-theme="light"] .wmtb-hero__title,
.wmtb-hero--bento .wmtb-hero__slide[data-theme="light"] .wmtb-hero__text,
.wmtb-hero--bento .wmtb-hero__slide[data-theme="light"] .wmtb-hero__meta,
.wmtb-hero--bento .wmtb-hero__slide[data-theme="light"] .wmtb-hero__cta {
	background: rgba(255, 255, 255, .58);
	border-color: rgba(20, 22, 31, .1);
}

.wmtb-hero--bento .wmtb-hero__meta { background: transparent; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ==========================================================================
   Template: brutalist (hard borders, offset shadows, raw type)
   ========================================================================== */

.wmtb-hero--brutalist {
	border: 3px solid #101218;
	border-radius: 0 !important;
}

.wmtb-hero--brutalist .wmtb-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: radial-gradient(rgba(16, 18, 24, .16) 1px, transparent 1.4px);
	background-size: 7px 7px;
	opacity: .5;
}

.wmtb-hero--brutalist .wmtb-hero__content { gap: 14px; }

.wmtb-hero--brutalist .wmtb-hero__badge {
	border-radius: 0;
	background: #ffe600;
	color: #101218;
	border: 2.5px solid #101218;
	box-shadow: 4px 4px 0 #101218;
	font-weight: 900;
}

.wmtb-hero--brutalist .wmtb-hero__title {
	display: inline-block;
	width: max-content;
	max-width: 100%;
	border-radius: 0;
	background: var(--hero-accent);
	color: var(--wmtb-hero-title-c, #fff);
	border: 3px solid #101218;
	box-shadow: 8px 8px 0 rgba(10, 12, 20, .92);
	padding: 8px 18px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: var(--wmtb-hero-ls, -.02em);
	transform: rotate(-1deg);
}

.wmtb-hero--brutalist .wmtb-hero__text {
	background: #fff;
	color: #101218;
	border: 2.5px solid #101218;
	padding: 8px 12px;
	font-weight: 600;
	width: max-content;
	max-width: 100%;
}

.wmtb-hero--brutalist .wmtb-hero__btn {
	border-radius: 0 !important;
	border: 3px solid #101218 !important;
	font-weight: 900;
	text-transform: uppercase;
}

.wmtb-hero--brutalist .wmtb-hero__btn.is-primary {
	box-shadow: 5px 5px 0 #101218 !important;
}

.wmtb-hero--brutalist .wmtb-hero__btn.is-primary:hover {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 #101218 !important;
	filter: none;
}

.wmtb-hero--brutalist .wmtb-hero__price {
	border-radius: 0;
	background: #fff;
	color: #101218;
	border: 2.5px solid #101218;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ==========================================================================
   Template: neon (cyber glow + grid)
   ========================================================================== */

.wmtb-hero--neon { background: #07080f; }

.wmtb-hero--neon .wmtb-hero__media { opacity: .5; }

.wmtb-hero--neon .wmtb-hero__media .wmtb-hero__img,
.wmtb-hero--neon .wmtb-hero__media .wmtb-hero__video {
	filter: saturate(1.35) brightness(.82) contrast(1.06);
}

.wmtb-hero--neon .wmtb-hero__viewport::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(var(--wmtb-accent-rgb, 109, 94, 252), .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--wmtb-accent-rgb, 109, 94, 252), .07) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%);
	mask-image: linear-gradient(to top, #000 0%, transparent 72%);
}

.wmtb-hero--neon .wmtb-hero__title {
	color: var(--wmtb-hero-title-c, #fff);
	text-shadow:
		0 0 6px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .9),
		0 0 26px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .65),
		0 0 64px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .4);
	animation: wmtb-neon-breath 4.5s ease-in-out infinite;
}

@keyframes wmtb-neon-breath {
	0%, 100% { opacity: 1; }
	50%      { opacity: .88; }
}

.wmtb-hero--neon .wmtb-hero__badge {
	border-radius: 4px;
	background: transparent;
	border: 1px solid var(--hero-accent);
	color: var(--hero-accent);
	box-shadow: 0 0 14px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .55), inset 0 0 10px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .22);
	text-shadow: 0 0 8px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .8);
}

.wmtb-hero--neon .wmtb-hero__btn.is-primary {
	background: transparent;
	border: 2px solid var(--hero-accent);
	color: #fff;
	box-shadow: 0 0 20px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .5), inset 0 0 14px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .22);
}

.wmtb-hero--neon .wmtb-hero__btn.is-primary:hover {
	box-shadow: 0 0 34px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .8), inset 0 0 18px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .35);
	filter: none;
}

.wmtb-hero--neon .wmtb-hero__price {
	border-radius: 6px;
	background: rgba(7, 8, 15, .6);
	border: 1px solid rgba(var(--wmtb-accent-rgb, 109, 94, 252), .55);
	color: #fff;
}

.wmtb-hero--neon .wmtb-hero__dots button.is-active {
	box-shadow: 0 0 10px var(--hero-accent);
}

@media (prefers-reduced-motion: reduce) {
	.wmtb-hero--neon .wmtb-hero__title { animation: none !important; }
}

/* ==========================================================================
   Template: spotlight (product on a lit stage)
   ========================================================================== */

.wmtb-hero--spotlight { background: #0b0d15; }

.wmtb-hero--spotlight .wmtb-hero__scrim {
	background: radial-gradient(ellipse 58% 72% at 50% 40%,
		transparent 0%,
		rgba(5, 6, 10, calc(.3 * var(--wmtb-hero-scrim, .4) * 2.5)) 55%,
		rgba(5, 6, 10, calc(.85 * var(--wmtb-hero-scrim, .4) * 2)) 100%);
}

.wmtb-hero--spotlight .wmtb-hero__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 30%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(var(--wmtb-accent-rgb, 109, 94, 252), .18), transparent);
}

.wmtb-hero--spotlight .wmtb-hero__content {
	align-self: end;
	align-items: center;
	text-align: center;
	justify-self: center;
	padding-bottom: clamp(24px, 5vh, 48px);
}

.wmtb-hero--spotlight .wmtb-hero__title { font-weight: 820; }

.wmtb-hero--spotlight .wmtb-hero__meta { justify-content: center; }
.wmtb-hero--spotlight .wmtb-hero__cta { justify-content: center; }

/* ==========================================================================
   Template: cinema (letterboxed widescreen + subtitle content)
   ========================================================================== */

.wmtb-hero--cinema { background: #05060a; }

.wmtb-hero--cinema .wmtb-hero__viewport::before,
.wmtb-hero--cinema .wmtb-hero__viewport::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: clamp(18px, 7%, 54px);
	background: #05060a;
	z-index: 5;
	pointer-events: none;
}

.wmtb-hero--cinema .wmtb-hero__viewport::before { top: 0; }
.wmtb-hero--cinema .wmtb-hero__viewport::after { bottom: 0; }

.wmtb-hero--cinema .wmtb-hero__img,
.wmtb-hero--cinema .wmtb-hero__video { filter: contrast(1.07) saturate(.94); }

.wmtb-hero--cinema .wmtb-hero__content {
	align-self: end;
	align-items: center;
	text-align: center;
	justify-self: center;
	padding-bottom: calc(clamp(18px, 7%, 54px) + 20px);
}

.wmtb-hero--cinema .wmtb-hero__title {
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: none;
}

.wmtb-hero--cinema .wmtb-hero__text {
	background: rgba(5, 6, 10, .58);
	border-radius: 5px;
	padding: 4px 12px;
}

.wmtb-hero--cinema .wmtb-hero__dots { bottom: calc(clamp(18px, 7%, 54px) + 10px); z-index: 6; }
.wmtb-hero--cinema .wmtb-hero__progress { z-index: 6; }
.wmtb-hero--cinema .wmtb-hero__cta { justify-content: center; }
.wmtb-hero--cinema .wmtb-hero__meta { justify-content: center; }

/* ==========================================================================
   Template: marquee (kinetic ticker of slide titles)
   ========================================================================== */

.wmtb-hero--marquee .wmtb-hero__content { padding-bottom: 74px; }
.wmtb-hero--marquee .wmtb-hero__dots { bottom: 62px; }

.wmtb-hero__ticker {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 6;
	display: flex;
	overflow: hidden;
	padding: 11px 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
	background: rgba(8, 10, 18, .58);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	pointer-events: none;
}

.wmtb-hero__ticker > div {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	min-width: 100%;
	width: max-content;
}

.wmtb-hero__ticker.is-running > div {
	animation: wmtb-marquee var(--wmtb-marquee-dur, 30s) linear infinite;
}

.wmtb-hero--marquee:hover .wmtb-hero__ticker.is-running > div {
	animation-play-state: paused;
}

.wmtb-hero__ticker span {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding-inline: 20px;
	white-space: nowrap;
	color: rgba(255, 255, 255, .84);
	font-size: clamp(12px, 1.5vw, 16px);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.wmtb-hero__ticker span::after {
	content: "✦";
	color: var(--hero-accent);
	letter-spacing: 0;
}

.wmtb-hero__slide[data-theme="light"] ~ .wmtb-hero__ticker { color: inherit; }

@keyframes wmtb-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.wmtb-hero__ticker.is-running > div { animation: none !important; }
}

@media (max-width: 782px) {
	.wmtb-hero--marquee .wmtb-hero__content { padding-bottom: 62px; }
	.wmtb-hero--marquee .wmtb-hero__dots { bottom: 52px; }
	.wmtb-hero__ticker { padding: 8px 0; }
	.wmtb-hero__ticker span { gap: 14px; padding-inline: 14px; letter-spacing: .1em; }
}

/* Persian/Arabic ticker items keep their own RTL run direction inside the
   LTR marquee track so punctuation and word order stay correct. */
[dir="rtl"] .wmtb-hero__ticker span,
.wmtb-hero[data-dir="rtl"] .wmtb-hero__ticker span {
	direction: rtl;
}

/* ==========================================================================
   Scroll-down arrow indicator
   Positions: inside / corner / edge / below. Styles: chevron, double, mouse,
   circle (progress ring), line (progress bar), pill (labelled glass).
   Scroll-reactive: --sa-prog (0..1 of the hero still visible) drives the ring
   and the line; is-down/is-up/is-gone states come from the runtime.
   ========================================================================== */

.wmtb-hero__scroll {
	--sa-y: 0px;
	--sa-s: 1;
	position: absolute;
	z-index: 7;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 8px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: #fff;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: opacity .35s ease, transform .4s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1)), filter .25s ease;
}

/* positions – transform stays composable so states only move the vars */
.wmtb-hero--sa-inside .wmtb-hero__scroll {
	bottom: 16px;
	left: 50%;
	transform: translate(-50%, var(--sa-y)) scale(var(--sa-s));
}

.wmtb-hero--sa-corner .wmtb-hero__scroll {
	bottom: 14px;
	inset-inline-end: 16px;
	transform: translateY(var(--sa-y)) scale(var(--sa-s));
}

.wmtb-hero--sa-edge .wmtb-hero__scroll {
	bottom: 0;
	left: 50%;
	transform: translate(-50%, calc(50% + var(--sa-y))) scale(var(--sa-s));
}

.wmtb-hero--sa-below .wmtb-hero__scroll {
	top: 100%;
	left: 50%;
	margin-top: 10px;
	transform: translate(-50%, var(--sa-y)) scale(var(--sa-s));
}

/* room for the overhanging arrow (flush() respects own margins) */
.wmtb-hero--sa-out.wmtb-hero--sa-edge { margin-block-end: calc(var(--wmtb-hero-vm, 0px) + 30px); }
.wmtb-hero--sa-out.wmtb-hero--sa-below { margin-block-end: calc(var(--wmtb-hero-vm, 0px) + 64px); }

/* unclip the section for edge/below, but keep slide transitions contained */
.wmtb-hero--sa-out {
	overflow: visible;
	contain: layout style;
}

.wmtb-hero--sa-out .wmtb-hero__viewport {
	overflow: hidden;
	border-radius: inherit;
}

.wmtb-hero--sa-out.wmtb-hero--layout-card .wmtb-hero__viewport,
.wmtb-hero--sa-out.wmtb-hero--layout-custom .wmtb-hero__viewport {
	border-radius: var(--wmtb-hero-rc, 24px);
}

/* icon defaults */
.wmtb-hero__scroll .sa-ico {
	display: inline-flex;
	line-height: 0;
}

.wmtb-hero__scroll .sa-ico svg {
	width: 26px;
	height: 26px;
}

.wmtb-hero__scroll .sa-ico--sm svg {
	width: 15px;
	height: 15px;
}

.wmtb-hero__scroll-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	opacity: .85;
	white-space: nowrap;
}

/* ---------------------------------------------- style: chevron */
.sa-chevron .sa-ico { animation: sa-bob 1.9s ease-in-out infinite; }

@keyframes sa-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(7px); }
}

/* ---------------------------------------------- style: double chevron */
.sa-double .sa-ico { opacity: 0; animation: sa-cascade 1.7s linear infinite; }
.sa-double .sa-ico--2 { animation-delay: .45s; margin-top: -14px; }

@keyframes sa-cascade {
	0%   { opacity: 0; transform: translateY(-7px); }
	28%  { opacity: 1; }
	72%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(9px); }
}

/* ---------------------------------------------- style: mouse */
.sa-mouse {
	position: relative;
	width: 27px;
	height: 44px;
	border: 2px solid currentColor;
	border-radius: 14px;
	opacity: .92;
}

.sa-mouse__wheel {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 3.5px;
	height: 8px;
	margin-left: -1.75px;
	border-radius: 3px;
	background: currentColor;
	animation: sa-wheel 1.9s ease-in-out infinite;
}

@keyframes sa-wheel {
	0%   { opacity: 0; transform: translateY(0); }
	25%  { opacity: 1; }
	70%  { opacity: 1; transform: translateY(11px); }
	100% { opacity: 0; transform: translateY(15px); }
}

/* ---------------------------------------------- style: circle + progress ring */
.sa-circle {
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 50%;
	background: rgba(14, 16, 26, .38);
	border: 1px solid rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	box-shadow: 0 10px 26px rgba(8, 10, 18, .28);
}

.sa-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	pointer-events: none;
}

.sa-ring circle {
	fill: none;
	stroke-width: 2.4;
}

.sa-ring__track { stroke: rgba(255, 255, 255, .18); }

.sa-ring__bar {
	stroke: var(--hero-accent);
	stroke-linecap: round;
	stroke-dasharray: 138.2;
	stroke-dashoffset: calc(138.2 * (1 - var(--sa-prog, 1)));
	transition: stroke-dashoffset .18s linear;
}

.sa-circle .sa-ico { animation: sa-bob 2.1s ease-in-out infinite; }
.sa-circle .sa-ico svg { width: 21px; height: 21px; }

/* ---------------------------------------------- style: line (progress bar) */
.sa-line {
	position: relative;
	width: 2px;
	height: 48px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .25);
	overflow: hidden;
}

.sa-line i {
	position: absolute;
	inset: 0;
	background: var(--hero-accent);
	transform-origin: top center;
	transform: scaleY(var(--sa-prog, 1));
	transition: transform .15s linear;
}

.sa-line + .sa-ico { margin-top: 2px; }

/* ---------------------------------------------- style: pill */
.sa-pill {
	flex-direction: row;
	gap: 8px;
	padding: 10px 17px;
	border-radius: 999px;
	background: rgba(14, 16, 26, .42);
	border: 1px solid rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 26px rgba(8, 10, 18, .25);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
}

.sa-pill .sa-ico { animation: sa-bob 1.9s ease-in-out infinite; }
.sa-pill .sa-ico svg { width: 16px; height: 16px; }
.sa-pill .wmtb-hero__scroll-label { letter-spacing: .8px; }

/* ---------------------------------------------- scroll-reactive states */
.wmtb-hero__scroll.is-gone {
	--sa-y: 18px;
	--sa-s: .6;
	opacity: 0;
	pointer-events: none;
}

/* scrolling down: the arrow nods faster, inviting the pull */
.wmtb-hero__scroll.is-down .sa-ico,
.wmtb-hero__scroll.is-down .sa-mouse__wheel { animation-duration: .85s; }

/* scrolling up: a little welcome spring */
.wmtb-hero__scroll.is-up .sa-ico { animation: sa-hi .55s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1)); }

@keyframes sa-hi {
	0%   { transform: translateY(5px) scale(.86); opacity: .35; }
	60%  { transform: translateY(-3px) scale(1.07); opacity: 1; }
	100% { transform: none; }
}

.wmtb-hero__scroll:hover { filter: brightness(1.18); }
.wmtb-hero__scroll:active { --sa-s: .92; }

.wmtb-hero__scroll:focus-visible {
	outline: 2px solid var(--hero-accent);
	outline-offset: 3px;
}

/* light slides / light page backgrounds flip the arrow to ink */
.wmtb-hero.is-sa-light .wmtb-hero__scroll,
.wmtb-hero.is-sa-onlight .wmtb-hero__scroll { color: #14161f; }

.wmtb-hero.is-sa-light .sa-circle,
.wmtb-hero.is-sa-onlight .sa-circle,
.wmtb-hero.is-sa-light .sa-pill,
.wmtb-hero.is-sa-onlight .sa-pill {
	background: rgba(255, 255, 255, .55);
	border-color: rgba(20, 22, 31, .14);
}

.wmtb-hero.is-sa-light .sa-ring__track,
.wmtb-hero.is-sa-onlight .sa-ring__track { stroke: rgba(20, 22, 31, .16); }

.wmtb-hero.is-sa-light .sa-line,
.wmtb-hero.is-sa-onlight .sa-line { background: rgba(20, 22, 31, .22); }

/* smaller footprint on phones */
@media (max-width: 782px) {
	.sa-circle { width: 48px; height: 48px; }
	.sa-ring circle { stroke-width: 2.8; }
	.sa-circle .sa-ico svg { width: 18px; height: 18px; }
	.sa-mouse { width: 24px; height: 39px; }
	.sa-line { height: 38px; }
	.wmtb-hero--sa-out.wmtb-hero--sa-below { margin-block-end: calc(var(--wmtb-hero-vm, 0px) + 56px); }
}

@media (prefers-reduced-motion: reduce) {
	.wmtb-hero__scroll .sa-ico,
	.wmtb-hero__scroll .sa-mouse__wheel,
	.sa-double .sa-ico,
	.wmtb-hero__scroll.is-up .sa-ico {
		animation: none !important;
	}
	.sa-double .sa-ico { opacity: 1 !important; }
	.wmtb-hero__scroll { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Scroll arrow: collision offsets & RTL polish
   The inside arrow shares the bottom-centre with dots and template rails –
   lift it clear of whichever occupies that strip.
   ========================================================================== */

.wmtb-hero--sa-dots.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: 48px; }

.wmtb-hero--editorial.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: 66px; }
.wmtb-hero--filmstrip.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: 110px; }
.wmtb-hero--marquee.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: 98px; }
.wmtb-hero--cinema.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: calc(clamp(18px, 7%, 54px) + 18px); }
.wmtb-hero--stack.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: 40px; }

@media (max-width: 782px) {
	.wmtb-hero--editorial.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: 56px; }
	.wmtb-hero--filmstrip.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: 88px; }
	.wmtb-hero--marquee.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: 84px; }
	.wmtb-hero--sa-dots.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: 44px; }
}

/* Persian/Arabic labels read naturally inside the LTR hero box. */
.wmtb-hero__scroll-label { unicode-bidi: plaintext; }

[dir="rtl"] .sa-pill,
.wmtb-hero[data-dir="rtl"] .sa-pill { flex-direction: row-reverse; }

/* Section-level device visibility + cover link for buttonless banner slides */
@media (max-width: 1024px) and (min-width: 783px) {
	.wmtb-hero:not([data-hero-devices~="tablet"]) { display: none !important; }
}
@media (max-width: 782px) {
	.wmtb-hero:not([data-hero-devices~="mobile"]) { display: none !important; }
}
@media (min-width: 1025px) {
	.wmtb-hero:not([data-hero-devices~="desktop"]) { display: none !important; }
}
.wmtb-hero__coverlink {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* ==========================================================================
   Content Entrance Animation Presets (rise / zoom / blur / split / none)
   ========================================================================== */

.wmtb-hero--canim-none .wmtb-hero__slide.is-active .wmtb-hero__badge,
.wmtb-hero--canim-none .wmtb-hero__slide.is-active .wmtb-hero__sub,
.wmtb-hero--canim-none .wmtb-hero__slide.is-active .wmtb-hero__title,
.wmtb-hero--canim-none .wmtb-hero__slide.is-active .wmtb-hero__text,
.wmtb-hero--canim-none .wmtb-hero__slide.is-active .wmtb-hero__meta,
.wmtb-hero--canim-none .wmtb-hero__slide.is-active .wmtb-hero__cta {
	animation: none !important;
}

.wmtb-hero--canim-zoom .wmtb-hero__slide.is-active .wmtb-hero__badge,
.wmtb-hero--canim-zoom .wmtb-hero__slide.is-active .wmtb-hero__sub,
.wmtb-hero--canim-zoom .wmtb-hero__slide.is-active .wmtb-hero__title,
.wmtb-hero--canim-zoom .wmtb-hero__slide.is-active .wmtb-hero__text,
.wmtb-hero--canim-zoom .wmtb-hero__slide.is-active .wmtb-hero__meta,
.wmtb-hero--canim-zoom .wmtb-hero__slide.is-active .wmtb-hero__cta {
	animation-name: wmtb-hero-in-zoom;
}

@keyframes wmtb-hero-in-zoom {
	from { opacity: 0; transform: scale(.88) translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.wmtb-hero--canim-blur .wmtb-hero__slide.is-active .wmtb-hero__badge,
.wmtb-hero--canim-blur .wmtb-hero__slide.is-active .wmtb-hero__sub,
.wmtb-hero--canim-blur .wmtb-hero__slide.is-active .wmtb-hero__title,
.wmtb-hero--canim-blur .wmtb-hero__slide.is-active .wmtb-hero__text,
.wmtb-hero--canim-blur .wmtb-hero__slide.is-active .wmtb-hero__meta,
.wmtb-hero--canim-blur .wmtb-hero__slide.is-active .wmtb-hero__cta {
	animation-name: wmtb-hero-in-blur;
}

@keyframes wmtb-hero-in-blur {
	from { opacity: 0; filter: blur(12px); transform: translateY(12px); }
	to   { opacity: 1; filter: blur(0); transform: none; }
}

.wmtb-hero--canim-split .wmtb-hero__slide.is-active .wmtb-hero__badge,
.wmtb-hero--canim-split .wmtb-hero__slide.is-active .wmtb-hero__sub,
.wmtb-hero--canim-split .wmtb-hero__slide.is-active .wmtb-hero__title,
.wmtb-hero--canim-split .wmtb-hero__slide.is-active .wmtb-hero__text,
.wmtb-hero--canim-split .wmtb-hero__slide.is-active .wmtb-hero__meta,
.wmtb-hero--canim-split .wmtb-hero__slide.is-active .wmtb-hero__cta {
	animation-name: wmtb-hero-in-split;
}

@keyframes wmtb-hero-in-split {
	from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-14px); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}

/* ==========================================================================
   Template 23: Magazine Lookbook (lookbook)
   ========================================================================== */

.wmtb-hero--lookbook {
	background: var(--wmtb-hero-bgeff, var(--wmtb-hero-bg, #0e1018));
}

.wmtb-hero--lookbook .wmtb-hero__slide {
	grid-template-columns: 1.15fr .85fr;
	align-items: center;
	padding: clamp(16px, 3.5vw, 44px);
	gap: clamp(18px, 3.5vw, 48px);
}

.wmtb-hero--lookbook .wmtb-hero__media {
	position: relative;
	inset: auto;
	height: 100%;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(6, 8, 14, .42);
	border: 1px solid rgba(255, 255, 255, .14);
}

.wmtb-hero--lookbook .wmtb-hero__scrim {
	display: none;
}

.wmtb-hero--lookbook .wmtb-hero__content {
	padding: clamp(18px, 3vw, 36px);
	border-radius: 22px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(var(--wmtb-hero-blur, 14px));
	backdrop-filter: blur(var(--wmtb-hero-blur, 14px));
}

.wmtb-hero__looknum {
	position: absolute;
	top: clamp(18px, 3vw, 34px);
	inset-inline-end: clamp(22px, 4vw, 48px);
	z-index: 4;
	font-size: clamp(28px, 4.5vw, 58px);
	font-weight: 900;
	letter-spacing: -.04em;
	color: rgba(255, 255, 255, .14);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

@media (max-width: 900px) {
	.wmtb-hero--lookbook .wmtb-hero__slide {
		grid-template-columns: 1fr;
		padding: 14px;
	}
	.wmtb-hero--lookbook .wmtb-hero__media {
		position: absolute;
		inset: 12px;
		height: auto;
	}
	.wmtb-hero--lookbook .wmtb-hero__content {
		align-self: end;
		background: rgba(10, 12, 20, .68);
	}
}

/* ==========================================================================
   Template 24: Kinetic Split Curtain (curtain)
   ========================================================================== */

.wmtb-hero--curtain .wmtb-hero__media {
	clip-path: inset(0 50% 0 50% round 24px);
	transition: clip-path .85s cubic-bezier(.22, 1, .36, 1), transform .85s ease;
}

.wmtb-hero--curtain .wmtb-hero__slide.is-active .wmtb-hero__media {
	clip-path: inset(0 0% 0 0% round 0px);
}

.wmtb-hero--curtain .wmtb-hero__content {
	align-self: center;
	align-items: center;
	text-align: center;
	justify-self: center;
	max-width: min(680px, 90%);
	padding: clamp(22px, 3.5vw, 40px);
	border-radius: 28px;
	background: radial-gradient(circle at 50% 0%, rgba(var(--wmtb-accent-rgb, 109, 94, 252), .28), rgba(10, 12, 22, .62));
	border: 1px solid rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(var(--wmtb-hero-blur, 14px));
	backdrop-filter: blur(var(--wmtb-hero-blur, 14px));
	box-shadow: 0 28px 70px rgba(4, 6, 12, .45);
}

/* ==========================================================================
   Template 25: 3D Prism Cube (prism)
   ========================================================================== */

.wmtb-hero--prism .wmtb-hero__viewport {
	perspective: 1600px;
}

.wmtb-hero--prism .wmtb-hero__slide {
	transform-origin: center center -220px;
	transform: rotateY(calc(var(--pos, 0) * 72deg)) scale(calc(1 - min(var(--pos-abs, 2), 2) * .12));
	opacity: 0;
	visibility: hidden;
	transition: transform .75s cubic-bezier(.22, 1, .36, 1), opacity .55s ease, visibility .55s;
	backface-visibility: hidden;
}

[dir="rtl"] .wmtb-hero--prism .wmtb-hero__slide,
.wmtb-hero--prism[data-dir="rtl"] .wmtb-hero__slide {
	transform: rotateY(calc(var(--pos, 0) * -72deg)) scale(calc(1 - min(var(--pos-abs, 2), 2) * .12));
}

.wmtb-hero--prism .wmtb-hero__slide[data-pos="0"] {
	opacity: 1;
	visibility: visible;
	z-index: 4;
}

.wmtb-hero--prism .wmtb-hero__slide[data-pos="1"],
.wmtb-hero--prism .wmtb-hero__slide[data-pos="-1"] {
	opacity: .32;
	visibility: visible;
	z-index: 2;
}

/* ==========================================================================
   Template 26: Floating Island Dock (island)
   ========================================================================== */

.wmtb-hero--island .wmtb-hero__content {
	align-self: center;
	padding-bottom: 92px;
}

.wmtb-hero__island {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 7;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: calc(100% - 28px);
	padding: 6px;
	border-radius: 999px;
	background: rgba(12, 14, 24, .68);
	border: 1px solid rgba(255, 255, 255, .18);
	-webkit-backdrop-filter: blur(var(--wmtb-hero-blur, 16px)) saturate(1.4);
	backdrop-filter: blur(var(--wmtb-hero-blur, 16px)) saturate(1.4);
	box-shadow: 0 18px 44px rgba(4, 6, 14, .45);
	overflow-x: auto;
	scrollbar-width: none;
}

.wmtb-hero__island::-webkit-scrollbar { display: none; }

.wmtb-hero__island-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 6px;
	border-radius: 999px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, .72);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}

.wmtb-hero__island-item img,
.wmtb-hero__island-item i {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background: rgba(255, 255, 255, .18);
}

.wmtb-hero__island-item.is-active {
	background: var(--hero-accent);
	color: #fff;
	box-shadow: 0 6px 18px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .45);
}

.wmtb-hero--island .wmtb-hero__dots { display: none; }
.wmtb-hero--island.wmtb-hero--sa-inside .wmtb-hero__scroll { bottom: 82px; }

/* ==========================================================================
   Template 27: Interactive Story Reels (stories)
   ========================================================================== */

.wmtb-hero__stories {
	position: absolute;
	top: 14px;
	inset-inline: clamp(14px, 4vw, 42px);
	z-index: 8;
	display: flex;
	gap: 6px;
}

.wmtb-hero__story-seg {
	flex: 1 1 0;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .28);
	overflow: hidden;
	cursor: pointer;
}

.wmtb-hero__story-seg i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: #fff;
}

.wmtb-hero__story-seg.is-done i {
	width: 100%;
}

.wmtb-hero__story-seg.is-active i {
	width: 100%;
	background: var(--hero-accent);
	animation: wmtb-hero-progress var(--wmtb-hero-interval, 6s) linear forwards;
}

.wmtb-hero--stories .wmtb-hero__dots,
.wmtb-hero--stories .wmtb-hero__progress { display: none; }

/* ==========================================================================
   Template 28: Polaroid Collage (collage)
   ========================================================================== */

.wmtb-hero--collage {
	background: radial-gradient(circle at 50% 35%, rgba(var(--wmtb-accent-rgb, 109, 94, 252), .22), var(--wmtb-hero-bg, #10131f) 75%);
}

.wmtb-hero--collage .wmtb-hero__slide {
	inset: 18px auto 24px 50%;
	width: min(520px, 84vw);
	margin-inline-start: calc(min(520px, 84vw) / -2);
	padding: 12px 12px 20px;
	border-radius: 20px;
	background: #ffffff;
	color: #14161f !important;
	box-shadow: 0 26px 65px rgba(6, 8, 16, .38);
	opacity: 0;
	visibility: hidden;
	transform: translateX(calc(var(--pos, 0) * 44%)) rotate(calc(var(--pos, 0) * 5deg)) scale(calc(1 - min(var(--pos-abs, 3), 3) * .1));
	transition: transform .55s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1)), opacity .4s ease, visibility .4s;
}

.wmtb-hero--collage .wmtb-hero__slide[data-pos] {
	opacity: 1;
	visibility: visible;
}

.wmtb-hero--collage .wmtb-hero__slide[data-pos="0"] {
	z-index: 6;
	transform: translateX(0) rotate(-1deg) scale(1);
}

.wmtb-hero--collage .wmtb-hero__slide[data-pos="1"],
.wmtb-hero--collage .wmtb-hero__slide[data-pos="-1"] { z-index: 4; opacity: .78; }

.wmtb-hero--collage .wmtb-hero__media {
	border-radius: 14px;
	inset: 12px;
}

.wmtb-hero--collage .wmtb-hero__content {
	align-self: end;
	background: rgba(255, 255, 255, .9);
	color: #14161f;
	border-radius: 14px;
	padding: 16px 20px;
	margin: 8px;
	width: calc(100% - 16px);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* ==========================================================================
   6 New Scroll-Reactive Arrow Styles + Dynamic Scroll Morphing
   Variables updated on every scroll frame:
   --sa-prog   : 1 (top) -> 0 (scrolled past hero)
   --sa-scroll : 0 (top) -> 1 (scrolled past hero)
   --sa-vel    : 0 (idle) -> 1 (fast scroll)
   ========================================================================== */

/* Dynamic scale & glow modulation on scroll across all styles */
.wmtb-hero__scroll.is-scrolled {
	--sa-y: calc(var(--sa-scroll, 0) * 10px);
	--sa-s: calc(1 - var(--sa-scroll, 0) * .12 + var(--sa-vel, 0) * .14);
}

/* 7. Morphing Chevron-to-Dot (sa-morph)
   Starts as a dashed ring with a chevron; as the user scrolls, the ring
   tightens into a solid glowing orb and the chevron rotates 180deg. */
.sa-morph__shell {
	position: relative;
	width: 50px;
	height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: calc(16px + var(--sa-scroll, 0) * 34px);
	background: rgba(14, 16, 26, calc(.36 + var(--sa-scroll, 0) * .45));
	border: 1.5px solid rgba(255, 255, 255, .26);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 26px rgba(8, 10, 18, .28), 0 0 calc(var(--sa-scroll, 0) * 28px) var(--hero-accent);
	transition: border-radius .2s linear, background .2s linear, box-shadow .2s linear;
}

.sa-morph__ring {
	position: absolute;
	inset: 4px;
	border-radius: inherit;
	border: 1.5px dashed var(--hero-accent);
	opacity: calc(.45 + var(--sa-scroll, 0) * .55);
	transform: rotate(calc(var(--sa-scroll, 0) * 220deg)) scale(calc(1 - var(--sa-scroll, 0) * .22));
}

.sa-morph .sa-ico {
	transform: rotate(calc(var(--sa-scroll, 0) * 180deg)) scale(calc(1 - var(--sa-scroll, 0) * .18));
	transition: transform .18s linear;
}

/* 8. Liquid Droplet (sa-liquid)
   Stretches vertically into a falling teardrop as the user scrolls down. */
.sa-liquid__drop {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 50% 50% 50% 50% / calc(50% + var(--sa-scroll, 0) * 18%) calc(50% + var(--sa-scroll, 0) * 18%) calc(50% - var(--sa-scroll, 0) * 14%) calc(50% - var(--sa-scroll, 0) * 14%);
	background: linear-gradient(160deg, var(--hero-accent), var(--hero-accent-2));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 12px 28px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .45);
	transform: scaleX(calc(1 - var(--sa-vel, 0) * .16 - var(--sa-scroll, 0) * .1)) scaleY(calc(1 + var(--sa-vel, 0) * .26 + var(--sa-scroll, 0) * .22));
	transition: transform .16s ease-out;
}

.sa-liquid__tail {
	position: absolute;
	top: calc(-6px - var(--sa-scroll, 0) * 10px);
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: var(--hero-accent);
	opacity: calc(var(--sa-scroll, 0) * .85);
	transform: scale(calc(.4 + var(--sa-scroll, 0) * .8));
}

.sa-liquid .sa-ico svg { width: 20px; height: 20px; }

/* 9. Orbital Compass Ring (sa-orbit)
   Rotating SVG badge whose rotation angle accelerates with user scroll. */
.sa-orbit__wrap {
	position: relative;
	width: 64px;
	height: 64px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(14, 16, 26, .42);
	border: 1px solid rgba(255, 255, 255, .2);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.sa-orbit__svg {
	position: absolute;
	inset: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	fill: currentColor;
	font-size: 6.2px;
	font-weight: 800;
	letter-spacing: 1.5px;
	opacity: .82;
	transform: rotate(calc(var(--sa-scroll, 0) * 360deg));
	animation: sa-orbit-spin 14s linear infinite;
}

.wmtb-hero__scroll.is-down .sa-orbit__svg {
	animation-duration: 4s;
}

@keyframes sa-orbit-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.sa-orbit .sa-ico svg {
	width: 18px;
	height: 18px;
	transform: translateY(calc(var(--sa-scroll, 0) * 5px));
}

/* 10. Magnetic Pulse Beacon (sa-pulse)
   Concentric sonar waves that intensify and shift hue as the user scrolls. */
.sa-pulse__core {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--hero-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(var(--wmtb-accent-rgb, 109, 94, 252), .5);
}

.sa-pulse__w1,
.sa-pulse__w2 {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--hero-accent);
	pointer-events: none;
	animation: sa-pulse-wave calc(2.2s - var(--sa-vel, 0) * 1.1s) ease-out infinite;
}

.sa-pulse__w2 {
	animation-delay: .9s;
}

@keyframes sa-pulse-wave {
	0%   { transform: scale(1); opacity: .75; }
	100% { transform: scale(1.85); opacity: 0; }
}

.sa-pulse .sa-ico svg { width: 20px; height: 20px; }

/* 11. Scroll Thermometer Capsule (sa-capsule)
   Vertical glass capsule that fills with accent liquid as the user scrolls. */
.sa-capsule__tube {
	position: relative;
	width: 30px;
	height: 54px;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, .38);
	background: rgba(14, 16, 26, .38);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sa-capsule__fill {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: calc((1 - var(--sa-prog, 1)) * 100%);
	background: linear-gradient(to top, var(--hero-accent), var(--hero-accent-2));
	transition: height .12s linear;
}

.sa-capsule .sa-ico {
	position: relative;
	z-index: 2;
	transform: translateY(calc((1 - var(--sa-prog, 1)) * 8px - 4px));
}

/* 12. Origami Fold Arrow (sa-origami)
   Geometric wings fold inward as the user scrolls down the hero. */
.sa-origami__fold {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	perspective: 400px;
}

.sa-origami__fold svg {
	width: 34px;
	height: 34px;
	fill: rgba(var(--wmtb-accent-rgb, 109, 94, 252), calc(.22 + var(--sa-scroll, 0) * .5));
	filter: drop-shadow(0 6px 14px rgba(8, 10, 18, .35));
}

.sa-origami__fold .sa-ori-l {
	transform-origin: 18px 16px;
	transform: rotate(calc(var(--sa-scroll, 0) * -28deg));
	transition: transform .15s linear;
}

.sa-origami__fold .sa-ori-r {
	transform-origin: 18px 16px;
	transform: rotate(calc(var(--sa-scroll, 0) * 28deg));
	transition: transform .15s linear;
}

/* ==========================================================================
   14. Gallery collage (optional)
   --------------------------------------------------------------------------
   When a slide's own photo cannot fill the box (a square product shot in a
   wide hero, a portrait shot on a phone…), the runtime reveals a collage built
   from the product's album instead of leaving two letterboxed voids.

   Markup is server-rendered and hidden (`data-clg="0"`); the JS gate measures
   real coverage and flips it to `data-clg="1"`. The original photo stays in the
   DOM as a soft blurred backdrop, so the slide never looks empty.
   ========================================================================== */

.wmtb-hero--galclg {
	--wmtb-hero-clg-r: 14px;
	--wmtb-hero-clg-g: 8px;
	--wmtb-hero-clg-blur: 18px;
}

.wmtb-hero__collage {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	gap: var(--wmtb-hero-clg-g);
	padding: var(--wmtb-hero-clg-g);
	opacity: 0;
	visibility: hidden;
	transform: scale(1.03);
	transition: opacity .45s ease, transform .6s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1)), visibility .45s;
	pointer-events: none;
}

.wmtb-hero__collage[data-clg="1"] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wmtb-hero__clgcell {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	min-width: 0;
	min-height: 0;
	border-radius: var(--wmtb-hero-clg-r);
	background: rgba(255, 255, 255, .05);
	box-shadow: 0 12px 30px rgba(6, 8, 16, .26);
}

.wmtb-hero__clgimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The photo becomes the backdrop instead of a letterboxed strip. */
.wmtb-hero__slide.is-galclg .wmtb-hero__img {
	object-fit: cover;
	filter: blur(var(--wmtb-hero-clg-blur)) saturate(1.06) brightness(.9);
	transform: scale(1.14);
	opacity: .6;
}

.wmtb-hero__slide.is-galclg .wmtb-hero__scrim {
	opacity: calc(var(--wmtb-hero-scrim, .4) * .55);
}

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

.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="2"] {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="3"] {
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="3"] .wmtb-hero__clgcell:first-child {
	grid-row: span 2;
}

.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="4"] {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="5"] {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr 1fr;
}

.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="5"] .wmtb-hero__clgcell:first-child {
	grid-row: span 2;
}

.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="6"] {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr 1fr;
}

/* --- split (wide boxes: one hero tile + a column of details) ------------- */

.wmtb-hero__collage[data-clg-layout="split"][data-clg-count="2"] {
	grid-template-columns: 1.8fr 1fr;
	grid-template-rows: 1fr;
}

.wmtb-hero__collage[data-clg-layout="split"][data-clg-count="3"] {
	grid-template-columns: 1.8fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.wmtb-hero__collage[data-clg-layout="split"][data-clg-count="3"] .wmtb-hero__clgcell:first-child {
	grid-row: span 2;
}

.wmtb-hero__collage[data-clg-layout="split"][data-clg-count="4"],
.wmtb-hero__collage[data-clg-layout="split"][data-clg-count="5"],
.wmtb-hero__collage[data-clg-layout="split"][data-clg-count="6"] {
	grid-template-columns: 1.9fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.wmtb-hero__collage[data-clg-layout="split"] .wmtb-hero__clgcell:first-child {
	grid-row: span 2;
}

.wmtb-hero__collage[data-clg-layout="split"] .wmtb-hero__clgcell:nth-child(n + 6) {
	display: none;
}

/* --- mosaic (tall boxes) -------------------------------------------------- */

.wmtb-hero__collage[data-clg-layout="mosaic"] {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(3, 1fr);
}

.wmtb-hero__collage[data-clg-layout="mosaic"] .wmtb-hero__clgcell:nth-child(1) {
	grid-row: span 2;
}

.wmtb-hero__collage[data-clg-layout="mosaic"] .wmtb-hero__clgcell:nth-child(4) {
	grid-column: span 2;
}

.wmtb-hero__collage[data-clg-layout="mosaic"] .wmtb-hero__clgcell:nth-child(n + 5) {
	display: none;
}

/* --- fan (polaroid spread) ------------------------------------------------ */

.wmtb-hero__collage[data-clg-layout="fan"] {
	display: block;
	padding: 0;
	gap: 0;
}

.wmtb-hero__collage[data-clg-layout="fan"] .wmtb-hero__clgcell {
	position: absolute;
	top: 12%;
	width: 42%;
	height: 76%;
	border: 6px solid rgba(255, 255, 255, .92);
	border-radius: calc(var(--wmtb-hero-clg-r) * .5);
	box-shadow: 0 22px 46px rgba(5, 7, 14, .42);
	transition: transform .5s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1));
}

.wmtb-hero__collage[data-clg-layout="fan"] .wmtb-hero__clgcell:nth-child(1) {
	inset-inline-start: 5%;
	transform: rotate(-7deg);
	z-index: 1;
}

.wmtb-hero__collage[data-clg-layout="fan"] .wmtb-hero__clgcell:nth-child(2) {
	inset-inline-start: 29%;
	transform: rotate(2.5deg);
	z-index: 3;
}

.wmtb-hero__collage[data-clg-layout="fan"] .wmtb-hero__clgcell:nth-child(3) {
	inset-inline-start: 53%;
	transform: rotate(8deg);
	z-index: 2;
}

.wmtb-hero__collage[data-clg-layout="fan"] .wmtb-hero__clgcell:nth-child(n + 4) {
	display: none;
}

.wmtb-hero__collage[data-clg-layout="fan"][data-clg-count="2"] .wmtb-hero__clgcell:nth-child(1) {
	inset-inline-start: 14%;
}

.wmtb-hero__collage[data-clg-layout="fan"][data-clg-count="2"] .wmtb-hero__clgcell:nth-child(2) {
	inset-inline-start: 45%;
}

/* Narrow screens: fewer, larger tiles keep product photos recognisable. */
@media (max-width: 782px) {
	.wmtb-hero__collage[data-clg-count="5"] .wmtb-hero__clgcell:nth-child(n + 5),
	.wmtb-hero__collage[data-clg-count="6"] .wmtb-hero__clgcell:nth-child(n + 5) {
		display: none;
	}

	.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="6"],
	.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="5"] {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}

	.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="6"] .wmtb-hero__clgcell:first-child,
	.wmtb-hero__collage[data-clg-layout="grid"][data-clg-count="5"] .wmtb-hero__clgcell:first-child {
		grid-row: auto;
	}

	.wmtb-hero__collage[data-clg-layout="split"][data-clg-count="4"],
	.wmtb-hero__collage[data-clg-layout="split"][data-clg-count="5"],
	.wmtb-hero__collage[data-clg-layout="split"][data-clg-count="6"] {
		grid-template-columns: 1.5fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wmtb-hero__collage,
	.wmtb-hero__collage[data-clg-layout="fan"] .wmtb-hero__clgcell {
		transition: none;
	}
}

/* ==========================================================================
   15. Hero tucked under the transparent desktop bar
   ========================================================================== */

.wmtb-hero--under-bar {
	--wmtb-hero-under: calc(var(--wmtb-dbar-h, 58px) + var(--wmtb-dbar-top, 0px));
}

/* The bar overlays the top of the hero; keep controls clear of it. */
.wmtb-hero--under-bar .wmtb-hero__nav.is-prev,
.wmtb-hero--under-bar .wmtb-hero__nav.is-next {
	margin-top: var(--wmtb-hero-under, 0px);
}

@media (max-width: 782px) {
	/* Phones never render the desktop bar – no reservation needed. */
	.wmtb-hero--under-bar {
		--wmtb-hero-under: 0px;
	}
}

/* ==========================================================================
   14b. Aspect-aware & modern collage layouts
   --------------------------------------------------------------------------
   `--ar` (real width/height of each photo) and `--grow` are written per cell by
   the runtime from the dimensions the server printed on the tile, so the layout
   is correct on the very first paint – no square placeholders, no jump.
   ========================================================================== */

/* --- justified rows (every photo shown, minimal crop) ------------------- */

.wmtb-hero__collage[data-clg-layout="justified"],
.wmtb-hero__collage[data-clg-layout="fitrows"] {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: var(--wmtb-hero-clg-g);
}

.wmtb-hero__collage[data-clg-layout="justified"] .wmtb-hero__clgcell,
.wmtb-hero__collage[data-clg-layout="fitrows"] .wmtb-hero__clgcell {
	flex: var(--grow, 1) 1 var(--basis, 120px);
	height: var(--clg-rowh, 45%);
	min-width: 0;
}

/* fitrows = the same geometry with contain, so 100% of every photo is visible */
.wmtb-hero__collage[data-clg-layout="fitrows"] .wmtb-hero__clgimg {
	object-fit: contain;
	background: rgba(255, 255, 255, .05);
}

/* --- linear strips ------------------------------------------------------ */

.wmtb-hero__collage[data-clg-layout="rows"] {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--wmtb-hero-clg-g);
}

.wmtb-hero__collage[data-clg-layout="rows"] .wmtb-hero__clgcell {
	flex: var(--grow, 1) 1 0;
	height: 100%;
	min-width: 0;
}

.wmtb-hero__collage[data-clg-layout="cols"] {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--wmtb-hero-clg-g);
}

.wmtb-hero__collage[data-clg-layout="cols"] .wmtb-hero__clgcell {
	flex: var(--grow, 1) 1 0;
	width: 100%;
	min-height: 0;
}

/* --- masonry (aspect-aware columns) ------------------------------------- */

.wmtb-hero__collage[data-clg-layout="masonry"] {
	display: block;
	padding: var(--wmtb-hero-clg-g);
	column-gap: var(--wmtb-hero-clg-g);
	column-count: var(--clg-cols, 2);
}

.wmtb-hero__collage[data-clg-layout="masonry"] .wmtb-hero__clgcell {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	display: block;
	height: auto;
	margin: 0 0 var(--wmtb-hero-clg-g);
}

.wmtb-hero__collage[data-clg-layout="masonry"] .wmtb-hero__clgimg {
	height: auto;
	aspect-ratio: var(--ar, 1);
}

/* --- bento (modern asymmetric tiles) ------------------------------------ */

.wmtb-hero__collage[data-clg-layout="bento"] {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.wmtb-hero__collage[data-clg-layout="bento"] .wmtb-hero__clgcell:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

.wmtb-hero__collage[data-clg-layout="bento"] .wmtb-hero__clgcell:nth-child(2) {
	grid-column: span 2;
	grid-row: span 1;
}

.wmtb-hero__collage[data-clg-layout="bento"] .wmtb-hero__clgcell:nth-child(n + 3) {
	grid-column: span 1;
	grid-row: span 1;
}

/* --- diagonal bands (modern) -------------------------------------------- */

.wmtb-hero__collage[data-clg-layout="diagonal"] {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.wmtb-hero__collage[data-clg-layout="diagonal"] .wmtb-hero__clgcell {
	flex: 1 1 0;
	height: 132%;
	margin: -16% -5% 0;
	border-radius: 0;
	box-shadow: none;
	transform: skewX(-11deg);
	min-width: 0;
}

.wmtb-hero__collage[data-clg-layout="diagonal"] .wmtb-hero__clgimg {
	transform: skewX(11deg) scale(1.22);
}

.wmtb-hero__collage[data-clg-layout="diagonal"] .wmtb-hero__clgcell::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 10, 18, .28), transparent 45%);
}

/* --- overlapping cards (modern) ----------------------------------------- */

.wmtb-hero__collage[data-clg-layout="overlap"] {
	display: block;
	padding: 0;
	gap: 0;
}

.wmtb-hero__collage[data-clg-layout="overlap"] .wmtb-hero__clgcell {
	position: absolute;
	top: 16%;
	width: 44%;
	height: 68%;
	border-radius: calc(var(--wmtb-hero-clg-r) * 1.2);
	box-shadow: 0 22px 48px rgba(5, 7, 14, .46);
	transition: transform .5s var(--wmtb-ease, cubic-bezier(.32, .72, 0, 1));
}

.wmtb-hero__collage[data-clg-layout="overlap"] .wmtb-hero__clgcell:nth-child(1) {
	inset-inline-start: 5%;
	transform: rotate(-6deg);
	z-index: 1;
}

.wmtb-hero__collage[data-clg-layout="overlap"] .wmtb-hero__clgcell:nth-child(2) {
	inset-inline-start: 28%;
	transform: rotate(2deg) translateY(-5%);
	z-index: 3;
}

.wmtb-hero__collage[data-clg-layout="overlap"] .wmtb-hero__clgcell:nth-child(3) {
	inset-inline-start: 51%;
	transform: rotate(7deg);
	z-index: 2;
}

.wmtb-hero__collage[data-clg-layout="overlap"] .wmtb-hero__clgcell:nth-child(n + 4) {
	display: none;
}

/* --- tile fit: contain shows 100% of every photo ------------------------ */

.wmtb-hero--galclg-fit-contain .wmtb-hero__clgimg {
	object-fit: contain;
	background: rgba(255, 255, 255, .05);
}

/* --- how many tiles this box shows (no-JS fallback; the runtime also sets
       display:none on the extras) ---------------------------------------- */

.wmtb-hero__collage[data-clg-count="2"] .wmtb-hero__clgcell:nth-child(n + 3),
.wmtb-hero__collage[data-clg-count="3"] .wmtb-hero__clgcell:nth-child(n + 4),
.wmtb-hero__collage[data-clg-count="4"] .wmtb-hero__clgcell:nth-child(n + 5),
.wmtb-hero__collage[data-clg-count="5"] .wmtb-hero__clgcell:nth-child(n + 6),
.wmtb-hero__collage[data-clg-count="6"] .wmtb-hero__clgcell:nth-child(n + 7) {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.wmtb-hero__collage[data-clg-layout="overlap"] .wmtb-hero__clgcell,
	.wmtb-hero__collage[data-clg-layout="diagonal"] .wmtb-hero__clgcell {
		transition: none;
	}
}