/* ============================================================
   HEADER V11 — calmer, thinner, showroom-first navigation
   Loaded last on public pages so it is the single authority for
   header geometry without disturbing the rest of the visual system.
   ============================================================ */
:root{
  --kb-header-main:62px;
  --kb-header-nav:40px;
}

/* Slim announcement. It scrolls away; only the navigation stays sticky. */
.announce.announce--slim{
  background:#171719;
  color:rgba(255,255,255,.88);
  border:0;
}
.announce.announce--slim::before{display:none!important;animation:none!important}
.announce.announce--slim .announce-inner{
  min-height:28px;
  padding:5px max(14px,env(safe-area-inset-right)) 5px max(14px,env(safe-area-inset-left));
  gap:14px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0;
}
.announce.announce--slim strong{font-weight:700;color:#fff}
.announce.announce--slim .announce-timer{
  display:inline-flex;
  padding:0;
  background:transparent;
  color:rgba(255,255,255,.62);
  font-family:inherit;
  font-size:10.5px;
  font-weight:500;
}
.announce.announce--slim .announce-timer i{font-size:9px;color:#7ce0b4}

.header.header--calm{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(17,24,39,.07);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  box-shadow:none;
}
.header.header--calm.scrolled{box-shadow:0 8px 28px rgba(15,23,42,.055)}
.header.header--calm .header-main{padding:8px 0}
.header.header--calm .header-row{
  display:grid;
  grid-template-columns:minmax(185px,220px) minmax(320px,1fr) auto;
  align-items:center;
  gap:18px;
  min-height:46px;
}

/* Real transparent PNG wordmark. Keep its native ratio, never crop it. */
.header.header--calm .logo--png{
  width:205px;
  min-width:0;
  display:flex;
  align-items:center;
  flex:none;
}
.header.header--calm .logo--png img{
  display:block;
  width:100%;
  max-width:205px;
  height:auto!important;
  max-height:30px;
  object-fit:contain;
  object-position:left center;
}

.header.header--calm .search-wrap{
  order:initial;
  display:block;
  width:100%;
  max-width:620px;
  margin:0 auto;
  min-width:0;
}
.header.header--calm .search{
  height:40px;
  border-radius:12px;
  background:#f6f7f8;
  border:1px solid rgba(15,23,42,.065);
  box-shadow:none;
}
.header.header--calm .search:focus-within{
  background:#fff;
  border-color:rgba(255,92,0,.45);
  box-shadow:0 0 0 3px rgba(255,92,0,.09);
}
.header.header--calm .search-select{
  font-size:11.5px;
  max-width:116px;
  padding-left:13px;
  color:#667085;
}
.header.header--calm .search-input{
  padding:0 14px;
  font-size:12.5px;
}
.header.header--calm .search-btn{
  padding:0 15px;
  background:transparent;
  color:#ff5c00;
  font-size:12px;
}
.header.header--calm .search-btn:hover{background:#fff4ec;color:#e65100}
.header.header--calm .search-btn span{display:none}
.header.header--calm .ref-search-pop{top:46px;border-radius:14px}

.header.header--calm .header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-left:0;
  min-width:0;
}
.header.header--calm .action-btn{
  width:38px;
  height:38px;
  min-width:38px;
  border:1px solid transparent;
  border-radius:11px;
  color:#475467;
  font-size:14px;
}
.header.header--calm .action-btn:hover{
  background:#f7f7f8;
  border-color:rgba(15,23,42,.06);
  color:#ff5c00;
}

.header-request{
  height:40px;
  border:1px solid #16181d;
  border-radius:11px;
  background:#16181d;
  color:#fff;
  padding:0 11px 0 13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:600 11.5px/1 'Geist',sans-serif;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.header-request:hover{background:#272a31;border-color:#272a31}
.header-request:active{transform:translateY(1px)}
.header-request i{font-size:12px;color:#ff8a3d}
.header-request__count{
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ff5c00;
  color:#fff;
  font:700 9.5px/1 'Geist Mono',monospace;
}
.header.header--calm .action-cta--quiet{
  display:inline-flex;
  height:40px;
  margin-left:0;
  padding:0 12px;
  gap:7px;
  border-radius:11px;
  background:#fff;
  color:#247b54;
  border:1px solid rgba(36,123,84,.18);
  box-shadow:none;
  font-size:11.5px;
  font-weight:600;
}
.header.header--calm .action-cta--quiet:hover{
  background:#f0faf5;
  color:#17603f;
  box-shadow:none;
  transform:none;
}

/* Primary navigation: fewer choices, text-first, low visual noise. */
.header.header--calm .nav-bar--calm{
  display:block;
  height:var(--kb-header-nav);
  border-top:1px solid rgba(15,23,42,.05);
  background:#fff;
}
.header.header--calm .nav-row{height:100%;gap:20px}
.header.header--calm .nav-list{
  height:100%;
  gap:2px;
  overflow:visible;
}
.header.header--calm .nav-list a{
  height:100%;
  padding:0 12px;
  gap:7px;
  font-size:11.75px;
  font-weight:560;
  color:#4b5565;
  letter-spacing:-.005em;
}
.header.header--calm .nav-list a::after{
  left:12px;
  right:12px;
  bottom:0;
  height:2px;
  border-radius:2px 2px 0 0;
}
.header.header--calm .nav-list a:hover,
.header.header--calm .nav-list a.is-active{color:#111318}
.header.header--calm .nav-list a.is-active::after{transform:scaleX(1)}
.header.header--calm .nav-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ff5c00;
  box-shadow:0 0 0 3px rgba(255,92,0,.10);
}
.header.header--calm .nav-stores{
  height:100%;
  padding:0 4px 0 12px;
  color:#586174;
  font-size:11.75px;
  font-weight:600;
  border-left:1px solid rgba(15,23,42,.07);
}
.header.header--calm .nav-stores:hover,
.header.header--calm .nav-stores.is-active{color:#ff5c00}
.header.header--calm .nav-stores i{font-size:11px;color:#ff5c00}

/* Drawer logo follows the same PNG treatment. */
#menuPanel .panel-head img{
  width:190px;
  max-width:calc(100% - 58px);
  height:auto;
  max-height:30px;
  object-fit:contain;
  object-position:left center;
}

@media(max-width:1180px){
  .header.header--calm .header-row{grid-template-columns:minmax(165px,190px) minmax(260px,1fr) auto;gap:12px}
  .header.header--calm .logo--png{width:185px}
  .header.header--calm .logo--png img{max-width:185px}
  .header.header--calm .action-cta--quiet span{display:none}
  .header.header--calm .action-cta--quiet{width:40px;padding:0;justify-content:center}
  .header.header--calm .nav-list a{padding:0 9px;font-size:11.3px}
}

@media(max-width:1023px){
  .header.header--calm .nav-bar--calm{display:none}
  .header.header--calm .header-row{
    display:grid;
    grid-template-columns:minmax(160px,1fr) auto;
    gap:8px 10px;
  }
  .header.header--calm .logo--png{width:190px;max-width:100%}
  .header.header--calm .search-wrap{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    max-width:none;
    margin:0;
  }
  .header.header--calm .search{height:40px}
  .header.header--calm .header-actions{grid-column:2;grid-row:1}
  .header.header--calm .menu-btn{display:inline-flex}
  .header.header--calm .header-utility--track{display:inline-flex}
  .header.header--calm .action-cta--quiet{display:none}
}

@media(max-width:767px){
  .announce.announce--slim .announce-inner{min-height:25px;padding-top:4px;padding-bottom:4px;font-size:9.5px}
  .announce.announce--slim .announce-timer{display:none}
  .header.header--calm .header-main{padding:7px 0 8px}
  .header.header--calm .header-row{grid-template-columns:minmax(135px,1fr) auto;gap:7px 8px}
  .header.header--calm .logo--png{width:172px}
  .header.header--calm .logo--png img{max-width:172px;max-height:24px}
  .header.header--calm .header-actions{gap:3px}
  .header.header--calm .header-utility--track{display:none}
  .header.header--calm .search-toggle{display:none}
  .header-request{width:40px;min-width:40px;height:40px;padding:0;justify-content:center;border-radius:11px}
  .header-request__label{display:none}
  .header-request__count{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border:2px solid #fff;font-size:8px}
  .header-request{position:relative}
  .header.header--calm .action-btn{width:40px;height:40px;min-width:40px}
  .header.header--calm .search{border-radius:10px}
  .header.header--calm .search-select{display:none}
  .header.header--calm .search-input{font-size:12px;padding:0 12px}
  .header.header--calm .search-btn{width:40px;padding:0;justify-content:center}
}

@media(max-width:390px){
  .header.header--calm .logo--png{width:148px}
  .header.header--calm .logo--png img{max-width:148px;max-height:22px}
  .header.header--calm .header-actions{gap:2px}
  .header.header--calm .action-btn,
  .header-request{width:38px;min-width:38px;height:38px}
}

@media(prefers-reduced-motion:reduce){
  .header.header--calm *,
  .announce.announce--slim *{transition:none!important;animation:none!important}
}