/* =============================================================================
   AYM THEME — Auto Yachting Mango
   Foglio di stile completo (puro CSS, niente build).
   Replica il look del tema WordPress gr-aym: navy + gold, card 4:3,
   prezzo gold, badge, scheda veicolo a 2 colonne.

   Sorgente di manutenzione: assets/styles/themes/aym/{tokens,theme}.css
   (stesso contenuto suddiviso). Questo file e' servito da asset('css/aym-theme.css').

   Mobile-first. WCAG 2.2 AA: contrasto >=4.5:1, focus visibile, touch >=44px.
   Scoped sotto body.aym per non interferire con gli altri temi.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root,
body.aym {
    --gr-navy: #1e3277;
    --gr-navy-dark: #18285F;
    --gr-gold: #BDA57A;
    --gr-gold-dark: #A38E64;
    --gr-dark: #1F2937;
    --gr-gray: #6B7280;
    --gr-light: #F8FAFC;
    --gr-green: #059669;
    --gr-red: #DC2626;
    --gr-border: #E5E7EB;
    --gr-price: #B8860B;
    --gr-white: #ffffff;
    --gr-whatsapp: #25D366;
    --gr-navy-light: #253f8f;
    --gr-gold-accessible: #A38E64;
    --gr-gold-text: #7D6A42;
    --gr-red-overlay: rgb(220 38 38 / 0.75);
    --gr-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --gr-transition: 0.3s ease;

    --gr-font-heading: 'Playfair Display', Georgia, serif;
    --gr-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --gr-container: 1280px;
    --gr-radius: 12px;
    --gr-radius-sm: 8px;
    --gr-gap: 1.5rem;
    --gr-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --gr-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);

    font-family: var(--gr-font-body);
    color: var(--gr-dark);
    background: var(--gr-white);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   2. RESET / BASE (scoped)
   --------------------------------------------------------------------------- */
body.aym *,
body.aym *::before,
body.aym *::after { box-sizing: border-box; }

body.aym h1, body.aym h2, body.aym h3, body.aym h4 {
    font-family: var(--gr-font-heading);
    color: var(--gr-navy);
    line-height: 1.2;
    margin: 0 0 .5em;
    font-weight: 700;
}

body.aym a { color: var(--gr-navy); }
body.aym img { max-width: 100%; height: auto; }

/* Focus visibile (WCAG 2.4.7 / 2.4.11) — outline gold 3px offset 2px */
body.aym a:focus-visible,
body.aym button:focus-visible,
body.aym input:focus-visible,
body.aym select:focus-visible,
body.aym textarea:focus-visible,
body.aym [tabindex]:focus-visible {
    outline: 3px solid var(--gr-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.aym *,
    body.aym *::before,
    body.aym *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   3. LAYOUT — container, section, grid
   --------------------------------------------------------------------------- */
.aym-container {
    width: 100%;
    max-width: var(--gr-container);
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 768px) {
    .aym-container { padding-inline: 1.5rem; }
}
.aym-container--narrow { max-width: 820px; }

.aym-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.aym-section--light { background: var(--gr-light); }

.aym-grid { display: grid; gap: var(--gr-gap); }
.aym-grid--3 { grid-template-columns: repeat(2, 1fr); }
.aym-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
    .aym-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .aym-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .aym-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .aym-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------------
   4. BOTTONI
   --------------------------------------------------------------------------- */
.aym-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--gr-radius-sm);
    font-family: var(--gr-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.aym-btn:hover { transform: translateY(-1px); }
.aym-btn:active { transform: translateY(0); }
.aym-btn svg { flex: 0 0 auto; }

.aym-btn--navy { background: var(--gr-navy); color: var(--gr-white); border-color: var(--gr-navy); }
.aym-btn--navy:hover { background: var(--gr-navy-dark); border-color: var(--gr-navy-dark); color: var(--gr-white); }

.aym-btn--gold { background: var(--gr-gold); color: var(--gr-navy); border-color: var(--gr-gold); }
.aym-btn--gold:hover { background: var(--gr-gold-dark); border-color: var(--gr-gold-dark); }

.aym-btn--outline { background: transparent; color: var(--gr-navy); border-color: var(--gr-navy); }
.aym-btn--outline:hover { background: var(--gr-navy); color: var(--gr-white); }

.aym-btn--whatsapp { background: var(--gr-whatsapp); color: #06301a; border-color: var(--gr-whatsapp); }
.aym-btn--whatsapp:hover { background: #1ebe5d; border-color: #1ebe5d; }

.aym-btn--sm { min-height: 38px; padding: .4rem 1rem; font-size: .9rem; }
.aym-btn--block { width: 100%; }
/* HARD-FIX colori bottoni-link: battono body.aym a (0,1,2) che altrimenti forza navy il testo */
body.aym .aym-btn--navy, body.aym a.aym-btn--navy { color: var(--gr-white); }
body.aym .aym-btn--navy:hover { color: var(--gr-white); }
body.aym .aym-btn--gold, body.aym a.aym-btn--gold { color: var(--gr-navy); }
body.aym .aym-btn--gold:hover { color: var(--gr-navy); }
body.aym .aym-btn--outline, body.aym a.aym-btn--outline { color: var(--gr-navy); }
body.aym .aym-btn--outline:hover { color: var(--gr-white); }
body.aym .aym-btn--whatsapp, body.aym a.aym-btn--whatsapp { color: #06301a; }

/* ---------------------------------------------------------------------------
   5. BADGE / TAG
   --------------------------------------------------------------------------- */
.aym-badge {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
}
.aym-badge--sold { background: var(--gr-red); color: #fff; }
.aym-badge--gold { background: rgba(189,165,122,.18); color: #6b5526; border: 1px solid var(--gr-gold); }
.aym-badge--available { background: var(--gr-green); color: #fff; }

.aym-tag {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--gr-light);
    color: var(--gr-gray);
    border: 1px solid var(--gr-border);
}

/* ---------------------------------------------------------------------------
   6. HEADER — topbar + navbar
   --------------------------------------------------------------------------- */
/* Font header AYM esplicito: l'header e' incluso anche in pagine non-AYM (es. blog,
   tema "atelier" con body serif). Le var --gr-font-* sono scoped a body.aym, quindi
   qui uso lo stack esplicito -> menu identico su ogni pagina. */
.aym-header { position: sticky; top: 0; z-index: 100; background: var(--gr-white); box-shadow: var(--gr-shadow); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.aym-topbar {
    background: var(--gr-navy);
    color: var(--gr-white);
    font-size: .75rem;
}
/* Forza i link della topbar a bianco: su body.aym la regola `body.aym a { color: navy }`
   (0,1,1) batte `.aym-topbar__item` (0,1,0) rendendoli invisibili su sfondo navy. */
body.aym .aym-topbar a, .aym-topbar a { color: var(--gr-white); }
body.aym .aym-topbar a:hover, .aym-topbar a:hover { color: var(--gr-gold); }
.aym-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 40px;
    flex-wrap: wrap;
}
.aym-topbar__contact { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.aym-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--gr-white);
    text-decoration: none;
}
.aym-topbar__item svg { color: var(--gr-gold); }
.aym-topbar a.aym-topbar__item:hover { color: var(--gr-gold); }
.aym-topbar__social { display: flex; align-items: center; gap: .35rem; }
.aym-topbar__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    color: var(--gr-white);
    border-radius: 6px;
    transition: background-color .18s ease, color .18s ease;
}
.aym-topbar__social a:hover { background: rgba(255,255,255,.12); color: var(--gr-gold); }

/* Topbar contatti nascosti su mobile molto stretto per non affollare */
@media (max-width: 560px) {
    .aym-topbar__item { font-size: .78rem; }
    .aym-topbar__contact { gap: .75rem; }
}

.aym-navbar {
    background: var(--gr-white);
    border-bottom: 1px solid var(--gr-border);
    box-shadow: var(--gr-shadow);
}
.aym-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}
.aym-navbar__brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--gr-navy);
}
.aym-navbar__brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.aym-navbar__brand-name {
    font-family: var(--gr-font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gr-navy);
}
.aym-navbar__brand-since {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gr-gold-dark);
}
@media (max-width: 480px) {
    .aym-navbar__brand-text { display: none; }
}

.aym-navbar__nav { display: none; }
.aym-navbar__menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0; padding: 0;
}
.aym-navbar__menu a {
    display: inline-block;
    padding: .55rem .8rem;
    color: var(--gr-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    border-radius: 6px;
    transition: color .18s ease, background-color .18s ease;
}
.aym-navbar__menu a:hover { color: var(--gr-navy); background: var(--gr-light); }
.aym-navbar__menu a[aria-current="page"] {
    color: var(--gr-navy);
    box-shadow: inset 0 -3px 0 var(--gr-gold);
}

.aym-navbar__actions { display: flex; align-items: center; gap: .5rem; }
.aym-navbar__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    color: var(--gr-navy);
    border-radius: 8px;
}
.aym-navbar__phone:hover { background: var(--gr-light); }
.aym-navbar__cta { display: none; }

.aym-navbar__hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.aym-navbar__hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--gr-navy);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

@media (min-width: 1024px) {
    .aym-navbar__nav { display: block; }
    .aym-navbar__cta { display: inline-flex; }
    .aym-navbar__hamburger { display: none; }
}

/* ---------------------------------------------------------------------------
   7. MENU MOBILE
   --------------------------------------------------------------------------- */
.aym-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 90;
}
.aym-mobile-backdrop.is-open { opacity: 1; visibility: visible; }

.aym-mobile-menu {
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(86vw, 360px);
    background: var(--gr-white);
    box-shadow: -8px 0 30px rgba(15,23,42,.18);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem 1.5rem;
    overflow-y: auto;
}
.aym-mobile-menu.is-open { transform: translateX(0); }

.aym-mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gr-border);
    margin-bottom: 1rem;
}
.aym-mobile-menu__title {
    font-family: var(--gr-font-heading);
    font-weight: 700;
    color: var(--gr-navy);
    font-size: 1.1rem;
}
.aym-mobile-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 0;
    background: var(--gr-light);
    border-radius: 8px;
    color: var(--gr-navy);
    cursor: pointer;
}
.aym-mobile-menu__nav { display: flex; flex-direction: column; }
.aym-mobile-menu__nav a {
    padding: .85rem .25rem;
    color: var(--gr-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--gr-border);
}
.aym-mobile-menu__nav a:hover { color: var(--gr-navy); }
.aym-mobile-menu__cta { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }

@media (min-width: 1024px) {
    .aym-mobile-menu,
    .aym-mobile-backdrop { display: none; }
}

/* ---------------------------------------------------------------------------
   7-bis. RICERCA OVERLAY (replica gr-search-overlay WP)
   --------------------------------------------------------------------------- */
.aym-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.aym-navbar__search-btn { background: none; border: none; padding: .5rem; cursor: pointer; color: var(--gr-dark, #1F2937); display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 8px; }
.aym-navbar__search-btn:hover { color: var(--gr-navy, #1e3277); }
.aym-navbar__search-btn:focus-visible { outline: 2px solid var(--gr-navy, #1e3277); outline-offset: 2px; }

.aym-search-overlay { position: fixed; inset: 0; background: linear-gradient(160deg, rgba(26,58,92,.97) 0%, rgba(15,30,50,.98) 100%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); z-index: 9998; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10vh 1rem 2rem; opacity: 0; transform: translateY(-20px); transition: opacity .35s ease, transform .35s ease; overflow-y: auto; }
.aym-search-overlay.is-active { opacity: 1; transform: translateY(0); }
.aym-search-overlay[hidden] { display: none; }
.aym-search-overlay__inner { width: 100%; max-width: 960px; }
.aym-search-overlay__inner::before { content: 'Cerca nel catalogo'; display: block; font-family: var(--gr-font-heading, serif); font-size: 1.5rem; font-weight: 700; color: #fff; text-align: center; margin-bottom: 1.5rem; letter-spacing: .02em; }
@media (min-width: 768px) { .aym-search-overlay { padding-top: 12vh; } .aym-search-overlay__inner::before { font-size: 1.875rem; margin-bottom: 2rem; } }

.aym-search-overlay__form { display: flex; gap: .75rem; max-width: 100%; margin: 0 auto; align-items: center; }
.aym-search-overlay__input-wrap { flex: 1; display: flex; align-items: center; background: rgba(255,255,255,.95); border-radius: var(--gr-radius, 12px); box-shadow: 0 8px 32px rgba(0,0,0,.2); overflow: hidden; border: 2px solid transparent; transition: border-color .2s, box-shadow .2s; }
.aym-search-overlay__input-wrap:focus-within { border-color: var(--gr-gold, #BDA57A); box-shadow: 0 8px 32px rgba(0,0,0,.2), 0 0 0 4px rgba(189,165,122,.3); }
.aym-search-overlay__input { flex: 1; min-width: 0; padding: 18px 24px; font-size: 1.15rem; border: none; background: transparent; color: var(--gr-dark, #1F2937); min-height: 60px; }
.aym-search-overlay__input:focus { outline: none; }
.aym-search-overlay__input::placeholder { color: var(--gr-gray, #6B7280); }
.aym-search-overlay__scope-divider { width: 1px; height: 32px; background: var(--gr-border, #E5E7EB); flex-shrink: 0; }
.aym-search-overlay__scope { padding: 0 16px; border: none; background: transparent; color: var(--gr-navy, #1e3277); font-size: .85rem; font-weight: 500; font-family: var(--gr-font-body, sans-serif); cursor: pointer; min-height: 60px; }
.aym-search-overlay__form .aym-btn--navy { min-height: 60px; flex-shrink: 0; }

.aym-voice-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; flex-shrink: 0; }
.aym-voice-search-btn:hover { background: rgba(255,255,255,.16); }
.aym-voice-search-btn--active { background: var(--gr-gold, #BDA57A); color: var(--gr-navy, #1e3277); border-color: var(--gr-gold, #BDA57A); }

.aym-search-overlay__hint { display: block; text-align: center; font-size: .75rem; color: rgba(255,255,255,.45); margin-top: .75rem; letter-spacing: .05em; }
.aym-search-overlay__close { position: fixed; top: 1.5rem; right: 1.5rem; color: #fff; cursor: pointer; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; z-index: 1; }
.aym-search-overlay__close:hover { background: rgba(255,255,255,.2); transform: rotate(90deg); }

.aym-search-overlay__results { margin-top: 1.5rem; background: #fff; border-radius: var(--gr-radius, 12px); max-height: 55vh; overflow-y: auto; box-shadow: 0 12px 48px rgba(0,0,0,.25); }
.aym-search-overlay__results:empty { display: none; }
.aym-search-overlay__loading { padding: 1.5rem; text-align: center; color: var(--gr-gray, #6B7280); font-size: .9rem; }
body.aym .aym-search-overlay__item { padding: 14px 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--gr-border, #E5E7EB); transition: background-color .15s; color: var(--gr-dark, #1F2937); text-decoration: none; }
.aym-search-overlay__item:last-child { border-bottom: none; }
.aym-search-overlay__item:hover, .aym-search-overlay__item--active { background: var(--gr-light, #F3F4F6); }
.aym-search-overlay__item--active { outline: 3px solid var(--gr-gold, #BDA57A); outline-offset: -3px; }
.aym-search-overlay__thumb { width: 64px; height: 48px; object-fit: cover; border-radius: var(--gr-radius-sm, 6px); flex-shrink: 0; background: var(--gr-light, #F3F4F6); }
.aym-search-overlay__thumb-placeholder { width: 64px; height: 48px; background: var(--gr-light, #F3F4F6); border-radius: var(--gr-radius-sm, 6px); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gr-gray, #6B7280); }
.aym-search-overlay__item-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; flex: 1; }
.aym-search-overlay__item-title { font-weight: 600; font-size: 1rem; color: var(--gr-dark, #1F2937); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aym-search-overlay__item-meta { font-size: .85rem; color: var(--gr-gray, #6B7280); }
body.aym .aym-search-overlay__view-all { display: block; padding: 1rem 1.25rem; text-align: center; color: var(--gr-navy, #1e3277); font-weight: 600; font-size: 1rem; text-decoration: none; border-top: 2px solid var(--gr-border, #E5E7EB); transition: background-color .18s, color .18s; }
body.aym .aym-search-overlay__view-all:hover { background: var(--gr-navy, #1e3277); color: #fff; }
.aym-search-overlay__empty { padding: 2rem; text-align: center; color: var(--gr-gray, #6B7280); font-size: 1rem; }
body.aym .aym-search-overlay__empty a { display: inline-block; margin-top: .5rem; color: var(--gr-navy, #1e3277); font-weight: 600; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   8. BREADCRUMB
   --------------------------------------------------------------------------- */
.aym-breadcrumb { font-size: .85rem; margin-bottom: 1rem; }
.aym-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0; padding: 0;
}
.aym-breadcrumb li { display: inline-flex; align-items: center; gap: .35rem; color: var(--gr-gray); }
.aym-breadcrumb li:not(:last-child)::after { content: "-"; color: var(--gr-border); margin-left: .35rem; }
.aym-breadcrumb a { color: var(--gr-navy); text-decoration: none; }
.aym-breadcrumb a:hover { text-decoration: underline; }
.aym-breadcrumb [aria-current="page"] { color: var(--gr-dark); font-weight: 600; }
.aym-breadcrumb--light, .aym-breadcrumb--light li, .aym-breadcrumb--light a { color: rgba(255,255,255,.85); }
.aym-breadcrumb--light a:hover { color: var(--gr-gold); }
.aym-breadcrumb--light li:not(:last-child)::after { color: rgba(255,255,255,.4); }
.aym-breadcrumb--light [aria-current="page"] { color: #fff; }
/* Override forte: su body.aym le regole `body.aym a` / `a:visited` (navy) rendevano
   invisibile il link "Home" del breadcrumb sull'hero navy. */
body.aym .aym-breadcrumb--light a,
body.aym .aym-breadcrumb--light a:visited { color: rgba(255,255,255,.85); }
body.aym .aym-breadcrumb--light a:hover { color: var(--gr-gold); }

/* ---------------------------------------------------------------------------
   9. HERO ARCHIVIO / MARCA
   --------------------------------------------------------------------------- */
.aym-hero {
    background: var(--gr-navy);
    color: var(--gr-white);
    padding: 1.25rem 0 2rem;
    text-align: center;
}
body.aym .aym-hero__title { color: var(--gr-white); font-size: clamp(1.75rem, 4vw, 2.25rem); margin: 0 0 .5rem; text-align: center; line-height: 1.2; }
.aym-hero__subtitle { color: rgba(255,255,255,.85); max-width: 860px; font-size: .9rem; margin: 0 auto; text-align: center; line-height: 1.6; }
.aym-hero__make-head { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.aym-hero__make-info { display: flex; flex-direction: column; gap: .35rem; }
/* Pagina marca: testo a sinistra accanto al logo (come il live). Le altre hero restano centrate. */
body.aym .aym-hero--make .aym-hero__title, body.aym .aym-hero--make .aym-hero__subtitle { text-align: left; margin: 0; }
.aym-hero__make-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: var(--gr-radius);
    padding: .75rem;
    box-shadow: var(--gr-shadow);
}
.aym-hero__make-logo img { width: auto; max-height: 72px; object-fit: contain; }

/* ---------------------------------------------------------------------------
   10. BARRA FILTRI
   --------------------------------------------------------------------------- */
.aym-filter-bar {
    padding: 1.25rem;
    background: var(--gr-white);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow);
    margin-bottom: 1rem;
}
.aym-filter-bar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .625rem 1rem;
    background: var(--gr-navy);
    color: var(--gr-white);
    border: none;
    border-radius: var(--gr-radius-sm);
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
}
.aym-filter-bar__grid[hidden] { display: none; }
.aym-filter-bar__grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: end;
}
@media (min-width: 768px) {
    .aym-filter-bar__toggle { display: none; }
    .aym-filter-bar__grid[hidden] { display: flex; }
}
/* Desktop: tutti i filtri su una sola riga come il live (campi prezzo piu' stretti). */
@media (min-width: 1024px) {
    .aym-filter-bar__grid { flex-wrap: nowrap; gap: .4rem; }
    .aym-filter-bar__field { min-width: 0; }
    .aym-filter-bar__field:has(input) { flex: 0 1 92px; }
}
.aym-filter-bar__field { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 115px; }
.aym-filter-bar__field label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.aym-filter-bar__field select,
.aym-filter-bar__field input {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-sm);
    font-family: var(--gr-font-body);
    font-size: .875rem;
    color: var(--gr-dark);
    background: var(--gr-white);
}
.aym-filter-bar__field select:focus,
.aym-filter-bar__field input:focus { border-color: var(--gr-navy); }
.aym-filter-bar__actions { display: flex; align-items: center; gap: .375rem; flex-shrink: 0; }
.aym-filter-bar__reset { font-size: .9rem; color: var(--gr-gray); text-decoration: underline; }
.aym-filter-bar__reset:hover { color: var(--gr-navy); }

/* Chip filtri attivi (rimovibili) */
.aym-filter-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.aym-filter-tag {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem; font-size: .85rem; font-weight: 600;
    color: var(--gr-navy); background: var(--gr-light);
    border: 1px solid var(--gr-border); border-radius: 999px; text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.aym-filter-tag:hover { background: var(--gr-white); border-color: var(--gr-navy); }
.aym-filter-tag svg { color: var(--gr-gray); }
.aym-filter-tag:hover svg { color: var(--gr-navy); }
.aym-filter-tag:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 2px; }

/* Scroll infinito: indicatore caricamento + bottone fallback */
.aym-load-more { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: 2.25rem; }
.aym-load-more__spinner { color: var(--gr-navy); }
.aym-load-more__spinner svg { animation: aym-spin 0.8s linear infinite; }
@keyframes aym-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .aym-load-more__spinner svg { animation: none; }
}

.aym-results-count { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------------------
   11. CARD VEICOLO
   --------------------------------------------------------------------------- */
.aym-card {
    position: relative;
    background: var(--gr-white);
    border-radius: var(--gr-radius);
    overflow: hidden;
    box-shadow: var(--gr-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
    height: 100%;
}
.aym-card:hover { box-shadow: var(--gr-shadow-md); transform: translateY(-2px); }
.aym-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.aym-card__link:focus-visible { outline: 3px solid var(--gr-gold); outline-offset: -3px; }

.aym-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--gr-light);
    overflow: hidden;
}
.aym-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.aym-card:hover .aym-card__media img { transform: scale(1.03); }
.aym-card__placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--gr-border);
}

.aym-card__badge {
    position: absolute;
    top: 10px; left: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    z-index: 2;
}
.aym-card__badge--featured { background: var(--gr-gold); color: var(--gr-navy); }
.aym-card__badge--epoca { background: var(--gr-navy); }
.aym-card__badge--delivery { background: var(--gr-green); }

.aym-card__sold-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .45);
    z-index: 3;
}
.aym-card__sold-overlay span {
    background: var(--gr-red);
    color: #fff;
    padding: .4rem 1.4rem;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: .08em;
    transform: rotate(-6deg);
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.aym-card__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.1rem; }
.aym-card__title {
    font-size: 1.125rem;
    color: var(--gr-navy);
    margin: 0 0 .5rem;
    line-height: 1.3;
    text-align: center;
    min-height: calc(2 * 1.3em);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aym-card__excerpt { color: var(--gr-gray); font-size: .9rem; margin: 0 0 .75rem; }

.aym-card__specs {
    display: flex;
    border-top: 1px solid var(--gr-border);
    justify-content: space-around;
    align-items: flex-start;
    gap: .5rem;
    font-size: .75rem;
    color: var(--gr-gray);
    padding: .75rem 0;
}
.aym-card__spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    flex: 1;
    text-align: center;
    color: var(--gr-gray);
}
.aym-card__spec-icon { color: var(--gr-navy); opacity: .5; flex: 0 0 auto; }

.aym-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .75rem;
}
.aym-card__price {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--gr-green);
}
.aym-card__cta { font-size: .9rem; font-weight: 600; color: var(--gr-gold-text); transition: color .3s ease; }
.aym-card:hover .aym-card__cta { color: var(--gr-navy); }
.aym-card--sold .aym-card__price { color: var(--gr-gray); }

/* ---------------------------------------------------------------------------
   12. STATO VUOTO
   --------------------------------------------------------------------------- */
.aym-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--gr-gray);
}
.aym-empty svg { color: var(--gr-border); margin-bottom: 1rem; }
.aym-empty h2 { color: var(--gr-navy); }
.aym-empty p { max-width: 50ch; margin: 0 auto 1.5rem; }

/* ---------------------------------------------------------------------------
   13. SCHEDA VEICOLO — layout 2 colonne
   --------------------------------------------------------------------------- */
.aym-single { padding-block: 2rem 4rem; }
.aym-single__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}
/* min-width:0 evita che l'immagine galleria (larghezza naturale grande) gonfi
   la colonna 3fr facendola diventare ~1884px e schiacciando la colonna info. */
.aym-single__layout > * { min-width: 0; }
@media (min-width: 1024px) {
    .aym-single__layout { grid-template-columns: 3fr 2fr; gap: 2rem; }
}

/* Galleria */
.aym-gallery__main {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--gr-light);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aym-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aym-gallery__main--empty { color: var(--gr-border); }
.aym-single__sold-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .4);
}
.aym-single__sold-overlay span {
    background: var(--gr-red); color: #fff;
    padding: .6rem 2rem; border-radius: 8px;
    font-weight: 800; letter-spacing: .1em; font-size: 1.3rem;
    transform: rotate(-6deg);
}

.aym-gallery__thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: .75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gr-border) transparent;
    padding-bottom: 4px;
}
.aym-gallery__thumbs::-webkit-scrollbar { height: 5px; }
.aym-gallery__thumbs::-webkit-scrollbar-thumb { background: var(--gr-border); border-radius: 3px; }
.aym-gallery__thumb {
    flex: 0 0 auto;
    width: 84px; height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--gr-radius-sm);
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}
.aym-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aym-gallery__thumb:hover { border-color: var(--gr-gold); }
.aym-gallery__thumb[aria-current="true"] { border-color: var(--gr-gold); }

.aym-single__video {
    margin-top: 1rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--gr-radius);
    overflow: hidden;
    background: #000;
}
.aym-single__video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Colonna info */
.aym-single__info { display: flex; flex-direction: column; gap: 1rem; }
.aym-single__title { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0; text-align: center; }
.aym-single__brand { display: flex; justify-content: center; margin: .25rem 0 .5rem; }
.aym-single__brand img { width: 96px; height: 96px; object-fit: contain; }
@media (max-width: 639px) { .aym-single__brand img { width: 64px; height: 64px; } }
.aym-single__sold-badge { align-self: flex-start; }
.aym-single__boat-desc { color: var(--gr-dark); margin: 0; }

.aym-single__key-specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin: .85rem 0;
}
.aym-single__key-spec {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--gr-dark);
    font-weight: 500;
    border: 1px solid var(--gr-border);
    border-radius: 999px;
    padding: .35rem .8rem;
    background: var(--gr-white);
}
.aym-single__key-spec svg { color: var(--gr-gold-dark); }

.aym-single__price-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; background: var(--gr-light); border: 1px solid rgba(189,165,122,.25); border-radius: var(--gr-radius); padding: 1.25rem 1.5rem; margin: 1rem 0; }
.aym-single__price {
    font-family: var(--gr-font-body);
    font-weight: 800;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    color: var(--gr-price);
    line-height: 1.1;
}
.aym-single__price-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.aym-single__badges { display: flex; flex-wrap: wrap; gap: .5rem; }

.aym-single__cta { display: flex; flex-direction: column; gap: .65rem; margin-top: .5rem; }

/* Tabs / dettagli */
.aym-single__details { margin-top: 2.5rem; }
.aym-single__section-title { font-size: 1.5rem; margin-bottom: 1rem; }

.aym-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--gr-border);
    margin-bottom: 1.5rem;
}
.aym-tabs__btn {
    padding: .75rem 1.25rem;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--gr-gray);
    font-family: var(--gr-font-body);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
.aym-tabs__btn:hover { color: var(--gr-navy); }
.aym-tabs__btn[aria-selected="true"] {
    color: var(--gr-navy);
    border-bottom-color: var(--gr-gold);
}
.aym-tabs__panel { animation: aym-fade .25s ease; }
@keyframes aym-fade { from { opacity: 0; } to { opacity: 1; } }

/* Prose (descrizione + seo) */
.aym-prose { color: var(--gr-dark); line-height: 1.75; }
.aym-prose h2, .aym-prose h3 { margin-top: 1.5em; }
.aym-prose p { margin: 0 0 1em; }
.aym-prose ul, .aym-prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.aym-prose a { color: var(--gr-navy); text-decoration: underline; }

/* Specifiche: griglia 2 colonne di celle (replica .gr-specs-grid WP) */
.aym-specs {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--gr-border);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
    overflow: hidden;
}
@media (min-width: 640px) { .aym-specs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .aym-specs { grid-template-columns: repeat(4, 1fr); } }
.aym-specs__item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .75rem 1rem;
    background: var(--gr-white);
}
.aym-specs__label { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; font-weight: 500; color: var(--gr-gray); text-transform: uppercase; letter-spacing: .02em; }
.aym-specs__icon { flex: 0 0 auto; color: var(--gr-gold); }
.aym-specs__value { margin: 0; font-weight: 700; color: var(--gr-navy); padding-left: calc(18px + .4rem); }

/* Optional */
.aym-optionals {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem .75rem;
}
@media (min-width: 640px) { .aym-optionals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .aym-optionals { grid-template-columns: repeat(3, 1fr); } }
.aym-optionals li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--gr-light);
    border-radius: var(--gr-radius-sm);
    color: var(--gr-dark);
    font-size: .9rem;
    line-height: 1.3;
}
.aym-optionals li::before {
    content: "✓";
    flex: 0 0 auto;
    color: var(--gr-green, #16A34A);
    font-weight: 700;
}

.aym-single__related { margin-top: 3rem; }

/* ---------------------------------------------------------------------------
   14. FOOTER
   --------------------------------------------------------------------------- */
.aym-footer { background: var(--gr-navy); color: rgba(255,255,255,.82); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.aym-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-block: 3rem;
}
@media (min-width: 640px) { .aym-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .aym-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.aym-footer__logo { margin-bottom: 1rem; }
.aym-footer__desc { font-size: .92rem; max-width: 38ch; margin: 0 0 1.25rem; }
.aym-footer__address p {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0 0 .6rem;
    font-size: .92rem;
}
.aym-footer__address svg { color: var(--gr-gold); flex: 0 0 auto; margin-top: 2px; }
.aym-footer__address a { color: rgba(255,255,255,.85); text-decoration: none; }
.aym-footer__address a:hover { color: var(--gr-gold); }

.aym-footer__heading {
    font-family: var(--gr-font-heading);
    color: var(--gr-white);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.aym-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.aym-footer__links a { color: rgba(255,255,255,.82); text-decoration: none; font-size: .92rem; }
.aym-footer__links a:hover { color: var(--gr-gold); }
.aym-footer__links--plain li { font-size: .92rem; }

.aym-footer__hours { display: flex; flex-direction: column; gap: .65rem; }
.aym-footer__hours-row { display: flex; flex-direction: column; font-size: .9rem; }
.aym-footer__hours-row span { color: var(--gr-gold); font-weight: 600; margin-bottom: .15rem; }
.aym-footer__hours-row strong { color: rgba(255,255,255,.9); font-weight: 500; }
.aym-footer__hours-row--closed strong { color: rgba(255,255,255,.6); }

.aym-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); }
.aym-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-block: 1.25rem;
}
.aym-footer__copyright { font-size: .85rem; margin: 0; color: rgba(255,255,255,.6); }
.aym-footer__social { display: flex; gap: .4rem; }
.aym-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    color: rgba(255,255,255,.85);
    border-radius: 8px;
    transition: background-color .18s ease, color .18s ease;
}
.aym-footer__social a:hover { background: rgba(255,255,255,.12); color: var(--gr-gold); }
.aym-footer__bottom-right { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }.aym-footer__legal { display: flex; gap: 1rem; }.aym-footer__legal a { font-size: .85rem; color: rgba(255,255,255,.7); text-decoration: none; }.aym-footer__legal a:hover { color: var(--gr-gold); }
.aym-footer__credit { border-top: 1px solid rgba(255,255,255,.08); text-align: center; padding: 1rem; }
.aym-footer__credit p { margin: 0; font-size: .8rem; color: rgba(255,255,255,.6); }
.aym-footer__credit a { color: rgba(255,255,255,.8); text-decoration: none; opacity: .8; transition: opacity .18s ease, color .18s ease; }
.aym-footer__credit a:hover { opacity: 1; color: var(--gr-gold); }
.aym-footer__credit-logo { display: inline-block; vertical-align: middle; width: 24px; height: auto; margin-left: .25rem; }
/* Override forte: body.aym a / a:visited (navy) rendevano invisibile il credit link su navy. */
body.aym .aym-footer__credit a, body.aym .aym-footer__credit a:visited { color: rgba(255,255,255,.8); }
body.aym .aym-footer__credit a:hover { color: var(--gr-gold); }
/* Protezione generale: nessun link del footer deve diventare navy una volta visitato. */
body.aym .aym-footer a:visited { color: rgba(255,255,255,.85); }
body.aym .aym-footer a:hover { color: var(--gr-gold); }

/* ==========================================================================
   FORM AYM — pagina contatti, modale richiesta info veicolo
   (navy/gold, WCAG 2.2 AA: focus visibile, target >=44px, contrasto, motion)
   ========================================================================== */

/* --- Titoli di sezione --- */
.aym-section--alt { background: var(--gr-light); }
.aym-section__title {
    font-family: var(--gr-font-heading);
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    color: var(--gr-navy);
    margin: 0 0 .5rem;
    text-align: left;
}
/* Centrato solo dove serve (es. intro Servizi), come il WP gr-section__title--center */
.aym-section__title--center { text-align: center; }
.aym-section__subtitle {
    color: var(--gr-gray);
    max-width: 600px;
    margin: 0 auto 2rem;
    text-align: center;
}

/* --- Layout 2 colonne contatti --- */
.aym-contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gr-gap);
    align-items: start;
}
@media (min-width: 1024px) {
    .aym-contact-layout { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.aym-contact-layout__form .aym-card { padding: clamp(1.25rem, 3vw, 2rem); }
/* Il form non deve "sollevarsi" come le card veicolo */
.aym-contact-layout__form .aym-card:hover { transform: none; box-shadow: var(--gr-shadow); }

/* --- Form: campi --- */
.aym-form__row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .aym-form__row { grid-template-columns: 1fr 1fr; } }
.aym-field { margin-bottom: 1.1rem; }
.aym-field__label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    color: var(--gr-dark);
    margin-bottom: .35rem;
}
.aym-input,
.aym-select,
.aym-textarea {
    width: 100%;
    min-height: 44px;
    padding: .75rem 1rem;
    font: inherit;
    color: var(--gr-dark);
    background: var(--gr-white);
    border: 2px solid var(--gr-border);
    border-radius: var(--gr-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.aym-textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.aym-input:hover,
.aym-select:hover,
.aym-textarea:hover { border-color: var(--gr-gray); }
.aym-input:focus-visible,
.aym-select:focus-visible,
.aym-textarea:focus-visible {
    outline: 3px solid var(--gr-gold);
    outline-offset: 2px;
    border-color: var(--gr-navy);
}
.aym-input--readonly,
.aym-input[readonly] { background: var(--gr-light); color: var(--gr-gray); cursor: not-allowed; }

/* --- Checkbox consenso privacy --- */
.aym-field--checkbox {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.aym-checkbox {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: .15rem;
    accent-color: var(--gr-navy);
    cursor: pointer;
}
.aym-checkbox:focus-visible { outline: 3px solid var(--gr-gold); outline-offset: 2px; }
.aym-field__consent { font-size: .9rem; color: var(--gr-dark); line-height: 1.5; cursor: pointer; }
.aym-field__consent a { color: var(--gr-navy); font-weight: 600; }
.aym-field__consent a:hover { color: var(--gr-gold-dark); }

/* --- Errori di validazione Symfony --- */
.aym-form ul { list-style: none; margin: .35rem 0 0; padding: 0; }
.aym-form ul li {
    color: var(--gr-red);
    font-size: .85rem;
    font-weight: 600;
}

/* --- Honeypot anti-bot (fuori schermo, mai visibile) --- */
.aym-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* --- Colonna info contatto --- */
.aym-contact-layout__info { display: flex; flex-direction: column; gap: 1rem; }
.aym-contact-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--gr-white);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
    padding: 1.1rem 1.25rem;
}
.aym-contact-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(26, 58, 92, .08);
    color: var(--gr-navy);
}
.aym-contact-card__icon--whatsapp { background: rgba(37, 211, 102, .12); color: #1a8a45; }
.aym-contact-card h3 {
    margin: 0 0 .25rem;
    font-size: .95rem;
    color: var(--gr-navy);
    font-family: var(--gr-font-heading);
}
.aym-contact-card address { font-style: normal; color: var(--gr-dark); line-height: 1.55; }
.aym-contact-card address small { color: var(--gr-gray); }
.aym-contact-card a { color: var(--gr-navy); text-decoration: none; font-weight: 600; }
.aym-contact-card a:hover { text-decoration: underline; color: var(--gr-gold-dark); }
.aym-hours { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .25rem; }
.aym-hours th { text-align: left; font-weight: 600; color: var(--gr-dark); padding: .2rem .5rem .2rem 0; }
.aym-hours td { text-align: left; font-size: .875rem; color: var(--gr-gray); padding: .2rem 0; }
.aym-hours--closed td, .aym-hours--closed th { color: var(--gr-red); }

/* --- Mappa --- */
.aym-map {
    border-radius: var(--gr-radius);
    overflow: hidden;
    box-shadow: var(--gr-shadow);
    line-height: 0;
}
.aym-map iframe { display: block; width: 100%; }

/* ==========================================================================
   DIALOG / MODALE (native <dialog>) — Richiedi Informazioni veicolo
   ========================================================================== */
.aym-no-scroll { overflow: hidden; }

.aym-dialog {
    width: min(560px, calc(100vw - 2rem));
    max-width: 560px;
    padding: 0;
    border: none;
    border-radius: var(--gr-radius);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    color: var(--gr-dark);
    background: var(--gr-white);
}
.aym-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.aym-dialog__panel { padding: clamp(1.25rem, 4vw, 1.75rem); text-align: left; }
.aym-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.aym-dialog__title {
    font-family: var(--gr-font-heading);
    font-size: 1.4rem;
    color: var(--gr-navy);
    margin: 0;
}
.aym-dialog__subtitle {
    color: var(--gr-gold-dark);
    font-weight: 600;
    margin: .25rem 0 1.25rem;
}
.aym-dialog__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: none;
    background: transparent;
    color: var(--gr-gray);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.aym-dialog__close:hover { background: var(--gr-light); color: var(--gr-navy); }
.aym-dialog__close:focus-visible { outline: 3px solid var(--gr-gold); outline-offset: 2px; }
.aym-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}
.aym-dialog .aym-btn { width: auto; }

@media (prefers-reduced-motion: no-preference) {
    .aym-dialog[open] { animation: aym-dialog-in .18s ease-out; }
    @keyframes aym-dialog-in {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ---------------------------------------------------------------------------
   N. CHATBOT WIDGET (gr-chat) — skin AYM navy + gold
   Lo stile e' scoped sotto body.aym cosi' vale solo sul tema Auto Yachting
   Mango. Il markup vive in templates/_partials/chat_widget.html.twig ed e'
   pilotato dal controller Stimulus assets/controllers/gr-chat-controller.js.
   --------------------------------------------------------------------------- */
body.aym .gr-chat-container {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;
    font-family: var(--gr-font-body);
}

/* --- Pallino flottante (FAB) --- */
body.aym .gr-chat-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--gr-navy);
    box-shadow: var(--gr-shadow-lg);
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease;
}
body.aym .gr-chat-fab:hover { background: var(--gr-navy-dark); transform: scale(1.05); }
body.aym .gr-chat-fab:focus-visible {
    outline: 3px solid var(--gr-gold);
    outline-offset: 2px;
}
body.aym .gr-chat-fab-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    pointer-events: none;
}

/* --- Tooltip proattivo --- */
body.aym .gr-chat-tooltip {
    position: absolute;
    right: 0;
    bottom: 72px;
    max-width: 240px;
    padding: .65rem .85rem;
    background: var(--gr-white);
    color: var(--gr-dark);
    border: 1px solid var(--gr-border);
    border-left: 4px solid var(--gr-gold);
    border-radius: var(--gr-radius-sm);
    box-shadow: var(--gr-shadow-lg);
    font-size: .9rem;
    line-height: 1.4;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
body.aym .gr-chat-tooltip-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* --- Finestra chat --- */
body.aym .gr-chat-window {
    position: absolute;
    right: 0;
    bottom: 72px;
    display: none;
    flex-direction: column;
    width: 370px;
    max-width: calc(100vw - 2.5rem);
    height: 540px;
    max-height: calc(100vh - 7rem);
    background: var(--gr-white);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
    box-shadow: var(--gr-shadow-lg);
    overflow: hidden;
}
body.aym .gr-chat-window-open { display: flex; }

/* --- Header --- */
body.aym .gr-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .85rem 1rem;
    background: var(--gr-navy);
    color: var(--gr-white);
    border-bottom: 3px solid var(--gr-gold);
    flex: 0 0 auto;
}
body.aym .gr-chat-header-title {
    font-family: var(--gr-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
}
body.aym .gr-chat-header-actions { display: flex; gap: .25rem; }
body.aym .gr-chat-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--gr-radius-sm);
    background: transparent;
    color: var(--gr-white);
    cursor: pointer;
    transition: background-color .15s ease;
}
body.aym .gr-chat-header-btn:hover { background: rgba(255, 255, 255, .14); }
body.aym .gr-chat-header-btn:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 2px; }
body.aym .gr-chat-header-btn.gr-chat-tts-active { background: var(--gr-gold); color: var(--gr-navy); }

/* --- Area messaggi --- */
body.aym .gr-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: var(--gr-light);
}
body.aym .gr-chat-msg { display: flex; max-width: 85%; }
body.aym .gr-chat-msg-user { align-self: flex-end; }
body.aym .gr-chat-msg-bot { align-self: flex-start; }
body.aym .gr-chat-msg-text {
    padding: .6rem .85rem;
    border-radius: var(--gr-radius);
    font-size: .92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
body.aym .gr-chat-msg-bot .gr-chat-msg-text {
    background: var(--gr-white);
    color: var(--gr-dark);
    border: 1px solid var(--gr-border);
    border-bottom-left-radius: 4px;
}
body.aym .gr-chat-msg-user .gr-chat-msg-text {
    background: var(--gr-navy);
    color: var(--gr-white);
    border-bottom-right-radius: 4px;
}

/* --- CTA (link bottone) --- */
body.aym .gr-chat-cta {
    align-self: flex-start;
    margin-top: -.2rem;
    padding: .5rem .9rem;
    background: var(--gr-gold);
    color: var(--gr-navy);
    border-radius: var(--gr-radius-sm);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease;
}
body.aym .gr-chat-cta:hover { background: var(--gr-gold-dark); color: var(--gr-navy); }
body.aym .gr-chat-cta:focus-visible { outline: 3px solid var(--gr-navy); outline-offset: 2px; }

/* --- Quick replies --- */
body.aym .gr-chat-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-self: flex-start;
}
body.aym .gr-chat-quick-reply {
    padding: .45rem .8rem;
    min-height: 36px;
    background: var(--gr-white);
    color: var(--gr-navy);
    border: 1px solid var(--gr-navy);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
body.aym .gr-chat-quick-reply:hover { background: var(--gr-navy); color: var(--gr-white); }
body.aym .gr-chat-quick-reply:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 2px; }

/* --- Indicatore "sta scrivendo" --- */
body.aym .gr-chat-typing .gr-chat-typing-dots {
    display: inline-flex;
    gap: 4px;
    padding: .7rem .9rem;
    background: var(--gr-white);
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius);
    border-bottom-left-radius: 4px;
}
body.aym .gr-chat-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gr-gray);
    animation: aym-chat-blink 1.2s infinite ease-in-out both;
}
body.aym .gr-chat-typing-dots span:nth-child(2) { animation-delay: .2s; }
body.aym .gr-chat-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes aym-chat-blink {
    0%, 80%, 100% { opacity: .3; }
    40% { opacity: 1; }
}

/* --- Barra input --- */
body.aym .gr-chat-input-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem .7rem;
    background: var(--gr-white);
    border-top: 1px solid var(--gr-border);
    flex: 0 0 auto;
}
body.aym .gr-chat-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: .55rem .8rem;
    border: 1px solid var(--gr-border);
    border-radius: 999px;
    font-size: .92rem;
    font-family: inherit;
    color: var(--gr-dark);
    background: var(--gr-white);
}
body.aym .gr-chat-input:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 1px; border-color: var(--gr-navy); }
body.aym .gr-chat-input-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}
body.aym .gr-chat-input-btn svg { width: 20px; height: 20px; }
body.aym .gr-chat-send-btn { background: var(--gr-navy); color: var(--gr-white); }
body.aym .gr-chat-send-btn:hover { background: var(--gr-navy-dark); }
body.aym .gr-chat-send-btn:disabled { opacity: .5; cursor: not-allowed; }
body.aym .gr-chat-mic-btn { background: var(--gr-light); color: var(--gr-navy); }
body.aym .gr-chat-mic-btn:hover { background: var(--gr-border); }
body.aym .gr-chat-mic-btn.gr-chat-mic-active { background: var(--gr-red); color: var(--gr-white); }
body.aym .gr-chat-input-btn:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 2px; }

/* --- Form inline (lead + escalation) --- */
body.aym .gr-chat-inline-form { display: none; padding: 1rem; background: var(--gr-white); border-top: 1px solid var(--gr-border); overflow-y: auto; }
body.aym .gr-chat-inline-form.gr-chat-form-visible { display: block; }
body.aym .gr-chat-window.gr-chat-form-active .gr-chat-input-bar { display: none; }
body.aym .gr-chat-inline-form label {
    display: block;
    margin: .5rem 0 .25rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gr-navy);
}
body.aym .gr-chat-inline-form input,
body.aym .gr-chat-inline-form textarea {
    width: 100%;
    min-height: 44px;
    padding: .55rem .75rem;
    border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius-sm);
    font-size: .9rem;
    font-family: inherit;
    color: var(--gr-dark);
}
body.aym .gr-chat-inline-form textarea { min-height: 80px; resize: vertical; }
body.aym .gr-chat-inline-form input:focus-visible,
body.aym .gr-chat-inline-form textarea:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 1px; border-color: var(--gr-navy); }
body.aym .gr-chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.aym .gr-chat-form-actions { display: flex; gap: .5rem; margin-top: .9rem; }
body.aym .gr-chat-form-submit,
body.aym .gr-chat-form-cancel {
    flex: 1 1 auto;
    min-height: 44px;
    padding: .55rem .9rem;
    border-radius: var(--gr-radius-sm);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
body.aym .gr-chat-form-submit { background: var(--gr-navy); color: var(--gr-white); border-color: var(--gr-navy); }
body.aym .gr-chat-form-submit:hover { background: var(--gr-navy-dark); }
body.aym .gr-chat-form-cancel { background: transparent; color: var(--gr-navy); border-color: var(--gr-border); }
body.aym .gr-chat-form-cancel:hover { background: var(--gr-light); }
body.aym .gr-chat-form-submit:focus-visible,
body.aym .gr-chat-form-cancel:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 2px; }

/* --- Mobile: finestra a tutto schermo --- */
@media (max-width: 480px) {
    body.aym .gr-chat-container { right: 1rem; bottom: 1rem; }
    body.aym .gr-chat-window {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        top: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        border: none;
    }
}

/* --- Rispetta prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
    body.aym .gr-chat-fab,
    body.aym .gr-chat-tooltip,
    body.aym .gr-chat-input-btn,
    body.aym .gr-chat-quick-reply,
    body.aym .gr-chat-cta { transition: none; }
    body.aym .gr-chat-typing-dots span { animation: none; }
    body.aym .gr-chat-fab:hover { transform: none; }
}


/* ===== CTA finale pagine CMS ===== */
.aym-cta-final { text-align: center; max-width: 640px; margin-inline: auto; }
.aym-cta-final h2 { font-family: var(--gr-font-heading, serif); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--gr-navy); margin: 0 0 .5rem; }
.aym-cta-final p { color: var(--gr-gray, #6b7280); margin: 0 0 1.5rem; }
.aym-cta-final__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ===== Calcolatore rata finanziamento (scheda veicolo) ===== */
.aym-finance { margin: 1.25rem 0; border: 1px solid var(--gr-border); border-radius: .75rem; background: var(--gr-light); overflow: hidden; }
.aym-finance__summary { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; cursor: pointer; font-weight: 600; color: var(--gr-navy); list-style: none; }
.aym-finance__summary::-webkit-details-marker { display: none; }
.aym-finance__summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; line-height: 1; color: var(--gr-gold); }
.aym-finance[open] .aym-finance__summary::after { content: "−"; }
.aym-finance__summary:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: -2px; }
.aym-finance__body { padding: 0 1rem 1rem; display: grid; gap: .75rem; }
.aym-finance__field { display: flex; flex-direction: column; gap: .3rem; }
.aym-finance__field label { font-size: .82rem; font-weight: 600; color: var(--gr-navy); }
.aym-finance__field input, .aym-finance__field select {
    padding: .55rem .75rem; border: 1px solid var(--gr-border); border-radius: .5rem;
    background: var(--gr-white); font: inherit; color: var(--gr-dark);
}
.aym-finance__field input:focus-visible, .aym-finance__field select:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 2px; border-color: var(--gr-navy); }
.aym-finance__result { margin: .25rem 0 0; font-weight: 600; color: var(--gr-navy); }
.aym-finance__amount { font-size: 1.4rem; font-weight: 800; color: var(--gr-gold-dark); display: inline-block; }
.aym-finance__note { margin: 0; font-size: .72rem; color: var(--gr-gray, #6b7280); line-height: 1.5; }

/* ===== Sezione Team (pagina Contatti) ===== */
.aym-team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .aym-team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .aym-team-grid { grid-template-columns: repeat(4, 1fr); } }
.aym-team-card {
    background: var(--gr-white); border: 1px solid var(--gr-border);
    border-radius: var(--gr-radius); padding: 1.5rem 1rem; text-align: center;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.aym-team-card:hover { box-shadow: 0 8px 24px rgba(30,50,119,.12); transform: translateY(-2px); border-color: var(--gr-gold); }
.aym-team-card__photo-wrap { display: flex; justify-content: center; margin-bottom: .9rem; }
.aym-team-card__initial {
    display: flex; align-items: center; justify-content: center;
    width: 114px; height: 114px; border-radius: 50%; border: 3px solid var(--gr-border); box-sizing: content-box;
    background: var(--gr-navy); color: var(--gr-white);
    font-family: var(--gr-font-heading); font-size: 2rem; font-weight: 700;
}
.aym-team-card__name { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .25rem; color: var(--gr-navy); }
.aym-team-card__role { color: var(--gr-gray); font-size: .9rem; margin: 0 0 .75rem; }
.aym-team-card__phone {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--gr-navy); font-weight: 600; text-decoration: none; font-size: .95rem;
}
.aym-team-card__phone svg { color: var(--gr-gold); }
.aym-team-card__phone:hover { color: var(--gr-gold-dark); text-decoration: underline; }

/* ===== FIX colori footer: testo/link chiari su sfondo navy =====
   `body.aym a` (0,1,2) e `body.aym h2/h3` (0,1,2) battevano le regole
   footer (0,1,1) rendendo link e heading navy-su-navy (invisibili).
   Questi selettori scoped sotto body.aym hanno specificità sufficiente. */
body.aym .aym-footer,
body.aym .aym-footer__desc,
body.aym .aym-footer__address p { color: rgba(255,255,255,.82); }
body.aym .aym-footer__heading { color: var(--gr-gold-accessible); }
body.aym .aym-footer__links a,
body.aym .aym-footer__address a,
body.aym .aym-footer__bottom a,
body.aym .aym-footer__copyright a { color: rgba(255,255,255,.85); }
body.aym .aym-footer__links a:hover,
body.aym .aym-footer__address a:hover,
body.aym .aym-footer__bottom a:hover,
body.aym .aym-footer__copyright a:hover { color: var(--gr-gold); }

/* ===== Logo wordmark (header + footer) ===== */
body.aym .aym-navbar__logo-img, .aym-navbar__logo-img { height: 46px; width: auto; max-width: none; display: block; }
.aym-footer__logo-img { height: 46px; width: auto; display: block; }
@media (max-width: 480px) { .aym-navbar__logo-img { height: 40px; } }

.aym-team-card__photo { width: 114px; height: 114px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gr-border); box-sizing: content-box; }

/* ===== Galleria veicolo: main cliccabile + zoom + frecce + contatore ===== */
.aym-gallery__main { position: relative; }
.aym-gallery__main-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--gr-radius); overflow: hidden; position: relative; }
.aym-gallery__main-btn img { display: block; width: 100%; }
.aym-gallery__zoom { position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(15,23,42,.6); color: #fff; pointer-events: none; }
.aym-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: var(--gr-navy); cursor: pointer; box-shadow: var(--gr-shadow); z-index: 2; }
.aym-gallery__nav:hover { background: #fff; }
.aym-gallery__nav--prev { left: .6rem; }
.aym-gallery__nav--next { right: .6rem; }
.aym-gallery__counter { position: absolute; left: .75rem; bottom: .75rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(15,23,42,.6); color: #fff; font-size: .82rem; font-weight: 600; }

/* ===== Lightbox ===== */
.aym-lightbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(8,12,24,.92); overflow: hidden; }
.aym-lightbox::backdrop { background: rgba(8,12,24,.92); }
.aym-lightbox__img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.aym-lightbox__close { position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.aym-lightbox__close:hover { background: rgba(255,255,255,.22); }
.aym-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.aym-lightbox__nav:hover { background: rgba(255,255,255,.22); }
.aym-lightbox__nav--prev { left: 1rem; }
.aym-lightbox__nav--next { right: 1rem; }
.aym-lightbox__counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-weight: 600; }
.aym-lightbox__close:focus-visible, .aym-lightbox__nav:focus-visible, .aym-gallery__nav:focus-visible, .aym-gallery__main-btn:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 2px; }

/* ============================================================
   BLOG — replica del WP gr-aym (index.php + gr-base.css).
   Classi gr-* portate verbatim dal tema WordPress.
   ============================================================ */
:root {
    --gr-text-xs: 0.75rem; --gr-text-sm: 0.875rem; --gr-text-lg: 1.25rem;
    --gr-space-2: 0.5rem; --gr-space-3: 0.75rem; --gr-space-4: 1rem;
    --gr-space-5: 1.5rem; --gr-space-6: 2rem; --gr-space-8: 3rem;
}
.gr-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 768px) { .gr-container { padding-inline: 1.5rem; } }
.gr-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.gr-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; font-size: var(--gr-text-sm); }
.gr-breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.gr-breadcrumb li:not(:first-child)::before { content: "\203A"; opacity: 0.6; }
.gr-breadcrumb a { text-decoration: none; }
.gr-breadcrumb--light a { color: rgba(255,255,255,0.8); }
.gr-breadcrumb--light a:hover { color: var(--gr-white); }
.gr-breadcrumb--light li { color: rgba(255,255,255,0.9); }
.gr-breadcrumb--light li::before { color: rgba(255,255,255,0.7); }
.gr-archive-hero { position: relative; background: var(--gr-navy); padding: 2rem 0 3rem; text-align: center; }
.gr-archive-hero .gr-container { position: relative; z-index: 2; }
.gr-archive-hero .gr-breadcrumb { margin-bottom: 0.75rem; text-align: left; }
.gr-archive-hero h1 { font-family: var(--gr-font-heading); font-size: clamp(1.75rem, 4vw, 2.25rem); color: var(--gr-white); margin: 0 0 0.5rem; line-height: 1.2; letter-spacing: -0.02em; }
.gr-archive-hero__subtitle { color: rgba(255,255,255,0.85); font-size: var(--gr-text-sm); max-width: 860px; margin: 0 auto; line-height: 1.6; }
.gr-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.gr-grid-3 > * { min-width: 0; }
@media (max-width: 1024px) { .gr-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .gr-grid-3 { grid-template-columns: 1fr; gap: 1rem; } }
.gr-blog-card { border-radius: var(--gr-radius); overflow: hidden; box-shadow: var(--gr-shadow); background-color: var(--gr-white); transition: box-shadow var(--gr-transition), transform var(--gr-transition); display: flex; flex-direction: column; }
.gr-blog-card:hover { box-shadow: var(--gr-shadow-md); transform: translateY(-3px); }
.gr-blog-card__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; height: 100%; }
.gr-blog-card__image { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.gr-blog-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gr-blog-card:hover .gr-blog-card__image img { transform: scale(1.05); }
.gr-blog-card__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; height: 100%; background: linear-gradient(135deg, var(--gr-navy) 0%, #2a4f7a 100%); color: rgba(255,255,255,0.25); }
.gr-blog-card__placeholder span { font-family: var(--gr-font-heading); font-size: var(--gr-text-sm); letter-spacing: 0.05em; text-transform: uppercase; }
.gr-blog-card__body { padding: var(--gr-space-5) var(--gr-space-5) var(--gr-space-6); display: flex; flex-direction: column; flex-grow: 1; }
.gr-blog-card__meta { display: flex; align-items: center; gap: var(--gr-space-3); margin-bottom: var(--gr-space-2); }
.gr-blog-card__category { font-size: var(--gr-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gr-gold-accessible, #A38E64); font-weight: 700; background: rgba(189,165,122,0.12); padding: 0.125rem 0.5rem; border-radius: 4px; }
.gr-blog-card__date { font-size: var(--gr-text-xs); color: var(--gr-gray); }
.gr-blog-card__title { font-family: var(--gr-font-heading); font-size: var(--gr-text-lg); margin: 0 0 var(--gr-space-2); color: var(--gr-navy); line-height: 1.3; transition: color var(--gr-transition); }
.gr-blog-card:hover .gr-blog-card__title { color: var(--gr-gold-accessible, #A38E64); }
.gr-blog-card__excerpt { font-size: var(--gr-text-sm); color: var(--gr-gray); line-height: 1.6; flex-grow: 1; margin: 0; }
.gr-blog-card__readmore { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--gr-text-sm); font-weight: 600; color: var(--gr-navy); margin-top: var(--gr-space-4); transition: color var(--gr-transition), gap var(--gr-transition); }
.gr-blog-card__readmore svg { transition: transform var(--gr-transition); }
.gr-blog-card:hover .gr-blog-card__readmore { color: var(--gr-gold-accessible, #A38E64); }
.gr-blog-card:hover .gr-blog-card__readmore svg { transform: translateX(4px); }
.gr-pagination { margin-top: 2.5rem; }
.gr-pagination ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; justify-content: center; }
.gr-pagination a, .gr-pagination__dots { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 0.75rem; border-radius: var(--gr-radius-sm, 8px); border: 1px solid var(--gr-border, #E5E7EB); color: var(--gr-navy); text-decoration: none; font-weight: 600; }
.gr-pagination a:hover { border-color: var(--gr-navy); }
.gr-pagination a.is-current { background: var(--gr-navy); color: var(--gr-white); border-color: var(--gr-navy); }
.gr-pagination__dots { border: none; }
.gr-archive__empty { text-align: center; padding: 3rem 1rem; }
.gr-archive__empty h2 { font-family: var(--gr-font-heading); color: var(--gr-navy); margin: 0 0 0.5rem; }
.gr-archive__empty p { color: var(--gr-gray); margin: 0 0 1.5rem; }

/* ===========================================================================
   SCHEDA VEICOLO — miglioramenti UX/UI (2026-06-15)
   Sticky CTA mobile + sticky info desktop, gerarchia CTA con "Chiama",
   trust band, allineamento a sinistra colonna info, pill conteggio foto.
   Regole additive: sovrascrivono per cascata quelle base piu' in alto.
   =========================================================================== */

/* Layout desktop "rail laterale": descrizione SOTTO la galleria a sinistra,
   info a destra. Elimina il vuoto bianco sotto la galleria (info piu' alta). */
@media (min-width: 1024px) {
    .aym-single__layout {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-areas:
            "gallery info"
            "details info";
    }
    .aym-single__gallery { grid-area: gallery; }
    .aym-single__info    { grid-area: info; align-self: start; }
    .aym-single__details { grid-area: details; }
}
/* La descrizione ora vive nella griglia: la spaziatura la dà il gap della griglia. */
.aym-single__details { margin-top: 0; }

/* Pill "N foto" sulla foto principale (rende evidente la galleria completa) */
.aym-gallery__count {
    position: absolute; top: .6rem; left: .6rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem; border: 0; border-radius: 999px;
    background: rgba(15, 23, 42, .72); color: #fff;
    font-size: .8rem; font-weight: 600; cursor: pointer;
    transition: background var(--gr-transition);
}
.aym-gallery__count:hover { background: rgba(15, 23, 42, .88); }
.aym-gallery__count:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 2px; }
.aym-gallery__count svg { width: 15px; height: 15px; }

/* Rassicurazioni: griglia 2 colonne (4 testi su due righe) */
.aym-single__trust {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem;
}
.aym-single__trust-item {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .82rem; color: var(--gr-gray); font-weight: 500;
}
.aym-single__trust-item svg { width: 16px; height: 16px; color: var(--gr-gold-dark); flex: 0 0 auto; }

/* Gerarchia CTA: primario dominante, WhatsApp+Chiama affiancati, finanziamento terziario */
.aym-single__cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.aym-single__cta-finance {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    margin-top: .1rem; padding: .5rem; border-radius: var(--gr-radius-sm);
    font-size: .9rem; font-weight: 600; color: var(--gr-navy); text-decoration: none;
}
.aym-single__cta-finance:hover { text-decoration: underline; }
.aym-single__cta-finance:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 2px; }
.aym-single__cta-finance svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Barra azioni sticky su mobile */
.aym-stickybar { display: none; }
@media (max-width: 1023px) {
    .aym-stickybar {
        display: flex; align-items: center; gap: .5rem;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px));
        background: var(--gr-white); border-top: 1px solid var(--gr-border);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    }
    .aym-stickybar__price { display: flex; flex-direction: column; line-height: 1.1; margin-right: auto; }
    .aym-stickybar__price-label { font-size: .66rem; color: var(--gr-gray); text-transform: uppercase; letter-spacing: .04em; }
    .aym-stickybar__price-val { font-size: 1.05rem; font-weight: 800; color: var(--gr-price); white-space: nowrap; }
    .aym-stickybar__btn { flex: 0 0 auto; padding: .55rem .85rem; }
    /* Evita che la barra copra il contenuto finale */
    .aym-single { padding-bottom: 5.5rem; }
}

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

/* Auto-hide: allo scroll giu' collassa SOLO la topbar (barra navy contatti/social),
   la navbar (logo + menu) resta sticky e visibile. Allo scroll su la topbar riappare.
   Collasso con grid-template-rows 1fr->0fr: fluido anche ad altezza variabile (la
   topbar va a capo su mobile). La classe .is-hidden e' messa sull'header dal
   controller Stimulus aym-header; qui collassa solo il figlio .aym-topbar. */
.aym-topbar { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s ease; }
.aym-topbar__collapse { overflow: hidden; min-width: 0; min-height: 0; }
.aym-header.is-hidden .aym-topbar { grid-template-rows: 0fr; }
@media (prefers-reduced-motion: reduce) {
    .aym-topbar { transition: none; }
}

/* =========================================================================
   BLOG (tema AYM) — listing, categoria, articolo. Coerente col resto del
   sito (Inter, navy, gold). Usato dalle override in
   templates/bundles/GrBlogBundle/blog/. Le var --gr-* esistono perche' le
   pagine blog ora estendono il layout AYM (body.aym).
   ========================================================================= */
.aym-blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 600px) { .aym-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .aym-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.aym-blog-card { display: flex; flex-direction: column; border: 1px solid var(--gr-border); border-radius: var(--gr-radius); overflow: hidden; background: var(--gr-white); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.aym-blog-card:hover { box-shadow: 0 8px 24px rgba(30,50,119,.12); transform: translateY(-2px); border-color: var(--gr-gold); }
.aym-blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.aym-blog-card__media { aspect-ratio: 16 / 9; background: var(--gr-light); display: flex; align-items: center; justify-content: center; color: var(--gr-gray); }
.aym-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aym-blog-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.25rem; }
.aym-blog-card__meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; font-size: .78rem; }
.aym-blog-card__cat { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gr-gold); }
.aym-blog-card__date { color: var(--gr-gray); }
.aym-blog-card__title { font-family: var(--gr-font-heading); color: var(--gr-navy); font-size: 1.2rem; line-height: 1.3; margin: 0 0 .5rem; }
.aym-blog-card__excerpt { margin: 0 0 1rem; color: var(--gr-gray); font-size: .92rem; line-height: 1.6; }
.aym-blog-card__readmore { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--gr-navy); font-weight: 600; font-size: .9rem; }
.aym-blog-card:hover .aym-blog-card__readmore { color: var(--gr-gold-dark); }

.aym-pagination { margin-top: 2.5rem; }
.aym-pagination ul { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; list-style: none; padding: 0; margin: 0; }
.aym-pagination a, .aym-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .65rem; border: 1px solid var(--gr-border); border-radius: 8px; color: var(--gr-navy); text-decoration: none; font-weight: 600; }
.aym-pagination a:hover { border-color: var(--gr-gold); color: var(--gr-gold-dark); }
.aym-pagination a.is-current { background: var(--gr-navy); color: var(--gr-white); border-color: var(--gr-navy); }
.aym-pagination .aym-pagination__dots { border: none; min-width: auto; }

.aym-article { max-width: 820px; margin-inline: auto; }
.aym-article__meta { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .875rem; color: var(--gr-gray); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gr-border); }
.aym-article__cover { margin: 0 0 1.75rem; }
.aym-article__cover img { width: 100%; height: auto; display: block; border-radius: var(--gr-radius); }
.aym-prose { color: #1f2937; font-size: 1.05rem; line-height: 1.75; }
.aym-prose > :first-child { margin-top: 0; }
.aym-prose h2 { font-family: var(--gr-font-heading); color: var(--gr-navy); font-size: 1.6rem; margin: 2rem 0 .75rem; }
.aym-prose h3 { font-family: var(--gr-font-heading); color: var(--gr-navy); font-size: 1.3rem; margin: 1.5rem 0 .5rem; }
.aym-prose p { margin: 0 0 1.1rem; }
.aym-prose ul, .aym-prose ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.aym-prose li { margin-bottom: .4rem; }
.aym-prose a { color: var(--gr-navy); text-decoration: underline; }
.aym-prose a:hover { color: var(--gr-gold-dark); }
.aym-prose img { max-width: 100%; height: auto; border-radius: var(--gr-radius); margin: 1rem 0; }
.aym-prose blockquote { margin: 1.25rem 0; padding: .5rem 1.25rem; border-left: 4px solid var(--gr-gold); color: var(--gr-gray); font-style: italic; }
.aym-article__footer { max-width: 820px; margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--gr-border); display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.aym-article__footer-label { color: var(--gr-gray); font-size: .9rem; }
.aym-tag { display: inline-flex; align-items: center; padding: .35rem .85rem; border: 1px solid var(--gr-border); border-radius: 999px; color: var(--gr-navy); text-decoration: none; font-size: .85rem; font-weight: 600; transition: border-color .2s ease, color .2s ease; }
.aym-tag:hover { border-color: var(--gr-gold); color: var(--gr-gold-dark); }

/* =========================================================================
   RIFINITURE HEADER (rev. 2026-06-23)
   1) Anti-tremolio dell'auto-hide della topbar (desktop).
   2) Topbar "solo icone" su mobile (riduce l'ingombro della barra contatti).
   ========================================================================= */

/* (1) Quando la topbar sticky collassa allo scroll, l'header cambia altezza:
   con lo scroll-anchoring attivo Chrome ricalcola lo scrollY per "ancorare" il
   contenuto visibile, il listener di scroll percepisce un falso scroll opposto
   e ri-mostra/ri-nasconde la barra in loop (la topbar "trema"). Disattivando lo
   scroll-anchoring il collasso scorre liscio e il loop sparisce. */
html, body { overflow-anchor: none; }

/* (2) Su mobile i testi della topbar (indirizzo + numeri) la rendono troppo
   ingombrante e la mandano a capo. Nascondiamo solo le label di testo e teniamo
   le icone (indirizzo, telefono, cellulare, social) su una riga compatta. Il
   testo dei numeri resta negli aria-label dei link. */
@media (max-width: 768px) {
    .aym-topbar__inner { flex-wrap: nowrap; min-height: 36px; gap: .5rem; }
    .aym-topbar__contact { flex-wrap: nowrap; gap: .35rem; }
    .aym-topbar__label { display: none; }
    .aym-topbar__item {
        width: 34px; height: 34px;
        justify-content: center;
        gap: 0;
        border-radius: 6px;
    }
}