/* ============================================================================
   DAS TOP NAV - a 1:1 port of the Off Duty Not Driving marketing nav.
   Jayden 2026-09-19: "same top nav design as off duty not driving and the way
   their menu looks when it pops out the photos ... same font and aesthetic just
   change the logo."

   Source: odndr-web/lib/marketing-chrome.ts (BRANDED_NAV_HTML). Selectors keep
   their .odn-* names so the two navs stay diffable against each other.

   Not ported: the @font-face block (it points at /fonts/*.woff2 files that exist
   only in odndr-web - DAS loads Manrope from Google Fonts), and every
   #odst-statement / .elementor-* rule (those tame Off Duty's cloned WordPress
   page and mean nothing here).

   BRAND NOTE: BRAND-KIT.md makes Anton + Chivo the DAS type law and says the two
   brands are deliberately different. Manrope here is a deliberate exception
   Jayden asked for ("same font"), scoped to .odn-root so it cannot leak.
   ============================================================================ */
.odn-root{font-family:'Manrope','Roboto',system-ui,-apple-system,sans-serif}
  .odn-root a{text-decoration:none!important;box-shadow:none}
  .odn-root img{opacity:1!important;visibility:visible!important;filter:none!important}
  
  
  .odn-wrap{position:sticky;top:0;z-index:9000;padding:env(safe-area-inset-top,0px) 0 0;background:#fff;border-bottom:1px solid #EEF0F3}
  .odn-wrap.odn-scrolled{box-shadow:0 8px 24px -18px rgba(14,27,46,.35)}
  .odn-pill{max-width:none;margin:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:64px;padding:0 3.6vw;background:transparent;border-radius:0;box-shadow:none}
  .odn-wrap.odn-scrolled .odn-pill{box-shadow:none}
  .odn-logo{display:flex;align-items:center;flex-shrink:0}
  /* THE MARK. 30px on a 728x259 lockup (ratio 2.81) renders 84px wide, which
   reads as a thumbnail beside a 48px CTA pill. This is a STACKED lockup —
   an icon beside three lines of type — so its legibility floor is set by
   those three lines, not the block: at 48px each line lands near 9px, which
   holds against the 15px nav text. 48 of the 64px bar leaves 8px of air. */
  .odn-logo img{height:48px;width:auto;display:block}
  .odn-links{display:flex;align-items:center;gap:22px}
  .odn-links a{color:#3B4A60!important;font-family:'Manrope',system-ui,sans-serif;font-size:14px;font-weight:500;text-decoration:none;padding:6px 0;background:none;transition:color .15s}
  .odn-links a:hover{color:#0E1B2E!important}
  .odn-links a.odn-active{color:#0E1B2E!important;font-weight:600}
  .odn-actions{justify-self:end;display:flex;align-items:center;gap:8px}
  .odn-login{color:#475569!important;font-size:14.5px;font-weight:500;text-decoration:none;padding:9px 15px;border-radius:999px;transition:color .15s,background .15s}
  .odn-login:hover{color:#0E1B2E!important;background:#F1F5F9}
  
  /* #0E1B2E is OFF DUTY's blue and had been pulled from DAS once already as
   off-brand; it was still sitting on the one button in the header. DAS navy
   is #1A2E6E (BRAND-KIT.md). */
  .odn-cta{font-family:'Manrope',system-ui,sans-serif;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;background:#1A2E6E;color:#fff!important;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1;text-transform:none;text-decoration:none;white-space:nowrap;transition:background-color .15s}
  /* THE CART HAD NO COUNT AT ALL. The store pages carry [data-bag-count] and
     the main site carried nothing, so the header could never say what was in
     the bag — "fix the error saying that there's zero in the bag and not
     showing the real number". cart.js already announces every change to
     [data-bag-count]; this just gives the main nav somewhere to put it. Hidden
     at zero rather than showing a 0, which reads as broken. */
  /* THE BAG. It was a trolley glyph with a "Cart" caption under it; the caption
     went and the icon had no size of its own, so what remained on screen was a
     bare count pill and no icon at all. Explicit size, and the badge pulled
     down to a quiet corner marker rather than the loudest thing in the header. */
  .odn-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;color:#0E1B2E}
  .odn-cart svg{width:22px;height:22px;display:block}
  .odn-cart:hover{opacity:.7}
  .odn-cart-n{position:absolute;top:1px;right:0;min-width:17px;height:17px;padding:0 4px;
    display:none;align-items:center;justify-content:center;border-radius:999px;
    background:#1A2E6E;color:#fff;font-size:10px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
  .odn-cart-n[data-has]{display:inline-flex}
  .odn-cta::after{content:'→';display:inline-block;transition:transform .15s}
  .odn-cta:hover::after{transform:translateX(3px)}
  .odn-cta:focus-visible{outline:2px solid #2F6BFF;outline-offset:3px}
  .odn-cta:hover{background:#2F6BFF}
  .odn-cta:active{transform:scale(.97)}
  .odn-burger{display:none;width:44px!important;height:44px!important;border:0!important;background:#F1F5F9!important;border-radius:50%!important;align-items:center;justify-content:center;cursor:pointer;color:#0E1B2E!important;padding:0!important;margin:0!important;box-shadow:none!important;appearance:none;-webkit-appearance:none;min-width:0!important;min-height:0!important;line-height:1!important;font-size:0!important}
  .odn-burger:hover{background:#E2E8F0!important;color:#0E1B2E!important}
  .odn-burger svg{display:block!important;width:20px!important;height:20px!important;stroke:#0E1B2E!important;fill:none!important;opacity:1!important;visibility:visible!important}
  
  .odn-menu{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px 0 10px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:#3B4A60!important;font:500 14.5px/1 'Manrope',system-ui,sans-serif!important;text-transform:none!important;letter-spacing:normal!important;cursor:pointer;box-shadow:none!important;margin:0!important}
  .odn-menu:hover,.odn-menu[aria-expanded="true"]{background:#F1F5F9!important;color:#0E1B2E!important}
  .odn-menu svg{width:18px;height:18px;stroke:currentColor!important;fill:none!important}
  .odn-menu:focus-visible,.odn-burger:focus-visible{outline:2px solid #2F6BFF!important;outline-offset:2px}
  .odn-scrim{position:fixed;inset:0;z-index:8990;background:rgba(14,27,46,.42);opacity:0;pointer-events:none;transition:opacity .2s}
  .odn-scrim.odn-open{opacity:1;pointer-events:auto}
  .odn-drop{position:fixed;z-index:9100;left:50%;top:var(--odn-drop-top,90px);width:min(1180px,calc(100vw - 32px));max-height:calc(100dvh - var(--odn-drop-top,90px) - 16px);overflow:auto;transform:translate(-50%,-8px);opacity:0;visibility:hidden;pointer-events:none;background:#fff;color:#0E1B2E;border-radius:18px;padding:20px 20px 14px;box-shadow:0 24px 60px -20px rgba(8,14,26,.55);font-family:'Manrope',system-ui,sans-serif;transition:opacity .18s,transform .18s,visibility 0s linear .18s}
  .odn-drop.odn-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .18s,transform .18s}
  .odn-drop a{color:inherit!important;text-decoration:none!important}
  .odn-drop h5,.odn-drop small,.odn-drop b,.odn-drop .odn-lbl{font-family:'Manrope',system-ui,sans-serif!important;text-transform:none!important;letter-spacing:normal}
  .odn-drop h5{margin:0}
  .odn-drop .odn-tx small{text-transform:uppercase!important;letter-spacing:.08em}
  .odn-ph{display:block;aspect-ratio:16/10;border-radius:10px;background-color:#E6E9EF;background-size:cover;background-position:center}
  .odn-tile{display:block}
  .odn-tile b{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:14.5px;font-weight:600;color:#0E1B2E}
  .odn-tile b::after{content:"›";font-weight:500;color:#6B7688;transition:transform .15s}
  .odn-tile .odn-d{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:#6B7688}
  .odn-tile:hover b{color:#215387}.odn-tile:hover b::after{transform:translateX(3px)}.odn-tile:hover .odn-ph{filter:brightness(1.06)}
  .odn-rows a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 4px;border-bottom:1px solid #EEF0F4;font-size:15px;font-weight:600}
  .odn-rows a svg{width:16px;height:16px;color:#9AA5B5}
  .odn-rows a:hover{color:#215387!important}
  .odn-legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;padding-top:12px;border-top:1px solid #EEF0F4;font-size:12.5px;color:#6B7688}
  .odn-legal a{color:#6B7688!important}.odn-legal a:hover{color:#0E1B2E!important}
  .odn-drop a.odn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;background:#0E1B2E;color:#fff!important;font:500 14.5px/1 'Manrope',system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;transition:background-color .15s}
  .odn-drop a.odn-btn:hover{background:#2F6BFF}.odn-btn span{transition:transform .15s}.odn-btn:hover span{transform:translateX(3px)}
  .odn-drop a.odn-btn-block{display:flex;width:100%;height:50px;margin-top:14px;font-size:15.5px}
  
  .odn-d1{display:none}
  .odn-g{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px}
  .odn-hero{grid-row:1/3;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#F0EEE9}
  .odn-hero .odn-ph{flex:1;min-height:170px;aspect-ratio:auto;border-radius:0;background-position:40% 60%}
  .odn-tx{padding:16px 16px 18px}
  .odn-tx small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6B7688}
  .odn-tx h5{margin-top:6px!important;font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.015em;color:#0E1B2E}
  .odn-tx .odn-btn{margin-top:14px}
  .odn-g .odn-tile .odn-ph{aspect-ratio:16/9}
  .odn-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:16px;padding-top:12px;border-top:1px solid #EEF0F4}
  .odn-foot .odn-rows{display:flex;gap:4px 26px}
  .odn-foot .odn-rows a{min-height:40px;padding:0;border:0}
  .odn-foot .odn-rows svg{display:none}
  .odn-foot .odn-legal{margin:0;padding:0;border:0}
  .odn-tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:9970;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid rgba(14,27,46,.14);padding:6px 8px calc(6px + env(safe-area-inset-bottom,8px))}
  .odn-tabbar-in{display:grid;grid-template-columns:repeat(5,1fr)}
  .odn-tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;color:#94A3B8!important;min-height:48px;justify-content:center;text-decoration:none}
  .odn-tab svg{width:23px;height:23px}
  .odn-tab span{font-size:10px;font-weight:500}
  .odn-tab.odn-active{color:#215387!important}
  .odn-tab:active{opacity:.6}
  .odn-tab-ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-16px;border-radius:50%;background:#0E1B2E;box-shadow:0 6px 16px -6px rgba(14,27,46,.55);color:#fff!important}
  .odn-tab-ic svg{width:20px;height:20px}
  .odn-tab-demo span:last-child{color:#0E1B2E;font-weight:700}
  @media (max-width:1023px){
    .odn-links{display:none}
    .odn-cta{display:none}
    .odn-burger{display:flex!important}
    .odn-menu{display:none!important}
    
    .odn-drop{top:var(--odn-drop-top,96px);width:calc(100vw - 16px);padding:16px 14px 12px}
    .odn-d4{display:none}
    .odn-d1{display:block}
    .odn-lbl{font-size:15px;font-weight:600;color:#0E1B2E}
    .odn-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:14px}
    .odn-tiles .odn-d{display:none}
    .odn-d1 .odn-rows{margin-top:14px}
    .odn-d1 .odn-legal{margin-top:14px}
    /* THE MARK GETS THE ROOM IT NEEDS. Jayden, twice: "the logo is way too
       small in the top left and the top nav" and "make it full size and let it
       breathe." At 40px on a 728x259 lockup it rendered 112px wide -- a
       thumbnail. The Sign-in CTA is already hidden below this width and the
       menu and bag are glyphs, so the bar has room the mark was not using.
       52px renders 146 wide in a 68px bar, which leaves 8px of air above and
       below and still reads quieter than the page beneath it. max-width:none
       matters: a global img{max-width:100%} otherwise squeezes the artwork
       horizontally while the fixed height holds it, which distorts the mark
       rather than scaling it. */
    .odn-pill{display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 12px 0 16px}
    .odn-logo img{height:52px;max-width:none}
    
    .odn-tabbar{display:none}

  }