/* Cosmetics Countdown — seasonal timer beside or below a promo title. */

.cep-countdown-wrap {
	line-height: 1;
}

.cep-countdown {
	--cep-cd-bg: #ffffff;
	--cep-cd-text: #0f172a;
	--cep-cd-accent: #16a34a;
	--cep-cd-box: #f1f5f9;
	--cep-cd-num: var(--cep-cd-text);
	--cep-cd-line: color-mix(in srgb, var(--cep-cd-accent) 35%, transparent);
	--cep-cd-radius: 999px;
	--cep-cd-scale: 1;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: calc(10px * var(--cep-cd-scale));
	max-width: 100%;
	padding: calc(6px * var(--cep-cd-scale)) calc(14px * var(--cep-cd-scale)) calc(6px * var(--cep-cd-scale)) calc(8px * var(--cep-cd-scale));
	background: var(--cep-cd-bg);
	color: var(--cep-cd-text);
	border: 1px solid var(--cep-cd-line);
	border-radius: var(--cep-cd-radius);
	box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--cep-cd-accent) 70%, transparent);
	font-variant-numeric: tabular-nums;
	text-align: left;
	vertical-align: middle;
	isolation: isolate;
}

.cep-countdown--sm {
	--cep-cd-scale: 0.86;
}

.cep-countdown--lg {
	--cep-cd-scale: 1.2;
}

.cep-cd-label {
	font-size: calc(13px * var(--cep-cd-scale));
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

.cep-cd-units {
	display: inline-flex;
	align-items: center;
	gap: calc(5px * var(--cep-cd-scale));
	white-space: nowrap;
}

.cep-cd-unit {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	padding: calc(4px * var(--cep-cd-scale)) calc(7px * var(--cep-cd-scale));
	background: var(--cep-cd-box);
	border: 1px solid var(--cep-cd-line);
	border-radius: calc(8px * var(--cep-cd-scale));
}

.cep-cd-num {
	color: var(--cep-cd-num);
	font-size: calc(15px * var(--cep-cd-scale));
	font-weight: 800;
	line-height: 1;
}

.cep-cd-name {
	color: var(--cep-cd-accent);
	font-size: calc(11px * var(--cep-cd-scale));
	font-weight: 700;
	line-height: 1;
}

.cep-cd-deco {
	display: inline-block;
	font-size: calc(20px * var(--cep-cd-scale));
	line-height: 1;
	transform-origin: 50% 80%;
	animation: cep-cd-bob 3.2s ease-in-out infinite;
}

.cep-cd-over {
	font-size: calc(13px * var(--cep-cd-scale));
	font-weight: 700;
	color: var(--cep-cd-accent);
}

/* Card layout: below the title. */

.cep-countdown--card {
	--cep-cd-radius: 18px;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(10px * var(--cep-cd-scale)) calc(14px * var(--cep-cd-scale));
	padding: calc(14px * var(--cep-cd-scale)) calc(20px * var(--cep-cd-scale));
	text-align: center;
}

.cep-countdown--card .cep-cd-label {
	flex: 1 1 100%;
	order: -1;
	font-size: calc(14px * var(--cep-cd-scale));
}

.cep-countdown--card .cep-cd-units {
	gap: calc(6px * var(--cep-cd-scale));
}

.cep-countdown--card .cep-cd-unit {
	flex-direction: column;
	align-items: center;
	gap: calc(5px * var(--cep-cd-scale));
	min-width: calc(54px * var(--cep-cd-scale));
	padding: calc(9px * var(--cep-cd-scale)) calc(8px * var(--cep-cd-scale)) calc(7px * var(--cep-cd-scale));
	border-radius: calc(12px * var(--cep-cd-scale));
}

.cep-countdown--card .cep-cd-num {
	font-size: calc(26px * var(--cep-cd-scale));
}

.cep-countdown--card .cep-cd-name {
	font-size: calc(10px * var(--cep-cd-scale));
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.cep-countdown--card .cep-cd-sep {
	color: var(--cep-cd-accent);
	font-size: calc(20px * var(--cep-cd-scale));
	font-weight: 800;
	margin-top: calc(-14px * var(--cep-cd-scale));
}

.cep-countdown--card .cep-cd-deco {
	font-size: calc(26px * var(--cep-cd-scale));
}

/* Live states. */

.cep-cd-unit.is-tick .cep-cd-num {
	animation: cep-cd-tick 0.42s ease-out;
}

.cep-countdown.is-urgent {
	animation: cep-cd-glow 2.4s ease-in-out infinite;
}

.cep-countdown.is-expired .cep-cd-deco {
	animation: none;
	opacity: 0.6;
}

/* Themes. */

.cep-countdown--halloween {
	--cep-cd-bg: linear-gradient(135deg, #1c1022 0%, #2b1534 100%);
	--cep-cd-text: #ffedd5;
	--cep-cd-accent: #f97316;
	--cep-cd-box: rgba(249, 115, 22, 0.14);
	--cep-cd-num: #fff7ed;
}

.cep-countdown--halloween .cep-cd-deco {
	animation-name: cep-cd-wobble;
}

.cep-countdown--halloween .cep-cd-deco--end {
	animation-name: cep-cd-flutter;
	animation-duration: 2.6s;
}

.cep-countdown--christmas {
	--cep-cd-bg: radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.16) 0 1.5px, transparent 2px) 0 0 / 22px 22px, radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.5px) 0 0 / 17px 17px, linear-gradient(135deg, #0f3d2e 0%, #14532d 100%);
	--cep-cd-text: #f0fdf4;
	--cep-cd-accent: #f87171;
	--cep-cd-box: rgba(255, 255, 255, 0.1);
	--cep-cd-num: #ffffff;
}

.cep-countdown--christmas .cep-cd-deco {
	animation-name: cep-cd-sway;
}

.cep-countdown--valentine {
	--cep-cd-bg: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
	--cep-cd-text: #881337;
	--cep-cd-accent: #e11d48;
	--cep-cd-box: #ffffff;
	--cep-cd-num: #9f1239;
}

.cep-countdown--valentine .cep-cd-deco {
	animation-name: cep-cd-beat;
	animation-duration: 1.6s;
}

.cep-countdown--black-friday {
	--cep-cd-bg: #0a0a0a;
	--cep-cd-text: #fafafa;
	--cep-cd-accent: #facc15;
	--cep-cd-box: #1c1c1c;
	--cep-cd-num: #facc15;
}

.cep-countdown--new-year {
	--cep-cd-bg: linear-gradient(135deg, #111827 0%, #1f2937 100%);
	--cep-cd-text: #fefce8;
	--cep-cd-accent: #eab308;
	--cep-cd-box: rgba(234, 179, 8, 0.12);
	--cep-cd-num: #fde68a;
}

.cep-countdown--new-year .cep-cd-deco--end,
.cep-countdown--ramadan .cep-cd-deco--end {
	animation-name: cep-cd-twinkle;
	animation-duration: 2s;
}

.cep-countdown--ramadan {
	--cep-cd-bg: linear-gradient(135deg, #0b1f3a 0%, #123a63 100%);
	--cep-cd-text: #f8f3df;
	--cep-cd-accent: #e7c45a;
	--cep-cd-box: rgba(231, 196, 90, 0.12);
	--cep-cd-num: #fdf6dc;
}

.cep-countdown--mothers-day {
	--cep-cd-bg: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
	--cep-cd-text: #831843;
	--cep-cd-accent: #db2777;
	--cep-cd-box: #ffffff;
	--cep-cd-num: #9d174d;
}

.cep-countdown--summer {
	--cep-cd-bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	--cep-cd-text: #7c2d12;
	--cep-cd-accent: #ea580c;
	--cep-cd-box: #ffffff;
	--cep-cd-num: #9a3412;
}

.cep-countdown--summer .cep-cd-deco {
	animation-name: cep-cd-spin;
	animation-duration: 12s;
	animation-timing-function: linear;
	transform-origin: 50% 50%;
}

.cep-countdown-empty {
	padding: 10px 12px;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	color: #64748b;
	font-size: 13px;
}

@keyframes cep-cd-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

@keyframes cep-cd-wobble {
	0%, 100% { transform: rotate(-6deg); }
	50% { transform: rotate(6deg) translateY(-2px); }
}

@keyframes cep-cd-flutter {
	0%, 100% { transform: translate(0, 0) scaleX(1); }
	25% { transform: translate(2px, -3px) scaleX(0.82); }
	50% { transform: translate(4px, 0) scaleX(1); }
	75% { transform: translate(2px, 2px) scaleX(0.86); }
}

@keyframes cep-cd-sway {
	0%, 100% { transform: rotate(-5deg); }
	50% { transform: rotate(5deg); }
}

@keyframes cep-cd-beat {
	0%, 40%, 100% { transform: scale(1); }
	15% { transform: scale(1.18); }
	28% { transform: scale(1.05); }
}

@keyframes cep-cd-twinkle {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.82); }
}

@keyframes cep-cd-spin {
	to { transform: rotate(360deg); }
}

@keyframes cep-cd-tick {
	0% { transform: translateY(-35%); opacity: 0.2; }
	100% { transform: translateY(0); opacity: 1; }
}

@keyframes cep-cd-glow {
	0%, 100% { box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--cep-cd-accent) 70%, transparent); }
	50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cep-cd-accent) 30%, transparent), 0 8px 22px -8px var(--cep-cd-accent); }
}

@media (max-width: 767px) {
	.cep-countdown--inline {
		flex-wrap: wrap;
		row-gap: 6px;
		border-radius: min(var(--cep-cd-radius), 16px);
	}

	.cep-countdown--card .cep-cd-unit {
		min-width: calc(46px * var(--cep-cd-scale));
	}

	.cep-countdown--card .cep-cd-num {
		font-size: calc(21px * var(--cep-cd-scale));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cep-cd-deco,
	.cep-countdown.is-urgent,
	.cep-cd-unit.is-tick .cep-cd-num {
		animation: none !important;
	}
}