/**
 * Loop Grid Variation Picker — minor polish only. All the actual behaviour
 * (price swap, button relabel/navigation) is handled in variation-picker.js.
 */

/* WooCommerce disables the Add to Cart button until a variation is found;
   this is only ever visible for a brief instant since the script selects
   the cheapest variation immediately on load, but style it clearly anyway. */
.e-loop-item .variations_form .single_add_to_cart_button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* WooCommerce's variation dropdowns default to a "Choose an option" state;
   since this script always auto-selects one, the reset link (a small "x"/
   clear-selection link WooCommerce renders next to the dropdown) is no
   longer useful inside a loop grid card and just adds visual clutter. */
.e-loop-item .variations_form .reset_variations {
	display: none;
}

/* This site's Add to Cart widget includes a custom colour-picker
   (".pcl-picker": mode tabs + collection browser) sitting alongside the
   Size dropdown inside WooCommerce's own `.woocommerce-variation-add-to-cart`
   wrapper. On loop grid cards only the Size dropdown should show — the
   colour picker belongs on the single product page. `.pcl-picker` and
   `.single_add_to_cart_button` are DOM siblings, so hiding this does not
   affect the button. */
.e-loop-item .pcl-picker {
	display: none;
}

/* No quantity stepper on the Shop page cards or the single product page —
   scoped to `.single-product` (WooCommerce's own body class) and
   `.e-loop-item` specifically, rather than hiding `.quantity` everywhere,
   so the Cart and Checkout pages keep their own working quantity inputs.
   `!important` because the colour-picker widget's own JS re-shows this
   (sets it visible again) once a variation is matched — this needs to
   unconditionally win regardless of what inline style or class that JS
   applies. */
.single-product .quantity,
.e-loop-item .quantity {
	display: none !important;
}

/* The "WooCommerce Variation Swatches" plugin's own `.selected` style for
   a chosen swatch produces no visible difference on this site (checked
   directly — border/background/box-shadow/outline are all identical
   selected vs. not), so variation-picker.js's syncSwatchVisuals() applies
   the correct `.selected` class but nothing was actually styling it. This
   gives the size swatches inside a loop grid card a clear, guaranteed
   visible highlight when selected, regardless of that plugin's own CSS. */
.e-loop-item .variable-item.selected {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Palette icon to the right of the "Choose a Colour" label.
   Scoped to `.single_add_to_cart_button`, which only exists on the
   variable-product form this plugin renders — simple products in the loop
   render `a.add_to_cart_button` instead and correctly get no palette icon.
   Drawn as an inline SVG mask painted with `currentColor`, so it always
   matches the button's own text colour with no image file to manage and
   no extra HTTP request. */
.e-loop-item .single_add_to_cart_button::after {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-left: 0.5em;
	vertical-align: -0.2em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2C6.48 2 2 6.03 2 11c0 4.42 3.58 8 8 8h1.5c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.24-.26-.39-.61-.39-.99 0-.83.67-1.5 1.5-1.5H15c3.87 0 7-3.13 7-7 0-3.31-4.48-5-10-5ZM5 12.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0ZM8 7.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0ZM13 7.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0ZM16 12a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2C6.48 2 2 6.03 2 11c0 4.42 3.58 8 8 8h1.5c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.24-.26-.39-.61-.39-.99 0-.83.67-1.5 1.5-1.5H15c3.87 0 7-3.13 7-7 0-3.31-4.48-5-10-5ZM5 12.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0ZM8 7.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0ZM13 7.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0ZM16 12a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0Z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}