/** Shopify CDN: Minification failed

Line 1401:0 Expected "}" to go with "{"

**/
/* ------------------------------ */
/*       DARK MODE PER CPB        */
/*    + CAMPIONI SEMPRE TONDI     */
/* ------------------------------ */

/* SFONDO SCURO GLOBALE (solo UI) */
#product-builder,
#product-builder .cpb-container,
#product-builder .cpb-panels-wrapper,
#product-builder .cpb-options-panel,
#product-builder .cpb-summary-panel {
  background-color: #333 !important;
}

/* TESTI BIANCHI */
#product-builder h1, #product-builder h2, #product-builder h3,
#product-builder h4, #product-builder p, #product-builder span,
#product-builder label, #product-builder .cpb-step-title,
#product-builder .cpb-category-title, #product-builder .cpb-option-title,
#product-builder .cpb-option-description, #product-builder .cpb-panels-tabs li {
  color: #fff !important;
}

/* PLACEHOLDER */
#product-builder input::placeholder,
#product-builder textarea::placeholder {
  color: #ddd !important;
  opacity: 1 !important;
}

/* TABS */
.cpb-panels-tabs li {
  background-color: #444 !important;
  color: #fff !important;
  border: 1px solid #555 !important;
  border-radius: 12px !important;
}

.cpb-panels-tabs li.cpb-active {
  background-color: #555 !important;
  border-color: #888 !important;
}

/* ============================================================= */
/*  CAMPIONI / OPZIONI → SEMPRE CERCHI PERFETTI (desktop + mobile) */
/* ============================================================= */

#product-builder .cpb-option {
  /* Forza forma circolare */
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 50% !important;
  background-color: #444 !important;
  border: 2px solid #666 !important;
  color: #fff !important;
  padding: 0 !important;                 /* togliamo padding per non deformare */
  margin: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

#product-builder .cpb-option:hover {
  background-color: #555 !important;
  border-color: #888 !important;
  transform: scale(1.08) !important;
}

#product-builder .cpb-option.cpb-active {
  background-color: #666 !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 12px rgba(255,255,255,0.4) !important;
  transform: scale(1.1) !important;
}

/* Contenuto interno (immagine o colore di swatch) */
#product-builder .cpb-option img,
#product-builder .cpb-option .cpb-swatch {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* ============================================================= */
/*  RESPONSIVE – CERCHI PERFETTI ANCHE SU MOBILE E ANTEPRIMA TELEFONO  */
/* ============================================================= */

@media (max-width: 1024px) {
  #product-builder .cpb-option {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    margin: 6px !important;
  }
}

@media (max-width: 768px) {
  #product-builder .cpb-option {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 5px !important;
  }
}

@media (max-width: 480px) {
  #product-builder .cpbcp-option {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    margin: 4px 6px !important;
  }
}

/* ============================================================= */
/*  FIX anteprima mobile del configuratore (spesso ha classe .cpb-preview-mobile o simile) */
/* ============================================================= */
.cpb-preview-mobile .cpb-option,
#product-builder.cpb-mobile-view .cpb-option {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
}

/* ============================================================= */
/*  FIX: nessun background su canvas / immagini del prodotto     */
/* ============================================================= */
#product-builder .cpb-preview-area *,
#product-builder .cpb-image-layer,
#product-builder .cpb-preview img,
#product-builder image,
#product-builder canvas {
  background-color: transparent !important;
}

/* ============================================================= */
/*  FIX MOBILE: SFONDO TITOLI SELETTORE COLORE → #333333        */
/*  (solo su mobile, su desktop rimane come prima)              */
/* ============================================================= */

@media (max-width: 999px) {
  /* Titoli delle categorie di colore/materiale (quelli sopra i cerchi) */
  #product-builder .cpb-category-title,
  #product-builder .cpb-step-title,
  #product-builder .cpb-option-group-title,
  #product-builder .cpb-options-panel .cpb-title,
  #product-builder .cpb-section-title {
    background-color: #333333 !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
  }

  /* Se hanno un contenitore con sfondo diverso lo forziamo */
  #product-builder .cpb-category-header,
  #product-builder .cpb-option-group-header {
    background-color: #333333 !important;
  }
}

/* ============================================================= */
/*  BOTTONE "AGGIUNGI AL CARRELLO" + "FIRST STEP"               */
/*  Perfettamente a tema dark con il resto del sito             */
/* ============================================================= */

/* Bottone principale "Aggiungi al carrello" */
#product-builder .cpb-add-to-cart-button,
#product-builder button[data-action="add-to-cart"],
#product-builder .cpb-summary-panel .button,
#product-builder .cpb-proceed-button {
  background-color: #000000 !important;     /* nero puro come il tuo sito */
  color: #ffffff !important;
  border: 2px solid #ffffff !important;   /* bordo bianco spesso */
  border-radius: 16px !important;
  padding: 18px 32px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4) !important;
  min-height: 64px !important;
}

#product-builder .cpbadd-to-cart-button:hover,
#product-builder button[data-action="add-to-cart"]:hover,
#product-builder .cpb-summary-panel .button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5) !important;
}

/* Bottone "First Step" / "Inizia" / "Prosegui" (quello in alto o in basso) */
#product-builder .cpb-first-step-button,
#product-builder .cpb-start-button,
#product-builder .cpb-next-step-button,
#product-builder .cpb-back-button,
#product-builder .cpb-proceed-button:not(.cpb-add-to-cart-button) {
  background-color: #333333 !important;     /* come richiesto */
  color: #ffffff !important;
  border: 2px solid #666 !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

#product-builder .cpb-first-step-button:hover,
#product-builder .cpb-next-step-button:hover,
#product-builder .cpb-back-button:hover {
  background-color: #444444 !important;
  border-color: #888 !important;
  transform: translateY(-2px) !important;
}

/* ============================================================= */
/*  RIASSUNTO FINALE (il pannello a destra con il prezzo)       */
/*  Sfondo del pulsante e del pannello in perfetto dark mode     */
/* ============================================================= */

#product-builder .cpb-summary-panel {
  background-color: #222 !important;
  border-left: 1px solid #444 !important;
}

#product-builder .cpb-summary-panel .cpb-total-price {
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

/* ============================================================= */
/*  BOTTONE AGGIUNGI AL CARRELLO → sfondo #333333 + testo centrato perfetto  */
/* ============================================================= */

#product-builder .cpb-add-to-cart-button,
#product-builder button[data-action="add-to-cart"],
#product-builder .cpb-summary-panel .button,
#product-builder .cpb-proceed-button,
#product-builder .add-to-cart-btn {
  background-color: #333333 !important;           /* come tutti gli altri elementi */
  color: #ffffff !important;
  border: 2px solid #ffffff !important;           /* bordo bianco bello spesso (lo lasciamo) */
  border-radius: 16px !important;
  padding: 18px 40px !important;                  /* più largo per centrare bene il testo */
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;             /* testo perfettamente centrato */
  text-align: center !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.5) !important;
  transition: all 0.3s ease !important;
  margin: 20px auto !important;
}

#product-builder .cpb-add-to-cart-button:hover,
#product-builder button[data-action="add-to-cart"]:hover {
  background-color: #444444 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.6) !important;
}

/* ============================================================= */
/*  SELETTORE QUANTITÀ → bello, grande e uguale agli altri selettori     */
/*  (sia desktop che mobile)                                            */
/* ============================================================= */

#product-builder .cpb-quantity-selector,
#product-builder .quantity-input-wrapper,
#product-builder .cpb-quantity-input,
#product-builder input[type="number"].cpb-quantity,
#product-builder .cpb-quantity-buttons {
  background-color: #444444 !important;
  color: #fff !important;
  border: 2px solid #666 !important;
  border-radius: 16px !important;
  height: 64px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0 20px !important;
}

/* Pulsanti + e - della quantità */
#product-builder .cpb-quantity-button,
#product-builder .quantity-btn {
  background-color: #555555 !important;
  color: #fff !important;
  border: 2px solid #777 !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  font-size: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 10px !important;
  transition: all 0.2s !important;
}

#product-builder .cpb-quantity-button:hover,
#product-builder .quantity-btn:hover {
  background-color: #666666 !important;
  border-color: #fff !important;
  transform: scale(1.1) !important;
}

/* Contenitore completo quantità (per mobile diventa come gli altri selettori) */
#product-builder .cpb-quantity-wrapper,
#product-builder .quantity-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 20px 0 !important;
  flex-wrap: nowrap !important;
}

/* Su mobile rendiamo tutto più compatto ma sempre bello */
@media (max-width: 768px) {
  #product-builder .cpb-add-to-cart-button,
  #product-builder button[data-action="add-to-cart"] {
    padding: 16px 30px !important;
    font-size: 17px !important;
    min-height: 60px !important;
  }

  #product-builder .cpb-quantity-button,
  #product-builder .quantity-btn {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }

  #product-builder .cpb-quantity-selector,
  #product-builder input[type="number"].cpb-quantity {
    height: 56px !important;
    font-size: 18px !important;
  }
}

/* ============================================================= */
/*  DA MOBILE → BARRE BIANCHE SOPRA E SOTTO L'IMMAGINE CONFIGURATORE */
/*  → sfondo #333333 (dark come tutto il resto)                    */
/* ============================================================= */

@media (max-width: 768px) {

  /* Tutte le barre/header/footer bianchi che stanno dentro o intorno al canvas */
  #product-builder .cpb-preview-header,
  #product-builder .cpb-preview-footer,
  #product-builder .cpb-preview-area::before,
  #product-builder .cpb-preview-area::after,
  #product-builder .cpb-preview-wrapper,
  #product-builder .cpb-mobile-header,
  #product-builder .cpb-mobile-footer,
  #product-builder .cpb-canvas-container,
  #product-builder .cpb-preview-container,
  #product-builder .cpb-image-layer + div,
  #product-builder .cpb-preview-background {

    background-color: #333333 !important;
    background: #333333 !important;
    border-color: #444 !important;
  }

  /* Se c’è proprio uno sfondo bianco ostinato (alcuni temi CPB lo mettono così) */
  #product-builder .cpb-preview-area,
  #product-builder .cpb-preview-mobile,
  #product-builder .cpb-mobile-view,
  #product-builder canvas + div,
  #product-builder .cpb-preview {
    background-color: #333333 !important;
  }

  /* Elimina eventuali ombre o bordi chiari intorno all’anteprima */
  #product-builder .cpb-preview-area *,
  #product-builder .cpb-canvas-wrapper {
    background-color: transparent !important;
  }

  /* Forza anche l’header del configuratore mobile (se esiste) */
  .cpb-header,
  .cpb-mobile-header,
  .cpb-toolbar,
  .cpb-top-bar {
    background-color: #333333 !important;
    color: #fff !important;
    border-bottom: 1px solid #444 !important;
  }
}

/* ============================================================= */
/*  DIETRO I TASTI DEGLI STEP (First Step, Next, Back, ecc.)     */
/*  → sfondo #333333 come tutto il resto                         */
/* ============================================================= */

#product-builder .cpb-panels-tabs,
#product-builder .cpb-panels-tabs ul,
#product-builder .cpb-panels-tabs li,
#product-builder .cpb-step-header,
#product-builder .cpb-steps-wrapper,
#product-builder .cpb-step-indicator,
#product-builder .cpb-progress-bar,
#product-builder .cpb-tabs-container,
#product-builder .cpb-step-navigation {

  background-color: #333333 !important;
  background: #333333 !important;
  border-color: #444 !important;
}

/* Se i pallini/step sono dentro un contenitore con sfondo diverso */
#product-builder .cpb-step,
#product-builder .cpb-step-item,
#product-builder .cpb-step-circle,
#product-builder .cpb-step-label {
  background-color: #333333 !important;
}

/* Solo da mobile (dove di solito è più visibile) – versione extra forte */
@media (max-width: 768px) {
  #product-builder .cpb-panels-tabs,
  #product-builder .cpb-step-header,
  #product-builder .cpb-mobile-steps,
  #product-builder .cpb-progress-container {
    background-color: #333333 !important;
    background: #333333 !important;
  }
}














/* ===============================================
   DARK MODE CONTENITORI CPB – SOLO QUELLI NECESSARI
   =============================================== */

/* Contenitore principale CPB */
#product-builder {
    background-color: #333 !important;
}

/* Wrapper interni CPB */
#product-builder .cpb-preview-wrapper,
#product-builder .cpb-canvas-container,
#product-builder .cpb-preview-container,
#product-builder .cpb-mobile-view,
#product-builder .cpb-preview-mobile {
    background-color: #333 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Altezza mobile */
@media (max-width: 1024px) {
    #product-builder .cpb-preview-area {
        min-height: 100vh !important;
        height: auto !important;
    }
}

/* ===============================================
   CAMPIONI – TRASPARENTI E TONDI
   =============================================== */
#product-builder .cpb-option,
#product-builder .cpb-swatch {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 6px 6px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    filter: none !important;
}

#product-builder .cpb-option img,
#product-builder .cpb-option .cpb-swatch img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    background: transparent !important;
    filter: none !important;
}

/* ===============================================
   FRECCE NAVIGAZIONE STEP
   =============================================== */
#product-builder .cpb-step-navigation button,
#product-builder .cpb-step-navigation .cpb-next-step-button,
#product-builder .cpb-step-navigation .cpb-back-button {
    background-color: #444 !important;
    color: #fff !important;
    border: 2px solid #666 !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

#product-builder .cpb-step-navigation button:hover,
#product-builder .cpb-step-navigation .cpb-next-step-button:hover,
#product-builder .cpb-step-navigation .cpb-back-button:hover {
    background-color: #555 !important;
    border-color: #888 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

#product-builder .cpb-step-navigation button svg {
    fill: #fff !important;
}







/* ==========================================
   FIX MOBILE CPB – CERCHI PERFETTI SENZA CAMBIARE I COLORI
   ========================================== */
@media (max-width: 768px) {

  /* Contenitori CPB */
  #product-builder,
  #product-builder .cpb-container,
  #product-builder .cpb-options-panel,
  #product-builder .cpb-options-wrapper,
  #product-builder .cpb-options-group,
  #product-builder .cpb-options-list {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Layout interno: nessuna modifica ai colori */
  #product-builder .cpb-options-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* Contenitore del campione – SOLO forma */
  #product-builder .cpb-option {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;  /* forma tonda */
    overflow: hidden !important;    /* ritaglia perfettamente */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* L’immagine del campione – NON viene modificata nei colori */
  #product-builder .cpb-option img,
  #product-builder .cpb-swatch {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;  /* la fa sembrare tonda */
    object-fit: cover !important;   /* NON cambia colore, solo ritaglio */
    background: none !important;    /* impedisce grigi/bianchi */
    filter: none !important;        /* impedisce effetti */
  }
}

/* =============================== */
/*  CERCHI PERFETTI – MA SENZA    */
/*  CAMBIARE COLORE AI CAMPIONI    */
/* =============================== */

#product-builder .cpb-option {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 50% !important;
    overflow: hidden !important;

    /* RIMOSSO qualsiasi background */
    background: none !important;
    background-color: transparent !important;

    /* Mantieni il border se ti piace */
    border: 2px solid #444 !important;

    padding: 0 !important;
    margin: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* L’immagine del campione non viene modificata nei colori */
#product-builder .cpb-option img,
#product-builder .cpb-option .cpb-swatch {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;

    /* Nessun filtro o colore */
    background: none !important;
    background-color: transparent !important;
    filter: none !important;
}



/* 🔳 Colore sfondo del pannello (wrapper) */
.cpb-panels-tabs-wrapper {
    background-color: #333333 !important;
}

/* 🔘 Frecce (cambia SOLO colore, nessuna dimensione modificata) */
.cpb-panels-tabs-button {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* 🔳 Bottone centrale (solo colore, nessuna modifica a padding o grandezza) */
.cpb-panels-tabs[data-rttabs="true"] {
    background-color: #333333 !important;
    color: #ffffff !important;
}


/* Target specifico per i Polaris-Button che appaiono neri o scuri nell'interfaccia */
.Polaris-Button {
    background-color: #333333 !important;
    background-image: none !important; /* Rimuove eventuali gradienti se presenti */
    border-color: #333333 !important;  /* Per uniformità, se hanno bordi */
}

/* Contenitore principale del pulsante "Remove background" - SOLO COLORE */
.cpb-icon-button[data-action="remove-bg"],
div[data-action="remove-bg"],
div.sc-kEYxdZ,
div[aria-label="Remove background"] {
    background-color: #333333 !important;
    background-image: none !important;
    border: none !important;
}


/* RIMUOVE LA FORMA TONDA SOLO PER IL CONTENITORE DELLE OPZIONI DI TIPO TESTO */
.option.option-type-inputLong,
.cpb-option.cpb-option-type-inputLong,
.sc-eyvHYj.cpb-option-type-inputLong {
    border-radius: 8px !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
    mask-image: none !important;
    aspect-ratio: auto !important;
    background: #333333 !important;
    padding: 10px !important;
}

/* CORREGGE IL TEXTAREA ALL'INTERNO */
.option.option-type-inputLong textarea {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 0 !important;
}

/* Forza forma rettangolare SOLO per le opzioni di input testo */
#product-builder .cpb-option-type-inputLong,
#product-builder [class*="option-type-inputLong"],
#product-builder div[class*="cpb-option-type-inputLong"] {
    border-radius: 10px !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
    mask-image: none !important;
    aspect-ratio: auto !important;
    background: #333 !important;
    padding: 12px !important;
}

#product-builder .cpb-option-type-inputLong textarea {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    padding: 0 !important;
    height: auto !important;
}


/* contenitore dell'opzione testo lungo */
#product-builder .cpb-option.cpb-option-type-inputLong {
  display: block !important;      /* niente flex che centra */
  text-align: left !important;    /* contenuto allineato a sinistra */
  margin-left: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* la textarea dentro */
#product-builder .cpb-option.cpb-option-type-inputLong textarea {
  margin: 0 !important;
  text-align: left !important;
}







/*ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddtasti step fffffffffffffffffffffffffffffff
/* Solo su desktop (≥ 1024px) */
@media (min-width: 1024px) {
  /* Contenitore dei tab */
  .cbp-panels-tabs-list {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding-bottom: 4px;
  }

  /* Ogni singolo tab */
  .react-tabs__tab {
    position: relative;
    transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    cursor: pointer;
    padding: 14px 28px;
    border-radius: 12px;
    background: #1a1a1a;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
    transform: translateY(0);
    border: 1px solid transparent;
  }

  /* Hover: rialzo di metà (7px) + glow */
  .react-tabs__tab:hover {
    transform: translateY(-7px);
    box-shadow: 
      0 14px 28px rgba(0,0,0,0.6),
      0 0 25px rgba(255,255,255,0.25);
  }

  /* Tab attivo (premuto/selezionato): stesso rialzo di metà (7px) ma glow più intenso */
  .react-tabs__tab.react-tabs__tab--selected,
  .react-tabs__tab[aria-selected="true"] {
    transform: translateY(-7px);
    background: #2a2a2a;
    box-shadow: 
      0 16px 32px rgba(0,0,0,0.65),
      0 0 35px rgba(255,255,255,0.35),
      inset 0 0 15px rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
  }

  /* Effetto retroilluminato interno solo sul tab attivo */
  .react-tabs__tab.react-tabs__tab--selected::after,
  .react-tabs__tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.15), transparent 70%);
    pointer-events: none;
  }

  /* Quando passi sopra col mouse sul tab attivo: non si alza di più, resta a -7px */
  .react-tabs__tab.react-tabs__tab--selected:hover,
  .react-tabs__tab[aria-selected="true"]:hover {
    transform: translateY(-7px);
  }
}

/* Su mobile: nessun effetto */
@media (max-width: 1023px) {
  .react-tabs__tab {
    transform: none !important;
    box-shadow: none !important;
  }
}



/* ============================================================= */
/* FIX SPECIFICO PER L’INTERVALLO 770px – 1000px (tra mobile e tablet) */
/* ============================================================= */

@media (min-width: 770px) and (max-width: 1000px) {

  /* Contenitore principale del configuratore */
  #product-builder,
  #product-builder .cpb-container,
  #product-builder .cpb-panels-wrapper {
    display: flex !important;
    flex-direction: column !important; /* evita che si sovrappongano */
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* Anteprima e pannelli opzioni: layout a colonna (come mobile) ma con più spazio */
  #product-builder .cpb-preview-area,
  #product-builder .cpb-preview-container,
  #product-builder .cpb-preview-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 500px !important; /* evita che scompaia */
    margin-bottom: 20px !important;
  }

  /* Pannello opzioni: occupa tutta la larghezza */
  #product-builder .cpb-options-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 10px !important;
  }

  /* Lista dei cerchi: flex-wrap e centrati */
  #product-builder .cpb-options-list,
  #product-builder .cpb-options-group {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
  }

  /* Cerchi perfetti ma leggermente più grandi in questo intervallo */
  #product-builder .cpb-option {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    margin: 6px !important;
    border-radius: 50% !important;
  }

  /* Quantità e bottone aggiungi al carrello: centrati e con spazio */
  #product-builder .cpb-quantity-wrapper,
  #product-builder .cpb-add-to-cart-button,
  #product-builder button[data-action="add-to-cart"] {
    margin: 20px auto !important;
  }

  /* Nascondi eventuali elementi che su desktop sono a fianco (es. summary panel) */
  #product-builder .cpb-summary-panel {
    width: 100% !important;
    margin-top: 20px !important;
    border-left: none !important;
    border-top: 1px solid #444 !important;
  }

  /* Tab/step di navigazione: più spaziosi e leggibili */
  .cpb-panels-tabs li,
  .react-tabs__tab {
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  /* Evita che la preview mobile appaia in questo range (usa sempre quella desktop) */
  .cpb-preview-mobile,
  .cpb-mobile-view,
  .cpb-mobile-header {
    display: none !important;
  }

  /* Forza la visualizzazione della preview desktop */
  .cpb-preview-area,
  .cpb-preview-container {
    display: block !important;
  }
}








/* ============================================================= */
/* RIMUOVI L’ANELLO BIANCO LUMINOSO (glow) SOLO INTORNO ALL’IMMAGINE */
/* SOLO SU MOBILE – lascia intatto il bordo del campione              */
/* ============================================================= */

@media (max-width: 768px) {

  /* Target specifico: l’immagine o il swatch dentro il campione */
  #product-builder .cpb-option img,
  #product-builder .cpb-option .cpb-swatch,
  #product-builder .cpb-option .cpb-swatch-img,
  #product-builder .cpb-swatch-image,
  #product-builder .cpb-option img[src*="jpg"],
  #product-builder .cpb-option img[src*="png"],
  #product-builder .cpb-option img[src*="jpeg"] {

    /* Rimuove qualsiasi glow/ombra bianca intorno all’immagine */
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    outline: none !important;
    border: none !important;               /* elimina eventuali bordi extra sull’immagine */
    box-shadow: 0 0 0 transparent !important;

    /* Assicura che l’immagine non abbia margini o padding che creano effetto glow */
    margin: 0 !important;
    padding: 0 !important;

    /* Forza la dimensione esatta del contenitore (evita che sporga) */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  /* Se il glow è causato da un contenitore wrapper interno (capita spesso con CPB) */
  #product-builder .cpb-option .cpb-swatch-wrapper,
  #product-builder .cpb-option .cpb-swatch-inner,
  #product-builder .cpb-option > div:not(.cpb-swatch) {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
  }

  /* Forza il bordo solo sul contenitore .cpb-option (quello che vuoi mantenere) */
  #product-builder .cpb-option {
    box-shadow: none !important;           /* rimuove eventuale glow sul contenitore */
    /* Il tuo bordo originale rimane, perché lo hai definito tu con !important */
  }
}






@media screen and (min-width: 1024px) {

    /* Contenitore principale: preview a sinistra, opzioni a destra */
    #product-builder .cpb-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 20px; /* spazio tra preview e colonna destra */
        padding-right: 20px; /* margine interno a destra */
    }

    /* Colonna sinistra: preview cresce liberamente */
    #product-builder .cpb-preview-wrapper,
    #product-builder .cpb-preview-container,
    #product-builder .cpb-preview {
        flex: 1 1 auto !important;       /* occupa tutto lo spazio disponibile */
        min-width: 400px !important;     /* larghezza minima */
    }

    /* Colonna destra: opzioni max metà schermo, si riduce se serve */
    #product-builder .cpb-options-panel,
    #product-builder .cpb-panels-container {
        flex: 0 1 50vw !important;      /* non supera metà dello schermo, ma si riduce se necessario */
        width: 100% !important;
        max-width: 50vw !important;
    }
}




/* ============================================================= */
/*  CUSTOM SELECT DROPDOWN – SOLO I TITOLI (COLORE TESTO / SELEZIONA FONT / GRANDEZZA TESTO) */
/*  Stile moderno, centrato, uppercase, dark mode integrato     */
/* ============================================================= */

/* Titoli sopra i select (es. "COLORE TESTO", "SELEZIONA FONT", "GRANDEZZA TESTO") */
#product-builder .cpb-category-title,
#product-builder .cpb-option-group-title,
#product-builder .cpb-section-title,
#product-builder .cpb-options-panel .cpb-title {
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #cccccc !important;
    margin: 25px auto 10px auto !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding: 8px 0 !important;
}

/* Titoli specifici per le sezioni di testo (per maggior precisione) */
div.sc-eGugYl + .cpb-category-title,
div[data-option-id*="text-color"] ~ .cpb-category-title,
div[data-option-id*="fontfamily"] ~ .cpb-category-title,
div[data-option-id*="text-size"] ~ .cpb-category-title,
#product-builder .cpb-category-title:has(+ .cpb-option-type-select-wrapper),
#product-builder .cpb-option-group-title:has(+ div[class*="select"]) {
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #cccccc !important;
    margin: 30px auto 12px auto !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
}

/* Mobile: titoli leggermente più grandi e con più spazio */
@media (max-width: 768px) {
    #product-builder .cpb-category-title,
    #product-builder .cpb-option-group-title {
        font-size: 17px !important;
        margin: 35px auto 15px auto !important;
        letter-spacing: 1.5px !important;
    }
}










/* ============================================================= */
/*  RESET TOTALE STILE MENU A TENDINA (SELECT / DROPDOWN)        */
/*  → NON TOCCA NESSUN ALTRO ELEMENTO                            */
/* ============================================================= */

/* Select HTML nativi */
#product-builder select,
#product-builder option {
  all: revert !important;
  background: revert !important;
  color: revert !important;
  border: revert !important;
  border-radius: revert !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: revert !important;
  font-weight: revert !important;
}

/* Wrapper custom select (React / CPB / Shopify / Polaris) */
#product-builder .cpb-option-type-select,
#product-builder .cpb-option-type-select-wrapper,
#product-builder .cpb-select,
#product-builder .cpb-dropdown,
#product-builder .cpb-dropdown-wrapper,
#product-builder .cpb-custom-select,
#product-builder [class*="select"],
#product-builder [class*="dropdown"] {
  all: revert !important;
  background: revert !important;
  border: revert !important;
  border-radius: revert !important;
  box-shadow: none !important;
  color: revert !important;
}

/* Elemento visibile del select custom */
#product-builder .cpb-select__control,
#product-builder .cpb-dropdown__control,
#product-builder .Polaris-Select,
#product-builder .Polaris-Select__Input {
  all: revert !important;
  background: revert !important;
  border: revert !important;
  border-radius: revert !important;
  box-shadow: none !important;
  color: revert !important;
}

/* Menu aperto (lista opzioni) */
#product-builder .cpb-select__menu,
#product-builder .cpb-dropdown__menu,
#product-builder .Polaris-Select__Menu {
  all: revert !important;
  background: revert !important;
  border: revert !important;
  box-shadow: revert !important;
  color: revert !important;
}

/* Singole voci del menu */
#product-builder .cpb-select__option,
#product-builder .cpb-dropdown__option,
#product-builder .Polaris-Select__Option {
  all: revert !important;
  background: revert !important;
  color: revert !important;
}

/* Hover / active / selected */
#product-builder .cpb-select__option--is-focused,
#product-builder .cpb-select__option--is-selected,
#product-builder .cpb-dropdown__option--active,
#product-builder .Polaris-Select__Option--selected {
  all: revert !important;
}

/* Icone freccia / caret */
#product-builder select::-ms-expand,
#product-builder .cpb-select__indicator,
#product-builder .cpb-dropdown__indicator {
  all: revert !important;
}
/* ============================================================= */
/*  SBLOCCO TOTALE MENU A TENDINA                                */
/*  → RIMUOVE QUALSIASI BLOCCO TONDO / CERCHIO / FORMA FORZATA   */
/* ============================================================= */

/* Select nativi */
#product-builder select {
  border-radius: revert !important;
  aspect-ratio: auto !important;
  clip-path: none !important;
  mask-image: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Wrapper select custom CPB / React / Shopify / Polaris */
#product-builder .cpb-option-type-select,
#product-builder .cpb-option-type-select-wrapper,
#product-builder .cpb-select,
#product-builder .cpb-dropdown,
#product-builder .cpb-dropdown-wrapper,
#product-builder .cpb-custom-select,
#product-builder .Polaris-Select,
#product-builder [class*="select"],
#product-builder [class*="dropdown"] {

  border-radius: revert !important;
  aspect-ratio: auto !important;
  clip-path: none !important;
  mask-image: none !important;
  overflow: visible !important;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;

  display: block !important; /* evita inline-flex che li rende tondi */
}

/* Controllo visibile del select */
#product-builder .cpb-select__control,
#product-builder .cpb-dropdown__control,
#product-builder .Polaris-Select__Input {

  border-radius: revert !important;
  aspect-ratio: auto !important;
  clip-path: none !important;
  mask-image: none !important;

  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  overflow: visible !important;
}

/* Menu aperto (lista opzioni) */
#product-builder .cpb-select__menu,
#product-builder .cpb-dropdown__menu,
#product-builder .Polaris-Select__Menu {

  border-radius: revert !important;
  clip-path: none !important;











  /* ============================================================= */
/*  MENU A TENDINA DARK RECTANGOLARE – TESTI LEGGIBILI          */
/* ============================================================= */

/* Wrapper principale dei select */
#product-builder .cpb-option-type-select-wrapper,
#product-builder .cpb-select,
#product-builder .cpb-dropdown,
#product-builder .cpb-dropdown-wrapper,
#product-builder .Polaris-Select,
#product-builder [class*="select"],
#product-builder [class*="dropdown"] {

    background-color: #333333 !important;  /* sfondo dark */
    color: #ffffff !important;             /* testo leggibile */
    border: 2px solid #666 !important;     /* bordo coerente con il resto */
    border-radius: 12px !important;        /* rettangolare con angoli arrotondati */
    padding: 12px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

/* Hover / focus sul select */
#product-builder .cpb-option-type-select-wrapper:hover,
#product-builder .cpb-select:hover,
#product-builder .cpb-dropdown:hover,
#product-builder .Polaris-Select:hover,
#product-builder [class*="select"]:hover,
#product-builder [class*="dropdown"]:hover,
#product-builder .cpb-option-type-select-wrapper:focus,
#product-builder .cpb-select:focus,
#product-builder .cpb-dropdown:focus,
#product-builder .Polaris-Select:focus {

    background-color: #444444 !important;
    border-color: #888888 !important;
    color: #ffffff !important;
}

/* Lista opzioni aperta */
#product-builder .cpb-select__menu,
#product-builder .cpb-dropdown__menu,
#product-builder .Polaris-Select__Menu {

    background-color: #333333 !important;
    color: #ffffff !important;
    border: 2px solid #666 !important;
    border-radius: 12px !important;
    padding: 4px 0 !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
}

/* Singole opzioni */
#product-builder .cpb-select__option,
#product-builder .cpb-dropdown__option,
#product-builder .Polaris-Select__Option {

    background-color: #333333 !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    cursor: pointer !important;
}

/* Hover / selezionata */
#product-builder .cpb-select__option:hover,
#product-builder .cpb-dropdown__option:hover,
#product-builder .Polaris-Select__Option:hover,
#product-builder .cpb-select__option--is-selected,
#product-builder .cpb-dropdown__option--is-selected,
#product-builder .Polaris-Select__Option--selected {

    background-color: #555555 !important;
    color: #ffffff !important;
}

/* Forza visibilità testo anche se inline style o ereditato */
#product-builder select,
#product-builder select option,
#product-builder .cpb-option-type-select *,
#product-builder .cpb-select *,
#product-builder .cpb-dropdown *,
#product-builder .Polaris-Select * {
    color: #ffffff !important;
    background-color: transparent !important;
}
/* ========================================= */
/*  REACT-SELECT / MENU A TENDINA DARK       */
/* ========================================= */

/* Contenitore principale del select */
.css-dooa7r-control,
.css-1hwfws3 {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 2px solid #666 !important;   /* bordo coerente con il resto */
    border-radius: 12px !important;
    padding: 6px 12px !important;
}

/* Valore selezionato */
.css-1uccc91-singleValue {
    color: #ffffff !important;
}

/* Input interno (dummy input) */
.css-62g3xt-dummy.Input {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Indicatori (freccia ▼ e separatore) */
.css-lokebmr-indicatorSeparator,
.css-tlfecz-indicatorContainer {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Lista opzioni quando aperta */
.css-1wy0on6-menu, 
.css-1wy0on6-menu-list {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 2px solid #666 !important;
    border-radius: 12px !important;
}

/* Singole opzioni */
.css-1n7v3ny-option {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Hover / selezionata */
.css-1n7v3ny-option:hover,
.css-1n7v3ny-option--is-focused,
.css-1n7v3ny-option--is-selected {
    background-color: #555555 !important;
    color: #ffffff !important;
}