/* =====================================================================
   ART IMAGE — V72
   - PC: i contenuti si allargano/restringono insieme alla finestra
   - PC: distanza costante dalla banda nera del menu
   - PC: voci menu un po' più in basso, con più aria sotto il logo
   - Telefono Home: logo centrato realmente rispetto allo schermo
   - Telefono: note Galleria/Quadri più grandi e leggibili
   - Telefono: scritte del menu inferiore leggermente più grandi
   ===================================================================== */

@media screen and (min-width:821px) {

  html {
    --ai-desktop-menu-left: clamp(24px, 3vw, 60px);
    --ai-desktop-menu-width: 145px;
    --ai-desktop-content-gap: 28px;
    --ai-desktop-right-gap: 22px;
  }

  /* Il menu resta largo 145 px ma le voci scendono un po':
     più spazio fra logo e Home, come nella versione precedentemente approvata. */
  #aiUnifiedNavV44 {
    left:var(--ai-desktop-menu-left) !important;
    width:var(--ai-desktop-menu-width) !important;
    min-width:var(--ai-desktop-menu-width) !important;
    max-width:var(--ai-desktop-menu-width) !important;
    background-size:145px auto !important;
  }

  #aiUnifiedNavV44 .ai-v44-home     { top:243px !important; }
  #aiUnifiedNavV44 .ai-v44-galleria { top:325px !important; }
  #aiUnifiedNavV44 .ai-v44-quadri   { top:407px !important; }
  #aiUnifiedNavV44 .ai-v44-acquisti { top:489px !important; }
  #aiUnifiedNavV44 .ai-v44-contatti { top:571px !important; }

  /* Le vecchie regole con zoom e max-width 960 bloccavano la crescita.
     Le pagine interne ora occupano tutto lo spazio disponibile. */
  body.ai-gallery-page #imPage,
  body.ai-quadri-page #imPage,
  body.ai-shop-page #imPage,
  body.ai-contact-page #imPage {
    zoom:1 !important;
    transform:none !important;
    transform-origin:top left !important;

    width:calc(100vw - var(--ai-desktop-menu-left) - var(--ai-desktop-right-gap)) !important;
    max-width:none !important;
    min-width:0 !important;

    margin-left:var(--ai-desktop-menu-left) !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }

  /* Il contenuto inizia sempre 28 px dopo la fine della banda nera,
     poi cresce fino quasi al bordo destro della finestra. */
  body.ai-gallery-page #imContent,
  body.ai-quadri-page #imContent,
  body.ai-shop-page #imContent,
  body.ai-contact-page #imContent {
    width:calc(100% - var(--ai-desktop-menu-width) - var(--ai-desktop-content-gap)) !important;
    max-width:none !important;
    min-width:0 !important;

    margin-left:calc(var(--ai-desktop-menu-width) + var(--ai-desktop-content-gap)) !important;
    margin-right:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  body.ai-gallery-page #imContentGraphics,
  body.ai-quadri-page #imContentGraphics,
  body.ai-shop-page #imContentGraphics,
  body.ai-contact-page #imContentGraphics {
    left:calc(var(--ai-desktop-menu-width) + var(--ai-desktop-content-gap)) !important;
    right:0 !important;
    width:auto !important;
    max-width:none !important;
  }

  body.ai-gallery-page #imContent > div[style*="width:"],
  body.ai-quadri-page #imContent > div[style*="width:"],
  body.ai-shop-page #imContent > div[style*="width:"],
  body.ai-contact-page #imContent > div[style*="width:"] {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* La griglia di Galleria/Quadri deve poter sfruttare tutta la nuova larghezza. */
  body.ai-gallery-page .ai-fluid-grid,
  body.ai-quadri-page .ai-fluid-grid {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  /* Acquisti continua a tenere la scritta superiore a sinistra. */
  body.ai-shop-page .ai-order-note-text,
  body.ai-shop-page #imCell_3,
  body.ai-shop-page #imCellStyle_3,
  body.ai-shop-page #imTextObject_3,
  body.ai-shop-page #imTextObject_3_tab0,
  body.ai-shop-page #imTextObject_3 .text-inner {
    text-align:left !important;
    text-align-last:left !important;
  }
}

/* =========================================================
   TELEFONO
   ========================================================= */
@media screen and (max-width:820px) {

  /* Centro reale del PNG rispetto al viewport:
     niente più dipendenza da left:50% + translate. */
  body.ai-home-page #aiMobileBrandV45 img {
    left:0 !important;
    right:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
    max-width:calc(100vw - 24px) !important;
  }

  /* Galleria e Quadri: nota più leggibile, senza cambiare il font scelto. */
  body.ai-gallery-page .ai-top-note-text,
  body.ai-gallery-page .ai-top-note-text *,
  body.ai-gallery-page .ai-top-note-link,
  body.ai-gallery-page .ai-top-note-link *,
  body.ai-quadri-page .ai-top-note-text,
  body.ai-quadri-page .ai-top-note-text *,
  body.ai-quadri-page .ai-top-note-link,
  body.ai-quadri-page .ai-top-note-link * {
    font-size:clamp(15px, 4.15vw, 20px) !important;
    line-height:1.35 !important;
    font-weight:700 !important;
  }

  /* Le parole del menu sono PNG originali:
     le ingrandisco appena, senza modificare i pulsanti. */
  html:not(.ai-translated) #aiMobileBottomNavV45 .ai-v45-bottom-link > img {
    max-width:90% !important;
    max-height:32px !important;
    transform:translateY(3px) scale(1.055) !important;
    transform-origin:center center !important;
  }

  /* Se il menu è tradotto e usa testo vero, stesso piccolo incremento. */
  html.ai-translated #aiMobileBottomNavV45 .ai-v55-menu-text {
    font-size:clamp(14px, 3.55vw, 18px) !important;
    font-weight:700 !important;
  }
}

@media screen and (max-width:360px) {
  html:not(.ai-translated) #aiMobileBottomNavV45 .ai-v45-bottom-link > img {
    max-height:30px !important;
    transform:translateY(3px) scale(1.035) !important;
  }

  body.ai-gallery-page .ai-top-note-text,
  body.ai-gallery-page .ai-top-note-text *,
  body.ai-gallery-page .ai-top-note-link,
  body.ai-gallery-page .ai-top-note-link *,
  body.ai-quadri-page .ai-top-note-text,
  body.ai-quadri-page .ai-top-note-text *,
  body.ai-quadri-page .ai-top-note-link,
  body.ai-quadri-page .ai-top-note-link * {
    font-size:14px !important;
  }
}