/* =========================================================
   AutoMart Global Header Width Parity V18.2
   Scope: GLOBAL public header + V18 sticky search stack.
   Goal: main header and sticky search use the SAME wide shell.
   ========================================================= */

:root{
  --am-global-edge:18px;
  --am-global-shell-inset:18px;
}

/* Full-width white background. The actual premium nav shell is aligned
   to the exact same geometry as the sticky search shell below it. */
html body > header.premium-topbar,
html body header.premium-topbar[data-premium-header]{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:sticky!important;
  top:0!important;
  z-index:1300!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:10px var(--am-global-edge) 0!important;
  box-sizing:border-box!important;
  transform:none!important;
  translate:none!important;
  background:rgba(255,255,255,.985)!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(135%)!important;
}

/* IMPORTANT:
   Previous premium-header CSS used a smaller max-width.
   V18.2 intentionally removes that limit globally. */
html body header.premium-topbar .premium-nav-shell{
  width:calc(100% - var(--am-global-shell-inset))!important;
  max-width:none!important;
  min-width:0!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
  border:1px solid #e1e9e5!important;
  border-bottom-color:#edf2ef!important;
  border-radius:22px 22px 0 0!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(18,43,32,.055)!important;
}

/* Search section uses identical outer edge + inner shell geometry. */
html body .am-global-search-v18{
  position:sticky!important;
  top:var(--am-main-header-h,72px)!important;
  z-index:1290!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 var(--am-global-edge) 9px!important;
  box-sizing:border-box!important;
  background:rgba(255,255,255,.985)!important;
  border:0!important;
  border-bottom:1px solid rgba(221,229,225,.86)!important;
  box-shadow:0 11px 24px rgba(19,44,33,.05)!important;
  backdrop-filter:blur(16px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(140%)!important;
}

html body .am-global-search-v18 .am-global-search-shell-v18{
  width:calc(100% - var(--am-global-shell-inset))!important;
  max-width:none!important;
  min-width:0!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
  padding:5px!important;
  border:1px solid #e1e9e5!important;
  border-top:0!important;
  border-radius:0 0 22px 22px!important;
  background:#fff!important;
  box-shadow:0 9px 24px rgba(18,43,32,.045)!important;
}

/* Remove any visual gap: the two shells should read as one premium
   two-level navigation/search component. */
html body header.premium-topbar + .am-global-search-v18{
  margin-top:0!important;
}

html body header.premium-topbar .premium-nav-shell,
html body .am-global-search-v18 .am-global-search-shell-v18{
  left:auto!important;
  right:auto!important;
}

/* Keep internal header content usable even though the shell is wider. */
html body header.premium-topbar .premium-desktop-nav{
  min-width:0!important;
}

html body header.premium-topbar .premium-nav-actions{
  flex:0 0 auto!important;
}

/* On very large monitors, keep comfortable internal whitespace while
   still allowing both rows to extend almost edge-to-edge. */
@media(min-width:1800px){
  :root{
    --am-global-edge:18px;
    --am-global-shell-inset:18px;
  }
}

/* Standard desktop / laptop. */
@media(max-width:1400px){
  :root{
    --am-global-edge:12px;
    --am-global-shell-inset:12px;
  }

  html body > header.premium-topbar,
  html body header.premium-topbar[data-premium-header]{
    padding-top:8px!important;
  }
}

/* Tablet — preserve same alignment, don't force desktop nav width. */
@media(max-width:980px){
  :root{
    --am-global-edge:8px;
    --am-global-shell-inset:0px;
  }

  html body > header.premium-topbar,
  html body header.premium-topbar[data-premium-header]{
    padding:6px var(--am-global-edge) 0!important;
  }

  html body header.premium-topbar .premium-nav-shell{
    width:100%!important;
    border-radius:17px 17px 0 0!important;
  }

  html body .am-global-search-v18{
    padding-left:var(--am-global-edge)!important;
    padding-right:var(--am-global-edge)!important;
  }

  html body .am-global-search-v18 .am-global-search-shell-v18{
    width:100%!important;
    border-radius:0 0 17px 17px!important;
  }
}

/* Mobile — keep the existing approved mobile header behavior and
   simply maintain width parity with the compact search row. */
@media(max-width:680px){
  :root{
    --am-global-edge:6px;
  }

  html body > header.premium-topbar,
  html body header.premium-topbar[data-premium-header]{
    padding-top:5px!important;
  }

  html body header.premium-topbar .premium-nav-shell{
    border-radius:15px 15px 0 0!important;
  }

  html body .am-global-search-v18 .am-global-search-shell-v18{
    border-radius:0 0 15px 15px!important;
  }
}