/**
 * Product card: presentation for a single product inside any WooCommerce
 * product loop (ul.products li.product), independent of what's hosting
 * that loop.
 *
 * Split out of shop-archive.css, which mixed this in with the category/
 * archive PAGE layout (sidebar, toolbar, pagination, grid columns) --
 * that page-only stuff is still there. This file is everything that
 * belongs to the card itself: badges, title, rating, price/actions row,
 * the add-to-cart quick-action button and its icon.
 *
 * Scoped to `.woocommerce ul.products li.product`, not `.medimart-shop__main
 * ul.products li.product` -- `.woocommerce` is the class WooCommerce itself
 * always wraps a product loop in, on any page: it's a body class WordPress
 * adds automatically on the shop/category archive (via is_woocommerce()),
 * and separately WooCommerce's own [products]/[product_category]/etc.
 * shortcodes wrap their own rendered output in a literal
 * `<div class="woocommerce">` wherever that shortcode is placed (confirmed
 * in WC core, class-wc-shortcodes.php). That means a later homepage
 * product-slider widget built on a standard WooCommerce shortcode/loop
 * inherits this card styling automatically, with nothing to redo here --
 * the actual per-page hooks that generate this markup
 * (medimart_archive_price_and_action(), the badge/rating functions, all
 * in inc/woocommerce-archive.php) are already attached to WooCommerce's
 * generic loop-item hooks, not anything archive-page-specific, so no PHP
 * changes were needed for this to already work.
 *
 * Enqueued today from the same is_shop()/is_product_taxonomy() condition
 * shop-archive.css uses (see medimart_enqueue_product_card_assets() in
 * functions.php) -- not loaded site-wide yet, since nothing else uses
 * this markup today and Stage 1 shouldn't change any page that hasn't
 * been visually audited. When the homepage slider is actually built,
 * call that same enqueue function from wherever it renders.
 */

.woocommerce ul.products li.product {
	position: relative;
	width: auto !important;
	float: none !important;
	margin: 0;
	background: #fff;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.06), 0 0 4px 0 rgba(0, 0, 0, 0.04);
	min-height: 400px;
	display: flex;
	flex-direction: column;
}

/*
 * Default WooCommerce price is replaced visually by
 * medimart-product-actions (see inc/woocommerce-archive.php) -- hidden
 * here since it fires on the same hook ours does. Descendant selector,
 * not direct-child (>) -- confirmed live that .price sits nested inside
 * .woocommerce-loop-product__link, a sibling of the title, not a direct
 * child of li.product, so an earlier `>` version matched nothing and the
 * default price was showing duplicated.
 */
.woocommerce ul.products li.product .price {
	display: none;
}

/*
 * The default add-to-cart button is a real, separate on-image quick-action
 * (an arrow for variable products since they can't add-to-cart directly
 * without a variation, effectively a "view product" action; a real
 * add-to-cart for simple products), distinct from the price/View-Product
 * pair at the bottom of the card. Repositioned as a circle overlay,
 * top-right of the image, rather than hidden.
 */
.woocommerce ul.products li.product a.add_to_cart_button {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #b7b6b5;
	color: #6f6e6b;
	font-size: 0;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/*
 * Hover: green fill, white icon. The icon itself is an inline SVG stroke
 * (thin, 1.5px) rather than a bold Unicode arrow character -- the
 * Unicode arrow (U+2192) came out too bold/long, no CSS property
 * ("font-weight" doesn't apply usefully to most Unicode glyphs) gives
 * fine enough control over its thickness, an SVG does.
 *
 * Circle border is a lighter grey than the icon itself (#b7b6b5 vs the
 * icon's #6f6e6b) -- they read as the same weight when both are the
 * exact same grey, per instruction the border should sit a shade lighter.
 */
.woocommerce ul.products li.product a.add_to_cart_button:hover {
	background: #589f3c;
	border-color: #589f3c;
	color: #fff;
}

.woocommerce ul.products li.product a.add_to_cart_button::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * POA (price-on-application) products aren't purchasable, so WooCommerce's
 * default template swaps the add-to-cart button for a plain "Read more"
 * link instead -- it doesn't get the add_to_cart_button class (only
 * purchasable/in-stock products do), so none of the styling/positioning
 * above applies to it and it renders as an unstyled stray link. Our own
 * "View Product" link (medimart_archive_price_and_action) already covers
 * this case unconditionally. It was hidden here until 2026-09-24; the user
 * asked for every card to carry the top-right circle (basket or arrow), as
 * live does, so the "Read more" link becomes the arrow circle linking to
 * the product, identical to the variable-product arrow.
 */
.woocommerce ul.products li.product a.button.product_type_simple:not(.add_to_cart_button),
.woocommerce ul.products li.product a.button.product_type_variable:not(.add_to_cart_button) {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #b7b6b5;
	color: #6f6e6b;
	font-size: 0;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.woocommerce ul.products li.product a.button.product_type_simple:not(.add_to_cart_button):hover,
.woocommerce ul.products li.product a.button.product_type_variable:not(.add_to_cart_button):hover {
	background: #589f3c;
	border-color: #589f3c;
	color: #fff;
}

.woocommerce ul.products li.product a.button.product_type_simple:not(.add_to_cart_button)::after,
.woocommerce ul.products li.product a.button.product_type_variable:not(.add_to_cart_button)::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * Real bag icon, not the earlier tapered placeholder -- lifted directly
 * from the live site's own icon font (Porto-Font glyph U+E8BA, class
 * .porto-icon-shopping-cart despite the name actually being a square tote
 * bag) rather than redrawn from the reference screenshot, so the shape is
 * exact. The glyph's own path data is in font-space (1000-unit em square,
 * y increasing upward from the baseline) -- `transform="matrix(1 0 0 -1 0
 * 850)"` (850 = the font's ascent) converts that into normal top-down SVG
 * coordinates; `fill-rule: nonzero` is required, `evenodd` leaves a
 * visible gap at the top-left corner (confirmed by rendering both side by
 * side against the reference). A `stroke` is added on top of the fill
 * (mask only cares about the resulting alpha shape, not colour) purely to
 * fatten the glyph's own outline band slightly, per instruction to make
 * it a bit bolder.
 */
.woocommerce ul.products li.product a.add_to_cart_button.product_type_simple::after {
	width: 17px;
	height: 17px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='nonzero' stroke='%23000' stroke-width='24' transform='matrix(1 0 0 -1 0 850)' d='M928 545v-570q0 -22 -15.5 -37t-36.5 -15h-751q-21 0 -36.5 15t-15.5 37v570h855zM11 608v-633q0 -48 33.5 -81.5t80.5 -33.5h751q47 0 80.5 33.5t33.5 81.5v633h-979zM240 436q-1 147 66 239q36 50 86 75.5t104 25.5q55 0 106.5 -26t88.5 -77q69 -93 69 -241l63 1q-1 167 -82 277q-46 63 -110.5 96t-134.5 33q-69 0 -132.5 -32.5t-107.5 -94.5q-79 -107 -79 -273q0 -2 15.5 -2.5t31.5 -0.5h16z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='nonzero' stroke='%23000' stroke-width='24' transform='matrix(1 0 0 -1 0 850)' d='M928 545v-570q0 -22 -15.5 -37t-36.5 -15h-751q-21 0 -36.5 15t-15.5 37v570h855zM11 608v-633q0 -48 33.5 -81.5t80.5 -33.5h751q47 0 80.5 33.5t33.5 81.5v633h-979zM240 436q-1 147 66 239q36 50 86 75.5t104 25.5q55 0 106.5 -26t88.5 -77q69 -93 69 -241l63 1q-1 167 -82 277q-46 63 -110.5 96t-134.5 33q-69 0 -132.5 -32.5t-107.5 -94.5q-79 -107 -79 -273q0 -2 15.5 -2.5t31.5 -0.5h16z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * WooCommerce's default loop template puts the image directly inside
 * .woocommerce-loop-product__link with no separate thumbnail wrapper div
 * (confirmed by inspecting the actual rendered markup, not assumed) --
 * styled directly on the <a>/<img> rather than a wrapper that doesn't
 * exist.
 */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	/* Square, as live: the card is rounded, the photo inside it is not
	 * (user feedback 2026-09-28; the radius was visible on images with a
	 * coloured background). */
	border-radius: 0;
}

/*
 * WooCommerce's default 5-star .star-rating is hidden -- replaced by the
 * single-star + numeric + review-count markup from
 * medimart_archive_rating() (inc/woocommerce-archive.php), which is the
 * actual source found live: an active legacy snippet
 * ("yourprefix_archive_rating"), not the Customer Reviews plugin as
 * first assumed. Its CSS (.main_rating_wrap, .single_star, .rating_avg,
 * .rating_rev) was migrated in from css-by-sss-team.css on 2026-09-11,
 * confirmed still active via live A/B test.
 */
.woocommerce ul.products li.product .star-rating {
	display: none;
}

.main_rating_wrap {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	margin: 0 !important;
}
.main_rating_wrap *,
.main_rating_wrap *::before,
.main_rating_wrap *::after {
	margin: 0 !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 13px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: normal !important;
	text-transform: capitalize !important;
	color: #999 !important;
}
.single_star {
	color: #589e3c !important;
	font-size: 14px;
	line-height: 1;
}

/*
 * No truncation on desktop -- the 4-column grid is wide enough that no
 * real product title actually reaches 2 lines there, so clamping was
 * clipping titles that didn't need it and triggering false "..." marks
 * (see archive-title-truncate.js). Truncation is mobile-only, in the
 * max-width: 991px block below -- a narrower slider layout may need its
 * own call on this if it ever runs at a narrower-than-desktop card width
 * outside that breakpoint.
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	position: relative;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.3px;
	text-transform: capitalize;
	line-height: 1.2;
	margin: 10px 0 0;
}

/*
 * Only the title text itself turns green on hover, not the whole card --
 * :hover on the title element directly, not on li.product (which
 * previously made hovering anywhere on the card, including the price
 * area, turn the title green). Clicking name/image/View Product still
 * opens the product because each of those is its own real link; this
 * only affects the colour change trigger, not what's clickable.
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
	color: #589f3c;
}

/*
 * WooCommerce's default "Sale!" flash badge (.onsale) removed -- it was
 * rendering alongside the custom discount-percentage badge, which is the
 * one actually wanted here.
 */
.woocommerce ul.products li.product span.onsale {
	display: none !important;
}

/* Price + action wrapper */
.woocommerce ul.products li.product div.medimart-product-actions {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.woocommerce ul.products li.product div.medimart-product-actions__price {
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-weight: 600;
}

/* Sale price first, the struck-through regular price to its right
 * (user feedback 2026-09-28; WooCommerce outputs del before ins). */
.woocommerce ul.products li.product div.medimart-product-actions__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 6px;
}

.woocommerce ul.products li.product div.medimart-product-actions__price del {
	order: 2;
	font-size: 12px;
	opacity: 0.5;
	margin-right: 0;
}

.woocommerce ul.products li.product div.medimart-product-actions__price ins {
	order: 1;
	text-decoration: none;
}

/*
 * Padding corrected against the live site's actual computed style
 * (8px 12px, not 8px 18px -- close but not exact from the first pass).
 *
 * Selector specificity: found live, via an actual specificity trace, that
 * this was losing to WooCommerce's own default button rule
 * (".woocommerce a.button", specificity 0,2,1 once its zero-specificity
 * :where() wrapper is discounted) -- a bare single-class selector (0,1,0)
 * never stood a chance regardless of what values it had. Every rule below
 * is qualified with `.woocommerce ul.products li.product` + element type
 * to safely clear that bar, not just this one.
 */
.woocommerce ul.products li.product a.medimart-view-product-btn {
	color: #010101;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 400;
	border-radius: 66px;
	border: 1px solid rgba(1, 1, 1, 0.12);
	background: transparent;
	padding: 8px 12px;
	white-space: nowrap;
}

.woocommerce ul.products li.product a.medimart-view-product-btn:hover {
	color: #fff;
	border: 1px solid #589f3c;
	background: linear-gradient(180deg, #589f3c 0%, #4f8f36 100%);
}

/*
 * Badges. Positioning and colour matched against the live site's actual
 * computed styles -- the discount badge sits at the TOP of the image and
 * is green, not black; it isn't part of the same shared bottom-left group
 * as the other three, which come from the already-enqueued clearance/
 * arthritis/refurbished CSS files (pointing at these class names, since
 * those files targeted the old "-sss"-era class names which no longer
 * exist in the markup).
 */
.woocommerce ul.products li.product span.medimart-badge {
	position: absolute;
	z-index: 9;
	color: #fff;
	border-radius: 50px;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	padding: 5px 10px;
	text-transform: uppercase;
	pointer-events: none;
	white-space: nowrap;
}

/* Left edge in line with the photo, not the card edge (2026-10-15,
 * project lead): the card's padding, 10px here and 20px under 992px. */
.woocommerce ul.products li.product span.medimart-badge--discount {
	top: 10px;
	left: 10px;
	z-index: 10;
	background: #589f3c;
	backdrop-filter: blur(2px);
	font-size: 12px;
	font-weight: 500;
	display: inline-flex;
	padding: 5px 10px;
	justify-content: center;
	align-items: center;
}

.woocommerce ul.products li.product span.medimart-badge--clearance {
	left: 8px;
	bottom: 12px;
	background: #d40032;
}

.woocommerce ul.products li.product span.medimart-badge--arthritis-friendly {
	left: 0;
	bottom: 12px;
	background: #589f3c;
}

.woocommerce ul.products li.product span.medimart-badge--refurbished {
	left: 0;
	bottom: 32px;
	background: #6b6c6b;
}

@media (max-width: 991px) {
	/*
	 * Padding raised from 8px to 20px, matching the reference site -- since
	 * the image inside fills 100% of the card's content box, more padding
	 * here is what actually makes the image itself render smaller, not a
	 * separate size rule on the image.
	 *
	 * margin: 0 also re-asserted here specifically, with !important --
	 * confirmed live (measured computed style: 47.872px = exactly 2.992em)
	 * that WooCommerce's own woocommerce-smallscreen.css sets `ul.products
	 * [class*="columns-"] li.product { margin: 0 0 2.992em }`, and our own
	 * base (non-!important) `margin: 0` loses to it: that legacy selector
	 * has more classes once its `.woocommerce`/`.woocommerce-page` prefix
	 * and the `[class*="columns-"]` attribute selector are counted, so it
	 * wins on specificity even though it's the later-established rule
	 * that "should" be losing (only `row-gap`, on the archive page's own
	 * grid, controls the grid's own gutter, not this separate margin
	 * adding on top of it).
	 */
	.woocommerce ul.products li.product {
		min-height: 340px;
		padding: 20px;
		margin: 0 !important;
	}

	.woocommerce ul.products li.product span.medimart-badge--discount {
		left: 20px;
	}

	/*
	 * Matches the reference site's own product-title spec (17px/400/.3px
	 * letter-spacing), clamped to 2 lines -- the smaller 15px/3-line
	 * version this replaces was a first-pass guess, not measured against
	 * the live site. `line-height` is numeric (1.2), not the reference's
	 * own literal "normal", so `max-height` below is a real measured
	 * figure: 40.8px (2 x 20.4px line-height) clips into the bottom of
	 * line 2 itself rather than only stopping a 3rd line, confirmed live
	 * via Range.getClientRects() on the actual text; 50px is the smallest
	 * value that measured clean.
	 *
	 * `-webkit-line-clamp`/`-webkit-box` deliberately dropped -- on at
	 * least one real device, unlike this tool's test environment,
	 * -webkit-box display DOES engage and paints its own native ellipsis,
	 * which then doubled up with the JS-added manual "..." below
	 * (archive-title-truncate.js), showing two "..." in a row. `max-height`
	 * + `overflow: hidden` alone (no line-clamp) is the actual clip
	 * guarantee and was already confirmed to stop the 3rd-line bleed by
	 * itself; the JS ellipsis is the only "..." mechanism now. `!important`
	 * still needed: WooCommerce's own woocommerce-smallscreen.css (loaded
	 * only below 768px) carries a competing rule that resets `overflow` at
	 * this same breakpoint.
	 */
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		position: relative;
		font-size: 17px !important;
		font-weight: 400 !important;
		line-height: 1.2 !important;
		max-height: 50px !important;
		letter-spacing: 0.3px !important;
		margin-bottom: 8px !important;
		overflow: hidden !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title.is-truncated::after {
		content: "...";
		position: absolute;
		right: 0;
		bottom: 0;
		padding-left: 6px;
		background: #fff;
		color: #000;
	}

	/*
	 * Rating text and price sized down slightly for a narrower card. Both
	 * selectors already win on specificity alone against their legacy/base
	 * counterparts (2+ classes vs 1), no !important needed.
	 */
	.woocommerce ul.products li.product .main_rating_wrap *,
	.woocommerce ul.products li.product .main_rating_wrap *::before,
	.woocommerce ul.products li.product .main_rating_wrap *::after {
		font-size: 12px !important;
	}

	.woocommerce ul.products li.product div.medimart-product-actions__price {
		font-size: 17px;
	}

	.woocommerce ul.products li.product div.medimart-product-actions__price del {
		font-size: 13px;
	}

	/*
	 * Title-to-rating gap fixed at 8px (each gap has exactly one margin
	 * contributing to it -- the earlier element's margin-bottom -- not two
	 * adding together), but the actions block (price + button) keeps
	 * `margin-top: auto` rather than a fixed gap.
	 *
	 * Correction: an earlier pass set this to a fixed gap too, matching the
	 * rest of the card -- but a 2-column grid isn't a single card in
	 * isolation, so removing the auto margin broke row alignment: a
	 * product with a single price/no price range (POA) or a short title
	 * has less content above the button than its neighbour, so the button
	 * sat higher, inconsistently, exactly the "coming up a bit" behaviour
	 * that was reported. `min-height: 400px`/`340px` on li.product (base
	 * rule above / the archive page's own mobile override) plus the grid's
	 * own row-stretch (CSS Grid's default align-items: stretch) means
	 * every card in a row is already the same height regardless of
	 * content, so `margin-top: auto` here reliably pins the button to that
	 * same shared bottom edge, the same way it does across a desktop row.
	 */
	.woocommerce ul.products li.product .main_rating_wrap {
		margin-top: 0 !important;
		margin-bottom: 8px !important;
	}

	.woocommerce ul.products li.product div.medimart-product-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin-top: auto;
		padding-top: 10px;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products li.product .medimart-product-actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*
 * WooCommerce appends a "View cart" link next to the quick add-to-cart
 * circle after an ajax add. Live shows none; the added-to-cart popup
 * (header.css) carries the View cart button instead.
 */
.woocommerce ul.products li.product a.added_to_cart.wc-forward {
	display: none;
}

/*
 * Quick add-to-cart states. WooCommerce's own `.loading` rule fades the
 * button to 25% and spins whatever sits in ::after, which turned our bag
 * icon end over end. Instead: a small spinning ring while it adds, then a
 * white tick on green once added; added-to-cart-popup.js removes `.added`
 * after 1.5s so the bag comes back.
 */
.woocommerce ul.products li.product a.add_to_cart_button.loading {
	opacity: 1;
	padding: 0;
	pointer-events: none;
}

.woocommerce ul.products li.product a.add_to_cart_button.loading::after {
	content: "";
	position: static;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	background: none;
	-webkit-mask: none;
	mask: none;
	font-family: inherit;
	animation: medimart-card-cart-spin 0.7s linear infinite;
}

.woocommerce ul.products li.product a.add_to_cart_button.added {
	background: #589f3c;
	border-color: #589f3c;
	color: #fff;
}

.woocommerce ul.products li.product a.add_to_cart_button.added::after {
	content: "";
	margin: 0;
	font-family: inherit;
	animation: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes medimart-card-cart-spin {
	to {
		transform: rotate(360deg);
	}
}

/*
 * Sale countdown band on cards (medimart_archive_sale_countdown()), as
 * live's cards, measured 2026-10-09: 10px in from the image's sides and
 * bottom, 70%-opaque site green, 5px top and bottom padding, centred white
 * text, the title 11px and the time 13px/500, both uppercase. Printed after
 * the thumbnail and pulled up over its bottom edge (no image wrapper in the
 * card markup to position against).
 */
.woocommerce ul.products li.product .medimart-card-countdown {
	position: relative;
	z-index: 2;
	margin: -58px 10px 26px;
	padding: 5px 4px;
	color: #fff;
	font-family: "Open Sans", sans-serif;
	letter-spacing: 0.2px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
}

.woocommerce ul.products li.product .medimart-card-countdown::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #589f3c;
	opacity: 0.7;
}

.medimart-card-countdown__title {
	margin-right: 4px;
	font-size: 11px;
}

.medimart-card-countdown__time {
	font-size: 13px;
	font-weight: 500;
}