/* op-site-ui.css: sitewide UI (theme 392). Mobile bottom navigation (<1024px, built by op-site-ui.js) + always-visible header fixes. */
.opmn{display:none}
@media (max-width:1023px){
  html.has-opmn body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .opmn{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:58;height:calc(60px + env(safe-area-inset-bottom,0px));padding:0 4px env(safe-area-inset-bottom,0px);background:rgba(255,255,255,.97);border-top:1px solid #E8E3F0;box-shadow:0 -6px 20px rgba(17,12,34,.06);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);transition:transform .25s ease}
  .opmn__a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;height:60px;color:#5B6070;font-size:11px;font-weight:600;line-height:1.1;letter-spacing:.01em;text-decoration:none!important;-webkit-tap-highlight-color:transparent}
  .opmn__a svg{width:22px;height:22px;flex:0 0 auto}
  .opmn__a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .opmn__a.is-on{color:#6D3AE8}
  .opmn__a.is-on:before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:#6D3AE8}
  .opmn__a:active{background:rgba(109,58,232,.06)}
  .opmn__badge{position:absolute;top:7px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:#6D3AE8;color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center}
  .opmn__badge:empty{display:none}
  html.has-opmn #scroll-to-top-button{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
  html.has-opmn .rebate-bottom-bar{bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}
  html.opmn-off .opmn{transform:translateY(110%)}
  html.opmn-off body{padding-bottom:0}
}
@media print{.opmn{display:none!important}}
/* header is always visible (header setting "Always"): keep the theme's mobile collection toolbar below it instead of under it */
@media (max-width:1023px){
  .f-collection-toolbar--sticky{top:var(--f-header-height,47px)!important}
}
/* wishlist button (Product Favorites plugin sidebar): theme puts a rotated tab at mid-left that covers content.
   Re-dock it bottom-left, mirroring the back-to-top button. The plugin's own hidden state (.hidden-caption) still wins. */
.common-fave-caption-fixed{top:auto!important;bottom:86px!important;left:24px!important;transform:none!important;transform-origin:50% 50%!important;z-index:57}
.common-fave-caption-fixed.is-prodviewed{top:auto!important}
.common-fave-caption-fixed.hidden-caption{left:-100%!important}
.common-fave-caption-fixed .common-fave-caption{display:flex!important;align-items:center!important;gap:8px;height:46px!important;padding:0 16px 0 7px!important;border-radius:999px!important;line-height:1!important;letter-spacing:.04em}
.common-fave-caption-fixed .common-fave-caption .icon-box{transform:none!important;margin:0!important;flex:0 0 auto}
@media (max-width:1023px){
  .common-fave-caption-fixed{left:12px!important;bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
  html.has-opmn .common-fave-caption-fixed{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
  .common-fave-caption-fixed .common-fave-caption{width:40px!important;height:40px!important;min-width:40px!important;padding:4px!important;justify-content:center!important}
  .common-fave-caption-fixed .common-fave-caption .text{display:none!important}
}
