/* ═══════════════════════════════════════════════════════
   SPRINT DRIVES — BRAND LAYER (v10.7)
   Loaded on every page, after style.css.

   Brings the header, the trust bar and the type in line
   with the homepage. The header markup is untouched: live
   search, the mega menu, the cart drawer and the mobile
   bottom bar all keep working, they just wear the new
   clothes.

   No shadows. 24px minimum mobile horizontal padding.
═════════════════════════════════════════════════════════ */

:root{
  --sd-indigo:#2a2c7b;
  --sd-indigo-dk:#1c1d55;
  --sd-indigo-xdk:#14152e;
  --sd-green:#cedc49;
  --sd-green-dk:#b9c53f;
  --sd-amber:#e08a1e;
  --sd-line:#d9d9d4;
}

/* ── Type ─────────────────────────────────────────────
   Archivo is a text face as well as a display face, so it
   needs tighter tracking at large sizes and none at small.
   Anton was condensed and carried its own rhythm. */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1{ font-size:clamp(26px,3.4vw,40px); }
h2{ font-size:clamp(21px,2.4vw,29px); }
h3{ font-size:clamp(17px,1.7vw,21px); }
h4,h5,h6{ letter-spacing:-.01em; }

/* Anything that genuinely wants caps asks for it by name now
   that the global uppercase is gone. */
.sd-caps,
.hdr-nav-link,
.hdr-drop-head,
.mega-title{ text-transform:uppercase; letter-spacing:.05em; font-weight:800; }

/* ═══ ANNOUNCEMENT MARQUEE ═══ */
.sd-announce{
  background:var(--sd-indigo-xdk);
  color:#c9cae4;
  font-size:12px;
  font-weight:500;
}
.sd-announce strong{ color:var(--sd-green); font-weight:800; }
.sd-announce i{ color:rgba(255,255,255,.28); }

/* ═══ HEADER ═══ */
#site-header .hdr-top{ background:var(--sd-indigo-dk); }
#site-header .hdr-top-inner{ gap:16px; }

#site-header .hdr-search{ border-radius:4px; overflow:hidden; border:none; }
#site-header .hdr-search-input{
  border:none;
  padding:12px 14px;
  font-size:14px;
  font-family:inherit;
}
#site-header .hdr-search-btn{
  background:var(--sd-green);
  color:var(--sd-indigo-dk);
  padding:0 20px;
  min-width:56px;
  font-weight:800;
}
#site-header .hdr-search-btn svg{ stroke:var(--sd-indigo-dk); }

#site-header .hdr-action-btn,
#site-header .hdr-action-label{ color:#fff; }
#site-header .hdr-action-btn{ min-height:44px; min-width:44px; }
#site-header .hdr-action-btn:hover,
#site-header .hdr-action-btn:hover .hdr-action-label{ color:var(--sd-green); }
#site-header .hdr-cart-badge{
  background:var(--sd-green);
  color:var(--sd-indigo-dk);
  font-weight:800;
}
#site-header .hdr-cta{
  background:var(--sd-green);
  color:var(--sd-indigo-dk);
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:12.5px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
#site-header .hdr-burger span,
#site-header .hdr-burger i{ background:#fff; }

/* ── Category nav ── */
#site-header .hdr-nav{ background:var(--sd-indigo-xdk); }
#site-header .hdr-nav-inner{ align-items:stretch; }
#site-header .hdr-nav-links{ align-items:stretch; }
#site-header .hdr-nav-link{
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-bottom:3px solid transparent;
}
#site-header .hdr-nav-link:hover{ color:var(--sd-green); border-bottom-color:var(--sd-green); }
#site-header .hdr-nav-link--hot{ color:var(--sd-green); }

/* ═══ TRUST BAR
   Shown on every page now. On mobile the old five across
   layout squeezed each item to a couple of characters. It
   now scrolls horizontally with proper touch targets, so
   nothing is truncated and nothing is hidden.
═════════════════════════════════════════════════════════ */
.usp-bar{
  background:#fff;
  border-bottom:1px solid var(--sd-line);
}
.usp-bar-inner{
  display:flex;
  align-items:stretch;
  max-width:1560px;
  margin:0 auto;
  padding:0 16px;
}
.usp-item{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 10px;
  font-size:12px;
  font-weight:600;
  color:#0e0f1a;
  text-align:center;
  white-space:nowrap;
}
.usp-item strong{ color:var(--sd-indigo); font-weight:800; }
.usp-item svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
  fill:none;
  stroke:var(--sd-indigo);
  stroke-width:1.7;
}
.usp-sep{ width:1px; background:var(--sd-line); flex:0 0 auto; }

@media (max-width:900px){
  .usp-bar-inner{
    padding:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .usp-bar-inner::-webkit-scrollbar{ display:none; }
  .usp-item{
    flex:0 0 auto;
    scroll-snap-align:start;
    padding:12px 18px;
    font-size:12.5px;
    min-height:44px;
  }
  .usp-item:first-child{ padding-left:24px; }   /* 24px mobile floor */
  .usp-item:last-child{ padding-right:24px; }
  .usp-sep{ margin:10px 0; }
}

/* ═══ HEADER ACTION TABS ═══ */
.hdr-nav-tabs{ margin-left:auto; display:flex; align-self:stretch; }
.hdr-tab{
  display:flex;
  align-items:center;
  padding:0 20px;
  min-height:44px;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hdr-tab--van{ background:var(--sd-green); color:var(--sd-indigo-dk); }
.hdr-tab--multi{ background:#fff; color:var(--sd-indigo-dk); }
.hdr-tab--pro{ background:var(--sd-amber); color:#fff; }
.hdr-tab:hover{ filter:brightness(.94); }

@media (max-width:980px){
  .hdr-nav-tabs{ margin-left:0; width:100%; }
  .hdr-tab{ flex:1; justify-content:center; padding:0 8px; font-size:11px; }
}

/* ═══ MOBILE MENU AND BOTTOM BAR ═══ */
.mob-menu{ background:var(--sd-indigo-dk); }
.mob-menu a{ color:#fff; min-height:44px; display:flex; align-items:center; }
.mob-menu a:active{ color:var(--sd-green); }
.mob-bottom-nav{ background:var(--sd-indigo-dk); border-top:1px solid rgba(255,255,255,.12); }
.mob-bottom-item{ color:#fff; min-height:52px; }
.mob-bottom-item svg{ stroke:currentColor; fill:none; }
.mob-bottom-item:active{ color:var(--sd-green); }