/* Load after the store styles so the three header controls share one finish. */
.site-header {
  --header-control-ink: #29485f;
  --header-control-ease: cubic-bezier(.22, 1, .36, 1);
}

.site-header .header-row .header-control {
  position: relative;
  display: inline-flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin-block: 0;
  padding: 10px 12px;
  border: 1px solid #dfe7ed;
  border-radius: 12px;
  background: linear-gradient(155deg, #fff 12%, #f5f8fa 100%);
  box-shadow: inset 0 1px 0 #fff, 0 3px 9px #1d3b5108;
  color: var(--header-control-ink);
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: none;
  translate: 0;
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, box-shadow 260ms var(--header-control-ease),
    translate 220ms var(--header-control-ease),
    scale 180ms var(--header-control-ease);
  -webkit-tap-highlight-color: transparent;
}

.site-header .header-row .my-cars-control {
  min-width: 114px;
  margin-left: auto;
}

.site-header .header-row .cart-control {
  width: 48px;
  min-width: 48px;
  margin-left: 0;
  padding: 0;
}

.site-header .header-row > .header-options {
  flex: none;
  width: 48px;
  min-width: 48px;
  margin: 0;
  padding: 0;
  border: 0;
}

.site-header .header-row .menu-control {
  width: 100%;
  min-width: 0;
  padding: 0;
  list-style: none;
}

.site-header .header-row .menu-control::-webkit-details-marker {
  display: none;
}

.site-header .header-row .menu-control::marker {
  content: '';
}

.site-header .header-row .header-control-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.site-header .header-row .header-control-icon svg,
.site-header .header-row .options-menu-icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 260ms var(--header-control-ease), color 180ms ease;
}

.site-header .header-row .header-control-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.site-header .header-row .header-car-count,
.site-header .header-row .cart-count-badge[data-cart-count] {
  position: absolute;
  top: -5px;
  right: -4px;
  display: grid;
  place-items: center;
  width: auto;
  min-width: 20px;
  height: 20px;
  margin: 0;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #284b68;
  box-shadow: 0 2px 5px #1d3b511a;
  color: #fff;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  transform-origin: center;
}

.site-header .header-row .header-car-count {
  background: #eef3f7;
  color: #42627a;
}

.site-header .header-row .header-options[open] .menu-control {
  border-color: #b9ccd9;
  background: linear-gradient(155deg, #f5f9fc, #eaf1f6);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px #1d3b510d;
  color: #164f74;
}

.site-header .header-row .header-control:focus-visible {
  animation: none;
  outline: 2px solid #386b8e;
  outline-offset: 4px;
  border-color: #a9c2d4;
  box-shadow: 0 0 0 3px #386b8e0d;
}

.site-header .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Clear menu destinations follow the existing search field. */
.site-header .header-options .options-panel {
  width: clamp(330px, calc(100vw - 36px), 390px);
  max-width: calc(100vw - 36px);
  max-height: min(650px, calc(100svh - 150px));
  padding: 22px;
  border-color: #dce6ee;
  border-radius: 16px;
  background: linear-gradient(155deg, #fff, #f8fafc);
  box-shadow: 0 18px 48px #142d4524;
  scrollbar-width: thin;
  scrollbar-color: #c1ced9 transparent;
}

.site-header .header-options .options-panel > .eyebrow {
  margin-bottom: 17px;
  font-size: 11px;
  letter-spacing: .08em;
  color: #667e91;
}

.site-header .header-options .options-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  margin-top: 19px;
}

.site-header .header-options .options-nav a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #314f65;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.site-header .header-options .options-nav a::after { content: none; }
.site-header .header-options .options-nav .options-icon { color: #70889a; }
.site-header .header-options .options-link-arrow { margin-left: auto; color: #8a9ead; font-size: 15px; }

.site-header .header-options .options-nav a:first-child {
  margin-bottom: 5px;
  border-color: #e1eaf1;
  background: #f0f5f9;
  color: #1d526f;
  font-weight: 600;
}

.site-header .header-options .options-nav a:first-child .options-icon {
  color: #3b6784;
}

.site-header .header-options .options-nav a:hover,
.site-header .header-options .options-nav a:focus-visible {
  border-color: #d7e4ed;
  background: #edf4f9;
  color: #155379;
}

.site-header .header-options .options-nav a:focus-visible {
  outline: 2px solid #386b8e;
  outline-offset: 2px;
}

/* The badge animation remains owned by the existing cart-count updater. */
@keyframes header-control-arrive {
  from { opacity: .7; translate: 0 4px; }
  to { opacity: 1; translate: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header .header-row .header-control {
    animation: header-control-arrive 420ms var(--header-control-ease)
      var(--header-control-delay, 0ms) backwards;
  }

  .site-header .header-row .cart-control { --header-control-delay: 35ms; }
  .site-header .header-row .menu-control { --header-control-delay: 70ms; }

  .site-header .header-row .header-control:active {
    translate: 0 1px;
    scale: .97;
    box-shadow: inset 0 1px 3px #1d3b510b;
  }
}

@media (hover: hover) and (pointer: fine) {
  .site-header .header-row .header-control:hover {
    border-color: #bdcedb;
    background: linear-gradient(155deg, #fff, #edf4f9);
    box-shadow: inset 0 1px 0 #fff, 0 5px 14px #1d3b5110;
    color: #155379;
    transform: none;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .site-header .header-row .header-control:hover { translate: 0 -1px; }
  .site-header .header-row .my-cars-control:hover .car-control-icon { translate: 1px -1px; }
  .site-header .header-row .cart-control:hover .cart-control-icon { translate: 0 -1px; }
  .site-header .header-row .header-control:active { translate: 0 1px; }
}

/* Primary navigation keeps its desktop layout. Mobile has four fixed slots. */
@media (max-width: 780px) {
  .site-header .header-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 44px 44px;
    align-items: center;
    gap: 8px;
    min-height: 74px;
  }

  .site-header .header-row .brand {
    grid-column: 1;
    width: 112px;
    max-width: 100%;
    min-width: 0;
  }

  .site-header .header-row .brand img { width: 100%; }

  .site-header .header-row .header-control { min-height: 44px; }

  .site-header .header-row .my-cars-control {
    grid-column: 2;
    width: 96px;
    min-width: 0;
    margin-left: 0;
    padding: 9px;
    gap: 6px;
  }

  .site-header .header-row .cart-control {
    grid-column: 3;
    width: 44px;
    min-width: 44px;
    padding: 0;
  }

  .site-header .header-row > .header-options {
    grid-column: 4;
    width: 44px;
    min-width: 44px;
  }

  .site-header .header-row .menu-control { padding: 0; }

  .site-header .header-row .header-control-icon,
  .site-header .header-row .header-control-icon svg {
    display: inline-flex;
    width: 22px;
    height: 22px;
  }

  .site-header .header-row .header-control-icon svg { display: block; }
  .site-header .header-row .header-control-label { display: block; font-size: 12px; }
  .site-header .header-row .my-cars-control .header-car-count { display: none; }

  .site-header .header-options .options-panel {
    max-height: calc(100svh - 180px);
    padding: 18px;
  }
}

@media (max-width: 360px) {
  .site-header .header-row {
    grid-template-columns: minmax(0, 1fr) 80px 44px 44px;
    gap: 6px;
  }

  .site-header .header-row .brand { width: 92px; }
  .site-header .header-row .my-cars-control { width: 80px; padding: 6px; gap: 4px; }
  .site-header .header-row .my-cars-control .header-control-icon,
  .site-header .header-row .my-cars-control .car-control-icon { display: inline-flex; width: 20px; height: 20px; }
  .site-header .header-row .my-cars-control .car-control-icon { display: block; }
  .site-header .header-row .my-cars-control .header-control-label { display: block; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .header-row .header-control,
  .site-header .header-row .header-control-icon svg,
  .site-header .header-row .options-menu-icon {
    animation: none !important;
    transition: none !important;
    translate: none !important;
    scale: none !important;
  }
}

/* A restrained menu control, including a contained keyboard focus treatment. */
.site-header .header-row .menu-control {
  border-radius:10px;
  border-color:#e1e6eb;
  background:#fff;
  color:#344a5b;
  box-shadow:0 1px 4px #1c334608;
}
.site-header .header-row .menu-control:hover,
.site-header .header-row .header-options[open] .menu-control {
  border-color:#cdd6de;
  background:#f6f8fa;
  color:#253c4d;
  box-shadow:0 2px 6px #1c33460a;
}
.site-header .header-row .menu-control:focus-visible {
  outline:none;
  outline-offset:0;
  border-color:#8d9ba6;
  box-shadow:inset 0 0 0 1px #506170;
}