/* Seconda anteprima privata: cambia la struttura mobile, non l'identita del sito. */
.mobile-real-stage { display: none; }

@media (max-width: 800px) {
  .ms-shell { display: none !important; }

  /* La hero resta quella originale: logo, fotografie e pillola PC Service. */
  .phero { padding-bottom: 22px !important; }
  .hero-panel [data-hero-btn] { display: none !important; }

  /* I tre riquadri duplicati spariscono: la pillola e' l'unico comando. */
  .service-summary { display: none !important; }

  /* Il contenuto scelto compare davvero subito sotto la hero. */
  .mobile-real-stage {
    display: block;
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 0 24px;
    background: #f4f6f9;
    border-bottom: 1px solid #e3e6ea;
  }
  .mobile-real-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px 5px;
  }
  .mobile-real-stage-head span {
    color: #e50914;
    font: 800 10px/1 'DM Sans', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .mobile-real-stage-head small {
    color: #7d8792;
    font: 600 10px/1 'DM Sans', sans-serif;
  }
  .mobile-real-frame-wrap {
    position: relative;
    width: 100%;
    min-height: 270px;
    overflow: hidden;
    background: #f4f6f9;
  }
  .mobile-real-frame {
    display: block;
    width: 100%;
    min-height: 270px;
    border: 0;
    background: #f4f6f9;
  }
  .mobile-real-loading {
    position: absolute;
    inset: 18px 16px auto;
    display: grid;
    place-items: center;
    min-height: 180px;
    border: 1px solid #e3e6ea;
    border-radius: 18px;
    background: #fff;
    color: #5f6872;
    font: 700 13px/1.3 'DM Sans', sans-serif;
  }
  .mobile-real-loading[hidden] { display: none !important; }

  /* La vecchia anteprima prodotti della home sarebbe un doppione del modulo Compra. */
  .rec { display: none !important; }

  /* Tutto il resto del sito resta sotto, con la stessa grafica originale. */
  .repair-hub { margin-top: 28px !important; }
  .home-intro { margin-top: 0 !important; }

  /* Footer mobile corto: marchio in una riga e quattro sezioni affiancate/espandibili. */
  footer { margin-top: 20px !important; padding: 14px 0 12px !important; }
  footer .wrap { padding-inline: 12px !important; }
  footer .fgrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  footer .fgrid > :first-child {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 3px !important;
    padding: 0 4px 9px;
    border-bottom: 1px solid #20242a;
  }
  footer .flogo { height: 32px !important; width: auto; margin: 0 !important; }
  footer .soc { display: flex; gap: 6px; margin: 0 !important; }
  footer .soc a { width: 32px !important; height: 32px !important; }
  footer .fcol {
    min-width: 0;
    padding: 0 !important;
    border: 1px solid #24282e;
    border-radius: 11px;
    background: #090a0c;
    overflow: hidden;
  }
  footer .fcol > b.h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 42px;
    margin: 0 !important;
    padding: 0 11px;
    font-size: 12px !important;
    cursor: pointer;
    user-select: none;
  }
  footer .fcol > b.h::after { content: '+'; color: #e50914; font-size: 18px; font-weight: 500; }
  footer .fcol.is-open { grid-column: 1 / -1; padding-bottom: 7px !important; }
  footer .fcol.is-open > b.h::after { content: '\2212'; }
  footer .fcol > a { display: none !important; margin: 0 10px; padding: 7px 2px !important; font-size: 11.5px !important; line-height: 1.25; border-top: 1px solid #1d2126; }
  footer .fcol.is-open > a { display: block !important; }
  footer .fic { width: 12px !important; height: 12px !important; margin-right: 5px !important; }
  footer .lg { margin: 9px 0 0 !important; font-size: 9.5px !important; line-height: 1.45; text-align: center; }

}