/* IREMA 1.3 - 3D configuration mode */
body.irema-3d-configuration-mode .irema-product-stage {
    position: fixed !important;
    left: -100000px !important;
    top: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 0.01 !important;
}
#irema-3d-preview { position: relative; touch-action: none; overflow: hidden; }
#irema-3d-preview .irema-3d-controls-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 15;
    display: block;
}
#irema-3d-preview.irema-3d-editing { cursor: move; }

/* Optional [irema_3d_toolbar] placement. The native toolbar remains Smart
   when the shortcode is not present. */
.irema-3d-toolbar-placeholder {
    position: relative;
    width: 100%;
    max-width: 100%;
}
.irema-3d-toolbar-placeholder:empty { display: none; }
.irema-3d-toolbar-placeholder.irema-3d-toolbar-mounted { display: block; }
.irema-3d-toolbar-placeholder > irema-element-toolbar.irema-3d-toolbar-docked {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    margin: 0;
    z-index: 2;
}

/* Smart fallback for 3D configuration. Its coordinates are managed from the
   visible Three.js preview, never from the off-screen Fabric stage. */
body.irema-3d-configuration-mode > irema-element-toolbar.irema-3d-toolbar-smart-fallback {
    z-index: 10000000000 !important;
    max-width: var(--irema-et-max-width);
}


/* ==========================================================
   IREMA 1.6.0 - Dedicated Mobile 3D Configuration Interface
   ========================================================== */
.irema-3d-mobile-ui{display:none}

@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-configuration-mode #irema-3d-preview-placeholder,
  body.irema-3d-configuration-mode [data-irema-3d-toolbar="1"]{display:none!important}

  body.irema-3d-configuration-mode .irema-3d-mobile-ui{
    display:flex;
    flex-direction:column;
    position:relative;
    width:100%;
    max-width:100%;
    height:min(100svh,900px);
    min-height:560px;
    overflow:hidden;
    background:#fff;
    box-sizing:border-box;
    z-index:20
  }

  .irema-3d-mobile-viewer{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    background:#fff
  }

  .irema-3d-mobile-preview-placeholder{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0!important;
    margin:0!important;
    overflow:hidden;
    touch-action:none
  }

  .irema-3d-mobile-preview-placeholder>#irema-3d-preview{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    max-width:none!important;
    box-shadow:none!important;
    transform:none!important
  }

  .irema-3d-mobile-preview-placeholder>#irema-3d-preview>canvas{
    touch-action:none;
    max-width:none!important;
    max-height:none!important
  }

  .irema-3d-mobile-context{
    position:absolute;
    left:8px;
    right:8px;
    bottom:72px;
    z-index:46;
    pointer-events:none
  }

  .irema-3d-mobile-context:not(.irema-has-selection){display:none}
  .irema-3d-mobile-context.irema-has-selection{display:block}

  .irema-3d-mobile-context>irema-element-toolbar{
    pointer-events:auto;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    max-height:38svh;
    overflow:auto;
    box-sizing:border-box
  }

  .irema-3d-mobile-sheet{
    position:absolute;
    left:0;
    right:0;
    bottom:64px;
    z-index:45;
    background:#fff;
    max-height:min(52svh,520px);
    transform:translateY(calc(100% + 80px));
    transition:transform .22s ease-out;
    box-shadow:0 -10px 30px rgba(0,0,0,.16);
    border-radius:16px 16px 0 0;
    overflow:hidden;
    pointer-events:none
  }

  .irema-3d-mobile-sheet.irema-open{
    transform:translateY(0);
    pointer-events:auto
  }

  .irema-3d-mobile-sheet-head{
    height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    border-bottom:1px solid var(--irema-border-color);
    background:#fff
  }

  .irema-3d-mobile-sheet-title{font-size:15px}
  .irema-3d-mobile-sheet-close{
    appearance:none;
    border:0;
    background:transparent;
    width:40px;
    height:40px;
    font-size:18px;
    cursor:pointer
  }

  .irema-3d-mobile-sheet-body{
    max-height:calc(min(52svh,520px) - 48px);
    overflow:auto;
    -webkit-overflow-scrolling:touch
  }

  .irema-3d-mobile-module-host{display:none;min-height:180px}
  .irema-3d-mobile-module-host.irema-active{display:block}
  .irema-3d-mobile-module-host>irema-module-products,
  .irema-3d-mobile-module-host>irema-module-text,
  .irema-3d-mobile-module-host>irema-module-images,
  .irema-3d-mobile-module-host>irema-module-manage-layers{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:180px;
    position:relative!important;
    inset:auto!important;
    transform:none!important
  }

  .irema-3d-mobile-nav{
    flex:0 0 64px;
    height:64px;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    position:relative;
    z-index:50;
    background:#fff;
    border-top:1px solid var(--irema-border-color);
    box-shadow:0 -2px 12px rgba(0,0,0,.07);
    padding-bottom:env(safe-area-inset-bottom)
  }

  .irema-3d-mobile-nav button{
    appearance:none;
    border:0;
    border-radius:0;
    margin:0;
    padding:6px 2px 4px;
    background:transparent;
    color:var(--irema-text-color);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:3px;
    min-width:0;
    cursor:pointer
  }

  .irema-3d-mobile-nav button>span{font-size:20px;line-height:1}
  .irema-3d-mobile-nav button>small{font-size:9px;line-height:1;white-space:nowrap}
  .irema-3d-mobile-nav button.irema-active{background:var(--irema-light-bg-color)}
  .irema-3d-mobile-nav button.irema-disabled{opacity:.3;pointer-events:none}

  body.irema-3d-mobile-mode .irema-3d-toolbar-smart-fallback{display:none!important}
}


/* IREMA 1.6.1 - deterministic [irema_3d_toolbar] host */
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"]{
    position:relative;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}


/* IREMA 1.6.2 - functional full-width [irema_3d_toolbar] */
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"]{
    position:relative !important;
    display:block;
    width:100% !important;
    max-width:100% !important;
    min-width:0;
    box-sizing:border-box;
    overflow:visible;
}

.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar.irema-smart{
    position:relative !important;
    display:flex;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box;
    flex-flow:column nowrap;
    overflow:visible;
}

.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar.irema-smart > .irema-tools-nav{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 auto;
    flex-direction:row !important;
    overflow-x:auto;
    overflow-y:hidden;
}

.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar.irema-smart > .irema-tools-nav > div{
    display:flex;
    flex-direction:row !important;
    flex-wrap:nowrap;
    width:100%;
    min-width:max-content;
    align-items:stretch;
}

.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar.irema-smart > .irema-tools-nav > div > div{
    flex:1 1 auto;
    min-width:70px;
}

.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar.irema-smart > .irema-sub-panel{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}


/* IREMA 1.6.3 - contextual shortcode toolbar */
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"]{
    display:none;
}
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"].irema-has-selection{
    display:block;
}
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar:not(.irema-show){
    display:none !important;
}
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"].irema-has-selection > irema-element-toolbar.irema-show{
    display:flex !important;
}


/* IREMA 1.6.5 - native Smart shortcode + native Sidebar fallback */
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"]{
    position:relative !important;
    display:block;
    width:100% !important;
    max-width:100% !important;
    min-width:0;
    box-sizing:border-box;
    overflow:visible !important;
}
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar.irema-smart{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box;
}
/* Undo the experimental custom nav layout: let IREMA's own Smart CSS decide
   which tools and subpanels are visible for each selected object. */
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar.irema-smart > .irema-tools-nav,
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar.irema-smart > .irema-tools-nav > div{
    width:auto !important;
    min-width:0 !important;
}


/* IREMA 1.6.6 - shortcode host only; toolbar internals remain 100% native */
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"]{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}
.irema-3d-toolbar-placeholder[data-irema-3d-toolbar="1"] > irema-element-toolbar{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
}


/* ==========================================================
   IREMA 1.6.7 - Mobile 3D viewport compact fit
   Layout only: Three.js reads this CSS size on initialization.
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-mode .irema-3d-mobile-ui{
    height:100dvh !important;
    min-height:0 !important;
    max-height:100dvh !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-viewer{
    position:relative !important;
    flex:1 1 0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  /* A very tall portrait WebGL viewport makes a perspective model look tiny.
     Keep the 3D viewport close to square while using all available width.
     The toolbar/navigation still remain inside the 100dvh mobile interface. */
  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder{
    inset:auto 0 auto 0 !important;
    top:50% !important;
    width:100% !important;
    height:min(calc(100dvh - 64px - env(safe-area-inset-bottom)),112vw) !important;
    max-height:100% !important;
    min-height:0 !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder > #irema-3d-preview{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    transform:none !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder > #irema-3d-preview > canvas{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
  }
}


/* ==========================================================
   IREMA 1.6.8 - Mobile 3D native Main Bar + undistorted viewport
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-mode .irema-3d-mobile-ui{
    height:100dvh !important;
    min-height:0 !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-viewer{
    position:relative !important;
    flex:1 1 0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  /* The renderer is initialized from this square box. On portrait phones its
     width becomes larger than the physical viewport and the viewer clips the
     horizontal overflow. Three.js therefore keeps an undistorted 1:1 viewport
     while the model uses the maximum available height. */
  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    height:100% !important;
    width:auto !important;
    min-width:100% !important;
    aspect-ratio:1 / 1 !important;
    transform:translate(-50%,-50%) !important;
    overflow:visible !important;
    margin:0 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder > #irema-3d-preview{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder > #irema-3d-preview > canvas{
    max-width:none !important;
    max-height:none !important;
  }

  /* The old handcrafted mobile navigation is retired in favour of the native
     IREMA Main Bar. */
  body.irema-3d-mobile-mode .irema-3d-mobile-nav,
  body.irema-3d-mobile-mode .irema-3d-mobile-sheet{
    display:none !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host{
    position:relative;
    flex:0 0 64px;
    height:64px;
    width:100%;
    z-index:60;
    overflow:visible;
    background:#fff;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host > irema-main-bar{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    display:block !important;
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    max-height:none !important;
    overflow:visible !important;
    background:#fff !important;
    border:0 !important;
    z-index:60 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host irema-main-bar > .irema-navigation{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    padding:0 !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    border:0 !important;
    border-top:1px solid var(--irema-border-color) !important;
    background:#fff !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host .irema-navigation > .irema-nav-item{
    position:relative;
    display:flex !important;
    flex:1 0 58px !important;
    min-width:58px !important;
    max-width:none !important;
    height:64px !important;
    margin:0 !important;
    padding:5px 2px 3px !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap;
    box-sizing:border-box;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host .irema-navigation > .irema-nav-item > .irema-nav-icon,
  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host .irema-navigation > .irema-nav-item > span:first-child{
    display:block !important;
    height:auto !important;
    min-height:20px;
    padding:0 !important;
    margin:0 0 3px !important;
    line-height:20px !important;
    font-size:20px !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host .irema-navigation > .irema-nav-item > .irema-label{
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    font-size:9px !important;
    line-height:11px !important;
    text-transform:none !important;
    white-space:nowrap !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host .irema-navigation > .irema-nav-item.irema-disabled{
    opacity:.3 !important;
    pointer-events:none !important;
  }

  /* Native module content opens above the bottom navigation. The IREMA core
     still owns all module listeners and state. */
  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host irema-main-bar > .irema-module-content,
  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host irema-main-bar > .irema-secondary-content{
    display:none !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:64px !important;
    width:100% !important;
    height:min(48dvh,430px) !important;
    max-height:min(48dvh,430px) !important;
    overflow:auto !important;
    background:#fff !important;
    box-shadow:0 -10px 30px rgba(0,0,0,.16);
    border-radius:16px 16px 0 0;
    z-index:61;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-ui.irema-module-visible
    .irema-3d-mobile-mainbar-host irema-main-bar > .irema-module-content{
    display:block !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-ui.irema-secondary-visible
    .irema-3d-mobile-mainbar-host irema-main-bar > .irema-secondary-content{
    display:block !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host irema-main-bar > .irema-close{
    display:none !important;
  }

  /* [irema_main_bar] is desktop-only in 3D mobile configuration. The one native
     Main Bar instance is relocated to the dedicated mobile host above. */
  body.irema-3d-mobile-mode .irema-main-bar-position,
  body.irema-3d-mobile-mode .irema-main-bar-position.irema-mobile-mainbar-shortcode-disabled{
    display:none !important;
  }
}


/* ==========================================================
   IREMA 1.6.9 - Mobile 3D aspect ratio correction
   Based directly on stable 1.6.8.
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-mode .irema-3d-mobile-viewer{
    overflow:hidden !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder{
    overflow:visible !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder > #irema-3d-preview{
    overflow:hidden !important;
  }

  /* Three.js assigns the renderer its own CSS size from the exact renderer
     dimensions. Do not stretch that canvas to the wrapper dimensions. */
  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder
    > #irema-3d-preview > canvas[data-engine="three.js"]{
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.0 - Mobile 3D full editor
   Stable 1.6.9 renderer + native bottom Main Bar / Toolbar.
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-mode .irema-3d-mobile-ui{
    height:100dvh !important;
    min-height:0 !important;
    max-height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-viewer{
    flex:1 1 0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  /* Retain the working 1.6.9 renderer geometry. */
  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder
    > #irema-3d-preview > canvas[data-engine="three.js"]{
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
  }

  /* Old mobile sheet/context are no longer visible UI. */
  body.irema-3d-mobile-mode .irema-3d-mobile-sheet{
    display:none !important;
  }
  body.irema-3d-mobile-mode .irema-3d-mobile-context{
    display:none !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host{
    position:relative !important;
    flex:0 0 calc(64px + env(safe-area-inset-bottom)) !important;
    width:100% !important;
    height:calc(64px + env(safe-area-inset-bottom)) !important;
    min-height:calc(64px + env(safe-area-inset-bottom)) !important;
    overflow:visible !important;
    background:#fff !important;
    z-index:80 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    > irema-main-bar.irema-3d-mobile-native-mainbar{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:env(safe-area-inset-bottom) !important;
    top:auto !important;
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    max-height:none !important;
    display:block !important;
    overflow:visible !important;
    background:#fff !important;
    border:0 !important;
    z-index:81 !important;
  }

  /* Main Bar buttons: one horizontal bottom row. */
  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    > irema-main-bar > .irema-navigation{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:stretch !important;
    padding:0 !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    background:#fff !important;
    border-top:1px solid var(--irema-border-color) !important;
    z-index:84 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    .irema-navigation > .irema-nav-item{
    display:flex !important;
    flex:1 0 58px !important;
    min-width:58px !important;
    height:64px !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    padding:4px 2px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    .irema-navigation > .irema-nav-item .irema-nav-icon{
    font-size:20px !important;
    line-height:20px !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    .irema-navigation > .irema-nav-item .irema-label{
    display:block !important;
    font-size:9px !important;
    line-height:11px !important;
    padding:0 !important;
    margin:0 !important;
    text-transform:none !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    .irema-navigation > .irema-nav-item.irema-disabled{
    opacity:.28 !important;
    pointer-events:none !important;
  }

  /* Sidebar opens UPWARDS from the bottom bar. */
  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    > irema-main-bar > .irema-module-content{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:64px !important;
    top:auto !important;
    width:100% !important;
    height:min(46dvh,420px) !important;
    max-height:min(46dvh,420px) !important;
    display:block !important;
    overflow:auto !important;
    background:#fff !important;
    box-shadow:0 -12px 32px rgba(0,0,0,.18) !important;
    border-radius:16px 16px 0 0 !important;
    transform:translateY(calc(100% + 64px)) !important;
    transition:transform .2s ease-out !important;
    z-index:82 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-ui.irema-mobile-module-open
    .irema-3d-mobile-mainbar-host > irema-main-bar > .irema-module-content{
    transform:translateY(0) !important;
  }

  /* Toolbar shares the same upward sidebar. It sits above the navigation and
     above module content when an element is selected. */
  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    > irema-main-bar > irema-element-toolbar.irema-3d-toolbar-mobile{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:64px !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    max-height:min(46dvh,420px) !important;
    display:none !important;
    overflow:auto !important;
    margin:0 !important;
    transform:none !important;
    background:#fff !important;
    box-shadow:0 -12px 32px rgba(0,0,0,.18) !important;
    border-radius:16px 16px 0 0 !important;
    z-index:83 !important;
    pointer-events:auto !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-ui.irema-mobile-toolbar-open
    .irema-3d-mobile-mainbar-host > irema-main-bar
    > irema-element-toolbar.irema-3d-toolbar-mobile{
    display:flex !important;
  }

  /* While editing a selected element the Toolbar has priority over a module
     panel; choosing a Main Bar module deselects natively and reveals it. */
  body.irema-3d-mobile-mode .irema-3d-mobile-ui.irema-mobile-toolbar-open
    .irema-3d-mobile-mainbar-host > irema-main-bar > .irema-module-content{
    transform:translateY(calc(100% + 64px)) !important;
  }

  /* Projected Fabric controls remain above WebGL and fully touchable through
     the renderer event layer. */
  body.irema-3d-mobile-mode #irema-3d-preview .irema-3d-controls-overlay{
    z-index:20 !important;
    pointer-events:none !important;
  }

  /* Dedicated Mobile 3D owns the only Main Bar. */
  body.irema-3d-mobile-mode .irema-main-bar-position,
  body.irema-3d-mobile-mode .irema-main-bar-position.irema-mobile-mainbar-shortcode-disabled{
    display:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.1 - Integrated Mobile 3D UI
   Main Bar and Toolbar are mounted by the 3D controller itself.
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-mode #irema-3d-preview,
  body.irema-3d-mobile-mode #irema-3d-preview > canvas[data-engine="three.js"]{
    touch-action:none !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    flex:0 0 calc(64px + env(safe-area-inset-bottom)) !important;
    width:100% !important;
    height:calc(64px + env(safe-area-inset-bottom)) !important;
    min-height:calc(64px + env(safe-area-inset-bottom)) !important;
    overflow:visible !important;
    background:#fff !important;
    z-index:100 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    > irema-main-bar.irema-3d-mobile-native-mainbar{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:env(safe-area-inset-bottom) !important;
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    overflow:visible !important;
    background:#fff !important;
    z-index:101 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    > irema-main-bar.irema-3d-mobile-native-mainbar > .irema-navigation{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:64px !important;
    flex-flow:row nowrap !important;
    align-items:stretch !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
    border-top:1px solid rgba(0,0,0,.12) !important;
    z-index:104 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    .irema-navigation > .irema-nav-item{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:1 0 58px !important;
    min-width:58px !important;
    height:64px !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    padding:4px 2px !important;
    margin:0 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    .irema-navigation > .irema-nav-item .irema-label{
    display:block !important;
    font-size:9px !important;
    line-height:11px !important;
    white-space:nowrap !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    > irema-main-bar.irema-3d-mobile-native-mainbar > .irema-module-content{
    display:block !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:64px !important;
    top:auto !important;
    width:100% !important;
    height:min(48dvh,430px) !important;
    max-height:min(48dvh,430px) !important;
    overflow:auto !important;
    background:#fff !important;
    border-radius:16px 16px 0 0 !important;
    box-shadow:0 -12px 34px rgba(0,0,0,.2) !important;
    transform:translateY(calc(100% + 64px)) !important;
    transition:transform .2s ease-out !important;
    z-index:102 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-ui.irema-mobile-module-open
    .irema-3d-mobile-mainbar-host > irema-main-bar > .irema-module-content{
    transform:translateY(0) !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host
    > irema-main-bar > irema-element-toolbar.irema-3d-toolbar-mobile{
    display:none !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:64px !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    max-height:min(48dvh,430px) !important;
    overflow:auto !important;
    background:#fff !important;
    border-radius:16px 16px 0 0 !important;
    box-shadow:0 -12px 34px rgba(0,0,0,.2) !important;
    z-index:103 !important;
    pointer-events:auto !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-ui.irema-mobile-toolbar-open
    .irema-3d-mobile-mainbar-host > irema-main-bar
    > irema-element-toolbar.irema-3d-toolbar-mobile{
    display:flex !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-ui.irema-mobile-toolbar-open
    .irema-3d-mobile-mainbar-host > irema-main-bar > .irema-module-content{
    transform:translateY(calc(100% + 64px)) !important;
  }

  body.irema-3d-mobile-mode #irema-3d-preview .irema-3d-controls-overlay{
    z-index:30 !important;
    pointer-events:none !important;
  }

  body.irema-3d-mobile-mode .irema-main-bar-position{
    display:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.2 - Explicit Mobile runtime bridge
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready #irema-3d-mobile-ui{
    display:flex !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-mainbar-host.irema-mobile-mainbar-mounted{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 calc(66px + env(safe-area-inset-bottom)) !important;
    height:calc(66px + env(safe-area-inset-bottom)) !important;
    min-height:calc(66px + env(safe-area-inset-bottom)) !important;
    overflow:visible !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-mainbar-host.irema-mobile-mainbar-mounted
    > irema-main-bar{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-mainbar-host.irema-mobile-mainbar-mounted
    > irema-main-bar > .irema-navigation{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* The renderer must receive single-touch editing events and two-touch pinch. */
  body.irema-3d-mobile-runtime-ready #irema-3d-preview,
  body.irema-3d-mobile-runtime-ready #irema-3d-preview canvas{
    touch-action:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.3 - Mobile Main Bar proxy + native upward panel
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-host{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    flex:0 0 calc(66px + env(safe-area-inset-bottom)) !important;
    height:calc(66px + env(safe-area-inset-bottom)) !important;
    min-height:calc(66px + env(safe-area-inset-bottom)) !important;
    overflow:visible !important;
    background:#fff !important;
    z-index:120 !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-proxy{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:env(safe-area-inset-bottom) !important;
    height:66px !important;
    display:flex !important;
    flex-flow:row nowrap !important;
    align-items:stretch !important;
    background:#fff !important;
    border-top:1px solid rgba(0,0,0,.12) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    z-index:124 !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-btn{
    appearance:none !important;
    border:0 !important;
    background:transparent !important;
    color:inherit !important;
    flex:1 0 58px !important;
    min-width:58px !important;
    height:66px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    padding:4px 2px !important;
    margin:0 !important;
    font:inherit !important;
  }
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-btn > span{font-size:20px !important;line-height:22px !important;}
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-btn > small{font-size:9px !important;line-height:11px !important;}
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-btn.irema-disabled{opacity:.28 !important;pointer-events:none !important;}
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-btn.irema-active{background:rgba(0,0,0,.055) !important;}

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-native-panel{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:calc(66px + env(safe-area-inset-bottom)) !important;
    width:100% !important;
    max-height:min(52dvh,460px) !important;
    background:#fff !important;
    overflow:visible !important;
    z-index:122 !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-native-panel > .irema-module-content{
    display:block !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:min(48dvh,420px) !important;
    max-height:min(48dvh,420px) !important;
    overflow:auto !important;
    background:#fff !important;
    border-radius:16px 16px 0 0 !important;
    box-shadow:0 -12px 34px rgba(0,0,0,.18) !important;
    transform:translateY(calc(100% + 72px)) !important;
    transition:transform .18s ease-out !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-ui.irema-mobile-module-open
    .irema-3d-mobile-native-panel > .irema-module-content{
    transform:translateY(0) !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-native-panel > irema-element-toolbar.irema-3d-toolbar-mobile{
    display:none !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    max-height:min(48dvh,420px) !important;
    overflow:auto !important;
    background:#fff !important;
    border-radius:16px 16px 0 0 !important;
    box-shadow:0 -12px 34px rgba(0,0,0,.18) !important;
    pointer-events:auto !important;
    z-index:123 !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-ui.irema-mobile-toolbar-open
    .irema-3d-mobile-native-panel > irema-element-toolbar.irema-3d-toolbar-mobile{
    display:flex !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-ui.irema-mobile-toolbar-open
    .irema-3d-mobile-native-panel > .irema-module-content{
    transform:translateY(calc(100% + 72px)) !important;
  }

  body.irema-3d-mobile-runtime-ready #irema-3d-preview,
  body.irema-3d-mobile-runtime-ready #irema-3d-preview canvas[data-engine="three.js"]{
    touch-action:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.4 - Compact mobile sidebar + touch hit-map fix
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-native-panel{
    max-height:min(36dvh,320px) !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-native-panel > .irema-module-content{
    height:min(34dvh,300px) !important;
    max-height:min(34dvh,300px) !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-native-panel > irema-element-toolbar.irema-3d-toolbar-mobile{
    max-height:min(34dvh,300px) !important;
  }

  body.irema-3d-mobile-runtime-ready #irema-3d-preview{
    touch-action:none !important;
    pointer-events:auto !important;
  }

  body.irema-3d-mobile-runtime-ready #irema-3d-preview > canvas[data-engine="three.js"]{
    touch-action:none !important;
    pointer-events:auto !important;
  }
}


/* ==========================================================
   IREMA 1.7.5 - Mobile orbit/edit arbitration + toggle sidebar
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-native-panel{
    max-height:min(30dvh,270px) !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-native-panel > .irema-module-content{
    height:min(28dvh,250px) !important;
    max-height:min(28dvh,250px) !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-native-panel > irema-element-toolbar.irema-3d-toolbar-mobile{
    max-height:min(28dvh,250px) !important;
  }

  /* Closed panel occupies no visual surface above the Main Bar. */
  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-ui:not(.irema-mobile-module-open):not(.irema-mobile-toolbar-open)
    .irema-3d-mobile-native-panel{
    pointer-events:none !important;
    background:transparent !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-ui.irema-mobile-module-open
    .irema-3d-mobile-native-panel{
    pointer-events:auto !important;
  }
}


/* ==========================================================
   IREMA 1.7.7 - Safe mobile recovery
   UI-only changes; renderer and model loading untouched.
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-native-panel{
    background:transparent !important;
    box-shadow:none !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-native-panel > .irema-module-content,
  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-native-panel > irema-element-toolbar.irema-3d-toolbar-mobile{
    background:rgba(255,255,255,.78) !important;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    box-shadow:0 -8px 22px rgba(0,0,0,.10) !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-ui:not(.irema-mobile-module-open):not(.irema-mobile-toolbar-open)
    .irema-3d-mobile-native-panel{
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-ui.irema-mobile-module-open .irema-3d-mobile-native-panel,
  body.irema-3d-mobile-runtime-ready
    .irema-3d-mobile-ui.irema-mobile-toolbar-open .irema-3d-mobile-native-panel{
    visibility:visible !important;
    opacity:1 !important;
  }
}


/* ==========================================================
   IREMA 1.7.16 - Safe Mobile Native Main Bar
   UI mounted only after Three.js model + Fabric are ready.
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-host{
    position:relative !important;
    flex:0 0 calc(64px + env(safe-area-inset-bottom)) !important;
    height:calc(64px + env(safe-area-inset-bottom)) !important;
    min-height:calc(64px + env(safe-area-inset-bottom)) !important;
    width:100% !important;
    overflow:visible !important;
    background:transparent !important;
    z-index:150 !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-proxy{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:env(safe-area-inset-bottom) !important;
    width:100% !important;
    height:64px !important;
    display:grid !important;
    grid-template-columns:repeat(6,minmax(52px,1fr)) !important;
    background:rgba(255,255,255,.96) !important;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border-top:1px solid rgba(0,0,0,.10) !important;
    z-index:154 !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-btn{
    appearance:none !important;
    border:0 !important;
    background:transparent !important;
    color:inherit !important;
    min-width:52px !important;
    height:64px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    padding:4px 2px !important;
    margin:0 !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-btn > span{
    font-size:20px !important;
    line-height:22px !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-btn > small{
    font-size:9px !important;
    line-height:11px !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-btn.irema-active{
    background:rgba(0,0,0,.06) !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-native-panel{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:calc(64px + env(safe-area-inset-bottom)) !important;
    width:100% !important;
    max-height:min(30dvh,260px) !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    z-index:152 !important;
    pointer-events:none !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-ui.irema-mobile-panel-open
    .irema-3d-mobile-native-panel{
    pointer-events:auto !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-ui:not(.irema-mobile-panel-open)
    .irema-3d-mobile-native-panel{
    visibility:hidden !important;
    opacity:0 !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-native-panel > .irema-module-content{
    display:none !important;
    width:100% !important;
    height:min(28dvh,240px) !important;
    max-height:min(28dvh,240px) !important;
    overflow:auto !important;
    background:rgba(255,255,255,.80) !important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-radius:14px 14px 0 0 !important;
    box-shadow:0 -8px 20px rgba(0,0,0,.10) !important;
    transform:none !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-ui.irema-mobile-module-open
    .irema-3d-mobile-native-panel > .irema-module-content{
    display:block !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-native-panel
    > irema-element-toolbar.irema-3d-toolbar-mobile{
    display:none !important;
    width:100% !important;
    max-height:min(28dvh,240px) !important;
    overflow:auto !important;
    background:rgba(255,255,255,.84) !important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-radius:14px 14px 0 0 !important;
    box-shadow:0 -8px 20px rgba(0,0,0,.10) !important;
    pointer-events:auto !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-ui.irema-mobile-toolbar-open
    .irema-3d-mobile-native-panel > irema-element-toolbar.irema-3d-toolbar-mobile{
    display:flex !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-main-bar-position{
    display:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.17 - Stable mobile viewport
   Prevent dynamic browser chrome from stretching WebGL.
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  /*
   * 100dvh changes while the browser address/navigation bars expand/collapse.
   * That made the CSS box change height independently of the WebGL backbuffer
   * and temporarily distorted the model vertically.
   *
   * 100svh is intentionally stable during page scroll.
   */
  body.irema-3d-mobile-mode .irema-3d-mobile-ui{
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
    overflow:hidden !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-viewer{
    flex:1 1 0 !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
  }

  /*
   * Keep the Three.js viewport square and derived from the same stable height.
   * Horizontal excess is clipped by .irema-3d-mobile-viewer as before.
   */
  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder{
    width:calc(100svh - 64px - env(safe-area-inset-bottom)) !important;
    height:calc(100svh - 64px - env(safe-area-inset-bottom)) !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:none !important;
    aspect-ratio:1 / 1 !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-preview-placeholder > #irema-3d-preview{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  /*
   * Never stretch the WebGL canvas to match a CSS box after mobile chrome
   * changes. Three.js owns the canvas dimensions and aspect ratio.
   */
  body.irema-3d-mobile-mode
    .irema-3d-mobile-preview-placeholder > #irema-3d-preview > canvas[data-engine="three.js"]{
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.22 - Mobile 3D robust boot loader
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  .irema-mobile-3d-boot-loader{
    position:absolute !important;
    inset:0 !important;
    z-index:10000 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    background:rgba(255,255,255,.94) !important;
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    pointer-events:auto !important;
    transition:opacity .18s ease !important;
    box-sizing:border-box !important;
  }

  body > .irema-mobile-3d-boot-loader{
    position:fixed !important;
  }

  .irema-mobile-3d-boot-loader.irema-mobile-3d-boot-loader-done{
    opacity:0 !important;
    pointer-events:none !important;
  }

  .irema-mobile-3d-boot-loader-image{
    width:54px !important;
    height:54px !important;
    object-fit:contain !important;
    display:block !important;
  }

  .irema-mobile-3d-boot-loader-text{
    font-size:12px !important;
    line-height:1.3 !important;
    font-weight:600 !important;
    color:#555 !important;
  }

  .irema-mobile-3d-boot-loader-stage{
    max-width:92% !important;
    padding:0 14px !important;
    font-size:8px !important;
    line-height:1.4 !important;
    color:#999 !important;
    text-align:center !important;
    word-break:break-word !important;
  }
}


/* ==========================================================
   IREMA 1.7.24 - Safe loader cleanup on stable 1.7.22 boot
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  .irema-mobile-3d-boot-loader{
    gap:0 !important;
  }

  .irema-mobile-3d-boot-loader-text,
  .irema-mobile-3d-boot-loader-stage{
    display:none !important;
  }

  .irema-mobile-3d-boot-loader-image{
    width:64px !important;
    height:64px !important;
  }

  /* Hide only the legacy text/circle visually; do not remove its wrapper from
     IREMA's lifecycle because the configurator may still use it internally. */
  body.irema-3d-mobile-mode
    .irema-product-designer-wrapper .irema-loader-circle,
  body.irema-3d-mobile-mode
    .irema-product-designer-wrapper .irema-loader-text{
    visibility:hidden !important;
  }
}


/* ==========================================================
   IREMA 1.7.73 - Native Layers row controls in Mobile 3D
   Same icon classes as desktop IREMALayersModule.
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row{
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:6px !important;

    min-height:48px !important;
    padding:4px 6px !important;
    box-sizing:border-box !important;
  }

  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-0,
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-1,
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-2{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
  }

  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-1{
    overflow:hidden !important;
  }

  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-title{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-2{
    gap:2px !important;
    justify-content:flex-end !important;
    overflow:visible !important;
  }

  /*
   * Force native desktop controls to remain visible in the narrow mobile row.
   */
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  .irema-icon-reorder,
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  .irema-lock-element,
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  .irema-visible-element,
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  .irema-remove-element{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex:0 0 36px !important;
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    min-height:36px !important;

    margin:0 !important;
    padding:0 !important;

    visibility:visible !important;
    opacity:1 !important;
    overflow:visible !important;

    pointer-events:auto !important;
    touch-action:none !important;
    cursor:pointer !important;
  }

  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  .irema-lock-element > span,
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  .irema-visible-element > span,
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  .irema-remove-element > span{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row.irema-sortable-dragged{
    position:relative !important;
    z-index:5 !important;
    opacity:.82 !important;
  }
}


/* ==========================================================
   IREMA 1.7.74 - Main Bar fixed height from stable 1.7.73
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  /*
   * The Main Bar container and its button row are permanently 64px high.
   * Do not include dynamic viewport units or safe-area in their height:
   * browser vertical scrolling must never resize this block.
   */
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-host{
    flex:0 0 64px !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    block-size:64px !important;
    min-block-size:64px !important;
    max-block-size:64px !important;
    box-sizing:border-box !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-proxy{
    bottom:0 !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    block-size:64px !important;
    min-block-size:64px !important;
    max-block-size:64px !important;
    box-sizing:border-box !important;
    overflow-y:hidden !important;
  }

  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-btn{
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    block-size:64px !important;
    min-block-size:64px !important;
    max-block-size:64px !important;
    box-sizing:border-box !important;
  }

  /*
   * Keep native module panel referenced to the fixed row rather than to a
   * dynamic safe-area calculation.
   */
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-native-panel{
    bottom:64px !important;
  }
}


/* ==========================================================
   IREMA 1.7.76 - MainBar module windows 250px + viewer shift
   Base exclusiva: 1.7.75
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /* Ventanas de módulos: 250px fijos */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-native-panel{
    height:250px !important;
    min-height:250px !important;
    max-height:250px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-native-panel > .irema-module-content,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-native-panel > .irema-secondary-content{
    height:250px !important;
    min-height:250px !important;
    max-height:250px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }

  /* Posición normal del visor */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-viewer{
    transform:translateY(0) !important;
    transition:transform .20s ease !important;
  }

  /* Módulo abierto: visor -100px */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-ui.irema-mobile-module-open
  .irema-3d-mobile-viewer{
    transform:translateY(-100px) !important;
  }

  /* Módulo cerrado: vuelta exacta a origen */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-ui:not(.irema-mobile-module-open)
  .irema-3d-mobile-viewer{
    transform:translateY(0) !important;
  }
}


/* ==========================================================
   IREMA 1.7.77 - Keep MainBar visible while Toolbar is active
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * Toolbar lives in sidebar. Selecting an object must NOT hide the
   * MainBar module buttons.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-ui.irema-mobile-toolbar-open
  .irema-3d-mobile-mainbar-proxy{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /*
   * Preserve the exact MainBar geometry from 1.7.76.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-proxy{
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
  }
}


/* ==========================================================
   IREMA 1.7.78 - Desktop Toolbar architecture in Mobile 3D
   Main area: modules OR Toolbar tools.
   Sidebar: Toolbar properties.
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * Keep current stable MainBar geometry from 1.7.75/1.7.77.
   * Toolbar row is an absolute sibling of the module proxy.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-host{
    position:relative !important;
    overflow:visible !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-toolbar-row{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;

    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;

    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;

    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;

    overflow:visible !important;
    z-index:160 !important;
  }

  /*
   * Object selected:
   * desktop behaviour — Toolbar tools replace module navigation.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-ui.irema-mobile-toolbar-open
  .irema-3d-mobile-toolbar-row{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-ui.irema-mobile-toolbar-open
  .irema-3d-mobile-mainbar-proxy{
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-ui:not(.irema-mobile-toolbar-open)
  .irema-3d-mobile-mainbar-proxy{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /*
   * MainBar module content remains in native sidebar and is hidden while an
   * object is selected, exactly as desktop switches from module to toolbar.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-ui.irema-mobile-toolbar-open
  .irema-3d-mobile-native-panel > .irema-module-content,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-ui.irema-mobile-toolbar-open
  .irema-3d-mobile-native-panel > .irema-secondary-content{
    display:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.81 - Transparent MainBar/Toolbar background
   while operating 3D glyphs
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * Keep geometry and interactions unchanged.
   * Only remove the black panel background during direct glyph manipulation.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui.irema-mobile-glyph-active
  .irema-3d-mobile-mainbar-host,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui.irema-mobile-glyph-active
  .irema-3d-mobile-mainbar-proxy,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui.irema-mobile-glyph-active
  .irema-3d-mobile-toolbar-row{
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.83 - Mobile Images without QR / Text-to-Image
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs > [data-context="qr-code"],
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs > [data-context="text2Img"],
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs-content > [data-context="qr-code"],
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs-content > [data-context="text2Img"],
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  irema-module-qr-code{
    display:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.89 — Mobile 3D selected-object controller
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready .irema-3d-controls-overlay{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:none !important;
    background:transparent !important;
    z-index:12 !important;
  }

  .irema-3d-mobile-selected-controller{
    position:fixed;
    left:50%;
    top:67%;
    right:auto;
    width:150px;
    height:150px;
    transform:translate(-50%,-50%) scale(.94);
    z-index:2147483000;
    display:grid;
    grid-template-columns:50px 50px 50px;
    grid-template-rows:50px 50px 50px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .14s ease, transform .14s ease, visibility .14s linear;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.16);
    box-shadow:0 5px 18px rgba(0,0,0,.16);
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
  }

  .irema-3d-mobile-selected-controller.irema-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,-50%) scale(1);
  }

  .irema-3d-mobile-selected-control{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    margin:0 !important;
    padding:8px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    touch-action:none !important;
    -webkit-tap-highlight-color:transparent;
  }

  .irema-3d-mobile-selected-control:active{
    background:rgba(255,0,168,.10) !important;
  }

  .irema-3d-mobile-selected-control img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
  }

  .irema-control-plus{grid-column:1;grid-row:1;}
  .irema-control-up{grid-column:2;grid-row:1;}
  .irema-control-minus{grid-column:3;grid-row:1;}
  .irema-control-left{grid-column:1;grid-row:2;}
  .irema-control-right{grid-column:3;grid-row:2;}
  .irema-control-rotate-left{grid-column:1;grid-row:3;}
  .irema-control-down{grid-column:2;grid-row:3;}
  .irema-control-rotate-right{grid-column:3;grid-row:3;}
}


/* ==========================================================
   IREMA 1.7.92 - Mobile clean texture + visible selection halo
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready #irema-3d-preview{
    position:relative !important;
    isolation:isolate !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-preview > .irema-3d-controls-overlay{
    position:absolute !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:none !important;
    background:transparent !important;
    z-index:50 !important;
  }
}


/* ==========================================================
   IREMA 1.7.94 - Fast lowerCanvas + hidden native controls + halo
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready #irema-3d-preview{
    position:relative !important;
    isolation:isolate !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-preview > .irema-3d-controls-overlay{
    position:absolute !important;
    z-index:80 !important;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:none !important;
    background:transparent !important;
  }
}


/* ==========================================================
   IREMA 1.7.96 - Object silhouette halo is a real 3D layer
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready
  #irema-3d-preview > .irema-3d-controls-overlay{
    pointer-events:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.98 - Native MainBar variables + controller tuning
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-proxy{
    background:var(--irema-primary-fg-color) !important;
    color:var(--irema-mainbar-nav-color) !important;
    border-top-color:var(--irema-border-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn{
    color:var(--irema-mainbar-nav-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn > span,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn > small{
    color:inherit !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn
  .irema-nav-icon:before,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn
  [class*="irema-icon-"]:before{
    color:var(--irema-mainbar-nav-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn svg *,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn svg{
    fill:var(--irema-mainbar-nav-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active{
    color:var(--irema-secondary-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active
  .irema-nav-icon:before,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active
  [class*="irema-icon-"]:before{
    color:var(--irema-secondary-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active svg *,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active svg{
    fill:var(--irema-secondary-color) !important;
  }
}


/* ==========================================================
   IREMA 1.7.99 — Desktop MainBar skin + transparent Mobile bar
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-proxy{
    background:transparent !important;
    background-color:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
  }

  /*
   * Do not create a separate Mobile visual language:
   * labels/icons inherit the same navigation variables as desktop.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn{
    background:transparent !important;
    background-color:transparent !important;
    color:var(--irema-mainbar-nav-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn > span,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn > small{
    color:inherit !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn
  .irema-nav-icon:before,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn
  [class*="irema-icon-"]:before{
    color:inherit !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn svg{
    color:inherit !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn svg *{
    fill:currentColor !important;
  }

  /*
   * Controller: its lower edge sits 30px above the bottom of main-content.
   * main-content is the positioning reference, so this remains stable across
   * viewport heights and does not depend on an arbitrary top percentage.
   */
  body.irema-3d-mobile-runtime-ready .irema-main-content{
    position:relative !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-main-content .irema-3d-mobile-selected-controller{
    position:absolute !important;
    left:50% !important;
    top:auto !important;
    bottom:30px !important;
    transform:translateX(-50%) scale(.94) !important;
    margin:0 !important;
  }
}


/* ==========================================================
   IREMA 1.7.100 — Keep Mobile layout, inherit Desktop colors
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * IMPORTANT:
   * Preserve Mobile 3D horizontal MainBar geometry.
   * Do NOT copy desktop navigation layout/classes.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-proxy{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(52px,1fr)) !important;
    align-items:stretch !important;

    left:0 !important;
    right:0 !important;
    transform:none !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    overflow-x:hidden !important;
    overflow-y:hidden !important;

    background:transparent !important;
    background-color:transparent !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    box-shadow:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn{
    width:auto !important;
    min-width:52px !important;
    flex:none !important;

    background:transparent !important;
    background-color:transparent !important;

    color:var(--irema-mainbar-nav-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn > span,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn > small{
    color:inherit !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn
  .irema-nav-icon:before,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn
  [class*="irema-icon-"]:before{
    color:var(--irema-mainbar-nav-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn svg,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn svg *{
    fill:var(--irema-mainbar-nav-color) !important;
  }

  /*
   * Desktop-equivalent active color, without changing Mobile button geometry.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active{
    color:var(--irema-secondary-color) !important;
    background:transparent !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active:before{
    content:"" !important;
    position:absolute !important;
    inset:4px !important;
    z-index:0 !important;
    border-radius:var(--irema-border-radius) !important;
    background:var(--irema-secondary-color) !important;
    opacity:.10 !important;
    pointer-events:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active
  .irema-nav-icon:before,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active
  [class*="irema-icon-"]:before{
    color:var(--irema-secondary-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active svg,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active svg *{
    fill:var(--irema-secondary-color) !important;
  }

  /*
   * Controller remains anchored to the bottom of main-content.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-main-content{
    position:relative !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-main-content
  .irema-3d-mobile-selected-controller{
    position:absolute !important;
    left:50% !important;
    top:auto !important;
    bottom:30px !important;
    transform:translateX(-50%) scale(.94) !important;
  }
}


/* ==========================================================
   IREMA 1.7.101 — Restore stable Mobile MainBar geometry
   + controller aligned to main-content base
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * Restore the stable Mobile 3D MainBar geometry used before 1.7.100.
   * Only colors continue to come from the desktop MainBar variables.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-host{
    position:relative !important;
    width:100% !important;

    flex:0 0 64px !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;

    overflow:visible !important;
    background:transparent !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-proxy{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;

    display:grid !important;
    grid-template-columns:repeat(6,minmax(52px,1fr)) !important;

    transform:none !important;
    margin:0 !important;
    padding:0 !important;

    overflow-x:hidden !important;
    overflow-y:hidden !important;

    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn{
    position:relative !important;

    width:auto !important;
    min-width:52px !important;

    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:3px !important;
    padding:4px 2px !important;
    margin:0 !important;

    border:0 !important;
    background:transparent !important;
    background-color:transparent !important;

    color:var(--irema-mainbar-nav-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn > span{
    font-size:20px !important;
    line-height:22px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn > small{
    display:block !important;
    font-size:9px !important;
    line-height:11px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn
  .irema-nav-icon:before,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn
  [class*="irema-icon-"]:before{
    color:var(--irema-mainbar-nav-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn svg,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn svg *{
    fill:var(--irema-mainbar-nav-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active{
    color:var(--irema-secondary-color) !important;
    background:transparent !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active:before{
    content:"" !important;
    position:absolute !important;
    inset:4px !important;
    z-index:0 !important;
    border-radius:var(--irema-border-radius) !important;
    background:var(--irema-secondary-color) !important;
    opacity:.10 !important;
    pointer-events:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active
  .irema-nav-icon:before,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active
  [class*="irema-icon-"]:before{
    color:var(--irema-secondary-color) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active svg,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-mainbar-btn.irema-active svg *{
    fill:var(--irema-secondary-color) !important;
  }

  /*
   * Selected-object controller:
   * align its bottom edge with the bottom edge of main-content.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-main-content{
    position:relative !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-main-content
  .irema-3d-mobile-selected-controller{
    position:absolute !important;

    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:0 !important;

    margin:0 !important;
    transform:translateX(-50%) scale(.94) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-main-content
  .irema-3d-mobile-selected-controller.irema-visible{
    transform:translateX(-50%) scale(1) !important;
  }
}


/* ==========================================================
   IREMA 1.7.102 — MainBar truly transparent
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * Some legacy Mobile 3D rules/themes can still paint the host black even
   * when the visible proxy buttons themselves are transparent.
   * Force ALL MainBar structural layers to remain transparent.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui .irema-3d-mobile-mainbar-host,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui .irema-3d-mobile-mainbar-proxy,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui .irema-3d-mobile-toolbar-row{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  /*
   * Also neutralize pseudo-elements that may come from inherited desktop/mobile
   * navigation skins.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui .irema-3d-mobile-mainbar-host::before,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui .irema-3d-mobile-mainbar-host::after,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui .irema-3d-mobile-mainbar-proxy::before,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui .irema-3d-mobile-mainbar-proxy::after{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  /*
   * Buttons keep desktop-derived colors only.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui .irema-3d-mobile-mainbar-btn{
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
  }

  /*
   * Active state keeps only the subtle translucent highlight.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui .irema-3d-mobile-mainbar-btn.irema-active:before{
    background:var(--irema-secondary-color) !important;
    opacity:.10 !important;
  }
}


/* ==========================================================
   IREMA 1.7.103 — MainBar labels + controller relative to viewer
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * Restore/lock the visible labels below every Mobile MainBar icon.
   * Some inherited desktop navigation rules were collapsing/hiding <small>.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  .irema-3d-mobile-mainbar-btn > small,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  .irema-mobile-native-nav-label{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:relative !important;
    width:auto !important;
    height:auto !important;
    min-height:11px !important;
    max-height:none !important;

    margin:0 !important;
    padding:0 !important;

    font-size:9px !important;
    line-height:11px !important;
    font-weight:400 !important;
    text-indent:0 !important;
    white-space:nowrap !important;

    color:inherit !important;
    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;
  }

  /*
   * Keep icons and label stacked vertically in the stable Mobile geometry.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  .irema-3d-mobile-mainbar-btn{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
  }

  /*
   * Controller positioning is now calculated from the actual
   * .irema-3d-mobile-viewer bounding rect in JS.
   * Remove obsolete main-content bottom anchoring.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller,
  body.irema-3d-mobile-runtime-ready
  .irema-main-content
  .irema-3d-mobile-selected-controller{
    position:fixed !important;
    right:auto !important;
    bottom:auto !important;
    margin:0 !important;
    transform:translate(-50%,-50%) scale(.94) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller.irema-visible,
  body.irema-3d-mobile-runtime-ready
  .irema-main-content
  .irema-3d-mobile-selected-controller.irema-visible{
    transform:translate(-50%,-50%) scale(1) !important;
  }
}


/* ==========================================================
   IREMA 1.7.104 — MainBar labels visible + immediate movement
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  .irema-3d-mobile-mainbar-proxy
  button.irema-3d-mobile-mainbar-btn > small,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  .irema-3d-mobile-mainbar-proxy
  .irema-mobile-native-nav-label{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    color:var(--irema-mainbar-nav-color, #485563) !important;
    -webkit-text-fill-color:var(--irema-mainbar-nav-color, #485563) !important;

    font-size:9px !important;
    line-height:11px !important;
    font-weight:400 !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:11px !important;
    min-height:11px !important;
    max-height:11px !important;

    margin:0 !important;
    padding:0 !important;

    text-indent:0 !important;
    text-shadow:none !important;
    white-space:nowrap !important;

    overflow:visible !important;
    clip:auto !important;
    clip-path:none !important;

    transform:none !important;
    position:relative !important;
    z-index:5 !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  .irema-3d-mobile-mainbar-proxy
  button.irema-3d-mobile-mainbar-btn.irema-active > small,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  .irema-3d-mobile-mainbar-proxy
  button.irema-3d-mobile-mainbar-btn.irema-active
  .irema-mobile-native-nav-label{
    color:var(--irema-secondary-color, #029EEB) !important;
    -webkit-text-fill-color:var(--irema-secondary-color, #029EEB) !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  .irema-3d-mobile-mainbar-btn{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    padding:3px 2px !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  .irema-3d-mobile-mainbar-btn > .irema-mobile-native-nav-icon,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  .irema-3d-mobile-mainbar-btn > span:first-child{
    flex:0 0 24px !important;
    width:auto !important;
    height:24px !important;
    min-height:24px !important;
    line-height:24px !important;
  }
}


/* IREMA 1.7.105 — Selected-object controller pressed state */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller button:active,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller button:focus-visible{
    /*
     * Lightened irema-secondary-color without hard-coding a separate hue.
     * color-mix keeps the pressed feedback tied to the native IREMA variable.
     */
    background:color-mix(in srgb, var(--irema-secondary-color) 18%, transparent) !important;
    background-color:color-mix(in srgb, var(--irema-secondary-color) 18%, transparent) !important;
  }
}


/* ==========================================================
   IREMA 1.7.112 — Restore native QR/Text-to-Image + cache delete
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * IMPORTANT:
   * 1.7.83 intentionally hid these native contexts with !important.
   * The feature was later restored, so neutralize that obsolete rule.
   */

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs > [data-context="qr-code"]{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /*
   * Text-to-Image follows Desktop configuration:
   * native IREMA removes .irema-hidden only when aiService is enabled.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs > [data-context="text2Img"]:not(.irema-hidden){
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs-content > [data-context="qr-code"],
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs-content > [data-context="text2Img"]{
    display:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs-content > [data-context="qr-code"].irema-active,
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs-content > [data-context="text2Img"].irema-active{
    display:block !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs-content > [data-context="qr-code"].irema-active
  irema-module-qr-code{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /*
   * The tab strip itself must remain visible now that QR is restored.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images.irema-hide-tabs
  .irema-module-tabs{
    display:flex !important;
  }

  /*
   * Mobile has no dependable hover: expose a permanent "X" on each cached
   * uploaded thumbnail. It uses the native .irema-delete control.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  irema-module-uploads
  .irema-item{
    position:relative !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  irema-module-uploads
  .irema-item > .irema-delete{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;
    top:5px !important;
    right:5px !important;
    left:auto !important;

    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    border-radius:50% !important;
    background:rgba(255,255,255,.92) !important;
    color:#222 !important;
    box-shadow:0 1px 5px rgba(0,0,0,.22) !important;

    z-index:12 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

}


/* ==========================================================
   IREMA 1.7.113 — Single delete X + centered QR tab icon
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /* Use ONLY IREMA's native delete icon; no generated duplicate X. */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  irema-module-uploads
  .irema-item > .irema-delete{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  irema-module-uploads
  .irema-item > .irema-delete::after{
    content:none !important;
    display:none !important;
  }

  /*
   * Center QR-Code's native icon inside its tab without changing the
   * desktop-derived tab architecture or click target.
   */
  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs > [data-context="qr-code"]{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  body.irema-3d-mobile-runtime-ready
  #irema-3d-mobile-ui
  irema-module-images
  .irema-module-tabs > [data-context="qr-code"] > *{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* ==========================================================
   IREMA 1.7.117 — Controller rotation + duplicate/delete
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * Duplicate and delete accompany the controller on a compact vertical rail.
   * They do not alter the 150x150 transform matrix or its bottom positioning.
   */
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action{
    position:absolute !important;
    left:auto !important;
    right:-44px !important;

    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;

    padding:0 !important;

    border:1px solid rgba(0,0,0,.14) !important;
    border-radius:4px !important;
    background:rgba(255,255,255,.94) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.14) !important;

    color:#111 !important;
    z-index:2 !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-duplicate{
    top:28px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-delete{
    top:82px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action > span{
    display:block !important;
    font-size:21px !important;
    line-height:1 !important;
    color:inherit !important;
    pointer-events:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action:active{
    background:color-mix(
      in srgb,
      var(--irema-secondary-color) 18%,
      white
    ) !important;
  }
}


/* ==========================================================
   IREMA 1.7.123 — Mobile Layers actions in two rows
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * The actions column previously placed up to four 36px controls in one row,
   * consuming ~144px. Use a compact 2x2 grid (~72px) to release horizontal
   * space for the layer name.
   */
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row{
    grid-template-columns:34px minmax(0,1fr) 74px !important;
    align-items:center !important;
    min-height:80px !important;
  }

  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-1{
    min-width:0 !important;
    width:100% !important;
    padding-right:4px !important;
  }

  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-title{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-2{
    display:grid !important;
    grid-template-columns:36px 36px !important;
    grid-auto-rows:36px !important;
    grid-auto-flow:row !important;

    align-items:center !important;
    justify-items:center !important;
    justify-content:end !important;

    width:74px !important;
    min-width:74px !important;
    max-width:74px !important;
    height:auto !important;

    gap:2px !important;
    overflow:visible !important;
  }

  /*
   * Preserve native touch targets and action order:
   * row 1: reorder / lock
   * row 2: visibility / remove
   * If an action is unavailable, CSS grid naturally compacts the remaining
   * controls without changing their functionality.
   */
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-2
  > .irema-icon-reorder,
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-2
  > .irema-lock-element,
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-2
  > .irema-visible-element,
  body.irema-3d-mobile-runtime-ready
  irema-module-manage-layers
  .irema-mobile-layer-row
  > .irema-cell-2
  > .irema-remove-element{
    position:relative !important;

    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    margin:0 !important;
    padding:0 !important;
  }
}


/* ==========================================================
   IREMA 1.7.124 — Layers select directly from row
   ========================================================== */
irema-module-manage-layers .irema-layer-select-element{
  display:none !important;
}




/* ==========================================================
   IREMA 1.7.149 — Compact Desktop controller top-left
   ========================================================== */
@media (min-width:1025px) and (hover:hover), (min-width:1025px) and (pointer:fine){
  #irema-3d-preview{
    position:relative !important;
  }

  #irema-3d-preview > .irema-3d-mobile-selected-controller{
    position:absolute !important;
    top:12px !important;
    right:auto !important;
    left:12px !important;
    bottom:auto !important;

    width:90px !important;
    height:90px !important;
    margin:0 !important;

    display:grid !important;
    grid-template-columns:30px 30px 30px !important;
    grid-template-rows:30px 30px 30px !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

    transform:none !important;
    transition:opacity .14s ease, visibility .14s linear !important;

    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(0,0,0,.16) !important;
    box-shadow:0 5px 18px rgba(0,0,0,.16) !important;

    z-index:100 !important;
    user-select:none !important;
    -webkit-user-select:none !important;
  }

  #irema-3d-preview > .irema-3d-mobile-selected-controller.irema-visible{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  #irema-3d-preview .irema-3d-mobile-selected-control{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    margin:0 !important;
    padding:4px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  #irema-3d-preview .irema-3d-mobile-selected-control:active,
  #irema-3d-preview .irema-3d-mobile-selected-control:focus-visible{
    background:color-mix(
      in srgb,
      var(--irema-secondary-color) 18%,
      transparent
    ) !important;
  }

  #irema-3d-preview .irema-3d-mobile-selected-control img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    pointer-events:none !important;
  }

  #irema-3d-preview .irema-control-plus{grid-column:1;grid-row:1;}
  #irema-3d-preview .irema-control-up{grid-column:2;grid-row:1;}
  #irema-3d-preview .irema-control-minus{grid-column:3;grid-row:1;}
  #irema-3d-preview .irema-control-left{grid-column:1;grid-row:2;}
  #irema-3d-preview .irema-control-right{grid-column:3;grid-row:2;}
  #irema-3d-preview .irema-control-rotate-left{grid-column:1;grid-row:3;}
  #irema-3d-preview .irema-control-down{grid-column:2;grid-row:3;}
  #irema-3d-preview .irema-control-rotate-right{grid-column:3;grid-row:3;}

  #irema-3d-preview .irema-mobile-object-action{
    position:absolute !important;
    left:auto !important;
    right:-31px !important;
    width:27px !important;
    height:27px !important;
    min-width:27px !important;
    min-height:27px !important;
    padding:0 !important;
    border:1px solid rgba(0,0,0,.14) !important;
    border-radius:4px !important;
    background:rgba(255,255,255,.94) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.14) !important;
    color:#111 !important;
    z-index:2 !important;
  }

  #irema-3d-preview .irema-control-duplicate{
    top:16px !important;
  }

  #irema-3d-preview .irema-control-delete{
    top:48px !important;
  }

  #irema-3d-preview .irema-mobile-object-action > span{
    display:block !important;
    font-size:15px !important;
    line-height:1 !important;
    color:inherit !important;
    pointer-events:none !important;
  }

  #irema-3d-preview button.irema-control-disabled,
  #irema-3d-preview button:disabled{
    opacity:.28 !important;
    pointer-events:none !important;
  }
}


/* ==========================================================
   IREMA 1.7.150 — Disabled controller actions in 3D Mobile
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  button.irema-control-disabled,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  button:disabled{
    opacity:.28 !important;
    filter:grayscale(1) !important;
    cursor:default !important;
    pointer-events:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  button.irema-control-disabled img,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  button:disabled img,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  button.irema-control-disabled > span,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  button:disabled > span{
    opacity:.65 !important;
    filter:grayscale(1) !important;
  }
}


/* IREMA 1.7.215 — 3D Mobile: remove theme container top spacing. */
@media (max-width: 1024px) and (orientation: portrait), (max-height: 599px) and (hover: none) and (pointer: coarse) {
  body.irema-3d-mobile #main-content .container,
  body.irema-3d-mobile-mode #main-content .container,
  body[class*="irema-3d-mobile"] #main-content .container {
    padding-top: 0 !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — Desktop 3D viewer independent from MainBar
   ========================================================== */
@media (min-width:1025px) and (hover:hover), (min-width:1025px) and (pointer:fine){
  body.irema-3d-configuration-mode #irema-3d-preview{
    height:80dvh !important;
    min-height:80dvh !important;
    max-height:80dvh !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — Mobile 3D fixed workspace: 80dvh
   Base funcional exacta: 1.7.330
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){

  /*
   * WordPress header is deliberately ignored.
   * Viewer + MainBar together always occupy a fixed 80% of viewport height.
   * No runtime measurement of header or available browser area is required.
   */
  body.irema-3d-mobile-mode #irema-3d-mobile-ui,
  body.irema-3d-mobile-runtime-ready #irema-3d-mobile-ui,
  body.irema-3d-mobile-mode .irema-3d-mobile-ui,
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-ui{
    height:80dvh !important;
    min-height:80dvh !important;
    max-height:80dvh !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /*
   * MainBar keeps the established 64px height.
   * The viewer receives every remaining pixel inside the fixed 80dvh block.
   */
  body.irema-3d-mobile-mode .irema-3d-mobile-mainbar-host,
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-mainbar-host{
    flex:0 0 64px !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
  }

  body.irema-3d-mobile-mode .irema-3d-mobile-viewer,
  body.irema-3d-mobile-runtime-ready .irema-3d-mobile-viewer{
    flex:1 1 0 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:hidden !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — Compact left-aligned Mobile 3D controller
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller{
    width:120px !important;
    height:120px !important;
    grid-template-columns:40px 40px 40px !important;
    grid-template-rows:40px 40px 40px !important;
    transform:translate(0,-50%) scale(.94) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller.irema-visible{
    transform:translate(0,-50%) scale(1) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-3d-mobile-selected-control:not(.irema-mobile-object-action){
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:6px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action{
    right:-38px !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-duplicate{
    top:20px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-delete{
    top:66px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action > span{
    font-size:18px !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — 80x80 Mobile 3D controller
   Left edge is positioned in JS from MainBar's actual left edge.
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller{
    width:80px !important;
    height:80px !important;
    grid-template-columns:repeat(3,26.6667px) !important;
    grid-template-rows:repeat(3,26.6667px) !important;
    transform:translate(0,-50%) scale(.94) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller.irema-visible{
    transform:translate(0,-50%) scale(1) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-3d-mobile-selected-control:not(.irema-mobile-object-action){
    width:26.6667px !important;
    height:26.6667px !important;
    min-width:26.6667px !important;
    min-height:26.6667px !important;
    padding:3px !important;
    font-size:14px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action{
    right:-31px !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-duplicate{
    top:8px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-delete{
    top:44px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action > span{
    font-size:15px !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — 60x60 draggable Mobile 3D controller
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller{
    width:60px !important;
    height:60px !important;
    grid-template-columns:20px 20px 20px !important;
    grid-template-rows:20px 20px 20px !important;
    transform:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller.irema-visible{
    transform:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-3d-mobile-selected-control:not(.irema-mobile-object-action){
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    padding:2px !important;
    font-size:11px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-controller-drag-handle{
    grid-column:2 !important;
    grid-row:2 !important;
    place-self:center !important;
    width:13px !important;
    height:13px !important;
    min-width:13px !important;
    min-height:13px !important;
    border-radius:50% !important;
    border:1px solid rgba(0,0,0,.34) !important;
    background:rgba(0,0,0,.14) !important;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.82) !important;
    cursor:grab !important;
    touch-action:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
    z-index:4 !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-controller-drag-handle:active{
    cursor:grabbing !important;
    background:rgba(0,0,0,.28) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action{
    right:-25px !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-duplicate{
    top:5px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-delete{
    top:33px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action > span{
    font-size:13px !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — 100x100 draggable Mobile 3D controller
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller{
    width:100px !important;
    height:100px !important;
    grid-template-columns:repeat(3,33.3333px) !important;
    grid-template-rows:repeat(3,33.3333px) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-3d-mobile-selected-control:not(.irema-mobile-object-action){
    width:33.3333px !important;
    height:33.3333px !important;
    min-width:33.3333px !important;
    min-height:33.3333px !important;
    padding:4px !important;
    font-size:15px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-controller-drag-handle{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action{
    right:-35px !important;
    width:31px !important;
    height:31px !important;
    min-width:31px !important;
    min-height:31px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-duplicate{
    top:12px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-delete{
    top:56px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action > span{
    font-size:17px !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — preserve direct object dragging in Mobile 3D
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller.irema-visible{
    pointer-events:none !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-3d-mobile-selected-control,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action,
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-3d-mobile-controller-drag-handle{
    pointer-events:auto !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — Desktop 3D shortcode MainBar responsive width
   The shortcode host and its native MainBar must never exceed the
   available width of the container where [irema_main_bar] is placed.
   Mobile 3D remains untouched.
   ========================================================== */
@media (min-width:1025px) and (hover:hover), (min-width:1025px) and (pointer:fine){
  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-main-bar-position{
    display:block;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-main-bar-position > irema-main-bar{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-main-bar-position > irema-main-bar > .irema-navigation{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-main-bar-position > irema-main-bar > .irema-module-content,
  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-main-bar-position > irema-main-bar > .irema-secondary-content{
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — Desktop 3D MainBar Undo / Redo
   ========================================================== */
@media (min-width:1025px) and (hover:hover), (min-width:1025px) and (pointer:fine){
  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  irema-main-bar > .irema-navigation
  > .irema-3d-desktop-history-actions{
    display:flex !important;
    flex:0 0 auto !important;
    align-items:stretch !important;
    min-width:0 !important;
  }

  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-3d-desktop-history-action{
    cursor:pointer !important;
    user-select:none !important;
    -webkit-user-select:none !important;
  }

  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-3d-desktop-history-action.irema-disabled{
    opacity:.35 !important;
    cursor:default !important;
    pointer-events:none !important;
  }

  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-3d-desktop-history-action
  > .irema-nav-icon{
    display:block;
  }
}


/* ==========================================================
   IREMA 1.7.330 — Desktop 3D MainBar Undo / Redo native layout
   Same vertical disposition as the rest of the MainBar items:
   large icon above, centered text below.
   ========================================================== */
@media (min-width:1025px) and (hover:hover), (min-width:1025px) and (pointer:fine){
  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  irema-main-bar > .irema-navigation
  > .irema-3d-desktop-history-actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;
    justify-content:center !important;
  }

  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-3d-desktop-history-action{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:3px !important;
    min-width:64px !important;
    padding:6px 10px !important;
    line-height:1 !important;
  }

  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-3d-desktop-history-action
  > .irema-nav-icon{
    display:block !important;
    width:auto !important;
    height:auto !important;
    margin:0 auto 2px !important;
    font-size:28px !important;
    line-height:28px !important;
    text-align:center !important;
  }

  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  .irema-3d-desktop-history-action
  > .irema-label{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    white-space:nowrap !important;
    line-height:1.15 !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — Undo / Redo as independent MainBar options
   ========================================================== */
@media (min-width:1025px) and (hover:hover), (min-width:1025px) and (pointer:fine){
  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  irema-main-bar > .irema-navigation
  > .irema-3d-desktop-history-actions{
    display:none !important;
  }

  body.irema-3d-configuration-mode:not(.irema-3d-mobile-mode)
  irema-main-bar > .irema-navigation
  > .irema-3d-desktop-history-action{
    display:flex !important;
    flex-direction:column !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}


/* ==========================================================
   IREMA 1.7.330 — Mobile 3D controller 120x120
   ========================================================== */
@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller{
    width:120px !important;
    height:120px !important;
    grid-template-columns:40px 40px 40px !important;
    grid-template-rows:40px 40px 40px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-3d-mobile-selected-control:not(.irema-mobile-object-action){
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    padding:5px !important;
    font-size:17px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-controller-drag-handle{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
    border-width:2px !important;
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.82) !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action{
    right:-40px !important;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-duplicate{
    top:15px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-control-delete{
    top:67px !important;
  }

  body.irema-3d-mobile-runtime-ready
  .irema-3d-mobile-selected-controller
  .irema-mobile-object-action > span{
    font-size:18px !important;
  }
}




/* ==========================================================
   IREMA 1.7.401 — iPad/tablet final orientation layout
   Portrait = one true full-width Mobile 3D column.
   Landscape = exact Desktop 3D presentation inside two columns.
   ========================================================== */

/* Tablet portrait: viewer + MainBar + contextual Toolbar use the complete
   emulated/device viewport width, not the WooCommerce summary width. */
body.irema-touch-tablet.irema-tablet-portrait.irema-3d-configuration-mode
#irema-3d-mobile-ui,
body.irema-touch-tablet.irema-tablet-portrait.irema-3d-configuration-mode
.irema-3d-mobile-viewer,
body.irema-touch-tablet.irema-tablet-portrait.irema-3d-configuration-mode
.irema-3d-mobile-preview-placeholder,
body.irema-touch-tablet.irema-tablet-portrait.irema-3d-configuration-mode
.irema-3d-mobile-mainbar-host,
body.irema-touch-tablet.irema-tablet-portrait.irema-3d-configuration-mode
.irema-3d-mobile-mainbar-proxy,
body.irema-touch-tablet.irema-tablet-portrait.irema-3d-configuration-mode
.irema-3d-mobile-toolbar-row,
body.irema-touch-tablet.irema-tablet-portrait.irema-3d-configuration-mode
.irema-3d-mobile-toolbar-row > irema-element-toolbar{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

body.irema-touch-tablet.irema-tablet-portrait.irema-3d-configuration-mode
#irema-3d-mobile-ui{
  width:100vw !important;
  max-width:100vw !important;
  min-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

body.irema-touch-tablet.irema-tablet-portrait.irema-3d-mobile-runtime-ready
#irema-3d-mobile-ui .irema-3d-mobile-mainbar-proxy{
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}

body.irema-touch-tablet.irema-tablet-portrait.irema-3d-mobile-runtime-ready
#irema-3d-mobile-ui .irema-3d-mobile-mainbar-proxy
> .irema-3d-mobile-mainbar-btn{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}

body.irema-touch-tablet.irema-tablet-portrait.irema-3d-mobile-runtime-ready
#irema-3d-mobile-ui .irema-3d-mobile-toolbar-row{
  overflow-x:hidden !important;
}

body.irema-touch-tablet.irema-tablet-portrait.irema-3d-mobile-runtime-ready
#irema-3d-mobile-ui .irema-3d-mobile-toolbar-row
> irema-element-toolbar.irema-3d-toolbar-mobile{
  left:auto !important;
  right:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
  transform:none !important;
}

/* Tablet landscape: this is not Mobile 3D. Reproduce the Desktop 3D shortcode
   contract even though the physical device is touch-first. */
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
.irema-main-bar-position,
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
.irema-main-bar-position > irema-main-bar,
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
.irema-main-bar-position > irema-main-bar > .irema-navigation,
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
.irema-main-bar-position > irema-main-bar > .irema-module-content,
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
.irema-main-bar-position > irema-main-bar > .irema-secondary-content,
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
[data-irema-3d-toolbar="1"],
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
[data-irema-3d-toolbar="1"] > irema-element-toolbar{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
.irema-main-bar-position.irema-mobile-mainbar-shortcode-disabled{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Same compact fixed-in-viewer controller used by Desktop 3D. */
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview{
  position:relative !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview > .irema-3d-mobile-selected-controller{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  right:auto !important;
  bottom:auto !important;
  width:90px !important;
  height:90px !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:30px 30px 30px !important;
  grid-template-rows:30px 30px 30px !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:none !important;
  transition:opacity .14s ease, visibility .14s linear !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(0,0,0,.16) !important;
  box-shadow:0 5px 18px rgba(0,0,0,.16) !important;
  z-index:100 !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview > .irema-3d-mobile-selected-controller.irema-visible{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-3d-mobile-selected-control:not(.irema-mobile-object-action){
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  margin:0 !important;
  padding:4px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-3d-mobile-controller-drag-handle{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
}

/* Desktop history items are part of the copied MainBar behaviour. */
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
irema-main-bar > .irema-navigation > .irema-3d-desktop-history-actions{
  display:none !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
irema-main-bar > .irema-navigation > .irema-3d-desktop-history-action{
  display:flex !important;
  flex-direction:column !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* Touch tablets never regain legacy hover/preselection, even while landscape
   is deliberately using Desktop 3D layout. */
body.irema-touch-tablet.irema-tablet-landscape #irema-3d-preview,
body.irema-touch-tablet.irema-tablet-landscape #irema-3d-preview canvas{
  cursor:default !important;
}

/* ==========================================================
   IREMA 1.7.402 — Tablet landscape controller = Desktop 3D
   Exact desktop controller matrix/icon/action placement for touch tablets
   rendered in the two-column landscape contract.
   ========================================================== */
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview > .irema-3d-mobile-selected-controller{
  position:absolute !important;
  top:12px !important;
  right:auto !important;
  left:12px !important;
  bottom:auto !important;
  width:90px !important;
  height:90px !important;
  margin:0 !important;
  display:grid !important;
  grid-template-columns:30px 30px 30px !important;
  grid-template-rows:30px 30px 30px !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:none !important;
  transition:opacity .14s ease, visibility .14s linear !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(0,0,0,.16) !important;
  box-shadow:0 5px 18px rgba(0,0,0,.16) !important;
  z-index:100 !important;
  user-select:none !important;
  -webkit-user-select:none !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview > .irema-3d-mobile-selected-controller.irema-visible{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-3d-mobile-selected-control{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  margin:0 !important;
  padding:4px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  -webkit-tap-highlight-color:transparent !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-3d-mobile-selected-control img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  pointer-events:none !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-control-plus{grid-column:1 !important;grid-row:1 !important;}
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-control-up{grid-column:2 !important;grid-row:1 !important;}
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-control-minus{grid-column:3 !important;grid-row:1 !important;}
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-control-left{grid-column:1 !important;grid-row:2 !important;}
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-control-right{grid-column:3 !important;grid-row:2 !important;}
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-control-rotate-left{grid-column:1 !important;grid-row:3 !important;}
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-control-down{grid-column:2 !important;grid-row:3 !important;}
body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-control-rotate-right{grid-column:3 !important;grid-row:3 !important;}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-3d-mobile-controller-drag-handle{
  grid-column:2 !important;
  grid-row:2 !important;
  place-self:center !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  margin:0 !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-mobile-object-action{
  position:absolute !important;
  left:auto !important;
  right:-31px !important;
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  min-height:27px !important;
  padding:0 !important;
  border:1px solid rgba(0,0,0,.14) !important;
  border-radius:4px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.14) !important;
  color:#111 !important;
  z-index:2 !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-control-duplicate{
  top:16px !important;
  grid-column:auto !important;
  grid-row:auto !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-control-delete{
  top:48px !important;
  grid-column:auto !important;
  grid-row:auto !important;
}

body.irema-touch-tablet.irema-tablet-landscape.irema-3d-configuration-mode
#irema-3d-preview .irema-mobile-object-action > span{
  display:block !important;
  font-size:15px !important;
  line-height:1 !important;
  color:inherit !important;
  pointer-events:none !important;
}


/* ==========================================================
   IREMA 1.7.403 — Tablet layout follows WooCommerce columns
   Two columns = Desktop 3D contract, regardless of orientation.
   ========================================================== */
body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
#irema-3d-preview-placeholder{
  min-height:80dvh !important;
  height:80dvh !important;
  max-height:80dvh !important;
  overflow:hidden !important;
}

body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
#irema-3d-preview{
  position:relative !important;
  width:100% !important;
  height:80dvh !important;
  min-height:80dvh !important;
  max-height:80dvh !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* In two-column tablet mode the WebGL surface owns the complete viewer.
   Three.js still controls its backing-buffer resolution. */
body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
#irema-3d-preview > canvas[data-engine="three.js"]{
  display:block !important;
  max-width:none !important;
  max-height:none !important;
}

/* The controller is a persistent viewer fixture while Fabric keeps a
   selection. Its visibility is released only by selection:cleared. */
body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
#irema-3d-preview > .irema-3d-mobile-selected-controller{
  position:absolute !important;
  top:12px !important;
  left:12px !important;
  right:auto !important;
  bottom:auto !important;
}


/* ==========================================================
   IREMA 1.7.405 — Tablet layout contract follows WooCommerce
   1 WC column = full-width Mobile 3D UI.
   2 WC columns = Desktop 3D presentation + touch interaction.
   ========================================================== */

/* ONE COLUMN ------------------------------------------------
   The mobile contract is class-driven, never orientation-driven. This is
   essential for landscape tablets whose WooCommerce theme still collapses the
   product to one column. */
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
#irema-3d-mobile-ui{
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
  width:100vw !important;
  max-width:100vw !important;
  min-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  box-sizing:border-box !important;
  background:#fff !important;
}

body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
#irema-3d-preview-placeholder,
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
[data-irema-3d-toolbar="1"],
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
.irema-main-bar-position{
  display:none !important;
}

body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
#irema-3d-mobile-ui .irema-3d-mobile-viewer,
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
#irema-3d-mobile-ui .irema-3d-mobile-preview-placeholder,
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
#irema-3d-mobile-ui .irema-3d-mobile-mainbar-host,
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
#irema-3d-mobile-ui .irema-3d-mobile-mainbar-proxy,
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
#irema-3d-mobile-ui .irema-3d-mobile-toolbar-row,
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
#irema-3d-mobile-ui .irema-3d-mobile-toolbar-row > irema-element-toolbar{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

body.irema-touch-tablet.irema-tablet-one-column.irema-3d-mobile-runtime-ready
#irema-3d-mobile-ui .irema-3d-mobile-mainbar-proxy{
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
}

body.irema-touch-tablet.irema-tablet-one-column.irema-3d-mobile-runtime-ready
#irema-3d-mobile-ui .irema-3d-mobile-mainbar-proxy > .irema-3d-mobile-mainbar-btn{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}

/* A one-column landscape tablet gets a square-or-taller viewer: its minimum
   height in CSS pixels equals the actual full-width viewer width. The document
   may scroll vertically; the model is never compressed to a short landscape
   viewport. */
@media (orientation:landscape){
  body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
  #irema-3d-mobile-ui{
    height:auto !important;
    min-height:calc(100vw + 64px) !important;
    max-height:none !important;
    overflow:visible !important;
  }

  body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
  #irema-3d-mobile-ui .irema-3d-mobile-viewer{
    position:relative !important;
    flex:0 0 100vw !important;
    height:100vw !important;
    min-height:100vw !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
  #irema-3d-mobile-ui .irema-3d-mobile-preview-placeholder{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    aspect-ratio:1 / 1 !important;
    margin:0 !important;
    transform:none !important;
  }

  body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
  #irema-3d-mobile-ui .irema-3d-mobile-preview-placeholder > #irema-3d-preview{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    margin:0 !important;
    transform:none !important;
  }
}

/* TWO COLUMNS -----------------------------------------------
   Presentation is Desktop 3D regardless of tablet orientation. Interaction
   remains touch-first in JavaScript (tap selection, gestures, no hover). */
body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
#irema-3d-mobile-ui{
  display:none !important;
}

body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
#irema-3d-preview-placeholder,
body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
[data-irema-3d-toolbar="1"],
body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
.irema-main-bar-position{
  display:block !important;
}

body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
#irema-3d-preview-placeholder,
body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
#irema-3d-preview{
  height:80dvh !important;
  min-height:80dvh !important;
  max-height:80dvh !important;
}

body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
.irema-main-bar-position,
body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
.irema-main-bar-position > irema-main-bar,
body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
[data-irema-3d-toolbar="1"],
body.irema-touch-tablet.irema-tablet-two-column.irema-3d-configuration-mode
[data-irema-3d-toolbar="1"] > irema-element-toolbar{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* ==========================================================
   IREMA 1.7.408 — Phone landscape / one-column Mobile 3D
   The 3D viewer minimum height equals the FULL SCREEN width.
   It may exceed the viewport height by design; page scrolling is allowed so
   the complete model can be seen without compressing the 3D viewport.
   ========================================================== */
@media (orientation:landscape) and (hover:none) and (pointer:coarse){
  body.irema-3d-mobile-mode:not(.irema-touch-tablet).irema-3d-configuration-mode
  #irema-3d-mobile-ui{
    height:auto !important;
    min-height:calc(100vw + 64px) !important;
    max-height:none !important;
    overflow:visible !important;
  }

  body.irema-3d-mobile-mode:not(.irema-touch-tablet).irema-3d-configuration-mode
  #irema-3d-mobile-ui .irema-3d-mobile-viewer{
    position:relative !important;
    flex:0 0 100vw !important;
    width:100vw !important;
    height:100vw !important;
    min-height:100vw !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  body.irema-3d-mobile-mode:not(.irema-touch-tablet).irema-3d-configuration-mode
  #irema-3d-mobile-ui .irema-3d-mobile-preview-placeholder,
  body.irema-3d-mobile-mode:not(.irema-touch-tablet).irema-3d-configuration-mode
  #irema-3d-mobile-ui .irema-3d-mobile-preview-placeholder > #irema-3d-preview{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    margin:0 !important;
    transform:none !important;
  }
}

/* ==========================================================
   IREMA 1.7.450 - Woo authoritative one-column normalization
   WooCommerce already decided this product is one column. Remove residual
   float/half-column geometry from the theme itself, then let Mobile 3D fill
   that real column. Do NOT bleed the UI with 100vw/negative viewport margins.
   ========================================================== */
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
.woocommerce div.product div.images,
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
.woocommerce div.product div.summary,
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
div.product div.images,
body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
div.product div.summary{
  float:none !important;
  clear:both !important;
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  box-sizing:border-box !important;
}

body.irema-touch-tablet.irema-tablet-one-column.irema-3d-configuration-mode
#irema-3d-mobile-ui{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
  box-sizing:border-box !important;
}


/* ==========================================================
   IREMA 1.7.458 — Safe one-column centering
   Center only WooCommerce columns + Mobile 3D root. Do NOT override
   transforms/positioning on viewer/preview descendants: those values are
   part of the Mobile 3D rendering geometry and clearing them can move the
   Three.js canvas outside the visible viewport.
   ========================================================== */
body.irema-tablet-one-column.irema-3d-configuration-mode
.woocommerce div.product div.images,
body.irema-tablet-one-column.irema-3d-configuration-mode
.woocommerce div.product div.summary,
body.irema-tablet-one-column.irema-3d-configuration-mode
div.product div.images,
body.irema-tablet-one-column.irema-3d-configuration-mode
div.product div.summary{
  float:none !important;
  clear:both !important;
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

body.irema-tablet-one-column.irema-3d-configuration-mode
#irema-3d-mobile-ui{
  float:none !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}


/* ==========================================================
   IREMA 1.7.482 — Mobile 3D / touch two-column native selection guard
   A sustained tap belongs to the configurator, never to browser/OS text or
   image selection. touch-action is intentionally NOT overridden here because
   OrbitControls and the IREMA pointer lifecycle already own gesture handling.
   ========================================================== */
body.irema-tablet-two-column.irema-3d-configuration-mode #irema-3d-preview,
body.irema-tablet-two-column.irema-3d-configuration-mode #irema-3d-preview *{
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-user-drag:none !important;
}