/* B2C Sale Countdown – storefront styles. Colors come from :root custom properties set in the admin. */

/* ---------- Visibility rules ---------- */

.b2csc-promo[hidden],
.b2csc-badge[hidden],
.b2csc-promo [hidden],
.b2csc-is-expired,
.b2csc-variation-off {
	display: none !important;
}

/* B2B visitors (server-side body class, or cookie class added on cached pages) never see promotion. */
.b2csc-is-b2b .b2csc-promo,
.b2csc-is-b2b .b2csc-badge,
.b2csc-is-b2b .onsale,
.b2csc-is-b2b .wc-block-components-product-sale-badge,
.b2csc-is-b2b .wc-block-grid__product-onsale,
.b2csc-no-badge .wc-block-components-product-sale-badge,
.b2csc-no-badge .wc-block-grid__product-onsale,
.b2csc-global-ended .wc-block-components-product-sale-badge,
.b2csc-global-ended .wc-block-grid__product-onsale {
	display: none !important;
}

.b2csc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Sale badge ---------- */

.woocommerce span.onsale.b2csc-badge,
span.onsale.b2csc-badge {
	background: var(--b2csc-badge-bg, #d7263d);
	color: var(--b2csc-badge-text, #fff);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Block-theme sale badges (Product Collection / On-Sale Badge block) use the same colors. */
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
	background: var(--b2csc-badge-bg, #d7263d);
	border-color: var(--b2csc-badge-bg, #d7263d);
	color: var(--b2csc-badge-text, #fff);
	font-weight: 700;
	text-transform: uppercase;
}

/* "theme" shape keeps the theme's own size and position; only text sizing is tuned. */
.woocommerce span.onsale.b2csc-badge--theme,
span.onsale.b2csc-badge--theme {
	min-width: 0;
	width: auto;
	padding-left: 0.75em;
	padding-right: 0.75em;
	white-space: nowrap;
}

/* Corner ribbon, as on modern product pages. Needs a positioned parent (WooCommerce sets
   position: relative on div.product and li.product). */
.woocommerce span.onsale.b2csc-badge--ribbon,
span.onsale.b2csc-badge--ribbon {
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	z-index: 9;
	display: block;
	width: 7.5em;
	height: 7.5em;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
	font-size: 0.9375rem;
	line-height: 1;
	-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
	clip-path: polygon(0 0, 100% 0, 0 100%);
	box-shadow: none;
	pointer-events: none;
}

.b2csc-badge--ribbon .b2csc-badge__text {
	position: absolute;
	top: 33%;
	left: 33%;
	transform: translate(-50%, -50%) rotate(-45deg);
	white-space: nowrap;
}

ul.products span.onsale.b2csc-badge--ribbon,
.wc-block-grid span.onsale.b2csc-badge--ribbon,
.related span.onsale.b2csc-badge--ribbon,
.upsells span.onsale.b2csc-badge--ribbon {
	font-size: 0.75rem;
}

/* ---------- Discount pill ---------- */

.b2csc-discount {
	display: inline-block;
	margin: 0 0 0.75em;
	padding: 0.35em 0.8em;
	border-radius: 0.375em;
	background: var(--b2csc-badge-bg, #d7263d);
	color: var(--b2csc-badge-text, #fff);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
}

/* ---------- Countdown ---------- */

.b2csc-promo {
	box-sizing: border-box;
	margin: 0 0 1.25em;
	line-height: 1.2;
}

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

.b2csc-countdown {
	display: flex;
	align-items: flex-start;
	gap: 0.9em;
	max-width: 30em;
	padding: 1em 1.25em;
	border-radius: 0.75em;
	background: var(--b2csc-cd-bg, #fde8ea);
	color: var(--b2csc-cd-accent, #d7192e);
}

.b2csc-countdown__icon {
	flex: 0 0 auto;
	width: 1.75em;
	height: 1.75em;
	margin-top: 0.05em;
	color: var(--b2csc-cd-accent, #d7192e);
}

.b2csc-countdown__body {
	min-width: 0;
}

.b2csc-countdown .b2csc-countdown__heading {
	margin: 0 0 0.5em;
	padding: 0;
	color: var(--b2csc-cd-accent, #d7192e);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.b2csc-countdown__units {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.3em;
}

.b2csc-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.b2csc-unit__value,
.b2csc-sep {
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.15;
}

.b2csc-unit__value {
	display: block;
	min-width: 2.3em;
	padding: 0.3em 0.3em;
	border-radius: 0.3em;
	background: var(--b2csc-cd-accent, #d7192e);
	color: var(--b2csc-cd-digit-text, #fff);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.b2csc-sep {
	padding-top: 0.3em;
	color: var(--b2csc-cd-accent, #d7192e);
}

.b2csc-unit__label {
	margin-top: 0.45em;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- Product cards ----------
   The card countdown sizes itself to the card, not the screen, so it fits 1-, 2-, 3- or
   4-column grids on any device. Container query units (cqi) = % of the card width. */

.b2csc-promo--loop {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0.4em 0 0.8em;
	container-type: inline-size;
}

.b2csc-promo--loop .b2csc-countdown {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0.5em 0.5em 0.45em;
	border-radius: 0.5em;
	overflow: hidden;
}

.b2csc-promo--loop .b2csc-countdown__icon {
	display: none;
}

.b2csc-promo--loop .b2csc-countdown .b2csc-countdown__heading {
	margin-bottom: 0.35em;
	font-size: 0.75rem;
	font-size: clamp(0.6875rem, 6cqi, 0.8125rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.b2csc-promo--loop .b2csc-countdown__units {
	width: 100%;
	gap: 0.15em;
	gap: clamp(1px, 1cqi, 4px);
}

/* Every unit takes an equal share of the width and may shrink. */
.b2csc-promo--loop .b2csc-unit {
	flex: 1 1 0;
	min-width: 0;
}

.b2csc-promo--loop .b2csc-unit__value,
.b2csc-promo--loop .b2csc-sep {
	font-size: 0.875rem;
	font-size: clamp(0.75rem, 7.5cqi, 1rem);
}

.b2csc-promo--loop .b2csc-unit__value {
	width: 100%;
	min-width: 0;
	padding: 0.25em 0;
	border-radius: 0.25em;
}

.b2csc-promo--loop .b2csc-sep {
	flex: 0 0 auto;
	padding-top: 0.25em;
}

.b2csc-promo--loop .b2csc-unit__label {
	max-width: 100%;
	margin-top: 0.3em;
	font-size: 0.5625rem;
	font-size: clamp(0.4375rem, 4cqi, 0.625rem);
	letter-spacing: 0;
	overflow: hidden;
	text-overflow: clip;
}

/* Full labels by default; short labels (D / H / M / S) on narrow cards. */
.b2csc-unit__label-short {
	display: none;
}

@container (max-width: 240px) {
	.b2csc-promo--loop .b2csc-unit__label-long {
		display: none;
	}

	.b2csc-promo--loop .b2csc-unit__label-short {
		display: inline;
	}

	.b2csc-promo--loop .b2csc-unit__label {
		font-size: clamp(0.5625rem, 5cqi, 0.6875rem);
	}
}

/* Very narrow cards (two-column phone grids): drop the ":" separators to give the digits room. */
@container (max-width: 210px) {
	.b2csc-promo--loop .b2csc-sep {
		display: none;
	}

	.b2csc-promo--loop .b2csc-countdown__units {
		gap: 3px;
	}

	.b2csc-promo--loop .b2csc-countdown {
		padding: 0.45em 0.4em 0.4em;
	}
}

/* Extremely narrow cards (e.g. 3-4 columns on a phone): two rows of two units. */
@container (max-width: 120px) {
	.b2csc-promo--loop .b2csc-countdown__units {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.b2csc-promo--loop .b2csc-unit {
		flex: 0 0 calc(50% - 2px);
	}
}

/* Product grids that center their content. */
.has-text-align-center .b2csc-promo--loop .b2csc-countdown__heading,
.wc-block-grid__product .b2csc-promo--loop .b2csc-countdown__heading {
	text-align: center;
}

/* ---------- Product page on phones ---------- */

.b2csc-promo--single {
	max-width: 100%;
	container-type: inline-size;
}

.b2csc-promo--single .b2csc-countdown__body {
	flex: 1 1 auto;
}

@container (max-width: 380px) {
	.b2csc-promo--single .b2csc-countdown {
		gap: 0.6em;
		padding: 0.8em 0.8em;
	}

	.b2csc-promo--single .b2csc-countdown__icon {
		width: 1.35em;
		height: 1.35em;
	}

	.b2csc-promo--single .b2csc-countdown__units {
		gap: 0.2em;
	}

	.b2csc-promo--single .b2csc-unit {
		flex: 1 1 0;
		min-width: 0;
	}

	.b2csc-promo--single .b2csc-unit__value {
		width: 100%;
		min-width: 0;
	}

	.b2csc-promo--single .b2csc-unit__value,
	.b2csc-promo--single .b2csc-sep {
		font-size: clamp(1rem, 7cqi, 1.35rem);
	}

	.b2csc-promo--single .b2csc-unit__label {
		max-width: 100%;
		overflow: hidden;
		font-size: clamp(0.5rem, 3cqi, 0.6875rem);
		letter-spacing: 0;
	}
}

/* ---------- Older browsers without container queries ---------- */

@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		.b2csc-promo--loop .b2csc-sep {
			display: none;
		}

		.b2csc-promo--loop .b2csc-unit__value {
			font-size: 0.8125rem;
		}

		.b2csc-promo--loop .b2csc-unit__label-long {
			display: none;
		}

		.b2csc-promo--loop .b2csc-unit__label-short {
			display: inline;
		}

		.b2csc-promo--single .b2csc-unit__value,
		.b2csc-promo--single .b2csc-sep {
			font-size: 1.25rem;
		}
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
	.b2csc-countdown {
		max-width: none;
	}

	.b2csc-discount {
		font-size: 1rem;
	}

	ul.products span.onsale.b2csc-badge--ribbon {
		font-size: 0.5625rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.b2csc-promo * {
		transition: none !important;
		animation: none !important;
	}
}