/* 0.47.0 — Expert4House: varianti esaurite barrate e scelta visibile in scheda prodotto (vedi e4happ-variants.js).
   Le misure (bordi, spazi, carattere) stanno sui selettori del tema SENZA classe JS, così valgono dal primo
   disegno e la vestizione dello script non sposta nulla (CLS 0). Le classi dello script (e4h-sel, e4h-na,
   e4h-lab) cambiano solo colori, tratteggio e barrato. Specificità alta per battere il tema; niente animazioni. */

/* ---- 0.47.1 — etichetta SOPRA le scelte, come nell'immagine approvata. Il tema mette ogni riga di varianti in
   flex-row (`.product-variants > .product-variants-item { display: flex }`) e dà all'etichetta `margin: 0 20px 0 0`:
   «Potenza: 5W» finiva di fianco e sul telefono le pastiglie andavano a capo. Qui la riga torna a blocco: etichetta su
   una riga, 8 px di spazio, pastiglie sotto a tutta larghezza. La barra fissa in basso del tema resta in riga. ---- */
html body .product-variants .product-variants-item { display: block; }
html body .product-variants .product-variants-item > ul { margin: 0; display: flow-root; } /* contiene le pastiglie flottanti del tema */
html body .tvfooter-product-sticky-bottom .product-variants .product-variants-item { display: flex; align-items: center; }
html body .tvfooter-product-sticky-bottom .product-variants .product-variants-item .control-label { margin: 0 20px 0 0; }

/* ---- etichetta «Colore: Bianco · esaurito» (§3.1): 14 px, peso 500, niente maiuscolo né spaziatura del tema ---- */
body .product-variants .product-variants-item .control-label {
  display: block;
  width: auto;
  min-width: 0;
  float: none;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #1C2833;
  letter-spacing: normal;
  text-transform: none;
}
body .product-variants .product-variants-item .control-label.e4h-lab b { font-weight: 700; color: #1C2833; }
body .product-variants .product-variants-item .control-label.e4h-lab .e4h-oos { color: #B42318; font-weight: 700; }

/* ---- pastiglie (§3.2 / §3.3): bordo 1 px sempre, 8 px di raggio, 56 px minimi, nessuna ombra ---- */
body .product-variants .input-container .radio-label {
  display: inline-block;
  min-width: 56px;
  box-sizing: border-box;
  text-align: center;
  background: #fff;
  color: #1C2833;
  border: 1px solid #C9D1D3;
  border-radius: 8px;
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
}
/* 0.47.1 — precedenza sul tema. Dal vivo il tema ha `.product-variants > .product-variants-item label input[checked="checked"]:checked + span`
   (0,4,3) e `… label:hover span` (0,3,3), che vincevano sulle regole 0.47.0 (0,4,2): pastiglia scelta con bordo nero e ombra,
   pallino scelto con ombra al posto dell'anello. Qui tutto sta su `html body … .product-variants-item … label > …` (0,5,3)
   e l'ordine decide i pari merito: mouse < scelta < esaurita < esaurita+scelta (0,6,3). */
/* passaggio del mouse: l'input invisibile del tema copre solo 25 × 25 px in alto a sinistra, quindi si guarda il label:
   bordo appena più scuro, niente ombra né testo nero del tema */
html body .product-variants .product-variants-item .input-container input:hover + .radio-label,
html body .product-variants .product-variants-item .input-container label:hover > .radio-label { border-color: #8B979C; box-shadow: none; color: #1C2833; }
/* scelta: bordo 1 px + anello interno 1 px = 2 px di contorno. Non si usa un bordo da 2 px perché Chrome arrotonda
   i bordi ai pixel dello schermo: con lo zoom al 90 % (Fabrizio) 1 px e 2 px diventano uguali e la scelta spariva;
   l'ombra interna non viene arrotondata. Stesso padding della pastiglia normale → stessa misura (CLS 0). */
html body .product-variants .product-variants-item .input-container input:checked + .radio-label,
html body .product-variants .product-variants-item .input-container.e4h-sel label > .radio-label {
  border: 1px solid #05566A;
  padding: 8px 14px;
  background: #EDF5F6;
  color: #05566A;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #05566A;
}
/* esaurita: fondo grigio, testo #5F6B70 (contrasto 5,1), tratteggio, barrato; resta cliccabile */
html body .product-variants .product-variants-item .input-container.e4h-na label > .radio-label {
  background: #F4F6F7;
  color: #5F6B70;
  border-style: dashed;
  text-decoration: line-through;
}
html body .product-variants .product-variants-item .input-container.e4h-na input:checked + .radio-label,
html body .product-variants .product-variants-item .input-container.e4h-na.e4h-sel label > .radio-label {
  border: 1px dashed #05566A;
  padding: 8px 14px;
  background: #EDF5F6;
  color: #5F6B70;
  font-weight: 700;
  text-decoration: line-through;
  box-shadow: inset 0 0 0 1px #05566A;
}

/* ---- colori (§3.2 / §3.3): misura del tema (33 × 33), bordo interno grigio sempre, anello quando scelto ---- */
body .product-variants .input-container .color {
  position: relative;
  box-sizing: border-box;
  border: 0;
  box-shadow: inset 0 0 0 1px #C9D1D3;
  outline-offset: 5px;
}
html body .product-variants .product-variants-item .input-container input:hover + .color,
html body .product-variants .product-variants-item .input-container label:hover > .color { border: 0; box-shadow: inset 0 0 0 1px #8B979C; }
html body .product-variants .product-variants-item .input-container input:checked + .color,
html body .product-variants .product-variants-item .input-container.e4h-sel label > .color {
  border: 0;
  box-shadow: inset 0 0 0 1px #C9D1D3, 0 0 0 2px #fff, 0 0 0 4px #05566A;
}
/* la spunta del tema sul colore scelto sparisce: basta l'anello (0.47.1: nel tema del sito la spunta è un <i> dentro
   lo span, non un ::after, e appariva ancora sul colore scelto) */
html body .product-variants .product-variants-item .input-container input:checked + .color::before,
html body .product-variants .product-variants-item .input-container input:checked + .color::after,
html body .product-variants .product-variants-item .input-container.e4h-sel .color::before,
html body .product-variants .product-variants-item .input-container.e4h-sel .color::after { content: none; }
html body .product-variants .product-variants-item .input-container .color > i { display: none; }
/* esaurito: diagonale a due toni (grigio scuro con bordo bianco: si legge sul bianco e sul nero), niente velo */
html body .product-variants .product-variants-item .input-container.e4h-na .color::after,
html body .product-variants .product-variants-item .input-container.e4h-na input:checked + .color::after,
html body .product-variants .product-variants-item .input-container.e4h-na.e4h-sel .color::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  transform: none;
  font-size: 0;
  line-height: 0;
  pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 2.5px), #5F6B70 calc(50% - 2.5px), #5F6B70 calc(50% - 1.5px), #fff calc(50% - 1.5px), #fff calc(50% + 1.5px), #5F6B70 calc(50% + 1.5px), #5F6B70 calc(50% + 2.5px), transparent calc(50% + 2.5px));
}

/* ---- tastiera: contorno visibile sullo span quando l'input ha il fuoco da tastiera ---- */
body .product-variants .input-container input:focus-visible + .radio-label { outline: 2px solid #05566A; outline-offset: 2px; }
body .product-variants .input-container input:focus-visible + .color { outline: 2px solid #05566A; outline-offset: 5px; }

/* ---- tendine: la voce esaurita porta « — esaurito» nel testo (non si può stilizzare un'option) ---- */
body .product-variants .product-variants-item select.e4h-v { letter-spacing: normal; text-transform: none; }

/* ---- testo solo per i lettori di schermo (« (esaurito)» dopo una pastiglia) ---- */
.product-variants .e4h-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}