/*
 * Duck Mark — the product archive card (fruity).
 *
 * Paints `templates/product-card.php`. Every rule is gated on the screen class
 * `body.dm-commerce-archive` — there is no global selector in this file.
 *
 * Colour comes from the shipped --dm-* tokens and nothing else: no literal, no
 * !important, no new namespace. --dm-accent (#ff8fab) is 2.15:1 on white, so it
 * is never a text or a line colour here — it is laid down as a SURFACE with
 * --dm-primary ink on top.
 *
 * Two of Astra's own variables are ANSWERED rather than fought, the same move
 * the product detail and account sheets already make: Astra prints
 * `.woocommerce-js a.button { background-color: var(--ast-global-color-0) }`
 * inline, and out-selecting that everywhere would mean naming every control on
 * the card. The selector stays Astra's; only the value is ours, scoped here.
 *
 * ---------------------------------------------------------------------------
 * On the selector shape
 *
 * The base is `ul.products li.dm-product-card` rather than the shorter
 * `.dm-product-card__body`. That is not decoration: a probe that forces each
 * declaration to `!important` and watches for a change found SIX rules losing
 * with the short form. Two sheets out-select it —
 *
 *   product-archive-pattern.css  body.dm-archive-card-editorial ul.products li.product .woocommerce-loop-product__title   [0,3,3]
 *   Astra inline                 .woocommerce ul.products li.product .price                                              [0,3,2]
 *
 * — and the short form was only [0,3,1]. Naming `ul.products li` takes this to
 * [0,4,3], which wins without a single !important.
 * ---------------------------------------------------------------------------
 */

/* ---------- tokens answered for this screen ---------- */

body.dm-commerce-archive {
	--ast-global-color-0: var(--dm-primary);
	--ast-global-color-1: var(--dm-muted);
}

/* ---------- the card ---------- */

body.dm-commerce-archive ul.products li.dm-product-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	background-color: var(--dm-bg);
	border: var(--dm-border-w) solid var(--dm-border);
	border-radius: var(--dm-radius-md);
	text-align: left;
	transition: box-shadow .18s ease, transform .18s ease;
}

body.dm-commerce-archive ul.products li.dm-product-card:hover,
body.dm-commerce-archive ul.products li.dm-product-card:focus-within {
	box-shadow: var(--dm-shadow-card);
	transform: translateY(calc(var(--dm-border-w) * -2));
}

/* ---------- media ---------- */

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__media {
	position: relative;
	background-color: var(--dm-surface);
}

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__media a {
	display: block;
	overflow: hidden;
}

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--dm-archive-card-ratio, 1 / 1);
	object-fit: cover;
	transition: transform .3s ease;
}

body.dm-commerce-archive ul.products li.dm-product-card:hover .dm-product-card__media img {
	transform: scale(1.03);
}

/*
 * Sale flash. Accent as a surface with --dm-primary ink, never accent as text.
 * NOT SEEN ON THIS SITE: no product is on sale, so WooCommerce prints nothing
 * here. `loop/sale-flash.php` IS requested 12 times per page, so the card does
 * call it — the emptiness is WooCommerce declining, not the card skipping. This
 * rule was measured on an injected copy of WooCommerce's own `span.onsale`.
 */
body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__media span.onsale {
	position: absolute;
	top: var(--dm-space-sm);
	left: var(--dm-space-sm);
	right: auto;
	z-index: 1;
	margin: 0;
	padding: var(--dm-space-xs) var(--dm-space-sm);
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
	background-color: var(--dm-accent);
	color: var(--dm-primary);
	border-radius: var(--dm-badge-radius);
	font-family: var(--dm-font-display);
	font-weight: var(--dm-btn-weight);
	letter-spacing: var(--dm-label-track);
}

/* ---------- body ---------- */

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--dm-space-xs);
	padding: var(--dm-gap);
}

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	color: var(--dm-primary);
	font-family: var(--dm-font-display);
	font-weight: var(--dm-display-weight);
	letter-spacing: var(--dm-display-track);
	font-size: 1em;
	line-height: 1.5;
}

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body .price {
	margin: 0;
	color: var(--dm-primary);
	font-family: var(--dm-font-body);
	font-weight: var(--dm-btn-weight);
	font-size: 1em;
}

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body .price del {
	color: var(--dm-muted);
	font-weight: 400;
}

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body .price ins {
	background-color: transparent;
	color: var(--dm-primary);
	text-decoration: none;
}

/*
 * Out of stock. WooCommerce's own `p.stock.out-of-stock`, printed by the card
 * when `is_in_stock()` is false. Surface + ink rather than a coloured word:
 * --dm-surface-2 ground with --dm-primary on top. accent is kept for the sale
 * badge so the two statuses do not read as the same thing.
 */
body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body p.stock.out-of-stock {
	align-self: flex-start;
	margin: 0;
	padding: var(--dm-space-xs) var(--dm-space-sm);
	background-color: var(--dm-surface-2);
	border: var(--dm-border-w) solid var(--dm-border);
	border-radius: var(--dm-badge-radius);
	color: var(--dm-primary);
	font-family: var(--dm-font-display);
	font-weight: var(--dm-btn-weight);
	font-size: .8em;
	letter-spacing: var(--dm-label-track);
	line-height: 1.4;
}

/*
 * Rating. NOT SEEN ON THIS SITE: no product carries a rating, so
 * `loop/rating.php` prints nothing — again, it IS requested 12 times per page.
 * Measured on an injected copy of WooCommerce's own star markup.
 */
body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body .star-rating {
	margin: 0;
	color: var(--dm-primary);
	font-size: .8em;
}

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body .woocommerce-review-link {
	color: var(--dm-muted);
}

/* ---------- add to cart ---------- */

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body a.button,
body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body a.added_to_cart {
	display: block;
	margin: var(--dm-space-xs) 0 0;
	padding: var(--dm-space-sm) var(--dm-gap);
	background-color: var(--dm-accent);
	border: var(--dm-border-w) solid var(--dm-primary);
	border-radius: var(--dm-btn-radius);
	color: var(--dm-primary);
	font-family: var(--dm-font-display);
	font-weight: var(--dm-btn-weight);
	letter-spacing: var(--dm-label-track);
	text-align: center;
	text-decoration: none;
	text-shadow: none;
}

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body a.button:hover {
	background-color: var(--dm-accent-2);
	color: var(--dm-primary);
}

body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body a.button:focus-visible {
	outline: var(--dm-rule) solid var(--dm-primary);
	outline-offset: var(--dm-border-w);
}

/* The ajax "View cart" link WooCommerce appends after a successful add. */
body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body a.added_to_cart {
	background-color: var(--dm-surface-2);
}

/* WooCommerce's own loading/added states on the ajax button. */
body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body a.button.loading,
body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body a.button.added {
	color: var(--dm-primary);
}

/* ---------- toolbar and pagination ---------- */

body.dm-commerce-archive .woocommerce-result-count {
	color: var(--dm-muted);
	font-family: var(--dm-font-body);
}

body.dm-commerce-archive .woocommerce-ordering select {
	padding: var(--dm-space-xs) var(--dm-space-sm);
	background-color: var(--dm-bg);
	border: var(--dm-border-w) solid var(--dm-border);
	border-radius: var(--dm-radius-sm);
	color: var(--dm-text);
	font-family: var(--dm-font-body);
}

body.dm-commerce-archive nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--dm-space-xs);
	border: 0;
}

body.dm-commerce-archive nav.woocommerce-pagination ul li {
	border: 0;
}

body.dm-commerce-archive nav.woocommerce-pagination ul li a.page-numbers,
body.dm-commerce-archive nav.woocommerce-pagination ul li span.page-numbers {
	padding: var(--dm-space-xs) var(--dm-space-sm);
	border-radius: var(--dm-radius-sm);
	color: var(--dm-primary);
	font-family: var(--dm-font-body);
	text-decoration: none;
}

body.dm-commerce-archive nav.woocommerce-pagination ul li a.page-numbers:hover {
	background-color: var(--dm-surface-2);
}

body.dm-commerce-archive nav.woocommerce-pagination ul li span.page-numbers.current {
	background-color: var(--dm-accent);
	color: var(--dm-primary);
	font-weight: var(--dm-btn-weight);
}

/* ---------- narrow ---------- */

@media (max-width: 782px) {
	body.dm-commerce-archive ul.products li.dm-product-card .dm-product-card__body {
		padding: var(--dm-space-sm);
	}

	body.dm-commerce-archive ul.products li.dm-product-card:hover {
		transform: none;
	}
}