/* =====================================================================
   ART IMAGE — V67
   Mobile:
   - usa un solo sfondo mobile, senza sovrapposizione col vecchio bgStretch
   - forza lo sfondo a coprire il viewport reale
   - Home: abbassa leggermente la scritta servizi sopra il menu
   ===================================================================== */

@media screen and (max-width:820px) {

  html {
    background:#000 !important;
  }

  body {
    position:relative !important;
    isolation:isolate !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    background:#000 !important;
    background-image:none !important;
  }

  body::before {
    content:"" !important;
    display:block !important;
    position:fixed !important;
    z-index:-1 !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:auto !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    pointer-events:none !important;
    background-color:#000 !important;
    background-image:url("mobile-bg-v66.jpg") !important;
    background-repeat:no-repeat !important;
    background-position:center top !important;
    background-size:100vw auto !important;
    transform:none !important;
  }

  body.ai-home-page::before {
    background-position:center 205px !important;
  }

  #imPage,
  #imContent,
  #imContentGraphics {
    background-color:transparent !important;
    background-image:none !important;
    background-attachment:scroll !important;
  }

  /* La scritta resta sopra il menu ma scende di circa 10 px. */
  body.ai-home-page #aiHomeServicesV56 {
    bottom:calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media screen and (max-width:360px) {
  body.ai-home-page #aiHomeServicesV56 {
    bottom:calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media screen and (max-width:820px) {

  /* SFONDO MOBILE: usa quello definitivo giusto, non quello ripetuto */
  html {
    background: #000 url("responsive-bg.jpg") center top / cover no-repeat !important;
    background-attachment: scroll !important;
  }

  body {
    background: transparent !important;
    background-image: none !important;
  }

  body::before {
    display: none !important;
    background-image: none !important;
  }

  #imPage,
  #imContent,
  #imContentGraphics {
    background-color: transparent !important;
    background-image: none !important;
  }

  /* MENU IN BASSO: nasconde le immagini e usa testo vero centrato */
  html:not(.ai-translated) #aiMobileBottomNavV45 .ai-v45-bottom-link > img {
    display: none !important;
  }

  html:not(.ai-translated) #aiMobileBottomNavV45 .ai-v55-menu-text {
    display: flex !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;

    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: 'Segoe Print', cursive !important;
    font-size: clamp(13px, 3.3vw, 17px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;

    transform: translateY(1px) !important;

    text-shadow:
      -1px -1px 1px #000,
       1px -1px 1px #000,
      -1px  1px 1px #000,
       1px  1px 1px #000,
       0 0 5px #000 !important;
  }

  /* evidenzia la pagina attiva in giallo */
  body.ai-home-page #aiMobileBottomNavV45 .ai-v45-home .ai-v55-menu-text,
  body.ai-gallery-page #aiMobileBottomNavV45 .ai-v45-galleria .ai-v55-menu-text,
  body.ai-quadri-page #aiMobileBottomNavV45 .ai-v45-quadri .ai-v55-menu-text,
  body.ai-shop-page #aiMobileBottomNavV45 .ai-v45-acquisti .ai-v55-menu-text,
  body.ai-contact-page #aiMobileBottomNavV45 .ai-v45-contatti .ai-v55-menu-text {
    color: #ffd21a !important;
    -webkit-text-fill-color: #ffd21a !important;
  }

  /* HOME: abbassa un po' la scritta sopra il menu */
  body.ai-home-page #aiHomeServicesV56 {
    bottom: calc(114px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media screen and (max-width:360px) {
  body.ai-home-page #aiHomeServicesV56 {
    bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html:not(.ai-translated) #aiMobileBottomNavV45 .ai-v55-menu-text {
    font-size: 12px !important;
  }
}