/* =====================================================================
   ART IMAGE — V46
   Mobile:
   - logo SOLO in Home
   - logo Home +25% circa
   - selettore lingua fisso in alto a destra su tutte le pagine
   - menu inferiore con pulsanti "vetro lucido nero"
   - etichette realmente centrate grazie ai PNG ritagliati
   ===================================================================== */

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

  /* ---------------------------------------------------------
     LOGO MOBILE
     --------------------------------------------------------- */

  /* Nelle pagine diverse da Home il blocco logo scompare del tutto:
     non lascia nessuno spazio vuoto. */
  body:not(.ai-home-page) #aiMobileBrandV45 {
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /* In Home il logo resta, ma è circa il 25% più grande della v45. */
  body.ai-home-page #aiMobileBrandV45 {
    display:block !important;
    position:relative !important;
    z-index:120 !important;
    width:100vw !important;
    height:clamp(220px, 51.5vw, 260px) !important;
    margin:0 !important;
    padding:0 !important;
    background:#000 !important;
    overflow:visible !important;
  }

  body.ai-home-page #aiMobileBrandV45 img {
    position:absolute !important;
    z-index:2 !important;
    top:0 !important;
    left:50% !important;
    width:clamp(232px, 53.75vw, 273px) !important;
    height:auto !important;
    max-width:none !important;
    transform:translateX(-50%) !important;
    display:block !important;
  }

  body.ai-home-page #aiMobileBrandV45::after {
    bottom:-58px !important;
    height:68px !important;
  }

  /* ---------------------------------------------------------
     LINGUA — SEMPRE IN ALTO A DESTRA E CLICCABILE
     --------------------------------------------------------- */

  /* Annulla le vecchie regole che lo nascondevano in Galleria/Quadri. */
  body .ai-language-picker {
    display:inline-flex !important;
    position:fixed !important;
    z-index:60000 !important;
    top:10px !important;
    right:10px !important;
    left:auto !important;
    bottom:auto !important;
    margin:0 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    isolation:isolate !important;
  }

  body .ai-language-picker::after {
    pointer-events:none !important;
  }

  body .ai-language-select {
    min-width:124px !important;
    max-width:min(164px, 46vw) !important;
    min-height:36px !important;
    padding:7px 31px 7px 12px !important;
    font-size:12px !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  /* La vecchia collocazione dentro la riga Home non deve più influire. */
  body.ai-home-page .ai-home-top-row .ai-language-picker {
    position:fixed !important;
    top:10px !important;
    right:10px !important;
    left:auto !important;
    margin:0 !important;
    z-index:60000 !important;
  }

  /* ---------------------------------------------------------
     MENU MOBILE — VETRO LUCIDO NERO
     --------------------------------------------------------- */

  body {
    padding-bottom:calc(126px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #aiMobileBottomNavV45 {
    display:grid !important;
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows:repeat(2, 50px) !important;
    gap:7px !important;

    position:fixed !important;
    z-index:50000 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:calc(121px + env(safe-area-inset-bottom, 0px)) !important;
    margin:0 !important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing:border-box !important;

    background:
      linear-gradient(180deg,
        rgba(2,2,3,.76) 0%,
        rgba(0,0,0,.92) 44%,
        rgba(0,0,0,.98) 100%) !important;
    border-top:1px solid rgba(255,255,255,.14) !important;
    box-shadow:
      0 -8px 22px rgba(0,0,0,.58),
      inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter:blur(13px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(13px) saturate(120%) !important;
  }

  #aiMobileBottomNavV45::after {
    display:none !important;
  }

  /* Ogni pulsante è un vero "vetro nero" separato. */
  #aiMobileBottomNavV45 .ai-v45-bottom-link {
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    left:auto !important;
    width:auto !important;
    height:50px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:5px 8px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    border-radius:13px !important;
    border:1px solid rgba(255,255,255,.20) !important;
    text-decoration:none !important;

    background:
      linear-gradient(180deg,
        rgba(47,47,52,.72) 0%,
        rgba(18,18,21,.82) 35%,
        rgba(4,4,6,.94) 68%,
        rgba(0,0,0,.98) 100%) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 8px 14px rgba(255,255,255,.035),
      inset 0 -1px 0 rgba(0,0,0,.90),
      0 3px 8px rgba(0,0,0,.50) !important;

    backdrop-filter:blur(10px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(125%) !important;
  }

  /* Riflesso lucido superiore del vetro. */
  #aiMobileBottomNavV45 .ai-v45-bottom-link::before {
    content:"" !important;
    position:absolute !important;
    z-index:1 !important;
    left:8px !important;
    right:8px !important;
    top:3px !important;
    height:42% !important;
    border-radius:10px 10px 46% 46% / 9px 9px 42% 42% !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.055) 58%,
      rgba(255,255,255,0) 100%) !important;
  }

  #aiMobileBottomNavV45 .ai-v45-bottom-link:active {
    transform:translateY(1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 3px 9px rgba(0,0,0,.50),
      0 1px 4px rgba(0,0,0,.48) !important;
  }

  /* Griglia richiesta: prima riga 3, seconda riga 2. */
  #aiMobileBottomNavV45 .ai-v45-home {
    grid-column:1 / span 2 !important;
    grid-row:1 !important;
  }
  #aiMobileBottomNavV45 .ai-v45-galleria {
    grid-column:3 / span 2 !important;
    grid-row:1 !important;
  }
  #aiMobileBottomNavV45 .ai-v45-quadri {
    grid-column:5 / span 2 !important;
    grid-row:1 !important;
  }
  #aiMobileBottomNavV45 .ai-v45-acquisti {
    grid-column:1 / span 3 !important;
    grid-row:2 !important;
  }
  #aiMobileBottomNavV45 .ai-v45-contatti {
    grid-column:4 / span 3 !important;
    grid-row:2 !important;
  }

  /* Nascondo i vecchi PNG con il canvas 140x46 e uso le versioni ritagliate,
     così la parola è centrata VISIVAMENTE, non solo matematicamente. */
  #aiMobileBottomNavV45 .ai-v45-bottom-link img {
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:86% !important;
    max-height:31px !important;
    margin:auto !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  #aiMobileBottomNavV45 .ai-v45-home img {
    content:url("../menu/mobile/index.png") !important;
  }
  #aiMobileBottomNavV45 .ai-v45-galleria img {
    content:url("../menu/mobile/galleria.png") !important;
  }
  #aiMobileBottomNavV45 .ai-v45-quadri img {
    content:url("../menu/mobile/quadri.png") !important;
  }
  #aiMobileBottomNavV45 .ai-v45-acquisti img {
    content:url("../menu/mobile/acquisti.png") !important;
  }
  #aiMobileBottomNavV45 .ai-v45-contatti img {
    content:url("../menu/mobile/contatti.png") !important;
  }

  /* Pagina attiva: stessa posizione, cambia soltanto il colore della scritta. */
  body.ai-home-page #aiMobileBottomNavV45 .ai-v45-home img,
  body.ai-gallery-page #aiMobileBottomNavV45 .ai-v45-galleria img,
  body.ai-quadri-page #aiMobileBottomNavV45 .ai-v45-quadri img,
  body.ai-shop-page #aiMobileBottomNavV45 .ai-v45-acquisti img,
  body.ai-contact-page #aiMobileBottomNavV45 .ai-v45-contatti img {
    filter:
      brightness(0)
      saturate(100%)
      invert(84%)
      sepia(97%)
      saturate(1750%)
      hue-rotate(1deg)
      brightness(102%)
      contrast(104%) !important;
  }

  /* Un sottile bordo più luminoso identifica il pulsante attivo. */
  body.ai-home-page #aiMobileBottomNavV45 .ai-v45-home,
  body.ai-gallery-page #aiMobileBottomNavV45 .ai-v45-galleria,
  body.ai-quadri-page #aiMobileBottomNavV45 .ai-v45-quadri,
  body.ai-shop-page #aiMobileBottomNavV45 .ai-v45-acquisti,
  body.ai-contact-page #aiMobileBottomNavV45 .ai-v45-contatti {
    border-color:rgba(255,209,0,.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 8px 14px rgba(255,255,255,.035),
      0 0 8px rgba(255,187,0,.13),
      0 3px 8px rgba(0,0,0,.50) !important;
  }

  /* Home: col logo più grande mantengo un piccolo respiro prima dell'animazione. */
  body.ai-home-page #aiMobileHomeSlideshow.ai-mobile-home-active {
    margin-top:5vw !important;
  }
}

@media screen and (max-width:360px) {
  body {
    padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.ai-home-page #aiMobileBrandV45 {
    height:205px !important;
  }

  body.ai-home-page #aiMobileBrandV45 img {
    width:222px !important;
  }

  #aiMobileBottomNavV45 {
    grid-template-rows:repeat(2, 45px) !important;
    gap:6px !important;
    height:calc(108px + env(safe-area-inset-bottom, 0px)) !important;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #aiMobileBottomNavV45 .ai-v45-bottom-link {
    height:45px !important;
    border-radius:11px !important;
    padding:4px 6px !important;
  }

  #aiMobileBottomNavV45 .ai-v45-bottom-link img {
    max-height:27px !important;
    max-width:88% !important;
  }

  body .ai-language-picker {
    top:7px !important;
    right:7px !important;
  }

  body .ai-language-select {
    min-width:112px !important;
    max-width:145px !important;
    min-height:34px !important;
    font-size:11px !important;
  }
}


/* V46 language-picker split: desktop storico + mobile globale */
@media screen and (max-width:820px) {
  body .ai-language-picker-desktop {
    display:none !important;
  }

  body .ai-language-picker-mobile {
    display:inline-flex !important;
    position:fixed !important;
    z-index:60000 !important;
    top:10px !important;
    right:10px !important;
    left:auto !important;
    bottom:auto !important;
    margin:0 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }
}

@media screen and (min-width:821px) {
  body .ai-language-picker-mobile {
    display:none !important;
  }
}


/* Override ad alta specificità: le vecchie v32 nascondevano Lingua
   in Galleria/Quadri. Il picker MOBILE globale deve invece essere visibile. */
@media screen and (max-width:820px) {
  body.ai-home-page .ai-language-picker-mobile,
  body.ai-gallery-page .ai-language-picker-mobile,
  body.ai-quadri-page .ai-language-picker-mobile,
  body.ai-shop-page .ai-language-picker-mobile,
  body.ai-contact-page .ai-language-picker-mobile {
    display:inline-flex !important;
    position:fixed !important;
    z-index:60000 !important;
    top:10px !important;
    right:10px !important;
    left:auto !important;
    bottom:auto !important;
    margin:0 !important;
    pointer-events:auto !important;
  }
}


/* Piccola fascia di respiro sulle pagine mobile senza logo:
   lascia libero il selettore Lingua in alto a destra senza sovrapporre
   titoli/note della pagina. Rimangono comunque oltre 170px recuperati
   rispetto al vecchio blocco logo. */
@media screen and (max-width:820px) {
  body:not(.ai-home-page) #imPage {
    padding-top:48px !important;
    box-sizing:border-box !important;
  }
}