/* v9.0.12: LogoMat 3D preview only. Keeps v9.0.11 pivot, adds subtle background watermark and mobile visibility tuning. */
.hbj-product-page .hbj-logomat-3d{
  margin-top:18px!important;
  padding:16px!important;
  border:1px solid rgba(37,55,133,.14)!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(246,249,255,.72))!important;
  box-shadow:0 18px 48px rgba(37,55,133,.08), inset 0 1px 0 rgba(255,255,255,.86)!important;
}
.hbj-product-page .hbj-logomat-3d-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-bottom:12px!important;
}
.hbj-product-page .hbj-logomat-3d-head span{
  display:block!important;
  color:#8fbe21!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  margin-bottom:3px!important;
}
.hbj-product-page .hbj-logomat-3d-head strong{
  display:block!important;
  color:#253785!important;
  font-size:18px!important;
  font-weight:950!important;
  line-height:1.15!important;
}
.hbj-product-page .hbj-logomat-3d-head small{
  display:block!important;
  margin-top:4px!important;
  color:#516070!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.hbj-product-page .hbj-logomat-3d-head button{
  appearance:none!important;
  border:1px solid rgba(37,55,133,.24)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.82)!important;
  color:#253785!important;
  font-weight:900!important;
  padding:10px 14px!important;
  box-shadow:0 10px 24px rgba(37,55,133,.10), inset 0 1px 0 rgba(255,255,255,.86)!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}
.hbj-product-page .hbj-logomat-3d-head button:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 14px 30px rgba(37,55,133,.14), inset 0 1px 0 rgba(255,255,255,.90)!important;
}
.hbj-product-page .hbj-logomat-3d-viewer[hidden]{
  display:none!important;
}
.hbj-product-page .hbj-logomat-3d-studio{
  position:relative!important;
  height:min(62vw,520px)!important;
  min-height:330px!important;
  border-radius:17px!important;
  overflow:hidden!important;
  cursor:grab!important;
  touch-action:none!important;
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,1) 0,rgba(255,255,255,.78) 25%,rgba(239,243,248,.62) 60%,rgba(226,232,241,.78) 100%),
    linear-gradient(180deg,#ffffff 0%,#f7f9fc 52%,#eef2f7 100%)!important;
  border:1px solid rgba(37,55,133,.10)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72), inset 0 -80px 120px rgba(37,55,133,.045)!important;
  perspective:1100px!important;
  perspective-origin:50% 46%!important;
}
.hbj-product-page .hbj-logomat-3d-studio.is-dragging{
  cursor:grabbing!important;
}
.hbj-product-page .hbj-logomat-3d-studio:before{
  content:""!important;
  position:absolute!important;
  left:8%!important;
  right:8%!important;
  top:12%!important;
  height:24%!important;
  background:
    url('entremattor-3d-watermark.png') center 18% / min(46%,430px) auto no-repeat,
    radial-gradient(ellipse at center,rgba(255,255,255,.88),rgba(255,255,255,0) 70%)!important;
  opacity:.10!important;
  pointer-events:none!important;
  z-index:1!important;
}
.hbj-product-page .hbj-logomat-3d-studio:after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:58%!important;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.62) 34%,rgba(230,235,244,.55) 100%)!important;
  pointer-events:none!important;
  z-index:0!important;
}
.hbj-product-page .hbj-logomat-3d-mat-plane{
  --hbj-logomat-3d-rotation:-8deg;
  --hbj-logomat-3d-aspect:8 / 5;
  position:absolute!important;
  left:50%!important;
  top:68%!important;
  width:min(84%,860px)!important;
  aspect-ratio:var(--hbj-logomat-3d-aspect)!important;
  transform-style:preserve-3d!important;
  transform:translate(-50%,-50%) rotateX(64deg) rotateZ(var(--hbj-logomat-3d-rotation))!important;
  transform-origin:center center!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 26px 24px rgba(23,32,51,.24)) drop-shadow(0 4px 6px rgba(23,32,51,.18))!important;
  z-index:3!important;
}
.hbj-product-page .hbj-logomat-3d-mat-plane:before{
  display:none!important;
}
.hbj-product-page .hbj-logomat-3d-mat-plane:after{
  display:none!important;
}
/* v9.0.12: portrait stays on the v9.0.11 pivot model, but starts a touch higher
   in the studio so the full mat is easier to see while rotating. */
.hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="portrait"]{
  top:57%!important;
  width:min(40%,380px)!important;
  aspect-ratio:var(--hbj-logomat-3d-aspect,5 / 8)!important;
  transform-origin:center center!important;
}
.hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="square"]{
  width:min(74%,740px)!important;
  aspect-ratio:1 / 1!important;
}
.hbj-product-page .hbj-logomat-3d-face{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:transparent!important;
  transform:translateZ(3px)!important;
  backface-visibility:visible!important;
}
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-preview{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--hbj-logomat-3d-source-w,100%)!important;
  max-width:none!important;
  height:var(--hbj-logomat-3d-source-h,100%)!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  aspect-ratio:auto!important;
  pointer-events:none!important;
  transform-origin:center center!important;
  transform:translate(-50%,-50%) scale(var(--hbj-logomat-3d-clone-scale,1))!important;
}
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-preview.hbj-logomat-3d-preview-clone{
  min-height:0!important;
}
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-preview.hbj-logomat-3d-preview-clone > .hbj-logomat-stage.hbj-logomat-3d-stage-clone{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  max-width:none!important;
  max-height:none!important;
}


.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-stage{
  pointer-events:none!important;
}
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-mat,
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-color-layer{
  pointer-events:none!important;
}
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-logo-slot,
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-preview-text{
  cursor:default!important;
  pointer-events:none!important;
}
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-logo-slot{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
}
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-preview-text{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.hbj-product-page .hbj-logomat-3d-tools{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-top:10px!important;
  color:#516070!important;
  font-size:12px!important;
  font-weight:700!important;
}
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-3d{
    padding:14px!important;
  }
  .hbj-product-page .hbj-logomat-3d-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .hbj-product-page .hbj-logomat-3d-head button{
    width:100%!important;
  }
  .hbj-product-page .hbj-logomat-3d-tools{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
}

/* v9.0.13: 3D preview only.
   - Mobile: keep every 3D mat centered in the viewport so it remains visible.
   - Tablet: reinforce the visible mat border in 3D preview only. */
@media(max-width:640px){
}
@media(min-width:641px) and (max-width:1024px){
  .hbj-product-page .hbj-logomat-3d-face{
    box-shadow:inset 0 0 0 clamp(5px,.72vw,8px) rgba(7,14,18,.86)!important;
  }
}


/* v9.0.14: 3D preview only.
   Mobile: prevent LogoMat sticky/ending states from affecting the cloned 3D preview,
   so the mat remains visible and centered in the 360 viewport.
   Tablet: draw a full edge on the 3D clone so top/bottom border remains visible. */
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-preview.hbj-logomat-3d-preview-clone,
.hbj-product-page .hbj-logomat-options.is-logomat-sticky-active .hbj-logomat-3d-face .hbj-logomat-preview.hbj-logomat-3d-preview-clone,
.hbj-product-page .hbj-logomat-options.is-logomat-sticky-ending .hbj-logomat-3d-face .hbj-logomat-preview.hbj-logomat-3d-preview-clone{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--hbj-logomat-3d-source-w,100%)!important;
  max-width:none!important;
  min-width:0!important;
  height:var(--hbj-logomat-3d-source-h,100%)!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:2!important;
  transform:translate(-50%,-50%) scale(var(--hbj-logomat-3d-clone-scale,1))!important;
  transform-origin:center center!important;
  pointer-events:none!important;
}
.hbj-product-page .hbj-logomat-3d-face .hbj-logomat-preview.hbj-logomat-3d-preview-clone:before,
.hbj-product-page .hbj-logomat-options.is-logomat-sticky-active .hbj-logomat-3d-face .hbj-logomat-preview.hbj-logomat-3d-preview-clone:before,
.hbj-product-page .hbj-logomat-options.is-logomat-sticky-ending .hbj-logomat-3d-face .hbj-logomat-preview.hbj-logomat-3d-preview-clone:before{
  display:none!important;
  content:none!important;
}
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-3d-mat-plane,
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="portrait"],
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="square"]{
    left:50%!important;
    top:50%!important;

  }
  .hbj-product-page .hbj-logomat-3d-mat-plane{
    width:82%!important;
  }
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="portrait"]{
    width:50%!important;
  }
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="square"]{
    width:70%!important;
  }
}
@media(min-width:641px) and (max-width:1024px){
  .hbj-product-page .hbj-logomat-3d-face .hbj-logomat-stage.hbj-logomat-3d-stage-clone::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:20!important;
    display:block!important;
    border:clamp(4px,.72vw,8px) solid rgba(7,14,18,.88)!important;
    box-sizing:border-box!important;
    border-radius:0!important;
    pointer-events:none!important;
  }
}


/* v9.0.15-clean: only 360 touch scroll and fixed visual rotate-handle size.
   - Mobile/tablet: vertical movement in the 3D viewport scrolls the page; horizontal movement rotates the mat.
   - Rotate handles keep the same visual size while logo/text items are scaled. */
.hbj-product-page .hbj-logomat-draggable{
  --logomat-handle-counter-scale:1;
}
.hbj-product-page .hbj-logomat-rotate-handle{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  transform:scale(var(--logomat-handle-counter-scale,1))!important;
  transform-origin:center center!important;
}
.hbj-product-page .hbj-logomat-rotate-handle:before{
  font-size:17px!important;
}
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-3d-studio{
    touch-action:pan-y!important;
  }
}


/* v9.0.16-clean: 3D viewer UI cleanup only.
   Keep the opener button, remove redundant reset/update actions,
   and reduce only the mobile 360 viewport height. */
@media(max-width:640px){
}

/* v9.0.18-clean: 3D preview only.
   Keep the v9.0.17 clean behavior, but give the mobile 360 viewport 20% more height
   than the compact v9.0.16 value so the mat is not visually squeezed. */
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-3d-studio{
    height:317px!important;
    min-height:288px!important;
  }
}


/* v9.0.19-clean: 3D preview mobile visual parity only.
   Keep the v9.0.18 mobile viewport height, but use the same perspective/orientation geometry
   as desktop so landscape, square and portrait render with the same top/bottom perspective. */
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-3d-mat-plane{

    transform:translate(-50%,-50%) rotateX(64deg) rotateZ(var(--hbj-logomat-3d-rotation))!important;
    transform-origin:center center!important;
  }
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="portrait"]{

    transform:translate(-50%,-50%) rotateX(64deg) rotateZ(var(--hbj-logomat-3d-rotation))!important;
    transform-origin:center center!important;
  }
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="square"]{

    transform:translate(-50%,-50%) rotateX(64deg) rotateZ(var(--hbj-logomat-3d-rotation))!important;
    transform-origin:center center!important;
  }
}


/* v9.0.20-clean: mobile 3D preview perspective only.
   Do not touch sticky preview/editor. Mobile 360 gets a stronger floor perspective so
   square/portrait/landscape read like the desktop 3D view instead of flat/front-on. */
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-3d-studio{
    perspective:620px!important;
    -webkit-perspective:620px!important;
    perspective-origin:50% 46%!important;
    -webkit-perspective-origin:50% 46%!important;
  }
  .hbj-product-page .hbj-logomat-3d-mat-plane,
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="portrait"],
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="square"]{
    transform-style:preserve-3d!important;
    -webkit-transform-style:preserve-3d!important;
    transform:translate(-50%,-50%) rotateX(68deg) rotateZ(var(--hbj-logomat-3d-rotation))!important;
    -webkit-transform:translate(-50%,-50%) rotateX(68deg) rotateZ(var(--hbj-logomat-3d-rotation))!important;
    transform-origin:center center!important;
    -webkit-transform-origin:center center!important;
  }
  .hbj-product-page .hbj-logomat-3d-face{
    -webkit-transform:translateZ(3px)!important;
    transform:translateZ(3px)!important;
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
  }
}

/* v9.0.21-clean: iOS/Safari-only 3D fallback for mobile LogoMat 360 preview.
   Android/desktop/tablet stay on the existing v9.0.20 rules.
   iOS WebKit can flatten parent perspective, so put perspective directly in the
   mat-plane transform while keeping the same position/size rules. */
@media(max-width:640px){
  @supports (-webkit-touch-callout:none){
    .hbj-product-page .hbj-logomat-3d-studio{
      perspective:none!important;
      -webkit-perspective:none!important;
    }
    .hbj-product-page .hbj-logomat-3d-studio .hbj-logomat-3d-mat-plane,
    .hbj-product-page .hbj-logomat-3d-studio .hbj-logomat-3d-mat-plane[data-orientation="portrait"],
    .hbj-product-page .hbj-logomat-3d-studio .hbj-logomat-3d-mat-plane[data-orientation="square"]{
      transform:translate3d(-50%,-50%,0) perspective(620px) rotateX(68deg) rotateZ(var(--hbj-logomat-3d-rotation))!important;
      -webkit-transform:translate3d(-50%,-50%,0) perspective(620px) rotateX(68deg) rotateZ(var(--hbj-logomat-3d-rotation))!important;
      transform-origin:center center!important;
      -webkit-transform-origin:center center!important;
      transform-style:preserve-3d!important;
      -webkit-transform-style:preserve-3d!important;
    }
    .hbj-product-page .hbj-logomat-3d-studio .hbj-logomat-3d-face{
      transform:translateZ(3px)!important;
      -webkit-transform:translateZ(3px)!important;
      backface-visibility:visible!important;
      -webkit-backface-visibility:visible!important;
    }
  }
}

/* v9.0.22-clean: mobile 3D preview only.
   Keep v9.0.21 iOS fallback; make the watermark visible over the rotating mat
   and lift only landscape/square a little toward the viewport center. */
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-3d-mat-plane{
    top:62%!important;
  }
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="square"]{
    top:62%!important;
  }
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="portrait"]{
    top:57%!important;
  }
}

/* v9.0.23-clean: mobile 3D watermark no-clip fix only.
   The watermark image is square, so a short pseudo-element clipped the text/logo.
   Keep mat shadow/position/rotation untouched; only give the mobile watermark layer
   a full-height box and place it below the mat plane but above the studio background. */
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-3d-studio:before{
    top:0!important;
    left:0!important;
    right:0!important;
    height:100%!important;
    z-index:2!important;
    opacity:.105!important;
    background:url('entremattor-3d-watermark.png') center 18% / min(74%,360px) auto no-repeat!important;
  }
}



/* v9.0.117: iPhone 360 compositor stabilization only.
   iPhone WebKit rotates one flattened canvas texture instead of repainting the
   live DOM clone, clip paths and alpha masks on every pointer frame. Android,
   tablet, laptop and desktop keep the approved DOM 360 renderer unchanged. */
.hbj-product-page .hbj-logomat-3d-mat-plane.is-ios-flat-texture{
  will-change:transform!important;
  -webkit-backface-visibility:hidden!important;
  backface-visibility:hidden!important;
  -webkit-transform-style:flat!important;
  transform-style:flat!important;
}
.hbj-product-page .hbj-logomat-3d-face.is-flat-texture{
  overflow:hidden!important;
  contain:paint!important;
  isolation:isolate!important;
  -webkit-transform:translateZ(0)!important;
  transform:translateZ(0)!important;
  -webkit-backface-visibility:hidden!important;
  backface-visibility:hidden!important;
}
.hbj-product-page .hbj-logomat-3d-face.is-flat-texture .hbj-logomat-3d-flat-texture{
  position:absolute!important;
  inset:1px!important;
  display:block!important;
  width:calc(100% - 2px)!important;
  height:calc(100% - 2px)!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  pointer-events:none!important;
  -webkit-transform:translateZ(0)!important;
  transform:translateZ(0)!important;
  -webkit-backface-visibility:hidden!important;
  backface-visibility:hidden!important;
}