/* === TELASTAMPA CONFIGURATORE === */
.ts-config { max-width: 700px; margin: 0 auto; font-family: Arial, sans-serif; }
.ts-config * { box-sizing: border-box; }

.ts-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid #e8650a; }
.ts-tab { flex: 1; padding: 12px; text-align: center; font-size: 14px; font-weight: 600; cursor: pointer; background: #fff; border: 1px solid #ddd; border-bottom: none; color: #666; transition: all 0.15s; }
.ts-tab:first-child { border-radius: 8px 0 0 0; }
.ts-tab:last-child { border-radius: 0 8px 0 0; }
.ts-tab.active { background: #e8650a; color: #fff; border-color: #e8650a; }
.ts-tab:hover:not(.active) { background: #fff5f0; color: #e8650a; }

.ts-panel { background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 10px 10px; padding: 20px; display: none; }
.ts-panel.active { display: block; }

.ts-section { margin-bottom: 18px; }
.ts-section-title { font-size: 12px; font-weight: 700; color: #e8650a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }

/* Upload */
.ts-upload { border: 2px dashed #e8650a; border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; background: #fff9f6; transition: background 0.15s; }
.ts-upload:hover, .ts-upload.over { background: #fff0e8; }
.ts-upload .icon { font-size: 32px; margin-bottom: 6px; }
.ts-upload p { color: #555; font-size: 14px; }
.ts-upload small { color: #aaa; font-size: 12px; }

/* Formato pills */
.ts-formats { display: flex; gap: 6px; flex-wrap: wrap; }
.ts-fmt-pill { padding: 6px 12px; border: 1.5px solid #ddd; border-radius: 20px; font-size: 13px; cursor: pointer; background: #fff; color: #444; transition: all 0.15s; }
.ts-fmt-pill:hover { border-color: #e8650a; color: #e8650a; }
.ts-fmt-pill.active { background: #e8650a; color: #fff; border-color: #e8650a; }

/* Cornice (v40.4 - supporto immagini) */
.ts-cornice-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.ts-cornice-pill { flex: 1 1 80px; min-width: 80px; padding: 8px; border: 2px solid #ddd; border-radius: 8px; text-align: center; cursor: pointer; background: #fff; transition: all 0.15s; }
.ts-cornice-pill:hover { border-color: #e8650a; }
.ts-cornice-pill.active { border-color: #e8650a; background: #fff9f6; }
/* Swatch colore (default tondo) */
.ts-cornice-pill .swatch { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 5px; border: 1px solid #ccc; }
/* Swatch IMMAGINE (v40.4): più grande e quadrato */
.ts-cornice-pill .swatch.swatch-img { width: 64px; height: 64px; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid #ddd; }
/* Fallback per slug noti */
.ts-cornice-pill .swatch.bianca, .ts-cornice-pill .swatch.swatch-bianca { background: #fff; }
.ts-cornice-pill .swatch.nera, .ts-cornice-pill .swatch.swatch-nera { background: #111; border-color: #555; }
.ts-cornice-pill .swatch.nessuna, .ts-cornice-pill .swatch.swatch-nessuna { background: linear-gradient(135deg, #fff 45%, #ddd 45%, #ddd 55%, #fff 55%); border: 1px dashed #bbb; }
.ts-cornice-pill .swatch.legno, .ts-cornice-pill .swatch.swatch-legno { background: linear-gradient(135deg,#c8a26b 0%,#a0784a 50%,#c8a26b 100%); }
.ts-cornice-pill span { font-size: 12px; color: #555; font-weight: 600; display: block; margin-top: 4px; }

/* Filtri */
.ts-filtri { display: flex; gap: 8px; flex-wrap: wrap; }
.ts-filtro-btn { padding: 7px 13px; border: 1.5px solid #ddd; border-radius: 20px; font-size: 12px; cursor: pointer; background: #fff; color: #444; transition: all 0.15s; }
.ts-filtro-btn:hover { border-color: #e8650a; color: #e8650a; }
.ts-filtro-btn.active { background: #e8650a; color: #fff; border-color: #e8650a; }

/* Testo */
.ts-testo-row { display: flex; gap: 8px; margin-bottom: 8px; }
.ts-testo-row input[type=text] { flex: 1; padding: 8px 10px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 14px; outline: none; }
.ts-testo-row input[type=text]:focus { border-color: #e8650a; }
.ts-testo-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ts-testo-controls select { padding: 5px 8px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 13px; }
.ts-testo-controls input[type=range] { width: 80px; accent-color: #e8650a; }
.ts-testo-controls input[type=color] { width: 36px; height: 30px; padding: 2px; border: 1.5px solid #ddd; border-radius: 6px; cursor: pointer; }
.ts-testo-controls label { font-size: 12px; color: #888; }
.ts-testo-hint { font-size: 11px; color: #aaa; margin-top: 5px; }

/* Kit fissaggio */
.ts-kit-box { border: 1.5px solid #ddd; border-radius: 8px; overflow: hidden; }
.ts-kit-header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; transition: background 0.15s; }
.ts-kit-header:hover { background: #fff9f6; }
.ts-kit-header input[type=checkbox] { width: 18px; height: 18px; accent-color: #e8650a; cursor: pointer; flex-shrink: 0; }
.ts-kit-header-text { flex: 1; }
.ts-kit-header-text strong { font-size: 14px; color: #333; display: block; }
.ts-kit-header-text span { font-size: 12px; color: #888; }
.ts-kit-price { font-size: 15px; font-weight: 700; color: #e8650a; white-space: nowrap; }
.ts-kit-detail { display: none; padding: 12px 14px; border-top: 1px solid #eee; background: #fafafa; font-size: 13px; color: #555; line-height: 1.6; }
.ts-kit-detail.open { display: block; }
.ts-kit-detail ul { padding-left: 18px; margin-top: 6px; }
.ts-kit-detail ul li { margin-bottom: 3px; }

/* Num foto tazza */
.ts-num-btns { display: flex; gap: 10px; }
.ts-num-btn { flex: 1; padding: 12px; border: 2px solid #ddd; border-radius: 8px; text-align: center; cursor: pointer; font-size: 15px; font-weight: 600; background: #fff; color: #555; transition: all 0.15s; }
.ts-num-btn:hover { border-color: #e8650a; color: #e8650a; }
.ts-num-btn.active { background: #e8650a; color: #fff; border-color: #e8650a; }

/* Editor canvas */
.ts-editor { background: #222; border-radius: 8px; overflow: hidden; position: relative; user-select: none; touch-action: none; }
.ts-editor canvas { display: block; width: 100%; cursor: grab; touch-action: none; }
.ts-editor canvas.dragging { cursor: grabbing; }
.ts-editor-hint { font-size: 11px; color: #aaa; margin-top: 6px; text-align: center; }

/* Slots tazza */
.ts-slots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ts-slot-wrap { flex: 0 0 auto; }
.ts-slot { background: #222; border-radius: 6px; overflow: hidden; position: relative; cursor: pointer; touch-action: none; }
.ts-slot canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ts-slot-overlay { position: absolute; top:0;left:0;width:100%;height:100%; display:flex;flex-direction:column;align-items:center;justify-content:center; color:#aaa;font-size:12px;pointer-events:none; }
.ts-slot-overlay.hidden { display:none; }
.ts-slot-label { font-size:11px;color:#888;text-align:center;margin-top:4px; }

/* Zoom */
.ts-zoom-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ts-zoom-row label { font-size: 12px; color: #888; white-space: nowrap; }
.ts-zoom-row input[type=range] { flex: 1; accent-color: #e8650a; }
.ts-zoom-row span { font-size: 12px; color: #555; min-width: 38px; }
.ts-zoom-row button { font-size: 11px; padding: 3px 8px; border: 1px solid #ddd; border-radius: 4px; background: #fff; cursor: pointer; color: #555; }
.ts-zoom-row button:hover { border-color: #e8650a; color: #e8650a; }

/* Anteprima */
.ts-preview-box { display: none; margin-top: 16px; }
.ts-preview-box canvas { width: 100%; border-radius: 8px; border: 1px solid #eee; display: block; }
.ts-preview-label { font-size: 12px; color: #888; margin-top: 6px; text-align: center; }

/* [v40.19-fixed-r5 MOD-D] Anteprima 3D — dimensioni decenti
   Il JS init3DTela/init3DTazza calcola H = clientWidth * 0.65.
   Se il container è stretto (es. 60px) → anteprima 3D minuscola.
   SOLUZIONE: garantisco min-width così il JS calcola dimensioni decenti.
   NON forzo height direttamente (il JS la imposta lui). */
.ts-preview-3d {
  margin-top: 16px;
}
.ts-preview-3d > div[id^="ts-3d-"] {
  min-width: 320px;
  /* Background visibile mentre Three.js carica, evita "buco bianco" */
}

/* CTA */
.ts-cta { margin-top: 18px; }
.ts-btn-preview { width: 100%; padding: 13px; font-size: 15px; font-weight: 700; border: none; border-radius: 8px; background: #e8650a; color: #fff; cursor: pointer; transition: background 0.15s; }
.ts-btn-preview:hover { background: #c5540a; }
.ts-btn-preview:disabled { background: #ccc; cursor: not-allowed; }
.ts-note { font-size: 12px; color: #aaa; text-align: center; margin-top: 8px; }

.ts-confirm { display: none; background: #f0fff4; border: 1.5px solid #2e7d32; border-radius: 8px; padding: 14px 16px; margin-top: 14px; font-size: 14px; color: #2e7d32; text-align: center; }
.ts-confirm strong { display: block; font-size: 16px; margin-bottom: 4px; }
.ts-confirm p { margin: 6px 0 12px; }
.ts-btn-carrello { background: #2e7d32; color: #fff; border: none; border-radius: 8px; padding: 12px 24px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.ts-btn-carrello:hover { background: #1b5e20; }

/* Box prezzo dinamico */
.ts-prezzo-box { margin-bottom: 18px; }
.ts-prezzo-inner { display: flex; align-items: center; gap: 12px; background: #fff9f6; border: 1.5px solid #e8650a; border-radius: 8px; padding: 12px 16px; }
.ts-prezzo-label { font-size: 13px; color: #666; }
.ts-prezzo-val { font-size: 22px; font-weight: 700; color: #e8650a; margin-left: auto; }
.ts-prezzo-loading { font-size: 13px; color: #aaa; margin-left: auto; }

/* Suggerimento misura */
.ts-suggerimento { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; border: 1.5px solid #ddd; background: #f9f9f9; line-height: 1.5; }
.ts-suggerimento strong { color: #e8650a; }

/* Badge qualità sulle pills */
.ts-fmt-pill { position: relative; }
.ts-qualita-badge { pointer-events: none; }

/* Messaggio successo carrello */
.ts-successo { background: #f0fff4; border: 1.5px solid #2e7d32; border-radius: 10px; margin-top: 14px; overflow: hidden; }

/* Pulsanti salva bozza e condividi */
.ts-btn-bozza, .ts-btn-condividi {
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  border-radius: 8px; cursor: pointer; border: 1.5px solid;
  transition: all 0.15s;
}
.ts-btn-bozza {
  background: transparent; color: #e8650a; border-color: #e8650a;
}
.ts-btn-bozza:hover { background: #fff5f0; }
.ts-btn-condividi {
  background: transparent; color: #2e7d32; border-color: #2e7d32;
}
.ts-btn-condividi:hover { background: #f0fff4; }

/* ================================================================
   v40.5 — LAYOUT DESKTOP A 2 COLONNE (sopra 1024px)
   Su mobile/tablet: layout invariato (tutto in colonna).
   Su desktop: pannello diviso in 2 colonne con CSS Grid.
   Compatibilità garantita su tutti i browser (no :has()).
   ================================================================ */
@media (min-width: 1024px) {

  .ts-config {
    max-width: 900px;             /* [v40.19-fixed-r5 MOD-A] era 1280px, riduco a 900 per layout più compatto */
  }

  /* [IMPL-018] PARANOID: nuovo layout 2 colonne con sticky funzionante
     Architettura: il JS wrappa i figli del pannello in .ts-panel-left + .ts-panel-right
     - LEFT: scorre indipendente
     - RIGHT: sticky come unità (NO sticky sui singoli elementi figli)
     Il template HTML resta invariato, niente modifica struttura DOM originale. */
  .ts-panel.active {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
    padding: 24px 28px;
  }

  .ts-panel.active > .ts-panel-left {
    flex: 1 1 42%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ts-panel.active > .ts-panel-right {
    flex: 1 1 55%;
    min-width: 0;
    position: sticky;
    top: 16px;
    align-self: flex-start;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-right: 4px;
    padding-bottom: 40px;          /* [v40.19-fixed-r7] spazio in fondo per non tagliare bottoni */
  }

  /* [v40.79] DESKTOP: il riepilogo prezzo va in FONDO alla colonna destra,
     sotto i pulsanti "Aggiorna anteprima" e "Aggiungi al carrello".
     Uso 'order' (la colonna è flex-column): non tocco l'HTML, quindi su MOBILE
     il prezzo resta dov'è (dopo il Kit). Order alto = spinto in fondo. */
  .ts-panel.active > .ts-panel-right > #tela-prezzo-box {
    order: 100;
    margin-top: 4px;
  }

  /* [v40.19-fixed-r7] Quando il box .ts-confirm o .ts-successo è visibile,
     disattivo lo sticky della colonna DESTRA così tutta la pagina scorre
     normalmente e i bottoni in fondo non vengono tagliati.
     Class .ts-has-cta-visible aggiunta dal JS quando appare ts-confirm/successo. */
  .ts-panel-right.ts-has-cta-visible {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  /* Custom scrollbar per la colonna destra (sottile) */
  .ts-panel.active > .ts-panel-right::-webkit-scrollbar { width: 6px; }
  .ts-panel.active > .ts-panel-right::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
  .ts-panel.active > .ts-panel-right::-webkit-scrollbar-thumb:hover { background: #bbb; }

  /* Editor canvas più compatto a destra (non sfora viewport) */
  .ts-panel-right .ts-editor canvas {
    min-height: 320px;
    max-height: 480px;
    object-fit: contain;
  }

  /* Preview compatta */
  .ts-panel-right .ts-preview-box canvas {
    max-height: 420px;
    object-fit: contain;
  }

  /* Slots tazza più compatti (nell'editor a destra) */
  .ts-slot canvas {
    min-height: 160px;
  }

  /* Upload più compatto */
  .ts-upload {
    padding: 18px;
  }
  .ts-upload .icon {
    font-size: 28px;
  }
}

/* ================================================================
   v40.5 — Schermi MOLTO larghi (oltre 1400px)
   ================================================================ */
@media (min-width: 1400px) {
  .ts-config {
    max-width: 1000px;            /* [v40.19-fixed-r5 MOD-A] era 1400px, riduco a 1000 anche su monitor grandi */
  }
  .ts-panel.active {
    grid-template-columns: 1fr 1.4fr;
    column-gap: 36px;
  }
}

/* ================================================================
   [IMPL-008] CSS CUSCINO
   ================================================================ */
#panel-cuscino .ts-upload {
  border: 2px dashed #ddd;
  border-radius: 8px;
  background: #fafafa;
  text-align: center;
  transition: all 0.2s;
}
#panel-cuscino .ts-upload:hover {
  border-color: #e8650a;
  background: #fff5ec;
}

#cuscino-canvas-fronte, #cuscino-canvas-retro {
  border: 1px solid #eee;
  background: #f8f8f8;
  cursor: move;
  user-select: none;
  touch-action: none;
}

.ts-filtri .ts-filtro-pill {
  display: inline-block;
  padding: 6px 12px;
  border: 1.5px solid #ddd;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  transition: all 0.15s;
  user-select: none;
}
.ts-filtri .ts-filtro-pill:hover {
  border-color: #e8650a;
}
.ts-filtri .ts-filtro-pill.active {
  background: #e8650a;
  color: #fff;
  border-color: #e8650a;
}

/* [IMPL-018] Vecchio CSS cuscino RIMOSSO:
   sostituito dal sistema flex unico .ts-panel-left/.ts-panel-right (vedi @media sopra) */

/* Mobile: anteprima fronte+retro impilati se schermo troppo stretto */
@media (max-width: 480px) {
  #cuscino-anteprima-affiancata {
    grid-template-columns: 1fr !important;
  }
  #cuscino-slots {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   [IMPL-026] PARANOID — Selettore prodotto a pulsantone
   Sostituisce .ts-tabs vecchie con un button + menu dropdown
   ================================================================ */
.ts-product-selector {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 20px;
  font-family: inherit;
}

.ts-product-selector-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ts-product-selector-button {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #e8650a, #c5540a);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(232, 101, 10, 0.25);
  transition: all 0.18s;
  font-family: inherit;
}
.ts-product-selector-button:hover {
  background: linear-gradient(135deg, #f07320, #d05f10);
  box-shadow: 0 6px 16px rgba(232, 101, 10, 0.35);
  transform: translateY(-1px);
}
.ts-product-selector-button:active {
  transform: translateY(0);
}
.ts-product-selector-button:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.ts-product-selector-current {
  text-align: left;
  flex: 1;
}

.ts-product-selector-arrow {
  font-size: 14px;
  margin-left: 12px;
  transition: transform 0.2s;
}

.ts-product-selector-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 1000;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.ts-product-selector-menu.open {
  max-height: 600px;
  opacity: 1;
  pointer-events: auto;
}

.ts-product-selector-item {
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
  user-select: none;
}
.ts-product-selector-item:last-child {
  border-bottom: none;
}
.ts-product-selector-item:hover {
  background: #fff5ec;
}
.ts-product-selector-item.active {
  background: #fff5ec;
  font-weight: 600;
}
.ts-product-selector-item:focus-visible {
  outline: 2px solid #e8650a;
  outline-offset: -2px;
}

.ts-product-selector-icon {
  font-size: 26px;
  line-height: 1;
  flex: 0 0 32px;
  text-align: center;
}

.ts-product-selector-text {
  flex: 1;
  min-width: 0;
}

.ts-product-selector-name {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  line-height: 1.3;
}

.ts-product-selector-desc {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

.ts-product-selector-check {
  font-size: 18px;
  color: #2e7d32;
  font-weight: 700;
  opacity: 0;
  flex: 0 0 auto;
  transition: opacity 0.15s;
}
.ts-product-selector-item.active .ts-product-selector-check {
  opacity: 1;
}

/* Mobile: bottone più piccolo */
@media (max-width: 480px) {
  .ts-product-selector-button {
    padding: 12px 16px;
    font-size: 14px;
  }
  .ts-product-selector-icon {
    font-size: 22px;
    flex: 0 0 28px;
  }
  .ts-product-selector-name {
    font-size: 13px;
  }
}

/* Desktop: max-width più grande per stare in linea col configuratore */
@media (min-width: 1024px) {
  .ts-product-selector {
    max-width: 700px;
  }
}

/* Nasconde le vecchie .ts-tabs se per qualche motivo restano nel DOM */
.ts-config > .ts-tabs {
  display: none !important;
}

/* ================================================================
   [IMPL-028] CSS pannello Orologio
   ================================================================ */
#panel-orologio .ts-section-title {
  color: #e8650a;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #fff5ec;
}

.ts-orologio-card:hover {
  transform: translateY(-2px);
  border-color: #e8650a !important;
  box-shadow: 0 4px 12px rgba(232, 101, 10, 0.15);
}

.ts-orologio-upload-slot {
  transition: all 0.18s;
}
.ts-orologio-upload-slot:hover {
  border-color: #c5540a !important;
  background: #ffe8d6 !important;
  transform: translateY(-1px);
}

#orologio-canvas {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 6px;
  background: #fafafa;
}

/* [v40.19-fixed-r10 FIX-N5] Prezzo orologio: testo era invisibile.
   PROBLEMA: #orologio-prezzo-box aveva background verde + color:#fff,
   ma .ts-prezzo-inner DENTRO ha background:#fff9f6 → testo bianco
   risultava su sfondo crema = invisibile.
   SOLUZIONE: rimuovo background verde inutile da #orologio-prezzo-box.
   Lascio lo stile coerente con tela/cuscino (.ts-prezzo-inner): sfondo
   crema con bordo arancione. Forzo testo nero per leggibilità. */
#orologio-prezzo-box {
  /* Nessun background custom: eredita da .ts-prezzo-box (vuoto) */
  margin: 16px 0;
}
#orologio-prezzo-box .ts-prezzo-label {
  font-weight: 600;
  margin-right: 10px;
  color: #555;
}
#orologio-prezzo-val {
  color: #e8650a;            /* arancione brand, coerente con altri prezzi */
  font-size: 22px;
  font-weight: 700;
}

@media (min-width: 1024px) {
  /* Layout 2 colonne su desktop: modelli + zone a sinistra, anteprima a destra */
  #panel-orologio > .ts-panel-left {
    /* eredita da .ts-panel-left generale */
  }
  #panel-orologio > .ts-panel-right {
    /* eredita */
  }
}

/* [v40.63] Layout per-lato cuscino: ogni lato (fronte/retro) è una colonna
   con anteprima + filtri + testo. Affiancate su desktop, impilate su mobile. */
.ts-cuscino-lati {
  display: flex;
  flex-direction: column;   /* mobile: impilate (fronte sopra retro) */
  gap: 20px;
}
.ts-cuscino-lato {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px;
  background: #fafafa;
}
.ts-cuscino-lato-titolo {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e8650a;
}
@media (min-width: 768px) {
  .ts-cuscino-lati {
    flex-direction: row;    /* desktop/tablet: affiancate */
  }
  .ts-cuscino-lato {
    flex: 1;
    min-width: 0;
  }
}

/* [v40.66] Tasto "Applica testo" della tela */
.ts-btn-applica-testo {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px;
  background: #e8650a;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ts-btn-applica-testo:hover { background: #d15a08; }
.ts-btn-applica-testo:active { transform: translateY(1px); }

/* [v40.69] Barra zoom +/− sotto ogni slot tazza */
.ts-slot-zoom { display: flex; gap: 6px; justify-content: center; margin-top: 5px; }
.ts-slot-zoom-btn {
  width: 32px; height: 28px;
  border: 1px solid #ccc; border-radius: 5px;
  background: #fff; color: #333;
  font-size: 17px; font-weight: 700; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.ts-slot-zoom-btn:hover { background: #f0f0f0; border-color: #e8650a; color: #e8650a; }
.ts-slot-zoom-btn:active { transform: translateY(1px); }

/* [v40.84] Selettori a TASTI (categoria formato + prodotto) */
.ts-cat-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.ts-cat-btn {
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.ts-cat-btn:hover {
  border-color: #e8650a;
  color: #e8650a;
}
.ts-cat-btn.active {
  background: #e8650a;
  border-color: #e8650a;
  color: #fff;
  font-weight: 500;
}
.ts-cat-btn-ico {
  font-size: 18px;
  line-height: 1;
}
.ts-cat-btn-lbl {
  font-size: 13px;
}
@media (max-width: 600px) {
  .ts-cat-btn { padding: 10px 4px; }
  .ts-cat-btn-ico { font-size: 16px; }
  .ts-cat-btn-lbl { font-size: 12px; }
}

/* Selettore prodotto a tasti (Tela/Tazza/Cuscino) */
.ts-product-btns {
  display: flex;
  gap: 10px;
  margin: 0 auto 20px;
  max-width: 900px;
  padding: 0 12px;
}
.ts-product-btn {
  flex: 1;
  min-width: 0;
  padding: 16px 12px;
  border: 2px solid #ddd;
  border-radius: 10px;
  background: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.ts-product-btn:hover {
  border-color: #e8650a;
  color: #e8650a;
}
.ts-product-btn.active {
  background: #e8650a;
  border-color: #e8650a;
  color: #fff;
  font-weight: 500;
}
.ts-product-btn-ico {
  font-size: 22px;
  line-height: 1;
}
.ts-product-btn-lbl {
  font-size: 14px;
}
.ts-product-btn-desc {
  display: block;
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
}
@media (max-width: 600px) {
  .ts-product-btns { gap: 6px; padding: 0 8px; }
  .ts-product-btn {
    flex-direction: column;
    gap: 4px;
    padding: 10px 4px;
    font-size: 12px;
  }
  .ts-product-btn-ico { font-size: 22px; }
  .ts-product-btn-lbl { font-size: 12px; }
  .ts-product-btn-desc { display: none; } /* su mobile abbrevio */
}