/* =========================================================
   Modern Treasures - Mobile Canvas Lock
   Purpose:
   Lock the complete mobile layout to one fixed design canvas
   and scale that canvas proportionally on every mobile device.
   ========================================================= */

@media screen and (max-width: 767px) {
  html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.mt-mobile-canvas-lock-active {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .mt-mobile-canvas-viewport {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .mt-mobile-canvas-inner {
    width: var(--mt-mobile-canvas-base-width, 393px) !important;
    min-width: var(--mt-mobile-canvas-base-width, 393px) !important;
    max-width: var(--mt-mobile-canvas-base-width, 393px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    transform-origin: top center !important;
    will-change: transform !important;
  }

  .mt-mobile-canvas-inner *,
  .mt-mobile-canvas-inner *::before,
  .mt-mobile-canvas-inner *::after {
    box-sizing: border-box;
  }

  body.mt-mobile-canvas-lock-active .mt-mobile-canvas-inner {
    max-width: var(--mt-mobile-canvas-base-width, 393px) !important;
  }

  body.mt-mobile-canvas-lock-active .mt-mobile-canvas-inner .elementor-section,
  body.mt-mobile-canvas-lock-active .mt-mobile-canvas-inner .elementor-container,
  body.mt-mobile-canvas-lock-active .mt-mobile-canvas-inner .elementor-widget-wrap {
    max-width: none;
  }

  body.mt-mobile-canvas-lock-active .mt-mobile-canvas-inner img,
  body.mt-mobile-canvas-lock-active .mt-mobile-canvas-inner video,
  body.mt-mobile-canvas-lock-active .mt-mobile-canvas-inner canvas,
  body.mt-mobile-canvas-lock-active .mt-mobile-canvas-inner svg {
    max-width: 100%;
  }
}

/* Desktop/tablet reset.
   Above mobile breakpoint the canvas lock must not visually affect layout. */
@media screen and (min-width: 768px) {
  body.mt-mobile-canvas-lock-active {
    overflow-x: initial;
  }

  .mt-mobile-canvas-viewport {
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
    overflow: visible;
    position: relative;
    margin-left: initial;
    margin-right: initial;
    transform: none;
  }

  .mt-mobile-canvas-inner {
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
    margin-left: initial;
    margin-right: initial;
  }
}