/* =====================================================================
   ART IMAGE — V47
   Rifiniture mobile richieste:
   - logo Home +20%
   - animazione Home molto più in basso
   - menu inferiore sempre interamente visibile
   - testi Galleria/Quadri/Acquisti più leggibili senza cambiare stile
   - sfondo mobile continuo, senza ripetizioni evidenti
   - fascia superiore sfumata, non con bordino netto
   - selettore Lingua trasparente: solo testo + freccia
   ===================================================================== */

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

  /* ---------------------------------------------------------
     SFONDO MOBILE CONTINUO
     Un'unica immagine fissa e senza ripetizioni: niente "stacchi"
     evidenti fra una ripetizione e l'altra.
     --------------------------------------------------------- */
  html {
    background-color:#000 !important;
    background-image:url('responsive-bg.jpg') !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-attachment:fixed !important;
  }

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

  #imContent {
    background-image:none !important;
    background-repeat:no-repeat !important;
  }

  /* Nelle pagine senza logo, niente barra nera netta:
     una breve sfumatura superiore che si fonde nello sfondo. */
  body:not(.ai-home-page) #imPage {
    position:relative !important;
    padding-top:58px !important;
  }

  body:not(.ai-home-page) #imPage::before {
    content:"" !important;
    position:absolute !important;
    z-index:1 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:86px !important;
    pointer-events:none !important;
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.72) 36%,
      rgba(0,0,0,.30) 68%,
      rgba(0,0,0,0) 100%
    ) !important;
  }

  #imContent {
    position:relative !important;
    z-index:2 !important;
  }

  /* ---------------------------------------------------------
     HOME: logo circa +20% rispetto alla V46.
     --------------------------------------------------------- */
  body.ai-home-page #aiMobileBrandV45 {
    height:clamp(266px, 61vw, 318px) !important;
  }

  body.ai-home-page #aiMobileBrandV45 img {
    width:clamp(278px, 64.5vw, 328px) !important;
    top:0 !important;
  }

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

  /* L'animazione viene portata decisamente più in basso. */
  body.ai-home-page #aiMobileHomeSlideshow.ai-mobile-home-active {
    margin-top:clamp(88px, 20vw, 118px) !important;
    margin-bottom:10px !important;
  }

  /* ---------------------------------------------------------
     MENU INFERIORE: lascia un margine reale su entrambi i lati.
     Non usa 100vw, quindi scrollbar e bordi non possono tagliare
     il pulsante di destra.
     --------------------------------------------------------- */
  #aiMobileBottomNavV45 {
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    border-radius:12px 12px 0 0 !important;
  }

  #aiMobileBottomNavV45 .ai-v45-bottom-link {
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  #aiMobileBottomNavV45 .ai-v45-bottom-link img {
    max-width:82% !important;
    min-width:0 !important;
  }

  /* ---------------------------------------------------------
     LINGUA: solo testo e freccia sul nero/sfondo, niente bordino,
     niente scatola, niente ombra rossa.
     --------------------------------------------------------- */
  body .ai-language-picker-mobile {
    display:inline-flex !important;
    position:fixed !important;
    z-index:60000 !important;
    top:10px !important;
    right:14px !important;
    left:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  body .ai-language-picker-mobile::after {
    content:"▾" !important;
    right:3px !important;
    color:#fff !important;
    font-size:12px !important;
    text-shadow:0 1px 3px #000 !important;
  }

  body .ai-language-picker-mobile .ai-language-select {
    appearance:none !important;
    -webkit-appearance:none !important;
    width:auto !important;
    min-width:72px !important;
    max-width:112px !important;
    min-height:30px !important;
    height:30px !important;
    padding:4px 18px 4px 4px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:none !important;
    outline:none !important;
    font-size:12px !important;
    font-weight:600 !important;
    text-shadow:0 1px 3px #000, 0 0 4px #000 !important;
  }

  body .ai-language-picker-mobile .ai-language-select:hover,
  body .ai-language-picker-mobile .ai-language-select:focus {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body .ai-language-picker-mobile .ai-language-select option {
    background:#111 !important;
    color:#fff !important;
  }

  /* ---------------------------------------------------------
     TESTI SUPERIORI GALLERIA / QUADRI
     Mantengo Segoe Print e i colori, ma aumento leggibilità:
     dimensione leggermente maggiore + ombra nera morbida e diffusa
     + alone scuro sfumato senza riquadro/bordo.
     --------------------------------------------------------- */
  body.ai-gallery-page .ai-top-note-column,
  body.ai-quadri-page .ai-top-note-column {
    max-width:calc(100% - 12px) !important;
    padding:0 !important;
  }

  body.ai-gallery-page .ai-top-note-text,
  body.ai-gallery-page .ai-top-note-text .fs19,
  body.ai-quadri-page .ai-top-note-text,
  body.ai-quadri-page .ai-top-note-text .fs19 {
    font-family:'Segoe Print' !important;
    font-size:clamp(14px, 3.75vw, 18px) !important;
    line-height:1.38 !important;
    font-weight:400 !important;
  }

  body.ai-gallery-page .ai-top-note-text,
  body.ai-quadri-page .ai-top-note-text {
    position:relative !important;
    display:inline-block !important;
    width:auto !important;
    max-width:100% !important;
    padding:7px 10px 8px !important;
    border:0 !important;
    border-radius:18px !important;
    background:radial-gradient(
      ellipse at center,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.36) 52%,
      rgba(0,0,0,.10) 76%,
      rgba(0,0,0,0) 100%
    ) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    -webkit-text-stroke:.20px rgba(0,0,0,.90) !important;
    text-shadow:
      -1px -1px 1px rgba(0,0,0,.95),
       1px -1px 1px rgba(0,0,0,.95),
      -1px  1px 1px rgba(0,0,0,.95),
       1px  1px 1px rgba(0,0,0,.95),
       0 0 4px #000,
       0 0 9px rgba(0,0,0,.95) !important;
  }

  body.ai-gallery-page .ai-top-note-link,
  body.ai-quadri-page .ai-top-note-link {
    color:#ff2418 !important;
    -webkit-text-fill-color:#ff2418 !important;
    font-family:'Segoe Print' !important;
    font-size:inherit !important;
    text-shadow:
      -1px -1px 1px #000,
       1px -1px 1px #000,
      -1px  1px 1px #000,
       1px  1px 1px #000,
       0 0 5px #000,
       0 0 9px #000 !important;
  }

  /* ---------------------------------------------------------
     ACQUISTI: stessa soluzione ma un po' più grande,
     perché nello screenshot risultava troppo piccolo.
     --------------------------------------------------------- */
  body.ai-shop-page .ai-order-note-text,
  body.ai-shop-page .ai-order-note-text .cf1 {
    font-family:'Segoe Print' !important;
    font-size:clamp(16px, 4.25vw, 20px) !important;
    line-height:1.42 !important;
    font-weight:400 !important;
  }

  body.ai-shop-page .ai-order-note-text {
    position:relative !important;
    display:block !important;
    width:fit-content !important;
    max-width:calc(100% - 18px) !important;
    margin:12px auto 16px !important;
    padding:9px 14px 10px !important;
    border:0 !important;
    border-radius:22px !important;
    background:radial-gradient(
      ellipse at center,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.38) 52%,
      rgba(0,0,0,.10) 78%,
      rgba(0,0,0,0) 100%
    ) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    -webkit-text-stroke:.20px rgba(0,0,0,.92) !important;
    text-shadow:
      -1px -1px 1px #000,
       1px -1px 1px #000,
      -1px  1px 1px #000,
       1px  1px 1px #000,
       0 0 5px #000,
       0 0 10px #000 !important;
  }

  body.ai-shop-page .ai-order-note-link {
    font-size:inherit !important;
    color:#ff2418 !important;
    -webkit-text-fill-color:#ff2418 !important;
  }
}

@media screen and (max-width:360px) {
  body.ai-home-page #aiMobileBrandV45 {
    height:250px !important;
  }

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

  body.ai-home-page #aiMobileHomeSlideshow.ai-mobile-home-active {
    margin-top:72px !important;
  }

  #aiMobileBottomNavV45 {
    left:6px !important;
    right:6px !important;
  }

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