/* v9.0.24: tablet-only product module polish.
   Only affects tablet widths: stack the configurator image like mobile, keep it centered/small,
   and add breathing room around the main product image and product text areas. */
@media(min-width:641px) and (max-width:980px){
  body.single-hbj_product.hbj-product-template-isolated .hbj-product-template-main,
  body.single-hbj_product.hbj-product-template-isolated main.hbj-product-template-main{
    padding-left:22px!important;
    padding-right:22px!important;
    box-sizing:border-box!important;
  }
  .hbj-product-page .hbj-product-gallery{
    width:100%!important;
    max-width:560px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:10px!important;
    padding-right:10px!important;
    box-sizing:border-box!important;
  }
  .hbj-product-page .hbj-product-media-main{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  .hbj-product-page .hbj-product-info,
  .hbj-product-page .hbj-product-copy,
  .hbj-product-page .hbj-info-row,
  .hbj-product-page .hbj-sizes,
  .hbj-product-page .hbj-faq{
    padding-left:14px!important;
    padding-right:14px!important;
    box-sizing:border-box!important;
  }
  .hbj-product-page .hbj-card-body-row,
  body.single-hbj_product.hbj-product-template-isolated .hbj-card-body-row{
    grid-template-columns:1fr!important;
  }
  .hbj-product-page .hbj-card-thumb,
  body.single-hbj_product.hbj-product-template-isolated .hbj-card-thumb{
    width:min(132px,42vw)!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:3 / 4!important;
    justify-self:center!important;
    align-self:start!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  .hbj-product-page .hbj-card-thumb img,
  body.single-hbj_product.hbj-product-template-isolated .hbj-card-thumb img{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
    display:block!important;
  }
  .hbj-product-page .hbj-card-controls,
  body.single-hbj_product.hbj-product-template-isolated .hbj-card-controls{
    grid-template-columns:1fr 1fr!important;
  }
}

/* v9.0.25: tablet-only 3D preview frame cleanup.
   Removes the tablet-only helper frame around the cloned LogoMat stage in 360 view.
   This does not affect mobile, desktop, sticky preview, editor, pricing or product module layout. */
@media(min-width:641px) and (max-width:1024px){
  .hbj-product-page .hbj-logomat-3d-face{
    box-shadow:none!important;
  }
  .hbj-product-page .hbj-logomat-3d-face .hbj-logomat-stage.hbj-logomat-3d-stage-clone::after{
    content:none!important;
    display:none!important;
    border:0!important;
    box-shadow:none!important;
  }
}

/* v9.0.26: tablet-only LogoMat square designer preview hint fix.
   Only affects the normal designer preview on tablets when square orientation is selected.
   Moves the drag hint below the preview so it does not overlap the square mat. */
@media(min-width:641px) and (max-width:1024px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square{
    overflow:visible!important;
    margin-bottom:34px!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square > .hbj-logomat-drag-hint{
    top:calc(100% + 8px)!important;
    bottom:auto!important;
    left:0!important;
    right:0!important;
    z-index:8!important;
    text-align:center!important;
  }
}


/* v9.0.27: tablet-only LogoMat designer sticky preview + landscape preview width.
   Extends the approved mobile sticky preview/message behavior to tablet without touching
   mobile, desktop, 360 view, pricing, uploads or cart. */
@media(min-width:641px) and (max-width:1024px){
  .hbj-product-page .hbj-configurator.hbj-service-flow,
  .hbj-product-page .hbj-mat-cards,
  .hbj-product-page .hbj-mat-card.has-logomat-options,
  .hbj-product-page .hbj-logomat-options,
  .hbj-product-page .hbj-logomat-grid{
    overflow:visible!important;
  }

  .hbj-product-page .hbj-logomat-grid{
    align-items:start!important;
  }

  .hbj-product-page .hbj-logomat-preview{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:calc(env(safe-area-inset-top, 0px) + 10px)!important;
    z-index:70!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:visible!important;
    align-self:start!important;
    transition:opacity .22s ease, transform .22s ease!important;
    isolation:isolate!important;
  }

  body.admin-bar .hbj-product-page .hbj-logomat-preview{
    top:calc(env(safe-area-inset-top, 0px) + 56px)!important;
  }

  .hbj-product-page .hbj-logomat-preview:before{
    content:""!important;
    position:absolute!important;
    top:-28px!important;
    bottom:-10px!important;
    left:50%!important;
    width:100vw!important;
    max-width:100vw!important;
    transform:translateX(-50%)!important;
    border-radius:0 0 22px 22px!important;
    background:rgba(255,255,255,.24)!important;
    border:1px solid rgba(255,255,255,.42)!important;
    box-shadow:0 18px 46px rgba(23,32,51,.14), inset 0 1px 0 rgba(255,255,255,.56)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.24)!important;
    backdrop-filter:blur(18px) saturate(1.24)!important;
    opacity:0!important;
    pointer-events:none!important;
    z-index:-1!important;
    transition:opacity .18s ease!important;
  }

  body.admin-bar .hbj-product-page .hbj-logomat-preview:before{
    top:-74px!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-active .hbj-logomat-preview:before{
    opacity:1!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-ending .hbj-logomat-preview{
    opacity:0!important;
    transform:translateY(-18px) scale(.96) translateZ(0)!important;
    pointer-events:none!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-ending .hbj-logomat-preview:before{
    opacity:0!important;
  }

  .hbj-logomat-sticky-message{
    position:fixed!important;
    top:50%!important;
    left:24px!important;
    right:24px!important;
    z-index:82!important;
    display:block!important;
    padding:13px 18px!important;
    border-radius:18px!important;
    text-align:center!important;
    font-size:13px!important;
    line-height:1.22!important;
    font-weight:900!important;
    color:rgba(37,55,133,.92)!important;
    background:rgba(255,255,255,.36)!important;
    border:1px solid rgba(255,255,255,.54)!important;
    box-shadow:0 14px 38px rgba(23,32,51,.16), inset 0 1px 0 rgba(255,255,255,.66)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.24)!important;
    backdrop-filter:blur(18px) saturate(1.24)!important;
    pointer-events:none!important;
    opacity:0!important;
    transform:translateY(calc(-50% - 8px))!important;
    transition:opacity .18s ease, transform .18s ease!important;
  }

  .hbj-logomat-sticky-message.is-visible{
    opacity:1!important;
    transform:translateY(-50%)!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape{
    width:min(92vw, 680px)!important;
    max-width:min(92vw, 680px)!important;
  }
}


/* v9.0.29: tablet-only LogoMat landscape size-slider position.
   Keeps mobile and desktop untouched. Pinch scaling on tablet already uses the same touch gesture logic as mobile;
   this only pulls the landscape size slider back inside the tablet preview so it does not drop into the orientation controls. */
@media(min-width:641px) and (max-width:1024px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-control{
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:14px!important;
    width:190px!important;
    height:52px!important;
    transform:translateX(-50%)!important;
    z-index:95!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-control > span{
    top:auto!important;
    bottom:calc(100% + 6px)!important;
    left:50%!important;
    transform:translateX(-50%)!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-track{
    width:160px!important;
    height:34px!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-track:before{
    left:13px!important;
    right:13px!important;
    top:50%!important;
    bottom:auto!important;
    width:auto!important;
    height:4px!important;
    transform:translateY(-50%)!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-track i{
    left:var(--hbj-mobile-size-thumb-left,50%)!important;
    top:50%!important;
    margin:-13px 0 0 -13px!important;
  }
}


/* v9.0.31: desktop/laptop-only price summary layout + LogoMat upload slider placement.
   Does not affect mobile/tablet, 360 view, designer preview dimensions, pricing logic or uploads. */
@media(min-width:1025px){
  .hbj-product-page .hbj-total-breakdown{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .hbj-product-page .hbj-total-breakdown > div:first-child{
    grid-column:1 / -1!important;
  }
  .hbj-product-page .hbj-file-field .hbj-logomat-range-field{
    margin-top:10px!important;
  }
  .hbj-product-page .hbj-file-field .hbj-logomat-upload-list{
    margin-top:10px!important;
  }
}

/* v9.0.32: desktop/laptop-only LogoMat text size slider placement.
   Moves Text 1/Text 2 size sliders directly after font/color controls.
   Does not affect mobile/tablet or any slider functionality. */
@media(min-width:1025px){
  .hbj-product-page .hbj-logomat-text-group > label:first-child{ order:1!important; }
  .hbj-product-page .hbj-logomat-text-group > label:nth-child(2){ order:2!important; }
  .hbj-product-page .hbj-logomat-text-group > label:nth-child(3){ order:3!important; }
  .hbj-product-page .hbj-logomat-text-group > .hbj-logomat-range-field{ order:4!important; }
  .hbj-product-page .hbj-logomat-text-group > .hbj-logomat-style-row{ order:5!important; }
  .hbj-product-page .hbj-logomat-text-group > .hbj-logomat-align-row{ order:6!important; }
}

/*
 * IMPORTANT:
 * Keep the following compact laptop responsive blocks separate and in their
 * current source order. Do not merge, reorder or move them. Their separate
 * block boundaries are required for consistent LogoMat rendering.
 */

/* v9.0.50: compact 14-inch laptop layout for portrait and square LogoMat previews.
   Only applies to desktop/laptop viewports from 1025px to 1440px and leaves the
   approved landscape, large-desktop, tablet and mobile layouts unchanged.
   Orientation remains first, the preview gets its own row, and all controls sit
   below it so the preview cannot cover upload rows, remove buttons or text tools. */
@media(min-width:1025px) and (max-width:1440px){
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-grid,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logomat-grid{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "orientation"
      "preview"
      "color"
      "file"
      "later"
      "texttools"
      "comment"!important;
    gap:12px!important;
    align-items:start!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-fields,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logomat-fields{
    display:contents!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-orientation-field,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logomat-orientation-field{
    grid-area:orientation!important;
    width:100%!important;
    max-width:420px!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-color-field,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-color-field{
    grid-area:color!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-file-field,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-file-field{
    grid-area:file!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logo-later,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logo-later{
    grid-area:later!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-text-tools,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logomat-text-tools{
    grid-area:texttools!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logo-comment,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logo-comment{
    grid-area:comment!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone),
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone){
    grid-area:preview!important;
    align-self:start!important;
    justify-self:center!important;
    min-width:0!important;
    height:auto!important;
    overflow:visible!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-bottom:34px!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone){
    width:min(100%,300px)!important;
    max-width:300px!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone){
    width:min(100%,380px)!important;
    max-width:380px!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone) > .hbj-logomat-drag-hint,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone) > .hbj-logomat-drag-hint{
    top:calc(100% + 8px)!important;
    bottom:auto!important;
    left:0!important;
    right:0!important;
    z-index:8!important;
    text-align:center!important;
  }
}


/* v9.0.52: compact 14-inch laptop field alignment for landscape LogoMat.
   Only affects landscape controls from 1025px to 1440px. The approved landscape
   preview dimensions and all 360/3D clone styling remain untouched; this only
   places the form controls in the same clean order as portrait and square. */
@media(min-width:1025px) and (max-width:1440px){
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-grid{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "orientation"
      "preview"
      "color"
      "file"
      "logosize"
      "later"
      "texttools"
      "comment"!important;
    gap:12px!important;
    align-items:start!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-fields{
    display:contents!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-orientation-field{
    grid-area:orientation!important;
    width:100%!important;
    max-width:420px!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-color-field{
    grid-area:color!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-file-field{
    grid-area:file!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-fields > .hbj-logomat-range-field{
    grid-area:logosize!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logo-later{
    grid-area:later!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-text-tools{
    grid-area:texttools!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:12px!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logo-comment{
    grid-area:comment!important;
    min-width:0!important;
  }
}

/* v9.0.54: compact laptop 360/3D size polish only.
   Between 1025px and 1440px, keep the approved portrait size from v9.0.53 and
   enlarge only the landscape mat further inside the 360 viewer. Square remains
   unchanged. Normal designer previews and form layout are untouched. */
@media(min-width:1025px) and (max-width:1440px){
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="landscape"]{
    width:min(96%,980px)!important;
  }

  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="portrait"]{
    width:min(46%,430px)!important;
  }
}

/* v9.0.56: large-desktop 360/3D polish only.
   Above 1440px, give the square mat roughly 50% more visible surface area than v9.0.55
   and lift the landscape mat slightly. Laptop, portrait, normal designer previews,
   tablet and mobile remain unchanged. */
@media(min-width:1441px){
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="square"]{
    top:58%!important;
    width:min(98%,980px)!important;
  }

  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="landscape"]{
    top:64%!important;
  }
}

/* v9.0.57: intermediate product-top sticky gallery fix only.
   From 981px to 1180px the product top is already stacked into one column,
   so the desktop sticky gallery must be disabled to prevent the product image
   from covering the product copy and configurator while scrolling.
   Desktop above 1180px and tablet/mobile at 980px or below remain unchanged. */
@media(min-width:981px) and (max-width:1180px){
  body.single-hbj_product.hbj-product-template-isolated .hbj-product-gallery{
    position:relative!important;
    top:auto!important;
  }
}

/* v9.0.58: mobile form-focus stability only.
   Prevent browser auto-zoom on the remaining LogoMat/select controls, keep the page at
   horizontal position zero after the keyboard closes, and clip accidental root-level
   horizontal overflow without disabling normal user pinch zoom. Desktop/tablet layout,
   LogoMat gestures, sticky preview and 360/3D are unchanged. */
@media(max-width:760px){
  body.single-hbj_product.hbj-product-template-isolated{
    overflow-x:clip!important;
    overscroll-behavior-x:none!important;
  }
  body.single-hbj_product.hbj-product-template-isolated .hbj-product-template-main,
  body.single-hbj_product.hbj-product-template-isolated .hbj-product-page{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  .hbj-product-page .hbj-card-controls select,
  .hbj-product-page .hbj-logomat-text-tools textarea,
  .hbj-product-page .hbj-logomat-text-tools select,
  .hbj-product-page .hbj-logo-comment textarea,
  body.single-hbj_product.hbj-product-template-isolated .hbj-android-color-popover.hbj-android-color-popover-fixed .hbj-android-color-hex{
    font-size:16px!important;
  }
}

/* v9.0.59: mobile LogoMat landscape-orientation overflow fix only.
   The former 96vw landscape preview made the LogoMat grid wider than the real
   mobile viewport. Focusing Text 1/Text 2 could therefore pan the visual viewport
   a few pixels horizontally. Keep the landscape preview wide, but size it from
   the existing LogoMat container and constrain only the related text controls.
   Portrait, square, tablet, laptop, desktop, 360/3D and normal pinch zoom are unchanged. */
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-preview.is-logomat-orientation-landscape{
    width:calc(100% + 20px)!important;
    max-width:calc(100% + 20px)!important;
    min-width:0!important;
    margin-left:-10px!important;
    margin-right:-10px!important;
    box-sizing:border-box!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-text-tools,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-text-group,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-text-group > label{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-text-tools textarea[data-logo-field="text1"],
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-text-tools textarea[data-logo-field="text2"]{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/*
 * IMPORTANT:
 * Keep the following physical-phone-landscape responsive blocks separate and
 * in their current source order. Do not merge, reorder or move them. Their
 * separate block boundaries are required for correct LogoMat rendering on
 * iPhone Safari.
 */

/* v9.0.60: physical phone landscape LogoMat layout only.
   Applies only to short, coarse-pointer touch viewports while the device itself is
   held in landscape. Use a compact laptop-like editor layout and disable the sticky
   preview in this state, because the short viewport does not leave enough useful
   editing space. Mobile portrait, tablets with normal height, laptops and desktops
   remain unchanged. */
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px) and (hover:none) and (pointer:coarse){
  body.single-hbj_product.hbj-product-template-isolated{
    overflow-x:clip!important;
    overscroll-behavior-x:none!important;
  }

  .hbj-product-page .hbj-logomat-options,
  .hbj-product-page .hbj-logomat-grid{
    overflow:visible!important;
  }

  .hbj-product-page .hbj-logomat-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:
      "orientation orientation"
      "preview preview"
      "color file"
      "logosize later"
      "texttools texttools"
      "comment comment"!important;
    gap:10px 14px!important;
    align-items:start!important;
  }

  .hbj-product-page .hbj-logomat-fields{
    display:contents!important;
  }

  .hbj-product-page .hbj-logomat-orientation-field{
    grid-area:orientation!important;
    width:100%!important;
    max-width:420px!important;
    min-width:0!important;
    margin-bottom:0!important;
  }

  .hbj-product-page .hbj-color-field{
    grid-area:color!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-file-field{
    grid-area:file!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-fields > .hbj-logomat-range-field{
    grid-area:logosize!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logo-later{
    grid-area:later!important;
    min-width:0!important;
    align-self:start!important;
  }

  .hbj-product-page .hbj-logomat-text-tools{
    grid-area:texttools!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logo-comment{
    grid-area:comment!important;
    min-width:0!important;
  }

  .hbj-product-page .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone){
    grid-area:preview!important;
    position:relative!important;
    top:auto!important;
    z-index:2!important;
    justify-self:center!important;
    align-self:start!important;
    min-width:0!important;
    height:auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-bottom:28px!important;
    overflow:visible!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
    transition:none!important;
    isolation:auto!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-portrait:not(.hbj-logomat-3d-preview-clone){
    width:min(26vw,180px)!important;
    max-width:180px!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square:not(.hbj-logomat-3d-preview-clone){
    width:min(36vw,250px)!important;
    max-width:250px!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-preview.is-logomat-orientation-landscape:not(.hbj-logomat-3d-preview-clone){
    width:min(72vw,560px)!important;
    max-width:560px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .hbj-product-page .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone):before,
  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-active .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone):before,
  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-ending .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone):before{
    content:none!important;
    display:none!important;
    opacity:0!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-ending .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone){
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
  }

  .hbj-logomat-sticky-message{
    display:none!important;
    opacity:0!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-control{
    bottom:10px!important;
  }
}


/* v9.0.61: physical-phone-landscape + portrait-mat polish only.
   In a physically landscape phone viewport, the portrait mat previously missed the
   mobile 3D perspective because the viewport is wider than 640px. Reuse the approved
   mobile perspective only while portrait mat orientation is selected. Also move the
   portrait drag hint below the normal designer preview so it cannot overlap the mat.
   Mobile portrait, square/landscape mat orientation, tablet, laptop and desktop stay unchanged. */
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px) and (hover:none) and (pointer:coarse){
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-preview.is-logomat-orientation-portrait:not(.hbj-logomat-3d-preview-clone){
    margin-bottom:52px!important;
    overflow:visible!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-preview.is-logomat-orientation-portrait:not(.hbj-logomat-3d-preview-clone) > .hbj-logomat-drag-hint{
    top:calc(100% + 10px)!important;
    bottom:auto!important;
    left:50%!important;
    right:auto!important;
    width:min(420px,72vw)!important;
    max-width:none!important;
    transform:translateX(-50%)!important;
    line-height:1.25!important;
    white-space:normal!important;
    pointer-events:none!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .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-options.is-logomat-orientation-portrait .hbj-logomat-3d-mat-plane[data-orientation="portrait"]{
    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;
  }

  @supports (-webkit-touch-callout:none){
    .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-3d-studio{
      perspective:none!important;
      -webkit-perspective:none!important;
    }

    .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait .hbj-logomat-3d-studio .hbj-logomat-3d-mat-plane[data-orientation="portrait"]{
      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;
    }
  }
}

/* v9.0.62: physical-phone-landscape 360 geometry parity for square and landscape mats only.
   Phones held physically in landscape are commonly wider than the normal mobile 640px
   breakpoint, so square and landscape mats missed the already approved mobile 360 size,
   position and floor perspective. Reuse those exact mobile values only in this short,
   coarse-pointer landscape state. Portrait and every other viewport remain unchanged. */
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px) and (hover:none) and (pointer:coarse){
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logomat-3d-studio,
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .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-options.is-logomat-orientation-landscape .hbj-logomat-3d-mat-plane[data-orientation="landscape"]{
    left:50%!important;
    top:62%!important;
    width:82%!important;
    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-options.is-logomat-orientation-square .hbj-logomat-3d-mat-plane[data-orientation="square"]{
    left:50%!important;
    top:62%!important;
    width:70%!important;
    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;
  }

  @supports (-webkit-touch-callout:none){
    .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .hbj-logomat-3d-studio,
    .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-3d-studio{
      perspective:none!important;
      -webkit-perspective:none!important;
    }

    .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-3d-studio .hbj-logomat-3d-mat-plane[data-orientation="landscape"],
    .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square .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;
    }
  }
}

/* v9.0.109: preserve the approved visible landscape 360 size after replacing
   the rotated portrait source with a native 8:5 source. The old portrait image
   occupied about 67.7% of the landscape stage width after rotation; these
   orientation-only widths keep the same visible mat footprint while the source
   geometry becomes correct. Perspective, position and interaction are unchanged. */
@media(min-width:1441px){
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="landscape"]{
    width:min(66%,680px)!important;
  }
}
@media(min-width:1025px) and (max-width:1440px){
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="landscape"]{
    width:min(76%,776px)!important;
  }
}
@media(min-width:641px) and (max-width:1024px){
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="landscape"]{
    width:min(66%,680px)!important;
  }
}
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="landscape"]{
    width:65%!important;
  }
}
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px) and (hover:none) and (pointer:coarse){
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-3d-mat-plane[data-orientation="landscape"]{
    width:65%!important;
  }
}

/* v9.0.110: restore the approved large-desktop square 360 footprint only.
   The native 1:1 source correctly fills its face, so the former 98% plane made
   the square mat visually more than twice as large. Position, perspective,
   rotation and every other orientation remain unchanged. */
@media(min-width:1441px){
  .hbj-product-page .hbj-logomat-3d-mat-plane[data-orientation="square"]{
    width:min(52%,520px)!important;
  }
}

/* v9.0.286: complete the existing compact-laptop layout with the tablet's
   sticky glass and selected-item slider. Mobile, tablet and large desktop
   rules above remain intact. No preview/stage dimensions are changed. */
@media(min-width:1025px) and (max-width:1440px){
  .hbj-product-page .hbj-configurator.hbj-service-flow:has(.hbj-logomat-options:not([hidden])),
  .hbj-product-page .hbj-mat-cards:has(.hbj-logomat-options:not([hidden])),
  .hbj-product-page .hbj-mat-card.has-logomat-options,
  .hbj-product-page .hbj-logomat-options,
  .hbj-product-page .hbj-logomat-grid{
    overflow:visible!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:calc(env(safe-area-inset-top, 0px) + 10px)!important;
    z-index:70!important;
    overflow:visible!important;
    align-self:start!important;
    transition:opacity .22s ease, transform .22s ease!important;
    isolation:isolate!important;
  }
  body.admin-bar .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview{
    top:calc(env(safe-area-inset-top, 0px) + 56px)!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview:before{
    content:""!important;
    position:absolute!important;
    top:-28px!important;
    bottom:-10px!important;
    left:var(--hbj-sticky-glass-left, -20px)!important;
    width:var(--hbj-sticky-glass-width, calc(100% + 40px))!important;
    max-width:100vw!important;
    transform:none!important;
    border-radius:0 0 22px 22px!important;
    background:rgba(255,255,255,.24)!important;
    border:1px solid rgba(255,255,255,.42)!important;
    box-shadow:0 18px 46px rgba(23,32,51,.14), inset 0 1px 0 rgba(255,255,255,.56)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.24)!important;
    backdrop-filter:blur(18px) saturate(1.24)!important;
    opacity:0!important;
    pointer-events:none!important;
    z-index:-1!important;
    transition:opacity .18s ease!important;
  }
  body.admin-bar .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview:before{
    top:-74px!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-active > .hbj-logomat-grid > .hbj-logomat-preview:before{
    opacity:1!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-ending > .hbj-logomat-grid > .hbj-logomat-preview{
    opacity:0!important;
    transform:translateY(-18px) scale(.96) translateZ(0)!important;
    pointer-events:none!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-ending > .hbj-logomat-grid > .hbj-logomat-preview:before{
    opacity:0!important;
  }
  .hbj-product-page .hbj-logomat-options .hbj-logomat-range-field{
    display:none!important;
  }
  .hbj-product-page .hbj-logomat-mobile-size-control{
    position:absolute!important;
    right:-43px!important;
    top:30px!important;
    z-index:90!important;
    width:52px!important;
    height:180px!important;
    display:none!important;
    align-items:center!important;
    justify-content:center!important;
    pointer-events:none!important;
    touch-action:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;
  }
  .hbj-product-page .hbj-logomat-mobile-size-control.is-visible{
    display:flex!important;
    pointer-events:auto!important;
  }
  .hbj-product-page .hbj-logomat-mobile-size-control.is-visible *{touch-action:none!important;}
  .hbj-product-page .hbj-logomat-mobile-size-control > span{
    position:absolute!important;
    top:-22px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    padding:4px 7px!important;
    border-radius:999px!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    color:rgba(37,55,133,.90)!important;
    background:rgba(255,255,255,.36)!important;
    border:1px solid rgba(255,255,255,.52)!important;
    box-shadow:0 8px 18px rgba(23,32,51,.12), inset 0 1px 0 rgba(255,255,255,.60)!important;
    -webkit-backdrop-filter:blur(12px) saturate(1.20)!important;
    backdrop-filter:blur(12px) saturate(1.20)!important;
    pointer-events:none!important;
    white-space:nowrap!important;
  }
  .hbj-product-page .hbj-logomat-mobile-size-track{
    position:relative!important;
    width:34px!important;
    height:152px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.26)!important;
    border:1px solid rgba(255,255,255,.50)!important;
    box-shadow:0 10px 25px rgba(23,32,51,.14), inset 0 1px 0 rgba(255,255,255,.60)!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.22)!important;
    backdrop-filter:blur(14px) saturate(1.22)!important;
    touch-action:none!important;
    pointer-events:auto!important;
  }
  .hbj-product-page .hbj-logomat-mobile-size-track:before{
    content:""!important;
    position:absolute!important;
    top:13px!important;
    bottom:13px!important;
    left:50%!important;
    width:4px!important;
    transform:translateX(-50%)!important;
    border-radius:999px!important;
    background:rgba(37,55,133,.25)!important;
  }
  .hbj-product-page .hbj-logomat-mobile-size-track i{
    position:absolute!important;
    left:50%!important;
    top:var(--hbj-mobile-size-thumb-top,50%)!important;
    width:26px!important;
    height:26px!important;
    margin:-13px 0 0 -13px!important;
    display:block!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.78)!important;
    border:1px solid rgba(37,55,133,.20)!important;
    box-shadow:0 8px 18px rgba(23,32,51,.20), inset 0 1px 0 rgba(255,255,255,.80)!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape > .hbj-logomat-grid > .hbj-logomat-preview{
    margin-bottom:110px!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape > .hbj-logomat-grid > .hbj-logomat-preview:before{
    bottom:-104px!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-control{
    left:50%!important;
    right:auto!important;
    top:calc(100% + 38px)!important;
    bottom:auto!important;
    width:190px!important;
    height:52px!important;
    transform:translateX(-50%)!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-control > span{
    top:auto!important;
    bottom:calc(100% + 6px)!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-track{
    width:160px!important;
    height:34px!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-track:before{
    left:13px!important;
    right:13px!important;
    top:50%!important;
    bottom:auto!important;
    width:auto!important;
    height:4px!important;
    transform:translateY(-50%)!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-track i{
    left:var(--hbj-mobile-size-thumb-left,50%)!important;
    top:50%!important;
  }
  .hbj-logomat-sticky-message{
    position:fixed!important;
    top:50%!important;
    left:24px!important;
    right:24px!important;
    z-index:82!important;
    display:block!important;
    padding:13px 18px!important;
    border-radius:18px!important;
    text-align:center!important;
    font-size:13px!important;
    line-height:1.22!important;
    font-weight:900!important;
    color:rgba(37,55,133,.92)!important;
    background:rgba(255,255,255,.36)!important;
    border:1px solid rgba(255,255,255,.54)!important;
    box-shadow:0 14px 38px rgba(23,32,51,.16), inset 0 1px 0 rgba(255,255,255,.66)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.24)!important;
    backdrop-filter:blur(18px) saturate(1.24)!important;
    pointer-events:none!important;
    opacity:0!important;
    transform:translateY(calc(-50% - 8px))!important;
    transition:opacity .18s ease, transform .18s ease!important;
  }
  .hbj-logomat-sticky-message.is-visible{
    opacity:1!important;
    transform:translateY(-50%)!important;
  }
}

/* v9.0.287: compact preview chrome only. Logical artwork dimensions stay fixed;
   landscape presentation zoom reserves its extra height below the original frame.
   Mobile, the existing <=1024 tablet UI, and large desktop are unchanged. */
@media(min-width:1025px) and (max-width:1440px){
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone){
    margin-bottom:calc(var(--hbj-compact-footer,56px) + 16px)!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone):before{
    bottom:calc(0px - var(--hbj-compact-footer,56px))!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview > .hbj-logomat-drag-hint{
    position:absolute!important;
    top:calc(100% + 10px)!important;
    bottom:auto!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    margin:0!important;
    padding:0 8px!important;
    transform:none!important;
    line-height:1.4!important;
    white-space:normal!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape > .hbj-logomat-grid > .hbj-logomat-preview > .hbj-logomat-drag-hint{
    top:var(--hbj-compact-hint-top,calc(100% + 12px))!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview .hbj-logomat-mobile-size-control{
    top:70px!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview .hbj-logomat-mobile-size-control > span{
    top:-40px!important;
    line-height:1.4!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview .hbj-logomat-mobile-size-control > span:before{
    content:attr(data-size-label)!important;
    display:block!important;
    margin-bottom:2px!important;
    font-weight:600!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape > .hbj-logomat-grid > .hbj-logomat-preview .hbj-logomat-mobile-size-control{
    top:var(--hbj-compact-tools-top,calc(100% + 74px))!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape > .hbj-logomat-grid > .hbj-logomat-preview .hbj-logomat-mobile-size-control > span{
    top:auto!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape > .hbj-logomat-grid > .hbj-logomat-preview .hbj-logomat-mobile-size-control > span:before{
    display:inline!important;
    margin:0 6px 0 0!important;
  }
}

/* v9.0.293: share the existing portrait fit chrome with compact laptops.
   Only fitted portrait previews participate; phone/landscape/desktop stay intact. */
@media(min-width:641px) and (max-width:1440px){
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview[data-hbj-tablet-portrait-fit]:not(.hbj-logomat-3d-preview-clone){
    margin-bottom:24px!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview[data-hbj-tablet-portrait-fit]:not(.hbj-logomat-3d-preview-clone) > .hbj-logomat-drag-hint{
    top:var(--hbj-tablet-hint-top)!important;
    bottom:auto!important;
    left:50%!important;
    right:auto!important;
    width:min(100%,420px)!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    padding:0 8px!important;
    line-height:1.4!important;
    white-space:normal!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview[data-hbj-tablet-portrait-fit] .hbj-logomat-mobile-size-control{
    left:calc(50% + var(--hbj-tablet-tools-offset))!important;
    right:auto!important;
    top:70px!important;
  }
  .hbj-product-page .hbj-logomat-grid > .hbj-logomat-preview[data-hbj-tablet-portrait-fit] .hbj-logomat-mobile-size-control > span{
    top:-40px!important;
    line-height:1.4!important;
  }
  .hbj-product-page .hbj-logomat-grid > .hbj-logomat-preview[data-hbj-tablet-portrait-fit] .hbj-logomat-mobile-size-control > span:before{
    content:attr(data-size-label)!important;
    display:block!important;
    margin-bottom:2px!important;
    font-weight:600!important;
  }
}

/* v9.0.288: let the gallery yield only the space that overflows the compact
   two-column layout. Preserve the editor's existing 620px minimum and its
   wider sizes, as well as the 56px gap and all designer/export geometry. */
@media(min-width:1181px) and (max-width:1440px){
  body.single-hbj_product.hbj-product-template-isolated .hbj-product-top{
    grid-template-columns:minmax(0,min(44%,calc(100% - 676px))) minmax(620px,1fr)!important;
  }
}

/* Restore the original percentage-only slider label. No mobile rules change. */
@media(min-width:641px) and (max-width:1440px){
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview .hbj-logomat-mobile-size-control > span:before,
  .hbj-product-page .hbj-logomat-grid > .hbj-logomat-preview[data-hbj-tablet-portrait-fit] .hbj-logomat-mobile-size-control > span:before{
    content:none!important;
    display:none!important;
  }
  .hbj-product-page .hbj-logomat-options:not(.is-logomat-orientation-landscape) > .hbj-logomat-grid > .hbj-logomat-preview .hbj-logomat-mobile-size-control > span{
    top:-22px!important;
  }
}

/* v9.0.289: tablet editor flow and sticky chrome only. Keep the original
   preview widths (including the former right-hand grid track) so artwork
   geometry stays unchanged. Physical-phone landscape retains its old layout. */
@media(min-width:641px) and (max-width:1024px) and (min-height:601px),
      (min-width:641px) and (max-width:1024px) and (hover:hover){
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"orientation" "preview" "color" "file" "later" "texttools" "comment"!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-fields{display:contents!important;}
  .hbj-product-page .hbj-logomat-options .hbj-logomat-orientation-field{grid-area:orientation!important;}
  .hbj-product-page .hbj-logomat-options .hbj-color-field{grid-area:color!important;}
  .hbj-product-page .hbj-logomat-options .hbj-file-field{grid-area:file!important;}
  .hbj-product-page .hbj-logomat-options .hbj-logo-later{grid-area:later!important;}
  .hbj-product-page .hbj-logomat-options .hbj-logomat-text-tools{grid-area:texttools!important;}
  .hbj-product-page .hbj-logomat-options .hbj-logo-comment{grid-area:comment!important;}
  .hbj-product-page .hbj-logomat-options .hbj-logomat-align-row > label{position:relative!important;}
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone){
    grid-area:preview!important;
    justify-self:center!important;
    --hbj-tablet-footer:10px;
    margin-left:0!important;
    margin-right:0!important;
  }
  .hbj-product-page .hbj-logomat-options > .hbj-logomat-grid > .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone):before{
    left:50%!important;
    width:max(100%,var(--hbj-sticky-glass-width,calc(100% + 40px)))!important;
    transform:translateX(-50%)!important;
    height:auto!important;
    bottom:calc(0px - var(--hbj-tablet-footer))!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape > .hbj-logomat-grid > .hbj-logomat-preview{
    --hbj-tablet-footer:148px;
    margin-bottom:164px!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape > .hbj-logomat-grid > .hbj-logomat-preview > .hbj-logomat-drag-hint{
    top:calc(100% + 8px)!important;
    bottom:auto!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    margin:0!important;
    padding:0 8px!important;
    transform:none!important;
    line-height:1.4!important;
    white-space:normal!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape > .hbj-logomat-grid > .hbj-logomat-preview .hbj-logomat-mobile-size-control{
    top:calc(100% + 82px)!important;
    bottom:auto!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-square > .hbj-logomat-grid > .hbj-logomat-preview{
    --hbj-tablet-footer:56px;
    margin-bottom:72px!important;
  }
}
@media(min-width:861px) and (max-width:1024px) and (min-height:601px),
      (min-width:861px) and (max-width:1024px) and (hover:hover){
  .hbj-product-page .hbj-logomat-options:not(.is-logomat-orientation-landscape) > .hbj-logomat-grid > .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone){
    width:max(320px,min(calc((100% - 16px) * .55),calc(100% - 276px)))!important;
  }
}

/* Do not stretch the desktop portrait frame to the height of all form fields.
   The stage retains its width/aspect ratio; only the hint's frame is shortened. */
@media(min-width:1441px){
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait > .hbj-logomat-grid > .hbj-logomat-preview:not(.hbj-logomat-3d-preview-clone){
    align-self:start!important;
    overflow:visible!important;
    margin-bottom:20px!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-portrait > .hbj-logomat-grid > .hbj-logomat-preview > .hbj-logomat-drag-hint{
    top:calc(100% - 16px)!important;
    bottom:auto!important;
    margin:0!important;
    line-height:1.4!important;
  }
}