/* =========================================================
   Modern Treasures - Clothing Mobile Canvas Lock
   Scope: Clothing Transition Mobile + Clothing Mobile split widgets only.
   Purpose: Keep Marc's iPhone clothing composition as one fixed canvas
   and scale that complete clothing canvas on mobile devices.
   ========================================================= */

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

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

  .mt-clothing-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;
    background: transparent !important;
  }

  .mt-clothing-mobile-canvas-inner {
    width: var(--mt-clothing-mobile-canvas-base-width, 393px) !important;
    min-width: var(--mt-clothing-mobile-canvas-base-width, 393px) !important;
    max-width: var(--mt-clothing-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-clothing-mobile-canvas-inner *,
  .mt-clothing-mobile-canvas-inner *::before,
  .mt-clothing-mobile-canvas-inner *::after {
    box-sizing: border-box !important;
  }

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

@media screen and (min-width: 768px) {
  body.mt-clothing-mobile-canvas-lock-active {
    overflow-x: initial;
  }

  .mt-clothing-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-clothing-mobile-canvas-inner {
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
    margin-left: initial;
    margin-right: initial;
  }
}


/* v1.0.72 — Men menu order repair.
   Keep the iPhone-approved layout intact and only force the Men widget internals
   back to the original order: intro/title, menu, then Men product grid.
   This prevents the category menu from appearing between Men and Women. */
@media screen and (max-width: 767px) {
  .elementor-widget-mt_clothing_mobile_men .mtclothing--mobile,
  .mt-clothing-mobile-canvas-inner .elementor-widget-mt_clothing_mobile_men .mtclothing--mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .elementor-widget-mt_clothing_mobile_men .mtclothing__top-gradient,
  .mt-clothing-mobile-canvas-inner .elementor-widget-mt_clothing_mobile_men .mtclothing__top-gradient {
    order: 0 !important;
  }

  .elementor-widget-mt_clothing_mobile_men .mtclothing__intro,
  .mt-clothing-mobile-canvas-inner .elementor-widget-mt_clothing_mobile_men .mtclothing__intro {
    order: 1 !important;
  }

  .elementor-widget-mt_clothing_mobile_men .mtclothing__category-wrap,
  .mt-clothing-mobile-canvas-inner .elementor-widget-mt_clothing_mobile_men .mtclothing__category-wrap {
    order: 2 !important;
    position: relative !important;
    z-index: 50 !important;
  }

  .elementor-widget-mt_clothing_mobile_men .mtclothing__grid,
  .mt-clothing-mobile-canvas-inner .elementor-widget-mt_clothing_mobile_men .mtclothing__grid {
    order: 3 !important;
  }
}

/* v1.0.73 — Men menu order repair, scoped to the Men split widget only. */
@media screen and (max-width: 767px) {
  .elementor-widget-mt_clothing_mobile_men .mtclothing--mobile {
    display: block !important;
  }

  .elementor-widget-mt_clothing_mobile_men .mtclothing__category-wrap {
    position: relative !important;
    z-index: 80 !important;
    transform: none !important;
  }

  .elementor-widget-mt_clothing_mobile_men .mtclothing__grid {
    position: relative !important;
    z-index: 20 !important;
  }
}


/* v1.0.74 — Menu duplicate cleanup + Men header banner visibility.
   Keep the iPhone-approved layout; do not move product spacing.
   Only hide duplicated category menus and ensure the first Men banner card remains visible. */
@media screen and (max-width: 767px) {
  .mtclothing__category-wrap.mtclothing__category-wrap--duplicate-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .elementor-widget-mt_clothing_mobile_men .mtclothing__grid .mtclothing__card:first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-column: 1 / -1 !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .elementor-widget-mt_clothing_mobile_men .mtclothing__grid .mtclothing__card:first-child .mtclothing__media,
  .elementor-widget-mt_clothing_mobile_men .mtclothing__grid .mtclothing__card:first-child .mtclothing__visual,
  .elementor-widget-mt_clothing_mobile_men .mtclothing__grid .mtclothing__card:first-child .mtclothing__image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}