/*
 * Favourites (includes/favourites.php, assets/favourites.js).
 * Heart: rose outline; saved = filled rose (aria-pressed="true").
 * "body" in selectors: this file loads before the theme's style.css, so theme rules would win without it.
 */

.dn-fav {
	--dn-fav-color: var(--wp--preset--color--accent-1, #a84462);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--dn-fav-color);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.dn-fav__icon {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.15s ease;
}
.dn-fav[aria-pressed="true"] .dn-fav__icon {
	fill: currentColor;
}
.dn-fav:active .dn-fav__icon {
	transform: scale(0.85);
}
.dn-fav:focus-visible {
	outline: 2px solid var(--dn-fav-color);
	outline-offset: 2px;
}

/* Product cards: white circle in the top right corner of the photo. */
body .wc-block-components-product-image:has(> .dn-fav--card),
.dn-favs__media {
	position: relative;
}
body .dn-fav--card {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.dn-fav--card .dn-fav__icon {
	width: 1.25rem;
	height: 1.25rem;
}

/*
 * Product page: round outline button as tall as Add to cart / Buy now
 * (theme buttons: font-size medium, padding 0.8rem top and bottom).
 */
body .dn-fav--page {
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: inherit;
	width: 3.1em;
	height: 3.1em;
	width: calc(1.6rem + 1lh);
	height: calc(1.6rem + 1lh);
	border-radius: 50%;
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--dn-fav-color);
}
body .dn-fav--page:hover {
	background: var(--wp--preset--color--accent-2, #f6dde4);
}
.dn-fav--page .dn-fav__icon {
	width: 1.4rem;
	height: 1.4rem;
}
/* Keeps Add to cart, Buy now and the heart in one row on 375px phones. */
body .wp-block-woocommerce-add-to-cart-with-options .is-layout-flex:has(> .dn-fav--page) {
	gap: 0.5rem;
}

/* Header: heart link before the account icon, count in a rose bubble. */
.dn-fav-head {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.25rem;
	color: inherit;
	text-decoration: none;
}
.dn-fav-head .dn-fav__icon {
	width: 1.4rem;
	height: 1.4rem;
}
.dn-fav-count {
	position: absolute;
	top: -0.2rem;
	right: -0.45rem;
	min-width: 1.0625rem;
	height: 1.0625rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-1, #a84462);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.0625rem;
	text-align: center;
}
.dn-fav-count[hidden] {
	display: none;
}
/* Phones: smaller gaps between the header icons, so the logo keeps its width with the extra heart. */
@media (max-width: 599px) {
	body header .is-layout-flex:has(> .dn-fav-head) {
		gap: 4px;
	}
}

/*
 * My Account menu: heart icon for "Favourites". The theme draws each menu icon from --dn-icon
 * (a mask in the link colour, set per menu item); without it the item shows a plain grey square.
 */
.woocommerce-account .woocommerce-MyAccount-navigation-link--dn-favourites {
	--dn-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%22%2F%3E%3C%2Fsvg%3E");
}

/* Message after a tap. Above the phone bottom bar (includes/mobile-bottom-bar.php) when it is there. */
.dn-fav-toast {
	position: fixed;
	left: 50%;
	bottom: calc(1rem + var(--dn-bottom-bar-height, 0px) + env(safe-area-inset-bottom, 0px));
	z-index: 100000;
	max-width: calc(100vw - 2rem);
	padding: 0.75rem 1.1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--contrast, #2b2024);
	color: #fff;
	font-size: 0.9rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.dn-fav-toast.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}
.dn-fav-toast a {
	margin-left: 0.75rem;
	color: #f4c4d2;
	font-weight: 600;
}

/* Favourites page. */
.dn-favs__note {
	margin-bottom: 1.5rem;
	opacity: 0.75;
}
body ul.dn-favs__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 782px) {
	body ul.dn-favs__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem 1.5rem;
	}
}
body ul.dn-favs__grid[hidden],
.dn-favs__empty[hidden],
.dn-favs__loading[hidden] {
	display: none;
}
body .dn-favs__item {
	margin: 0;
	text-align: center;
}
.dn-favs__media {
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: rgba(0, 0, 0, 0.04);
}
.dn-favs__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body .dn-favs__title {
	margin: 0.75rem 0 0.35rem;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.4;
}
.dn-favs__title a {
	color: inherit;
	text-decoration: none;
}
.dn-favs__price {
	margin-bottom: 0.75rem;
}
/* Two columns on phones: smaller titles and buttons. */
@media (max-width: 781px) {
	body .dn-favs__title {
		font-size: var(--wp--preset--font-size--small, 0.95rem);
	}
	body .dn-favs__button .wp-element-button {
		padding: 0.55rem 1.25rem;
		font-size: var(--wp--preset--font-size--small, 0.95rem);
	}
}
body .dn-favs__empty {
	text-align: center;
	padding: 2rem 0;
}
body .dn-favs__empty .wp-block-button {
	display: inline-block;
}