/* ============================================================================
   Ecotempo — child theme di Hummingbird · custom.css  ·  v2 (istituzionale PA)
   ----------------------------------------------------------------------------
   Caricato dal FrontController (setMedia) come "theme-custom" a PRIORITA 1000
   = dopo il bundle theme.css del parent. Nessuna build: CSS puro, sovrascrive
   Hummingbird via cascata + @layer. Hummingbird resta intatto/aggiornabile.

   SVOLTA v2 (2026-06-15): identita istituzionale PA. Asse cromatico = BLU ITALIA
   (palette Bootstrap Italia / Designers Italia), font Titillium Web, fasce navy
   su header/footer. Il verde NON e piu brand: solo "disponibile/successo".
   Fonte di verita: ECOTEMPO-design-system.md v2. Logica B2B nel modulo ecotempob2b.

   Valori palette verificati dal sorgente italia/bootstrap-italia:
     primary (blu Italia) hsb(210,100,80) = #0066CC
     primary-a10 = #003366 · navy = #0A2748 · primary-a11 = #00264C
     green-accessible #008055 · red-accessible #CC334D · orange-accessible #995C00
   ============================================================================ */

/* --- 1. Font istituzionale PA: Titillium Web (+ Lora serif opzionale) -------- */
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&family=Lora:wght@500;600&display=swap");

/* ============================================================================
   2. TOKEN BRAND  (mirror di ECOTEMPO-design-system.md v2 §2)
   ============================================================================ */
:root {
  /* Brand istituzionale (blu Italia) */
  --colore-blu: #0066CC;            /* primario: CTA, link, accenti, brand */
  --colore-blu-profondo: #003366;   /* hover bottoni, titoli forti (primary-a10) */
  --colore-navy: #0A2748;           /* fasce scure: header-bar e footer */
  --colore-navy-scuro: #00264C;     /* bordo/ombra su fondi navy (primary-a11) */
  --colore-arancio: #F97316;        /* offerte, badge, il «+» del payoff (~10%) */

  /* Semantici ecommerce (verde = stato, non brand) */
  --colore-verde: #008055;          /* disponibile/successo (green-accessible PA) */
  --colore-verde-nebbia: #E5F3EE;   /* sfondo badge "disponibile" */
  --colore-errore: #CC334D;         /* errori form / esaurito (red-accessible) */
  --colore-errore-velo: #FBEAED;    /* sfondo badge "esaurito" */
  --colore-warning: #995C00;        /* avvisi testo (orange-accessible) */

  /* Neutri freddi/slate (stile PA) */
  --colore-inchiostro: #1C2A39;     /* testo principale */
  --colore-grigio: #5D7083;         /* testo secondario, captions (slate-44) */
  --colore-grigio-testo: #30475F;   /* secondario forte su bianco (slate-28) */
  --colore-bordo: #DAE0E6;          /* bordi, divisori */
  --colore-ghiaccio: #F2F6FA;       /* fondo pagina */
  --colore-bianco: #FFFFFF;         /* card, superfici */
  --colore-azzurro-velo: #EBF2FA;   /* sfondi sezione, hover righe, badge soft blu */

  /* Tint promo */
  --colore-arancio-velo: #FEEFE2;   /* badge promo, alert offerte */
  --colore-arancio-testo: #9A3E06;  /* testo su --colore-arancio-velo */

  /* Accento oro istituzionale — per accendere su fondi blu/navy (es. «+» del payoff,
     dove l'arancio risultava troppo aggressivo). Riusabile su evidenze/badge. */
  --colore-oro: #F9CB16;

  --ombra-card: 0 1px 3px rgba(28, 42, 57, .08);

  /* --- Bridge verso Bootstrap/Hummingbird (BS 5.3.3) -------------------- */
  --bs-primary: var(--colore-blu);
  --bs-primary-rgb: 0, 102, 204;
  --bs-link-color: var(--colore-blu);
  --bs-link-color-rgb: 0, 102, 204;
  --bs-link-hover-color: var(--colore-blu-profondo);
  --bs-body-color: var(--colore-inchiostro);
  --bs-body-color-rgb: 28, 42, 57;
  --bs-body-bg: var(--colore-ghiaccio);
  --bs-border-color: var(--colore-bordo);
  --bs-border-radius: .25rem;       /* 4px, sobrieta PA */
  --bs-danger: var(--colore-errore);
  --bs-success: var(--colore-verde);

  --bs-font-sans-serif: "Titillium Web", Geneva, Tahoma, system-ui, -apple-system, sans-serif;
}

/* ============================================================================
   3. LAYER BASE — tipografia, bottoni, card, form, badge, focus (60/30/10)
   ============================================================================ */
@layer ecotempo.base {

  /* --- Tipografia (DS v2 §3) --------------------------------------------- */
  body {
    font-family: var(--bs-font-sans-serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--colore-inchiostro);
    background-color: var(--colore-ghiaccio);
  }

  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Titillium Web", system-ui, sans-serif;
    color: var(--colore-blu-profondo);
    font-weight: 600;
    line-height: 1.25;
  }
  h1, .h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 700; } /* 32->44px */
  h2, .h2 { font-size: 1.75rem; }   /* 28px */
  h3, .h3 { font-size: 1.25rem; }   /* 20px */

  /* Micro-label / eyebrow (es. "CANALE PA", "OFFERTA") */
  .eyebrow, .text-eyebrow {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--colore-blu);
  }

  /* Link: blu, hover blu-profondo, underline su hover */
  a { color: var(--colore-blu); text-decoration: none; }
  a:hover { color: var(--colore-blu-profondo); text-decoration: underline; }

  /* --- Bottoni (DS v2 §4) ------------------------------------------------ */
  /* Primario: blu Italia + testo bianco (5.57:1 WCAG AA), hover blu-profondo */
  .btn-primary {
    --bs-btn-bg: var(--colore-blu);
    --bs-btn-border-color: var(--colore-blu);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--colore-blu-profondo);
    --bs-btn-hover-border-color: var(--colore-blu-profondo);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--colore-blu-profondo);
    --bs-btn-active-border-color: var(--colore-blu-profondo);
    --bs-btn-disabled-bg: var(--colore-blu);
    --bs-btn-disabled-border-color: var(--colore-blu);
    border-radius: .25rem;
    padding: 12px 24px;
    font-weight: 600;
  }

  /* Secondario: outline blu, hover sfondo azzurro-velo */
  .btn-secondary, .btn-outline-primary {
    --bs-btn-color: var(--colore-blu);
    --bs-btn-border-color: var(--colore-blu);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--colore-azzurro-velo);
    --bs-btn-hover-border-color: var(--colore-blu);
    --bs-btn-hover-color: var(--colore-blu-profondo);
    --bs-btn-active-bg: var(--colore-azzurro-velo);
    --bs-btn-active-color: var(--colore-blu-profondo);
    border-radius: .25rem;
    padding: 12px 24px;
    font-weight: 600;
  }

  /* Promo (solo offerte): arancio + testo bianco. Max 1 per viewport. */
  .btn-promo {
    --bs-btn-bg: var(--colore-arancio);
    --bs-btn-border-color: var(--colore-arancio);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #e8650a;
    --bs-btn-hover-border-color: #e8650a;
    --bs-btn-hover-color: #fff;
    border-radius: .25rem;
    padding: 12px 24px;
    font-weight: 600;
  }

  .btn { min-height: 44px; }   /* tap target >= 44px (DS §6) */

  /* --- Card prodotto (DS v2 §4) ------------------------------------------ */
  .card,
  .product-miniature .thumbnail-container,
  .js-product-miniature {
    background: var(--colore-bianco);
    border: 1px solid var(--colore-bordo);
    border-radius: .5rem;            /* 8px */
    box-shadow: var(--ombra-card);
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .product-miniature .thumbnail-container:hover,
  .js-product-miniature:hover,
  .card:hover { border-color: var(--colore-blu); }

  /* Prezzi: peso 700, inchiostro; barrato arancio piu piccolo */
  .price, .product-price { font-weight: 700; color: var(--colore-inchiostro); }
  .regular-price,
  .product-discount .regular-price {
    color: var(--colore-arancio);
    text-decoration: line-through;
    font-size: .875em;
    font-weight: 600;
  }

  /* --- Form e input (DS v2 §4) ------------------------------------------- */
  .form-control, .form-select, .input-group .form-control {
    min-height: 44px;
    border-radius: .25rem;
    border: 1px solid var(--colore-bordo);
    color: var(--colore-inchiostro);
    background-color: #fff;            /* input bianchi (indicazioni css.txt di Ale) */
  }
  .form-control:focus, .form-select:focus {
    border-color: var(--colore-blu);
    box-shadow: 0 0 0 .2rem var(--colore-azzurro-velo);
  }
  .form-control.is-invalid, .is-invalid .form-control { border-color: var(--colore-errore); }
  .invalid-feedback, .form-control-comment.error, .help-block li { color: var(--colore-errore); }

  /* --- Badge e stati (DS v2 §4) ------------------------------------------ */
  .badge { border-radius: 999px; font-weight: 600; }

  /* Disponibile: verde su verde-nebbia */
  .badge-disponibile,
  .product-availability .available,
  .badge-success {
    color: var(--colore-verde);
    background: var(--colore-verde-nebbia);
  }
  /* Offerta/Promo: arancio-scuro su arancio-velo */
  .badge-promo, .badge-offerta,
  .product-flag.discount, .product-flag.on-sale {
    color: var(--colore-arancio-testo);
    background: var(--colore-arancio-velo);
  }
  /* Esaurito: rosso su rosso-velo */
  .badge-esaurito,
  .product-flag.out_of_stock,
  .badge-danger {
    color: var(--colore-errore);
    background: var(--colore-errore-velo);
  }
  /* Canale PA / MEPA: blu su azzurro-velo (badge istituzionale) */
  .badge-pa, .badge-mepa {
    color: var(--colore-blu);
    background: var(--colore-azzurro-velo);
  }

  /* --- Sezioni / superfici (60/30/10) ------------------------------------ */
  .page-content, .card-block { background: var(--colore-bianco); }
  .section-soft { background: var(--colore-azzurro-velo); }

  /* ======================================================================
     HEADER ISTITUZIONALE — struttura nuova (override header.tpl nel child)
     RIGA 1 navy: logo grande bianco | ricerca prominente | azioni utente | contatti
     RIGA 2 chiaro: menu (displayNavFullWidth) + telefono/orari
     STRISCIA TRUST PA sotto.  Decisione condivisa con Ale 2026-06-15.
     ====================================================================== */

  /* --- TOP-BAR istituzionale (blu Italia): payoff | spedizione | contatti --- */
  .ecotempo-topbar {
    background-color: var(--colore-blu);     /* blu Italia, stacca sul navy sotto */
    color: #fff;
    font-size: .82rem;
  }
  .ecotempo-topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 36px; padding-top: .25rem; padding-bottom: .25rem;
  }
  .ecotempo-topbar .material-icons { font-size: 1rem; vertical-align: -3px; margin-right: .15rem; }
  .ecotempo-topbar strong { font-weight: 700; }
  /* payoff a sinistra: «+» arancio per accendere, IMPRESA bianco pieno, claim azzurro chiaro.
     I colori del base layer (.payoff .impresa = inchiostro) qui perderebbero leggibilita sul
     blu: li ridefiniamo con piu specificita (selettore doppio classe). */
  .ecotempo-topbar__payoff { white-space: nowrap; font-weight: 600; }
  .ecotempo-topbar .ecotempo-topbar__payoff .plus {
    color: var(--colore-oro);     /* oro: piu visibile e meno aggressivo dell'arancio sul blu (nota Ale) */
    font-weight: 700;
    font-size: 20px;
  }
  .ecotempo-topbar .ecotempo-topbar__payoff .impresa { color: #fff; letter-spacing: .04em; font-weight: 700; }
  .ecotempo-topbar .ecotempo-topbar__payoff .claim { color: #DCEAF8; font-weight: 400; margin-left: .25rem; }
  .ecotempo-topbar__ship { text-align: center; }
  .ecotempo-topbar__contact { white-space: nowrap; text-align: right; }
  /* sotto i 992px la top-bar si comprime: teniamo solo la spedizione (centro) */
  @media (max-width: 991.98px) {
    .ecotempo-topbar__payoff,
    .ecotempo-topbar__contact { display: none; }
    .ecotempo-topbar__inner { justify-content: center; }
    .ecotempo-topbar__ship {
      font-size: .75rem; line-height: 1.2; text-align: center;
      white-space: normal; padding: 0 .5rem;
    }
  }

  /* --- RIGA 1: barra navy --- */
  .ecotempo-hdr-main {
    background-color: var(--colore-navy);
    border-bottom: 3px solid var(--colore-blu);   /* filo blu Italia */
    padding: .65rem 0;
  }
  /* Riga navy a 3 colonne: [logo] [RICERCA centrata] [azioni].
     Le colonne laterali (logo, azioni) hanno la STESSA larghezza (1fr) → la colonna
     centrale (ricerca) resta centrata sulla PAGINA a prescindere dai contenuti.
     (Il flex precedente la spostava a destra perché logo e azioni avevano larghezze diverse.) */
  .ecotempo-hdr-main__row {
    display: grid;
    grid-template-columns: 1fr minmax(0, 560px) 1fr;  /* lati uguali, centro = barra fino a 560px */
    align-items: center;
    gap: 1.5rem;
  }
  .ecotempo-hdr-main__logo { justify-self: start; }
  .ecotempo-hdr-main__logo img {
    height: 40px; width: auto;          /* dimensione preferita da Ale */
  }
  /* colonna centrale: la barra di ricerca */
  .ecotempo-hdr-main__tools {
    display: contents;                  /* il wrapper non crea colonna: i figli usano la griglia */
  }
  .ecotempo-hdr-main__tools .ecotempo-search {
    grid-column: 2;                     /* colonna centrale */
    justify-self: stretch;              /* riempie la colonna centrale (fino a 560px) */
    width: 100%; max-width: 560px;
  }
  /* azioni utente: colonna destra, ancorate a destra */
  .ecotempo-hdr-main__actions {
    grid-column: 3;
    justify-self: end;
  }
  .ecotempo-hdr-main__tools .ps-search-widget input[type="text"],
  .ecotempo-hdr-main__tools input[type="text"] {
    min-height: 44px; width: 100%;
    background: #fff; border-radius: .25rem;
  }
  /* Azioni utente (Accedi / Carrello) in bianco sul navy */
  .ecotempo-hdr-main__tools .header-block,
  .ecotempo-hdr-main__tools .ps-customersignin,
  .ecotempo-hdr-main__tools .ps-shoppingcart { color: #fff; }
  .ecotempo-hdr-main__tools a,
  .ecotempo-hdr-main__tools .header-block__action-btn,
  .ecotempo-hdr-main__tools .material-icons { color: #fff; }
  .ecotempo-hdr-main__tools a:hover { color: #D6E4F5; text-decoration: none; }
  /* Badge contatore carrello: oro (nota Ale #f9cb15 ~= --colore-oro). Testo scuro per
     contrasto sull'oro (su giallo il bianco non passa WCAG). */
  .ecotempo-hdr-main__tools .header-block__badge { background: var(--colore-oro); color: var(--colore-inchiostro); }
  .ecotempo-hdr-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: #fff;
    order: 2;                            /* contatti tra le azioni, a destra */
  }
  /* Gruppo azioni Accedi/Carrello (displayNav2) — a destra */
  .ecotempo-hdr-main__actions {
    order: 3;
    display: flex; align-items: center; gap: .75rem;
  }
  .ecotempo-hdr-main__actions a,
  .ecotempo-hdr-main__actions .material-icons,
  .ecotempo-hdr-main__actions .header-block { color: #fff; }
  /* Language/currency selectors in displayNav2: li nascondiamo nell'header navy
     (sono gia in footer); B2B monolingua per ora. Riattivabili se servono. */
  .ecotempo-hdr-main__actions .ps-languageselector,
  .ecotempo-hdr-main__actions .ps-currencyselector { display: none; }

  /* Azioni mobile (account+carrello) nella riga navy */
  .ecotempo-hdr-main__mobile { gap: .25rem; align-items: center; }
  .ecotempo-hdr-cartcount {
    position: absolute; top: 2px; right: 0;
    background: var(--colore-oro); color: var(--colore-inchiostro);
    font-size: .6rem; font-weight: 700; line-height: 1;
    min-width: 1rem; height: 1rem; padding: 0 .2rem;
    border-radius: 50rem; display: flex; align-items: center; justify-content: center;
  }

  /* ===== RESPONSIVE header (<992px) ===== */
  @media (max-width: 991.98px) {
    .ecotempo-hdr-main { padding: .5rem 0; }
    /* Su mobile TORNIAMO a flex (il desktop usa grid 3 colonne): RIGA 1 = logo + account +
       carrello; RIGA 2 = ricerca full-width. (Ale 2026-06-15: la barra inline schiacciava il logo.) */
    .ecotempo-hdr-main__row {
      display: flex;                    /* annulla il grid desktop */
      grid-template-columns: none;
      gap: .35rem .5rem; flex-wrap: wrap; align-items: center;
    }
    .ecotempo-hdr-main__logo { flex: 0 0 auto; justify-self: auto; }
    .ecotempo-hdr-main__logo img { height: 32px; }

    /* __tools torna un flex item normale (non più display:contents del desktop) */
    .ecotempo-hdr-main__tools {
      display: flex;                    /* annulla display:contents del desktop */
      flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end;
      gap: .35rem; min-width: 0;
    }
    /* la barra di ricerca: riga propria, larghezza piena, dopo logo+azioni */
    .ecotempo-hdr-main__tools .ecotempo-search {
      grid-column: auto;                /* annulla la colonna grid del desktop */
      order: 5; flex: 1 0 100%; max-width: 100%; margin: .15rem 0 0;
    }
    /* azioni mobile (account+carrello) in alto a destra, accanto al logo */
    .ecotempo-hdr-main__mobile { order: 1; flex: 0 0 auto; }
    .ecotempo-hdr-icon { width: 40px; }
    /* contatti-icona desktop + azioni desktop nascosti su mobile */
    .ecotempo-hdr-main__actions,
    .ecotempo-hdr-main .ecotempo-hdr-icon.d-none { display: none; }
  }

  /* --- RIGA 2: menu su fondo chiaro --- */
  .ecotempo-hdr-menu {
    background-color: var(--colore-bianco);
    border-bottom: 1px solid var(--colore-bordo);
  }
  /* Riga menu = SOLO menu, allineato a sinistra (il telefono e migrato in top-bar) */
  .ecotempo-hdr-menu__inner {
    display: flex; align-items: center; justify-content: flex-start;
    min-height: 48px;
  }
  /* Mini-logo (cerchio) -> home: nascosto di default, appare quando il menu e stuck */
  .ecotempo-hdr-menu__home {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-right: .85rem; flex: 0 0 auto;
    color: var(--colore-blu); font-size: 1.4rem; line-height: 1;
  }
  .ecotempo-hdr-menu__home img { height: 28px; width: auto; }
  .ecotempo-hdr-menu__home:hover { text-decoration: none; }

  /* ======================================================================
     STICKY MENU — solo PAGINE INTERNE (body NON .page-index). Decisione Ale.
     Scrollando, le fasce sopra scorrono via e resta incollata SOLO la riga menu;
     quando "stuck" compare il cerchio-logo come prima voce (-> home).
     position:sticky = nessun JS per lo stick; una classe .is-stuck (JS minimale)
     attiva solo il mini-logo + ombra.
     ====================================================================== */
  .ecotempo-hdr-menu { position: relative; z-index: 1020; }

  /* Hummingbird rende sticky l'INTERO <header> (.header{position:sticky;top:0}).
     NON lo combattiamo: sfruttiamo quel comportamento. Sulle PAGINE INTERNE, quando
     si scrolla (classe .is-stuck aggiunta da custom.js sul <header>), COLLASSIamo le
     fasce superiori (top-bar, riga navy, trust) a 0 → resta visibile solo la riga menu,
     che mostra il cerchio-logo→home come prima voce. Transizione morbida.
     In home (page-index) niente collasso: l'header resta intero. */
  body:not(.page-index) #header .ecotempo-topbar,
  body:not(.page-index) #header .ecotempo-hdr-main,
  body:not(.page-index) #header .ecotempo-trustbar {
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease, padding .25s ease, border-width .25s ease;
    max-height: 200px;
  }
  body:not(.page-index) #header.is-stuck .ecotempo-topbar,
  body:not(.page-index) #header.is-stuck .ecotempo-hdr-main,
  body:not(.page-index) #header.is-stuck .ecotempo-trustbar {
    max-height: 0;
    opacity: 0;
    padding-top: 0; padding-bottom: 0;
    border-width: 0;
  }
  body:not(.page-index) #header.is-stuck .ecotempo-hdr-menu {
    box-shadow: 0 2px 8px rgba(28,42,57,.12);
    border-bottom-color: var(--colore-blu);
  }
  body:not(.page-index) #header.is-stuck .ecotempo-hdr-menu__home {
    display: inline-flex;
  }

  /* --- STRISCIA TRUST PA --- */
  .ecotempo-trustbar {
    background-color: var(--colore-azzurro-velo);
    border-bottom: 1px solid var(--colore-bordo);
    font-size: .85rem;
  }
  .ecotempo-trustbar__inner {
    display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
    justify-content: center; align-items: center;
    padding: .5rem 1rem;
  }
  .ecotempo-trustbar__item {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--colore-grigio-testo); font-weight: 600;
    text-decoration: none;
  }
  .ecotempo-trustbar__item .material-icons { font-size: 1.05rem; }
  .ecotempo-trustbar__item em { font-style: normal; font-weight: 400; color: var(--colore-grigio); }
  /* differenziazione cromatica leggera: imprese = blu, PA = verde (icona) */
  .ecotempo-trustbar__item--biz .material-icons { color: var(--colore-blu); }
  .ecotempo-trustbar__item--pa .material-icons { color: var(--colore-verde); }
  /* il badge "riordino veloce" è un link: hover sottile */
  a.ecotempo-trustbar__item:hover { color: var(--colore-blu); text-decoration: underline; }

  /* --- Footer istituzionale (navy a colonne) ----------------------------- */
  footer#footer,
  .footer-container {
    background-color: var(--colore-navy);
    color: #fff;
  }
  footer#footer a,
  .footer-container a { color: #D6E4F5; }
  footer#footer a:hover,
  .footer-container a:hover { color: #fff; text-decoration: underline; }
  footer#footer h3,
  footer#footer .h3,
  .footer-container .h3 { color: #fff; }

  /* --- Newsletter (ps_emailsubscription su displayFooterBefore) ---------- */
  /* Il blocco sta su fondo CHIARO (.bg-body-tertiary, sopra il footer navy):
     il titolo (un <p class="h3">) ereditava un colore quasi bianco → invisibile.
     Lo riportiamo a inchiostro. Selettore reale verificato dall'HTML servito. */
  .ps-emailsubscription .h3,
  .footer__before .h3,
  .block_newsletter h4,
  .email_subscription h4 {
    color: var(--colore-inchiostro);
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
  }
  .block_newsletter input[type="submit"],
  .ps-emailsubscription .btn {
    background: var(--colore-blu);
    border-color: var(--colore-blu);
    color: #fff;
  }

  /* ======================================================================
     HERO HOME — payoff istituzionale (nel ps_customtext, sostituisce lo slider demo)
     ====================================================================== */
  .ecotempo-hero {
    background:
      linear-gradient(180deg, rgba(10,39,72,.92) 0%, rgba(0,38,76,.96) 100%),
      var(--colore-navy);
    color: #fff;
    border-bottom: 3px solid var(--colore-blu);
    padding: clamp(2.5rem, 2rem + 4vw, 5rem) 1rem;
    margin-bottom: 1.5rem;
  }
  .ecotempo-hero__inner { max-width: 980px; margin: 0 auto; text-align: center; }
  .ecotempo-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: .8rem;
    font-weight: 600;
    color: #9FC2E8;
    margin: 0 0 1rem;
  }
  .ecotempo-hero__payoff {
    font-family: "Titillium Web", sans-serif;
    font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
    line-height: 1.1;
    margin: 0 0 1rem;
  }
  .ecotempo-hero__payoff .plus--blu { color: #4DA3FF; }   /* «+» blu chiaro (leggibile su navy) */
  .ecotempo-hero__payoff .impresa { color: #fff; }
  .ecotempo-hero__payoff .claim { color: #CFE0F2; font-weight: 400; display:block; font-size:.62em; margin-top:.25rem; }
  .ecotempo-hero__sub {
    max-width: 680px; margin: 0 auto 1.75rem;
    font-size: 1.05rem; line-height: 1.6; color: #E4EEF8;
  }
  .ecotempo-hero__cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
  /* Sul navy il secondario outline-blu sparirebbe: lo rendiamo chiaro */
  .ecotempo-hero__cta .btn-secondary {
    --bs-btn-color: #fff; --bs-btn-border-color: #fff; --bs-btn-bg: transparent;
    --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#fff;
    color:#fff; border-color:#fff;
  }

  /* --- Payoff istituzionale (DS §1): «+» arancio o blu ------------------- */
  .payoff { font-family: "Titillium Web", sans-serif; }
  .payoff .plus { color: var(--colore-arancio); font-weight: 700; }
  .payoff .plus--blu { color: var(--colore-blu); }
  .payoff .impresa { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--colore-inchiostro); }
  .payoff .claim { color: var(--colore-grigio); font-weight: 400; }
}

/* ============================================================================
   4. FOCUS & ACCESSIBILITA (DS v2 §6) — fuori dal layer per vincere sempre
   ============================================================================ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--colore-blu);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Sul footer navy il ring blu sparirebbe: ring chiaro */
footer#footer a:focus-visible,
.footer-container a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ============================================================================
   5. HERO — override fuori dal @layer (vince sempre sul bundle del parent)
   Le regole dentro @layer ecotempo.base perdevano contro regole non-layered di
   Hummingbird (IMPRESA e il testo del bottone primario risultavano invisibili
   sul navy). Qui forziamo i colori del testo dell'hero con specificita alta,
   senza @layer e senza !important.
   ============================================================================ */
.ecotempo-hero .ecotempo-hero__payoff .impresa { color: #FFFFFF; }
.ecotempo-hero .ecotempo-hero__payoff .plus,
.ecotempo-hero .ecotempo-hero__payoff .plus--blu { color: var(--colore-oro); }  /* «+» oro, coerente con top-bar */
.ecotempo-hero .ecotempo-hero__payoff .claim { color: #CFE0F2; }

/* CTA primaria dentro l'hero: testo bianco garantito su fondo blu */
.ecotempo-hero .ecotempo-hero__cta .btn-primary {
  background-color: var(--colore-blu);
  border-color: var(--colore-blu);
  color: #FFFFFF;
}
.ecotempo-hero .ecotempo-hero__cta .btn-primary:hover {
  background-color: #0A57AD;
  border-color: #0A57AD;
  color: #FFFFFF;
}
.ecotempo-hero .ecotempo-hero__cta .btn-secondary {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background-color: transparent;
}
.ecotempo-hero .ecotempo-hero__cta .btn-secondary:hover {
  background-color: rgba(255,255,255,.12);
  color: #FFFFFF;
  border-color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}