/**
 * Storefront styles.
 *
 * Deliberately restrained and mostly colour-neutral — this has to sit inside whatever theme
 * the store is running without fighting it. Accent colours come from currentColor where
 * possible so they inherit the theme's palette.
 */

.wccm-product-campaign {
	margin: 0 0 1.2em;
}

.wccm-saving {
	display: inline-block;
	margin: 0 0 .6em;
	padding: 3px 10px;
	border-radius: 3px;
	background: rgba( 0, 0, 0, .06 );
	font-size: .85em;
	font-weight: 600;
	letter-spacing: .01em;
}

.wccm-campaign-link {
	margin: .6em 0 0;
	font-size: .9em;
}

.wccm-upcoming-note {
	margin: 0 0 .4em;
	font-size: .9em;
	font-weight: 600;
	opacity: .85;
}

/* --- countdowns ---------------------------------------------------------
 *
 * Every preset below reads its colours through var( --wccm-*, <its own default> ). The
 * plugin only ever writes the --wccm-* custom properties — as an inline style on the timer,
 * from sanitised admin input — so a merchant can recolour any preset without a stylesheet,
 * and a preset with nothing customised falls back to something that suits the theme.
 * ------------------------------------------------------------------------ */

.wccm-timer {
	display: block;
	margin: .5em 0;
	font-size: var( --wccm-size, .9em );
	font-family: var( --wccm-font, inherit );
	line-height: 1.4;
}

.wccm-timer.is-over {
	opacity: .6;
}

.wccm-timer-label {
	display: inline-block;
	margin-right: .5em;
	font-weight: 600;
	text-transform: uppercase;
	font-size: .78em;
	letter-spacing: .06em;
	opacity: .75;
}

.wccm-timer-value {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	font-weight: 700;
	color: var( --wccm-fg, inherit );
}

/* --- bar ---------------------------------------------------------------- */

.wccm-timer-bar {
	display: block;
	height: 5px;
	margin-top: .45em;
	border-radius: 3px;
	background: var( --wccm-bg, rgba( 0, 0, 0, .1 ) );
	overflow: hidden;
}

.wccm-timer-fill {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 3px;
	background: var( --wccm-accent, currentColor );
	transition: width 1s linear;
}

.wccm-timer-bar-slim .wccm-timer-bar {
	height: 2px;
	margin-top: .35em;
	border-radius: 0;
}

.wccm-timer-bar-slim .wccm-timer-fill {
	border-radius: 0;
}

/* --- digit blocks ------------------------------------------------------- */

.wccm-timer-blocks {
	display: inline-flex;
	gap: 6px;
	vertical-align: middle;
	/* On a narrow product tile four fixed-width blocks otherwise run straight out of the
	   column and over whatever is beside them. */
	flex-wrap: wrap;
	max-width: 100%;
}

.wccm-layout-digits .wccm-timer-label {
	display: block;
	margin-bottom: .35em;
}

.wccm-block {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
	padding: 5px 4px;
	border: 1px solid var( --wccm-accent, rgba( 0, 0, 0, .12 ) );
	border-radius: 4px;
	background: var( --wccm-bg, rgba( 0, 0, 0, .03 ) );
	color: var( --wccm-fg, inherit );
}

.wccm-block b {
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.wccm-block i {
	font-style: normal;
	font-size: .68em;
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .65;
}

/* solid — filled blocks, light type */
.wccm-timer-digits-solid .wccm-block {
	background: var( --wccm-bg, #1d2327 );
	border-color: var( --wccm-bg, #1d2327 );
	color: var( --wccm-fg, #ffffff );
}

.wccm-timer-digits-solid .wccm-block i {
	opacity: .7;
}

/* pill — rounded, no border, accent numerals */
.wccm-timer-digits-pill .wccm-block {
	min-width: 48px;
	border: 0;
	border-radius: 999px;
	padding: 7px 10px;
	background: var( --wccm-bg, rgba( 0, 0, 0, .06 ) );
	color: var( --wccm-fg, inherit );
}

.wccm-timer-digits-pill .wccm-block b {
	color: var( --wccm-accent, inherit );
}

/* --- text ---------------------------------------------------------------- */

.wccm-timer-minimal .wccm-timer-label {
	text-transform: none;
	letter-spacing: 0;
	font-size: .9em;
	font-weight: 400;
	opacity: .8;
}

.wccm-timer-minimal .wccm-timer-value {
	font-weight: 600;
}

/* banner — one strip, for the top of a campaign page */
.wccm-timer-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	padding: .6em 1em;
	border-radius: 4px;
	background: var( --wccm-bg, rgba( 0, 0, 0, .06 ) );
	color: var( --wccm-fg, inherit );
	text-align: center;
	flex-wrap: wrap;
}

.wccm-timer-banner .wccm-timer-label {
	margin: 0;
	opacity: .85;
}

.wccm-timer-banner .wccm-timer-value {
	font-size: 1.15em;
	color: var( --wccm-accent, inherit );
}

/* --- context tweaks ------------------------------------------------------ */

/* in a shop loop, keep it out of the way — and centred, like everything else on a tile */
.wccm-timer-context-archive {
	margin: .5em 0 .35em;
	font-size: var( --wccm-size, .8em );
	text-align: center;
}

.wccm-timer-context-archive .wccm-timer-label {
	display: block;
	margin: 0 0 .3em;
}

.wccm-timer-context-archive .wccm-timer-blocks {
	justify-content: center;
}

.wccm-timer-context-archive .wccm-timer-bar {
	height: 3px;
}

.wccm-timer-context-archive .wccm-block {
	min-width: 34px;
	padding: 3px;
}

/*
 * Set by timer.js when a theme hid the spot PHP chose and the countdown had to be moved to the
 * end of the product card. It is then a direct child of the card rather than of the theme's
 * price wrapper, so it brings its own breathing room.
 */
.wccm-timer.wccm-timer-moved {
	display: block;
	width: 100%;
	clear: both;
	margin: .6em 0 .2em;
}

/* admin preview */
.wccm-timer-context-preview {
	margin: 0;
	pointer-events: none;
}

/* --- campaign index ----------------------------------------------------- */

.wccm-section-title {
	margin: 1.4em 0 .6em;
}

.wccm-campaign-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 24px;
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.wccm-campaign-card {
	margin: 0;
	padding: 0;
	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: 6px;
	overflow: hidden;
}

.wccm-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.wccm-card-banner img {
	display: block;
	width: 100%;
	height: auto;
}

.wccm-card-title {
	display: block;
	padding: 12px 14px 2px;
	font-size: 1.1em;
	font-weight: 700;
}

.wccm-card-meta {
	display: block;
	padding: 0 14px 12px;
	font-size: .85em;
	opacity: .7;
}

.wccm-campaign-card .wccm-timer {
	margin: 0;
	padding: 0 14px 14px;
}

/* --- single campaign ---------------------------------------------------- */

.wccm-back {
	margin: 0 0 1em;
	font-size: .9em;
}

.wccm-campaign-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.wccm-campaign-title {
	margin: .8em 0 .3em;
}

.wccm-campaign-single .wccm-timer {
	margin-bottom: 1.6em;
}

/* --- promo block ---------------------------------------------------------- */

/*
 * The heading and the clock sit on one line and drop onto two when there is not room, which on a
 * phone is most of the time. Deliberately no background, border or padding on the block itself:
 * this lands in the middle of somebody's home page, between sections the theme styled, and a
 * container we invented would be the one thing on the page that does not match.
 */

.wccm-promo-head {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.2em;
	margin-bottom: 1em;
}

.wccm-promo-title {
	margin: 0;
}

.wccm-promo-head .wccm-promo-timer {
	flex: 0 1 auto;
}

.wccm-promo-head .wccm-timer {
	margin: 0;
}

/* Stacked: name, then clock underneath it. The default, because a long name and a four-block
   clock on one line leave a wide gap between them and the clock stops reading as part of the
   heading. The countdown's own blocks are inline-flex, so text-align positions them. */

.wccm-promo-head-below {
	flex-direction: column;
}

.wccm-promo-head-below.wccm-promo-align-left { align-items: flex-start; text-align: left; }
.wccm-promo-head-below.wccm-promo-align-center { align-items: center; text-align: center; }
.wccm-promo-head-below.wccm-promo-align-right { align-items: flex-end; text-align: right; }

/* Side by side. "left" means the name on the left and the clock pushed to the right, which is
   the arrangement that reads as a section header. */

.wccm-promo-head-right {
	flex-direction: row;
	align-items: center;
}

.wccm-promo-head-right.wccm-promo-align-left { justify-content: space-between; }
.wccm-promo-head-right.wccm-promo-align-center { justify-content: center; }
.wccm-promo-head-right.wccm-promo-align-right { justify-content: flex-end; }

/*
 * Product names, trimmed to a fixed number of lines.
 *
 * Deliberately CSS rather than cutting the text: the title is rendered by WooCommerce and the
 * theme, it is wrapped in the link to the product, and shortening the real text would put a
 * different name on the home page from the one on the product page. This only stops it drawing —
 * the full name is still in the markup for a screen reader and a search engine.
 */

.wccm-promo-clamp .woocommerce-loop-product__title,
.wccm-promo-clamp .wc-block-components-product-name,
.wccm-promo-clamp .product-title,
.wccm-promo-clamp li.product h2,
.wccm-promo-clamp li.product h3 {
	display: -webkit-box;
	-webkit-line-clamp: var( --wccm-promo-name-lines, 2 );
	line-clamp: var( --wccm-promo-name-lines, 2 );
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Only when a size was actually given. There is no value here that means "whatever the theme
   said", so an unset size has to produce no declaration at all rather than a fallback. */

.wccm-promo-sized .woocommerce-loop-product__title,
.wccm-promo-sized .wc-block-components-product-name,
.wccm-promo-sized .product-title,
.wccm-promo-sized li.product h2,
.wccm-promo-sized li.product h3 {
	font-size: var( --wccm-promo-name-size );
}

.wccm-promo-more {
	margin: 1.4em 0 0;
	text-align: center;
}

.wccm-none {
	padding: 1.2em;
	border: 1px dashed rgba( 0, 0, 0, .18 );
	border-radius: 6px;
	text-align: center;
	opacity: .8;
}

@media ( prefers-reduced-motion: reduce ) {
	.wccm-timer-fill {
		transition: none;
	}
}


/* --- cart and checkout countdown ------------------------------------------ */

.wccm-cart-notice {
	margin: 0 0 1.5em;
	padding: 14px 16px;
	border: 1px solid var( --wccm-accent, #d63638 );
	border-left-width: 4px;
	border-radius: 4px;
	background: rgba( 0, 0, 0, .02 );
}

.wccm-cart-notice-lead {
	margin: 0 0 10px;
	font-size: .95em;
}

.wccm-cart-notice .wccm-timer {
	margin: 0;
}

/* The two states swap in place when the countdown reaches zero. No reload — see
   WCCM_Cart_Notice for why that matters on a page holding card details. */
.wccm-cart-notice-over {
	display: none;
	margin: 0;
}

.wccm-cart-notice.is-over .wccm-cart-notice-live {
	display: none;
}

.wccm-cart-notice.is-over .wccm-cart-notice-over {
	display: block;
}

/* --- campaign archive ----------------------------------------------------- */

/*
 * Sits inside whatever wrapper the theme opened for the archive description, so it deliberately
 * sets no width, no background and no padding of its own — the theme's shop page already decided
 * those, and overriding them is how a plugin ends up looking bolted on.
 */
.wccm-archive-header {
	margin: 0 0 1.6em;
}

.wccm-archive-header .wccm-campaign-banner {
	margin: 0 0 1.1em;
}

.wccm-archive-header .wccm-campaign-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.wccm-archive-header .wccm-timer {
	margin: 0;
}

.wccm-archive-ended {
	margin: 0;
	padding: 11px 16px;
	border-left: 3px solid currentColor;
	border-radius: 0 4px 4px 0;
	background: rgba( 0, 0, 0, .04 );
	font-size: .95em;
	opacity: .85;
}