/* Scheda prodotto arte — replica del prototipo. Estetica in arte-stile.css. */

.ta-scheda-pagina{font-family:var(--arte-font-ui);color:var(--arte-testo);font-size:15px;
                  line-height:1.5;max-width:1180px;margin:0 auto;padding:26px 18px 60px;
                  background:#fff}
.ta-scheda-pagina *{box-sizing:border-box}
.ta-scheda-pagina button{font-family:inherit;cursor:pointer}

/* due colonne come il prototipo; impilata sotto i 900px.
   minmax(0,..) + min-width:0: senza, un'immagine grande sfonda la griglia */
.ta-scheda2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:start}
.ta-scheda2 > div{min-width:0}

/* desktop: entrambe le colonne sono sticky — quella piu' corta resta
   in vista mentre l'altra scorre (carrello o anteprima, sempre visibili) */
@media(min-width:901px){
	.ta-sx,.ta-dx{position:sticky;top:110px}
}

/* telefono: impilata, e l'ANTEPRIMA resta fissa in alto (compatta)
   mentre sotto scorrono misure, cornici e carrello */
@media(max-width:900px){
	.ta-scheda2{display:block}
	.ta-sx{position:sticky;top:0;z-index:30;background:#fff;
	       padding:8px 0 10px;margin:0 0 14px;
	       box-shadow:0 10px 18px -12px rgba(0,0,0,.25)}
	.ta-viste-tabs{margin-bottom:8px}
	.ta-vtab{padding:7px 10px;font-size:12px}
	.ta-vista-box{height:32vh;min-height:170px;padding:8px}
	/* il tetto va in vh, NON in %: una percentuale si misura sul padre
	   (.ta-cornice, altezza automatica) e quindi non veniva applicata —
	   le opere verticali sbordavano e il riquadro le tagliava.
	   I 30px tolti sono i bordi del riquadro piu' quelli della cornice.
	   ⚠️ Solo quadro e stanza: l'immagine dello ZOOM la dimensiona il
	   copione in pixel, e un "auto !important" qui la rimpicciolirebbe. */
	/* il terzo selettore e' la vista "Come arriva": li' il canvas e' figlio
	   diretto del riquadro, quindi le due regole sopra non lo toccavano e
	   sulle opere quadrate sbordava */
	.ta-vista-box > .ta-cornice canvas,.ta-vista-box > .ta-cornice img,
	.ta-palco canvas,.ta-vista-box > canvas{
	    max-height:calc(32vh - 30px) !important;
	    width:auto !important;height:auto !important;max-width:100% !important}
	.ta-cornice{padding:6px}
	/* due classi, non una: la regola generale .ta-zoomer sta piu' in basso
	   nel foglio e con pari peso vincerebbe lei, lasciando la finestra
	   alta 420px dentro un riquadro da 32vh (quindi tagliata) */
	.ta-vista-box .ta-zoomer{height:100%}
	.ta-vista-did{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
	              overflow:hidden;font-size:11.5px;margin-top:6px}
}
/* SBLOCCO STICKY — il tema chiude html/body in overflow:hidden, che
   disattiva position:sticky in tutta la pagina. Su queste pagine (il
   CSS carica SOLO qui) si passa a "clip": taglia comunque gli sbordi
   laterali del tema (menu fuori schermo) ma non uccide lo sticky. */
html{overflow-x:clip !important;overflow-y:visible !important}
body{overflow-x:clip !important;overflow-y:visible !important}
.ta-scheda-pagina{overflow-x:visible}

/* il tema flette i form del carrello e stampa un titolo suo sopra la
   scheda: qui comandiamo noi (questo CSS carica SOLO sulle pagine arte) */
.ta-compra-form{display:block !important;width:100%}
#Subheader{display:none !important}

/* torna alla galleria */
.ta-scheda-pagina .ta-torna,
.ta-scheda-pagina .ta-torna:hover{display:inline-block;margin:0 0 16px;font-size:13.5px;
    font-weight:500;color:var(--arte-accento) !important;text-decoration:none !important;
    border:1px solid var(--arte-bordo);border-radius:var(--arte-raggio);padding:8px 14px;
    background:#fff;transition:border-color .2s}
.ta-scheda-pagina .ta-torna:hover{border-color:var(--arte-accento)}

/* ---------- colonna del quadro ---------- */
/* schede della vista: stessa veste dei bottoni d'acquisto (squadrati, nero) */
.ta-viste-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ta-vtab{border:1px solid var(--arte-bordo);background:#fff;border-radius:3px;
         padding:10px 15px;font:500 13.5px var(--arte-font-ui);color:var(--arte-testo);
         transition:border-color .15s,color .15s,background .15s}
.ta-vtab:hover{border-color:#8d8d8d}
.ta-vtab.ta-von{background:var(--arte-testo);border-color:var(--arte-testo);color:#fff}

.ta-vista-box{background:var(--arte-fondo-quadro);border:1px solid var(--arte-bordo);
              border-radius:var(--arte-raggio);display:flex;align-items:center;
              justify-content:center;min-height:300px;padding:20px;overflow:hidden}
.ta-vista-box canvas,.ta-vista-box img{max-width:100%;height:auto;display:block}
.ta-cornice{display:block;background:#fff;padding:13px;border:1px solid #e8e8e8;
            box-shadow:0 10px 30px rgba(40,50,60,.18);max-width:100%}
/* Tetto d'altezza per il quadro mostrato SENZA zoom (immagine di attesa):
   le opere verticali (180 su 619) sforavano sotto lo schermo e sembravano
   tagliate. Dentro .ta-zoomer NON si applica: li' le misure le calcola il
   copione in pixel, e un "auto" qui rimpicciolirebbe il quadro. */
.ta-vista-box > .ta-cornice img,
.ta-vista-box > .ta-cornice canvas{max-height:60vh;max-width:100%;width:auto;height:auto}
/* palco del salotto: effetto Ken Burns — la "telecamera" si avvicina
   piano e scivola sulla stanza, avanti e indietro, senza fine.
   Il canvas e' 1600px disegnato in ~450: la risoluzione avanza, quindi
   l'ingrandimento non sgrana. Il riquadro taglia gli sbordi. */
.ta-palco{width:100%;display:flex;justify-content:center;overflow:hidden;
          border-radius:calc(var(--arte-raggio) - 2px)}
/* velocita' COSTANTE (linear) e non "ease-in-out": con la curva morbida
   il movimento parte da fermo e nei primi 3 secondi cresce meno di un
   pixel — a occhio sembra rotto. Cosi' invece si vede subito. */
.ta-palco canvas{will-change:transform;
                 animation:ta-kenburns 5s linear infinite alternate}
@keyframes ta-kenburns{
	from{transform:scale(1) translate(0,0)}
	to  {transform:scale(1.14) translate(-2.5%,1.5%)}
}

/* la finestra del quadro: si vede intero e si ingrandisce sotto il puntatore */
.ta-zoomer{position:relative;overflow:hidden;width:100%;height:min(56vh,420px);
           cursor:zoom-in;touch-action:none;-webkit-user-select:none;user-select:none;
           border-radius:calc(var(--arte-raggio) - 2px);background:var(--arte-fondo-quadro)}
.ta-zoomer img{position:absolute;max-width:none !important;will-change:transform}
/* la cornice bianca del quadro: la posiziona e la ingrandisce il copione */
.ta-zoomer > .ta-cornice{position:absolute;will-change:transform;max-width:none;
                         box-shadow:0 6px 18px rgba(40,50,60,.16)}
.ta-zoomer > .ta-cornice canvas{display:block;max-width:none !important;max-height:none !important}

.ta-vista-did{font-size:12.5px;color:var(--arte-testo-tenue);margin-top:10px;line-height:1.5}
.ta-vista-did b{color:var(--arte-testo)}
/* riga dei salotti: sempre visibile per intero, anche sul telefono */
/* una riga sola: con le etichette lunghe i tre bottoni andavano a capo
   e mangiavano mezzo schermo. Se lo spazio non basta, scorrono. */
.ta-vista-stanze{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;
                 scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ta-vista-stanze::-webkit-scrollbar{display:none}
.ta-vista-stanze:not(:empty){margin:0 0 10px}
.ta-vst{flex:0 0 auto;border:1px solid var(--arte-bordo);background:#fff;
        border-radius:999px;padding:5px 12px;font-size:11.5px;white-space:nowrap;color:var(--arte-testo);
        transition:border-color .15s,background .15s}
.ta-vst:hover{border-color:var(--arte-accento)}
.ta-vst.ta-von{background:var(--arte-accento);border-color:var(--arte-accento);color:#fff}

/* ---------- colonna dell'acquisto ---------- */
.ta-occhiello{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
              color:var(--arte-testo-tenue);margin-bottom:8px}
.ta-scheda-pagina h1.ta-titolo{font-family:var(--arte-font-ui);font-weight:700;
    font-size:38px;line-height:1.08;color:var(--arte-testo);margin:0 0 5px;text-transform:none;
    letter-spacing:-.02em;text-align:left}
.ta-autore{font-size:15px;color:var(--arte-testo-tenue);font-weight:500}
.ta-meta{color:var(--arte-testo-tenue);font-size:13px;margin-top:5px}

/* il prezzo in evidenza, come nei negozi: si legge prima di scegliere */
.ta-prezzo{font-size:28px;font-weight:700;margin:16px 0 2px;letter-spacing:-.01em}
.ta-prezzo-nota{font-size:12.5px;color:var(--arte-testo-tenue);margin-bottom:20px}

.ta-sez{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
        color:var(--arte-testo);margin:20px 0 9px}
.ta-sez i{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;
          color:var(--arte-testo-tenue);margin-left:6px}
/* l'eco della scelta ("Dimensioni: 49×49") porta con se' i due punti */
#ta-eco-sup,#ta-eco-mis,#ta-eco-cor{margin-left:0}
.ta-sotto-sez{font-size:12.5px;color:var(--arte-testo-tenue);margin:9px 0 4px}

/* bottoni squadrati in riga: supporto e misure */
.ta-righe{display:flex;flex-wrap:wrap;gap:8px}
.ta-bt{position:relative;border:1px solid var(--arte-bordo);background:#fff;border-radius:3px;
       padding:11px 15px;font:500 14px var(--arte-font-ui);color:var(--arte-testo);
       cursor:pointer;user-select:none;transition:border-color .15s,background .15s,color .15s}
.ta-bt:hover{border-color:#8d8d8d}
.ta-bt input{position:absolute;opacity:0;pointer-events:none}
.ta-bt.ta-on{background:var(--arte-testo);border-color:var(--arte-testo);color:#fff}
.ta-bt-pz{margin-left:7px;font-weight:600;opacity:.72;font-size:13px}
.ta-sup-nota{font-size:12.5px;color:var(--arte-testo-tenue);margin:9px 0 0;line-height:1.5}

/* scelta del supporto: tela o poster, stessa veste delle misure */
.ta-supporti{display:flex;flex-direction:column;gap:9px;margin:0 0 4px}
.ta-scard{display:flex;align-items:center;gap:12px;border:1.5px solid var(--arte-bordo);
          border-radius:calc(var(--arte-raggio) * 2);padding:13px 16px;
          background:var(--arte-fondo-scheda);cursor:pointer;
          transition:border-color .15s,background .15s}
.ta-scard.ta-on{border-color:var(--arte-accento);background:var(--arte-accento-fondo);
                box-shadow:inset 0 0 0 1px var(--arte-accento)}
.ta-scard input{position:absolute;opacity:0;pointer-events:none}
.ta-scard.ta-on .ta-pall{border-color:var(--arte-accento)}
.ta-scard.ta-on .ta-pall::after{content:'';position:absolute;inset:4px;border-radius:50%;
                                background:var(--arte-accento)}
.ta-scard .ta-card-pz{font-size:15px;color:var(--arte-testo-tenue)}
.ta-scard.ta-on .ta-card-pz{color:var(--arte-accento)}

/* misure a schede tappabili (come il mockup approvato) */
.ta-card{display:flex;align-items:center;gap:12px;border:1.5px solid var(--arte-bordo);
         border-radius:calc(var(--arte-raggio) * 2);padding:14px 16px;margin:0 0 9px;
         background:var(--arte-fondo-scheda);cursor:pointer;
         transition:border-color .15s,background .15s}
.ta-card.ta-on{border-color:var(--arte-accento);background:var(--arte-accento-fondo);
               box-shadow:inset 0 0 0 1px var(--arte-accento)}
.ta-card input{position:absolute;opacity:0;pointer-events:none}
.ta-pall{width:20px;height:20px;border-radius:50%;border:2px solid var(--arte-bordo);
         flex:0 0 auto;position:relative}
.ta-card.ta-on .ta-pall{border-color:var(--arte-accento)}
.ta-card.ta-on .ta-pall::after{content:'';position:absolute;inset:4px;border-radius:50%;
                               background:var(--arte-accento)}
.ta-card-tx{flex:1;min-width:0}
.ta-card-tx b{font-weight:600;font-size:15px;color:var(--arte-testo)}
.ta-card-cm{display:block;font-size:12.5px;color:var(--arte-testo-tenue)}
.ta-card-pz{margin-left:auto;white-space:nowrap;font-weight:700;font-size:17px;
            color:var(--arte-testo);font-variant-numeric:tabular-nums}
.ta-card.ta-on .ta-card-pz{color:var(--arte-accento)}

/* la nota che spiega perche' su carta mancano le misure grandi */
.ta-nota-misure{font-size:12.5px;line-height:1.5;color:var(--arte-testo-tenue);
                background:var(--arte-accento-fondo);border-radius:var(--arte-raggio);
                padding:9px 12px;margin:2px 0 4px}

/* cornici: campioni d'angolo, come i cataloghi dei corniciai */
.ta-cornici{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 6px}
.ta-sw{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
       cursor:pointer;user-select:none}
.ta-sw input{position:absolute;opacity:0;pointer-events:none}
.ta-sw-img{width:58px;height:58px;display:block;border:1px solid var(--arte-bordo);
           border-radius:3px;transition:border-color .15s,box-shadow .15s}
.ta-sw:hover .ta-sw-img{border-color:#8d8d8d}
.ta-sw.ta-on .ta-sw-img{border:2px solid var(--arte-testo);box-shadow:0 0 0 1px var(--arte-testo)}
.ta-sw-pz{font-size:11.5px;color:var(--arte-testo-tenue);font-variant-numeric:tabular-nums}
.ta-sw.ta-on .ta-sw-pz{color:var(--arte-testo);font-weight:600}

.ta-compra{width:100%;margin-top:18px;padding:18px;background:var(--arte-testo);color:#fff;
           border:none;border-radius:4px;letter-spacing:.03em;
           font:700 15px var(--arte-font-ui);transition:background .2s}
.ta-compra:hover{background:#000}
.ta-consegna{margin-top:12px;text-align:center;font-size:13.5px;font-weight:600;
             color:var(--arte-testo)}
/* i metodi di pagamento accettati: rassicurano prima dell'acquisto */
.ta-pagamenti{margin-top:14px;text-align:center}
.ta-pag-riga{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
             color:var(--arte-testo-tenue);margin-bottom:7px}
.ta-pag-icone{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.ta-pag{display:block;width:44px;height:28px;line-height:0}
.ta-pag svg{width:100%;height:100%;display:block}

.ta-nota{border-top:1px solid var(--arte-bordo);padding-top:14px;margin-top:20px;
         font-size:12.5px;color:var(--arte-testo-tenue);line-height:1.6}

/* La descrizione dell'opera: e' testo da leggere, non una nota a pie' di
   pagina, quindi respira di piu' ed e' piu' scura della nota. */
.ta-descrizione{border-top:1px solid var(--arte-bordo);padding-top:16px;margin-top:22px;
         font-size:13.5px;color:var(--arte-testo);line-height:1.7}
.ta-descrizione p{margin:0 0 11px}
.ta-descrizione p:last-child{margin-bottom:0;color:var(--arte-testo-tenue);font-size:12.5px}

/* ---------- telefono: come il mockup, bottone fisso in basso ---------- */
@media(max-width:640px){
	.ta-scheda-pagina{padding:14px 14px 110px}
	.ta-scheda-pagina h1.ta-titolo{font-size:27px}
	.ta-vista-box{min-height:200px;padding:12px}
	.ta-cornice{padding:9px}
	.ta-cornice img{max-height:46vh}
	.ta-compra{position:fixed;left:10px;right:10px;bottom:10px;width:auto;z-index:80;
	           box-shadow:0 8px 26px rgba(0,0,0,.25)}
}
/* chi ha chiesto meno animazioni al suo dispositivo: tutto fermo */
@media (prefers-reduced-motion: reduce){
	.ta-scheda-pagina *{transition:none !important}
	.ta-palco canvas{animation:none !important}
}