/* ============================================================
   ACCESSIBILITA' — WCAG 2.1 AA  (sovrascrive main.css)
   NON cambia il layout/grafica: solo correzioni di accessibilita'.
   ============================================================ */

/* 2.4.1 Bypass blocks — skip link */
.skip-link{position:absolute;left:8px;top:-60px;z-index:3000;background:#243b88;color:#fff !important;
  padding:10px 16px;border-radius:0 0 6px 6px;text-decoration:none !important;font-weight:bold;
  transition:top .15s ease}
.skip-link:focus{top:0}

/* 2.4.7 Focus visible — contorno visibile su tutti gli interattivi */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,.cmn-toggle-switch:focus-visible,
#contenuto:focus-visible{outline:3px solid #e2761e !important;outline-offset:2px !important}

/* 1.4.3 Contrasto + 1.4.1 uso del colore — link footer leggibili e sottolineati */
#footer a{color:#fff !important;text-decoration:underline !important;text-underline-offset:2px}
#footer #info{color:#fff !important}
#footer #info a{color:#fff !important}
#footer #credits,#footer #credits a{color:#fff !important;font-size:11px}
#footer #social a{text-decoration:none !important}

#contenuto{outline:none}

/* ===== AUDIT DELOITTE — correzioni ===== */

/* 9.2.4.3 Ordine del focus: le voci della navbar seguono l'ordine visivo
   (DOM sinistra->destra), non piu' float:right che invertiva la tabulazione */
#header #sections_button ul li{ float:none; display:inline-block; vertical-align:top;
  margin-left:0; margin-right:40px; }
#header #sections_button ul li:last-of-type{ margin-right:0; }

/* 9.2.1.1 Tastiera + usabilita': sottomenu visibili anche al focus da tastiera/hover
   (l'originale li mostrava solo via JS) */
#header #sections_button li.has-sub:hover .subsection_menu,
#header #sections_button li.has-sub:focus-within .subsection_menu{
  opacity:1 !important; top:40px !important; transform:none !important; }

/* 9.1.4.1 Uso del colore: i link dei sottomenu non si distinguono solo per colore */
#header .subsection_menu a{ text-decoration:underline; text-underline-offset:2px; }

/* 9.1.4.12 Spaziatura del testo: niente altezze fisse che taglierebbero il testo
   quando l'utente aumenta interlinea/spaziatura */
#footer{ height:auto; padding-bottom:20px; }

/* 9.1.3.4 Orientamento (Produzione/Distribuzione): nessuna mappa interattiva ->
   la lista marker scorre nel flusso normale, indipendente da viewport/orientamento.
   Neutralizza il position:absolute/width:320px/height:100% ereditato dall'originale. */
#content .section_content #marker_list{ position:static; width:auto; height:auto; left:auto; }
#content .section_content #marker_list .markers{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px 28px; }
#content .section_content #marker_list .marker_single{ margin:0; cursor:default; }
#content .section_content #marker_list .marker_name{ display:block; font-weight:bold; }

/* ===== FIX sottomenu navbar: dropdown accessibile (hover + focus tastiera) ===== */
#header #sections_button li.has-sub{ position:relative; }
#header #sections_button li.has-sub .subsection_menu{
  position:absolute; top:100%; left:0; opacity:0; transform:none;
  background:#1b2e6b; padding:6px 0; min-width:220px; z-index:200;
  box-shadow:0 8px 20px rgba(0,0,0,.28); pointer-events:none; }
#header #sections_button li.has-sub:hover .subsection_menu,
#header #sections_button li.has-sub:focus-within .subsection_menu{
  opacity:1 !important; top:100% !important; transform:none !important; pointer-events:auto; }
#header #sections_button li.has-sub .subsection_menu ul{ margin:0; padding:0; list-style:none; }
#header #sections_button li.has-sub .subsection_menu ul li{
  float:none; display:block; margin:0; padding:0; border-right:0; text-align:left; }
#header #sections_button li.has-sub .subsection_menu ul li a{
  display:block; padding:9px 18px; color:#fff; white-space:nowrap;
  text-decoration:underline; text-underline-offset:2px; }
#header #sections_button li.has-sub .subsection_menu ul li a:hover{ background:rgba(255,255,255,.14); }

/* ===== Header: tutte le voci sullo stesso livello, bianche; via la barra grigia ===== */
#header #products_button{ display:none !important; }
/* barra lingue: niente grigio, in tinta col navy, testo bianco */
#header #languages{ background:#1b2e6b !important; border:0 !important; }
#header #languages ul li{ color:#fff !important; }
#header #languages ul li a,#header #languages .current{ color:#fff !important; }
/* nav: una sola riga, allineata dopo il logo, link bianchi */
#header #sections_button{ float:none !important; border-bottom:0 !important; }
#header #sections_button > ul{ margin:0 0 0 200px !important; text-align:left; }
#header #sections_button > ul > li{ float:none !important; display:inline-block; vertical-align:middle; margin:0 34px 0 0 !important; }
#header #sections_button > ul > li:last-child{ margin-right:0 !important; }
#header #sections_button > ul > li > a{ color:#fff !important; }

/* ===== 9.1.4.4 (zoom 200%) + 9.1.4.10 (reflow 320px): header responsive ===== */
/* hamburger nascosto su desktop */
.nav-toggle{ display:none; }

@media screen and (max-width:980px){
  /* container fluido: niente scroll orizzontale a 320px */
  .margin_zeroauto{ width:auto !important; max-width:100% !important; }
  img{ max-width:100%; height:auto; }

  /* logo nel flusso, piccolo (non piu' absolute che si sovrappone) */
  #header #logo{ position:static !important; width:110px !important; height:auto !important;
    margin:8px 0 0 12px !important; }
  #header #navbar{ height:auto !important; }
  #header #navbar .margin_zeroauto{ display:flex; flex-wrap:wrap; align-items:center; }

  /* hamburger visibile */
  .nav-toggle{ display:inline-flex !important; align-items:center; gap:8px;
    background:transparent; border:0; color:#fff; font:inherit; font-weight:bold;
    font-size:18px; cursor:pointer; padding:12px 14px; margin-left:auto; }
  .nav-toggle .ham{ font-size:22px; line-height:1; }

  /* il menu si apre NEL FLUSSO (spinge giu' il contenuto, non lo copre) */
  #header #sections_button{ position:static !important; float:none !important; width:100% !important;
    display:none !important; background:#1b2e6b; border:0 !important; }
  #header #sections_button.open{ display:block !important; }
  #header #sections_button > ul{ margin:0 !important; }
  #header #sections_button > ul > li{ display:block !important; float:none !important;
    margin:0 !important; border-top:1px solid rgba(255,255,255,.15); }
  #header #sections_button > ul > li > a{ display:block; padding:13px 16px; }

  /* sottomenu: inline, sempre visibili e indentati quando il menu e' aperto */
  #header #sections_button .subsection_menu{ position:static !important; opacity:1 !important;
    transform:none !important; box-shadow:none !important; background:transparent !important;
    min-width:0 !important; padding:0 0 6px 0 !important; pointer-events:auto !important; }
  #header #sections_button .subsection_menu ul li a{ padding:9px 16px 9px 34px !important; }

  /* tagline piu' piccola */
  #header #payoff h1{ font-size:18px; }
}

/* ===== 9.1.4.1 Uso del colore: stato corrente/hover del menu indicati anche da forma ===== */
#header #sections_button > ul > li > a:hover,
#header #sections_button > ul > li > a:focus-visible{ text-decoration:underline; text-underline-offset:4px; }
#header #sections_button > ul > li > a[aria-current="page"]{ border-bottom:3px solid #e2761e; }
/* dropdown prodotti: due colonne per non essere troppo lungo */
#header #sections_button .prodotti_menu{ min-width:380px; }
#header #sections_button .prodotti_menu ul{ display:grid; grid-template-columns:1fr 1fr; }
@media screen and (max-width:980px){
  #header #sections_button .prodotti_menu{ min-width:0; }
  #header #sections_button .prodotti_menu ul{ display:block; }
}

/* ===== Mega-menu PRODOTTI: pannello bianco con miniature (come l'originale) ===== */
#header #sections_button .prodotti_menu{ background:#fff !important; min-width:580px !important; padding:16px 18px !important; }
#header #sections_button .prodotti_menu > ul{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:6px 8px; margin:0 !important; padding:0 !important; }
#header #sections_button .prodotti_menu li{ border:0 !important; }
#header #sections_button .prodotti_menu li a{ display:block !important; text-align:center; padding:8px 6px !important; color:#243b88 !important; text-decoration:none !important; white-space:normal !important; }
#header #sections_button .prodotti_menu li a img{ width:160px; height:80px; object-fit:contain; display:inline-block; }
#header #sections_button .prodotti_menu li a span{ display:block; margin-top:4px; font-size:14px; line-height:1.2; }
#header #sections_button .prodotti_menu li a:hover span,
#header #sections_button .prodotti_menu li a:focus-visible span{ text-decoration:underline; }
@media screen and (max-width:980px){
  #header #sections_button .prodotti_menu{ min-width:0 !important; background:#1b2e6b !important; padding:6px 0 !important; box-shadow:none !important; }
  #header #sections_button .prodotti_menu > ul{ grid-template-columns:1fr 1fr !important; }
  #header #sections_button .prodotti_menu li a{ color:#fff !important; }
  #header #sections_button .prodotti_menu li a img{ width:120px; height:60px; }
}

/* ===== 9.1.4.12 Spaziatura del testo: footer a flusso (no altezza fissa, niente overlap) ===== */
#footer{ height:auto !important; padding:24px 16px 22px !important; }
#footer .margin_zeroauto{ position:static !important; }
#footer #info{ border-top:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.25); padding:14px 0; }
#footer #social{ position:static !important; left:auto !important; bottom:auto !important;
  transform:none !important; text-align:center; margin:16px 0 10px; height:auto !important; }
#footer #social img{ height:30px !important; }
#footer #credits{ float:none !important; text-align:center; }

/* Video homepage: player nativo responsive (9.2.4.3: controlli accessibili, niente modale) */
.home-video{ width:100%; height:auto; max-width:100%; display:block; background:#000; border-radius:8px; }

/* ===== Banner + modale cookie (responsive + accessibile 9.1.4.4/9.1.4.10/2.4.3) ===== */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:3000; background:#1b2e6b; color:#fff; padding:14px 16px; box-shadow:0 -4px 18px rgba(0,0,0,.25); }
.cookie-banner[hidden]{ display:none; }
.cookie-inner{ max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; }
.cookie-inner p{ margin:0; max-width:680px; font-size:.95rem; }
.cookie-banner a{ color:#fff; text-decoration:underline; }
.cookie-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.cookie-btn{ background:#fff; color:#1b2e6b; border:1px solid #fff; border-radius:6px; padding:9px 16px; font:inherit; font-weight:bold; font-size:.9rem; cursor:pointer; }
.cookie-btn.secondary{ background:transparent; color:#fff; }
.cookie-btn.dark{ background:#1b2e6b; color:#fff; border-color:#1b2e6b; }
.cookie-btn.secondary.dark{ background:transparent; color:#1b2e6b; border-color:#1b2e6b; }
.cookie-btn:focus-visible{ outline:3px solid #e2761e; outline-offset:2px; }
.cookie-modal{ position:fixed; inset:0; z-index:3500; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.cookie-modal[hidden]{ display:none; }
.cookie-dialog{ width:min(92vw,600px); max-height:85vh; overflow:auto; background:#fff; color:#1c2433; border-radius:12px; padding:24px 22px; }
.cookie-dialog h2{ margin:0 0 14px; }
.cookie-opt{ border-top:1px solid #e1e4ee; padding:14px 0; }
.cookie-opt label{ display:flex; align-items:center; gap:8px; font-size:1rem; }
.cookie-opt p{ margin:6px 0 0 26px; color:#51596b; font-size:.92rem; }
.cookie-dialog-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px; }
.footer-linkbtn{ background:none; border:0; color:#fff; font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:0; }
@media(max-width:600px){ .cookie-btns{ width:100%; } .cookie-btn{ flex:1 1 auto; } }

/* ===== 9.1.4.5 Immagini di testo: banner con TESTO REALE (non immagine) ===== */
#image #banner.banner-text{ background:radial-gradient(ellipse at center,#ffffff 0%,#eaf4fb 45%,#cfe6f5 100%);
  min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#243b88; padding:24px 16px; }
.banner-text .banner-claim{ margin:0; display:flex; align-items:baseline; gap:12px; justify-content:center; }
.banner-text .banner-pre{ font-size:clamp(1rem,2.5vw,1.4rem); letter-spacing:.12em; font-weight:600; }
.banner-text .banner-year{ font-size:clamp(3rem,9vw,5.5rem); font-weight:300; line-height:1; }
.banner-text .banner-sub{ margin:10px 0 0; font-size:clamp(1rem,2.6vw,1.45rem); letter-spacing:.04em; font-weight:600; }

/* banner di testo SU FOTO: testo bianco su velatura scura (contrasto ok) */
#image #banner.banner-text.banner-photo{ background-size:cover; background-position:center; color:#fff;
  background-repeat:no-repeat; }

/* ===== PROFILO/DOVE = pulsanti che aprono il sottomenu (non link a pagina propria) ===== */
#header #sections_button > ul > li > .submenu-btn{ display:inline-block; background:none; border:0;
  font-family:inherit; font-size:.86rem; letter-spacing:.04em; font-weight:600; color:#fff !important;
  cursor:pointer; padding:0; vertical-align:baseline; }
#header #sections_button > ul > li > .submenu-btn:hover,
#header #sections_button > ul > li > .submenu-btn:focus-visible{ text-decoration:underline; text-underline-offset:4px; }
#header #sections_button > ul > li > .submenu-btn[aria-current="true"]{ border-bottom:3px solid #e2761e; }
#header #sections_button li.has-sub .submenu-btn[aria-expanded="true"] + .subsection_menu{
  opacity:1 !important; top:100% !important; transform:none !important; pointer-events:auto; }

/* voci menu principale: peso normale (niente grassetto) */
#header #sections_button > ul > li > a,
#header #sections_button > ul > li > .submenu-btn{ font-weight:normal !important; }

/* ===== Pagina /prodotti: card grandi e larghe, 6 per riga (11 -> 2 righe) ===== */
.prodotti-wrap{ max-width:1280px; margin:0 auto; padding:0 16px; }
.prodotti-intro{ font-size:1.1rem; color:#51596b; margin:0 0 26px; text-align:center; }
.prodotti-grid{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(6,1fr); gap:22px; }
.prodotti-grid li{ margin:0; padding:0; }
.prod-card{ display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid #e1e4ee; border-radius:14px; padding:22px 16px;
  text-decoration:none; color:#243b88; height:100%;
  transition:box-shadow .18s ease, transform .18s ease; }
.prod-card:hover, .prod-card:focus-visible{ box-shadow:0 12px 30px rgba(36,59,136,.16); transform:translateY(-4px); }
.prod-card__img{ display:flex; align-items:center; justify-content:center; height:130px; width:100%; }
.prod-card__img img{ max-width:100%; max-height:130px; object-fit:contain; }
.prod-card__name{ margin-top:14px; font-weight:bold; font-size:1.05rem; line-height:1.25; }
@media(max-width:1100px){ .prodotti-grid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:760px){ .prodotti-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }

/* ===== Ritocchi prodotti + footer ===== */
/* più spazio tra le righe dei prodotti (row-gap maggiore) */
.prodotti-grid{ gap:46px 24px !important; }
/* bordi card meno smussati */
.prod-card{ border-radius:6px !important; }

/* footer più compatto (non enorme) */

/* Footer: titolo "Gruppo Castelli" centrato (ripristino) */
#footer h2.title{ font-weight:normal; margin:0; padding:20px; text-align:center; font-size:24px; }

/* Pagine corte: contenuto alto cosi' il footer resta in basso (niente sticky flex) */
main#contenuto{ background:#fff; min-height:calc(100vh - 320px); }

/* ===== Prodotti: immagini più grandi + più spazio tra le righe ===== */
.prodotti-grid{ gap:70px 24px !important; }
.prod-card{ padding:26px 16px !important; }
.prod-card__img{ height:180px !important; }
.prod-card__img img{ max-height:180px !important; }
.prod-card__name{ font-size:1.1rem !important; }

/* ===== Banner: su DESKTOP restano le impostazioni ORIGINALI del sito
   (background-size:auto = dimensione reale, MAI zoom). Solo su MOBILE uso 'cover'
   perche' a dimensione reale si vedrebbe una fetta minuscola dell'immagine. ===== */
@media screen and (max-width:980px){
  #image #banner{ background-size:cover !important; background-position:center !important;
    background-attachment:scroll !important; background-repeat:no-repeat !important; }
}

/* ===== Mappa del sito: lista centrata ===== */
.sitemap{ list-style:none; max-width:560px; margin:26px auto; padding:0; text-align:center; }
.sitemap > li{ margin:0 0 20px; }
.sitemap > li > a{ font-weight:bold; font-size:1.15rem; color:#243b88; text-decoration:none; }
.sitemap > li > a:hover{ text-decoration:underline; }
.sitemap ul{ list-style:none; padding:0; margin:8px 0 0; }
.sitemap ul li{ margin:5px 0; }
.sitemap ul li a{ color:#243b88; }

/* sitemap: rimetto i puntini (blocco centrato, ma con i bullet a lato) */
.sitemap{ text-align:left !important; list-style:disc !important; padding-left:24px !important; }
.sitemap ul{ list-style:circle !important; padding-left:24px !important; margin-top:6px !important; }

/* ===== Storia: timeline ORIGINALE resa visibile (manca l'animazione wow.js) ===== */
#timeline .timeline_box{ opacity:1 !important; }
#timeline .timeline_icon{ opacity:1 !important; }

/* Storia: la linea verticale cresce allo scroll (ancora dentro #timeline) */
#timeline{ position:relative; }

/* 9.1.4.3: anni della timeline con colore ad alto contrasto (navy brand) */
#timeline .timeline_year{ color:#243b88 !important; }
#timeline .timeline_info_year{ color:#243b88 !important; }

/* loghi aziendali nella timeline storia */
#timeline .timeline-logo{ max-width:180px; height:auto; margin-top:8px; }

/* loghi timeline: un po' più grandi */
#timeline .timeline-logo{ max-width:280px !important; margin-top:12px !important; }

/* ===== Storia su MOBILE: solo caselle grigie + data piccola ===== */
@media screen and (max-width:980px){
  /* via ogni decorazione: linea rossa, pallini, PIN, frecce (elementi + pseudo) */
  #timeline #vertical_line{ display:none !important; }
  #timeline .timeline_icon{ display:none !important; }
  #timeline *::before, #timeline *::after{ display:none !important; }
  /* via la data GIGANTE (resta solo quella piccola nel box) */
  #timeline .timeline_box.timeline_year{ display:none !important; }
  /* box a piena larghezza mobile, senza scostamenti/animazioni */
  #timeline .single_timeline{ margin:0 0 20px !important; }
  #timeline .timeline_box{ width:100% !important; max-width:100% !important;
    transform:none !important; opacity:1 !important; box-sizing:border-box; }
  /* data PICCOLA dentro il box, navy */
  #timeline .timeline_info_year{ display:block !important; float:none !important;
    text-align:left !important; font-size:1.6rem !important; font-weight:bold !important;
    color:#243b88 !important; background:transparent !important; height:auto !important;
    margin:0 0 8px !important; padding:0 !important; }
  #timeline .timeline_info_text{ width:100% !important; float:none !important; }
  #timeline .timeline_info_text img{ width:auto !important; max-width:260px !important; }
}

/* home + alival: banner nitido come all'origine (niente upscaling) */
#image #banner.banner-fit{ background-size:auto 100% !important; background-position:center top !important; }

/* prodotti: card più orizzontali (meno alte) con immagini più grandi */
.prod-card{ padding:14px 14px 16px !important; }
.prod-card__img{ height:auto !important; width:100% !important; }
.prod-card__img img{ width:100% !important; height:auto !important; max-height:none !important; object-fit:contain; aspect-ratio:240/120 !important; }
.prod-card__name{ margin-top:10px !important; }

/* prodotti: 3 card per riga su desktop */
.prodotti-grid{ grid-template-columns:repeat(3,1fr) !important; gap:56px 32px !important; }
@media(max-width:760px){ .prodotti-grid{ grid-template-columns:repeat(2,1fr) !important; } }

/* scritta breve sul banner (stile date, navy) */
#image #banner.has-label{ display:flex; align-items:center; justify-content:center; }
#image #banner .banner-label{ color:#fff; font-weight:bold; text-align:center;
  font-size:clamp(1.5rem,4vw,2.6rem); text-shadow:0 2px 10px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5); padding:0 16px; }

/* scritta banner storia: stesso font delle date (Lora serif) + più grande */
#image #banner .banner-label{ font-family:'Lora', Georgia, serif !important;
  font-size:clamp(2.4rem,6vw,4.2rem) !important; line-height:1.1; }

/* bandierine: rendo cliccabile TUTTA l'area (bandiera dentro il link, non nel li) */
#header #languages ul li{ background-image:none !important; padding-top:0 !important; }
#header #languages ul li a{ display:inline-block; padding-top:22px !important;
  background-position:center top; background-repeat:no-repeat; }
#header #languages li#flag_it a{ background-image:url(/images/flags/it.png); }
#header #languages li#flag_uk a{ background-image:url(/images/flags/uk.png); }

/* scritta banner: STESSO font-stack delle date (segue le date, non le cambia) */
#image #banner .banner-label{ font-family:'Lora', serif !important; }

/* ===== Alival: pulsanti centrati nella parte bianca + un po' più grandi ===== */
#section_content_alival{ min-height:46vh; display:flex; align-items:center; justify-content:center; }
#section_content_alival > .margin_zeroauto{ display:flex; flex-direction:column; align-items:center;
  gap:22px; width:100%; max-width:1000px; margin:0 auto; }
#section_content_alival .buttons.flex{ width:100%; justify-content:center; }
#section_content_alival .button{ font-size:1.1rem !important; padding:15px 26px !important; }

/* Alival: parte bianca più corta (meno spazio morto sopra/sotto i pulsanti) */
main#contenuto.sec-alival{ min-height:calc(100vh - 520px) !important; }
#section_content_alival{ min-height:26vh; }

/* ===== Produzione/Distribuzione: elenco sedi + spazio mappa (#MAPPA) ===== */
.sedi-layout{ display:flex; gap:30px; align-items:stretch; }
.sedi-lista{ flex:0 0 340px; }
.sedi-titolo{ font-weight:bold; font-size:1.25rem; color:#243b88; margin:0 0 14px; }
.sedi-elenco{ list-style:none; margin:0; padding:0; }
/* lista non interattiva: nessun ruolo/tastiera richiesto (4.1.2, 2.1.1) */
.sedi-elenco .sede{ padding:10px 0; border-bottom:1px solid #e6e9f2; }
.sedi-elenco .sede:last-child{ border-bottom:0; }
/* 1.4.1 distinzione non solo per colore: nome in grassetto, luogo normale/piu piccolo */
.sedi-elenco .sede-nome{ display:block; font-weight:bold; color:#243b88; }
/* 1.4.3 contrasto: luogo scuro (>= 7:1 su bianco), non piu tenue/arancio */
.sedi-elenco .sede-luogo{ display:block; color:#3a3f52; font-size:.92rem; margin-top:2px; }
.sedi-mappa{ flex:1; min-width:0; display:flex; }
/* spazio dove c'era la mappa: bianco con tag #MAPPA (pre-deploy) */
.mappa-vuota{ flex:1; min-height:520px; background:#fff; border:1px dashed #dfe3ee; border-radius:14px;
  display:flex; align-items:center; justify-content:center; }
.mappa-tag{ font-weight:bold; font-size:1.4rem; letter-spacing:.05em; color:#9aa3b8; }
/* 1.4.10 reflow (320px) e 1.4.4 zoom 200%: colonna singola, nessun overflow */
@media(max-width:820px){ .sedi-layout{ flex-direction:column; } .sedi-lista{ flex:auto; } .mappa-vuota{ min-height:280px; } }

/* ===== Contatti: layout originale + spazio mappa lasciato bianco ===== */
#section_content_contatti .margin_zeroauto{ max-width:1100px; }
.contatti-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:32px; align-items:stretch; }
.contatti-card{ background:#fff; border:1px solid #e1e4ee; border-radius:14px; padding:26px 28px; }
.contatti-logo img{ height:70px; width:auto; }
.contatti-nome{ font-weight:bold; font-size:1.3rem; color:#243b88; margin:12px 0 18px; }
.contatti-card p{ margin:0 0 10px; }
.contatti-card .label{ font-weight:bold; color:#243b88; }
.contatti-card a{ color:#243b88; }
/* spazio dove c'era la mappa: bianco */
.contatti-mappa-vuota{ background:#fff; border:1px dashed #dfe3ee; border-radius:14px; min-height:340px; }
.contatti-lavora{ max-width:none; margin:0; text-align:center; }
.contatti-lavora .subtitle{ font-weight:bold; font-size:1.25rem; color:#243b88; }
.contatti-lavora .button{ margin-top:16px; }
@media(max-width:820px){ .contatti-grid{ grid-template-columns:1fr; } .contatti-mappa-vuota{ min-height:200px; } }

/* ===== Contatti: layout originale centrato + spazio mappa bianco + contrasto 1.4.3 ===== */
.contatti-mappa-vuota{ background:#fff !important; min-height:280px; }
#section_content_contatti{ padding:0 !important; }
#section_content_contatti .contatti-banda{ padding:38px 20px; text-align:center; }
#section_content_contatti .contatti-banda .inner{ max-width:900px; margin:0 auto; }
#section_content_contatti .contatti-brand,
#section_content_contatti .contatti-lavora{ background:#f4f5f8; }
#section_content_contatti .contatti-logo{ height:150px; width:auto; }
#section_content_contatti .contatti-nome{ font-weight:bold; font-size:1.35rem; color:#243b88; margin:12px 0 0; }
#section_content_contatti .contatti-recapiti p{ margin:6px 0; }
#section_content_contatti .label{ font-weight:bold; color:#243b88; }   /* 1.4.3: era grigio */
#section_content_contatti .contatti-recapiti a{ color:#243b88; }
#section_content_contatti .contatti-lavora .subtitle{ font-weight:bold; font-size:1.25rem; color:#243b88; }
#section_content_contatti .contatti-lavora a{ color:#243b88; }
#section_content_contatti .contatti-lavora .button{ margin-top:18px; }

/* Contatti: tag #MAPPA centrato nello spazio bianco (pre-deploy) */
.contatti-mappa-vuota{ display:flex !important; align-items:center; justify-content:center; }

/* =====================================================================
   FIX RESPONSIVE MOBILE (<=980px)
   Neutralizza l'header fisso dell'originale (che copriva il contenuto)
   e ogni elemento piu' largo del viewport (scroll orizzontale).
   Caricato per ultimo: vince sulle regole di main.css.
   ===================================================================== */
@media screen and (max-width:980px){

  /* 1) stop scroll orizzontale a livello di pagina */
  html,body{ overflow-x:hidden !important; max-width:100% !important; }
  *{ box-sizing:border-box; }

  /* 2) header e TUTTE le sue parti nel flusso, con altezze automatiche.
        L'originale usava position:fixed + altezze fisse (#header 180px,
        #payoff 30px) che causavano overlap tagline/titolo e spazi bianchi. */
  #header{ position:relative !important; height:auto !important; min-height:0 !important;
    width:100% !important; padding:0 !important; }
  #header #navbar{ position:static !important; height:auto !important; }
  #header #payoff{ position:static !important; height:auto !important;
    padding:12px 10px !important; }
  #header #payoff h1{ font-size:17px !important; line-height:1.3 !important; }

  /* 3) logo a cavallo delle due barre (come il vecchio sito): assoluto,
        in alto a sinistra, sopra la barra lingue e la barra MENU */
  #header #logo{ position:absolute !important; top:4px !important; left:12px !important;
    float:none !important; width:120px !important; height:auto !important;
    margin:0 !important; z-index:1001 !important; }
  #header #logo img{ width:100% !important; height:auto !important; }

  /* 4) niente offset dell'header fisso + niente overlap col titolo */
  #image, .image_submenu, #content,
  #content .section_content, #content #section_content_dove{ margin-top:0 !important; }
  #content .section_title{ margin-top:0 !important; }

  /* 5) barra lingue: voci in fila a destra, senza float che sfora
        (la bandiera resta sul link <a>, vedi regole sopra) */
  #header #languages{ position:static !important; height:auto !important; }
  #header #languages .margin_zeroauto{ width:100% !important; }
  #header #languages ul{ float:none !important; display:flex; justify-content:flex-end;
    gap:18px; margin:0 !important; padding:6px 14px !important; }
  #header #languages ul li{ float:none !important; margin:0 !important; }

  /* 6) nessun contenitore piu' largo dello schermo (fix testo tagliato ai lati) */
  #image, #banner, #content, .margin_zeroauto{
    width:100% !important; max-width:100% !important; left:auto !important; right:auto !important; }
  #content .section_content{ position:static !important; width:100% !important; max-width:100% !important;
    left:auto !important; right:auto !important; margin-left:0 !important; margin-right:0 !important;
    padding-left:16px !important; padding-right:16px !important; }
  #content .section_content .margin_zeroauto{ padding:0 !important; }
  img{ max-width:100% !important; height:auto; }

  /* 7) banner piu' basso su telefono */
  #image, #banner{ height:230px !important; }
}

/* =====================================================================
   MOBILE: normalizza i contenuti interni (niente larghezze fisse/float/
   absolute dell'originale che sforavano o si sovrapponevano)
   ===================================================================== */
@media screen and (max-width:980px){

  /* HOME: i box affiancati (460px fissi, float) -> impilati a piena larghezza */
  #content .section_content .row{ padding:16px 0 !important; }
  #content .section_content .box,
  #content .section_content .box_x2,
  #content .section_content .box_x3{ width:100% !important; float:none !important;
    margin:0 0 16px !important; box-sizing:border-box; }
  #content .section_content .box img{ max-width:100% !important; height:auto !important; }
  #content .home-video{ width:100% !important; height:auto !important; }

  /* PRODOTTO SINGOLO: le 3 immagini (bollino DOP, foto prodotto, logo) su 3 colonne */
  #content > .margin_zeroauto{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
    align-items:center !important; justify-content:center !important; gap:8px !important; text-align:center; }
  #content #logo_dop,
  #content #product_thumb,
  #content #product_logo{ position:static !important; float:none !important; margin:12px 0 !important;
    flex:1 1 0 !important; min-width:0 !important; max-width:33% !important; height:84px !important;
    background-size:contain !important; background-repeat:no-repeat !important;
    background-position:center !important; }
  #content > .margin_zeroauto > .clear{ display:none !important; }
  #content .section_title_product{ height:auto !important; padding:14px 0 !important; }
  #content #product_description{ width:100% !important; }

  /* ALIVAL: bottoni impilati con gutter (non toccano i bordi) */
  #section_content_alival .buttons.flex{ flex-direction:column !important; width:100% !important; gap:14px !important; }
  #section_content_alival .button{ width:100% !important; margin:0 !important; }

  /* PRODOTTI: griglia a 2 colonne che sta nello schermo */
  #section_content_prodotti .prodotti-wrap{ width:100% !important; max-width:100% !important; padding:0 !important; }
  #section_content_prodotti .prodotti-grid{ width:100% !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:12px !important;
    margin:0 !important; padding:0 !important; }
  #section_content_prodotti .prod-card{ min-width:0 !important; }
  #section_content_prodotti .prod-card img{ max-width:100% !important; height:auto !important; }
}

/* Banner desktop: nessun override -> valgono le impostazioni originali di main.css
   (#banner senza background-size => 'auto', a dimensione reale, niente zoom). */