/* Aggiunto da noi (NON fa parte del visualizzatore del 3D-maker): collegato in index.html dopo il CSS del 3D-maker.
   Decisione dell'utente dell'11/10/2026: nel visualizzatore restano solo il nome del divano e i 16 colori NEW YORK.
   - Nascosti il tessuto SKIPE (titolo + pallini *_sk) e la scelta dei PIEDI (#feetTitle, #feetSelector):
     il divano resta con i piedini predefiniti. Gli elementi restano nella pagina (solo nascosti), perché il JS
     del 3D-maker li cerca: toglierli potrebbe bloccarlo.
   - "!important" perché il visualizzatore scrive da solo style="display: ..." su piedi e titoli.
   - La regola con :has() funziona anche prima che parta lo script; merolla.js aggiunge in più la classe
     .merolla-nascosto (per i browser vecchi senza :has()). */
#feetTitle,
#feetSelector,
.merolla-nascosto,
.stoffaContainer:has(> [id$='_sk']),
.sofaElement:has(+ .stoffaContainer > [id$='_sk']) {
  display: none !important;
}

/* Pallini NEW YORK usabili da tastiera (merolla.js li rende "pulsanti"): anello ben visibile col focus */
.colorSelector:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 3px;
}

/* Il colore scelto: anello scuro attorno al pallino (il visualizzatore originale non lo mostrava) */
.colorSelector.merolla-scelto {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #1a1a1a;
}

/* Senza Skipe e piedi il pannello è più corto: la barra di scorrimento compare solo se serve
   (il CSS del 3D-maker la mostrava sempre con overflow-y: scroll). */
.configContainer {
  overflow-y: auto !important;
}

/* Finestra "Guarda in 3D" su computer (20/10/2026, richiesta dell'utente): il modello occupa il 70% dell'altezza e
   nome + tessuto il 30% sotto, sempre uno sopra l'altro (anche quando la finestra è larga più di 1024 px e il
   visualizzatore metterebbe il pannello di lato). Sul telefono (sotto 768 px) resta l'impaginazione del 3D-maker. */
@media (min-width: 768px) {
  .configuratore {
    flex-direction: column !important;
    width: 100vw !important;
  }
  .container {
    width: 100vw !important;
    height: 70vh !important;
    position: relative !important;
    top: auto !important;
  }
  .configContainer {
    width: 100vw !important;
    height: 30vh !important;
    margin: 0 !important;
    padding: 2.5vh 48px !important;
    justify-content: center !important;
    filter: none !important;
    z-index: 1 !important;
  }
  .stoffaContainer {
    grid-template-columns: repeat(16, auto) !important;
    justify-content: start !important;
  }
  .sofaName {
    font-size: 26px !important;
    margin-top: 0 !important;
  }
  .sofaSection {
    font-size: 15px !important;
  }
  .sofaElement {
    font-size: 12px !important;
  }
}