/* =====================================================================
   ART IMAGE — V71
   - desktop: distanza costante tra banda menu e contenuti
   - desktop: menu verticale stabile mentre la finestra cambia larghezza
   - Acquisti desktop: nota sempre sbandierata a sinistra
   - Quadri desktop: nota della stessa grandezza di Acquisti
   - Home telefono: animazione leggermente più in alto
   ===================================================================== */

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

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

  /* La banda/menu non cambia più larghezza con il viewport. */
  #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;
  }

  /* Posizioni riferite alla grafica originale larga 145 px.
     In questo modo non scivolano su/giù quando si allarga la finestra. */
  #aiUnifiedNavV44 .ai-v44-home     { top:213px !important; }
  #aiUnifiedNavV44 .ai-v44-galleria { top:295px !important; }
  #aiUnifiedNavV44 .ai-v44-quadri   { top:377px !important; }
  #aiUnifiedNavV44 .ai-v44-acquisti { top:459px !important; }
  #aiUnifiedNavV44 .ai-v44-contatti { top:541px !important; }

  /* Il contenitore pagina parte sempre 24 px dopo la fine della banda.
     #imContent conserva i 145 px storici interni di WebSite X5,
     quindi il margine di #imPage è calcolato di conseguenza. */
  #imPage {
    width:min(960px, calc(100vw - var(--ai-desktop-menu-left) - 40px)) !important;
    max-width:960px !important;
    margin-left:calc(var(--ai-desktop-menu-left) + var(--ai-desktop-content-gap)) !important;
    margin-right:0 !important;
  }

  body.ai-gallery-page #imContent,
  body.ai-quadri-page #imContent,
  body.ai-shop-page #imContent,
  body.ai-contact-page #imContent {
    width:calc(100% - 145px) !important;
    max-width:calc(100% - 145px) !important;
    margin-left:145px !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 {
    width:calc(100% - 145px) !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;
    box-sizing:border-box !important;
  }

  /* ACQUISTI: la frase non torna più centrata quando si ridimensiona. */
  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;
  }

  body.ai-shop-page .ai-order-note-text {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
    text-align-last:left !important;
    white-space:normal !important;
  }

  /* QUADRI: stessa misura della scritta originale di Acquisti (fs27). */
  body.ai-quadri-page .ai-top-note-text,
  body.ai-quadri-page .ai-top-note-text *,
  body.ai-quadri-page .ai-top-note-text .fs19,
  body.ai-quadri-page .ai-top-note-link,
  body.ai-quadri-page .ai-top-note-link * {
    font-size:27px !important;
    line-height:36px !important;
  }
}

/* Home solo in formato telefono verticale:
   sposto visivamente la presentazione di poco verso l'alto.
   Non tocco né logo né scritta servizi. */
@media screen and (max-width:699px) and (orientation:portrait) {
  body.ai-home-page #aiMobileHomeSlideshow.ai-mobile-home-active {
    transform:translateY(-18px) !important;
  }
}

@media screen and (max-width:360px) and (orientation:portrait) {
  body.ai-home-page #aiMobileHomeSlideshow.ai-mobile-home-active {
    transform:translateY(-14px) !important;
  }
}