/* Keep the main bar available while the department row scrolls with the page. */
:root{--store-header-height:111px}
html{scroll-padding-top:calc(var(--store-header-height) + 20px)}
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  color:#fff;
  background:#20211e;
  border-bottom:3px solid var(--yellow);
  box-shadow:0 5px 20px #12140f20;
}
.site-header .header-main{height:108px;gap:26px}
.site-header .brand,.site-header .brand img{width:146px}
.site-header .brand img{height:96px}
.site-header .search{
  height:50px;
  min-width:0;
  margin-left:10px;
  border:1px solid #55564b;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
}
.site-header .search:focus-within{border-color:var(--yellow);box-shadow:0 0 0 3px #ffd32b35}
.site-header .search input{font-size:13px;padding-left:17px;border-radius:8px 0 0 8px;outline:none}
.site-header .search input::placeholder{color:#717468;opacity:1}
.site-header .search>button{width:50px;flex-shrink:0;margin:4px;border-radius:5px;background:var(--yellow);color:#20211e}
.site-header .search>button:hover{background:#ffe675}
.site-header .search-popup{color:var(--ink);max-height:min(70dvh,calc(100dvh - var(--store-header-height) - 24px))}
.site-header .header-button{min-height:52px;padding:6px 8px;border:1px solid transparent;border-radius:9px}
.site-header .header-button:hover,.site-header .account[aria-expanded="true"]{color:#fff;background:#34352e;border-color:#515247}
.site-header .header-icon{width:44px;height:44px;flex-basis:44px;color:#20211e;background:var(--yellow);border-color:var(--yellow);border-radius:10px}
.site-header .header-button:hover .header-icon,.site-header .account[aria-expanded="true"] .header-icon{background:#ffe675;border-color:#ffe675}
.site-header .header-label small{color:#c1c3b8;font-size:10px}
.site-header .header-label strong{color:#fff;font-size:13px}
.site-header .account>.icon{color:var(--yellow)}
.site-header .header-contact{flex-shrink:0;background:var(--yellow);color:#20211e;padding-right:15px;border-color:var(--yellow)}
.site-header .header-contact .header-icon{background:transparent;border-color:#20211e30}
.site-header .header-contact .header-label small{color:#535025}
.site-header .header-contact .header-label strong{color:#20211e}
.site-header .header-contact:hover{background:#ffe675;border-color:#ffe675;color:#20211e}
.site-header :is(a,button):focus-visible{outline:3px solid #fff;outline-offset:3px}
.site-header .search>button:focus-visible{outline-color:#20211e;outline-offset:1px}
.site-header .search-popup a:focus-visible{outline-color:#a77a00;outline-offset:-3px}
.customer-intro{top:calc(var(--store-header-height) + 24px)}

@media(max-width:1100px){
  .site-header .header-main{gap:18px}
  .site-header .search{margin-left:0}
  .site-header .header-button{padding:5px}
  .site-header .header-contact{padding:5px;background:transparent;border-color:transparent}
  .site-header .header-contact .header-icon{background:var(--yellow);border-color:var(--yellow)}
  .site-header .header-contact:hover{background:#34352e;border-color:#515247}
}
@media(max-width:800px){
  :root{--store-header-height:91px}
  .site-header .header-main{height:88px;gap:12px}
  .site-header .brand,.site-header .brand img{width:116px}
  .site-header .brand img{height:78px}
  .site-header .search input{font-size:16px;padding-left:12px}
}
@media(max-width:560px){
  :root{--store-header-height:143px}
  .site-header .header-main{height:140px;min-height:0;grid-template-rows:76px 50px;gap:0 12px;padding:0 0 14px}
  .site-header .brand,.site-header .brand img{width:108px}
  .site-header .brand img{height:72px}
  .site-header .search{height:50px}
  .site-header .search input{font-size:16px;padding-left:12px}
  .site-header .search>button{width:42px;margin:4px}
  .site-header .header-icon{width:42px;height:42px;flex-basis:42px}
  .site-header .header-button{min-height:50px;padding:3px}
  .site-header .search-popup{min-width:0;top:calc(100% + 7px)}
}