/* ==========================================================================
   Outtabounds — Header rebuild  v1  |  2026-07-13
   Styles the new header.rain (ob-hd-* markup). Sticky header, black promo bar,
   logo on its own row, prominent search, nav on a separate row. Desktop >=992px
   is the full layout; <992px collapses to a compact mobile bar (burger + logo +
   bag + phone icon) while the existing Sidr drawer handles mobile navigation.
   Load via custom.rain:  <link rel="stylesheet" href="{{ 'ob-header.css' | url_asset }}">
   ========================================================================== */

:root { --ob-orange:#e77817; --ob-orange-d:#c4630c; --ob-ink:#1a1a1a; --ob-muted:#6b6b6b; --ob-line:#e6e6e6; --ob-max:1240px; }

/* sticky whole header */
#header.ob-hd {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 1000;
  background: #fff; width: 100%; padding: 0; margin: 0; box-shadow: 0 1px 0 var(--ob-line);
}
#header.ob-hd .container { max-width: none; width: auto; padding: 0; }
#header.ob-hd a { text-decoration: none; }
#header.ob-hd svg { display: block; }

/* ---- promo / USP bar (reuses .topnav USP list) ---- */
#header.ob-hd .ob-usp { background:#000; margin:0; padding:9px 12px; }
#header.ob-hd .ob-usp ul { display:flex; justify-content:center; gap:26px; list-style:none; margin:0; padding:0; }
#header.ob-hd .ob-usp li { color:#fff; font-family:'Hind',sans-serif; font-size:13px; font-weight:700; letter-spacing:.3px; }
#header.ob-hd .ob-usp .glyphicon { display:none; }

/* ---- main header row ---- */
#header.ob-hd .ob-hd-main { background:#fff; border-bottom:1px solid var(--ob-line); }
#header.ob-hd .ob-hd-inner { max-width:var(--ob-max); margin:0 auto; padding:16px 20px; display:flex; align-items:center; gap:22px; }
#header.ob-hd .ob-logo { flex:0 0 auto; }
#header.ob-hd .ob-logo img { display:block; height:56px; width:auto; }
#header.ob-hd .ob-logo .seo { position:absolute; left:-9999px; }

#header.ob-hd .ob-loc { display:flex; align-items:center; gap:8px; white-space:nowrap; color:var(--ob-ink); }
#header.ob-hd .ob-loc:hover { color:var(--ob-orange); }
#header.ob-hd .ob-loc svg { width:20px; height:20px; }
#header.ob-hd .ob-loc-t { display:flex; flex-direction:column; line-height:1.1; }
#header.ob-hd .ob-loc-t b { font-family:'Dosis',sans-serif; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.4px; }
#header.ob-hd .ob-loc-t em { font-style:normal; font-size:12px; color:var(--ob-muted); }

#header.ob-hd .ob-search { flex:1 1 auto; position:relative; min-width:140px; }
#header.ob-hd .ob-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#9a9a9a; }
#header.ob-hd .ob-search input { width:100%; height:46px; border:2px solid #d8d8d8; border-radius:6px; padding:0 16px 0 44px; font-family:'Hind',sans-serif; font-size:15px; color:var(--ob-ink); outline:none; }
#header.ob-hd .ob-search input:focus { border-color:var(--ob-orange); }

#header.ob-hd .ob-hd-util { display:flex; align-items:center; gap:16px; flex:0 0 auto; }
#header.ob-hd .ob-hd-util a { display:flex; align-items:center; color:var(--ob-ink); }
#header.ob-hd .ob-hd-util a:hover { color:var(--ob-orange); }
#header.ob-hd .ob-hd-util svg { width:22px; height:22px; }
#header.ob-hd .ob-hd-util .ob-phone { display:none; }   /* desktop: phone is on the nav row */
#header.ob-hd .ob-flag svg, #header.ob-hd .ob-flag img { display:block; width:26px; height:18px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
#header.ob-hd .ob-bag { position:relative; gap:6px; }
#header.ob-hd .ob-bag-total { font-family:'Dosis',sans-serif; font-weight:700; font-size:13px; }
#header.ob-hd .ob-service { background:var(--ob-orange); color:#fff !important; font-family:'Dosis',sans-serif; font-weight:700; font-size:14px; letter-spacing:.5px; text-transform:uppercase; padding:11px 18px; border-radius:3px; white-space:nowrap; }
#header.ob-hd .ob-service:hover { background:var(--ob-orange-d); }

/* ---- nav row (styles the theme's .navbar into a horizontal bar) ---- */
#header.ob-hd .ob-hd-nav { background:#fff; border-bottom:1px solid var(--ob-line); }
#header.ob-hd .ob-hd-nav .ob-hd-inner { padding:0 20px; max-width:none; }   /* nav uses full width so all items fit */
#header.ob-hd .ob-hd-nav .navbar { display:flex; align-items:stretch; gap:2px; list-style:none; margin:0; padding:0; float:none; width:auto; }
#header.ob-hd .ob-hd-nav .navbar > li.item { position:static; float:none; background:none; }
/* style ALL top-level nav links (classed .item links AND plain links like Brands) */
#header.ob-hd .ob-hd-nav .navbar > li > a {
  display:flex; align-items:center; height:50px; padding:0 12px;
  font-family:'Dosis',sans-serif; font-weight:700; font-size:15px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--ob-ink); border-bottom:3px solid transparent; white-space:nowrap;
}
#header.ob-hd .ob-hd-nav .navbar > li > a:hover { color:var(--ob-orange); border-bottom-color:var(--ob-orange); }
/* kill any theme caret on top-level links (pseudo-elements AND injected caret elements) */
#header.ob-hd .ob-hd-nav .navbar > li > a::after,
#header.ob-hd .ob-hd-nav .navbar > li > a::before,
#header.ob-hd .ob-hd-nav .navbar > li::after,
#header.ob-hd .ob-hd-nav .navbar > li::before { content:none !important; }
#header.ob-hd .ob-hd-nav .navbar > li > a b,
#header.ob-hd .ob-hd-nav .navbar > li > a i,
#header.ob-hd .ob-hd-nav .navbar > li .caret { display:none !important; }
#header.ob-hd .ob-hd-nav .navbar > li.item.home { display:none; }   /* hide "Home" text item; logo links home */
/* SALE in orange — matched by JS adding .ob-sale, or by href */
#header.ob-hd .ob-hd-nav .navbar > li.item.ob-sale > a,
#header.ob-hd .ob-hd-nav .navbar > li.item > a[href*="/sale"] { color:var(--ob-orange); }

#header.ob-hd .ob-nav-phone { margin-left:auto; display:flex; align-items:center; gap:8px; font-family:'Dosis',sans-serif; font-weight:700; font-size:15px; color:var(--ob-ink); white-space:nowrap; padding-left:12px; }
#header.ob-hd .ob-nav-phone svg { width:17px; height:17px; }
#header.ob-hd .ob-nav-phone:hover { color:var(--ob-orange); }

/* Header phase: keep the theme's submenus hidden. The theme's own hide/position
   CSS was scoped to the old header path and no longer matches once .navbar moves
   here, so hide them explicitly. The mega-menu phase adds the real dropdown panels. */
#header.ob-hd .ob-hd-nav .navbar .subnav { display: none; }

/* burger hidden on desktop */
#header.ob-hd .ob-burger { display:none; }

/* ==========================================================================
   MOBILE  (<992px)  — compact bar; Sidr drawer handles navigation
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Mobile bar per Amber: hamburger (left) · logo (centre) · phone + cart (right),
     with the search bar full-width on its own row below. Grid gives a true-centred
     logo regardless of the icon widths on either side. */
  #header.ob-hd .ob-hd-main .ob-hd-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* equal sides -> logo truly centred */
    grid-template-areas: "burger logo util" "search search search";
    align-items: center;
    column-gap: 12px; row-gap: 10px;
    padding: 10px 14px;
  }
  #header.ob-hd .ob-burger { grid-area: burger; justify-self: start; display:flex; align-items:center; font-size:22px; color:var(--ob-ink); }
  #header.ob-hd .ob-logo { grid-area: logo; justify-self: center; margin:0; }
  #header.ob-hd .ob-logo img { height:40px; }
  #header.ob-hd .ob-hd-util { grid-area: util; justify-self: end; gap:16px; }
  #header.ob-hd .ob-search { grid-area: search; flex:none; width:100%; min-width:0; }
  #header.ob-hd .ob-loc { display:none; }

  /* show phone icon; hide flag / account / Service Shop on mobile.
     NOTE: these must be scoped under .ob-hd-util to out-specify the
     `.ob-hd-util a { display:flex }` rule, otherwise the links stay visible. */
  #header.ob-hd .ob-hd-util .ob-phone { display:flex; }
  #header.ob-hd .ob-hd-util .ob-flag,
  #header.ob-hd .ob-hd-util .ob-service,
  #header.ob-hd .ob-hd-util .ob-acct { display:none; }
  #header.ob-hd .ob-bag-total { display:none; }

  /* desktop nav row hidden on mobile; the mobile menu handles navigation */
  #header.ob-hd .ob-hd-nav { display:none; }
}

/* phone: number hidden on mobile, icon only (if the phone is ever shown on mobile) */
@media (max-width: 991.98px) { #header.ob-hd .ob-nav-phone .num { display:none; } }