/* ===== Stile base — sito Redigo a pagine a blocchi ===== */

/* Font di brand self-hosted (guida §8.1): Jost, la stessa famiglia usata dallo shop
   lanostrastrada.it (tema Shopify: --base-font-family e --heading-font-family = Jost).
   E' libera (Google Fonts) e self-hostata in static/fonts/jost/ — subset latin + latin-ext,
   font-display swap. Il file e' variabile (un solo woff2 copre il range 300-700): un @font-face
   per stile con `font-weight: 300 700`, nessuna duplicazione.
   Lo shop dichiara come secondaria "lucia BT" (display, a pagamento e mai prima in cascata):
   non serve qui, Jost e' sempre il font effettivo. */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/jost/jost-latin-300-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/jost/jost-latin-ext-300-700-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/jost/jost-latin-300-700-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/jost/jost-latin-ext-300-700-italic.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Palette di brand: presa dai token del tema Shopify di lanostrastrada.it (settings del tema).
   Le regole del sito usano SOLO queste variabili: per ritoccare la palette basta cambiare i valori
   qui, nient'altro. Stessa lista riportata negli <hint> dei campi colore (guida §7.16). */
:root {
    --clr-bg: #ffffff;
    /* sfondo pagina — Bianco */
    --clr-text: #000000;
    /* testo su sfondo chiaro — Nero */
    --clr-muted: #2c1d0e;
    /* testo/heading caldo dello shop (--block-heading-color) — Terra */
    --clr-dark: #2c2a28;
    /* sezioni scure — Pietra */
    --clr-cream: #eae4df;
    /* superfici chiare / bordi sottili (--color-border-secondary) — Sabbia */
    --clr-sand: #fff9f2;
    /* superficie chiarissima (--settings-product-card-button-background-color) — Crema */
    --clr-accent: #d29e72;
    /* accento caldo (--settings-button-outer-border-color-secondary) — Terracotta */
    --clr-on-dark: #ffffff;
    /* testo su sezioni scure — Bianco */
    --font-serif: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    /* titoli — Jost (come lo shop) */
    --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    /* corpo/UI — Jost (come lo shop) */
    --header-h: 130px;
    /* altezza header: contiene il logo alla stessa misura dello shop (250x93) */
    --logo-w: 250px;
    /* larghezza logo nell'header — identica a lanostrastrada.it (img width=250) */
    --logo-w-footer: 100px;
    /* larghezza logo nel footer — identica a lanostrastrada.it (img width=100) */
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* Link interni #anchor: la sezione target non resta nascosta sotto l'header fisso (90px) + scroll morbido */
html {
    scroll-padding-top: var(--header-h);
    scroll-behavior: smooth;
}

/* Ancora dei link interni (<a id> a inizio sezione): target di scroll a impatto zero sul layout */
.sec-anchor {
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
}

body {
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--clr-text);
    background: var(--clr-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Selezione del testo: standard dei siti a blocchi (guida §8.2) - testo bianco sul colore scuro
   del brand (Terra #2c1d0e, lo stesso di heading/testo dello shop). */
::selection {
    background: #2c1d0e;
    color: #ffffff;
}

/* Tipografia: unica famiglia Jost (come lo shop) su titoli e corpo — vedi :root */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.titolo,
.titoletto {
    font-family: var(--font-serif);
    font-weight: 500;
}

p,
li,
span,
a,
small,
label,
blockquote,
figcaption,
td,
th,
button,
.btn,
input,
textarea,
select {
    font-family: var(--font-sans);
}

/* Occhiello (sopra il titolo) e sottotitolo (sotto il titolo): stile identico, font --font-serif */
.occhiello,
.sottotitolo {
    font-family: var(--font-sans);
}

/* Titolo del blocco: h1 se e' il primo blocco-con-titolo della pagina, altrimenti h2.
   La classe .blocco-titolo garantisce resa identica a prescindere dal tag (base = default h2). */
.blocco-titolo {
    font-size: calc(2rem * var(--dim-titolo, 100) / 100);
}

/* Margini blocco (enum MargineSuperiore/Inferiore): 'singolo' = pt-md-5 pt-3 / pb-md-5 pb-3 nativi
   Bootstrap (immutato); 'nessuno' = nessuna classe; 'doppio'/'triplo' = 2x/3x. A parita' di valore
   il gap e' identico sopra e sotto. */
.pt-blocco-2 {
    padding-top: 2rem;
}

.pb-blocco-2 {
    padding-bottom: 2rem;
}

.pt-blocco-3 {
    padding-top: 3rem;
}

.pb-blocco-3 {
    padding-bottom: 3rem;
}

.mt-blocco-2 {
    margin-top: 2rem;
}

.mb-blocco-2 {
    margin-bottom: 2rem;
}

.mt-blocco-3 {
    margin-top: 3rem;
}

.mb-blocco-3 {
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .pt-blocco-2 {
        padding-top: 6rem;
    }

    .pb-blocco-2 {
        padding-bottom: 6rem;
    }

    .pt-blocco-3 {
        padding-top: 9rem;
    }

    .pb-blocco-3 {
        padding-bottom: 9rem;
    }

    .mt-blocco-2 {
        margin-top: 6rem;
    }

    .mb-blocco-2 {
        margin-bottom: 6rem;
    }

    .mt-blocco-3 {
        margin-top: 9rem;
    }

    .mb-blocco-3 {
        margin-bottom: 9rem;
    }
}

/* Blocco-Generico (padre + figli): titolo 2.8em (standard raddoppiato), occhiello/sottotitolo +20%
   rispetto al testo (base). font-size scalato da --dim-titolo/--dim-occhiello/--dim-sottotitolo (percentuale, default 100). */
.blocco-generico .blocco-titolo {
    font-size: calc(2.8em * var(--dim-titolo, 100) / 100);
}

/* Titolo delle card figlie: molto piu' contenuto del titolo di sezione (nel design le voci dei
   pilastri e dei passi stanno su una riga breve, non sono titoli di sezione). Scalabile per-figlio
   con DimTitolo, come tutto il resto. */
.blocco-generico .card-figlio h4,
.blocco-generico h4 {
    font-size: calc(1.6em * var(--dim-titolo, 100) / 100);
}

/* Figli resi DENTRO la colonna del testo (StileFigli = 'griglia-in-colonna'): colonne strette,
   quindi interlinea e spaziature piu' compatte della griglia a piena larghezza. */
.figli-in-colonna .testo-figlio {
    font-size: 0.9rem;
}

/* Heading dentro il contenuto RTE dei blocchi: scala tipografica coerente.
   Sta dopo la regola dei titoli blocco cosi', a pari specificita', vince su h2/h4 nel contenuto. */
.contenuto h1,
.contenuto h2,
.contenuto h3,
.contenuto h4,
.contenuto h5,
.contenuto h6 {
    line-height: 1.3;
    margin: 1.4em 0 0.4em;
}

.contenuto> :first-child {
    margin-top: 0;
}

.contenuto h1 {
    font-size: 1.5em;
}

.contenuto h2 {
    font-size: 1.3em;
}

.contenuto h3 {
    font-size: 1.15em;
}

.contenuto h4 {
    font-size: 1.05em;
}

.contenuto h5 {
    font-size: 1em;
}

.contenuto h6 {
    font-size: 0.9em;
}

/* Allegato del blocco: sotto il contenuto (i pulsanti Link stanno in .blocco-azioni) */
.blocco-allegato {
    margin-top: 1rem;
}

.blocco-allegato a {
    text-decoration: underline;
}
/* ===== Figlio "badge": l'immagine E' il pulsante (badge degli store, loghi partner) =====
   Ramo badge di Blocco-Generico, attivato dalla skin btn-skin-badge sul figlio (catalogo
   psbottoneskin). Altezza fissa: badge di proporzioni diverse e pulsanti di testo cadono cosi'
   sulla stessa linea dentro la riga dei figli. */
.figlio-badge {
    /* stesso stacco di .blocco-azioni, per allineare badge e pulsanti di testo */
    margin-top: 1.5rem;
}

.figlio-badge img {
    height: 44px;
    width: auto;
}

.figlio-badge-link {
    display: inline-block;
    line-height: 0;
}

/* Nessuno zoom in hover (guida §11.6): il badge si schiarisce appena. */
.figlio-badge-link:hover img {
    opacity: 0.85;
}

/* Badge senza Link (es. store dove l'app non e' ancora pubblicata): spento, cosi' non sembra
   cliccabile mentre non lo e'. */
.figlio-badge-spento img {
    filter: grayscale(1);
    opacity: 0.45;
}

/* Nota sotto il badge (SottoTitolo del figlio): colore ereditato smorzato, non un colore fisso
   (il blocco puo' avere uno Sfondo scelto in back-office). */
.figlio-badge-nota {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.3;
    opacity: 0.7;
}


.blocco-generico .occhiello {
    font-size: 1.2em;
}

/* Sottotitolo: scalato da --dim-sottotitolo; interlinea ridotta (vicina, come il titolo), unitless
   cosi' resta coerente con la percentuale di dimensione. */
.blocco-generico .sottotitolo {
    font-size: calc(1.2em * var(--dim-sottotitolo, 100) / 100);
    line-height: 1.2;
}

/* Nessun margine inferiore residuo: l'ultimo sotto-blocco di contenuto (occhiello/titolo/sottotitolo/
   contenuto/azioni) non lascia spazio sotto. La spaziatura tra elementi presenti resta perche' e'
   il margine inferiore di quello sopra. */
.blocco-generico .container> :last-child,
.fullwidth-overlay-inner> :last-child,
.elenco-passi .np-txt> :last-child {
    margin-bottom: 0 !important;
}

/* Contenuto figlio allineato in basso: spinge il contenuto al fondo della col (equal-height),
   tutto flush senza margini tra gli elementi */
.blocco-generico .allinea-basso> :first-child {
    margin-top: auto;
}

.blocco-generico .allinea-basso>*,
.blocco-generico .allinea-basso *:last-child {
    margin-bottom: 0 !important;
}

/* Spaziatura di 1em prima del testo (contenuto) nei figli, solo se preceduto da altro */
.blocco-generico .testo-figlio:not(:first-child) {
    margin-top: 1em;
}

/* ===== Gallery orizzontale (scroll full-width, altezza fissa, lightbox) ===== */
.gallery-orizzontale {
    width: 100%;
    position: relative;
    /* contenitore per le frecce in overlay */
}

/* Slider Swiper (initGalleryTrack): scorrimento, trascinamento, loop e cursore li gestisce Swiper.
   Qui resta solo il margine laterale (con didascalie le immagini non toccano il bordo schermo);
   il gap tra le immagini e' spaceBetween nell'init. */
.gallery-track {
    padding: 0 0.75rem;
}

/* Le slide hanno larghezza propria (slidesPerView:'auto'): l'altezza la detta --gallery-h */
.gallery-track .swiper-wrapper {
    align-items: flex-start;
}

/* Senza didascalie: immagini edge-to-edge, prima foto full-width (nessun bordo bianco) */
.gallery-orizzontale.gallery-fullwidth .gallery-track {
    padding: 0;
}

.gallery-item {
    width: auto;
    /* slidesPerView:'auto': la larghezza viene dall'immagine (altezza fissa) */
    margin: 0;
    max-width: 90vw;
}

/* Altezza fissa dalla gallery (--gallery-h), larghezza proporzionale (auto) */
.gallery-img {
    height: var(--gallery-h, 60vh);
    width: auto;
    max-width: none;
    display: block;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    /* evita il ghost-drag nativo dell'immagine */
}

/* Frecce di scorrimento: trasparenti, sopra le immagini, centrate sulla banda immagine */
.gallery-nav {
    position: absolute;
    top: calc(var(--gallery-h, 60vh) / 2);
    transform: translateY(-50%);
    z-index: 3;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem 1rem;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    /* leggibile anche su immagini chiare */
}

.gallery-nav-prev {
    left: 0.25rem;
}

.gallery-nav-next {
    right: 0.25rem;
}

/* Swiper disabilita i pulsanti a fine corsa: col loop non succede, ma con una sola immagine
   (watchOverflow) le frecce vanno nascoste invece di restare inerti. */
.gallery-nav.swiper-button-disabled,
.gallery-nav.swiper-button-lock {
    display: none;
}

/* La didascalia segue SEMPRE la larghezza dell'immagine sopra: width:0 non contribuisce
   alla larghezza della colonna (la fissa l'immagine), min-width:100% la fa poi combaciare. */
.gallery-caption {
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    padding-top: 0.6rem;
}

.gallery-caption .occhiello {
    font-size: 0.85em;
    margin-bottom: 0.1rem;
}

.gallery-caption .titolo {
    font-size: 1.15em;
    margin-bottom: 0.1rem;
}

.gallery-caption .sottotitolo {
    font-size: 0.95em;
    margin-bottom: 0.2rem;
}

.gallery-caption .gallery-testo {
    font-size: 0.9em;
}

/* ===== Loader per-immagine (lazy loading): spinner sul contenitore finche' l'immagine carica ===== */
/* Wrapper stretto attorno all'immagine (nei punti dove il parent contiene anche testo): serve a
   centrare lo spinner esattamente sull'immagine e non sull'intero blocco. */
.lazy-img-holder {
    display: block;
    line-height: 0;
}

.img-loading {
    position: relative;
}

.img-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(90, 80, 55, 0.2);
    border-top-color: rgba(90, 80, 55, 0.7);
    border-radius: 50%;
    animation: img-spin 0.7s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes img-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Lightbox (aperta al click su .gallery-img, gestita in main.js) */
body.gallery-lightbox-open {
    overflow: hidden;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}

.gallery-lightbox.is-open {
    display: flex;
}

/* Slider interno (Swiper): trascinamento, frecce e bullets. Largo quanto la foto puo' essere,
   cosi' frecce e bullets restano sopra l'immagine e non ai bordi dello schermo. */
.gallery-lightbox-swiper {
    width: min(92vw, 1400px);
    height: 92vh;
    position: relative;
}

.gallery-lightbox-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox-img {
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Spinner per-slide: la full-size e' generata on-demand, puo' metterci un attimo */
.gallery-lightbox-slide.is-loading::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gallery-lightbox-spin 0.8s linear infinite;
}

.gallery-lightbox-slide.is-loading .gallery-lightbox-img {
    opacity: 0;
}

@keyframes gallery-lightbox-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Bullets: dentro la foto, in basso al centro */
.gallery-lightbox-bullets {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    pointer-events: none;
    /* i bullet restano cliccabili, la fascia no (chiuderebbe la lightbox) */
}

.gallery-lightbox-bullets .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0;
    background: #fff;
    opacity: 0.45;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gallery-lightbox-bullets .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.3);
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem 1rem;
}

.gallery-lightbox-close {
    top: 1rem;
    right: 1.25rem;
    font-size: 2.5rem;
    z-index: 3;
}

/* Frecce dentro la foto (non ai bordi dello schermo): stanno nello slider, sopra le slide */
.gallery-lightbox-prev,
.gallery-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    z-index: 3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    /* leggibili anche su foto chiare */
}

/* Con una sola foto le frecce vanno nascoste invece che restare inerti */
.gallery-lightbox-prev.swiper-button-disabled,
.gallery-lightbox-next.swiper-button-disabled {
    display: none;
}

.gallery-lightbox-prev {
    left: 0.5rem;
}

.gallery-lightbox-next {
    right: 0.5rem;
}

/* Bottoni: override degli stili Bootstrap con il bottone solido del sito (nero/bianco, squadrato,
   niente radius/ombre/focus blu). Vale per .btn e per le varianti Bootstrap. style.css e' caricato
   dopo Bootstrap -> a parita' di specificita' vincono queste regole. */
.btn,
.btn-primary,
.btn-secondary,
.btn-dark,
.btn-light,
.btn-outline-primary,
.btn-outline-dark {
    display: inline-block;
    background: #000;
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 0.7rem 2rem;
    font-family: var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    box-shadow: none;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-dark:hover,
.btn-dark:focus,
.btn-light:hover,
.btn-light:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background: #000;
    color: #fff;
    opacity: 0.85;
    box-shadow: none;
}

/* Disabilitato: resta il bottone nero del sito, solo attenuato. Senza background/color espliciti
   Bootstrap lo renderebbe trasparente (le sue --bs-btn-disabled-* non sono valorizzate qui). */
.btn:disabled,
.btn.disabled {
    background: #000;
    color: #fff;
    opacity: 0.5;
    cursor: default;
}

/* ===== Header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(6px);
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.header-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: var(--header-h);
    gap: 1rem;
}

.nav-group {
    list-style: none;
    display: flex;
    gap: 2.75rem;
    margin: 0;
    padding: 0;
}

.nav-right {
    justify-content: flex-end;
}

.nav-link {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--clr-text);
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 0.6;
}

/* Sezione che si sta guardando (scroll-spy in main.js): stessa resa della voce corrente di
   mingardo (guida §7.6c). L'header e' trasparente sull'hero e crema allo scroll: l'underline
   usa currentColor, quindi resta leggibile in entrambi gli stati. */
.nav-link.active {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lang-link {
    color: var(--clr-muted);
    transition: color 0.2s ease;
}

/* hover solo sulla lingua non corrente: quella corrente e' uno <span>, non un link */
a.lang-link:hover {
    color: var(--clr-text);
}

/* Lingua corrente: non cliccabile, underline sempre visibile (il colore lo danno le regole
   per-stato dell'header: trasparente sull'hero, crema allo scroll, navy nel dropdown mobile) */
.lang-link.active {
    color: var(--clr-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: default;
}

.lang-sep {
    color: rgba(0, 0, 0, 0.25);
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--clr-text);
    display: block;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Menu aperto: le tre barre diventano una X (la centrale sparisce, le altre due si incrociano).
   7px = meta' barra (1px) + gap (5px) + meta' barra (1px): le porta entrambe sulla mediana.
   Standard dei siti a blocchi (guida §7.15b). */
.site-header.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== Blocchi ===== */
main {
    flex: 1 0 auto;
}

section.sec-auto {
    width: 100%;
}

/* ===== Footer ===== */
.site-footer {
    margin-top: auto;
    padding: 3rem 0 2rem;
    font-size: 0.9rem;
    color: var(--clr-text);
}

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    /* Header compatto: il logo si rimpicciolisce agendo sulla sola larghezza (l'altezza resta
       auto, il PNG e' 800x298: fissare anche l'altezza lo schiaccerebbe). L'altezza dell'header
       segue di conseguenza: 150 * 298/800 = 56px di logo + 16px di padding sopra e sotto. */
    :root {
        --logo-w: 150px;
        --header-h: 88px;
    }

    .header-nav {
        grid-template-columns: 1fr auto;
        min-height: 0;
        padding: 16px 1rem;
        row-gap: 0;
        align-content: center;
    }

    .site-logo {
        order: 1;
        justify-content: flex-start;
    }

    .nav-toggle {
        display: flex;
        order: 2;
        margin-left: auto;
    }

    /* Il menu mobile a tendina è gestito nel blocco @media (max-width: 991.98px) più sotto
       (.nav-right absolute dark dropdown). Le vecchie regole .nav-group/.nav-left/.nav-social
       (accordion di un header precedente) sono state rimosse: sovrascrivevano il padding del
       dropdown (.site-header.nav-open .nav-group{padding:1rem 0} vinceva su .nav-right) e
       schiacciavano le voci a sinistra. */
}

/* Video (mp4 o iframe Vimeo background) a tutta larghezza (Immagine-Fullwidth): copre la section (cover) */
.sec-fullwidth-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* Embed Vimeo inline (blocchi generici/custom-code): iframe responsivo 16:9 */
.video-vimeo-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-vimeo-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== Immagine-Fullwidth: slide a tutta larghezza con overlay testo (singola o gallery) =====
   Slider Swiper (initGalleryTrack) con loop infinito, ma SENZA lightbox: le slide non hanno
   [data-gallery-full], quindi il click non apre l'ingrandimento. Ogni slide occupa la banda intera. */
.sec-fullwidth-gallery {
    width: 100%;
    position: relative;
}

.sec-fullwidth-gallery .gallery-track {
    padding: 0;
    /* niente margine laterale: le slide sono edge-to-edge */
    height: var(--gallery-h, 100vh);
}

.sec-fullwidth-gallery .swiper-wrapper {
    align-items: stretch;
}

.fullwidth-slide {
    width: 100%;
    height: var(--gallery-h, 100vh);
    position: relative;
    overflow: hidden;
    background-color: #f8f6f2;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Attesa del lazy background (hero e slide a piena banda): si vede lo stesso placeholder delle
   <img> lazy, non un riquadro vuoto. Dichiarata DOPO .fullwidth-slide per vincere sul
   background-size; appena main.js assegna il background inline e toglie .lazy-bg tornano
   cover/center della slide. */
.lazy-bg {
    background-image: url('../img/placeholder.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Overlay testuale sopra il media (z sopra il video/immagine), colonna flex per l'allineamento verticale */
.fullwidth-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.fullwidth-overlay-inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Scrim: pannello colorato semi-trasparente DIETRO il solo blocco di testo (colore = Sfondo del record,
   passato in --scrim). L'alpha sta sul ::before, così il testo sopra resta pieno/leggibile. */
.fullwidth-overlay-inner.has-scrim {
    position: relative;
}

.fullwidth-overlay-inner.has-scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--scrim);
    opacity: 0.5;
    z-index: 0;
}

.fullwidth-overlay-inner.has-scrim>* {
    position: relative;
    z-index: 1;
}

.fullwidth-overlay a {
    color: inherit;
}

/* ============================================================================
   Blocchi generici: hero fullwidth, azioni/pulsanti (Link/Link2), skin bottoni
   ============================================================================ */

/* Hero (Immagine-Fullwidth, titolo h1): standard raddoppiato a 4rem, scalato da DimTitolo; sottotitolo corsivo 2x */
.fullwidth-overlay h1.blocco-titolo {
    font-size: calc(4rem * var(--dim-titolo, 100) / 100);
    line-height: 1.02;
}

/* Spazio verticale attorno al titolo fullwidth (prima e dopo), piu' arioso dei blocchi standard.
   Copre sia il titolo-blocco (h1) sia i titoli dei figli (div.titolo.blocco-titolo).
   !important perche' l'utility Bootstrap mb-2 sul titolo e' a sua volta !important. */
.fullwidth-overlay .blocco-titolo {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.fullwidth-overlay .sottotitolo {
    font-size: calc(1.2em * var(--dim-sottotitolo, 100) / 100);
    font-style: normal;
    /* default non corsivo, come negli altri blocchi; forzabile via TipografiaSottoTitolo */
    line-height: 1.15;
}

/* Pulsanti dei blocchi (Link / Link 2), skin dal catalogo psbottoneskin (classe CSS = campo Classe) */
.blocco-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* AllineaLinkAllegato: il contenitore e' flex, quindi le classi text-* (text-align) non
   spostano i pulsanti -> mappa l'allineamento orizzontale su justify-content. */
.blocco-azioni.text-center {
    justify-content: center;
}

.blocco-azioni.text-end {
    justify-content: flex-end;
}

.btn-blocco {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    /* niente text-transform: il brand scrive tutto in minuscolo (eccetto Tenuta Del Paguro
       e Viabizzunoagricola), quindi il testo va reso come e' stato inserito in back-office */
    text-decoration: none;
    border: 1px solid currentColor;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Skin "scuro": sfondo e bordo #1a1a1a, testo bianco */
.btn-skin-scuro {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
}

.btn-skin-scuro:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #1a1a1a;
}

/* Skin "bianco": sfondo trasparente, testo e bordo bianchi */
.btn-skin-bianco {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

.btn-skin-bianco:hover {
    background: #ffffff;
    color: #1a1a1a;
}

/* Blocco-Generico con immagine a lato (PosizioneImmagine sinistra/destra): la colonna immagine
   riempie l'altezza della riga (pari al pannello testo), immagine in cover, niente margine sotto
   (elimina lo spazio del colore di sfondo sotto l'immagine). Scoped alla riga immagine-a-lato
   (.align-items-start), NON tocca le immagini impilate a piena larghezza. */
.blocco-generico .row.align-items-start {
    align-items: stretch !important;
    /* vince su Bootstrap .align-items-start (flex-start !important) */
}

/* La colonna immagine si stira all'altezza della riga (= pannello testo); l'immagine, fuori dal
   flusso (absolute), riempie la colonna in cover senza dettarne l'altezza. */
.blocco-generico .row.align-items-start>[class*="col-"] {
    position: relative;
    min-height: 280px;
}

.blocco-generico .row.align-items-start .lazy-img-holder {
    display: block;
    margin-bottom: 0;
    overflow: hidden;
}

.blocco-generico .row.align-items-start .lazy-img-holder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Spazio tra immagine e testo (immagine a lato), ~5x il gutter di default. Padding sul lato interno
   della colonna testo (dentro la colonna: niente overflow). Solo da desktop; su mobile le colonne
   impilano. Gestisce sia immagine a sinistra sia a destra. */
@media (min-width: 768px) {
    .blocco-generico .row.align-items-start>[class*="col-"]:has(.lazy-img-holder)+[class*="col-"] {
        padding-left: 5rem;
    }

    .blocco-generico .row.align-items-start>[class*="col-"]:has(+ [class*="col-"] .lazy-img-holder) {
        padding-right: 5rem;
    }
}

/* ===== Blocco con immagine a lato (blocchi figlio come elenco o card) =====
   Le dimensioni/margini del contenuto (titolo/sottotitolo) NON dipendono da StileFigli: sono uniformi
   e si regolano coi campi Dim*. Cosi' passare da Card a Elenco non cambia il resto del contenuto. */

/* Immagine flush (margini sezione rimossi): il margine sopra/sotto resta nella colonna testo.
   Scoped alla riga immagine-a-lato (non a StileFigli) → uguale per Card ed Elenco. */
@media (min-width: 768px) {
    .blocco-generico .row.align-items-start>[class*="col-"]:not(:has(.lazy-img-holder)) {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Elenco numerato "passi" (I/II/III) usato nel Contenuto RTE dei blocchi scuri
   (Between Land and Sea / The forms of the evening). Nessun pallino, divisori sottili. */
.elenco-passi {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.elenco-passi li {
    display: flex;
    gap: 1.5rem;
    padding: 1.05rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    align-items: baseline;
    /* numero (occhiello) allineato alla baseline del titolo */
}

.elenco-passi li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.elenco-passi .np-num {
    flex: 0 0 auto;
    min-width: 2.2rem;
    font-size: 1.25rem;
    opacity: 0.65;
    letter-spacing: 0.02em;
}

.elenco-passi .np-txt {
    font-size: 1.05rem;
    line-height: 1.5;
}

.elenco-passi .np-txt strong {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15rem;
    font-size: calc(1.5rem * var(--dim-titolo, 100) / 100);
}

/* Occhiello del figlio nell'elenco: SOPRA il titolo, piccolo (non è il numero) */
.elenco-passi .np-occhiello {
    font-size: calc(0.8rem * var(--dim-occhiello, 100) / 100);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 0.25rem;
}

/* Marcatore automatico (non dai campi) secondo lo stile: romani / arabi / punto */
.elenco-passi.elenco-romani,
.elenco-passi.elenco-arabi {
    counter-reset: elpasso;
}

.elenco-passi.elenco-romani li,
.elenco-passi.elenco-arabi li {
    counter-increment: elpasso;
}

.elenco-passi.elenco-romani .np-num::before {
    content: counter(elpasso, upper-roman) ".";
}

.elenco-passi.elenco-arabi .np-num::before {
    content: counter(elpasso, decimal) ".";
}

.elenco-passi.elenco-punti .np-num::before {
    content: "\2022";
    font-size: 1.4em;
    line-height: 1;
}

/* Elenco semplice (senza numeri ne' punti): nessun marcatore, testo a filo */
.elenco-passi.elenco .np-num {
    display: none;
}

/* Figlio a card con testo sovrapposto all'immagine (LayoutFigli titoli-sovrapp / tutto-sovrapp).
   Il testo si sovrappone all'immagine con uno scrim per leggibilita'; allineamento verticale dal figlio
   (justify-content sulla colonna flex). Il colore testo eredita dal figlio/blocco. */
.figlio-overlay {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* riempie l'altezza della col (righe equal-height); l'altezza la detta il testo */
}

.figlio-overlay .lazy-img-holder {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0 !important;
    /* vince su .mb-2 (Bootstrap !important): immagine a filo, cover */
    z-index: 0;
}

.figlio-overlay .lazy-img-holder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.figlio-overlay-text {
    position: relative;
    /* in flusso: detta l'altezza del blocco (niente clipping del testo) */
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.figlio-overlay-text::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

.figlio-overlay-text>* {
    position: relative;
    z-index: 1;
}

/* Cards "The experiences": occhiello (numero romano) più marcato sopra il titolo card */
.blocco-generico .occhiello {
    font-size: calc(1.15rem * var(--dim-occhiello, 100) / 100);
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* ===== Footer chiaro (stesso impianto del footer dello shop lanostrastrada.it):
   fondo bianco, testo nero, voci in minuscolo con link sottolineati ===== */
.site-footer {
    background: var(--clr-bg);
    color: var(--clr-text);
    padding: 4rem 0 1.5rem;
    border-top: 1px solid var(--clr-cream);
}

.site-footer a {
    color: var(--clr-text);
}

/* Stesse proporzioni del footer dello shop: colonna brand larga circa la meta' della pagina,
   poi tre colonne di link allineate a destra di essa. */
.site-footer .footer-cols {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1.3fr 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
}

.site-footer .footer-col p {
    margin: 0 0 0.4rem;
    line-height: 1.7;
}

/* Nome del brand sotto il logo (come nel footer dello shop): unico elemento in grassetto */
.site-footer .footer-brand-nome {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

/* "un progetto di Tenuta Del Paguro e Viabizzunoagricola": corsivo, con i due partner linkati */
.site-footer .footer-progetto {
    font-style: italic;
    margin-bottom: 1.2rem;
}

/* I due partner stanno sulla stessa riga: qui i link non seguono il display:block delle voci
   di colonna (selettore piu' specifico della regola .footer-col a che viene dopo). */
.site-footer .footer-col .footer-progetto a,
.site-footer .footer-progetto a {
    display: inline;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer .footer-address {
    font-style: normal;
    line-height: 1.9;
}

.site-footer .footer-col .footer-address a,
.site-footer .footer-address a {
    display: inline;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Voci di colonna ben distanziate, come nel footer dello shop */
.site-footer .footer-col a {
    display: block;
    padding: 0.55rem 0;
    transition: opacity 0.2s ease;
}

.site-footer .footer-col a:hover {
    opacity: 0.6;
}

.site-footer .footer-logo-link,
.site-footer .footer-logo {
    display: block;
}

/* Logo footer alla stessa misura dello shop (img width=100) */
.site-footer .footer-logo {
    width: var(--logo-w-footer);
    height: auto;
    margin-bottom: 2rem;
}

.site-footer .footer-end {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--clr-cream);
    font-size: 0.78rem;
}

/* Variante "minimale" (campo MostraFooter della pagina): solo logo, brand, progetto e contatti */
.site-footer-minimale {
    padding: 3rem 0 2rem;
}

.site-footer-minimale .footer-address {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .site-footer .footer-cols {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .site-footer .footer-end {
        flex-direction: column;
    }
}

/* ===== Header: trasparente sopra l'hero, solido allo scroll (classe .scrolled via main.js) ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}

body.header-solid {
    padding-top: var(--header-h);
}

.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

/* Switch lingua ancorato al bordo destro, staccato dal gruppo nav */
.header-nav .nav-right .header-lang {
    margin-left: 1rem;
}

.site-logo {
    justify-content: flex-start;
}

/* Logo header alla stessa misura dello shop lanostrastrada.it: 250px di larghezza
   (l'originale serve l'immagine a width=250 height=93, senza vincoli CSS ulteriori) */
.site-logo img {
    width: var(--logo-w);
    max-width: 60vw;
    height: auto;
    display: block;
}

.site-logo .logo-dark {
    display: none;
}

.nav-right {
    align-items: center;
    gap: 2rem;
}

.site-header .nav-link,
.site-header .site-logo {
    color: var(--clr-on-dark);
}

/* Testo header: case standard (Collezioni, Azienda...), non maiuscolo */
.header-nav .nav-link,
.header-nav .nav-cta {
    letter-spacing: 0.02em;
    font-size: 0.85rem;
}

.site-header .lang-link {
    color: rgba(255, 255, 255, 0.6);
}

.site-header .lang-link.active {
    color: var(--clr-on-dark);
}

.site-header .lang-sep {
    color: rgba(255, 255, 255, 0.35);
}

.nav-cta {
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nav-cta:hover {
    background: #ffffff;
    color: var(--clr-dark);
}

/* stato "scrolled": header solido crema, testo blu notte, logo scuro */
.site-header.scrolled {
    background: rgba(255, 255, 255, 0.97);
    border-bottom-color: rgba(26, 26, 26, 0.1);
    backdrop-filter: saturate(180%) blur(6px);
}

.site-header.scrolled .nav-link,
.site-header.scrolled .site-logo {
    color: var(--clr-text);
}

.site-header.scrolled .nav-cta {
    color: var(--clr-text);
    border-color: var(--clr-text);
}

.site-header.scrolled .logo-light {
    display: none;
}

.site-header.scrolled .logo-dark {
    display: block;
}

/* Il logo del brand e' un PNG nero: sopra un hero a tutta banda (header trasparente) va reso
   bianco, altrimenti sparisce sulle immagini scure. Allo scroll l'header diventa bianco e il
   logo torna nero. Un solo file, nessuna seconda variante da mantenere. */
.site-header:not(.scrolled) .site-logo img {
    filter: brightness(0) invert(1);
}

/* Link "shop" nell'header: e' l'unica voce di navigazione, va distinta dal resto */
.nav-shop {
    text-transform: lowercase;
    letter-spacing: 0.08em;
}

/* ===== Header "minimale" (campo MostraHeader della pagina): solo il logo, centrato e non
   cliccabile. Nessun menu, nessuna lingua: si usa sulle pagine che devono restare senza vie
   di uscita (es. Cofanetti sull'host B2B). ===== */
.site-header-minimale {
    position: static;
    background: var(--clr-bg);
    border-bottom: 1px solid var(--clr-cream);
}

/* L'header minimale sta nel flusso: il padding-top compensativo dell'header fisso non serve.
   Lo toglie gia' main.js (non assegna .header-solid); questa regola e' la rete di sicurezza
   se il JS non gira. */
body:has(.site-header-minimale) {
    padding-top: 0;
}

/* Nessuna altezza minima ereditata dall'header standard: il logo resta in alto, con poco
   respiro sopra e sotto */
.site-header-minimale .header-nav {
    justify-content: center;
    min-height: 0;
    padding: 0.75rem 1rem;
}

.site-header-minimale .site-logo {
    justify-content: center;
}

/* L'header minimale non passa mai in stato .scrolled: senza questa regola resterebbe valida
   l'inversione in bianco prevista per l'header trasparente sopra l'hero (logo invisibile su
   fondo bianco). Stessa specificita' di quella regola, dichiarata dopo -> vince. */
.site-header-minimale:not(.scrolled) .site-logo img,
.site-header-minimale .site-logo img {
    filter: none;
}

.site-header.scrolled .lang-link {
    color: var(--clr-muted);
}

.site-header.scrolled .lang-link.active {
    color: var(--clr-text);
}

.site-header.scrolled .lang-sep {
    color: rgba(26, 26, 26, 0.25);
}

.site-header.scrolled .nav-cta:hover {
    background: var(--clr-dark);
    color: var(--clr-on-dark);
}

/* Mobile: burger + menu a tendina scuro */
@media (max-width: 991.98px) {
    .nav-toggle {
        display: flex;
        order: 2;
        z-index: 2;
    }

    .nav-toggle span {
        background: var(--clr-on-dark);
    }

    .site-header.scrolled .nav-toggle span {
        background: var(--clr-text);
    }

    .header-nav {
        position: relative;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .nav-right {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
        background: rgba(26, 26, 26, 0.98);
        padding: 1.5rem;
        display: none;
    }

    .site-header.nav-open .nav-right {
        display: flex;
    }

    .site-header.nav-open .nav-link,
    .site-header.nav-open .nav-cta,
    .site-header.nav-open .lang-link.active {
        color: var(--clr-on-dark);
    }

    /* Dropdown mobile: sempre sfondo navy → la CTA deve avere bordo/testo CHIARI anche quando
       l'header è .scrolled (altrimenti .scrolled .nav-cta mette bordo navy = invisibile su navy). */
    .site-header.nav-open .nav-cta {
        display: inline-block;
        color: var(--clr-on-dark);
        border-color: var(--clr-on-dark);
    }

    .site-header.nav-open .nav-cta:hover {
        background: var(--clr-on-dark);
        color: var(--clr-dark);
    }
}

/* ============================================================================
   Griglia figli con CAMPI OMOLOGHI ALLINEATI tra card (CSS subgrid)
   AllineaFigliGriglia = 'omogeneo-*'. Ogni campo (occhiello/titolo/sottotitolo/
   contenuto/link) occupa la STESSA traccia-riga su tutte le card della stessa riga
   visiva -> occhiello sotto occhiello, titolo sotto titolo, ecc. L'immagine e' una
   traccia propria (layout impilati) o lo sfondo in cover (layout sovrapposti).
   L'enum detta l'ancoraggio verticale (alto/centro/basso) via align-items.
   Multi-riga: 'grid-row: span R' + auto-flow -> ogni riga di card si allinea da se'.
   ============================================================================ */
.blocco-generico .figli-omogeneo {
    display: grid;
    grid-template-columns: repeat(var(--figli-cols, 3), minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0;
    /* niente gap tra le tracce-campo (subgrid eredita il gap dell'outer): spaziatura via margini .fg */
    margin-top: 1.5rem;
}

@media (max-width: 767.98px) {
    .blocco-generico .figli-omogeneo {
        grid-template-columns: minmax(0, 1fr);
    }
}

.blocco-generico .figli-omogeneo>.card-figlio {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: subgrid;
    margin-bottom: 2.5rem;
    /* spazio tra righe di card (row-gap outer = 0) */
    min-width: 0;
}

.blocco-generico .figli-omogeneo .fg {
    min-width: 0;
    grid-column: 1;
}

/* Ancoraggio verticale del gruppo: posizione dei campi entro la propria traccia
   (rilevante per il campo a lunghezza variabile, es. contenuto: 'basso' allinea i
   fondi -> prezzi allineati; 'alto' allinea i vertici). */
.figli-omogeneo.figancora-alto>.card-figlio {
    align-content: start;
    align-items: start;
}

.figli-omogeneo.figancora-centro>.card-figlio {
    align-content: center;
    align-items: center;
}

.figli-omogeneo.figancora-basso>.card-figlio {
    align-content: end;
    align-items: end;
}

/* Ritmo verticale dei campi (row-gap outer = 0) */
.figli-omogeneo .fg-occhiello {
    margin-bottom: 0.25rem;
}

.figli-omogeneo .fg-titolo {
    margin-bottom: 0.25rem;
}

.figli-omogeneo .fg-sottotitolo {
    margin-bottom: 0.75rem;
}

.figli-omogeneo .fg-contenuto {
    margin-bottom: 0.75rem;
}

.figli-omogeneo .fg-media {
    margin-bottom: 0.75rem;
}

.figli-omogeneo .fg-link {
    margin-bottom: 0;
}

/* Niente margine inferiore residuo in fondo alla card: l'ultimo campo e l'ultimo elemento dentro un
   campo (es. ultimo <p>/prezzo del contenuto RTE) non lasciano spazio sotto -> resta solo il padding
   della card. Regola generale "ultimo figlio dell'albero senza margin-bottom se non c'e' nulla dopo". */
.figli-omogeneo .card-figlio>.fg:last-child,
.figli-omogeneo .fg> :last-child {
    margin-bottom: 0;
}

/* Numero di righe (span) per layout: impilati = 6 tracce (media inclusa), sovrapposti = 5 */
.figli-omogeneo.figli-testo-sotto>.card-figlio,
.figli-omogeneo.figli-titoli-sopra>.card-figlio,
.figli-omogeneo.figli-tutto-sopra>.card-figlio {
    grid-row: span 6;
}

.figli-omogeneo.figli-titoli-sovrapp>.card-figlio,
.figli-omogeneo.figli-tutto-sovrapp>.card-figlio {
    grid-row: span 6;
    /* riga 1 = spacer (banda immagine in alto), righe 2-6 = campi */
}

/* Posizione dei campi entro la card (numero di riga della subgrid) per ciascun layout */
.figli-testo-sotto .fg-media {
    grid-row: 1;
}

.figli-testo-sotto .fg-occhiello {
    grid-row: 2;
}

.figli-testo-sotto .fg-titolo {
    grid-row: 3;
}

.figli-testo-sotto .fg-sottotitolo {
    grid-row: 4;
}

.figli-testo-sotto .fg-contenuto {
    grid-row: 5;
}

.figli-testo-sotto .fg-link {
    grid-row: 6;
}

.figli-titoli-sopra .fg-occhiello {
    grid-row: 1;
}

.figli-titoli-sopra .fg-titolo {
    grid-row: 2;
}

.figli-titoli-sopra .fg-sottotitolo {
    grid-row: 3;
}

.figli-titoli-sopra .fg-media {
    grid-row: 4;
}

.figli-titoli-sopra .fg-contenuto {
    grid-row: 5;
}

.figli-titoli-sopra .fg-link {
    grid-row: 6;
}

.figli-tutto-sopra .fg-occhiello {
    grid-row: 1;
}

.figli-tutto-sopra .fg-titolo {
    grid-row: 2;
}

.figli-tutto-sopra .fg-sottotitolo {
    grid-row: 3;
}

.figli-tutto-sopra .fg-contenuto {
    grid-row: 4;
}

.figli-tutto-sopra .fg-media {
    grid-row: 5;
}

.figli-tutto-sopra .fg-link {
    grid-row: 6;
}

.figli-overlay .fg-spacer {
    grid-row: 1;
}

.figli-overlay .fg-occhiello {
    grid-row: 2;
}

.figli-overlay .fg-titolo {
    grid-row: 3;
}

.figli-overlay .fg-sottotitolo {
    grid-row: 4;
}

.figli-overlay .fg-contenuto {
    grid-row: 5;
}

.figli-overlay .fg-link {
    grid-row: 6;
}

/* Banda immagine in alto (altezza minima card overlay): lo spacer sizza la traccia 1 -> immagine
   visibile sopra il testo, che resta ancorato in basso. min-height 0 se AltezzaImmagineFigli non impostata. */
.figli-overlay .fg-spacer {
    min-height: var(--fig-altezza, 0);
    pointer-events: none;
}

/* Media come traccia (layout impilati): altezza da AltezzaImmagineFigli (cover) se impostata,
   altrimenti box ad aspect-ratio uniforme 3/2. Immagine sempre in cover. */
.figli-omogeneo:not(.figli-overlay) .fg-media .lazy-img-holder {
    display: block;
    aspect-ratio: 3 / 2;
    height: var(--fig-altezza, auto);
    /* se impostata vince sull'aspect-ratio */
    overflow: hidden;
    line-height: 0;
}

.figli-omogeneo:not(.figli-overlay) .fg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Layout sovrapposti: immagine di sfondo full-card in cover + scrim, testo sopra */
.figli-omogeneo.figli-overlay>.card-figlio {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    color: #fff;
    /* default leggibile su immagine; sovrascritto dal ColoreTesto inline del figlio */
}

.figli-omogeneo.figli-overlay .fg-media {
    position: absolute;
    inset: 0;
    /* niente piazzamento di griglia: un item abs-pos CON grid-column/row prende come containing
       block la cella (dentro il padding) invece del padding-box -> l'immagine rientrava a sinistra.
       Con grid auto il containing block torna il padding-box della card = immagine full-bleed. */
    grid-column: auto;
    grid-row: auto;
    margin: 0;
    z-index: 0;
}

.figli-omogeneo.figli-overlay .fg-media .lazy-img-holder {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    line-height: 0;
}

.figli-omogeneo.figli-overlay .fg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradiente scrim VERTICALE tra immagine e testo: trasparente (alto) -> #1a1a1a (basso).
   Intensita' dal campo figlio Gradiente (classe .grad-*); l'estensione verso l'alto cresce col livello. */
.figli-omogeneo.figli-overlay>.card-figlio::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* SOPRA l'immagine (z-index 0), SOTTO il testo (z-index 2) */
    pointer-events: none;
    background: linear-gradient(to top, #1a1a1a 0%, rgba(26, 26, 26, 0) 65%);
}

.figli-omogeneo.figli-overlay>.card-figlio.grad-nessuno::before {
    display: none;
}

.figli-omogeneo.figli-overlay>.card-figlio.grad-leggero::before {
    /* leggero: velo tenue solo in fondo, immagine ancora visibile dietro il testo */
    background: linear-gradient(to top, rgba(26, 26, 26, 0.55) 0%, rgba(26, 26, 26, 0) 38%);
}

.figli-omogeneo.figli-overlay>.card-figlio.grad-medio::before {
    /* medio: fondo pieno #1a1a1a che sfuma a meta' card */
    background: linear-gradient(to top, #1a1a1a 0%, rgba(26, 26, 26, 0) 62%);
}

.figli-omogeneo.figli-overlay>.card-figlio.grad-forte::before {
    /* forte: base piena piu' alta, tinta navy su quasi tutta la card */
    background: linear-gradient(to top, #1a1a1a 0%, #1a1a1a 22%, rgba(26, 26, 26, 0) 100%);
}

.figli-omogeneo.figli-overlay .fg:not(.fg-media) {
    position: relative;
    z-index: 2;
    /* sopra lo scrim (::before z-index 1) e l'immagine (z-index 0) */
}

/* ============================================================================
   Spaziatura (prima/dopo) e forzatura tipografica per elemento (campi Spaziatura + Tipografia
   su psblocco/psbloccofiglio, applicati a occhiello/titolo/sottotitolo/contenuto).
   Spaziatura ADDITIVA via pseudo-spacer (non tocca i margini base del layout): 'doppio' = 2rem,
   'triplo' = 3rem; prima = ::before, dopo = ::after. 'default' = nessuna classe.
   Tipografia = forzatura di stile/peso (override sul layout, quindi !important).
   ============================================================================ */
.sp-prima-doppio::before,
.sp-prima-triplo::before,
.sp-dopo-doppio::after,
.sp-dopo-triplo::after {
    content: "";
    display: block;
}

.sp-prima-doppio::before {
    height: 2rem;
}

.sp-prima-triplo::before {
    height: 3rem;
}

.sp-dopo-doppio::after {
    height: 2rem;
}

.sp-dopo-triplo::after {
    height: 3rem;
}

.tipo-normale {
    font-style: normal !important;
    font-weight: 400 !important;
}

.tipo-grassetto {
    font-weight: 700 !important;
    font-style: normal !important;
}

.tipo-corsivo {
    font-style: italic !important;
    font-weight: 400 !important;
}

.tipo-grassetto-corsivo {
    font-weight: 700 !important;
    font-style: italic !important;
}

/* Sezione titoli su due colonne (LayoutTitoli = titoli-sx / titoli-dx): occhiello+titolo da un lato,
   sottotitolo+contenuto dall'altro. Colonne allineate in alto (NON stretch: niente allungamento della
   colonna corta all'altezza dell'altra); niente margine inferiore residuo in fondo a ciascuna colonna. */
.blocco-generico .titoli-2col {
    align-items: flex-start;
}

.blocco-generico .titoli-2col>[class*="col-"]> :last-child {
    margin-bottom: 0;
}

/* ===== Pulsante "torna su" (back-to-top) — feature standard siti a blocchi (guida §7.15) =====
   In basso a destra, cerchio navy con freccia crema. Nascosto di default; .visible (aggiunta da
   main.js dopo lo scroll) lo mostra con fade + slide. Solo icona, nessuna label. */
.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1000;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #1a1a1a;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: #2b3a49;
}

.back-to-top:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .back-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 44px;
        height: 44px;
    }
}

/* ===== Area riservata rivenditori =====
   Riquadro di accesso (pagina /login e blocco del modulo d'ordine) e testata del modulo.
   Stessa palette del sito: superfici crema/sabbia, bottone nero pieno, niente angoli tondi. */
.login-page {
    padding-top: 3rem;
    padding-bottom: 4rem;
    text-align: center;
}

.login-titolo {
    margin-bottom: 0.75rem;
}

.login-intro {
    margin-bottom: 2rem;
    color: var(--clr-muted);
}

.login-box {
    max-width: 420px;
    margin: 0 auto;
    padding: 1.75rem;
    background: var(--clr-sand);
    border: 1px solid var(--clr-cream);
    text-align: left;
}

.login-form {
    display: flex;
    flex-direction: column;
}

/* Secondo form della pagina OTP (inserimento del codice): separato dal primo da una riga sottile */
.login-form-otp {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--clr-cream);
}

.login-label {
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--clr-muted);
    margin-bottom: 0.35rem;
}

.login-input {
    background: var(--clr-bg);
    border: 1px solid var(--clr-cream);
    border-radius: 0;
    padding: 0.7rem 0.85rem;
    margin-bottom: 1.1rem;
    font-size: 1rem;
    color: var(--clr-text);
}

.login-input:focus {
    outline: none;
    border-color: var(--clr-text);
}

/* Codice OTP: caratteri distanziati, si legge e si ricopia meglio */
.login-input-otp {
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

.login-submit {
    width: 100%;
}

.login-alt {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--clr-muted);
}

.login-alt a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-alt-sep {
    margin: 0 0.5rem;
    opacity: 0.5;
}

.login-msg {
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.95rem;
    border-left: 3px solid var(--clr-accent);
    background: var(--clr-bg);
}

.login-msg-ko {
    border-left-color: #a4342a;
}

/* ===== Modulo d'ordine dei cofanetti (blocco riservato) =====
   La testata si aggancia in alto per tutta la sezione: scorrendo l'elenco dei cofanetti il
   pulsante di conferma resta visibile, e quando la sezione finisce la testata scorre via con
   essa (comportamento nativo di position: sticky dentro il contenitore). */
.modulo-ordine .ordine-testata {
    position: sticky;
    top: 0;
    z-index: 5;
    /* Sfondo del colore della pagina: nel design la testata non ha una fascia colorata, ma
       da agganciata deve comunque coprire le righe che le scorrono sotto. */
    background: var(--clr-bg);
    /* Una linea sopra e una sotto, come nel design; quella inferiore fa da bordo superiore
       della prima riga (nessun margine, altrimenti si vedrebbero due linee). */
    border-top: 1px solid var(--clr-cream);
    border-bottom: 1px solid var(--clr-cream);
    padding: 1rem 0;
    margin-bottom: 0;
}

/* Pulsante di conferma: contorno sottile su fondo chiaro, come nel design (non il bottone pieno) */
.modulo-ordine .ordine-conferma {
    background: transparent;
    color: var(--clr-text);
    border: 1px solid var(--clr-text);
    padding: 0.6rem 1.5rem;
}

.modulo-ordine .ordine-conferma:hover,
.modulo-ordine .ordine-conferma:focus {
    background: var(--clr-text);
    color: var(--clr-bg);
    opacity: 1;
}

.modulo-ordine .ordine-conferma:disabled {
    background: transparent;
    color: var(--clr-text);
    opacity: 0.45;
}

/* Con l'header standard (che resta agganciato in cima) la testata si ferma sotto di esso;
   con l'header minimale, che scorre via con la pagina, resta il top: 0 qui sopra. */
body:has(.site-header:not(.site-header-minimale)) .modulo-ordine .ordine-testata {
    top: var(--header-h);
}

.ordine-testata-int {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ordine-ragione-sociale {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
}

.ordine-istruzioni {
    margin: 0;
    color: var(--clr-muted);
}

.ordine-azioni {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Non si comprimono: il pulsante di conferma e l'uscita restano leggibili anche con una
       ragione sociale lunga a sinistra. */
    flex-shrink: 0;
    white-space: nowrap;
}

/* Uscita: sola icona, con il testo nel title/aria-label */
.ordine-esci {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    color: var(--clr-muted);
    transition: color 0.2s ease;
}

.ordine-esci:hover,
.ordine-esci:focus-visible {
    color: var(--clr-text);
}

.ordine-esci svg {
    display: block;
}

.ordine-totale {
    font-size: 0.95rem;
    color: var(--clr-muted);
    white-space: nowrap;
}

.ordine-totale-articoli {
    color: var(--clr-text);
}

.ordine-totale-articoli::after {
    content: " ·";
}

.ordine-totale-valore {
    font-size: 1.15rem;
    color: var(--clr-text);
}

/* Una riga per cofanetto, come nel design: foto a sinistra su tutta l'altezza; in cima nome e
   quantita' sulla stessa linea; nella fascia sotto il contenuto della scatola e i prezzi. */
.ordine-riga {
    display: grid;
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: 2.5rem;
    row-gap: 1.75rem;
    align-items: start;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--clr-cream);
}

.ordine-riga:first-child {
    border-top: 1px solid var(--clr-cream);
}

.ordine-foto {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.ordine-foto img {
    width: 100%;
    height: auto;
    display: block;
}

.ordine-nome {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.ordine-riga .ordine-qta {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.ordine-descrizione {
    grid-column: 2;
    grid-row: 2;
}

.ordine-prezzi {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
}

.ordine-contiene {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    color: var(--clr-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ordine-prodotti {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ordine-prodotti li {
    margin-bottom: 0.9rem;
}

.ordine-prodotto {
    display: block;
    font-weight: 700;
}

.ordine-prodotto-dettaglio {
    display: block;
    color: var(--clr-text);
}

.ordine-prezzo {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
}

.ordine-prezzo-nota {
    margin: 0.25rem 0 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.ordine-prezzo-consumatore {
    margin: 0;
    font-size: 0.8rem;
    color: var(--clr-muted);
}

/* Prezzo al pubblico: barrato, il rivenditore paga meno */
.ordine-prezzo-pubblico {
    color: var(--clr-muted);
}

/* Selettore della quantita': meno / valore / piu' */
.ordine-qta {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--clr-cream);
}

.qta-btn {
    width: 2.25rem;
    background: none;
    border: 0;
    color: var(--clr-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.qta-btn:hover {
    background: var(--clr-cream);
}

.qta-input {
    width: 3.25rem;
    border: 0;
    border-left: 1px solid var(--clr-cream);
    border-right: 1px solid var(--clr-cream);
    padding: 0.45rem 0;
    text-align: center;
    font-size: 1rem;
    background: var(--clr-bg);
    -moz-appearance: textfield;
    appearance: textfield;
}

.qta-input::-webkit-outer-spin-button,
.qta-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ordine-note {
    margin-top: 2rem;
    max-width: 640px;
}

.ordine-note .login-input {
    width: 100%;
}

@media (max-width: 768px) {
    /* In colonna: foto, nome + quantita' affiancati, contenuto, prezzi */
    .ordine-riga {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        column-gap: 1rem;
        row-gap: 1rem;
    }

    .ordine-foto {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .ordine-nome {
        grid-column: 1;
        grid-row: 2;
    }

    .ordine-riga .ordine-qta {
        grid-column: 2;
        grid-row: 2;
    }

    .ordine-descrizione {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .ordine-prezzi {
        grid-column: 1 / -1;
        grid-row: 4;
        text-align: left;
    }

    /* Testata compatta: e' agganciata in alto, quindi lo spazio che occupa e' spazio tolto
       all'elenco per tutta la pagina. Due colonne su due righe (ragione sociale + uscita sopra,
       totale + conferma sotto), con .ordine-azioni reso trasparente da display: contents cosi'
       i suoi tre figli entrano direttamente nella griglia. Istruzioni e parola "totale" via:
       ridondanti su schermo stretto. Va anche tolto il white-space: nowrap del desktop, che
       impedendo la compressione mandava la pagina in scroll orizzontale. */
    /* Stessa specificita' della regola generale della testata, altrimenti resta il padding
       del desktop. */
    .modulo-ordine .ordine-testata {
        padding: 0.6rem 0;
    }

    .ordine-testata-int {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.5rem;
    }

    .ordine-azioni {
        display: contents;
    }

    .ordine-chi {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    .ordine-ragione-sociale {
        font-size: 1.05rem;
        overflow-wrap: anywhere;
    }

    .ordine-istruzioni,
    .ordine-totale-etichetta {
        display: none;
    }

    .ordine-esci {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .ordine-totale {
        grid-column: 1;
        grid-row: 2;
        white-space: normal;
    }

    /* Stessa specificita' della regola generale del pulsante (.modulo-ordine .ordine-conferma):
       senza il prefisso il padding del desktop resterebbe valido. */
    .modulo-ordine .ordine-conferma {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Esito dell'invio: sta nella testata agganciata in alto, cosi' si vede da qualunque punto
   dell'elenco si stia guardando. Sparisce da solo dopo qualche secondo (main.js) e ha la sua X
   per chiuderlo subito: agganciato in alto, su schermo stretto ruberebbe altrimenti mezza
   schermata a tempo indeterminato. */
.ordine-esito {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.85rem 0 0;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    border-left: 3px solid var(--clr-accent);
    background: var(--clr-sand);
}

/* Il display: flex qui sopra batterebbe l'attributo hidden: senza questa regola il riquadro
   resterebbe visibile (vuoto) anche da chiuso. */
.ordine-esito[hidden] {
    display: none;
}

.ordine-esito-chiudi {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.15rem -0.5rem 0 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--clr-muted);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.ordine-esito-chiudi:hover,
.ordine-esito-chiudi:focus-visible {
    color: var(--clr-text);
}

.ordine-esito-ko {
    border-left-color: #a4342a;
}

.ordine-esito-attesa {
    color: var(--clr-muted);
}