.hr-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.25rem 0 0.5rem;
}

.hr-size {
	position: relative;
	min-width: 4rem;
	padding: 0.6em 0.9em;
	border: 1px solid var(--wp--preset--color--accent-6, #d2b89f);
	border-radius: 0;
	background: #fff;
	color: var(--wp--preset--color--contrast, #2f2e2f);
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.hr-size:hover:not(:disabled) {
	border-color: var(--wp--preset--color--contrast, #2f2e2f);
}

.hr-size:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #b53a3a);
	outline-offset: 2px;
}

.hr-size.is-selected {
	border-color: var(--wp--preset--color--contrast, #2f2e2f);
	background: var(--wp--preset--color--contrast, #2f2e2f);
	color: #fff;
}

/* Sold out: greyed and crossed through corner to corner. */
.hr-size.is-sold-out {
	color: #8a8a8a;
	border-color: #ddd;
	cursor: not-allowed;
	background:
		linear-gradient( to top right, transparent calc( 50% - 0.5px ), #cfcfcf calc( 50% - 0.5px ), #cfcfcf calc( 50% + 0.5px ), transparent calc( 50% + 0.5px ) ),
		linear-gradient( to bottom right, transparent calc( 50% - 0.5px ), #cfcfcf calc( 50% - 0.5px ), #cfcfcf calc( 50% + 0.5px ), transparent calc( 50% + 0.5px ) ),
		#fff;
}

/* The real control stays for WooCommerce's script and for assistive tech fallbacks, just out of sight. */
select.hr-sizes__select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}