/* v7.26: LogoMat upload + color preview module. Only visible when a card product is LogoMat. */
.hbj-product-page .hbj-logomat-options[hidden]{
  display:none!important;
}
.hbj-product-page .hbj-logomat-options{
  margin-top:16px!important;
  padding:16px!important;
  border:1px solid rgba(37,55,133,.16)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.58)!important;
  -webkit-backdrop-filter:blur(16px) saturate(150%)!important;
  backdrop-filter:blur(16px) saturate(150%)!important;
  box-shadow:0 16px 44px rgba(23,32,51,.10), inset 0 1px 0 rgba(255,255,255,.78)!important;
}
.hbj-product-page .hbj-logomat-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:6px!important;
  margin-bottom:14px!important;
}
.hbj-product-page .hbj-logomat-kicker{
  display:block!important;
  color:#253785!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  margin-bottom:3px!important;
}
.hbj-product-page .hbj-logomat-head h5{
  margin:0!important;
  color:#172033!important;
  font-size:18px!important;
  line-height:1.2!important;
  font-weight:900!important;
}
.hbj-product-page .hbj-logomat-head p{
  margin:0!important;
  color:#5b6578!important;
  font-size:13px!important;
  line-height:1.45!important;
  max-width:760px!important;
}
.hbj-product-page .hbj-logomat-grid{
  display:grid!important;
  grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr)!important;
  gap:16px!important;
  align-items:stretch!important;
}
.hbj-product-page .hbj-logomat-fields{
  display:grid!important;
  gap:10px!important;
}
.hbj-product-page .hbj-logomat-fields label{
  display:block!important;
  margin:0!important;
  color:#253785!important;
  font-size:12px!important;
  font-weight:900!important;
}
.hbj-product-page .hbj-logomat-fields label > span{
  display:block!important;
  margin:0 0 7px!important;
  color:#253785!important;
  font-size:12px!important;
  font-weight:900!important;
}
.hbj-product-page .hbj-color-control{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:46px!important;
  padding:8px 10px!important;
  border-radius:8px!important;
  border:1px solid rgba(37,55,133,.20)!important;
  background:rgba(255,255,255,.48)!important;
  box-shadow:0 10px 26px rgba(37,55,133,.06), inset 0 1px 0 rgba(255,255,255,.80)!important;
}
.hbj-product-page .hbj-color-control input[type="color"]{
  width:44px!important;
  height:32px!important;
  border:0!important;
  padding:0!important;
  background:transparent!important;
  cursor:pointer!important;
}
.hbj-product-page .hbj-color-control em{
  color:#253785!important;
  font-style:normal!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
}
.hbj-product-page .hbj-file-field input[type="file"]{
  width:100%!important;
  min-height:46px!important;
  padding:10px!important;
  border-radius:8px!important;
  border:1px solid rgba(37,55,133,.20)!important;
  background:rgba(255,255,255,.48)!important;
  color:#172033!important;
  box-shadow:0 10px 26px rgba(37,55,133,.06), inset 0 1px 0 rgba(255,255,255,.80)!important;
}
.hbj-product-page .hbj-file-field small{
  display:block!important;
  margin-top:6px!important;
  
  
  font-weight:700!important;
}
.hbj-product-page .hbj-logo-later{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:42px!important;
  padding:10px!important;
  border-radius:8px!important;
  
  
}
.hbj-product-page .hbj-logo-later input{
  width:17px!important;
  height:17px!important;
  accent-color:#253785!important;
}
.hbj-product-page .hbj-logo-later span{
  margin:0!important;
}
.hbj-product-page .hbj-logo-comment textarea{
  width:100%!important;
  resize:vertical!important;
  min-height:78px!important;
  padding:11px 12px!important;
  border-radius:8px!important;
  border:1px solid rgba(37,55,133,.20)!important;
  background:rgba(255,255,255,.48)!important;
  color:#172033!important;
  font:inherit!important;
  box-shadow:0 10px 26px rgba(37,55,133,.06), inset 0 1px 0 rgba(255,255,255,.80)!important;
}
.hbj-product-page .hbj-logomat-preview{
  position:relative!important;
  
  border-radius:17px!important;
  overflow:hidden!important;
  
  border:1px solid rgba(255,255,255,.54)!important;
  
}
.hbj-product-page .hbj-logomat-stage{
  position:absolute!important;
  
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  
  
}
.hbj-product-page .hbj-logomat-color-layer{
  
  inset:0!important;
  
  
  
  
  
  
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  -webkit-mask-size:contain!important;
  mask-size:contain!important;
  
}

.hbj-product-page .hbj-logomat-logo-slot{
  
  
  
  
  
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:14px!important;
  text-align:center!important;
  
  color:#fff!important;
  font-weight:900!important;
  
  
  text-shadow:0 2px 16px rgba(0,0,0,.45)!important;
}
.hbj-product-page .hbj-logomat-logo-slot img{
  display:block!important;
  max-width:100%!important;
  
  object-fit:contain!important;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.28))!important;
}
.hbj-product-page .hbj-logomat-logo-slot small{
  
  margin-top:8px!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:rgba(255,255,255,.86)!important;
  font-size:11px!important;
  font-weight:800!important;
}
.hbj-product-page .hbj-logomat-options.is-logo-later .hbj-logomat-logo-slot{
  background:rgba(255,255,255,.14)!important;
  border-style:solid!important;
}
@media(max-width:860px){
  .hbj-product-page .hbj-logomat-grid{
    grid-template-columns:1fr!important;
  }
  .hbj-product-page .hbj-logomat-preview{
    min-height:230px!important;
  }
}
@media(max-width:560px){
  .hbj-product-page .hbj-logomat-options{
    padding:12px!important;
  }
  .hbj-product-page .hbj-logomat-stage{
    inset:10px!important;
  }
  .hbj-product-page .hbj-logomat-logo-slot{
    width:70%!important;
    min-height:92px!important;
  }
}

/* v7.31: LogoMat portrait image cache fix + stable portrait ratio. */

.hbj-product-page .hbj-logomat-text-tools label:last-child{
  grid-column:1 / -1!important;
}
.hbj-product-page .hbj-logomat-text-tools input,
.hbj-product-page .hbj-logomat-text-tools select{
  width:100%!important;
  min-height:46px!important;
  padding:10px 12px!important;
  border-radius:8px!important;
  border:1px solid rgba(37,55,133,.20)!important;
  background:rgba(255,255,255,.48)!important;
  color:#172033!important;
  font:inherit!important;
  box-shadow:0 10px 26px rgba(37,55,133,.06), inset 0 1px 0 rgba(255,255,255,.80)!important;
}
.hbj-product-page .hbj-logomat-preview{
  
  
  
  margin:0 auto!important;
  
}
.hbj-product-page .hbj-logomat-stage{
  
  border-radius:12px!important;
  touch-action:none!important;
  background:transparent!important;
}
.hbj-product-page .hbj-logomat-mat{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  width:100%!important;
  height:100%!important;
  
  opacity:.98!important;
  filter:grayscale(1) contrast(1.08) saturate(.18)!important;
  pointer-events:none!important;
}
.hbj-product-page .hbj-logomat-color-layer{
  position:absolute!important;
  z-index:3!important;
  
  
  
  
  background:var(--logomat-color,#253785)!important;
  
  
  -webkit-mask-image:none!important;
  mask-image:none!important;
  pointer-events:none!important;
  border-radius:2px!important;
}
.hbj-product-page .hbj-logomat-draggable{
  position:absolute!important;
  
  cursor:grab!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:none!important;
}
.hbj-product-page .hbj-logomat-draggable.is-dragging{
  cursor:grabbing!important;
  z-index:12!important;
}
.hbj-product-page .hbj-logomat-logo-slot{
  z-index:6!important;
  width:48%!important;
  max-width:260px!important;
  min-height:82px!important;
  position:absolute!important;
}
.hbj-product-page .hbj-logomat-logo-slot img{
  max-height:115px!important;
  transform:none!important;
}
.hbj-product-page .hbj-logomat-preview-text{
  z-index:7!important;
  min-width:90px!important;
  
  padding:7px 15px!important;
  border-radius:999px!important;
  
  font-size:clamp(14px,2.1vw,28px)!important;
  line-height:1.08!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  text-align:center!important;
  
  text-shadow:0 3px 16px rgba(0,0,0,.48)!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.hbj-product-page .hbj-logomat-preview-text[hidden]{
  display:none!important;
}
.hbj-product-page .hbj-logomat-drag-hint{
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  bottom:10px!important;
  z-index:8!important;
  display:block!important;
  text-align:center!important;
  color:rgba(37,55,133,.78)!important;
  font-size:12px!important;
  font-weight:800!important;
  pointer-events:none!important;
}
@media(max-width:860px){
  .hbj-product-page .hbj-logomat-preview{
    min-height:620px!important;
    max-width:460px!important;
  }
}
@media(max-width:560px){
  .hbj-product-page .hbj-logomat-text-tools{
    grid-template-columns:1fr!important;
  }
  .hbj-product-page .hbj-logomat-preview{
    min-height:560px!important;
    max-width:100%!important;
  }
  .hbj-product-page .hbj-logomat-logo-slot{
    width:56%!important;
    min-height:70px!important;
  }
  .hbj-product-page .hbj-logomat-preview-text{
    font-size:16px!important;
    max-width:82%!important;
  }
}


/* v7.31: force the LogoMat preview to use portrait proportions. The image URL is also changed in PHP to avoid cached landscape mat assets. */
.hbj-product-page .hbj-logomat-preview{
  
  min-height:0!important;
  height:auto!important;
  max-width:520px!important;
  width:100%!important;
}

.hbj-product-page .hbj-logomat-mat{
  object-fit:contain!important;
  object-position:center!important;
}

@media(max-width:860px){
  .hbj-product-page .hbj-logomat-preview{
    max-width:460px!important;
    min-height:0!important;
  }
}
@media(max-width:560px){
  .hbj-product-page .hbj-logomat-preview{
    max-width:100%!important;
    min-height:0!important;
  }
}


/* v7.32: LogoMat preview fine tuning only - more fonts, resize handles, no filename, slightly stronger mat overlay. */

.hbj-product-page .hbj-logomat-draggable{
  transform:translate(-50%,-50%) scale(var(--logomat-scale,1)) rotate(var(--logomat-rotation,0deg))!important;
  transform-origin:center center!important;
}
.hbj-product-page .hbj-logomat-logo-slot small{
  display:none!important;
}
.hbj-product-page .hbj-logomat-resize-handle{
  position:absolute!important;
  right:-9px!important;
  bottom:-9px!important;
  width:22px!important;
  height:22px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.74)!important;
  background:rgba(255,255,255,.28)!important;
  -webkit-backdrop-filter:blur(12px) saturate(150%)!important;
  backdrop-filter:blur(12px) saturate(150%)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.62)!important;
  cursor:nwse-resize!important;
  z-index:20!important;
  padding:0!important;
}
.hbj-product-page .hbj-logomat-resize-handle:before,
.hbj-product-page .hbj-logomat-resize-handle:after{
  content:""!important;
  position:absolute!important;
  right:5px!important;
  bottom:5px!important;
  width:7px!important;
  height:1px!important;
  background:rgba(37,55,133,.86)!important;
  transform:rotate(-45deg)!important;
  transform-origin:center!important;
}
.hbj-product-page .hbj-logomat-resize-handle:after{
  right:4px!important;
  bottom:9px!important;
  width:11px!important;
}
.hbj-product-page .hbj-logomat-draggable.is-resizing{
  z-index:14!important;
}


/* v7.33: LogoMat preview - independent fonts, size sliders, stronger locked overlay. */
.hbj-product-page .hbj-logomat-preview{
  aspect-ratio:5 / 8!important;
}
.hbj-product-page .hbj-logomat-stage{
  inset:14px!important;
  aspect-ratio:5 / 8!important;
}

.hbj-product-page .hbj-logomat-text-tools{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
}
.hbj-product-page .hbj-logomat-text-group{
  display:grid!important;
  gap:10px!important;
  padding:12px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.26)!important;
  border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58)!important;
}
.hbj-product-page .hbj-logomat-text-group label,
.hbj-product-page .hbj-logomat-range-field{
  margin:0!important;
}
.hbj-product-page .hbj-logomat-range-field{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:6px 10px!important;
  align-items:center!important;
}
.hbj-product-page .hbj-logomat-range-field > span{
  grid-column:1 / 2!important;
}
.hbj-product-page .hbj-logomat-range-field > em{
  grid-column:2 / 3!important;
  justify-self:end!important;
  color:#253785!important;
  font-size:12px!important;
  font-style:normal!important;
  font-weight:900!important;
}
.hbj-product-page .hbj-logomat-range-field input[type="range"]{
  grid-column:1 / -1!important;
  width:100%!important;
  
}
.hbj-product-page .hbj-logomat-resize-handle{
  display:none!important;
}
@media(max-width:560px){
  .hbj-product-page .hbj-logomat-text-tools{
    grid-template-columns:1fr!important;
  }
}

/* v7.34: LogoMat preview interaction fixes only. */
.hbj-product-page .hbj-color-field,
.hbj-product-page .hbj-file-field{
  display:grid!important;
  gap:7px!important;
  margin:0!important;
}
.hbj-product-page .hbj-color-field > span,
.hbj-product-page .hbj-file-field > span{
  color:#253785!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}
.hbj-product-page .hbj-file-field small{
  color:#5d6678!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.hbj-product-page .hbj-logomat-style-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.hbj-product-page .hbj-logomat-style-row label{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:36px!important;
  
  
  
  
  color:#253785!important;
  font-size:12px!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.hbj-product-page .hbj-logomat-style-row input{
  width:16px!important;
  height:16px!important;
  accent-color:#253785!important;
}
.hbj-product-page .hbj-logomat-color-layer{
  opacity:.72!important;
  mix-blend-mode:normal!important;
}
.hbj-product-page .hbj-logomat-logo-slot{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:999px!important;
  box-shadow:0 12px 28px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.22)!important;
}
.hbj-product-page .hbj-logomat-logo-slot.has-logo-image{
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:8px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.16)!important;
}
.hbj-product-page .hbj-logomat-logo-slot.has-logo-image img{
  max-width:240px!important;
  max-height:150px!important;
}

/* v7.35: LogoMat preview micro-fixes only - overlay fit, glass range thumbs, no bold/italic rings. */
.hbj-product-page .hbj-logomat-color-layer{
  top:1.7%!important;
  right:7%!important;
  bottom:1.35%!important;
  left:7%!important;
  
}
.hbj-product-page .hbj-logomat-range-field input[type="range"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  height:8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.36)!important;
  border:1px solid rgba(255,255,255,.45)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68), 0 8px 18px rgba(37,55,133,.07)!important;
  outline:none!important;
  accent-color:auto!important;
}
.hbj-product-page .hbj-logomat-range-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:22px!important;
  height:22px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.76)!important;
  background:rgba(255,255,255,.34)!important;
  -webkit-backdrop-filter:blur(12px) saturate(150%)!important;
  backdrop-filter:blur(12px) saturate(150%)!important;
  box-shadow:0 8px 18px rgba(37,55,133,.18), inset 0 1px 0 rgba(255,255,255,.74)!important;
  cursor:pointer!important;
}
.hbj-product-page .hbj-logomat-range-field input[type="range"]::-moz-range-thumb{
  width:22px!important;
  height:22px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.76)!important;
  background:rgba(255,255,255,.34)!important;
  backdrop-filter:blur(12px) saturate(150%)!important;
  box-shadow:0 8px 18px rgba(37,55,133,.18), inset 0 1px 0 rgba(255,255,255,.74)!important;
  cursor:pointer!important;
}
.hbj-product-page .hbj-logomat-range-field input[type="range"]::-moz-range-track{
  height:8px!important;
  border-radius:999px!important;
  background:transparent!important;
  border:0!important;
}


/* v7.36: LogoMat preview micro-fixes only - lower-left overlay, multiline text fields, comment helper. */
.hbj-product-page .hbj-logomat-color-layer{
  clip-path:polygon(0 0,100% 0,100% 100%,6.2% 100%,0 94.6%)!important;
}
.hbj-product-page .hbj-logomat-text-tools textarea{
  width:100%!important;
  min-height:58px!important;
  padding:10px 12px!important;
  border-radius:8px!important;
  border:1px solid rgba(37,55,133,.20)!important;
  background:rgba(255,255,255,.48)!important;
  color:#172033!important;
  font:inherit!important;
  
  box-shadow:0 10px 26px rgba(37,55,133,.06), inset 0 1px 0 rgba(255,255,255,.80)!important;
}
.hbj-product-page .hbj-logomat-preview-text{
  white-space:pre-wrap!important;
}
.hbj-product-page .hbj-logo-comment-note{
  display:block!important;
  margin-top:7px!important;
  color:#5d6678!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:700!important;
}


/* v7.37: LogoMat disclaimer brand + glass checkboxes only. */
.hbj-product-page .hbj-logo-later{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.hbj-product-page .hbj-logo-later input[type="checkbox"],
.hbj-product-page .hbj-logomat-style-row input[type="checkbox"]{
  
  
  position:relative!important;
  
  
  
  
  
  
  
  
  
  
  cursor:pointer!important;
  
}

.hbj-product-page .hbj-logo-later input[type="checkbox"]:checked:after,
.hbj-product-page .hbj-logomat-style-row input[type="checkbox"]:checked:after{
  
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-56%)!important;
  color:#253785!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:900!important;
}
.hbj-product-page .hbj-logo-later input[type="checkbox"]:focus,
.hbj-product-page .hbj-logomat-style-row input[type="checkbox"]:focus{
  outline:none!important;
}

/* v7.38: LogoMat final mobile order + clearer native checkboxes only. */
.hbj-product-page .hbj-logo-later input[type="checkbox"],
.hbj-product-page .hbj-logomat-style-row input[type="checkbox"]{
  -webkit-appearance:auto!important;
  appearance:auto!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  border-radius:0!important;
  border:0!important;
  background:initial!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
  outline:none!important;
  accent-color:#253785!important;
}
.hbj-product-page .hbj-logo-later input[type="checkbox"]:checked,
.hbj-product-page .hbj-logomat-style-row input[type="checkbox"]:checked{
  background:initial!important;
  border-color:initial!important;
}
.hbj-product-page .hbj-logo-later input[type="checkbox"]:checked:after,
.hbj-product-page .hbj-logomat-style-row input[type="checkbox"]:checked:after{
  content:none!important;
  display:none!important;
}
.hbj-product-page .hbj-logomat-style-row label{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
  padding:4px 0!important;
}
@media(max-width:860px){
  .hbj-product-page .hbj-logomat-preview{
    order:1!important;
  }
  .hbj-product-page .hbj-logomat-fields{
    order:2!important;
  }
}


/* v7.39: LogoMat center guide only. */
.hbj-product-page .hbj-logomat-center-guide{
  position:absolute!important;
  z-index:6!important;
  pointer-events:none!important;
  opacity:0!important;
  transition:opacity .14s ease!important;
  filter:drop-shadow(0 2px 8px rgba(37,55,133,.18))!important;
}
.hbj-product-page .hbj-logomat-center-guide-x{
  left:7.2%!important;
  right:7.2%!important;
  top:50%!important;
  height:1px!important;
  background:rgba(255,255,255,.88)!important;
}
.hbj-product-page .hbj-logomat-center-guide-y{
  top:2.7%!important;
  bottom:3.5%!important;
  left:50%!important;
  width:1px!important;
  background:rgba(255,255,255,.88)!important;
}

.hbj-product-page .hbj-logomat-center-toast{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  
  transform:translate(-50%,calc(-50% + 34px)) scale(.96)!important;
  opacity:0!important;
  pointer-events:none!important;
  white-space:nowrap!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  color:#253785!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  background:rgba(255,255,255,.48)!important;
  border:1px solid rgba(255,255,255,.58)!important;
  -webkit-backdrop-filter:blur(14px) saturate(160%)!important;
  backdrop-filter:blur(14px) saturate(160%)!important;
  box-shadow:0 12px 30px rgba(23,32,51,.16), inset 0 1px 0 rgba(255,255,255,.78)!important;
  transition:opacity .16s ease, transform .16s ease!important;
}
.hbj-product-page .hbj-logomat-center-toast.is-visible{
  opacity:1!important;
  transform:translate(-50%,calc(-50% + 34px)) scale(1)!important;
}

/* v7.40: LogoMat text font database + text colors + max 3 line fields only. */
.hbj-product-page .hbj-logomat-text-color-field{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
}
.hbj-product-page .hbj-logomat-text-color-field > span{
  color:#253785!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}
.hbj-product-page .hbj-text-color-control{
  min-height:44px!important;
}
.hbj-product-page .hbj-logomat-text-tools textarea{
  resize:none!important;
  overflow:hidden!important;
  line-height:1.35!important;
  max-height:120px!important;
}
.hbj-product-page .hbj-logomat-style-row label.is-disabled{
  opacity:.42!important;
  cursor:not-allowed!important;
}
.hbj-product-page .hbj-logomat-style-row label.is-disabled input{
  cursor:not-allowed!important;
}
.hbj-product-page .hbj-logomat-preview-text{
  color:#fff!important;
}


/* v7.43: LogoMat only - keep text color controls smaller, but always show selected color/hex */
.hbj-product-page .hbj-logomat-text-color-field .hbj-text-color-control{
  
  
  
  transition:box-shadow .18s ease!important;
}

.hbj-product-page .hbj-logomat-text-color-field .hbj-text-color-control em{
  display:inline-block!important;
  
}

/* v7.44: LogoMat only - text color control outline matches font/select boxes, while color swatch stays compact */
.hbj-product-page .hbj-logomat-text-color-field .hbj-text-color-control{
  width:100%!important;
  max-width:none!important;
  min-height:46px!important;
}
.hbj-product-page .hbj-logomat-text-color-field .hbj-text-color-control input[type="color"]{
  width:38px!important;
  height:30px!important;
  min-height:30px!important;
  flex:0 0 38px!important;
}
.hbj-product-page .hbj-logomat-text-color-field .hbj-text-color-control em{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}


/* v7.45: LogoMat text fields - no automatic word wrapping, only Enter creates new lines */
.hbj-product-page .hbj-logomat-text-tools textarea[data-logo-field="text1"],
.hbj-product-page .hbj-logomat-text-tools textarea[data-logo-field="text2"]{
  
  overflow-wrap:normal!important;
  word-break:normal!important;
  
  min-height:40px!important;
}
.hbj-product-page .hbj-logomat-preview-text,
.hbj-product-page .hbj-logomat-preview-text .hbj-logomat-text-content{
  white-space:pre!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}


/* v7.46: LogoMat only - 250% sliders, correct center guides, no text-field scrollbars, exact logo-later click target, text alignment controls. */
.hbj-product-page .hbj-logomat-range-field input[type="range"]{
  touch-action:pan-x!important;
}
.hbj-product-page .hbj-logo-later{
  cursor:default!important;
}
.hbj-product-page .hbj-logo-later input[type="checkbox"]{
  cursor:pointer!important;
}
.hbj-product-page .hbj-logo-later span{
  pointer-events:none!important;
}
.hbj-product-page .hbj-logomat-text-tools textarea[data-logo-field="text1"],
.hbj-product-page .hbj-logomat-text-tools textarea[data-logo-field="text2"]{
  overflow:hidden!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  resize:none!important;
  white-space:pre!important;
  scrollbar-width:none!important;
}
.hbj-product-page .hbj-logomat-text-tools textarea[data-logo-field="text1"]::-webkit-scrollbar,
.hbj-product-page .hbj-logomat-text-tools textarea[data-logo-field="text2"]::-webkit-scrollbar{
  display:none!important;
}
.hbj-product-page .hbj-logomat-stage.is-center-x .hbj-logomat-center-guide-x,
.hbj-product-page .hbj-logomat-stage.is-center-y .hbj-logomat-center-guide-y{
  opacity:0!important;
}
.hbj-product-page .hbj-logomat-stage.is-center-x .hbj-logomat-center-guide-y,
.hbj-product-page .hbj-logomat-stage.is-center-y .hbj-logomat-center-guide-x{
  opacity:1!important;
}
.hbj-product-page .hbj-logomat-align-row{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:-2px 0 2px!important;
}
.hbj-product-page .hbj-logomat-align-row label{
  /* Contain the hidden radio without changing the visible button or artwork. */
  position:relative!important;
  width:36px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.hbj-product-page .hbj-logomat-align-row input{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
.hbj-product-page .hbj-align-icon{
  position:relative!important;
  display:block!important;
  width:22px!important;
  height:16px!important;
}
.hbj-product-page .hbj-align-icon:before,
.hbj-product-page .hbj-align-icon:after{
  content:""!important;
  position:absolute!important;
  height:2px!important;
  border-radius:999px!important;
  background:#253785!important;
  opacity:.62!important;
}
.hbj-product-page .hbj-align-icon:before{
  top:3px!important;
  width:22px!important;
}
.hbj-product-page .hbj-align-icon:after{
  bottom:3px!important;
  width:15px!important;
}
.hbj-product-page .hbj-align-left:before,
.hbj-product-page .hbj-align-left:after{ left:0!important; }
.hbj-product-page .hbj-align-center:before,
.hbj-product-page .hbj-align-center:after{ left:50%!important; transform:translateX(-50%)!important; }
.hbj-product-page .hbj-align-right:before,
.hbj-product-page .hbj-align-right:after{ right:0!important; }
.hbj-product-page .hbj-logomat-align-row input:checked + .hbj-align-icon:before,
.hbj-product-page .hbj-logomat-align-row input:checked + .hbj-align-icon:after{
  opacity:1!important;
  background:#8FBE21!important;
}



/* v7.48/v7.50: LogoMat mobile touch targets + hint below preview only. */
@media(max-width:680px){
  .hbj-product-page .hbj-logomat-preview{
    overflow:visible!important;
    margin-bottom:78px!important;
  }
  .hbj-product-page .hbj-logomat-stage{
    inset:14px!important;
    bottom:auto!important;
  }
  .hbj-product-page .hbj-logomat-drag-hint{
    position:absolute!important;
    top:calc(100% + 40px)!important;
    bottom:auto!important;
    left:12px!important;
    right:12px!important;
    z-index:10!important;
    padding:0 6px!important;
    line-height:1.25!important;
  }
  .hbj-product-page .hbj-logomat-range-field,
  .hbj-product-page .hbj-logo-later,
  .hbj-product-page .hbj-logomat-style-row label,
  .hbj-product-page .hbj-logomat-align-row label{
    -webkit-tap-highlight-color:transparent!important;
  }
}


/* v7.51: LogoMat mobile only - range sliders require sliding on mobile, Android gets custom color picker. */
.hbj-product-page .hbj-color-control{
  position:relative!important;
}
.hbj-product-page .hbj-android-color-popover{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 8px)!important;
  z-index:80!important;
  padding:12px!important;
  border-radius:14px!important;
  border:1px solid rgba(37,55,133,.18)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 18px 44px rgba(23,32,51,.22), inset 0 1px 0 rgba(255,255,255,.86)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%)!important;
  backdrop-filter:blur(18px) saturate(150%)!important;
  display:grid!important;
  gap:10px!important;
}
.hbj-product-page .hbj-android-color-preview{
  height:34px!important;
  border-radius:10px!important;
  border:1px solid rgba(37,55,133,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.hbj-product-page .hbj-android-color-popover label{
  display:grid!important;
  gap:5px!important;
  margin:0!important;
  color:#253785!important;
  font-size:12px!important;
  font-weight:900!important;
}
.hbj-product-page .hbj-android-color-popover input[type="range"]{
  width:100%!important;
  margin:0!important;
}
.hbj-product-page .hbj-android-color-swatches{
  display:grid!important;
  grid-template-columns:repeat(10,1fr)!important;
  gap:6px!important;
}
.hbj-product-page .hbj-android-color-swatches button{
  width:100%!important;
  aspect-ratio:1/1!important;
  border-radius:999px!important;
  border:1px solid rgba(37,55,133,.18)!important;
  cursor:pointer!important;
  box-shadow:0 6px 14px rgba(37,55,133,.10)!important;
}
.hbj-product-page .hbj-android-color-hex{
  width:100%!important;
  min-height:38px!important;
  border-radius:8px!important;
  border:1px solid rgba(37,55,133,.20)!important;
  padding:8px 10px!important;
  color:#253785!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
}
.hbj-product-page .hbj-android-color-close{
  min-height:38px!important;
  border-radius:8px!important;
  border:1px solid rgba(37,55,133,.22)!important;
  background:#fff!important;
  color:#253785!important;
  font-weight:900!important;
  cursor:pointer!important;
}
@media(max-width:760px){
  .hbj-product-page .hbj-logomat-range-field input[type="range"]{
    touch-action:none!important;
  }
}


/* v7.52: prevent mobile text input zoom. Legacy Android modal selectors removed in v9.0.46; the active picker is the fixed popover below. */
@media(max-width:760px){
  .hbj-product-page .hbj-logomat-text-tools textarea,
  .hbj-product-page .hbj-logomat-fields input[type="text"],
  .hbj-product-page .hbj-logo-comment textarea{
    font-size:16px!important;
  }
}


/* v7.53: Android color picker as a compact fixed popover kept inside the mobile viewport. */
.hbj-android-color-popover.hbj-android-color-popover-fixed{
  position:fixed!important;
  right:auto!important;
  bottom:auto!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100vh - 24px)!important;
  overflow:auto!important;
  z-index:999999!important;
  box-sizing:border-box!important;
}
@media(max-width:760px){
  .hbj-android-color-popover.hbj-android-color-popover-fixed{
    padding:10px!important;
    border-radius:14px!important;
    gap:9px!important;
  }
  .hbj-android-color-popover.hbj-android-color-popover-fixed .hbj-android-color-preview{
    height:30px!important;
  }
  .hbj-android-color-popover.hbj-android-color-popover-fixed .hbj-android-color-swatches{
    grid-template-columns:repeat(5,1fr)!important;
  }
}

/* v7.54: Android custom color picker - real glass panel kept inside mobile viewport. */
.hbj-android-color-popover.hbj-android-color-popover-fixed{
  
  
  
  
  
  color:#172033!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed .hbj-android-color-preview{
  height:46px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.85)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px rgba(37,55,133,.12)!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed label{
  display:grid!important;
  gap:7px!important;
  margin:0!important;
  color:#253785!important;
  font-size:12px!important;
  font-weight:900!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed input[type="range"]{
  width:100%!important;
  
  touch-action:none!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed .hbj-android-color-swatches{
  display:grid!important;
  grid-template-columns:repeat(5,1fr)!important;
  
}
.hbj-android-color-popover.hbj-android-color-popover-fixed .hbj-android-color-swatches button{
  width:100%!important;
  
  
  border:1px solid rgba(255,255,255,.88)!important;
  cursor:pointer!important;
  
}
.hbj-android-color-popover.hbj-android-color-popover-fixed .hbj-android-color-hex{
  width:100%!important;
  min-height:44px!important;
  border-radius:10px!important;
  border:1px solid rgba(37,55,133,.18)!important;
  background:rgba(255,255,255,.78)!important;
  padding:10px 12px!important;
  color:#253785!important;
  font-size:16px!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
  box-sizing:border-box!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed .hbj-android-color-close{
  min-height:42px!important;
  border-radius:10px!important;
  border:1px solid rgba(37,55,133,.20)!important;
  background:rgba(255,255,255,.82)!important;
  color:#253785!important;
  font-weight:900!important;
  cursor:pointer!important;
  box-shadow:0 10px 22px rgba(37,55,133,.10)!important;
}
@media(max-width:760px){
  .hbj-android-color-popover.hbj-android-color-popover-fixed{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:auto!important;
    bottom:14px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100vh - 28px)!important;
    overflow:auto!important;
    padding:14px!important;
    border-radius:18px!important;
    gap:12px!important;
    box-sizing:border-box!important;
  }
}


/* v7.55: Android color picker only - stronger glass panel, square swatches, glass slider thumbs */
.hbj-android-color-popover.hbj-android-color-popover-fixed{
  background:linear-gradient(135deg, rgba(255,255,255,.48), rgba(255,255,255,.26))!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 24px 70px rgba(23,32,51,.28), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.24)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%)!important;
  backdrop-filter:blur(24px) saturate(180%)!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed label{
  margin-bottom:3px!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed input[type="range"]{
  height:28px!important;
  margin:2px 0 8px!important;
  background:transparent!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed input[type="range"]::-webkit-slider-runnable-track{
  height:8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.56)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 8px 18px rgba(37,55,133,.10)!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:24px!important;
  height:24px!important;
  margin-top:-9px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.88)!important;
  background:rgba(255,255,255,.40)!important;
  box-shadow:0 10px 24px rgba(37,55,133,.22), inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(37,55,133,.12)!important;
  -webkit-backdrop-filter:blur(14px) saturate(170%)!important;
  backdrop-filter:blur(14px) saturate(170%)!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed input[type="range"]::-moz-range-track{
  height:8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.56)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 8px 18px rgba(37,55,133,.10)!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed input[type="range"]::-moz-range-thumb{
  width:24px!important;
  height:24px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.88)!important;
  background:rgba(255,255,255,.40)!important;
  box-shadow:0 10px 24px rgba(37,55,133,.22), inset 0 1px 0 rgba(255,255,255,.86), inset 0 -1px 0 rgba(37,55,133,.12)!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed .hbj-android-color-swatches{
  margin-top:2px!important;
  gap:7px!important;
}
.hbj-android-color-popover.hbj-android-color-popover-fixed .hbj-android-color-swatches button{
  border-radius:8px!important;
  aspect-ratio:1.35/1!important;
  min-height:30px!important;
  box-shadow:0 8px 18px rgba(37,55,133,.14), inset 0 1px 0 rgba(255,255,255,.55)!important;
}


/* v7.56.1: mobile-only stable polish from v7.55.
   Only: 5px product text padding, remove LogoMat preview outer frame on mobile,
   and make calculator product thumbnails portrait instead of wide. No related/callout changes. */
@media(max-width:640px){
  /* Small breathing room for product text/content on mobile only. */
  .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:5px!important;
    padding-right:5px!important;
    box-sizing:border-box!important;
  }

  /* LogoMat designer: remove only the extra outer preview frame on mobile. */
  .hbj-product-page .hbj-logomat-options{
    padding-left:5px!important;
    padding-right:5px!important;
  }
  .hbj-product-page .hbj-logomat-preview{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Calculator product image: keep it portrait on mobile instead of a wide rectangle. */
  .hbj-product-page .hbj-card-body-row{
    grid-template-columns:1fr!important;
  }
  .hbj-product-page .hbj-card-thumb{
    width:min(132px, 42vw)!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:3 / 4!important;
    justify-self:start!important;
    align-self:start!important;
    padding:0!important;
  }
  .hbj-product-page .hbj-card-thumb img{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
    display:block!important;
  }
}


/* v7.57: mobile-only calculator/control polish from v7.56 stable.
   Only: center portrait calculator thumbnails, keep controls as 2+2 grid,
   keep main image callouts inline, and make the LogoMat mat-color picker swatch match text color swatches on mobile. */
@media(max-width:640px){
  /* Calculator product image: portrait and centered on mobile. */
  .hbj-product-page .hbj-card-thumb{
    justify-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Calculator selects: 2 columns + 2 columns on mobile so fields stay readable. */
  .hbj-product-page .hbj-card-controls,
  body.single-hbj_product.hbj-product-template-isolated .hbj-card-controls{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:12px 10px!important;
  }
  .hbj-product-page .hbj-card-controls label,
  body.single-hbj_product.hbj-product-template-isolated .hbj-card-controls label{
    min-width:0!important;
  }
  .hbj-product-page .hbj-card-controls select,
  body.single-hbj_product.hbj-product-template-isolated .hbj-card-controls select{
    width:100%!important;
    min-width:0!important;
    font-size:16px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  /* Main product image callouts: stay inline on mobile, just smaller. */
  .hbj-product-page .hbj-product-media-main .hbj-image-callouts,
  .hbj-product-page .hbj-image-callouts{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    align-items:center!important;
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    gap:4px!important;
  }
  .hbj-product-page .hbj-product-media-main .hbj-image-callouts .hbj-image-callout,
  .hbj-product-page .hbj-image-callouts .hbj-image-callout{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:28px!important;
    padding:5px 6px!important;
    font-size:9px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* LogoMat first mat color picker: compact square swatch like the text color swatches. */
  .hbj-product-page .hbj-logomat-fields > .hbj-color-field .hbj-color-control input[type="color"]{
    width:38px!important;
    height:30px!important;
    min-height:30px!important;
    flex:0 0 38px!important;
    border-radius:8px!important;
    overflow:hidden!important;
  }
}


/* v7.58: mobile-only LogoMat preview width inside calculator.
   Let the LogoMat designer sit almost edge-to-edge on mobile, with 5px side breathing room. */
@media(max-width:640px){
  .hbj-product-page .hbj-mat-card.has-logomat-options .hbj-logomat-options,
  .hbj-product-page .hbj-mat-card .hbj-logomat-options{
    margin-left:-9px!important;
    margin-right:-9px!important;
    padding-left:5px!important;
    padding-right:5px!important;
    box-sizing:border-box!important;
  }
}


/* v7.59: mobile-only final padding/LogoMat frame/button polish.
   Only: center add-mat button, remove LogoMat outer options frame on mobile,
   add product text side padding, and add related section side padding. */
@media(max-width:640px){
  /* Add-mat button: keep size, only center it and use normal casing. */
  .hbj-product-page .hbj-add-row{
    justify-content:center!important;
  }
  .hbj-product-page .hbj-add-row .hbj-outline-button{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    text-transform:none!important;
  }

  /* LogoMat options on mobile: remove the outer selector/options frame so the preview can breathe wider. */
  .hbj-product-page .hbj-mat-card.has-logomat-options .hbj-logomat-options,
  .hbj-product-page .hbj-mat-card .hbj-logomat-options{
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    border-radius:0!important;
    margin-left:-11px!important;
    margin-right:-11px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }

  /* Product text areas: a little side air on mobile only. */
  .hbj-product-page .hbj-product-copy,
  .hbj-product-page .hbj-info-row,
  .hbj-product-page .hbj-sizes,
  .hbj-product-page .hbj-faq,
  .hbj-product-page .hbj-product-icons{
    padding-left:10px!important;
    padding-right:10px!important;
    box-sizing:border-box!important;
  }

  /* Related section: add side padding only; do not alter cards, images or proportions. */
  .hbj-product-page .hbj-related-products{
    padding-left:20px!important;
    padding-right:20px!important;
    box-sizing:border-box!important;
  }
}


/* v7.60: desktop/laptop LogoMat preview background + laptop padding + mat color swatch polish only. */
/* Remove the pale blue preview panel behind the LogoMat mat on desktop/laptop as well. */
.hbj-product-page .hbj-logomat-preview{
  background:transparent!important;
  box-shadow:none!important;
}

/* Make the first LogoMat mat-color picker swatch match the text-color pickers. */
.hbj-product-page .hbj-logomat-fields > .hbj-color-field .hbj-color-control input[type="color"]{
  width:38px!important;
  height:30px!important;
  min-height:30px!important;
  flex:0 0 38px!important;
  border-radius:8px!important;
  overflow:hidden!important;
}
.hbj-product-page .hbj-logomat-fields > .hbj-color-field .hbj-color-control input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0!important;
  border-radius:8px!important;
}
.hbj-product-page .hbj-logomat-fields > .hbj-color-field .hbj-color-control input[type="color"]::-webkit-color-swatch{
  border:0!important;
  border-radius:8px!important;
}
.hbj-product-page .hbj-logomat-fields > .hbj-color-field .hbj-color-control input[type="color"]::-moz-color-swatch{
  border:0!important;
  border-radius:8px!important;
}

/* On laptop-sized desktop viewports, add a little side breathing room to the product module only. */
@media(min-width:641px) and (max-width:1440px){
  body.single-hbj_product .hbj-product-template-main > .hbj-product-page,
  body.single-hbj_product main.hbj-product-template-main > .hbj-product-page,
  body.single-hbj_product .hbj-product-page.hbj-product-page{
    padding-left:12px!important;
    padding-right:12px!important;
    box-sizing:border-box!important;
  }
}


/* v7.62: stronger Astra override for laptop product-page side padding only.
   Products are hbj_product custom post type pages rendered through the plugin template.
   This targets Astra's isolated full-width product template with higher specificity than earlier full-width rules. */
@media(min-width:981px) and (max-width:1440px){
  body.single-hbj_product.hbj-product-template-isolated .site-content main.hbj-product-template-main,
  body.single-hbj_product.hbj-product-template-isolated .content-area main.hbj-product-template-main,
  body.single-hbj_product.hbj-product-template-isolated #primary.hbj-product-template-main,
  body.single-hbj_product.hbj-product-template-isolated main.hbj-product-template-main.hbj-product-template-main{
    padding-left:24px!important;
    padding-right:24px!important;
    box-sizing:border-box!important;
  }
  body.single-hbj_product.hbj-product-template-isolated main.hbj-product-template-main.hbj-product-template-main > .hbj-product-page.hbj-product-page{
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
}


/* v7.64: mobile-only LogoMat sticky preview retry.
   Make the actual preview stick while editing, without moving the stage/overlay. */
@media(max-width:640px){
  .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:80!important;
    align-self:start!important;
    transform:translateZ(0)!important;
  }

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

/* v7.65: mobile-only compact sticky LogoMat preview test.
   Keep sticky natural (only when reaching the preview), but make the preview small enough so the controls remain usable below it. */
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-preview{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:calc(env(safe-area-inset-top, 0px) + 8px)!important;
    z-index:70!important;
    width:min(46vw, 190px)!important;
    max-width:min(46vw, 190px)!important;
    min-width:150px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    aspect-ratio:5 / 8!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    align-self:start!important;
  }

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

  .hbj-product-page .hbj-logomat-stage{
    inset:7px!important;
  }

  .hbj-product-page .hbj-logomat-drag-hint{
    top:calc(100% + 14px)!important;
    left:-42px!important;
    right:-42px!important;
    font-size:11px!important;
  }
}


/* v7.66: mobile-only sticky preview sizing + non-sticky LogoMat drag hint.
   Keep existing sticky behavior, make preview 50% larger than v7.65 compact test,
   and show the drag hint as a normal mobile text below the preview instead of inside the sticky element. */
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-preview{
    width:min(69vw, 285px)!important;
    max-width:min(69vw, 285px)!important;
    min-width:225px!important;
  }

  .hbj-product-page .hbj-logomat-preview > .hbj-logomat-drag-hint{
    display:none!important;
  }

  .hbj-product-page .hbj-logomat-drag-hint-mobile{
    display:block!important;
    width:100%!important;
    max-width:320px!important;
    margin:14px auto 0!important;
    padding:0 10px!important;
    text-align:center!important;
    color:rgba(37,55,133,.78)!important;
    font-size:11px!important;
    line-height:1.25!important;
    font-weight:800!important;
    pointer-events:none!important;
  }
}

@media(min-width:641px){
  .hbj-product-page .hbj-logomat-drag-hint-mobile{
    display:none!important;
  }
}


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

/* v7.69: mobile-only sticky LogoMat glass/message polish.
   Keep the sticky test mobile-only, make the glass start at the viewport top,
   make it a little more transparent, and show a short glass message when the preview fades before the comment field. */
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-preview{
    transition:opacity .22s ease, transform .22s ease!important;
    isolation:isolate!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 20px 20px!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:16px!important;
    right:16px!important;
    z-index:82!important;
    display:block!important;
    padding:11px 14px!important;
    border-radius:17px!important;
    text-align:center!important;
    font-size:12px!important;
    line-height:1.2!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;
  }

  body.admin-bar .hbj-logomat-sticky-message{
    top:50%!important;
  }
}


/* v7.82: mobile/tablet LogoMat drag + rotate handle test only. */
.hbj-product-page .hbj-logomat-touch-indicator{
  position:absolute!important;
  left:50%!important;
  top:18px!important;
  z-index:26!important;
  display:block!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  color:rgba(37,55,133,.94)!important;
  background:rgba(255,255,255,.42)!important;
  border:1px solid rgba(255,255,255,.60)!important;
  box-shadow:0 12px 30px rgba(23,32,51,.16), inset 0 1px 0 rgba(255,255,255,.70)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.25)!important;
  backdrop-filter:blur(16px) saturate(1.25)!important;
  pointer-events:none!important;
  opacity:0!important;
  transform:translate(-50%,-8px)!important;
  transition:opacity .16s ease, transform .16s ease!important;
  white-space:nowrap!important;
}
.hbj-product-page .hbj-logomat-touch-indicator.is-visible{
  opacity:1!important;
  transform:translate(-50%,0)!important;
}
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-draggable{
    touch-action:none!important;
  }
  .hbj-product-page .hbj-logomat-draggable.is-touch-gesturing{
    z-index:18!important;
  }
}


/* v7.83: mobile/tablet rotate handle + pinch scale test. */
.hbj-product-page .hbj-logomat-rotate-handle{
  display:none!important;
}
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-draggable{
    touch-action:none!important;
  }
  .hbj-product-page .hbj-logomat-draggable.is-touch-gesturing,
  .hbj-product-page .hbj-logomat-draggable.is-selected{
    z-index:18!important;
  }
  .hbj-product-page .hbj-logomat-draggable.is-selected .hbj-logomat-rotate-handle{
    display:block!important;
  }
  .hbj-product-page .hbj-logomat-rotate-handle{
    position:absolute!important;
    right:-12px!important;
    top:-12px!important;
    width:28px!important;
    height:28px!important;
    border-radius:999px!important;
    border:1px solid rgba(255,255,255,.78)!important;
    background:rgba(255,255,255,.34)!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.3)!important;
    backdrop-filter:blur(14px) saturate(1.3)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.66)!important;
    z-index:22!important;
    padding:0!important;
    touch-action:none!important;
  }
  .hbj-product-page .hbj-logomat-rotate-handle:before{
    content:"↻"!important;
    position:absolute!important;
    inset:0!important;
    display:grid!important;
    place-items:center!important;
    color:#253785!important;
    font-size:17px!important;
    line-height:1!important;
    font-weight:900!important;
  }
}

/* v7.84: mobile/tablet LogoMat touch UI final polish only.
   Hide size sliders where pinch is available and show a short sticky glass hint above the mat. */
.hbj-product-page .hbj-logomat-touch-help{
  display:none!important;
}
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-options .hbj-logomat-range-field{
    display:none!important;
  }
}
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-touch-help{
    position:absolute!important;
    top:-20px!important;
    left:50%!important;
    z-index:4!important;
    display:block!important;
    max-width:calc(100vw - 32px)!important;
    padding:3px 9px!important;
    border-radius:999px!important;
    font-size:10px!important;
    line-height:1.1!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
    color:rgba(37,55,133,.78)!important;
    background:rgba(255,255,255,.24)!important;
    border:1px solid rgba(255,255,255,.34)!important;
    box-shadow:0 8px 20px rgba(23,32,51,.08), inset 0 1px 0 rgba(255,255,255,.44)!important;
    -webkit-backdrop-filter:blur(10px) saturate(1.12)!important;
    backdrop-filter:blur(10px) saturate(1.12)!important;
    pointer-events:none!important;
    white-space:nowrap!important;
    opacity:0!important;
    transform:translateX(-50%) translateY(2px)!important;
    transition:opacity .16s ease, transform .16s ease!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-active:not(.is-logomat-sticky-ending) .hbj-logomat-touch-help{
    opacity:1!important;
    transform:translateX(-50%) translateY(0)!important;
  }
}



/* v7.85: mobile/tablet touch polish only.
   Keep rotate handle visually the same size when logo/text is pinch-scaled. */
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-rotate-handle{
    transform:scale(var(--logomat-handle-counter-scale,1))!important;
    transform-origin:center center!important;
  }
}

/* v7.86: mobile/tablet only touch size slider + sticky glass tap shield.
   Keep the existing rotate/pinch behavior; add a large vertical size control for the selected LogoMat element
   and prevent controls behind the sticky glass area from being tapped accidentally. */
.hbj-product-page .hbj-logomat-mobile-size-control{display:none!important;}
@media(max-width:1024px){
  .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 > 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: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;
  }
}
/* v7.87: mobile/tablet only size control stability polish.
   Keep pinch + rotate unchanged; make the glass size slider capture touch reliably for logo/text. */
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-mobile-size-control.is-visible{
    pointer-events:auto!important;
    touch-action:none!important;
  }
  .hbj-product-page .hbj-logomat-mobile-size-control.is-visible *{
    touch-action:none!important;
  }
}


/* v7.90: LogoMat text polish only.
   Text preview pills may grow with longer text instead of clipping at the old max width. */
.hbj-product-page .hbj-logomat-preview-text{
  max-width:none!important;
  width:max-content!important;
  overflow:visible!important;
}
.hbj-product-page .hbj-logomat-preview-text .hbj-logomat-text-content{
  display:inline-block!important;
  max-width:none!important;
  width:max-content!important;
  overflow:visible!important;
}


/* v8.0.0: desktop LogoMat rotate handle only. */
@media(min-width:1025px){
  .hbj-product-page .hbj-logomat-draggable{
    cursor:grab!important;
  }
  .hbj-product-page .hbj-logomat-draggable.is-dragging{
    cursor:grabbing!important;
  }
  .hbj-product-page .hbj-logomat-draggable.is-selected,
  .hbj-product-page .hbj-logomat-draggable.is-rotating{
    z-index:18!important;
  }
  .hbj-product-page .hbj-logomat-draggable.is-selected .hbj-logomat-rotate-handle,
  .hbj-product-page .hbj-logomat-draggable.is-rotating .hbj-logomat-rotate-handle{
    display:block!important;
  }
  .hbj-product-page .hbj-logomat-rotate-handle{
    position:absolute!important;
    right:-12px!important;
    top:-12px!important;
    width:28px!important;
    height:28px!important;
    border-radius:999px!important;
    border:1px solid rgba(255,255,255,.78)!important;
    background:rgba(255,255,255,.34)!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.3)!important;
    backdrop-filter:blur(14px) saturate(1.3)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.66)!important;
    z-index:22!important;
    padding:0!important;
    cursor:grab!important;
  }
  .hbj-product-page .hbj-logomat-rotate-handle:active{
    cursor:grabbing!important;
  }
  .hbj-product-page .hbj-logomat-rotate-handle:before{
    content:"↻"!important;
    position:absolute!important;
    inset:0!important;
    display:grid!important;
    place-items:center!important;
    color:#253785!important;
    font-size:17px!important;
    line-height:1!important;
    font-weight:900!important;
  }
}


/* v8.0.2: LogoMat desktop preview dropzone uses the same logo upload logic. */
.hbj-product-page .hbj-logomat-preview.is-logo-drop-active{
  outline:2px dashed rgba(143,190,33,.78)!important;
  outline-offset:8px!important;
}
.hbj-product-page .hbj-logomat-preview.is-logo-drop-active .hbj-logomat-stage{
  box-shadow:0 0 0 4px rgba(143,190,33,.16), 0 18px 44px rgba(37,55,133,.18)!important;
}
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-mobile-size-track i{
    top:var(--hbj-mobile-size-thumb-top, 50%)!important;
  }
  .hbj-product-page .hbj-logomat-center-toast{
    top:8%!important;
    z-index:140!important;
    transform:translate(-50%,0) scale(.96)!important;
  }
  .hbj-product-page .hbj-logomat-center-toast.is-visible{
    transform:translate(-50%,0) scale(1)!important;
  }
}

/* v8.0.6: LogoMat preview orientation choice only - square is automatic by size. */
.hbj-product-page .hbj-logomat-orientation-field{
  display:block!important;
  margin:0 0 12px!important;
}
.hbj-product-page .hbj-logomat-orientation-field[hidden]{
  display:none!important;
}
.hbj-product-page .hbj-logomat-orientation-field > span{
  display:block!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:900!important;
  color:#253785!important;
  margin:0 0 7px!important;
}

.hbj-product-page .hbj-logomat-orientation-control label{
  position:relative!important;
  
  margin:0!important;
  
  border:1px solid rgba(37,55,133,.18)!important;
  
  background:rgba(255,255,255,.52)!important;
  box-shadow:0 10px 24px rgba(37,55,133,.06), inset 0 1px 0 rgba(255,255,255,.76)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  
  cursor:pointer!important;
  user-select:none!important;
}
.hbj-product-page .hbj-logomat-orientation-control input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
.hbj-product-page .hbj-logomat-orientation-control label:has(input:checked){
  border-color:rgba(143,190,33,.72)!important;
  box-shadow:0 12px 28px rgba(143,190,33,.14), inset 0 0 0 1px rgba(143,190,33,.28)!important;
  background:rgba(255,255,255,.72)!important;
}
.hbj-product-page .hbj-logomat-orientation-control em{
  font-style:normal!important;
  
  
  font-weight:900!important;
  color:#253785!important;
}
.hbj-product-page .hbj-orientation-icon{
  display:block!important;
  border:2px solid #253785!important;
  
  background:linear-gradient(135deg, rgba(37,55,133,.12), rgba(143,190,33,.14))!important;
  
}



.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-portrait{
  aspect-ratio:5 / 8!important;
}
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square{
  aspect-ratio:1 / 1!important;
  min-height:0!important;
}
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape{
  aspect-ratio:8 / 5!important;
  min-height:0!important;
}
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-stage,
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-stage{
  aspect-ratio:auto!important;
}

.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mat{
  inset:auto!important;
  left:18.75%!important;
  top:-30%!important;
  width:62.5%!important;
  height:160%!important;
  max-width:none!important;
  max-height:none!important;
  transform:rotate(90deg)!important;
  transform-origin:center center!important;
}
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-color-layer{
  inset:auto!important;
  
  
  
  
  transform:rotate(90deg)!important;
  transform-origin:center center!important;
  -webkit-mask-image:url("logomat-preview-mat.png")!important;
  mask-image:url("logomat-preview-mat.png")!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  -webkit-mask-size:contain!important;
  mask-size:contain!important;
}
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape{
    width:min(88vw, 360px)!important;
    max-width:min(88vw, 360px)!important;
    min-width:260px!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square{
    width:min(76vw, 320px)!important;
    max-width:min(76vw, 320px)!important;
    min-width:230px!important;
  }
}


/* v8.0.8: orientation polish only - compact orientation cards, landscape mobile size slider horizontal, and mobile defaults per orientation. */



.hbj-product-page .hbj-orientation-icon{
  border-radius:4px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.66)!important;
}
.hbj-product-page .hbj-orientation-portrait{width:16px!important;height:24px!important;}
.hbj-product-page .hbj-orientation-landscape{width:26px!important;height:16px!important;}

@media(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:8px!important;
    transform:translateX(-50%)!important;
    width:190px!important;
    height:52px!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-control > span{
    top:auto!important;
    bottom:-18px!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;
  }
}

/* v8.0.11: requested orientation polish only.
   1) Make orientation buttons compact around the icon/text.
   2) Keep center toast above logo/text on desktop.
   3) Give mobile landscape sticky preview more glass height and move the horizontal size slider lower. */
.hbj-product-page .hbj-logomat-orientation-control{
  display:flex!important;
  grid-template-columns:none!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
}
.hbj-product-page .hbj-logomat-orientation-control label{
  flex:0 0 auto!important;
  
  
  
  
  
  border-radius:10px!important;
  gap:3px!important;
}
.hbj-product-page .hbj-logomat-orientation-control em{
  font-size:10px!important;
  line-height:1!important;
}
.hbj-product-page .hbj-logomat-center-toast{
  z-index:9999!important;
}
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-center-toast{
    z-index:9999!important;
  }
}
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape{
    width:min(96vw, 430px)!important;
    max-width:min(96vw, 430px)!important;
    min-width:300px!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape:before{
    top:-74px!important;
    bottom:auto!important;
    height:min(48vh, 360px)!important;
  }
  body.admin-bar .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape:before{
    top:-120px!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-control{
    bottom:-42px!important;
  }
}

/* v8.0.12: targeted polish from v8.0.11 only.
   1) Keep orientation buttons compact but equal-sized and centered on mobile.
   2) Give mobile/tablet landscape sticky glass enough height for the horizontal slider.
   3) Remove rounded clipping from the square mat preview. */
.hbj-product-page .hbj-logomat-orientation-control label{
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
  height:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  padding:5px 6px!important;
  box-sizing:border-box!important;
}
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-orientation-control{
    justify-content:center!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-active .hbj-logomat-preview.is-logomat-orientation-landscape:before{
    top:-32px!important;
    bottom:auto!important;
    height:min(44vh, 340px)!important;
  }

  body.admin-bar .hbj-product-page .hbj-logomat-options.is-logomat-sticky-active .hbj-logomat-preview.is-logomat-orientation-landscape:before{
    top:-78px!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-control{
    bottom:-52px!important;
  }
}
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-stage,
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-color-layer{
  border-radius:0!important;
}

/* v8.0.13: targeted corrections only.
   1) Desktop square color overlay uses the full square mat mask so the angled corner/bottom align.
   2) Mobile/tablet landscape sticky glass spans the full viewport width and is tall enough to include the horizontal size slider. */
@media(min-width:1025px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-color-layer{
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:auto!important;
    height:auto!important;
    border-radius:0!important;
    -webkit-mask-image:url("logomat-preview-mat-square.png")!important;
    mask-image:url("logomat-preview-mat-square.png")!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:contain!important;
    mask-size:contain!important;
  }
}
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-options.is-logomat-sticky-active .hbj-logomat-preview.is-logomat-orientation-landscape:before{
    left:50%!important;
    width:100vw!important;
    max-width:100vw!important;
    transform:translateX(-50%)!important;
    top:-28px!important;
    bottom:auto!important;
    height:min(52vh, 420px)!important;
  }
  body.admin-bar .hbj-product-page .hbj-logomat-options.is-logomat-sticky-active .hbj-logomat-preview.is-logomat-orientation-landscape:before{
    top:-74px!important;
    height:min(56vh, 460px)!important;
  }
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mobile-size-control{
    bottom:-64px!important;
  }
}

/* v8.0.14: only color-overlay refinements.
   - Square overlay stays inside mat border on desktop and keeps lower-left angled corner.
   - Square overlay extends a touch further down on mobile/tablet.
   - Landscape overlay stays inside the rotated mat border while preserving the rotated angled corner. */
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-color-layer{
  top:2.9%!important;
  right:3.2%!important;
  bottom:2.0%!important;
  left:3.2%!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  clip-path:polygon(0 0,100% 0,100% 100%,5.2% 100%,0 94.8%)!important;
  -webkit-mask-image:url("logomat-preview-mat-square.png")!important;
  mask-image:url("logomat-preview-mat-square.png")!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  -webkit-mask-size:contain!important;
  mask-size:contain!important;
}
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-color-layer{
  left:19.7%!important;
  top:-27.6%!important;
  width:60.6%!important;
  height:155.2%!important;
  clip-path:polygon(0 0,100% 0,100% 100%,6.2% 100%,0 94.6%)!important;
}
@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-color-layer{
    top:2.9%!important;
    right:3.1%!important;
    bottom:1.55%!important;
    left:3.1%!important;
    clip-path:polygon(0 0,100% 0,100% 100%,5.2% 100%,0 94.8%)!important;
  }
}


/* v8.0.15: targeted overlay alignment only.
   - Square desktop: lift the color overlay slightly back up and keep lower-left angled corner inside border.
   - Square mobile/tablet: extend color overlay about 4px upward only.
   - Landscape desktop/mobile: extend color overlay slightly left and use a top-left angled corner.
   Portrait overlay is intentionally untouched. */
@media(min-width:1025px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-color-layer{
    top:1.65%!important;
    right:3.25%!important;
    bottom:2.05%!important;
    left:3.25%!important;
    clip-path:polygon(0 0,100% 0,100% 100%,4.3% 100%,0 95.7%)!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-color-layer{
    left:19.05%!important;
    top:-27.6%!important;
    width:61.25%!important;
    height:155.2%!important;
    clip-path:polygon(6.0% 0,100% 0,100% 100%,0 100%,0 6.0%)!important;
  }
}

@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-color-layer{
    top:1.65%!important;
    right:3.1%!important;
    bottom:1.55%!important;
    left:3.1%!important;
    clip-path:polygon(0 0,100% 0,100% 100%,5.0% 100%,0 95.0%)!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-color-layer{
    left:18.85%!important;
    top:-27.6%!important;
    width:61.45%!important;
    height:155.2%!important;
    clip-path:polygon(6.0% 0,100% 0,100% 100%,0 100%,0 6.0%)!important;
  }
}

/* v8.0.16: final targeted color-overlay edge corrections only.
   - Square desktop: extend the color field slightly at the bottom only.
   - Landscape desktop: pull the color field in slightly from both side borders, with a little extra on the left.
   - Landscape mobile/tablet: extend the color field slightly to the right and refine the top-left angled corner.
   Portrait overlay is intentionally untouched. */
@media(min-width:1025px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-color-layer{
    bottom:1.25%!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-color-layer{
    left:19.75%!important;
    width:59.95%!important;
    clip-path:polygon(5.4% 0,100% 0,100% 100%,0 100%,0 5.4%)!important;
  }
}

@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-color-layer{
    width:61.75%!important;
    clip-path:polygon(5.2% 0,100% 0,100% 100%,0 100%,0 5.2%)!important;
  }
}

/* v8.0.17: ultra-targeted overlay edge microfix only.
   - Reuse the better square angled-corner mask on desktop.
   - Landscape overlay is widened slightly on left/right and the rotated top-left angled corner is tightened.
   Portrait overlay and all other behavior are intentionally untouched. */
@media(min-width:1025px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-color-layer{
    clip-path:polygon(0 0,100% 0,100% 100%,5.0% 100%,0 95.0%)!important;
  }

  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-color-layer{
    left:19.35%!important;
    width:60.75%!important;
    clip-path:polygon(4.8% 0,100% 0,100% 100%,0 100%,0 4.8%)!important;
  }
}

@media(max-width:1024px){
  .hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-color-layer{
    width:62.0%!important;
    clip-path:polygon(4.8% 0,100% 0,100% 100%,0 100%,0 4.8%)!important;
  }
}

/* v8.0.18: LogoMat second logo upload UI only. */
.hbj-product-page .hbj-logomat-logo-slot[hidden]{
  display:none!important;
}
.hbj-product-page .hbj-logomat-grid > *,
.hbj-product-page .hbj-logomat-fields,
.hbj-product-page .hbj-file-field,
.hbj-product-page .hbj-logomat-upload-list{
  min-width:0!important;
  max-width:100%!important;
}
.hbj-product-page .hbj-file-field input[type="file"]{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.hbj-product-page .hbj-logomat-upload-list{
  display:grid!important;
  gap:6px!important;
  margin-top:7px!important;
  width:100%!important;
}
.hbj-product-page .hbj-logomat-upload-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding:6px 8px!important;
  border-radius:10px!important;
  background:rgba(37,55,133,.05)!important;
  border:1px solid rgba(37,55,133,.12)!important;
  color:#253785!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
.hbj-product-page .hbj-logomat-upload-row span{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.hbj-product-page .hbj-logomat-upload-row button{
  flex:0 0 auto!important;
  width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:999px!important;
  background:rgba(37,55,133,.10)!important;
  color:#253785!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
  padding:0!important;
}
.hbj-product-page .hbj-logomat-upload-row button:hover{
  background:rgba(143,190,33,.22)!important;
}


/* v8.0.20: desktop-only landscape LogoMat layout.
   Only moves the desktop landscape UI so the preview can grow above two control columns.
   Preview internals, overlay alignment, logo/text positions and mobile/tablet behavior are untouched. */
@media(min-width:1025px){
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:
      "orientation orientation"
      "preview preview"
      "color texttools"
      "file texttools"
      "logosize texttools"
      "later comment" !important;
    gap:12px 18px!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;
    margin-bottom:0!important;
    max-width:420px!important;
  }

  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-preview.is-logomat-orientation-landscape{
    grid-area:preview!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    aspect-ratio:8 / 3.55!important;
    margin:0 auto!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;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!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;
  }
}

@media(min-width:1025px) and (max-width:1280px){
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-grid{
    gap:10px 14px!important;
  }
  .hbj-product-page .hbj-logomat-options.is-logomat-orientation-landscape .hbj-logomat-text-tools{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* v8.0.21: restore related-products grid only.
   Desktop: 3 smaller cards. Tablet: 2 + 1. Mobile: stacked with side padding.
   Scoped only to Du kanske också är intresserad av; no configurator/designer/pricing changes. */
.hbj-product-page .hbj-related-products{
  width:100%!important;
  max-width:1040px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
.hbj-product-page .hbj-related-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}
.hbj-product-page .hbj-related-products .hbj-product-card{
  width:100%!important;
  max-width:100%!important;
}
@media(min-width:641px) and (max-width:1024px){
  .hbj-product-page .hbj-related-products{
    max-width:760px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .hbj-product-page .hbj-related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  .hbj-product-page .hbj-related-products{
    max-width:100%!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .hbj-product-page .hbj-related-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
}

/* v8.0.22: restore main webshop product grid only.
   Applies only to the /shop/ webshop overview, not product pages, related products,
   LogoMat designer, calculator, cart or checkout. */
.hbj-webshop .hbj-shop-all-products > .hbj-product-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  align-items:stretch!important;
}
@media(min-width:641px) and (max-width:1024px){
  .hbj-webshop .hbj-shop-all-products > .hbj-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  .hbj-webshop .hbj-shop-all-products > .hbj-product-grid{
    grid-template-columns:1fr!important;
  }
}


/* v8.0.23: prevent uploaded LogoMat logo images from opening as files after mobile drag/tap. */
.hbj-product-page .hbj-logomat-logo-slot.has-logo-image img{
  pointer-events:none!important;
  -webkit-user-drag:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}


/* v9.0.109: native orientation surfaces only.
   Landscape now uses its own 8:5 source image and square uses a true 1:1 stage.
   The outer responsive preview cards keep their existing layout; only the
   internal mat surface is fitted and centered by logomat-designer.js. */
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square{
  align-self:start!important;
  justify-self:center!important;
}
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-stage,
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-stage{
  inset:auto!important;
  right:auto!important;
  bottom:auto!important;
  aspect-ratio:auto!important;
}
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-mat,
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-mat{
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  transform:none!important;
  transform-origin:center center!important;
  object-fit:contain!important;
}
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-landscape .hbj-logomat-color-layer,
.hbj-product-page .hbj-logomat-preview.is-logomat-orientation-square .hbj-logomat-color-layer{
  inset:0!important;
  left:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  transform-origin:center center!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  -webkit-mask-size:auto!important;
  mask-size:auto!important;
}


/* v9.0.120: orientation/shape switch veil only.
   Keep the preview stage completely hidden until the new native mat asset is
   decoded and its logical stage has completed layout. Geometry is unchanged. */
.hbj-product-page .hbj-logomat-preview-switch-loader{
  position:absolute!important;
  inset:0!important;
  z-index:40!important;
  overflow:hidden!important;
  border-radius:inherit!important;
  background:linear-gradient(135deg,rgba(239,243,253,.99),rgba(230,236,249,.99))!important;
  box-shadow:inset 0 0 0 1px rgba(37,55,133,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .12s ease,visibility 0s linear .12s!important;
}
.hbj-product-page .hbj-logomat-preview-switch-loader:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(110deg,transparent 16%,rgba(37,55,133,.08) 34%,rgba(255,255,255,.92) 50%,rgba(37,55,133,.05) 66%,transparent 84%)!important;
  transform:translateX(-100%);
}
.hbj-product-page .hbj-logomat-preview.is-switching-orientation .hbj-logomat-preview-switch-loader{
  opacity:1!important;
  visibility:visible!important;
  transition:opacity .08s ease!important;
}
.hbj-product-page .hbj-logomat-preview.is-switching-orientation .hbj-logomat-stage{
  visibility:hidden!important;
}
.hbj-product-page .hbj-logomat-preview.is-switching-orientation .hbj-logomat-preview-switch-loader:after{
  animation:hbjLogoMatPreviewSwitchLoading .72s linear infinite!important;
}
@keyframes hbjLogoMatPreviewSwitchLoading{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}
@media(prefers-reduced-motion:reduce){
  .hbj-product-page .hbj-logomat-preview.is-switching-orientation .hbj-logomat-preview-switch-loader:after{
    animation:none!important;
  }
}


/* v9.0.182: mobile text-colour controls use the same viewport-stable bounds as text editing. */
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-text-color-field,
  .hbj-product-page .hbj-logomat-text-color-field .hbj-text-color-control{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/* v9.0.186: keep the existing preview switch shimmer clearly visible on tablet/desktop
   during very fast cached mat switches, without delaying the switch itself. */
@media(min-width:641px){
  .hbj-product-page .hbj-logomat-preview.is-switching-orientation .hbj-logomat-preview-switch-loader:after{
    animation-duration:.46s!important;
  }
}


/* v9.0.202: raster quality warning stays inside the LogoMat preview instead of covering the page.
   The acknowledgement card uses the same neutral liquid-glass button language as the side-cart continue button.
   A single shimmer sweep draws attention without implying that anything is still loading. */
.hbj-product-page .hbj-logomat-quality-dialog-layer{
  position:absolute!important;
  inset:0!important;
  z-index:2147482000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  padding:14px!important;
  background:rgba(13,27,46,.10)!important;
  -webkit-backdrop-filter:blur(2px) saturate(108%)!important;
  backdrop-filter:blur(2px) saturate(108%)!important;
}
.hbj-product-page .hbj-logomat-quality-dialog{
  position:relative!important;
  width:min(390px,calc(100% - 8px))!important;
  max-width:100%!important;
  max-height:calc(100% - 8px)!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  padding:18px!important;
  border:1px solid rgba(255,255,255,.70)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.76)!important;
  -webkit-backdrop-filter:blur(22px) saturate(155%)!important;
  backdrop-filter:blur(22px) saturate(155%)!important;
  box-shadow:0 18px 50px rgba(19,43,69,.20),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(37,55,133,.08)!important;
  color:#132b45!important;
  text-align:left!important;
  isolation:isolate!important;
}
.hbj-product-page .hbj-logomat-quality-dialog::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.70) 49%,transparent 78%)!important;
  transform:translateX(-120%)!important;
  animation:hbjLogoQualityDialogShimmer .82s ease-out 1 both!important;
}
@keyframes hbjLogoQualityDialogShimmer{
  to{transform:translateX(120%)}
}
.hbj-product-page .hbj-logomat-quality-dialog > *{
  position:relative!important;
  z-index:4!important;
}
.hbj-product-page .hbj-logomat-quality-dialog-kicker{
  display:block!important;
  margin:0 0 5px!important;
  color:#253785!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
  line-height:1.2!important;
  text-transform:uppercase!important;
}
.hbj-product-page .hbj-logomat-quality-dialog strong{
  display:block!important;
  margin:0!important;
  color:#132b45!important;
  font-size:19px!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
  line-height:1.15!important;
}
.hbj-product-page .hbj-logomat-quality-dialog p{
  margin:8px 0 14px!important;
  color:#33475b!important;
  font-size:13.5px!important;
  font-weight:650!important;
  line-height:1.42!important;
}
.hbj-product-page .hbj-logomat-quality-dialog button{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  min-height:44px!important;
  margin:0!important;
  padding:10px 16px!important;
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.16)!important;
  background-image:none!important;
  color:#253785!important;
  box-shadow:0 12px 34px rgba(23,32,51,.13),inset 0 1px 0 rgba(255,255,255,.82),inset 0 -1px 0 rgba(37,55,133,.08)!important;
  -webkit-backdrop-filter:blur(16px) saturate(155%)!important;
  backdrop-filter:blur(16px) saturate(155%)!important;
  font:inherit!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.2!important;
  cursor:pointer!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.hbj-product-page .hbj-logomat-quality-dialog button:hover,
.hbj-product-page .hbj-logomat-quality-dialog button:focus,
.hbj-product-page .hbj-logomat-quality-dialog button:focus-visible,
.hbj-product-page .hbj-logomat-quality-dialog button:active{
  transform:scale(1.025)!important;
  border-color:rgba(255,255,255,.30)!important;
  background:rgba(255,255,255,.16)!important;
  color:#253785!important;
  box-shadow:0 20px 48px rgba(23,32,51,.17),0 8px 22px rgba(37,55,133,.13),inset 0 1px 0 rgba(255,255,255,.86),inset 0 -1px 0 rgba(37,55,133,.08)!important;
}
.hbj-product-page .hbj-logomat-quality-dialog button:focus-visible{
  outline:3px solid rgba(143,190,33,.42)!important;
  outline-offset:3px!important;
}
@media(max-width:640px){
  .hbj-product-page .hbj-logomat-quality-dialog-layer{
    padding:10px!important;
  }
  .hbj-product-page .hbj-logomat-quality-dialog{
    width:min(330px,calc(100vw - 28px))!important;
    max-width:none!important;
    max-height:min(320px,calc(100dvh - 120px))!important;
    padding:15px!important;
    border-radius:17px!important;
  }
  .hbj-product-page .hbj-logomat-quality-dialog strong{
    font-size:17px!important;
  }
  .hbj-product-page .hbj-logomat-quality-dialog p{
    margin:7px 0 12px!important;
    font-size:12.5px!important;
    line-height:1.38!important;
  }
  .hbj-product-page .hbj-logomat-quality-dialog button{
    min-height:42px!important;
    font-size:13px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .hbj-product-page .hbj-logomat-quality-dialog::after{
    animation:none!important;
    display:none!important;
  }
}