/* Keep the navigation visible while the document scrolls beneath it. */
html { scroll-padding-block-start: 84px; }
.site-header {
  --header-resize: 216ms ease;
  --header-tool-width: 44px;
  --header-icon-size: 28px;
  --header-label-size: 1.25rem;
  --header-menu-size: .9375rem;
  --header-height: calc(var(--header-icon-size) + 22px);
  position: sticky;
  top: 12px;
  z-index: 90;
  width: calc(100% - 32px);
  max-width: 1464px;
  height: var(--header-height);
  margin: 12px auto;
  padding: 0 20px;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  isolation: isolate;
  background: transparent;
  backdrop-filter: none;
  transition: height var(--header-resize), min-height var(--header-resize), margin-bottom var(--header-resize), top var(--header-resize);
}
/* Keep the occupied document space constant so shrinking does not move the article. */
.site-header.is-scrolled {
  --header-icon-size: 24px;
  --header-label-size: 1.125rem;
  --header-menu-size: .84375rem;
  top: 4px;
  margin-bottom: 16px;
}
/* A separate backdrop keeps the fixed drawer and overlay relative to the viewport. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--panel);
  pointer-events: none;
}
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .site-header::before {
    background: var(--header);
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}
.site-header > .brand,
.site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger]) {
  transition: font-size var(--header-resize), line-height var(--header-resize);
}
.site-header > .brand {
  flex: none;
  min-height: 44px;
  gap: 10px;
  font-size: var(--header-label-size);
  line-height: var(--header-icon-size);
  letter-spacing: -.055em;
}
.site-header > .brand > span:last-child {
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.site-header > .brand > .brand-mark {
  width: 1.25cap;
  height: 1.25cap;
  flex: 0 0 1.25cap;
  font: inherit;
  /* The artwork occupies 58 of the source image's 64 vertical pixels. */
  transform: scale(1.103448);
}
.site-header > .primary-nav {
  flex: 1;
  align-self: stretch;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger]) {
  position: relative;
  --nav-inline-space: 10px;
  min-width: 44px;
  justify-content: center;
  padding: 0 var(--nav-inline-space);
  border-radius: 0;
  background: transparent;
  font-size: var(--header-menu-size);
  line-height: var(--header-icon-size);
  font-weight: 500;
  white-space: nowrap;
  color: color-mix(in srgb, var(--paper) 80%, var(--muted));
}
.site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger]) > .nav-icon { display: none; }
.site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger]):hover,
.site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger])[aria-current=page] { color: var(--lime); }
:root[data-theme=light] .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger]):hover,
:root[data-theme=light] .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger])[aria-current=page] {
  color: color-mix(in srgb, var(--lime) 60%, var(--paper));
}
.site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger])[aria-current=page]::after {
  content: '';
  position: absolute;
  bottom: -1px;
  inset-inline: var(--nav-inline-space);
  height: 2px;
  background: var(--lime);
}
.site-header > .header-tools { flex: none; gap: 8px; }
.site-header .header-tools .theme-toggle,
.site-header .header-tools .language-select {
  width: var(--header-tool-width);
  height: 44px;
  min-height: 44px;
  flex-basis: var(--header-tool-width);
  border-color: transparent;
  background: transparent;
}
/* Draw the theme symbol without the font baseline affecting its visible center. */
.site-header .theme-toggle > span[aria-hidden="true"] {
  display: block;
  width: var(--header-icon-size);
  height: var(--header-icon-size);
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  font-size: 0;
}
.site-header .header-tools .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Touch controls keep their 44px hit area; fine pointers use tighter horizontal spacing. */
.site-header .header-tools .account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--header-tool-width);
  height: 44px;
  min-height: 44px;
  flex: 0 0 var(--header-tool-width);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
}
.site-header .header-tools .language-select .nav-icon,
.site-header .header-tools .account-link .nav-icon {
  width: var(--header-icon-size) !important;
  height: var(--header-icon-size) !important;
  min-width: var(--header-icon-size);
  max-width: var(--header-icon-size);
  flex-basis: var(--header-icon-size);
}
/* Include the 1.5-unit stroke when matching the globe's painted size to the avatar. */
.site-header .header-tools .language-select .nav-icon { stroke-width: 1.5; transform: scale(1.230769); }
.site-header .account-link::after { content: none; }
/* Utility icons stay plain for pointer interaction; keyboard focus uses a straight underline. */
.site-header .header-tools .language-select,
.site-header .header-tools .account-link {
  border-color: transparent;
  border-radius: 0;
  color: var(--paper);
  outline: none;
  box-shadow: none;
}
html[data-header-keyboard] .site-header .header-tools .language-select:focus-within,
html[data-header-keyboard] .site-header .header-tools .account-link:focus-visible {
  box-shadow: inset 0 -2px 0 var(--paper);
}
.site-header .account-link.has-avatar { overflow: hidden; }
.site-header .account-link-avatar { width: var(--header-icon-size); height: var(--header-icon-size); flex: none; }
.site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger]) .nav-deal-count {
  min-width: 22px;
  height: 20px;
  font-size: 11px;
}
/* Animate the painted icons with the label size instead of changing them in one frame. */
.site-header .header-tools > .theme-toggle,
.site-header .header-tools > .language-select,
.site-header .header-tools > .account-link,
.site-header .theme-toggle > span[aria-hidden="true"],
.site-header .header-tools .nav-icon,
.site-header .account-link-avatar {
  transition: width var(--header-resize), height var(--header-resize), min-width var(--header-resize), max-width var(--header-resize), flex-basis var(--header-resize);
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  .site-header { --header-tool-width: calc(var(--header-icon-size) + 8px); }
  .site-header > .header-tools { gap: 4px; }
}
.drawer-heading, .drawer-settings, .account-menu-backdrop { display: none; }

@media (min-width: 1280px) and (max-width: 1510px) {
  .site-header { gap: 12px; padding-inline: 16px; }
  .site-header > .primary-nav { gap: 0; }
  .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger]) { --nav-inline-space: 7px; }
  .site-header > .brand { gap: 8px; }
  /* Longer translated labels still need to fit beside the brand and utilities. */
  :root:not(:lang(ko)) .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger]) { --nav-inline-space: 4px; font-size: calc(var(--header-menu-size) - .09375rem); }
}

@media (max-width: 1279px) {
  :root { --mobile-header: 56px; }
  html { scroll-padding-block-start: calc(var(--mobile-header) + env(safe-area-inset-top) + 12px); }
  /* Clipping must not create a separate vertical scroll container. */
  body { overflow-x: clip; }
  html:has(body.nav-open) { overflow: hidden; }
  body.nav-open { overflow: clip; overscroll-behavior: none; }
  .site-header {
    --header-height: 56px;
    position: sticky;
    top: 0;
    z-index: 90;
    width: 100%;
    max-width: none;
    height: calc(var(--header-height) + env(safe-area-inset-top));
    min-height: calc(var(--header-height) + env(safe-area-inset-top));
    margin: 0;
    padding: env(safe-area-inset-top) 16px 0;
    gap: 12px;
    flex-wrap: nowrap;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  .site-header.is-scrolled {
    --header-height: 52px;
    top: 0;
    margin-bottom: 4px;
  }
  .site-header > .menu-button {
    order: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--panel);
    cursor: pointer;
  }
  .site-header > .menu-button .nav-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    max-width: 28px;
    flex-basis: 28px;
    stroke-width: 1.8;
  }
  .site-header > .menu-button:focus-visible,
  .drawer-close:focus-visible { outline-offset: -3px; }
  .site-header > .brand { order: 1; min-width: 0; gap: 8px; }
  .site-header > .brand > span:last-child { display: block; white-space: nowrap; }
  .site-header > .header-tools { order: 2; margin-inline-start: auto; gap: 4px; }
  .site-header > .primary-nav {
    position: fixed;
    z-index: 92;
    top: 0;
    left: 0;
    right: auto;
    width: min(78vw, 400px);
    height: 100dvh;
    max-height: none;
    padding: calc(16px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--panel);
    border: 0;
    border-inline-end: 1px solid var(--line);
    border-radius: 0;
    box-shadow: 16px 0 48px #0003;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-104%);
    transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s;
  }
  .site-header > .primary-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }
  .drawer-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex: none; }
  .site-header > .primary-nav .drawer-heading .brand {
    min-width: 0;
    min-height: 44px;
    width: auto;
    flex: 0 1 auto;
    padding: 0;
    gap: 8px;
    font-size: clamp(.6875rem, 3.55vw, 1rem);
    background: transparent;
    color: var(--paper);
  }
  .drawer-heading .brand-mark { width: 1.25em; height: 1.25em; flex: 0 0 1.25em; font-size: inherit; }
  .drawer-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
  }
  .drawer-close:hover { background: var(--panel-2); color: var(--paper); }
  .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger]) {
    width: 100%;
    min-height: 44px;
    flex: 0 0 auto;
    padding: 10px 0;
    gap: 12px;
    justify-content: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 500;
  }
  .site-header > .primary-nav > a:first-of-type,
  .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger])[data-desktop-chat-trigger] { display: none; }
  .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger])[aria-current=page] { background: transparent; box-shadow: none; }
  .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger])[aria-current=page]::after { display: none; }
  .drawer-settings { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 24px; }
  .nav-backdrop, .account-menu-backdrop {
    display: block;
    position: fixed;
    z-index: 91;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .64);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
  }
  .account-menu-backdrop { z-index: 999; }
  body.nav-open .nav-backdrop,
  .account-menu:not([hidden]) + .account-menu-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  :root[dir=rtl] .site-header > .primary-nav { left: auto; right: 0; transform: translateX(104%); }
  :root[dir=rtl] .site-header > .primary-nav.open { transform: translateX(0); }
}

@media (max-width: 480px) {
  .site-header { padding-inline: 12px; gap: 8px; }
  .site-header > .brand { flex: 0 1 auto; gap: 6px; font-size: clamp(.6875rem, 3.55vw, 1rem); }
  .site-header > .brand > span:last-child { overflow: visible; }
  .site-header > .header-tools { gap: 0; }
  .site-header > .primary-nav { width: 80vw; padding-inline: 20px; }
  .drawer-heading { gap: 4px; }
  .drawer-heading .brand { font-size: clamp(.75rem, 3.5vw, 1rem); }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 8px; gap: 4px; }
  .site-header > .brand { font-size: .6875rem; gap: 4px; }
  .drawer-heading .brand { gap: 4px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header > .brand, .site-header > .primary-nav,
  .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger]), .site-header .header-tools > *,
  .site-header .theme-toggle > span[aria-hidden="true"],
  .site-header .header-tools .nav-icon, .site-header .account-link-avatar,
  .drawer-settings .theme-toggle::before, .nav-backdrop, .account-menu-backdrop { transition: none; }
}

/* Desktop shop styling also applies when the link moves beside the language control. */
.site-header > :is(.primary-nav, .header-tools) > :is(a, button[data-desktop-chat-trigger])[href$="/shop"] {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  white-space:nowrap;
  text-decoration:none;
  line-height:var(--header-icon-size);
  align-self:center;
  min-height:32px;
  padding:0 12px;
  gap:6px;
  border:1px solid var(--lime);
  border-radius:999px;
  background:transparent;
  color:var(--lime);
  box-shadow:none;
  font-weight:800;
}

.site-header > :is(.primary-nav, .header-tools) > :is(a, button[data-desktop-chat-trigger])[href$="/shop"] > svg {
  width:1.333333em;
  height:1.333333em;
}

:root[data-theme=light] .site-header > :is(.primary-nav, .header-tools) > :is(a, button[data-desktop-chat-trigger])[href$="/shop"] {
  color:var(--lime);
}

.site-header > :is(.primary-nav, .header-tools) > :is(a, button[data-desktop-chat-trigger])[href$="/shop"]:hover,
:root[data-theme=light] .site-header > :is(.primary-nav, .header-tools) > :is(a, button[data-desktop-chat-trigger])[href$="/shop"]:hover {
  border-color:var(--lime-hover);
}

.site-header > :is(.primary-nav, .header-tools) > :is(a, button[data-desktop-chat-trigger])[href$="/shop"]::after {
  display:none;
}

.site-header > :is(.primary-nav, .header-tools) > :is(a, button[data-desktop-chat-trigger])[href$="/shop"]:focus-visible {
  outline:2px solid var(--paper);
  outline-offset:3px;
}

@media (max-width:1279px) {
  /* The server renders the desktop position; the drawer owns this link on mobile. */
  :root .site-header > .header-tools > a[href$="/shop"] { display:none; }
  :root[data-theme] .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger])[href$="/shop"],
  :root[data-theme] .site-header > .primary-nav > :is(a, button[data-desktop-chat-trigger])[href$="/shop"]:hover {
    align-self:stretch;
    justify-content:flex-start;
    white-space:normal;
    min-height:44px;
    margin:0;
    padding:10px 0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--lime);
    box-shadow:none;
    font-size:1rem;
    line-height:1.4;
    font-weight:500;
  }
  .site-header > .primary-nav > a[href$="/shop"] > svg { display:none; }
  .site-header > .primary-nav > a:has(.nav-deal-count) { gap:8px; }
  .site-header > .primary-nav > a .nav-deal-count { margin:0; flex:none; }
}

/* The outlined shop badge keeps its original type size independently of menu labels. */
@media (min-width:1280px) {
  .site-header > :is(.primary-nav, .header-tools) > :is(a, button[data-desktop-chat-trigger])[href$="/shop"] {
    font-size:.84375rem;
  }
  .site-header.is-scrolled > :is(.primary-nav, .header-tools) > :is(a, button[data-desktop-chat-trigger])[href$="/shop"] {
    font-size:.75rem;
  }
}

@media (min-width:1280px) and (max-width:1510px) {
  :root:not(:lang(ko)) .site-header > :is(.primary-nav, .header-tools) > :is(a, button[data-desktop-chat-trigger])[href$="/shop"] {
    font-size:.75rem;
  }
}