:root {
  --kr-canvas: #f2f1ec;
  --kr-ink: #1b1b1a;
  --kr-copper: #c85c36;
  --kr-rule: #c9c7bf;
  --kr-font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --kr-font-body: "Manrope", Inter, Arial, sans-serif;
}

.kr-header {
  background: var(--kr-canvas);
  color: var(--kr-ink);
  font-family: var(--kr-font-body);
  position: relative;
  z-index: 100;
}

.kr-header__shell {
  margin: 0 auto;
  max-width: 1440px;
  padding-inline: 48px;
}

.kr-header__utility {
  border-bottom: 1px solid var(--kr-rule);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.kr-header__utility-inner,
.kr-header__main-inner,
.kr-header__utility-links,
.kr-header__utility-nav,
.kr-header__actions,
.kr-menu,
.kr-menu__fallback {
  align-items: center;
  display: flex;
}

.kr-header__utility-inner { height: 31px; gap: 16px; }
.kr-header__utility-message { align-items: center; display: flex; gap: 8px; margin: 0; white-space: nowrap; }
.kr-header__maple-leaf { fill: #b4432c; height: 18px; width: 18px; }
.kr-header__utility-links { gap: 12px; list-style: none; margin: 0; padding: 0; }
.kr-header__utility-links li + li::before { color: var(--kr-rule); content: "·"; margin-right: 12px; }
.kr-header__utility-nav { gap: 13px; margin-left: auto; text-transform: uppercase; }
.kr-header__utility-nav a { color: inherit; text-decoration: none; }
.kr-header__utility-nav a:hover, .kr-header__utility-nav a:focus-visible { color: var(--kr-copper); }

.kr-header__main { background: var(--kr-ink); color: #fff; }
.kr-header__main-inner { height: 72px; gap: 48px; }
.kr-header__brand { color: #fff; font-family: var(--kr-font-display); font-size: 32px; letter-spacing: .025em; line-height: 1; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.kr-header__brand-strong { font-weight: 800; }
.kr-header__brand-light { font-family: var(--kr-font-body); font-size: 18px; font-weight: 500; margin-left: 6px; letter-spacing: .04em; }
.kr-header__primary-nav { margin-right: auto; }
.kr-menu, .kr-menu__fallback { gap: 34px; list-style: none; margin: 0; padding: 0; }
.kr-menu a, .kr-menu__fallback a { color: #fff; font-family: var(--kr-font-display); font-size: 15px; font-weight: 700; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.kr-menu a:hover, .kr-menu a:focus-visible, .kr-menu .current-menu-item > a, .kr-menu__fallback a:hover, .kr-menu__fallback a:focus-visible { color: var(--kr-copper); }
.kr-header__actions { border-left: 1px solid rgba(255,255,255,.35); gap: 15px; padding-left: 24px; }
.kr-header__icon-link, .kr-header__cart { align-items: center; color: #fff; display: inline-flex; min-height: 34px; text-decoration: none; }
.kr-header__icon-link:hover, .kr-header__icon-link:focus-visible, .kr-header__cart:hover, .kr-header__cart:focus-visible { color: var(--kr-copper); }
.kr-header__icon-link svg, .kr-header__cart svg { fill: none; height: 21px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 21px; }
.kr-header__cart { gap: 4px; }
.kr-header__cart-count { font-family: var(--kr-font-body); font-size: 12px; font-weight: 700; min-width: 8px; }

.kr-header__mobile-menu { display: none; margin-left: auto; position: relative; }
.kr-header__mobile-menu summary { cursor: pointer; display: grid; gap: 4px; list-style: none; padding: 10px 0 10px 10px; }
.kr-header__mobile-menu summary::-webkit-details-marker { display: none; }
.kr-header__mobile-menu summary span { background: #fff; display: block; height: 1px; width: 22px; }
.kr-header__mobile-menu nav { background: var(--kr-ink); border-top: 1px solid rgba(255,255,255,.2); left: -20px; padding: 20px; position: absolute; right: -20px; top: 54px; }
.kr-menu--mobile { align-items: stretch; flex-direction: column; gap: 0; }
.kr-menu--mobile li { border-bottom: 1px solid rgba(255,255,255,.2); }
.kr-menu--mobile a { display: block; padding: 14px 0; }

.kr-header a:focus-visible, .kr-header summary:focus-visible { outline: 2px solid var(--kr-copper); outline-offset: 3px; }

@media (max-width: 960px) {
  .kr-header__shell { padding-inline: 24px; }
  .kr-header__main-inner { gap: 20px; }
  .kr-menu, .kr-menu__fallback { gap: 18px; }
}

@media (max-width: 760px) {
  .kr-header__shell { padding-inline: 20px; }
  .kr-header__utility-inner { justify-content: center; }
  .kr-header__utility-links, .kr-header__utility-nav { display: none; }
  .kr-header__main-inner { height: 62px; }
  .kr-header__brand { font-size: 26px; }
  .kr-header__brand-light { font-size: 15px; }
  .kr-header__primary-nav { display: none; }
  .kr-header__actions { border-left: 0; gap: 11px; margin-left: auto; padding-left: 0; }
  .kr-header__mobile-menu { display: block; }
}