/**
 * JC Variation Chips
 *
 * Two surfaces, one shape: .jc-chip on the product page, .jc-variation-swatch
 * on the product card. A product with a single size renders the same shape as a
 * static badge, so the catalog reads consistently whether or not there is a
 * choice to make.
 *
 * The colors are the ones the card already used before this plugin took the
 * snippet over, so nothing on the card changed look. Override the custom
 * properties in the Elementor kit to retheme globally, or use the Size Chips
 * widget's own controls for the product page.
 *
 * The chips are spans, not buttons. The Elementor kit styles every `button` as
 * the site's gold action button, and the single-product template styles
 * `.cart button` the same way, so a chip that was a button rendered as though it
 * were always selected. Tag-matching is out of our control and out-specifying it
 * is a fight that restarts every time the template changes, so the chips simply
 * are not buttons. pdp.js and card.js carry the keyboard and ARIA behavior a
 * button would have given for free.
 *
 * NO CHIP STYLE USES !important, deliberately. Elementor strips !important from
 * any rule whose value is a global color, so an !important here would silently
 * beat every color picked in the widget panel. These rules lean on specificity
 * instead — enough to outrank the theme's bare `button`, low enough to lose to
 * Elementor's generated per-widget rules, which is exactly what we want.
 *
 * The one exception is .jc-select-hidden below, which hides the native select.
 * That is a visibility utility, not a style the panel can reach, and it has to
 * beat whatever the theme puts on a select.
 */

:root {
	--jc-chip-ink: rgb( 18, 32, 26 );
	--jc-chip-border: rgba( 18, 32, 26, 0.25 );
	--jc-chip-bg: transparent;
	--jc-chip-accent: rgb( 200, 155, 92 );
	--jc-chip-radius: 3px;

	--jc-chip-disabled-ink: rgba( 18, 32, 26, 0.35 );
	--jc-chip-disabled-border: rgba( 18, 32, 26, 0.12 );
}

/*
 * The real control. Still in the form, still what WooCommerce reads — it just
 * stops being the thing people look at. See pdp.js; do not switch this to
 * display:none, the select has to stay laid out for validation focus.
 */
.jc-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect( 0 0 0 0 ) !important;
	clip-path: inset( 50% ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/*
 * The Variation Chips widget's three display switches.
 *
 * The widget puts these classes on the chip row it renders, and these rules
 * reach back out from there. Two earlier attempts were wrong and are worth not
 * repeating: Elementor `selectors` could add such a rule but never remove it, so
 * a switch only worked one way; and `prefix_class` on the widget wrapper was
 * global, so the fourteen copies of this widget inside a product page's related
 * cards outvoted the product page's own widget and its switches did nothing.
 *
 * Keying on `.jc-chips` is what scopes it. A product page renders `.jc-chips`;
 * a card renders `.jc-card-variations` and can never match.
 *
 * :has() is required. Every browser from 2023 on supports it. In anything older
 * the row simply stays visible, which is the pre-plugin behavior, not a break.
 *
 * Deliberately not scoped with `.woocommerce div.product form.cart`. Elementor's
 * Theme Builder renders the product page without that wrapper chain, so a
 * selector carrying it matches nothing here. `table.variations` and
 * `.reset_variations` are WooCommerce's own class names and specific enough.
 */
body:has( .jc-chips.jc-vc-hide-row-yes ) table.variations {
	display: none;
}

body:has( .jc-chips.jc-vc-hide-clear-yes ) .reset_variations {
	display: none;
}

body:has( .jc-chips.jc-vc-hide-label-yes ) table.variations th.label,
body:has( .jc-chips.jc-vc-hide-label-yes ) table.variations .label {
	display: none;
}

/* Nothing to clear when there is only one size. */
.jc-chips--single ~ .reset_variations,
.jc-chips--single + .reset_variations {
	display: none;
}

.jc-chips,
.jc-card-variations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.jc-chips .jc-chip,
.jc-card-variations .jc-variation-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 6px 10px;
	font-family: inherit;
	font-size: 12px;
	font-weight: inherit;
	line-height: 1;
	white-space: nowrap;
	color: var( --jc-chip-ink );
	background: var( --jc-chip-bg );
	border: 1px solid var( --jc-chip-border );
	border-radius: var( --jc-chip-radius );
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	appearance: none;
	box-shadow: none;
	text-decoration: none;
	user-select: none;
	box-sizing: border-box;
}

.jc-chips .jc-chip:hover,
.jc-chips .jc-chip:focus,
.jc-card-variations .jc-variation-swatch:hover,
.jc-card-variations .jc-variation-swatch:focus {
	color: var( --jc-chip-ink );
	background: var( --jc-chip-bg );
	border-color: var( --jc-chip-accent );
	box-shadow: none;
}

.jc-chips .jc-chip:focus-visible,
.jc-card-variations .jc-variation-swatch:focus-visible {
	outline: 2px solid var( --jc-chip-accent );
	outline-offset: 2px;
}

.jc-chips .jc-chip.is-selected,
.jc-chips .jc-chip.is-selected:hover,
.jc-card-variations .jc-variation-swatch.active,
.jc-card-variations .jc-variation-swatch.active:hover {
	color: var( --jc-chip-ink );
	background: var( --jc-chip-accent );
	border-color: var( --jc-chip-accent );
}

.jc-chips .jc-chip.is-disabled,
.jc-chips .jc-chip[aria-disabled="true"] {
	color: var( --jc-chip-disabled-ink );
	border-color: var( --jc-chip-disabled-border );
	background: var( --jc-chip-bg );
	cursor: not-allowed;
	text-decoration: line-through;
}

/* A single size is information, not a control. Same shape, no affordance. */
.jc-chips .jc-chip--static,
.jc-card-variations .jc-variation-swatch--static {
	cursor: default;
}

/*
 * The product page is a bigger surface than a card and the chips are the main
 * control on it, so they get a real touch target. The Size Chips widget's
 * panel controls override all of this per placement.
 */
.jc-chips {
	gap: 8px;
	margin: 0;
}

.jc-chips .jc-chip {
	min-width: 60px;
	padding: 10px 18px;
	font-size: 14px;
	line-height: 1.15;
}

/* Out of stock, on the card. The chip still reads; the button is what stops. */
.jc-is-out-of-stock {
	opacity: 0.55;
	pointer-events: none;
}

/* Editor-only notice from the Size Chips widget. Never renders on the front end. */
.jc-chips-placeholder {
	padding: 12px 14px;
	font-size: 13px;
	color: rgba( 18, 32, 26, 0.6 );
	border: 1px dashed rgba( 18, 32, 26, 0.25 );
	border-radius: var( --jc-chip-radius );
}

@media ( max-width: 480px ) {
	.jc-chips .jc-chip {
		min-width: 52px;
		padding: 9px 14px;
		font-size: 13px;
	}
}