/* Conversion Pro — shared product card (modules 6 & 10), adapted from
   letsdotherooms.com: full-bleed image, no card border/padding, overlay
   Add to Cart bar, plain-text badge (module 11's default preset). Used on
   the category grid, homepage Shop by Collection/Best Sellers, and
   "Pairs well with" — one component, not rebuilt per section. */

/* Three markup shapes need covering here: the classic shop-loop template
   (.woocommerce ul.products li.product — content-product.php) rendered
   inside a `ul.products` list, WooCommerce's block-based Product
   Collection/Product Template block (ul.wc-block-product-template >
   li.wc-block-product) which is the default grid markup on current
   WooCommerce installs, and content-product.php rendered standalone
   (module 10's homepage sections call wc_get_template_part('content',
   'product') directly inside a plain .cvp-home-scroll-row div, with no
   ul.products/.woocommerce ancestor at all). Confirmed via live testing
   that all three cases occur on a fresh install, and a selector scoped to
   only one of them silently fails to match the others — hence the bare
   `li.product` fallback below, which doesn't depend on any ancestor
   wrapper and catches every case content-product.php can be used in. */
.woocommerce ul.products li.product,
.wc-block-product-template li.wc-block-product,
li.product,
.cvp-product-card {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	border: none;
	box-shadow: none;
	background: none;
	padding: 0 !important;
	margin-bottom: 4px;
}

.woocommerce ul.products li.product img,
.wc-block-product-template li.wc-block-product img,
li.product img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	width: 100%;
}

/* Overlay Add to Cart bar */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product a.button,
.wc-block-product-template li.wc-block-product .add_to_cart_button,
.wc-block-product-template li.wc-block-product a.button,
.wc-block-product-template li.wc-block-product .wp-block-button__link,
li.product .add_to_cart_button,
li.product a.button {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Explicit content-based height. Without this, an element with `left`,
	   `right`, and `bottom` set but `top`/`height` left auto has its `top`
	   resolved from its original static position (CSS2.1 §10.6.4 case 6) —
	   on the block-based Product Template markup that static position sits
	   near the top of a tall flex card, so the box stretches almost the
	   full card height instead of staying a compact bottom bar. Confirmed
	   live: without this, the overlay covered nearly the entire card. */
	height: fit-content;
	background: rgba(216, 90, 48, 0.88); /* brand red, translucent */
	color: #fff;
	text-align: center;
	padding: 10px;
	font-weight: 600;
	border-radius: 0;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Desktop: reveal on hover only */
@media ( hover: hover ) {
	.woocommerce ul.products li.product .add_to_cart_button,
	.woocommerce ul.products li.product a.button,
	.wc-block-product-template li.wc-block-product .add_to_cart_button,
	.wc-block-product-template li.wc-block-product a.button,
	.wc-block-product-template li.wc-block-product .wp-block-button__link,
li.product .add_to_cart_button,
li.product a.button {
		opacity: 0;
		transform: translateY(100%);
	}
	.woocommerce ul.products li.product:hover .add_to_cart_button,
	.woocommerce ul.products li.product:hover a.button,
	.wc-block-product-template li.wc-block-product:hover .add_to_cart_button,
	.wc-block-product-template li.wc-block-product:hover a.button,
	.wc-block-product-template li.wc-block-product:hover .wp-block-button__link,
	li.product:hover .add_to_cart_button,
	li.product:hover a.button {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Touch devices: always visible — hover doesn't exist, so hiding it would
   remove the add-to-cart option entirely on mobile (confirmed decision). */
@media ( hover: none ) {
	.woocommerce ul.products li.product .add_to_cart_button,
	.woocommerce ul.products li.product a.button,
	.wc-block-product-template li.wc-block-product .add_to_cart_button,
	.wc-block-product-template li.wc-block-product a.button,
	.wc-block-product-template li.wc-block-product .wp-block-button__link,
li.product .add_to_cart_button,
li.product a.button {
		opacity: 1;
		transform: translateY(0);
		position: static;
		margin-top: 6px;
	}
}

.woocommerce ul.products li.product .price,
.wc-block-product-template li.wc-block-product .price,
li.product .price {
	margin-top: 8px;
	font-size: 14px;
}

/* Title — confirmed missing here originally, which only surfaced visually
   when content-product.php is rendered standalone (homepage Best Sellers,
   "Pairs well with" cross-sell) with no ul.products/theme-archive ancestor
   to inherit compact sizing from; on the real shop/category grid the
   theme's own archive styles happened to mask the gap. Explicit sizing
   here so the card looks identical in both contexts, matching WooCommerce's
   actual title class regardless of which of the three markup shapes wraps
   it. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-product-template li.wc-block-product .woocommerce-loop-product__title,
li.product .woocommerce-loop-product__title,
.cvp-product-card .woocommerce-loop-product__title,
.woocommerce-loop-product__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 8px 0 0;
	color: #222;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}