/* QT-144 canonical shared storefront header.
   Home and detail use the same markup, geometry and interaction layer.
   Page-specific styles must not redefine these selectors. */

html, body{
  background-color:#fff!important;
  color-scheme:light!important;
}

.yf-shared-mobile-header{
  direction:ltr!important;
  font-family:inherit;
}
.yf-shared-mobile-header[data-yf-locale-ready="0"]{visibility:hidden!important}
.yf-shared-mobile-header .yf-shared-search-form{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
}
.yf-shared-mobile-header .yf-header-brand{
  border:0!important;
  outline:0!important;
  cursor:pointer!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  font-family:inherit!important;
}
.yf-shared-mobile-header .yf-header-brand img{pointer-events:none!important}
.yf-shared-mobile-header .yf-header-brand-hidden{display:none!important}
.yf-shared-mobile-header .yf-search input{
  box-shadow:none!important;
  outline:0!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
.yf-shared-mobile-header .yf-search input:focus,
.yf-shared-mobile-header .yf-search input:focus-visible{
  box-shadow:none!important;
  outline:0!important;
}
.yf-home.yf-locale-pending .yf-grid,
.yf-home.yf-locale-pending .yf-category-seo-head,
.yf-home.yf-locale-pending .yf-load-more-wrap{visibility:hidden!important;opacity:0!important}

@media (max-width:767px){
  html,
  body{
    background:#fff!important;
  }
  html body .yf-home>.yf-search-row.yf-shared-mobile-header,
  html body .yf-detail-page>.yf-search-row.yf-shared-mobile-header{
    position:fixed!important;
    top:max(0px, env(safe-area-inset-top, 0px))!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    height:38px!important;
    min-height:38px!important;
    z-index:99999!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    align-items:center!important;
    gap:4px!important;
    margin:0!important;
    padding:2px 4px 2px!important;
    border:0!important;
    border-radius:0!important;
    background:var(--yf-brand-orange,#ff6a00)!important;
    box-sizing:border-box!important;
    transform:none!important;
    overflow:visible!important;
  }
  html body .yf-detail-page{padding-top:calc(38px + max(0px, env(safe-area-inset-top, 0px)))!important}
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"]{height:38px!important; min-height:38px!important;}

  html body .yf-shared-mobile-header .yf-search-div,
  html body .yf-shared-mobile-header .yf-lang-btn,
  html body .yf-shared-mobile-header .yf-currency-btn,
  html body .yf-shared-mobile-header .yf-menu-state{display:none!important}

  html body .yf-shared-mobile-header .yf-menu-btn{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:5px!important;
    background:transparent!important;
    color:#fff!important;
    box-shadow:none!important;
    outline:0!important;
    box-sizing:border-box!important;
    direction:ltr!important;
  }
  html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars{
    display:flex!important;
    flex:0 0 22px!important;
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    height:16px!important;
    min-height:16px!important;
    max-height:16px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:0!important;
    overflow:visible!important;
    opacity:1!important;
  }
  html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-bar{
    display:block!important;
    flex:0 0 2px!important;
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    height:2px!important;
    min-height:2px!important;
    max-height:2px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:#fff!important;
    box-shadow:none!important;
    transform:none!important;
    opacity:1!important;
  }

  html body .yf-shared-mobile-header .yf-shared-search-form{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:1 1 auto!important;
    min-width:0!important;
    height:32px!important;
    min-height:32px!important;
    margin:0 5px!important;
  }
  html body .yf-shared-mobile-header .yf-search-wrap{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:1 1 auto!important;
    align-items:center!important;
    min-width:0!important;
    height:32px!important;
    min-height:32px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:6px!important;
    background:#fff!important;
    overflow:hidden!important;
    box-shadow:none!important;
    outline:0!important;
  }
  html body .yf-shared-mobile-header .yf-search{
    position:relative!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:1 1 auto!important;
    align-items:center!important;
    min-width:0!important;
    width:100%!important;
    height:32px!important;
    min-height:32px!important;
    margin:0!important;
    padding:0 0 0 9px!important;
    border:0!important;
    border-radius:6px!important;
    background:#fff!important;
    overflow:hidden!important;
    box-shadow:none!important;
    outline:0!important;
  }
  html body .yf-shared-mobile-header .yf-search::before,
  html body .yf-shared-mobile-header .yf-search::after{display:none!important;content:none!important}
  html body .yf-shared-mobile-header .yf-search>svg:first-child{
    display:block!important;
    flex:0 0 18px!important;
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:18px!important;
    color:#9ca3af!important;
    opacity:1!important;
    pointer-events:none!important;
  }
  html body .yf-shared-mobile-header .yf-search input[type="text"]{
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    width:auto!important;
    height:30px!important;
    margin:0 5px 0 7px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#111!important;
    font-size:15px!important;
    line-height:30px!important;
    pointer-events:auto!important;
  }
  html body .yf-shared-mobile-header .yf-search input::placeholder{color:#bdbdbd!important;opacity:1!important}
  html body .yf-shared-mobile-header .yf-search-clear{
    display:none!important;
    flex:0 0 20px!important;
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:20px!important;
    min-height:20px!important;
    max-height:20px!important;
    margin:0 7px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:rgba(0,0,0,.15)!important;
    color:#fff!important;
    font-size:12px!important;
    line-height:20px!important;
    text-align:center!important;
    box-shadow:none!important;
    pointer-events:auto!important;
  }
  html body .yf-shared-mobile-header .yf-search-clear.show{display:block!important}

  html body .yf-shared-mobile-header .yf-header-brand{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:0 0 35px!important;
    width:35px!important;
    min-width:35px!important;
    max-width:35px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:3px 1px!important;
    border:0!important;
    border-radius:5px!important;
    background:transparent!important;
    color:#fff!important;
    overflow:visible!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
    user-select:none!important;
  }
  html body .yf-shared-mobile-header .yf-header-brand img{
    display:block!important;
    max-width:32px!important;
    max-height:21px!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
  }
  html body .yf-shared-mobile-header .yf-header-brand-text{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    max-width:35px!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    color:#fff!important;
    font-size:10.5px!important;
    font-weight:900!important;
    letter-spacing:.15px!important;
    line-height:1!important;
  }
  html body .yf-shared-mobile-header .yf-header-brand-fallback{display:none!important}
  html body .yf-detail-page>.yf-detail-content,
  html body .yf-detail-page .yf-detail-gallery,
  html body .yf-detail-page .yf-detail-hero{margin-top:0!important}
  html body #yfDrawer.yf-mobile-choice-drawer{top:38px!important;bottom:auto!important;transform:none!important}
}

@media (min-width:768px){
  html body .yf-home>.yf-search-row.yf-shared-mobile-header,
  html body .yf-detail-page>.yf-search-row.yf-shared-mobile-header{
    position:fixed!important;
    top:0!important;
    left:50%!important;
    right:auto!important;
    width:100%!important;
    max-width:1280px!important;
    min-height:0!important;
    height:auto!important;
    z-index:99999!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    align-items:center!important;
    gap:0!important;
    margin:0!important;
    padding:0 2px 2px 3px!important;
    transform:translateX(-50%)!important;
    border:0!important;
    border-radius:0!important;
    background:var(--yf-brand-orange,#ff6a00)!important;
    overflow:visible!important;
    box-sizing:border-box!important;
    direction:ltr!important;
  }
  html body .yf-detail-page{padding-top:37px!important}
  html body .yf-detail-page>.yf-detail-content{margin-top:0!important}

  html body .yf-shared-mobile-header .yf-menu-btn{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:0 0 30px!important;
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    height:33px!important;
    min-height:33px!important;
    max-height:33px!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    padding:0 5px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    box-shadow:none!important;
    outline:0!important;
    overflow:visible!important;
  }
  html body .yf-shared-mobile-header .yf-menu-bars{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    width:auto!important;
    height:auto!important;
    overflow:visible!important;
  }
  html body .yf-shared-mobile-header .yf-menu-bar{
    display:block!important;
    width:17px!important;
    min-width:17px!important;
    height:2px!important;
    min-height:2px!important;
    border-radius:2px!important;
    background:#fff!important;
  }
  html body .yf-shared-mobile-header .yf-menu-state{display:none!important}
  html body .yf-shared-mobile-header .yf-search-div{
    display:block!important;
    flex:0 0 1px!important;
    width:1px!important;
    max-width:1px!important;
    height:16px!important;
    max-height:16px!important;
    margin:0 2px!important;
    padding:0!important;
    background:rgba(255,255,255,.35)!important;
  }
  html body .yf-shared-mobile-header .yf-lang-btn,
  html body .yf-shared-mobile-header .yf-currency-btn{
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    height:33px!important;
    max-height:33px!important;
    padding:0 8px!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:33px!important;
    white-space:nowrap!important;
    box-shadow:none!important;
    outline:0!important;
    pointer-events:auto!important;
  }
  html body .yf-shared-mobile-header .yf-shared-search-form{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:1 1 auto!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:visible!important;
  }
  html body .yf-shared-mobile-header .yf-search-wrap{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:1 1 auto!important;
    align-items:center!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-width:0!important;
    margin-top:2px!important;
    padding:0!important;
    border:1px solid rgba(0,0,0,.08)!important;
    border-radius:5px!important;
    background:#fff!important;
    overflow:hidden!important;
    box-shadow:none!important;
    outline:0!important;
  }
  html body .yf-shared-mobile-header .yf-search{
    position:relative!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:1 1 auto!important;
    align-items:center!important;
    width:auto!important;
    max-width:none!important;
    height:33px!important;
    max-height:33px!important;
    min-width:0!important;
    padding:0 0 0 10px!important;
    margin:0!important;
    border:0!important;
    border-radius:5px!important;
    background:transparent!important;
    overflow:hidden!important;
    box-shadow:none!important;
    outline:0!important;
  }
  html body .yf-shared-mobile-header .yf-search::before,
  html body .yf-shared-mobile-header .yf-search::after{display:none!important;content:none!important}
  html body .yf-shared-mobile-header .yf-search>svg:first-child{
    display:block!important;
    flex:0 0 18px!important;
    width:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    height:18px!important;
    color:#999!important;
    opacity:1!important;
    pointer-events:none!important;
  }
  html body .yf-shared-mobile-header .yf-search input[type="text"]{
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-width:0!important;
    margin:0 7px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#111!important;
    font-size:1rem!important;
    line-height:normal!important;
    box-shadow:none!important;
    outline:0!important;
    pointer-events:auto!important;
  }
  html body .yf-shared-mobile-header .yf-search input::placeholder{color:#bdbdbd!important;opacity:1!important}
  html body .yf-shared-mobile-header .yf-search-clear{
    display:none!important;
    flex:0 0 20px!important;
    width:20px!important;
    max-width:20px!important;
    height:20px!important;
    max-height:20px!important;
    margin:0 8px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:rgba(0,0,0,.15)!important;
    color:#fff!important;
    font-size:12px!important;
    line-height:20px!important;
    text-align:center!important;
    box-shadow:none!important;
    pointer-events:auto!important;
  }
  html body .yf-shared-mobile-header .yf-search-clear.show{display:block!important}
  html body .yf-shared-mobile-header .yf-header-brand{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 61px!important;
    width:61px!important;
    min-width:61px!important;
    max-width:61px!important;
    height:33px!important;
    min-height:33px!important;
    max-height:33px!important;
    margin:2px 0 0 3px!important;
    padding:3px 5px!important;
    border:0!important;
    border-radius:5px!important;
    background:transparent!important;
    color:#fff!important;
    box-shadow:none!important;
    outline:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  html body .yf-shared-mobile-header .yf-header-brand img{
    display:block!important;
    max-width:53px!important;
    max-height:18px!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
  }
  html body .yf-shared-mobile-header .yf-header-brand-text{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    max-width:100%!important;
    color:#fff!important;
    font-size:11.25px!important;
    font-weight:900!important;
    letter-spacing:.55px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  html body .yf-shared-mobile-header .yf-header-brand-fallback{display:none!important}
}

#yfWA.yf-wa{cursor:grab!important}
#yfWA.yf-wa.yf-wa-dragging{cursor:grabbing!important}

/* QT-168: detail header follows the 960px detail canvas and keeps all controls interactive. */
@media(min-width:768px){
  html body .yf-detail-page>.yf-search-row.yf-shared-mobile-header{
    width:100%!important;
    max-width:960px!important;
  }
}
html body .yf-detail-page>.yf-shared-mobile-header,
html body .yf-detail-page>.yf-shared-mobile-header *{pointer-events:auto;}
html body .yf-detail-page>.yf-shared-mobile-header .yf-menu-bars{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
}
html body .yf-detail-page>.yf-shared-mobile-header .yf-menu-bar{
  display:block!important;width:17px!important;height:2px!important;min-height:2px!important;border-radius:2px!important;background:#fff!important;
}

/* QT-172: the multifunction control is always a three-line SVG, never a filled square from inherited span styles. */
html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  line-height:0!important;
}
html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon{
  display:block!important;
  flex:0 0 20px!important;
  width:20px!important;
  min-width:20px!important;
  max-width:20px!important;
  height:16px!important;
  min-height:16px!important;
  max-height:16px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  fill:none!important;
}
html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon path{
  fill:none!important;
  stroke:#fff!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke!important;
}


/* QT-179: unify multifunction icon geometry and refine header logo typography. */
@media (max-width:767px){
  html body .yf-home>.yf-search-row.yf-shared-mobile-header .yf-menu-btn,
  html body .yf-detail-page>.yf-search-row.yf-shared-mobile-header .yf-menu-btn{
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
  }
  html body .yf-home>.yf-search-row.yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars,
  html body .yf-detail-page>.yf-search-row.yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars{
    flex:0 0 20px!important;
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:16px!important;
    min-height:16px!important;
    max-height:16px!important;
  }
  html body .yf-home>.yf-search-row.yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon,
  html body .yf-detail-page>.yf-search-row.yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon{
    flex:0 0 20px!important;
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:16px!important;
    min-height:16px!important;
    max-height:16px!important;
  }
  html body .yf-home>.yf-search-row.yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon path,
  html body .yf-detail-page>.yf-search-row.yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon path{
    stroke-width:2.2!important;
  }
}
@media (min-width:768px){
  html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars,
  html body .yf-detail-page>.yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars{
    flex:0 0 20px!important;
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:16px!important;
    min-height:16px!important;
    max-height:16px!important;
    background:transparent!important;
  }
  html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon,
  html body .yf-detail-page>.yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon{
    flex:0 0 20px!important;
    width:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    height:16px!important;
    min-height:16px!important;
    max-height:16px!important;
    display:block!important;
    background:transparent!important;
    fill:none!important;
  }
  html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon path,
  html body .yf-detail-page>.yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon path{
    stroke-width:2.2!important;
    stroke:#fff!important;
    fill:none!important;
  }
  html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars::before,
  html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars::after,
  html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon::before,
  html body .yf-shared-mobile-header .yf-menu-btn>.yf-menu-bars>.yf-menu-icon::after{
    content:none!important;
    display:none!important;
  }
  html body .yf-shared-mobile-header .yf-header-brand-text{
    font-size:13px!important;
    font-weight:700!important;
    letter-spacing:0!important;
  }
}

/* QT-180: detail pages use a direct, always-visible navigation bar.
   Search, language, currency and multifunction controls are not rendered in detail markup. */
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"]{
  --yf-detail-nav-item-height:31px;
  background:var(--yf-brand-orange,#ff6a00)!important;
  overflow:hidden!important;
}
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav{
  display:flex!important;
  flex:1 1 auto!important;
  min-width:0!important;
  height:100%!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  direction:ltr!important;
}
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-link{
  display:flex!important;
  flex:0 1 auto!important;
  min-width:0!important;
  height:var(--yf-detail-nav-item-height,33px)!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0 12px!important;
  border:0!important;
  border-right:1px solid rgba(255,255,255,.32)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:var(--yf-detail-nav-item-height,33px)!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  box-shadow:none!important;
  outline:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-link:active{
  background:rgba(0,0,0,.09)!important;
}
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-link[hidden]{
  display:none!important;
}
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"][data-yf-auth-ready="0"] [data-yf-detail-auth]{
  visibility:hidden!important;
  pointer-events:none!important;
}
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-header-brand{
  margin-left:auto!important;
  border-left:1px solid rgba(255,255,255,.32)!important;
  border-radius:0!important;
  background:transparent!important;
}
@media (min-width:768px){
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"]{
    padding:0 2px 2px 3px!important;
  }
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-link{
    min-width:88px!important;
    padding:0 16px!important;
    font-size:13px!important;
    font-weight:700!important;
  }
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-header-brand-text{
    font-size:13px!important;
    font-weight:700!important;
    letter-spacing:0!important;
  }
}
@media (max-width:767px){
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"]{
    gap:0!important;
    padding:2px 4px!important;
  }
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav{
    height:32px!important;
  }
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-link{
    flex:1 1 auto!important;
    height:32px!important;
    padding:0 5px!important;
    font-size:clamp(9.5px,2.85vw,12px)!important;
    font-weight:700!important;
    line-height:var(--yf-detail-nav-item-height,32px)!important;
  }
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-header-brand{
    flex:0 0 35px!important;
    width:35px!important;
    min-width:35px!important;
    max-width:35px!important;
    margin:0!important;
    padding:3px 1px!important;
  }
}
@media (max-width:360px){
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-link{
    padding:0 3px!important;
    font-size:9.5px!important;
  }
}


/* QT-181: the home-link logo sizes itself from its text or image instead of using a fixed box.
   The search/navigation area remains flexible and yields only the space actually needed by the brand. */
html body .yf-shared-mobile-header .yf-header-brand{
  flex-grow:0!important;
  flex-shrink:1!important;
  width:max-content!important;
  max-width:min(220px,28vw)!important;
  min-width:35px!important;
  padding-left:7px!important;
  padding-right:7px!important;
}
html body .yf-shared-mobile-header .yf-header-brand-text{
  width:max-content!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html body .yf-shared-mobile-header .yf-header-brand-image img{
  width:auto!important;
  max-width:min(200px,26vw)!important;
  object-fit:contain!important;
}
@media (max-width:767px){
  html body .yf-home>.yf-shared-mobile-header .yf-header-brand,
  html body .yf-detail-page>.yf-shared-mobile-header .yf-header-brand{
    flex:0 1 auto!important;
    width:max-content!important;
    min-width:35px!important;
    max-width:32vw!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
  html body .yf-home>.yf-shared-mobile-header .yf-header-brand-image img,
  html body .yf-detail-page>.yf-shared-mobile-header .yf-header-brand-image img{
    width:auto!important;
    max-width:30vw!important;
    max-height:21px!important;
  }
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-header-brand{
    flex:0 1 auto!important;
    width:max-content!important;
    min-width:35px!important;
    max-width:25vw!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
}
@media (min-width:768px){
  html body .yf-shared-mobile-header .yf-header-brand{
    flex:0 1 auto!important;
    width:max-content!important;
    min-width:61px!important;
    max-width:min(220px,28vw)!important;
  }
  html body .yf-shared-mobile-header .yf-header-brand-image img{
    width:auto!important;
    max-width:min(200px,26vw)!important;
    max-height:18px!important;
  }
}


/* QT-209: calculator and freight query are first-class detail navigation items. */
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav{
  overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;
}
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav::-webkit-scrollbar{display:none!important;}
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-link{flex:0 0 auto!important;}
@media(max-width:767px){
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-link{padding:0 8px!important;font-size:10.5px!important;}
}


/* QT-3 modal chrome continues below; gallery geometry belongs only to yf-detail.css. */
html body .yf-product-msg-head,
html body .yf-sheet .yf-sheet-head,
html body .yf-service-ui-head{
  position:relative!important;
  min-height:42px!important;
  height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding-left:54px!important;
  padding-right:54px!important;
  box-sizing:border-box!important;
}
html body .yf-product-msg-head > span,
html body .yf-sheet .yf-sheet-head > span,
html body .yf-service-ui-head > h3,
html body .yf-service-ui-head > span{
  position:static!important;
  margin:0 auto!important;
  text-align:center!important;
  line-height:42px!important;
}
html body .yf-product-msg-head > .yf-product-msg-back,
html body .yf-sheet .yf-sheet-head > .yf-sheet-back,
html body .yf-service-ui-head .yf-service-back{
  position:absolute!important;
  left:12px!important;
  right:auto!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  margin:0!important;
  width:28px!important;
  height:28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html body .yf-product-msg-head > .yf-product-msg-close,
html body .yf-sheet .yf-sheet-head > .yf-sheet-close,
html body .yf-service-ui-head button[data-yf-service-close],
html body .yf-verification-notice-close{
  position:absolute!important;
  right:8px!important;
  left:auto!important;
  top:50%!important;
  transform:translateY(-50%) scale(.9)!important;
  margin:0!important;
}
html body .yf-shared-mobile-header .yf-header-brand-text,
html body .yf-header-brand .yf-header-brand-text{color:#111827!important;}


/* RELEASE-015: canonical detail navigation order.
   Desktop: Category and all functional/authentication buttons come first;
   the Logo/Home button is always the final item at the far right.
   Mobile: multifunction hamburger first, Container Calculator second,
   the middle remains empty, and the Logo/Home button sits at the far right. */
html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"]{
  padding:0 2px 2px 0!important;
  gap:0!important;
  overflow:hidden!important;
  direction:ltr!important;
}

html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav{
  display:flex!important;
  flex:1 1 100%!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:var(--yf-detail-nav-item-height,33px)!important;
  margin:2px 0 0!important;
  padding:0!important;
  gap:0!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  overflow:hidden!important;
  direction:ltr!important;
}

html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-mobile-menu{
  display:none!important;
}

html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] [data-yf-detail-auth][hidden]{
  display:none!important;
}

@media(min-width:768px){
  html body .yf-detail-page{
    padding-top:39px!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav>
  .yf-header-brand,
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav>
  .yf-detail-header-link:not([hidden]){
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:100%!important;
    margin:0!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-right:0!important;
    border-radius:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* 桌面端源顺序：分类及其余按钮依次前移，Logo 永远排在最后。
     第一项分类左侧不画线；Logo 左侧画分隔线，右侧不再产生尾线。 */
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav>
  .yf-detail-header-link:not([hidden]){
    border-left:1px solid rgba(255,255,255,.32)!important;
    border-right:0!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-category{
    order:0!important;
    border-left:0!important;
    box-shadow:none!important;
    outline:0!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-category::before,
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-category::after{
    content:none!important;
    display:none!important;
  }
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-calculator{order:1!important;}
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-freight{order:2!important;}
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-free-tools{order:3!important;}
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-contact{order:4!important;}
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-login{order:5!important;}
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-account{order:5!important;}
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-logout{order:6!important;}

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav>
  .yf-header-brand{
    order:99!important;
    margin:0!important;
    border-left:1px solid rgba(255,255,255,.32)!important;
    border-right:0!important;
  }
}

@media(max-width:767px){
  html body .yf-detail-page{
    --yf-detail-nav-item-height:32px;
    padding-top:calc(38px + max(0px, env(safe-area-inset-top, 0px)))!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"]{
    padding:2px 4px!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav{
    height:var(--yf-detail-nav-item-height,32px)!important;
    margin:0!important;
    align-items:center!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav>
  .yf-header-brand{
    order:99!important;
    display:flex!important;
    flex:0 1 auto!important;
    width:max-content!important;
    min-width:35px!important;
    max-width:31vw!important;
    height:var(--yf-detail-nav-item-height,32px)!important;
    margin:0 0 0 auto!important;
    padding:3px 5px!important;
    border:0!important;
    border-left:1px solid rgba(255,255,255,.32)!important;
    border-radius:0!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-mobile-menu{
    order:0!important;
    display:flex!important;
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:var(--yf-detail-nav-item-height,32px)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-right:1px solid rgba(255,255,255,.32)!important;
    border-radius:0!important;
    align-items:center!important;
    justify-content:center!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-calculator{
    order:1!important;
    display:flex!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:var(--yf-detail-nav-item-height,32px)!important;
    margin:0!important;
    padding:0 7px!important;
    border:0!important;
    border-radius:0!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:clamp(10px,3vw,12px)!important;
    line-height:32px!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-category,
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-freight,
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-free-tools,
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-contact,
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-login,
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-account,
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-logout{
    display:none!important;
  }
}



/* RELEASE-016: prevent the direct detail navigation from redistributing visible items during auth bootstrap. */
@media(min-width:768px){
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"][data-yf-auth-ready="0"] .yf-detail-header-nav{
    visibility:hidden!important;
  }
}

/* RELEASE-007：搜索框统一直角。
   放大镜是绝对定位的视觉图标，不参与输入框布局，不再把光标挤到右侧。 */
html body .yf-shared-mobile-header .yf-search-wrap,
html body .yf-shared-mobile-header .yf-search{
  border-radius:0!important;
  -webkit-border-radius:0!important;
}

html body .yf-shared-mobile-header .yf-search{
  position:relative!important;
  padding-left:0!important;
  padding-right:0!important;
}

html body .yf-shared-mobile-header .yf-search > svg:first-child{
  display:block!important;
  position:absolute!important;
  left:10px!important;
  top:50%!important;
  width:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  height:18px!important;
  min-height:18px!important;
  max-height:18px!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
  z-index:2!important;
  opacity:1!important;
}

html body .yf-shared-mobile-header .yf-search input[type="text"]{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0 28px 0 6px!important;
  text-indent:0!important;
  border-radius:0!important;
  box-sizing:border-box!important;
}

/* 未输入、未聚焦时，提示文字避开放大镜。
   一旦点击输入，放大镜隐藏，输入光标回到最左侧。 */
html body .yf-shared-mobile-header .yf-search:not(:focus-within):not(.yf-search-has-value) input[type="text"]{
  padding-left:34px!important;
}

html body .yf-shared-mobile-header .yf-search:focus-within > svg:first-child,
html body .yf-shared-mobile-header .yf-search.yf-search-has-value > svg:first-child{
  opacity:0!important;
  visibility:hidden!important;
}

html body .yf-shared-mobile-header .yf-search:focus-within input[type="text"],
html body .yf-shared-mobile-header .yf-search.yf-search-has-value input[type="text"]{
  padding-left:6px!important;
}


/* RELEASE-011: canonical storefront bar height and mobile calculator width */
/* RELEASE-011: canonical storefront bar height and mobile calculator width.
   Home and detail use the same outer navigation height.
   Desktop removes the redundant divider after the final authentication button. */
@media (max-width:767px){
  html body .yf-home > .yf-search-row.yf-shared-mobile-header,
  html body .yf-detail-page > .yf-search-row.yf-shared-mobile-header{
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
  }

  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"]{
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:2px 4px!important;
  }

  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav{
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32)!important;
  }

  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav > .yf-header-brand,
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-mobile-menu{
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
  }

  /* The calculator is the only standalone mobile detail function.
     Its width follows the translated label and leaves the remaining orange area empty. */
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-calculator{
    flex:0 0 auto!important;
    width:fit-content!important;
    min-width:0!important;
    max-width:calc(100vw - 126px)!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    padding:0 12px!important;
    border-right:1px solid rgba(255,255,255,.32)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
    line-height:34px!important;
  }
}

@media (min-width:768px){
  html body .yf-home > .yf-search-row.yf-shared-mobile-header,
  html body .yf-detail-page > .yf-search-row.yf-shared-mobile-header{
    height:37px!important;
    min-height:37px!important;
    max-height:37px!important;
  }

  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav{
    height:33px!important;
    min-height:33px!important;
    max-height:33px!important;
  }

  /* No divider after the final visible authentication control. */
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-login:not([hidden]),
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-logout:not([hidden]){
    border-right:0!important;
    box-shadow:none!important;
  }
}


/* RELEASE-017: remove the redundant leading divider before desktop detail Category.
   Category starts directly at the left edge; all later dividers remain unchanged. */
@media (min-width:768px){
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"]{
    padding-left:0!important;
  }

  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav{
    margin-left:0!important;
    border-left:0!important;
    box-shadow:none!important;
  }

  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-category{
    border-left:0!important;
    box-shadow:none!important;
    outline:0!important;
  }

  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-category::before,
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-category::after{
    content:none!important;
    display:none!important;
  }
}

/* RELEASE-018: canonical mobile navigation-panel origin.
   Every panel owned by the multifunction navigation starts at the viewport's
   left edge and touches the bottom edge of the fixed 38px orange header.
   This covers the main drawer, language/currency child drawer and every level
   of the category sheet. Desktop geometry and external freight/free-tool
   extensions are intentionally untouched. */
@media (max-width:767px){
  html body #yfDrawer.yf-main-nav-drawer,
  html body #yfDrawer.yf-mobile-choice-drawer{
    left:0!important;
    right:auto!important;
    top:38px!important;
    bottom:auto!important;
    margin:0!important;
    transform:none!important;
  }

  html body #yfSheet.yf-cat-top-panel,
  html body .yf-sheet.yf-cat-top-panel{
    left:0!important;
    right:auto!important;
    top:38px!important;
    bottom:auto!important;
    margin:0!important;
    transform:none!important;
  }

  html body .yf-sheet.yf-cat-top-panel.show{
    transform:none!important;
  }
}


/* RELEASE-063: desktop detail navigation width allocation.
   The logo/home item now uses the same compact width as the desktop home header
   instead of taking one equal navigation column. The released space is assigned
   mainly to Container Calculator and Freight Query so all authenticated items fit
   on one row without abbreviating the labels. Mobile navigation is unchanged. */
@media (min-width:768px){
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav>
  .yf-header-brand{
    flex:0 0 61px!important;
    width:61px!important;
    min-width:61px!important;
    max-width:61px!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav>
  .yf-detail-header-link:not([hidden]){
    flex:1 1 0!important;
    min-width:0!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-calculator{
    flex-grow:1.28!important;
    font-size:12.5px!important;
  }

  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-freight{
    flex-grow:1.08!important;
  }
}

/* RELEASE-065: desktop detail navigation keeps the home/logo item identical to the
   desktop home header and allocates the remaining width from each translated label.
   The brand is never squeezed or ellipsized. Functional buttons receive identical
   horizontal padding; their content width forms the flex basis, so short labels are
   nearly equal while longer English labels receive the extra width they need.
   Mobile and the home page are intentionally untouched. */
@media (min-width:768px){
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"]
  .yf-detail-header-nav > .yf-header-brand{
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    padding-left:7px!important;
    padding-right:7px!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }

  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"]
  .yf-detail-header-nav > .yf-header-brand .yf-header-brand-text{
    display:inline-flex!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }

  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"]
  .yf-detail-header-nav > .yf-detail-header-link:not([hidden]){
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding-left:10px!important;
    padding-right:10px!important;
    font-size:12.5px!important;
    line-height:var(--yf-detail-nav-item-height,33px)!important;
  }

  /* Remove the earlier special weighting; label length now owns the allocation. */
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"]
  .yf-detail-header-calculator,
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"]
  .yf-detail-header-freight{
    flex-grow:1!important;
  }
}

@media (min-width:768px) and (max-width:1100px){
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"]
  .yf-detail-header-nav > .yf-detail-header-link:not([hidden]){
    padding-left:5px!important;
    padding-right:5px!important;
    font-size:11px!important;
  }
}

/* RELEASE-066: final desktop-detail brand lock.
   The detail-page brand receives exactly the same 7px horizontal padding and
   intrinsic sizing as the desktop home header. It never shrinks; only functional
   navigation items yield space. Mobile and the home page are untouched. */
@media (min-width:768px){
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"]
  .yf-detail-header-nav>.yf-header-brand{
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    padding-left:7px!important;
    padding-right:7px!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"]
  .yf-detail-header-nav>.yf-header-brand .yf-header-brand-text{
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
  }
  html body .yf-detail-page>.yf-shared-mobile-header[data-yf-header-context="detail"]
  .yf-detail-header-nav>.yf-detail-header-link:not([hidden]){
    flex:1 1 auto!important;
    min-width:0!important;
  }
}


/* FINAL-20260716: full-width top separator on the outer mobile detail header. */
@media (max-width:767px){
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"]{
    position:fixed!important;
    background-image:linear-gradient(to bottom,rgba(255,255,255,.42) 0,rgba(255,255,255,.42) 1px,transparent 1px)!important;
    background-repeat:no-repeat!important;
    background-size:100% 100%!important;
    box-shadow:none!important;
  }
  html body .yf-detail-page > .yf-shared-mobile-header[data-yf-header-context="detail"] .yf-detail-header-nav{
    box-shadow:none!important;
  }
}


/* 2026-07-16 desktop storefront canvas background.
   The fixed-width storefront remains white; only the unused browser area
   outside the home/detail canvas becomes a very light gray. Mobile remains
   full-width white, and the existing inward 2px edge lines are untouched. */
@media (min-width:768px){
  html.yf-home-page-active,
  body.yf-home-page-active,
  html.yf-detail-page-active,
  body.yf-detail-page-active{
    background:#f3f3f3!important;
  }

  body.yf-home-page-active #page,
  body.yf-home-page-active .site,
  body.yf-home-page-active .site-content,
  body.yf-home-page-active .content-area,
  body.yf-home-page-active .wp-site-blocks,
  body.yf-home-page-active .entry-content,
  body.yf-home-page-active .wp-block-post-content,
  body.yf-home-page-active main,
  body.yf-detail-page-active #page,
  body.yf-detail-page-active .site,
  body.yf-detail-page-active .site-content,
  body.yf-detail-page-active .content-area,
  body.yf-detail-page-active .wp-site-blocks,
  body.yf-detail-page-active .entry-content,
  body.yf-detail-page-active .wp-block-post-content,
  body.yf-detail-page-active main{
    background:transparent!important;
  }

  html body .yf-home,
  html body .yf-detail-page{
    background:#fff!important;
  }
}