/**
 * ARTÈORA V2 — Layout v0.9
 * Caricato solo nel prodotto "cinturino-personalizzato-v2".
 */

/* =========================================================
   1. PAGINA PRODOTTO: PULIZIA IMMEDIATA
   La classe arteora-v2-active viene aggiunta lato PHP, quindi
   queste regole entrano in funzione prima dell'esecuzione JS.
========================================================= */

.arteora-v2-active .woocommerce-product-gallery,
.arteora-v2-active h1.product_title.entry-title,
.arteora-v2-active .summary.entry-summary > p.price,
.arteora-v2-active .entry-summary-items > p.price,
.arteora-v2-active span.ct-product-divider {
    display: none !important;
}

.arteora-v2-active .summary.entry-summary {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.arteora-v2-active .product-entry-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
}

.arteora-v2-active div.product {
    gap: 0 !important;
}

/* Nasconde la vecchia barra multistep WCPA */
.arteora-v2-active .wcpa_multistep_progress_container {
    display: none !important;
}

/* Evita il flash/skeleton del vecchio configuratore durante il caricamento. */
.arteora-v2-active:not(.arteora-v2-ready) .wcpa_form_outer {
    visibility: hidden !important;
    opacity: 0 !important;
}

.arteora-v2-active.arteora-v2-ready .wcpa_form_outer {
    visibility: visible !important;
    opacity: 1 !important;
}


/* =========================================================
   2. AREA SUPERIORE: RIEPILOGO + PREVIEW
========================================================= */

#arteora-v2-workspace {
    display: grid;
    grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
    gap: 18px;
    width: 100%;
    margin: 10px 0 12px;
    align-items: stretch;
}

#arteora-v2-summary {
    min-width: 0;
    padding: 13px 15px;
    background: #f7f5f1;
    border: 1px solid #e7e0d6;
    border-radius: 10px;
}

#arteora-v2-summary-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #ded5c8;
}

#arteora-v2-summary-title {
    min-width: 0;
    color: #3e3727;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

#arteora-v2-summary-price {
    flex: 0 0 auto;
    margin-left: auto;
    color: #3e3727;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}

#arteora-v2-summary-price .amount,
#arteora-v2-summary-price bdi {
    color: inherit;
    font: inherit;
}

#arteora-v2-summary-price del {
    margin-right: 5px;
    opacity: .55;
    font-size: 12px;
}

#arteora-v2-summary-price ins {
    text-decoration: none;
}

#arteora-v2-summary-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#arteora-v2-summary-empty {
    color: #81786c;
    font-size: 11px;
    line-height: 1.25;
}

.arteora-v2-summary-item {
    display: grid;
    grid-template-columns: minmax(80px, 42%) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    padding: 4px 0;
    border: 0;
    border-bottom: 1px solid #e7e0d6;
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.arteora-v2-summary-item:last-child {
    border-bottom: 0;
}

.arteora-v2-summary-item:hover {
    background: transparent;
    color: inherit;
}

.arteora-v2-summary-label {
    color: #7b7165;
    font-size: 10.5px;
    line-height: 1.15;
}

.arteora-v2-summary-value {
    min-width: 0;
    color: #3e3727;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

#arteora-v2-preview-panel {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 10px;
    background: #f7f5f1;
    border: 1px solid #e7e0d6;
    border-radius: 10px;
}

#arteora-v2-preview {
    position: relative;
    width: min(100%, 640px);
    margin: 0 auto;
    aspect-ratio: 2048 / 682;
    overflow: hidden;
    background: #f7f5f1;
}

#arteora-v2-model-lining,
#arteora-v2-model-front {
    position: absolute;
    inset: 0;
}

/* Layer grafici universali: tutti gli asset sono allineati allo stesso canvas. */
.arteora-v2-generic-layer {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 102.14% 102.14%;
}


/* Quote dinamiche: SVG + numeri sovrapposti sullo stesso canvas. */
.arteora-v2-measurement-layer {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 102.14% 102.14%;
}

.arteora-v2-measurement-text {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    color: #111111;
    text-align: center;
    pointer-events: none;
}

#arteora-v2-preview-message {
    position: absolute;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #766d62;
    font-size: 14px;
    text-align: center;
}


/* =========================================================
   3. WCPA: NASCONDE LE TESTATE DEI PASSAGGI GIÀ SCELTI
========================================================= */

.arteora-v2-active .wcpa_form_outer .wcpa_section_head {
    display: none !important;
}

/* I pulsanti WCPA restano funzionali ma non vengono mostrati: li comanda la barra V2. */
.arteora-v2-active .wcpa_form_outer .wcpa_multistep_nav {
    display: none !important;
}


/* =========================================================
   4. BARRA STEP V2: INDIETRO | TITOLO | AVANTI
========================================================= */

#arteora-v2-stepbar {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 110px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 38px;
    margin: 0 0 8px;
    border-top: 1px solid #e7e0d6;
    border-bottom: 1px solid #e7e0d6;
}

#arteora-v2-step-title {
    min-width: 0;
    color: #3e3727;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.arteora-v2-step-button {
    min-height: 32px;
    padding: 5px 10px;
    border: 0;
    background: transparent;
    color: #5c5247;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

#arteora-v2-prev { text-align: left; }
#arteora-v2-next { text-align: right; }

.arteora-v2-step-button:hover {
    background: transparent;
    color: #2f2a24;
}

.arteora-v2-step-button:disabled {
    opacity: .35;
    cursor: default;
}


/* =========================================================
   5. SPAZIATURA DEL CONFIGURATORE
========================================================= */

.arteora-v2-active .wcpa_form_outer {
    width: 100%;
    margin-top: 0;
}

.arteora-v2-active .wcpa_wrap {
    width: 100%;
}


/* =========================================================
   6. TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
    #arteora-v2-workspace {
        grid-template-columns: minmax(190px, 30%) minmax(0, 1fr);
        gap: 14px;
    }

    #arteora-v2-summary {
        padding: 12px 13px;
    }

    #arteora-v2-preview-panel {
        padding: 8px;
    }
}


/* =========================================================
   7. MOBILE: PREVIEW SOPRA, RIEPILOGO NASCOSTO
========================================================= */

@media (max-width: 767px) {
    #arteora-v2-workspace {
        display: block;
        margin: 8px 0 10px;
    }

    #arteora-v2-summary {
        display: none !important;
    }

    #arteora-v2-preview-panel {
        width: 100%;
        padding: 10px;
        border-radius: 8px;
    }

    #arteora-v2-preview {
        width: 100%;
    }

    #arteora-v2-preview-message {
        padding: 12px;
        font-size: 12px;
    }
}


@media (max-width: 767px) {
    #arteora-v2-stepbar {
        grid-template-columns: 78px minmax(0, 1fr) 78px;
        gap: 4px;
        min-height: 36px;
        margin-bottom: 7px;
    }

    #arteora-v2-step-title {
        font-size: 12px;
    }

    .arteora-v2-step-button {
        padding: 4px 5px;
        font-size: 11px;
    }
}

/* =========================================================
   TEST LAYOUT VERTICALE DESKTOP — 2026-10-06
   SOLO PRESENTAZIONE: il canvas interno resta 2048x682.
   Nessun layer, coordinata o logica JS viene ruotata/modificata.
========================================================= */

@media (min-width: 1200px) {
    /*
     * Il form cart diventa il contenitore a due colonne.
     * SINISTRA 2/3: riepilogo, navigazione, opzioni, carrello.
     * DESTRA 1/3: anteprima verticale sticky.
     */
    .arteora-v2-active form.cart {
        display: grid !important;
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        column-gap: 24px;
        align-items: start;
    }

    /* I figli del vecchio workspace partecipano direttamente alla griglia. */
    .arteora-v2-active #arteora-v2-workspace {
        display: contents;
    }

    /* Per sicurezza, tutto ciò che appartiene al form resta nella colonna sinistra. */
    .arteora-v2-active form.cart > * {
        grid-column: 1;
        min-width: 0;
    }

    /* Recap compatto in alto a sinistra. */
    .arteora-v2-active #arteora-v2-summary {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        margin: 0 0 10px;
        padding: 10px 13px;
    }

    .arteora-v2-active #arteora-v2-summary-header {
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .arteora-v2-active .arteora-v2-summary-item {
        padding: 3px 0;
    }

    /* Navigazione e opzioni sotto al recap. */
    .arteora-v2-active #arteora-v2-stepbar {
        grid-column: 1;
        width: 100%;
        margin-top: 0;
    }

    .arteora-v2-active .wcpa_form_outer {
        grid-column: 1;
        width: 100%;
    }

    /*
     * Colonna destra: il pannello è verticale e rimane visibile durante lo scroll.
     * Il canvas orizzontale viene ruotato solo visivamente di 90 gradi.
     */
    .arteora-v2-active #arteora-v2-preview-panel {
        grid-column: 2;
        grid-row: 1 / span 20;
        position: sticky;
        top: 105px;
        align-self: start;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: min(680px, calc(100vh - 130px));
        min-height: 520px;
        margin: 0;
        padding: 12px;
        overflow: hidden;
    }

    .arteora-v2-active #arteora-v2-preview {
        /*
         * Prima della rotazione resta un canvas 2048:682.
         * Dopo rotate(90deg) la sua altezza visiva corrisponde a questa width.
         */
        width: min(640px, calc(100vh - 170px));
        max-width: none;
        flex: 0 0 auto;
        margin: 0;
        transform: rotate(90deg);
        transform-origin: center center;
    }
}

/*
 * Tablet e mobile restano ESATTAMENTE nel layout orizzontale precedente.
 * Il test verticale entra in funzione solo da 1101px in su.
 */


/* =========================================================
   TEST LAYOUT VERTICALE DESKTOP v0.12 — 2026-10-06
   Tre sezioni integrate: RECAP | SELETTORE | PREVIEW.
   Il canvas grafico resta 2048x682 orizzontale e viene ruotato
   solo nella presentazione desktop.
========================================================= */

@media (min-width: 1200px) {
    /* Usa quasi tutta la larghezza disponibile della pagina prodotto. */
    body.arteora-v2-active #main .ct-container,
    body.arteora-v2-active #main .ct-container-full {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.arteora-v2-active #main div.product,
    body.arteora-v2-active #main .product-entry-wrapper,
    body.arteora-v2-active #main .summary.entry-summary {
        width: 100% !important;
        max-width: none !important;
    }

    /*
     * TRE COLONNE:
     * 1 = recap compatto
     * 2 = selettore WCPA, prende tutto lo spazio residuo
     * 3 = anteprima verticale più stretta
     */
    .arteora-v2-active form.cart {
        display: grid !important;
        grid-template-columns:
            clamp(210px, 16vw, 280px)
            minmax(0, 1fr)
            clamp(285px, 23vw, 390px) !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        align-items: start;
        width: 100%;
        margin: 0 !important;
        /*border: 1px solid #e2dbd0;*/
        border-radius: 0;
        background: #fff;
    }

    /* I due elementi del workspace entrano direttamente nella griglia del form. */
    .arteora-v2-active #arteora-v2-workspace {
        display: contents;
    }

    /* Tutti gli elementi normali del form appartengono alla colonna centrale. */
    .arteora-v2-active form.cart > * {
        grid-column: 2;
        min-width: 0;
    }

    /* -----------------------------------------------------
       COLONNA 1 — RECAP
    ----------------------------------------------------- */
    .arteora-v2-active #arteora-v2-summary {
        grid-column: 1 !important;
        grid-row: 1 / span 30 !important;
        position: sticky;
        top: 105px;
        align-self: start;
        width: 100%;
        max-height: calc(100vh - 125px);
        margin: 0 !important;
        padding: 14px 14px 16px;
        overflow: auto;
        background: #f8f6f2;
        border: 0;
        border-right: 1px solid #e2dbd0;
        border-radius: 0;
        box-shadow: none;
    }

    .arteora-v2-active #arteora-v2-summary-header {
        margin-bottom: 7px;
        padding-bottom: 8px;
    }

    .arteora-v2-active .arteora-v2-summary-item {
        grid-template-columns: minmax(72px, 40%) minmax(0, 1fr);
        gap: 7px;
        padding: 4px 0;
    }

    /* -----------------------------------------------------
       COLONNA 2 — NAVIGAZIONE + OPZIONI
    ----------------------------------------------------- */
    .arteora-v2-active #arteora-v2-stepbar {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100%;
        min-height: 46px;
        margin: 0 !important;
        padding: 0 16px;
        border-top: 0;
        border-bottom: 1px solid #e2dbd0;
        background: #fbfaf8;
    }

    .arteora-v2-active .wcpa_form_outer {
        grid-column: 2 !important;
        grid-row: 2 / span 28 !important;
        width: 100%;
        margin: 0 !important;
        padding: 18px 20px 22px;
        background: #fff;
    }

    /* Quantità, add-to-cart e altri eventuali figli successivi restano al centro. */
    .arteora-v2-active form.cart > .quantity,
    .arteora-v2-active form.cart > .single_add_to_cart_button,
    .arteora-v2-active form.cart > .woocommerce-variation-add-to-cart,
    .arteora-v2-active form.cart > .wcpa_price_summary {
        grid-column: 2 !important;
    }

    /* -----------------------------------------------------
       COLONNA 3 — PREVIEW VERTICALE
    ----------------------------------------------------- */
    .arteora-v2-active #arteora-v2-preview-panel {
        grid-column: 3 !important;
        grid-row: 1 / span 30 !important;
        position: sticky;
        top: 105px;
        align-self: start;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: min(720px, calc(100vh - 125px));
        min-height: 540px;
        margin: 0 !important;
        padding: 4px 0;
        overflow: hidden;
        background: #f8f6f2;
        border: 0;
        border-left: 1px solid #e2dbd0;
        border-radius: 0;
        box-shadow: none;
    }

    .arteora-v2-active #arteora-v2-preview {
        /*
         * Il file resta 2048x682. La rotazione è solo visiva.
         * Un leggero zoom (1.10) recupera parte del vuoto interno
         * senza richiedere modifiche ai layer.
         */
        width: min(650px, calc(100vh - 155px));
        max-width: none;
        flex: 0 0 auto;
        margin: 0;
        transform: rotate(90deg) scale(1.10);
        transform-origin: center center;
    }
}


/* =========================================================
   RIFINITURA ESTETICA DESKTOP v0.13 — 2026-10-06
   Tre fasce continue: RECAP | CONFIGURATORE | PREVIEW.
   Solo presentazione: nessuna modifica al motore/layer V2.
========================================================= */

@media (min-width: 1200px) {
    /*
     * Proporzioni più equilibrate:
     * recap leggibile ma compatto, centro dominante,
     * preview stretta ma sufficiente per il cinturino verticale.
     */
    .arteora-v2-active form.cart {
        grid-template-columns:
            clamp(225px, 17.5vw, 300px)
            minmax(0, 1fr)
            clamp(300px, 23.5vw, 405px) !important;
        position: relative;
        overflow: visible;
        border-color: #ded7cc;

        /*
         * Fondo continuo delle tre sezioni: evita l'effetto "card sospese".
         * Le percentuali seguono visivamente le tre aree; i veri separatori
         * restano i border delle colonne, quindi il layout continua ad adattarsi.
         */
        background: #ffffff;
    }

    /* RECAP: più leggibile e con identità propria. */
    .arteora-v2-active #arteora-v2-summary {
        min-height: calc(100vh - 125px);
        max-height: calc(100vh - 125px);
        padding: 16px 16px 18px;
        background: #f6f2eb;
        border-right: 1px solid #dcd4c8;
        scrollbar-width: thin;
    }

    .arteora-v2-active #arteora-v2-summary-header {
        margin-bottom: 9px;
        padding-bottom: 10px;
        border-bottom-color: #d8cfc2;
    }

    .arteora-v2-active #arteora-v2-summary-title {
        font-size: 13.5px;
        font-weight: 650;
        letter-spacing: .015em;
    }

    .arteora-v2-active #arteora-v2-summary-price {
        font-size: 14px;
        font-weight: 650;
    }

    .arteora-v2-active .arteora-v2-summary-item {
        grid-template-columns: minmax(78px, 42%) minmax(0, 1fr);
        gap: 9px;
        padding: 6px 0;
        border-bottom-color: #e1d9cd;
    }

    .arteora-v2-active .arteora-v2-summary-label {
        color: #817668;
        font-size: 11px;
        line-height: 1.25;
    }

    .arteora-v2-active .arteora-v2-summary-value {
        color: #342f28;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.25;
    }

    .arteora-v2-active .arteora-v2-summary-item:hover {
        background: rgba(255,255,255,.42);
    }

    /* CENTRO: più aria e gerarchia, ma rimane la zona dominante. */
    .arteora-v2-active #arteora-v2-stepbar {
        min-height: 50px;
        padding: 0 22px;
        background: #faf9f7;
        border-bottom-color: #ded7cc;
    }

    .arteora-v2-active #arteora-v2-step-title {
        font-size: 14.5px;
        letter-spacing: .005em;
    }

    .arteora-v2-active .wcpa_form_outer {
        min-height: calc(100vh - 175px);
        padding: 24px 28px 30px;
        background: #ffffff;
    }

    /* PREVIEW: fascia continua, più pulita e cinturino più presente. */
    .arteora-v2-active #arteora-v2-preview-panel {
        height: calc(100vh - 125px);
        min-height: 560px;
        max-height: none;
        padding: 0;
        background: #f4f1eb;
        border-left: 1px solid #dcd4c8;
    }

    .arteora-v2-active #arteora-v2-preview {
        width: min(680px, calc(100vh - 145px));
        transform: rotate(90deg) scale(1.18);
    }

    /* Il messaggio iniziale resta centrato anche nel nuovo visualizzatore. */
    .arteora-v2-active #arteora-v2-preview-message {
        font-size: 13px;
    }
}


/* =========================================================
   DESKTOP v0.14 — COLONNE LATERALI SIMMETRICHE
   RECAP | CONFIGURATORE | PREVIEW
   - sinistra e destra della stessa larghezza
   - preview verticale sempre contenuta nell'altezza utile
   - il centro prende tutto lo spazio restante
========================================================= */

@media (min-width: 1200px) {

    .arteora-v2-active form.cart {
        grid-template-columns:
            clamp(220px, 16vw, 285px)
            minmax(0, 1fr)
            clamp(220px, 16vw, 285px) !important;
    }

    .arteora-v2-active #arteora-v2-preview-panel {
        height: calc(100vh - 125px);
        min-height: 0;
        padding: 10px 8px;
        overflow: hidden;
    }

    .arteora-v2-active #arteora-v2-preview {
        /*
         * Il canvas sorgente resta orizzontale 2048x682.
         * Dopo rotate(90deg), la sua larghezza diventa altezza.
         * La misura qui sotto tiene conto anche dello scale:
         * così l'anteprima completa resta dentro la viewport
         * senza obbligare a scrollare per vederne fondo/cima.
         */
        width: min(
            calc((100vh - 165px) / 1.10),
            610px
        );
        max-width: none;
        transform: rotate(90deg) scale(1.10);
        transform-origin: center center;
    }
}


/* =========================================================
   V0.15 — PERCORSO GUIDATO
   Rende evidente l'azione corrente senza modificare WCPA.
========================================================= */

#arteora-v2-stepbar {
    grid-template-columns: 100px minmax(0, 1fr) 155px;
    min-height: 82px;
    gap: 16px;
    padding: 10px 16px;
    transition: background-color .18s ease, border-color .18s ease;
}

#arteora-v2-step-guide {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
}

#arteora-v2-step-kicker {
    color: #8a7758;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .12em;
}

#arteora-v2-step-title {
    color: #30291f;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.18;
}

#arteora-v2-step-hint {
    max-width: 520px;
    color: #80776c;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.3;
}

#arteora-v2-prev {
    align-self: center;
    color: #776e63;
}

#arteora-v2-next.arteora-v2-continue {
    justify-self: stretch;
    align-self: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #d7cfc3;
    border-radius: 4px;
    background: #f4f1ec;
    color: #8b8276;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.15;
    text-align: center;
    transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

#arteora-v2-next.arteora-v2-continue.is-ready:not(:disabled) {
    border-color: #66583f;
    background: #66583f;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(58, 48, 33, .15);
}

#arteora-v2-next.arteora-v2-continue.is-ready:not(:disabled):hover {
    border-color: #514631;
    background: #514631;
    color: #ffffff;
}

#arteora-v2-stepbar.arteora-v2-step-waiting {
    background: #fbfaf8;
}

#arteora-v2-stepbar.arteora-v2-step-ready {
    background: #faf8f4;
}

#arteora-v2-stepbar.arteora-v2-step-ready #arteora-v2-step-hint {
    color: #66583f;
    font-weight: 550;
}

/* Il passaggio corrente emerge anche nel recap. */
.arteora-v2-summary-item .arteora-v2-summary-label::before {
    display: inline-block;
    width: 13px;
    margin-right: 2px;
    color: #a69a89;
    font-weight: 700;
}

.arteora-v2-summary-complete .arteora-v2-summary-label::before {
    content: "✓";
}

.arteora-v2-summary-current {
    box-shadow: inset 3px 0 0 #8a7758;
    background: rgba(255, 255, 255, .48) !important;
}

.arteora-v2-summary-current .arteora-v2-summary-label::before {
    content: "›";
    color: #66583f;
    font-size: 14px;
}

.arteora-v2-summary-pending .arteora-v2-summary-value {
    color: #765f3d;
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .045em;
}

/* Un richiamo molto discreto verso l'area in cui va fatta la scelta. */
#arteora-v2-stepbar.arteora-v2-step-waiting + .wcpa_form_outer .wcpa_active_step {
    box-shadow: inset 3px 0 0 rgba(138, 119, 88, .38);
}

/* Desktop: mantiene la nuova gerarchia anche sopra gli override v0.14. */
@media (min-width: 1200px) {
    .arteora-v2-active #arteora-v2-stepbar {
        min-height: 82px;
        padding: 10px 18px;
    }

    .arteora-v2-active #arteora-v2-step-title {
        font-size: 17px;
    }

    .arteora-v2-active .wcpa_form_outer {
        min-height: calc(100vh - 207px);
        padding-top: 20px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    #arteora-v2-stepbar {
        grid-template-columns: 88px minmax(0, 1fr) 135px;
        min-height: 76px;
        padding: 9px 12px;
    }

    #arteora-v2-step-title {
        font-size: 15px;
    }

    #arteora-v2-step-hint {
        font-size: 11px;
    }
}

/* Mobile: istruzione sopra, comandi sotto. */
@media (max-width: 767px) {
    #arteora-v2-stepbar {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "guide guide"
            "prev next";
        gap: 8px 10px;
        min-height: 0;
        padding: 10px 12px 11px;
    }

    #arteora-v2-step-guide {
        grid-area: guide;
        align-items: flex-start;
        text-align: left;
    }

    #arteora-v2-prev {
        grid-area: prev;
        justify-self: start;
    }

    #arteora-v2-next {
        grid-area: next;
        justify-self: stretch;
    }

    #arteora-v2-step-kicker {
        font-size: 9.5px;
    }

    #arteora-v2-step-title {
        font-size: 15px;
    }

    #arteora-v2-step-hint {
        font-size: 11px;
    }

    #arteora-v2-next.arteora-v2-continue {
        min-height: 38px;
    }
}


/* =========================================================
   V0.16 — PIÙ SPAZIO AL CONFIGURATORE CENTRALE
   Solo desktop: sidebar compatte, anteprima invariata.
   Non cambia dimensioni, rotazione o coordinate del canvas.
========================================================= */
@media (min-width: 1200px) {
    .arteora-v2-active form.cart {
        grid-template-columns:
            clamp(210px, 12vw, 220px)
            minmax(0, 1fr)
            clamp(235px, 13vw, 245px) !important;
    }

    /* Recap più compatto senza sacrificare i valori selezionati. */
    .arteora-v2-active #arteora-v2-summary {
        padding: 14px 11px 16px;
    }

    .arteora-v2-active #arteora-v2-summary-header {
        gap: 5px;
    }

    .arteora-v2-active #arteora-v2-summary-title {
        font-size: 12.5px;
    }

    .arteora-v2-active #arteora-v2-summary-price {
        font-size: 12.5px;
    }

    .arteora-v2-active .arteora-v2-summary-item {
        grid-template-columns: minmax(70px, 40%) minmax(0, 1fr);
        gap: 6px;
    }

    /* Le opzioni sfruttano anche qualche pixel di padding recuperato. */
    .arteora-v2-active .wcpa_form_outer {
        padding: 22px 18px 28px;
    }

    /* Solo padding esterno: il canvas ruotato resta IDENTICO alla v0.15. */
    .arteora-v2-active #arteora-v2-preview-panel {
        padding: 10px 3px;
    }
}


/* =========================================================
   ARTÈORA V2.2 beta 1 — DUE COLONNE, PREVIEW INVARIATA
   Aggiunte in coda per non alterare le regole esistenti.
========================================================= */
body.arteora-v2-active #arteora-v2-summary { display: none !important; }
body.arteora-v2-active .wcpa_wrap .wcpa_section_head {
  background: #5b5037;
  border-radius: 10px;
  padding: 5px 20px;
}
body.arteora-v2-active .wcpa_wrap .wcpa_section_head :is(h1,h2,h3,h4,h5,h6) { color: #fff; }
body.arteora-v2-active .wcpa_wrap .wcpa_toggle::before,
body.arteora-v2-active .wcpa_wrap .wcpa_toggle::after { background-color: #fff; }
@media (min-width:1200px) {
  body.arteora-v2-active form.cart {
    grid-template-columns: minmax(0,1fr) clamp(235px,13vw,245px) !important;
  }
  body.arteora-v2-active form.cart > *:not(#arteora-v2-workspace) { grid-column: 1 !important; }
  body.arteora-v2-active #arteora-v2-stepbar,
  body.arteora-v2-active .wcpa_form_outer { grid-column: 1 !important; }
  body.arteora-v2-active #arteora-v2-preview-panel {
    grid-column: 2 !important;
    grid-row: 1 / span 30 !important;
    position: sticky !important;
    top: 105px !important;
    align-self: start !important;
    height: calc(100vh - 125px) !important;
  }
}

/* =========================================================
   ARTEORA V2.2 BETA 2 — SEZIONI VERTICALI PROGRESSIVE
   Solo la demo V2; V1 non viene modificata.
   ========================================================= */
body.arteora-v2-active #arteora-v2-stepbar { display: none !important; }
body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin-bottom: 22px !important;
}
body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head {
  display: block !important;
}
body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_body,
body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_content {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
}
body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached .wcpa_multistep_nav {
  display: none !important;
}
body.arteora-v2-active .arteora-v22-continue {
  display: block;
  margin: 18px 0 8px auto;
  padding: 12px 28px;
  border: 0;
  border-radius: 5px;
  background: #5b5037;
  color: white;
  font-weight: 700;
  cursor: pointer;
}
body.arteora-v2-active .arteora-v22-continue[hidden] { display: none !important; }
body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section { scroll-margin-top: 145px; }




/* =========================================================
   ARTEORA V2.2 BETA 3 — STICKY: UNA SOLA RIGA REALE
   Il form WCPA (alto) e la preview (sticky) condividono
   la stessa riga; nessuno span fittizio crea righe vuote.
   ========================================================= */
@media (min-width: 1200px) {
  body.arteora-v2-active form.cart {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(235px, 13vw, 245px) !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    overflow: visible !important;
  }
  body.arteora-v2-active #arteora-v2-workspace { display: contents !important; }
  body.arteora-v2-active #arteora-v2-stepbar,
  body.arteora-v2-active #arteora-v2-summary { display: none !important; }
  body.arteora-v2-active form.cart > .wcpa_form_outer {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    align-self: start !important;
  }
  body.arteora-v2-active form.cart #arteora-v2-preview-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 105px !important;
    align-self: start !important;
    height: calc(100vh - 125px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 3px !important;
    z-index: 2;
  }
  body.arteora-v2-active form.cart > :not(.wcpa_form_outer):not(#arteora-v2-workspace):not(#arteora-v2-stepbar) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* =========================================================
   V2.2 BETA 4 — Preview fixed solo entro il configuratore.
   Lo script assegna le classi di stato al body.
   ========================================================= */
@media (min-width: 1200px) {
  body.arteora-v2-active.arteora-v22-preview-fixed #arteora-v2-preview-panel {
    position: fixed !important;
    top: 105px !important;
    right: var(--arteora-v22-preview-right, 12px) !important;
    left: auto !important;
    width: var(--arteora-v22-preview-width, 245px) !important;
    height: calc(100vh - 125px) !important;
    margin: 0 !important;
    z-index: 20 !important;
  }
  body.arteora-v2-active.arteora-v22-preview-bottom #arteora-v2-preview-panel {
    position: fixed !important;
    top: var(--arteora-v22-preview-bottom-top, 105px) !important;
    right: var(--arteora-v22-preview-right, 12px) !important;
    left: auto !important;
    width: var(--arteora-v22-preview-width, 245px) !important;
    height: calc(100vh - 125px) !important;
    margin: 0 !important;
    z-index: 20 !important;
  }
}

/* Beta 5: il pannello mantiene un'area nella griglia tramite un segnaposto. */
@media (min-width:1200px) {
 body.arteora-v2-active form.cart { position:relative !important; }
 body.arteora-v2-active #arteora-v2-preview-panel { will-change: top; }
}

/* V2.2 BETA 7: preview sempre fissa durante la configurazione.
   Non usare il carrello come punto di arresto: la sua posizione cambia. */
@media (min-width: 1200px) {
  body.arteora-v2-active #arteora-v2-preview-panel {
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* V2.2 BETA 8 — fixed senza salto orizzontale e senza sovrapporre il footer. */
@media (min-width:1200px) {
  body.arteora-v2-active.arteora-v22-preview-fixed #arteora-v2-preview-panel {
    position: fixed !important;
    top: var(--arteora-v22-preview-top, 105px) !important;
    right: var(--arteora-v22-preview-right, 12px) !important;
    left: auto !important;
    width: var(--arteora-v22-preview-width, 245px) !important;
    height: calc(100vh - 125px) !important;
    transform: none !important;
    transition: opacity 180ms ease !important;
    z-index: 20 !important;
  }
  body.arteora-v2-active.arteora-v22-preview-footer #arteora-v2-preview-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* BETA 9: fixed con arresto progressivo al footer; specificita superiore
   alla precedente regola sticky di form.cart. */
@media (min-width: 1200px) {
  body.arteora-v2-active.arteora-v22-preview-fixed form.cart #arteora-v2-preview-panel {
    position: fixed !important;
    top: var(--arteora-v22-preview-top, 105px) !important;
    right: var(--arteora-v22-preview-right, 12px) !important;
    left: auto !important;
    width: var(--arteora-v22-preview-width, 245px) !important;
    height: calc(100vh - 125px) !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    z-index: 20 !important;
  }
  body.arteora-v2-active.arteora-v22-preview-footer form.cart #arteora-v2-preview-panel {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* BETA 11 — preview sotto l'header; nessuna seconda cornice esterna.
   La quota 260px corrisponde a fixedTop nel JS. */
@media (min-width:1200px) {
 body.arteora-v2-active .ct-product-add-to-cart { padding-bottom:300px !important; }
 body.arteora-v2-active.arteora-v22-preview-fixed form.cart #arteora-v2-preview-panel {
   top:var(--arteora-v22-preview-top,260px) !important;
   height:calc(100vh - 280px) !important;
   background:#f8f6f2 !important;
   border:0 !important;
   border-radius:4px !important;
   box-shadow:inset 0 0 0 1px #e9e2d7 !important;
   padding:10px 3px !important;
   box-sizing:border-box !important;
   transition:none !important;
 }
}

/* V2.2 BETA 12 - Titolo sobrio, un solo sfondo, niente doppie cornici.
   Il top e l'altezza del pannello seguono il calcolo JS (250px). */
@media (min-width: 1200px) {
  body.arteora-v2-active.arteora-v22-preview-fixed form.cart #arteora-v2-preview-panel {
    top: var(--arteora-v22-preview-top, 175px) !important;
    height: calc(100vh - 195px) !important;
    background: #f8f6f2 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 36px 3px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body.arteora-v2-active #arteora-v22-preview-heading {
    position: absolute;
    top: 12px;
    left: 9px;
    right: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid #ded7cb;
    color: #5b5037;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .09em;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }
}
@media (max-width: 1199px) {
  body.arteora-v2-active #arteora-v22-preview-heading { display: none; }
}

/* Artèora V2.2 - Intestazione anteprima */
@media (min-width: 1200px) {

  body.arteora-v2-active #arteora-v22-preview-heading {
    display: block !important;
    position: absolute !important;
    top: 8px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;

    padding: 8px 4px 12px !important;

    background: #f8f6f2 !important;
    color: #5b5037 !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    line-height: 1.3 !important;
    text-align: center !important;

    border: none !important;
    box-shadow: none !important;
  }

}

/* Artèora V2.2 - Posizione verticale anteprima */
@media (min-width: 1200px) {
    body.arteora-v2-active form.cart #arteora-v2-preview-panel {
        top: var(--arteora-v22-preview-top, 175px) !important;
    }
}
/* =========================================================
   ARTÈORA V2.2 — BETA 14
   Anteprima responsive per altezza e colonna 265–275px.
   Mantiene il fixed limitato al footer della Beta 13.
   Non modifica il layout tablet/mobile.
   ========================================================= */
@media (min-width: 1200px) {
  body.arteora-v2-active form.cart {
    grid-template-columns: minmax(0, 1fr) clamp(265px, 15vw, 275px) !important;
  }
  body.arteora-v2-active.arteora-v22-preview-fixed form.cart #arteora-v2-preview-panel {
    width: var(--arteora-v22-preview-width, 275px) !important;
    /* L'altezza coincide con il calcolo del limite footer nel JS. */
    height: calc(100vh - 195px) !important;
    height: calc(100dvh - 195px) !important;
    padding: 27px 4px 8px !important;
    background: #f8f6f2 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  body.arteora-v2-active #arteora-v22-preview-heading {
    top: 5px !important;
    padding: 4px 2px 5px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    background: #f8f6f2 !important;
    border: none !important;
  }
  body.arteora-v2-active #arteora-v2-preview {
    /* Altezza visiva dopo rotate = larghezza del canvas * scala.
       Riserva ~62px per titolo, margini e spazio di sicurezza. */
    width: min(660px, calc((100vh - 257px) / 1.10)) !important;
    width: min(660px, calc((100dvh - 257px) / 1.10)) !important;
    max-width: none !important;
    transform: rotate(90deg) scale(1.10) !important;
    transform-origin: center center !important;
  }
}

/* =========================================================
   ARTÈORA V2.2 — BETA 15
   Recupero spazio tra titolo e punta, senza alterare canvas,
   proporzioni, layer o logica di arresto al footer.
   Il canvas ruotato viene traslato SOLO visivamente.
   ========================================================= */
@media (min-width: 1200px) {
  body.arteora-v2-active.arteora-v22-preview-fixed form.cart #arteora-v2-preview {
    position: relative !important;
    top: -40px !important;
  }
}
/* Monitor bassi: traslazione piu moderata per non tagliare la punta. */
@media (min-width: 1200px) and (max-height: 760px) {
  body.arteora-v2-active.arteora-v22-preview-fixed form.cart #arteora-v2-preview {
    top: -18px !important;
  }
}

/* =========================================================
   ARTÈORA V2.2 — BETA 16: anteprima più ampia
   Colonna desktop allargata; titolo e top invariati.
   La dimensione verticale resta vincolata all'altezza
   disponibile per non tagliare quote e cinturino.
   ========================================================= */
@media (min-width: 1200px) {
  body.arteora-v2-active form.cart {
    grid-template-columns: minmax(0, 1fr) clamp(305px, 18vw, 325px) !important;
  }
  body.arteora-v2-active.arteora-v22-preview-fixed form.cart #arteora-v2-preview-panel {
    width: var(--arteora-v22-preview-width, 325px) !important;
  }
  body.arteora-v2-active.arteora-v22-preview-fixed form.cart #arteora-v2-preview {
    /* Più grande orizzontalmente, senza superare il limite verticale. */
    transform: rotate(90deg) scale(1.16) !important;
    width: min(660px, calc((100dvh - 267px) / 1.16)) !important;
  }
}

/* =========================================================
   ARTÈORA V2.2 — BETA 17
   Più superficie utile del canvas ruotato, senza aumentare
   la larghezza della colonna né modificare i singoli layer.
   La Beta 16 annullava lo zoom con un divisore identico
   alla scala: qui recuperiamo 22px di altezza visibile.
   ========================================================= */
@media (min-width: 1200px) {
  body.arteora-v2-active.arteora-v22-preview-fixed form.cart #arteora-v2-preview {
    width: min(660px, calc((100dvh - 245px) / 1.16)) !important;
    transform: rotate(90deg) scale(1.16) !important;
  }
}

/* =========================================================
   ARTÈORA V2.2 — BETA 18
   Mobile verticale: preview nascosta fino alla prima scelta
   del modello; overlay orizzontale sopra la header.
   ========================================================= */
@media (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active:not(.arteora-v22-mobile-preview-open) #arteora-v2-preview-panel {
    display: none !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open #arteora-v2-preview-panel {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 54px 10px 16px !important;
    z-index: 2147483000 !important;
    background: #f8f6f2 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open #arteora-v2-preview {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    width: min(calc(100vw - 20px), calc((100dvh - 90px) * 3)) !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    transform: none !important;
    transform-origin: center center !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open #arteora-v22-preview-heading {
    display: block !important;
    position: absolute !important;
    top: 18px !important;
    left: 55px !important;
    right: 15px !important;
    text-align: center !important;
    background: transparent !important;
    z-index: 2 !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open {
    overflow: hidden !important;
  }
}
#arteora-v22-mobile-close { display: none !important; }
@media (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active.arteora-v22-mobile-preview-open #arteora-v22-mobile-close {
    display: flex !important;
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #5b5037 !important;
    border: 0 !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 4 !important;
  }
}

/* BETA 19 — Overlay mobile nel body, svincolato dalla griglia del form */
@media (max-width: 767px) and (orientation: portrait) {
  html:has(body.arteora-v22-mobile-preview-open) { overflow: hidden !important; }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 64px 12px 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    z-index: 2147483000 !important;
    transform: none !important;
    background: #f8f6f2 !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel #arteora-v2-preview {
    width: min(calc(100vw - 24px), calc((100dvh - 100px) * 3)) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 2048 / 682 !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* =========================================================
   ARTÈORA V2.2 — BETA 20
   Preview mobile compatta SOLO sopra la fascia logo/carrello.
   Resta aperta durante la configurazione; nessun blocco scroll.
   ========================================================= */
@media (max-width: 767px) and (orientation: portrait) {
  html:has(body.arteora-v22-mobile-preview-open),
  body.arteora-v2-active.arteora-v22-mobile-preview-open {
    overflow: auto !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    top: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: clamp(112px, 17dvh, 152px) !important;
    min-height: 0 !important;
    max-height: 152px !important;
    padding: 33px 10px 8px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #f8f6f2 !important;
    z-index: 2147483000 !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel #arteora-v2-preview {
    width: min(calc(100vw - 24px), calc((clamp(112px, 17dvh, 152px) - 47px) * 3)) !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    aspect-ratio: 2048 / 682 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel #arteora-v22-preview-heading {
    top: 8px !important;
    left: 42px !important;
    right: 12px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    padding: 3px 0 !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel #arteora-v22-mobile-close {
    position: absolute !important;
    top: 1px !important;
    left: 5px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 27px !important;
  }
}


/* BETA 21 — Opzioni WCPA: due colonne su smartphone verticale.
   |R = miniature ruotate; |NR (o nessun flag) = orientamento originale.
   Non modifica i layer dell'anteprima. */
@media (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active .wcpa_form_item.arteora-v22-mobile-choices :is(.wcpa_image-group, .wcpa_image_group, .wcpa_image_group_container, .wcpa_image-container, .wcpa_image_container) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
    align-items: start !important;
  }
  body.arteora-v2-active .wcpa_form_item.arteora-v22-mobile-choices .wcpa_image {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.arteora-v2-active .wcpa_form_item.arteora-v22-mobile-rotate .wcpa_image img {
    display: block !important;
    width: 120px !important;
    height: 120px !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: rotate(90deg) !important;
    transform-origin: center center !important;
    margin: 10px auto !important;
  }
}


/* BETA 22 — Griglia effettiva WCPA image-group e rotazione miniature.
   Il Name campo_modello|10|A|R|2 determina la variabile sul gruppo.
   Solo smartphone verticale; anteprima e desktop esclusi. */
@media (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active .wcpa_form_item.arteora-v22-mobile-choices .wcpa_field {
    display: grid !important;
    grid-template-columns: repeat(var(--arteora-v22-mobile-cols, 2), minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
    align-items: start !important;
  }
  body.arteora-v2-active .wcpa_form_item.arteora-v22-mobile-choices .wcpa_field > .wcpa_image {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.arteora-v2-active .wcpa_form_item.arteora-v22-mobile-choices .wcpa_field > .wcpa_image label {
    display: block !important;
    min-width: 0 !important;
  }
  body.arteora-v2-active .wcpa_form_item.arteora-v22-mobile-rotate .wcpa_field > .wcpa_image .wcpa_img_wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: clamp(110px, calc(340px / var(--arteora-v22-mobile-cols, 2)), 260px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  body.arteora-v2-active .wcpa_form_item.arteora-v22-mobile-rotate .wcpa_field > .wcpa_image .wcpa_img_wrap > img {
    display: block !important;
    width: clamp(110px, calc(340px / var(--arteora-v22-mobile-cols, 2)), 260px) !important;
    height: clamp(110px, calc(340px / var(--arteora-v22-mobile-cols, 2)), 260px) !important;
    min-width: 0 !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: rotate(90deg) !important;
    transform-origin: center !important;
    margin: 0 !important;
  }
}

/* BETA 23 — struttura WCPA verificata in DevTools: fieldset > .wcpa_field > .wcpa_image */
@media (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active fieldset.wcpa_field_wrap.arteora-v22-mobile-choices > .wcpa_field {
    display: grid !important;
    grid-template-columns: repeat(var(--arteora-v22-mobile-cols, 2), minmax(0, 1fr)) !important;
    gap: 12px 8px !important;
    align-items: start !important;
    width: 100% !important;
  }
  body.arteora-v2-active fieldset.wcpa_field_wrap.arteora-v22-mobile-choices > .wcpa_field > .wcpa_image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.arteora-v2-active fieldset.wcpa_field_wrap.arteora-v22-mobile-choices > .wcpa_field > .wcpa_image > label {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.arteora-v2-active fieldset.wcpa_field_wrap.arteora-v22-mobile-choices > .wcpa_field > .wcpa_image .wcpa_img_wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  body.arteora-v2-active fieldset.wcpa_field_wrap.arteora-v22-mobile-rotate > .wcpa_field > .wcpa_image .wcpa_img_wrap {
    height: clamp(100px, calc(340px / var(--arteora-v22-mobile-cols, 2)), 240px) !important;
  }
  body.arteora-v2-active fieldset.wcpa_field_wrap.arteora-v22-mobile-rotate > .wcpa_field > .wcpa_image .wcpa_img_wrap > img {
    display: block !important;
    width: clamp(100px, calc(340px / var(--arteora-v22-mobile-cols, 2)), 240px) !important;
    height: clamp(100px, calc(340px / var(--arteora-v22-mobile-cols, 2)), 240px) !important;
    max-width: none !important;
    object-fit: contain !important;
    transform: rotate(90deg) !important;
    transform-origin: center !important;
    margin: 0 !important;
  }
}

/* BETA 28 — lente nella preview mobile e zoom a tutto schermo. */
#arteora-v22-zoom-modal[hidden] { display: none !important; }
@media (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel #arteora-v22-zoom-button {
    position: absolute !important; left: 9px !important; bottom: 7px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 34px !important; height: 34px !important; border-radius: 50% !important;
    background: rgba(255,255,255,.94) !important; border: 1px solid #b9b3aa !important;
    color: #242424 !important; z-index: 10 !important; padding: 5px !important;
    cursor: pointer !important; box-shadow: 0 1px 5px #0002 !important;
  }
  body.arteora-v22-zoom-open { overflow: hidden !important; }
  body > #arteora-v22-zoom-modal:not([hidden]) {
    position: fixed !important; inset: 0 !important; width: 100vw !important;
    height: 100vh !important; height: 100dvh !important;
    display: block !important; background: #f8f6f2 !important;
    z-index: 2147483646 !important; overflow: hidden !important;
    padding: 0 !important; margin: 0 !important;
  }
  body > #arteora-v22-zoom-modal #arteora-v22-zoom-close {
    position: absolute !important; top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: 46px !important; height: 46px !important; border-radius: 50% !important;
    background: #fff !important; color: #222 !important; border: 1px solid #c6c1b9 !important;
    font-size: 34px !important; line-height: 1 !important; z-index: 5 !important;
    cursor: pointer !important;
  }
  body > #arteora-v22-zoom-modal #arteora-v2-preview {
    position: absolute !important; left: 50% !important; top: 50% !important;
    width: min(calc(100dvh - 100px), calc((100vw - 28px) * 3)) !important;
    max-width: none !important; height: auto !important; aspect-ratio: 2048 / 682 !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center !important; margin: 0 !important;
    display: block !important; overflow: visible !important;
  }
}
@media (min-width: 768px), (orientation: landscape) {
  #arteora-v22-zoom-button { display: none !important; }
}


/* ARTÈORA V2.2 — Conferma chiusura anteprima fissa mobile (Beta 29).
   L'icona nel messaggio è solo informativa: il pulsante di riapertura arriverà dopo. */
#arteora-v22-close-confirm[hidden] { display: none !important; }
@media (max-width: 767px) and (orientation: portrait) {
  body > #arteora-v22-close-confirm:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483645 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: rgba(28, 26, 23, .55) !important;
  }
  #arteora-v22-close-confirm .arteora-v22-close-confirm-card {
    width: min(100%, 350px) !important;
    padding: 24px 20px 20px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    background: #f8f6f2 !important;
    box-shadow: 0 12px 38px rgba(0,0,0,.22) !important;
    text-align: center !important;
    color: #30291f !important;
  }
  #arteora-v22-close-confirm-title {
    margin: 0 0 12px !important;
    color: #30291f !important;
    font-size: 19px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
  }
  #arteora-v22-close-confirm-desc {
    margin: 0 0 22px !important;
    color: #655c50 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  #arteora-v22-close-confirm .arteora-v22-confirm-eye {
    display: inline-flex !important;
    vertical-align: middle !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 2px !important;
    color: #3e3727 !important;
  }
  #arteora-v22-close-confirm .arteora-v22-close-confirm-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  #arteora-v22-close-confirm .arteora-v22-close-confirm-actions button {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
  }
  #arteora-v22-close-confirm .arteora-v22-close-confirm-cancel {
    background: #fff !important;
    border: 1px solid #c9c0b2 !important;
    color: #3e3727 !important;
  }
  #arteora-v22-close-confirm .arteora-v22-close-confirm-accept {
    background: #3e3727 !important;
    border: 1px solid #3e3727 !important;
    color: #fff !important;
  }
}


/* =============================================================
   ARTÈORA V2.2 — BETA 30/32: intestazioni leggere su TUTTI i dispositivi
   L’icona di riapertura preview resta SOLO su smartphone verticale.
   ============================================================= */
.arteora-v22-reopen-preview { display: none !important; }
  body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: 32px !important;
    margin: 0 0 8px !important;
    padding: 7px 12px !important;
    background: #f4f0e9 !important;
    color: #554937 !important;
    border: 1px solid #e9e1d5 !important;
    border-left: 2px solid #9d8c73 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: .005em !important;
  }
  body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head :is(.wcpa_section_title, h1, h2, h3, h4, h5, h6) {
    margin: 0 !important;
    padding: 0 !important;
    color: #554937 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: .005em !important;
  }
  body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head .wcpa_toggle::before,
  body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head .wcpa_toggle::after {
    background-color: #655640 !important;
  }
@media (max-width: 767px) and (orientation: portrait) {
  /* Spazio per l’icona 👁, quando presente, senza spostare il titolo. */
  body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head {
    padding-right: 44px !important;
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  /* Il pulsante è presente in ogni intestazione raggiunta, ma compare
     solo dopo che il cliente ha confermato la chiusura della preview. */
  body.arteora-v2-active.arteora-v22-mobile-preview-dismissed .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head > .arteora-v22-reopen-preview {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 50% !important;
    right: 3px !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #655640 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 5 !important;
    -webkit-tap-highlight-color: transparent;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-dismissed .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head > .arteora-v22-reopen-preview:focus-visible {
    outline: 2px solid #8c785a !important;
    outline-offset: 0 !important;
  }
  body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head > .arteora-v22-reopen-preview svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
  }
}


/* =============================================================
   ARTÈORA V2.2 — BETA 32: conferma manuale su TUTTI i dispositivi.
   Il JS mostra il pulsante soltanto dopo aver completato lo step.
   ============================================================= */
  body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section > button.arteora-v22-continue:not([hidden]) {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 34px !important;
    margin: 12px 0 7px auto !important;
    padding: 8px 14px !important;
    border: 1px solid #927958 !important;
    border-radius: 5px !important;
    background: #fffdfa !important;
    color: #57452f !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    box-shadow: 0 1px 4px rgba(58, 48, 33, .10) !important;
    cursor: pointer !important;
    animation: arteora-v22-continue-appear .24s ease-out both;
  }
  body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section > button.arteora-v22-continue:not([hidden]):active {
    background: #f1e9dd !important;
    border-color: #665238 !important;
  }
  body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section > button.arteora-v22-continue:not([hidden]):focus-visible {
    outline: 2px solid #927958 !important;
    outline-offset: 2px !important;
  }
  @keyframes arteora-v22-continue-appear {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
  }
@media (prefers-reduced-motion: reduce) {
  body.arteora-v2-active .arteora-v22-continue { animation: none !important; }
}


/* =============================================================
   ARTÈORA V2.2 — BETA 33: LENTE ANCHE SU DESKTOP A DUE COLONNE
   Da 1101px: anteprima piccola verticale, popup grande orizzontale.
   Il canvas 2048x682 e tutti i layer restano gli stessi.
   Il popup usa ~90% larghezza e ~88% altezza, senza fullscreen API.
   Smartphone verticale: zoom Beta 28 invariato.
   ============================================================= */
@media (min-width: 1200px) {
  body.arteora-v2-active #arteora-v2-preview-panel #arteora-v22-zoom-button {
    position: absolute !important;
    top: 7px !important;
    right: 9px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 150 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 6px !important;
    margin: 0 !important;
    border: 1px solid #c9bda9 !important;
    border-radius: 50% !important;
    background: rgba(255, 253, 249, .97) !important;
    color: #51432f !important;
    box-shadow: 0 2px 7px rgba(52, 43, 30, .12) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }
  body.arteora-v2-active #arteora-v2-preview-panel #arteora-v22-zoom-button:hover {
    border-color: #917858 !important;
    background: #ffffff !important;
  }
  body.arteora-v2-active #arteora-v2-preview-panel #arteora-v22-zoom-button:focus-visible {
    outline: 2px solid #917858 !important;
    outline-offset: 3px !important;
  }
  body.arteora-v22-zoom-open { overflow: hidden !important; }
  body.arteora-v2-active > #arteora-v22-zoom-modal:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: rgba(29, 25, 21, .66) !important;
    z-index: 2147483646 !important;
  }
  /* Card 90-92% dello schermo: finestra ampia ma distinta dal fullscreen. */
  body.arteora-v2-active > #arteora-v22-zoom-modal:not([hidden])::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 1600px);
    height: min(88dvh, 940px);
    background: #f8f6f2;
    border: 1px solid #ded5c8;
    border-radius: 12px;
    box-shadow: 0 22px 65px rgba(0,0,0,.27);
    pointer-events: none;
  }
  body.arteora-v2-active > #arteora-v22-zoom-modal #arteora-v22-zoom-close {
    position: absolute !important;
    top: calc((100dvh - min(88dvh, 940px)) / 2 + 12px) !important;
    right: calc((100vw - min(92vw, 1600px)) / 2 + 12px) !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid #d5c9b8 !important;
    border-radius: 50% !important;
    background: #fffdfa !important;
    color: #4b3d2d !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
  body.arteora-v2-active > #arteora-v22-zoom-modal #arteora-v22-zoom-close:focus-visible {
    outline: 2px solid #917858 !important;
    outline-offset: 3px !important;
  }
  body.arteora-v2-active > #arteora-v22-zoom-modal #arteora-v2-preview {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: block !important;
    width: min(84vw, 1420px, calc((100dvh - 170px) * 2048 / 682)) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 2048 / 682 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    /* Il desktop normale e' ruotato +90deg: tornare a 0deg
       significa ruotare -90deg rispetto alla vista verticale. */
    transform: none !important;
    transform-origin: center center !important;
    z-index: 2 !important;
  }
}

/* BETA 34: lente sopra l'intestazione dell'anteprima desktop (z-index 100).
   Il valore 150 e' gia' impostato nel blocco Beta 33 qui sopra.
   Dimensioni numeri quote gestite dinamicamente dal Core JS. */


/* =============================================================
   ARTÈORA V2.2 — SAFARI / iOS ZOOM FIX
   Preview originale sempre al suo posto; zoom = snapshot separato.
   Alpha mask rasterizzata solo nello zoom (PNG 2048 x 682).
   ============================================================= */
#arteora-v22-zoom-preview {
  position: relative;
  width: min(100%, 640px);
  margin: 0 auto;
  aspect-ratio: 2048 / 682;
  overflow: hidden;
  background: #f7f5f1;
  isolation: isolate;
}
#arteora-v22-zoom-preview > .arteora-v22-zoom-model-front,
#arteora-v22-zoom-preview > .arteora-v22-zoom-model-lining {
  position: absolute;
  inset: 0;
}
#arteora-v22-zoom-preview > .arteora-v22-zoom-message {
  position: absolute;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #766d62;
  font-size: 14px;
  text-align: center;
}
#arteora-v22-zoom-modal.arteora-v22-zoom-rendering::after {
  content: 'Caricamento anteprima…';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: #61594f;
  font: 13px Arial, Helvetica, sans-serif;
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active > #arteora-v22-zoom-modal #arteora-v22-zoom-preview {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(calc(100dvh - 100px), calc((100vw - 28px) * 3)) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 2048 / 682 !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    -webkit-transform: translate(-50%, -50%) rotate(90deg) !important;
  }
}
@media (min-width: 1200px) {
  body.arteora-v2-active > #arteora-v22-zoom-modal #arteora-v22-zoom-preview {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: block !important;
    width: min(84vw, 1420px, calc((100dvh - 170px) * 2048 / 682)) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 2048 / 682 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 2 !important;
  }
}

/* Browser precedenti alle dynamic viewport units (dvh): fallback vh. */
@supports not (height: 100dvh) {
  @media (max-width: 767px) and (orientation: portrait) {
    body.arteora-v2-active > #arteora-v22-zoom-modal #arteora-v22-zoom-preview {
      width: min(calc(100vh - 100px), calc((100vw - 28px) * 3)) !important;
    }
  }
  @media (min-width: 1200px) {
    body.arteora-v2-active > #arteora-v22-zoom-modal #arteora-v22-zoom-preview {
      width: min(84vw, 1420px, calc((100vh - 170px) * 2048 / 682)) !important;
    }
  }
}

/* =============================================================
   ARTÈORA V2.2 — BETA 45: CHECKBOX A DESTRA SOLO CON FLAG |CB
   Esempio WCPA Name: campo_gestionestandard|10|A|CB
   Nessuna regola globale sulle altre checkbox o sugli switch.
   ============================================================= */
body.arteora-v2-active .wcpa_form_outer .wcpa_field_wrap.wcpa_type_checkbox.arteora-v22-checkbox-field {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
body.arteora-v2-active .wcpa_form_outer .arteora-v22-checkbox-field > .wcpa_checkbox {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
}
body.arteora-v2-active .wcpa_form_outer .arteora-v22-checkbox-field label.arteora-v22-checkbox-button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 34px !important;
  margin: 8px 0 7px auto !important;
  padding: 8px 14px !important;
  border: 1px solid #927958 !important;
  border-radius: 5px !important;
  background: #fffdfa !important;
  color: #57452f !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  box-shadow: 0 1px 4px rgba(58, 48, 33, .10) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}
/* WCPA disegna gia' il quadratino tramite .wcpa_checkbox_custom.
   Non mostrare anche il checkbox nativo: era il doppio quadratino Beta44. */
body.arteora-v2-active .wcpa_form_outer .arteora-v22-checkbox-field label.arteora-v22-checkbox-button input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
body.arteora-v2-active .wcpa_form_outer .arteora-v22-checkbox-field label.arteora-v22-checkbox-button > .wcpa_checkbox_custom {
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 15px !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.arteora-v2-active .wcpa_form_outer .arteora-v22-checkbox-field label.arteora-v22-checkbox-button.arteora-v22-checkbox-checked {
  background: #f1e9dd !important;
  border-color: #665238 !important;
}
body.arteora-v2-active .wcpa_form_outer .arteora-v22-checkbox-field label.arteora-v22-checkbox-button:hover {
  background: #f7f1e8 !important;
}
body.arteora-v2-active .wcpa_form_outer .arteora-v22-checkbox-field label.arteora-v22-checkbox-button:focus-within {
  outline: 2px solid #927958 !important;
  outline-offset: 2px !important;
}
@media (max-width: 767px) {
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-checkbox-field label.arteora-v22-checkbox-button {
    min-height: 40px !important;
    padding: 10px 12px !important;
    white-space: normal !important;
  }
}


/* ============================================================
   BETA 47 — SMARTPHONE: UTILIZZO IN VERTICALE
   Safari iOS non consente di bloccare fisicamente l'orientamento
   della pagina. Avviso in landscape, senza modificare WCPA o preview.
   ============================================================ */
#arteora-v22-portrait-notice { display: none; }
@media screen and (orientation: landscape) and (max-width: 1199px) and (max-height: 650px) and (pointer: coarse) {
  body.arteora-v2-active > #arteora-v22-portrait-notice {
    box-sizing: border-box !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 18px max(24px, env(safe-area-inset-right)) 18px max(24px, env(safe-area-inset-left)) !important;
    background: #f8f5ef !important;
    color: #4a4032 !important;
    text-align: center !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
  }
  body.arteora-v2-active #arteora-v22-portrait-notice .arteora-v22-portrait-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 440px !important;
    padding: 14px 18px !important;
    margin: auto !important;
  }
  body.arteora-v2-active #arteora-v22-portrait-notice .arteora-v22-portrait-icon {
    font-size: 45px !important;
    line-height: 1 !important;
    color: #927958 !important;
    margin-bottom: 12px !important;
  }
  body.arteora-v2-active #arteora-v22-portrait-notice h2 {
    font-size: clamp(17px, 3.4vw, 23px) !important;
    font-weight: 600 !important;
    color: #4a4032 !important;
    margin: 0 0 9px !important;
  }
  body.arteora-v2-active #arteora-v22-portrait-notice p {
    font-size: clamp(12px, 2.2vw, 15px) !important;
    line-height: 1.5 !important;
    color: #6b6256 !important;
    margin: 0 !important;
  }
}

/* =========================================================
   ARTÈORA V2.2 — BETA 51: conferma RESET interna alla pagina
   Stile indipendente da WCPA, utilizzabile su desktop e mobile.
   ========================================================= */
body > #arteora-v22-reset-confirm {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  background: rgba(26, 24, 21, .57) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
body > #arteora-v22-reset-confirm .arteora-v22-reset-card {
  width: min(100%, 420px) !important;
  box-sizing: border-box !important;
  padding: 23px 22px 20px !important;
  border: 1px solid #d8cdbd !important;
  border-radius: 12px !important;
  background: #f8f5ef !important;
  color: #4a4032 !important;
  text-align: center !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22) !important;
}
#arteora-v22-reset-confirm .arteora-v22-reset-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 auto 11px;
  border: 1px solid #ad9d85;
  border-radius: 50%;
  color: #5c503f;
  font: 600 17px/1 Arial, sans-serif;
}
#arteora-v22-reset-confirm #arteora-v22-reset-title {
  margin: 0 0 10px !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #3e3727 !important;
}
#arteora-v22-reset-confirm #arteora-v22-reset-description {
  margin: 0 0 21px !important;
  color: #655c50 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
#arteora-v22-reset-confirm .arteora-v22-reset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
#arteora-v22-reset-confirm .arteora-v22-reset-actions button {
  flex: 1 1 145px;
  min-height: 43px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 7px;
  font: 600 13px/1.3 Arial, sans-serif;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
#arteora-v22-reset-confirm .arteora-v22-reset-cancel {
  background: #fff !important;
  border: 1px solid #c9c0b2 !important;
  color: #3e3727 !important;
}
#arteora-v22-reset-confirm .arteora-v22-reset-accept {
  background: #3e3727 !important;
  border: 1px solid #3e3727 !important;
  color: #fff !important;
}
#arteora-v22-reset-confirm .arteora-v22-reset-actions button:focus-visible {
  outline: 2px solid #9e8b6d !important;
  outline-offset: 3px !important;
}
@media (max-width: 480px) {
  body > #arteora-v22-reset-confirm .arteora-v22-reset-card { padding: 19px 16px 16px !important; }
  #arteora-v22-reset-confirm #arteora-v22-reset-title { font-size: 17px !important; }
  #arteora-v22-reset-confirm #arteora-v22-reset-description { font-size: 13px !important; }
}

/* ============================================================
   ARTÈORA V2.2 — BETA 53: FINITURA A SINISTRA, COLORI A DESTRA
   Due colonne DI CAMPI, non due colonne di opzioni radio.
   Funziona per dritto e fodera, senza modificare WCPA o il desktop.
   Classi aggiunte dal JS sul contenitore comune dei due fieldset.
   ============================================================ */
@media screen and (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-pair {
    display: grid !important;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: start !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Annulla larghezze WCPA 2/6 e 4/6, che su mobile
     impilavano i due campi uno sotto l'altro. */
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-pair > .arteora-v22-material-finish,
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-pair > .arteora-v22-material-colors {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    flex-basis: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
  }

  /* Eventuali altri elementi (note o navigazione) non si
     infilano tra le due colonne. */
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-pair > :not(.arteora-v22-material-finish):not(.arteora-v22-material-colors) {
    grid-column: 1 / -1 !important;
  }

  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-finish fieldset,
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-colors fieldset,
  body.arteora-v2-active .wcpa_form_outer fieldset.arteora-v22-material-finish,
  body.arteora-v2-active .wcpa_form_outer fieldset.arteora-v22-material-colors {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Finiture: UNA colonna di voci compatte e ben separate. */
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-finish .wcpa_field {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-finish .wcpa_radio {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e2d9cb !important;
    border-radius: 5px !important;
    background: #fffdfa !important;
    overflow: visible !important;
  }
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-finish .wcpa_radio > label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 6px 5px !important;
    color: #4a4032 !important;
    font-size: 11px !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    cursor: pointer !important;
  }
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-finish .wcpa_radio input[type="radio"] {
    flex: 0 0 14px !important;
    width: 14px !important;
    height: 14px !important;
    margin: 1px 0 0 !important;
  }
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-finish .wcpa_radio label > span:not(.wcpa_tooltip_icon) {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    white-space: normal !important;
  }
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-finish .wcpa_radio .wcpa_tooltip_icon {
    position: relative !important;
    flex: 0 0 auto !important;
    z-index: 5 !important;
    margin-left: auto !important;
  }
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-finish .wcpa_radio:has(input[type="radio"]:checked) {
    border-color: #9d8665 !important;
    background: #f4efe7 !important;
  }
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-finish {
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
  }

  /* I campioni restano nella colonna destra, con due miniature
     per riga: così colori e didascalie non diventano microscopici. */
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-colors .wcpa_field {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: start !important;
  }
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-colors .wcpa_field > .wcpa_image {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-colors .wcpa_img_wrap,
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-colors .wcpa_img_wrap img {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-colors .wcpa_img_wrap img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Su telefoni da 360 px in su, tre campioni per riga mantengono
   la colonna colori compatta; su schermi molto stretti restano due. */
@media screen and (min-width: 360px) and (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-colors .wcpa_field {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Priorità rispetto alla griglia WCPA generica (Beta 23): il
   fieldset dei colori usa già .arteora-v22-mobile-choices. */
@media screen and (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-colors fieldset.wcpa_field_wrap.arteora-v22-mobile-choices > .wcpa_field,
  body.arteora-v2-active .wcpa_form_outer fieldset.wcpa_field_wrap.arteora-v22-mobile-choices.arteora-v22-material-colors > .wcpa_field {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media screen and (min-width: 360px) and (max-width: 767px) and (orientation: portrait) {
  body.arteora-v2-active .wcpa_form_outer .arteora-v22-material-colors fieldset.wcpa_field_wrap.arteora-v22-mobile-choices > .wcpa_field,
  body.arteora-v2-active .wcpa_form_outer fieldset.wcpa_field_wrap.arteora-v22-mobile-choices.arteora-v22-material-colors > .wcpa_field {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   ARTÈORA V2.2 — BETA 60: TESTO LASER INDICATIVO
   Il cartellino e la freccia sono un layer PNG trasparente,
   renderizzato dal core e catturato anche dal PDF Artèora V3.
   Nessuna modifica a maschere, prezzi o navigazione.
   ========================================================= */
body.arteora-v2-active #arteora-v2-preview-panel {
  position: relative;
}
body.arteora-v2-active #arteora-v2-preview .arteora-v22-laser-preview {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
body.arteora-v2-active #arteora-v22-preview-disclaimer {
  position: absolute;
  bottom: 9px;
  left: 10px;
  right: 10px;
  z-index: 180;
  pointer-events: none;
  color: #70675b;
  font: 400 10px/1.25 Arial, Helvetica, sans-serif;
  letter-spacing: .025em;
  text-align: center;
  opacity: .88;
}
body.arteora-v2-active > #arteora-v22-zoom-modal .arteora-v22-zoom-disclaimer {
  position: absolute;
  bottom: max(12px, 5dvh);
  left: 12px;
  right: 12px;
  z-index: 3;
  color: #70675b;
  font: 400 12px/1.3 Arial, Helvetica, sans-serif;
  text-align: center;
  pointer-events: none;
}
@media (max-width: 767px) {
  body.arteora-v2-active #arteora-v22-preview-disclaimer {
    bottom: 2px;
    left: 30px;
    right: 30px;
    font-size: 8px;
    line-height: 1.1;
  }
  body.arteora-v2-active > #arteora-v22-zoom-modal .arteora-v22-zoom-disclaimer {
    bottom: 10px;
    font-size: 10px;
  }
}


/* ============================================================
   ARTÈORA V2.2 — BETA 65: ANTI-DOPPIO CLIC IN RIALLINEAMENTO WCPA
   Blocca per un istante le interazioni con la pagina, senza cambiare
   overflow/scroll del body. Visibile solo per modifiche a step gia'
   visitati quando il navigatore WCPA deve riallinearsi.
   ============================================================ */
body > #arteora-v22-repair-lock {
  box-sizing: border-box !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 18px !important;
  background: rgba(253, 251, 247, 0.50) !important;
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: auto !important;
  touch-action: none !important;
  overscroll-behavior: contain !important;
  cursor: progress !important;
}
body > #arteora-v22-repair-lock.arteora-v22-visible { opacity: 1; }
body > #arteora-v22-repair-lock .arteora-v22-repair-panel {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(88vw, 246px) !important;
  padding: 24px 18px !important;
  border: 1px solid #e5dcd0 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 12px 35px rgba(52, 43, 32, 0.12) !important;
  text-align: center !important;
}
body > #arteora-v22-repair-lock .arteora-v22-repair-spinner {
  display: block !important;
  width: 31px !important;
  height: 31px !important;
  box-sizing: border-box !important;
  border: 3px solid #e6ded2 !important;
  border-top-color: #65533c !important;
  border-radius: 50% !important;
  animation: arteora-v22-repair-spin 700ms linear infinite !important;
}
body > #arteora-v22-repair-lock .arteora-v22-repair-label {
  color: #4b4032 !important;
  font: 500 13px/1.4 Arial, sans-serif !important;
  letter-spacing: .01em !important;
  white-space: normal !important;
}
@keyframes arteora-v22-repair-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body > #arteora-v22-repair-lock { transition: none !important; }
  body > #arteora-v22-repair-lock .arteora-v22-repair-spinner { animation-duration: 1400ms !important; }
}

/* ============================================================
   BETA 70 — TABLET SINGLE COLUMN + OVERLAY (768–1199 CSS px)
   Desktop >=1200, smartphone <=767 invariati.
   ============================================================ */
/* =========================================================
   ARTÈORA V2.2 — BETA 18
   Mobile verticale: preview nascosta fino alla prima scelta
   del modello; overlay orizzontale sopra la header.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
  body.arteora-v2-active:not(.arteora-v22-mobile-preview-open) #arteora-v2-preview-panel {
    display: none !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open #arteora-v2-preview-panel {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 54px 10px 16px !important;
    z-index: 2147483000 !important;
    background: #f8f6f2 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open #arteora-v2-preview {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    width: min(calc(100vw - 20px), calc((100dvh - 90px) * 3)) !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    transform: none !important;
    transform-origin: center center !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open #arteora-v22-preview-heading {
    display: block !important;
    position: absolute !important;
    top: 18px !important;
    left: 55px !important;
    right: 15px !important;
    text-align: center !important;
    background: transparent !important;
    z-index: 2 !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open {
    overflow: hidden !important;
  }
}
#arteora-v22-mobile-close { display: none !important; }
@media (min-width: 768px) and (max-width: 1199px) {
  body.arteora-v2-active.arteora-v22-mobile-preview-open #arteora-v22-mobile-close {
    display: flex !important;
    position: absolute !important;
    top: 10px !important;
    left: 12px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #5b5037 !important;
    border: 0 !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 4 !important;
  }
}

/* BETA 19 — Overlay mobile nel body, svincolato dalla griglia del form */
@media (min-width: 768px) and (max-width: 1199px) {
  html:has(body.arteora-v22-mobile-preview-open) { overflow: hidden !important; }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 64px 12px 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    z-index: 2147483000 !important;
    transform: none !important;
    background: #f8f6f2 !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel #arteora-v2-preview {
    width: min(calc(100vw - 24px), calc((100dvh - 100px) * 3)) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 2048 / 682 !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* =========================================================
   ARTÈORA V2.2 — BETA 20
   Preview mobile compatta SOLO sopra la fascia logo/carrello.
   Resta aperta durante la configurazione; nessun blocco scroll.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
  html:has(body.arteora-v22-mobile-preview-open),
  body.arteora-v2-active.arteora-v22-mobile-preview-open {
    overflow: auto !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    top: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: clamp(112px, 17dvh, 152px) !important;
    min-height: 0 !important;
    max-height: 152px !important;
    padding: 33px 10px 8px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #f8f6f2 !important;
    z-index: 2147483000 !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel #arteora-v2-preview {
    width: min(calc(100vw - 24px), calc((clamp(112px, 17dvh, 152px) - 47px) * 3)) !important;
    max-width: calc(100vw - 24px) !important;
    height: auto !important;
    aspect-ratio: 2048 / 682 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel #arteora-v22-preview-heading {
    top: 8px !important;
    left: 42px !important;
    right: 12px !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    padding: 3px 0 !important;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel #arteora-v22-mobile-close {
    position: absolute !important;
    top: 1px !important;
    left: 5px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 27px !important;
  }
}



@media (min-width: 768px) and (max-width: 1199px) {
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel #arteora-v22-zoom-button {
    position: absolute !important; left: 9px !important; bottom: 7px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 34px !important; height: 34px !important; border-radius: 50% !important;
    background: rgba(255,255,255,.94) !important; border: 1px solid #b9b3aa !important;
    color: #242424 !important; z-index: 10 !important; padding: 5px !important;
    cursor: pointer !important; box-shadow: 0 1px 5px #0002 !important;
  }
  body.arteora-v22-zoom-open { overflow: hidden !important; }
  body > #arteora-v22-zoom-modal:not([hidden]) {
    position: fixed !important; inset: 0 !important; width: 100vw !important;
    height: 100vh !important; height: 100dvh !important;
    display: block !important; background: #f8f6f2 !important;
    z-index: 2147483646 !important; overflow: hidden !important;
    padding: 0 !important; margin: 0 !important;
  }
  body > #arteora-v22-zoom-modal #arteora-v22-zoom-close {
    position: absolute !important; top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: 46px !important; height: 46px !important; border-radius: 50% !important;
    background: #fff !important; color: #222 !important; border: 1px solid #c6c1b9 !important;
    font-size: 34px !important; line-height: 1 !important; z-index: 5 !important;
    cursor: pointer !important;
  }
  body > #arteora-v22-zoom-modal #arteora-v2-preview {
    position: absolute !important; left: 50% !important; top: 50% !important;
    width: min(calc(100dvh - 100px), calc((100vw - 28px) * 3)) !important;
    max-width: none !important; height: auto !important; aspect-ratio: 2048 / 682 !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center !important; margin: 0 !important;
    display: block !important; overflow: visible !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  body > #arteora-v22-close-confirm:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483645 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: rgba(28, 26, 23, .55) !important;
  }
  #arteora-v22-close-confirm .arteora-v22-close-confirm-card {
    width: min(100%, 350px) !important;
    padding: 24px 20px 20px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    background: #f8f6f2 !important;
    box-shadow: 0 12px 38px rgba(0,0,0,.22) !important;
    text-align: center !important;
    color: #30291f !important;
  }
  #arteora-v22-close-confirm-title {
    margin: 0 0 12px !important;
    color: #30291f !important;
    font-size: 19px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
  }
  #arteora-v22-close-confirm-desc {
    margin: 0 0 22px !important;
    color: #655c50 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  #arteora-v22-close-confirm .arteora-v22-confirm-eye {
    display: inline-flex !important;
    vertical-align: middle !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 2px !important;
    color: #3e3727 !important;
  }
  #arteora-v22-close-confirm .arteora-v22-close-confirm-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
  }
  #arteora-v22-close-confirm .arteora-v22-close-confirm-actions button {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
  }
  #arteora-v22-close-confirm .arteora-v22-close-confirm-cancel {
    background: #fff !important;
    border: 1px solid #c9c0b2 !important;
    color: #3e3727 !important;
  }
  #arteora-v22-close-confirm .arteora-v22-close-confirm-accept {
    background: #3e3727 !important;
    border: 1px solid #3e3727 !important;
    color: #fff !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* Il pulsante è presente in ogni intestazione raggiunta, ma compare
     solo dopo che il cliente ha confermato la chiusura della preview. */
  body.arteora-v2-active.arteora-v22-mobile-preview-dismissed .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head > .arteora-v22-reopen-preview {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 50% !important;
    right: 3px !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #655640 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 5 !important;
    -webkit-tap-highlight-color: transparent;
  }
  body.arteora-v2-active.arteora-v22-mobile-preview-dismissed .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head > .arteora-v22-reopen-preview:focus-visible {
    outline: 2px solid #8c785a !important;
    outline-offset: 0 !important;
  }
  body.arteora-v2-active .wcpa_form_outer .wcpa_section.wcpa_step_section.arteora-v22-reached > .wcpa_section_head > .arteora-v22-reopen-preview svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  body.arteora-v2-active > #arteora-v22-zoom-modal #arteora-v22-zoom-preview {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(calc(100dvh - 100px), calc((100vw - 28px) * 3)) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 2048 / 682 !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    -webkit-transform: translate(-50%, -50%) rotate(90deg) !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
    body.arteora-v2-active > #arteora-v22-zoom-modal #arteora-v22-zoom-preview {
      width: min(calc(100vh - 100px), calc((100vw - 28px) * 3)) !important;
    }
  }
@media (min-width: 768px) and (max-width: 1199px) {
  body.arteora-v2-active #arteora-v2-workspace {display:block !important; margin:8px 0 12px !important;}
  body.arteora-v2-active #arteora-v2-summary {display:none !important;}
  body.arteora-v2-active:not(.arteora-v22-mobile-preview-open) #arteora-v2-preview-panel {display:none !important;}
  body.arteora-v2-active.arteora-v22-mobile-preview-open > #arteora-v2-preview-panel {display:flex !important;}
  body.arteora-v2-active > #arteora-v22-portrait-notice {display:none !important;}
  body.arteora-v2-active .wcpa_form_outer {width:100% !important; max-width:none !important;}
  body.arteora-v2-active #arteora-v2-stepbar {grid-template-columns:88px minmax(0,1fr) 135px;}
  body.arteora-v2-active fieldset.wcpa_field_wrap.arteora-v22-mobile-choices > .wcpa_field {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
  }
  body.arteora-v2-active fieldset.wcpa_field_wrap.arteora-v22-mobile-choices > .wcpa_field > .wcpa_image {min-width:0 !important; width:100% !important;}
}
@media (min-width: 1025px) and (max-width: 1199px) {
  body.arteora-v2-active .arteora-grid-7-5-3 .wcpa_field {grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
  body.arteora-v2-active .arteora-grid-5-3-2 .wcpa_field {grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}

/* BETA 71 — |R solo smartphone: tablet con miniature non ruotate. */
@media (min-width: 768px) and (max-width: 1199px) {
  body.arteora-v2-active fieldset.wcpa_field_wrap.arteora-v22-mobile-rotate > .wcpa_field > .wcpa_image .wcpa_img_wrap > img {
    transform: none !important;
    -webkit-transform: none !important;
  }
}