.flexImage {
  /* flex-basis: 65%;
  display: flex;
  align-items: center;
  justify-content: center; */
  height: 100%;
  position: relative;
  overflow: hidden;
}

#canvas-mockup {
  width: 100%;
  height: 100%;
  display: block;
}





#background #productImage { display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(-30deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.75)); }



button { padding: .45rem .8rem; font-size: 14px; border: 1px solid #000; background: white; cursor: pointer; }
button:hover { background: #f7f7f7; }
button.is-active { border-color: #111; font-weight: 600; }

#frame.no-frame { padding: 0; }

/* Mat Board Outline */
#frame.thin-mat #productPicture picture,
#frame.wide-mat #productPicture picture { outline: 1px solid #eeeeee; }
/* FRAME - NO MAT BOARD */
#frame.no-mat #matboard { padding :0; }
#frame.no-mat #matboard #productPicture { border: 0; }
/* FRAME - WITH MAT BOARD */
#frame.wide-mat #matboard, #frame.thin-mat #matboard { border: 0; }
#frame #matboard { display: block; position: relative; width: 100%; max-width: 100%; box-sizing: border-box; } 
/* FRAME MOCKUP */
.wall-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* mimic background-size: cover */ z-index: 0; }

#productImage {position: relative;width: 100%;height: 100%;z-index: 1; /* put product above wall image */}

.portrait .frame-wrapper { max-width: 45%; }
.landscape .frame-wrapper { max-width: 65%; }
.portrait .frame-wrapper picture { aspect-ratio: 3 / 4; /*max-width: 45%;*/ }
.landscape .frame-wrapper picture { aspect-ratio: 4 / 3; max-width: 70%; }

/* ----------------------------------------------------------------------------------------------------------------------------------------------------- */
/* PICTURE */
#productPicture picture { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
#productPicture { position: absolute; }
/* #productPicture { position: relative; width: 100%; height: auto; background: transparent; } */
#productPicture picture,#productPicture img { display: block; width: 100%; height: auto; object-fit: contain; border: none; }
#frame.wide-mat #matboard #productPicture img.loaded,
#frame.thin-mat #matboard #productPicture img.loaded {border: 1px solid #eee; }

/* OCT */
/* Live stack */
.mockup-root { position: relative; }
.wall-bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0;
}

/* The frame is a real <img> at the bottom. The art sits above it and is absolutely positioned */
#frame { position: relative; }

/* The overlay <img> is inserted by art-mockup.js with absolute positioning */
/* #productImage { position: relative; z-index: 1; } */

/* Optional: parallax/scale illusion via CSS vars set by JS on size change */
.mockup-root { position: relative; --scale: 1; }
.mockup-root .frame-wrap { transform: scale(var(--scale)); transform-origin: center top; }

/* Latest 10-3 */
/* Art container (your <picture> with the <img>) */
#productImage {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: scale(var(--scale));
  transform-origin: center top;
}

/* Frame overlay */
#frame {
  position: relative;width: 100%;
  /* height: auto; */
  height: 100%;
}
#frame > img.frameOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
}

/* Art image itself */
#productPicture picture,
#productPicture img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
#productPicture {
  position: relative;
  z-index: 1;
}


.print-viewport {
  position: absolute;
  top: 84px;
  left: 84px;
  width: 1432px;
  height: 1924px;
  transform-origin: top left;
}


/* Calculations */
.size-12x16 #frame.no-mat .print-viewport {
  position: absolute;
  top: 4.02%;
  left: 4.5%;
  width: 91%;
  height: 91.98%;
  z-index: 1;
  overflow: hidden;
  transform: scale(0.48);
}

/* LAPTOP ---------------------------------------------------------------------------------------------------------- */
@media (min-width: 769px) {

  /* FRAME MOCKUP */
#product.single .flexRow.hero { display: flex; /*align-items: center;*/ height: 90vh; max-height: 90vh; gap: 2rem; }

  #product.single #background .flexRow.hero {
  display: flex;
  height: 90vh;
  align-items: center;
  justify-content: center;
}

  .flexImage {
    flex-basis: 65%;
    display: flex;
    align-items: center;
    justify-content: center; }
}

/* MOBILE ---------------------------------------- */
@media (max-width: 480px) {

    #product.single .flexRow .flexImage { width:100%; height: 60vh; }
    #product.single .flexRow.hero { display: block; height: inherit; }

    #background #productImage { height: 60vh; }
    #background { display: block; }

    .portrait .frame-wrapper { max-width: 72%; }

}