/**
 * "My Wishlist" page. Cards are the canonical zozia_render_product_card()
 * (inc/product-card.php, styled by assets/css/product-card.css) — the same
 * card as the shop grid, Discover Favorites, Trending Now, etc. — so only
 * this page's own chrome (breadcrumb, guest note, grid layout, empty
 * state) lives here. See blocks/wishlist-grid/render.php for the
 * server-rendered markup, and assets/js/wishlist.js for the matching
 * guest-side card markup (buildGuestCard()).
 *
 * Grid breakpoints intentionally match .zozia-shop-grid (shop.css) — same
 * card, same columns at the same widths.
 */

.zozia-wishlist__crumbs a {
	color: inherit;
	text-decoration: none;
}

.zozia-wishlist__guest-note {
	max-width: 640px;
	margin: 0 0 var(--wp--preset--spacing--lg);
	padding: 12px 16px;
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
}

.zozia-wishlist__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: var(--wp--preset--spacing--lg);
}

.zozia-wishlist__empty {
	margin-top: var(--wp--preset--spacing--xl);
	color: var(--wp--preset--color--muted);
}

.zozia-wishlist__empty a {
	margin-left: 6px;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

@media (max-width: 1024px) {
	.zozia-wishlist__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 860px) {
	.zozia-wishlist__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

/* Same fix as the account pages (see .zozia-page-main in my-account.css):
   the generic page template's 48px top padding plus the root 24px
   header-to-content block gap read as a large empty strip above the
   breadcrumb on mobile. Scoped to .zozia-page-main, which only affects
   this page since this stylesheet only loads on is_page('wishlist') —
   the same class sits on several other pages (Terms, Privacy, About Us…)
   that share this template but load their own stylesheets instead. */
@media (max-width: 860px) {
	.zozia-page-main {
		margin-top: 8px;
		/* templates/page-no-title.html sets this padding inline (style=""),
		   which beats a plain class selector regardless of specificity. */
		padding-top: 16px !important;
	}
}

@media (max-width: 480px) {
	.zozia-wishlist__grid {
		gap: 12px;
	}
}