.spp-page-wrap {
	max-width: 1250px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.spp-hero {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	margin: 0 0 0 0 !important;
	padding: 0;
	min-height: 200px;
	display: flex;
	align-items: stretch;
	background: #060612;
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .1), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}

.spp-hero .spp-fire-gif, .spp-hero-fire {
	display: none !important;
}

.spp-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #7c3aed, #e63946, #f4810a, #fbbf24, #f4810a, #e63946, #7c3aed);
	background-size: 300% 100%;
	animation: sppHeroLine 4s linear infinite;
	z-index: 5;
	border-radius: 24px 24px 0 0;
}

.spp-hero-live {
	background: radial-gradient(ellipse 80% 120% at 85% 50%, rgba(220, 38, 38, .28) 0%, transparent 65%), radial-gradient(ellipse 50% 80% at 10% 20%, rgba(124, 58, 237, .18) 0%, transparent 60%), radial-gradient(ellipse 60% 60% at 50% 100%, rgba(244, 129, 10, .12) 0%, transparent 55%), #060612;
}

.spp-hero-upcoming {
	background: radial-gradient(ellipse 80% 120% at 85% 50%, rgba(99, 102, 241, .3) 0%, transparent 65%), radial-gradient(ellipse 50% 80% at 10% 20%, rgba(139, 92, 246, .18) 0%, transparent 60%), radial-gradient(ellipse 60% 60% at 50% 100%, rgba(59, 130, 246, .1) 0%, transparent 55%), #060612;
}

.spp-hero-inactive, .spp-hero-ended {
	background: radial-gradient(ellipse 70% 100% at 85% 50%, rgba(71, 85, 105, .25) 0%, transparent 65%), #0a0a14;
	border-color: rgba(255, 255, 255, .05);
}

.spp-hero-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	filter: blur(1px);
}

.spp-hero-orb-1 {
	width: 400px;
	height: 400px;
	top: -180px;
	right: -80px;
	background: radial-gradient(circle, rgba(230, 57, 70, .22) 0%, rgba(244, 129, 10, .08) 40%, transparent 65%);
	animation: sppHeroGlow 7s ease-in-out infinite;
}

.spp-hero-orb-2 {
	width: 280px;
	height: 280px;
	bottom: -120px;
	left: 20%;
	background: radial-gradient(circle, rgba(124, 58, 237, .18) 0%, rgba(59, 130, 246, .06) 45%, transparent 65%);
	animation: sppHeroGlow 9s ease-in-out infinite reverse;
}

.spp-hero-dots {
	position: absolute;
	right: 36%;
	bottom: -30px;
	width: 120px;
	height: 120px;
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: 50%;
	animation: sppHeroSpin 22s linear infinite;
	pointer-events: none;
	z-index: 0;
}

.spp-hero-dots::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(230, 57, 70, .12);
	border-radius: 50%;
	animation: sppHeroSpin 14s linear infinite reverse;
}

.spp-hero-dots::after {
	content: "";
	position: absolute;
	inset: 30px;
	border: 1px dashed rgba(244, 129, 10, .1);
	border-radius: 50%;
}

.spp-hero-disc-bg {
	position: absolute;
	right: 290px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Unbounded", sans-serif;
	font-size: clamp(60px, 8vw, 100px);
	font-weight: 900;
	color: rgba(255, 255, 255, .04);
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
	letter-spacing: -2px;
	user-select: none;
}

.spp-hero-pill-pct {
	font-weight: 900;
	font-size: 14px;
	letter-spacing: -.3px;
}

.spp-hero-fire {
	display: inline-block;
	vertical-align: middle;
	margin-left: 4px;
}

.spp-hero-timer-disc-ring {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid rgba(244, 129, 10, .5);
	background: rgba(244, 129, 10, .1);
	box-shadow: 0 0 24px rgba(244, 129, 10, .2);
	position: relative;
	z-index: 1;
	margin-bottom: 4px;
}

.spp-hero-timer-disc-val {
	font-family: "Unbounded", sans-serif;
	font-size: 18px;
	font-weight: 900;
	color: #fed7aa;
	letter-spacing: -.5px;
	line-height: 1;
}

.spp-hero-timer-disc-sub {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 2px;
	color: rgba(255, 215, 150, .6);
	text-transform: uppercase;
	margin-top: 2px;
}

.spp-hero-inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: -80px;
	width: 80px;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
	animation: sppHeroShimmer 8s ease-in-out infinite;
	z-index: 2;
	pointer-events: none;
}

.spp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 1;
	border-radius: 24px;
}

.spp-hero-inner {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0;
	flex-wrap: nowrap;
}

.spp-hero-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 40px 44px;
}

.spp-hero-toprow {
	display: flex;
	align-items: center;
	gap: 10px;
}

.spp-hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border: 1px solid;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.spp-hero-chip-live {
	color: #fca5a5;
	background: rgba(220, 38, 38, .18);
	border-color: rgba(248, 113, 113, .25);
}

.spp-hero-chip-upcoming {
	color: #c4b5fd;
	background: rgba(124, 58, 237, .18);
	border-color: rgba(167, 139, 250, .25);
}

.spp-hero-chip-inactive, .spp-hero-chip-ended {
	color: rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .1);
}

.spp-hero-chip-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 6px currentColor;
	animation: sppHeroPulse 1.6s ease-in-out infinite;
}

.spp-hero-title {
	font-family: "Unbounded", -apple-system, sans-serif;
	font-size: clamp(20px, 2.8vw, 34px);
	font-weight: 900;
	margin: 0;
	line-height: 1.1;
	letter-spacing: -.4px;
	color: #fff;
}

.spp-hero-title-gradient {
	background: linear-gradient(115deg, #fff 0%, #fde68a 35%, #fca5a5 65%, #fff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: #fff;
}

.spp-hero-desc {
	font-family: "Space Grotesk", sans-serif;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .58);
	margin: 0;
	line-height: 1.65;
	max-width: 480px;
	font-weight: 400;
}

.spp-hero-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.spp-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .2px;
	border: 1px solid;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.spp-hero-pill-disc {
	color: #fed7aa;
	background: rgba(251, 146, 60, .14);
	border-color: rgba(251, 146, 60, .25);
}

.spp-hero-pill-live {
	color: #86efac;
	background: rgba(34, 197, 94, .12);
	border-color: rgba(34, 197, 94, .22);
}

.spp-hero-pill-upcoming {
	color: #c4b5fd;
	background: rgba(124, 58, 237, .14);
	border-color: rgba(167, 139, 250, .24);
}

.spp-pill-glow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 8px #4ade80;
	animation: sppHeroPulse 1.4s ease-in-out infinite;
}

.spp-hero-timer {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 360px;
	min-width: 340px;
	padding: 44px 40px;
	background: rgba(255, 255, 255, .055);
	border-left: 1px solid rgba(255, 255, 255, .09);
	position: relative;
	overflow: hidden;
}

.spp-hero-timer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: linear-gradient(180deg, transparent 0%, rgba(230, 57, 70, .5) 30%, rgba(244, 129, 10, .6) 60%, transparent 100%);
}

.spp-hero-timer::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .04) 0%, transparent 60%);
	pointer-events: none;
}

.spp-hero-timer-label {
	font-family: "Space Grotesk", sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	z-index: 1;
}

.spp-hero-timer-footer {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	letter-spacing: .4px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.spp-hero-cd-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.spp-hero-cd-label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.2px;
	color: rgba(255, 255, 255, .3);
}

.spp-cd-boxes {
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
	z-index: 1;
}

.spp-cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.spp-cd-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 66px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px;
	font-size: 32px;
	font-weight: 900;
	color: #fff;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.5px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 4px 20px rgba(0, 0, 0, .3);
	backdrop-filter: blur(4px);
	text-shadow: 0 0 24px rgba(255, 255, 255, .5);
	position: relative;
	z-index: 1;
}

.spp-cd-lbl {
	font-family: "Space Grotesk", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
	position: relative;
	z-index: 1;
}

.spp-cd-sep {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding-bottom: 22px;
	position: relative;
	z-index: 1;
}

.spp-cd-sep span {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
}

.spp-mini-bar .spp-cd-num {
	width: 38px;
	height: 38px;
	font-size: 16px;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 8px;
	color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	letter-spacing: 0;
	backdrop-filter: none;
	text-shadow: none;
}

.spp-mini-bar .spp-cd-lbl {
	color: rgba(255, 255, 255, .65);
}

.spp-mini-bar .spp-cd-sep span {
	background: rgba(255, 255, 255, .35);
}

.spp-mini-bar .spp-cd-boxes {
	gap: 6px;
}

.spp-mini-bar .spp-cd-sep {
	gap: 5px;
	padding-bottom: 14px;
}

.spp-section {
	margin-bottom: 32px;
}

.spp-hidden {
	display: none;
}

.spp-active {
	display: block;
}

.spp-info-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: var(--spp-radius);
	font-size: 14px;
	color: #1e40af;
}

.spp-why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}

.spp-why-card {
	background: #fff;
	border: 1px solid var(--spp-border);
	border-radius: var(--spp-radius);
	padding: 22px 20px;
	transition: .2s;
}

.spp-why-card:hover {
	box-shadow: var(--spp-shadow);
	transform: translateY(-2px);
}

.spp-why-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: linear-gradient(135deg, #fff0f0, #fff7ed);
	color: var(--spp-red);
	margin-bottom: 14px;
}

.spp-why-card h4 {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 8px;
}

.spp-why-card p {
	font-size: 13px;
	color: var(--spp-muted);
	line-height: 1.6;
	margin: 0;
}

.spp-product-zone-hdr {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 24px;
}

.spp-product-zone-hdr h3 {
	font-size: 22px;
	font-weight: 800;
	margin: 0;
	background: linear-gradient(135deg, var(--spp-red), var(--spp-orange));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.spp-msg-card {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	border: 1px solid var(--spp-border);
	border-radius: 16px;
	padding: 44px 40px;
	box-shadow: var(--spp-shadow);
}

.spp-msg-icon {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff0f0;
	color: var(--spp-red);
	margin: 0 auto 20px;
}

.spp-msg-card h2 {
	font-size: 24px;
	font-weight: 800;
	margin: 0 0 12px;
}

.spp-msg-card p {
	color: var(--spp-muted);
	line-height: 1.7;
	margin: 0 0 24px;
}

.spp-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	background: linear-gradient(135deg, var(--spp-red), var(--spp-orange));
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	border-radius: var(--spp-radius-sm);
	text-decoration: none;
	transition: .2s;
}

.spp-cta-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(230, 57, 70, .35);
}

.spp-price-wrap {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.spp-old-price {
	color: #9ca3af;
	font-size: .9em;
}

.spp-old-price::before {
	content: none;
}

.spp-new-price {
	font-weight: 700;
	color: var(--spp-red);
	font-style: normal;
}

.spp-pct-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	background: linear-gradient(115deg, #b91c1c 0%, #e63946 55%, #f4810a 100%);
	color: #fff;
	border-radius: 20px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .3px;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(220, 38, 38, .32), 0 1px 0 rgba(255, 255, 255, .18) inset;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	vertical-align: middle;
	position: relative;
	top: -1px;
}

body.spp-offer-live .spp-pp-eligible .onsale.product-label {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.spp-loop-pp-badge {
	position: absolute;
	top: 18px;
	right: 15px;
	left: unset;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	background: linear-gradient(120deg, #b91c1c 0%, #e63946 55%, #f4810a 100%);
	border-radius: 50px;
	box-shadow: 0 2px 10px rgba(220, 38, 38, .38), 0 1px 0 rgba(255, 255, 255, .15) inset;
	pointer-events: none;
	line-height: 1;
	white-space: nowrap;
}

.spp-loop-pp-icon {
	display: block;
	flex-shrink: 0;
}

.spp-loop-pp-text {
	font-size: 9px;
	font-weight: 800;
	color: #fff;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.spp-pp-fire-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10;
	line-height: 0;
}

.spp-single-fire-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: linear-gradient(135deg, #fff0f0, #fff7ed);
	border: 1px solid #fecdd3;
	border-radius: 20px;
	margin-bottom: 14px;
}

.spp-single-fire-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--spp-red);
}

.spp-mini-cd {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 16px;
	border-radius: 10px;
	border: 1px solid;
	margin: 14px 0;
}

.spp-mini-cd-live {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #065f46;
}

.spp-mini-cd-upcoming {
	background: #f5f3ff;
	border-color: #ddd6fe;
	color: #4c1d95;
}

.spp-notice-bar {
	position: relative;
	width: 100%;
	max-width: 1250px;
	height: 70px;
	max-height: 70px;
	display: flex;
	align-items: center;
	overflow: hidden;
	margin: 0 auto 0;
	border-radius: 15px;
	animation: sppNoticeSlideIn .45s cubic-bezier(.22, 1, .36, 1) both;
}

.spp-notice-bar-live {
	background: linear-gradient(105deg, #991b1b 0%, #dc2626 22%, #e63946 44%, #f4810a 72%, #c2740a 100%);
	box-shadow: 0 4px 22px rgba(220, 38, 38, .35), 0 1px 0 rgba(255, 255, 255, .14) inset;
}

.spp-notice-bar-upcoming {
	background: linear-gradient(105deg, #3730a3 0%, #4f46e5 28%, #6d28d9 58%, #7c3aed 80%, #5b21b6 100%);
	box-shadow: 0 4px 22px rgba(109, 40, 217, .35), 0 1px 0 rgba(255, 255, 255, .14) inset;
}

.spp-notice-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 55px;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
	animation: sppNoticeShimmer 4.5s ease-in-out infinite;
	z-index: 1;
	pointer-events: none;
}

.spp-notice-bar::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, .25);
	pointer-events: none;
}

.spp-notice-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.spp-notice-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.spp-notice-fire-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 11px;
	flex-shrink: 0;
}

.spp-notice-texts {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.spp-notice-title {
	font-size: 14px;
	font-weight: 900;
	color: #fff;
	letter-spacing: .5px;
	line-height: 1;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.spp-notice-sub {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, .82);
	letter-spacing: .2px;
}

.spp-notice-mid {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.spp-notice-disc-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	background: rgba(255, 255, 255, .22);
	border: 1.5px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 900;
	color: #fff;
	letter-spacing: .6px;
	backdrop-filter: blur(6px);
	animation: sppNoticePulse 2.4s ease-in-out infinite;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.spp-notice-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	background: rgba(0, 0, 0, .15);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	color: rgba(255, 255, 255, .9);
	letter-spacing: .8px;
	text-transform: uppercase;
}

.spp-notice-cd {
	flex-shrink: 0;
}

.spp-notice-boxes {
	display: flex;
	align-items: center;
	gap: 7px;
}

.spp-notice-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, .18);
	border: 1.5px solid rgba(255, 255, 255, .28);
	border-radius: 10px;
	font-size: 18px;
	font-weight: 900;
	color: #fff;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12) inset;
	backdrop-filter: blur(6px);
}

.spp-notice-lbl {
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
	text-align: center;
	margin-top: 3px;
}

.spp-notice-boxes .spp-cd-sep {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-bottom: 14px;
}

.spp-notice-boxes .spp-cd-sep span {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
}

.spp-mini-bar {
	position: relative;
	width: 100%;
	max-width: 1250px;
	height: 70px;
	max-height: 70px;
	display: flex;
	align-items: center;
	overflow: hidden;
	margin: 0 auto 20px;
	border-radius: 14px;
	background: linear-gradient(100deg, #b91c1c 0%, #dc2626 18%, #e63946 38%, #f4810a 65%, #d97706 100%);
	box-shadow: 0 4px 20px rgba(230, 57, 70, .35), 0 1px 0 rgba(255, 255, 255, .15) inset;
}

.spp-mini-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .18) 50%, transparent 100%);
	animation: sppBarShimmer 4s ease-in-out infinite;
	z-index: 1;
	pointer-events: none;
}

.spp-mini-bar::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(0, 0, 0, .15);
	pointer-events: none;
}

.spp-mini-bar-inner {
	position: relative;
	z-index: 2;
	max-width: 1250px;
	margin: 0 auto;
	padding: 0 28px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.spp-mini-bar-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.spp-mini-bar-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, .2);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 10px;
	flex-shrink: 0;
}

.spp-mini-bar-texts {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.spp-mini-bar-title {
	font-weight: 900;
	letter-spacing: .8px;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.spp-mini-bar-sub {
	font-size: 11px;
	color: rgba(255, 255, 255, .82);
	font-weight: 500;
	letter-spacing: .2px;
}

.spp-mini-bar-center {
	display: flex;
	align-items: center;
	gap: 8px;
}

.spp-mini-bar-offer-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	background: rgba(255, 255, 255, .2);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	color: #fff;
	letter-spacing: .4px;
	backdrop-filter: blur(8px);
	white-space: nowrap;
	animation: sppBarPulse 2s ease-in-out infinite;
}

.spp-mini-bar-cd {
	display: flex;
	align-items: center;
	gap: 10px;
}

.spp-mini-bar-label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, .88);
	letter-spacing: .5px;
	text-transform: uppercase;
	white-space: nowrap;
}

.spp-nav-live {
	animation: sppNavGlow 2.2s ease-in-out infinite;
}

.spp-nav-live::before {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
	transform: skewX(-18deg);
	animation: sppNavShimmer 3s ease-in-out infinite;
	z-index: 0;
}

.spp-nav-live .spp-nav-live-ring {
	display: block;
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 2px solid rgba(220, 38, 38, .65);
	animation: sppNavRing 2s ease-out infinite;
	pointer-events: none;
}

.spp-nav-upcoming {
	background: linear-gradient(120deg, #6d28d9 0%, #e63946 55%, #f4810a 100%);
	box-shadow: 0 2px 10px rgba(109, 40, 217, .3);
}

.spp-nav-live-badge {
	position: relative;
	z-index: 1;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 1.2px;
	background: rgba(255, 255, 255, .28);
	color: #fff;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .38);
	backdrop-filter: blur(4px);
}

.spp-nav-up-badge {
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 1px;
	background: rgba(255, 255, 255, .2);
	color: rgba(255, 255, 255, .95);
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .28);
}

.spp-canvas {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9997;
}

.spp-ci-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
}

.spp-ci-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 60% 30%, rgba(255, 255, 255, .92), rgba(255, 255, 255, .75));
	overflow: hidden;
}

.spp-ci-grid {
	display: none;
}

.spp-ci-lights, .spp-ci-gadgets, .spp-ci-tag-burst {
	display: none;
}

.spp-ci-content {
	position: relative;
	text-align: center;
	padding: 32px;
	color: #fff;
}

.spp-ci-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	color: rgba(255, 255, 255, .4);
	text-transform: uppercase;
	margin-bottom: 20px;
}

.spp-ci-title {
	font-size: 28px;
	font-weight: 800;
	margin-bottom: 10px;
	color: var(--spp-text);
}

.spp-ci-cricket {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}

.spp-ball {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #ff6b6b, #c1121f);
	position: relative;
	animation: sppBall 1.2s ease-out forwards;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.spp-ball::before, .spp-ball::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 2px;
	background: rgba(255, 255, 255, .6);
	transform: translate(-50%, -50%) rotate(20deg);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset;
}

.spp-ball::after {
	transform: translate(-50%, -50%) rotate(-20deg);
}

.spp-six {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 2px;
	color: var(--spp-text);
	animation: sppSix .8s ease-out forwards;
}

.spp-balls-seq {
	display: flex;
	gap: 6px;
}

.spp-balls-seq .b {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #e63946;
	opacity: 0;
	transform: scale(.4);
	animation: sppSeq .8s ease-out forwards;
}

.spp-balls-seq .b1 {
	animation-delay: .2s;
}

.spp-balls-seq .b2 {
	animation-delay: .3s;
}

.spp-balls-seq .b3 {
	animation-delay: .4s;
}

.spp-balls-seq .b4 {
	animation-delay: .5s;
}

.spp-balls-seq .b5 {
	animation-delay: .6s;
}

.spp-balls-seq .b6 {
	animation-delay: .7s;
}

.spp-ci-prog {
	width: 200px;
	height: 3px;
	background: rgba(255, 255, 255, .1);
	border-radius: 2px;
	margin: 0 auto;
	overflow: hidden;
}

.spp-ci-prog-fill {
	height: 100%;
	background: linear-gradient(90deg, #e63946, #f4810a);
	border-radius: 2px;
	animation: sppProgFill 2s ease-out forwards;
}

.spp-ci-exit {
	animation: sppFadeOut .5s forwards;
}

@media (max-width: 1100px) {
	.spp-hero-timer {
		width: 300px;
		min-width: 280px;
		padding: 32px 22px;
	}
	
	.spp-hero-content {
		padding: 34px 30px;
	}
	
	.spp-cd-num {
		width: 56px;
		height: 60px;
		font-size: 28px;
	}
}

@media (max-width: 900px) {
	.spp-why-grid {
		grid-template-columns: 1fr;
	}
	
	.spp-mini-bar {
		border-radius: 10px;
	}
	
	.spp-notice-bar {
		border-radius: 15px;
		height: auto;
		max-height: none;
		min-height: 70px;
	}
	
	.spp-notice-inner {
		flex-wrap: wrap;
		gap: 8px;
		padding: 10px 16px;
	}
	
	.spp-notice-left {
		flex: 1;
		min-width: 0;
	}
	
	.spp-notice-mid {
		order: 3;
		flex: 0 0 100%;
		justify-content: center;
	}
	
	.spp-notice-cd {
		flex-shrink: 0;
	}
}

@media (max-width: 767px) {
	.spp-loop-pp-badge {
		top: 15px;
		right: 15px;
	}
	
	.spp-hero {
		height: auto;
		min-height: auto;
		max-height: none;
		border-radius: 16px;
	}
	
	.spp-hero-inner {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: wrap;
	}
	
	.spp-hero-content {
		padding: 28px 24px 20px;
		align-items: center;
		text-align: center;
		gap: 14px;
	}
	
	.spp-hero-toprow {
		justify-content: center;
	}
	
	.spp-hero-title {
		font-size: clamp(18px, 5.5vw, 26px);
		text-align: center;
	}
	
	.spp-hero-desc {
		text-align: center;
		max-width: 100%;
		font-size: 13.5px;
	}
	
	.spp-hero-pills {
		justify-content: center;
	}
	
	.spp-hero-timer {
		width: 100%;
		min-width: 0;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 16px;
		padding: 18px 16px 22px;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, .07);
	}
	
	.spp-hero-timer::before {
		display: none;
	}
	
	.spp-hero-timer-label, .spp-hero-timer-footer {
		display: none;
	}
	
	.spp-hero-timer-disc-ring {
		display: none !important;
	}
	
	.spp-hero-disc-bg {
		display: none;
	}
	
	.spp-cd-num {
		width: 48px;
		height: 50px;
		font-size: 22px;
	}
	
	.spp-cd-boxes {
		gap: 5px;
	}
	
	.spp-notice-bar {
		border-radius: 14px;
		height: auto;
		max-height: none;
		min-height: unset;
	}
	
	.spp-notice-inner {
		flex-wrap: wrap;
		align-items: center;
		padding: 10px 14px;
		gap: 0;
		row-gap: 8px;
	}
	
	.spp-notice-left {
		flex: 1 1 auto;
		min-width: 0;
		gap: 10px;
	}
	
	.spp-notice-fire-wrap {
		width: 32px;
		height: 32px;
		border-radius: 9px;
		flex-shrink: 0;
	}
	
	.spp-notice-title {
		font-size: 13px;
	}
	
	.spp-notice-sub {
		font-size: 10px;
	}
	
	.spp-notice-mid {
		display: none;
	}
	
	.spp-notice-cd {
		flex-shrink: 0;
		margin-left: auto;
	}
	
	.spp-notice-num {
		width: 32px;
		height: 32px;
		font-size: 14px;
		border-radius: 8px;
	}
	
	.spp-notice-lbl {
		font-size: 7.5px;
		margin-top: 2px;
	}
	
	.spp-notice-boxes {
		gap: 5px;
	}
	
	.spp-notice-boxes .spp-cd-sep {
		padding-bottom: 10px;
	}
	
	.spp-notice-boxes .spp-cd-sep span {
		width: 3px;
		height: 3px;
	}
	
	.spp-mini-bar {
		border-radius: 10px;
	}
	
	.spp-mini-bar-inner {
		padding: 0 12px;
		gap: 8px;
	}
	
	.spp-mini-bar-texts .spp-mini-bar-sub {
		display: none;
	}
	
	.spp-mini-bar-center {
		display: none;
	}
}

@media (max-width: 480px) {
	.spp-hero {
		border-radius: 14px;
	}
	
	.spp-hero-content {
		padding: 20px 14px 16px;
	}
	
	.spp-hero-title {
		font-size: 18px;
	}
	
	.spp-hero-desc {
		font-size: 13px;
	}
	
	.spp-cd-num {
		width: 36px;
		height: 38px;
		font-size: 16px;
	}
	
	.spp-cd-boxes {
		gap: 4px;
	}
	
	.spp-cd-lbl {
		font-size: 8px;
	}
	
	.spp-hero-timer {
		padding: 12px 12px 16px;
		gap: 10px;
	}
	
	.spp-notice-bar {
		border-radius: 12px;
	}
	
	.spp-notice-inner {
		padding: 9px 12px;
	}
	
	.spp-notice-num {
		width: 28px;
		height: 28px;
		font-size: 12px;
		border-radius: 7px;
	}
	
	.spp-notice-lbl {
		font-size: 7px;
	}
	
	.spp-notice-title {
		font-size: 12px;
	}
	
	.spp-notice-fire-wrap {
		width: 28px;
		height: 28px;
		border-radius: 8px;
	}
	
	.spp-notice-boxes {
		gap: 4px;
	}
}

.spp-labels {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	pointer-events: none;
}

.spp-label-tba, .spp-label-disc, .spp-label-sale, .spp-label-new, .spp-label-hot {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 50px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .5px;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

.spp-tba-avail {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2px;
	margin-bottom: 8px;
}