/* ==========================================================================
   Selettore della buy-box della scheda prodotto, con due usi. Le edizioni
   dei treni 12V (le annate dello stesso set) e gli esemplari multipli (piu'
   copie dello stesso set in vendita ognuna col suo prezzo, sotto il titolo
   Scegli l'esemplare). Il markup nasce in un posto solo, il selettore di
   inc/edizioni.php.

   I pulsanti stanno affiancati e la griglia ne mette in fila quanti ci
   stanno, andando a capo solo quando lo spazio finisce. Per i 12V sono
   sempre due e restano in fila anche sul telefono piu' stretto. Quello della
   scheda aperta ha il bordo spesso nel colore delle azioni e il fondo tinto,
   gli altri sono link alle loro schede. Nessuna transizione, perche' il
   cambio di stato e' un cambio di pagina.
   ========================================================================== */
.ldd-product .ldd-edizioni {
  margin: 4px 0 16px;
}
.ldd-product .ldd-edizioni-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 8px;
}
/* Titolo del selettore degli esemplari: stessa voce delle etichette della buy-box. */
.ldd-product .ldd-edizioni-titolo {
  margin: 0 0 6px;
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}
.ldd-product .ldd-ed {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--wp--preset--color--border, #e4e4e7);
  border-radius: var(--ldd-radius, 12px);
  background: var(--bk-on-fill);
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  line-height: 1.25;
}
/* Corrente: il bordo piu' spesso si compensa togliendo altrettanto spazio
   interno, cosi' i pulsanti restano alti uguali e il testo non si sposta
   passando da una scheda all'altra. */
.ldd-product .ldd-ed.is-current {
  border: 2px solid var(--bk-blue-600);
  padding: 9px 11px;
  background: var(--bk-blue-050);
}
.ldd-product a.ldd-ed:hover {
  border-color: var(--bk-blue-600);
}
.ldd-product a.ldd-ed:focus-visible {
  outline: var(--bk-focus);
  outline-offset: 2px;
}
.ldd-product .ldd-ed-nome {
  font-size: var(--bk-fs-base);
  font-weight: 900;
}
.ldd-product .ldd-ed-costo {
  font-size: var(--bk-fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ldd-product .ldd-ed-costo.is-na {
  font-weight: 400;
  color: var(--wp--preset--color--muted);
}
/* Lo stato In arrivo dentro il pulsante, nel blu scuro di stato del badge. */
.ldd-product .ldd-ed-stato {
  font-size: var(--bk-fs-xs);
  font-weight: 700;
  color: var(--bk-blue-700);
}
.ldd-product .ldd-edizioni-nota {
  margin: 8px 0 0;
  font-size: var(--bk-fs-sm);
  line-height: 1.45;
  color: var(--wp--preset--color--muted);
}

@media (min-width: 782px) {
  .ldd-product .ldd-edizioni-opts {
    max-width: 440px;
  }
  /* Con piu' esemplari la riga puo' allargarsi per tenerli tutti affiancati. */
  .ldd-product .ldd-edizioni--esemplari .ldd-edizioni-opts {
    max-width: 600px;
  }
}