/*
 * Favourites (DAY-93) — the heart control, the header entry point and the /favoritos/ page.
 * Against "Daylon — Favourites (UX spec)" v4. Every colour is a token slug (spec §0), so a
 * palette change never reaches this file.
 *
 * Focus: the site-wide ring in style.css already reaches every control here; nothing in
 * this file removes or restyles it.
 */

/* ---------------------------------------------------------------- the control (§3) */

/* One look, two elements: a submit button in a form for a signed-in customer, a link to the
   account page for everyone else (§4, §4a). The display values below would otherwise beat
   the `hidden` attribute's UA rule. */
.daylon-favourites-link__badge[hidden],
.daylon-favourites__grid[hidden],
.daylon-favourites__empty[hidden] {
	display: none;
}

.daylon-favourite-form {
	display: inline-flex;
	flex: none;
	margin: 0;
}

.daylon-favourite {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The target is 44×44; the icon is 22 and centred inside it (§3). */
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--main);
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.daylon-favourite__icon {
	display: block;
	fill: none;
}

/* Hover / focus, not favourited: the stroke moves to the accent (§3, DAY-28 §4.3). */
.daylon-favourite:hover,
.daylon-favourite:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Favourited: the SHAPE changes — outline to filled — never the colour alone (§3). */
.daylon-favourite[aria-pressed="true"] {
	color: var(--wp--preset--color--primary);
}

.daylon-favourite[aria-pressed="true"] .daylon-favourite__icon {
	fill: currentColor;
}

/* One quick scale-pulse on toggle (§3). Gated on no-preference, so under reduced motion the
   animation is never declared at all rather than declared and then cancelled. */
@media (prefers-reduced-motion: no-preference) {
	.daylon-favourite.is-pulsing .daylon-favourite__icon {
		animation: daylon-favourite-pulse var(--daylon-motion-quick, 150ms) ease-out;
	}

	.daylon-favourites__grid > li.is-leaving {
		opacity: 0;
		transition: opacity var(--daylon-motion-quick, 150ms) ease-out;
	}
}

@keyframes daylon-favourite-pulse {
	50% {
		transform: scale(1.2);
	}
}

/* On a card: top-right of the image (§2, DAY-11 v4 §2.2). The card is as wide as its image
   and the image is its first child, so the card's own top-right corner IS the image's.
   "Agotado" sits bottom-left — opposite corners, they cannot collide (§6 state 16).
   The disc behind the icon is what keeps an outline heart legible on a dark photograph:
   a stroke in `main` over an arbitrary image has no guaranteed contrast without it. */
.daylon-product-card {
	position: relative;
}

.daylon-favourite-slot--card {
	position: absolute;
	top: var(--wp--preset--spacing--20, 0.5rem);
	right: var(--wp--preset--spacing--20, 0.5rem);
	z-index: 1;
}

.daylon-favourite--card {
	background: var(--wp--preset--color--base);
}

/* Product page: beside the price, on its line (DAY-10 v10 §2 row 6). The row takes over the
   price block's top margin so the 44px control does not push the price down. */
.daylon-product__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--30);
	position: relative;
}

.daylon-product__price-row > .daylon-product__price {
	margin-block-start: 0;
}

/* In the desktop buy column "on its line" put the heart 380px from the price it belongs to;
   there it sits next to it (DAY-324). On a phone the far end is where the thumb is. */
@media (min-width: 1024px) {
	.daylon-product__price-row {
		justify-content: flex-start;
		gap: 4px;
	}
}

/* The failed-toggle note, at the control (§6 state 17). */
.daylon-favourite-note {
	position: absolute;
	top: calc(44px + var(--wp--preset--spacing--30, 0.75rem));
	right: var(--wp--preset--spacing--20, 0.5rem);
	left: var(--wp--preset--spacing--20, 0.5rem);
	z-index: 2;
	margin: 0;
	padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 0.75rem);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--x-small);
}

.daylon-product__price-row .daylon-favourite-note {
	top: 100%;
	right: 0;
	left: auto;
}

/* ---------------------------------------------------------------- header entry point */

/* The desktop row's icon, with its badge. Below 1024px the compact bar draws its own —
   `--bar`, no badge, in style.css with the rest of that bar (header spec v19 §3.1, DAY-350). */
.daylon-favourites-link--flat {
	display: none;
}

.daylon-favourites-link {
	position: relative;
	color: var(--wp--preset--color--main);
	text-decoration: none;
}

.daylon-favourites-link--flat:hover {
	color: var(--wp--preset--color--primary);
}

/* The badge is the cart's, exactly (DAY-33 §6): same disc, same corner, same tokens. */
.daylon-favourites-link--flat .daylon-favourites-link__badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	text-align: center;
}

/* Beside the heart, never on it — the cart's desktop badge again (style.css, DAY-324), sized
   in the count's em so enlarged text cannot outgrow the disc (DAY-637). */
@media (min-width: 1024px) {
	.daylon-favourites-link--flat .daylon-favourites-link__badge {
		top: 2px;
		right: auto;
		left: calc(50% + 9px);
		box-sizing: border-box;
		min-width: 1.5em;
		padding: 0 5px;
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 1.5;
	}
}

.daylon-favourites-link--panel {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 44px;
	margin-top: var(--wp--preset--spacing--60);
}

.daylon-favourites-link--panel .daylon-favourites-link__badge {
	min-width: 1.6em;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	text-align: center;
}

/* Favourites and account are one group at the foot of the panel: the account link keeps
   its own top margin only when it opens that group. */
.daylon-favourites-link--panel + .daylon-account-link--panel,
.daylon-favourites-link--panel + .wp-block-woocommerce-customer-account {
	margin-top: var(--wp--preset--spacing--30);
}

@media (min-width: 1024px) {
	.daylon-favourites-link--flat {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

/* ---------------------------------------------------------------- the page (§5) */

.daylon-favourites-page {
	padding-block-end: var(--wp--preset--spacing--70);
}

.daylon-favourites-breadcrumb {
	margin-block: var(--wp--preset--spacing--30) 0;
	font-size: var(--wp--preset--font-size--x-small);
}

.daylon-favourites-breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 44px;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.daylon-favourites__title {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.daylon-favourites__note {
	margin-block: 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

.daylon-favourites__exit a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* The listing's grid (DAY-11 §2.1): 2 columns 320–767px, 3 from 768px. A lone card keeps
   its column width — it is never stretched to fill the row (§6 state 7), which a fixed
   column count gives for free. */
.daylon-favourites__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.daylon-favourites__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	}
}

/* The card itself is product-card.css, the one copy every page that prints a card shares
   (DAY-320). Only the grid above and the heart are this file's. */