/* ==========================================================================
   Configuratore PrintManager - livello di tema
   --------------------------------------------------------------------------
   Questo file e' l'unico posto in cui si scrivono NUOVE regole per la view
   del configuratore (components/com_jshopping/.../product_manager.php).
   Il <style> inline della view resta per ora, ma i suoi colori vanno
   progressivamente riscritti in termini dei token qui sotto.

   I token derivano dal tema YOOtheme attivo:
   - le variabili --bs-* sono generate da YOOtheme (theme.css);
   - le triplette --ev-theme-*-rgb sono calcolate a runtime dal bridge in
     templates/yootheme/js/custom.js (risolve prima l'hex --bs-*, poi il
     --bs-*-rgb, che in questo tema e' rimasto ai valori Bootstrap di
     default e NON corrisponde alla palette: non usarlo mai direttamente).
   I fallback letterali servono a evitare un flash di colore sbagliato
   prima che il bridge JS abbia girato.
   ========================================================================== */

/* Token su :root: questo foglio viene caricato solo dalla view del
   configuratore, quindi non inquina il resto del sito. Serve :root e non
   l'app root perche' alcune regole inline colpiscono anche contenitori che
   stanno FUORI da #calcolatoreSegnatureV2ProdottiApp (#configuratore, modali
   portate in body): con uno scope piu' stretto quelle var non risolverebbero. */
:root {
    /* Palette del tema */
    --ev-primary-rgb: var(--ev-theme-primary-rgb, 48, 48, 51);
    --ev-accent-rgb: var(--ev-theme-accent-rgb, 255, 158, 69);
    --ev-accent-contrast-rgb: var(--ev-theme-accent-contrast-rgb, 33, 37, 41);
    --ev-danger-rgb: var(--ev-theme-danger-rgb, 228, 78, 86);
    /* Giallo d'avviso: piu' caldo dell'accent arancio, per i messaggi che
       restano in vista e non devono suonare come un errore. */
    --ev-warn-rgb: var(--ev-theme-warn-rgb, 240, 189, 43);

    --ev-primary: rgb(var(--ev-primary-rgb));
    --ev-accent: rgb(var(--ev-accent-rgb));
    --ev-accent-ink: rgb(var(--ev-accent-contrast-rgb));

    /* Superfici e testo */
    --ev-surface: var(--bs-body-bg, #ffffff);
    --ev-surface-sunken: rgba(var(--ev-primary-rgb), 0.045);
    --ev-ink: var(--bs-body-color, #212529);
    /* 0.78 e' il minimo che tiene le label da 0.72rem sopra 4.5:1 su bianco. */
    --ev-ink-muted: rgba(var(--ev-primary-rgb), 0.78);
    --ev-on-primary: #ffffff;

    /* Stato disabilitato: gli stessi valori dei pulsanti del tema. */
    --ev-disabled-bg: #f7f7f7;
    --ev-disabled-ink: #b4b5ba;

    /* Linee e stati */
    --ev-line: rgba(var(--ev-primary-rgb), 0.16);
    --ev-line-strong: rgba(var(--ev-primary-rgb), 0.32);
    --ev-focus-ring: 0 0 0 0.13rem rgba(var(--ev-accent-rgb), 0.38);

    /* Tipografia: Montserrat e' il carattere UI del tema, Playfair il display,
       PT Serif il testo corrente. */
    --ev-font-ui: Montserrat, var(--bs-font-sans-serif, 'PT Serif'), sans-serif;
    --ev-font-display: 'Playfair Display', Georgia, serif;
    --ev-font-text: var(--bs-font-sans-serif, 'PT Serif'), Georgia, serif;
}

/* ==========================================================================
   Testata di prodotto
   Sostituisce il briciolo di pane con la sola voce "Home", che su una scheda
   prodotto non orientava nessuno.
   ========================================================================== */

#tm-main .uk-container > nav:has(> .uk-breadcrumb) {
    display: none;
}

/* Aspetto di base, valido ovunque finisca il blocco. A pagina caricata il JS lo
   sposta nella barra del tema accanto al logo (variante .is-in-navbar piu'
   sotto); se quello spostamento non riesce resta nella fascia alta della pagina
   e queste regole bastano da sole.
   I colori qui sono ereditati (color: inherit + opacita') perche' la fascia puo'
   essere chiara o scura: un valore cablato sparirebbe in uno dei due casi. */
.v2-product-hero {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin: 0 0 1.5rem;
    padding: 0 0 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.v2-product-hero-media {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    background: color-mix(in srgb, currentColor 6%, transparent);
}

.v2-product-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.v2-product-hero-caption {
    flex: 1 1 auto;
    min-width: 0;
}

/* Nascosto di default: serve solo alla variante compatta dentro la barra
   (regola piu' sotto). Qui in pagina il titolo si presenta da solo. */
.v2-product-hero-eyebrow {
    display: none;
}

.v2-product-hero-title {
    margin: 0;
    font-family: var(--ev-font-display);
    font-size: clamp(1.3rem, 1.4vw + 0.75rem, 1.85rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: 0.005em;
    color: inherit;
    text-transform: none;
}

.v2-product-hero-text {
    margin: 0.34rem 0 0;
    max-width: 68ch;
    font-family: var(--ev-font-text);
    font-size: 0.92rem;
    line-height: 1.45;
    color: inherit;
    opacity: 0.74;
}

@media (max-width: 575.98px) {
    .v2-product-hero:not(.is-in-navbar) {
        gap: 0.8rem;
    }

    .v2-product-hero:not(.is-in-navbar) .v2-product-hero-media {
        width: 72px;
        height: 72px;
    }
}

/* La riga della barra si alza per fare posto a una vera immagine di prodotto.
   Di suo vale 80px (min-height sulle voci di navigazione, nel foglio del tema):
   quegli 80px lasciavano all'immagine si' e no 64px, ed era il motivo per cui
   sembrava un'icona invece che la foto del prodotto.
   I 40px in piu' non allungano la pagina: vengono ripresi dallo stacco sopra il
   contenuto, qui sotto. Tutto e' agganciato a :has(.is-in-navbar), cioe' scatta
   solo quando la testata e' davvero finita nella barra: se lo spostamento non
   riesce, l'header resta quello di sempre. */
.tm-header .uk-navbar-container:has(.v2-product-hero.is-in-navbar) .uk-navbar-item,
.tm-header .uk-navbar-container:has(.v2-product-hero.is-in-navbar) .uk-navbar-nav > li > a,
.tm-header .uk-navbar-container:has(.v2-product-hero.is-in-navbar) .uk-navbar-toggle {
    min-height: 120px;
}

/* Contropartita dei 40px presi dalla barra: il contenuto resta dov'era prima. */
body:has(.v2-product-hero.is-in-navbar) #tm-main {
    padding-top: 30px;
}

/* Dentro la barra del tema, subito dopo il logo: colori chiari (la barra e'
   scura, il logo stesso e' la versione in negativo).
   Il blocco e' composto come le etichette della barra: un filetto verticale che
   lo stacca dal logo, l'occhiello in maiuscoletto spaziato - la stessa grammatica
   del menu, che e' Montserrat maiuscolo spaziato - e sotto il nome del prodotto,
   unica cosa in Playfair. Prima era la sola foto a reggere tutto il blocco, e le
   immagini prodotto sono scatti orizzontali di volumi affiancati: ritagliate
   verticali si tagliavano ai lati. */
.v2-product-hero.is-in-navbar {
    /* Centrato sulla riga, non stirato. Prima c'era align-self: stretch insieme
       a un max-height in pixel, e quella coppia era il difetto: la riga della
       barra e' quasi sempre piu' alta dei 120px nominali (il solo logo ne misura
       131), quindi il blocco veniva tappato dal tetto e si incollava in alto,
       lasciando tutto il vuoto sotto l'immagine. Centrandolo non si pone. */
    align-self: center;
    align-items: center;
    overflow: hidden;
    margin: 0 0 0 1.35rem;
    padding: 0 0 0 1.35rem;
    gap: 1.05rem;
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    min-width: 0;
    /* Tetto misurato, non a occhio. La barra e' una riga sola di flex e il
       contenuto fisso pesa 1072px: logo 155 + menu 613 + lente + margini. Quello
       che resta per la testata e' "larghezza finestra meno 941"; sforandolo, sia
       la parte sinistra sia la destra vanno a capo (logo sopra, testata sotto,
       menu spezzato in due). Il calc toglie 995 e non 941 perche' margine e
       spaziatura interna del blocco pesano 43px e non entrano nel max-width:
       restano una decina di px di margine di sicurezza.
       Il secondo termine e' il tetto di buon gusto: oltre i 540px la testata
       comincia a pesare piu' del menu. */
    max-width: min(calc(100vw - 995px), 540px);
}

/* Riquadro centrato, con aria sopra e sotto. Angoli appena smussati e nessun
   bordo: il bordo chiaro piu' gli angoli tondi di prima lo facevano sembrare la
   miniatura di un pannello di amministrazione.
   Misura FISSA, mai in percentuale: l'altezza della riga viene da un min-height,
   e su quello una percentuale non si risolve (height:100% ripiegava sulla
   dimensione naturale del file e trascinava l'header con se'). 92px stanno sotto
   i 120px della riga e non possono farla crescere. */
.v2-product-hero.is-in-navbar .v2-product-hero-media {
    width: 100px;
    height: 92px;
    max-width: 100px;
    max-height: 92px;
    flex: 0 0 100px;
    align-self: center;
    border-radius: 3px;
    border: 0;
    background: rgba(255, 255, 255, 0.05);
}

/* L'occhiello si vede solo in barra: nella versione in pagina il titolo e' gia'
   grande e dichiarato, e una parolina sopra sarebbe solo rumore. */
.v2-product-hero.is-in-navbar .v2-product-hero-eyebrow {
    display: block;
    margin-bottom: 0.34rem;
    font-family: var(--ev-font-ui);
    font-size: 0.56rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.5;
    white-space: nowrap;
}

/* Una riga sola. Il nome del prodotto puo' essere lungo ("Volumi SOFTCOVER,
   copertina varianti Editoriali") e in barra lo spazio e' quello che e': andando
   a capo il blocco diventava un paragrafo incastrato fra logo e menu. Meglio
   troncare con l'ellissi - il nome intero resta nel tooltip, che il JS mette
   sull'elemento insieme al testo. */
.v2-product-hero.is-in-navbar .v2-product-hero-title {
    font-size: 0.94rem;
    line-height: 1.3;
    letter-spacing: 0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-product-hero.is-in-navbar .v2-product-hero-text {
    margin-top: 0.22rem;
    max-width: none;
    font-family: var(--ev-font-ui);
    font-size: 0.68rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nessuna variante ristretta per la barra, e non e' una dimenticanza: sotto i
   1360px la testata nella barra non ci va proprio, e il JS non ce la mette (vedi
   product_manager.php). Quello che restava qui erano misure per finestre in cui
   la barra andava a capo comunque - anche prima di questa modifica, gia' sotto i
   ~1150px si spezzava in due righe. Li' vale la versione in pagina, che di
   spazio ne ha quanto ne vuole. */

/* ==========================================================================
   Colonna destra agganciata allo scorrimento
   --------------------------------------------------------------------------
   La regola position:sticky esiste da tempo nel <style> inline (dentro la
   media query >=992px), ma piu' in basso nello stesso foglio un blocco
   "Override finale anti-vuoto" la annullava con
   #calcolatoreSegnatureV2ProdottiApp #contenitore-destro { position: static
   !important }. Quel blocco e' stato tolto: tenerlo li' e contrastarlo da qui
   non funzionava, perche' i due selettori hanno la stessa specificita' (due id)
   e a parita' vince quello che viene dopo nel documento — cioe' lo <style>
   inline, che sta nel body mentre questo foglio e' nell'head.
   Lo scorrimento sta sulla colonna e non sul pannello interno, perche' quello
   ha overflow:visible !important (serve a non tagliare i menu a tendina).
   ========================================================================== */

@media (min-width: 992px) {
    #calcolatoreSegnatureV2ProdottiApp #contenitore-destro {
        position: sticky !important;
        top: 0.75rem !important;
        align-self: flex-start !important;
        /* Niente altezza massima ne' scorrimento interno: con quelli, la rotella
           sopra la colonna scorreva il contenuto della colonna invece della
           pagina e ne faceva sparire l'intestazione dall'alto. Cosi' la colonna
           tiene la sua altezza naturale e parte allineata a quella di sinistra. */
        max-height: none !important;
        overflow: visible !important;
    }

    /* Il riquadro destro prende almeno l'altezza della finestra, cosi' non
       sembra un francobollo accanto alla colonna di sinistra. min-height e non
       height: se il contenuto cresce oltre la finestra la colonna si allunga,
       invece di scorrere al proprio interno - comportamento tolto apposta. */
    /* Tre id e !important non per vezzo: piu' avanti nello <style> inline c'e'
       "#calcolatoreSegnatureV2ProdottiApp #contenitore-destro { min-height: auto
       !important }". Sono due id con !important, e stando nel body vincerebbe a
       parita' di specificita': qui serve superarla, non arrivare dopo. */
    #calcolatoreSegnatureV2ProdottiApp #configuratore #contenitore-destro {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 1.5rem) !important;
    }

    #calcolatoreSegnatureV2ProdottiApp #contenitore-destro > .p-3:last-child {
        display: flex;
        flex: 1 1 auto;
        /* Lo <style> inline mette qui overflow:auto, avanzo di quando la colonna
           scorreva da sola: ora ritaglierebbe il fondo del riquadro - angoli
           arrotondati compresi - appena il contenuto supera lo spazio. */
        overflow: visible;
    }

    #calcolatoreSegnatureV2ProdottiApp #contenitore-destro .v2-right-unified {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   Barra soggetti copertina (multi-copertina)
   Sostituisce il blocco che veniva iniettato da JS in ensureCopertinaSlotsStyle.
   Vive come riga propria della card, tra header e corpo: non e' piu' annidata
   dentro il <button> del titolo.
   ========================================================================== */

#v2RuntimeFieldsets .v2-cop-slotbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    padding: 0.42rem 0.6rem;
    background: var(--ev-surface-sunken);
    border-bottom: 1px solid var(--ev-line);
}

#v2RuntimeFieldsets .v2-cop-slotbar-label {
    font-family: var(--ev-font-ui);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ev-ink-muted);
}

#v2RuntimeFieldsets .v2-cop-slot-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

#v2RuntimeFieldsets .v2-cop-slot-tab {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--ev-line-strong);
    border-radius: 999px;
    background: var(--ev-surface);
    overflow: hidden;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

#v2RuntimeFieldsets .v2-cop-slot-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    min-height: 1.72rem;
    padding: 0.1rem 0.7rem;
    border: 0;
    background: transparent;
    color: var(--ev-ink);
    font-family: var(--ev-font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
}

#v2RuntimeFieldsets .v2-cop-slot-qty-hint {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    opacity: 0.62;
}

#v2RuntimeFieldsets .v2-cop-slot-tab:hover {
    border-color: rgba(var(--ev-accent-rgb), 0.7);
    background: rgba(var(--ev-accent-rgb), 0.08);
}

#v2RuntimeFieldsets .v2-cop-slot-tab.is-active {
    border-color: var(--ev-accent);
    background: var(--ev-accent);
}

#v2RuntimeFieldsets .v2-cop-slot-tab.is-active .v2-cop-slot-btn {
    color: var(--ev-accent-ink);
}

#v2RuntimeFieldsets .v2-cop-slot-tab.is-active .v2-cop-slot-qty-hint {
    opacity: 0.78;
}

#v2RuntimeFieldsets .v2-cop-slot-btn:focus-visible,
#v2RuntimeFieldsets .v2-cop-slot-add:focus-visible,
#v2RuntimeFieldsets .v2-cop-slot-tab-remove:focus-visible {
    outline: none;
    box-shadow: var(--ev-focus-ring);
}

#v2RuntimeFieldsets .v2-cop-slot-tab-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    align-self: stretch;
    border: 0;
    border-left: 1px solid var(--ev-line);
    background: transparent;
    color: inherit;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.16s ease, background-color 0.16s ease;
}

#v2RuntimeFieldsets .v2-cop-slot-tab.is-active .v2-cop-slot-tab-remove {
    color: var(--ev-accent-ink);
    border-left-color: rgba(var(--ev-accent-contrast-rgb), 0.28);
}

#v2RuntimeFieldsets .v2-cop-slot-tab-remove:hover,
#v2RuntimeFieldsets .v2-cop-slot-tab-remove:focus-visible {
    opacity: 1;
    background: rgba(var(--ev-danger-rgb), 0.16);
}

#v2RuntimeFieldsets .v2-cop-slot-add {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 1.72rem;
    padding: 0.1rem 0.66rem;
    border: 1px dashed var(--ev-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--ev-ink-muted);
    font-family: var(--ev-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

#v2RuntimeFieldsets .v2-cop-slot-add:hover,
#v2RuntimeFieldsets .v2-cop-slot-add:focus-visible {
    border-style: solid;
    border-color: var(--ev-accent);
    background: rgba(var(--ev-accent-rgb), 0.12);
    color: var(--ev-ink);
}

/* Sempre in vista: spiega il limite dei soggetti, non segnala un errore
   appena avvenuto. Per questo resta sfumato - una velatura gialla appena
   piu' calda dell'accent - invece di squillare come un avviso. */
#v2RuntimeFieldsets .v2-cop-slot-warning {
    flex: 0 0 100%;
    margin: 0;
    padding: 0.3rem 0.5rem;
    border-left: 2px solid rgba(var(--ev-warn-rgb), 0.9);
    background: linear-gradient(180deg,
        rgba(var(--ev-warn-rgb), 0.22) 0%,
        rgba(var(--ev-warn-rgb), 0.09) 100%);
    color: var(--ev-ink);
    font-size: 0.7rem;
    line-height: 1.3;
}

/* Sovracopertina bloccata dai soggetti: la nota sta fra header e corpo della
   card, perche' con lo switch spento il corpo non si vede. Stessa velatura
   della nota sui soggetti: spiega un limite, non segnala un errore. */
#v2RuntimeFieldsets .v2-sovra-lock-note {
    margin: 0;
    padding: 0.38rem 0.6rem;
    border-bottom: 1px solid var(--ev-line);
    border-left: 2px solid rgba(var(--ev-warn-rgb), 0.9);
    background: linear-gradient(180deg,
        rgba(var(--ev-warn-rgb), 0.22) 0%,
        rgba(var(--ev-warn-rgb), 0.09) 100%);
    color: var(--ev-ink);
    font-size: 0.7rem;
    line-height: 1.3;
}

/* Input quantita' copertina: niente frecce di spinner. */
#v2RuntimeFieldsets .v2-cop-slot-qty::-webkit-outer-spin-button,
#v2RuntimeFieldsets .v2-cop-slot-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#v2RuntimeFieldsets .v2-cop-slot-qty {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ==========================================================================
   Colonna destra: la tabella spedizioni prende la stessa scatola delle
   categorie di sinistra (testata scura + corpo bianco).
   Classi dedicate e non .v2-acc-*: le regole dell'accordion sono tutte
   scoped su #v2RuntimeFieldsets e qui non arriverebbero comunque.
   ========================================================================== */

/* Il contenitore esterno smette di essere una scatola: la cornice ce l'ha
   ora la card interna, altrimenti si vedrebbero due bordi annidati.
   Via anche il padding: da quando .v2-right-unified e' diventata una scheda
   con la sua imbottitura, questo si sommava e spingeva spedizione, scelte e
   CTA a 1.24rem dal bordo, contro gli 0.62rem delle card di sinistra. */
#contenitore-destro .v2-consegna-unified-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

#contenitore-destro .v2-sped-card {
    border: 1px solid var(--ev-line);
    border-radius: 0.86rem;
    background: var(--ev-surface);
    box-shadow: 0 4px 12px rgba(var(--ev-primary-rgb), 0.08);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

/* L'altezza deve combaciare con le testate di sinistra: quelle prendono lo 0.5rem
   verticale dalla .py-2 di Bootstrap (che vince con !important sul padding della
   .card-header) e lo 0.52rem orizzontale dalla regola del configuratore. */
#contenitore-destro .v2-sped-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.52rem;
    background: var(--ev-primary);
    border-bottom: 1px solid var(--ev-primary);
}

#contenitore-destro .v2-sped-card-title {
    display: inline-flex;
    align-items: center;
    padding: 0 0.2rem;
    color: var(--ev-on-primary);
    font-family: var(--ev-font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

#contenitore-destro .v2-sped-card-body {
    padding: 0.45rem 0.55rem;
}

/* Taglio cellophane scelto, sotto la relativa select. */
#v2RuntimeFieldsets .v2-cellophane-hint {
    margin-top: 0.22rem;
    font-family: var(--ev-font-ui);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    /* Il colore lo forza gia' la regola dell'accordion con !important: qui si
       smorza con l'opacita' invece di aprire una gara di !important. */
    opacity: 0.72;
}

/* ==========================================================================
   Modali del configuratore
   ========================================================================== */

/* Con una modale aperta lo sfondo non deve scorrere.
   Il blocco va messo su <html>, non sul <body>: il tema dichiara
   html{overflow-y:scroll} e body{overflow:hidden}, quindi e' l'elemento radice
   a scorrere e il body ha gia' l'overflow nascosto (bloccarlo non fa nulla).
   Due agganci perche' solo la modale cellophane gestisce .modal-open a mano,
   le altre passano da Bootstrap; :has e' gia' usato in questa view per la
   sfocatura dello sfondo, quindi il supporto c'e'.
   scrollbar-gutter tiene lo spazio della barra sparita: senza, la pagina
   sotto salterebbe di una quindicina di pixel all'apertura. */
html:has(body.modal-open),
html:has(.modal.show) {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* Cellophane: la colonna "Pacchi totali" si prendeva mezza tabella perche'
   l'intestazione era su una riga sola e la larghezza libera. */
#v2CellophaneBatchModal .v2-cell-col-pacchi {
    width: 5.6rem;
    white-space: normal;
}

#v2CellophaneBatchModal .modal-body table th,
#v2CellophaneBatchModal .modal-body table td {
    text-align: center;
    vertical-align: middle;
}

#v2CellophaneBatchModal .modal-body table {
    table-layout: fixed;
    width: 100%;
}

/* Footer attaccato al contenuto: il corpo non deve piu' allungarsi per riempire
   un riquadro di altezza fissa. */
#v2CellophaneBatchModal .modal-body {
    min-height: 0 !important;
}

#v2CellophaneBatchModal .modal-footer {
    margin-top: 0;
}

/* ==========================================================================
   Tooltip "+" spedizioni (era anch'esso iniettato da JS, quindi presente solo
   sui prodotti multi-copertina: ora e' sempre disponibile).
   Nota: il nodo viene appeso a <body>, fuori dall'app root: i token servono
   da :root proprio per questo.
   ========================================================================== */

.v2-sped-plus-tooltip {
    position: fixed;
    z-index: 2147483647;
    min-width: 250px;
    max-width: 320px;
    padding: 0.5rem 0.62rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.4rem;
    background: rgb(var(--ev-primary-rgb));
    color: #ffffff;
    font-family: var(--ev-font-ui, Montserrat, sans-serif);
    font-size: 0.74rem;
    line-height: 1.3;
    white-space: pre-line;
    box-shadow: 0 14px 30px rgba(var(--ev-primary-rgb), 0.28);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.16s ease, transform 0.16s ease;
    pointer-events: none;
}

.v2-sped-plus-tooltip::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: rgb(var(--ev-primary-rgb));
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    transform: rotate(45deg);
}

.v2-sped-plus-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    #v2RuntimeFieldsets .v2-cop-slot-tab,
    #v2RuntimeFieldsets .v2-cop-slot-add,
    #v2RuntimeFieldsets .v2-cop-slot-tab-remove,
    .v2-sped-plus-tooltip {
        transition: none;
    }
}

/* ==========================================================================
   Invito ad accedere (guest)
   --------------------------------------------------------------------------
   La scheda resta pubblica e piena - serve a vendere - ma i comandi sono per
   chi ha un account. Al primo tocco su un qualunque comando esce questo
   pannello. E' piu' largo delle modali di servizio del configuratore (720px
   contro 560px) perche' qui non si segnala un errore: si spiega e si invita.

   Non dipende da Bootstrap: apre e chiude col solo attributo [hidden] messo
   dal JS. Gli z-index stanno sopra a tutto quello che il configuratore puo'
   avere aperto, comprese le sue modali.
   ========================================================================== */

.v2-guest-gate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.v2-guest-gate[hidden] {
    display: none;
}

/* Con la modale aperta la pagina sotto non scorre: altrimenti il gesto di
   scorrimento sembra funzionare e la scheda si muove dietro il pannello. */
body.v2-guest-gate-open {
    overflow: hidden;
}

.v2-guest-gate-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--ev-primary-rgb), 0.55);
    backdrop-filter: blur(3px);
}

.v2-guest-gate-panel {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 34px 38px 30px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-line);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(var(--ev-primary-rgb), 0.34);
    text-align: left;
    animation: v2GuestGateIn 180ms ease-out;
}

@keyframes v2GuestGateIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.v2-guest-gate-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--ev-line);
    border-radius: 50%;
    color: var(--ev-ink-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.v2-guest-gate-close:hover {
    background: var(--ev-surface-sunken);
    color: var(--ev-ink);
}

.v2-guest-gate-close:focus-visible {
    outline: none;
    box-shadow: var(--ev-focus-ring);
}

.v2-guest-gate-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--ev-accent);
    font-family: var(--ev-font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.v2-guest-gate-title {
    margin: 0 0 12px;
    padding-right: 40px;
    color: var(--ev-ink);
    font-family: var(--ev-font-display);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
}

.v2-guest-gate-text {
    margin: 0 0 16px;
    color: var(--ev-ink-muted);
    font-family: var(--ev-font-text);
    font-size: 1rem;
    line-height: 1.5;
}

/* Le voci vanno colorate una per una: dentro .jshop il tema colpisce ogni <li>
   direttamente e il colore della lista non si eredita. Stessa trappola gia'
   vista sulla modale di validazione del checkout. */
.v2-guest-gate-points {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.v2-guest-gate-points li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 26px;
    color: var(--ev-ink-muted);
    font-family: var(--ev-font-text);
    font-size: 0.94rem;
    line-height: 1.45;
    list-style: none;
}

.v2-guest-gate-points li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ev-accent);
}

.v2-guest-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}

.v2-guest-gate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--ev-font-ui);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.v2-guest-gate-btn:focus-visible {
    outline: none;
    box-shadow: var(--ev-focus-ring);
}

.v2-guest-gate-btn.is-primary,
.v2-guest-gate-btn.is-primary:hover,
.v2-guest-gate-btn.is-primary:focus {
    background: var(--ev-accent);
    border-color: var(--ev-accent);
    color: var(--ev-accent-ink);
    text-decoration: none;
}

.v2-guest-gate-btn.is-primary:hover {
    filter: brightness(0.95);
}

.v2-guest-gate-btn.is-outline,
.v2-guest-gate-btn.is-outline:hover,
.v2-guest-gate-btn.is-outline:focus {
    background: transparent;
    border-color: var(--ev-line-strong);
    color: var(--ev-ink);
    text-decoration: none;
}

.v2-guest-gate-btn.is-outline:hover {
    background: var(--ev-surface-sunken);
}

.v2-guest-gate-btn.is-ghost {
    margin-right: auto;
    background: transparent;
    border-color: transparent;
    color: var(--ev-ink-muted);
}

.v2-guest-gate-btn.is-ghost:hover {
    color: var(--ev-ink);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .v2-guest-gate-panel {
        padding: 28px 20px 22px;
    }

    .v2-guest-gate-title {
        font-size: 1.35rem;
    }

    .v2-guest-gate-actions {
        justify-content: stretch;
    }

    .v2-guest-gate-btn {
        flex: 1 1 100%;
    }

    .v2-guest-gate-btn.is-ghost {
        order: 3;
        margin-right: 0;
    }
}

/* Colonna destra del guest: le card di consegna ci sono tutte, con dentro
   niente. La targhetta porta il colore come nel pannello vero, data e prezzo
   restano vuoti. La card non collassa perche' .v2-consegna-choice-label ha gia'
   una min-height sua: le due righe vuote tengono solo il ritmo interno, cosi'
   il vuoto si legge come voluto e non come un caricamento mai finito. */
.v2-guest-consegna-teaser .v2-consegna-date,
.v2-guest-consegna-teaser .v2-consegna-price {
    min-height: 1.15em;
}

/* Le maschere non sono testo da leggere: non si selezionano e non finiscono
   in un copia-incolla. La spaziatura larga le fa leggere come un valore
   coperto e non come una fila di punti. */
.v2-guest-consegna-teaser .is-masked {
    color: var(--ev-ink-muted);
    letter-spacing: 0.18em;
    user-select: none;
    -webkit-user-select: none;
}

/* Il prezzo mascherato resta il pezzo forte della card, come quello vero:
   stessa scala, solo scolorito. */
.v2-guest-consegna-teaser .v2-consegna-price.is-masked {
    opacity: 0.72;
}

.v2-guest-consegna-teaser .v2-consegna-date.is-masked {
    opacity: 0.55;
}

/* Il button prende il posto della coppia radio + label: senza questo
   erediterebbe l'aspetto del pulsante di sistema del browser. */
.v2-guest-consegna-teaser button.v2-consegna-choice-label {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    width: 100%;
}

/* Il pulsante del carrello e' un collegamento vero, non un tasto spento:
   porta alla pagina di accesso. Quindi resta pieno, e si comporta come tale
   al passaggio del mouse. */
.v2-guest-consegna-teaser a.v2-btn-acquista,
.v2-guest-consegna-teaser a.v2-btn-acquista:hover,
.v2-guest-consegna-teaser a.v2-btn-acquista:focus {
    text-decoration: none;
}

/* Comandi spenti: il guest li vede tutti, e si vede che sono spenti. */
#calcolatoreSegnatureV2ProdottiApp[data-prt-guest="1"] #v2RuntimeFieldsets {
    position: relative;
}

#calcolatoreSegnatureV2ProdottiApp[data-prt-guest="1"] #v2RuntimeFieldsets input,
#calcolatoreSegnatureV2ProdottiApp[data-prt-guest="1"] #v2RuntimeFieldsets select,
#calcolatoreSegnatureV2ProdottiApp[data-prt-guest="1"] #v2RuntimeFieldsets textarea,
#calcolatoreSegnatureV2ProdottiApp[data-prt-guest="1"] #v2RuntimeFieldsets button {
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .v2-guest-gate-panel {
        animation: none;
    }
}


/* --- Suggerimento sul cambio prodotto ------------------------------------
   Compare al primo render accanto alla select del prodotto. Giallo pieno, lo
   stesso `--bs-warning` che il sito usa ovunque per gli avvisi: qui non e' una
   nota di contorno, e' la cosa da leggere prima di toccare il modulo. La
   freccia si muove perche' deve farsi notare in una pagina gia' densa, ma il
   movimento sparisce per chi ha chiesto meno animazioni: un elemento che pulsa
   in continuazione e' un problema di accessibilita', non un dettaglio di gusto. */
.prt-nav-hint-host {
    position: relative;
}

/* La card della categoria ritaglia quello che le esce fuori, per tenere
   l'intestazione dentro gli angoli arrotondati. La nuvoletta pero' deve
   sporgere: senza questa deroga, galleggiare significherebbe farsi tagliare a
   meta'. La deroga vale solo per la card che la contiene davvero, cosi' tutte
   le altre continuano a ritagliare come prima.

   Va sollevata la card, non solo la nuvoletta. Ogni .v2-acc-card ha
   l'animazione v2EditorialRise con fill-mode `both`, e l'ultimo fotogramma e'
   `transform: translateY(0)`: un transform diverso da none resta applicato per
   sempre, e un transform fa contesto di impilamento. Ogni card e' quindi un
   mondo chiuso, e lo z-index della nuvoletta vale solo dentro il suo: per
   quanto lo si alzi, la card successiva viene dopo nel documento e le passa
   davanti. Alzando la card intera il confronto avviene fra pari.

   Selettore con l'id e `!important` non per vezzo: lo <style> inline della
   pagina prodotto impone `#v2RuntimeFieldsets .v2-acc-card { overflow: hidden
   !important }`. Contro un !important non si vince con la specificita' da
   sola, e contro un id non si vince a colpi di classi: serve la stessa arma —
   quell'id, una classe in piu', e lo stesso !important.

   La classe la mette il JS quando piazza la cella del prodotto. Qui servirebbe
   `:has(.prt-nav-hint)`, che direbbe la stessa cosa senza toccare il JS, ma un
   selettore che il browser non riconosce non e' una regola che non si applica:
   e' una regola *scartata*, !important compreso. Su una cosa che non si puo'
   provare da qui, meglio una classe esplicita che un selettore da verificare. */
#v2RuntimeFieldsets .v2-acc-card.v2-acc-card-nav-hint {
    position: relative;
    z-index: 60;
    overflow: visible !important;
}

.prt-nav-hint {
    /* Sospesa sotto la cella, non dentro: in flusso allungava la sua cella e
       con essa tutta la riga della griglia, e la card della categoria cresceva
       per fare posto a un avviso che dura pochi secondi. Adesso copre per un
       momento quello che ha sotto e non sposta niente. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Sopra i campi che copre, sotto le modali (che partono da 100000). */
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 9px;
    padding: 11px 13px;
    border-radius: 12px;
    border: 2px solid rgba(150, 106, 0, 0.85);
    background: linear-gradient(180deg,
        #ffc107 0%,
        #f0ad00 100%);
    box-shadow: 0 8px 22px rgba(23, 29, 38, 0.26),
                0 0 0 4px rgba(255, 193, 7, 0.24);
    font-size: 12.5px;
    line-height: 1.45;
    /* Inchiostro quasi nero: su giallo pieno e' l'unica combinazione che regge
       il contrasto anche stampata o su schermi scadenti. */
    color: #2b2100;
    animation: prt-nav-hint-entra 260ms ease-out both,
               prt-nav-hint-respira 2.4s ease-in-out 260ms infinite;
}

/* Il beccuccio verso la select, che sta sopra. */
.prt-nav-hint::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    background: #ffc107;
    border-left: 2px solid rgba(150, 106, 0, 0.85);
    border-top: 2px solid rgba(150, 106, 0, 0.85);
}

.prt-nav-hint.is-uscita {
    animation: prt-nav-hint-esce 200ms ease-in both;
}

.prt-nav-hint-freccia {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    color: #2b2100;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    animation: prt-nav-hint-salta 1s ease-in-out infinite;
}

.prt-nav-hint-testo {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.prt-nav-hint-testo b {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Il colore del testo va imposto: il <style> del configuratore viene dopo
   questo foglio e ha regole sui bottoni dentro l'app, quindi a parita' di peso
   vinceva lui e il "Ho capito" usciva nero su nero. Qui il colore e' scritto in
   esadecimale e non con rgb(var(--bs-warning-rgb)): se quella variabile non e'
   definita nello scope dell'app, l'unica cosa che si perde e' il testo. */
.prt-nav-hint .prt-nav-hint-chiudi,
#calcolatoreSegnatureV2ProdottiApp .prt-nav-hint .prt-nav-hint-chiudi {
    flex: 0 0 auto;
    align-self: center;
    border: 2px solid #2b2100 !important;
    border-radius: 999px !important;
    background: #2b2100 !important;
    color: #ffcf33 !important;
    -webkit-text-fill-color: #ffcf33 !important;
    padding: 5px 12px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    text-shadow: none;
}

.prt-nav-hint .prt-nav-hint-chiudi:hover,
.prt-nav-hint .prt-nav-hint-chiudi:focus-visible,
#calcolatoreSegnatureV2ProdottiApp .prt-nav-hint .prt-nav-hint-chiudi:hover,
#calcolatoreSegnatureV2ProdottiApp .prt-nav-hint .prt-nav-hint-chiudi:focus-visible {
    background: #ffffff !important;
    color: #2b2100 !important;
    -webkit-text-fill-color: #2b2100 !important;
    border-color: #2b2100 !important;
}

@keyframes prt-nav-hint-salta {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Alone che si allarga e si richiude: prende l'occhio senza spostare niente,
   quindi non fa ballare il modulo sotto. */
@keyframes prt-nav-hint-respira {
    0%, 100% { box-shadow: 0 8px 22px rgba(23, 29, 38, 0.26),
                           0 0 0 4px rgba(255, 193, 7, 0.24); }
    50%      { box-shadow: 0 8px 22px rgba(23, 29, 38, 0.26),
                           0 0 0 9px rgba(255, 193, 7, 0.10); }
}

@keyframes prt-nav-hint-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes prt-nav-hint-esce {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .prt-nav-hint,
    .prt-nav-hint.is-uscita,
    .prt-nav-hint-freccia {
        animation: none;
    }
}

/* ============================================================================
   Avviso di chiusura
   ----------------------------------------------------------------------------
   Le date di chiusura arrivano dal gestionale insieme all'elenco prodotti e
   spostano gia' in avanti le date di consegna mostrate nelle card. Questo
   avviso spiega al cliente perche' quella data e' piu' lontana del solito.

   Stessi colori della nuvoletta di navigazione, e per le stesse due ragioni.
   Primo: scritti in esadecimale, non in variabile, cosi' il giallo non cambia
   col template. Secondo: il <style> del configuratore viene dopo questo foglio,
   quindi a parita' di peso vincerebbe lui — il selettore raddoppiato con l'id
   dell'app e il colore imposto sono la stessa medicina gia' usata per il
   pulsante "Ho capito", che senza usciva nero su nero.
   ========================================================================= */

.v2-chiusura-avviso-host:empty {
    display: none;
}

.v2-chiusura-avviso,
#calcolatoreSegnatureV2ProdottiApp .v2-chiusura-avviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid rgba(150, 106, 0, 0.85) !important;
    background: linear-gradient(180deg,
        #ffc107 0%,
        #f0ad00 100%) !important;
    box-shadow: 0 8px 22px rgba(23, 29, 38, 0.26),
                0 0 0 4px rgba(255, 193, 7, 0.24);
    color: #2b2100 !important;
    -webkit-text-fill-color: #2b2100;
    font-family: var(--ev-font-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    animation: v2-chiusura-avviso-entra 260ms ease-out both;
}

/* Pastiglia nera con il punto esclamativo giallo: stessa coppia del pulsante
   "Ho capito" della nuvoletta. */
.v2-chiusura-avviso .v2-chiusura-avviso-icona,
#calcolatoreSegnatureV2ProdottiApp .v2-chiusura-avviso .v2-chiusura-avviso-icona {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #2b2100 !important;
    color: #ffcf33 !important;
    -webkit-text-fill-color: #ffcf33;
    font-family: var(--ev-font-display);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    text-shadow: none;
}

.v2-chiusura-avviso-corpo {
    flex: 1 1 auto;
    min-width: 0;
}

.v2-chiusura-avviso .v2-chiusura-avviso-titolo,
#calcolatoreSegnatureV2ProdottiApp .v2-chiusura-avviso .v2-chiusura-avviso-titolo {
    margin: 0 0 4px;
    font-family: var(--ev-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2b2100 !important;
    -webkit-text-fill-color: #2b2100;
}

.v2-chiusura-avviso .v2-chiusura-avviso-testo,
#calcolatoreSegnatureV2ProdottiApp .v2-chiusura-avviso .v2-chiusura-avviso-testo {
    margin: 0;
    color: #2b2100 !important;
    -webkit-text-fill-color: #2b2100;
}

/* Le date sono cio' che il cliente cerca: staccate dal resto da un velo piu'
   scuro, si leggono senza dover leggere la frase. */
.v2-chiusura-avviso .v2-chiusura-avviso-testo strong,
#calcolatoreSegnatureV2ProdottiApp .v2-chiusura-avviso .v2-chiusura-avviso-testo strong {
    padding: 0 5px;
    border-radius: 4px;
    background: rgba(43, 33, 0, 0.13);
    color: #2b2100 !important;
    -webkit-text-fill-color: #2b2100;
    font-weight: 800;
    white-space: nowrap;
}

.v2-chiusura-avviso .v2-chiusura-avviso-nota,
#calcolatoreSegnatureV2ProdottiApp .v2-chiusura-avviso .v2-chiusura-avviso-nota {
    margin: 7px 0 0;
    color: rgba(43, 33, 0, 0.82) !important;
    -webkit-text-fill-color: rgba(43, 33, 0, 0.82);
    font-size: 12.5px;
    font-weight: 600;
}

/* Nella nota il grassetto basta da solo: il velo, a questo corpo, impasta. */
.v2-chiusura-avviso .v2-chiusura-avviso-nota strong,
#calcolatoreSegnatureV2ProdottiApp .v2-chiusura-avviso .v2-chiusura-avviso-nota strong {
    color: #2b2100 !important;
    -webkit-text-fill-color: #2b2100;
    font-weight: 800;
    white-space: nowrap;
}

.v2-chiusura-avviso .v2-chiusura-avviso-chiudi,
#calcolatoreSegnatureV2ProdottiApp .v2-chiusura-avviso .v2-chiusura-avviso-chiudi {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 2px 8px;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(43, 33, 0, 0.12) !important;
    color: #2b2100 !important;
    -webkit-text-fill-color: #2b2100;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    text-shadow: none;
}

.v2-chiusura-avviso .v2-chiusura-avviso-chiudi:hover,
.v2-chiusura-avviso .v2-chiusura-avviso-chiudi:focus-visible,
#calcolatoreSegnatureV2ProdottiApp .v2-chiusura-avviso .v2-chiusura-avviso-chiudi:hover,
#calcolatoreSegnatureV2ProdottiApp .v2-chiusura-avviso .v2-chiusura-avviso-chiudi:focus-visible {
    background: #2b2100 !important;
    color: #ffcf33 !important;
    -webkit-text-fill-color: #ffcf33;
}

.v2-chiusura-avviso .v2-chiusura-avviso-chiudi:focus-visible {
    outline: 2px solid #2b2100;
    outline-offset: 2px;
}

@keyframes v2-chiusura-avviso-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .v2-chiusura-avviso {
        animation: none;
    }
}

/* --- Prezzo personalizzato del cliente -------------------------------------
   La personalizzazione non si dichiara mai: niente listino cancellato, niente
   percentuale, niente pastiglia. Il cliente vede un prezzo solo, ed e' il suo.
   L'unico segno e' la tinta della cifra, la stessa della targhetta del tipo
   consegna nella card: un riferimento visivo per chi sa cosa guardare, muto per
   chiunque altro. Vale per lo sconto come per il ricarico; a percentuale zero la
   cifra resta quella normale. */

.v2-consegna-price.is-personalizzato {
    /* Estremo scuro della sfumatura della targhetta: dei due e' l'unico che sul
       fondo bianco della card si legge davvero. Le variabili --v2-choice-* le
       scrive il JS sulla label, quindi la cifra prende il colore della sua card. */
    color: hsl(var(--v2-choice-h-dark, 20), var(--v2-choice-s-dark, 78%), var(--v2-choice-l-dark, 32%));
    /* Il prezzo normale e' volutamente smorzato: qui la tinta deve arrivare pulita. */
    opacity: 1;
    font-weight: 800;
}

/* ── Riordino ──────────────────────────────────────────────────────────────
   Il banner che apre una configurazione recuperata da un ordine precedente.
   Deve leggersi prima del configuratore, non accanto: chi riordina sta per
   dare per scontate tre cose sbagliate — prezzo, consegna e file — e questa
   e' l'unica riga che glielo dice. */
.prt-riordino-avviso {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--ev-line-strong, #d8d8d8);
    border-left: 4px solid var(--ev-primary, #1c3d5c);
    border-radius: 6px;
    background: var(--ev-surface-sunken, #f6f7f9);
    color: var(--ev-ink, #222);
    font-family: var(--ev-font-text, inherit);
    font-size: 0.95rem;
    line-height: 1.5;
}

.prt-riordino-avviso strong {
    color: var(--ev-primary, #1c3d5c);
}

/* Quando qualcosa non e' sopravvissuto il tono cambia: non e' piu' una nota,
   e' una cosa da guardare prima di pagare. */
.prt-riordino-avviso[data-review="1"] {
    border-left-color: rgb(var(--ev-danger-rgb, 200 60 40));
}

.prt-riordino-avviso__review {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--ev-line, #e4e4e4);
    color: var(--ev-ink, #222);
}

.prt-riordino-avviso__review ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.prt-riordino-avviso__review li {
    margin: 0.15rem 0;
}