:root {
  --quat-ink: #0b0b0b;
  --quat-paper: #f5f5f2;
  --quat-white: #fff;
  --quat-yellow: #ffd400;
  --quat-blue: #006aa7;
  --quat-line: rgba(11, 11, 11, .12);
  --quat-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.quat-header { isolation: isolate; }
.quat-menu-toggle { display: none; }

.quat-header nav { position: relative; }
.quat-header nav a { letter-spacing: -.01em; }
.quat-header nav a.active { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }

.quat-origin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 5px;
  color: #5f605d;
  font: 600 9px/1 var(--quat-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.quat-se-flag {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 14px;
  display: inline-block;
  overflow: hidden;
  border-radius: 2px;
  background: var(--quat-blue);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  vertical-align: -2px;
}

.quat-se-flag::before,
.quat-se-flag::after {
  content: "";
  position: absolute;
  z-index: 1;
  background: var(--quat-yellow);
}

.quat-se-flag::before { left: 7px; top: 0; width: 3px; height: 100%; }
.quat-se-flag::after { left: 0; top: 5px; width: 100%; height: 3px; }
.quat-se-flag i { display: none; }

.cart-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-link { position: relative; }
.cart-link .cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  font: 700 9px/1 var(--quat-mono);
}

.eyebrow {
  align-items: center;
  gap: 8px;
  font-family: var(--quat-mono);
  letter-spacing: .08em;
}

@media (min-width: 901px) {
  .quat-header { margin-top: 24px; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .quat-origin b { display: none; }
  .quat-header { padding-inline: 30px; gap: 20px; }
  .quat-header nav { gap: 4px; }
  .quat-header nav a { padding-inline: 10px; }
}

@media (max-width: 900px) {
  .quat-menu-toggle {
    position: relative;
    z-index: 3;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid var(--quat-line);
    border-radius: 50%;
    background: #fff;
    color: #111;
    cursor: pointer;
  }

  .quat-menu-toggle > span:not(.sr-only) {
    width: 14px;
    height: 1.5px;
    display: block;
    background: currentColor;
    transition: transform .2s ease;
  }

  .quat-menu-toggle[aria-expanded="true"] > span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .quat-menu-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

  .quat-header nav {
    position: absolute;
    z-index: 2;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--quat-line);
    border-radius: 18px;
    background: rgba(248, 248, 246, .98);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
    backdrop-filter: blur(24px);
  }

  .quat-header nav.is-open { display: grid; }
  .quat-header nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 11px;
    background: #fff;
    font: 650 11px/1.2 var(--quat-mono);
  }
  .quat-header nav a.active { background: #0b0b0b; color: #fff; }
  .quat-origin { grid-column: 1 / -1; justify-content: center; min-height: 34px; padding: 2px 4px 0; }
  .cart-link svg { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .quat-menu-toggle > span:not(.sr-only) { transition: none; }
}