/* ==========================================================================
   Wintag — Mobile UX (responsive, nessun template server-side separato)
   Tutto il file vive sotto @media (max-width:767px): zero effetto da tablet
   in su. Riusa markup/DOM/variabili gia' esistenti (menu, drawer, form,
   schede prodotto/settore) — qui solo restyling + piccoli hook CSS.
   Fase 0: design tokens + bottom tab bar + restyle drawer laterale.
   ========================================================================== */

@media (max-width: 767px) {

  :root {
    --wt-m-black: #000000;
    --wt-m-text-2: #8E8E93;
    --wt-m-text-body: rgba(60, 60, 67, .85);
    --wt-m-tint: #FF9500;
    --wt-m-tint-text: #B25900;
    --wt-m-success: #34C759;
    --wt-m-bg: #F2F2F7;
    --wt-m-card: #FFFFFF;
    --wt-m-chip-bg: #FFF3E0;
    --wt-m-sep: rgba(60, 60, 67, .14);
    --wt-m-overlay: rgba(0, 0, 0, .35);
    --wt-m-r-sm: 12px;
    --wt-m-r-md: 16px;
    --wt-m-r-lg: 20px;
    --wt-m-font: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  }

  /* Spazio per la bottom tab bar fissa, cosi' l'ultimo blocco di ogni pagina
     (footer compreso) resta sempre raggiungibile con lo scroll. */
  body { padding-bottom: 62px; }

  /* --------------------------------------------------------------------
     Bottom Tab Bar — 5 voci fisse, blur translucido stile iOS
     -------------------------------------------------------------------- */
  .wt-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 998;
    display: flex;
    background: rgba(242, 242, 247, .86);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: .5px solid var(--wt-m-sep);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .wt-tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 2px 5px;
    text-decoration: none;
    color: #999;
    font-family: var(--wt-m-font);
    font-size: 10.5px;
    font-weight: 500;
  }
  .wt-tabbar__item i { font-size: 19px; line-height: 1; color: inherit; }
  .wt-tabbar__item.is-active { color: var(--wt-m-tint); }

  /* Evita sovrapposizioni quando il drawer laterale o un modal Bootstrap
     sono aperti sopra la pagina. */
  body.ltn__utilize-open .wt-tabbar,
  body.modal-open .wt-tabbar { display: none; }

  /* --------------------------------------------------------------------
     Drawer laterale (#ltn__utilize-mobile-menu, gia' esistente e
     funzionante via main.js) — solo restyle "iOS glass", nessuna modifica
     alla logica di apertura/toggle sotto-menu.
     -------------------------------------------------------------------- */
  .ltn__utilize.ltn__utilize-mobile-menu {
    width: 78%;
    max-width: 340px;
    padding: 0 !important;
    background-color: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
  /* Bug fix 2026-07-24: senza contenimento dello scroll, un gesto che
     raggiungeva il fondo/cima del drawer "proseguiva" nello scroll della
     pagina di sfondo invece di fermarsi — le ultime voci (Chi siamo,
     lingua, CTA telefono) sembravano irraggiungibili/tagliate. Stesso
     fix gia' applicato al bottom sheet filtri prodotto. */
  body.ltn__utilize-open { overflow: hidden; }
  html:has(body.ltn__utilize-open) { overflow: hidden; }
  .ltn__utilize-mobile-menu .ltn__utilize-menu-inner {
    padding: env(safe-area-inset-top, 20px) 0 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .ltn__utilize-mobile-menu .ltn__utilize-menu-head {
    padding: 4px 20px 16px;
  }
  .ltn__utilize-mobile-menu .ltn__utilize-menu-head .site-logo img { max-width: 110px; }

  /* Voci principali: grouped list iOS (riga 52px, separatore sottile) */
  .ltn__utilize-mobile-menu .ltn__utilize-menu { padding: 0 16px; }
  .ltn__utilize-mobile-menu #mobile-main-menu {
    background: var(--wt-m-card);
    border-radius: var(--wt-m-r-md);
    overflow: hidden;
  }
  .ltn__utilize-mobile-menu #mobile-main-menu > li { position: relative; }
  .ltn__utilize-mobile-menu #mobile-main-menu > li > a {
    display: block;
    padding: 14px 34px 14px 16px !important;
    margin: 0;
    font-family: var(--wt-m-font);
    font-size: 15px;
    font-weight: 500;
    text-transform: none !important;
    color: var(--wt-m-black) !important;
    letter-spacing: -.2px;
  }
  .ltn__utilize-mobile-menu #mobile-main-menu > li:not(:last-child) > a {
    border-bottom: .5px solid var(--wt-m-sep);
  }
  .ltn__utilize-mobile-menu #mobile-main-menu .menu-expand {
    height: 48px;
  }
  .ltn__utilize-mobile-menu #mobile-main-menu .menu-expand::before,
  .ltn__utilize-mobile-menu #mobile-main-menu .menu-expand::after {
    background-color: var(--wt-m-text-2);
  }
  .ltn__utilize-mobile-menu #mobile-main-menu .sub-menu {
    padding: 0 0 6px 16px !important;
    background: rgba(242, 242, 247, .6);
  }
  .ltn__utilize-mobile-menu #mobile-main-menu .sub-menu li a {
    display: block;
    padding: 10px 16px 10px 0 !important;
    font-family: var(--wt-m-font);
    font-size: 13.5px;
    color: var(--wt-m-text-body) !important;
    text-transform: none !important;
  }

  /* Sezione extra: Chi siamo / Download / Lavora con noi / Condizioni /
     lingua — link presenti oggi solo nel footer desktop, replicati qui
     additivamente per completare la IA del drawer mobile. */
  .wt-drawer-extra {
    margin: 16px 16px 0;
    background: var(--wt-m-card);
    border-radius: var(--wt-m-r-md);
    overflow: hidden;
  }
  .wt-drawer-extra a {
    display: block;
    padding: 12px 16px;
    font-family: var(--wt-m-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--wt-m-black);
    text-decoration: none;
  }
  .wt-drawer-extra a:not(:last-child) { border-bottom: .5px solid var(--wt-m-sep); }

  /* Selettore lingua: pillole tonde con solo la bandiera (era una lista
     verticale bandiera+nome, sostituita su richiesta) */
  .wt-drawer-lang-row {
    display: flex;
    gap: 8px;
    margin: 12px 16px 0;
  }
  .wt-drawer-lang-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    background: var(--wt-m-card);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  }
  .wt-drawer-lang-pill img { width: 22px; height: auto; border-radius: 2px; display: block; }

  /* CTA telefono/contatti in fondo al drawer: era pensata su sfondo scuro
     (testo bianco semi-trasparente) — sul drawer ora chiaro va ricolorata. */
  .ltn__utilize-mobile-menu > .ltn__utilize-menu-inner > div[style*="border-top"] {
    border-top: .5px solid var(--wt-m-sep) !important;
    padding: 16px !important;
  }
  .ltn__utilize-mobile-menu > .ltn__utilize-menu-inner > div[style*="border-top"] a[href^="tel:"] {
    color: var(--wt-m-text-2) !important;
  }
}

/* ==========================================================================
   FASE 1 — HOME (it/pag-home.php)
   La home e' gia' mobile-first (scroll orizzontale via .hp3-scroll, grid
   stat, ecc. — vedi <style> inline nel file). Qui solo un reskin "iOS
   system app" delle classi hp3-* esistenti: nessun markup nuovo, nessuna
   modifica a JS/slick/loop case history da DB.
   ========================================================================== */
@media (max-width: 767px) {

  .hp3-sec--grey { background: var(--wt-m-bg); }

  .hp3-sec-text h2 {
    font-family: var(--wt-m-font);
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px;
    color: var(--wt-m-black);
  }
  .hp3-sec-text p { font-family: var(--wt-m-font); color: var(--wt-m-text-2); }
  .hp3-sec-icon {
    background: var(--wt-m-chip-bg);
    color: var(--wt-m-tint);
    border-radius: var(--wt-m-r-sm);
    box-shadow: none;
  }

  /* Card prodotto/settore/case history/differenziatori: flat, radius ampio,
     niente ombra pesante — la profondita' viene dal contrasto col fondo. */
  .hp3-prd-card,
  .hp3-app-lite,
  .hp3-ch-mini,
  .hp3-why-card,
  .hp3-block-item {
    border-radius: var(--wt-m-r-md) !important;
    box-shadow: none !important;
    border: none !important;
  }
  .hp3-prd-card,
  .hp3-app-lite,
  .hp3-ch-mini,
  .hp3-why-card { background: var(--wt-m-card); }

  .hp3-prd-body h3,
  .hp3-app-lite-body h3,
  .hp3-ch-mini h3,
  .hp3-why-card h3,
  .hp3-usp-item h4,
  .hp3-usp-item p,
  .hp3-prd-sub,
  .hp3-ch-mini-tag,
  .hp3-prd-group-label,
  .hp3-hero .slide-title,
  .hp3-hero .slide-brief p { font-family: var(--wt-m-font); }

  .hp3-app-lite-icon,
  .hp3-why-icon { background: var(--wt-m-chip-bg); color: var(--wt-m-tint); }

  /* Bottoni: radius iOS invece degli 8px correnti */
  .hp3-hero .theme-btn-1,
  .hp3-btn,
  .hp3-proof-cta { border-radius: var(--wt-m-r-sm) !important; }

  /* Stat "Chi siamo" in stile large-title */
  .hp3-stat strong { font-family: var(--wt-m-font); }
  .hp3-stat span { font-family: var(--wt-m-font); color: var(--wt-m-text-2); }
}

/* ==========================================================================
   FASE 2 — CATALOGO HUB (it/pag-catalogo.php)
   Grid gia' a 1 colonna sotto 767px (vedi catalog-style.css:696-698). Qui
   solo reskin: card piatta su fondo grigio, tag da barra colorata a pillole,
   tipografia iOS. Nessun markup toccato, $jsonld_items invariato.
   ========================================================================== */
@media (max-width: 767px) {

  .ncat-section { background: var(--wt-m-bg); }

  .ncat-hero h1,
  .ncat-hero__eyebrow,
  .ncat-section__title,
  .ncat-section__label,
  .ncat-card__title,
  .ncat-card__eyebrow,
  .ncat-cta-box h2 { font-family: var(--wt-m-font); }

  .ncat-section__title { font-size: 22px; font-weight: 800; letter-spacing: -.2px; }

  /* Card piatta: radius ampio, niente bordo/ombra — la profondita' viene
     dal contrasto col fondo grigio della sezione. */
  .ncat-card {
    border-radius: var(--wt-m-r-md) !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Tag da barra edge-to-edge colorata a pillole interne, stesso link/testo */
  .ncat-card__tags {
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 20px !important;
    border-top: none !important;
  }
  .ncat-tag {
    flex: none;
    border-radius: 999px;
    padding: 6px 12px;
    border-right: none !important;
  }

  .btn-wt-primary { border-radius: var(--wt-m-r-sm) !important; }
}

/* ==========================================================================
   FASE 3 — LISTING PRODOTTI + SCHEDA PRODOTTO
   (it/prodotti.php, it/prodotti-tag.php)
   Filtro gia' lato client (assets/js/catalog-filters.js, data-*): qui solo
   restyle + apertura/chiusura del bottom sheet (stesso <form>, nessuna
   riscrittura della logica di filtro). Markup aggiunto in PHP: bottone
   "Filtri" con badge, backdrop, drag-handle/chiusura sheet, barra sticky
   CTA scheda prodotto — tutto con display:none inline di default, mostrato
   qui sotto solo sotto 767px.
   ========================================================================== */
@media (max-width: 767px) {

  /* Segmented control "Tecnologia" (gia' esistente, .nlb-surface-toggle).
     Bug fix 2026-07-24: con 4-5 pillole (Tutte/UHF/NFC-HF/Dual/CUSTOM) a
     larghezza uguale forzata (flex:1) e testo che non va a capo, il
     contenuto non riusciva a restringersi sotto la sua larghezza intrinseca
     e sforava la larghezza dello schermo, trascinando in overflow
     orizzontale l'intera pagina. Fix: la label "Tecnologia:" (ridondante,
     il segmented control si capisce da solo) si nasconde per liberare
     spazio, e il controllo scrolla SOLO al proprio interno se le pillole
     non ci stanno — non tocca mai la larghezza della pagina. */
  .nlb-surface-bar__label { display: none; }
  .nlb-surface-bar__inner { flex-wrap: nowrap; }
  .nlb-surface-toggle {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: rgba(118, 118, 128, .12);
    border-radius: var(--wt-m-r-sm);
    padding: 2px;
  }
  .nlb-surface-toggle::-webkit-scrollbar { display: none; }
  .nlb-surface-toggle a {
    flex: 1 0 auto;
    white-space: nowrap;
    text-align: center;
    border: none !important;
    margin-right: 0 !important;
    border-radius: var(--wt-m-r-sm) !important;
    background: transparent;
    color: var(--wt-m-black);
    font-family: var(--wt-m-font);
    font-size: 12.5px;
    padding: 7px 10px;
  }
  .nlb-surface-toggle a.active {
    background: var(--wt-m-card) !important;
    color: var(--wt-m-black) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  }

  /* Bottone "Filtri" (apre il bottom sheet) */
  .nlb-mobile-filter-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: var(--wt-m-card);
    border: none;
    border-radius: var(--wt-m-r-sm);
    padding: 10px 16px;
    font-family: var(--wt-m-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--wt-m-black);
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  }
  .nlb-mobile-filter-btn i { color: var(--wt-m-tint); }
  .nlb-mobile-filter-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--wt-m-tint);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
  }

  /* Backdrop del bottom sheet */
  .nlb-sheet-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: var(--wt-m-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .nlb-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

  /* Bug fix 2026-07-24: senza il lock dello scroll di sfondo, un gesto di
     scroll che parte dentro al bottom sheet arrivava a fine corsa (in cima
     o in fondo al contenuto) e "proseguiva" nello scroll della pagina
     sottostante (scroll-chaining) invece di fermarsi — sembrava che i campi
     restassero irraggiungibili. body.nlb-sheet-open blocca lo scroll di
     sfondo mentre il sheet e' aperto (classe gia' aggiunta/rimossa da
     assets/js/catalog-filters.js). */
  body.nlb-sheet-open { overflow: hidden; }
  /* Su alcuni browser mobile lo scroll root e' <html>, non <body>: doppia
     sicurezza (degrada senza rompere nulla se :has() non e' supportato). */
  html:has(body.nlb-sheet-open) { overflow: hidden; }

  /* Sidebar filtri -> bottom sheet */
  .nlb-sidebar-col { margin-bottom: 0 !important; }
  .nlb-sidebar {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto;
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: var(--wt-m-r-lg) var(--wt-m-r-lg) 0 0 !important;
    transform: translateY(100%);
    transition: transform .3s ease;
    z-index: 1050;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
  }
  .nlb-sidebar-col.is-open .nlb-sidebar { transform: translateY(0); }

  /* Lista dimensioni: scroller annidato dentro il sheet, stesso motivo */
  .nlb-dim-list { overscroll-behavior: contain; }

  .nlb-sidebar__head { position: relative; padding-top: 20px !important; }
  .nlb-sheet-handle {
    display: block !important;
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 5px;
    border-radius: 100px;
    background: rgba(60, 60, 67, .3);
  }
  .nlb-sheet-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--wt-m-text-2);
  }

  /* Card prodotto: flat su fondo grigio */
  .nlb-cards--redesign .nlb-card,
  .nlb-card {
    border: none !important;
    box-shadow: none !important;
  }

  /* Scheda prodotto: griglia specifiche a 1 colonna, tipografia iOS */
  .l2-specs__grid { grid-template-columns: 1fr !important; }
  .l2-spec-item { border-right: none !important; }
  .l2-intro__title,
  .l2-specs__head,
  .nlb-count { font-family: var(--wt-m-font); }

  /* Barra sticky CTA scheda prodotto: sostituisce la bottom tab bar
     globale sulle pagine di dettaglio (rilevate dal link "torna all'elenco",
     stesso pattern gia' usato in it/prodotti.php e it/prodotti-tag.php). */
  body:has(.l2-back-bar) .wt-tabbar,
  body:has(.nlb-back) .wt-tabbar { display: none; }
  body:has(.l2-back-bar),
  body:has(.nlb-back) { padding-bottom: 74px; }

  .wt-pdp-sticky {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 997;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: .5px solid var(--wt-m-sep);
  }
  .wt-pdp-call {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wt-m-bg);
    color: var(--wt-m-black);
    font-size: 17px;
  }
  .wt-pdp-cta {
    flex: 1;
    border: none;
    border-radius: var(--wt-m-r-sm);
    padding: 13px 16px;
    background: var(--wt-m-tint);
    color: #fff;
    font-family: var(--wt-m-font);
    font-weight: 700;
    font-size: 15px;
  }
}

/* ==========================================================================
   FASE 4 — SETTORI: hub (it/pagine-settori.php) + dettaglio (it/pag-settore.php)
   100% CSS, ZERO modifica ai file PHP: $testo, $titolo, sector_label e il
   markup <dl class="st-faq"> restano bit-per-bit identici a prima (lo schema
   FAQPage/Article estratto in inc-header.php dipende da quella stringa
   esatta). Qui solo reskin delle classi st-* esistenti.
   ========================================================================== */
@media (max-width: 767px) {

  /* Hub settori: forziamo 2 colonne (il prototipo/screenshot le mostra
     affiancate) al posto dello stack a 1 colonna di Bootstrap sotto md. */
  .st-index-grid-wrap .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
  }
  .st-index-col { width: auto; max-width: none; flex: none; padding: 0; margin-bottom: 0; }

  .st-sector-card {
    padding: 18px 14px 16px;
    border-radius: var(--wt-m-r-md);
    border: none;
    box-shadow: none;
  }
  .st-sector-card__icon {
    width: 36px; height: 36px;
    background: var(--wt-m-chip-bg);
    color: var(--wt-m-tint);
    border-radius: var(--wt-m-r-sm);
    font-size: 16px;
  }
  .st-sector-card__title { font-size: 14.5px; font-family: var(--wt-m-font); }
  .st-sector-card__desc  { font-size: 12.5px; margin-bottom: 10px; font-family: var(--wt-m-font); }
  .st-index-title,
  .st-index-sub { font-family: var(--wt-m-font); }

  /* Dettaglio settore: hero, stat strip, pain card, TOC, articolo, FAQ,
     related/prodotti/CTA — stesso markup, solo tipografia e card piatte. */
  .st-hero-title,
  .st-hero-sub,
  .st-section-title,
  .st-pain-title,
  .st-pain-text,
  .st-article,
  .st-faq dt,
  .st-faq dd,
  .st-related-title,
  .st-related-excerpt,
  .st-prod-card-title,
  .st-cta-title,
  .st-cta-sub { font-family: var(--wt-m-font); }

  .st-proof-value { font-size: 26px; font-weight: 800; }

  .st-pain-card,
  .st-related-card,
  .st-blog-card,
  .st-prod-card {
    border-radius: var(--wt-m-r-md) !important;
    border: none !important;
    box-shadow: none !important;
  }

  .st-toc { border-radius: var(--wt-m-r-md); overflow: hidden; }
  .st-toc-summary i:first-child { color: var(--wt-m-tint); }

  .st-cta-btn { border-radius: var(--wt-m-r-sm) !important; }

  /* ponytail: FAQ (.st-faq) resta un <dl> statico, non un accordion —
     avvolgerla in <details> per-domanda richiederebbe un regex sull'HTML
     gia' pubblicato di 10 pagine (rischio di rompere markup non uniforme),
     a fronte di un beneficio marginale visto che il TOC gia' offre
     accordion/collasso per navigare l'articolo. Aggiungere se richiesto. */
}

/* ==========================================================================
   FASE 5 — RISORSE + FAQ
   (it/pag-faq.php, it/pag-risorse-hub.php, it/pag-risorse-*.php)
   pag-faq.php usa gia' un accordion Bootstrap nativo (data-toggle="collapse",
   stesso componente gia' bundlato in plugins.js) — solo reskin, nessuna
   nuova logica JS. Le pagine guida (pag-risorse-*.php) riusano .st-hero/
   .st-article/.st-toc/.st-cta gia' coperte dalla FASE 4 sopra: qui serve
   solo l'hub (.rh-*) e l'accordion FAQ (.pag-faq/.faq-*).
   ========================================================================== */
@media (max-width: 767px) {

  /* Hub risorse: card piatte iOS, stesso layout a 1 colonna gia' esistente */
  .rh-hero-title, .rh-hero-sub,
  .rh-category-title, .rh-category-label,
  .rh-card-title, .rh-card-desc,
  .rh-tool-title, .rh-tool-desc { font-family: var(--wt-m-font); }

  .rh-card, .rh-tool-card {
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--wt-m-r-md) !important;
  }
  .rh-card-icon, .rh-tool-icon {
    background: var(--wt-m-chip-bg);
    border-radius: var(--wt-m-r-sm);
  }
  .rh-card-icon i, .rh-tool-icon i { color: var(--wt-m-tint); }
  .rh-category-icon { border-radius: var(--wt-m-r-sm); }

  /* FAQ: raggruppa ogni sezione come card bianca su fondo grigio, invece
     della lista flat con separatori a piena larghezza. L'accordion Bootstrap
     (collapse) resta invariato: stessi id/data-toggle, solo restyle. */
  .pag-faq { background: var(--wt-m-bg); }
  .faq-cat-heading { font-family: var(--wt-m-font); }

  .pag-faq .accordion {
    background: var(--wt-m-card);
    border-radius: var(--wt-m-r-md);
    padding: 0 16px;
  }
  .pag-faq .accordion > .card,
  .pag-faq .accordion > .card:first-child { border-color: var(--wt-m-sep); }

  .pag-faq .accordion .card-header h3,
  .pag-faq .accordion .card-body { font-family: var(--wt-m-font); }
}

/* ==========================================================================
   FASE 6 — CONTATTI (it/pag-contatti.php)
   Form e validazione server-side invariati (stesso <form method="post">,
   stessi name attribute, stesso recaptcha). Qui: restyle hero (large-title
   invece di banner nero pieno), input "grouped list" iOS, checkbox privacy
   -> switch iOS (solo CSS, la semantica resta un checkbox nativo), e
   l'unica aggiunta di markup della fase: gli uffici EU sono ora avvolti in
   <details open> (vedi it/pag-contatti.php) cosi' l'accordion mobile non
   cambia nulla per desktop/no-JS (resta aperto di default ovunque).
   ========================================================================== */
@media (max-width: 767px) {

  .wt-contact-hero {
    background: var(--wt-m-bg);
    text-align: left;
    padding: 20px 0 16px;
  }
  .wt-contact-hero-title {
    color: var(--wt-m-black);
    font-family: var(--wt-m-font);
    font-size: 28px;
    font-weight: 800;
  }
  .wt-contact-hero-sub { color: var(--wt-m-text-2); font-family: var(--wt-m-font); }

  .wt-contact-form-wrap {
    border-radius: var(--wt-m-r-md);
    box-shadow: none;
    padding: 20px 18px 22px;
  }
  .wt-contact-form-title,
  .wt-contact-sidebar-title,
  .wt-contact-info-label,
  .wt-contact-info-value,
  .wt-contact-trust-item,
  .wt-contact-agents-title,
  .wt-agent-country,
  .wt-agent-card p { font-family: var(--wt-m-font); }

  /* Input "grouped list": pillola grigia invece del rettangolo bordato */
  .wt-contact-form-wrap input[type="text"],
  .wt-contact-form-wrap input[type="email"],
  .wt-contact-form-wrap textarea {
    background: var(--wt-m-bg);
    border: none;
    border-radius: var(--wt-m-r-sm);
    height: 48px;
    margin-bottom: 12px;
    font-family: var(--wt-m-font);
  }
  .wt-contact-form-wrap textarea { height: 100px; padding-top: 14px; }

  /* Checkbox privacy -> switch iOS (capsula 44x26, pallino scorrevole) */
  .input-info-save input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 44px; height: 26px;
    border-radius: 13px;
    background: #dcdce0;
    vertical-align: middle;
    margin-right: 8px;
    flex-shrink: 0;
    transition: background .2s;
  }
  .input-info-save input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .2s;
  }
  .input-info-save input[type="checkbox"]:checked { background: var(--wt-m-success); }
  .input-info-save input[type="checkbox"]:checked::before { transform: translateX(18px); }

  .wt-contact-meeting-btn,
  .wt-contact-form-wrap button[type="submit"] { border-radius: var(--wt-m-r-sm) !important; }

  /* Uffici e agenti EU: <details open> -> accordion richiudibile solo qui */
  .wt-contact-agents-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
  }
  .wt-contact-agents-title-wrap::-webkit-details-marker { display: none; }
  .wt-agents-chevron i { color: var(--wt-m-text-2); transition: transform .2s; }
  .wt-agents-details[open] .wt-agents-chevron i { transform: rotate(180deg); }
}