/* =========================================================================
   La Querce — base v2
   Caricato da TUTTI i template v2 (tpl/inc/v2-head.html), dopo style.css e
   prima del CSS della pagina. Vale solo su <body class="v2 ...">: le pagine
   ancora in grafica vecchia non cambiano.

   Qui stanno i token (colori, font, misure) e le regole che prima erano
   copiate in home-v2.css, pagina-v2.css e premi-v2.css. Un CSS di pagina
   può ridefinire un token sul proprio body (es. .premi-v2 { --measure }).
   ========================================================================= */

.v2 {
    /* colori */
    --gold: #aa964b;
    --gold-light: #c9b678;
    --gold-dark: #6e6237;
    --ink: #16160f;           /* fondi scuri: testate, fasce, footer */
    --ink-deep: #0e0e0d;      /* fondo sotto le foto, prima che carichino */
    --paper: #f4f2ed;         /* fondo pagina */
    --paper-deep: #ebe7de;    /* fondo di riquadri su carta */
    --surface: #ffffff;
    --text: #1c1b17;
    --text-soft: #57544c;
    --line: rgba(28, 27, 23, .12);

    /* Tipografia: un solo font, lo stesso di style.css. I titoli si
       distinguono col trattamento (maiuscolo + spaziatura), come il logo. */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-display: var(--font-body);
    --tracking-display: .18em;
    --tracking-label: .12em;

    /* misure */
    --measure: 66ch;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --space-section: clamp(4rem, 9vw, 8rem);
    --radius: .75rem;
    --header-h: 6rem;         /* altezza dell'header fisso (style.css) */

    background-color: var(--paper);
    color: var(--text);
    font-family: var(--font-body);
}

/* --- correzioni ereditate da style.css -------------------------------- */

/* style.css forza 16:9 su ogni immagine, logo compreso */
.v2 img {
    aspect-ratio: auto;
}

/* style.css azzera il focus con !important: lo ripristiniamo solo per la
   tastiera, senza anelli al clic */
.v2 :focus-visible {
    outline: 2px solid var(--gold-light) !important;
    outline-offset: 3px;
    border-radius: 2px;
}

/* =========================================================================
   BOTTONI
   .v2-btn--primary  oro pieno, su fondo chiaro o scuro
   .v2-btn--ghost    contorno bianco, su fondo scuro
   .v2-btn--outline  contorno oro, su fondo chiaro
   ========================================================================= */

.v2 .v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .95rem 1.9rem;
    border-radius: 2rem;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.v2 .v2-btn:hover {
    text-decoration: none;
}

/* testo scuro sull'oro: col bianco il contrasto era 2,9:1 (minimo 4,5:1) */
.v2 .v2-btn--primary {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--ink, #16160f);
}

.v2 .v2-btn--primary:hover {
    background-color: var(--gold-light);
    border-color: var(--gold-light);
    color: var(--text);
}

.v2 .v2-btn--ghost {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.v2 .v2-btn--ghost:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--text);
}

.v2 .v2-btn--outline {
    background-color: transparent;
    border-color: var(--gold);
    color: var(--gold-dark);
}

.v2 .v2-btn--outline:hover {
    background-color: var(--gold);
    color: #fff;
}

/* un indirizzo e-mail o un telefono non vanno in maiuscolo spaziato */
.v2 .v2-btn--plain {
    letter-spacing: .02em;
    text-transform: none;
    font-size: .85rem;
}

/* =========================================================================
   FOOTER — stesso nero caldo delle fasce, al posto del grigio freddo
   ========================================================================= */

.v2 footer {
    background-color: var(--ink-deep);
    border-top: 1px solid rgba(201, 182, 120, .18);
    color: rgba(244, 242, 237, .78);
    padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter) 2rem;
    line-height: 1.7;
}

.v2 .footer {
    max-width: 72rem;
    column-gap: 2.5rem;
    row-gap: 1.5rem;
}

.v2 .footer a {
    color: var(--gold-light);
    transition: color .3s ease;
}

.v2 .footer a:hover {
    color: #fff;
}

.v2 .footer--sociallinks img {
    opacity: .85;
    transition: opacity .3s ease;
}

.v2 .footer--sociallinks a:hover img {
    opacity: 1;
}

.v2 .footer--eucampaign {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(244, 242, 237, .1);
    font-size: .75rem;
    letter-spacing: .04em;
    color: rgba(244, 242, 237, .55);
}

/* =========================================================================
   ACCESSIBILITÀ — rispetta "riduci animazioni" del sistema
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

    .v2 *,
    .v2 *::before,
    .v2 *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* testo per i soli lettori di schermo (es. "Leggi di più: titolo") */
.v2 .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   CAMBIO LINGUA NELLA BARRA (tpl/inc/header.html)
   style.css lo mostra solo nel pannello mobile (sotto i 1225px), con
   bandiera e nome. Sopra, qui, diventa "IT · EN" in fondo alle voci del
   menu: la lingua corrente in oro, il nome resta per i lettori di schermo.
   ========================================================================= */

.v2 .header--menu-language-list .lang-code {
    display: none;
}

@media only screen and (min-width: 1226px) {

    .v2 .header--menu {
        display: flex;
        align-items: center;
    }

    .v2 .header--menu-language-list {
        display: block;
        margin-right: 2rem;
        padding-left: 1.5rem;
        border-left: 1px solid rgba(255, 255, 255, .25);
    }

    .v2 .header--menu .header--menu-language-list ul {
        gap: .9rem;
        margin: 0;
    }

    .v2 .header--menu .header--menu-language-list ul li a {
        font-size: .75rem;
        font-weight: 600;
        letter-spacing: .13em;
        color: rgba(255, 255, 255, .6);
        transition: color .3s ease;
    }

    .v2 .header--menu .header--menu-language-list ul li a:hover,
    .v2 .header--menu .header--menu-language-list ul li.is-current a {
        color: var(--gold-light);
    }

    .v2 .header--menu-language-list img {
        display: none;
    }

    .v2 .header--menu-language-list .lang-code {
        display: inline;
    }

    /* il nome resta leggibile dagli screen reader */
    .v2 .header--menu-language-list .lang-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* =========================================================================
   AZIONI DEL NEGOZIO NELL'HEADER (tpl/inc/header.html)
   "Shop online" pieno oro: e' l'unico elemento pieno della barra, l'occhio ci
   va subito. Accanto carrello (con il numero di pezzi) e profilo, come icone.
   Prendono il posto del vecchio blocco oro alto quanto la barra, che da
   collegati style.css nascondeva (body:has(.usermenu)): qui si vede sempre.
   ========================================================================= */

.v2 .header-azioni.header--menu-special {
    display: flex;
    align-items: center;
    background-color: transparent;
    margin-right: 1.25rem;
}

.v2 .header-azioni ul {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2 .header-azioni ul li {
    height: auto;
}

/* --- Shop online --- */

.v2 .header-azioni .header-azioni__shop a {
    gap: .55rem;
    margin-right: .5rem;
    padding: .6rem 1.2rem .6rem .95rem;
    border-radius: 2rem;
    background-color: var(--gold);
    color: var(--ink);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .3s ease;
}

.v2 .header-azioni .header-azioni__shop a:hover {
    background-color: var(--gold-light);
    text-decoration: none;
}

.v2 .header-azioni .header-azioni__shop img {
    width: 1.35rem;
    height: auto;
    margin: 0;
}

.v2 .header-azioni .header-azioni__shop .header--menu-special-item-text {
    margin: 0;
}

/* --- carrello e profilo --- */

.v2 .header-azioni .header-azioni__icona {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: color .3s ease, background-color .3s ease;
}

.v2 .header-azioni .header-azioni__icona:hover {
    color: var(--gold-light);
    background-color: rgba(255, 255, 255, .08);
}

/* collegato: un punto oro sul profilo */
.v2 .header-azioni .header-azioni__icona.is-collegato::after {
    content: "";
    position: absolute;
    right: .45rem;
    bottom: .45rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: var(--gold);
    box-shadow: 0 0 0 2px #000;
}

.v2 .header-azioni__badge {
    position: absolute;
    top: .1rem;
    right: 0;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 1rem;
    background-color: var(--gold);
    color: var(--ink);
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.15rem;
    letter-spacing: 0;
    text-align: center;
}

.v2 .header-azioni__badge[hidden] {
    display: none;
}

/* sotto i 1225px il testo sparisce (style.css): resta il cerchio oro col calice */
@media only screen and (max-width: 1225px) {

    .v2 .header-azioni.header--menu-special {
        margin-right: .5rem;
    }

    .v2 .header-azioni .header-azioni__shop a {
        width: 2.6rem;
        height: 2.6rem;
        margin-right: .15rem;
        padding: 0;
        justify-content: center;
    }

    .v2 .header-azioni .header-azioni__shop img {
        width: 1.3rem;
        margin: 0;
    }
}

/* fascia 1226-1440px: menu, lingue e azioni del negozio stanno su una riga
   solo stringendo gli spazi (a 1300px la barra sforava di ~70px) */
@media only screen and (min-width: 1226px) and (max-width: 1440px) {

    .v2 .header--logo-img {
        max-width: 10rem;
        margin-left: 1.25rem;
    }

    .v2 .header--menu > ul {
        gap: 1.35rem;
        margin-right: 1.25rem;
    }

    .v2 .header--menu-language-list {
        margin-right: 1rem;
        padding-left: 1rem;
    }

    .v2 .header-azioni.header--menu-special {
        margin-right: .75rem;
    }

    .v2 .header-azioni .header-azioni__shop a {
        padding: .55rem 1rem .55rem .8rem;
        letter-spacing: .1em;
    }
}

/* telefoni: logo, calice, carrello, profilo e hamburger su ~360px */
@media only screen and (max-width: 480px) {

    .v2 .header--logo-img {
        max-width: 8.5rem;
    }

    .v2 .header-azioni.header--menu-special {
        margin-right: .25rem;
    }

    .v2 .header-azioni ul {
        gap: .1rem;
    }

    .v2 .header-azioni .header-azioni__shop a,
    .v2 .header-azioni .header-azioni__icona {
        width: 2.3rem;
        height: 2.3rem;
    }
}

/* sotto i 1225px: icone del negozio prima, hamburger all'estrema destra */
@media only screen and (max-width: 1225px) {

    .v2 .navbar .header-azioni {
        order: 1;
    }

    .v2 .navbar .hamburger {
        order: 2;
        margin-left: .35rem;
    }
}

/* Carrello, checkout e conferma ordine: la barra utente flottante in basso
   (Shop, Carrello, Account, Esci) da collegati si sovrapponeva ai pulsanti del
   carrello e al totale del checkout. Qui non serve: carrello e account sono
   gia' nell'header. */
body.cart-v2 .usermenu,
body.checkout-v2 .usermenu,
body.ordersent-v2 .usermenu {
    display: none;
}

/* =========================================================================
   HEADER SU TELEFONI E TABLET: AREE DA TOCCARE DA 48px (01/10/2026)
   Linee guida Google/Material e WCAG 2.5.5: almeno 48x48px per ogni elemento
   toccabile, con spazio fra l'uno e l'altro. Prima erano 37px (32 il menu) a
   2-3px di distanza. L'icona resta piccola: il bordo trasparente allarga la
   zona che risponde al dito senza ingrandire il cerchio che si vede.
   Per tornare indietro: Documentation/backup-header-mobile-2026-10-01/.
   ========================================================================= */

.v2 .header-azioni__shop-breve,
.v2 .header--menu-item-account {
    display: none;
}

.v2 .header-azioni a:focus-visible,
.v2 .navbar .hamburger:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: -2px;
}

@media only screen and (max-width: 1225px) {

    .v2 .header-azioni ul {
        gap: .25rem;
    }

    .v2 .header-azioni .header-azioni__shop a,
    .v2 .header-azioni .header-azioni__icona {
        box-sizing: border-box;
        width: 3rem;
        height: 3rem;
        margin-right: 0;
        border: .25rem solid transparent;
        background-clip: padding-box;
        -webkit-tap-highlight-color: transparent;
    }

    .v2 .header-azioni__badge {
        top: 0;
        right: -.15rem;
    }

    .v2 .header-azioni .header-azioni__icona.is-collegato::after {
        right: .3rem;
        bottom: .3rem;
    }

    /* l'hamburger e' un <button>: via lo stile di default del browser */
    .v2 .navbar .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 3rem;
        margin-left: .25rem;
        margin-right: .25rem;
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        -webkit-tap-highlight-color: transparent;
    }

    /* tre linee sovrapposte al centro del pulsante e spostate in su/giu':
       aperto, le due esterne tornano al centro e ruotano di 45 gradi sullo
       stesso punto, e la X viene pulita e simmetrica */
    .v2 .navbar .hamburger,
    .v2 .navbar .hamburger.active {
        position: relative;
        top: auto;      /* style.css spostava il pulsante aperto in basso */
        right: auto;
    }

    .v2 .navbar .hamburger .bar {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.6rem;
        height: 3px;
        margin: -1.5px 0 0 -.8rem;
        border-radius: 2px;
        transform-origin: center;
        transition: transform .3s ease, opacity .2s ease;
    }

    .v2 .navbar .hamburger .bar:nth-child(1) {
        transform: translateY(-8px);
    }

    .v2 .navbar .hamburger .bar:nth-child(3) {
        transform: translateY(8px);
    }

    .v2 .navbar .hamburger.active .bar:nth-child(1) {
        transform: rotate(45deg);
    }

    .v2 .navbar .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .v2 .navbar .hamburger.active .bar:nth-child(3) {
        transform: rotate(-45deg);
    }

    /* barra alta 96px, dove style.css apre il menu: barra e menu aperto
       formano un blocco unico, senza la striscia di pagina che restava fra
       una barra di 52px e un menu a 96px */
    .v2 .fixedheader .header,
    .v2 header .header {
        min-height: 6rem;
    }

    /* il menu si aggancia sotto la barra, qualunque sia la sua altezza */
    .v2 .fixedheader .nav-menu,
    .v2 header .nav-menu {
        top: 100%;
        margin-top: 0;
    }
}

/* telefoni: al posto del solo calice la scritta "Shop" (si capisce subito che
   e' il negozio); per farle spazio il profilo passa dentro il menu */
@media only screen and (max-width: 480px) {

    /* con la barra a 96px il logo cresce quanto lascia lo spazio a destra
       (Shop + carrello + menu = circa 210px): 136px sui telefoni piu' stretti,
       160px da 375px in su (regola subito sotto) */
    .v2 .header--logo-img {
        max-width: 8.5rem;
    }

    .v2 .header-azioni.header--menu-special {
        margin-right: 0;
    }

    .v2 .header-azioni .header-azioni__shop a {
        width: auto;
        gap: .4rem;
        padding: 0 .85rem 0 .7rem;
        border-radius: 2rem;
    }

    .v2 .header-azioni .header-azioni__shop img {
        width: 1.15rem;
    }

    .v2 .header-azioni__shop-breve {
        display: inline;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .v2 .header-azioni .header-azioni__account {
        display: none;
    }

    .v2 .header--menu-item-account {
        display: list-item;
    }
}

@media only screen and (min-width: 375px) and (max-width: 480px) {

    .v2 .header--logo-img {
        max-width: 10rem;
    }
}

/* =========================================================================
   FOOTER v2 (tpl/inc/footer.html, 01/10/2026)
   Colonne Villa / Azienda Agricola / social e lingue, poi dati aziendali su
   una riga, riga legale e dicitura UE. Le classi footer-v2__* sono nuove:
   la griglia a aree di style.css (.footer) qui non serve e si spegne.
   Versione precedente: Documentation/backup-footer-2026-10-01/.
   ========================================================================= */

.v2 .footer.footer-v2 {
    display: block;
    max-width: 72rem;
    margin: 0 auto;
}

.v2 .footer-v2 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* <nav> e i suoi elenchi hanno regole generiche in style.css (flex in riga,
   grassetto): qui colonne normali, titolo sopra e voci una sotto l'altra */
.v2 .footer-v2 nav.footer-v2__col,
.v2 .footer-v2 nav.footer-v2__col > ul {
    display: block;
}

.v2 .footer-v2__col li {
    display: block;
    margin: 0;
}

.v2 .footer-v2__legal a,
.v2 .footer-v2__col li a,
.v2 .footer-v2__lang a {
    font-weight: 400;
}

.v2 .footer-v2__top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 2.5rem;
    padding-bottom: 2rem;
}

.v2 .footer-v2__title {
    margin: 0 0 .9rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.v2 .footer-v2__title a {
    color: var(--gold-light);
    text-decoration: none;
}

.v2 .footer-v2__col li a {
    display: inline-block;
    padding: .3rem 0;
    color: rgba(244, 242, 237, .78);
    text-decoration: none;
}

.v2 .footer-v2__col li a:hover,
.v2 .footer-v2__title a:hover {
    color: #fff;
}

.v2 .footer-v2__col--extra {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.25rem;
}

.v2 .footer-v2__social {
    display: flex;
    gap: .5rem;
}

/* icone e lingue con area da toccare di almeno 44px */
.v2 .footer-v2__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
}

.v2 .footer-v2__social img {
    opacity: .85;
    transition: opacity .3s ease;
}

.v2 .footer-v2__social a:hover img {
    opacity: 1;
}

.v2 .footer-v2__lang {
    display: flex;
    gap: 1.25rem;
}

.v2 .footer-v2__lang a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.75rem;
    color: rgba(244, 242, 237, .78);
    text-decoration: none;
}

.v2 .footer-v2__lang a[aria-current="true"] {
    color: var(--gold-light);
}

.v2 .footer-v2__azienda,
.v2 .footer-v2__legal,
.v2 .footer-v2__eu {
    margin: 0;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(244, 242, 237, .1);
    font-size: .8rem;
    line-height: 1.6;
    color: rgba(244, 242, 237, .6);
}

.v2 .footer-v2__legal a {
    color: rgba(244, 242, 237, .78);
}

.v2 .footer-v2__legal a:hover {
    color: #fff;
}

.v2 .footer-v2__sep {
    margin: 0 .35rem;
    color: rgba(244, 242, 237, .3);
}

.v2 .footer-v2__eu {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-bottom: 0;
    font-size: .72rem;
    letter-spacing: .04em;
    color: rgba(244, 242, 237, .5);
}

/* tablet: le due colonne di menu affiancate, social e lingue sotto */
@media only screen and (max-width: 900px) {

    .v2 .footer-v2__top {
        grid-template-columns: 1fr 1fr;
    }

    .v2 .footer-v2__col--extra {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
}

/* telefoni: menu ancora su due colonne (sono corti), il resto centrato */
@media only screen and (max-width: 480px) {

    .v2 .footer-v2__top {
        gap: 1.75rem 1.25rem;
    }

    .v2 .footer-v2__col--extra {
        flex-direction: column;
        align-items: center;
    }

    .v2 .footer-v2__col li a {
        padding: .55rem 0;   /* righe da ~44px: comode da toccare */
    }

    .v2 .footer-v2__azienda,
    .v2 .footer-v2__legal,
    .v2 .footer-v2__eu {
        text-align: center;
    }

    .v2 .footer-v2__eu {
        justify-content: center;
    }
}

/* telefoni: spazio in fondo per il pulsante dei cookie di iubenda, fisso in
   basso a sinistra, che altrimenti copre la riga della campagna UE */
@media only screen and (max-width: 480px) {

    .v2 footer {
        padding-bottom: 5rem;
    }
}

/* colonna "La Querce" (about) in testa: piu' larga delle altre su desktop,
   da sola su una riga sotto i 900px */
.v2 .footer-v2__top {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}

.v2 .footer-v2__about {
    max-width: 22rem;
    margin: 0;
    font-size: .9rem;
    line-height: 1.7;
    color: rgba(244, 242, 237, .7);
}

@media only screen and (max-width: 900px) {

    .v2 .footer-v2__top {
        grid-template-columns: 1fr 1fr;
    }

    .v2 .footer-v2__col--about {
        grid-column: 1 / -1;
    }

    .v2 .footer-v2__about {
        max-width: 34rem;
    }
}

/* titolo "La Querce" senza link: stesso oro degli altri titoli di colonna */
.v2 .footer-v2__title {
    color: var(--gold-light);
}

/* =========================================================================
   TORNA SU (assets/js/script.js, 02/10/2026)
   Cerchio scuro in basso a destra, 48px (area comoda per il dito), compare
   dopo una schermata e mezza di scorrimento. In basso a sinistra c'e' il
   pulsante dei cookie di iubenda: qui non si sovrappongono.
   ========================================================================= */

.torna-su {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgba(201, 182, 120, .45);
    border-radius: 50%;
    background-color: rgba(14, 14, 13, .85);
    color: var(--gold-light, #c9b678);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.75rem);
    transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .3s ease;
    -webkit-tap-highlight-color: transparent;
}

.torna-su.is-visibile {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.torna-su:hover {
    background-color: rgba(14, 14, 13, 1);
    color: #fff;
}

.torna-su:focus-visible {
    outline: 2px solid var(--gold-light, #c9b678);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .torna-su {
        transition: none;
    }
}

/* carrello, checkout e conferma ordine: in basso ci sono le barre fisse con
   pulsanti e totale, il "torna su" le coprirebbe */
body.cart-v2 .torna-su,
body.checkout-v2 .torna-su,
body.ordersent-v2 .torna-su {
    display: none;
}

/* =========================================================================
   TRANSIZIONI TRA LE PAGINE (View Transitions, 02/10/2026)
   Cambiando pagina il contenuto vecchio sfuma e quello nuovo entra con una
   dissolvenza e un leggero movimento verso l'alto; l'header (barra, logo,
   Shop, carrello) resta fermo. Solo CSS: Chrome, Edge, Samsung Internet e
   Safari recenti; gli altri browser cambiano pagina come prima, senza errori.
   Per toglierle basta cancellare questo blocco.
   ========================================================================= */

@view-transition {
    navigation: auto;
}

/* l'header e' un elemento a se': non partecipa alla dissolvenza della pagina
   (stesso nome in tutte le pagine; la home usa <header>, le altre .fixedheader) */
body.v2 > header,
.v2 .fixedheader {
    view-transition-name: testata;
}

::view-transition-group(testata) {
    z-index: 10;
    animation-duration: .35s;
}

::view-transition-old(root) {
    animation: vt-esce .22s ease-in both;
}

::view-transition-new(root) {
    animation: vt-entra .45s cubic-bezier(.2, .7, .2, 1) .05s both;
}

@keyframes vt-esce {
    to { opacity: 0; }
}

@keyframes vt-entra {
    from { opacity: 0; transform: translateY(14px); }
}

/* "riduci animazioni": solo una dissolvenza rapida, senza movimento */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root) {
        animation: vt-esce .15s linear both;
    }
    ::view-transition-new(root) {
        animation: vt-solo-fade .2s linear both;
    }
    @keyframes vt-solo-fade {
        from { opacity: 0; }
    }
}

/* footer: logo biologico ICEA sotto la descrizione (05/10/2026) */
.footer-v2__bio {
    display: block;
    width: auto;
    height: 34px;
    margin-top: 1rem;
}

/* footer: loghi delle associazioni (Consorzio Chianti Colli Fiorentini, FIVI)
   sotto le lingue (05/10/2026) */
.v2 .footer-v2__assoc-title {
    margin: 1.5rem 0 .6rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.v2 .footer-v2__assoc {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v2 .footer-v2__assoc a {
    display: block;
    opacity: .85;
    transition: opacity .2s ease;
}

.v2 .footer-v2__assoc a:hover,
.v2 .footer-v2__assoc a:focus-visible {
    opacity: 1;
}

.v2 .footer-v2__assoc img {
    display: block;
    width: auto;
    height: 64px;
}