/**
 * Canonical product card — single source for the shared card design.
 *
 * Two markup families share this file:
 *  - The shop/category grid + product search results
 *    (templates/archive-product.html, templates/product-search-results.html),
 *    rendered by WooCommerce's own Product Collection blocks inside
 *    `.zozia-shop-grid`.
 *  - Every hand-rolled product grid on the site — Discover Favorites,
 *    Trending Now, Deals, Spotlight Deals, related products — rendered by
 *    zozia_render_product_card() (inc/product-card.php) as `.zozia-product-card`.
 *
 * Every rule below lists both selector families together, so a change made
 * here (a color, a size, a spacing value) lands on every product card on the
 * site at once — no second file to remember to update. Section-specific
 * layout (grid columns, carousel rows, tabs, nav arrows, card width in a
 * fixed-width carousel) stays owned by each section's own stylesheet
 * (shop.css / discover-favorites.css / trending-now.css / deals.css /
 * related-products.css) — only the card itself lives here.
 *
 * The wishlist heart (`.zozia-card-wishlist`) lives here too, unscoped —
 * both card families render it as a plain sibling of the image (see
 * zozia_render_product_card_wishlist_html() in inc/product-card.php), and
 * it only needs a `position: relative` ancestor, which both card families
 * provide below.
 */

/* Card container */
.zozia-shop-grid li.wc-block-product,
.zozia-product-card {
	position: relative;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Wishlist heart — positioned relative to the card (not the image wrapper,
   which it's a sibling of, not a child of) so it overlays the image
   without living inside the image's own link. */
.zozia-card-wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: none;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	padding: 0;
	box-shadow: 0 2px 6px rgba(36, 16, 25, 0.15);
}

.zozia-card-wishlist:hover,
.zozia-card-wishlist:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Brief "Added to wishlist" / "Removed from wishlist" tooltip, shown by
   wishlist.js on click. Anchored below-right of the heart (not above)
   since the card itself clips overflow — anything positioned above the
   button's top edge would be cut off. */
.zozia-card-wishlist__feedback {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	white-space: nowrap;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 4px;
	pointer-events: none;
}

.zozia-card-wishlist[aria-pressed="true"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.zozia-card-wishlist[aria-pressed="true"] svg {
	fill: currentColor;
}

/* Image */
.zozia-shop-grid .wp-block-woocommerce-product-image,
.zozia-product-card__image {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.zozia-shop-grid .wp-block-woocommerce-product-image img,
.zozia-product-card__image .zozia-product-thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

/* zozia_get_product_thumb_html()'s primary image is positioned
   absolute/inset:0 by base.css by default (so the same helper also works
   for single-image, no-hover callers that need to fill a fixed-size box).
   Inside this card it sits in normal flow instead, sized by its own
   aspect-ratio — same as the shop grid's plain <img> above, which was
   never positioned to begin with and needs no equivalent reset. */
.zozia-product-card__image .zozia-product-thumb:not(.zozia-product-thumb--hover) {
	position: static;
	inset: auto;
	height: auto;
}

/* Hover crossfade image — absolutely positioned over the primary image.
   zozia_render_product_card() always renders it via
   zozia_get_product_thumb_html( ..., $with_hover = true ), same helper the
   shop grid's own hover image (zozia_add_shop_grid_hover_image() in
   inc/wc-products.php) is built from. */
.zozia-product-card__image .zozia-product-thumb--hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zozia-shop-grid li.wc-block-product:hover .wp-block-woocommerce-product-image img,
.zozia-product-card:hover .zozia-product-card__image .zozia-product-thumb {
	transform: scale(1.06);
}

.zozia-shop-grid li.wc-block-product:hover .zozia-shop-hover-thumb,
.zozia-product-card:hover .zozia-product-card__image .zozia-product-thumb--hover {
	opacity: 1;
}

/* Sale badge */
.zozia-shop-grid .wp-block-woocommerce-product-sale-badge,
.zozia-product-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
}

/* `!important` + explicit static/auto here defeats WooCommerce core's own
   "alignright" placement CSS on this block (`.wc-block-components-product
   -sale-badge--align-right`, applied by default), which would otherwise
   absolutely-position the badge itself on top of the positioning already
   handled by the wrapper rule above. The canonical `__badge` span has no
   such competing core CSS to fight, so it only needs the shared rule below. */
.zozia-shop-grid .wc-block-components-product-sale-badge {
	position: static !important;
	right: auto !important;
}

.zozia-shop-grid .wc-block-components-product-sale-badge,
.zozia-product-card__badge {
	display: block;
	margin: 0;
	background: var(--wp--preset--color--sale);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 3px;
	padding: 4px 10px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
}

.zozia-shop-grid .wc-block-components-product-sale-badge__text {
	color: inherit;
}

/* Title */
.zozia-shop-grid .wp-block-post-title,
.zozia-product-card__title {
	margin: 12px 14px 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: normal;
	line-height: 1.3;
}

.zozia-shop-grid .wp-block-post-title a,
.zozia-product-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* Price */
.zozia-shop-grid .wp-block-woocommerce-product-price,
.zozia-product-card__price {
	margin: 0 14px 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
}

.zozia-shop-grid .wc-block-components-product-price,
.zozia-product-card__price {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* Actual discounted price only — a regular (non-sale) price stays bold in
   the brand primary color from the rule above. */
.zozia-shop-grid .wc-block-components-product-price ins,
.zozia-product-card__price ins {
	text-decoration: none;
	color: var(--wp--preset--color--sale);
	font-weight: 700;
}

.zozia-shop-grid .wc-block-components-product-price del,
.zozia-product-card__price del {
	color: var(--wp--preset--color--muted);
	font-weight: normal;
	font-size: 12px;
	text-decoration: line-through;
}