/*
 * Selettore varianti — scheda prodotto Ohoskin.
 *
 * Valori ripresi dal kit Elementor del sito, così il selettore non stona
 * accanto al pulsante "Add to cart":
 *   verde salvia  #566C5E  (colore primario/accento)
 *   verde chiaro  #E1E7E3  (sfondo medio)
 *   grigio hover  #B6B6B6
 *   raggio bordi  6px      (uguale al pulsante add-to-cart)
 *   testo         Raleway  (tipografia di corpo del sito)
 */

.woocommerce div.product form.cart table.variations,
.elementor-widget-woocommerce-product-add-to-cart table.variations {
	margin: 0 0 1.1em;
	border: 0;
	width: 100%;
}

.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
	border: 0;
	padding: 0 0 .4em;
	display: block;
	text-align: left;
	width: 100%;
}

/*
 * Etichetta "Colore": tolta dalla vista, ma NON dal documento.
 *
 * A schermo è ridondante — la tendina dice già "Choose a colour" — e rubava
 * spazio. Però il <label for="colore"> è ciò che gli screen reader annunciano
 * per spiegare a cosa serve il menu: con `display: none` sparirebbe anche per
 * loro. Si usa quindi la tecnica "visually hidden": invisibile agli occhi,
 * presente per le tecnologie assistive.
 */
.woocommerce div.product form.cart table.variations th.label,
.elementor-widget-woocommerce-product-add-to-cart table.variations th.label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* La tendina vera e propria */
.woocommerce div.product form.cart table.variations td.value select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	width: 100%;
	max-width: 100%;
	padding: .8em 2.6em .8em 1em;

	font-family: "Raleway", sans-serif;
	font-size: .95rem;
	color: #000;

	background-color: #FDFEFE;
	border: 1px solid #BCC8C1;
	border-radius: 6px;          /* stesso raggio del pulsante add-to-cart */
	cursor: pointer;

	/* freccia disegnata in SVG: nessuna immagine esterna da caricare */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23566C5E' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1em center;

	transition: border-color .18s ease, box-shadow .18s ease;
}

.woocommerce div.product form.cart table.variations td.value select:hover {
	border-color: #99ADA1;
}

.woocommerce div.product form.cart table.variations td.value select:focus,
.woocommerce div.product form.cart table.variations td.value select:focus-visible {
	outline: none;
	border-color: #566C5E;
	/* contorno visibile anche per chi naviga da tastiera */
	box-shadow: 0 0 0 3px rgba(86, 108, 94, .22);
}

/*
 * Link "Clear" di WooCommerce: nascosto.
 *
 * Con un solo attributo e tre opzioni non serve azzerare la scelta — basta
 * sceglierne un'altra. Va nascosto con !important perché WooCommerce lo mostra
 * via JavaScript con uno stile inline: senza, tornerebbe visibile appena si
 * seleziona un colore, occupando spazio fra la tendina e la disponibilità.
 */
.woocommerce div.product form.cart .reset_variations,
.elementor-widget-woocommerce-product-add-to-cart .reset_variations {
	display: none !important;
}

/* La cella che lo conteneva non deve lasciare spazio vuoto. */
.woocommerce div.product form.cart table.variations td.value {
	padding-bottom: 0;
}

/* ---------------------------------------------------------------
   Stato di errore: nessun colore scelto e si preme "Add to cart"
   --------------------------------------------------------------- */

/*
 * Il selettore ricalca per intero quello della regola base: serve la stessa
 * specificità (più la classe di stato) perché il bordo rosso abbia la meglio.
 */
.woocommerce div.product form.cart table.variations.ohoskin-variation-missing td.value select,
.woocommerce div.product form.cart table.variations.ohoskin-variation-missing td.value select:focus,
table.variations.ohoskin-variation-missing td.value select {
	border-color: #B3261E;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .16);
}

.ohoskin-variation-notice {
	display: flex;
	align-items: center;
	gap: .5em;

	margin: -.6em 0 1.1em;
	font-family: "Raleway", sans-serif;
	font-size: .85rem;
	line-height: 1.35;
	color: #B3261E;
}

.ohoskin-variation-notice::before {
	content: "!";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-size: .8em;
	font-weight: 700;
	line-height: 1.1em;
	text-align: center;
}

.ohoskin-variation-notice[hidden] {
	display: none;
}

/* Chi preferisce meno animazioni non le subisce */
@media (prefers-reduced-motion: reduce) {
	.woocommerce div.product form.cart table.variations td.value select {
		transition: none;
	}
}