/**
 * Countdown styling.
 *
 * Colours and fonts come from the theme wherever possible — currentColor,
 * inherited families, and one accent variable the theme can override. The point
 * is that this looks like part of the shop, not like a plugin bolted on.
 */

/* The block form speaks the shop's own language: the green figure boxes already
 * used on the grid cards, the frame and radius of the expiry chooser, and grey
 * uppercase labels. It was amber on a dashed peach panel, which belonged to no
 * other part of the page and read as a warning rather than as an offer.
 *
 * One accent, set here and used throughout, so a theme can restate it once. */
.wcd-countdown {
	--wcd-accent: #5f7728;
	--wcd-accent-ink: #46591d;
	--wcd-frame: #d8dcd0;
	--wcd-label: #6b7280;

	display: none;
	margin: 1em 0 1.25em;
	padding: 14px 16px 15px;
	border: 1px solid var( --wcd-frame );
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	line-height: 1.25;
	text-align: center;
}

/* Only shown once the script has confirmed there is time left on the clock. */
.wcd-countdown.is-live {
	display: block;
}

.wcd-countdown__intro {
	margin: 0 0 10px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wcd-countdown__heading {
	font-size: 1em;
	font-weight: 700;
	color: var( --wcd-accent-ink );
	letter-spacing: 0.01em;
}

.wcd-countdown__sub {
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var( --wcd-label );
}

.wcd-countdown__clock {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 8px;
}

/* No frame of its own: the filled figure is the box. */
.wcd-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
}

.wcd-countdown__value {
	display: block;
	/* Wide enough that a one-digit figure and a two-digit one occupy the same
	   box, so the row does not twitch every second. Height is set rather than
	   padded out, so widening the box cannot make it grow taller with it. */
	min-width: 52px;
	height: 34px;
	padding: 0 8px;
	border-radius: 6px;
	background: var( --wcd-accent );
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 34px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.wcd-countdown__name {
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --wcd-label );
}

/* Tighter inside a product grid cell, where space is short. */
.wcd-countdown--loop {
	padding: 10px 10px 11px;
	margin: 0.5em 0;
}

.wcd-countdown--loop .wcd-countdown__heading {
	font-size: 0.85em;
}

.wcd-countdown--loop .wcd-countdown__clock {
	gap: 5px;
}

.wcd-countdown--loop .wcd-countdown__value {
	min-width: 40px;
	height: 27px;
	font-size: 15px;
	line-height: 27px;
}

/* ========================================================================
   Overlay: one line across the foot of the product image

   The block form belongs on a product page, where there is room. On a grid card
   it pushed the price and the button down and ended up shouting louder than the
   product. This sits on the image instead and costs the card no height at all.
   ===================================================================== */

/* Wraps the thumbnail and nothing else, so "bottom" means the foot of the image.
   The card's own link cannot be used for this: WooCommerce keeps it open past
   the title and the price, so the strip landed over those instead. */
.woocommerce ul.products li.product .wcd-media,
.woocommerce-page ul.products li.product .wcd-media {
	position: relative;
	display: block;
	overflow: hidden;
}

.woocommerce ul.products li.product .wcd-media > img {
	display: block;
}

.woocommerce ul.products li.product .wcd-countdown--overlay {
	/* The shop's badge green is #8ba93d, which is too light to carry white text
	   — about 2.7:1 where 4.5 is the floor. This is the same hue taken darker,
	   which reads as the brand colour and is legible at 5.1:1.
	   Override this one variable from the theme to change it. */
	--wcd-box: #5f7728;

	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Divi's hover overlay sits at 3. Below that, the countdown was washed out
	   the moment the pointer touched the card. */
	z-index: 10;
	margin: 0;
	padding: 7px 6px 8px;
	border: 0;
	border-radius: 0;
	/* A light band rather than a dark one: the numbers carry the colour, and
	   dark labels on white read better than pale ones on a photograph. */
	background: rgba( 255, 255, 255, 0.93 );
	backdrop-filter: blur( 3px );
	box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.06 );
	text-align: center;
	/* Fixed rather than inherited: this sits inside a card whose font size the
	   theme may change, and the boxes have very little room to give. */
	font-size: 12px;
	line-height: 1.2;
}

.woocommerce ul.products li.product .wcd-countdown--overlay.is-live {
	display: block;
}

.wcd-countdown--overlay .wcd-countdown__label {
	display: block;
	margin-bottom: 4px;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: #6b7280;
}

.wcd-countdown--overlay .wcd-countdown__clock {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 4px;
}

.wcd-countdown--overlay .wcd-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
}

.wcd-countdown--overlay .wcd-countdown__value {
	display: block;
	/* Wide enough that the box does not change size between a one-digit and a
	   two-digit figure, which would make the row twitch every second. Height is
	   set rather than padded out, so widening the box later cannot make it grow
	   taller with it. */
	min-width: 44px;
	height: 26px;
	padding: 0 6px;
	border-radius: 6px;
	background: var( --wcd-box );
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.wcd-countdown--overlay .wcd-countdown__name {
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
}

/* Both kinds run in the shop's own green. If the two ever need telling apart at
   a glance, give the sale one its own colour here. */
.wcd-countdown--overlay.wcd-countdown--expiry,
.wcd-countdown--overlay.wcd-countdown--sale {
	--wcd-box: #5f7728;
}

/* Divi fades the image on hover; the countdown is not part of that picture and
   should not fade with it. */
.woocommerce ul.products li.product:hover .wcd-countdown--overlay.is-live {
	opacity: 1;
}

/* ========================================================================
   Card tidy-up
   ===================================================================== */

.woocommerce ul.products li.product .wcd-savings {
	display: inline-block;
	margin: 0.25em 0 0;
	padding: 2px 9px;
	border-radius: 999px;
	background: #f0f4e4;
	color: #46591d;
	font-size: 0.78em;
	font-weight: 700;
}

/* Titles run to three and four lines here, which leaves the prices on a ragged
   line across the row.
   
   This used to be solved by clamping the title to two lines. That looked tidy
   and hid the end of the longest names — including "(Buy 1 Get 1 Free)", which
   is the offer itself. A row of prices that do not line up is untidy; a shopper
   who cannot see what they are buying is a lost sale.
   
   So the card is a column instead, and the price is pushed to the bottom of it.
   The titles run as long as they need to and the prices still line up. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
	line-height: 1.35;
}

/* Whatever sits above it can grow; these stay at the foot of the card. */
.woocommerce ul.products li.product .price {
	margin-top: auto;
}

/* The price the shopper pays should win over the one they are not paying. */
.woocommerce ul.products li.product .price del {
	opacity: 0.55;
	font-size: 0.88em;
	font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 700;
}

/* ========================================================================
   The expiry list on a product page
   ===================================================================== */

/* Same frame, radius and label colour as the countdown block and the expiry
   chooser, so the three read as one family rather than three plugins. */
.wcd-expiry {
	margin: 1em 0 1.25em;
	padding: 0.9em 1.1em;
	border: 1px solid #d8dcd0;
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
}

.wcd-expiry__title {
	margin: 0 0 0.5em;
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: #6b7280;
}

.wcd-expiry ul.wcd-expiry__list {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
}

.wcd-expiry ul.wcd-expiry__list > li {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0.4em 0;
	list-style: none;
	background: none;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.06 );
}

.wcd-expiry ul.wcd-expiry__list > li:last-child {
	border-bottom: 0;
}

.wcd-expiry ul.wcd-expiry__list > li::before,
.wcd-expiry ul.wcd-expiry__list > li::marker {
	content: none;
	display: none;
}

.wcd-expiry__month {
	flex: 1 1 auto;
	font-weight: 600;
}

.wcd-expiry__off {
	flex: 0 0 auto;
	padding: 1px 8px;
	border-radius: 999px;
	background: #eef3e0;
	color: #3c4d18;
	font-size: 0.78em;
	font-weight: 700;
}

.wcd-expiry__price {
	flex: 0 0 auto;
	min-width: 5.5em;
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Four batches can mean four different figures, and only one of them is the
   price today. Saying which stops the list reading as a contradiction. */
.wcd-expiry__flag {
	flex: 0 0 100%;
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #5f7728;
}

.wcd-expiry__item.is-active .wcd-expiry__month,
.wcd-expiry__item.is-active .wcd-expiry__price {
	color: #46591d;
}

.wcd-expiry-note {
	margin: 0.5em 0 1em;
	font-size: 0.9em;
}

.wcd-expiry-note__label {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.07em;
	opacity: 0.7;
}

.wcd-expiry-note__value {
	font-weight: 600;
}

/* No `prefers-color-scheme` block on purpose — the shop is a light theme, and
 * following the visitor's operating system would show a dark countdown to anyone
 * browsing in dark mode, on otherwise light pages. Override the variables from
 * the theme if a dark mode is ever added. */