/**
 * Select component.
 *
 * One place decides what a <select> looks like on this site. The native arrow is
 * replaced by a drawn chevron, because the native one cannot be positioned: every
 * engine paints it in its own gutter, which is what made the sticky bar's dropdown
 * look jammed against its right edge.
 *
 * The geometry is derived, not typed in. Change --joov-select-gutter and the text
 * padding, the chevron position and the room reserved for it all move together —
 * there is no second number to remember.
 *
 * Usage: add class="joov-select". WooCommerce's variation selects get it applied
 * for them below, since their markup is not ours to change.
 */

:root {
	/* Distance from the box edge to the chevron, and to the text on the left. */
	--joov-select-gutter: 0.875rem;
	/* Chevron width. Height follows from the glyph's aspect ratio. */
	--joov-select-icon: 0.625rem;
	/* Minimum breathing room between the longest option and the chevron. */
	--joov-select-gap: 0.75rem;
	/* Everything the chevron needs on the trailing side. Never set directly. */
	--joov-select-inset: calc(
		var(--joov-select-gutter) + var(--joov-select-icon) + var(--joov-select-gap)
	);
}

/* :is(select) buys specificity without inventing a deeper structure, so this
   still beats WooCommerce's own four-class selectors on the variation form. */
.joov-select:is(select),
.pdp-info__purchase table.variations tr td select:is(select) {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-start: var(--joov-select-gutter);
	padding-inline-end: var(--joov-select-inset);
	/* currentColor is not available to a background SVG, so the stroke is the
	   brand's text colour, written once. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%231A1A1A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--joov-select-gutter) center;
	background-size: var(--joov-select-icon) auto;
	/* Right-to-left locales flip the chevron's side with the padding. */
	text-align: start;
}

/* Safari and Firefox reserve their own arrow gutter even with appearance: none
   on some form controls; the explicit padding above is the whole width, so the
   text cannot collide with the drawn chevron. */
.joov-select:is(select)::-ms-expand {
	display: none;
}

.joov-select:is(select):disabled {
	opacity: 0.6;
	cursor: not-allowed;
}