/* ===== DESKTOP ===== */

#fh-preview .fh-preview__controls{
  padding-left:16px !important;
  padding-right:16px !important;
}

#fh-preview .fh-scale-box,
#fh-preview .fh-scale-box:focus-within{
  box-shadow:none !important;
}
#fh-preview .fh-scale-input:focus,
#fh-preview input#fh-scale-percent:focus{
  box-shadow:none !important;
  outline:none !important;
}

#fh-preview .fh-scale-spinners{
  display:flex !important;
  flex-direction:column !important;
  width:26px !important;
  border-left:1px solid rgba(0,0,0,.12) !important;
}
#fh-preview .fh-scale-spinners [data-fh-spin]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:1 !important;
  cursor:pointer !important;
  font-size:11px !important;
  line-height:1 !important;
  color:rgba(0,0,0,.4) !important;
  user-select:none !important;
  transition:background-color .15s,color .15s !important;
  padding:0 !important;
  margin:0 !important;
  height:auto !important;
  min-height:0 !important;
  background-color:transparent !important;
  border-radius:0 !important;
}
#fh-preview .fh-scale-spinners [data-fh-spin=up]{
  padding-top:2px !important;
}
#fh-preview .fh-scale-spinners [data-fh-spin=down]{
  transform:rotate(180deg) !important;
  padding-top:2px !important;
}
#fh-preview .fh-scale-spinners [data-fh-spin]:hover{
  background-color:rgba(0,0,0,.07) !important;
  color:rgba(0,0,0,.7) !important;
}
#fh-preview .fh-scale:hover .fh-scale-label{
  color:#000 !important;
}

#fh-preview a.fh-preview__back{
  text-align:right !important;
  white-space:normal !important;
  line-height:1.35 !important;
  font-size:13px !important;
  color:rgba(0,0,0,.55) !important;
  text-decoration:none !important;
}
#fh-preview a.fh-preview__back:hover{
  color:#000 !important;
  text-decoration:none !important;
}

/* Back to Gallery: single line for pattern products */
#fh-preview:not(.is-mural):not([data-fh-repeat-mode=mural]) a.fh-preview__back br{
  display: none !important;
}
#fh-preview:not(.is-mural):not([data-fh-repeat-mode=mural]) a.fh-preview__back{
  white-space: nowrap !important;
}

/* =========================
   Repeat Info Bar
========================= */
#fh-preview .fh-repeat-info{
  display: flex !important;
  align-items: stretch !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  padding: 10px 16px !important;
  gap: 0 !important;
}

#fh-preview .fh-repeat-info__item{
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 0 !important;
}

#fh-preview .fh-repeat-info__label{
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,.40) !important;
}

#fh-preview .fh-repeat-info__value{
  font-size: 18px !important;
  font-weight: 300 !important;
  color: rgba(0,0,0,.75) !important;
  letter-spacing: -0.01em !important;
}

#fh-preview .fh-repeat-info__divider{
  width: 1px !important;
  background: rgba(0,0,0,.10) !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
}

/* Mobile: slightly smaller */
@media screen and (max-width: 699px) {
  #fh-preview .fh-repeat-info{
    padding: 8px 10px !important;
  }
  #fh-preview .fh-repeat-info__label{
    font-size: 9px !important;
  }
  #fh-preview .fh-repeat-info__value{
    font-size: 15px !important;
  }
}

/* =========================
   Toolbar Tooltips
========================= */
#fh-preview [data-fh-tooltip]{
  position: relative !important;
}

#fh-preview [data-fh-tooltip]::after{
  content: attr(data-fh-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 100;
}

#fh-preview [data-fh-tooltip]:hover::after{
  opacity: 1;
}

/* Hide tooltips on mobile */
@media screen and (max-width: 699px) {
  #fh-preview [data-fh-tooltip]::after{
    display: none !important;
  }
}