/*
 * Daylon — the product card (DAY-11 v4 §2.2, §5 states 6–9, §7: "built once").
 *
 * The card is printed by one function, daylon_product_card_markup() (inc/product-card.php,
 * DAY-329), for every surface that shows one: the home's grid, the listing and the search
 * (through the daylon/product-card block), Favourites and the product page's related block.
 * Until DAY-320 each of the four stylesheets carried its own copy of these rules, and they
 * drifted: the name was a serif, underlined, primary-coloured link in two places and quiet
 * body text in the other two, and only one copy clamped it to two lines. This file is the one
 * copy; it is registered once (functions.php) and every surface that prints a card depends
 * on it.
 *
 *   .daylon-product-card            <li>, or <div> inside a Post Template's own <li>
 *     .daylon-product-card__image   <a> to the product — a <div> once it is "Ya no disponible"
 *     .daylon-favourite-slot--card  the heart — its own rules are in favourites.css
 *     .daylon-product-card__name    <h2>/<h3>, holding the card's one real link
 *     .daylon-product-card__price   <p>
 *     .daylon-product-card__colors  <p>, only with two or more colours in stock (DAY-405)
 *
 * The grid a card sits in belongs to each page, not to the card.
 */

.daylon-product-card {
	position: relative;
	min-width: 0;
}

/* The heart is positioned on the image's corner; no margin of its form's may move it. The
   card sets its own rhythm below. */
.daylon-product-card > .daylon-favourite-slot--card {
	margin: 0;
}

/* ---------------------------------------------------------------- image, §2.3 */

/* Every card is 4:5, covered and centred, whatever shape the photograph arrived in. */
.daylon-product-card .daylon-product-card__image {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin: 0;
	background: var(--wp--preset--color--tertiary);
}

.daylon-product-card .daylon-product-card__image > a {
	display: block;
	height: 100%;
}

.daylon-product-card .daylon-product-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* §5 state 7: no photograph. The same 4:5 box, so the row does not reflow — and a quiet mark
   in it, because a bare pale block on a white page read as a hole in the grid rather than as
   a card (DAY-319 F-05). Drawn as a mask so its colour stays a theme.json token. */
.daylon-product-card .daylon-product-card__image--placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--border);
	opacity: 0.45;
	-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='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8.2a1.9 1.9 0 1 1 1.9-1.9c0 1.5-1.9 1.6-1.9 3.2l8.2 5.6c1 .7.5 2.2-.7 2.2h-15c-1.2 0-1.7-1.5-.7-2.2L12 9.5'/%3E%3C/svg%3E") center / 2.5rem 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='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8.2a1.9 1.9 0 1 1 1.9-1.9c0 1.5-1.9 1.6-1.9 3.2l8.2 5.6c1 .7.5 2.2-.7 2.2h-15c-1.2 0-1.7-1.5-.7-2.2L12 9.5'/%3E%3C/svg%3E") center / 2.5rem no-repeat;
}

/* §5 state 6: "Agotado" is a flat label over the lower image, opposite the heart's corner. */
.daylon-product-card .daylon-product-card__stock {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--20);
	inset-inline-start: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	padding: 0.2em 0.6em;
}

/* ---------------------------------------------------------------- name, §2.2 and §6 */

/* "Small and quiet beneath the photograph": body face, body colour, not the heading serif the
   <h2>/<h3> would otherwise inherit. Two lines, then an ellipsis (§5 state 8) — the full name
   is one tap away, and an uneven grid is the bigger cost. */
.daylon-product-card .daylon-product-card__name {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: inherit;
	line-height: 1.5;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* `display: inline` is load-bearing: core makes a post-title link an inline-block, and an
   inline-block is one unbreakable box to line-clamp — the name ran to five lines with the
   clamp already declared. (0,3,1) so it also outranks style.css's underline-at-rest rule for
   post-title links, which is (0,2,1). */
.daylon-product-card .daylon-product-card__name a:not(.wp-element-button) {
	display: inline;
	color: inherit;
	text-decoration: none;
}

.daylon-product-card .daylon-product-card__name a:not(.wp-element-button):hover,
.daylon-product-card .daylon-product-card__name a:not(.wp-element-button):focus-visible {
	text-decoration: underline;
}

/* The site's focus ring is two box-shadows outside the element (style.css), and the clamp's
   `overflow: hidden` would cut them off. Inside the box an outline survives; (0,4,3) to
   outrank the site rule's (0,2,2). */
html body .daylon-product-card .daylon-product-card__name a:focus-visible:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: -2px;
}

/* ---------------------------------------------------------------- price, §2.2 */

/* Body colour, the struck original beside it when reduced. */
.daylon-product-card .daylon-product-card__price {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.daylon-product-card .daylon-product-card__price del {
	color: var(--wp--preset--color--secondary);
}

/* The current price is plain text: a browser underlines <ins> by default, and only
   WooCommerce's own price block — which the card no longer prints — undid that. */
.daylon-product-card .daylon-product-card__price ins {
	text-decoration: none;
}

/* ---------------------------------------------------------------- colours, §2.5 */

/* The last line, and the quietest: one tone per colour in stock, left-aligned under the price.
   A card without it ends at its price — no slot is reserved, and nothing above moves.

   One line, the same at every width. It wraps on purpose and shows one line of it: on a card
   too narrow for the row, «+N» drops out whole instead of being cut in half, and the tones
   stay (§2.5, "safety net"). The row gap only pushes that second line out of sight. */
.daylon-product-card .daylon-product-card__colors {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: center;
	gap: 1.5em 6px;
	height: 1.5em;
	overflow: hidden;
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	white-space: nowrap;
}

/* It is not a control — no hover, no focus, no stop of its own — but a tap on it still opens
   the product page, as a tap on the photograph does: the same hidden link, laid over the line. */
.daylon-product-card .daylon-product-card__colors-link {
	position: absolute;
	inset: 0;
}

/* 16px across, outline included. The outline is what makes a white tone a ring and not an
   absence (§5 state 19): `border` is 4.3:1 on the page's white, over the 3:1 of WCAG 1.4.11.
   The margin makes a line of tones exactly as tall as a line with «+N» in it. */
.daylon-product-card .daylon-product-card__tone {
	box-sizing: border-box;
	flex: none;
	width: 16px;
	height: 16px;
	margin-block: calc((1.5em - 16px) / 2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--daylon-card-tone, var(--wp--preset--color--tertiary));
}

/* A colour with no tone set in wp-admin (§5 state 17): the product page's neutral hatch
   (product.css, DAY-81), never a hue guessed from its name. */
.daylon-product-card .daylon-product-card__tone--unknown {
	background: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--tertiary) 0 3px,
		var(--wp--preset--color--border-light) 3px 6px
	);
}

.daylon-product-card .daylon-product-card__colors-more,
.daylon-product-card .daylon-product-card__colors-count {
	flex: none;
}

/* «Disponible en: …» — what a screen reader gets in the tones' place. Hidden from the eye
   only; the card's own rule, because `.screen-reader-text` is not every surface's. */
.daylon-product-card .daylon-product-card__colors-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Forced colours replace every background, and the tone is one: as on the product page
   (DAY-403) a tone opts out and keeps its paint, edged in a system colour. A colour with no
   tone is left as forced colours already draw it — a ring. */
@media (forced-colors: active) {
	.daylon-product-card .daylon-product-card__tone:not(.daylon-product-card__tone--unknown) {
		border-color: CanvasText;
		forced-color-adjust: none;
	}
}