/* =========================================================================
   La Fornace — base v2 (03/10/2026)

   Portata da dev2 (La Querce) per le pagine del Wine Club: accesso, area
   utente, carrello, checkout, esito ordine, recesso, termini.
   Vale solo su <body class="v2 ...">: le pagine in grafica vecchia non
   cambiano. Si carica DOPO agricola-style.min.css (header, footer, testata
   con il bordo dei cipressi restano quelli del sito) e PRIMA del CSS della
   pagina, che usa solo i token qui sotto.

   Colori e font sono quelli di La Fornace (var.css): oro #B89002, nero
   #1b1b1b, carta rgb(249,248,244), Cinzel per i titoli, Raleway per il testo.
   ========================================================================= */

.v2 {
    /* colori */
    --gold: #B89002;
    --gold-light: #d6b336;
    --gold-dark: #7a5f00;     /* oro per testo su chiaro: 5,9:1 sulla carta */
    --ink: #1b1b1b;
    --ink-deep: #141414;
    --paper: #f9f8f4;
    --paper-deep: #efece3;
    --surface: #ffffff;
    --text: #1b1b1b;
    --text-soft: #595959;     /* il #777 del sito e' al limite del contrasto */
    --line: rgba(27, 27, 27, .12);

    /* tipografia */
    --font-body: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Cinzel', Georgia, serif;
    --tracking-display: .04em;
    --tracking-label: .12em;

    /* misure */
    --measure: 66ch;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --space-section: clamp(3rem, 7vw, 6rem);
    --radius: .5rem;
    --header-h: 90px;         /* .navbar di agricola-style.css */

    background-color: var(--paper);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;          /* agricola-style mette il body al 67,5% */
}

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

/* `* { outline: none }` toglie il focus a tutto: lo si ripristina per la
   tastiera, senza anelli al clic */
.v2 :focus-visible {
    outline: 2px solid var(--gold) !important;
    outline-offset: 3px;
    border-radius: 2px;
}

/* `img { width: 100% }` vale per tutte le immagini: nelle pagine v2 la
   larghezza la decide il componente */
.v2 main img {
    max-width: 100%;
}

/* `* { list-style: none; margin: 0 }`: i testi lunghi (termini, recesso)
   hanno bisogno degli elenchi veri */
.v2 .v2-prosa ol,
.v2 .v2-prosa ul {
    margin: 0 0 1rem 1.4rem;
}

.v2 .v2-prosa ol li {
    list-style: decimal;
}

.v2 .v2-prosa ul li {
    list-style: disc;
}

/* il grigio #777 dei paragrafi vale per il sito; nel contenuto v2 il colore
   lo da' il componente. Solo dentro <main>: il footer resta com'e'. */
.v2 main p {
    color: inherit;
}

/* margine laterale per tutto il contenuto: su telefono i riquadri non devono
   toccare i bordi dello schermo */
.v2 main {
    padding: 0 var(--gutter) var(--space-section);
}

/* =========================================================================
   TITOLO DI PAGINA
   Sotto la testata con i cipressi, come nelle altre pagine del sito:
   titolo Cinzel, trattino, sottotitolo oro.
   ========================================================================= */

.v2 .v2-titolo {
    position: relative;
    max-width: 60rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(1rem, 3vw, 2rem);
    text-align: center;
}

.v2 .v2-titolo h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--text);
    margin: 0;
}

.v2 .v2-titolo h1::after {
    content: '';
    display: block;
    width: 2.8rem;
    height: 1px;
    margin: 1rem auto 0;
    background-color: var(--text-soft);
}

.v2 .v2-titolo p {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    line-height: 1.35;
    color: var(--gold-dark);
    margin: 1rem 0 0;
}

.v2 .v2-titolo p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* il grappolo in filigrana delle pagine del Wine Club */
.v2 .v2-titolo .bggrappolo {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    opacity: .1;
    pointer-events: none;
}

/* testata con i cipressi piu' bassa nelle pagine di servizio: il contenuto
   deve arrivare presto, soprattutto sul telefono */
.v2 .hero-page--compatta {
    min-height: 32vh;
}

@media (max-width: 480px) {
    .v2 .hero-page--compatta {
        min-height: 8rem;
    }
}

/* =========================================================================
   BOTTONI
   .v2-btn--primary  oro pieno
   .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: .85rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .95rem 1.9rem;
    border-radius: 0;          /* il sito usa bottoni squadrati */
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    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 e' 2,9:1 */
.v2 .v2-btn--primary {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

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

.v2 .v2-btn--ghost {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .6);
    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: var(--ink);
}

.v2 .v2-btn--plain {
    letter-spacing: .02em;
    text-transform: none;
}

.v2 .v2-btn[disabled],
.v2 .v2-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

/* =========================================================================
   ACCESSIBILITÀ
   ========================================================================= */

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

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

.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;
}

/* collegamento "Vai al contenuto" per chi usa la tastiera */
.v2 .salta-al-contenuto {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1000;
    padding: .75rem 1rem;
    background: var(--ink);
    color: #fff;
}

.v2 .salta-al-contenuto:focus {
    top: 1rem;
}

/* =========================================================================
   TESTI LUNGHI (termini e condizioni): larghezza di lettura e titoli
   ========================================================================= */

.v2 .v2-prosa {
    max-width: var(--measure);
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
}

.v2 .v2-prosa h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 2.2rem 0 .8rem;
    color: var(--text);
}

.v2 .v2-prosa p {
    margin: 0 0 1rem;
}

.v2 .v2-prosa hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2.5rem 0;
}

/* =========================================================================
   LARGHEZZA MASSIMA delle pagine dello shop (04/10/2026)
   Area utente, carrello, checkout ed esito ordine: contenuto centrato e al
   massimo 72rem (1152px), come su dev2 (pagina-v2.css). Senza, su uno
   schermo largo carrello e riepilogo si allungavano a tutta pagina.
   Accesso, iscrizione e recupero password hanno gia' il loro riquadro
   stretto (auth.css), i testi lunghi la misura di lettura (.v2-prosa).
   ========================================================================= */

.v2.cart-v2 main,
.v2.checkout-v2 main,
.v2.ordersent-v2 main,
.v2.account-v2 main,
.v2.recesso-v2 main {
    max-width: calc(72rem + 2 * var(--gutter));
    margin-left: auto;
    margin-right: auto;
}