/**
 * Nectar Product Picker - front-end styling.
 *
 * Checked against the actual Salient 18.2.1 theme files: its WooCommerce
 * grid (css/src/woocommerce.css) is a classic float/percentage-width
 * layout, not CSS Grid/Flexbox, and almost every rule is scoped under a
 * `.woocommerce` class - e.g. `.woocommerce ul.products[class*=columns-]
 * li.product` and `.woocommerce.columns-N ul.products li.product`.
 *
 * The shortcode (see class-npp-shortcode.php) wraps its output in
 * <div class="woocommerce columns-N"> for exactly this reason, so
 * Salient's real grid/width/margin/hover CSS applies to our markup the
 * same as it does to the shop page and the [products] shortcode. That
 * means this stylesheet does NOT need to (and must not) redeclare grid
 * layout, column widths, or spacing - doing so would fight the theme's
 * own float-based sizing.
 *
 * What's left here is only: the optional heading, opt-in hover-animation
 * classes (things Salient's native product grid doesn't offer per
 * instance), and a zero-specificity safety-net layout for the rare case
 * this runs without Salient's WooCommerce CSS loaded at all.
 */

.nectar-product-picker-wrap {
	margin: 30px 0;
}

.nectar-product-picker-wrap .npp-picker-title {
	margin-bottom: 20px;
}

.nectar-product-picker-wrap .npp-title-align-left {
	text-align: left;
}

.nectar-product-picker-wrap .npp-title-align-center {
	text-align: center;
}

.nectar-product-picker-wrap .npp-title-align-right {
	text-align: right;
}

/* ---- Zero-specificity safety net -----------------------------------
 * :where() contributes no specificity, so any real rule from the theme
 * (e.g. Salient's `.woocommerce ul.products li.product { width: ...; }`)
 * always wins over this. It only does anything if nothing else styles
 * the list at all.
 */
:where( .nectar-product-picker-wrap ul.products ) {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

:where( .nectar-product-picker-wrap.npp-equal-height ul.products ) {
	align-items: stretch;
}

.nectar-product-picker-wrap.npp-equal-height ul.products li.product {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* ---- Hover animation (namespaced, opt-in, layers on top of whatever
 *      image markup Salient's content-product.php outputs) ------------ */
.nectar-product-picker-wrap.npp-hover-zoom ul.products li.product a img,
.nectar-product-picker-wrap.npp-hover-fade ul.products li.product a img {
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.nectar-product-picker-wrap.npp-hover-zoom ul.products li.product:hover a img {
	transform: scale( 1.04 );
}

.nectar-product-picker-wrap.npp-hover-fade ul.products li.product:hover a img {
	opacity: 0.82;
}

.nectar-product-picker-wrap ul.products li.product a img {
	overflow: hidden;
}