/* =============================================================
   PART 10 — HEADER & NAVIGATION
   -------------------------------------------------------------
   The header is the site's chrome, so it is built the way the
   journey's HUD is built: hairlines, 0.7rem uppercase micro type
   on wide tracking, one accent moment, and nothing chunky.

   Two grounds have to work:
     solid  — every template except the front page, plus the
              front page once .is-pinned lands
     glass  — front page over the film, where journey.css sets
              the header to position:fixed / background:transparent

   Both are driven from one set of local tokens (--hdr-*) declared
   on .th-header and redeclared for the over-film state, so every
   component rule below is written once.

   NOTE ON SPECIFICITY: journey.css is enqueued *after* this part
   file, and it paints .site-header descendants at up to four
   classes. Every state rule here therefore carries the extra
   .th-header class so it outranks its journey.css counterpart.
   ============================================================= */

/* -------------------------------------------------------------
   1. LOCAL TOKENS + SHELL
   ------------------------------------------------------------- */
.site-header.th-header {
  --hdr-ease: cubic-bezier(0.2, 0.75, 0.2, 1);

  --hdr-ink:         var(--color-dark);
  /* The nav rail is the loud tier, so it gets its own resting colour a
     full step brighter than the utility labels above it. */
  --hdr-nav:         var(--color-text);
  --hdr-dim:         var(--color-text-light);
  --hdr-mute:        var(--color-text-muted);
  --hdr-line:        var(--color-border);
  --hdr-line-strong: var(--color-border-strong);
  --hdr-field:       color-mix(in srgb, var(--color-surface) 88%, transparent);
  --hdr-hover:       color-mix(in srgb, var(--ink) 7%, transparent);
  --hdr-rule-soft:   color-mix(in srgb, var(--color-border) 55%, transparent);
  /* The search trough catches light at its baseline instead of being
     drawn as a box. Two stops: at rest, and lit. */
  --hdr-trough:      color-mix(in srgb, var(--ink) 3.5%, transparent);
  --hdr-trough-hi:   color-mix(in srgb, var(--ink) 7%, transparent);

  /* ONE COLUMN GRID FOR BOTH TIERS.
     The bar used to be two independent layouts stacked: row 1 a
     three-column grid whose middle cell centred the search, row 2 a flex
     strip. The result was a grid break you could measure — the search
     rule started at x298 while the nav's first word started at x267.
     Both rows now run the *same* track list, so the masthead sits over
     the categories control and the search rule sits over "Home" to the
     pixel. Change these two numbers and both tiers move together. */
  --hdr-col-1:   226px;
  --hdr-col-gap: 48px;

  position: sticky;
  top: 0;
  z-index: 999;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: 1px solid var(--hdr-line);
  box-shadow: none;
  /* The mega menu drops out of the header, so vertical overflow has to
     stay visible. `clip` on the x axis is the only value that can be
     paired with a visible y axis without creating a scroll container
     (which would break the journey's sticky stage). */
  overflow-x: clip;
  overflow-y: visible;
  transition: background 0.4s ease, border-color 0.4s ease,
              box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

/* Rows --------------------------------------------------------
   Two tiers, and they are not the same size. The utility row is
   shallow chrome; the nav rail below it is taller and carries the
   display type, so the eye lands there first. */
.th-header .header-main {
  padding: 19px 0 17px;
  border-bottom: 1px solid var(--hdr-rule-soft);
}

.th-header .header-main > .container,
.th-header .header-nav > .container {
  display: grid;
  grid-template-columns: var(--hdr-col-1) minmax(0, 1fr) auto;
  column-gap: var(--hdr-col-gap);
  /* main.css tucks this to 10px, which knocks the logo 14px out of line
     with every other gutter on the page. */
  padding: 0 var(--container-padding);
}

.th-header .header-main > .container { align-items: center; }

.th-header .header-nav {
  /* A half-step deeper than the utility row above it. Two tiers should
     look like two tiers before a single word is read. */
  background: color-mix(in srgb, var(--night-2) 30%, transparent);
  border-bottom: none;
  overflow: visible;
}

.th-header .header-nav > .container {
  align-items: stretch;
  overflow: visible;
  height: 62px;
}

/* Explicit placement, so a missing control (the categories toggle is a
   customizer option) can never slide the whole rail into column 1. */
.th-header .site-logo,
.th-header .nav-categories-toggle { grid-column: 1; }
.th-header .header-search,
.th-header .primary-nav       { grid-column: 2; }
.th-header .header-actions,
.th-nav-note                  { grid-column: 3; }

/* -------------------------------------------------------------
   2. TYPE REGISTERS
   -------------------------------------------------------------
   The first pass set every string in the bar at ~11px tracked
   uppercase, so the two rows collapsed into one flat strip with
   nothing leading. The header now runs three deliberately
   different voices and never mixes them:

     DISPLAY  Fraunces 300, tight negative tracking, mixed case.
              The wordmark, the nav, the search's own voice.
              This is the primary tier — the same instrument the
              hero headline plays.
     UTILITY  Inter 500, sentence case, ~0.78rem, no tracking.
              Account / Saved / Cart. Deliberately unremarkable.
     HUD      Inter 500, 0.7rem uppercase on 0.2em. Only for
              labels *about* things: the brand kicker, the
              categories control, the shop count, the shelf jumps.

   Tracking is the tell: display is negative, utility is zero,
   HUD is wide. No two tiers share a value.
   ------------------------------------------------------------- */
.th-header .th-hud,
.th-header .site-logo-subtitle,
.th-header .nav-categories-toggle,
.th-header .header-search-hint,
.th-header .hs-chip,
.th-nav-note {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* -------------------------------------------------------------
   3. LOGO LOCKUP — the masthead
   ------------------------------------------------------------- */
.th-header .site-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  text-decoration: none;
}

.th-header .site-logo-lockup {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.th-header .site-logo-text {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.78rem;
  font-weight: 300;
  letter-spacing: -0.038em;
  line-height: 0.94;
  color: var(--hdr-ink);
}

.th-header .site-logo-text span { color: var(--color-accent); }

/* The hero labels itself with a 34x1px rule and a tracked micro-cap.
   The wordmark's descriptor borrows the same signature so it reads as
   a caption on the mark rather than as another nav item. */
.th-header .site-logo-subtitle {
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.24em;
  color: var(--hdr-mute);
  max-width: none;
  overflow: visible;
  transition: color 0.4s var(--hdr-ease);
}

.th-header .site-logo-subtitle::before {
  content: "";
  width: 20px;
  height: 1px;
  flex-shrink: 0;
  background: var(--hdr-line-strong);
  transition: width 0.45s var(--hdr-ease), background-color 0.4s var(--hdr-ease);
}

.th-header .site-logo:hover .site-logo-subtitle::before {
  width: 34px;
  background: var(--color-accent);
}

.th-header .site-logo img { max-height: 46px; width: auto; }

/* -------------------------------------------------------------
   4. SEARCH — a trough with a voice, not a wireframe rectangle
   -------------------------------------------------------------
   Three things carry it: the prompt is set in the display italic
   so the field speaks in the brand's own voice instead of shouting
   in 11px caps; the box is gone in favour of a baseline rule that
   starts as the hero's short accent tick and runs the full width on
   focus; and the right third — previously empty — holds the shelf
   jumps, which trade places with the Enter keycap when the field
   goes live.
   ------------------------------------------------------------- */
.th-header .header-search {
  position: relative;
  width: 100%;
  max-width: 640px;
  /* Left-aligned in its track, not centred in it: the rule's left end IS
     the second column, and the nav rail below starts on the same line. */
  margin: 0;
  justify-self: start;
}

.th-header .header-search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 2px 0 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 38%, var(--hdr-trough) 100%);
  overflow: visible;
  transition: background 0.4s var(--hdr-ease);
}

/* The baseline. Full width, always drawn, quiet. */
.th-header .header-search-form::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hdr-line-strong);
  transition: background-color 0.4s var(--hdr-ease);
}

/* The accent tick that grows into the baseline on focus. */
.th-header .header-search-form::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0.068);
  transform-origin: left center;
  transition: transform 0.55s var(--hdr-ease);
  z-index: 1;
}

.th-header .header-search-form:hover { background: linear-gradient(180deg, transparent 22%, var(--hdr-trough-hi) 100%); }
.th-header .header-search-form:hover::before { transform: scaleX(0.16); }

.th-header .header-search-form:focus-within {
  background: linear-gradient(180deg, transparent 14%, var(--hdr-trough-hi) 100%);
  border-color: transparent;
}

/* The site-wide :focus-visible ring is a 2px rounded rectangle. On a
   field that has deliberately shed its box that ring reads as the
   wireframe rectangle coming back, so this one input hands its focus
   indicator to the component: the baseline doubles, runs the full width
   in the accent, throws a soft glow, and the Enter keycap appears. That
   is a larger and higher-contrast change of state than the ring it
   replaces, so nothing is lost for keyboard users. */
.th-header .header-search-input:focus,
.th-header .header-search-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.th-header .header-search-form:focus-within::before {
  transform: scaleX(1);
  height: 2px;
  box-shadow: 0 -8px 22px -8px color-mix(in srgb, var(--color-accent) 60%, transparent);
}

.th-header .header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--hdr-mute);
  transition: color 0.3s var(--hdr-ease);
}

.th-header .header-search-btn:hover,
.th-header .header-search-form:focus-within .header-search-btn {
  background: none;
  color: var(--color-accent);
}

.th-header .header-search-btn svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.5;
}

.th-header .header-search-input {
  flex: 1 1 auto;
  min-width: 0;
  /* The global form reset gives every input a 52px min-height, a radius
     and a 1px inset white top highlight. All three have to go or the
     field wears a ghost box-top rule 2px above the trough. */
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  padding: 0;
  outline: none;
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.02rem;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--hdr-ink);
}

.th-header .header-search-input::placeholder {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: 1.02rem;
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.012em;
  color: var(--hdr-mute);
  opacity: 1;
  transition: color 0.3s var(--hdr-ease);
}

.th-header .header-search-form:hover .header-search-input::placeholder { color: var(--hdr-dim); }

/* Right-hand slot: jumps and keycap share one grid cell so swapping
   them cannot nudge the field. */
.th-header .header-search-aux {
  position: relative;
  display: grid;
  flex-shrink: 0;
  align-items: center;
  justify-items: end;
}

.th-header .header-search-jump,
.th-header .header-search-hint { grid-area: 1 / 1; }

.th-header .header-search-jump {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 22px;
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--hdr-ease), transform 0.35s var(--hdr-ease);
}

/* A hairline gate so the jumps read as a separate rail rather than as
   the tail of the prompt. */
.th-header .header-search-jump::before {
  content: "";
  width: 1px;
  height: 15px;
  margin-right: 12px;
  background: var(--hdr-line);
  flex-shrink: 0;
}

.th-header .hs-chip {
  letter-spacing: 0.16em;
  color: var(--hdr-mute);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s var(--hdr-ease);
}

.th-header .hs-chip:hover { color: var(--color-accent); }

.th-header .hs-slash {
  width: 1px;
  height: 9px;
  background: var(--hdr-line);
  transform: rotate(16deg);
  flex-shrink: 0;
}

.th-header .header-search-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border: 1px solid var(--hdr-line-strong);
  border-radius: 2px;
  letter-spacing: 0.16em;
  color: var(--hdr-dim);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s var(--hdr-ease), transform 0.35s var(--hdr-ease);
  pointer-events: none;
  white-space: nowrap;
}

.th-header .header-search-hint i {
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--color-accent);
}

.th-header .header-search-form:focus-within .header-search-jump {
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
}

.th-header .header-search-form:focus-within .header-search-hint {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------
   5. UTILITY CLUSTER — the whisper tier
   -------------------------------------------------------------
   This corner was the one un-branded object in the bar: bold sans
   "Sign In / Saved" beside a bordered "Cart · $0.00" pill wearing a
   green 0 badge on an empty cart — stock e-commerce chrome shouting
   down the serif wordmark opposite it.

   It is now spoken in the bar's own language. No boxes: the pill's
   border and the pill's hover fill are gone, so nothing over here is
   drawn, only set. The two identity links take the exact register of
   the wordmark's own caption — 0.7rem uppercase on 0.16em, cream at
   the muted step — and the only voice that rises above it is the
   basket total, set in the display serif. The count never appears as
   a numeral: when the basket has something in it the bag grows a 4px
   sage dot, and when it is empty there is nothing to see at all.
   ------------------------------------------------------------- */
.th-header .header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  justify-self: end;
}

.th-header .header-action-btn.th-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hdr-mute);
  text-decoration: none;
  transition: color 0.3s var(--hdr-ease);
}

/* Colour is the whole hover. A background swatch here would rebuild the
   box this cluster just shed. */
.th-header .header-action-btn.th-action:hover,
.th-header .header-action-btn.th-action:focus-visible {
  background: none;
  color: var(--hdr-ink);
}

.th-header .th-action-ico {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.th-header .th-action-ico svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke-width: 1.35;
  color: inherit;
  transition: color 0.3s var(--hdr-ease);
}

.th-header .th-action:hover .th-action-ico svg { color: var(--color-accent); }

/* Same instrument as "TEA & TEAWARE" under the wordmark. */
.th-header .th-action-label {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: inherit;
  white-space: nowrap;
}

/* One hairline, and it sits where the meaning changes: identity to the
   left of it, commerce to the right. */
.th-header .th-action-rule {
  width: 1px;
  height: 15px;
  margin: 0 -4px;
  background: var(--hdr-line);
  flex-shrink: 0;
}

.th-header .header-action-btn.th-action--cart {
  border: 0;
  border-radius: 0;
  margin-left: 0;
  padding: 8px 0;
  color: var(--hdr-mute);
}

.th-header .header-action-btn.th-action--cart:hover {
  border-color: transparent;
  background: none;
  color: var(--hdr-ink);
}

.th-header .th-action-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--hdr-line-strong);
  flex-shrink: 0;
}

/* The one line in the cluster allowed to speak in the display face —
   which is exactly why the rest of it can afford to whisper. */
.th-header .cart-total {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.04rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--hdr-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.3s var(--hdr-ease);
}

.th-header .th-action--cart:hover .cart-total { color: var(--color-accent); }

/* --- An empty basket says nothing -----------------------------------------
   The badge went from a filled green "0" to a 4px dot that only exists when
   the basket does — but the running total did not follow it, so the loudest
   object in the bar was still a display-face `$0.00`: the one line allowed
   to speak, spending it on the fact that nothing had happened yet.  When the
   count is hidden, so are the total and the separator that carries it, and
   the cluster closes to three words of HUD text — SIGN IN · SAVED | CART.
   The moment something is added, main.js clears `hidden` on the figure and
   the total returns with a number worth reading.

   `:has()` rather than a body class because the cart count is written into
   the DOM by script after every add-to-cart; this tracks that write with no
   second hook to keep in step.  Behind a support query, so a browser without
   `:has()` simply keeps showing the total, which is the old behaviour and
   never a broken one. */
@supports selector(:has(*)) {
  .th-header .th-action--cart:has(.header-action-badge[hidden]) .th-action-dot,
  .th-header .th-action--cart:has(.header-action-badge[hidden]) .cart-total,
  .mobile-nav-foot-item:has(.header-action-badge[hidden]) .cart-total {
    display: none;
  }
}

/* The count, as a mark rather than a number. `hidden` is kept in sync
   with the text by the observer at the foot of header.php, so an empty
   basket carries nothing and a full one carries a single sage dot. The
   figure itself stays in the DOM for the cart script to write into. */
.th-header .hdr-badge,
.mobile-nav .hdr-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 4px;
  height: 4px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
  text-align: left;
  text-indent: -99px;
  pointer-events: none;
}

.th-header .hdr-badge[hidden],
.mobile-nav .hdr-badge[hidden] { display: none; }

/* -------------------------------------------------------------
   6. NAV RAIL — the primary tier
   -------------------------------------------------------------
   This row is the header's leading voice. The destinations are set
   in the display serif at mixed case, so they read as names rather
   than as another line of chrome, and the current page takes the
   hero's own signature: one word, italic, in the accent. Everything
   else on the rail stays HUD micro-caps, which is exactly why the
   serif reads as primary.
   ------------------------------------------------------------- */
.th-header .nav-categories-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
  white-space: nowrap;
  color: var(--hdr-dim);
  transition: color 0.3s var(--hdr-ease);
}

.th-header .nav-categories-toggle:hover,
.th-header .nav-categories-toggle.active { color: var(--hdr-ink); }

.th-header .nav-categories-toggle svg {
  width: 10px;
  height: 10px;
  stroke-width: 2;
  color: var(--hdr-mute);
  transition: transform 0.35s var(--hdr-ease), color 0.3s var(--hdr-ease);
}

.th-header .nav-categories-toggle:hover svg,
.th-header .nav-categories-toggle.active svg { color: var(--color-accent); }

.th-cats-label { position: relative; }

.th-cats-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--hdr-ease);
}

.th-header .nav-categories-toggle:hover .th-cats-label::after,
.th-header .nav-categories-toggle.active .th-cats-label::after { transform: scaleX(1); }

/* Hairline burger glyph, shared by the categories toggle and the
   mobile trigger. */
.th-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 17px;
  flex-shrink: 0;
}

.th-burger i {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: width 0.35s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
}

.th-burger i:nth-child(2) { width: 64%; }

.th-header .nav-categories-toggle:hover .th-burger i:nth-child(2),
.th-header .mobile-menu-toggle:hover .th-burger i:nth-child(2) { width: 100%; }

.th-burger--sm { width: 14px; gap: 3px; }

/* Primary nav ------------------------------------------------- */
.th-header .primary-nav {
  min-width: 0;
  height: 100%;
  justify-self: start;
}

/* Gap, not padding. Padding put 19px of dead box in front of "Home",
   which is what pushed the first word off the column the search rule
   starts on. With a gap the word itself sits on the line, and every
   underline marker measures its own word instead of its own padding. */
.th-header .primary-nav ul {
  display: flex;
  align-items: stretch;
  gap: 36px;
  height: 100%;
  list-style: none;
}

.th-header .primary-nav > ul > li { position: relative; }

.th-header .primary-nav > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1;
  text-transform: none;
  letter-spacing: -0.018em;
  white-space: nowrap;
  color: var(--hdr-nav);
  text-decoration: none;
  transition: color 0.32s var(--hdr-ease);
}

/* The marker sits on the header's own bottom edge, which turns the
   row into a tab strip instead of a list of words with a floating
   underline halfway up. */
.th-header .primary-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.45s var(--hdr-ease);
}

.th-header .primary-nav > ul > li > a:hover { color: var(--hdr-ink); }

.th-header .primary-nav > ul > li > a:hover::after { transform: scaleX(1); }

/* One accent moment per view, borrowed straight from the hero's
   italic word. */
.th-header .primary-nav > ul > li.current-menu-item > a,
.th-header .primary-nav > ul > li.current-menu-ancestor > a,
.th-header .primary-nav > ul > li.current_page_item > a {
  font-style: italic;
  color: var(--color-accent);
}

.th-header .primary-nav > ul > li.current-menu-item > a::after,
.th-header .primary-nav > ul > li.current-menu-ancestor > a::after,
.th-header .primary-nav > ul > li.current_page_item > a::after { transform: scaleX(1); }

/* Any sub-menu the primary nav may carry. */
.th-header .primary-nav .sub-menu,
.th-header .primary-nav .dropdown {
  position: absolute;
  top: 100%;
  left: 8px;
  min-width: 210px;
  padding: 8px 0;
  background: color-mix(in srgb, var(--color-contrast) 96%, transparent);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 1px solid var(--color-border-strong);
  border-top: 1px solid var(--color-accent);
  border-radius: 0 0 3px 3px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.3s var(--hdr-ease), transform 0.3s var(--hdr-ease),
              visibility 0.3s var(--hdr-ease);
  z-index: 1200;
}

.th-header .primary-nav > ul > li:hover .sub-menu,
.th-header .primary-nav > ul > li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.th-header .primary-nav .sub-menu a,
.th-header .primary-nav .dropdown a {
  display: block;
  padding: 10px 20px;
  border-bottom: 0;
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 0.98rem;
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.015em;
  color: var(--color-text-light);
  transition: color 0.3s var(--hdr-ease), padding-left 0.3s var(--hdr-ease);
}

.th-header .primary-nav .sub-menu a:hover,
.th-header .primary-nav .dropdown a:hover {
  background: none;
  color: var(--color-accent);
  padding-left: 26px;
}

/* Right-hand HUD note ----------------------------------------- */
.th-nav-note {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding-left: 26px;
  align-self: center;
  justify-self: end;
  white-space: nowrap;
  color: var(--hdr-mute);
  text-decoration: none;
  transition: color 0.3s var(--hdr-ease);
}

.th-nav-note b {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.02rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--hdr-dim);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--hdr-ease);
}

.th-nav-note:hover { color: var(--hdr-dim); }
.th-nav-note:hover b { color: var(--color-accent); }

.th-nav-note-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
  flex-shrink: 0;
  align-self: center;
}

/* -------------------------------------------------------------
   7. MEGA MENU — an editorial index, not a grey list
   ------------------------------------------------------------- */
.categories-dropdown.th-mega {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  padding: 0;
  /* Opaque, with a faint lift at the top edge — a translucent panel let the
     archive behind it read straight through the category names. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-surface) 55%, var(--color-contrast)) 0%,
      var(--color-contrast) 62%);
  border: 1px solid var(--color-border-strong);
  border-top: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 40px 90px color-mix(in srgb, var(--night-2) 72%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  animation: none;
  transition: opacity 0.35s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1)),
              transform 0.35s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1)),
              visibility 0.35s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
  z-index: 1200;
}

.categories-dropdown.th-mega.open {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  animation: none;
}

.th-mega-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.th-mega-main { padding: 36px 44px 40px var(--container-padding); }

.th-mega-aside {
  padding: 36px var(--container-padding) 40px 40px;
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.th-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--color-text-muted);
}

.th-kicker-rule {
  width: 34px;
  height: 1px;
  background: var(--color-border-strong);
  flex-shrink: 0;
}

.th-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
}

.th-mega .cat-dropdown-item {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: border-color 0.3s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
}

.th-mega .cat-dropdown-item:hover {
  background: none;
  padding-left: 0;
  border-bottom-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.th-cat-fig {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface);
}

.th-cat-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.5) brightness(0.82);
  transform: scale(1);
  transition: filter 0.5s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1)),
              transform 0.6s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
}

.th-mega .cat-dropdown-item:hover .th-cat-fig img {
  filter: none;
  transform: scale(1.08);
}

.th-cat-fig-fallback {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.th-cat-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  transform: translateX(0);
  transition: transform 0.45s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
}

.th-mega .cat-dropdown-item:hover .th-cat-body { transform: translateX(5px); }

.th-cat-index {
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
}

.th-cat-name {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
}

.th-mega .cat-dropdown-item:hover .th-cat-name { color: var(--color-accent); }
.th-mega .cat-dropdown-item:hover .th-cat-index { color: var(--color-text-light); }

.th-cat-count {
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Aside ------------------------------------------------------- */
.th-mega-shot {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 26px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: center;
  filter: grayscale(0.35) brightness(0.78);
  transition: filter 0.6s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
}

.th-mega-aside:hover .th-mega-shot { filter: grayscale(0) brightness(0.92); }

.th-mega-lede {
  margin: 0 0 auto;
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.035em;
  color: var(--color-dark);
  text-wrap: balance;
}

.th-mega-lede em {
  font-style: italic;
  color: var(--color-accent);
}

.th-mega-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--color-border-strong);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-dark);
  text-decoration: none;
  transition: color 0.3s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1)),
              border-color 0.3s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
}

.th-mega-cta svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
  transition: transform 0.4s var(--hdr-ease, cubic-bezier(0.2, 0.75, 0.2, 1));
}

.th-mega-cta:hover {
  color: var(--color-accent);
  border-bottom-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

.th-mega-cta:hover svg { transform: translateX(5px); }

/* -------------------------------------------------------------
   8. MOBILE TRIGGER + DRAWER
   ------------------------------------------------------------- */
.th-header .mobile-menu-toggle {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hdr-dim);
  cursor: pointer;
  transition: color 0.3s var(--hdr-ease);
}

.th-header .mobile-menu-toggle:hover {
  background: none;
  color: var(--hdr-ink);
}

.mobile-overlay {
  background: color-mix(in srgb, var(--night-2) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.mobile-nav {
  --hdr-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  width: min(88vw, 375px);
  background: var(--color-contrast);
  border-right: 1px solid var(--color-border);
  box-shadow: 30px 0 90px color-mix(in srgb, var(--night-2) 70%, transparent);
  transition: transform 0.5s var(--hdr-ease);
  padding-bottom: 28px;
}

.mobile-nav-header {
  background: transparent;
  padding: 24px 24px 22px;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}

.mobile-nav-brand {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
}

.mobile-nav .site-logo-text {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.45rem;
  font-weight: 300;
  letter-spacing: -0.032em;
  line-height: 1;
  color: var(--color-dark);
}

.mobile-nav .site-logo-text span { color: var(--color-accent); }

.mobile-nav-brand-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-text-muted);
}

.mobile-nav-brand-sub::before {
  content: "";
  width: 20px;
  height: 1px;
  flex-shrink: 0;
  background: var(--color-border-strong);
}

.mobile-nav-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: none;
  color: var(--color-text-light);
  font-size: inherit;
  cursor: pointer;
  transition: color 0.3s var(--hdr-ease), border-color 0.3s var(--hdr-ease);
}

.mobile-nav-close:hover {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.mobile-nav-close svg { width: 16px; height: 16px; stroke-width: 1.6; }

/* Same trough as the desktop field so the drawer is not a different
   design language: baseline rule, accent tick, display-italic prompt. */
.mobile-nav-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  height: 50px;
  margin: 20px 24px 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--ink) 4%, transparent) 100%);
  transition: background 0.35s var(--hdr-ease);
}

.mobile-nav-search::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-border-strong);
}

.mobile-nav-search::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0.1);
  transform-origin: left center;
  transition: transform 0.55s var(--hdr-ease);
  z-index: 1;
}

.mobile-nav-search:focus-within {
  background: linear-gradient(180deg, transparent 14%, color-mix(in srgb, var(--ink) 8%, transparent) 100%);
}

.mobile-nav-search input:focus,
.mobile-nav-search input:focus-visible {
  outline: none;
  box-shadow: none;
}

.mobile-nav-search:focus-within::before {
  transform: scaleX(1);
  height: 2px;
  box-shadow: 0 -8px 22px -8px color-mix(in srgb, var(--color-accent) 60%, transparent);
}

.mobile-nav-search button {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.mobile-nav-search button svg { width: 16px; height: 16px; stroke-width: 1.6; }

.mobile-nav-search input {
  flex: 1;
  min-width: 0;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  padding: 0;
  outline: none;
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.02rem;
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--color-dark);
}

.mobile-nav-search input::placeholder {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: 1.02rem;
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.012em;
  color: var(--color-text-muted);
  opacity: 1;
}

.mobile-nav-menu {
  padding: 12px 24px 0;
  counter-reset: mnav;
}

.mobile-nav-menu li {
  list-style: none;
  counter-increment: mnav;
}

.mobile-nav-menu a {
  display: flex;
  align-items: baseline;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: 1.28rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-dark);
  text-decoration: none;
  transition: color 0.3s var(--hdr-ease);
}

.mobile-nav-menu > li > a::before {
  content: counter(mnav, decimal-leading-zero);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 0.3s var(--hdr-ease);
}

.mobile-nav-menu a:hover {
  background: none;
  color: var(--color-accent);
}

/* Same signature as the desktop rail: the page you are on is the one
   italic accent word in the view. */
.mobile-nav-menu .current-menu-item > a,
.mobile-nav-menu .current_page_item > a {
  background: none;
  font-style: italic;
  color: var(--color-accent);
}

.mobile-nav-menu a:hover::before,
.mobile-nav-menu .current-menu-item > a::before,
.mobile-nav-menu .current_page_item > a::before { color: var(--color-text-light); font-style: normal; }

.mobile-nav-menu ul {
  list-style: none;
  padding-left: 30px;
}

.mobile-nav-menu ul a {
  font-family: var(--font-primary);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 11px 0;
  color: var(--color-text-light);
}

.mobile-nav-menu ul > li > a::before { content: none; }

.mobile-nav-foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 24px 0;
}

.mobile-nav-foot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 15px 6px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-family: var(--font-primary);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.3s var(--hdr-ease), border-color 0.3s var(--hdr-ease);
}

.mobile-nav-foot-item svg { width: 18px; height: 18px; stroke-width: 1.5; }

.mobile-nav-foot-item .th-action-ico { position: relative; display: flex; }

.mobile-nav-foot-item:hover {
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.mobile-nav-foot-item .cart-total {
  margin-top: -3px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   9. FRONT PAGE — the two grounds
   journey.css loads after this file, so each rule below carries
   one more class than the journey.css rule it replaces.
   ------------------------------------------------------------- */

/* A soft multi-stop scrim so the chrome keeps its contrast over any
   frame of the film, and fades out once the header goes solid. */
body.has-journey .site-header.th-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 64px);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--night-2) 82%, transparent) 0%,
    color-mix(in srgb, var(--night-2) 52%, transparent) 46%,
    color-mix(in srgb, var(--night-2) 18%, transparent) 78%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: -1;
}

body.has-journey .site-header.th-header.is-pinned::before { opacity: 0; }

/* --- over the film --- */
body.has-journey .site-header.th-header:not(.is-pinned) {
  --hdr-ink:         var(--ink);
  --hdr-nav:         color-mix(in srgb, var(--ink) 92%, transparent);
  --hdr-dim:         color-mix(in srgb, var(--ink) 74%, transparent);
  --hdr-mute:        color-mix(in srgb, var(--ink) 60%, transparent);
  --hdr-line:        color-mix(in srgb, var(--ink) 20%, transparent);
  --hdr-line-strong: color-mix(in srgb, var(--ink) 26%, transparent);
  --hdr-field:       color-mix(in srgb, var(--ink) 9%, transparent);
  --hdr-hover:       color-mix(in srgb, var(--ink) 13%, transparent);
  --hdr-rule-soft:   color-mix(in srgb, var(--ink) 12%, transparent);
  --hdr-trough:      color-mix(in srgb, var(--ink) 8%, transparent);
  --hdr-trough-hi:   color-mix(in srgb, var(--ink) 14%, transparent);

  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* No rule across the photograph — the scrim does the separating. */
  border-bottom-color: transparent;
  box-shadow: none;
}

body.has-journey .site-header.th-header:not(.is-pinned) .header-main {
  border-bottom-color: transparent;
}

/* Nothing may sit between the film and the chrome. */
body.has-journey .site-header.th-header:not(.is-pinned) .header-nav {
  background: transparent;
}

body.has-journey .site-header.th-header.is-pinned .header-nav {
  background: color-mix(in srgb, var(--night-2) 30%, transparent);
}

body.has-journey .site-header.th-header:not(.is-pinned) .site-logo-text,
body.has-journey .site-header.th-header:not(.is-pinned) .cart-total,
body.has-journey .site-header.th-header:not(.is-pinned) .header-action-btn {
  color: var(--hdr-ink);
}

body.has-journey .site-header.th-header:not(.is-pinned) .header-action-btn.th-action {
  color: var(--hdr-dim);
}

body.has-journey .site-header.th-header:not(.is-pinned) .header-action-btn.th-action--cart {
  color: var(--hdr-mute);
}

/* journey.css paints a translucent swatch behind every header action on
   hover. Over the film that swatch is the same box this cluster was
   rebuilt to lose, so it is answered here at higher specificity. */
body.has-journey .site-header.th-header:not(.is-pinned) .header-action-btn:hover,
body.has-journey .site-header.th-header:not(.is-pinned) .header-action-btn.th-action:hover {
  background: none;
  color: var(--hdr-ink);
}

body.has-journey .site-header.th-header:not(.is-pinned) .cart-total {
  color: var(--hdr-dim);
}

body.has-journey .site-header.th-header:not(.is-pinned) .th-action-label {
  color: inherit;
}

body.has-journey .site-header.th-header:not(.is-pinned) .site-logo-subtitle {
  color: var(--hdr-mute);
}

body.has-journey .site-header.th-header:not(.is-pinned) .nav-categories-toggle {
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--hdr-ink);
}

body.has-journey .site-header.th-header:not(.is-pinned) .primary-nav > ul > li > a {
  color: var(--hdr-nav);
}

body.has-journey .site-header.th-header:not(.is-pinned) .primary-nav > ul > li > a:hover,
body.has-journey .site-header.th-header:not(.is-pinned) .primary-nav > ul > li.current-menu-item > a,
body.has-journey .site-header.th-header:not(.is-pinned) .primary-nav > ul > li.current-menu-ancestor > a {
  color: var(--hdr-ink);
}

/* journey.css paints .header-search-form as a bordered translucent box.
   Every one of those declarations has to be answered here or the trough
   grows its old rectangle back over the film. */
body.has-journey .site-header.th-header:not(.is-pinned) .header-search-form {
  background: linear-gradient(180deg, transparent 38%, var(--hdr-trough) 100%);
  border: 0;
  border-radius: 0;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body.has-journey .site-header.th-header:not(.is-pinned) .header-search-form:hover {
  background: linear-gradient(180deg, transparent 22%, var(--hdr-trough-hi) 100%);
}

body.has-journey .site-header.th-header:not(.is-pinned) .header-search-form:focus-within {
  background: linear-gradient(180deg, transparent 14%, var(--hdr-trough-hi) 100%);
}

body.has-journey .site-header.th-header:not(.is-pinned) .header-search-input {
  color: var(--hdr-ink);
}

body.has-journey .site-header.th-header:not(.is-pinned) .header-search-input::placeholder,
body.has-journey .site-header.th-header.is-pinned .header-search-input::placeholder {
  color: var(--hdr-mute);
}

/* The nav is the loud tier on the film too: mixed-case display serif,
   with the current page taking the hero's italic accent word. */
body.has-journey .site-header.th-header:not(.is-pinned) .primary-nav > ul > li.current-menu-item > a,
body.has-journey .site-header.th-header:not(.is-pinned) .primary-nav > ul > li.current-menu-ancestor > a,
body.has-journey .site-header.th-header:not(.is-pinned) .primary-nav > ul > li.current_page_item > a {
  font-style: italic;
  color: var(--color-accent);
}

body.has-journey .site-header.th-header:not(.is-pinned) .header-search-btn {
  color: var(--hdr-mute);
}

/* --- scrolled past the journey: solid glass --- */
body.has-journey .site-header.th-header.is-pinned {
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  border-bottom-color: var(--color-border);
  box-shadow: 0 20px 55px color-mix(in srgb, var(--night-2) 55%, transparent);
}

body.has-journey .site-header.th-header.is-pinned .header-search-form {
  background: linear-gradient(180deg, transparent 38%, var(--hdr-trough) 100%);
  border: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.has-journey .site-header.th-header.is-pinned .header-search-form:hover,
body.has-journey .site-header.th-header.is-pinned .header-search-form:focus-within {
  background: linear-gradient(180deg, transparent 20%, var(--hdr-trough-hi) 100%);
}

body.has-journey .site-header.th-header.is-pinned .header-search-input {
  color: var(--hdr-ink);
}

body.has-journey .site-header.th-header.is-pinned .nav-categories-toggle {
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.has-journey .site-header.th-header.is-pinned .header-action-btn:hover,
body.has-journey .site-header.th-header.is-pinned .header-action-btn.th-action:hover {
  background: none;
  color: var(--hdr-ink);
}

/* -------------------------------------------------------------
   10. RESPONSIVE — this file loads after every media query in
      main.css, so all of it has to be restated here.
   ------------------------------------------------------------- */
/* The trough's width ladder is set by what has to fit inside it, not by
   taste: 44px of glyph, the prompt at its natural width, the hairline
   gate, and the jumps. Each step below drops one jump before it narrows
   the field far enough to clip the prompt. */
@media (max-width: 1400px) {
  .site-header.th-header { --hdr-col-1: 212px; --hdr-col-gap: 40px; }
  .th-header .header-search { max-width: 600px; }
  .th-header .primary-nav ul { gap: 32px; }
  .th-header .header-actions { gap: 22px; }
}

@media (max-width: 1320px) {
  .site-header.th-header { --hdr-col-1: 200px; --hdr-col-gap: 32px; }
  .th-header .header-search { max-width: 560px; }
  .th-header .header-search-input,
  .th-header .header-search-input::placeholder { font-size: 0.96rem; }
  /* Three jumps no longer clear the prompt; keep the first two. */
  .th-header .hs-chip:nth-of-type(3),
  .th-header .hs-slash:nth-of-type(2) { display: none; }
  .th-header .primary-nav ul { gap: 28px; }
  .th-header .primary-nav > ul > li > a { font-size: 1.02rem; }
  .th-header .nav-categories-toggle { letter-spacing: 0.15em; }
  .th-header .header-actions { gap: 20px; }
}

@media (max-width: 1180px) {
  .th-header .th-action-label,
  .th-header .th-action-rule { display: none; }
  .th-header .header-actions { gap: 18px; }
  .th-header .header-search { max-width: 520px; }
  .th-nav-note { display: none; }
}

@media (max-width: 1024px) {
  .site-header.th-header { --hdr-col-1: 178px; --hdr-col-gap: 26px; }
  .th-header .site-logo-subtitle { display: none; }
  .th-header .site-logo-text { font-size: 1.54rem; }
  .th-header .header-search { max-width: 480px; }
  .th-header .nav-categories-toggle { letter-spacing: 0.12em; }
  .th-header .primary-nav ul { gap: 22px; }
  .th-header .primary-nav > ul > li > a { font-size: 0.98rem; }
  .th-header .header-nav > .container { height: 56px; }
  .th-mega-inner { grid-template-columns: minmax(0, 1fr) 260px; }
  .th-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .th-mega-main { padding: 28px 30px 30px var(--container-padding); }
  .th-mega-aside { padding: 28px var(--container-padding) 30px 30px; }
}

@media (max-width: 900px) {
  .site-header.th-header { --hdr-col-1: 172px; --hdr-col-gap: 20px; }
  /* The prompt alone now needs every pixel of the trough. */
  .th-header .header-search { max-width: 380px; }
  .th-header .header-search-jump { display: none; }
  .th-header .nav-categories-toggle { letter-spacing: 0.1em; }
  .th-header .primary-nav ul { gap: 18px; }
  .th-mega-inner { grid-template-columns: minmax(0, 1fr); }
  .th-mega-aside { display: none; }
}

@media (max-width: 768px) {
  .th-header .header-main {
    padding: 13px 0;
    border-bottom: none;
  }
  .th-header .header-main > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 var(--container-padding);
  }
  /* The rail has nothing left on it once nav and categories drop out. */
  .th-header .header-nav { display: none; }
  .th-header .header-search { display: none; }
  .th-header .site-logo { gap: 11px; }
  .th-header .site-logo-text { font-size: 1.3rem; }
  .th-header .site-logo-subtitle { display: none; }
  .th-header .header-actions { gap: 2px; }
  .th-header .th-action-label,
  .th-header .th-action-rule,
  .th-header .th-action-dot,
  .th-header .header-search-hint { display: none; }
  .th-header .header-action-btn.th-action { padding: 10px; }
  .th-header .header-action-btn.th-action--cart {
    border-color: transparent;
    padding: 10px;
    margin-left: 0;
  }
  .th-header .th-action-ico svg { width: 19px; height: 19px; }
  .th-header .header-action-btn.th-action--cart .cart-total { display: none; }
  .th-header .mobile-menu-toggle { width: 40px; height: 40px; margin-left: 4px; }
}

@media (max-width: 420px) {
  .th-header .site-logo-text { font-size: 1.2rem; }
  .th-header .header-action-btn.th-action { padding: 7px; }
  .th-header .th-action-ico svg { width: 18px; height: 18px; }
  .th-header .mobile-menu-toggle { width: 38px; height: 38px; margin-left: 2px; }
  .mobile-nav-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mobile-nav-foot-item { padding: 14px 4px; font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .th-header *,
  .mobile-nav * { transition: none !important; }
}


/* =============================================================================
   THE AXIS, AND WHAT IT COSTS THE SEARCH FIELD
   -----------------------------------------------------------------------------
   The header now runs the document's own gutter — clamp(22px, 7vw, 108px), the
   journey's measure — so the wordmark starts on the same left edge as the
   display headline below it. That is 152px the rail no longer has at 1440, and
   the field paid for it: the input dropped to 297px and clipped its own
   placeholder mid-word.

   The shelf jumps give it back. Three of them is a luxury of width, not a
   fixed requirement — below 1560px the rail carries two and the field takes the
   ~90px back, which is the difference between a search box you can read and one
   you can only squint at. Below 1240px they stand down entirely.
   ========================================================================== */

@media (max-width: 1560px) {
  .th-header .header-search-jump .hs-chip:nth-of-type(3),
  .th-header .header-search-jump .hs-slash:nth-of-type(2) { display: none; }
}

@media (max-width: 1300px) {
  .th-header .header-search-jump .hs-chip:nth-of-type(2),
  .th-header .header-search-jump .hs-slash:nth-of-type(1) { display: none; }
}