/**
 * Elementor Pro "Products" widget  --  .mc-wc-products
 *
 * Market pages and their sub-pages carry a hand-picked product strip. The client
 * chooses which products appear by ID inside Elementor (Products widget > Query >
 * Source: Manual Selection), which is why this is the WooCommerce widget rather
 * than one of the theme's own shortcodes: a shortcode would put the selection
 * back into code, where the client cannot reach it.
 *
 * The widget emits stock WooCommerce loop markup. Everything here maps that onto
 * `.pcard` from the design system, mirroring what elementor-bridge.css already
 * does for the Related Products widget. Written against tokens with no
 * `body.light` copy -- the product-table.css pattern: skin once, theme both ways.
 *
 * ---------------------------------------------------------------------------
 * On the selectors
 *
 * Two separate stylesheets have to be outranked, so the scope here is long on
 * purpose:
 *
 *  1. `.elementor-products-grid ul.products.elementor-grid li.product` (0,4,2)
 *     from Elementor's frontend CSS sets `display: var(--button-align-display)`,
 *     which flattens the card back to a block.
 *  2. Elementor generates *per-page* CSS for this widget -- selectors like
 *     `.elementor-widget-woocommerce-products.elementor-wc-products ul.products
 *     li.product .woocommerce-loop-product__title` (0,5,2) -- because the
 *     widget's title/price/button controls default to the Global Kit's primary
 *     colour and heading typography. That CSS loads after the theme's, so a tie
 *     loses. It is regenerated whenever the page is saved, so it cannot simply
 *     be removed.
 *
 * Prefixing `body` and naming the tag (`h2`, `a`) buys the extra element weight
 * needed to win without `!important` -- the same trick the Related Products
 * block in elementor-bridge.css documents.
 *
 * Scoped to `.mc-wc-products` so shop and archive pages are untouched.
 *
 * @package HelloElementorChild
 */

body .elementor-widget-woocommerce-products.mc-wc-products ul.products {
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}

/* The card shell mirrors .pcard. Grid rather than flex so the action buttons sit
   on one row pinned to the bottom, keeping cards with unequal title lengths
   aligned along their footers. */
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product {
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: 1fr 1fr;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
	text-align: left;
	transition: border-color .25s, transform .25s, box-shadow .25s;
}

body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product:hover {
	border-color: var(--border-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 40px rgba(0, 207, 255, .1);
}

/* Image, title and price all live inside one anchor, so it spans both columns. */
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product > a.woocommerce-loop-product__link {
	grid-column: 1 / -1;
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Image well -- matches .pcard-img. `contain` because the catalogue photographs
   are studio shots on white, not full-bleed art.

   Those photographs are opaque white, which CSS cannot make transparent, so a
   dark well would frame every thumbnail in a bright slab. The well is therefore
   painted light in both themes and the image is inset inside it, which reads as
   a deliberate product plate instead. Replacing the sources with transparent
   PNG/WebP is the real fix and is still outstanding. */
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: contain;
	margin: 0;
	padding: 12px;
	background: #fff;
	border-bottom: 1px solid var(--border);
}

/* The design's catalogue card uses the mono part-number face for the product
   name (.pcard-pn), not the display font the Global Kit would apply. Clamped so
   a long part description cannot set the height of the whole row. */
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product h2.woocommerce-loop-product__title {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text-primary);
	margin: 0;
	padding: 14px 16px 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product .price,
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product .price .amount,
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product .price ins .amount {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--accent-cyan);
}

body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product .price {
	margin: 0;
	padding: 8px 16px 16px;
}

body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product .price del,
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product .price del .amount {
	color: var(--text-muted);
	font-size: 12px;
	margin-right: 6px;
}

body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product .price ins {
	text-decoration: none;
}

/* Action row -- the .pcard-actions idiom: quiet bordered buttons that pick up
   the accent only on hover, so the card reads as a catalogue entry rather than
   a storefront tile. Covers WooCommerce's add-to-cart, YITH's add-to-quote and
   Reno's quick view, all of which carry `.button`. */
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product > a.button,
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product > a.yith-ywraq-add-to-quote {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 12px 10px;
	border: none;
	border-top: 1px solid var(--border);
	border-radius: 0;
	background: transparent;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--text-secondary);
	transition: background .2s, color .2s;
}

body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product > a.button + a.button {
	border-left: 1px solid var(--border);
}

body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product > a.button:hover {
	background: rgba(0, 207, 255, .07);
	color: var(--accent-cyan);
}

/* Reno Quick View paints its button through an *id* selector --
   `a#sp-wqv-view-button.button.sp-wqv-view-button` -- which it repeats on every
   card, so the id is not even unique on the page. An id outranks any number of
   classes, so the only way to win without `!important` is to name the id too.
   Matching it alongside the scope above gives (1,5,4) against the plugin's
   (1,2,1). Keep the id in this selector: dropping it silently hands the button
   back its default blue. */
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product > a#sp-wqv-view-button.button {
	border: none;
	border-top: 1px solid var(--border);
	border-left: 1px solid var(--border);
	border-radius: 0;
	background: transparent;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product > a#sp-wqv-view-button.button:hover {
	background: rgba(0, 207, 255, .07);
	color: var(--accent-cyan);
}

/* A product with a single action still fills the footer rather than leaving a
   dead half-cell beside it. */
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product > a.button:only-of-type {
	grid-column: 1 / -1;
}

/* WooCommerce's "View cart" confirmation appends a third link; give it its own
   full-width row instead of letting it break the two-column footer. */
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product > a.added_to_cart {
	grid-column: 1 / -1;
	padding: 10px;
	border-top: 1px solid var(--border);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--accent-cyan);
}

body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

/* Sale flash sits over the light image well, so it needs its own contrast. */
body .elementor-widget-woocommerce-products.mc-wc-products ul.products li.product span.onsale {
	top: 10px;
	right: 10px;
	left: auto;
	margin: 0;
	padding: 3px 9px;
	min-height: 0;
	min-width: 0;
	border-radius: 10px;
	background: var(--accent-blue);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.6;
	color: #fff;
}

/* Result count, ordering and pagination have no place in a curated strip. They
   are switched off in the widget too; this is belt and braces. */
body .elementor-widget-woocommerce-products.mc-wc-products .woocommerce-result-count,
body .elementor-widget-woocommerce-products.mc-wc-products .woocommerce-ordering,
body .elementor-widget-woocommerce-products.mc-wc-products nav.woocommerce-pagination {
	display: none;
}