/* ==========================================================================
   Promotion card (inc/modules/ui-promo.php + assets/js/promo.js)
   Bottom-right offer driven by an EDD discount code: an illustrated, animated
   scene per holiday (--halloween, --christmas, --usa… plus --brand), the
   discount as the headline, a flip-tile countdown and a ticket-style code.
   Minimises to a pill. Loaded only while a campaign is live; every animation
   stops for prefers-reduced-motion and while the tab is hidden.
   ========================================================================== */

@property --pr-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.wpi-promo {
	/* Palette (overridden per style). */
	--pr-bg: var(--ink, #0B0B12);
	--pr-stage: radial-gradient(120% 140% at 85% 0%, rgba(76, 91, 255, .55), transparent 60%), linear-gradient(160deg, #1B1F4A, #0B0B12);
	--pr-accent: var(--indigo, #4C5BFF);
	--pr-accent-2: var(--peri, #A9B1FF);
	--pr-glow: rgba(76, 91, 255, .45);
	--pr-cta-fg: #fff;
	--pr-line: rgba(255, 255, 255, .12);
	--pr-muted: rgba(255, 255, 255, .72);
	--pa: #A9B1FF; --pb: #4C5BFF; --pc: #fff; --pl: #C9CEFF; --pd: #6EE7A8;
	--pr-spring: cubic-bezier(.34, 1.56, .64, 1);
	--pr-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);

	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 79; /* below the product floatbar (80) and the nav drawer (85) */
	width: min(356px, calc(100vw - 2rem));
	color: #fff;
	transition: bottom .5s var(--ease);
	pointer-events: none;
}

.wpi-promo[hidden],
.wpi-promo [hidden] {
	display: none !important;
}

.wpi-promo,
.wpi-promo *,
.wpi-promo *::before,
.wpi-promo *::after {
	box-sizing: border-box;
}

.wpi-promo p {
	margin: 0;
}

/* ---------- Card ---------- */
.wpi-promo__card {
	--rx: 0deg;
	--ry: 0deg;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 22px;
	background: var(--pr-bg);
	box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .75), 0 0 0 1px var(--pr-line), 0 18px 50px -30px var(--pr-glow);
	pointer-events: auto;
	opacity: 0;
	transform: perspective(900px) translateY(calc(100% + 3rem)) rotateX(var(--rx)) rotateY(var(--ry)) scale(.9);
	filter: blur(6px);
	transition: transform .9s var(--pr-spring), opacity .45s var(--ease), filter .6s var(--ease);
}

.wpi-promo.is-visible .wpi-promo__card {
	opacity: 1;
	filter: none;
	transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
}

.wpi-promo.is-tilting .wpi-promo__card {
	transition: transform .25s var(--ease), opacity .45s var(--ease);
}

/* Travelling light around the edge. */
.wpi-promo__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	padding: 1.5px;
	border-radius: inherit;
	background: conic-gradient(from var(--pr-angle), transparent 0 55%, var(--pr-accent) 72%, var(--pr-accent-2) 82%, transparent 92%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
	animation: wpi-pr-angle 5s linear infinite;
}

/* Glossy sweep every few seconds. */
.wpi-promo__card::after {
	content: "";
	position: absolute;
	inset: -50% auto -50% -60%;
	z-index: 2;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13), transparent);
	transform: translateX(-120%) rotate(12deg);
	pointer-events: none;
	animation: wpi-pr-sheen 7s var(--ease) 1.4s infinite;
}

/* ---------- Close (minimise) ---------- */
.wpi-promo__close {
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 4;
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	transition: background-color .25s var(--ease), transform .35s var(--pr-spring);
}

.wpi-promo__close:hover {
	background: rgba(0, 0, 0, .6);
	transform: rotate(90deg);
}

/* ---------- Stage: sky, particles, illustration ---------- */
.wpi-promo__stage {
	position: relative;
	height: 128px;
	overflow: hidden;
	background: var(--pr-stage);
}

.wpi-promo__stage::after {
	/* Melt the scene into the card body. */
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 46px;
	background: linear-gradient(transparent, var(--pr-bg));
	pointer-events: none;
}

.wpi-promo__fx {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wpi-promo__art {
	position: absolute;
	right: 34px;
	bottom: -2px;
	z-index: 1;
	width: 118px;
	height: 118px;
	overflow: visible;
	filter: drop-shadow(0 10px 22px var(--pr-glow));
	opacity: 0;
	transform: translateY(24px) scale(.8) rotate(-6deg);
	transition: opacity .6s var(--ease) .35s, transform 1s var(--pr-spring) .35s;
}

.wpi-promo.is-visible .wpi-promo__art {
	opacity: 1;
	transform: none;
}

.wpi-promo__art .pa { fill: var(--pa); }
.wpi-promo__art .pb { fill: var(--pb); }
.wpi-promo__art .pc { fill: var(--pc); stroke: var(--pc); }
.wpi-promo__art .pc[fill="none"] { fill: none; }
.wpi-promo__art .pl { fill: var(--pl); stroke: var(--pl); }
.wpi-promo__art .pl[fill="none"] { fill: none; }
.wpi-promo__art .pd { fill: var(--pd); stroke: var(--pd); }
.wpi-promo__art .pd[fill="none"] { fill: none; }
.wpi-promo__art rect.pb { stroke: var(--pl); }
.wpi-pr-burst { fill: currentColor; stroke: currentColor; }
.wpi-pr-burst.pa { color: var(--pa); }
.wpi-pr-burst.pc { color: var(--pc); }
.wpi-pr-burst.pl { color: var(--pl); }
.wpi-pr-moon { fill: #FFF1D0; filter: drop-shadow(0 0 14px rgba(255, 236, 190, .7)); }

/* Scene motion. */
.wpi-pr-bob { transform-origin: 60px 100px; animation: wpi-pr-bob 3.6s ease-in-out infinite; }
.wpi-pr-sway { animation: wpi-pr-sway 4.2s ease-in-out infinite; }
.wpi-pr-sway--slow { animation-duration: 5.6s; animation-direction: reverse; }
.wpi-pr-swing { animation: wpi-pr-swing 3.4s ease-in-out infinite; }
.wpi-pr-swing--alt { animation-duration: 2.8s; animation-delay: -1.2s; }
.wpi-pr-flicker { animation: wpi-pr-flicker 2.6s steps(1) infinite; }
.wpi-pr-twinkle { transform-box: fill-box; transform-origin: center; animation: wpi-pr-twinkle 2.4s ease-in-out infinite; }
.wpi-pr-twinkle--2 { animation-delay: -1.1s; }
.wpi-pr-spin { animation: wpi-pr-spin 14s linear infinite; }
.wpi-pr-spin--slow { animation: wpi-pr-sway 6s ease-in-out infinite; }
.wpi-pr-beat { animation: wpi-pr-beat 1.6s ease-in-out infinite; }
.wpi-pr-float { animation: wpi-pr-float 3.2s ease-in-out infinite; }
.wpi-pr-click { transform-box: fill-box; transform-origin: 0 0; animation: wpi-pr-click 2.2s ease-in-out infinite; }
.wpi-pr-wave { animation: wpi-pr-wave 1.6s linear infinite; }
.wpi-pr-flag { animation: wpi-pr-flag 2.4s ease-in-out infinite; }
.wpi-pr-burst { animation: wpi-pr-burst 2.4s var(--ease) infinite; }
.wpi-pr-burst--2 { animation-delay: -.8s; }
.wpi-pr-burst--3 { animation-delay: -1.6s; }

/* ---------- Particles (built by promo.js) ---------- */
.wpi-promo__p {
	position: absolute;
	top: 0;
	left: var(--x);
	width: var(--s);
	height: var(--s);
	background: var(--c);
	opacity: 0;
	animation: var(--m) var(--d) linear var(--delay) infinite;
}

.wpi-promo__p.is-dot { border-radius: 50%; }
.wpi-promo__p.is-confetti { height: calc(var(--s) * .45); border-radius: 2px; }
.wpi-promo__p.is-pixel { border-radius: 1px; box-shadow: 0 0 8px var(--c); }
.wpi-promo__p.is-coin { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF4B8, var(--c) 55%, #B8860B); }
.wpi-promo__p.is-petal { border-radius: 70% 0; }
.wpi-promo__p.is-bat,
.wpi-promo__p.is-leaf,
.wpi-promo__p.is-heart,
.wpi-promo__p.is-star,
.wpi-promo__p.is-spark {
	-webkit-mask: var(--shape) center / contain no-repeat;
	mask: var(--shape) center / contain no-repeat;
}

.wpi-promo__p.is-bat { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 4.5c-.8 0-1.3-.9-1.6-1.6L9.8 4.3C8.3 3 5 2.4 1 4.3c2 .6 3.3 2.2 3.3 4 1-.9 2.7-1.2 3.8-.2.9-1 2.5-1.3 3.9.2 1.4-1.5 3-1.2 3.9-.2 1.1-1 2.8-.7 3.8.2 0-1.8 1.3-3.4 3.3-4-4-1.9-7.3-1.3-8.8 0l-.6-1.4c-.3.7-.8 1.6-1.6 1.6z'/%3E%3C/svg%3E"); height: calc(var(--s) * .5); }
.wpi-promo__p.is-leaf { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2 4 3-1.5-1 4.5 4-1-2 3 2.5 1.5-5.5 2.2.8 2.3-3.8-1.1-3.8 1.1.8-2.3-5.5-2.2L5 11 3 8l4 1-1-4.5L9 6z'/%3E%3C/svg%3E"); }
.wpi-promo__p.is-heart { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-9-5.6-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.4-9 12-9 12z'/%3E%3C/svg%3E"); }
.wpi-promo__p.is-star { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .8-5.2 4.8 1.4 7L12 17.6 5.8 21l1.4-7L2 9.3l7-.8z'/%3E%3C/svg%3E"); }
.wpi-promo__p.is-spark { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1 7 5 11 12 12-7 1-11 5-12 12-1-7-5-11-12-12 7-1 11-5 12-12z'/%3E%3C/svg%3E"); }

/* Copy confetti. */
.wpi-promo__burst {
	position: absolute;
	z-index: 5;
	width: 7px;
	height: 4px;
	border-radius: 1px;
	background: var(--c);
	pointer-events: none;
	animation: wpi-pr-pop .9s cubic-bezier(.2, .7, .3, 1) forwards;
}

/* ---------- Headline deal ---------- */
.wpi-promo__deal {
	position: absolute;
	top: 22px;
	left: 1.25rem;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: .3rem;
	line-height: .82;
	opacity: 0;
	transform: translateY(14px) scale(.9);
	transform-origin: 0 100%;
	transition: opacity .5s var(--ease) .25s, transform .9s var(--pr-spring) .25s;
}

.wpi-promo.is-visible .wpi-promo__deal {
	opacity: 1;
	transform: none;
}

.wpi-promo__amount {
	font-size: clamp(2.9rem, 9vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -.045em;
	background: linear-gradient(180deg, #fff 30%, var(--pr-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 6px 18px var(--pr-glow));
}

.wpi-promo__off {
	margin-bottom: .32rem;
	padding: .3rem .5rem .26rem;
	border-radius: 6px;
	background: var(--pr-accent);
	color: var(--pr-cta-fg);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	transform: rotate(-6deg);
	animation: wpi-pr-wiggle 5s var(--ease) 2s infinite;
}

/* ---------- Body ---------- */
.wpi-promo__body {
	position: relative;
	z-index: 1;
	display: grid;
	gap: .4rem;
	margin-top: -14px;
	padding: 0 1.25rem 1.2rem;
}

.wpi-promo__body > * {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .5s var(--ease), transform .7s var(--pr-spring);
}

.wpi-promo.is-visible .wpi-promo__body > * { opacity: 1; transform: none; }
.wpi-promo.is-visible .wpi-promo__body > :nth-child(1) { transition-delay: .4s; }
.wpi-promo.is-visible .wpi-promo__body > :nth-child(2) { transition-delay: .47s; }
.wpi-promo.is-visible .wpi-promo__body > :nth-child(3) { transition-delay: .54s; }
.wpi-promo.is-visible .wpi-promo__body > :nth-child(4) { transition-delay: .61s; }
.wpi-promo.is-visible .wpi-promo__body > :nth-child(5) { transition-delay: .68s; }
.wpi-promo.is-visible .wpi-promo__body > :nth-child(6) { transition-delay: .75s; }

.wpi-promo__eyebrow {
	display: flex;
	align-items: center;
	gap: .45rem;
	color: var(--pr-accent-2);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wpi-promo__eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pr-accent);
	box-shadow: 0 0 0 0 var(--pr-accent);
	animation: wpi-pr-ping 2s ease-out infinite;
}

.wpi-promo__title {
	font-size: 1.22rem;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
}

.wpi-promo__text {
	color: var(--pr-muted);
	font-size: var(--wp--preset--font-size--small, 15px);
	line-height: 1.45;
}

.wpi-promo__text strong {
	color: #fff;
	font-weight: 600;
}

.wpi-promo__text code {
	font-family: var(--pr-mono);
	font-size: .9em;
	color: #fff;
}

/* ---------- Pass price ---------- */
.wpi-promo__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .55rem;
	margin-top: .15rem;
}

.wpi-promo__product {
	padding: .22rem .55rem;
	border: 1px solid var(--pr-line);
	border-radius: 999px;
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	align-self: center;
}

.wpi-promo__price s {
	color: var(--pr-muted);
	font-size: .95rem;
	text-decoration-color: var(--pr-accent);
	text-decoration-thickness: 2px;
}

.wpi-promo__price strong {
	color: var(--pr-accent-2);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

/* ---------- Countdown ---------- */
.wpi-promo__timer {
	display: flex;
	gap: .35rem;
	margin-top: .3rem;
}

.wpi-promo__tile {
	display: grid;
	justify-items: center;
	min-width: 48px;
	padding: .4rem .35rem .3rem;
	border: 1px solid var(--pr-line);
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
	overflow: hidden;
}

.wpi-promo__tile b {
	display: block;
	font: 600 1.1rem/1 var(--pr-mono);
	font-variant-numeric: tabular-nums;
}

.wpi-promo__tile b.is-tick {
	animation: wpi-pr-tick .45s var(--pr-spring);
}

.wpi-promo__tile i {
	margin-top: .2rem;
	color: var(--pr-muted);
	font-size: .62rem;
	font-style: normal;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ---------- Actions ---------- */
.wpi-promo__actions {
	display: flex;
	align-items: stretch;
	gap: .5rem;
	margin-top: .55rem;
}

.wpi-promo .wpi-promo__cta {
	--bg: var(--pr-accent);
	--fg: var(--pr-cta-fg);
	position: relative;
	flex: 1 1 auto;
	min-height: 44px;
	overflow: hidden;
	padding: .7em 1em;
	color: var(--pr-cta-fg);
	font-size: var(--wp--preset--font-size--x-small, 13px);
	font-weight: 600;
	box-shadow: 0 10px 26px -12px var(--pr-accent);
	transition: transform .35s var(--pr-spring), box-shadow .35s var(--ease);
}

.wpi-promo .wpi-promo__cta:hover {
	--bg: var(--pr-accent);
	color: var(--pr-cta-fg);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -12px var(--pr-accent);
}

.wpi-promo__cta::before {
	/* Light that runs across the button. */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
	transform: translateX(-120%);
	animation: wpi-pr-sheen 4.5s var(--ease) 2s infinite;
}

.wpi-promo__cta svg {
	transition: transform .35s var(--pr-spring);
}

.wpi-promo__cta:hover svg {
	transform: translateX(4px);
}

/* Ticket with notches. */
.wpi-promo__code {
	position: relative;
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
	padding: 0 .95rem;
	border: 1.5px dashed rgba(255, 255, 255, .4);
	border-radius: 10px;
	background: rgba(255, 255, 255, .05);
	color: #fff;
	font: 600 .78rem/1 var(--pr-mono);
	letter-spacing: .05em;
	cursor: copy;
	transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .35s var(--pr-spring);
}

.wpi-promo__code::before,
.wpi-promo__code::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--pr-bg);
	transform: translateY(-50%);
}

.wpi-promo__code::before { left: -6px; }
.wpi-promo__code::after { right: -6px; }

.wpi-promo__code:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
	transform: translateY(-2px) rotate(-1.5deg);
}

.wpi-promo__code svg {
	opacity: .7;
}

.wpi-promo__code.is-copied {
	border-style: solid;
	border-color: #6EE7A8;
	color: #6EE7A8;
	animation: wpi-pr-beat .5s var(--pr-spring);
}

/* ---------- Minimised pill ---------- */
.wpi-promo__pill {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(20px) scale(.8);
	transition: opacity .35s var(--ease), transform .6s var(--pr-spring);
}

.wpi-promo.is-pill .wpi-promo__pill {
	opacity: 1;
	transform: none;
}

.wpi-promo__pill-open {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	max-width: calc(100vw - 2rem);
	padding: .35rem 1.1rem .35rem .35rem;
	border: 1px solid var(--pr-line);
	border-radius: 999px;
	background: var(--pr-bg);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 4px color-mix(in srgb, var(--pr-accent) 25%, transparent);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small, 13px);
	white-space: nowrap;
	cursor: pointer;
	animation: wpi-pr-nudge 7s var(--ease) 3s infinite;
}

.wpi-promo__pill-open strong {
	color: var(--pr-accent-2);
}

.wpi-promo__pill-art {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--pr-stage);
}

.wpi-promo__pill-art .wpi-promo__art {
	position: static;
	width: 30px;
	height: 30px;
	opacity: 1;
	transform: none;
	filter: none;
}

.wpi-promo__pill-x {
	position: absolute;
	top: -7px;
	right: -7px;
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--ink, #0B0B12);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
	cursor: pointer;
}

/* ---------- Styles ---------- */
.wpi-promo--halloween {
	--pr-bg: #130C1D;
	--pr-stage: radial-gradient(60% 90% at 70% 10%, rgba(255, 196, 120, .35), transparent 70%), linear-gradient(170deg, #3A1A5C, #1A0F2A 70%);
	--pr-accent: #FF7A1A; --pr-accent-2: #FFB066; --pr-glow: rgba(255, 122, 26, .45); --pr-cta-fg: #1A0F05;
	--pa: #FF8A1F; --pb: #E2620E; --pc: #FFE29A; --pl: #5FD38D;
}

.wpi-promo--thanksgiving {
	--pr-bg: #20110A;
	--pr-stage: radial-gradient(80% 120% at 80% 0%, rgba(255, 170, 80, .45), transparent 65%), linear-gradient(170deg, #5A2A12, #20110A 75%);
	--pr-accent: #EE8E2E; --pr-accent-2: #F7C47E; --pr-glow: rgba(238, 142, 46, .4); --pr-cta-fg: #1E1006;
	--pa: #E8632B; --pb: #C2410C; --pc: #F7C47E; --pl: #7A3A16;
}

.wpi-promo--blackfriday {
	--pr-bg: #060607;
	--pr-stage: repeating-linear-gradient(135deg, rgba(255, 225, 77, .1) 0 14px, transparent 14px 28px), radial-gradient(70% 120% at 80% 10%, rgba(255, 225, 77, .3), transparent 70%), #0B0B0D;
	--pr-accent: #FFE14D; --pr-accent-2: #FFE14D; --pr-glow: rgba(255, 225, 77, .35); --pr-cta-fg: #060607;
	--pa: #FFE14D; --pb: #E8C12E; --pc: #fff; --pl: #8A8A8A; --pd: #0B0B0D;
}

.wpi-promo--blackfriday .wpi-promo__stage { background-size: 40px 40px, auto, auto; animation: wpi-pr-stripes 2s linear infinite; }

.wpi-promo--cybermonday {
	--pr-bg: #050A1E;
	--pr-stage: linear-gradient(transparent 55%, rgba(34, 211, 238, .25)), radial-gradient(70% 120% at 80% 0%, rgba(255, 79, 216, .35), transparent 70%), linear-gradient(180deg, #0A1236, #050A1E);
	--pr-accent: #22D3EE; --pr-accent-2: #7DF9FF; --pr-glow: rgba(34, 211, 238, .45); --pr-cta-fg: #04121A;
	--pa: #22D3EE; --pb: #0E2A4A; --pc: #FF4FD8; --pl: #22D3EE; --pd: #fff;
}

.wpi-promo--cybermonday .wpi-promo__stage::before {
	/* Synthwave grid floor. */
	content: "";
	position: absolute;
	inset: 50% -50% -40%;
	background: repeating-linear-gradient(90deg, rgba(34, 211, 238, .45) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(34, 211, 238, .45) 0 1px, transparent 1px 22px);
	transform: perspective(160px) rotateX(58deg);
	transform-origin: 50% 0;
	animation: wpi-pr-grid 1.4s linear infinite;
	-webkit-mask: linear-gradient(transparent, #000 60%);
	mask: linear-gradient(transparent, #000 60%);
}

.wpi-promo--cybermonday .wpi-promo__amount { animation: wpi-pr-glitch 4s steps(1) 1.5s infinite; }

.wpi-promo--christmas {
	--pr-bg: #0A1F15;
	--pr-stage: radial-gradient(70% 120% at 75% 0%, rgba(244, 210, 122, .3), transparent 65%), linear-gradient(175deg, #134A2F, #0A1F15 75%);
	--pr-accent: #E23B3B; --pr-accent-2: #F4D27A; --pr-glow: rgba(226, 59, 59, .4); --pr-cta-fg: #fff;
	--pa: #E23B3B; --pb: #E9EEF5; --pc: #F4D27A; --pl: #F4D27A;
}

.wpi-promo--newyear {
	--pr-bg: #0A0A18;
	--pr-stage: radial-gradient(60% 100% at 30% 20%, rgba(244, 201, 93, .25), transparent 70%), radial-gradient(60% 100% at 85% 40%, rgba(255, 92, 168, .25), transparent 70%), linear-gradient(180deg, #17173A, #0A0A18);
	--pr-accent: #F4C95D; --pr-accent-2: #F4C95D; --pr-glow: rgba(244, 201, 93, .4); --pr-cta-fg: #17110A;
	--pa: #F4C95D; --pc: #FF5CA8; --pl: #8FD3FF;
}

.wpi-promo--valentine {
	--pr-bg: #250A17;
	--pr-stage: radial-gradient(70% 120% at 75% 10%, rgba(255, 120, 160, .45), transparent 65%), linear-gradient(170deg, #5A1534, #250A17 75%);
	--pr-accent: #FF4D7E; --pr-accent-2: #FFB3C7; --pr-glow: rgba(255, 77, 126, .45); --pr-cta-fg: #fff;
	--pa: #FF4D7E; --pb: #FFB3C7; --pc: #fff;
}

.wpi-promo--stpatrick {
	--pr-bg: #071D0E;
	--pr-stage: radial-gradient(70% 120% at 80% 0%, rgba(244, 210, 122, .3), transparent 65%), linear-gradient(170deg, #14532D, #071D0E 75%);
	--pr-accent: #34C759; --pr-accent-2: #A7F3B5; --pr-glow: rgba(52, 199, 89, .4); --pr-cta-fg: #03150A;
	--pa: #34C759; --pb: #22A04A; --pc: #F4D27A; --pl: #1F8A3B;
}

.wpi-promo--spring {
	--pr-bg: #1B0F27;
	--pr-stage: radial-gradient(70% 120% at 80% 0%, rgba(255, 186, 220, .4), transparent 65%), linear-gradient(170deg, #4A2366, #1B0F27 75%);
	--pr-accent: #F49AC2; --pr-accent-2: #FBD3E6; --pr-glow: rgba(244, 154, 194, .4); --pr-cta-fg: #2A0E1C;
	--pa: #F49AC2; --pc: #FFD66B; --pl: #5FD38D;
}

.wpi-promo--summer {
	--pr-bg: #08192A;
	--pr-stage: radial-gradient(70% 120% at 75% 30%, rgba(255, 200, 80, .45), transparent 65%), linear-gradient(180deg, #1C6BA0, #08192A 80%);
	--pr-accent: #FFB020; --pr-accent-2: #FFD27A; --pr-glow: rgba(255, 176, 32, .45); --pr-cta-fg: #1C1102;
	--pa: #FFC23A; --pl: #FFD27A; --pd: #14141A;
}

.wpi-promo--usa {
	--pr-bg: #0A1433;
	--pr-stage: radial-gradient(70% 120% at 80% 0%, rgba(168, 197, 255, .3), transparent 65%), linear-gradient(175deg, #1B2C6B, #0A1433 75%);
	--pr-accent: #E63946; --pr-accent-2: #A8C5FF; --pr-glow: rgba(230, 57, 70, .4); --pr-cta-fg: #fff;
	--pa: #fff; --pl: #E63946; --pd: #fff;
}

.wpi-promo--uk {
	--pr-bg: #0B1640;
	--pr-stage: radial-gradient(70% 120% at 80% 0%, rgba(175, 195, 255, .3), transparent 65%), linear-gradient(175deg, #1B2D7A, #0B1640 75%);
	--pr-accent: #E4002B; --pr-accent-2: #AFC3FF; --pr-glow: rgba(228, 0, 43, .35); --pr-cta-fg: #fff;
	--pa: #E4002B; --pb: #3D5BFF; --pd: #fff; --pl: rgba(255, 255, 255, .7);
}

/* ---------- Keyframes ---------- */
@keyframes wpi-pr-angle { to { --pr-angle: 360deg; } }
@keyframes wpi-pr-sheen { 0%, 70% { transform: translateX(-120%) rotate(12deg); } 100% { transform: translateX(420%) rotate(12deg); } }
@keyframes wpi-pr-bob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
@keyframes wpi-pr-sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes wpi-pr-swing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes wpi-pr-flicker { 0%, 100% { opacity: 1; } 40% { opacity: .55; } 42% { opacity: 1; } 70% { opacity: .75; } 72% { opacity: 1; } }
@keyframes wpi-pr-twinkle { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes wpi-pr-spin { to { transform: rotate(360deg); } }
@keyframes wpi-pr-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(.97); } 45% { transform: scale(1.06); } }
@keyframes wpi-pr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wpi-pr-click { 0%, 60%, 100% { transform: translate(0, 0); } 70% { transform: translate(-3px, -3px) scale(.85); } 80% { transform: translate(0, 0); } }
@keyframes wpi-pr-wave { to { transform: translateX(50px); } }
@keyframes wpi-pr-flag { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes wpi-pr-burst { 0% { transform: scale(.1); opacity: 0; } 15% { opacity: 1; } 60% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes wpi-pr-stripes { to { background-position: 40px 0, 0 0, 0 0; } }
@keyframes wpi-pr-grid { to { background-position: 0 22px, 0 22px; } }
@keyframes wpi-pr-glitch { 0%, 92%, 100% { text-shadow: none; transform: none; } 93% { transform: translate(-2px, 1px) skewX(-8deg); filter: drop-shadow(2px 0 #FF4FD8) drop-shadow(-2px 0 #22D3EE); } 95% { transform: translate(2px, -1px); } 97% { transform: none; filter: drop-shadow(-2px 0 #FF4FD8); } }
@keyframes wpi-pr-wiggle { 0%, 88%, 100% { transform: rotate(-6deg); } 91% { transform: rotate(6deg) scale(1.1); } 94% { transform: rotate(-10deg); } 97% { transform: rotate(-4deg); } }
@keyframes wpi-pr-ping { 0% { box-shadow: 0 0 0 0 var(--pr-accent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes wpi-pr-tick { 0% { transform: translateY(-70%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes wpi-pr-nudge { 0%, 86%, 100% { transform: none; } 89% { transform: translateY(-5px) rotate(-2deg); } 92% { transform: translateY(0) rotate(2deg); } 95% { transform: translateY(-2px); } }
@keyframes wpi-pr-pop { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

/* Particle motions. */
@keyframes wpi-pr-fall {
	0% { transform: translate(0, -20px) rotate(0); opacity: 0; }
	10% { opacity: var(--o, .9); }
	85% { opacity: var(--o, .9); }
	100% { transform: translate(var(--dx), 150px) rotate(var(--r)); opacity: 0; }
}
@keyframes wpi-pr-rise {
	0% { transform: translate(0, 140px) scale(.6); opacity: 0; }
	20% { opacity: var(--o, .9); }
	100% { transform: translate(var(--dx), -10px) scale(1); opacity: 0; }
}
@keyframes wpi-pr-fly {
	0% { transform: translate(-40px, var(--y)) scaleY(1); opacity: 0; }
	8% { opacity: var(--o, .9); }
	20% { transform: translate(70px, calc(var(--y) - 10px)) scaleY(.4); }
	40% { transform: translate(150px, calc(var(--y) + 6px)) scaleY(1); }
	60% { transform: translate(230px, calc(var(--y) - 8px)) scaleY(.4); }
	80% { transform: translate(310px, calc(var(--y) + 4px)) scaleY(1); opacity: var(--o, .9); }
	100% { transform: translate(400px, var(--y)) scaleY(.4); opacity: 0; }
}
@keyframes wpi-pr-glint {
	0%, 100% { transform: translateY(var(--y)) scale(0) rotate(0); opacity: 0; }
	50% { transform: translateY(var(--y)) scale(1) rotate(90deg); opacity: var(--o, 1); }
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
	.wpi-promo {
		right: 1rem;
		left: 1rem;
		width: auto;
	}

	.wpi-promo__stage { height: 104px; }
	.wpi-promo__art { width: 100px; height: 100px; right: 30px; }
	.wpi-promo__deal { top: 18px; }
	.wpi-promo__title { font-size: 1.08rem; }
	.wpi-promo__text { font-size: 14px; }
	.wpi-promo__tile { min-width: 42px; }
	.wpi-promo__pill { left: auto; }
}

/* Product floatbar sits bottom-centre: lift the card above it where they'd meet. */
@media (max-width: 1180px) {
	body:has(.wpi-floatbar.is-visible) .wpi-promo {
		bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem);
	}
}

html.nav-open .wpi-promo {
	visibility: hidden;
}

/* Hidden tab or off-screen work: freeze everything. */
.wpi-promo.is-paused *,
.wpi-promo.is-paused *::before,
.wpi-promo.is-paused *::after {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	.wpi-promo *,
	.wpi-promo *::before,
	.wpi-promo *::after {
		animation: none !important;
	}

	.wpi-promo__card,
	.wpi-promo__art,
	.wpi-promo__deal,
	.wpi-promo__body > *,
	.wpi-promo__pill {
		transform: none !important;
		filter: none !important;
		transition: opacity .2s linear !important;
	}

	.wpi-promo__fx {
		display: none;
	}
}