/* Art Image responsive adaptation — preserves the original WebSite X5 visual style */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, object, embed {
  max-width: 100%;
}

/* Keep the original 960 px composition, but anchor the illustrated menu near the left edge.
   This preserves the original Art Image look instead of centering the whole composition
   on wide landscape screens. */
@media screen and (min-width: 1025px) {
  #imPage {
    margin-left: clamp(24px, 3vw, 60px) !important;
    margin-right: 0 !important;
    transform-origin: top left;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1599px) {
  #imPage { zoom: 1.10; }
}
@media screen and (min-width: 1600px) and (max-width: 1999px) {
  #imPage { zoom: 1.22; }
}
@media screen and (min-width: 2000px) {
  #imPage { zoom: 1.32; }
}

/* Tablet: preserve the original vertical illustrated menu, make content fluid. */
@media screen and (max-width: 1024px) {
  #imPage {
    width: 100% !important;
    max-width: 960px;
    margin: 0 auto !important;
    box-sizing: border-box;
  }

  #imContent {
    width: calc(100% - 145px) !important;
    margin-left: 145px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  #imContentGraphics {
    width: calc(100% - 145px) !important;
  }

  /* WebSite X5 generated fixed row widths. */
  #imContent > div[style*="width:"] {
    width: 100% !important;
    box-sizing: border-box;
  }

  #imContent img {
    max-width: 100% !important;
    height: auto !important;
  }

  #imObjectGallery_1 {
    max-width: 100% !important;
  }

  table {
    max-width: 100% !important;
  }
  input, textarea, select {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Tablet gallery/grid: two columns instead of three fixed 271 px columns. */
@media screen and (min-width: 700px) and (max-width: 900px) {
  #imContent > div[style*="width: 813px"] > div[style*="width: 271px"],
  #imContent > div[style*="width: 814px"] > div[style*="width: 271px"],
  #imContent > div[style*="width: 814px"] > div[style*="width: 270px"],
  #imContent > div[style*="width: 814px"] > div[style*="width: 273px"] {
    width: 50% !important;
    box-sizing: border-box;
  }

  #imContent [id^="imCell_"] ,
  #imContent [id^="imCellStyle_"] {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Phone: same logo and same menu artwork, rearranged for a narrow display. */
@media screen and (max-width: 699px) {
  body {
    min-width: 0 !important;
  }

  #imPage {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #imHeaderBg, #imFooterBg {
    width: 100% !important;
  }

  /* Show the top portion of the original 145px-wide menu artwork as the logo area. */
  #imMnMnGraphics {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 145px !important;
    height: 205px !important;
    margin: 0 auto !important;
    background-image: url('menu.png') !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
  }

  #imMnMn {
    float: none !important;
    width: 100% !important;
    padding: 4px 8px 18px !important;
    box-sizing: border-box;
  }

  #imMnMn > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 4px !important;
    width: 100% !important;
  }

  #imMnMn > ul > li {
    float: none !important;
    margin-top: 0 !important;
    flex: 0 0 140px !important;
  }

  #imContent {
    clear: both !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    padding: 12px 10px 28px !important;
    box-sizing: border-box;
  }

  #imContentGraphics {
    display: none !important;
  }

  #imContent > div[style*="width:"] {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
  }

  /* Generated columns become full-width cards. */
  #imContent > div[style*="width:"] > div[style*="width:"] {
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
  }

  #imContent [id^="imCell_"] ,
  #imContent [id^="imCellStyle_"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #imContent img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Home slideshow keeps the original proportions but fits the phone. */
  #imObjectGallery_1 {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 743 / 557;
    overflow: hidden;
  }
  #imObjectGallery_1 > div,
  #imObjectGalleryContainer_1,
  #imObjectGallery_1 img {
    max-width: 100% !important;
  }

  /* Forms and text blocks generated with fixed widths. */
  table, tbody, tr, td {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  input, textarea, select, button {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}


/* Landscape on tablets/phones: keep the characteristic vertical menu strip at the left.
   Portrait keeps the compact responsive arrangement. */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  #imPage {
    width: calc(100% - 18px) !important;
    max-width: 960px;
    margin: 0 0 0 18px !important;
  }
}

@media screen and (max-width: 699px) and (orientation: landscape) {
  #imPage {
    width: calc(100% - 10px) !important;
    max-width: none !important;
    margin: 0 0 0 10px !important;
  }

  #imMnMnGraphics {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 145px !important;
    height: auto !important;
    margin: 0 !important;
    background-image: url('menu.png') !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
  }

  #imMnMn {
    float: left !important;
    width: 141px !important;
    padding: 220px 2px 0 2px !important;
    box-sizing: content-box !important;
  }

  #imMnMn > ul {
    display: block !important;
    width: auto !important;
  }

  #imMnMn > ul > li {
    float: none !important;
    margin-top: 0 !important;
    flex: none !important;
  }

  #imContent {
    clear: none !important;
    width: calc(100% - 145px) !important;
    margin-left: 145px !important;
    padding: 50px 8px 28px 0 !important;
    box-sizing: border-box;
  }
}

/* Modern gallery viewer -------------------------------------------------- */
body.ai-lightbox-open {
  overflow: hidden !important;
}

#aiLightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  flex-direction: column;
  background: rgba(0,0,0,.96);
  color: #FFEFBF;
  font-family: Tahoma, Arial, sans-serif;
  touch-action: none;
}
#aiLightbox.ai-open { display: flex; }

.ai-lb-toolbar {
  flex: 0 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 16px;
  box-sizing: border-box;
  background: rgba(0,0,0,.55);
}
.ai-lb-counter { font-size: 14px; letter-spacing: .2px; }
.ai-lb-close,
.ai-lb-nav,
.ai-lb-zoom-reset {
  border: 0;
  background: rgba(255,255,255,.10);
  color: white;
  cursor: pointer;
  border-radius: 8px;
}
.ai-lb-close {
  width: 42px;
  height: 42px;
  font-size: 30px;
  line-height: 38px;
}

.ai-lb-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-lb-image-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.ai-lb-image {
  max-width: 92vw;
  max-height: calc(100vh - 170px);
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
}
.ai-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 64px;
  font-size: 38px;
  z-index: 2;
}
.ai-lb-prev { left: 10px; }
.ai-lb-next { right: 10px; }
.ai-lb-zoom-reset {
  position: absolute;
  right: 12px;
  bottom: 10px;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  z-index: 3;
}

.ai-lb-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 9px 12px 11px;
  box-sizing: border-box;
  background: rgba(0,0,0,.72);
  scrollbar-width: thin;
}
.ai-lb-thumb {
  flex: 0 0 auto;
  min-width: 50px;
  height: 42px;
  padding: 0 8px;
  border: 1px solid rgba(255,239,191,.34);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: #FFEFBF;
  font: 12px Tahoma, Arial, sans-serif;
  cursor: pointer;
}
.ai-lb-thumb.ai-current {
  border-color: #FFEFBF;
  background: rgba(255,239,191,.20);
}

@media screen and (max-width: 699px) {
  .ai-lb-toolbar { height: 48px; padding-left: 12px; }
  .ai-lb-close { width: 40px; height: 40px; }
  .ai-lb-image { max-width: 100vw; max-height: calc(100vh - 142px); }
  .ai-lb-nav { width: 40px; height: 56px; font-size: 32px; background: rgba(0,0,0,.36); }
  .ai-lb-prev { left: 2px; }
  .ai-lb-next { right: 2px; }
  .ai-lb-strip { padding: 7px 8px 9px; gap: 5px; }
  .ai-lb-thumb { min-width: 46px; height: 38px; }
}

/* ======================================================================
   Art Image responsive v3
   - menu/logo strip stays fixed while the page scrolls in landscape/desktop
   - Galleria and Quadri gain 2/3/4/5 responsive columns
   - Home slideshow is centered and enlarged modestly on wide screens
   ====================================================================== */

/* Wide desktop: use the available screen instead of scaling the old 960 px page. */
@media screen and (min-width: 1025px) {
  #imPage {
    width: calc(100% - clamp(24px, 3vw, 60px)) !important;
    max-width: none !important;
    margin-left: clamp(24px, 3vw, 60px) !important;
    margin-right: 0 !important;
    zoom: 1 !important;
    transform: none !important;
  }

  #imContent {
    width: calc(100% - 145px) !important;
    margin-left: 145px !important;
    padding: 50px clamp(12px, 1.8vw, 30px) 30px 0 !important;
    box-sizing: border-box;
  }

  #imContentGraphics {
    width: calc(100% - 145px) !important;
  }

  #imContent > div[style*="width:"] {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* Keep the characteristic left strip, logo and menu still while page content scrolls.
   This applies on desktop and on landscape phones/tablets. */
@media screen and (min-width: 1025px),
       screen and (orientation: landscape) and (min-width: 560px) {
  #imMnMnGraphics {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    z-index: 9998 !important;
  }

  #imMnMn {
    position: fixed !important;
    top: 0 !important;
    float: none !important;
    z-index: 10000 !important;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  #imMnMn::-webkit-scrollbar { width: 0; height: 0; }
}

@media screen and (min-width: 1025px) {
  #imMnMnGraphics,
  #imMnMn {
    left: clamp(24px, 3vw, 60px) !important;
  }
}

@media screen and (min-width: 700px) and (max-width: 1024px) and (orientation: landscape) {
  #imMnMnGraphics,
  #imMnMn {
    left: 18px !important;
  }
}

@media screen and (min-width: 560px) and (max-width: 699px) and (orientation: landscape) {
  #imMnMnGraphics,
  #imMnMn {
    left: 10px !important;
  }
}

/* On very short landscape phones the fixed menu remains usable by reducing only
   the large vertical gaps; the artwork itself is unchanged. */
@media screen and (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  #imMnMn {
    padding-top: 180px !important;
  }
  #imMnMn > ul > li {
    margin-top: 8px !important;
  }
  #imMnMn > ul > li:first-child { margin-top: 0 !important; }
}

/* ---------- Fluid Galleria / Quadri ---------- */
.ai-fluid-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(6px, 1vw, 18px);
  row-gap: 6px;
  align-items: start;
  clear: both;
}

.ai-fluid-grid > .ai-grid-item {
  width: 100% !important;
  min-width: 0;
  float: none !important;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.ai-fluid-grid > .ai-grid-item > [id^="imCell_"] {
  width: 100% !important;
  max-width: 300px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

.ai-fluid-grid [id^="imCellStyle_"] {
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.ai-fluid-grid [id^="imCellStyle_"] > a {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
}

.ai-fluid-grid img {
  max-width: 100% !important;
  height: auto !important;
}

/* Page note/translator row remains one row in landscape/desktop. */
@media screen and (min-width: 700px) {
  .ai-top-row,
  .ai-home-top-row {
    width: 100% !important;
    float: none !important;
    display: flex !important;
    align-items: flex-start;
    box-sizing: border-box;
  }
  .ai-top-row > .ai-top-col,
  .ai-home-top-row > .ai-home-top-col {
    width: 33.3333% !important;
    float: none !important;
    box-sizing: border-box;
  }
}

/* Column count follows the useful content width. */
@media screen and (min-width: 560px) and (max-width: 799px) {
  .ai-fluid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 800px) and (max-width: 1199px) {
  .ai-fluid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (min-width: 1200px) and (max-width: 1549px) {
  .ai-fluid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media screen and (min-width: 1550px) {
  .ai-fluid-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Footer/menu-under-content spans the full fluid grid width. */
body.ai-gallery-page #imFooPad,
body.ai-gallery-page #imBtMn,
body.ai-quadri-page #imFooPad,
body.ai-quadri-page #imBtMn {
  clear: both;
}

/* ---------- Home ---------- */
body.ai-home-page .ai-home-gallery-row {
  width: 100% !important;
  float: none !important;
  display: flex;
  justify-content: center;
  overflow: visible;
  box-sizing: border-box;
}

body.ai-home-page #imCell_1,
body.ai-home-page #imCellStyle_1 {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.ai-home-page #imObjectGallery_1 {
  margin-left: auto !important;
  margin-right: auto !important;
  transform-origin: top center;
}

/* Keep the original animation/effects, just give it a little more presence. */
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  body.ai-home-page #imObjectGallery_1 { transform: scale(1.10); }
  body.ai-home-page #imCell_1 { min-height: 635px !important; }
}
@media screen and (min-width: 1600px) and (max-width: 1999px) {
  body.ai-home-page #imObjectGallery_1 { transform: scale(1.22); }
  body.ai-home-page #imCell_1 { min-height: 705px !important; }
}
@media screen and (min-width: 2000px) {
  body.ai-home-page #imObjectGallery_1 { transform: scale(1.30); }
  body.ai-home-page #imCell_1 { min-height: 755px !important; }
}

/* Do not enlarge the home animation on narrow portrait displays. */
@media screen and (max-width: 699px) and (orientation: portrait) {
  body.ai-home-page #imObjectGallery_1 { transform: none !important; }
}

/* ======================================================================
   Art Image responsive v4
   - masonry layout for Galleria / Quadri: portrait and landscape previews
     interlock without the large empty holes produced by fixed rows
   - Acquisti and Contatti use the useful page width on wide screens
   ====================================================================== */

/* ---------- Galleria / Quadri: compact masonry columns ---------- */
.ai-fluid-grid.ai-masonry-grid {
  display: flex !important;
  align-items: flex-start !important;
  gap: clamp(8px, .8vw, 14px) !important;
  width: 100% !important;
  clear: both;
}

.ai-masonry-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.ai-masonry-column > .ai-grid-item {
  width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.ai-masonry-column > .ai-grid-item > [id^="imCell_"] {
  width: 100% !important;
  max-width: 320px !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 auto !important;
  padding: 3px !important;
  box-sizing: border-box !important;
}

.ai-masonry-column .ai-grid-item [id^="imCellStyle_"] {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.ai-masonry-column .ai-grid-item [id^="imCellStyleGraphics_"] {
  top: 3px !important;
  right: 3px !important;
  bottom: 3px !important;
  left: 3px !important;
}

.ai-masonry-column .ai-grid-item a[onclick*="imShowBox"] {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.ai-masonry-column .ai-grid-item img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* The old CSS-grid column rules from v3 are intentionally neutralized. */
@media screen and (min-width: 560px) {
  .ai-fluid-grid.ai-masonry-grid { grid-template-columns: none !important; }
}

/* ---------- Acquisti ---------- */
body.ai-shop-page #imContent > div[style*="width: 814px"] {
  width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}

body.ai-shop-page #imContent > div[style*="width: 814px"]:first-of-type {
  display: flex !important;
  align-items: flex-start !important;
}

body.ai-shop-page #imContent > div[style*="width: 814px"]:first-of-type > div {
  float: none !important;
  width: 50% !important;
  box-sizing: border-box !important;
}

body.ai-shop-page #imCell_1,
body.ai-shop-page #imCellStyle_1 {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

body.ai-shop-page #imCell_1 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
}

body.ai-shop-page #imProductList_1 {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  box-sizing: border-box;
}

body.ai-shop-page #imProductList_1 .imProductListCont {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 58%) minmax(180px, 42%);
  align-items: stretch;
  float: none !important;
}

body.ai-shop-page #imProductList_1 .imProductListImage,
body.ai-shop-page #imProductList_1 .imProductListText {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.ai-shop-page #imProductList_1 .imProductListImage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px !important;
}

body.ai-shop-page #imProductList_1 .imProductListImage img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 126px !important;
}

body.ai-shop-page #imProductList_1 .imProductListText {
  padding-left: 8px;
}

/* Two original-style product cards side by side on genuinely wide pages. */
@media screen and (min-width: 1450px) {
  body.ai-shop-page #imProductList_1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 699px) {
  body.ai-shop-page #imContent > div[style*="width: 814px"]:first-of-type {
    display: block !important;
  }
  body.ai-shop-page #imContent > div[style*="width: 814px"]:first-of-type > div {
    width: 100% !important;
  }
  body.ai-shop-page #imProductList_1 .imProductListCont {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr;
    padding: 8px !important;
  }
  body.ai-shop-page #imProductList_1 .imProductListImage {
    height: auto !important;
    line-height: normal !important;
    padding: 4px 4px 10px !important;
  }
  body.ai-shop-page #imProductList_1 .imProductListImage img {
    max-height: 180px !important;
  }
  body.ai-shop-page #imProductList_1 .imProductListText {
    height: auto !important;
    padding: 0 4px 4px !important;
  }
  body.ai-shop-page #imProductList_1 .imProductListText .overflow-controller,
  body.ai-shop-page #imProductList_1 .imProductListText .height-1,
  body.ai-shop-page #imProductList_1 .imProductListText .height-2,
  body.ai-shop-page #imProductList_1 .imProductListText .height-3,
  body.ai-shop-page #imProductList_1 .imProductListText .height-4 {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ---------- Contatti ---------- */
body.ai-contact-page #imContent > div[style*="width: 814px"] {
  width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}

body.ai-contact-page #imContent > div[style*="width: 814px"]:first-of-type {
  display: flex !important;
}
body.ai-contact-page #imContent > div[style*="width: 814px"]:first-of-type > div {
  float: none !important;
  width: 50% !important;
  box-sizing: border-box !important;
}

body.ai-contact-page #imCell_1,
body.ai-contact-page #imCell_2 {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 10px clamp(8px, 1.4vw, 24px) 14px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.ai-contact-page #imCellStyle_1,
body.ai-contact-page #imCellStyle_2 {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

body.ai-contact-page #imCellStyleGraphics_1,
body.ai-contact-page #imCellStyleGraphics_2 {
  left: clamp(8px, 1.4vw, 24px) !important;
  right: clamp(8px, 1.4vw, 24px) !important;
}

body.ai-contact-page #imObjectForm_1 {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body.ai-contact-page #imObjectForm_1 .first > div > div[style*="float: left"] {
  float: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.ai-contact-page #imObjectForm_1 label {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.ai-contact-page #imObjectForm_1 .imClear {
  width: 100% !important;
}

body.ai-contact-page #imObjectForm_1_1,
body.ai-contact-page #imObjectForm_1_1_chk,
body.ai-contact-page #imObjectForm_1_4 {
  width: min(100%, 720px) !important;
  max-width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}

body.ai-contact-page #imObjectForm_1_2 {
  width: min(220px, 100%) !important;
  max-width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
}

body.ai-contact-page #imObjectForm_1_3 {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 300px;
  float: none !important;
  box-sizing: border-box !important;
}

body.ai-contact-page #imObjectForm_1 > div[style*="width: 681px"] {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 699px) {
  body.ai-contact-page #imContent > div[style*="width: 814px"]:first-of-type {
    display: block !important;
  }
  body.ai-contact-page #imContent > div[style*="width: 814px"]:first-of-type > div {
    width: 100% !important;
  }
  body.ai-contact-page #imObjectForm_1_3 {
    min-height: 220px;
    height: 280px !important;
  }
}

/* Finish the fluid header rows on Acquisti / Contatti. */
body.ai-shop-page #imCell_2,
body.ai-shop-page #imCell_3,
body.ai-shop-page #imCellStyle_2,
body.ai-shop-page #imCellStyle_3,
body.ai-contact-page #imCell_3,
body.ai-contact-page #imCellStyle_3 {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* ======================================================================
   Art Image responsive v5
   - Acquisti: always one product card per row, with a cleaner modern look
   - Narrow portrait: logo + menu remain visually contained in a black box
   ====================================================================== */

/* ---------- Acquisti: one wide card per row ---------- */
body.ai-shop-page #imProductList_1 {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(10px, 1.1vw, 18px) !important;
}

/* Neutralize the v4 two-column breakpoint. */
@media screen and (min-width: 1450px) {
  body.ai-shop-page #imProductList_1 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

body.ai-shop-page #imProductList_1 .imProductListCont {
  width: 100% !important;
  min-height: 154px !important;
  height: auto !important;
  padding: clamp(9px, .9vw, 14px) !important;
  margin: 0 !important;
  grid-template-columns: minmax(230px, 36%) minmax(0, 1fr) !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  align-items: center !important;
  border: 1px solid rgba(205, 47, 25, .78) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(22, 12, 8, .92), rgba(0, 0, 0, .82)) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  color: #f8ead0 !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.ai-shop-page #imProductList_1 .imProductListCont:hover {
  transform: translateY(-2px);
  border-color: rgba(238, 67, 39, .95) !important;
  box-shadow:
    0 11px 28px rgba(0, 0, 0, .32),
    0 0 14px rgba(195, 42, 22, .16),
    inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}

body.ai-shop-page #imProductList_1 .imProductListImage {
  width: 100% !important;
  height: auto !important;
  min-height: 132px !important;
  line-height: normal !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.ai-shop-page #imProductList_1 .imProductListImage a {
  display: flex !important;
  width: 100% !important;
  min-height: 132px;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  background: rgba(255, 239, 191, .045) !important;
}

body.ai-shop-page #imProductList_1 .imProductListImage img {
  width: auto !important;
  max-width: 100% !important;
  max-height: 180px !important;
  height: auto !important;
  border: 1px solid rgba(224, 61, 35, .82) !important;
  border-radius: 6px !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .36) !important;
}

body.ai-shop-page #imProductList_1 .imProductListText {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(4px, .5vw, 9px) clamp(4px, .8vw, 12px) !important;
  color: #f8ead0 !important;
  font-size: clamp(12px, .82vw, 14px) !important;
  line-height: 1.48 !important;
}

body.ai-shop-page #imProductList_1 .imProductListText .overflow-controller,
body.ai-shop-page #imProductList_1 .imProductListText .height-1,
body.ai-shop-page #imProductList_1 .imProductListText .height-2,
body.ai-shop-page #imProductList_1 .imProductListText .height-3,
body.ai-shop-page #imProductList_1 .imProductListText .height-4 {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

body.ai-shop-page #imProductList_1 h4 {
  margin: 0 0 8px !important;
  font-size: clamp(18px, 1.35vw, 24px) !important;
  line-height: 1.2 !important;
  font-family: 'Segoe Print', cursive !important;
  font-weight: normal !important;
}

body.ai-shop-page #imProductList_1 h4 a {
  color: #fff1c9 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7) !important;
}

body.ai-shop-page #imProductList_1 p {
  margin: 0 !important;
  color: #f0ddbc !important;
}

/* Keep cards elegant rather than excessively tall on very wide monitors. */
@media screen and (min-width: 1500px) {
  body.ai-shop-page #imProductList_1 .imProductListCont {
    grid-template-columns: minmax(300px, 32%) minmax(0, 1fr) !important;
  }
  body.ai-shop-page #imProductList_1 .imProductListImage img {
    max-height: 195px !important;
  }
}

/* Phone/tablet portrait: stack image and text inside the same modern card. */
@media screen and (max-width: 699px) {
  body.ai-shop-page #imProductList_1 .imProductListCont {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }
  body.ai-shop-page #imProductList_1 .imProductListImage,
  body.ai-shop-page #imProductList_1 .imProductListImage a {
    min-height: 0 !important;
  }
  body.ai-shop-page #imProductList_1 .imProductListImage img {
    max-height: 210px !important;
  }
  body.ai-shop-page #imProductList_1 .imProductListText {
    padding: 5px 6px 7px !important;
  }
}

/* ---------- Narrow portrait: a single black visual box for logo + menu ---------- */
@media screen and (max-width: 699px) and (orientation: portrait) {
  #imPage {
    padding-top: 10px !important;
    box-sizing: border-box !important;
  }

  #imMnMnGraphics {
    width: calc(100% - 20px) !important;
    max-width: 430px !important;
    height: 190px !important;
    margin: 0 auto !important;
    background-color: #000 !important;
    background-image: url('menu.png') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28) !important;
  }

  #imMnMn {
    width: calc(100% - 20px) !important;
    max-width: 430px !important;
    margin: 0 auto 12px !important;
    padding: 6px 8px 14px !important;
    float: none !important;
    box-sizing: border-box !important;
    background: #000 !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .28) !important;
    overflow: hidden !important;
  }

  #imMnMn > ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 140px)) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px 8px !important;
    width: 100% !important;
  }

  #imMnMn > ul > li {
    float: none !important;
    width: 140px !important;
    margin: 0 !important;
    flex: none !important;
  }

  #imContent {
    padding-top: 8px !important;
  }
}

/* Extra-narrow phones: one centered menu button per row, still inside black box. */
@media screen and (max-width: 315px) and (orientation: portrait) {
  #imMnMn > ul {
    grid-template-columns: 140px !important;
  }
}

/* ======================================================================
   Art Image responsive v6
   - Contatti: modern dark cards consistent with Acquisti
   - Galleria / Quadri: previews grow fluidly on wider screens
   - Narrow portrait: compact logo + menu card floats over the original bg
   ====================================================================== */

/* ---------- Galleria / Quadri: larger previews as useful width grows ---------- */
.ai-masonry-column > .ai-grid-item > [id^="imCell_"] {
  max-width: 430px !important;
}
.ai-masonry-column .ai-grid-item a[onclick*="imShowBox"] {
  width: 100% !important;
}
.ai-masonry-column .ai-grid-item img {
  width: 100% !important;
  max-width: 430px !important;
  height: auto !important;
  object-fit: contain !important;
}
@media screen and (min-width: 1200px) {
  .ai-fluid-grid.ai-masonry-grid {
    gap: clamp(12px, 1.15vw, 22px) !important;
  }
  .ai-masonry-column {
    gap: clamp(12px, 1vw, 20px) !important;
  }
}

/* ---------- Contatti: modern cards ---------- */
body.ai-contact-page #imCell_2,
body.ai-contact-page #imCell_1 {
  padding-left: clamp(4px, .6vw, 10px) !important;
  padding-right: clamp(4px, .6vw, 10px) !important;
  padding-top: 8px !important;
  padding-bottom: 10px !important;
  overflow: visible !important;
}
body.ai-contact-page #imCellStyleGraphics_2,
body.ai-contact-page #imCellStyleGraphics_1 {
  display: none !important;
}
body.ai-contact-page #imCellStyle_2,
body.ai-contact-page #imCellStyle_1 {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(14px, 1.25vw, 22px) clamp(14px, 1.5vw, 28px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border: 1px solid rgba(205, 47, 25, .78) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(22, 12, 8, .93), rgba(0, 0, 0, .84)) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  color: #f8ead0 !important;
}
body.ai-contact-page #imCellStyle_2:hover,
body.ai-contact-page #imCellStyle_1:hover {
  border-color: rgba(238, 67, 39, .95) !important;
  box-shadow: 0 11px 28px rgba(0, 0, 0, .32), 0 0 14px rgba(195, 42, 22, .14), inset 0 1px 0 rgba(255, 255, 255, .09) !important;
}
body.ai-contact-page #imTextObject_2,
body.ai-contact-page #imTextObject_2 * {
  color: #f3dfbc !important;
}
body.ai-contact-page #imTextObject_2 .cf1,
body.ai-contact-page #imTextObject_2 a {
  color: #ff8b78 !important;
}
body.ai-contact-page #imObjectForm_1,
body.ai-contact-page #imObjectForm_1 label,
body.ai-contact-page #imObjectForm_1 .checkbox,
body.ai-contact-page #imObjectForm_1 .radiobutton {
  color: #f3dfbc !important;
}
body.ai-contact-page #imObjectForm_1 label {
  font-size: clamp(13px, .86vw, 15px) !important;
  line-height: 1.35 !important;
  margin-top: 7px !important;
  margin-bottom: 5px !important;
}
body.ai-contact-page #imObjectForm_1 input[type="text"],
body.ai-contact-page #imObjectForm_1 input[type="password"],
body.ai-contact-page #imObjectForm_1 input[type="file"],
body.ai-contact-page #imObjectForm_1 select,
body.ai-contact-page #imObjectForm_1 textarea {
  min-height: 38px;
  padding: 8px 10px !important;
  color: #3e241a !important;
  background: rgba(255, 239, 205, .94) !important;
  border: 1px solid rgba(205, 47, 25, .72) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 1px 3px rgba(54, 24, 12, .20), 0 1px 0 rgba(255,255,255,.08) !important;
  outline: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.ai-contact-page #imObjectForm_1 textarea {
  line-height: 1.45 !important;
}
body.ai-contact-page #imObjectForm_1 input.imFormFocus,
body.ai-contact-page #imObjectForm_1 select.imFormFocus,
body.ai-contact-page #imObjectForm_1 textarea.imFormFocus,
body.ai-contact-page #imObjectForm_1 input:focus,
body.ai-contact-page #imObjectForm_1 select:focus,
body.ai-contact-page #imObjectForm_1 textarea:focus {
  color: #25150f !important;
  background: #fff0cf !important;
  border-color: #ef4f35 !important;
  box-shadow: 0 0 0 3px rgba(205, 47, 25, .16), inset 0 1px 2px rgba(54, 24, 12, .14) !important;
}
body.ai-contact-page #imObjectForm_1 input[type="submit"],
body.ai-contact-page #imObjectForm_1 input[type="reset"],
body.ai-contact-page #imObjectForm_1 input[type="button"] {
  min-width: 96px;
  min-height: 38px;
  margin: 12px 5px 2px !important;
  padding: 8px 18px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(237, 74, 47, .85) !important;
  background: linear-gradient(180deg, #c72d20, #8e160f) !important;
  color: #fff2d8 !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.28) !important;
  font-weight: bold !important;
}
body.ai-contact-page #imObjectForm_1 input[type="reset"] {
  border-color: rgba(255, 239, 205, .35) !important;
  background: linear-gradient(180deg, #3a302b, #171210) !important;
}
body.ai-contact-page #imObjectForm_1 input[type="submit"]:hover,
body.ai-contact-page #imObjectForm_1 input[type="reset"]:hover,
body.ai-contact-page #imObjectForm_1 input[type="button"]:hover {
  filter: brightness(1.12);
}

/* ---------- Narrow portrait: logo/menu card over, not instead of, the bg ---------- */
@media screen and (max-width: 699px) and (orientation: portrait) {
  html, body, #imPage {
    background-color: transparent !important;
  }
  #imPage {
    padding-top: 12px !important;
  }
  #imMnMnGraphics {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: min(92vw, 370px) !important;
    max-width: none !important;
    height: 188px !important;
    margin: 0 auto !important;
    background-color: rgba(0, 0, 0, .96) !important;
    background-image: url('menu.png') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(205, 47, 25, .48) !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .30) !important;
    z-index: 2 !important;
  }
  #imMnMn {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: min(92vw, 370px) !important;
    max-width: none !important;
    margin: 0 auto 14px !important;
    padding: 7px 8px 14px !important;
    float: none !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, .96) !important;
    border: 1px solid rgba(205, 47, 25, .48) !important;
    border-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 13px 25px rgba(0, 0, 0, .30) !important;
    overflow: visible !important;
    z-index: 3 !important;
  }
  #imMnMn > ul {
    display: grid !important;
    grid-template-columns: repeat(2, 140px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px 10px !important;
    width: 100% !important;
  }
  #imMnMn > ul > li {
    width: 140px !important;
    height: 46px !important;
    margin: 0 !important;
  }
  #imContent {
    margin-top: 0 !important;
    padding-top: 10px !important;
    background: transparent !important;
  }
  #imContentGraphics {
    display: block !important;
    background: transparent !important;
  }
}
@media screen and (max-width: 330px) and (orientation: portrait) {
  #imMnMnGraphics,
  #imMnMn {
    width: calc(100% - 18px) !important;
  }
  #imMnMn > ul {
    grid-template-columns: 140px !important;
    gap: 3px !important;
  }
}

/* ======================================================================
   Art Image responsive v7
   - remove the old magnifying-glass hover overlays
   - do not upscale low-resolution X5 thumbnails (prevents pixelation)
   - use sharper local preview assets where they exist
   - Contatti: typing fields are black/dark, consistent with the site style
   ====================================================================== */

/* Sharper replacements can fill the available masonry card. */
.ai-masonry-column .ai-grid-item img.ai-hires-preview {
  width: 100% !important;
  max-width: 430px !important;
  height: auto !important;
}

/* Legacy 200–250 px thumbnails stay at their native size instead of being
   stretched and becoming visibly pixelated on wide monitors. */
.ai-masonry-column .ai-grid-item img.ai-native-preview {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Contact form: dark writing surfaces. */
body.ai-contact-page #imObjectForm_1 input[type="text"],
body.ai-contact-page #imObjectForm_1 input[type="password"],
body.ai-contact-page #imObjectForm_1 input[type="file"],
body.ai-contact-page #imObjectForm_1 select,
body.ai-contact-page #imObjectForm_1 textarea {
  color: #f8ead0 !important;
  caret-color: #ff8b78 !important;
  background: rgba(3, 3, 3, .94) !important;
  border-color: rgba(205, 47, 25, .78) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .82), 0 1px 0 rgba(255,255,255,.05) !important;
}
body.ai-contact-page #imObjectForm_1 input.imFormFocus,
body.ai-contact-page #imObjectForm_1 select.imFormFocus,
body.ai-contact-page #imObjectForm_1 textarea.imFormFocus,
body.ai-contact-page #imObjectForm_1 input:focus,
body.ai-contact-page #imObjectForm_1 select:focus,
body.ai-contact-page #imObjectForm_1 textarea:focus {
  color: #fff1d2 !important;
  background: #070707 !important;
  border-color: #ef4f35 !important;
  box-shadow: 0 0 0 3px rgba(205, 47, 25, .18), inset 0 1px 4px rgba(0,0,0,.85) !important;
}
body.ai-contact-page #imObjectForm_1 input::placeholder,
body.ai-contact-page #imObjectForm_1 textarea::placeholder {
  color: rgba(248, 234, 208, .60) !important;
}

/* ======================================================================
   Art Image responsive v8
   - Galleria / Quadri: one consistent red frame + glow on every preview
   - Portrait phones: full-width black logo/menu zone; original background
     starts below it instead of showing behind it
   - Home slideshow scales proportionally so the full animation remains visible
   ====================================================================== */

/* ---------- Galleria / Quadri: one consistent preview treatment ---------- */
body.ai-gallery-page .ai-masonry-column .ai-preview-frame,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 5px auto !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: #090403 !important;
  border: 2px solid rgba(226, 43, 24, .96) !important;
  border-radius: 2px !important;
  box-shadow:
    0 0 5px 1px rgba(255, 75, 48, .78),
    0 0 13px 3px rgba(202, 28, 14, .42),
    0 5px 12px rgba(0, 0, 0, .42) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  line-height: 0 !important;
}

body.ai-gallery-page .ai-masonry-column .ai-preview-frame:hover,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame:hover {
  border-color: rgba(244, 55, 34, 1) !important;
  box-shadow:
    0 0 6px 1px rgba(255, 92, 62, .88),
    0 0 16px 4px rgba(215, 31, 16, .48),
    0 6px 14px rgba(0, 0, 0, .46) !important;
}

body.ai-gallery-page .ai-masonry-column .ai-preview-frame > img,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame > img {
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* High-resolution previews may use the column width; old X5 thumbnails are
   never forced beyond their natural resolution. Both share the same frame. */
body.ai-gallery-page .ai-masonry-column img.ai-hires-preview,
body.ai-quadri-page .ai-masonry-column img.ai-hires-preview {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  height: auto !important;
}
body.ai-gallery-page .ai-masonry-column img.ai-native-preview,
body.ai-quadri-page .ai-masonry-column img.ai-native-preview {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ---------- Portrait phone: full black header zone, background begins below ---------- */
@media screen and (max-width: 699px) and (orientation: portrait) {
  html,
  body,
  #imPage {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
  }

  #imHeaderBg,
  #imFooterBg,
  #imHeader,
  #imFooter {
    display: none !important;
  }

  /* The logo and menu form one clean full-width black zone. */
  #imMnMnGraphics {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 202px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background-color: #000 !important;
    background-image: url('menu.png') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 2 !important;
  }

  #imMnMn {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 2px 10px 14px !important;
    box-sizing: border-box !important;
    background: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    z-index: 3 !important;
  }

  #imMnMn > ul {
    display: grid !important;
    grid-template-columns: repeat(2, 140px) !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 3px 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #imMnMn > ul > li {
    float: none !important;
    width: 140px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }

  /* The illustrated site background starts from its top edge exactly here. */
  #imContent {
    clear: both !important;
    position: relative !important;
    width: 100% !important;
    min-height: calc(100vh - 360px) !important;
    margin: 0 !important;
    padding: 14px 10px 30px !important;
    box-sizing: border-box !important;
    background-color: #e8cda9 !important;
    background-image: url('bg.jpg') !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: max(900px, 150vw) auto !important;
    overflow: visible !important;
  }

  #imContentGraphics {
    display: none !important;
  }

  /* Home: preserve the original 743x557 animation internally and scale the
     complete object down as one unit. This keeps every transition intact. */
  body.ai-home-page .ai-home-gallery-row {
    display: block !important;
    width: 100% !important;
    min-height: var(--ai-home-mobile-height, 280px) !important;
    overflow: visible !important;
  }

  body.ai-home-page #imCell_1,
  body.ai-home-page #imCellStyle_1 {
    position: relative !important;
    width: 100% !important;
    min-height: var(--ai-home-mobile-height, 280px) !important;
    height: var(--ai-home-mobile-height, 280px) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.ai-home-page #imObjectGallery_1.ai-home-mobile-gallery {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 743px !important;
    height: 557px !important;
    margin: 0 0 0 -371.5px !important;
    transform: scale(var(--ai-home-mobile-scale, .48)) !important;
    transform-origin: top center !important;
    overflow: hidden !important;
  }

  body.ai-home-page #imObjectGallery_1.ai-home-mobile-gallery > div,
  body.ai-home-page #imObjectGalleryContainer_1 {
    max-width: none !important;
  }
}

@media screen and (max-width: 330px) and (orientation: portrait) {
  #imMnMn > ul {
    grid-template-columns: repeat(2, 132px) !important;
    gap: 2px 4px !important;
  }
  #imMnMn > ul > li,
  #imMnMn > ul > li > a,
  #imMnMn > ul > li .imMnMnFirstBg {
    width: 132px !important;
  }
}

/* ======================================================================
   Art Image responsive v10
   Galleria / Quadri: restore the original single preview frame embedded
   in the PNG and use only a soft red glow behind it. No second CSS frame.
   ====================================================================== */
body.ai-gallery-page .ai-masonry-column .ai-preview-frame,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

body.ai-gallery-page .ai-masonry-column .ai-preview-frame:hover,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame:hover {
  border: 0 !important;
  box-shadow: none !important;
}

body.ai-gallery-page .ai-masonry-column .ai-preview-frame > img,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame > img {
  border: 0 !important;
  box-shadow: none !important;
  /* The fine red frame/glow is already part of the original preview PNG.
     This adds only a subtle shadow behind it, without creating a second frame. */
  filter: drop-shadow(0 4px 5px rgba(180, 18, 8, .42)) !important;
  transition: filter .18s ease, transform .18s ease !important;
}

body.ai-gallery-page .ai-masonry-column .ai-preview-frame:hover > img,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame:hover > img {
  filter: drop-shadow(0 5px 7px rgba(220, 28, 14, .56)) !important;
  transform: translateY(-1px) !important;
}

/* ======================================================================
   Art Image responsive v11
   - Galleria / Quadri: stronger, cleaner red glow behind the original PNG
     preview (still no second CSS frame)
   - Google Translate: hide the dated Google box and show a compact custom
     language selector while retaining Google's translation engine underneath
   ====================================================================== */

/* More vivid red halo, without adding any extra frame. */
body.ai-gallery-page .ai-masonry-column .ai-preview-frame > img,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame > img {
  filter:
    drop-shadow(0 0 4px rgba(255, 46, 20, .92))
    drop-shadow(0 0 9px rgba(238, 32, 12, .70))
    drop-shadow(0 4px 7px rgba(142, 10, 3, .55)) !important;
}

body.ai-gallery-page .ai-masonry-column .ai-preview-frame:hover > img,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame:hover > img {
  filter:
    drop-shadow(0 0 5px rgba(255, 66, 31, 1))
    drop-shadow(0 0 12px rgba(246, 39, 16, .86))
    drop-shadow(0 5px 9px rgba(164, 12, 4, .62)) !important;
  transform: translateY(-1px) !important;
}

/* Custom language selector. The original Google widget remains present but
   is clipped off-screen so its generated select can still drive translation. */
.ai-language-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 1px 0 5px;
  font-family: Tahoma, Arial, sans-serif;
}

.ai-language-picker::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-52%);
  color: #ff9b83;
  font-size: 13px;
  pointer-events: none;
}

.ai-language-select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 150px;
  max-width: min(240px, 90vw);
  min-height: 36px;
  padding: 7px 34px 7px 13px;
  box-sizing: border-box;
  border: 1px solid rgba(225, 55, 31, .78);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 15, 11, .96), rgba(2, 2, 2, .96));
  color: #fff0d0;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, .34),
    0 0 8px rgba(214, 35, 17, .20),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  outline: none;
}

.ai-language-select:hover,
.ai-language-select:focus {
  border-color: rgba(247, 72, 43, .96);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .38),
    0 0 10px rgba(235, 45, 22, .32),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.ai-language-select option {
  background: #111;
  color: #fff0d0;
}

.ai-google-translate-host {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: .01 !important;
  pointer-events: none !important;
}

/* Prevent Google-injected branding/box fragments from taking layout space. */
.ai-google-translate-host .goog-te-gadget,
.ai-google-translate-host .goog-te-gadget-simple {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

@media screen and (max-width: 699px) and (orientation: portrait) {
  .ai-language-picker {
    margin: 0 auto 7px;
  }
  .ai-language-select {
    min-width: 154px;
    min-height: 38px;
    font-size: 13px;
  }
}


/* ======================================================================
   Art Image responsive v12
   - Galleria / Quadri: exact original previews rebuilt as 2x assets, so
     they can grow modestly on wide screens without browser pixelation.
   - Desktop masonry favors larger cards before adding another column.
   - The original single red micro-frame stays inside the PNG; only the
     vivid halo remains in CSS.
   ====================================================================== */

body.ai-gallery-page .ai-masonry-column > .ai-grid-item > [id^="imCell_"],
body.ai-quadri-page .ai-masonry-column > .ai-grid-item > [id^="imCell_"] {
  max-width: 390px !important;
}

body.ai-gallery-page .ai-masonry-column .ai-preview-frame,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame {
  width: 100% !important;
  max-width: 390px !important;
}

body.ai-gallery-page .ai-masonry-column img.ai-hd-preview,
body.ai-quadri-page .ai-masonry-column img.ai-hd-preview {
  display: block !important;
  width: 100% !important;
  max-width: 380px !important;
  height: auto !important;
  margin: 0 auto !important;
  border: 0 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 4px rgba(255, 46, 20, .92))
    drop-shadow(0 0 9px rgba(238, 32, 12, .70))
    drop-shadow(0 4px 7px rgba(142, 10, 3, .55)) !important;
  transition: filter .18s ease, transform .18s ease !important;
}

body.ai-gallery-page .ai-masonry-column .ai-preview-frame:hover > img.ai-hd-preview,
body.ai-quadri-page .ai-masonry-column .ai-preview-frame:hover > img.ai-hd-preview {
  filter:
    drop-shadow(0 0 5px rgba(255, 66, 31, 1))
    drop-shadow(0 0 12px rgba(246, 39, 16, .86))
    drop-shadow(0 5px 9px rgba(164, 12, 4, .62)) !important;
  transform: translateY(-1px) !important;
}

@media screen and (max-width: 699px) {
  body.ai-gallery-page .ai-masonry-column img.ai-hd-preview,
  body.ai-quadri-page .ai-masonry-column img.ai-hd-preview {
    width: min(100%, 360px) !important;
  }
}
\n\n/* ======================================================================\n   Art Image responsive v13\n   - Working full-resolution lightboxes in local/subfolder tests\n   - Acquisti uses the same modern lightbox as Galleria/Quadri\n   - Info page no longer appears blank\n   ====================================================================== */\n.ai-info-card {\n  box-sizing: border-box;\n  width: min(880px, calc(100% - 30px));\n  margin: 28px auto 40px;\n  padding: clamp(22px, 3vw, 38px);\n  border: 1px solid rgba(230, 48, 28, .62);\n  border-radius: 16px;\n  background: linear-gradient(145deg, rgba(20, 12, 9, .93), rgba(0, 0, 0, .90));\n  box-shadow: 0 14px 32px rgba(0, 0, 0, .36), 0 0 18px rgba(210, 28, 12, .18);\n  color: #f7e7c3;\n  line-height: 1.55;\n}\n.ai-info-card h2 {\n  margin: 0 0 10px;\n  color: #fff0cf;\n  font-size: clamp(28px, 4vw, 42px);\n  font-weight: 400;\n}\n.ai-info-card .ai-info-lead {\n  margin-top: 0;\n  color: #ffb59f;\n  font-size: clamp(17px, 2vw, 21px);\n}\n.ai-info-card p { margin: 12px 0; }\n.ai-info-card a { color: #ff8b70; text-decoration: none; }\n.ai-info-card a:hover { text-decoration: underline; }\n@media screen and (max-width: 699px) {\n  .ai-info-card { margin: 20px auto 28px; padding: 20px 18px; border-radius: 12px; }\n}\n

/* v14: translator reliability fallback. If Google's combo cannot be mirrored,
   show the real Google translator instead of a dead custom control. */
.ai-google-translate-fallback {
  display: inline-block !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 1px 0 5px !important;
  padding: 5px 8px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 1px solid rgba(225, 55, 31, .78) !important;
  border-radius: 18px !important;
  background: rgba(5, 5, 5, .94) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.34), 0 0 8px rgba(214,35,17,.20) !important;
}
.ai-google-translate-fallback .goog-te-gadget {
  color: #fff0d0 !important;
  font-family: Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
}
.ai-google-translate-fallback select.goog-te-combo {
  max-width: min(230px, 80vw) !important;
  min-height: 30px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #111 !important;
  color: #fff0d0 !important;
  outline: none !important;
}


/* ======================================================================
   Art Image responsive v15
   - Lingua: menu autonomo e sempre apribile; non dipende dal vecchio
     menu incorporato di Google.
   ====================================================================== */
#google_translate_element.ai-google-translate-host,
.ai-google-translate-fallback {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
}


/* ======================================================================
   Art Image responsive v16
   - Rimossa la sezione Info
   - 5 voci del menu verticale più ariose e distribuite
   - Più distanza fra logo e Home
   ====================================================================== */

@media screen and (min-width: 1025px),
       screen and (orientation: landscape) and (min-width: 560px) {
  #imMnMn {
    padding-top: 248px !important;
  }

  #imMnMn > ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(40px, 5.4vh, 58px) !important;
  }

  #imMnMn > ul > li {
    margin-top: 0 !important;
  }
}

@media screen and (orientation: landscape) and (min-width: 560px) and (max-width: 1024px) {
  #imMnMn {
    padding-top: 238px !important;
  }
  #imMnMn > ul {
    gap: clamp(34px, 4.8vh, 48px) !important;
  }
}

@media screen and (orientation: landscape) and (min-width: 560px) and (max-height: 560px) {
  #imMnMn {
    padding-top: 176px !important;
  }
  #imMnMn > ul {
    gap: 10px !important;
  }
}

@media screen and (max-width: 699px) and (orientation: portrait) {
  #imMnMn > ul > li {
    margin: 0 !important;
  }
  #imMnMn > ul > li:last-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
}


/* ======================================================================
   Art Image responsive v17
   Gallerie: la fascia inferiore mostra vere miniature fotografiche.
   ====================================================================== */
.ai-lb-strip {
  gap: 10px !important;
  padding: 10px 14px 12px !important;
}

.ai-lb-thumb {
  position: relative;
  flex: 0 0 auto !important;
  width: 86px !important;
  min-width: 86px !important;
  height: 62px !important;
  padding: 3px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 7px !important;
  background: #070707 !important;
  box-sizing: border-box;
  opacity: .78;
  transition: opacity .16s ease, border-color .16s ease, box-shadow .16s ease,
              transform .16s ease;
}

.ai-lb-thumb:hover {
  opacity: 1;
  border-color: rgba(255,70,48,.78) !important;
  box-shadow: 0 0 10px rgba(255,25,10,.35);
}

.ai-lb-thumb.ai-current {
  opacity: 1;
  border-color: #ff2a18 !important;
  background: #080808 !important;
  box-shadow: 0 0 13px rgba(255,28,8,.72), 0 0 24px rgba(255,20,0,.25);
  transform: translateY(-1px);
}

.ai-lb-thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #050505;
  border-radius: 4px;
  pointer-events: none;
}

@media screen and (max-width: 699px) {
  .ai-lb-strip {
    gap: 7px !important;
    padding: 7px 8px 9px !important;
  }
  .ai-lb-thumb {
    width: 68px !important;
    min-width: 68px !important;
    height: 50px !important;
    padding: 2px !important;
    border-radius: 6px !important;
  }
}


/* ======================================================================
   Art Image responsive v18
   ====================================================================== */

/* Home appena più distante dal logo */
@media screen and (min-width: 1025px) {
  #imMnMn { padding-top: 260px !important; }
}
@media screen and (orientation: landscape) and (min-width: 700px) and (max-width: 1024px) {
  #imMnMn { padding-top: 250px !important; }
}

/* Frasi superiori: lingua a sinistra, nota a destra, una sola riga */
.ai-top-toolbar {
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ai-top-toolbar > div {
  float: none !important;
}

.ai-top-toolbar > div:first-child {
  flex: 0 0 auto !important;
}

.ai-top-toolbar > div:nth-child(2) {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 12px !important;
}

.ai-top-note-column {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto !important;
  padding-right: clamp(8px, 2vw, 28px) !important;
  box-sizing: border-box !important;
}

.ai-top-note-column .text-inner > div {
  white-space: nowrap !important;
  text-align: right !important;
}

@media screen and (max-width: 699px) {
  .ai-top-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .ai-top-toolbar > div:nth-child(2) {
    display: none !important;
  }

  .ai-top-note-column {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 4px 4px !important;
  }

  .ai-top-note-column .text-inner > div {
    text-align: right !important;
    white-space: nowrap !important;
    font-size: clamp(12px, 4.2vw, 17px) !important;
  }

  .ai-top-note-column .fs19 {
    font-size: inherit !important;
  }
}


/* ======================================================================
   Art Image responsive v19
   Correzione note superiori: testo completo, link colorato e cliccabile.
   ====================================================================== */

.ai-top-note-column {
  overflow: visible !important;
  width: max-content !important;
  max-width: none !important;
}

.ai-top-note-column > div,
.ai-top-note-column [id^="imCellStyle_"],
.ai-top-note-column [id^="imTextObject_"],
.ai-top-note-column .text-tab-content,
.ai-top-note-column .text-inner {
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.ai-top-note-text {
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: right !important;
}

.ai-top-note-link,
.ai-top-note-link:link,
.ai-top-note-link:visited {
  color: #d678d7 !important;
  text-decoration: underline !important;
}

.ai-top-note-link:hover,
.ai-top-note-link:focus {
  color: #f0a4ef !important;
}

/* I vecchi CSS di WebSite X5 avevano overflow:hidden su questi due oggetti. */
#galleria #imCell_83,
#galleria #imCellStyle_83,
#quadri #imCell_14,
#quadri #imCellStyle_14 {
  overflow: visible !important;
}

/* In realtà gli ID pagina non sono presenti sul body: override diretto e sicuro
   limitato ai due oggetti testuali specifici. */
#imCell_83,
#imCellStyle_83,
#imTextObject_83,
#imTextObject_83_tab0,
#imCell_14,
#imCellStyle_14,
#imTextObject_14,
#imTextObject_14_tab0 {
  max-width: none !important;
}

@media screen and (max-width: 699px) {
  .ai-top-note-text,
  .ai-top-note-text .fs19 {
    font-size: clamp(11px, 3.5vw, 17px) !important;
    line-height: 1.35 !important;
  }
}


/* ======================================================================
   Art Image responsive v20
   Nuovo quadro "La resilienza".
   ====================================================================== */
body.ai-shop-page #imProductList_1 img[src$="la-resilienza_thumb.jpg"] {
  object-fit: contain !important;
}


/* ======================================================================
   Art Image responsive v22
   - La resilienza: preview foto 0 con alone uniforme
   - video YouTube nella stessa fascia delle miniature
   ====================================================================== */
.ai-lb-video-thumb {
  position: relative !important;
  overflow: hidden !important;
}
.ai-lb-video-thumb .ai-lb-thumb-image {
  object-fit: cover !important;
  filter: brightness(.72);
}
.ai-lb-video-play {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: rgba(195, 20, 10, .90);
  border: 1px solid rgba(255,255,255,.80);
  box-shadow: 0 0 10px rgba(255,30,10,.45);
  font-size: 14px;
  line-height: 1;
  padding-left: 2px;
  pointer-events: none;
}
.ai-lb-video-label {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  padding: 2px 3px;
  border-radius: 3px;
  color: #fff;
  background: rgba(0,0,0,.74);
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
}
@media screen and (max-width: 699px) {
  .ai-lb-video-play {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
  .ai-lb-video-label { font-size: 9px; }
}


/* ======================================================================
   Art Image responsive v28 — smartphone portrait refinement
   Desktop/tablet landscape stays unchanged.
   ====================================================================== */
@media screen and (max-width: 699px) and (orientation: portrait) {
  html, body, #imPage {
    overflow-x: hidden !important;
  }

  /* One compact black brand zone: transparent logo first, original menu below. */
  #imMnMnGraphics {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: clamp(142px, 42vw, 182px) !important;
    margin: 0 !important;
    background-color: #000 !important;
    background-image: url('../images/art-image-logo-mobile.png') !important;
    background-repeat: no-repeat !important;
    background-position: center 7px !important;
    background-size: auto calc(100% - 12px) !important;
  }

  #imMnMn {
    width: 100% !important;
    padding: 4px 9px 12px !important;
    background: #000 !important;
    overflow: visible !important;
  }

  /* 3 items on first row + 2 perfectly centered on second row. */
  #imMnMn > ul {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: min(100%, 410px) !important;
    max-width: 410px !important;
    margin: 0 auto !important;
    gap: 5px 7px !important;
    align-items: center !important;
    justify-items: stretch !important;
  }
  #imMnMn > ul > li {
    grid-column: span 2;
    width: 100% !important;
    height: clamp(31px, 9.3vw, 40px) !important;
    margin: 0 !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  #imMnMn > ul > li:nth-child(4) { grid-column: 2 / span 2; }
  #imMnMn > ul > li:nth-child(5) { grid-column: 4 / span 2; }
  #imMnMn > ul > li > a,
  #imMnMn > ul > li .imMnMnFirstBg,
  #imMnMn > ul > li .imMnMnImg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Original painted site background starts immediately below the black menu. */
  #imContent {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 10px 30px !important;
    background-color: #e8cda9 !important;
    background-image: url('bg.jpg') !important;
    background-repeat: repeat-y !important;
    background-position: center top !important;
    background-size: max(760px, 180vw) auto !important;
    overflow: visible !important;
  }

  /* Language stays available but becomes a small dark control in the brand area. */
  .ai-language-picker {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10030 !important;
    margin: 0 !important;
  }
  .ai-language-select {
    min-width: 0 !important;
    width: 105px !important;
    min-height: 31px !important;
    height: 31px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    border-radius: 15px !important;
    background: rgba(10,10,10,.92) !important;
  }

  /* Home: full original animation scaled as one object, no crop. */
  body.ai-home-page .ai-home-top-row {
    min-height: 0 !important;
    margin: 0 !important;
  }
  body.ai-home-page #imObjectSocialNetwork_2 {
    display: none !important;
  }
  body.ai-home-page .ai-home-gallery-row {
    margin-top: 2px !important;
  }

  /* Galleria / Quadri: two compact columns on normal phones. */
  body.ai-gallery-page .ai-fluid-grid,
  body.ai-quadri-page .ai-fluid-grid {
    width: 100% !important;
    gap: 8px !important;
    padding: 2px 0 14px !important;
  }
  body.ai-gallery-page .ai-masonry-column,
  body.ai-quadri-page .ai-masonry-column {
    gap: 8px !important;
    min-width: 0 !important;
  }
  body.ai-gallery-page .ai-masonry-column > .ai-grid-item,
  body.ai-quadri-page .ai-masonry-column > .ai-grid-item,
  body.ai-gallery-page .ai-masonry-column .ai-preview-frame,
  body.ai-quadri-page .ai-masonry-column .ai-preview-frame {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  body.ai-gallery-page .ai-masonry-column img.ai-hd-preview,
  body.ai-quadri-page .ai-masonry-column img.ai-hd-preview,
  body.ai-gallery-page .ai-masonry-column img.ai-native-preview,
  body.ai-quadri-page .ai-masonry-column img.ai-native-preview {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Top notes remain readable without stealing vertical space. */
  .ai-top-note-column {
    padding: 0 2px 5px !important;
  }
  .ai-top-note-text,
  .ai-top-note-text .fs19 {
    font-size: clamp(10px, 3.15vw, 13px) !important;
    line-height: 1.25 !important;
  }

  /* Shop/contact cards use the full phone width with comfortable touch spacing. */
  body.ai-shop-page #imProductList_1 .imProductListCont,
  body.ai-contact-page #imContent [id^='imCellStyle_'] {
    max-width: 100% !important;
  }
  body.ai-shop-page #imProductList_1 .imProductListCont {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Tooltips are mouse-only; never leave stale bubbles over touch UI. */
  .imTip { display: none !important; }
}

@media screen and (max-width: 334px) and (orientation: portrait) {
  /* Very narrow phones: 2 + 2 + 1 keeps buttons legible. */
  #imMnMn > ul {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  #imMnMn > ul > li { grid-column: span 2; }
  #imMnMn > ul > li:nth-child(4) { grid-column: 1 / span 2; }
  #imMnMn > ul > li:nth-child(5) { grid-column: 3 / span 2; }
}


/* ======================================================================
   Art Image responsive v29 — smartphone polish
   - Home animation: no lateral crop on very narrow Chrome windows
   - black logo/menu zone fades softly into the original background
   - menu artwork slightly smaller only on portrait phones
   - Galleria/Quadri top notes centered and readable over light background
   ====================================================================== */

@media screen and (max-width: 699px) and (orientation: portrait) {

  /* ---- Brand/menu zone: no hard-edged black box ---- */
  #imMnMnGraphics {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: #000 !important;
  }

  #imMnMn {
    position: relative !important;
    margin-bottom: 22px !important;
    padding-top: 3px !important;
    padding-bottom: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
    overflow: visible !important;
  }

  /* Morbida dissolvenza nera sopra l'inizio dello sfondo artistico. */
  #imMnMn::after {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -28px !important;
    height: 30px !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.84) 28%,
      rgba(0,0,0,.44) 62%,
      rgba(0,0,0,0) 100%
    ) !important;
  }

  /* ---- Menu: leggermente più piccolo SOLO su smartphone verticale ---- */
  #imMnMn > ul {
    gap: 3px 5px !important;
  }

  #imMnMn > ul > li {
    width: 91% !important;
    height: clamp(28px, 8.2vw, 35px) !important;
    justify-self: center !important;
  }

  #imMnMn > ul > li > a,
  #imMnMn > ul > li .imMnMnFirstBg,
  #imMnMn > ul > li .imMnMnImg {
    width: 100% !important;
    height: 100% !important;
    background-size: 100% 100% !important;
    background-position: center !important;
  }

  /* ---- Home: il box esterno non deve tagliare la scala dell'animazione ---- */
  body.ai-home-page .ai-home-gallery-row,
  body.ai-home-page #imCell_1,
  body.ai-home-page #imCellStyle_1 {
    overflow: visible !important;
  }

  body.ai-home-page #imObjectGallery_1.ai-home-mobile-gallery {
    overflow: hidden !important; /* mantiene pulita la singola diapositiva */
  }

  /* ---- Galleria / Quadri: frase centrata e sempre leggibile ---- */
  body.ai-gallery-page .ai-top-toolbar,
  body.ai-quadri-page .ai-top-toolbar {
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  body.ai-gallery-page .ai-top-note-column,
  body.ai-quadri-page .ai-top-note-column {
    width: fit-content !important;
    max-width: calc(100% - 12px) !important;
    margin: 7px auto 11px !important;
    padding: 6px 12px 7px !important;
    border: 1px solid rgba(214, 63, 39, .48) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, rgba(8,8,8,.88), rgba(0,0,0,.75)) !important;
    box-shadow:
      0 5px 15px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.08) !important;
    box-sizing: border-box !important;
  }

  body.ai-gallery-page .ai-top-note-column > div,
  body.ai-gallery-page .ai-top-note-column [id^="imCellStyle_"],
  body.ai-gallery-page .ai-top-note-column [id^="imTextObject_"],
  body.ai-gallery-page .ai-top-note-column .text-tab-content,
  body.ai-gallery-page .ai-top-note-column .text-inner,
  body.ai-quadri-page .ai-top-note-column > div,
  body.ai-quadri-page .ai-top-note-column [id^="imCellStyle_"],
  body.ai-quadri-page .ai-top-note-column [id^="imTextObject_"],
  body.ai-quadri-page .ai-top-note-column .text-tab-content,
  body.ai-quadri-page .ai-top-note-column .text-inner {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body.ai-gallery-page .ai-top-note-text,
  body.ai-quadri-page .ai-top-note-text {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
    text-align: center !important;
    color: #fff7e8 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.95) !important;
    font-size: clamp(10px, 3.05vw, 13px) !important;
    line-height: 1.25 !important;
  }

  body.ai-gallery-page .ai-top-note-text .fs19,
  body.ai-quadri-page .ai-top-note-text .fs19 {
    font-size: inherit !important;
    color: #fff7e8 !important;
  }

  body.ai-gallery-page .ai-top-note-link,
  body.ai-quadri-page .ai-top-note-link {
    color: #ef8be9 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.95) !important;
  }
}

/* Sui telefoni veramente stretti riduco ancora di un soffio il menu,
   senza cambiare il layout 2+2+1 già previsto. */
@media screen and (max-width: 334px) and (orientation: portrait) {
  #imMnMn > ul > li {
    width: 88% !important;
    height: 28px !important;
  }

  body.ai-gallery-page .ai-top-note-column,
  body.ai-quadri-page .ai-top-note-column {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

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


/* ======================================================================
   Art Image responsive v30 — smartphone
   - Home: slideshow mobile dedicato, sempre interamente visibile
   - Galleria/Quadri: testo leggibile senza box dietro
   ====================================================================== */

@media screen and (max-width: 699px) and (orientation: portrait) {

  /* ---------- HOME: vecchio slideshow nascosto SOLO sul telefono ---------- */
  body.ai-home-page #imObjectGallery_1.ai-native-home-hidden-mobile {
    display: none !important;
  }

  body.ai-home-page .ai-home-gallery-row,
  body.ai-home-page #imCell_1,
  body.ai-home-page #imCellStyle_1 {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.ai-home-page #aiMobileHomeSlideshow.ai-mobile-home-active {
    display: block !important;
    position: relative !important;
    width: min(100%, 640px) !important;
    aspect-ratio: 743 / 557 !important;
    height: auto !important;
    margin: 4px auto 10px !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.ai-home-page #aiMobileHomeSlideshow[hidden] {
    display: none !important;
  }

  body.ai-home-page .ai-mobile-home-stage {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  body.ai-home-page .ai-mobile-home-slide {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform-origin: center center !important;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  @keyframes aiMobileFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes aiMobileZoom {
    from { opacity: 0; transform: scale(.91); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes aiMobileLeft {
    from { opacity: 0; transform: translateX(-9%) scale(.98); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
  }

  @keyframes aiMobileRight {
    from { opacity: 0; transform: translateX(9%) scale(.98); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
  }

  @keyframes aiMobileTop {
    from { opacity: 0; transform: translateY(-8%) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes aiMobileBottom {
    from { opacity: 0; transform: translateY(8%) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  body.ai-home-page .ai-mobile-in-fade   { animation: aiMobileFade   .55s ease-out both; }
  body.ai-home-page .ai-mobile-in-zoom   { animation: aiMobileZoom   .70s cubic-bezier(.2,.72,.25,1) both; }
  body.ai-home-page .ai-mobile-in-left   { animation: aiMobileLeft   .62s ease-out both; }
  body.ai-home-page .ai-mobile-in-right  { animation: aiMobileRight  .62s ease-out both; }
  body.ai-home-page .ai-mobile-in-top    { animation: aiMobileTop    .62s ease-out both; }
  body.ai-home-page .ai-mobile-in-bottom { animation: aiMobileBottom .62s ease-out both; }

  /* ---------- GALLERIA / QUADRI: niente box ---------- */
  body.ai-gallery-page .ai-top-note-column,
  body.ai-quadri-page .ai-top-note-column {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto 12px !important;
    padding: 2px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  body.ai-gallery-page .ai-top-note-column > div,
  body.ai-gallery-page .ai-top-note-column [id^="imCellStyle_"],
  body.ai-gallery-page .ai-top-note-column [id^="imTextObject_"],
  body.ai-gallery-page .ai-top-note-column .text-tab-content,
  body.ai-gallery-page .ai-top-note-column .text-inner,
  body.ai-quadri-page .ai-top-note-column > div,
  body.ai-quadri-page .ai-top-note-column [id^="imCellStyle_"],
  body.ai-quadri-page .ai-top-note-column [id^="imTextObject_"],
  body.ai-quadri-page .ai-top-note-column .text-tab-content,
  body.ai-quadri-page .ai-top-note-column .text-inner {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body.ai-gallery-page .ai-top-note-text,
  body.ai-quadri-page .ai-top-note-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    white-space: normal !important;
    text-align: center !important;
    color: #fff8eb !important;
    font-size: clamp(12px, 3.45vw, 15px) !important;
    line-height: 1.35 !important;
    -webkit-text-stroke: .20px rgba(0,0,0,.92);
    text-shadow:
      0 1px 1px rgba(0,0,0,1),
      0 0 3px rgba(0,0,0,1),
      0 0 7px rgba(0,0,0,.92),
      0 0 12px rgba(0,0,0,.64) !important;
  }

  body.ai-gallery-page .ai-top-note-text .fs19,
  body.ai-quadri-page .ai-top-note-text .fs19 {
    font-size: inherit !important;
    color: inherit !important;
  }

  body.ai-gallery-page .ai-top-note-link,
  body.ai-quadri-page .ai-top-note-link,
  body.ai-gallery-page .ai-top-note-link:visited,
  body.ai-quadri-page .ai-top-note-link:visited {
    color: #f09bea !important;
    -webkit-text-stroke: .15px rgba(0,0,0,.95);
    text-decoration: underline !important;
    text-shadow:
      0 1px 1px rgba(0,0,0,1),
      0 0 3px rgba(0,0,0,1),
      0 0 7px rgba(0,0,0,.92) !important;
  }
}

@media screen and (max-width: 340px) and (orientation: portrait) {
  body.ai-gallery-page .ai-top-note-text,
  body.ai-quadri-page .ai-top-note-text {
    font-size: 11px !important;
  }
}


/* ======================================================================
   Art Image responsive v31
   Smartphone: menu ad arco + maggiore leggibilità + effetti animazione.
   ====================================================================== */
@media screen and (max-width: 699px) and (orientation: portrait) {

  #imPage {
    position: relative !important;
  }

  /* Pannello nero superiore con fondo curvo, senza effetto "rettangolo". */
  #imMnMnGraphics {
    display: block !important;
    position: relative !important;
    z-index: 8 !important;
    width: 100% !important;
    height: clamp(268px, 69vw, 315px) !important;
    margin: 0 !important;
    background-color: #000 !important;
    background-image: url('../images/art-image-logo-mobile.png') !important;
    background-repeat: no-repeat !important;
    background-position: center 8px !important;
    background-size: clamp(150px, 39vw, 182px) auto !important;
    border: 0 !important;
    border-radius: 0 0 48% 48% / 0 0 13% 13% !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #imMnMnGraphics::after {
    content: "" !important;
    position: absolute !important;
    z-index: 9 !important;
    left: 4% !important;
    right: 4% !important;
    bottom: -20px !important;
    height: 38px !important;
    border-radius: 0 0 50% 50% !important;
    background: radial-gradient(
      ellipse at center top,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.42) 48%,
      rgba(0,0,0,0) 78%
    ) !important;
    pointer-events: none !important;
  }

  /* Il menu viene sovrapposto allo stesso pannello nero. */
  #imMnMn {
    position: absolute !important;
    z-index: 20 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: clamp(268px, 69vw, 315px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

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

  #imMnMn > ul {
    display: block !important;
    position: relative !important;
    width: min(100%, 470px) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #imMnMn > ul > li {
    position: absolute !important;
    display: block !important;
    width: clamp(96px, 25vw, 116px) !important;
    height: clamp(31px, 8vw, 38px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    transform: none !important;
  }

  /* Disposizione a semicerchio come nello schizzo. */
  #imMnMn > ul > li:nth-child(1) {
    left: 2.5% !important;
    top: 42% !important;
  }
  #imMnMn > ul > li:nth-child(2) {
    left: 11.5% !important;
    top: 61% !important;
  }
  #imMnMn > ul > li:nth-child(3) {
    left: 50% !important;
    top: 72% !important;
    transform: translateX(-50%) !important;
  }
  #imMnMn > ul > li:nth-child(4) {
    right: 11.5% !important;
    left: auto !important;
    top: 61% !important;
  }
  #imMnMn > ul > li:nth-child(5) {
    right: 2.5% !important;
    left: auto !important;
    top: 42% !important;
  }

  #imMnMn > ul > li > a,
  #imMnMn > ul > li .imMnMnFirstBg,
  #imMnMn > ul > li .imMnMnImg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
  }

  /* Lingua appena sotto l'arco, piccola e discreta. */
  .ai-language-picker {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 30 !important;
    display: block !important;
    width: fit-content !important;
    margin: 2px 0 7px 5px !important;
  }

  .ai-language-select {
    width: 98px !important;
    height: 29px !important;
    min-height: 29px !important;
    font-size: 10.5px !important;
  }

  /* Galleria e Quadri: alone nero più deciso SOLO sulle lettere. */
  body.ai-gallery-page .ai-top-note-text,
  body.ai-quadri-page .ai-top-note-text {
    -webkit-text-stroke: .42px rgba(0,0,0,.98) !important;
    text-shadow:
      -1px -1px 1px rgba(0,0,0,.98),
       1px -1px 1px rgba(0,0,0,.98),
      -1px  1px 1px rgba(0,0,0,.98),
       1px  1px 1px rgba(0,0,0,.98),
       0 0 4px rgba(0,0,0,1),
       0 0 8px rgba(0,0,0,.98),
       0 0 14px rgba(0,0,0,.88),
       0 0 22px rgba(0,0,0,.55) !important;
  }

  body.ai-gallery-page .ai-top-note-link,
  body.ai-quadri-page .ai-top-note-link,
  body.ai-gallery-page .ai-top-note-link:visited,
  body.ai-quadri-page .ai-top-note-link:visited {
    -webkit-text-stroke: .30px rgba(0,0,0,.98) !important;
    text-shadow:
      -1px -1px 1px rgba(0,0,0,.98),
       1px -1px 1px rgba(0,0,0,.98),
      -1px  1px 1px rgba(0,0,0,.98),
       1px  1px 1px rgba(0,0,0,.98),
       0 0 5px rgba(0,0,0,1),
       0 0 10px rgba(0,0,0,.92) !important;
  }

  /* Home: foto sempre intera, ma con movimenti visibili anche fuori dal riquadro. */
  body.ai-home-page #aiMobileHomeSlideshow.ai-mobile-home-active {
    width: min(100%, 650px) !important;
    aspect-ratio: 743 / 557 !important;
    overflow: visible !important;
  }

  body.ai-home-page .ai-mobile-home-stage,
  body.ai-home-page .ai-mobile-home-slide {
    overflow: visible !important;
  }

  body.ai-home-page .ai-mobile-home-slide {
    object-fit: contain !important;
    transform-origin: center center !important;
  }

  /* Effetti equivalenti agli effetti originali WebSite X5. */
  @keyframes aiFxBounceTop {
    0%   { opacity:0; transform:translateY(-58%) scale(.98); }
    52%  { opacity:1; transform:translateY(10%); }
    68%  { transform:translateY(-5.5%); }
    80%  { transform:translateY(3%); }
    90%  { transform:translateY(-1.4%); }
    100% { opacity:1; transform:translateY(0); }
  }
  @keyframes aiFxBounceBottom {
    0%   { opacity:0; transform:translateY(58%) scale(.98); }
    52%  { opacity:1; transform:translateY(-10%); }
    68%  { transform:translateY(5.5%); }
    80%  { transform:translateY(-3%); }
    90%  { transform:translateY(1.4%); }
    100% { opacity:1; transform:translateY(0); }
  }
  @keyframes aiFxBounceLeft {
    0%   { opacity:0; transform:translateX(-58%) scale(.98); }
    52%  { opacity:1; transform:translateX(10%); }
    68%  { transform:translateX(-5.5%); }
    80%  { transform:translateX(3%); }
    90%  { transform:translateX(-1.4%); }
    100% { opacity:1; transform:translateX(0); }
  }
  @keyframes aiFxBounceRight {
    0%   { opacity:0; transform:translateX(58%) scale(.98); }
    52%  { opacity:1; transform:translateX(-10%); }
    68%  { transform:translateX(5.5%); }
    80%  { transform:translateX(-3%); }
    90%  { transform:translateX(1.4%); }
    100% { opacity:1; transform:translateX(0); }
  }
  @keyframes aiFxElasticTop {
    0%   { opacity:0; transform:translateY(-70%) scaleY(.78); }
    45%  { opacity:1; transform:translateY(11%) scaleY(1.05); }
    60%  { transform:translateY(-6%) scaleY(.97); }
    73%  { transform:translateY(3.5%) scaleY(1.02); }
    84%  { transform:translateY(-1.8%); }
    92%  { transform:translateY(.8%); }
    100% { opacity:1; transform:translateY(0) scaleY(1); }
  }
  @keyframes aiFxElasticLeft {
    0%   { opacity:0; transform:translateX(-70%) scaleX(.80); }
    45%  { opacity:1; transform:translateX(11%) scaleX(1.05); }
    60%  { transform:translateX(-6%) scaleX(.97); }
    73%  { transform:translateX(3.5%) scaleX(1.02); }
    84%  { transform:translateX(-1.8%); }
    92%  { transform:translateX(.8%); }
    100% { opacity:1; transform:translateX(0) scaleX(1); }
  }
  @keyframes aiFxZoom {
    0%   { opacity:0; transform:scale(.18); }
    68%  { opacity:1; transform:scale(1.08); }
    84%  { transform:scale(.97); }
    100% { opacity:1; transform:scale(1); }
  }
  @keyframes aiFxRotateZoom {
    0%   { opacity:0; transform:scale(.16) rotate(-210deg); }
    72%  { opacity:1; transform:scale(1.07) rotate(8deg); }
    88%  { transform:scale(.98) rotate(-2deg); }
    100% { opacity:1; transform:scale(1) rotate(0); }
  }
  @keyframes aiFxFlip {
    0%   { opacity:0; transform:perspective(700px) rotateY(-92deg) scale(.92); }
    65%  { opacity:1; transform:perspective(700px) rotateY(13deg) scale(1.02); }
    82%  { transform:perspective(700px) rotateY(-5deg); }
    100% { opacity:1; transform:perspective(700px) rotateY(0); }
  }
  @keyframes aiFxSlices {
    0%   { opacity:0; clip-path:inset(0 48% 0 48%); filter:blur(5px); transform:scaleX(.84); }
    45%  { opacity:1; clip-path:inset(0 23% 0 23%); filter:blur(2px); }
    100% { opacity:1; clip-path:inset(0 0 0 0); filter:none; transform:scaleX(1); }
  }
  @keyframes aiFxScramble {
    0%   { opacity:0; transform:translate(-7%,5%) scale(.92) skewX(7deg); filter:blur(5px); }
    18%  { opacity:.45; transform:translate(6%,-4%) scale(1.03) skewX(-5deg); }
    36%  { transform:translate(-4%,2%) scale(.97) skewX(3deg); }
    54%  { opacity:.8; transform:translate(3%,-2%) scale(1.02) skewX(-2deg); filter:blur(2px); }
    72%  { transform:translate(-1.5%,1%) scale(.99); }
    100% { opacity:1; transform:none; filter:none; }
  }
  @keyframes aiFxFade {
    from { opacity:0; }
    to   { opacity:1; }
  }

  body.ai-home-page .ai-mobile-fx-bounce-top    { animation:aiFxBounceTop .95s ease-out both; }
  body.ai-home-page .ai-mobile-fx-bounce-right  { animation:aiFxBounceRight .95s ease-out both; }
  body.ai-home-page .ai-mobile-fx-bounce-bottom { animation:aiFxBounceBottom .95s ease-out both; }
  body.ai-home-page .ai-mobile-fx-bounce-left   { animation:aiFxBounceLeft .95s ease-out both; }
  body.ai-home-page .ai-mobile-fx-elastic-top   { animation:aiFxElasticTop 1.05s ease-out both; }
  body.ai-home-page .ai-mobile-fx-elastic-left  { animation:aiFxElasticLeft 1.05s ease-out both; }
  body.ai-home-page .ai-mobile-fx-zoom          { animation:aiFxZoom .82s ease-out both; }
  body.ai-home-page .ai-mobile-fx-rotate-zoom   { animation:aiFxRotateZoom .92s cubic-bezier(.2,.72,.22,1) both; }
  body.ai-home-page .ai-mobile-fx-flip          { animation:aiFxFlip .82s ease-out both; }
  body.ai-home-page .ai-mobile-fx-slices        { animation:aiFxSlices .82s ease-out both; }
  body.ai-home-page .ai-mobile-fx-scramble      { animation:aiFxScramble .82s ease-out both; }
  body.ai-home-page .ai-mobile-fx-fade          { animation:aiFxFade .55s ease-out both; }
}

@media screen and (max-width: 350px) and (orientation: portrait) {
  #imMnMnGraphics,
  #imMnMn {
    height: 258px !important;
  }

  #imMnMnGraphics {
    background-size: 142px auto !important;
  }

  #imMnMn > ul > li {
    width: 92px !important;
    height: 30px !important;
  }

  #imMnMn > ul > li:nth-child(1) {
    left: 1% !important;
  }

  #imMnMn > ul > li:nth-child(5) {
    right: 1% !important;
  }
}


/* ======================================================================
   Art Image responsive v32
   - Menu smartphone centrato geometricamente e leggermente più grande
   - Logo smartphone più grande
   - Testi piccoli bianchi + alone nero; link rosso vivo
   - "Per fare un ordine clicca qui" usa lo stesso criterio
   - Lingua visibile solo in Home, Acquisti e Contatti
   ====================================================================== */

/* Lingua: niente selettore in Galleria e Quadri, su QUALSIASI formato. */
body.ai-gallery-page .ai-language-picker,
body.ai-quadri-page .ai-language-picker {
  display: none !important;
}

@media screen and (max-width: 699px) and (orientation: portrait) {

  /* ---------------------------------------------------------------
     PANNELLO / LOGO: tutto riferito allo stesso centro geometrico.
     --------------------------------------------------------------- */
  #imMnMnGraphics {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(286px, 73vw, 332px) !important;
    margin: 0 !important;

    background-position: 50% 7px !important;
    background-size: clamp(172px, 44vw, 208px) auto !important;

    border-radius: 0 0 48% 48% / 0 0 13% 13% !important;
  }

  #imMnMn {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(286px, 73vw, 332px) !important;
  }

  /* L'UL usa esattamente lo stesso asse centrale del logo. */
  #imMnMn > ul {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    width: min(100%, 500px) !important;
    max-width: 500px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Nomi menu leggermente più grandi, sfruttando lo spazio disponibile. */
  #imMnMn > ul > li {
    width: clamp(108px, 28.5vw, 132px) !important;
    height: clamp(35px, 9vw, 41px) !important;
  }

  /* Curva più equilibrata e perfettamente simmetrica. */
  #imMnMn > ul > li:nth-child(1) {
    left: 2.5% !important;
    right: auto !important;
    top: 43% !important;
    transform: none !important;
  }

  #imMnMn > ul > li:nth-child(2) {
    left: 11% !important;
    right: auto !important;
    top: 61.5% !important;
    transform: none !important;
  }

  #imMnMn > ul > li:nth-child(3) {
    left: 50% !important;
    right: auto !important;
    top: 73.5% !important;
    transform: translateX(-50%) !important;
  }

  #imMnMn > ul > li:nth-child(4) {
    right: 11% !important;
    left: auto !important;
    top: 61.5% !important;
    transform: none !important;
  }

  #imMnMn > ul > li:nth-child(5) {
    right: 2.5% !important;
    left: auto !important;
    top: 43% !important;
    transform: none !important;
  }

  /* ---------------------------------------------------------------
     GALLERIA / QUADRI:
     bianco pieno dentro, alone/contorno nero deciso fuori.
     --------------------------------------------------------------- */
  body.ai-gallery-page .ai-top-note-text,
  body.ai-quadri-page .ai-top-note-text,
  body.ai-gallery-page .ai-top-note-text .fs19,
  body.ai-quadri-page .ai-top-note-text .fs19 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: .48px rgba(0,0,0,1) !important;
    text-shadow:
      -1px -1px 1px #000,
       1px -1px 1px #000,
      -1px  1px 1px #000,
       1px  1px 1px #000,
       0 0 4px #000,
       0 0 8px rgba(0,0,0,1),
       0 0 13px rgba(0,0,0,.94),
       0 0 20px rgba(0,0,0,.72) !important;
  }

  /* email / Acquisti: rosso vivo, non viola. */
  body.ai-gallery-page .ai-top-note-link,
  body.ai-quadri-page .ai-top-note-link,
  body.ai-gallery-page .ai-top-note-link:link,
  body.ai-quadri-page .ai-top-note-link:link,
  body.ai-gallery-page .ai-top-note-link:visited,
  body.ai-quadri-page .ai-top-note-link:visited {
    color: #ff2418 !important;
    -webkit-text-fill-color: #ff2418 !important;
    -webkit-text-stroke: .34px rgba(0,0,0,1) !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 rgba(0,0,0,.96) !important;
  }

  body.ai-gallery-page .ai-top-note-link:hover,
  body.ai-quadri-page .ai-top-note-link:hover {
    color: #ff4a3e !important;
    -webkit-text-fill-color: #ff4a3e !important;
  }

  /* ---------------------------------------------------------------
     ACQUISTI: "Per fare un ordine clicca qui"
     stesso criterio di Galleria/Quadri.
     --------------------------------------------------------------- */
  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 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-align: center !important;
  }

  body.ai-shop-page .ai-order-note-text,
  body.ai-shop-page .ai-order-note-text .cf1 {
    display: block !important;
    width: 100% !important;
    margin: 7px auto 11px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(13px, 3.7vw, 17px) !important;
    line-height: 1.35 !important;
    text-align: center !important;
    -webkit-text-stroke: .48px rgba(0,0,0,1) !important;
    text-shadow:
      -1px -1px 1px #000,
       1px -1px 1px #000,
      -1px  1px 1px #000,
       1px  1px 1px #000,
       0 0 4px #000,
       0 0 8px #000,
       0 0 14px rgba(0,0,0,.90) !important;
  }

  body.ai-shop-page .ai-order-note-link,
  body.ai-shop-page .ai-order-note-link:link,
  body.ai-shop-page .ai-order-note-link:visited {
    display: inline !important;
    color: #ff2418 !important;
    -webkit-text-fill-color: #ff2418 !important;
    font-size: inherit !important;
    -webkit-text-stroke: .34px rgba(0,0,0,1) !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 rgba(0,0,0,.96) !important;
  }

  body.ai-shop-page .ai-order-note-link:hover {
    color: #ff4a3e !important;
    -webkit-text-fill-color: #ff4a3e !important;
  }
}

/* Telefono molto stretto: resta centrato ma evita sovrapposizioni. */
@media screen and (max-width: 350px) and (orientation: portrait) {
  #imMnMnGraphics,
  #imMnMn {
    height: 272px !important;
  }

  #imMnMnGraphics {
    background-size: 160px auto !important;
  }

  #imMnMn > ul > li {
    width: 101px !important;
    height: 33px !important;
  }

  #imMnMn > ul > li:nth-child(1) { left: 1.5% !important; }
  #imMnMn > ul > li:nth-child(2) { left: 8.5% !important; }
  #imMnMn > ul > li:nth-child(4) { right: 8.5% !important; }
  #imMnMn > ul > li:nth-child(5) { right: 1.5% !important; }
}


/* ======================================================================
   Art Image responsive v33
   Smartphone/tablet verticale:
   - logo corretto visivamente di 9px verso sinistra
   - logo più grande
   - menu più grande
   - voci posizionate rispetto AL CENTRO, non ai bordi:
     così non "scappano" quando si allarga la finestra
   - stessa geometria fino a 820px, per evitare il salto improvviso
   ====================================================================== */

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

  #imPage {
    position: relative !important;
  }

  /* Pannello superiore. */
  #imMnMnGraphics {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(310px, 68vw, 350px) !important;
    margin: 0 !important;
    background-color: #000 !important;

    /* Il PNG è geometricamente centrato, ma visivamente pesa un po' a destra:
       -9px lo riallineano al vero centro visto nello screenshot. */
    background-position: calc(50% - 9px) 7px !important;
    background-size: clamp(190px, 43vw, 225px) auto !important;

    border: 0 !important;
    border-radius: 0 0 48% 48% / 0 0 13% 13% !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #imMnMn {
    position: absolute !important;
    z-index: 20 !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(310px, 68vw, 350px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

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

  /* Il centro del menu è sempre esattamente il 50% della pagina.
     Non usiamo più "left: 2%" e "right: 2%" che cambiano troppo
     quando la finestra diventa più larga. */
  #imMnMn > ul {
    --ai-menu-outer-x: clamp(130px, 30vw, 160px);
    --ai-menu-inner-x: clamp(88px, 20vw, 112px);

    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 540px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #imMnMn > ul > li {
    position: absolute !important;
    display: block !important;
    left: 50% !important;
    right: auto !important;
    width: clamp(116px, 29vw, 142px) !important;
    height: clamp(37px, 8.5vw, 43px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
  }

  /* Centri perfettamente speculari rispetto all'asse del logo. */
  #imMnMn > ul > li:nth-child(1) {
    top: 45% !important;
    transform: translateX(calc(-50% - var(--ai-menu-outer-x))) !important;
  }

  #imMnMn > ul > li:nth-child(2) {
    top: 63.5% !important;
    transform: translateX(calc(-50% - var(--ai-menu-inner-x))) !important;
  }

  #imMnMn > ul > li:nth-child(3) {
    top: 76.5% !important;
    transform: translateX(-50%) !important;
  }

  #imMnMn > ul > li:nth-child(4) {
    top: 63.5% !important;
    transform: translateX(calc(-50% + var(--ai-menu-inner-x))) !important;
  }

  #imMnMn > ul > li:nth-child(5) {
    top: 45% !important;
    transform: translateX(calc(-50% + var(--ai-menu-outer-x))) !important;
  }

  #imMnMn > ul > li > a,
  #imMnMn > ul > li .imMnMnFirstBg,
  #imMnMn > ul > li .imMnMnImg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
  }

  /* Il selettore lingua, quando presente, parte sempre sotto l'arco. */
  .ai-language-picker {
    position: relative !important;
    z-index: 30 !important;
    width: fit-content !important;
    margin-top: 4px !important;
  }
}

/* Schermi molto stretti: stessa geometria, solo più compatta. */
@media screen and (max-width: 350px) and (orientation: portrait) {
  #imMnMnGraphics,
  #imMnMn {
    height: 286px !important;
  }

  #imMnMnGraphics {
    background-position: calc(50% - 7px) 6px !important;
    background-size: 174px auto !important;
  }

  #imMnMn > ul {
    --ai-menu-outer-x: 108px !important;
    --ai-menu-inner-x: 76px !important;
  }

  #imMnMn > ul > li {
    width: 100px !important;
    height: 34px !important;
  }
}


/* ======================================================================
   Art Image responsive v34
   MENU MOBILE RIFATTO:
   - indipendente dal vecchio contenitore WebSite X5
   - centrato rispetto al VIEWPORT reale
   - non può più perdere Home/Galleria a sinistra o tagliare Contatti a destra
   ====================================================================== */

.ai-mobile-header {
  display: none;
}

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

  /* Disattivo completamente il vecchio menu mobile, causa degli spostamenti. */
  #imMnMnGraphics,
  #imMnMn {
    display: none !important;
  }

  #imPage {
    padding-top: 0 !important;
    overflow: visible !important;
  }

  /* Esce dall'eventuale larghezza fissa di #imPage ed usa esattamente il viewport. */
  .ai-mobile-header {
    display: block !important;
    position: relative !important;
    z-index: 40 !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: none !important;
    height: clamp(308px, 69vw, 350px) !important;
    margin-left: -50vw !important;
    background: #000 !important;
    overflow: visible !important;
  }

  .ai-mobile-header::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -28px !important;
    height: 34px !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.76) 33%,
      rgba(0,0,0,.34) 67%,
      rgba(0,0,0,0) 100%
    ) !important;
  }

  /* Tutto il disegno del menu è centrato dentro un'area simmetrica. */
  .ai-mobile-header-inner {
    --ai-outer-x: clamp(112px, 28vw, 150px);
    --ai-inner-x: clamp(75px, 18vw, 100px);

    position: relative !important;
    width: min(100vw, 560px) !important;
    height: 100% !important;
    margin: 0 auto !important;
  }

  /* Logo: centro matematico vero, senza correzioni a occhio. */
  .ai-mobile-header-logo {
    position: absolute !important;
    z-index: 2 !important;
    top: 5px !important;
    left: 50% !important;
    width: clamp(205px, 47vw, 236px) !important;
    height: auto !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
  }

  .ai-mobile-menu-link {
    position: absolute !important;
    z-index: 5 !important;
    left: 50% !important;
    display: block !important;
    width: clamp(122px, 29vw, 148px) !important;
    height: auto !important;
    line-height: 0 !important;
  }

  .ai-mobile-menu-link img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }

  /* Cinque punti realmente speculari rispetto al centro. */
  .ai-mobile-menu-home {
    top: 151px !important;
    transform: translateX(calc(-50% - var(--ai-outer-x))) !important;
  }

  .ai-mobile-menu-contatti {
    top: 151px !important;
    transform: translateX(calc(-50% + var(--ai-outer-x))) !important;
  }

  .ai-mobile-menu-galleria {
    top: 202px !important;
    transform: translateX(calc(-50% - var(--ai-inner-x))) !important;
  }

  .ai-mobile-menu-acquisti {
    top: 202px !important;
    transform: translateX(calc(-50% + var(--ai-inner-x))) !important;
  }

  .ai-mobile-menu-quadri {
    top: 253px !important;
    transform: translateX(-50%) !important;
  }

  /* Lingua parte sotto il nuovo header, senza sovrapporsi. */
  .ai-language-picker {
    position: relative !important;
    z-index: 30 !important;
    margin-top: 4px !important;
  }
}

/* Telefoni molto stretti: tutto resta dentro, ma senza perdere la simmetria. */
@media screen and (max-width: 360px) and (orientation: portrait) {
  .ai-mobile-header {
    height: 292px !important;
  }

  .ai-mobile-header-inner {
    --ai-outer-x: 108px !important;
    --ai-inner-x: 72px !important;
  }

  .ai-mobile-header-logo {
    width: 192px !important;
  }

  .ai-mobile-menu-link {
    width: 112px !important;
  }

  .ai-mobile-menu-home,
  .ai-mobile-menu-contatti {
    top: 143px !important;
  }

  .ai-mobile-menu-galleria,
  .ai-mobile-menu-acquisti {
    top: 190px !important;
  }

  .ai-mobile-menu-quadri {
    top: 236px !important;
  }
}

/* Desktop / landscape: il nuovo header non interviene mai. */
@media screen and (min-width: 821px), screen and (orientation: landscape) {
  .ai-mobile-header {
    display: none !important;
  }
}


/* ======================================================================
   Art Image responsive v35
   Smartphone verticale:
   - logo mantenuto della stessa grandezza della v34
   - menu più aperto verso i bordi
   - maggiore distanza tra logo e voci
   - geometria simmetrica e stabile sul viewport
   ====================================================================== */

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

  .ai-mobile-header {
    height: clamp(332px, 73vw, 372px) !important;
  }

  .ai-mobile-header-inner {
    --ai-outer-x: clamp(145px, 35vw, 190px) !important;
    --ai-inner-x: clamp(104px, 25vw, 136px) !important;
    width: min(100vw, 590px) !important;
  }

  /* Logo: stessa grandezza della v34. */
  .ai-mobile-header-logo {
    top: 5px !important;
    left: 50% !important;
    width: clamp(205px, 47vw, 236px) !important;
    transform: translateX(-50%) !important;
  }

  /* Le voci restano leggibili, ma sfruttano meglio lo spazio laterale. */
  .ai-mobile-menu-link {
    width: clamp(124px, 29.5vw, 150px) !important;
  }

  /* Home / Contatti: più verso i bordi e con più aria dal logo. */
  .ai-mobile-menu-home,
  .ai-mobile-menu-contatti {
    top: 169px !important;
  }

  /* Galleria / Acquisti: più esterni e più in basso. */
  .ai-mobile-menu-galleria,
  .ai-mobile-menu-acquisti {
    top: 226px !important;
  }

  /* Quadri resta perfettamente al centro, ma più distante dal logo. */
  .ai-mobile-menu-quadri {
    top: 283px !important;
  }

  .ai-language-picker {
    margin-top: 8px !important;
  }
}

/* Telefoni davvero stretti: stessa idea, solo compressa quanto basta. */
@media screen and (max-width: 360px) and (orientation: portrait) {

  .ai-mobile-header {
    height: 312px !important;
  }

  .ai-mobile-header-inner {
    --ai-outer-x: 119px !important;
    --ai-inner-x: 82px !important;
  }

  .ai-mobile-header-logo {
    width: 192px !important;
  }

  .ai-mobile-menu-link {
    width: 112px !important;
  }

  .ai-mobile-menu-home,
  .ai-mobile-menu-contatti {
    top: 151px !important;
  }

  .ai-mobile-menu-galleria,
  .ai-mobile-menu-acquisti {
    top: 202px !important;
  }

  .ai-mobile-menu-quadri {
    top: 250px !important;
  }
}


/* ======================================================================
   Art Image responsive v36
   Smartphone verticale:
   - logo leggermente corretto a sinistra per il suo "peso visivo"
   - menu sempre simmetrico, con spazio ai lati
   - header molto più compatto in altezza
   - sfondo e contenuti iniziano prima
   - nella Home il selettore lingua non occupa altezza: resta sovrapposto
   - slideshow Home sale subito sotto il menu, così entra nella prima videata
   ====================================================================== */

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

  /* Header più basso: guadagniamo circa 60–75px nella prima schermata. */
  .ai-mobile-header {
    height: clamp(286px, 58vw, 305px) !important;
  }

  .ai-mobile-header-inner {
    --ai-outer-x: clamp(145px, 35vw, 190px) !important;
    --ai-inner-x: clamp(110px, 26vw, 140px) !important;
    width: min(100vw, 590px) !important;
  }

  /* Stessa grandezza del logo, ma leggermente a sinistra:
     il PNG è matematicamente centrato, il disegno invece pesa a destra. */
  .ai-mobile-header-logo {
    top: 2px !important;
    left: calc(50% - 9px) !important;
    width: clamp(205px, 47vw, 236px) !important;
    transform: translateX(-50%) !important;
  }

  .ai-mobile-menu-link {
    width: clamp(124px, 29.5vw, 150px) !important;
  }

  /* Home / Contatti restano molto esterni. */
  .ai-mobile-menu-home,
  .ai-mobile-menu-contatti {
    top: 143px !important;
  }

  /* Seconda coppia più in basso del logo, ma senza sprecare altezza. */
  .ai-mobile-menu-galleria,
  .ai-mobile-menu-acquisti {
    top: 202px !important;
  }

  /* Quadri chiude l'arco, centrato, appena sopra l'inizio dello sfondo. */
  .ai-mobile-menu-quadri {
    top: 252px !important;
  }

  /* Dissolvenza più corta per far arrivare prima visivamente lo sfondo. */
  .ai-mobile-header::after {
    bottom: -18px !important;
    height: 24px !important;
  }

  /* ---------------------------------------------------------------
     HOME: il selettore lingua si sovrappone allo sfondo e NON crea
     una riga alta prima dell'animazione.
     --------------------------------------------------------------- */
  body.ai-home-page .ai-home-top-row {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 35 !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: 8px !important;
    left: 8px !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 60 !important;
  }

  /* L'animazione parte subito: niente vuoto verticale sopra. */
  body.ai-home-page .ai-home-gallery-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.ai-home-page #aiMobileHomeSlideshow.ai-mobile-home-active {
    width: min(calc(100% - 8px), 640px) !important;
    margin: 0 auto 6px !important;
  }
}

/* Sui telefoni molto stretti stringo solo le distanze, senza cambiare logica. */
@media screen and (max-width: 360px) and (orientation: portrait) {

  .ai-mobile-header {
    height: 278px !important;
  }

  .ai-mobile-header-inner {
    --ai-outer-x: 119px !important;
    --ai-inner-x: 86px !important;
  }

  .ai-mobile-header-logo {
    top: 2px !important;
    left: calc(50% - 7px) !important;
    width: 192px !important;
  }

  .ai-mobile-menu-home,
  .ai-mobile-menu-contatti {
    top: 137px !important;
  }

  .ai-mobile-menu-galleria,
  .ai-mobile-menu-acquisti {
    top: 187px !important;
  }

  .ai-mobile-menu-quadri {
    top: 232px !important;
  }
}