/* Capece Workwear - stile principale del tema (adattato dalla bozza HTML) */

  :root{
    --ink:#141414;
    --ink-soft:#4A4A4A;
    --navy:#0B0B0C;
    --navy-dark:#000000;
    --safety:#FECF00;
    --safety-dark:#E0B700;
    --paper:#FAF9F5;
    --paper-alt:#F1EFE6;
    --line:#E2DECF;
    --white:#FFFFFF;
    --available:#2E7D4F;
    --available-bg:#E6F2EA;
    --request:#4B5563;
    --request-bg:#EEF1F3;
    --radius:2px;
    --maxw:1180px;
  }
  *{box-sizing:border-box;}

  /* REGOLA IMPORTANTE — non rimuovere.
     Gli elementi che il sito nasconde e mostra (barra del confronto,
     tendine dei filtri, finestre a comparsa, avvisi) usano l'attributo
     "hidden". Il browser lo traduce in "display:none", ma quella regola
     è debolissima: basta un "display:flex" scritto su una classe per
     annullarla, e l'elemento resta visibile per sempre qualunque cosa
     faccia il codice. È già successo due volte in questo progetto.
     Questa riga chiude la questione una volta per tutte. */
  [hidden]{display:none !important;}

  /* overflow-x:clip invece di hidden: 'hidden' rende html/body il
     contenitore di scorrimento e annulla la barra in alto fissa
     (position:sticky). 'clip' taglia lo straripamento laterale allo
     stesso modo, ma senza creare un contenitore di scorrimento. */
  html{scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.55;
    -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; max-width:100vw;
  }
  h1,h2,h3,h4{ font-family:'Barlow Semi Condensed',system-ui,sans-serif; font-weight:700; letter-spacing:.2px; margin:0 0 .5em; color:var(--navy-dark); text-transform:uppercase;}
  h1{font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05;}
  h2{font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.1;}
  h3{font-size:1.15rem;}
  p{margin:0 0 1em; color:var(--ink-soft);}
  a{color:inherit; text-decoration:none;}
  ul{margin:0; padding:0; list-style:none;}
  .skip-link{position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:.6em 1em; z-index:200;}
  .skip-link:focus{left:0;}
  :focus-visible{outline:3px solid var(--safety); outline-offset:2px;}

  /* ---- layout helpers ---- */
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
  .eyebrow{font-family:'Barlow Semi Condensed'; text-transform:uppercase; letter-spacing:1.5px; color:var(--ink); font-weight:700; font-size:.8rem; margin-bottom:.5em; display:inline-flex; align-items:center; gap:.5em;}
  .eyebrow::before{content:""; display:inline-block; width:14px; height:4px; background:var(--safety);}
  .btn{display:inline-flex; align-items:center; gap:.5em; padding:.75em 1.4em; font-family:'Barlow Semi Condensed'; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.85rem; border-radius:var(--radius); border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease;}
  .btn-primary{background:var(--safety); color:var(--navy-dark);}
  .btn-primary:hover{background:var(--safety-dark); transform:translateY(-1px);}
  .btn-ghost{border-color:var(--navy); color:var(--navy);}
  .btn-ghost:hover{background:var(--navy); color:#fff;}
  .btn-outline-light{border-color:#fff; color:#fff;}
  .btn-outline-light:hover{background:#fff; color:var(--navy-dark);}

  /* ---- header ---- */
  .site-header{position:sticky; top:0; z-index:100; background:var(--navy-dark); border-bottom:1px solid rgba(255,255,255,.08);}
  .header-inner{max-width:1400px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative;}
  .logo{display:flex; flex-direction:column; line-height:1;}
  .logo img, .logo .custom-logo{height:68px; width:auto; display:block;}
  .logo-mark{font-family:'Barlow Semi Condensed'; font-weight:800; font-size:1.6rem; letter-spacing:1px; color:#fff;}
  .logo-sub{font-size:.65rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--safety); font-weight:600;}
  .main-nav{display:flex; align-items:center; gap:24px; flex:1; margin-left:12px;}
  /* icone social nel menu: su computer in linea dopo l'ultima voce,
     su telefono in fondo al pannello che si apre (vedi più sotto) */
  .nav-canali{display:flex; align-items:center; gap:10px;}
  /* niente cambio colore al passaggio del mouse: il giallo pieno
     stonava accanto alle voci di menu */
  /* solo l'icona, senza cerchio di sfondo e senza effetti al
     passaggio del mouse */
  .nav-canali a{color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .nav-canali svg{width:22px; height:22px;}
  /* Bianco imposto direttamente sulle forme: l'icona Facebook è
     disegnata "piena" e quella Instagram "a contorno", quindi vanno
     colorate in due modi diversi. Prima ereditavano il colore dal
     link e il Facebook risultava invisibile sul fondo scuro. */
  .nav-canali svg path{fill:#fff;}
  .nav-canali svg rect, .nav-canali svg circle{stroke:#fff;}
  .main-nav ul{display:flex; align-items:center; gap:24px;}
  .main-nav > ul{margin:0;}
  .main-nav a{font-family:'Barlow Semi Condensed'; font-weight:600; text-transform:uppercase; font-size:.88rem; letter-spacing:.4px; color:#fff; padding:8px 2px; border-bottom:2px solid transparent; white-space:nowrap;}
  .main-nav a:hover, .main-nav a.active{color:var(--safety); border-bottom-color:var(--safety);}
  .main-nav li.menu-item-has-children{position:relative;}
  .main-nav li.menu-item-has-children > a::after{content:"\25BE"; margin-left:5px; font-size:.7em; vertical-align:middle;}
  .main-nav .sub-menu{display:none; position:absolute; top:100%; left:0; background:var(--navy-dark); border:1px solid rgba(255,255,255,.1); min-width:220px; padding:8px 0; flex-direction:column; gap:0; box-shadow:0 12px 24px rgba(0,0,0,.35); z-index:50;}
  .main-nav li.menu-item-has-children:hover > .sub-menu,
  .main-nav li.menu-item-has-children:focus-within > .sub-menu{display:flex;}
  .main-nav .sub-menu a{display:block; padding:10px 18px; border-bottom:none; white-space:nowrap;}
  .main-nav .sub-menu a:hover{background:rgba(255,255,255,.06);}

  /* --- convivenza con GTranslate / Google Translate ---
     Il traduttore di Google inserisce una propria barra in cima alla
     pagina e sposta il body verso il basso con "top: 40px", cosa che
     scopre o copre la nostra barra fissa. Qui la neutralizziamo. */
  .goog-te-banner-frame, .skiptranslate iframe{display:none !important;}
  body{top:0 !important;}
  /* il traduttore evidenzia il testo tradotto al passaggio del mouse:
     lo disattiviamo, stona con la grafica del sito. */
  .goog-text-highlight{background:none !important; box-shadow:none !important;}

  .header-actions{display:flex; align-items:center; gap:12px;}
  /* contenitore del selettore lingua del plugin di traduzione: stile
     volutamente minimo, così il plugin resta libero di mostrarlo
     come preferisce (bandierine, tendina, testo). */
  .header-lingua{display:flex; align-items:center; color:#fff; font-size:.85rem;}
  .header-lingua a{color:#fff;}
  .header-lingua img{display:block;}
  /* lingua attualmente in uso evidenziata in giallo. "gt-current-lang"
     è la classe che alcuni tipi di selettore GTranslate assegnano da
     soli; "lingua-attiva" la aggiunge il nostro script, per i tipi che
     non la mettono. */
  /* la lingua non in uso resta bianca, quella attiva diventa gialla */
  .header-lingua a{color:#fff; font-weight:400; opacity:1;}
  .header-lingua a.gt-current-lang,
  .header-lingua a.lingua-attiva{color:var(--safety); font-weight:700;}
  /* Quando lo script ha riconosciuto la lingua in uso (classe
     "lingua-gestita"), comanda solo lui: qualunque altra classe messa
     dal plugin non colora più nulla, così resta accesa una sola
     lingua per volta. */
  .header-lingua.lingua-gestita a{color:#fff; font-weight:400;}
  .header-lingua.lingua-gestita a.lingua-attiva{color:var(--safety); font-weight:700;}
  /* voci lingua: area di tocco generosa, così si premono senza
     sbagliare anche quando il testo è breve come "EN" */
  .header-lingua a{padding:6px 8px; line-height:1; display:inline-flex; align-items:center;}
  /* --- selettore generato da GTranslate ---
     Il plugin inserisce il suo contenitore e i link "glink" dopo il
     caricamento: qui li riportiamo all'aspetto delle nostre voci
     (sigle bianche, attiva in giallo) senza toccare il plugin, così
     resta uguale anche dopo i suoi aggiornamenti. */
  .header-lingua .gtranslate_wrapper{display:flex; align-items:center; gap:2px;}
  .header-lingua .glink{font-family:'Barlow Semi Condensed'; font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:.85rem; text-decoration:none; white-space:nowrap;}
  /* niente bandierine nella barra: affollano e non stanno in riga con
     le sigle */
  .header-lingua .glink img{display:none;}
  /* se in GTranslate si sceglie la vista a tendina, la casella prende
     comunque i colori della barra invece del grigio di sistema */
  .header-lingua select, .header-lingua .gt_selector{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:2px; padding:5px 6px; font-family:'Barlow Semi Condensed'; font-weight:700; text-transform:uppercase; font-size:.85rem; cursor:pointer;}
  .header-lingua select option{color:var(--ink); background:#fff;}
  /* il logo "Powered by Google" dentro la barra non ci sta */
  .header-lingua .gskiptranslate, .header-lingua .goog-logo-link, .header-lingua .gt_float_switcher-arrow{display:none !important;}
  @media (max-width:900px){
    .header-lingua{order:-1; font-size:1.05rem; gap:4px;}
    .header-lingua a{padding:10px 12px; min-width:44px; min-height:44px; justify-content:center;}
  }
  .btn-catalogo{background:var(--safety); color:var(--navy-dark); padding:.65em 1.3em; display:inline-flex; align-items:center; gap:.5em;}
  .icona-pdf{flex-shrink:0;}
  .btn-catalogo:hover{background:var(--safety-dark);}
  .header-search{display:flex; align-items:center; background:#fff; border-radius:999px; padding:6px 6px 6px 16px; gap:8px;}
  .header-search input{border:none; outline:none; font-family:Inter; font-size:.85rem; width:150px; background:transparent;}
  .header-search button{width:32px; height:32px; border-radius:50%; border:none; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
  .header-search button:hover{background:var(--safety); color:var(--navy-dark);}

  /* pulsante del menu su mobile: volutamente grande e ben visibile,
     con la cornice gialla del brand — era troppo piccolo e passava
     inosservato */
  .nav-toggle{display:none; width:52px; height:46px; border:2px solid var(--safety); background:transparent; border-radius:var(--radius); position:relative; cursor:pointer;}
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"]{background:var(--safety);}
  .mobile-search-toggle{display:none; width:46px; height:46px; align-items:center; justify-content:center; border:2px solid var(--safety); background:transparent; border-radius:50%; color:#fff; cursor:pointer;}
  .mobile-search-toggle:hover, .mobile-search-toggle[aria-expanded="true"]{background:var(--safety); color:var(--navy-dark);}
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{content:""; position:absolute; left:11px; right:11px; height:3px; background:#fff; border-radius:2px; transition:background .15s ease;}
  .nav-toggle span{top:21px;}
  .nav-toggle::before{top:13px;}
  .nav-toggle::after{top:29px;}
  /* con lo sfondo giallo le linee bianche sparirebbero */
  .nav-toggle:hover span, .nav-toggle:hover::before, .nav-toggle:hover::after,
  .nav-toggle[aria-expanded="true"] span,
  .nav-toggle[aria-expanded="true"]::before,
  .nav-toggle[aria-expanded="true"]::after{background:var(--navy-dark);}
  /* a menu aperto le tre righe diventano una X */
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{transition:transform .2s ease, opacity .2s ease, background .15s ease;}
  .nav-toggle[aria-expanded="true"] span{opacity:0;}
  .nav-toggle[aria-expanded="true"]::before{top:21px; transform:rotate(45deg);}
  .nav-toggle[aria-expanded="true"]::after{top:21px; transform:rotate(-45deg);}

  @media (max-width:980px){
    .main-nav{position:absolute; top:100%; left:0; right:0; background:var(--navy-dark); flex-direction:column; align-items:stretch; gap:0; max-height:0; overflow:hidden; transition:max-height .25s ease; margin-left:0;}
    .main-nav.open{max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px); overflow-y:auto; -webkit-overflow-scrolling:touch; border-top:3px solid var(--safety); box-shadow:0 12px 24px rgba(0,0,0,.35); padding-bottom:28px;}
    .main-nav > ul{flex-direction:column; align-items:stretch; gap:0; width:100%;}
    /* Voci del menu mobile in grande: occupano quasi tutto lo schermo,
       si leggono da lontano e si toccano senza sbagliare bersaglio. */
    /* voci alte e ben distanziate: si toccano senza sbagliare bersaglio */
    .main-nav a{padding:26px; min-height:72px; border-bottom:1px solid rgba(255,255,255,.12); width:100%; font-size:1.5rem; letter-spacing:.8px; display:flex; align-items:center; justify-content:space-between;}
    /* freccetta a destra su ogni voce, per far capire che si apre */
    .main-nav > ul > li > a::after{content:"›"; font-size:1.5rem; opacity:.45; font-family:'Barlow Semi Condensed';}
    .main-nav a:active{background:rgba(255,255,255,.08);}
    .main-nav .sub-menu{display:flex; position:static; flex-direction:column; background:rgba(255,255,255,.04); border:none; box-shadow:none; min-width:0;}
    .main-nav .sub-menu a{padding-left:46px; font-size:1.2rem; min-height:62px;}
    .main-nav .sub-menu a::after{content:none;}
    /* social in fondo al menu mobile, più grandi e centrati */
    .nav-canali{justify-content:center; gap:28px; padding:26px 26px 4px; width:100%;}
    .nav-canali svg{width:30px; height:30px;}
    /* IMPORTANTE: le icone social sono dei link dentro al menu, quindi
       ereditavano le regole delle voci di menu — larghezza 100%, 26px
       di spazio attorno e altezza minima 72px. Due icone larghe quanto
       tutto lo schermo sfondavano, e la prima (Facebook) finiva
       tagliata fuori a sinistra: si vedeva solo Instagram. Qui le
       riportiamo alla loro misura. */
    .main-nav .nav-canali a{width:auto; min-width:0; padding:8px; min-height:0; border-bottom:none; justify-content:center; font-size:inherit; letter-spacing:normal;}
    .main-nav .nav-canali a::after{content:none;}
    .btn-catalogo{padding:.55em 1em; font-size:.78rem;}
    .header-search{display:none;}
    .header-search.mobile-open{display:flex; position:absolute; top:100%; left:0; right:0; margin:0; padding:10px 16px; border-radius:0; border-top:1px solid rgba(0,0,0,.08); box-shadow:0 6px 14px rgba(0,0,0,.12); z-index:20;}
    .header-search.mobile-open input{flex:1; width:auto;}
    .mobile-search-toggle{display:flex;}
    .nav-toggle{display:block;}
  }

  /* telefoni stretti: il pulsante del menu resta grande, quindi
     recuperiamo spazio riducendo logo, spaziature e il pulsante
     Catalogo, invece di rimpicciolire i comandi da toccare */
  @media (max-width:560px){
    .header-inner{padding:12px 16px; gap:10px;}
    .logo img, .logo .custom-logo{height:54px;}
    .btn-catalogo{padding:.5em .8em; font-size:.72rem; gap:.35em;}
    .header-actions{gap:8px;}
  }
  @media (max-width:400px){
    /* qui il testo "Catalogo" non ci sta più: resta la sola icona,
       il pulsante continua a funzionare allo stesso modo */
    .btn-catalogo{font-size:0; padding:.6em .7em;}
    .btn-catalogo .icona-pdf{width:20px; height:20px;}
    .logo img, .logo .custom-logo{height:46px;}
  }

  /* ---- hero / slider ---- */
  .home-slider{position:relative; overflow:hidden; background:var(--navy-dark);}
  .slider-track{display:flex; transition:transform .5s ease;}
  @media (prefers-reduced-motion: reduce){ .slider-track{transition:none;} }
  .slide{min-width:100%; display:flex; align-items:flex-end; min-height:560px; background-size:cover; background-position:center; position:relative;}
  .slide::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,11,12,.82) 0%,rgba(11,11,12,.45) 45%,rgba(11,11,12,.15) 75%); pointer-events:none;}
  .slide-inner{max-width:640px; width:100%; margin:0; padding:0 60px 70px; position:relative; z-index:1;}
  .slide-inner .eyebrow{margin-bottom:.6em;}
  .slide-inner h2{margin-bottom:.3em; color:#fff; font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.05;}
  .slide-inner p{color:#D8DEE6;}
  .slider-arrow{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:1.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; z-index:2;}
  .slider-arrow:hover{background:var(--safety); color:var(--navy-dark);}
  .slider-arrow.prev{left:16px;}
  .slider-arrow.next{right:16px;}
  .slider-dots{position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:2;}
  .slider-dots button{width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.35); padding:0; cursor:pointer;}
  .slider-dots button.active{background:var(--safety); width:22px; border-radius:5px;}
  @media (max-width:700px){ .slide{min-height:420px;} .slide-inner{padding:0 24px 40px;} }

  /* ---- video ---- */
  .video-frame{position:relative; aspect-ratio:16/9; background:#0B0B0C; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; border:1px solid var(--line);}
  /* video a tutta larghezza dello schermo, senza margini laterali */
  .video-frame-full{width:100%; max-width:none; margin:0; border-left:none; border-right:none;}
  .video-frame-real{display:block; padding:0; overflow:hidden;}
  .play-btn{width:76px; height:76px; border-radius:50%; border:none; background:var(--safety); color:var(--navy-dark); font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .play-btn:hover{background:var(--safety-dark);}
  .video-caption{color:#9AA6B2; font-size:.85rem; font-family:'Barlow Semi Condensed'; text-transform:uppercase; letter-spacing:.5px;}

  .section{padding:64px 0;}
  .section-alt{background:var(--paper-alt);}
  .section-head{max-width:640px; margin-bottom:2.2em;}
  /* per le frasi che devono stare su una riga sola: toglie il limite
     di larghezza, su schermi stretti va comunque a capo da sola */
  .section-head-larga{max-width:none;}

  /* ---- reasons ---- */
  .reasons{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .reason-card{background:#fff; border:1px solid var(--line); padding:26px; border-top:3px solid var(--safety);}
  .reason-num{font-family:'Barlow Semi Condensed'; font-weight:800; font-size:2rem; color:var(--line); margin-bottom:.2em;}

  /* ---- banners ---- */
  .cta-banner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--navy); color:#fff; padding:34px 36px; margin:56px 0;}
  .cta-banner h3{color:#fff; margin:0 0 .2em; text-transform:none; font-size:1.4rem;}
  .cta-banner p{color:#C7D0DA; margin:0;}

  /* ---- stores ---- */
  .stores{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  .store-card{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:16px; background:linear-gradient(135deg,var(--navy) 0%,var(--navy-dark) 100%); display:block; box-shadow:0 6px 20px rgba(0,0,0,.12); transition:transform .2s ease, box-shadow .2s ease;}
  .store-card:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.18);}
  .store-photo{position:absolute; inset:0; background-size:cover; background-position:center;}
  .store-body{position:absolute; left:0; right:0; bottom:0; padding:28px 28px 26px; background:linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 55%, transparent 100%);}
  .store-body h4{color:#fff; text-transform:uppercase; font-size:1.4rem; margin:0 0 .1em; line-height:1.15;}
  .store-body .store-citta{display:block; color:#fff; text-transform:uppercase; font-size:1.4rem; font-family:'Barlow Semi Condensed'; font-weight:700; line-height:1.15; margin-bottom:.5em;}
  .store-body a{display:inline-flex; align-items:center; gap:.5em; margin-top:0; background:var(--safety); color:var(--navy-dark); font-family:'Barlow Semi Condensed'; font-weight:700; text-transform:uppercase; letter-spacing:.4px; font-size:.8rem; padding:.7em 1.3em; border-radius:999px; text-decoration:none;}
  .store-body a:hover{background:var(--safety-dark);}
  @media (max-width:700px){ .stores{grid-template-columns:1fr;} }
  .store-body a{display:inline-block; margin-top:8px; color:var(--navy-dark); font-weight:700; text-decoration:underline;}

  /* ---- blog/news teaser cards ---- */
  .card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .teaser-card{background:#fff; border:1px solid var(--line); display:flex; flex-direction:column;}
  /* Anteprima articolo: proporzione fissa invece di un'altezza fissa,
     e l'immagine ritagliata dentro il riquadro. Prima l'immagine non
     aveva regole e sfondava dal contenitore, sovrapponendosi al testo
     (è lo stesso difetto che si vedeva nella pagina dei risultati). */
  .teaser-photo{position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; flex:0 0 auto; background:repeating-linear-gradient(45deg,var(--paper-alt) 0 10px,#fff 10px 20px);}
  /* L'immagine è fuori dal flusso (position:absolute): così l'altezza del
     riquadro dipende solo dalla proporzione qui sopra e mai dalla foto
     caricata. Due eventi con foto di misure diverse restano identici. */
  .teaser-photo img{position:absolute; top:0; left:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; display:block;}
  /* Ripiego per i browser più vecchi (Safari 14 e simili) che non
     conoscono aspect-ratio: senza questo il riquadro si adattava alla
     foto e le anteprime venivano una grande e una piccola. */
  @supports not (aspect-ratio: 16 / 10){
    .teaser-photo{height:0; padding-top:62.5%;}
  }
  /* Eventi e articoli usano la stessa cornice riempita per intero
     (object-fit:cover qui sopra): tutte le schede partono e finiscono
     sulla stessa linea, senza fasce vuote di misura diversa. */
  .teaser-body{padding:18px 20px; display:flex; flex-direction:column; gap:.4em; flex:1;}
  .tag{display:inline-block; font-family:'Barlow Semi Condensed'; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.72rem; color:var(--ink); background:#FFF3B0; padding:3px 9px; align-self:flex-start;}
  .date{font-size:.8rem; color:var(--ink-soft);}
  .teaser-body h4{margin:.2em 0 0; font-size:1.05rem; text-transform:none; color:var(--navy-dark); line-height:1.3;}
  /* La scheda non è più un unico link (dentro ci sono i pulsanti di
     condivisione, che sono link a loro volta): il link sta sul titolo
     e questo pseudo-elemento lo allarga a coprire tutta la scheda, così
     resta cliccabile ovunque come prima. */
  .teaser-card{position:relative;}
  .teaser-link{color:inherit; text-decoration:none;}
  .teaser-link::after{content:""; position:absolute; inset:0; z-index:1;}
  .teaser-link:focus-visible{outline:2px solid var(--navy-dark); outline-offset:2px;}
  /* Barra Condividi dentro le anteprime di Blog e News: più compatta
     della versione in fondo all'articolo e allineata al corpo della
     scheda. z-index la tiene sopra al link esteso, altrimenti i
     pulsanti aprirebbero l'articolo invece di condividerlo. */
  .teaser-card .condividi-bar-scheda{position:relative; z-index:2; margin:0; padding:12px 20px; gap:8px; flex-wrap:wrap;}
  .teaser-card .condividi-bar-scheda .condividi-label{font-size:.72rem; letter-spacing:.5px;}
  .teaser-card .condividi-bar-scheda .condividi-icon{width:32px; height:32px;}
  .teaser-card .condividi-bar-scheda .condividi-icon svg{width:15px; height:15px;}
  @media (max-width:700px){
    /* Su telefono la scheda si stringe: icone e spazi un filo più
       piccoli così i cinque pulsanti restano su una riga sola invece
       di lasciarne uno spaiato a capo. */
    .teaser-card .condividi-bar-scheda{padding:12px 16px; gap:6px;}
    .teaser-card .condividi-bar-scheda .condividi-label{font-size:.68rem;}
    .teaser-card .condividi-bar-scheda .condividi-icon{width:30px; height:30px;}
  }
  /* Barra Condividi nella scheda prodotto, sotto ai pulsanti: stesse
     icone dell'articolo, ma più vicina ai pulsanti perché lì sopra
     c'è già lo stacco di .prod-actions e due spazi grandi di fila
     farebbero sembrare la barra un blocco a sé. */
  .condividi-bar-prodotto{margin-top:1.4em; padding-top:1.2em; flex-wrap:wrap;}
  @media (max-width:600px){
    /* Sul telefono i pulsanti prendono tutta la larghezza e la colonna
       si stringe: icone e spazi più compatti così i cinque pulsanti
       stanno su una riga sola invece di lasciarne uno spaiato a capo. */
    .condividi-bar-prodotto{gap:6px;}
    .condividi-bar-prodotto .condividi-label{font-size:.68rem;}
    .condividi-bar-prodotto .condividi-icon{width:30px; height:30px;}
    .condividi-bar-prodotto .condividi-icon svg{width:15px; height:15px;}
  }

  /* ---- footer ---- */
  .site-footer{background:var(--navy-dark); color:#C7D0DA;}
  /* cinque colonne: logo, Chi siamo, Supporto, Disclaimer e i social.
     "align-items:start" tiene tutte le colonne allineate in alto, così
     il logo parte alla stessa altezza dei titoli accanto. */
  .footer-top{max-width:var(--maxw); margin:0 auto; padding:52px 20px 30px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:34px; align-items:start;}
  /* stessa altezza del logo nell'header (.logo img), per coerenza */
  /* niente margine negativo: il logo deve partire alla stessa altezza
     dei titoli delle altre colonne (Chi siamo, Supporto...) */
  .footer-logo-img{height:68px; width:auto; display:block;}
  .footer-top h5{color:#fff; font-family:'Barlow Semi Condensed'; text-transform:uppercase; font-size:.85rem; letter-spacing:1px; margin-bottom:1em;}
  .footer-top li{margin-bottom:.6em; font-size:.92rem;}
  .footer-top a:hover{color:var(--safety);}
  .footer-info{border-top:1px solid rgba(255,255,255,.12); padding:18px 0; font-size:.76rem; line-height:1.7; color:#8B96A3;}
  .footer-info-inner{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 10px; text-align:center;}
  .footer-info-inner span{min-width:0; overflow-wrap:break-word;}
  .footer-info-inner .sep{color:rgba(255,255,255,.18);}
  .footer-info-inner a{color:#C7D0DA; text-decoration:underline;}
  @media (max-width:600px){ .footer-info-inner .sep{display:none;} .footer-info-inner{gap:4px;} }

  /* canali social del footer: uno sotto l'altro, icona e nome
     affiancati, senza cerchio di sfondo */
  .footer-social-lista{list-style:none; margin:0; padding:0;}
  .footer-social-lista li{margin-bottom:.55em;}
  .footer-social-lista a{display:flex; align-items:center; gap:10px; color:#C7D0DA;}
  .footer-social-lista a:hover{color:#fff;}
  .footer-social-lista svg{flex-shrink:0;}
  /* La riga sotto sponsor e certificazioni è gialla e non bianca
     sbiadita: su fondo nero fa da separazione netta con il footer e
     riprende il colore del marchio. Resta 1px, quindi è un filo. */
  .footer-badges{border-bottom:1px solid var(--safety); background:rgba(255,255,255,.03); display:flex; flex-wrap:wrap;}
  .badge-block{flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:16px; padding:8px 12px; border-left:1px solid rgba(255,255,255,.12);}
  .badge-block:first-child{border-left:none;}
  /* Le immagini restano affiancate ma si rimpiccioliscono insieme
     alla finestra. Prima non potevano restringersi: sfondavano, e il
     browser ci metteva attorno un riquadro con la barra di
     scorrimento, che sembrava una finestra dentro la pagina. */
  .badge-images{display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:nowrap; width:100%; min-width:0;}
  .badge-img-box{display:flex; align-items:center; justify-content:center; flex:1 1 auto; min-width:0;}
  .badge-img-box img{display:block; width:100%; max-width:660px; height:auto; object-fit:contain;}
  /* Sotto i 1200px Sponsor va sopra e Certificazioni sotto: affiancati
     resterebbero troppo stretti e le immagini si rimpicciolirebbero
     più del dovuto. Il divisore passa da verticale a orizzontale. */
  @media (max-width:1200px){
    /* "flex:1 1 100%" e non solo "width:100%": in una riga flessibile
       la larghezza viene ignorata, comanda la base impostata qui.
       Senza questo i due riquadri continuavano a dividersi la riga
       invece di andare uno sotto l'altro. */
    .badge-block{flex:1 1 100%; border-left:none; border-top:1px solid rgba(255,255,255,.12); justify-content:center; padding:10px 12px; min-width:0; width:100%;}
    .badge-block:first-child{border-top:none;}
    .badge-img-box img{max-width:520px;}
  }
  @media (max-width:900px){
    .badge-block{padding:8px 10px;}
    .badge-img-box img{max-width:380px;}
  }
  /* Su telefono le immagini vanno una sotto l'altra e occupano tutta
     la larghezza del riquadro: affiancate e con un tetto in pixel
     restavano piccole in mezzo a due fasce nere. */
  @media (max-width:600px){
    .badge-images{flex-wrap:wrap; gap:12px;}
    .badge-img-box{flex:1 1 100%;}
    .badge-img-box img{max-width:100%;}
    .badge-block{padding:10px 10px;}
  }
  .badge-slot{border:1px dashed rgba(255,255,255,.25); color:#8B96A3; font-size:.75rem; padding:10px 22px; white-space:nowrap;}
  /* banner più sottile: era alto quasi il doppio e spezzava troppo
     la pagina appena sopra al footer */
  .newsletter-strip{background:var(--safety); color:var(--navy-dark); padding:16px 0;}

  /* ---- banner catalogo pre-footer ---- */
  .catalog-cta{position:relative; min-height:280px; display:flex; align-items:center; background:linear-gradient(120deg,#1A1A1A 0%,#2E3A46 55%,#1A1A1A 100%); background-size:cover; background-position:center; overflow:hidden;}
  .catalog-cta::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.25) 60%,transparent 100%);}
  .catalog-cta-inner{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:50px 20px; max-width:640px;}
  .catalog-cta-inner h2{color:#fff; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.15; margin-bottom:1.1em;}
  .catalog-cta-btn{display:inline-flex; align-items:center; gap:.6em; background:#fff; color:var(--ink); font-family:'Barlow Semi Condensed'; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.85rem; padding:1em 1.8em; border-radius:999px;}
  .catalog-cta-btn:hover{background:var(--safety);}
  .catalog-cta-btn span{color:var(--safety-dark); font-size:1.1rem;}
  @media (max-width:700px){ .catalog-cta{min-height:220px;} .catalog-cta-inner{padding:36px 20px;} }
  .newsletter-inner{max-width:var(--maxw); margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .newsletter-inner form{display:flex; gap:10px;}
  .newsletter-inner input{padding:.5em .9em; border:2px solid var(--navy-dark); font-family:Inter; min-width:220px;}

  /* ---- chi siamo ---- */
  .split{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start;}
  .stat-row{display:flex; gap:34px; margin-top:1.6em; flex-wrap:wrap;}
  .stat b{display:block; font-family:'Barlow Semi Condensed'; font-size:2.1rem; color:var(--navy); font-weight:800;}
  .stat span{font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft);}
  .value-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:1.4em;}
  .prod-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:1.6em;}
  @media (max-width:600px){
    .prod-actions{flex-direction:column; gap:10px;}
    .prod-actions .btn{width:100%; justify-content:center; min-height:48px; padding:.85em 1em;}
  }
  .value-item{background:#fff; border:1px solid var(--line); padding:18px; border-left:3px solid var(--navy);}
  /* foto illustrativa dentro il riquadro di una tecnica di
     personalizzazione: a tutta larghezza, proporzioni fisse così i
     riquadri restano allineati anche se le foto hanno formati diversi */
  .tecnica-foto{width:100%; aspect-ratio:3/2; object-fit:cover; display:block; margin:-18px -18px 14px; width:calc(100% + 36px); max-width:none;}
  .value-item h4{margin:0 0 .25em; font-size:.95rem; text-transform:none; color:var(--navy-dark);}
  .value-item p{margin:0; font-size:.88rem;}
  .value-item a{color:var(--navy-dark); text-decoration:underline;}
  /* descrizione dentro al riquadro: stesso testo degli altri dati, ma
     può avere più paragrafi, quindi serve un po' d'aria fra loro */
  .value-testo{font-size:.88rem;}
  .value-testo p{margin:0 0 .6em;}
  .value-testo p:last-child{margin-bottom:0;}

  /* ---- produzioni: categorie ---- */
  /* titolo presente per i motori di ricerca ma non a video */
  .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;}
  /* riga di presentazione del catalogo: riquadro con bordo, testo in
     maiuscolo e centrato, con il filo giallo a sinistra ripreso dalle
     schede sede */
  /* Stessa veste del pulsante Catalogo: fondo giallo e scritta nera.
     Non è un pulsante e non deve sembrarlo troppo, quindi niente
     effetti al passaggio del mouse né bordi arrotondati marcati. */
  .intro-catalogo{margin:0 0 24px; padding:16px 22px; background:var(--safety); border:none; color:var(--navy-dark); font-family:'Barlow Semi Condensed'; font-weight:700; font-size:.95rem; text-transform:uppercase; letter-spacing:.6px; line-height:1.45; text-align:center; border-radius:var(--radius);}
  @media (max-width:600px){ .intro-catalogo{padding:14px 16px; font-size:.8rem; text-align:left;} }
  /* meno spazio sopra le categorie, così salgono subito sotto il
     percorso di navigazione invece di stare a metà pagina */
  .sezione-categorie{padding-top:28px;}

  .cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .cat-tile{background:#fff; border:1px solid var(--line); padding:24px 22px; display:flex; align-items:center; gap:16px; transition:border-color .15s ease, transform .15s ease; position:relative; overflow:hidden; min-height:104px;}
  .cat-tile:hover{border-color:var(--safety); transform:translateY(-2px);}
  .cat-mark{width:58px; height:58px; min-width:58px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Barlow Semi Condensed'; font-weight:800; font-size:1rem; overflow:hidden;}
  .cat-mark img{width:100%; height:100%; object-fit:cover; display:block;}
  .cat-tile h4{margin:0; font-size:1.02rem; text-transform:none; color:var(--navy-dark); line-height:1.25;}

  /* ---- header categoria con immagine ---- */
  /* Testata di categoria, tornata all'altezza contenuta di prima: a
     500px riempiva mezzo schermo e i prodotti finivano sotto la piega.
     Il punto di ritaglio è spostato in alto (35% invece del centro):
     su una fascia bassa e larga, centrare l'immagine taglia via le
     teste delle persone, che sono la parte che conta. */
  .cat-header{position:relative; background-color:var(--navy-dark); background-size:cover; background-position:center 18%; min-height:240px; display:flex; align-items:flex-end;}
  @media (max-width:600px){ .cat-header{min-height:190px; background-position:center 15%;} }
  /* La sfumatura scura serve a rendere leggibile il titolo, ma prima
     saliva fino in cima e velava i volti: ora resta bassa e trasparente
     nella metà superiore. */
  .cat-header-overlay{width:100%; background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 100%); padding:60px 0 24px;}
  .cat-header .eyebrow::before{background:var(--safety);}
  .cat-count{font-size:.75rem; color:var(--ink-soft);}
  .cat-count.soon{color:var(--request); font-weight:600;}
  /* Ordine delle sezioni nella pagina Prodotti: scritta e categorie
     prima, filtri e catalogo dopo — uguale su computer e su telefono.
     Su schermi piccoli l'ordine era invertito (filtri in cima), scelta
     fatta quando la griglia mostrava subito tutti i prodotti; ora che
     parte nascosta non serve più, e teneva le categorie troppo in
     basso. */
  .produzioni-flow{display:flex; flex-direction:column;}
  #sezioneCategorie{order:1;}
  #sezioneCatalogoFiltri{order:2;}

  /* ---- prodotti demo ---- */
  .prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:1.4em;}
  /* Schede della stessa riga tutte alla stessa altezza: la scheda si
     allunga fino a riempire la riga e il blocco dei colori resta
     appoggiato in basso, così badge e pallini sono allineati fra
     schede vicine anche quando i titoli occupano righe diverse. */
  .prod-card{background:#fff; border:1px solid var(--line); overflow:hidden; position:relative; display:flex; flex-direction:column; height:100%;}
  .prod-card .prod-body{flex:1; display:flex; flex-direction:column;}
  .prod-card .swatches{margin-top:auto;}
  .prod-card .prod-body h4{min-height:2.4em;}
  .prod-photo{height:190px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; transition:background .2s ease;}
  .prod-photo img{width:100%; height:100%; object-fit:contain; display:block;}
  .prod-thumb-btn{transition:border-color .15s ease;}
  .prod-thumb-btn:hover{border-color:var(--safety) !important;}
  .prod-thumb-btn.attiva{border-color:var(--navy-dark) !important; border-width:2px !important;}
  .prod-photo span{font-family:'Barlow Semi Condensed'; color:rgba(255,255,255,.75); text-transform:uppercase; font-size:.72rem; letter-spacing:1px;}
  .prod-body{padding:16px 18px 20px;}
  .prod-body h4{margin:0 0 .3em; font-size:.98rem; text-transform:uppercase; letter-spacing:.3px; color:var(--navy-dark);}
  .prod-ref{font-size:.76rem; color:var(--ink-soft); margin-bottom:.7em;}
  .badge{display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:3px 8px; margin-bottom:.7em;}
  .badge.available{background:var(--available-bg); color:var(--available);}
  .badge.request{background:var(--request-bg); color:var(--request);}
  .swatches{display:block;}
  /* Otto pallini per riga, al massimo due righe. Prima stavano tutti
     su una riga sola che si allungava a piacere: con 15-20 colori la
     scheda diventava altissima e le schede della stessa riga
     finivano disallineate. */
  .swatches-griglia{display:grid; grid-template-columns:repeat(8, 22px); gap:8px; align-items:center; justify-content:start;}
  .swatch-extra{font-size:.72rem; font-weight:700; color:var(--ink-soft); align-self:center; white-space:nowrap;}
  .swatch{width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0;}
  .swatch.active{box-shadow:0 0 0 2px var(--navy-dark);}
  .swatch-label{display:block; font-size:.78rem; color:var(--ink-soft); margin-top:8px;}
  .note-box{background:#fff; border:1px dashed var(--line); padding:16px 18px; font-size:.85rem; color:var(--ink-soft); margin-top:1.6em;}

  /* ---- contatti ---- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
  .form-msg{padding:12px 16px; margin-bottom:18px; font-size:.9rem; font-family:'Barlow Semi Condensed'; font-weight:600;}
  .form-msg-ok{background:var(--available-bg); color:var(--available);}
  .form-msg-errore{background:var(--request-bg); color:var(--request);}
  .field{margin-bottom:16px;}
  .field label{display:block; font-family:'Barlow Semi Condensed'; text-transform:uppercase; font-size:.78rem; letter-spacing:.5px; margin-bottom:.4em; color:var(--navy-dark);}
  .field input, .field textarea{width:100%; padding:.75em .9em; border:1px solid var(--line); font-family:Inter; font-size:.95rem; background:#fff;}
  .addr-card{background:#fff; border:1px solid var(--line); padding:16px 18px; margin-bottom:14px; border-left:3px solid var(--safety);}
  .addr-card a{color:var(--navy-dark); font-weight:700; text-decoration:underline;}
  /* mappa della sede: compare solo quando richiesta, vedi main.js */
  .sede-mappa{margin-top:10px;}
  .sede-mappa iframe{width:100%; height:230px; display:block; border:1px solid var(--line); margin-bottom:8px;}
  /* titolo della sede e indirizzo sulla stessa riga */
  .sede-titolo{display:flex; flex-wrap:wrap; align-items:baseline; gap:.45em; margin:0 0 .25em;}
  /* nome della sede: non va mai spezzato, così l'indirizzo che segue
     resta sulla stessa riga finché c'è spazio */
  .sede-titolo > :first-child, .sede-nome{white-space:nowrap;}
  .sede-indirizzo{font-family:Inter; font-weight:400; font-size:.86rem; text-transform:none; letter-spacing:normal; color:var(--ink-soft);}
  @media (max-width:1100px){ .sede-indirizzo{font-size:.82rem;} }
  /* email a sinistra e telefono a destra, sulla stessa riga */
  .sede-riga{display:flex; flex-wrap:wrap; gap:2px 18px; margin:0; font-size:.88rem; line-height:1.5;}
  /* i due link sotto la mappa, uno per lato */
  .sede-link-riga{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 22px; font-size:.85rem;}
  .addr-card-assistenza{border-left-color:var(--navy);}
  .addr-card h4{margin:0 0 .3em; font-size:1rem; text-transform:none; color:var(--navy-dark);}
  .addr-card p{margin:0; font-size:.9rem;}

  @media (max-width:900px){
    .reasons, .stores, .card-grid, .cat-grid, .prod-grid{grid-template-columns:repeat(2,1fr);}
    .split, .contact-grid{grid-template-columns:1fr;}
  }
  @media (max-width:600px){
    .reasons, .stores, .card-grid, .cat-grid, .prod-grid{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr 1fr;}
    .footer-logo-img{margin-top:0;}
  }

  /* ---- configuratore ---- */
  .configuratore .section-head{margin-bottom:1.8em;}
  #capeceConfiguratore{scroll-margin-top:120px;}
  .conf-layout{display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:start;}
  .conf-stage-wrap{background:#fff; border:1px solid var(--line);}
  #confCanvas{width:100%; height:auto; display:block; touch-action:none; cursor:pointer;}
  .conf-panel{background:#fff; border:1px solid var(--line); padding:22px;}
  .conf-step{margin-bottom:22px;}
  .conf-step:last-child{margin-bottom:0;}
  .conf-step h4{font-size:.95rem; text-transform:uppercase; color:var(--navy-dark); margin-bottom:.6em;}
  .conf-zone-editor{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}
  .conf-tabs{display:flex; gap:0; margin-bottom:12px; border:1px solid var(--line);}
  .conf-tab{flex:1; padding:.6em; background:#fff; border:none; font-family:'Barlow Semi Condensed'; font-weight:600; text-transform:uppercase; font-size:.78rem; letter-spacing:.4px; cursor:pointer; color:var(--ink-soft);}
  .conf-tab.active{background:var(--navy-dark); color:#fff;}
  .conf-tab:first-child{border-right:1px solid var(--line);}

  .conf-restore-banner{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--paper-alt); border:1px solid var(--line); padding:12px 16px; margin-bottom:20px; font-size:.85rem;}
  .conf-restore-banner .btn{padding:.4em 1em; font-size:.75rem;}

  .conf-zoom-controls{display:flex; gap:6px; justify-content:flex-end; padding:8px; background:var(--paper-alt); border-bottom:1px solid var(--line);}
  .conf-zoom-controls button{width:34px; height:30px; border:1px solid var(--line); background:#fff; cursor:pointer; font-family:'Barlow Semi Condensed'; font-weight:700; font-size:.85rem;}
  .conf-zoom-controls button:hover{background:var(--safety);}
  #confZoomReset{width:auto; padding:0 8px;}
  .conf-canvas-scroll{overflow:auto; max-height:600px;}
  .conf-canvas-scroll #confCanvas{transition:width .15s ease;}
  .conf-zone-editor h5{margin:0 0 .8em; font-size:1rem; text-transform:none; color:var(--navy-dark);}
  .conf-label{display:block; font-family:'Barlow Semi Condensed'; text-transform:uppercase; font-size:.75rem; letter-spacing:.5px; margin:.9em 0 .3em; color:var(--ink-soft);}
  .conf-zone-editor input[type="file"],
  .conf-zone-editor select{width:100%; padding:.5em; border:1px solid var(--line); font-family:Inter; font-size:.85rem;}
  .conf-zone-editor input[type="range"]{width:100%;}
  .conf-zone-editor .btn{margin-top:14px; width:100%; justify-content:center;}
  #confMsg{color:var(--request); font-size:.85rem; min-height:1.2em;}

  .conf-modal-backdrop:not([hidden]){position:fixed; inset:0; background:rgba(11,11,12,.6); display:flex; align-items:center; justify-content:center; z-index:300; padding:20px;}
  .conf-modal{background:#fff; max-width:440px; width:100%; padding:32px; position:relative; max-height:90vh; overflow-y:auto;}
  .conf-modal h3{margin-bottom:.3em;}
  .conf-modal-close{position:absolute; top:14px; right:14px; background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--ink-soft);}
  .conf-modal .field{margin-bottom:14px;}
  .conf-modal .btn{width:100%; justify-content:center; margin-top:6px;}
  #confModalMsg{font-size:.85rem; color:var(--request); min-height:1.2em; margin-top:.6em;}

  @media (max-width:900px){
    .conf-layout{grid-template-columns:1fr;}
  }

  /* ---- condividi (articoli blog) ---- */
  .condividi-bar{display:flex; align-items:center; gap:10px; margin-top:2.4em; padding-top:1.6em; border-top:1px solid var(--line);}
  .condividi-label{font-family:'Barlow Semi Condensed'; text-transform:uppercase; letter-spacing:.5px; font-size:.8rem; color:var(--ink-soft); margin-right:4px;}
  .condividi-icon{width:36px; height:36px; border-radius:50%; background:var(--paper-alt); color:var(--navy-dark); display:flex; align-items:center; justify-content:center;}
  .condividi-icon:hover{background:var(--safety);}

  /* ---- whatsapp flottante ---- */
  .whatsapp-float{position:fixed; bottom:22px; right:22px; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.3); z-index:200;}
  .whatsapp-float:hover{background:#1EBE5A;}
  @media (max-width:600px){ .whatsapp-float{bottom:16px; right:16px; width:50px; height:50px;} }

  /* ---- testimonianze ---- */
  .testimonianza-card{background:#fff; border:1px solid var(--line); padding:22px; display:flex; flex-direction:column; gap:10px;}
  .testimonianza-stelle{color:var(--safety-dark); font-size:1rem; letter-spacing:2px;}
  .testimonianza-testo{color:var(--ink); font-style:italic; flex:1;}
  .testimonianza-autore{color:var(--ink-soft); font-size:.85rem; margin:0;}

  /* ---- filtri prodotto ---- */
  /* barra filtri: tutto su una riga sola, i gruppi si dividono lo
     spazio disponibile; colore e taglia sono tendine a scelta
     multipla, per non occupare l'intera barra con decine di pulsanti */
  .filtri-prodotto{display:flex; gap:14px; align-items:flex-end; background:#fff; border:1px solid var(--line); padding:16px 18px; margin-bottom:20px;}
  .filtro-gruppo{display:flex; flex-direction:column; gap:6px; flex:1 1 0; min-width:0;}
  .filtro-titolo{font-family:'Barlow Semi Condensed'; text-transform:uppercase; font-size:.72rem; letter-spacing:.5px; color:var(--ink-soft);}
  /* Nota: su telefono i campi hanno testo 16px (vedi in fondo al
     file): sotto quella misura il browser ingrandisce la pagina da
     solo quando ci si scrive dentro, facendo "ballare" il layout. */
  .filtro-select,
  .filtro-ricerca-input,
  .filtro-multi-toggle{width:100%; padding:.45em .7em; border:1px solid var(--line); background:#fff; font-family:Inter; font-size:.82rem; min-width:0; box-sizing:border-box;}
  .filtro-ricerca-input:focus{outline:2px solid var(--safety); outline-offset:1px;}

  .filtro-multi{position:relative;}
  .filtro-multi-toggle{display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; text-align:left;}
  .filtro-multi-toggle:hover{border-color:var(--navy);}
  .filtro-multi.ha-selezione .filtro-multi-toggle{border-color:var(--navy-dark); font-weight:700;}
  .filtro-multi-testo{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .filtro-multi-freccia{flex-shrink:0; color:var(--ink-soft); font-size:.7rem;}
  .filtro-multi-pannello{position:absolute; top:calc(100% + 4px); left:0; min-width:100%; background:#fff; border:1px solid var(--line); box-shadow:0 8px 20px rgba(0,0,0,.12); padding:8px; z-index:60; max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:2px;}
  /* serve esplicitamente: "display:flex" qui sopra avrebbe la meglio
     sulla regola predefinita del browser per gli elementi nascosti,
     lasciando la tendina sempre aperta */
  .filtro-multi-pannello[hidden]{display:none;}
  .filtro-multi-pannello label{display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:.85rem; white-space:nowrap; cursor:pointer;}
  .filtro-multi-pannello label:hover{background:var(--paper-alt);}
  .filtro-multi-pannello input{margin:0;}

  #filtroReset{flex:0 0 auto; white-space:nowrap; padding:.5em 1.1em; font-size:.78rem;}

  @media (max-width:900px){
    .filtri-prodotto{flex-wrap:wrap; gap:12px;}
    .filtro-gruppo{flex:1 1 45%;}
    #filtroReset{flex:1 1 100%;}
  }
  @media (max-width:600px){
    /* Filtri compatti su telefono: prima occupavano quasi tutto lo
       schermo (quattro campi incolonnati a piena larghezza) e i
       prodotti restavano completamente sotto la piega. Ora due per
       riga, etichette piccole sopra e spazi ridotti: si intravedono
       già i primi articoli. I campi restano a 16px, altrimenti iOS
       ingrandisce la pagina quando ci si scrive dentro. */
    .filtri-prodotto{flex-direction:row; flex-wrap:wrap; align-items:end; gap:8px; padding:10px;}
    .filtro-gruppo{flex:1 1 calc(50% - 4px); width:auto; min-width:0; gap:2px;}
    .filtro-titolo{font-size:.62rem; letter-spacing:.3px;}
    .filtro-select,
    .filtro-ricerca-input,
    .filtro-multi-toggle{padding:.3em .5em; min-height:38px;}
    #filtroReset{flex:1 1 100%; padding:.4em 1em; font-size:.72rem; min-height:34px;}
  }
  #filtroContatore{margin-bottom:1em; color:var(--ink-soft); font-size:.85rem;}

  /* ---- confronta ---- */
  .prod-confronta{position:absolute; top:10px; right:10px; z-index:2; background:rgba(255,255,255,.92); padding:4px 8px; font-size:.72rem; font-family:'Barlow Semi Condensed'; text-transform:uppercase; display:flex; align-items:center; gap:5px; cursor:pointer;}
  .confronta-bar{position:fixed; left:0; right:0; bottom:0; background:var(--navy-dark); color:#fff; padding:14px 20px; display:flex; align-items:center; justify-content:center; gap:16px; z-index:250; flex-wrap:wrap;}
  .confronta-bar .btn-primary{padding:.5em 1.2em;}
  /* pulsante Confronta in attesa del secondo prodotto */
  .confronta-bar .btn-spento{opacity:.45; cursor:not-allowed; pointer-events:none;}
  .confronta-bar .btn-ghost{border-color:#fff; color:#fff; padding:.5em 1.2em;}

  /* ---- form richiesta preventivo inline (pagina prodotto) ---- */
  .richiesta-prodotto-form{margin-top:20px; padding:22px; background:var(--paper-alt); border:1px solid var(--line); max-width:100%; box-sizing:border-box;}
  .richiesta-prodotto-form form{display:flex; flex-direction:column; gap:14px; max-width:420px; width:100%; box-sizing:border-box;}
  .field-checkbox label{display:block; font-size:.85rem; color:var(--ink-soft); font-family:Inter; text-transform:none; letter-spacing:normal; line-height:1.5;}
  .field-checkbox input{margin-right:6px; vertical-align:middle; position:relative; top:-1px;}

  /* ---- breadcrumb ---- */
  .breadcrumb{background:var(--paper-alt); border-bottom:1px solid var(--line); padding:10px 0;}
  .breadcrumb ol{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0;}
  .breadcrumb li{display:flex; align-items:center; gap:6px; font-family:'Barlow Semi Condensed'; font-size:.78rem; text-transform:uppercase; letter-spacing:.3px; color:var(--ink-soft);}
  .breadcrumb li:not(:first-child)::before{content:"/"; margin-right:6px; color:var(--line);}
  .breadcrumb a{color:var(--ink-soft);}
  .breadcrumb a:hover{color:var(--safety-dark);}
  .breadcrumb span[aria-current]{color:var(--navy-dark); font-weight:700;}

  /* ---- swatch divisi disponibili/su richiesta ---- */
  .swatches-split{display:flex; flex-direction:column; gap:10px;}
  .prodotto-certificazioni{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:1.2em 0;}
  .prodotto-certificazioni img{height:52px; width:auto; max-width:90px; object-fit:contain;}
  .swatch-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .swatch-row-label{font-family:'Barlow Semi Condensed'; text-transform:uppercase; font-size:.72rem; letter-spacing:.4px; color:var(--ink-soft); min-width:84px;}
  .swatch-row-items{display:flex; gap:8px; flex-wrap:wrap;}

  /* ---- popup guida taglie ---- */
  .guida-taglie-modal-backdrop:not([hidden]){position:fixed; inset:0; background:rgba(11,11,12,.6); display:flex; align-items:center; justify-content:center; z-index:300; padding:20px;}
  .guida-taglie-modal{background:#fff; max-width:560px; width:100%; padding:32px; position:relative; max-height:85vh; overflow-y:auto;}
  .guida-taglie-modal h3{margin:.2em 0 .8em;}

  /* ---- rifiniture mobile ---- */
  @media (max-width:600px){
    .richiesta-prodotto-form form .btn,
    .contact-grid form .btn,
    .newsletter-inner form .btn{width:100%; justify-content:center; min-height:46px;}
    .swatch{width:30px; height:30px;}
    .conf-tab{min-height:44px;}
    .filtro-multi-toggle{min-height:40px;}
    .cat-tile{min-height:64px;}
  }

  /* ---- confronto prima/dopo (pagina Personalizzazione) ---- */
  .confronto-img{position:relative; overflow:hidden; line-height:0; user-select:none; border:1px solid var(--line); background:#fff;}
  .confronto-img img{display:block; width:100%; height:auto;}
  /* la foto "dopo" sta sopra, dentro un contenitore che viene ritagliato
     da sinistra: stringendolo si scopre la foto "prima" che sta sotto */
  /* Il "dopo" è uno strato largo quanto tutta la foto, ritagliato da
     destra: così le due immagini vengono disegnate esattamente nella
     stessa posizione e alla stessa misura, e il logo combacia. Prima
     lo strato era largo la metà e la foto sopra veniva scalata
     sull'altezza: con due scatti di proporzioni diverse (o su schermo
     stretto) il logo del "dopo" risultava più grande e spostato. */
  .confronto-dopo-wrap{position:absolute; inset:0; width:100%; overflow:hidden; clip-path:inset(0 calc(100% - var(--confronto-pos,50%)) 0 0);}
  .confronto-dopo-wrap img{position:absolute; top:0; left:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center;}
  .confronto-etichetta{position:absolute; top:14px; background:rgba(0,0,0,.65); color:#fff; font-family:'Barlow Semi Condensed'; text-transform:uppercase; letter-spacing:1px; font-size:.72rem; padding:.35em .8em; line-height:1.4; pointer-events:none;}
  .confronto-etichetta-sx{left:14px;}
  .confronto-etichetta-dx{right:14px;}
  /* il cursore vero è un campo di sistema reso invisibile, così il
     confronto resta usabile anche da tastiera e con lo screen reader */
  /* il riquadro accetta il trascinamento orizzontale ma lascia
     scorrere la pagina in verticale */
  .confronto-img{touch-action:pan-y;}
  /* Il campo di sistema resta per l'uso da tastiera, ma non intercetta
     più il tocco: se ne occupa il codice, così il cursore si può
     trascinare da qualunque punto del riquadro e non solo afferrando
     la maniglia (bersaglio piccolissimo su telefono). */
  .confronto-cursore{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:none; pointer-events:none;}
  .confronto-cursore::-webkit-slider-thumb{-webkit-appearance:none; width:44px; height:100%; cursor:ew-resize;}
  .confronto-cursore::-moz-range-thumb{width:44px; height:100%; border:0; background:transparent; cursor:ew-resize;}
  .confronto-cursore:focus-visible{outline:2px solid var(--safety); outline-offset:2px;}
  .confronto-maniglia{position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); transform:translateX(-50%); pointer-events:none; display:flex; align-items:center; justify-content:center;}
  /* un solo pallino centrato sulla linea, con le due frecce dentro */
  .confronto-pallino{position:absolute; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--navy-dark); box-shadow:0 2px 10px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; gap:3px; font-size:.72rem; letter-spacing:1px;}

  /* ---- mobile: niente ingrandimento automatico nei campi ----
     Se il testo di un campo è più piccolo di 16px, alla scrittura il
     browser ingrandisce tutta la pagina e il layout "balla". Portando
     i campi a 16px su telefono il problema non si presenta. */
  @media (max-width:900px){
    input[type="text"], input[type="search"], input[type="email"],
    input[type="tel"], input[type="url"], input[type="number"],
    select, textarea,
    .filtro-ricerca-input, .filtro-select, .filtro-multi-toggle,
    .header-search input{font-size:16px;}
    /* Ripetuto con priorità più alta: iOS ingrandisce la pagina quando
       il cursore entra in un campo con testo sotto i 16px, e nel caso
       della ricerca il cursore ci entra da solo all'apertura. Meglio
       essere certi che la misura sia quella giusta in quel momento. */
    .header-search.mobile-open input,
    .header-search input[type="search"]{font-size:16px !important;}
  }

  /* invito a usare i filtri, al posto della griglia prodotti */
  .invito-ricerca{background:#fff; border:1px solid var(--line); border-left:3px solid var(--safety); padding:20px 22px; margin:0; color:var(--ink-soft); font-size:.95rem;}
  @media (max-width:600px){ .invito-ricerca{padding:12px 14px; font-size:.85rem;} }

  /* sottocategorie dentro una categoria madre */
  .sottocategorie{margin-bottom:32px;}
  .sottocategorie-titolo{font-size:1.05rem; margin:0 0 14px;}

  /* ---- carosello (tecniche di personalizzazione) ----
     Le schede scorrono lateralmente; lo scorrimento "a scatti" le
     ferma sempre allineate. Senza JavaScript resta comunque
     scorrevole con il dito o la rotellina. */
  /* Carosello: le frecce stanno SOPRA la fila, ai lati, così le schede
     possono estendersi per tutta la larghezza e quelle prima e dopo si
     intravedono ai bordi — si capisce a colpo d'occhio che la fila
     continua. */
  .carosello{position:relative;}
  .carosello-pista{display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; padding:4px 0; min-width:0;
    scrollbar-width:none; -ms-overflow-style:none; cursor:grab; touch-action:pan-y;}
  .carosello-pista::-webkit-scrollbar{display:none;}
  /* durante il trascinamento: niente scorrimento morbido (seguirebbe
     il dito in ritardo) e niente selezione del testo */
  .carosello-pista.in-trascinamento{cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; user-select:none;}
  .carosello-pista.in-trascinamento img{pointer-events:none;}
  /* Schede che sono link (i settori in home): il cursore a dito del
     link copriva la manina del carosello, quindi lì il trascinamento
     non si vedeva mentre in Recensioni e Personalizzazione — dove le
     schede sono semplici riquadri — sì. Con "inherit" il link prende
     il cursore della pista: manina aperta ferma, pugno chiuso mentre
     si trascina. Restano cliccabili: il click viene annullato solo se
     ci si è davvero mossi (vedi "appena-trascinato" nel JavaScript).
     user-drag/draggable spengono il trascinamento nativo del link,
     che altrimenti partirebbe al posto dello scorrimento. */
  .carosello-pista a{cursor:inherit; -webkit-user-drag:none;}
  /* Quando le schede ci stanno già tutte non c'è niente da far
     scorrere: la manina prometterebbe un gesto che non fa nulla. */
  .carosello-fermo .carosello-pista{cursor:default;}
  .carosello-scheda{flex:0 0 calc((100% - 36px) / 3); scroll-snap-align:center; min-width:0;}
  .carosello-freccia{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--navy-dark); font-size:1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.16); transition:background .15s ease, color .15s ease;}
  .carosello-prec{left:-10px;}
  .carosello-succ{right:-10px;}
  .carosello-freccia:hover{background:var(--navy-dark); color:#fff;}
  .carosello-freccia[disabled]{opacity:.3; cursor:default;}
  .carosello-freccia[disabled]:hover{background:#fff; color:var(--navy-dark);}
  @media (max-width:900px){
    .carosello-scheda{flex:0 0 calc((100% - 18px) / 2);}
  }
  @media (max-width:600px){
    .carosello-scheda{flex:0 0 88%;}
    .carosello-freccia{display:none;}
  }

  /* ---- scheda prodotto: pulsanti in posizione diversa da mobile ----
     Su computer "Richiedi preventivo" e "Scarica PDF" stanno sotto le
     miniature, nella colonna della foto. Su telefono devono finire in
     fondo, dopo le descrizioni.
     Lo spostamento lo fa il codice (vedi main.js): sposta davvero il
     blocco da una colonna all'altra. Il tentativo precedente lo faceva
     solo con lo stile, rendendo "trasparenti" le due colonne: ma così
     tutti i blocchi finivano nella stessa griglia e si disponevano in
     righe sfalsate, spaccando la pagina su computer. */

  /* ============ BARRA IN ALTO SU TELEFONO ============
     Impostazione più pulita: logo, lente, lingua a tendina, catalogo
     come quadrato e menu. Prima erano tutti elementi allineati con
     testo e riquadri di misure diverse, e la barra risultava
     affollata. */

  /* lingua: pulsante compatto con tendina */
  .header-lingua-wrap{position:relative; display:flex; align-items:center;}
  /* Tendina lingue anche su computer: la barra resta pulita e le
     lingue compaiono solo quando servono. */
  .lingua-toggle{display:flex; align-items:center; gap:4px; height:40px; padding:0 10px; background:transparent; border:1px solid rgba(255,255,255,.3); border-radius:var(--radius); color:#fff; font-family:'Barlow Semi Condensed'; font-size:.95rem; font-weight:700; letter-spacing:.5px; cursor:pointer;}
  .lingua-toggle:hover{border-color:var(--safety);}
  .header-lingua-wrap .header-lingua{position:absolute; top:calc(100% + 8px); right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--navy-dark); border:1px solid rgba(255,255,255,.18); box-shadow:0 10px 24px rgba(0,0,0,.4); min-width:110px; z-index:60; padding:4px 0;}
  .header-lingua-wrap:not(.aperta) .header-lingua{display:none;}
  .header-lingua-wrap .header-lingua a{padding:11px 16px; min-height:0; justify-content:flex-start; font-size:.95rem;}
  .header-lingua-wrap .header-lingua a + a{border-top:1px solid rgba(255,255,255,.1);}
  .lingua-toggle-freccia{font-size:.6rem; opacity:.7;}

  @media (max-width:900px){
    .header-lingua-wrap .header-lingua a{padding:13px 16px; font-size:1rem;}

    /* catalogo: solo icona, in un quadrato della stessa misura degli
       altri pulsanti della barra */
    .btn-catalogo{width:40px; height:40px; padding:0; justify-content:center; gap:0; border-radius:var(--radius);}
    .btn-catalogo-testo{display:none;}
    .btn-catalogo .icona-pdf{width:18px; height:18px;}

    /* lente e menu della stessa misura, per una barra allineata */
    .mobile-search-toggle{width:40px; height:40px; border-radius:var(--radius);}
    .nav-toggle{width:40px; height:40px;}
    .nav-toggle span, .nav-toggle::before, .nav-toggle::after{left:9px; right:9px;}
    .nav-toggle span{top:19px;}
    .nav-toggle::before{top:13px;}
    .nav-toggle::after{top:25px;}
    .nav-toggle[aria-expanded="true"]::before,
    .nav-toggle[aria-expanded="true"]::after{top:19px;}

    .header-inner{padding:10px 14px; gap:8px;}
    .header-actions{gap:8px;}

    /* ricerca: barra intera sotto l'header, pulita come nel
       riferimento — sfondo scuro e riga sottile sotto al campo */
    .header-search.mobile-open{background:var(--navy-dark); border-top:1px solid rgba(255,255,255,.12); box-shadow:0 8px 16px rgba(0,0,0,.35); padding:14px 16px 16px; gap:10px; align-items:center;}
    .header-search.mobile-open input{background:transparent; color:#fff; border-bottom:1px solid rgba(255,255,255,.45); border-radius:0; padding:8px 2px; font-size:16px; letter-spacing:.5px;}
    /* anche il testo di suggerimento a 16px: alcune versioni di iOS
       guardano quello quando il campo è ancora vuoto */
    .header-search.mobile-open input::placeholder{color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:1px; font-size:16px;}
    .header-search.mobile-open button{background:transparent; color:#fff; width:28px; height:28px;}
    .header-search.mobile-open button:hover{background:transparent; color:var(--safety);}
  }

  /* ---- niente ingrandimento della pagina scrivendo nei campi ----
     Ripetuto con priorità massima: iOS ingrandisce appena il cursore
     entra in un campo con testo sotto i 16px, e basta un solo campo
     sfuggito perché l'effetto si veda. */
  @media (max-width:900px){
    input, select, textarea{font-size:16px !important;}
  }

  /* ---- Contatti: assistenza clienti per prima su telefono ----
     Su desktop resta a destra, accanto al modulo. Su telefono, dove
     le colonne si impilano, il riquadro dell'assistenza sale in cima:
     chi apre Contatti dal telefono di solito vuole telefonare o
     scrivere, non compilare un modulo. */
  @media (max-width:900px){
    /* Su telefono le due colonne diventano "trasparenti" e tutti i
       blocchi si incolonnano in un ordine deciso qui:
       1 assistenza clienti, 2 modulo, 3 sedi con le mappe, 4 foto.
       Funziona perché la griglia qui ha una colonna sola. */
    .contatti-split > div{display:contents;}
    .contatti-split .addr-card-assistenza{order:1;}
    .contatti-split form{order:2;}
    .contatti-split .addr-card:not(.addr-card-assistenza){order:3;}
    .contatti-split .contatti-foto{order:99;}
  }

  /* ---- categorie in home a carosello ---- */
  .carosello-pista.cat-grid{display:flex;}
  .carosello-pista > .cat-tile{flex:0 0 calc((100% - 54px) / 4); scroll-snap-align:start; min-width:0;}
  @media (max-width:900px){
    .carosello-pista > .cat-tile{flex:0 0 calc((100% - 18px) / 2);}
  }
  @media (max-width:600px){
    .carosello-pista > .cat-tile{flex:0 0 82%;}
  }

  /* ---- intestazioni di sezione centrate ---- */
  /* Titolo del blocco "Prima e dopo": il limite di 640px di
     .section-head lo mandava a capo anche quando nella pagina lo spazio
     c'era. Qui il titolo può usare tutta la colonna, e sopra i 760px di
     schermo resta su un rigo solo; sotto torna a andare a capo, dove
     forzarlo lo farebbe uscire dallo schermo. */
  .section-head-piena{max-width:none;}
  /* Il titolo sta su un rigo perché ci sta, non perché gli è vietato
     andare a capo: niente white-space:nowrap, che con un titolo più
     lungo (o tradotto) uscirebbe dallo schermo trascinandosi dietro una
     barra di scorrimento orizzontale. Qui la misura è calcolata perché
     la frase entri nella colonna; se un domani il titolo si allunga,
     va a capo invece di sfondare. */
  .titolo-una-riga{font-size:clamp(1.1rem, 2.2vw, 1.7rem);}
  /* Blocco attaccato a quello precedente: senza questo ci sarebbero
     due spazi da 64px di fila e il titolo sembrava perso in mezzo. */
  .section-confronto{padding-top:8px;}
  .section-head-centrata{margin-left:auto; margin-right:auto; text-align:center;}
  .section-head-centrata .eyebrow{justify-content:center;}
  .section-head-centrata .eyebrow::before{margin-right:8px;}

  /* ---- schede categoria verticali (carosello in home) ----
     Foto grande in alto e testo sotto, invece del cerchietto di lato:
     le foto si vedono davvero e le schede hanno tutte la stessa
     altezza, così la fila resta ordinata. */
  .carosello-verticale{align-items:stretch;}
  .cat-tile-vert{flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; text-align:center;}
  .cat-foto{width:100%; aspect-ratio:4/3; background:var(--paper-alt); display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .cat-foto img{width:100%; height:100%; object-fit:cover; display:block;}
  .cat-foto span{font-family:'Barlow Semi Condensed'; font-weight:800; font-size:2rem; color:var(--navy);}
  .cat-testo{padding:16px 14px 18px; display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; flex:1;}
  .cat-tile-vert h4{margin:0; font-size:1rem; line-height:1.25;}
  .cat-tile-vert:hover .cat-foto img{transform:scale(1.04);}
  .cat-foto img{transition:transform .25s ease;}

  /* ---- schede sede in home: foto + fascia gialla ----
     La fascia gialla che nelle foto originali era "disegnata dentro"
     l'immagine è qui una barra vera: il nome resta testo (traducibile
     e leggibile) e i pulsanti si adattano allo schermo. */
  .stores .store-card{aspect-ratio:auto; display:flex; flex-direction:column; background:var(--safety);}
  .stores .store-photo{position:relative; inset:auto; width:100%; aspect-ratio:16/10;}
  .store-barra{background:var(--safety); color:var(--navy-dark); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
  .store-nome{font-family:'Barlow Semi Condensed'; font-weight:800; text-transform:uppercase; font-size:1.15rem; letter-spacing:.4px; line-height:1.15;}
  .store-azioni{display:flex; align-items:center; gap:8px;}
  .store-mappa{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--navy-dark); color:#fff; flex-shrink:0; text-decoration:none;}
  .store-mappa:hover{background:#333;}
  @media (max-width:600px){
    .store-barra{padding:12px 14px;}
    .store-nome{font-size:1rem; flex:1 1 100%;}
  }

  /* ---- foto nelle schedine "chi siamo" della home ---- */
  .value-item-foto{padding:0; overflow:hidden; display:flex; flex-direction:column;}
  .valore-foto{width:100%; aspect-ratio:1/1; object-fit:cover; display:block;}
  .value-item-foto h4{margin:14px 16px 4px;}
  .value-item-foto p{margin:0 16px 16px;}

  /* ---- foto della squadra in Contatti ----
     Su computer sotto al modulo; su telefono per ultima, dopo le
     mappe (le colonne si impilano e l'ordine lo decide "order"). */
  .contatti-foto{margin:24px 0 0; padding:0;}
  /* Stessa scheda delle sedi in home: eredita da .store-card angoli
     tondi, ombra e sfondo sfumato blu, e da .store-barra la fascia
     gialla. Qui la scheda non è cliccabile, quindi niente sollevamento
     al passaggio del mouse: sarebbe un invito a cliccare a vuoto. */
  .contatti-foto.store-card{aspect-ratio:auto; display:flex; flex-direction:column; background:var(--safety);}
  .contatti-foto.store-card:hover{transform:none; box-shadow:0 6px 20px rgba(0,0,0,.12);}
  /* La foto tiene le proporzioni 16/10 delle sedi in home: la scheda
     resta della stessa forma a qualsiasi larghezza, e object-fit
     ritaglia invece di deformare se la foto avesse un altro formato. */
  .contatti-foto-img{display:block; width:100%;}
  .contatti-foto-img img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block;}
  /* La fascia gialla: scritte a sinistra, logo a destra. flex-wrap fa
     scendere il logo sotto alle scritte quando la colonna è stretta,
     invece di schiacciare le une o l'altro. */
  .contatti-foto-barra{margin:0;}
  .contatti-foto-voci{display:flex; align-items:center; flex-wrap:wrap; gap:.15em .5em; min-width:0;}
  .contatti-foto-sep{opacity:.55;}
  /* Altezza fissa e larghezza automatica: il logo si allinea alle
     scritte qualunque sia la lunghezza del testo tradotto. */
  .contatti-foto-logo{height:34px; width:auto; flex-shrink:0; display:block; margin-left:auto;}
  @media (max-width:600px){
    /* Su telefono le scritte prendono tutta la riga (come il nome nelle
       schede sede) e il logo scende sotto: margin-left:auto lo tiene
       comunque a destra, allineato com'è sugli schermi larghi. */
    .contatti-foto-logo{height:28px;}
  }
  /* l'ordine su telefono è definito più sopra, insieme a quello degli
     altri blocchi della pagina */

  /* ---- recensioni a carosello in home ---- */
  .carosello-pista.card-grid{display:flex;}
  /* Due recensioni per volta invece di tre: con tre schede da un terzo
     riempivano esattamente la riga e non restava nulla da scorrere —
     le frecce risultavano spente e sembrava rotto. Più larghe si
     leggono anche meglio. */
  .carosello-pista > .testimonianza-card{flex:0 0 calc((100% - 18px) / 2); scroll-snap-align:start; min-width:0;}
  @media (max-width:900px){ .carosello-pista > .testimonianza-card{flex:0 0 calc((100% - 18px) / 2);} }
  @media (max-width:600px){ .carosello-pista > .testimonianza-card{flex:0 0 88%;} }

  /* Eventi & news in home, anch'essi a carosello: le schede tengono la
     misura che avevano nella griglia — tre per riga su computer, due su
     tablet, quasi tutta la larghezza su telefono — così cambia solo il
     fatto che la fila scorre. */
  .carosello-pista > .teaser-card{flex:0 0 calc((100% - 36px) / 3); scroll-snap-align:start; min-width:0;}
  @media (max-width:900px){ .carosello-pista > .teaser-card{flex:0 0 calc((100% - 18px) / 2);} }
  @media (max-width:600px){ .carosello-pista > .teaser-card{flex:0 0 88%;} }

  /* ---- miniature prodotto ---- */
  .prod-thumbs{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
  .prod-thumb-btn{padding:0; border:1px solid var(--line); background:none; cursor:pointer; line-height:0;}
  .prod-thumb-btn img{width:64px; height:64px; object-fit:contain; background:#fff; display:block;}

  /* ---- foto di apertura di articolo e news ---- */
  .articolo-foto{margin:0 0 1.8em; padding:0;}
  .articolo-foto img{width:100%; height:auto; display:block;}

  /* ---- gallerie di immagini dentro gli articoli ----
     Il tema dichiara il supporto 'html5' per le gallerie (functions.php):
     è la scelta giusta perché produce markup pulito, ma ha un effetto
     collaterale poco noto — WordPress smette di stampare il proprio
     foglio di stile di ripiego per le gallerie e lascia il compito al
     tema. Qui non c'era nessuna regola, così le foto si incolonnavano
     una sotto l'altra qualunque numero di colonne si scegliesse
     nell'editor.
     Le regole valgono per tutte e tre le forme di galleria che
     WordPress può produrre: quella a blocchi nuova (figure annidate),
     quella a blocchi vecchia (blocks-gallery-grid) e quella classica
     dello shortcode [gallery]. */
  .page-content .wp-block-gallery.has-nested-images,
  .page-content .blocks-gallery-grid,
  .page-content .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:1.8em 0; padding:0; list-style:none; align-items:start;}
  /* Il numero di colonne scelto nell'editor arriva come classe. */
  .page-content .wp-block-gallery.columns-1,
  .page-content .blocks-gallery-grid.columns-1,
  .page-content .gallery-columns-1{grid-template-columns:repeat(1,1fr);}
  .page-content .wp-block-gallery.columns-2,
  .page-content .blocks-gallery-grid.columns-2,
  .page-content .gallery-columns-2{grid-template-columns:repeat(2,1fr);}
  .page-content .wp-block-gallery.columns-3,
  .page-content .blocks-gallery-grid.columns-3,
  .page-content .gallery-columns-3{grid-template-columns:repeat(3,1fr);}
  .page-content .wp-block-gallery.columns-4,
  .page-content .blocks-gallery-grid.columns-4,
  .page-content .gallery-columns-4{grid-template-columns:repeat(4,1fr);}
  .page-content .wp-block-gallery.columns-5,
  .page-content .blocks-gallery-grid.columns-5,
  .page-content .gallery-columns-5{grid-template-columns:repeat(5,1fr);}
  .page-content .wp-block-gallery.columns-6,
  .page-content .blocks-gallery-grid.columns-6,
  .page-content .gallery-columns-6{grid-template-columns:repeat(6,1fr);}
  .page-content .wp-block-gallery.columns-7,
  .page-content .blocks-gallery-grid.columns-7,
  .page-content .gallery-columns-7{grid-template-columns:repeat(7,1fr);}
  .page-content .wp-block-gallery.columns-8,
  .page-content .blocks-gallery-grid.columns-8,
  .page-content .gallery-columns-8{grid-template-columns:repeat(8,1fr);}
  .page-content .wp-block-gallery.columns-9,
  .page-content .blocks-gallery-grid.columns-9,
  .page-content .gallery-columns-9{grid-template-columns:repeat(9,1fr);}
  /* Le singole foto: la larghezza la decide la griglia, quindi vanno
     annullate le misure che WordPress scrive da sé (percentuali e
     float della galleria classica, calc() di quella a blocchi). */
  .page-content .wp-block-gallery.has-nested-images figure.wp-block-image,
  .page-content .blocks-gallery-item,
  .page-content .gallery-item{width:auto !important; max-width:none !important; margin:0 !important; float:none !important; display:block;}
  .page-content .wp-block-gallery.has-nested-images figure.wp-block-image img,
  .page-content .blocks-gallery-item img,
  .page-content .gallery-item img{width:100%; height:auto; max-width:100%; display:block; border:0;}
  /* La galleria classica separa le righe con un <br clear>: in una
     griglia diventerebbe una cella vuota che sfalsa tutto. */
  .page-content .gallery br{display:none;}
  .page-content .gallery-caption,
  .page-content .blocks-gallery-item figcaption,
  .page-content .wp-block-gallery figcaption{font-size:.82rem; color:var(--ink-soft); margin-top:.5em; text-align:left;}
  @media (max-width:700px){
    /* Su telefono più di due colonne rende le foto illeggibili; chi ne
       ha chiesta una sola se la tiene. */
    .page-content .wp-block-gallery.has-nested-images:not(.columns-1),
    .page-content .blocks-gallery-grid:not(.columns-1),
    .page-content .gallery:not(.gallery-columns-1){grid-template-columns:repeat(2,1fr); gap:12px;}
  }

  /* ---- impaginazione elenchi (blog, news, ricerca) ----
     Dà anche il giusto stacco dal fondo pagina: prima l'ultima riga di
     schede finiva incollata al footer. */
  .paginazione{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:40px 0 8px;}
  .paginazione .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:'Barlow Semi Condensed'; font-weight:700; text-decoration:none; transition:background .15s ease, color .15s ease;}
  .paginazione .page-numbers:hover{background:var(--paper-alt);}
  .paginazione .page-numbers.current{background:var(--navy-dark); color:#fff; border-color:var(--navy-dark);}
  .paginazione .page-numbers.dots{border-color:transparent; background:none;}

  /* ---- respiro prima del footer ----
     L'ultima sezione di ogni pagina finiva a ridosso del footer. */
  .section:last-of-type{padding-bottom:80px;}
  @media (max-width:600px){ .section:last-of-type{padding-bottom:48px;} }

  /* ---- barra di condivisione ---- */
  .condividi-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2.4em; padding-top:1.6em; border-top:1px solid var(--line);}
  .condividi-label{font-family:'Barlow Semi Condensed'; font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:.8rem; color:var(--ink-soft);}
  .condividi-icon{width:40px; height:40px; border-radius:50%; background:var(--paper-alt); color:var(--navy-dark); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:background .15s ease, color .15s ease;}
  .condividi-icon:hover{background:var(--navy-dark); color:#fff;}

  /* carosello senza nulla da scorrere: via le frecce, resta la fila */
  .carosello-fermo .carosello-freccia{display:none;}
  .carosello-fermo .carosello-pista{justify-content:center;}

  /* ---- testo centrato (usato in Personalizzazione) ---- */
  .testo-centrato{text-align:center;}
  .testo-centrato .eyebrow{justify-content:center;}
  .testo-centrato p{margin-left:auto; margin-right:auto;}

  /* pulsante centrato sotto una sezione */
  .azione-centrata{text-align:center; margin:28px 0 0;}

  /* le quattro schede "chi siamo" in home, in fila orizzontale */
  .value-grid-quattro{grid-template-columns:repeat(4,1fr);}
  @media (max-width:900px){ .value-grid-quattro{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .value-grid-quattro{grid-template-columns:1fr;} }

  /* recensioni: tre per volta su computer (con 10 recensioni il
     carosello ha comunque molto da scorrere) */
  .carosello-pista > .testimonianza-card{flex:0 0 calc((100% - 36px) / 3);}
  @media (max-width:900px){ .carosello-pista > .testimonianza-card{flex:0 0 calc((100% - 18px) / 2);} }
  @media (max-width:600px){ .carosello-pista > .testimonianza-card{flex:0 0 88%;} }

  /* footer: logo allineato più in basso, alla riga dei titoli, e
     descrizione compatta sotto */
  .footer-logo-img{margin-top:26px;}
  .footer-top > div:first-child p{font-size:.82rem; line-height:1.45; margin-top:.7em !important;}

  /* ---- confronto prima/dopo: niente trascinamento delle immagini ----
     Il browser, premendo su una foto, avvia il suo trascinamento
     nativo e blocca il movimento del cursore. */
  .confronto-img img{-webkit-user-drag:none; user-select:none; pointer-events:none;}
  .confronto-img{user-select:none;}

  /* ---- schede prodotto: pulsanti ai due estremi ----
     Allineati ai bordi della foto sopra, come nello schema fornito. */
  @media (min-width:901px){
    .prod-col-foto .prod-actions{justify-content:space-between; width:100%;}
  }

  /* ---- righe verticali gialle al posto delle nere ---- */
  .value-item{border-left-color:var(--safety);}
  .carosello-scheda{border-left-color:var(--safety);}

  /* ---- invito a usare i filtri: testo centrato ---- */
  .invito-ricerca{text-align:center;}

  /* ---- barra in alto su telefono: pulsanti più grandi ----
     44px è la misura minima consigliata per il tocco; qui andiamo a
     48px, che su schermi piccoli fa una differenza sensibile. */
  @media (max-width:900px){
    .btn-catalogo,
    .mobile-search-toggle,
    .nav-toggle{width:48px; height:48px;}
    .btn-catalogo .icona-pdf{width:22px; height:22px;}
    .mobile-search-toggle svg{width:20px; height:20px;}
    .nav-toggle span, .nav-toggle::before, .nav-toggle::after{left:11px; right:11px; height:3px;}
    .nav-toggle span{top:23px;}
    .nav-toggle::before{top:16px;}
    .nav-toggle::after{top:30px;}
    .nav-toggle[aria-expanded="true"]::before,
    .nav-toggle[aria-expanded="true"]::after{top:23px;}
    .lingua-toggle{height:48px; padding:0 12px;}
    .header-actions{gap:10px;}
  }

  /* su schermi stretti i pallini sono più grandi: meno per riga */
  @media (max-width:600px){
    .swatches-griglia{grid-template-columns:repeat(6, 30px); gap:10px;}
  }

  /* ---- galleria a schermo intero (lightbox) ---- */
  .apre-galleria{cursor:zoom-in;}
  .galleria-piena{position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; padding:56px 20px;}
  .galleria-piena.aperta{display:flex;}
  .galleria-corpo{margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:12px;}
  .galleria-corpo img{max-width:100%; max-height:78vh; width:auto; height:auto; display:block; object-fit:contain;}
  .galleria-corpo figcaption{color:#fff; font-size:.9rem; text-align:center; max-width:60ch;}
  .galleria-piena button{background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .15s ease;}
  .galleria-piena button:hover{background:rgba(255,255,255,.3);}
  .galleria-chiudi{position:absolute; top:16px; right:16px; width:44px; height:44px; font-size:1.8rem; line-height:1;}
  .galleria-prec, .galleria-succ{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:1.3rem;}
  .galleria-prec{left:16px;}
  .galleria-succ{right:16px;}
  .galleria-conta{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-family:'Barlow Semi Condensed'; letter-spacing:1px; font-size:.85rem;}
  @media (max-width:600px){
    /* su telefono le frecce laterali coprirebbero la foto: si scorre
       con il dito, e restano solo chiusura e contatore */
    .galleria-piena{padding:56px 10px;}
    .galleria-prec, .galleria-succ{display:none;}
    .galleria-corpo img{max-height:72vh;}
  }

  /* ---- carosello a giro continuo ----
     La fila mostra anche pezzi delle schede prima e dopo, perché
     "esce" dai lati del contenitore: è quello che fa capire che si può
     continuare a girare. Le schede al centro restano allineate al
     resto della pagina. */
  /* La fila deve arrivare fino ai BORDI DELLO SCHERMO, non fermarsi ai
     margini della pagina: è così che le schede prima e dopo si
     intravedono ai lati.
     Il tentativo precedente allargava il contenitore lasciando dentro
     la fila alla larghezza di prima — ma la fila ritaglia il contenuto
     ai propri bordi, quindi non si vedeva nulla spuntare.
     Qui è la FILA STESSA a occupare tutta la larghezza dello schermo,
     con un margine interno che riporta la prima scheda esattamente in
     linea con il resto della pagina. */
  .carosello-infinito{width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    /* quanto la fila sporge oltre il contenuto: serve sia per il
       margine interno sia per la sfumatura, così restano sempre
       allineati fra loro */
    /* Deve coincidere con il margine laterale della pagina (20px):
       una sfumatura più larga mangerebbe il bordo della prima e
       dell'ultima scheda intera, che invece devono restare piene. */
    --bordo-carosello:max(20px, calc(50vw - var(--maxw) / 2 + 20px));}
  .carosello-infinito .carosello-pista{
    padding-left:var(--bordo-carosello);
    padding-right:var(--bordo-carosello);
    scroll-padding-left:var(--bordo-carosello);
    /* Le schede tagliate ai lati sfumano fino a sparire: si capisce che
       la fila continua senza che quei pezzi rubino attenzione alle
       schede intere.
       La sfumatura copre esattamente la zona FUORI dal contenuto:
       dove inizia la prima scheda intera il colore è già pieno.
       La maschera sta sulla fila e non sul contenitore, altrimenti
       sfumerebbe anche le frecce, che restano nitide. */
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--bordo-carosello), #000 calc(100% - var(--bordo-carosello)), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 var(--bordo-carosello), #000 calc(100% - var(--bordo-carosello)), transparent 100%);
  }
  /* larghezza delle schede calcolata sulla parte "utile" (quella
     allineata al contenuto), non sull'intera larghezza dello schermo */
  .carosello-infinito .carosello-scheda{flex-basis:calc((min(100vw, var(--maxw)) - 40px - 36px) / 3);}
  .carosello-infinito .cat-tile{flex-basis:calc((min(100vw, var(--maxw)) - 40px - 54px) / 4);}
  .carosello-infinito .testimonianza-card{flex-basis:calc((min(100vw, var(--maxw)) - 40px - 36px) / 3);}
  .carosello-infinito .teaser-card{flex-basis:calc((min(100vw, var(--maxw)) - 40px - 36px) / 3);}
  /* le frecce restano sul bordo del contenuto, non su quello dello
     schermo: lì sarebbero lontanissime dalle schede */
  .carosello-infinito .carosello-prec{left:max(4px, calc(50vw - var(--maxw) / 2 - 6px));}
  .carosello-infinito .carosello-succ{right:max(4px, calc(50vw - var(--maxw) / 2 - 6px));}
  @media (max-width:900px){
    .carosello-infinito .carosello-scheda,
    .carosello-infinito .teaser-card,
    .carosello-infinito .testimonianza-card{flex-basis:calc((100vw - 40px - 18px) / 2);}
    .carosello-infinito .cat-tile{flex-basis:calc((100vw - 40px - 18px) / 2);}
  }
  @media (max-width:600px){
    .carosello-infinito .carosello-scheda,
    .carosello-infinito .teaser-card,
    .carosello-infinito .testimonianza-card,
    .carosello-infinito .cat-tile{flex-basis:78vw;}
  }
  /* le copie servono solo a dare continuità: non devono essere lette
     dai lettori di schermo né raggiungibili da tastiera */
  .carosello-copia{pointer-events:auto;}
  .carosello-fermo .carosello-freccia{display:none;}
  .carosello-fermo .carosello-pista{justify-content:center;}