/* Configuratore Prodotto Gruppo Cabrini — stile "strumento tecnico"
   (IBM Plex + palette ink/paper/orange/teal), coerente col mockup approvato.
   Font caricato separatamente dal tema (Montserrat resta sul resto del sito:
   il configuratore è un componente a sé, come un tool di misurazione). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.cc-configurator{
  --cc-ink:#1c1d1b; --cc-paper:#f6f4ef; --cc-panel:#ffffff;
  --cc-line:#e2ded3; --cc-line-strong:#c9c2af;
  --cc-orange:#ff5a1f; --cc-orange-deep:#c8410f;
  --cc-teal:#0d6e6a; --cc-muted:#8a8578; --cc-danger:#c0392b;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  color:var(--cc-ink);
  max-width:1180px;margin:24px auto;
}
.cc-configurator *{box-sizing:border-box;}
.cc-configurator .mono{font-family:'IBM Plex Mono',monospace;}

.cc-box{background:var(--cc-panel);border:1px solid var(--cc-line);border-radius:12px;padding:22px;}

.cc-head{margin-bottom:18px;}
.cc-title{font-size:22px;margin:0 0 4px;font-weight:700;}
.cc-subtitle{color:var(--cc-muted);font-size:13.5px;margin:0;}

/* ---- builder a 3 colonne ---- */
.cc-builder{display:grid;grid-template-columns:250px 1fr 260px;gap:18px;align-items:start;}
@media (max-width:960px){.cc-builder{grid-template-columns:1fr;}}

.cc-panel{background:#fff;border:1px solid var(--cc-line);border-radius:10px;padding:16px;}
.cc-panel h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--cc-muted);margin:0 0 12px;font-weight:600;}

.cc-field{margin-bottom:14px;}
.cc-field:last-child{margin-bottom:0;}
.cc-field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;}

/* swatch circolari (colore capo) */
.cc-swatches{display:flex;flex-wrap:wrap;gap:7px;}
.cc-swatch{width:28px;height:28px;border-radius:50%;border:2px solid #fff;outline:1.5px solid var(--cc-line-strong);cursor:pointer;position:relative;}
.cc-swatch.cc-sel{outline:2.5px solid var(--cc-orange);}

/* swatch colore di sfondo del cartello. Classe a se' (non .cc-swatch) perche'
   la pagina prodotto stampa gia' una regola .single-product .cc-swatch per i
   pulsanti delle varianti native: piu' specifica di .cc-swatch, sovrascriverebbe
   forma e bordo. Quadrati con angoli smussati, come la targa che rappresentano. */
.cc-configurator .cc-bg-swatches{display:flex;flex-wrap:wrap;gap:5px;}
/* 26px: i sette colori stanno tutti su una riga nei 218px utili della colonna
   opzioni (7x26 + 6x5 = 212). Piu' grandi andavano a capo 6+1. */
.cc-configurator .cc-bg-swatch{width:26px;height:26px;padding:0;border-radius:5px;
  border:2px solid #fff;outline:1.5px solid var(--cc-line-strong);cursor:pointer;
  background-clip:padding-box;}
.cc-configurator .cc-bg-swatch.cc-sel{outline:2.5px solid var(--cc-orange);}
.cc-configurator .cc-bg-name{font-size:11.5px;color:var(--cc-muted);margin-top:6px;}

/* chip (taglia, forma, misura) */
.cc-chip-row{display:flex;flex-wrap:wrap;gap:6px;}
.cc-chip{padding:6px 11px;border:1.3px solid var(--cc-line-strong);border-radius:20px;font-size:12.5px;cursor:pointer;background:#fff;font-weight:500;}
.cc-chip.cc-sel{background:var(--cc-ink);color:#fff;border-color:var(--cc-ink);}
.cc-chip.cc-disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through;}

/* radio-list con prezzo (materiale, tipo di stampa) */
.cc-radio-list label{display:flex;gap:8px;align-items:flex-start;padding:8px 9px;border:1.3px solid var(--cc-line);border-radius:7px;margin-bottom:6px;cursor:pointer;font-size:12.5px;line-height:1.35;}
.cc-radio-list label:last-child{margin-bottom:0;}
.cc-radio-list label.cc-sel{border-color:var(--cc-orange);background:#fff4ee;}
.cc-radio-list input{margin-top:2px;}
.cc-radio-list .cc-p{font-family:'IBM Plex Mono',monospace;font-weight:600;white-space:nowrap;color:var(--cc-orange-deep);margin-left:auto;padding-left:8px;}

/* ---- colonna canvas ---- */
.cc-canvas-col{display:flex;flex-direction:column;align-items:center;}
.cc-hint{font-size:13px;color:var(--cc-muted);margin:0 0 10px;text-align:center;}
.cc-view-toggle{display:flex;gap:6px;margin-bottom:12px;}
.cc-view-btn{padding:6px 16px;border-radius:20px;border:1.3px solid var(--cc-line-strong);background:#fff;font-size:12.5px;font-weight:600;cursor:pointer;}
.cc-view-btn.cc-sel{background:var(--cc-teal);color:#fff;border-color:var(--cc-teal);}

.cc-stage-wrap{display:flex;justify-content:center;width:100%;}
.cc-stage{background:#efece2;border:1px solid var(--cc-line);border-radius:10px;padding:18px;position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;}
.cc-stage canvas{border-radius:4px;}
.cc-zone-warning{position:absolute;bottom:14px;left:14px;right:14px;background:#fff4ee;border:1px solid #ffcbab;color:var(--cc-orange-deep);font-size:12px;padding:8px 10px;border-radius:6px;text-align:center;}

/* Lente di ingrandimento dell'anteprima. E' un overlay puramente visivo: non
   ingrandisce il canvas Fabric (sposterebbe le coordinate degli oggetti e
   romperebbe trascinamento ed export), mostra un ritaglio ingrandito di uno
   scatto del canvas. pointer-events:none e' obbligatorio, altrimenti la lente
   intercetterebbe i click al posto del canvas sottostante. */
.cc-configurator .cc-lens{
  position:absolute;left:0;top:0;border-radius:50%;
  border:2px solid #fff;outline:1.5px solid var(--cc-line-strong);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  background-color:#efece2;background-repeat:no-repeat;
  pointer-events:none;opacity:0;transition:opacity .12s ease;z-index:3;
}
.cc-configurator .cc-lens.cc-lens-on{opacity:1;}

.cc-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;width:100%;justify-content:center;}
.cc-btn{padding:9px 14px;border-radius:7px;border:1.3px solid var(--cc-line-strong);background:#fff;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;}
.cc-btn:hover{border-color:var(--cc-ink);}
.cc-btn.cc-danger{color:var(--cc-danger);border-color:#eccec9;}
.cc-btn:disabled{opacity:.4;cursor:not-allowed;}

.cc-text-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;width:100%;justify-content:center;align-items:center;background:#fbfaf6;border:1px solid var(--cc-line);padding:10px;border-radius:8px;}
.cc-text-input{flex:1 1 100%;padding:9px 10px;border:1.3px solid var(--cc-line-strong);border-radius:6px;font-size:14px;font-family:inherit;}
.cc-text-input:focus{outline:none;border-color:var(--cc-teal);}
.cc-text-controls-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;width:100%;}
.cc-text-controls-row select,.cc-text-controls-row input[type=color]{width:auto;padding:6px 8px;font-size:12px;}
.cc-text-controls-row input[type=range]{width:110px;}
.cc-char-count{font-size:11px;color:var(--cc-muted);}
.cc-char-count.cc-over{color:var(--cc-danger);font-weight:600;}

.cc-export-row{margin-top:10px;width:100%;display:flex;justify-content:center;}

/* preset di colore del testo: tondi, per distinguerli a colpo d'occhio dagli
   swatch quadrati del colore di sfondo del cartello */
.cc-configurator .cc-text-color-row{gap:8px;}
.cc-configurator .cc-text-color-label{font-size:11.5px;color:var(--cc-muted);font-weight:600;}
.cc-configurator .cc-text-colors{display:flex;flex-wrap:wrap;gap:5px;}
.cc-configurator .cc-text-color{width:22px;height:22px;padding:0;border-radius:50%;
  border:2px solid #fff;outline:1.5px solid var(--cc-line-strong);cursor:pointer;
  background-clip:padding-box;}
.cc-configurator .cc-text-color.cc-sel{outline:2.5px solid var(--cc-orange);}

/* ---- colonna riepilogo ordine ---- */
.cc-summary{align-self:stretch;}
.cc-summary-line{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--cc-line);}
.cc-summary-line b{font-family:'IBM Plex Mono',monospace;}
.cc-price-box{text-align:right;margin:10px 0;}
.cc-vat{color:var(--cc-muted);font-size:11px;}
.cc-price-now{font-size:26px;font-weight:700;font-family:'IBM Plex Mono',monospace;color:var(--cc-ink);}
.cc-qty-row{display:flex;align-items:center;gap:8px;margin:10px 0;}
.cc-qty-row button{width:28px;height:28px;border-radius:6px;border:1.3px solid var(--cc-line-strong);background:#fff;cursor:pointer;font-weight:700;font-family:inherit;}
.cc-qty-row input{width:52px;text-align:center;padding:4px;border:1.3px solid var(--cc-line-strong);border-radius:6px;font-family:inherit;}
.cc-qty-label{font-size:12px;color:var(--cc-muted);}
.cc-discount-note{font-size:11.5px;background:#eef7f0;color:#256a3b;padding:7px 8px;border-radius:6px;margin-bottom:8px;}
.cc-add-cart{width:100%;padding:13px;border-radius:8px;border:none;background:var(--cc-orange);color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;}
.cc-add-cart:hover{background:var(--cc-orange-deep);}
.cc-add-cart:disabled{opacity:.5;cursor:not-allowed;}
.cc-delivery{font-size:11.5px;color:var(--cc-muted);margin-top:10px;text-align:center;}

.cc-note{font-size:11.5px;color:var(--cc-muted);margin:16px 0 0;text-align:center;}
.cc-note + .cc-note{margin-top:6px;}

.cc-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--cc-ink);color:#fff;padding:12px 20px;border-radius:8px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.25);}
.cc-toast.cc-show{opacity:1;transform:translateX(-50%) translateY(0);}

/* Nasconde la tabella varianti nativa di WooCommerce: le nostre chip/swatch
   pilotano le stesse <select>, che restano funzionanti ma invisibili. */
.woocommerce div.product form.cart table.variations{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.woocommerce div.product form.cart table.variations .reset_variations{display:none !important;}