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

/* Larghezza come il resto del plugin (--arte-larghezza, galleria compresa):
   stesso schema di padding 20/30/40 cosi' la pagina prodotto e la galleria
   respirano allo stesso modo. */
/* box-sizing:border-box qui, non solo sui figli (".ta-scheda-pagina *"
   piu' sotto non basta: e' un selettore di DISCENDENTI e non tocca
   l'elemento stesso) — altrimenti il padding si somma al max-width e a
   1600px il contenitore renderebbe 1680px, disallineato dalla galleria
   dove --arte-larghezza e' gia' la larghezza ESTERNA totale. */
/* il margine sotto tiene conto dell'altezza vera della barra d'acquisto
   sticky (compreso il suo grande padding inferiore, vedi piu' sotto),
   cosi' l'ultimo contenuto della pagina (descrizione, pagamenti) non le
   resta nascosto dietro quando la barra compare. */
.ta-scheda-pagina{box-sizing:border-box;font-family:var(--arte-font-ui);color:var(--arte-testo);
                  font-size:15px;line-height:1.5;max-width:var(--arte-larghezza);margin:0 auto;
                  padding:26px 20px 150px;background:#fff}
@media(min-width:700px){.ta-scheda-pagina{padding:30px 30px 150px}}
@media(min-width:1200px){.ta-scheda-pagina{padding:36px 40px 160px}}
.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: NON piu' 50/50 — a 1600px una foto larga quanto il carrello
   sembra sproporzionata. La colonna della foto resta contenuta (max 560px,
   la foto ci si centra dentro) e le due colonne si accostano al centro
   invece di stirarsi fino ai bordi. Entrambe restano sticky, come prima. */
@media(min-width:901px){
	.ta-scheda2{grid-template-columns:minmax(0,560px) minmax(0,600px);
	            justify-content:center;gap:64px}
	.ta-sx,.ta-dx{position:sticky;top:110px}
}

/* telefono e tablet stretto: impilata. L'anteprima ora scorre CON la
   pagina (non piu' fissa in alto): su un telefono un riquadro enorme
   sempre visibile mangiava troppo spazio di scorrimento. Il bottone
   d'acquisto sticky in basso (.ta-barra-acquisto) copre il suo posto. */
@media(max-width:900px){
	.ta-scheda2{display:block}
	.ta-sx{margin:0 0 22px}
	.ta-viste-tabs{margin-bottom:8px}
	.ta-vtab{padding:7px 10px;font-size:12px}
	/* la foto resta contenuta e centrata anche qui, non si stira a tutta
	   larghezza su un tablet stretto */
	.ta-vista-box{max-width:560px;margin:0 auto;min-height:260px;padding:14px}
	.ta-vista-box > .ta-cornice canvas,.ta-vista-box > .ta-cornice img,
	.ta-palco canvas,.ta-vista-box > canvas{
	    max-height:56vh !important;
	    width:auto !important;height:auto !important;max-width:100% !important}
	.ta-cornice{padding:8px}
	.ta-vista-box .ta-zoomer{height:min(50vh,420px)}
	.ta-vista-did{font-size:12px;margin-top:8px}
}
/* 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: niente piu' bottone fisso qui — vedi
   .ta-barra-acquisto piu' sotto, che sostituisce questa vecchia regola
   con una barra completa (opzioni + prezzo + acquista) ---------- */
@media(max-width:640px){
	.ta-scheda-pagina{padding:14px 14px 150px}
	.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}
}
/* 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}
}

/* ============================================================
   BARRA D'ACQUISTO STICKY — compare quando il bottone vero
   ("Aggiungi al carrello", nel modulo) esce dallo schermo, cosi'
   l'azione d'acquisto resta sempre a un tocco di distanza.
   Desktop/tablet: foto piccola + titolo + opzioni + prezzo + bottone.
   Telefono: solo opzioni + prezzo + bottone (niente foto/titolo,
   per lasciare spazio alle scelte — il prezzo pero' resta ovunque). */
/* padding sotto molto piu' alto del solito (70px, non un refuso): sul
   sito vero, in basso a destra/sinistra, ci sono ALTRI due elementi fissi
   di plugin diversi dal nostro (switcher lingua, pulsante WhatsApp) che
   arrivano fino al bordo dello schermo — senza questo respiro sotto,
   finiscono sopra ai nostri controlli (misurato dal vivo). Il contenuto
   della barra (riga singola, senza altezza propria) risale cosi' sopra
   quella zona invece di restarci dentro. */
.ta-barra-acquisto{position:fixed;left:0;right:0;bottom:0;z-index:90;
	display:flex;align-items:center;gap:14px;background:#fff;
	border-top:1px solid var(--arte-bordo);padding:10px 20px 70px;
	box-shadow:0 -8px 24px rgba(0,0,0,.10);
	transform:translateY(110%);transition:transform .25s ease}
.ta-barra-acquisto.ta-mostra{transform:translateY(0)}

.ta-ba-info{display:flex;align-items:center;gap:10px;min-width:0;flex:0 0 auto}
.ta-ba-foto{width:44px;height:44px;object-fit:cover;border-radius:4px;
	border:1px solid var(--arte-bordo);flex:0 0 auto;background:var(--arte-fondo-quadro)}
.ta-ba-testo{min-width:0}
.ta-ba-titolo{font-size:13px;font-weight:600;color:var(--arte-testo);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.ta-ba-autore{font-size:11.5px;color:var(--arte-testo-tenue);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}

.ta-ba-opzioni{display:flex;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;
	scrollbar-width:none}
.ta-ba-opzioni::-webkit-scrollbar{display:none}
.ta-ba-sel{border:1px solid var(--arte-bordo);border-radius:3px;background:#fff;
	font:500 12.5px var(--arte-font-ui);color:var(--arte-testo);
	padding:8px 9px;flex:0 0 auto;cursor:pointer;max-width:150px}

.ta-ba-azione{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
.ta-ba-prezzo{font-size:16px;font-weight:700;color:var(--arte-testo);white-space:nowrap}
.ta-ba-compra{border:none;border-radius:4px;background:var(--arte-testo);color:#fff;
	font:700 13px var(--arte-font-ui);padding:11px 18px;white-space:nowrap;
	transition:background .2s}
.ta-ba-compra:hover{background:#000}

/* niente foto e titolo da telefono: le opzioni hanno bisogno dello spazio.
   Da qui in giu' la barra e' su DUE righe, non una sola: in riga unica su
   uno schermo stretto le tre schede finivano tutte spinte contro il
   prezzo/bottone, alcune restavano leggibili solo scorrendo di lato (poco
   visibili, facile non accorgersene). Ora: riga 1 = le tre schede (tutta
   la larghezza, si dividono lo spazio); riga 2 = prezzo a sinistra e
   bottone a destra, sempre entrambi interi e mai schiacciati. */
@media(max-width:767px){
	.ta-ba-info{display:none}
	.ta-barra-acquisto{flex-wrap:wrap;row-gap:9px;padding:10px 14px 55px}
	.ta-ba-opzioni{flex:1 1 100%;gap:6px}
	.ta-ba-sel{font-size:12px;padding:7px;max-width:none;flex:1 1 0}
	/* prezzo e bottone restano vicini, ancorati a DESTRA (non sparsi ai
	   due lati): a sinistra, in basso, su questo sito c'e' il pulsante
	   WhatsApp di un altro plugin — un prezzo li' sotto ci finirebbe
	   sopra (preso dal vivo, v1.2.1) */
	.ta-ba-azione{flex:1 1 100%;margin-left:0;justify-content:flex-end}
	.ta-ba-prezzo{font-size:14.5px}
	.ta-ba-compra{padding:10px 18px;font-size:12.5px}
}
@media (prefers-reduced-motion: reduce){.ta-barra-acquisto{transition:none !important}}

/* Nota: il pulsantino WhatsApp/chat (plugin "Chaty", in basso a
   sinistra) puo' sovrapporsi all'angolo della barra. Non e' una
   regressione: succedeva gia' col vecchio bottone fisso mobile
   (.ta-compra in posizione fixed, stessa zona). Non risolto qui: la sua
   posizione risulta governata da qualcosa che un normale override CSS
   (anche inline !important, verificato dal vivo) non riesce a battere —
   da approfondire con l'agenzia se diventa un problema reale. */