/* PS Promo Banner — frontend bar (above the sticky theme header) */

.ps-promo-banner {
	position: relative; /* NOT sticky — scrolls away, theme header stays sticky */
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.6rem 2.5rem;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	color: #fff;
}

/* Colour presets map to theme.json palette slugs */
.ps-promo-banner--sale {
	background: var(--wp--preset--color--sale, #ea580c);
}
.ps-promo-banner--primary {
	background: var(--wp--preset--color--primary, #1265ac);
}
.ps-promo-banner--dark {
	background: var(--wp--preset--color--contrast, #1e293b);
}

.ps-promo-banner__inner {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0.75rem;
}

.ps-promo-banner__text {
	color: inherit;
}

.ps-promo-banner__text--link {
	text-decoration: none;
}
.ps-promo-banner__text--link:hover {
	text-decoration: underline;
}

/* Highlighted coupon code pill */
.ps-promo-banner__code {
	display: inline-block;
	padding: 0.05em 0.55em;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.55);
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Optional CTA button */
.ps-promo-banner__btn {
	display: inline-block;
	padding: 0.25rem 0.85rem;
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--contrast, #1e293b);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
}
.ps-promo-banner__btn:hover {
	background: rgba(255, 255, 255, 0.9);
}

/* Close button */
.ps-promo-banner__close {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
}
.ps-promo-banner__close:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 680px) {
	.ps-promo-banner {
		padding: 0.5rem 2.25rem;
		font-size: 0.8rem;
	}
	.ps-promo-banner__btn {
		font-size: 0.78rem;
		padding: 0.2rem 0.7rem;
	}
}