/* =============================================================================
   Perspect Starter — Main Stylesheet
   Mobile-first · CSS custom properties · BEM + Bootstrap
   ============================================================================= */


/* ── Font self-hosted ────────────────────────────────────────────────────────────
   Geist variable (100–900), self-hosted per compliance GDPR: nessuna chiamata a
   fonts.gstatic.com/googleapis (no leak IP a Google). Subset latin + latin-ext. */

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/geist/geist-latin.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: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/geist/geist-latin-ext.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;
}


/* ── Custom Properties ───────────────────────────────────────────────────────── */

:root {
    /* Colori brand */
    --color-black:         #000000;
    --color-black-rgb:     0, 0, 0;
    --color-white:         #ffffff;
    --color-white-rgb:     255, 255, 255;

    --color-accent:        #FA843C;
    --color-accent-rgb:    250, 132, 60;

    --color-footer:        #3B3D40;
    --color-footer-rgb:    59, 61, 64;

    --color-grey-1:        #FAFAFA;
    --color-grey-2:        #F6F6F6;

    --color-dark-1:       #38373F;
    --color-dark-1-rgb:   56, 55, 63;
    --color-dark-2:       #2A2930;
    --color-dark-2-rgb:   42, 41, 48;

    /* Alias semantici */
    --color-primary:       var(--color-black);
    --color-primary-rgb:   var(--color-black-rgb);
    --color-text:          #000000;
    --color-text-editorial:#545353;
    --color-text-muted:    #545353;
    --color-bg:            #ffffff;
    --color-bg-alt:        var(--color-grey-1);
    --color-bg-alt-2:      var(--color-grey-2);
    --color-border:        var(--color-grey-2);

    /* Bootstrap overrides */
    --bs-primary:          var(--color-accent);
    --bs-primary-rgb:      var(--color-accent-rgb);

    /* Typography */
    --font-family-base:    'Geist', system-ui, -apple-system, sans-serif;
    --font-family-heading: var(--font-family-base);
    --line-height-base:    1.6;

    /* Type scale — il nome riflette il valore px a 1920px */
    --fs-14:  0.875rem;
    --fs-15:  0.9375rem;
    --fs-16:  1rem;
    --fs-18:  clamp(1rem, 0.9375vw, 1.125rem);              /* 16→18px */
    --fs-20:  clamp(1.0625rem, 0.78vw + 0.85rem, 1.25rem); /* 17→20px */
    --fs-22:  clamp(1.125rem, 1vw + 0.75rem,   1.375rem);  /* 18→22px */
    --fs-25:  clamp(1.25rem,  1.302vw, 1.5625rem);          /* 20→25px */
    --fs-28:  clamp(1.25rem,  1.5vw + 0.75rem, 1.75rem);   /* 20→28px */
    --fs-30:  clamp(1.375rem, 1.5vw + 0.75rem, 1.875rem);  /* 22→30px */
    --fs-32:  clamp(1.5rem,   1.6vw + 0.7rem,   2rem);     /* 24→32px */
    --fs-40:  clamp(1.5rem,   2vw + 1rem,      2.5rem);    /* 24→40px */
    --fs-50:  clamp(1.75rem, 2.604vw,         3.125rem);  /* 28→50px */
    --fs-56:  clamp(2rem,     3vw + 1rem,      3.5rem);    /* 32→56px */
    --fs-60:  clamp(2.25rem,  3.13vw + 1rem,   3.75rem);   /* 36→60px */
    --fs-64:  clamp(2.25rem,  3.33vw + 1rem,   4rem);      /* 36→64px */
    --fs-70:  clamp(2.1875rem, 4vw + 1rem,     4.375rem);  /* 35→70px */
    --fs-80:  clamp(2.5rem,   5vw + 1rem,      5rem);      /* 40→80px */
    --fs-140: clamp(4rem,     7.29vw,          8.75rem);   /* 64→140px */

    /* Spacing — il nome riflette il valore px a 1920px */
    --p-60:   clamp(20px, 3.125vw, 60px);
    --p-90:   clamp(30px, 4.69vw,  90px);
    --p-120:  clamp(60px, 6.25vw,  120px);
    --p-160:  clamp(90px, 8.33vw,  160px);

    /* Gutter container */
    --gutter-off:   max(1.25rem, 8.3333vw);   /* Bootstrap dimezza (× .5): padding laterale effettivo = gutter-half (80px @ 1920px) */
    --gutter-half:  calc(var(--gutter-off) / 2);
    --gutter-in:    max(0.9375rem, 0.8125vw); /* gap interno colonne row */

    /* Focus */
    --focus-rgba: rgba(var(--color-accent-rgb), 0.35);
    --focus-ring: 0 0 0 3px var(--focus-rgba);

    /* Transitions */
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   0.25s var(--transition-timing);

    /* Header — solo per scroll-padding e spacer, mai min-height su .header */
    --header-height:    72px;
    --header-height-lg: 80px;
}


/* ── Reset minimale ──────────────────────────────────────────────────────────── */
/* Bootstrap reboot copre il grosso. Qui solo ciò che non gestisce. */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
}

p {
    margin-block: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:             var(--font-family-base);
    font-size:               var(--fs-16);
    line-height:             var(--line-height-base);
    color:                   var(--color-text);
    background:              var(--color-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Nasconde il bordo su img senza src o con src vuoto */
img:not([src]),
img[src=""] {
    visibility: hidden;
}


/* ── Media utilities ─────────────────────────────────────────────────────────── */
/*
 * Pattern: wrapper posizionato + immagine assoluta che riempie il container.
 * Usare un <div class="media"> lascia <figure> libero per la semantica HTML:
 *
 *   Semplice:
 *   <div class="media" style="aspect-ratio: 16/9">
 *       <img class="img-cover" src="..." alt="..." loading="lazy">
 *   </div>
 *
 *   Con caption (semantica corretta):
 *   <figure>
 *       <div class="media" style="aspect-ratio: 16/9">
 *           <img class="img-cover" src="..." alt="..." loading="lazy">
 *       </div>
 *       <figcaption>Didascalia</figcaption>
 *   </figure>
 *
 * .media       — wrapper (position: relative, display: block)
 * .media-bg    — wrapper decorativo: no pointer-events, no select.
 *                Supporta ::after per overlay (solo su <div>, non su <img>)
 * .img-cover   — riempie il wrapper, object-fit: cover   (foto, hero, card)
 * .img-contain — riempie il wrapper, object-fit: contain (loghi, illustrazioni)
 * .img-scale   — riempie il wrapper, object-fit: scale-down (icone, asset misti)
 *
 * NB: Bootstrap ha .object-fit-cover ecc. ma senza il posizionamento assoluto —
 * queste classi coprono il pattern "fill container" completo.
 */

.media {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.media-bg::after {
    user-select: none;
    pointer-events: none;
}

.img-cover,
.img-contain,
.img-scale,
.media-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.img-contain { object-fit: contain; }
.img-scale   { object-fit: scale-down; }

::selection {
    background: var(--color-accent);
    color: var(--color-white);
}


/* ── Link base ───────────────────────────────────────────────────────────────── */
/* Neutri di default — colore e stile aggiunto nel contesto (header, footer, .text…) */

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

/* Rimuove l'outline al click/tap ma lo preserva per navigazione da tastiera — EAA */
a:focus:not(:focus-visible) {
    outline: none;
}


/* ── Accessibility ───────────────────────────────────────────────────────────── */

/* Focus ring — EAA / WCAG 2.4.7 */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* WP core markup (search form, comments, Complianz…) la usa — il tema deve definirla */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    word-wrap: normal !important;
}

/* Skip link — usa .visually-hidden-focusable di Bootstrap per show-on-focus */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
}


/* ── Loader ──────────────────────────────────────────────────────────────────── */

.site-loader {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-loader__bars {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 16px;
}

.site-loader__bars span {
    display: inline-block;
    width: 1px;
    height: 100%;
    background: var(--color-primary);
    animation: stretchdelay 1.2s ease-in-out infinite;
}

.site-loader__bars span:nth-child(2) { animation-delay: -1.1s; }
.site-loader__bars span:nth-child(3) { animation-delay: -1.0s; }
.site-loader__bars span:nth-child(4) { animation-delay: -0.9s; }
.site-loader__bars span:nth-child(5) { animation-delay: -0.8s; }

@keyframes stretchdelay {
    0%, 40%, 100% { transform: scaleY(0.4); }
    20%           { transform: scaleY(1); }
}


/* ── Preheader ───────────────────────────────────────────────────────────────── */
/* Fascia arancione: promo a sinistra, telefoni a destra. ~40px desktop. */

.preheader {
    display:    none;
    position:   relative;
    z-index:    81; /* sopra il backdrop megamenu (80), resta luminoso/cliccabile */
    background: var(--color-accent);
    color:      var(--color-white);
    font-size:  var(--fs-14);
}
@media (min-width: 992px) {
    .preheader { display: block; }
}

.preheader__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    min-height: 40px;
    padding-block: 0.4rem;
}

.preheader__promo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35em;
}

.preheader__promo-link {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.preheader__promo-link:hover,
.preheader__promo-link:focus-visible {
    text-decoration: none;
}

.preheader__phones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: auto;
}

.preheader__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
}

.preheader__phone-icon {
    display: inline-flex;
    line-height: 0;
}

.preheader__phone-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.preheader__phone-label {
    font-weight: 700;
}

.preheader__phone-number {
    color: var(--color-white);
}

.preheader__phone-number:hover,
.preheader__phone-number:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.preheader :focus-visible {
    outline-color: var(--color-white);
}


/* ── Header ──────────────────────────────────────────────────────────────────── */
/* Fascia bianca: logo (sx) · menu (centro) · CTA pill scura (dx). Altezza = py 12px + logo. */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

/* 12px @1920, scala con viewport, mai sotto 8px. */
.header { padding-block: clamp(8px, 0.625vw, 12px); }

/* Logo: 130px @1920, scala con viewport, mai sotto 90px. */
.header__brand .brand {
    width: clamp(90px, 6.77vw, 130px);
    height: auto;
    display: block;
}

/* 3 colonne: logo (col) · menu (col-auto, centrato) · azioni (col).
   Il col-auto centrale è centrato perché i due col laterali hanno flex uguale.
   Niente min-height: altezza = py 12px + logo. */
@media (min-width: 992px) {
    .header { display: flex; align-items: center; }
}

.header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

/* ── Menu desktop — barra voci (megamenu ACF-driven) ── */
.header__menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem 1rem;
}
.header__item { position: relative; }

.header__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    color: var(--color-dark-1);
    font-weight: 500;
    font-size: var(--fs-16);
    padding: 0.5rem 0.25rem;
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: color var(--transition-base);
}

.header__link:hover,
.header__link:focus-visible,
.header__link[aria-current="page"],
.header__link--toggle[aria-expanded="true"] {
    color: var(--color-accent);
}

/* Underline arancione sotto la voce megamenu attiva (allineata al bordo header) */
.header__link--toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc( -1 * var(--header-pad-b, 12px) );
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}
.header__link--toggle[aria-expanded="true"]::after { transform: scaleX(1); }

/* Caret ▾ accanto alle voci megamenu */
.header__caret {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.12em);
    transition: transform var(--transition-base);
}
.header__link--toggle[aria-expanded="true"] .header__caret {
    transform: rotate(-135deg) translateY(-0.04em);
}

/* ── Megamenu overlay (pannello full-width sotto la barra) ── */
/* Backdrop fuori da <header>: z sotto header (100) e preheader (81) → dimma solo il body */
.header__mega-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(var(--color-black-rgb), 0.5);
}

.header__mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 95;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 24px 40px rgba(var(--color-black-rgb), 0.12);
    padding: clamp(2rem, 3vw, 3.25rem) 0 clamp(2.5rem, 3.5vw, 3.75rem);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.header__mega-panel.is-open {
    opacity: 1;
    transform: translateY(0);
}
/* Contenuto scrollabile se eccede il viewport (schermi bassi/wide). max-height via JS */
.header__mega-panel > .container-fluid {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Edge legacy */
}
.header__mega-panel > .container-fluid::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome/Safari (incl. Windows) */

/* Scroll-lock pagina mentre il megamenu è aperto */
body.mega-open { overflow: hidden; }

/* Bottone chiudi — pill arancione centrata sul bordo inferiore del pannello */
.header__mega-close {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: var(--color-accent);
    color: var(--color-white);
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(var(--color-black-rgb), 0.18);
    transition: background var(--transition-base);
}
.header__mega-close:hover,
.header__mega-close:focus-visible { background: var(--color-dark-1); }

/* ── Colonna megamenu ── */
.mega-col { display: flex; flex-direction: column; }

.mega-col__media {
    display: block;
    background: var(--color-grey-1);
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    margin-bottom: 1.25rem;
}
.mega-col__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    transition: transform var(--transition-base);
}
.mega-col__media:hover .mega-col__img { transform: scale(1.03); }

/* Apertura pannello: le colonne entrano in fade-up con stagger (pura CSS, riparte a
   ogni apertura). Anima la .mega-col (parent) → non tocca il transform hover dell'img. */
@keyframes mega-card-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.header__mega-panel.is-open .mega-col {
    animation: mega-card-in .45s var(--transition-timing) both;
}
.header__mega-panel.is-open .mega-col:nth-child(2) { animation-delay: .06s; }
.header__mega-panel.is-open .mega-col:nth-child(3) { animation-delay: .12s; }
.header__mega-panel.is-open .mega-col:nth-child(4) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
    .header__mega-panel.is-open .mega-col { animation: none; }
}

.mega-col__title {
    display: inline-block;
    color: var(--color-dark-1);
    font-weight: 600;
    font-size: var(--fs-25);
    line-height: 1.2;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color var(--transition-base);
}
.mega-col__title:hover { color: var(--color-accent); }

.mega-col__text {
    color: var(--color-text-muted);
    font-size: var(--fs-15);
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

/* Lista link (es. veicoli) — voci con separatore */
.mega-col__links {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: auto;
}
.mega-col__links li { border-top: 1px solid var(--color-border); }
.mega-col__links a {
    display: block;
    padding: 0.8rem 0;
    color: var(--color-dark-1);
    font-size: var(--fs-16);
    text-decoration: none;
    transition: color var(--transition-base);
}
.mega-col__links a:hover { color: var(--color-accent); }
.mega-col__links-all a { font-weight: 600; }

/* CTA singola (es. servizi) — "Scopri di più" sottolineato */
.mega-col__cta {
    display: inline-block;
    margin-top: auto;
    color: var(--color-dark-1);
    font-weight: 600;
    font-size: var(--fs-16);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color var(--transition-base);
}
.mega-col__cta:hover { color: var(--color-accent); }

/* ── CTA — pill scura, testo bianco uppercase bold ── */
.header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-dark-1);
    color: var(--color-white);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.85rem 1.75rem;
    border-radius: 100px;
    transition: background var(--transition-base);
}

.header__cta:hover,
.header__cta:focus-visible {
    background: var(--color-dark-2);
    color: var(--color-white);
}

.header__cta:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── Burger (mobile) — 3 linee → X ── */
.header__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-dark-1);
}
.header__menu-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

.header__burger,
.header__burger::before,
.header__burger::after {
    display: block;
    width: 26px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.header__burger { position: relative; }
.header__burger::before,
.header__burger::after {
    content: '';
    position: absolute;
    left: 0;
    transition: transform 0.3s var(--transition-timing), top 0.3s, bottom 0.3s;
}
.header__burger::before { top: -8px; }
.header__burger::after  { bottom: -8px; }

/* Burger → X quando drawer aperto */
body.menu-open .header__burger { background: transparent; }
body.menu-open .header__burger::before { top: 0; transform: rotate(45deg); }
body.menu-open .header__burger::after  { bottom: 0; transform: rotate(-45deg); }

/* Lock scroll mentre il drawer è aperto */
body.menu-open { overflow: hidden; }


/* ── Nav drawer mobile (slide-in da destra) ──────────────────────────────────── */

.nav-drawer__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(var(--color-black-rgb), 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--transition-timing), visibility 0s linear 0.3s;
}
body.menu-open .nav-drawer__backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--transition-timing), visibility 0s linear 0s;
}

.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    width: min(360px, 86vw);
    height: 100dvh;
    background: var(--color-white);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s var(--transition-timing), visibility 0s linear 0.35s;
}
body.menu-open .nav-drawer {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s var(--transition-timing), visibility 0s linear 0s;
}

.nav-drawer__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.nav-drawer__brand .brand { height: 40px; width: auto; display: block; }
.nav-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-dark-1);
    cursor: pointer;
    border-radius: 8px;
}
.nav-drawer__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Menu accordion (ACF-driven) */
.nav-drawer__menu { list-style: none; margin: 0; padding: 0.5rem 0; flex: 1 1 auto; }
.nav-drawer__item { border-bottom: 1px solid var(--color-grey-2); }

.nav-drawer__link,
.nav-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    background: none;
    border: 0;
    color: var(--color-dark-1);
    font-weight: 500;
    font-size: var(--fs-20);
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.nav-drawer__link:hover,
.nav-drawer__link[aria-current="page"],
.nav-drawer__toggle:hover { color: var(--color-accent); }
.nav-drawer__toggle:focus-visible,
.nav-drawer__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.nav-drawer__caret {
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.1em);
    transition: transform var(--transition-base);
}
.nav-drawer__item--has-children.is-expanded > .nav-drawer__toggle .nav-drawer__caret {
    transform: rotate(-135deg) translateY(-0.04em);
}

/* Sottomenu accordion — gruppi (colonne megamenu) */
.nav-drawer__sub {
    max-height: 0;
    overflow: hidden;
    background: var(--color-grey-1);
    transition: max-height 0.35s var(--transition-timing);
}
.nav-drawer__item--has-children.is-expanded > .nav-drawer__sub { max-height: 200vh; }

.nav-drawer__group { padding: 0.5rem 0; }
.nav-drawer__group + .nav-drawer__group { border-top: 1px solid var(--color-grey-2); }
.nav-drawer__group-title {
    display: block;
    padding: 0.65rem 1.25rem 0.35rem 1.75rem;
    color: var(--color-dark-1);
    font-weight: 600;
    font-size: var(--fs-16);
    text-decoration: none;
}
.nav-drawer__group-title:hover { color: var(--color-accent); }
.nav-drawer__sub-link {
    display: block;
    padding: 0.5rem 1.25rem 0.5rem 1.75rem;
    color: var(--color-text-muted);
    font-size: var(--fs-15);
    text-decoration: none;
}
.nav-drawer__sub-link:hover { color: var(--color-accent); }
.nav-drawer__sub-link--all { color: var(--color-dark-1); font-weight: 600; }

/* Footer drawer */
.nav-drawer__foot { padding: 1.25rem; border-top: 1px solid var(--color-border); margin-top: auto; }
.nav-drawer__cta { width: 100%; }
.nav-drawer__phones { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.nav-drawer__phone { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-dark-1); font-size: var(--fs-16); }
.nav-drawer__phone:hover { color: var(--color-accent); }
.nav-drawer__phone-icon { color: var(--color-accent); display: inline-flex; }


/* ── Footer ──────────────────────────────────────────────────────────────────── */
/*
 * 4 fasce:
 *   1. .prefooter        — arancione, testo + 2 dropdown contatti per sede
 *   2. .footer-explore   — grigia, 3 colonne menu approfondimenti
 *   3. .footer           — bianca, brand+social + 2 sedi + 3 colonne menu
 *   4. .footer__colophon — scura, copyright + legali + credits
 */

/* 1) Pre-footer ─────────────────────────────────────────────────────────────── */

.prefooter {
    background: var(--color-accent);
    color: var(--color-white);
    padding-block: clamp(20px, 1.5625vw, 30px);
}

.prefooter__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

/* Da md: tutto su una riga — testo sx, pill dx */
@media (min-width: 768px) {
    .prefooter__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
    .prefooter__actions { flex-wrap: nowrap; flex-shrink: 0; }
}

.prefooter__text {
    font-size: var(--fs-25);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.prefooter__text strong,
.prefooter__text b { font-weight: 700; }
.prefooter__text p { margin: 0; }

.prefooter__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Pill scura (--color-dark-1) — riusa la logica della .header__cta */
.prefooter__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border: 0;
    border-radius: 100px;
    background: var(--color-dark-1);
    color: var(--color-white);
    font-size: var(--fs-14);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.prefooter__pill:hover,
.prefooter__pill[aria-expanded="true"] {
    background: var(--color-dark-2);
}

.prefooter__pill-icon { display: inline-flex; }

/* Caret ▾ — riquadro ruotato come header */
.prefooter__caret {
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.08em);
    transition: transform 0.2s ease;
}

.prefooter__pill[aria-expanded="true"] .prefooter__caret {
    transform: rotate(-135deg) translateY(-0.04em);
}

.prefooter__menu {
    --bs-dropdown-min-width: 14rem;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-link-color: var(--color-dark-1);
    --bs-dropdown-link-hover-color: var(--color-accent);
    --bs-dropdown-link-hover-bg: var(--color-grey-2);
    --bs-dropdown-font-size: var(--fs-16);
    margin-top: 0.5rem;
    box-shadow: 0 12px 32px rgba(var(--color-black-rgb), 0.12);
}

.prefooter__menu .dropdown-item { padding-block: 0.5rem; }
.prefooter__menu-place { font-weight: 600; }

/* 2) Fascia Approfondimenti ──────────────────────────────────────────────────── */

.footer-explore {
    background: var(--color-grey-2);
    color: var(--color-text);
    padding-block: var(--p-90);
}

.footer-explore__label {
    color: var(--color-text);
    font-size: var(--fs-25);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 1.2em;
}

.footer-explore__menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-size: var(--fs-18);
    gap: 0.8em;
}

.footer-explore__menu a {
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text);
}

.footer-explore__menu a:hover,
.footer-explore__menu a:focus-visible { color: var(--color-accent); }

/* 3) Fascia main ────────────────────────────────────────────────────────────── */

.footer {
    background: var(--color-white);
    color: var(--color-text);
}
.footer__main {
    font-size: var(--fs-15);
    font-weight: 400;
    line-height: 1.5;
    padding-top: var(--p-60);
    padding-bottom: var(--p-90);
}

.footer__logo        { display: inline-block; }
.footer__logo .brand { width: clamp(100px, 6.771vw, 130px); height: auto; }

.footer__descr {
    max-width: 40ch;
    color: #8C8C8C;
    margin: 2rem 0;
}

.footer__social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.75rem;
}

.footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-grey-2);
    color: var(--color-dark-1);
    transition: background 0.2s ease, color 0.2s ease;
}

.footer__social a:hover,
.footer__social a:focus-visible {
    background: var(--color-accent);
    color: var(--color-white);
}

.footer__social .social-icon { width: 1.05rem; height: 1.05rem; }

/* Label colonna — riusa .eyebrow ma in dark (non accent) */
.footer__col-label {
    font-size:   var(--fs-18);
    font-weight: 600;
    line-height: 1.5;
    color:       var(--color-text);
    margin:      0 0 1.18em;
}

.footer__office-address {
    margin-bottom: 0.75rem;
}

.footer__office-contacts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.footer__office-contacts a { color: var(--color-text); }
.footer__office-contacts a:hover,
.footer__office-contacts a:focus-visible { color: var(--color-accent); }

.footer__menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer__menu a {
    color: var(--color-text);
}

.footer__menu a:hover,
.footer__menu a:focus-visible { color: var(--color-accent); }

/* 4) Colophon ───────────────────────────────────────────────────────────────── */

.footer__colophon {
    padding-block: 1.25rem;
    background: var(--color-dark-2);
    color: var(--color-white);
    font-size: 0.75rem;
}

.footer__colophon-nav { display: flex; }

.footer__legal-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

@media (min-width: 768px) {
    .footer__colophon-nav { justify-content: center; }
}


.footer__credits-wrap { text-align: left; }
@media (min-width: 768px) { .footer__credits-wrap { text-align: right; } }

.footer__credits { color: rgba(var(--color-white-rgb), 0.7); }
.footer__credits:hover,
.footer__credits:focus-visible { color: var(--color-white); }


/* ── Layout — Bootstrap overrides ───────────────────────────────────────────── */

.container-fluid {
    --bs-gutter-x: var(--gutter-off);
}

.row {
    --bs-gutter-x: var(--gutter-in);
}


/* ── Sections ────────────────────────────────────────────────────────────────── */

.section,
[class^="section-"] {
    padding-block: var(--p-90);
}


/* ── Bootstrap .btn — override globali ──────────────────────────────────────── */
/*
 * Mai ricreare bottoni da zero — usare sempre classi Bootstrap native (.btn-primary, .btn-light…).
 * Le varianti progetto si definiscono sovrascrivendo --bs-btn-* sulla classe specifica.
 */

.btn {
    --bs-btn-font-family:      var(--font-family-base);
    --bs-btn-font-size:        var(--fs-16);
    --bs-btn-font-weight:      600;
    --bs-btn-padding-x:        1.875rem;
    --bs-btn-padding-y:        0.765rem;
    --bs-btn-border-radius:    100px;
    --bs-btn-focus-box-shadow: var(--focus-ring);
    letter-spacing: -0.01em;
}

/* Bootstrap compila l'hex blu dentro .btn-primary (non legge --bs-primary):
   serve override esplicito delle var --bs-btn-* per portarlo all'accent. */
.btn-primary {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--color-accent);
    --bs-btn-border-color:        var(--color-accent);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #e0702a;
    --bs-btn-hover-border-color:  #e0702a;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           #c45a10;
    --bs-btn-active-border-color: #c45a10;
    --bs-btn-disabled-color:      #fff;
    --bs-btn-disabled-bg:         var(--color-accent);
    --bs-btn-disabled-border-color: var(--color-accent);
}


/* ── .text — Prosa ───────────────────────────────────────────────────────────── */
/*
 * Classe riutilizzabile per qualsiasi box testuale (moduli, descrizioni, body...).
 * Usare class="text" sul wrapper del contenuto.
 * Per contenuto editoriale full (page.php): class="page-content__body text"
 * (.page-content__body = hook layout, tipografia in .text)
 */

.text {
    font-weight: 400;
    font-size: var(--fs-18);
    line-height: 1.75;
    color: var(--color-text-editorial);
}

/* Gerarchia heading relativa al font-size del contesto (.text)
   em è corretto qui: scala automaticamente se .text cambia dimensione */
.text :is(h1, h2)     { font-size: 1.5em; }
.text :is(h3, h4)     { font-size: 1.25em; }
.text :is(h5, h6)     { font-size: 1.1em; }

.text :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
    line-height: 1.3;
}

.text :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    padding-top: 2em;
}

.text :is(p, ul, ol):not(:first-child) {
    padding-top: 1.2em;
}

.text :is(ul, ol) {
    padding-left: 1em;
}

.text strong {
    font-weight: 600;
    color:       var(--color-text);
}

.text a:not(.btn) {
    color: var(--color-accent);
    text-decoration: underline;
}

.text a:not(.btn):hover {
    text-decoration: none;
}


/* ── Eyebrow & Title — tipografia modulare ───────────────────────────────────── */
/*
 * Classi standalone riutilizzabili nei moduli flessibili e ovunque serva
 * un blocco titolo strutturato. Non BEM — si usano da sole o in combinazione.
 *
 *   <p class="eyebrow">I nostri servizi</p>
 *   <h2 class="title">Cosa facciamo per te</h2>
 */

.eyebrow {
    display: block;
    font-size: var(--fs-14);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.75rem;
}

.title {
    font-size: var(--fs-40);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size:   var(--fs-50);
    font-weight: 500;
    line-height: 1.2;
    margin:      0;
}


/* ── Page wrap — pagine semplici (legal, 404…) ───────────────────────────────── */
/*
 * .page-wrap    — padding verticale di sezione, max-width leggibile, centrato
 * .page-title   — h1 standalone, usabile in page.php, 404.php e simili
 *
 * page.php:  class="page-wrap"  +  class="page-title"  +  class="text"
 * 404.php:   class="page-wrap"  +  class="page-title"
 */

.page-wrap {
    padding-block: var(--p-90);
}

.page-title {
    font-size: var(--fs-70);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--color-text);
    margin-bottom: 2rem;
}


/* ── Module: Hero ────────────────────────────────────────────────────────────── */

.module-hero {
    position: relative;
    min-height: clamp(60vh, 80vh, 90vh);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-primary);
    color: #fff;
}

.module-hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
}

.module-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.45;
}

.module-hero__overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: var(--p-90);
}

.module-hero__title {
    font-size: var(--fs-80);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: inherit;
}

.module-hero__subtitle {
    font-size: var(--fs-22);
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.85);
}

.module-hero__cta {
    padding: 0.75rem 2rem;
    font-weight: 600;
}


/* ── Card Post ───────────────────────────────────────────────────────────────── */

.card-post {
    margin-bottom: 2rem;
}

.card-post__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.card-post__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.card-post__title a:hover,
.card-post__title a:focus-visible {
    color: var(--color-accent);
}

.card-post__excerpt p {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}


/* ── Single Vehicle — Hero ───────────────────────────────────────────────────── */
/*
 * Fascia HERO scheda veicolo: due colonne (immagine + info).
 * Sotto la hero il corpo flex (.vehicle-body) — vedi single-vehicle.php.
 */

.vehicle-hero {
    background: var(--color-grey-2);
    padding-top: var(--p-90);
    padding-bottom: 1.5rem;
}

/* Colonna immagine — veicolo in contain via .img-contain (bg sull'intero hero) */
.vehicle-hero__media {
    position: relative;   /* ancora per .img-contain (absolute) */
    margin: 0;
    aspect-ratio: 4 / 3;
    mix-blend-mode: multiply;   /* fonde lo sfondo bianco foto col layout */
}

/* Desktop: immagine sticky mentre la colonna info (accordion) scorre.
   top = header sticky (80px) + respiro. */
@media (min-width: 992px) {
    .vehicle-hero__media {
        position: sticky;
        top: calc(var(--header-height-lg) + 1.5rem);
    }
}

/* Colonna info */
.vehicle-hero__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    font-size: var(--fs-14);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.857em;   /* 12px su 14 */
}

.vehicle-hero__breadcrumb a:hover,
.vehicle-hero__breadcrumb a:focus-visible {
    text-decoration: underline;
}

.vehicle-hero__breadcrumb span[aria-hidden] {
    opacity: 0.5;
}

.vehicle-hero__title {
    margin: 0 0 0.9em;   /* 36px su 40 */
    font-size: var(--fs-40);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--color-text);
    text-wrap: balance;
}

/* Prezzo grande + nota piccola */
.vehicle-hero__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--fs-40);   /* riferimento em per il margin (= prezzo) */
    margin-bottom: 0.85em;     /* 34px su 40 */
}

.vehicle-hero__price-value {
    font-size: var(--fs-40);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
}

.vehicle-hero__price-note {
    font-size: var(--fs-18);
    font-weight: 400;
    line-height: 1.3;
    color: #767676;
}

/* Righe con icona (km inclusi, franchigie) */
.vehicle-hero__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--fs-18);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
    margin-bottom: 1.25rem;
}

.vehicle-hero__row strong { font-weight: 600; }

.vehicle-hero__row-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 1.5em;   /* = line-box prima riga → centra l'icona col testo */
}

.vehicle-hero__row-icon svg {
    width: 100%;
    height: auto;
}

/* larghezza icone in em rispetto al testo (row = 18px): spunta 18px, "i" 20px */
.vehicle-hero__row-icon--check { width: 1em;    color: #2F9B01; }
.vehicle-hero__row-icon--info  { width: 1.111em; color: var(--color-dark-1); }

.vehicle-hero__row-text {
    display: block;
}

.vehicle-hero__row-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--fs-15);
    font-weight: 400;
    color: var(--color-text);
}

.vehicle-hero__row-link {
    color: inherit;
    text-decoration: underline;
}

.vehicle-hero__row-link:hover,
.vehicle-hero__row-link:focus-visible {
    text-decoration: none;
}

/* === KM hero highlight — spunta micro-pop + onda colore (rimuovibile) =====
   Riferimento: docs/km-shine-reference.html. JS: initKmShine() in main.js.
   Per rimuovere: cancella questo blocco + funzione/chiamata JS.            */
.vehicle-hero__row .km-ch {
    display: inline-block;
    transform-origin: center bottom;
}
.vehicle-hero__row.is-km-shine .vehicle-hero__row-icon--check {
    transform-origin: 50% 50%;
    animation: nld-km-pop .55s cubic-bezier(.34, 1.56, .64, 1) .5s both;
}
.vehicle-hero__row.is-km-shine .km-ch {
    animation: nld-km-sweep .42s ease-in-out both;
}
@keyframes nld-km-pop {
    0%   { transform: scale(.5) rotate(-10deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes nld-km-sweep {
    0%, 100% { color: var(--color-text); transform: translateY(0) scale(1); }
    50%      { color: #2F9B01; transform: translateY(-1px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .vehicle-hero__row.is-km-shine .vehicle-hero__row-icon--check,
    .vehicle-hero__row.is-km-shine .km-ch { animation: none !important; }
}
/* === fine KM hero highlight ============================================== */

/* Box specifiche — card bianca con ombra leggera */
.vehicle-hero__specs {
    margin-top: 2.5rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* Griglia icone specifiche — quick-specs sotto l'accordion, divisore sopra */
.vehicle-hero__icons {
    list-style: none;
    margin: 0;
    padding: 1.5rem 0 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 0.75rem;
    border-top: 1px solid var(--color-border);
}

.vehicle-hero__icon-item {
    flex: 0 0 calc(20% - 0.6rem);
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.vehicle-hero__icon {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-accent);
}

.vehicle-hero__icon svg {
    width: 100%;
    height: 100%;
}

.vehicle-hero__icon-label {
    font-size: 0.8125rem;   /* 13px */
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--color-text);
}

@media (max-width: 575.98px) {
    .vehicle-hero__icon-item { flex-basis: calc(33.333% - 0.5rem); }
}

/* CTA full-width — ora sopra il box specifiche */
.vehicle-hero__cta {
    width: 100%;
    margin-top: 1.25rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Accordion box specifiche — <details> nativo, +/- via CSS (no-JS) */
.vehicle-hero__acc-item {
    border-bottom: 1px solid var(--color-border);
}
.vehicle-hero__acc-item:last-child {
    border-bottom: 0;
}

.vehicle-hero__acc-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.1rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity .15s ease;
}
.vehicle-hero__acc-summary::-webkit-details-marker { display: none; }
.vehicle-hero__acc-summary:hover { opacity: 0.65; }
.vehicle-hero__acc-summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.vehicle-hero__acc-label {
    font-size: 0.8125rem;   /* 13px */
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #767676;
    transition: color .2s ease;
}
.vehicle-hero__acc-item[open] .vehicle-hero__acc-label { color: var(--color-text); }

/* Marker +/- disegnato con due barre; in stato aperto la verticale collassa */
.vehicle-hero__acc-marker {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: #767676;
}
.vehicle-hero__acc-marker::before,
.vehicle-hero__acc-marker::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}
.vehicle-hero__acc-marker::before {   /* barra orizzontale */
    top: 50%; left: 0;
    width: 100%; height: 1.5px;
    transform: translateY(-50%);
}
.vehicle-hero__acc-marker::after {    /* barra verticale */
    left: 50%; top: 0;
    width: 1.5px; height: 100%;
    transform: translateX(-50%);
}
.vehicle-hero__acc-item[open] .vehicle-hero__acc-marker { color: var(--color-text); }
.vehicle-hero__acc-item[open] .vehicle-hero__acc-marker::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}

/* Pannello: altezza animata via JS (feel app/Airbnb). No-JS → height auto. */
.vehicle-hero__acc-panel {
    overflow: hidden;
    padding: 0;
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
}
.vehicle-hero__acc-text {
    margin: 0 0 1.1rem;
    font-size: var(--fs-15);
    line-height: 1.5;
    color: var(--color-text);
}

/* Misure vano — tabellina stile app: label sx / valore dx, cifre tabellari */
.vehicle-measures {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    font-size: var(--fs-15);
}
.vehicle-measures__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.55rem;
    border-top: 1px solid var(--color-border);
}
.vehicle-measures__row:first-child { border-top: 0; padding-top: 0; }
.vehicle-measures__label { color: #767676; }
.vehicle-measures__value {
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .vehicle-hero__acc-panel,
    .vehicle-hero__acc-marker::before,
    .vehicle-hero__acc-marker::after,
    .vehicle-hero__acc-summary,
    .vehicle-hero__acc-label { transition: none; }
}


/* ── Single Vehicle — Body ───────────────────────────────────────────────────── */

.vehicle-body {
    padding-block: var(--p-90);
}


/* ── Pagina Categoria Veicoli ────────────────────────────────────────────────── */

.vehicle-cat {
    background: var(--color-grey-2);
}

.vehicle-cat__head {
    padding-block: var(--p-90);
}

.vehicle-cat__breadcrumb {
    font-size: var(--fs-18);
    font-weight: 600;
    line-height: 1.245;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.6em;
}
.vehicle-cat__breadcrumb a { color: inherit; text-decoration: none; }

.vehicle-cat__title {
    font-size: clamp(2.5rem, 4.6875vw, 5.625rem);   /* 40→90px @1920 */
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
    margin-bottom: 0.22em;
}

.vehicle-cat__intro {
    font-size: var(--fs-18);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 46ch;
}

/* Filtri */
.vehicle-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-start;
}
@media (min-width: 992px) {
    .vehicle-filters { justify-content: flex-end; }
}
.vehicle-filters__field { position: relative; flex: 1 1 auto; min-width: 0; }
@media (min-width: 768px) {
    .vehicle-filters__field { max-width: min(220px, 33%); }
}
/* Icona categoria monocromatica dentro la pill; pill solo accento = chevron arancio */
.vehicle-filters__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--color-black);
    pointer-events: none;
}
.vehicle-filters__icon .vehicle-icon { width: 1.25rem; height: 1.25rem; }
.vehicle-filters__select {
    width: 100%;
    font-family: var(--font-family-base);
    font-size: var(--fs-16);
    color: var(--color-black);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 100px;
    padding: 0.65rem 2.5rem 0.65rem 2.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FA843C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    cursor: pointer;
    transition: border-color var(--transition-base);
}
.vehicle-filters__select:hover { border-color: var(--color-accent); }
.vehicle-filters__select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--color-accent); }


/* ── Sezioni veicoli ─────────────────────────────────────────────────────────── */

.vehicle-cat__sections { padding-bottom: var(--p-90); }

.vehicle-section { padding-bottom: var(--p-120); }
.vehicle-section:last-of-type { padding-bottom: 0; }

.vehicle-section__title {
    font-size: var(--fs-30);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 1.17em;
}

.vehicle-cat__empty {
    font-size: var(--fs-20);
    color: var(--color-text-muted);
    text-align: center;
    padding-block: var(--p-60);
}


/* ── Card veicolo ────────────────────────────────────────────────────────────── */

.vehicle-card {
    --p-card: clamp(0.75rem, 0.9375vw, 1.125rem);   /* 12→18px — padding-x sezioni inferiori */
    position: relative;   /* ancora per .stretched-link del titolo */
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border-radius: 20px;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.vehicle-card:hover {
    box-shadow: 0 12px 32px rgba(var(--color-black-rgb), 0.08);
    transform: translateY(-3px);
}

/* 1) Head — km + titolo + immagine */
.vehicle-card__head {
    padding: clamp(1.25rem, 2.083vw, 2.5rem) clamp(1.25rem, 2.083vw, 2.5rem) 0;
}

.vehicle-card__km {
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: 1.245;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.62em;
}

.vehicle-card__title {
    font-size: var(--fs-25);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: 0.01em;
    color: var(--color-text);
    margin-bottom: 0;
    /* max 2 righe + ellissi (stile YouTube), altezza fissa per card uniformi */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    height: 2lh;
}
.vehicle-card__title a { color: inherit; text-decoration: none; }
.vehicle-card__title a:hover { color: var(--color-accent); }

.vehicle-card__media {
    position: relative;   /* ancora per .img-contain */
    aspect-ratio: 4 / 3;
}
.vehicle-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vehicle-card__specs {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    list-style: none;
    margin: 0 var(--p-card);
    padding: 1rem;
    background: var(--color-grey-2);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--color-text);
}
.vehicle-card__spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
}
.vehicle-card__spec-icon { color: var(--color-accent); line-height: 0; }
.vehicle-card__spec-icon .vehicle-icon { width: 2.5em; height: auto; }

.vehicle-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding: 1.5rem var(--p-card) 1.5rem calc(1rem + var(--p-card));
}
.vehicle-card__price { line-height: 1.1; white-space: nowrap; }
.vehicle-card__price-value { font-size: var(--fs-28); font-weight: 500; }
.vehicle-card__price-note { font-size: var(--fs-14); color: var(--color-text-muted); }

.vehicle-card__cta { --bs-btn-font-size: var(--fs-14); --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: 0.6rem; text-transform: uppercase; white-space: nowrap; }

/* Blocco relative + z-index: sale sopra lo stretched-link del titolo (z-index 1),
   così l'intero contact è cliccabile → apre il preventivo (stretched-link interno). */
.vehicle-card__contact {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 20px var(--p-card);   /* full-width: lo stretched-link copre fino ai bordi card */
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: var(--fs-14);
    color: var(--color-footer);
}
.vehicle-card__contact a { color: inherit; text-decoration: underline; }
.vehicle-card__contact a:hover { color: var(--color-accent); }


/* ── Blocco SEO ──────────────────────────────────────────────────────────────── */


/* ── CTA Banner (componente clone) ───────────────────────────────────────────── */

.cta-banner {
    position: relative;
    overflow: hidden;
    min-height: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* .img-cover (boilerplate) riempie il banner; il contenuto resta sopra via z-index */
.cta-banner > .container-fluid {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    padding-block: var(--p-120);
}
.cta-banner__card {
    background: var(--color-white);
    border-radius: 20px;
    padding: var(--p-120) var(--p-60) var(--p-60);
    min-width: min(520px, 100%);
    max-width: 610px;
}
.cta-banner__title {
    font-size: var(--fs-50);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.72em;
}
.cta-banner__title strong { color: var(--color-accent); font-weight: inherit; }
.cta-banner__title p { margin: 0; }
.cta-banner__text {
    font-size: var(--fs-18);
    line-height: 1.6;
    color: var(--color-text-muted);
}
.cta-banner__cta { text-transform: uppercase; }

/* Variante box a sinistra */
.cta-banner--left > .container-fluid { justify-content: flex-start; }

@media (max-width: 767.98px) {
    .cta-banner .container-fluid { justify-content: center; padding-block: var(--p-90); }
}


/* ── Flex: CTA Card (card senza sfondo, centrata) ────────────────────────────── */
.cta-card {
    background: var(--color-dark-1);
    border-radius: 20px;
    padding: var(--p-90) var(--p-60);
    text-align: center;
    color: var(--color-white);
}
.cta-card__title {
    font-size: var(--fs-50);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5em;
}
.cta-card__title strong { font-weight: inherit; }
.cta-card__title p { margin: 0; }
.cta-card__text {
    line-height: 1.6;
    color: var(--color-white);
}
.cta-card__text strong { color: var(--color-white); }
.cta-card__cta { margin-top: var(--p-60); text-transform: uppercase; }


/* ── Flex: Mappa (iframe responsive 16:9) ────────────────────────────────────── */
.flex-maps__embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
}
.flex-maps__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ── 404 ─────────────────────────────────────────────────────────────────────── */
/* Nessuna regola specifica: usa il body text di default + .page-wrap + .page-title */


/* ── Home Hero ─────────────────────────────────────────────────────────────────── */
/* Layout: flex 2 colonne — testo sx (col-5) | immagine dx (col-7, overflow destra) */

.home-hero {
    position:   relative;
    overflow-x: clip;               /* taglia overflow immagine a destra */
    background: var(--color-white);
}

/* Ellisse decorativa bg top-right */
.home-hero::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     radial-gradient(ellipse 65% 120% at 100% 0%, rgba(200,198,198,0.45) 0%, transparent 60%);
    pointer-events: none;
    z-index:        0;
}

/* Override padding container-fluid: solo a sinistra, destra 0 per overflow */
.home-hero .container-fluid {
    padding-left:  var(--gutter-half);
    padding-right: 0;
}

/* Flex row */
.home-hero__row {
    display:     flex;
    align-items: center;
    min-height:  clamp(380px, 36vw, 690px);
    position:    relative;
    z-index:     1;
}

/* Colonna testo — ~col-5 (41.67%), padding-left = gutter-half via container */
.home-hero__text {
    flex:          0 0 41.6667%;
    max-width:     41.6667%;
    padding-block: clamp(40px, 4.5vw, 80px);
    padding-right: clamp(16px, 2vw, 40px);
}
.home-hero__eyebrow {
    color:          var(--color-accent);
    font-size:      clamp(0.8125rem, 0.885vw, 1rem);
    font-weight:    500;
    letter-spacing: -0.01em;
    margin:         0 0 clamp(8px, 0.8vw, 14px);
}
.home-hero__headline {
    font-size:      clamp(3.75rem, 6.25vw, 7.5rem); /* 60px→120px @1920 */
    line-height:    1.05;
    letter-spacing: -0.03em;
    font-weight:    300;
    margin:         0;
}
.home-hero__headline strong {
    font-weight: 600;
}

/* Media wrap: col-7, flex column — badge in cima, immagine sotto */
.home-hero__media-wrap {
    flex:           0 0 58.3333%;
    max-width:      58.3333%;
    display:        flex;
    flex-direction: column;
    align-self:     flex-end;
    pointer-events: none; /* media decorativo: non intercetta click/drag */
    user-select:    none;
}

/* Badge cluster: dimensioni fisse, badge absolute dentro (accent top-right, dark bottom-left) */
.home-hero__badges {
    position:    relative;
    align-self:  center;
    flex-shrink: 0;
    width:       clamp(172px, 18vw, 340px);   /* ≈ 2× badge */
    height:      clamp(100px, 12vw, 225px);   /* ≈ 1.6× badge */
    margin-bottom: clamp(-14px, -1.2vw, -8px); /* lieve overlap sull'immagine */
    z-index:     1;
}
.home-hero__badge {
    position: absolute;
}
.home-hero__badge svg {
    display: block;
    width:   clamp(90px, 9.5vw, 182px);
    height:  auto;
}
.home-hero__badge--accent { top: 0; right: 0; }
.home-hero__badge--purple  { bottom: 0; left: 0; }

/* Immagine veicoli */
.home-hero__media {
    position: relative;
    z-index: 2;
}
.home-hero__vehicles {
    display:         block;
    width:           100%;
    height:          auto;
    object-fit:      contain;
    object-position: left bottom;
}

/* Mobile */
@media (max-width: 991.98px) {
    .home-hero .container-fluid {
        padding-left:  var(--gutter-off);
        padding-right: var(--gutter-off);
    }
    .home-hero__row {
        flex-direction: column;
        align-items:    center;
        min-height:     auto;
    }
    .home-hero__text {
        flex:          none;
        max-width:     100%;
        width:         100%;
        text-align:    center;
        padding-right: 0;
        padding-block: clamp(32px, 6vw, 56px);
    }
.home-hero__media-wrap {
        position:  relative;
        flex:      none;
        max-width: none;
        width:     calc(100% + var(--gutter-half) * 6);
        left:      calc(var(--gutter-half) * 3);
    }
}


/* ── Quote Bar ─────────────────────────────────────────────────────────────────── */

/* Mobile-first: quote-bar visibile solo da md+ */
.quote-bar-outer { display: none; }
@media (min-width: 992px) {
    .quote-bar-outer { display: block; }
    .mobile-cta      { display: none; }
}

.quote-bar-outer {
    background: var(--color-white);
    padding-block: clamp(16px, 2.5vw, 48px);
}
.quote-bar {
    background:     var(--color-accent);
    border-radius:  14px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    padding:        14px;
}
.quote-bar__label {
    color:          var(--color-white);
    font-size:      0.6875rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space:    nowrap;
    flex:           0 0 auto;
}
.quote-bar__fields {
    display:   flex;
    flex:      1 1 auto;
    gap:       8px;
    flex-wrap: wrap;
}
.quote-bar__field {
    background:      var(--color-white);
    border-radius:   10px;
    padding:         10px 16px;
    flex:            1 1 160px;
    min-height:      64px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             3px;
}
.quote-bar__field-name {
    color:          #8a8a8a;
    font-size:      0.625rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display:        block;
}
.quote-bar__select {
    appearance:          none;
    -webkit-appearance:  none;
    border:              none;
    background:          transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right center / 16px 16px;
    font-size:           0.9375rem;
    font-weight:         500;
    font-family:         inherit;
    color:               var(--color-black);
    cursor:              pointer;
    padding:             0 22px 0 0;
    width:               100%;
}
.quote-bar__select:focus { outline: none; }

.quote-bar__date-wrap {
    display:     flex;
    align-items: center;
    gap:         6px;
}
.quote-bar__date {
    border:      none;
    background:  transparent;
    font-size:   0.9375rem;
    font-weight: 500;
    font-family: inherit;
    color:       var(--color-black);
    cursor:      pointer;
    padding:     0;
    flex:        1 1 auto;
    min-width:   0;
}
.quote-bar__date:focus { outline: none; }
.quote-bar__date-sep {
    color:       #8a8a8a;
    font-weight: 400;
    flex:        0 0 auto;
}

.quote-bar__btn {
    background:     var(--color-dark-1);
    color:          var(--color-white);
    border:         none;
    border-radius:  10px;
    padding:        0 28px;
    min-height:     64px;
    width:          100%;
    font-size:      0.8125rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor:         pointer;
    white-space:    nowrap;
    flex:           0 0 auto;
    transition:     background var(--transition-base);
}
.quote-bar__btn:hover { background: var(--color-dark-2); }


/* ── Mobile CTA bar (homepage, <992px) ─────────────────────────────────────────── */

.mobile-cta {
    background:    var(--color-white);
    padding-block: clamp(16px, 2.5vw, 48px);
}
.mobile-cta .container-fluid {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}
.mobile-cta__quote {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         18px 24px;
    background:      var(--color-accent);
    color:           var(--color-white);
    font-weight:     700;
    font-size:       0.875rem;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    border-radius:   12px;
    text-decoration: none;
}
.mobile-cta__quote:hover,
.mobile-cta__quote:focus { color: var(--color-white); filter: brightness(0.92); }

.mobile-cta__contacts {
    position:      relative;
    display:       flex;
    align-items:   stretch;
    background:    var(--color-dark-2);
    border-radius: 12px;
}
.mobile-cta__item {
    flex:     1;
    position: relative;
}
.mobile-cta__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    width:           100%;
    padding:         18px 12px;
    background:      transparent;
    border:          none;
    color:           var(--color-white);
    font-weight:     700;
    font-size:       0.8125rem;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    cursor:          pointer;
    border-radius:   12px;
}
.mobile-cta__btn:hover { background: rgba(255,255,255,0.06); }
.mobile-cta__chevron   { transition: transform 0.2s ease; flex-shrink: 0; }
.mobile-cta__btn[aria-expanded="true"] .mobile-cta__chevron { transform: rotate(180deg); }

.mobile-cta__sep {
    width:       1px;
    background:  rgba(255,255,255,0.15);
    flex-shrink: 0;
    align-self:  stretch;
    margin-block: 10px;
}

.mobile-cta__drop {
    position:      absolute;
    bottom:        calc(100% + 8px);
    left:          0;
    min-width:     180px;
    background:    var(--color-dark-2);
    border-radius: 12px;
    z-index:       10;
    padding:       4px 0;
    box-shadow:    0 8px 24px rgba(0,0,0,0.25);
}
.mobile-cta__drop--right { left: auto; right: 0; }

.mobile-cta__drop-link {
    display:         flex;
    align-items:     baseline;
    gap:             6px;
    padding:         14px 16px;
    color:           var(--color-white);
    text-decoration: none;
    font-size:       0.9375rem;
    white-space:     nowrap;
}
.mobile-cta__drop-link:hover,
.mobile-cta__drop-link:focus  { background: rgba(255,255,255,0.08); color: var(--color-white); }
.mobile-cta__drop-link:first-child { border-radius: 12px 12px 0 0; }
.mobile-cta__drop-link:last-child  { border-radius: 0 0 12px 12px; }
.mobile-cta__drop-link:only-child  { border-radius: 12px; }
.mobile-cta__drop-place { font-size: 0.75rem; opacity: 0.6; font-weight: 500; }
.mobile-cta__drop-val   { font-weight: 600; }


/* ── Sticky CTA bar (globale, appare dopo scroll su tutte le pagine) ───────────── */

.sticky-cta {
    position:      fixed;
    left:          0;
    right:         0;
    bottom:        0;
    z-index:       1020;                 /* sotto il modale (1100) */
    background:    var(--color-white);
    box-shadow:    0 -6px 24px rgba(0,0,0,0.12);
    padding:       12px 0 calc(12px + env(safe-area-inset-bottom));
    transform:     translateY(110%);     /* fuori schermo finché non si scrolla */
    visibility:    hidden;
    transition:    transform var(--transition-base), visibility var(--transition-base);
}
.sticky-cta.is-visible {
    transform:  translateY(0);
    visibility: visible;
}
.sticky-cta__inner {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}
.sticky-cta__info { display: none; } /* nome+prezzo: solo desktop (vedi media query) */

.sticky-cta__actions {
    display:        flex;
    flex-direction: row;       /* row unica: bottone + pill (come da grafica) */
    align-items:    stretch;
    gap:            10px;
}
.sticky-cta__quote {
    flex:            1 1 auto;  /* il bottone occupa lo spazio, la pill resta a dx */
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      58px;
    padding:         0 16px;
    background:      var(--color-accent);
    color:           var(--color-white);
    font-weight:     700;
    font-size:       0.8125rem;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    white-space:     nowrap;
    border-radius:   12px;
    text-decoration: none;
}
.sticky-cta__quote:hover,
.sticky-cta__quote:focus { color: var(--color-white); filter: brightness(0.92); }

.sticky-cta__contacts {
    position:      relative;
    display:       flex;
    align-items:   stretch;
    flex:          0 0 auto;
    background:    var(--color-dark-2);
    border-radius: 12px;
}
.sticky-cta__item { position: relative; }
.sticky-cta__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    min-height:      58px;
    padding:         0 14px;
    background:      transparent;
    border:          none;
    color:           var(--color-white);
    font-weight:     700;
    font-size:       0.8125rem;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    cursor:          pointer;
    border-radius:   12px;
}
.sticky-cta__btn-label { display: none; } /* mobile: pill icone-only; label solo desktop */
.sticky-cta__btn:hover { background: rgba(255,255,255,0.06); }
.sticky-cta__chevron   { transition: transform 0.2s ease; flex-shrink: 0; }
.sticky-cta__btn[aria-expanded="true"] .sticky-cta__chevron { transform: rotate(180deg); }

.sticky-cta__sep {
    width:        1px;
    background:   rgba(255,255,255,0.15);
    flex-shrink:  0;
    align-self:   stretch;
    margin-block: 10px;
}
.sticky-cta__drop {
    position:      absolute;
    bottom:        calc(100% + 8px);
    right:         0;           /* ancorato a destra: la pill sta sul bordo dx → non sfora */
    left:          auto;
    min-width:     180px;
    background:    var(--color-dark-2);
    border-radius: 12px;
    z-index:       10;
    padding:       4px 0;
    box-shadow:    0 8px 24px rgba(0,0,0,0.25);
}
.sticky-cta__drop--right { left: auto; right: 0; }
.sticky-cta__drop-link {
    display:         flex;
    align-items:     baseline;
    gap:             6px;
    padding:         14px 16px;
    color:           var(--color-white);
    text-decoration: none;
    font-size:       0.9375rem;
    white-space:     nowrap;
}
.sticky-cta__drop-link:hover,
.sticky-cta__drop-link:focus  { background: rgba(255,255,255,0.08); color: var(--color-white); }
.sticky-cta__drop-link:first-child { border-radius: 12px 12px 0 0; }
.sticky-cta__drop-link:last-child  { border-radius: 0 0 12px 12px; }
.sticky-cta__drop-link:only-child  { border-radius: 12px; }
.sticky-cta__drop-place { font-size: 0.75rem; opacity: 0.6; font-weight: 500; }
.sticky-cta__drop-val   { font-weight: 600; }

/* Da tablet: pill con label esplicite Telefona/WhatsApp */
@media (min-width: 768px) {
    .sticky-cta__btn-label { display: inline; }
}

/* Desktop: barra orizzontale — nome+prezzo a sx, bottone+contatti a dx.
   Su desktop la sticky resta SOLO nella scheda prodotto (--vehicle); altrove nascosta. */
@media (min-width: 992px) {
    .sticky-cta:not(.sticky-cta--vehicle) { display: none; }
    .sticky-cta { padding: 10px 0; }
    .sticky-cta__inner {
        flex-direction:  row;
        align-items:     center;
        gap:             24px;
    }
    .sticky-cta__info {
        display:        flex;
        flex-direction: column;
        gap:            2px;
        margin-right:   auto;
    }
    .sticky-cta__name {
        font-weight: 700;
        font-size:   1.0625rem;
        color:       var(--color-text);
        line-height: 1.15;
    }
    .sticky-cta__price { display: flex; align-items: baseline; gap: 6px; }
    .sticky-cta__price-value { font-weight: 700; color: var(--color-accent); font-size: 1.0625rem; }
    .sticky-cta__price-note  { font-size: 0.8125rem; color: var(--color-text-muted); }
    .sticky-cta__actions {
        gap:         12px;
        margin-left: auto;
    }
    .sticky-cta__quote   { flex: 0 0 auto; padding: 0 32px; min-height: 56px; border-radius: 10px; font-size: 0.875rem; letter-spacing: 0.1em; }
    .sticky-cta__contacts { border-radius: 10px; }
    .sticky-cta__btn     { padding: 0 22px; min-height: 56px; }
}


/* Complianz "Gestisci consenso": abbassa lo z-index, non deve stare sopra le UI del tema */
#cmplz-manage-consent .cmplz-manage-consent {
    z-index: 10 !important;
}


/* ── Vehicle Launches ─────────────────────────────────────────────────────────── */

.vehicle-launches {
    background:     var(--color-grey-2);
    padding-top:    var(--p-120);
    padding-bottom: var(--p-60);
}
.vehicle-launches__head {
    margin-bottom: clamp(32px, 3.5vw, 64px);
}
.vehicle-launches__title strong {
    font-weight: inherit;
    color:       var(--color-accent);
}
.vehicle-launches__desc {
    font-size: var(--fs-18);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--color-text-muted);
}
.vehicle-launches__grid {
    row-gap: var(--gutter-off);
}
.vehicle-launch-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.vehicle-launch-card:hover .vehicle-launch-card__box {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.vehicle-launch-card__box {
    background: var(--color-white);
    border-radius: 15px;
    position: relative;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.vehicle-launch-card__count {
    position: absolute;
    top: clamp(1rem, 1.5625vw, 1.875rem);
    right: clamp(1rem, 1.5625vw, 1.875rem);
    background: var(--color-grey-2);
    border-radius: 100px;
    padding: 6px 20px;
    font-size: var(--fs-15);
    font-weight: 600;
    line-height: 1.333;
    letter-spacing: -0.01em;
    white-space: nowrap;
    z-index: 1;
}
.vehicle-launch-card__name {
    font-size: var(--fs-25);
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 1em 0 0.3em;
}
.vehicle-launch-card__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.vehicle-launch-card__price-val {
    font-size: var(--fs-25);
    font-weight: 600;
    line-height: 1.28;
    color: var(--color-accent);
    letter-spacing: 0.01em;
}
.vehicle-launch-card__price-lbl {
    font-size: var(--fs-18);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-editorial);
}


/* ── Responsive: Home ─────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .hero__inner {
        flex-wrap: wrap;
    }
    .hero__text {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .hero__visual {
        flex: 0 0 100%;
        max-width: 100%;
        max-height: 360px;
        overflow: hidden;
        margin-top: var(--p-60);
    }
    .hero__img {
        width: 100%;
        object-position: center bottom;
    }
    .hero__badges {
        position: relative;
        top: auto;
        right: auto;
        flex-direction: row;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 16px;
    }
}

@media (min-width: 1200px) {
    .quote-bar {
        display:               grid;
        grid-template-columns: 1fr auto;
        grid-template-rows:    auto auto;
        align-items:           center;
        padding:               12px 14px;
        gap:                   10px 12px;
    }
    .quote-bar__label  { grid-column: 1 / -1; }
    .quote-bar__fields { grid-column: 1; flex-wrap: nowrap; }
    .quote-bar__btn    { grid-column: 2; width: auto; align-self: stretch; }
}

@media (min-width: 1400px) {
    .quote-bar {
        grid-template-columns: auto 1fr auto;
        grid-template-rows:    auto;
        padding:               10px 10px 10px 20px;
    }
    .quote-bar__label  { grid-column: 1; padding-right: 24px; }
    .quote-bar__fields { grid-column: 2; }
    .quote-bar__btn    { grid-column: 3; }
}


/* ── Services section ───────────────────────────────────────────────────────── */

.services-section {
    background:     var(--color-dark-1);
    padding-block:  var(--p-120);
}
.services-section__grid,
.services-section__cards {
    --bs-gutter-x: var(--gutter-in);
    --bs-gutter-y: var(--gutter-in);
}
.services-section__title {
    font-size:      var(--fs-56);
    font-weight:    500;
    line-height:    1.2;
    letter-spacing: -0.02em;
    color:          var(--color-white);
    text-align:     center;
    margin:         0 0 var(--p-120);
}
.services-section__title strong {
    font-weight: inherit;
    color:       var(--color-accent);
}
.services-section__img {
    border-radius: 15px;
    overflow:      hidden;
    min-height:    clamp(300px, 30vw, 580px);
}
.service-card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    height:          100%;
    background:      var(--color-dark-2);
    border-radius:   15px;
    padding:         clamp(1.5rem, 2.292vw, 2.75rem);
    padding-bottom:  clamp(4.5rem, 4.792vw, 5.75rem);
    text-decoration: none;
    color:           var(--color-white);
    transition:      background var(--transition-base);
}
.service-card:hover {
    background: color-mix(in srgb, var(--color-dark-2) 80%, var(--color-white));
    color:      var(--color-white);
}
.service-card__title {
    font-size:      var(--fs-25);
    font-weight:    600;
    line-height:    1.28;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap:      balance;
    margin:         0 0 0.64em;
}
.service-card__desc {
    font-size:   var(--fs-16);
    font-weight: 500;
    line-height: 1.5;
    color:       rgba(255, 255, 255, 0.65);
    max-width:   40ch;
    flex:        1;
}
.service-card__arrow {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex:            0 0 auto;
    width:           2.25rem;
    height:          2.25rem;
    background:      var(--color-accent);
    border-radius:   50%;
    position:        absolute;
    bottom:          clamp(1rem, 1.042vw, 1.25rem);
    right:           clamp(1rem, 1.042vw, 1.25rem);
    transition:      transform var(--transition-base);
}
.service-card__arrow svg {
    width:  0.9375rem;
    height: auto;
}
.service-card:hover .service-card__arrow {
    transform: translateX(3px);
}

/* ── Edit post link (admin) ─────────────────────────────────────────────────── */
.post-edit-link {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    right: 0;
    padding: 10px 18px;
    background-color: #3c3c3c;
    color: var(--color-white);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-top-left-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.post-edit-link:hover,
.post-edit-link:focus-visible {
    color: var(--color-white);
    background-color: #222;
}


/* ── Veicoli in evidenza ─────────────────────────────────────────────────────── */

.featured-vehicles {
    background:     var(--color-grey-1);
    padding-block:  var(--p-120);
}
.featured-vehicles__head {
    margin-bottom: clamp(32px, 3.5vw, 64px);
}
.featured-vehicles__title strong {
    font-weight: inherit;
    color:       var(--color-accent);
}
.featured-vehicles__desc {
    font-size:      var(--fs-18);
    font-weight:    400;
    line-height:    1.5;
    letter-spacing: -0.01em;
    color:          var(--color-text-muted);
}


/* ── Insights carousel ───────────────────────────────────────────────────────── */

.insights-carousel {
    padding-block: var(--p-160);
    overflow:      hidden;   /* taglia il bleed dello swiper oltre il viewport */
}
.insights-carousel__head {
    --bs-gutter-y: clamp(2rem, 3vw, 3.5rem);
}
.insights-carousel__intro {
    position: relative;
    z-index:  2;   /* testi/frecce sopra il mask del track */
}
.insights-carousel__title {
    margin-bottom: 0.46em;
}
.insights-carousel__desc {
    font-size:   var(--fs-18);
    line-height: 1.5;
    color:       var(--color-text-muted);
    max-width:   32ch;
    margin:      0 0 1.75rem;
}
.insights-carousel__all {
    text-transform: uppercase;
}
.insights-carousel__nav {
    display: flex;
    gap:     0.75rem;
    margin-top: clamp(2rem, 4vw, 4rem);
}
.insights-carousel__arrow {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           2.75rem;
    height:          2.75rem;
    border:          1px solid var(--color-border);
    border-radius:   50%;
    background:      transparent;
    color:          var(--color-text);
    cursor:          pointer;
    transition:      border-color var(--transition-base), background var(--transition-base), opacity var(--transition-base);
}
.insights-carousel__arrow svg {
    width:  0.875rem;   /* 14px — stessa freccia della gallery */
    height: 0.875rem;
}
.insights-carousel__arrow--prev svg {
    transform: scaleX(-1);
}
.insights-carousel__arrow:hover {
    border-color: var(--color-accent);
    background:   var(--color-accent);
    color:        var(--color-white);
}
.insights-carousel__arrow.swiper-button-disabled {
    opacity:        0.35;
    pointer-events: none;
}
.insights-carousel__track {
    position:  relative;
    z-index:   1;
    min-width: 0;   /* permette allo swiper di restringersi nella col flex */
}
/* Mask che taglia a sinistra il carousel edge-to-edge, così non si sovrappone ai testi */
.insights-carousel__track::before {
    content:    "";
    position:   absolute;
    top:        0;
    bottom:     0;
    right:      100%;
    width:      100vw;
    background: var(--color-white);
    z-index:    2;
}
.insights-swiper {
    overflow: visible;
}

.insight-card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    height:          auto;
    text-decoration: none;
}
.insight-card__media {
    display:       block;
    border-radius: 15px;
    overflow:      hidden;
    aspect-ratio:  1 / 1;
    background:    var(--color-grey-1);
    margin-bottom: 1.25rem;
}
.insight-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.insight-card__date {
    display:        block;
    font-size:      var(--fs-15);
    font-weight:    500;
    line-height:    1.33;
    color:          var(--color-accent);
    margin-bottom:  0.5rem;
}
.insight-card__title {
    font-size:      var(--fs-20);
    font-weight:    400;
    line-height:    1.45;
    letter-spacing: 0.01em;
    margin:         0;
}
.insight-card__title a {
    color:           var(--color-text);
    text-decoration: none;
    transition:      color var(--transition-base);
}
.insight-card__title a:hover {
    color: var(--color-accent);
}


/* ── Singolo Insight (single.php) ─────────────────────────────────────────── */

.single-post__hero {
    position:     relative;
    aspect-ratio: 16 / 9;
    max-height:   64vh;
    overflow:     hidden;
    margin:       0;
}
.single-post__meta {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    margin-bottom:  1.25rem;
    font-size:      var(--fs-15);
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.single-post__eyebrow {
    color:           var(--color-accent);
    text-decoration: none;
    transition:      opacity var(--transition-base);
}
.single-post__eyebrow:hover { opacity: 0.7; }
.single-post__date { color: var(--color-text-muted); }
.single-post__title {
    font-size:         var(--fs-60);
    font-weight:       500;
    line-height:       1.3;
    letter-spacing:    0.01em;
    margin:            0;
    padding-block-end: var(--p-60);
    border-bottom:     1px solid var(--color-border);
}


/* ── Archivio Insights (home.php) ─────────────────────────────────────────── */

.insights-archive {
    padding-block-end: var(--p-120);
}
.insights-archive__head {
    padding-block-start: var(--p-90);
}
.insights-archive__title {
    font-size:     var(--fs-64);
    font-weight:   500;
    line-height:   1.3;
    margin:        0 0 var(--p-60);
}
.insights-archive__bar {
    display:        flex;
    justify-content:space-between;
    align-items:    flex-end;
    gap:            1.5rem;
    border-bottom:  1px solid var(--color-border);
    margin-bottom:  var(--p-60);
}
.insights-archive__tabs {
    display:   flex;
    flex-wrap: wrap;
    gap:       2rem;
}
.insights-archive__tab {
    appearance:     none;
    background:     none;
    border:         0;
    padding:        0 0 1.25rem;
    font:           inherit;
    font-size:      var(--fs-16);
    color:          var(--color-text);
    cursor:         pointer;
    border-bottom:  2px solid transparent;
    margin-bottom:  -1px;
    transition:     color var(--transition-base);
}
.insights-archive__tab:hover {
    color: var(--color-accent);
}
.insights-archive__tab.is-active {
    color:         var(--color-accent);
    border-bottom-color: var(--color-accent);
}
.insights-archive__count {
    flex-shrink:   0;
    padding-bottom:1.25rem;
    font-size:     var(--fs-15);
    color:         var(--color-text-muted);
}

@media (max-width: 575.98px) {
    .insights-archive__bar {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.75rem;
    }
    .insights-archive__tabs { gap: 1.25rem; }
    .insights-archive__count { padding-bottom: 1rem; }
}


/* ── Flexible Content — moduli condivisi ──────────────────────────────────────
   Libreria ACF group_nld_cmp_flex. Ogni modulo = .flex-mod (padding fascia) +
   classe specifica. Toggle sfondo: .is-bg-grey (clone componente bg). */

.flex-mod {
    padding-block: var(--p-120);
}
.is-bg-grey {
    background: var(--color-grey-2);
}
/* Mod adiacenti con LO STESSO sfondo: collassa il padding superiore.
   Classi esplicite (is-bg-white/grey via nld_flex_bg_class) → ogni adiacenza
   matcha solo classi identiche; aggiungere varianti = una riga, zero falsi
   match. Sfondi diversi → padding intatto (la fascia respira). Scoped a
   .flex-mod così .flex-media (full-bleed) non interferisce. */
.flex-mod.is-bg-white + .flex-mod.is-bg-white,
.flex-mod.is-bg-grey + .flex-mod.is-bg-grey {
    padding-block-start: 0;
}

/* Titolo di sezione modulo flex — condiviso (text, accordion, media_text).
   I testi usano la classe .text (colore editorial + tipografia già definiti). */
.flex-mod__title {
    font-size:        var(--fs-32);
    font-weight:      500;
    line-height:      1.6;
    margin-block-end: 1.156em;  /* 37px @ 32px */
}

/* Media full-width (immagine / video) — full-bleed, edge-to-edge */
.flex-media__figure {
    aspect-ratio: 16 / 9;
    min-height: 400px;
    max-height: 80vh;
    overflow: hidden;
}
/* Media come primo modulo della pagina → fa da hero (più contenuto) */
.flex-media:first-child .flex-media__figure {
    max-height: 64vh;
}

/* Testo */
.flex-text__body--cols {
    column-count: 1;
    column-gap:   var(--gutter-in);
}
@media (min-width: 768px) {
    .flex-text__body--cols {
        column-count: 2;
    }
}
.flex-text__cta {
    margin-block-start: var(--p-60);
}

/* Heading (eyebrow + titolo) */
.flex-heading {
    padding-block-end: var(--p-60);
}
.flex-heading__eyebrow {
    font-size:      var(--fs-15);
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-block-end: 0.75rem;
}
.flex-heading__title {
    font-size:   var(--fs-50);
    font-weight: 500;
    line-height: 1.1;
    margin:      0;
    padding-block-end: var(--p-60);
    border-bottom: 1px solid var(--color-border);
}
/* Su fascia grigia il bordo (= grey-2) sparisce: linea visibile */
.is-bg-grey .flex-heading__title {
    border-bottom-color: rgba( var(--color-black-rgb), 0.12 );
}

/* Accordion / FAQ — Bootstrap collapse, restyle Figma (label accent, icona +/−) */
.flex-accordion__list {
    --bs-accordion-bg:                     transparent;
    --bs-accordion-color:                  var(--color-text);
    --bs-accordion-border-color:           rgba(var(--color-black-rgb), 0.12);
    --bs-accordion-border-width:           0;
    --bs-accordion-border-radius:          0;
    --bs-accordion-inner-border-radius:    0;
    --bs-accordion-btn-padding-x:          0;
    --bs-accordion-btn-padding-y:          1.75em;  /* 35px @ 20px */
    --bs-accordion-btn-color:              var(--color-accent);
    --bs-accordion-btn-bg:                 transparent;
    --bs-accordion-active-color:           var(--color-accent);
    --bs-accordion-active-bg:              transparent;
    --bs-accordion-btn-focus-box-shadow:   none;
    --bs-accordion-body-padding-x:         0;
    --bs-accordion-body-padding-y:         0;
    --bs-accordion-btn-icon-width:         1.125rem;
    --bs-accordion-btn-icon:        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FA843C' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M8 3v10M3 8h10'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FA843C' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M3 8h10'/%3e%3c/svg%3e");
}
/* Solo separatore tra item adiacenti — niente bordi esterni */
.flex-accordion__list .accordion-item + .accordion-item {
    border-top: 1px solid var(--bs-accordion-border-color);
}
.flex-accordion__list .accordion-button {
    font-size:   var(--fs-20);
    font-weight: 600;
    line-height: 1.75;
}
.flex-accordion__list .accordion-button:not(.collapsed) {
    box-shadow: none;
}
/* icona minus: niente rotazione (resta orizzontale) */
.flex-accordion__list .accordion-button:not(.collapsed)::after {
    transform: none;
}
.flex-accordion__list .accordion-body {
    padding-block-end: 2em;  /* 40px @ 20px */
}

/* Gallery (carousel Swiper + lightbox Fancybox) */
.flex-gallery__nav {
    display:         flex;
    justify-content: flex-end;
    gap:             0.75rem;
    margin-block-end: 1.875em;  /* 30px @ 16px */
}
/* watchOverflow: slide non sboardano → nascondi tutta la barra nav (no gap) */
.flex-gallery__nav:has( .swiper-button-lock ) {
    display: none;
}
.flex-gallery__arrow {
    width:           clamp(2rem, 1.5vw + 1.5rem, 2.5rem);  /* 32 → 40px */
    aspect-ratio:    1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    border:          0;
    border-radius:   50%;
    background:      var(--color-accent);
    color:           var(--color-white);
    cursor:          pointer;
    transition:      background var(--transition-base), opacity var(--transition-base);
}
.flex-gallery__arrow svg {
    width: 35%;   /* 14px su 40px @1920 */
    height: 35%;
}
.flex-gallery__arrow--prev svg {
    transform: scaleX(-1);
}
.flex-gallery__arrow:hover {
    opacity: 0.85;
}
.flex-gallery__arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}
.flex-gallery__swiper {
    overflow: hidden;
}
.flex-gallery__item {
    margin: 0;
}
.flex-gallery__media {
    display:       block;
    aspect-ratio:  3 / 2;
    overflow:      hidden;
    border-radius: 10px;
}
.flex-gallery__caption {
    margin-block-start: 1rem;
    font-size: var(--fs-15);
    color:     var(--color-text-muted);
}

/* Insights (griglia post) */
.flex-insights__head {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             1.5rem;
    flex-wrap:       wrap;
    margin-block-end: var(--p-60);
}
.flex-insights__all {
    font-weight:     500;
    color:           var(--color-accent);
    text-decoration: none;
    white-space:     nowrap;
}
.flex-insights__all:hover {
    text-decoration: underline;
}

/* Media + Testo (riga alternata) */
.flex-media-text__media {
    aspect-ratio:  1;
    overflow:      hidden;
    border-radius: 10px;
}
.flex-media-text__cta {
    margin-block-start: var(--p-60);
}

/* Veicoli (relazione) — titolo centrato */
.flex-vehicles__head {
    text-align:       center;
    margin-block-end: var(--p-60);
}
.flex-vehicles__title {
    font-size:   var(--fs-50);
    font-weight: 400;
    line-height: 1.3;
    margin:      0;
}
.flex-vehicles__title strong {
    font-weight: inherit;
    color:       var(--color-accent);
}
.flex-vehicles__desc {
    margin-block-start: 1rem;
    color:              var(--color-text-editorial);
}

/* Timeline azienda */
.flex-timeline__head {
    margin-block-end: var(--p-60);
}
.flex-timeline__row {
    padding-block: var(--p-60);
    border-top:    1px solid #D3D3D3;
}
.flex-timeline__year {
    display:        block;
    font-size:      var(--fs-140);
    font-weight:    500;
    line-height:    1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color:          var(--color-text);
}
.flex-timeline__heading {
    font-size:        var(--fs-25);
    font-weight:      500;
    line-height:      1.6;
    color:            var(--color-accent);
    margin-block-end: 0.32em;  /* 8px @ 25px */
}
.flex-timeline__text {
    font-size: var(--fs-16);
}
@media (max-width: 767.98px) {
    .flex-timeline__year {
        margin-block-end: 1rem;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   PAGINA CONTATTI (page-contact.php)
   Colonna sx: titolo + intro + CTA preventivo + sedi. Colonna dx: mappa Google.
   ───────────────────────────────────────────────────────────────────────────── */
.contact {
    padding-block: var(--p-90);
}
.contact__title {
    font-size:        var(--fs-64);
    font-weight:      400;
    line-height:      1.3;
    color:            var(--color-black);
    margin-block-end: 1.5rem;
}
.contact__lead {
    font-size:        var(--fs-18);
    font-weight:      400;
    line-height:      1.6;
    color:            var(--color-text-editorial);
    margin-block-end: 2rem;
    max-width:        48ch;
}
.contact__cta {
    padding:        0.6rem 1.25rem;
    font-size:      var(--fs-14);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.contact__sedi {
    list-style:  none;
    margin:      3.5rem 0 0;
    padding:     0;
    display:     flex;
    flex-direction: column;
    gap:         2rem;
    font-size:   var(--fs-18);
    font-weight: 400;
    line-height: 1.6;
    color:       var(--color-black);
}
.contact-sede__name {
    font-size:        inherit;
    font-weight:      700;
    color:            var(--color-accent);
    margin-block-end: 0;
}
.contact-sede__address {
    margin-block-end: 0;
}
.contact-sede__contacts {
    list-style: none;
    margin:     0;
    padding:    0;
}
.contact-sede__contacts a {
    color: inherit;
}
.contact-sede__contacts a:hover,
.contact-sede__contacts a:focus-visible {
    color: var(--color-accent);
}
.contact__map {
    position:      relative;
    width:         100%;
    aspect-ratio:  1 / 1;
    min-height:    400px;
    max-height:    80vh;
    border-radius: 16px;
    overflow:      hidden;
    background:    var(--color-grey-2);
}
/* Nasconde link "maps.google.com" e termini d'uso del riquadro Google Maps */
.contact__map a[href^="https://maps.google.com/maps"],
.contact__map .gm-style-cc {
    display: none !important;
}
.contact__map-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-dark-1);
    font-size:       var(--fs-16);
}
@media (max-width: 991.98px) {
    .contact__map {
        min-height: 360px;
    }
}

/* ==========================================================================
   Popup "Richiedi preventivo" — modale desktop / bottom-sheet mobile + form GF
   ========================================================================== */
/* Altezza dvh (non inset:0): traccia il viewport visibile mentre le barre mobile
   entrano/escono → il bottom-sheet resta agganciato al fondo VISIBILE, niente
   fuori-schermo con uno scroll che mostra la toolbar. vh come fallback. */
.quote-modal {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    height:          100vh;
    height:          100dvh;
    z-index:         1100;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.quote-modal[hidden] {
    display: none;
}
.quote-modal__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.5);
    opacity:    0;
    transition: opacity var(--transition-base);
}
.quote-modal.is-open .quote-modal__overlay {
    opacity: 1;
}
/* Panel: contenitore fisso (non scrolla). Lo scroll vive in __body, così X e
   progressbar restano pinnati e il contenuto non sborda oltre il bordo
   arrotondato (clip via overflow:hidden). */
.quote-modal__panel {
    position:       relative;
    display:        flex;
    flex-direction: column;
    width:          min(720px, calc(100vw - 2rem));
    max-height:     90vh;
    max-height:     90dvh;
    overflow:       hidden;
    background:     var(--color-white);
    border-radius:  16px;
    transform:      translateY(16px);
    opacity:        0;
    transition:     transform var(--transition-base), opacity var(--transition-base);
}
.quote-modal.is-open .quote-modal__panel {
    transform: translateY(0);
    opacity:   1;
}
/* Body scrollabile: overscroll-behavior contiene il rubber-band iOS (niente
   trascinamento dello sfondo / taglio del pannello). */
.quote-modal__body {
    flex:                       1 1 auto;
    overflow-y:                 auto;
    overscroll-behavior:        contain;
    -webkit-overflow-scrolling: touch;
    padding:                    3rem 2.5rem 2.5rem;
}
/* Close stile Airbnb: solo X, niente cerchio nero (desktop + mobile).
   Pinnato sul panel (non scrolla). */
.quote-modal__close {
    position:        absolute;
    z-index:         2;
    top:             0.5rem;
    right:           0.5rem;
    width:           32px;
    height:          32px;
    border:          0;
    background:      transparent;
    color:           var(--color-text);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.quote-modal__close svg {
    width:  18px;
    height: 18px;
}

/* Form Gravity Forms dentro il popup */
#quote-modal .gform_title,
#quote-modal .gform_description {
    display: none !important;
}
/* Focus: rimappo le variabili GF (blu #204ce5) sull'accent del tema */
#quote-modal .gform-theme {
    --gf-color-primary:           var(--color-accent) !important;
    --gf-color-primary-rgb:       var(--color-accent-rgb) !important;
    --gf-color-primary-darker:    #e0702a !important;
    --gf-color-primary-contrast:  #ffffff !important;
    --gf-ctrl-border-color-focus: var(--color-accent) !important;
    --gf-ctrl-shadow:             none !important;
    /* pallino/spunta radio+checkbox: arancione, non blu default GF */
    --gf-ctrl-choice-check-color: var(--color-accent) !important;
}
#quote-modal .gf_progressbar_wrapper {
    margin-bottom: 2rem;
}
#quote-modal .gf_progressbar {
    height:        6px;
    border-radius: 100px;
    background:    var(--color-grey-2);
}
#quote-modal .gf_progressbar_percentage {
    height:        6px;
    border-radius: 100px;
    background:    var(--color-accent);
}
#quote-modal .gf_progressbar_percentage span {
    display: none;
}
#quote-modal .gfield_label {
    text-transform: uppercase;
    font-size:      var(--fs-14);
    font-weight:    600;
    letter-spacing: 0.02em;
    color:          var(--color-text-muted);
}
/* Quasi tutti i campi sono obbligatori → nascondo "(Obbligatorio)" (a11y via aria-required). */
#quote-modal .gfield_required {
    display: none;
}
/* Campi (input/select/textarea) come le card categoria: bordo chiaro, radius 10px, più alti.
   Selettore con #id → batte il GF theme; il colore di focus accent resta nella regola :focus sotto. */
/* Radio/checkbox nativi (es. Punto di ritiro): pallino interno accent, non blu browser */
#quote-modal .gform_wrapper input[type="radio"],
#quote-modal .gform_wrapper input[type="checkbox"] {
    accent-color: var(--color-accent);
}

#quote-modal .gform_wrapper input[type="text"],
#quote-modal .gform_wrapper input[type="email"],
#quote-modal .gform_wrapper input[type="tel"],
#quote-modal .gform_wrapper input[type="number"],
#quote-modal .gform_wrapper select,
#quote-modal .gform_wrapper textarea {
    border:        2px solid var(--color-grey-2);
    border-radius: 10px;
    /* GF theme forza height:38px + line-height:38px (border-box): col padding il testo
       finiva in overflow/clip. height:auto + line-height normale → il padding simmetrico
       definisce l'altezza e centra il testo. */
    height:        auto;
    line-height:   1.4;
    padding:       0.85rem 1rem;
}
#quote-modal .gform_wrapper textarea {
    min-height: 96px;
    height:     120px;
    resize:     vertical;
}
#quote-modal .gform_wrapper input[type="text"]:focus,
#quote-modal .gform_wrapper input[type="email"]:focus,
#quote-modal .gform_wrapper input[type="tel"]:focus,
#quote-modal .gform_wrapper input[type="number"]:focus,
#quote-modal .gform_wrapper select:focus,
#quote-modal .gform_wrapper textarea:focus {
    border-color: var(--color-accent);
    outline:      none;
}
#quote-modal .gform_footer,
#quote-modal .gform_page_footer {
    display:    flex;
    gap:        1rem;
    margin-top: 3.25rem;
}
#quote-modal .gform_button,
#quote-modal .gform_next_button {
    background:     var(--color-accent);
    color:          var(--color-white);
    border:         0;
    border-radius:  10px;
    padding:        1rem 2rem;
    font-weight:    700;
    text-transform: uppercase;
    font-size:      var(--fs-14);
    cursor:         pointer;
    box-shadow:     none;
}
#quote-modal .gform_previous_button {
    background:     var(--color-grey-2);
    color:          var(--color-footer);
    border:         0;
    border-radius:  10px;
    padding:        1rem 2rem;
    font-weight:    700;
    text-transform: uppercase;
    font-size:      var(--fs-14);
    cursor:         pointer;
    box-shadow:     none;
}
/* Mini-card veicolo selezionato (sotto il Modello): anteprima + dati km */
.quote-km-note {
    margin: 0.5rem 0 0.25rem;
}
.quote-km-note[hidden] {
    display: none;
}
.quote-veh-card {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    padding:       8px;
    background:    var(--color-grey-2);
    border-radius: 16px;
}
.quote-veh-card__media {
    flex:          0 0 auto;
    width:         96px;
    height:        96px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    var(--color-white);
    border-radius: 12px;
    overflow:      hidden;
}
.quote-veh-card__media img {
    width:      100%;
    height:     100%;
    object-fit: contain;
}
.quote-veh-card__body {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
    min-width:      0;
}
.quote-veh-card__title {
    font-size:   var(--fs-18);
    font-weight: 700;
    line-height: 1.15;
    color:       var(--color-text);
    text-wrap:   balance;
}
.quote-veh-card__row {
    display:      flex;
    align-items:  flex-start;
    gap:          0.5em;
    margin-top:   0.15rem;
}
.quote-veh-card__check {
    flex:        0 0 auto;
    width:       1em;
    margin-top:  0.25em;
    color:       #2F9B01;
    line-height: 0;
}
.quote-veh-card__check svg {
    width:   100%;
    height:  auto;
    display: block;
}
.quote-veh-card__rowtext {
    display:        flex;
    flex-direction: column;
}
.quote-veh-card__km {
    font-size:   var(--fs-14);
    font-weight: 700;
    color:       var(--color-text);
}
.quote-veh-card__extra {
    font-size: var(--fs-14);
    color:     var(--color-text-muted);
}

/* Campi date GF nascosti: valorizzati dal calendario flatpickr */
#quote-modal .gfield.quote-date {
    display: none;
}

/* Campi orario GF nascosti: valorizzati dalle chip */
#quote-modal .gfield.quote-time-field {
    display: none;
}

/* Chip orari ritiro/riconsegna (slot fissi) */
#quote-modal .quote-time {
    display:       flex;
    flex-direction: column;
    gap:           2rem;
    margin-top:    1rem;
    /* UI di soli controlli: mai selezionabile → niente evidenziazione testo durante il drag */
    user-select:   none;
    -webkit-user-select: none;
}
#quote-modal .quote-time__label {
    display:        block;
    text-transform: uppercase;
    font-size:      var(--fs-14);
    font-weight:    600;
    letter-spacing: 0.02em;
    color:          var(--color-text-muted);
    margin-bottom:  0.5rem;
}
#quote-modal .quote-time__viewport {
    position: relative;
}
#quote-modal .quote-time__strip {
    --fade-l:           0;   /* aggiornati dal JS su scroll: sfumatura solo dal lato scrollabile */
    --fade-r:           0;
    display:            flex;
    gap:                0.5rem;
    overflow-x:         auto;
    cursor:             grab;   /* drag desktop col mouse */
    scroll-snap-type:   x proximity;
    -webkit-overflow-scrolling: touch;
    /* padding verticale: l'overflow-x rende l'asse Y clipping → dà aria all'hover/focus */
    padding:            0.375rem 0;
    /* sfumatura ai bordi al posto della scrollbar */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image:         linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    scrollbar-width:    none;             /* Firefox */
    -ms-overflow-style: none;             /* IE/Edge legacy */
}
#quote-modal .quote-time__strip::-webkit-scrollbar {
    display: none;                        /* Chrome/Safari */
}
#quote-modal .quote-time__chip {
    flex:            0 0 auto;
    scroll-snap-align: start;
    min-width:       4rem;
    padding:         0.5rem 0.75rem;
    border:          1px solid var(--color-border, #e0e0e0);
    border-radius:   999px;
    background:      #fff;
    color:           var(--color-black);
    font-size:       var(--fs-16);
    font-weight:     500;
    cursor:          pointer;
    box-shadow:      none !important;   /* rimuove l'ombra del tema GF: solo bordo */
    transition:      border-color .15s, background-color .15s, color .15s;
}
#quote-modal .quote-time__chip:hover:not(:disabled),
#quote-modal .quote-time__chip:focus-visible {
    border-color: var(--color-accent);
    outline:      none;
}
#quote-modal .quote-time__chip.is-selected {
    border-color: var(--color-accent);
    background:   var(--color-accent);
    color:        #fff;
}
#quote-modal .quote-time__chip:disabled {
    opacity:        0.4;
    cursor:         not-allowed;
    pointer-events: none;
}
#quote-modal .quote-time__strip.is-dragging {
    cursor:         grabbing;
    scroll-snap-type: none;   /* snap durante il drag = scatti fastidiosi */
    scroll-behavior: auto;
}
/* Frecce ‹ › — sovrapposte ai bordi, visibili solo dal lato scrollabile */
#quote-modal .quote-time__arrow {
    position:       absolute;
    top:            50%;
    transform:      translateY(-50%);
    z-index:        2;
    display:        flex;
    align-items:    center;
    justify-content: center;
    /* !important + min-height:0 + line-height:1 per battere l'altezza forzata dei button GF
       (senza, box 30×36 → border-radius rende un ovale invece del cerchio) */
    box-sizing:     border-box;
    width:          2.125rem !important;
    height:         2.125rem !important;
    min-width:      0;
    min-height:     0 !important;
    line-height:    1;
    padding:        0 !important;
    border:         1px solid var(--color-border, #e0e0e0);
    border-radius:  50%;
    background:     #fff;
    color:          var(--color-black);
    cursor:         pointer;
    box-shadow:     0 2px 8px rgba(0, 0, 0, 0.12);
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;   /* nascosta = non intercetta i click sulle chip sotto */
    transition:     opacity .15s;
}
#quote-modal .quote-time__arrow.is-visible {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
}
#quote-modal .quote-time__arrow:focus {
    outline: none;   /* tabindex -1: non raggiungibile da tastiera, niente anello residuo su tap */
}
/* accent solo dove esiste hover reale (mouse) → su touch il tap non lo "incolla" */
@media (hover: hover) {
    #quote-modal .quote-time__arrow:hover {
        border-color: var(--color-accent);
        color:        var(--color-accent);
    }
}
#quote-modal .quote-time__arrow--prev { left:  -0.25rem; }
#quote-modal .quote-time__arrow--next { right: -0.25rem; }
#quote-modal .quote-time__arrow svg { display: block; }

/* Calcolatore km (step Chilometri): mini-card + slider extra */
#quote-modal .quote-km-calc {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    margin-top:     0.5rem;
}
#quote-modal .quote-km-calc__fallback {
    margin:      0;
    padding:     1rem;
    background:  var(--color-grey-2);
    border-radius: 12px;
    font-size:   var(--fs-16);
    color:       var(--color-text-muted);
    text-align:  center;
}
#quote-modal .quote-km-calc__meta {
    display:        flex;
    flex-wrap:      wrap;
    justify-content: space-between;
    gap:            0.5rem 1.5rem;
    font-size:      var(--fs-14);
    color:          var(--color-text-muted);
}
/* Slider km: track a 3 segmenti (div dietro) + input trasparente sopra (solo thumb visibile) */
#quote-modal .quote-km-calc__slider-wrap {
    position: relative;
    display:  flex;
    align-items: center;
    height:   22px;
    margin:   0.25rem 0;
}
/* Track full-width: i bordi combaciano con la legenda (0 a sx, max a dx). Il thumb
   nativo resta inset di ~11px (raggio) → può scostarsi di pochi px dal confine. */
#quote-modal .quote-km-calc__track {
    position:      absolute;
    left:          0;
    right:         0;
    top:           50%;
    transform:     translateY(-50%);
    height:        8px;
    border-radius: 999px;
    background:    var(--color-grey-2); /* sovrascritto inline dal JS (2 toni) */
    pointer-events: none;
}
/* Tacca verticale = confine inclusi/extra, a g% della larghezza piena (come il gradiente) */
#quote-modal .quote-km-calc__tick {
    position:      absolute;
    top:           50%;
    left:          calc(100% * var(--g, 0));
    transform:     translate(-50%, -50%);
    width:         2px;
    height:        16px;
    border-radius: 1px;
    background:    #C9C9C9;
    z-index:       1; /* sotto al thumb (z-index 2) */
    pointer-events: none;
}
#quote-modal .quote-km-calc__slider {
    -webkit-appearance: none;
    appearance:    none;
    position:      relative;
    z-index:       2; /* thumb sopra le tacche */
    width:         100%;
    height:        22px;
    margin:        0;
    padding:       0;
    background:    transparent; /* il track visibile è il div sotto */
    box-shadow:    none !important; /* niente ring sul bar: focus solo sul thumb */
    outline:       none !important; /* base: no flash del bordino nero in transizione focus/blur */
    border:        0;
    cursor:        pointer;
}
/* Legenda sotto lo slider: 0 | km inclusi (sotto la tacca) | max */
#quote-modal .quote-km-calc__axis {
    position:    relative;
    min-height:  1.2em;
    margin-top:  0.25rem;
    font-size:   var(--fs-14);
    color:       var(--color-text-muted);
}
#quote-modal .quote-km-calc__axis-min  { position: absolute; left: 0; }
#quote-modal .quote-km-calc__axis-max  { position: absolute; right: 0; }
#quote-modal .quote-km-calc__axis-incl {
    position:   absolute;
    left:       calc(100% * var(--g, 0));
    transform:  translateX(-50%);
    white-space: nowrap;
    color:      var(--color-text);
    font-weight: 600;
}
#quote-modal .quote-km-calc__slider::-webkit-slider-runnable-track {
    height:     8px;
    background: transparent;
}
#quote-modal .quote-km-calc__slider::-moz-range-track {
    height:     8px;
    background: transparent;
}
#quote-modal .quote-km-calc__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:    none;
    width:         22px;
    height:        22px;
    margin-top:    -7px; /* centra il thumb 22px sul track 8px */
    border:        3px solid #fff;
    border-radius: 50%;
    background:    var(--color-accent);
    box-shadow:    0 1px 4px rgba(0, 0, 0, 0.2);
    cursor:        pointer;
}
#quote-modal .quote-km-calc__slider::-moz-range-thumb {
    width:         22px;
    height:        22px;
    border:        3px solid #fff;
    border-radius: 50%;
    background:    var(--color-accent);
    box-shadow:    0 1px 4px rgba(0, 0, 0, 0.2);
    cursor:        pointer;
}
/* niente rettangolo arancione attorno al bar durante il drag (il range scatta
   :focus-visible anche col mouse → batte la regola globale con !important) */
#quote-modal .quote-km-calc__slider:focus,
#quote-modal .quote-km-calc__slider:focus-visible {
    outline:    none !important;
}
#quote-modal .quote-km-calc__slider:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--focus-ring);
}
#quote-modal .quote-km-calc__slider:focus-visible::-moz-range-thumb {
    box-shadow: var(--focus-ring);
}
#quote-modal .quote-km-calc__labels {
    display:        flex;
    flex-wrap:      wrap;
    justify-content: space-between;
    gap:            0.25rem 1rem;
    margin-top:     var(--p-60);
    font-size:      var(--fs-16);
    font-weight:    700;
}
#quote-modal .quote-km-calc__extra {
    color: var(--color-accent);
}
#quote-modal .quote-km-calc__total {
    color: var(--color-text);
}

/* Calendario range inline (flatpickr) */
#quote-modal .quote-cal__label {
    display:        block;
    text-transform: uppercase;
    font-size:      var(--fs-14);
    font-weight:    600;
    letter-spacing: 0.02em;
    color:          var(--color-text-muted);
    margin-bottom:  0.5rem;
}
/* Tema flatpickr condiviso (classe .nld-fp aggiunta via onReady) — modale + widget home */
.nld-fp.flatpickr-calendar {
    box-shadow: none;
    border:     1px solid var(--color-grey-2);
    border-radius: 14px;
    padding:    0.5rem;
    width:      340px;     /* popup widget: largh. fissa, evita la 7ª colonna tagliata */
}
.nld-fp.flatpickr-calendar.inline {     /* inline nel modale: full-width compatto */
    border:    0;
    padding:   0;
    margin:    0 auto;
    width:     100%;
    max-width: 420px;
}
/* rContainer/days al 100% in entrambe le modalità: la lib forza 307.875px fissi */
.nld-fp.flatpickr-calendar .flatpickr-rContainer,
.nld-fp.flatpickr-calendar .flatpickr-days {
    width:     100%;
    max-width: none;
}
/* Header: solo mese (anno rimosso), dropdown mese centrato */
.nld-fp .flatpickr-current-month .numInputWrapper {
    display: none;          /* via il selettore anno */
}
/* Frecce prev/next: la lib le mette absolute senza ancoraggio sull'header
   (.flatpickr-months non è positioned) → si riferiscono all'intero calendario.
   position:relative sui months le ancora alla fascia header (34px) e le centro. */
.nld-fp .flatpickr-months {
    position: relative;
}
.nld-fp .flatpickr-months .flatpickr-prev-month,
.nld-fp .flatpickr-months .flatpickr-next-month {
    top:       50%;
    transform: translateY(-50%);
    height:    auto;
}
.nld-fp .flatpickr-current-month {
    position:        static;
    width:           100%;
    left:            0;
    padding:         0;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.nld-fp .flatpickr-current-month .flatpickr-monthDropdown-months {
    margin:  0;
    padding: 0;
    background-image: none;   /* GF theme inietta icona select su focus → zigzag ripetuto */
    border:  0 !important;    /* GF theme aggiunge bordo al select → rimosso */
}
/* Giorni in griglia 7 col: niente gap orizzontale → barra range continua */
.nld-fp .dayContainer {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap:               1px;
    width:                 100%;
    min-width:             0;
    max-width:             none;
}
.nld-fp .flatpickr-day {
    position:        relative;
    margin:          0;
    padding:         0;
    border:          0;
    width:           auto;
    max-width:       none;
    height:          auto;
    max-height:      none;
    aspect-ratio:    1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    border-radius:   50px;
    font-size:       var(--fs-16);
    font-weight:     500;
}
.nld-fp .flatpickr-day.today {
    border: 1px solid var(--color-grey-2);
}
/* Giorni intermedi = barra grigia continua (riempie la cella) */
.nld-fp .flatpickr-day.inRange {
    background:    #f7f7f7;
    border:        0;
    box-shadow:    none;
    border-radius: 0;
}
/* Estremi del range = cerchio accent */
.nld-fp .flatpickr-day.selected,
.nld-fp .flatpickr-day.startRange,
.nld-fp .flatpickr-day.endRange,
.nld-fp .flatpickr-day.selected.inRange,
.nld-fp .flatpickr-day.startRange.inRange,
.nld-fp .flatpickr-day.endRange.inRange,
.nld-fp .flatpickr-day.selected:focus,
.nld-fp .flatpickr-day.startRange:focus,
.nld-fp .flatpickr-day.endRange:focus,
.nld-fp .flatpickr-day.selected:hover,
.nld-fp .flatpickr-day.startRange:hover,
.nld-fp .flatpickr-day.endRange:hover {
    background:    var(--color-accent) !important;   /* batte l'azzurro #569ff7 della lib */
    border:        0;
    color:         #fff;
    box-shadow:    none;
    border-radius: 50px !important;   /* batte i radius half-pill della lib (startRange/endRange) */
}
/* Colma il buco tra cerchio estremo e barra grigia (startRange→dx, endRange→sx) */
.nld-fp .flatpickr-day.startRange::before,
.nld-fp .flatpickr-day.endRange::before {
    content:    '';
    position:   absolute;
    top:        0;
    bottom:     0;
    width:      50%;
    background: #f7f7f7;
    z-index:    -1;
}
.nld-fp .flatpickr-day.startRange::before { right: 0; }
.nld-fp .flatpickr-day.endRange::before { left: 0; }
/* Selezione singola (start = end): nessuna barra laterale */
.nld-fp .flatpickr-day.startRange.endRange::before {
    display: none;
}
/* Tema lib default: box-shadow azzurro (#569ff7) sul endRange adiacente allo
   startRange — sovrascrive il nostro box-shadow:none per specificità (0,5,0 col +).
   Selettore più specifico (0,6,0) per azzerarlo. */
.nld-fp .flatpickr-day.selected.startRange + .flatpickr-day.endRange,
.nld-fp .flatpickr-day.startRange.startRange + .flatpickr-day.endRange,
.nld-fp .flatpickr-day.endRange.startRange + .flatpickr-day.endRange {
    box-shadow: none;
}

/* MOBILE — bottom-sheet stile app */
@media (max-width: 991.98px) {
    .quote-modal {
        align-items: flex-end;
    }
    .quote-modal__panel {
        width:         100%;
        max-height:    92vh;
        max-height:    92dvh;
        border-radius: 20px 20px 0 0;
        transform:     translateY(100%);
    }
    .quote-modal__body {
        padding: 2.5rem 1.25rem 2rem;
    }
    .quote-modal.is-open .quote-modal__panel {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .quote-modal__overlay,
    .quote-modal__panel {
        transition: none;
    }
}


/* ── Categoria come card immagine (stile Airbnb) — campo radio .quote-cat-cards ── */
#quote-modal .quote-cat-cards .gfield_radio {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.quote-cat-cards .gchoice {
    margin: 0;
    position: relative;
}
.quote-cat-cards .gchoice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.quote-cat-cards .gchoice label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--color-grey-2);
    border-radius: 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--fs-14);
    color: var(--color-text);
    text-align: center;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.quote-cat-card__media {
    display: block;
    width: 100%;
}
.quote-cat-card__media img {
    display: block;
    width: 100%;
    height: 84px;
    object-fit: contain;
}
.quote-cat-cards .gchoice label:hover {
    border-color: rgba(var(--color-accent-rgb), 0.5);
}
.quote-cat-cards .gchoice:has(input:checked) label {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}
@media (max-width: 480px) {
    .quote-cat-card__media img { height: 64px; }
    .quote-cat-cards .gchoice label { font-size: 0.75rem; }
}

/* ────────────────────────────────────────────────────────────
   Animazioni — scroll-reveal (classi applicate da initReveal in main.js)
──────────────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--reveal-i, 0) * 55ms);
}
.reveal.is-revealed {
    opacity: 1;
    transform: none;
}
/* Card veicolo: solo fade + stagger (niente slide). Transition per-proprietà così
   l'hover lift resta snappo (--transition-base) e solo l'opacity ha il delay a cascata. */
.vehicle-card.reveal,
.vehicle-launch-card.reveal {
    transform: none;
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform var(--transition-base), box-shadow var(--transition-base);
    transition-delay: calc(var(--reveal-i, 0) * 55ms), 0s, 0s;
}

/* Badge hero fluttuanti — oscillazione Y lenta, fuori sync */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.home-hero__badge--accent {
    animation: float 5s ease-in-out infinite;
    will-change: transform;
}
.home-hero__badge--purple {
    animation: float 6s ease-in-out infinite;
    animation-delay: -1.5s; /* sfasa rispetto all'accent */
    will-change: transform;
}

/* Hero: leggero zoom-in (ingrandisce) del media all'ingresso */
@keyframes hero-zoom-in {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
/* parte solo a loader sparito (body.is-loaded), così lo zoom-in non finisce nascosto
   sotto l'overlay; senza JS resta visibile normale (nessuno stato hidden di base) */
.is-loaded .home-hero__media-wrap {
    animation: hero-zoom-in 1.1s cubic-bezier(.22, .61, .36, 1) both;
}

/* Hero testo: fade-up coordinato all'ingresso (dopo il loader) */
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
.is-loaded .home-hero__eyebrow {
    animation: hero-fade-up .8s cubic-bezier(.22, .61, .36, 1) both;
}
.is-loaded .home-hero__headline {
    animation: hero-fade-up .8s cubic-bezier(.22, .61, .36, 1) .12s both;
}

/* Parallasse — l'immagine è 140px più alta del contenitore (offset -70) così il
   translate ±56px (JS) non scopre i bordi. Classe aggiunta da initParallax. */
.parallax-img {
    top: -70px;
    height: calc(100% + 140px);
    bottom: auto;
    will-change: transform;
}

/* Micro-lift cta-card (vehicle-card lo ha già nativamente) */
.cta-card {
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.cta-card:hover, .cta-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(var(--color-black-rgb), 0.08);
}
/* insight-card: solo leggero scale della foto all'hover, niente ombra/lift */
.insight-card__img {
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.insight-card:hover .insight-card__img,
.insight-card:focus-within .insight-card__img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .vehicle-card.reveal,
    .vehicle-launch-card.reveal { opacity: 1; transition: none; }
    .home-hero__badge--accent,
    .home-hero__badge--purple { animation: none; }
    .is-loaded .home-hero__media-wrap { animation: none; }
    .is-loaded .home-hero__eyebrow,
    .is-loaded .home-hero__headline { animation: none; }
    .parallax-img { top: 0; height: 100%; transform: none; }
    .insight-card:hover .insight-card__img,
    .insight-card:focus-within .insight-card__img { transform: none; }
    .vehicle-card:hover,
    .cta-card:hover, .cta-card:focus-within { transform: none; }
}