/* ------------------------------------------------------------------
 * Header: classic markup styled as the former Next.js header
 * (black banner 48px, white bar 4.375rem: logo / menu / icons)
 * ------------------------------------------------------------------ */

/* The Next.js stylesheet (loaded later) sets overflow-x: hidden, which breaks position: sticky */
html:root,
html body {
  overflow-x: clip;
}

#header {
  --arva-pad: clamp(1.25rem, 3.5vw, 3.125rem);
  --arva-banner-h: 48px;
  --arva-bar-h: 4.375rem;
  --arva-red: #e0241a;
  --arva-gray: #f5f5f5;
  --arva-yellow: #f7e46a;
  /* Header icons, inlined so no path depends on where this file lives */
  --arva-icon-address: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm0-2a1 1 0 1 0-1-1 1 1 0 0 0 1 1zm0 11c-2 0-8-7.58-8-12a8 8 0 0 1 16 0c0 4.42-6 12-8 12zm.74-2.72a19.06 19.06 0 0 0 2.38-2.79C16.87 14.05 18 11.51 18 10a6 6 0 0 0-12 0c0 1.51 1.13 4.05 2.88 6.49a19.06 19.06 0 0 0 2.38 2.79 6.1 6.1 0 0 0 .74.6 6.1 6.1 0 0 0 .74-.6z'/%3E%3C/svg%3E");
  --arva-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M28 5H8v12.206c0 3.763 1.749 7.371 4.678 9.652L18 31l5.322-4.142c2.93-2.28 4.678-5.889 4.678-9.652V5z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M14 16.243l3.495 3.495 5.243-5.243'/%3E%3C/svg%3E");
  --arva-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.414 4 8 5.414 14.586 12 8 18.586 9.414 20l8-8z'/%3E%3C/svg%3E");
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}

#header .container {
  width: 100%;
  max-width: none;
  padding: 0 var(--arva-pad);
}

#header .row {
  margin: 0;
}

/* Banner row (checkout selector outweighs the legacy header rules) */
#header .header-nav,
body#checkout #header .header-nav {
  /* custom.css stacks it above the centered announcements */
  position: static;
  z-index: auto;
  height: var(--arva-banner-h);
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
}

#header .header-nav .container,
#header .header-nav .row,
#header .header-nav .hidden-sm-down {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

#header .header-nav .col-md-5 {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  width: auto;
  padding: 0;
}

#header .header-nav,
#header .header-nav a,
#header .header-nav button,
#header .header-nav span,
#header .header-banner,
#header .header-banner a {
  color: #fff;
  font-size: clamp(.625rem, 2vw, .75rem);
}

/* Register product link, left of the banner row */
#header .header-nav .arva-register-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

#header .header-nav .arva-register-link::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--arva-icon-shield) center / contain no-repeat;
  mask: var(--arva-icon-shield) center / contain no-repeat;
}

/* Announcement, centered over the banner row */
#header .header-banner {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  width: min(45rem, 50vw);
  height: var(--arva-banner-h);
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.1;
  background: none;
}

/* Announcements carousel: one message at a time, arrows on both sides */
#header .arva-announcements {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}

#header .arva-announcements p,
#header .arva-announcements p a,
#header .arva-announcements p a:hover {
  color: #fff;
}

#header .arva-announcements p {
  display: none;
  flex: 1 1 auto;
  margin: 0;
  line-height: 1.3;
  font-size: clamp(.625rem, 2vw, .75rem);
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
}

#header .arva-announcements:not(.is-ready) p:first-of-type,
#header .arva-announcements p.is-active {
  display: block;
}

#header .arva-announcements__arrow {
  flex: none;
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

#header .arva-announcements__arrow--prev svg {
  transform: rotate(180deg);
}

/* Sister shop link, flush right of the banner row; opens leftwards */
#header .arva-shop-switch {
  --arva-switch-bg: var(--arva-yellow);
  --arva-switch-slant: 2.5rem;
  --arva-switch-gap: 31px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--arva-banner-h);
  padding: 0 var(--arva-pad) 0 calc(var(--arva-switch-slant) + 1.5rem);
  background: var(--arva-switch-bg);
  clip-path: polygon(var(--arva-switch-slant) 0, 100% 0, 100% 100%, 0 100%);
}

#header .arva-shop-switch[hidden],
#header .arva-shop-switch:not(.is-ready) {
  display: none;
}

#header .arva-shop-switch > *:not(.arva-shop-switch__toggle):not(.arva-shop-switch__close) {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  transition: max-width .2s ease, margin-left .2s ease, opacity .2s ease;
}

#header .arva-shop-switch.is-open > *:not(.arva-shop-switch__toggle):not(.arva-shop-switch__close) {
  max-width: 45rem;
  margin-left: var(--arva-switch-gap);
  opacity: 1;
}

#header .arva-shop-switch p {
  align-items: center;
  margin: 0;
}

#header .arva-shop-switch img {
  display: block;
  width: auto;
  height: 26px;
}

#header .arva-shop-switch__toggle,
#header .arva-shop-switch__close {
  flex: none;
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  cursor: pointer;
}

#header .arva-shop-switch__close {
  display: none;
}

#header .arva-shop-switch.is-open .arva-shop-switch__close {
  display: flex;
  padding-left: var(--arva-switch-gap);
}

/* Gotham ships 400/600/700/900 only: 600 as the menu links */
#header .header-nav .arva-shop-switch,
#header .header-nav .arva-shop-switch a,
#header .header-nav .arva-shop-switch p,
#header .header-nav .arva-shop-switch span,
#header .header-nav .arva-shop-switch button {
  color: #000;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}

#header .header-nav .arva-shop-switch a {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Chevron after the link */
#header .header-nav .arva-shop-switch a::after {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--arva-icon-chevron) center / contain no-repeat;
  mask: var(--arva-icon-chevron) center / contain no-repeat;
}

#header .header-nav .arva-shop-switch a:hover {
  color: #000;
}

/* Account / cart icons, moved into the white bar */
#header .header-nav .right-nav {
  position: absolute;
  top: var(--arva-banner-h);
  right: var(--arva-pad);
  /* Above the white bar, stacked at 10 by custom.css */
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: auto;
  height: var(--arva-bar-h);
  padding: 0;
}

#header .header-nav .right-nav a,
#header .header-nav .right-nav span,
#header .header-nav .right-nav button {
  color: #000;
}

/* Country selector (displayNav1), first of the white bar icons */
#header .right-nav .language-selector button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  border: 0;
  background: none;
}

#header .right-nav .language-selector span {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Override legacy white text on category, CMS and quiz pages (custom.css) */
body #header .header-nav .right-nav .language-selector,
body #header .header-nav .right-nav .language-selector .btn-unstyle span {
  color: #000;
}

body #header .header-nav .right-nav .language-selector .btn-unstyle:hover span {
  color: #d41318;
}

/* Legacy 30px right margins on top of the icons gap */
#header .header-nav .language-selector,
#header .header-nav #_desktop_contact_link #contact-link {
  margin: 0;
}

/* Dealer link (custom HTML block) or contact link (ps_contactinfo): icon only */
#header .header-nav a.arva-dealers,
#header .header-nav #_desktop_contact_link #contact-link a {
  display: block;
  width: 25px;
  height: 25px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 25px;
  white-space: nowrap;
  text-indent: 100%;
  background: var(--arva-icon-address) center / 25px no-repeat;
}

#header .header-nav #_desktop_contact_link #contact-link a::before {
  display: none;
}

#header .header-nav .right-nav .user-info,
#header .header-nav .right-nav .blockcart {
  position: relative;
  margin: 0;
  padding: 0;
  height: auto;
  background: none;
}

/* Same 25px box for every icon, whatever custom.css offsets */
#header .header-nav .right-nav .user-info a,
#header .header-nav .right-nav .blockcart .header,
#header .header-nav .right-nav .blockcart .header a {
  display: flex;
  align-items: center;
  height: 25px;
  margin: 0;
  padding: 0;
}

#header .header-nav .right-nav .user-info .material-icons,
#header .header-nav .right-nav .blockcart .shopping-cart {
  display: block;
  font-size: 0;
  vertical-align: middle;
}

/* White bar: logo left, menu centered, icons (above) right */
#header .header-top {
  height: var(--arva-bar-h);
  padding: 0;
  border-bottom: 1px solid #d9d9d9;
  background: #fff;
}

#header .header-top .container,
#header .header-top .container > .row {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

/* Right spacer, mirrors the logo column so the menu stays centered */
#header .header-top .container > .row::after {
  content: "";
  display: block;
  flex: 1 1 0;
  clear: none;
}

#header #_desktop_logo {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  width: auto;
  padding: 0;
}

#header #_desktop_logo h1 {
  margin: 0;
}

#header #_desktop_logo img {
  display: block;
  width: auto;
  height: 30px;
}

#header .header-top-right {
  flex: none;
  display: flex;
  justify-content: center;
  width: auto;
  padding: 0;
}

/* Menu: full bar height so panels open right under it */
#header .up-menu {
  align-self: stretch;
}

#header .up-menu__list {
  gap: 1.5rem;
}

#header .up-menu__link {
  padding: 0;
  color: #000;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
}

#header .up-menu__caret {
  display: none;
}

/* Arva Response shop (id 5): yellow bar, white tab back to Arva */
body.shop-5 #header .header-top {
  background: var(--arva-yellow);
}

body.shop-5 #header .arva-shop-switch {
  --arva-switch-bg: #fff;
}