/* Riga chiusa: larga come «AGGIUNGI ORA» (85% dei dettagli, come il banner tasso zero) */
html body .ac-prev-riga{display:flex!important;align-items:center;justify-content:space-between;gap:14px;box-sizing:border-box;width:85%!important;align-self:center;margin:36px auto 0!important;padding:clamp(12px,calc(12px + 3*(100vw - 1920px)/480),15px) clamp(16px,calc(16px + 4*(100vw - 1920px)/480),20px)!important;background:#fff!important;color:#000!important;border:1px solid #000!important;border-radius:0!important;box-shadow:none!important;font-family:'Lausanne',sans-serif!important;font-weight:400!important;font-size:15px!important;line-height:1.3!important;letter-spacing:0!important;text-transform:none!important;text-align:left!important;cursor:pointer;min-height:0!important;height:auto!important;-webkit-appearance:none;appearance:none;transition:background-color .18s ease,color .18s ease}
/* come .ac-pt-actions: 85% ma mai sotto 250 px (fra 1025 e ~1150 vale il minimo) */
html body .ac-prev-riga{min-width:250px!important}
html body .ac-prev-riga[hidden]{display:none!important}
html body .ac-prev-riga b{font-family:'Delight',sans-serif;font-weight:700}
/* freccia a destra e niente effetto al passaggio del mouse, come il banner tasso zero (13/10); la freccia a 16px dal
   bordo esterno come nel banner (rientro destro meno il filo da 1px) */
html body .ac-prev-riga-freccia{flex:0 0 auto;width:8px;height:13px}
html body button.ac-prev-riga{padding-right:calc(clamp(16px,calc(16px + 4*(100vw - 1920px)/480),20px) - 1px)!important}
html body .ac-prev-riga:focus-visible{outline:2px solid #C35226;outline-offset:2px}
html body .ac-prev-riga ~ .ac-pt-actions{margin-top:20px!important}
@media (min-width:1921px){html body .ac-prev-riga{margin-top:clamp(36px,calc(36px + 12*(100vw - 1920px)/480),48px)!important}html body .ac-prev-riga ~ .ac-pt-actions{margin-top:clamp(20px,calc(20px + 6*(100vw - 1920px)/480),26px)!important}}
@media (max-width:1600px){html body .ac-prev-riga{margin-top:30px!important}}
@media (max-width:1440px){html body .ac-prev-riga{margin-top:26px!important}html body .ac-prev-riga ~ .ac-pt-actions{margin-top:16px!important}}
@media (max-width:1200px){html body .ac-prev-riga{margin-top:22px!important}}
@media (min-width:1025px) and (max-width:1920px){html body .ac-prev-riga{font-size:clamp(12px,calc(12px + 3*(100vw - 1024px)/896),15px)!important}}
@media (min-width:1921px){html body .ac-prev-riga{font-size:clamp(15px,calc(15px + 5*(100vw - 1920px)/480),20px)!important}}
@media (max-width:1024px){html body .ac-prev-riga{width:100%!important;align-self:stretch!important;margin:20px 0 0!important;padding:13px 16px!important}html body .ac-prev-riga ~ .ac-pt-actions{margin-top:20px!important}}

/* Banner tasso zero cliccabile: stesse misure/posizione del banner (regole .ac-pt-promo-banner), qui
   solo il comportamento da pulsante. Il <button> non si allarga da solo come il <div>: su pc la
   larghezza si ricava da left/right del banner (7,5% + 34px per lato). */
html body .ac-pt-promo-banner.ac-prev-banner{display:block;box-sizing:border-box;border:1px solid #000!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;color:#000!important;font-family:'Delight',sans-serif!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.5px!important;line-height:1.2!important;text-align:center!important;min-height:0!important;height:auto!important;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
@media (min-width:1025px){html body .ac-pt-promo-banner.ac-prev-banner{width:calc(85% - 68px)!important}}
/* freccia a destra, sul rientro del banner (Matteo 13/10: «spostata a destra, vicino al margine»; tratto provato a 1,5
   e rimesso a 2: «mettila 0.5px più spessa»); il testo
   resta centrato: rientro uguale ai due lati, largo quanto serve per non toccare la freccia. A destra 16px, il rientro del
   banner (era 13: «metti leggermente più padding right alla freccia»); con più rientro a 1440 il testo andrebbe a capo */
html body .ac-prev-banner-punta{position:absolute;display:block;width:8px;height:13px;margin:-6.5px 0 0;top:50%;right:calc(clamp(16px,calc(16px + 4*(100vw - 1920px)/480),20px) - 1px)}
html body.ac-product-test-page .ac-pt-promo-banner.ac-prev-banner{padding-left:calc(clamp(16px,calc(16px + 4*(100vw - 1920px)/480),20px) + 12px)!important;padding-right:calc(clamp(16px,calc(16px + 4*(100vw - 1920px)/480),20px) + 12px)!important;padding-top:calc(clamp(11px,calc(11px + 3*(100vw - 1920px)/480),14px) - 1px)!important;padding-bottom:calc(clamp(11px,calc(11px + 3*(100vw - 1920px)/480),14px) - 1px)!important}
@media (max-width:1024px){html body.ac-product-test-page .ac-pt-promo-banner.ac-prev-banner{position:relative!important}}
/* punto con più aria (13/10); il rientro sopra è 2px più stretto per fargli posto: a 1440 il tasso zero resta su una riga */
html body .ac-prev-banner .ac-prev-punto{margin:0 .2em}
/* banner-link delle campagne promo (Protocollo Promo, pc e copia del telefono) come i banner del preventivatore
   (Matteo 13/10: «gli altri sì cambiali»): bianco, filo nero da 1px, scritta nera, freccia a destra, niente effetto al
   passaggio del mouse. functions.php stampa questo CSS anche accanto al banner-link */
html body.ac-product-test-page a.ac-pt-promo-banner-link{background:#fff!important;color:#000!important;border:1px solid #000!important;box-sizing:border-box;padding:calc(clamp(11px,calc(11px + 3*(100vw - 1920px)/480),14px) - 1px) calc(clamp(16px,calc(16px + 4*(100vw - 1920px)/480),20px) + 12px)!important;opacity:1!important}
html body.ac-product-test-page a.ac-pt-promo-banner-link:hover{opacity:1!important;color:#000!important}
html body.ac-product-test-page a.ac-pt-promo-banner-link::after{content:'';position:absolute;top:50%;right:calc(clamp(16px,calc(16px + 4*(100vw - 1920px)/480),20px) - 1px);width:8px;height:13px;margin-top:-6.5px;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1 1l5.5 5.5L1 12' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/8px 13px}
@media (max-width:1024px){html body.ac-product-test-page a.ac-pt-promo-banner-link{position:relative!important}}
/* fra 1025 e 1210 i banner sono stretti: niente freccia, e la scritta prende anche il suo spazio (rientro normale del
   banner, 16px). Matteo 14/10: «da 1025 a 1210 toglierei la freccia rivolta verso destra dentro al pulsante» */
@media (min-width:1025px) and (max-width:1210px){
html body .ac-prev-banner-punta{display:none}
html body.ac-product-test-page .ac-pt-promo-banner.ac-prev-banner{padding-left:16px!important;padding-right:16px!important}
html body.ac-product-test-page a.ac-pt-promo-banner-link::after{display:none}
html body.ac-product-test-page a.ac-pt-promo-banner-link{padding-left:16px!important;padding-right:16px!important}
}
html body .ac-pt-promo-banner.ac-prev-banner:focus-visible{outline:2px solid #C35226;outline-offset:2px}
/* se il testo va a capo (pc stretto, prezzi lunghi) le etichette sotto scendono, come per i banner
   delle campagne promo */
/* 13/10: anche su tre righe («Promozione · 3 rate da … senza interessi» fra 1025 e 1440): 14px in più per ogni riga in
   più, contate dal JS in --ac-prev-righe-in-piu (con due righe le misure sono quelle di prima: 112→142 e 220) */
@media (min-width:1025px){html body.ac-product-test-page .ac-pt-details.ac-pt-has-banner.ac-prev-banner-a-capo .ac-pt-features{top:calc(clamp(98px,calc(98px + 30*(100vw - 1920px)/480),128px) + 14px*var(--ac-prev-righe-in-piu,1))!important}html body.ac-product-test-page .ac-pt-details.ac-pt-has-banner.ac-prev-banner-a-capo{padding-top:max(17vh,calc(206px + 14px*var(--ac-prev-righe-in-piu,1)))!important}}

/* [14/10/2026] Le 3 rate: fascia panna sottile attaccata sotto AGGIUNGI ORA (Matteo: «prova a portare il caso della fascia
   panna su dev2»). Sul pc sta in pagina sotto il pulsante: filo nero ai lati e sotto, sopra c'è il filo del pulsante.
   Fino a 1024 AGGIUNGI ORA è la barra fissa in fondo (clone sticky di script.js): la fascia in pagina sparisce e una copia
   fissa si appoggia sopra la barra quando la barra si vede (JS aggiornaFissa). Scritta come le fasce del pannello. */
html body .ac-prev-fascia{display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;width:100%!important;height:clamp(24px,calc(24px + 6*(100vw - 1920px)/480),30px)!important;min-height:0!important;margin:0!important;position:relative!important;--ac-prev-fascia-dx:calc(clamp(16px,calc(16px + 4*(100vw - 1920px)/480),20px) - 1px);padding:0 calc(var(--ac-prev-fascia-dx) + 14px)!important;background:#FDF5F1!important;color:#000!important;border:1px solid #000!important;border-top:0!important;border-radius:0!important;box-shadow:none!important;font-family:'Delight',sans-serif!important;font-weight:700!important;font-size:clamp(11px,calc(11px + 3*(100vw - 1920px)/480),14px)!important;line-height:1!important;letter-spacing:.04em!important;text-transform:uppercase!important;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
html body .ac-prev-fascia[hidden]{display:none!important}
html body .ac-prev-fascia .ac-prev-punto{margin:0 .2em}
/* [14/10] freccia a destra con margine (Matteo: «la freccia mettiamola sulla destra con padding right»), il testo resta centrato
   (lo spazio della freccia è riservato su tutti e due i lati). Sul pc a filo della freccia dei banner promo, sul telefono del margine della pagina (20px) */
html body .ac-prev-fascia-punta{position:absolute;top:50%;right:var(--ac-prev-fascia-dx);width:6px;height:10px;margin:-5px 0 0 0}
@media (max-width:1024px){html body .ac-prev-fascia.ac-prev-fascia-fissa{--ac-prev-fascia-dx:20px}}
html body .ac-prev-fascia:focus-visible{outline:2px solid #C35226;outline-offset:2px}
/* [14/10] sul pc, scorrendo, AGGIUNGI ORA si aggancia sotto l'intestazione e diventa ARANCIONE («stuck», col prezzo): lì la fascia è
   BIANCA (provata nera, poi Matteo: «no meglio fascia bianca»), come la copia fissa del telefono. In cima, col pulsante bianco, resta panna */
html body .ac-pt-buy-btn.stuck:not(.in-cart) + .ac-prev-fascia{background:#fff!important}
/* [14/10] carrello: fascia sotto CHECKOUT, larga quanto il pulsante (che sborda di 15px per lato), riempimento come il pannello,
   contorno e testo arancione (Matteo: «A2») */
html body .ac-checkout-button-wrapper .ac-prev-fascia-carrello{width:calc(100% + 30px)!important;margin:0 -15px!important;background:#FDF5F1!important;color:#C35226!important;border:1px solid #C35226!important;border-top:0!important}
/* [14/10] le spaziature proporzionali delle sezioni della colonna destra sono passate nello style.css del tema (valgono per tutte le schede) */
/* [14/10] la fascia ENTRA da sinistra a destra ed ESCE al contrario, da destra a sinistra: un taglio (clip-path) che scorre in .25s (Matteo: «rendi entrambe più veloci»)
   (Matteo: «la fascia tasso zero compare e scompare in modo netto, ti ho chiesto di mettere un'animazione a cascata. in entrata da sx a dx
   e in uscita il contrario»). Il taglio lascia 4px attorno per il contorno di messa a fuoco.
   Pc: quando la sezione «Pagamento» entra in vista la fascia esce verso sinistra e solo dopo il suo spazio si chiude; tornando su
   lo spazio si riapre e la fascia rientra da sinistra */
/* [14/10] niente scatto delle sezioni sotto (Matteo: «quando sparisce la fascia c'è uno scatto… riusciamo a fare in modo che sia un salto
   fluido?»): in uscita prima il taglio verso sinistra (.25s), poi lo spazio si chiude scorrendo (.2s); in entrata prima lo spazio si
   riapre (.2s), poi la fascia entra da sinistra */
html body .ac-pt-actions .ac-prev-fascia{overflow:hidden;clip-path:inset(-4px -4px -4px -4px);transition:height .2s ease-in-out,border-bottom-width .2s ease-in-out,clip-path .25s ease-in-out .2s}
html body .ac-pt-actions .ac-prev-fascia.ac-prev-fascia-ritirata{height:0!important;border-bottom-width:0!important;pointer-events:none;clip-path:inset(-4px 100% -4px -4px);transition:clip-path .25s ease-in-out,height .2s ease-in-out .25s,border-bottom-width .2s ease-in-out .25s}
@media (max-width:1024px){html body .ac-pt-actions .ac-prev-fascia{display:none!important}}
/* Telefono, copia fissa sopra la barra: stesso taglio. Quando compare insieme alla barra entra subito dopo di lei (.3s); quando entra o
   esce per la sezione «Pagamento» (ac-prev-netto = la barra c'era già) parte subito */
html body .ac-prev-fascia.ac-prev-fascia-fissa{position:fixed!important;left:0;right:0;bottom:0;width:auto!important;z-index:9990;border:0!important;border-top:1px solid #000!important;visibility:hidden;clip-path:inset(-4px 100% -4px -4px);pointer-events:none;transition:clip-path .25s ease-in-out,visibility 0s linear .25s}
html body .ac-prev-fascia.ac-prev-fascia-fissa.is-visibile{visibility:visible;clip-path:inset(-4px -4px -4px -4px);pointer-events:auto;transition:clip-path .25s ease-in-out .3s,visibility 0s linear .3s}
html body .ac-prev-fascia.ac-prev-fascia-fissa.is-visibile.ac-prev-netto{transition:clip-path .25s ease-in-out,visibility 0s}
/* [14/10] sul telefono la fascia fissa è BIANCA, sopra la barra arancione e sopra quella nera (Matteo: «no su mobile meglio bianca
   la fascia», dopo la prova nera con scritta bianca). La classe su-arancio resta solo come segnale dello stato della barra */
html body .ac-prev-fascia.ac-prev-fascia-fissa{background:#fff!important}
/* [14/10] sul telefono niente fascia (Matteo: «su mobile la toglierei la fascia»): la copia fissa sopra la barra non si vede più a nessuna
   larghezza; il tasso zero resta nella sezione «Pagamento» («12 rate da … a tasso zero»). Lo script la tiene aggiornata ma nascosta */
html body .ac-prev-fascia.ac-prev-fascia-fissa{display:none!important}
/* banner NON cliccabile («PROMOZIONE», «TASSO ZERO 12 MESI») bianco come gli altri (14/10): con le 3 rate in fascia, sui
   prodotti in promozione in cima resta lui */
html body.ac-product-test-page div.ac-pt-promo-banner{background:#fff!important;color:#000!important;border:1px solid #000!important;padding-top:calc(clamp(11px,calc(11px + 3*(100vw - 1920px)/480),14px) - 1px)!important;padding-bottom:calc(clamp(11px,calc(11px + 3*(100vw - 1920px)/480),14px) - 1px)!important}
/* [14/10/2026] Sezione «Pagamento»: il pulsante della voce prende carattere e colore della voce (regole di «Condizione») */
html body .ac-prev-voce{display:inline!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;font:inherit!important;color:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;text-align:left!important;line-height:inherit!important;min-height:0!important;height:auto!important;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
/* le voci che aprono il pannello sono sottolineate, senza freccina (Matteo 14/10: «proviamo sottolineato») */
html body .ac-pt-section-pagamento .ac-prev-voce{text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important}
html body .ac-prev-voce:focus-visible{outline:2px solid #C35226;outline-offset:2px}
html body .ac-pt-section-pagamento[hidden],html body .ac-pt-section-pagamento .ac-pt-section-item[hidden]{display:none!important}
/* fino a 1024 «Condizione» non ha spazio sotto (pb 0) mentre «Disponibilità» ne ha 12: la sezione scende di 12 per avere lo
   stesso stacco che c'è fra «Disponibilità» e «Condizione» (34px dalla fine della lista al titolo); sotto ha 12 come
   «Disponibilità», così anche verso le «Note di Audiocostruzioni» lo stacco è lo stesso */
@media (max-width:1024px){html body.ac-product-test-page .ac-pt-actions .ac-pt-section.ac-pt-section-condizione.ac-pt-section-pagamento{margin-top:30px!important;padding-bottom:12px!important}}
/* [14/10] sotto le «Note di Audiocostruzioni» (Matteo): le Note hanno già 12px sotto, quindi margine normale di 18 come le altre sezioni */
@media (max-width:1024px){html body.ac-product-test-page .ac-pt-actions .ac-pt-section-note + .ac-pt-section.ac-pt-section-condizione.ac-pt-section-pagamento{margin-top:18px!important}}
/* Pannello */
/* [14/10/2026] Tutto il pannello scala in proporzione (Matteo: «dobbiamo far scalare proporzionalmente il pannello in ogni
   res, in modo fluido»): ogni misura è N × --ac-prev-u, il «pixel del disegno». A 1920 (d0) vale 1px; fra 1025 e 1920 va
   da 0,8 a 1 come le scritte della scheda prodotto (riga rate e descrizione, 12→15); sopra 1920 cresce fino a 1,25 a 2400
   (cap del sito). Fino a 1024 (tablet e telefono) resta 1px: sotto i 767 valgono le misure del telefono più in basso.
   I fili da 1px restano 1px. */
html body .ac-prev-modal{--ac-prev-u:1px}
@media (min-width:1025px){html body .ac-prev-modal{--ac-prev-u:clamp(.8px,calc(.8px + (100vw - 1024px)*.2/896),1px)}}
@media (min-width:1921px){html body .ac-prev-modal{--ac-prev-u:clamp(1px,calc(1px + (100vw - 1920px)*.25/480),1.25px)}}
/* [14/10] blocco dello scorrimento SOLO su html: con overflow:hidden anche sul body, il body diventava il contenitore di scorrimento
   della colonna agganciata (position:sticky) e la colonna destra della scheda tornava in cima, sparendo dalla vista (Matteo: «sparisce
   tutta la colonna di destra»). Il sito usa overflow-x:clip su html e body proprio per non rompere lo sticky */
html.ac-prev-aperto{overflow:hidden!important}
html body .ac-prev-modal{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center}
html body .ac-prev-modal.is-open{display:flex}
html body .ac-prev-sfondo{position:absolute;inset:0;background:rgba(0,0,0,.55);cursor:pointer;-webkit-tap-highlight-color:transparent}
html body .ac-prev-box{position:relative;box-sizing:border-box;width:min(calc(560*var(--ac-prev-u)),calc(100vw - 32px));height:auto;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;background:#fff;color:#000;border-radius:0;padding:calc(72*var(--ac-prev-u)) calc(40*var(--ac-prev-u)) calc(32*var(--ac-prev-u));outline:none}
html body .ac-prev-x{position:absolute!important;top:calc(11*var(--ac-prev-u));right:calc(27*var(--ac-prev-u));width:calc(44*var(--ac-prev-u))!important;height:calc(44*var(--ac-prev-u))!important;padding:calc(13*var(--ac-prev-u))!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#000!important;cursor:pointer;line-height:0!important;min-height:0!important}
html body .ac-prev-x img{width:calc(18*var(--ac-prev-u))!important;height:calc(18*var(--ac-prev-u))!important;max-width:none!important;display:block;object-fit:contain}
html body .ac-prev-box .ac-prev-titolo{font-family:'Delight',sans-serif!important;font-weight:700!important;font-size:calc(24*var(--ac-prev-u))!important;line-height:1.15!important;color:#000!important;text-align:center!important;margin:0 0 calc(10*var(--ac-prev-u))!important;padding:0!important;text-transform:none!important;letter-spacing:0!important}
html body .ac-prev-box .ac-prev-titolo-prezzo{white-space:nowrap}
html body .ac-prev-box .ac-prev-sotto{font-family:'Lausanne',sans-serif!important;font-size:calc(15*var(--ac-prev-u))!important;line-height:1.4!important;color:#666!important;text-align:center!important;margin:0 0 calc(28*var(--ac-prev-u))!important}
/* riquadro: fascia SOTTILE attaccata al lato superiore (copre anche il filo: margini -1px), corpo con filo nero.
   Rientri 5 (Matteo 13/10: «deve essere una fascia sottile»). Era arancione: «metti le fasce nere e le scritte dentro
   la fascia in delight bold»; il nome come il partner (Delight 700, 11, maiuscolo): «devono essere praticamente come
   le scritte scalapay floa e findomestic» */
html body .ac-prev-box .ac-prev-opzione{display:block;border:1px solid #000;border-top:0;padding:0;margin:0 0 calc(12*var(--ac-prev-u))}
html body .ac-prev-box .ac-prev-opz-fascia{display:flex;justify-content:space-between;align-items:center;gap:calc(12*var(--ac-prev-u));margin:0 -1px;padding:calc(5*var(--ac-prev-u)) calc(20*var(--ac-prev-u) + 1px);background:#000;color:#fff}
html body .ac-prev-box .ac-prev-opz-corpo{padding:calc(16*var(--ac-prev-u)) calc(20*var(--ac-prev-u)) calc(18*var(--ac-prev-u))}
html body .ac-prev-box .ac-prev-opz-nome{font-family:'Delight',sans-serif!important;font-weight:700!important;font-size:calc(11*var(--ac-prev-u))!important;line-height:1.3!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:#fff!important;margin:0!important}
html body .ac-prev-box .ac-prev-opz-cifra{font-family:'Delight',sans-serif!important;font-weight:700!important;font-size:calc(19*var(--ac-prev-u))!important;line-height:1.2!important;color:#000!important;margin:0 0 calc(4*var(--ac-prev-u))!important}
html body .ac-prev-box .ac-prev-opz-nota{font-family:'Lausanne',sans-serif!important;font-size:calc(13*var(--ac-prev-u))!important;line-height:1.4!important;color:#666!important;margin:0!important}
html body .ac-prev-box .ac-prev-opz-partner{flex:0 0 auto;font-family:'Delight',sans-serif!important;font-weight:700!important;font-size:calc(11*var(--ac-prev-u))!important;line-height:1.3!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:#fff!important;margin:0!important;text-align:right}
html body .ac-prev-box .ac-prev-link{display:inline-block;margin:calc(10*var(--ac-prev-u)) 0 0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;font-family:'Delight',sans-serif!important;font-weight:700!important;font-size:calc(14*var(--ac-prev-u))!important;line-height:1.3!important;color:#000!important;text-decoration:underline!important;text-underline-offset:calc(3*var(--ac-prev-u));cursor:pointer;min-height:0!important;text-transform:none!important}
html body .ac-prev-box .ac-prev-come{background:#FDF5F1;padding:calc(22*var(--ac-prev-u)) calc(24*var(--ac-prev-u));margin:calc(20*var(--ac-prev-u)) 0}
html body .ac-prev-box .ac-prev-come h3{font-family:'Delight',sans-serif!important;font-weight:700!important;font-size:calc(19*var(--ac-prev-u))!important;line-height:1.2!important;color:#000!important;margin:0 0 calc(12*var(--ac-prev-u))!important;padding:0!important;text-transform:none!important}
html body .ac-prev-box .ac-prev-come ol{margin:0!important;padding:0 0 0 calc(22*var(--ac-prev-u))!important;font-family:'Lausanne',sans-serif!important;font-size:calc(15*var(--ac-prev-u))!important;line-height:1.5!important;color:#000!important}
html body .ac-prev-box .ac-prev-come li{margin:0 0 calc(6*var(--ac-prev-u))!important;padding:0!important}
/* inizio dei passi di «Come funziona?» in grassetto: tolto e rimesso il 13/10 («no era meglio prima per i grassetti») */
html body .ac-prev-box .ac-prev-come b{font-family:'Delight',sans-serif;font-weight:700}
/* [14/10] note legali giustificate (Matteo: «giustifica il testo sotto al banner come funziona»); le ultime due parole legate con \u00a0 nei testi */
html body .ac-prev-box .ac-prev-legale{text-align:justify!important;font-family:'Lausanne',sans-serif!important;font-size:calc(12*var(--ac-prev-u))!important;line-height:1.5!important;color:#666!important;margin:0 0 calc(24*var(--ac-prev-u))!important}
/* [14/10] di nuovo alto quanto il contenuto e centrato («rendiamolo un semplice banner, non a tutto schermo»); la colonna
   flessibile resta: se un giorno torna a tutta altezza, AGGIUNGI ORA va in fondo da solo */
html body .ac-prev-box .ac-prev-corpo{flex:1 0 auto;display:flex;flex-direction:column}
html body .ac-prev-box .ac-prev-sopra:last-child .ac-prev-legale{margin-bottom:0!important}
html body .ac-prev-box .ac-prev-azioni{display:flex;gap:calc(12*var(--ac-prev-u));margin-top:auto}
/* AGGIUNGI ORA con le proporzioni di CONTATTACI della Supporto (Matteo 13/10): 72 di altezza, scritta 18, rientri 24;
   dal 14/10 scala con tutto il pannello (--ac-prev-u) */
html body .ac-prev-box .ac-prev-btn{flex:1 1 0;box-sizing:border-box;height:calc(72*var(--ac-prev-u))!important;min-height:0!important;margin:0!important;padding:0 calc(24*var(--ac-prev-u))!important;border-radius:0!important;box-shadow:none!important;font-family:'Delight',sans-serif!important;font-weight:700!important;font-size:calc(18*var(--ac-prev-u))!important;line-height:1!important;letter-spacing:calc(.5*var(--ac-prev-u))!important;text-transform:uppercase!important;cursor:pointer;transition:background-color .18s ease,color .18s ease}
/* AGGIUNGI ORA come il pulsante della scheda (Matteo 13/10): vuoto, filo nero da 1px, scritta nera; al passaggio del
   mouse il nero entra dal lato da cui arriva il puntatore, come AGGIUNGI ORA della scheda (Matteo 13/10: «metti gli hover
   direzionali come il pulsante normale»; JS direzionale()), e la scritta diventa bianca. All'uscita torna subito com'era */
html body .ac-prev-box .ac-prev-btn-aggiungi{background:transparent!important;border:1px solid #000!important;color:#000!important;position:relative;overflow:hidden;z-index:0}
html body .ac-prev-box .ac-prev-btn-aggiungi::before{content:'';position:absolute;inset:0;background:#000;transform:translate(var(--ac-prev-x,-100%),var(--ac-prev-y,0));transition:var(--ac-prev-tr,none);z-index:-1}
html body .ac-prev-box .ac-prev-btn-aggiungi.ac-prev-dentro{color:#fff!important}
html body .ac-prev-box a.ac-prev-btn,html body .ac-prev-box a.ac-prev-btn:hover,html body .ac-prev-box a.ac-prev-btn:focus{display:flex!important;align-items:center;justify-content:center;text-decoration:none!important}
@media (max-width:767px){
/* [14/10] sul telefono di nuovo a tutto schermo (Matteo: «su mobile il pannello deve essere a tutto schermo»); sul pc resta il riquadro centrato */
html body .ac-prev-box{padding:58px 20px calc(20px + env(safe-area-inset-bottom,0px));width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:none}
html body .ac-prev-x{top:3px;right:7px}
html body .ac-prev-box .ac-prev-titolo{font-size:21px!important}
html body .ac-prev-box .ac-prev-opz-fascia{padding:5px 17px}
html body .ac-prev-box .ac-prev-opz-corpo{padding:14px 16px 16px}
html body .ac-prev-box .ac-prev-opz-cifra{font-size:19px!important}
html body .ac-prev-box .ac-prev-come{padding:18px 18px}
html body .ac-prev-box .ac-prev-azioni{flex-direction:column-reverse}
html body .ac-prev-box .ac-prev-btn{flex:0 0 auto;width:100%}
}