/**
 * Lenzzberry — global product card system.
 * SINGLE source of truth for product-card design.
 *
 * Two code paths share the same design tokens below:
 *   - shortcode path:  .lenzz-products ul.products li.product
 *                      (rendered by [lenzz_products] / [products] / [related_products] / etc.)
 *   - block path:      .lenzz-card
 *                      (used inside the archive template's wp:woocommerce/product-template)
 *
 * Change a value in `:root` and it propagates to every product card on the site.
 *
 * Loaded sitewide via inc/enqueues.php so it's always available.
 */

/* ====================================================================== */
/* DESIGN TOKENS — edit these to restyle every product card sitewide      */
/* ====================================================================== */

:root {
	--lenzz-card-radius:            14px;
	--lenzz-card-image-aspect:      1 / 1;
	--lenzz-card-image-radius:      14px;

	--lenzz-card-title-size:        var(--wp--preset--font-size--md);
	--lenzz-card-title-weight:      500;
	--lenzz-card-title-color:       var(--wp--preset--color--ink);

	--lenzz-card-price-size:        var(--wp--preset--font-size--md);
	--lenzz-card-price-weight:      700;
	--lenzz-card-price-color:       var(--wp--preset--color--brand);
	--lenzz-card-regular-color:     #9CA3AF;
	--lenzz-card-regular-size:      var(--wp--preset--font-size--sm);

	--lenzz-card-sale-bg:           #DC2626;
	--lenzz-card-sale-color:        #FFFFFF;
	--lenzz-card-sale-radius:       999px;

	--lenzz-card-button-bg:         var(--wp--preset--color--brand);
	--lenzz-card-button-bg-hover:   var(--wp--preset--color--brand-dark);
	--lenzz-card-button-color:      #FFFFFF;
	--lenzz-card-button-radius:     999px;

	--lenzz-card-grid-gap-x:        var(--wp--preset--spacing--40);
	--lenzz-card-grid-gap-y:        var(--wp--preset--spacing--50);

	--lenzz-card-hover-lift:        -4px;
	--lenzz-card-hover-image-scale: 1.04;
	--lenzz-card-transition:        250ms ease;
}


/* ====================================================================== */
/* SECTION WRAPPER — output by [lenzz_products] shortcode                 */
/* ====================================================================== */

.lenzz-products {
	margin: 0;
}

.lenzz-products__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.lenzz-products--align-center .lenzz-products__head {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.lenzz-products__head-text {
	flex: 1 1 auto;
	min-width: 0;
}

.lenzz-products__title {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	line-height: 1.2;
}

.lenzz-products__sub {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	max-width: 720px;
}

.lenzz-products--align-center .lenzz-products__sub {
	margin-inline: auto;
}

.lenzz-products__cta {
	color: var(--wp--preset--color--brand);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
	transition: color 150ms ease;
}

.lenzz-products__cta:hover {
	color: var(--wp--preset--color--brand-dark);
}

.lenzz-products__footer {
	margin-top: var(--wp--preset--spacing--40);
	display: flex;
	justify-content: center;
}

.lenzz-products--align-center .lenzz-products__footer .lenzz-products__cta {
	display: inline-block;
	padding: 0.7rem 1.75rem;
	border: 1.5px solid var(--wp--preset--color--brand);
	border-radius: 999px;
}


/* ====================================================================== */
/* GRID — overrides WC's float layout on any ul.products inside either    */
/* .lenzz-products (shortcode loops) or .lenzz-shop (archive pages).      */
/* Honours the columns="N" attribute.                                     */
/* ====================================================================== */

.lenzz-products ul.products,
.lenzz-shop ul.products,
.lenzz-single-product ul.products,
.lenzz-search ul.products,
.lenzz-products ul.products[class*="columns-"],
.lenzz-shop ul.products[class*="columns-"],
.lenzz-single-product ul.products[class*="columns-"],
.lenzz-search ul.products[class*="columns-"] {
	display: grid !important;
	gap: var(--lenzz-card-grid-gap-y) var(--lenzz-card-grid-gap-x);
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

.lenzz-products ul.products.columns-1,
.lenzz-shop ul.products.columns-1,
.lenzz-single-product ul.products.columns-1,
.lenzz-search ul.products.columns-1 { grid-template-columns: 1fr !important; }
.lenzz-products ul.products.columns-2,
.lenzz-shop ul.products.columns-2,
.lenzz-single-product ul.products.columns-2,
.lenzz-search ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.lenzz-products ul.products.columns-3,
.lenzz-shop ul.products.columns-3,
.lenzz-single-product ul.products.columns-3,
.lenzz-search ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.lenzz-products ul.products.columns-4,
.lenzz-shop ul.products.columns-4,
.lenzz-single-product ul.products.columns-4,
.lenzz-search ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.lenzz-products ul.products.columns-5,
.lenzz-shop ul.products.columns-5,
.lenzz-single-product ul.products.columns-5,
.lenzz-search ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.lenzz-products ul.products.columns-6,
.lenzz-shop ul.products.columns-6,
.lenzz-single-product ul.products.columns-6,
.lenzz-search ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.lenzz-products ul.products:not([class*="columns-"]),
.lenzz-shop ul.products:not([class*="columns-"]),
.lenzz-single-product ul.products:not([class*="columns-"]),
.lenzz-search ul.products:not([class*="columns-"]) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

.lenzz-products ul.products::before,
.lenzz-products ul.products::after,
.lenzz-shop ul.products::before,
.lenzz-shop ul.products::after,
.lenzz-single-product ul.products::before,
.lenzz-single-product ul.products::after,
.lenzz-search ul.products::before,
.lenzz-search ul.products::after {
	content: none !important;
	display: none !important;
}

/* Hide WC's default "Related products" / "Upsells" section heading
   inside .lenzz-products — the shortcode gives us our own header. */
.lenzz-products .related.products > h2,
.lenzz-products .upsells.products > h2 {
	display: none;
}


/* ====================================================================== */
/* CARD — applies to BOTH paths via shared selector list                  */
/* ====================================================================== */

.lenzz-products ul.products li.product,
.lenzz-card {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
	clear: none !important;
	box-shadow: none;
	transition: transform var(--lenzz-card-transition);
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.lenzz-products ul.products li.product:hover,
.lenzz-card:hover {
	transform: translateY(var(--lenzz-card-hover-lift));
}

/* Card link wraps image + title + price */
.lenzz-products ul.products li.product > a,
.lenzz-card > a {
	text-decoration: none;
	color: var(--lenzz-card-title-color);
	display: flex;
	flex-direction: column;
}

/* Image — every <img> inside a product card gets the same square aspect ratio
   and cover crop regardless of which DOM path renders it (shortcode vs block). */
.lenzz-products ul.products li.product img,
.lenzz-card img,
.lenzz-card .wc-block-components-product-image img,
.lenzz-card .wp-block-woocommerce-product-image img {
	border-radius: var(--lenzz-card-image-radius) !important;
	margin: 0 !important;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: var(--lenzz-card-image-aspect) !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transition: transform 400ms ease;
}

/* Some image wrappers from WC blocks don't have a fixed size so the inner img
   collapses to its natural aspect. Force the wrapper to be square too. */
.lenzz-card .wc-block-components-product-image,
.lenzz-card .wc-block-components-product-image > a,
.lenzz-card .wp-block-woocommerce-product-image,
.lenzz-card .wp-block-woocommerce-product-image > a,
.lenzz-products ul.products li.product > a {
	display: block !important;
	width: 100% !important;
	aspect-ratio: var(--lenzz-card-image-aspect);
	overflow: hidden;
	border-radius: var(--lenzz-card-image-radius);
	background: #F5F1E6;
}

/* When the link wraps the image AND the title/price together (shortcode loop),
   we don't want the link to be square — only the image inside it. Reset. */
.lenzz-products ul.products li.product > a {
	aspect-ratio: auto;
	overflow: visible;
	background: transparent;
	border-radius: 0;
}

.lenzz-products ul.products li.product:hover img,
.lenzz-card:hover .wc-block-components-product-image img,
.lenzz-card:hover img {
	transform: scale(var(--lenzz-card-hover-image-scale));
}

/* Title — classic content-product.php uses .lenzz-card-title; block-theme
   path used .wp-block-post-title; shortcode loop uses .woocommerce-loop-product__title. */
.lenzz-card .lenzz-card-title,
.lenzz-card h3.lenzz-card-title,
.lenzz-products ul.products li.product .woocommerce-loop-product__title,
.lenzz-products ul.products li.product h2,
.lenzz-products ul.products li.product h3,
.lenzz-card .wp-block-post-title {
	text-align: center;
	font-size: var(--lenzz-card-title-size);
	font-weight: var(--lenzz-card-title-weight);
	color: var(--lenzz-card-title-color);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	line-height: 1.4;
}

.lenzz-card .wp-block-post-title a,
.lenzz-card-link {
	color: var(--lenzz-card-title-color);
	text-decoration: none;
}

.lenzz-card .wp-block-post-title a:hover,
.lenzz-card-link:hover .lenzz-card-title {
	color: var(--lenzz-card-price-color);
}

/* Price — classic content-product.php wraps WC price markup in .lenzz-card-price */
.lenzz-card .lenzz-card-price,
.lenzz-products ul.products li.product .price,
.lenzz-card .wp-block-woocommerce-product-price,
.lenzz-card .wc-block-components-product-price {
	text-align: center;
	color: var(--lenzz-card-price-color);
	font-weight: var(--lenzz-card-price-weight);
	font-size: var(--lenzz-card-price-size);
	margin: 0.25rem 0 0;
}

/* WC's price markup uses .woocommerce-Price-amount inside ins/del. Match
   it for the classic content-product.php which wraps it in .lenzz-card-price. */
.lenzz-card .lenzz-card-price ins,
.lenzz-card .lenzz-card-price .woocommerce-Price-amount,
.lenzz-products ul.products li.product .price ins,
.lenzz-card .wc-block-components-product-price ins,
.lenzz-card .wc-block-components-product-price__value {
	color: var(--lenzz-card-price-color);
	background: transparent;
	text-decoration: none;
	font-weight: var(--lenzz-card-price-weight);
}

.lenzz-card .lenzz-card-price del,
.lenzz-card .lenzz-card-price del .woocommerce-Price-amount,
.lenzz-products ul.products li.product .price del,
.lenzz-card .wc-block-components-product-price del,
.lenzz-card .wc-block-components-product-price__regular {
	color: var(--lenzz-card-regular-color);
	font-weight: 400;
	font-size: var(--lenzz-card-regular-size);
	margin-left: 0.5rem;
}

/* ====================================================================== */
/* Classic content-product.php image wrapper                              */
/* (template-parts/woocommerce/content-product.php uses .lenzz-card-image) */
/* ====================================================================== */

.lenzz-card .lenzz-card-image {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--lenzz-card-image-aspect);
	overflow: hidden;
	border-radius: var(--lenzz-card-image-radius);
	background: #F5F1E6;
}

.lenzz-card .lenzz-card-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	border-radius: var(--lenzz-card-image-radius) !important;
	margin: 0 !important;
	display: block !important;
}

/* Sale badge inside the classic .lenzz-card-image wrapper */
.lenzz-card .lenzz-card-image .onsale {
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	right: auto !important;
	bottom: auto !important;
	background: var(--lenzz-card-sale-bg) !important;
	color: var(--lenzz-card-sale-color) !important;
	border-radius: var(--lenzz-card-sale-radius) !important;
	padding: 0.35rem 0.75rem !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	width: auto !important;
	max-width: max-content !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	z-index: 3 !important;
	display: inline-flex !important;
	align-items: center !important;
}

/* Primary "Add to cart" button on the card. */
.lenzz-card > a.button {
	display: block;
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
	padding: 0.55rem 1rem;
	background: var(--lenzz-card-button-bg);
	color: var(--lenzz-card-button-color);
	border: 0;
	border-radius: var(--lenzz-card-button-radius);
	font-weight: 600;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	transition: background-color 150ms ease;
}

.lenzz-card > a.button:hover {
	background: var(--lenzz-card-button-bg-hover);
}

/* Secondary "View cart" link WooCommerce appends after a successful
   add. Mirrors "Add to cart" exactly in size and shape, but inverted:
   white background, text + border in the same colour the primary
   button uses for its background. Applies everywhere the link can
   render — archive cards, single-product page, the WC success
   notice — via the bare `a.added_to_cart` selector (the class is
   unique to WC). The card-context selectors below tighten width to
   100% so it stacks under the Add-to-cart button. */
a.added_to_cart,
.woocommerce-message a.button.wc-forward {
	display: inline-block;
	padding: 0.55rem 1rem;
	background: #FFFFFF !important;
	color: var(--lenzz-card-button-bg) !important;
	border: 1px solid var(--lenzz-card-button-bg) !important;
	border-radius: var(--lenzz-card-button-radius);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
	box-sizing: border-box;
}

a.added_to_cart:hover,
.woocommerce-message a.button.wc-forward:hover {
	background: var(--lenzz-card-button-bg) !important;
	color: var(--lenzz-card-button-color) !important;
	border-color: var(--lenzz-card-button-bg) !important;
}

/* Full-width when stacked under the Add-to-cart button on a card. */
.lenzz-card > a.added_to_cart,
.lenzz-products ul.products li.product a.added_to_cart {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
}

/* Image wrapper needs `position: relative` for the badge to anchor to the
   top-left of the IMAGE rather than the whole card. WC sometimes outputs
   the badge inside the image link, sometimes inside a sibling container —
   make every plausible parent a positioning context. */
.lenzz-products ul.products li.product,
.lenzz-products ul.products li.product > a,
.lenzz-card,
.lenzz-card .wc-block-components-product-image,
.lenzz-card .wc-block-components-product-image > a,
.lenzz-card .wp-block-woocommerce-product-image {
	position: relative;
}

/* Sale badge — pinned to image top-left, small auto-width pill.
   WooCommerce's block CSS sets width:max-content + transforms in some places,
   so we use !important to keep this consistent everywhere. */
.lenzz-products ul.products li.product .onsale,
.lenzz-card .wc-block-components-product-sale-badge,
.lenzz-card .wc-block-components-product-sale-badge.wc-block-components-product-sale-badge {
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;

	background: var(--lenzz-card-sale-bg) !important;
	color: var(--lenzz-card-sale-color) !important;
	border: 0 !important;
	border-radius: var(--lenzz-card-sale-radius) !important;

	padding: 0.35rem 0.75rem !important;
	margin: 0 !important;

	width: auto !important;
	max-width: max-content !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;

	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-align: center !important;
	text-transform: none !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 3 !important;
	pointer-events: none;
}

/* Some WC versions wrap the badge text in inner spans — make sure the
   inner span doesn't add its own width / margin. */
.lenzz-card .wc-block-components-product-sale-badge > span,
.lenzz-products ul.products li.product .onsale > span {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: inherit !important;
	font-size: inherit !important;
}

/* Primary Add-to-cart button on shortcode-rendered cards (block-template
   cards use wp:woocommerce/product-button instead). `.added_to_cart` is
   the secondary follow-up link — styled higher up as an outline pill. */
.lenzz-products ul.products li.product .button {
	display: block;
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
	padding: 0.55rem 1rem;
	background: var(--lenzz-card-button-bg);
	color: var(--lenzz-card-button-color);
	border: 0;
	border-radius: var(--lenzz-card-button-radius);
	font-weight: 600;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	transition: background-color 150ms ease;
}

.lenzz-products ul.products li.product .button:hover {
	background: var(--lenzz-card-button-bg-hover);
}


/* ====================================================================== */
/* RESPONSIVE                                                             */
/* ====================================================================== */

@media (max-width: 960px) {
	.lenzz-products ul.products,
	.lenzz-shop ul.products,
	.lenzz-single-product ul.products,
	.lenzz-search ul.products,
	.lenzz-products ul.products[class*="columns-"],
	.lenzz-shop ul.products[class*="columns-"],
	.lenzz-single-product ul.products[class*="columns-"],
	.lenzz-search ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.lenzz-products__head {
		flex-direction: column;
		align-items: flex-start;
	}
	.lenzz-products--align-center .lenzz-products__head {
		align-items: center;
	}
}

@media (max-width: 480px) {
	.lenzz-products ul.products,
	.lenzz-shop ul.products,
	.lenzz-single-product ul.products,
	.lenzz-search ul.products,
	.lenzz-products ul.products[class*="columns-"],
	.lenzz-shop ul.products[class*="columns-"],
	.lenzz-single-product ul.products[class*="columns-"],
	.lenzz-search ul.products[class*="columns-"] {
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
	.lenzz-products ul.products li.product .onsale,
	.lenzz-shop ul.products li.product .onsale,
	.lenzz-single-product ul.products li.product .onsale,
	.lenzz-search ul.products li.product .onsale,
	.lenzz-card .wc-block-components-product-sale-badge,
	.lenzz-card .lenzz-card-image .onsale {
		top: 8px !important;
		left: 8px !important;
		padding: 0.25rem 0.625rem !important;
		font-size: 0.6875rem !important;
	}
}