/**
 * 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;
}