/* Homepage header polish + stability. Keep this focused on the reference storefront header. */

/* Desktop: compact premium header, evenly spaced navigation, and no browser-default link styling. */
@media (min-width:761px){
  .ot-reference-home .ot-ref-utility .ot-ref-width{min-height:32px}
  .ot-reference-home .ot-ref-utility{font-size:10px}
  .ot-reference-home .ot-ref-region{gap:8px}
  .ot-reference-home .ot-ref-region a,
  .ot-reference-home .ot-ref-region a:visited{display:inline-flex;min-width:42px;height:26px;align-items:center;justify-content:center;box-sizing:border-box;padding:0 12px;border:1px solid rgba(255,255,255,.28);border-radius:6px;background:rgba(255,255,255,.12);color:#fff!important;text-decoration:none!important;font-size:12px;font-weight:900;line-height:1;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .ot-reference-home .ot-ref-region a.active{border-color:#fff;background:#fff;color:#0b4e93!important;box-shadow:0 2px 7px rgba(2,34,70,.18)}
  .ot-reference-home .ot-ref-mainbar .ot-ref-width{min-height:64px;grid-template-columns:200px minmax(360px,1fr) 170px;gap:20px}
  .ot-reference-home .ot-ref-logo img{width:176px;height:45px}
  .ot-reference-home .ot-ref-search{grid-template-columns:minmax(0,1fr) 96px;border-radius:6px}
  .ot-reference-home .ot-ref-search input{height:42px;font-size:12px}
  .ot-reference-home .ot-ref-search button{font-size:12px}
  .ot-reference-home .ot-ref-actions{gap:12px}
  .ot-reference-home .ot-ref-account strong,
  .ot-reference-home .ot-ref-cart strong{font-size:11px}
  .ot-reference-home .ot-ref-account strong{font-size:0}
  .ot-reference-home .ot-ref-account strong::before{content:"Sign In";font-size:11px}

  .ot-reference-home .ot-ref-nav .ot-ref-width{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:stretch;width:min(1440px,calc(100% - 48px));margin-inline:auto}
  html[lang="en-GB"] .ot-reference-home .ot-ref-nav .ot-ref-width{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item{min-width:0;width:100%}
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item>button,
  .ot-reference-home .ot-ref-nav .ot-ref-width>a,
  .ot-reference-home .ot-ref-nav .ot-ref-width>a:visited{
    display:flex;width:100%;height:40px;align-items:center;justify-content:center;box-sizing:border-box;padding:0 10px;border:0;border-right:1px solid #e3ebf2;background:#fff;color:#12325a!important;text-decoration:none!important;font-size:12px;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer
  }
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item:first-child>button{border-left:1px solid #e3ebf2}
  .ot-reference-home .ot-ref-nav .ot-ref-width>a:hover,
  .ot-reference-home .ot-ref-nav .ot-ref-width>a:focus,
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item>button:hover,
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item:focus-within>button{background:#f3f7fb;color:#075fca!important;text-decoration:none!important}
  .ot-reference-home .ot-ref-nav .ot-ref-width>a.featured,
  .ot-reference-home .ot-ref-nav .ot-ref-width>a.featured:visited{color:#b97700!important}
  .ot-reference-home .ot-ref-nav .ot-ref-width>a.ot-ref-used-nav,
  .ot-reference-home .ot-ref-nav .ot-ref-width>a.ot-ref-used-nav:visited{color:#075fca!important}

  /* Only real dropdowns get a chevron. Remove literal text-glyph arrows from navigation. */
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item>button{font-size:0;gap:7px}
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item:first-child>button::before{content:"Auto Parts";font-size:12px}
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item:not(:first-child)>button::before{content:"Marine";font-size:12px}
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item>button::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}

  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(4),
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(5),
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(7),
  html[lang="en-GB"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(3),
  html[lang="en-GB"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(4),
  html[lang="en-GB"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(6){font-size:0}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(4)::before{content:"Solar & 12V";font-size:12px}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(5)::before{content:"Overlanding";font-size:12px}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(7)::before{content:"Support";font-size:12px}
  html[lang="en-GB"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(3)::before{content:"Campervan & 12V";font-size:12px}
  html[lang="en-GB"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(4)::before{content:"Travel & Overlanding";font-size:12px}
  html[lang="en-GB"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(6)::before{content:"Support";font-size:12px}

  .ot-reference-home .ot-ref-menu{top:40px}
}

@media (min-width:761px) and (max-width:1100px){
  .ot-reference-home .ot-ref-mainbar .ot-ref-width{grid-template-columns:170px minmax(300px,1fr) 150px;gap:14px}
  .ot-reference-home .ot-ref-logo img{width:158px}
  .ot-reference-home .ot-ref-region a,
  .ot-reference-home .ot-ref-region a:visited{min-width:38px;height:25px;padding:0 9px;font-size:11px}
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item>button,
  .ot-reference-home .ot-ref-nav .ot-ref-width>a{padding:0 5px}
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item:first-child>button::before,
  .ot-reference-home .ot-ref-nav .ot-ref-nav-item:not(:first-child)>button::before,
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(4)::before,
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(5)::before,
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(7)::before,
  html[lang="en-GB"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(3)::before,
  html[lang="en-GB"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(4)::before,
  html[lang="en-GB"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:nth-child(6)::before{font-size:10px}
  .ot-reference-home .ot-ref-nav .ot-ref-width>a.ot-ref-used-nav,
  .ot-reference-home .ot-ref-nav .ot-ref-width>a.featured{font-size:10px}
}

/* Mobile: keep account/cart accessible and compact. */
@media (max-width:760px){
  .ot-reference-home .ot-ref-region{gap:5px}
  .ot-reference-home .ot-ref-region a,
  .ot-reference-home .ot-ref-region a:visited{display:inline-flex;min-width:34px;height:24px;align-items:center;justify-content:center;box-sizing:border-box;padding:0 7px;border:1px solid rgba(255,255,255,.28);border-radius:5px;background:rgba(255,255,255,.12);color:#fff!important;text-decoration:none!important;font-size:11px;font-weight:900}
  .ot-reference-home .ot-ref-region a.active{background:#fff;color:#0b4e93!important}
  .ot-reference-home .ot-ref-actions{display:flex;align-items:center;gap:8px;right:10px;top:42px}
  .ot-reference-home .ot-ref-account{display:flex!important;min-width:44px;min-height:38px;align-items:center;justify-content:center;padding:3px 6px;border-radius:5px;text-align:center}
  .ot-reference-home .ot-ref-account span{display:none}
  .ot-reference-home .ot-ref-account strong{margin:0;font-size:10px;line-height:1.1;white-space:nowrap}
  .ot-reference-home .ot-ref-cart{display:flex;min-width:44px;min-height:38px;align-items:center;justify-content:center;padding:3px 5px;border-radius:5px;text-align:center}
  .ot-reference-home .ot-ref-cart span{display:none}
  .ot-reference-home .ot-ref-cart strong{margin:0;font-size:10px;line-height:1.1;white-space:nowrap}
  .ot-reference-home .ot-ref-cart b{min-width:18px;height:18px;padding:0 4px}
  .ot-reference-home .ot-ref-nav .ot-ref-width>a,
  .ot-reference-home .ot-ref-nav .ot-ref-width>a:visited{text-decoration:none!important}
}

@media (max-width:340px){
  .ot-reference-home .ot-ref-logo img{width:125px}
  .ot-reference-home .ot-ref-actions{gap:4px}
}

/* Exact desktop match to the shared US dropdown/category bar used on catalogue, department and product pages. */
@media (min-width:861px){
  html[lang="en-US"] .ot-reference-home .ot-ref-nav{border-top:1px solid #e5edf4;border-bottom:1px solid #d9e4ee;background:#fff}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width{display:flex;align-items:stretch;justify-content:center;gap:0;width:min(1400px,calc(100% - 40px));margin-inline:auto;overflow:visible}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-nav-item{position:relative;width:auto;min-width:0}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-nav-item>button,
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a,
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:visited{display:flex;width:auto;height:45px;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;padding:0 32px;border:0;border-right:1px solid #e3ebf2;background:#fff;color:#12325a!important;text-decoration:none!important;font:800 12px/1 Manrope,Arial,sans-serif;white-space:nowrap;cursor:pointer}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-nav-item:first-child>button{border-left:1px solid #e3ebf2}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:hover,
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a:focus,
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-nav-item>button:hover,
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-nav-item:focus-within>button{background:#f2f7fc;color:#075fca!important}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a.featured,
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a.featured:visited{color:#bd7d00!important}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a.featured::before{content:"◆";margin-right:0;color:#f6b624;font-size:10px}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-menu{top:45px;width:250px;padding:13px 15px 14px;border:1px solid #d9e3ed;border-radius:0 0 8px 8px;background:#fff;box-shadow:0 14px 34px rgba(9,40,75,.16)}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-menu h4{margin:0 0 9px;color:#102f59;font:850 14px/1.2 Manrope,Arial,sans-serif}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-menu a{display:flex;height:auto;min-height:34px;justify-content:flex-start;padding:7px 2px;border:0;background:#fff;color:#304b6c;text-decoration:none;font:650 11px/1.35 Manrope,Arial,sans-serif}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-menu a:hover{color:#075fca;background:#fff}
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-menu .all{margin-top:6px;padding-top:10px;border-top:1px solid #e5ecf3;color:#075fca;font-weight:850}
}

@media (min-width:861px) and (max-width:1180px){
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-nav-item>button,
  html[lang="en-US"] .ot-reference-home .ot-ref-nav .ot-ref-width>a{padding:0 20px}
}