/* ART IMAGE v45 — desktop menu lower + mobile layout from sketch */

/* ---------------------------------------------------------
   DESKTOP
   Keep the logo/sidebar exactly as V44; move ONLY the five menu words
   substantially lower, creating a generous breathing space below logo.
   --------------------------------------------------------- */
@media screen and (min-width:821px) {
  #aiMobileBrandV45,
  #aiMobileBottomNavV45 { display:none !important; }

  /* About +90 px on a 1700px-wide monitor; scales naturally on smaller PCs. */
  #aiUnifiedNavV44 .ai-v44-home     { top:19.05vw !important; }
  #aiUnifiedNavV44 .ai-v44-galleria { top:24.40vw !important; }
  #aiUnifiedNavV44 .ai-v44-quadri   { top:29.75vw !important; }
  #aiUnifiedNavV44 .ai-v44-acquisti { top:35.10vw !important; }
  #aiUnifiedNavV44 .ai-v44-contatti { top:40.45vw !important; }
}

/* ---------------------------------------------------------
   MOBILE / PORTRAIT-TABLET
   Sketch implementation:
   1. logo alone on black at top;
   2. black softly fades into the site background;
   3. page/animation in the middle;
   4. fixed black menu at bottom: 3 items + 2 items.
   --------------------------------------------------------- */
@media screen and (max-width:820px) {
  /* The old arc-menu is not used on mobile anymore. */
  #aiUnifiedNavV44 { display:none !important; }

  html, body { overflow-x:hidden !important; }
  body {
    padding-bottom:calc(98px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #imPage {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
  #imContent,
  #imContentGraphics {
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    box-sizing:border-box !important;
  }

  /* TOP LOGO AREA */
  #aiMobileBrandV45 {
    display:block !important;
    position:relative !important;
    z-index:120 !important;
    width:100vw !important;
    height:clamp(176px, 41vw, 208px) !important;
    margin:0 !important;
    padding:0 !important;
    background:#000 !important;
    overflow:visible !important;
  }
  #aiMobileBrandV45 img {
    position:absolute !important;
    z-index:2 !important;
    top:0 !important;
    left:50% !important;
    width:clamp(185px, 43vw, 218px) !important;
    height:auto !important;
    max-width:none !important;
    transform:translateX(-50%) !important;
    display:block !important;
  }
  #aiMobileBrandV45::after {
    content:"" !important;
    position:absolute !important;
    z-index:1 !important;
    left:0 !important;
    right:0 !important;
    bottom:-54px !important;
    height:62px !important;
    pointer-events:none !important;
    background:linear-gradient(to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.88) 20%,
      rgba(0,0,0,.60) 47%,
      rgba(0,0,0,.28) 72%,
      rgba(0,0,0,0) 100%) !important;
  }

  /* BOTTOM MENU */
  #aiMobileBottomNavV45 {
    display:block !important;
    position:fixed !important;
    z-index:30000 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    margin:0 !important;
    padding:0 0 env(safe-area-inset-bottom, 0px) !important;
    box-sizing:border-box !important;
    background:rgba(0,0,0,.97) !important;
    border-top:1px solid rgba(255,255,255,.20) !important;
    box-shadow:0 -5px 18px rgba(0,0,0,.55) !important;
  }

  #aiMobileBottomNavV45::after {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:48px !important;
    height:1px !important;
    background:rgba(255,255,255,.12) !important;
    pointer-events:none !important;
  }

  #aiMobileBottomNavV45 .ai-v45-bottom-link {
    position:absolute !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:48px !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    background:transparent !important;
    text-decoration:none !important;
  }
  #aiMobileBottomNavV45 .ai-v45-bottom-link img {
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-height:43px !important;
    max-width:92% !important;
    margin:0 auto !important;
    padding:0 !important;
  }

  /* Row 1: Home | Galleria | Quadri */
  #aiMobileBottomNavV45 .ai-v45-home {
    left:0 !important; top:0 !important; width:33.3333% !important;
    border-right:1px solid rgba(255,255,255,.12) !important;
  }
  #aiMobileBottomNavV45 .ai-v45-galleria {
    left:33.3333% !important; top:0 !important; width:33.3334% !important;
    border-right:1px solid rgba(255,255,255,.12) !important;
  }
  #aiMobileBottomNavV45 .ai-v45-quadri {
    left:66.6667% !important; top:0 !important; width:33.3333% !important;
  }

  /* Row 2: Acquisti | Contatti */
  #aiMobileBottomNavV45 .ai-v45-acquisti {
    left:0 !important; top:48px !important; width:50% !important;
    border-right:1px solid rgba(255,255,255,.12) !important;
  }
  #aiMobileBottomNavV45 .ai-v45-contatti {
    left:50% !important; top:48px !important; width:50% !important;
  }

  /* Active page: color only, never size/position. */
  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;
  }

  /* With the old arc removed, leave a pleasant gap between logo fade and animation. */
  body.ai-home-page #aiMobileHomeSlideshow.ai-mobile-home-active {
    margin-top:5.5vw !important;
    margin-bottom:7px !important;
  }

  /* Language selector remains available without consuming a whole row. */
  body.ai-home-page .ai-home-top-row {
    position:relative !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    z-index:140 !important;
  }
  body.ai-home-page .ai-home-top-row > .ai-home-top-col {
    height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important;
  }
  body.ai-home-page .ai-home-top-row .ai-language-picker {
    position:absolute !important;
    top:10px !important;
    left:10px !important;
    margin:0 !important;
    z-index:150 !important;
  }
}

@media screen and (max-width:360px) {
  body { padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  #aiMobileBrandV45 { height:162px !important; }
  #aiMobileBrandV45 img { width:178px !important; }
  #aiMobileBrandV45::after { bottom:-45px !important; height:54px !important; }

  #aiMobileBottomNavV45 {
    height:calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #aiMobileBottomNavV45::after { top:43px !important; }
  #aiMobileBottomNavV45 .ai-v45-bottom-link { height:43px !important; }
  #aiMobileBottomNavV45 .ai-v45-acquisti,
  #aiMobileBottomNavV45 .ai-v45-contatti { top:43px !important; }
  #aiMobileBottomNavV45 .ai-v45-bottom-link img { max-height:39px !important; }
}