/* ============================================================
   FACELESSIMPRESSIONS — theme-aged.css  v7
   Load LAST in master.njk.

   v4 added the site backdrop: a fixed grid + red bloom layer behind
   everything. See the BACKDROP section below. The section wrappers
   (.ya-hero, .ya-section, .ya-pdp, .ya-owner) had to drop their own
   opaque --ya-ink background or they'd paint straight over it. Cards
   and panels keep their solid --ya-slab, which is what makes them
   read as sitting on top of the backdrop.

   v5 turns the header into a floating pill. See the HEADER section.
   No change to navbar.njk: the base markup is <nav class="navbar">
   wrapping <div class="container">, so the nav becomes a transparent
   strip and the container becomes the pill.

   v6 swaps the bloom and the accent from vermilion to blue.

   v7 fixes the login modal. The backdrop layers used to sit at
   z-index 0, which forced #app up to z-index 1 to stay above them.
   That made #app a stacking context, and SellAuth appends
   .modal-backdrop (z 1050) to <body> while mounting .modal (z 1055)
   INSIDE #app — so the modal's 1055 was scoped within #app and lost
   to a backdrop painted outside it. The dialog rendered under its own
   dimmer and the whole page went unclickable. The layers now sit at
   z-index -1 and #app is back to z-index auto, so no stacking context
   is created and the two z-indexes compare on the same footing.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Martian+Mono:wght@400;600;700&display=swap');

:root {
  --ya-void:      #08090B;
  --ya-ink:       #0E1013;
  --ya-slab:      #16181D;
  --ya-slab-lift: #1C1F26;
  --ya-rule:      #262A31;
  --ya-rule-soft: #1E2229;
  --ya-bone:      #E8E6E1;
  --ya-dim:       #8A8F98;
  --ya-faint:     #5C616B;
  --ya-flare:     #3B82F6;
  --ya-live:      #7FD1A4;
  --ya-low:       #E0B341;
  --ya-gone:      #6B7078;
  --ya-dead:      #E0574A;
  --ya-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ya-mono: 'Martian Mono', ui-monospace, 'SF Mono', monospace;
}

/* ============================================================
   BACKDROP
   Two non-interactive layers on <body>, both z-index -1.

   ::before  the blue bloom, top-weighted.
   ::after   the 1px grid, masked so it fades out before the fold.

   POSITIONING: absolute, not fixed. These are pinned to the top of the
   DOCUMENT and scroll away with the content, so past the first screen
   the page is plain --ya-void. Fixed would weld them to the viewport
   and the glow would follow you down the page forever, which is the
   opposite of the intent.

   Height is one viewport. #app.flex-wrapper already carries
   min-height:100vh, so a 100vh absolute layer can never be taller than
   the page and therefore can never add scroll on a short page. Do not
   raise this past 100vh without checking the cart and status pages for
   a phantom scrollbar.

   STACKING — read before touching z-index here.
   The layers are at -1 so ordinary page content paints above them
   without anything being lifted. That matters because lifting #app was
   what broke the login modal: see the v7 note at the top.

   A negative z-index child paints above the ROOT background but below
   every block background that comes after it, so --ya-void has to live
   on <html> only. Put a background-color back on <body> and it will
   paint straight over the bloom, and the whole backdrop disappears.

   body needs position:relative so top:0 resolves to the document top.

   On the alphas: blue is lower in perceived luminance than the
   vermilion this replaced, so matching the old numbers exactly reads
   as a step down. The lead radial at 0.50 carries it; the second is
   atmosphere.
   ============================================================ */

html { background-color: var(--ya-void); }

/* Deliberately transparent — see the stacking note above. */
body { position: relative; background-color: transparent; }

body::before,
body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background-image:
    radial-gradient(900px 520px at 78% -6%,   rgba(112, 176, 255, 0.50), transparent 62%),
    radial-gradient(1400px 780px at 44% -14%, rgba(66, 138, 252, 0.26), transparent 70%);
}

body::after {
  background-image:
    repeating-linear-gradient(to right,  rgba(150, 190, 255, 0.05) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(to bottom, rgba(150, 190, 255, 0.05) 0 1px, transparent 1px 68px);
  /* Percentages here resolve against the layer, which is exactly one
     viewport tall, so the grid is gone by roughly 90% of the first
     screen and the handoff to solid happens before the fold rather
     than as a hard edge. */
  -webkit-mask-image: radial-gradient(118% 108% at 50% 0%, #000 38%, transparent 90%);
          mask-image: radial-gradient(118% 108% at 50% 0%, #000 38%, transparent 90%);
}

/* z-index MUST stay auto. Any value here turns #app into a stacking
   context and re-breaks the login modal, because .modal-backdrop is
   appended to <body> while .modal lives in here. The backdrop layers
   are at -1 precisely so nothing needs lifting. */
#app { position: relative; z-index: auto; }

/* Tighter cells on small screens, or the grid reads as three fat stripes */
@media (max-width: 620px) {
  body::after {
    background-image:
      repeating-linear-gradient(to right,  rgba(150, 190, 255, 0.045) 0 1px, transparent 1px 44px),
      repeating-linear-gradient(to bottom, rgba(150, 190, 255, 0.045) 0 1px, transparent 1px 44px);
  }
}

/* ---------- Section ---------- */

.ya-section {
  background: transparent;
  padding: clamp(40px, 5vw, 64px) 0;
  font-family: var(--ya-sans);
  color: var(--ya-bone);
}

.ya-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.ya-cat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 16px;
}

.ya-cat + .ya-grid { margin-bottom: 52px; }

.ya-cat__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

.ya-cat__rule { flex: 1; height: 1px; background: var(--ya-rule); }

.ya-cat__count {
  font-family: var(--ya-mono);
  font-size: 10px;
  color: var(--ya-faint);
  white-space: nowrap;
}

/* ---------- Grid ---------- */

.ya-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

/* ---------- Card ---------- */

/* ============================================================
   CARD  —  instrument readout

   Not glass. Glass needs light behind it and there is none below the
   fold, which is why every attempt at it came out grey or black.

   This leans on what the site already is: mono type, spec-forward,
   stock state as data. Each card reads as a small readout.

     - a status bar across the TOP, not a spine down the side, lit in
       the stock colour with a bloom under it
     - the same colour bled faintly into the card's own surface, so the
       state tints the whole object rather than sitting in a corner
     - a hairline border, tight radius, no rounded-pill softness
     - price is the hero element

   State drives everything through one custom property, so there are
   three small overrides rather than three copies of every rule.
   ============================================================ */

.ya-card {
  --ya-state: 130, 150, 180;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px 15px;
  background:
    radial-gradient(130% 62% at 50% 0%, rgba(var(--ya-state), 0.028), transparent 58%),
    linear-gradient(to bottom, #0D1016 0%, #090B0F 100%);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.35);
  transition: background 180ms ease, border-color 180ms ease,
              box-shadow 180ms ease, transform 180ms ease;
}

.ya-card[data-stock="in"]  { --ya-state: 127, 209, 164; }
.ya-card[data-stock="low"] { --ya-state: 224, 179, 65; }
.ya-card[data-stock="out"] { --ya-state: 224, 87, 74; }

/* Status bar. Was a spine down the left edge; across the top it reads
   as an indicator rather than decoration. */
.ya-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: rgba(var(--ya-state), 0.5);
  transition: background 180ms ease, box-shadow 180ms ease;
}

/* Sold out gets a dimmer bar and no bloom — it should not draw the eye
   the way a live tier does. */
.ya-card[data-stock="out"]::before {
  background: rgba(var(--ya-state), 0.3);
}
.ya-card[data-stock="out"] { opacity: 0.86; }
.ya-card[data-stock="out"]:hover { opacity: 1; }

.ya-card:hover {
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(var(--ya-state), 0.075), transparent 62%),
    linear-gradient(to bottom, #12161D 0%, #0C0F14 100%);
  border-color: rgba(var(--ya-state), 0.2);
  transform: translateY(-2px);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(var(--ya-state), 0.07),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

.ya-card:hover::before {
  background: rgb(var(--ya-state));
  box-shadow: 0 0 18px 1px rgba(var(--ya-state), 0.5);
}

/* ---------- Top: badge + title, one line ---------- */

.ya-card__top { display: flex; align-items: center; gap: 9px; min-width: 0; }

.ya-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.045);
  font-family: var(--ya-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(232, 230, 225, 0.68);
}

.ya-card__title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--ya-bone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Description ---------- */

.ya-card__desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ya-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Status ---------- */

.ya-status {
  font-family: var(--ya-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  margin: 0;
  white-space: nowrap;
}

/* Leading indicator dot, so state is legible before the text is read. */
.ya-card .ya-status::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: rgb(var(--ya-state));
  box-shadow: 0 0 6px rgba(var(--ya-state), 0.45);
  vertical-align: 1px;
}

.ya-card[data-stock="out"] .ya-status::before { box-shadow: none; opacity: 0.7; }

.ya-card[data-stock="in"]  .ya-status { color: var(--ya-live); }
.ya-card[data-stock="low"] .ya-status { color: var(--ya-low); }
.ya-card[data-stock="out"] .ya-status { color: var(--ya-dead); }

/* ---------- Foot ---------- */

.ya-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ya-tag {
  font-family: var(--ya-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ya-faint);
  border: 1px solid var(--ya-rule);
  border-radius: 3px;
  padding: 3px 6px;
}

.ya-price { display: flex; align-items: baseline; gap: 7px; margin-left: auto; }

.ya-price__was {
  font-family: var(--ya-mono);
  font-size: 10px;
  color: var(--ya-faint);
  text-decoration: line-through;
}

.ya-price__now {
  font-family: var(--ya-mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ya-bone);
}

/* ---------- Scroll reveal ---------- */
/* Gated on a flag written to <html> by the hero's inline script the
   moment it is parsed — which is before the product markup exists, so
   these elements are never painted in their resting position first.

   That ordering is the whole point. Adding the hidden state from JS
   after load made the section render normally, then drop 22px, then
   animate back up: a visible jolt on every page load.

   If the flag is never written — no IntersectionObserver, reduced
   motion, or the script failing — none of this applies and the page
   renders normally. There is also a 3s failsafe in the script that
   strips the flag, so content cannot be stranded at opacity 0. */

html.ya-js-reveal .ya-section .ya-container > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 620ms cubic-bezier(.22, .61, .36, 1),
    transform 620ms cubic-bezier(.22, .61, .36, 1);
}

html.ya-js-reveal .ya-section .ya-container > *.is-shown {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.ya-js-reveal .ya-section .ya-container > *,
  html.ya-js-reveal .ya-section .ya-container > *.is-shown {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- My Products overlay ---------- */
/* Clicking the manager link fades the page out under the navbar and
   fades the manager in as an embedded panel. The navbar (z 1030) stays
   above and interactive; the overlay sits under it at z 900. Elements
   are created by JS; nothing here renders on its own.

   The page-fade selectors list the top-level bands explicitly rather
   than using a broad #app rule, because the navbar lives inside #app
   and must not fade with the rest. */

html.ya-mp-open { overflow: hidden; }

.ya-hero,
.ya-section,
#app footer.footer,
.ya-owner {
  transition: opacity 380ms ease;
}

html.ya-mp-open .ya-hero,
html.ya-mp-open .ya-section,
html.ya-mp-open #app footer.footer,
html.ya-mp-open .ya-owner {
  opacity: 0;
  pointer-events: none;
}

.ya-mp {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--ya-mp-top, 96px);   /* set by JS from the navbar's rect */
  z-index: 900;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 380ms ease, transform 380ms ease;
  pointer-events: none;
}

.ya-mp.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Transparent on purpose: the manager page detects it is framed and
   sheds its own background, so the site backdrop shows straight
   through and the cards sit on it directly. No panel chrome here. */
.ya-mp__frame {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .ya-hero, .ya-section, #app footer.footer, .ya-owner { transition: none; }
  .ya-mp { transition: none; transform: none; }
}

/* ---------- Empty state ---------- */

.ya-empty {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--ya-rule);
  border-radius: 8px;
  color: var(--ya-dim);
  font-size: 13px;
}

/* ---------- Responsive / a11y ---------- */

@media (max-width: 520px) {
  .ya-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ya-card { transition: none; }
  .ya-card:hover { transform: none; }
}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */

.ya-pdp {
  background: transparent;
  color: var(--ya-bone);
  font-family: var(--ya-sans);
  padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 7vw, 88px);
}

/* ---------- Head ---------- */

.ya-pdp__head {
  max-width: 640px;
  margin: 0 0 clamp(28px, 4vw, 44px);
}

.ya-pdp__titlerow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ya-badge--lg {
  min-width: 46px;
  height: 28px;
  font-size: 11px;
  border-radius: 6px;
}

.ya-pdp__title {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ya-tag--link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 12px;
}

.ya-tag--link:hover { color: var(--ya-dim); border-color: var(--ya-dim); }

.ya-pdp__blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ya-dim);
}

/* ---------- Grid ---------- */

.ya-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.ya-pdp__main { display: flex; flex-direction: column; gap: 12px; }
.ya-pdp__side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 84px; }

/* ---------- Panels ---------- */

.ya-panel,
.ya-buy,
.ya-specs {
  background: var(--ya-slab);
  border: 1px solid var(--ya-rule-soft);
  border-radius: 8px;
  padding: clamp(16px, 2vw, 22px);
}

.ya-panel__label {
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ya-faint);
}

/* ---------- Prose (renders the rich-text description) ---------- */

.ya-prose { font-size: 14px; line-height: 1.65; color: var(--ya-dim); }
.ya-prose > :first-child { margin-top: 0; }
.ya-prose > :last-child { margin-bottom: 0; }
.ya-prose p { margin: 0 0 12px; }
.ya-prose strong { color: var(--ya-bone); font-weight: 600; }
.ya-prose a { color: var(--ya-flare); }
.ya-prose ul, .ya-prose ol { margin: 0 0 12px; padding-left: 18px; }
.ya-prose li { margin-bottom: 6px; }
.ya-prose li::marker { color: var(--ya-faint); }
.ya-prose h1, .ya-prose h2, .ya-prose h3 {
  color: var(--ya-bone);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 18px 0 8px;
}

/* ---------- Buy box ---------- */

.ya-buy__price { margin-bottom: 6px; }

.ya-buy__now {
  font-family: var(--ya-mono);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ya-bone);
}

.ya-status--live { color: var(--ya-live); }
.ya-status--gone { color: var(--ya-dead); }
.ya-buy .ya-status { margin: 0 0 16px; }

/* Base theme renders the quantity input and buttons inside .ya-buy.
   Give them room without overriding their behaviour. */
.ya-buy form,
.ya-buy > div:not(.ya-buy__price) { margin-top: 0; }
.ya-buy .btn { border-radius: 6px; font-size: 13px; font-weight: 600; }

/* ---------- Specs ---------- */

.ya-specs__list { margin: 0; }

.ya-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ya-rule-soft);
}

.ya-spec:last-child { border-bottom: 0; padding-bottom: 0; }
.ya-spec:first-child { padding-top: 0; }

.ya-spec dt {
  font-family: var(--ya-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ya-faint);
  white-space: nowrap;
  font-weight: 400;
}

.ya-spec dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ya-bone);
  text-align: right;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .ya-pdp__grid { grid-template-columns: 1fr; }
  .ya-pdp__side { position: static; order: -1; }
}

/* ---------- PDP: what-you-get list ---------- */

.ya-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ya-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ya-bone);
}

.ya-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ya-live);
}

.ya-prose--fine {
  font-size: 12px;
  color: var(--ya-faint);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ya-rule-soft);
}

/* ---------- Ownership line ---------- */

.ya-owner {
  border-top: 1px solid var(--ya-rule-soft);
  background: transparent;
  padding: 14px 0 18px;
  text-align: center;
  font-family: var(--ya-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #3F444C;
  transition: color 200ms ease;
}

.ya-owner:hover { color: var(--ya-dim); }

/* ============================================================
   PRODUCTS PAGE
   ============================================================ */

.ya-shop {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

.ya-shop__main { min-width: 0; }

/* ---------- Filter panel ---------- */

.ya-filters {
  background: var(--ya-slab);
  border: 1px solid var(--ya-rule-soft);
  border-radius: 8px;
  padding: 18px;
  position: sticky;
  top: 84px;
}

.ya-field { margin-bottom: 18px; }
.ya-field:last-child { margin-bottom: 0; }

.ya-field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ya-faint);
}

.ya-catlist { display: flex; flex-direction: column; gap: 2px; }

.ya-catlink {
  display: block;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--ya-dim);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

.ya-catlink:hover { background: var(--ya-slab-lift); color: var(--ya-bone); }

.ya-catlink.is-active {
  background: var(--ya-bone);
  color: var(--ya-ink);
  font-weight: 600;
}

.ya-input {
  width: 100%;
  padding: 8px 10px;
  background: #101216;
  border: 1px solid var(--ya-rule);
  border-radius: 5px;
  color: var(--ya-bone);
  font-family: var(--ya-sans);
  font-size: 13px;
}

.ya-input::placeholder { color: var(--ya-faint); }

.ya-input:focus {
  outline: none;
  border-color: var(--ya-dim);
}

/* Kill the number spinners, they look broken at this size */
.ya-input[type="number"]::-webkit-outer-spin-button,
.ya-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ya-input[type="number"] { -moz-appearance: textfield; }

.ya-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ya-field--actions { display: flex; flex-direction: column; gap: 8px; }

.ya-btn {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--ya-bone);
  border-radius: 6px;
  background: var(--ya-bone);
  color: var(--ya-ink);
  font-family: var(--ya-sans);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 140ms ease;
}

.ya-btn:hover { background: #fff; border-color: #fff; color: var(--ya-ink); }

.ya-btn--ghost {
  background: transparent;
  border-color: var(--ya-rule);
  color: var(--ya-dim);
}

.ya-btn--ghost:hover { background: var(--ya-slab-lift); color: var(--ya-bone); }

.ya-filterbtn {
  width: 100%;
  margin-bottom: 16px;
  padding: 10px;
  background: var(--ya-slab);
  border: 1px solid var(--ya-rule);
  border-radius: 6px;
  color: var(--ya-bone);
  font-family: var(--ya-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ya-pagination { margin-top: 24px; }

/* ---------- Modal shell ---------- */
/* The dialog itself is styled here. Its STACKING is handled at the top
   of this file by keeping #app out of the stacking-context business —
   do not try to fix a hidden modal by raising a z-index here, it will
   not work while an ancestor traps it. */

.modal-content {
  background: var(--ya-slab);
  border: 1px solid var(--ya-rule);
  color: var(--ya-bone);
}

.modal-header { border-bottom-color: var(--ya-rule-soft); }
.modal-title { font-family: var(--ya-sans); font-size: 15px; font-weight: 600; }

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  .ya-shop { grid-template-columns: 1fr; }
  .ya-filters { position: static; }
}

/* ============================================================
   BASE THEME OVERRIDES
   Toning down the accent and compacting the footer. These target
   the base theme's own markup, so !important is needed to beat
   pro.css specificity.
   ============================================================ */

/* ---------- Buttons: neutral primary, accent reserved ---------- */

#app .btn-primary {
  background-color: var(--ya-bone) !important;
  border-color: var(--ya-bone) !important;
  color: var(--ya-ink) !important;
}

#app .btn-primary:hover,
#app .btn-primary:focus {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--ya-ink) !important;
}

#app .btn-outline-primary {
  border-color: var(--ya-rule) !important;
  color: var(--ya-dim) !important;
  background-color: transparent !important;
}

#app .btn-outline-primary:hover,
#app .btn-outline-primary:focus {
  background-color: var(--ya-slab-lift) !important;
  border-color: var(--ya-dim) !important;
  color: var(--ya-bone) !important;
}

/* Stock pill on the base product page reads as an alert in orange */
#app .stock-indicator {
  border-color: var(--ya-rule) !important;
  color: var(--ya-live) !important;
}

/* ---------- Navbar ---------- */
/* Full treatment lives in the HEADER section further down. */

/* ---------- Footer: compact ---------- */

#app footer.footer {
  background: rgba(22, 24, 29, 0.82) !important;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-top: 1px solid var(--ya-rule-soft);
}

/* This is the one that matters. The base theme had py-5 (3rem) here. */
#app footer .ya-footer-row {
  padding-top: 26px !important;
  padding-bottom: 22px !important;
}

#app footer h5 {
  font-family: var(--ya-sans) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ya-faint) !important;
  margin: 0 0 8px !important;
}

#app footer .ya-footer-brand {
  font-family: var(--ya-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ya-bone) !important;
}

#app footer .nav-link {
  font-size: 12px !important;
  line-height: 1.9 !important;
  color: var(--ya-dim) !important;
  padding: 0 !important;
}

#app footer .nav-link:hover { color: var(--ya-bone) !important; }
#app footer .logo { margin-bottom: 0 !important; }

/* ---------- Footer sits at the bottom on short pages ---------- */

html, body { height: 100%; }

#app.flex-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* First child is the header + page content wrapper. Let it absorb the slack
   so the footer and ownership line get pushed down instead of floating mid-page. */
#app.flex-wrapper > div:first-child { flex: 1 0 auto; }

#app.flex-wrapper > footer,
#app.flex-wrapper > .ya-owner { flex: none; }

/* ---------- Cart: drop the product thumbnail ---------- */
/* Every product uses the same shop logo, so the thumbnail adds nothing
   and just widens the row. Confirmed class from cart-page.njk. Hidden in
   CSS so the base cart component stays untouched. */

#app .cart-image-container { display: none !important; }

/* Reclaim the padding the image column was holding */
#app .cart-item-bg > .flex-grow-1 > .min-w-0:not(.cart-image-container) {
  padding-left: 14px;
}

/* ============================================================
   HERO
   ============================================================ */

.ya-hero {
  overflow-x: hidden;
  background: transparent;
  color: var(--ya-bone);
  font-family: var(--ya-sans);
  padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 4vw, 48px);
  text-align: center;
}

/* ---------- Trust strip ---------- */

.ya-strip {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: clamp(22px, 3vw, 32px);
  padding: 7px 4px;
  border: 1px solid var(--ya-rule);
  border-radius: 6px;
  background: rgba(22, 24, 29, 0.7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.ya-strip__item {
  position: relative;
  padding: 0 14px;
  font-family: var(--ya-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ya-dim);
  white-space: nowrap;
}

.ya-strip__item + .ya-strip__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 11px;
  background: var(--ya-rule);
}

.ya-strip__item--live { color: var(--ya-bone); }

.ya-strip__item--live::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  border-radius: 1px;
  background: var(--ya-live);
  vertical-align: middle;
}

/* ---------- Headline ---------- */

/* Hero breaks out of the standard container so the headline can run wide */
.ya-hero .ya-container { max-width: 1720px; }

.ya-hero__title {
  max-width: none;
  margin: 0 auto 26px;
  /* 6vw fills the width on normal screens; the 100px cap stops it
     overflowing the container on very wide monitors, which is what
     made it look off-centre. Retune both if you change copy length. */
  font-size: clamp(30px, 6vw, 100px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--ya-bone);
  white-space: nowrap;
}

/* ---------- Headline sheen ---------- */
/* A light band swept across the PREFIX text with background-clip: text.

   The sheen lives on .ya-hero__sheen, a span around the prefix, and
   deliberately NOT on the h1. background-clip: text makes the browser
   paint the element's background through its text, and Chrome routes
   the whole subtree through that text-mask paint path — clip-path and
   mask on descendants inside it are silently dropped. With the sheen
   on the h1, that subtree included the rotating word, which is why the
   word-wipe never clipped no matter how it was implemented. The
   rotator now sits outside this span and owns a normal paint path.

   Being an inline also fixes the descender problem properly: an
   inline's background box comes from the font's metrics, not the
   block's line-height, so p/y/g are inside it and the old
   padding-bottom workaround on the h1 is gone.

   The band is pure white with a blue-white edge. Bone is already near
   the top of the range, so a white-on-white sweep would be nearly
   invisible; the blue tint is what gives the glint its identity.

   background-position must stay within 0%-100%: with a background
   larger than the element, values outside that range slide the image
   off part of the text, and a transparent fill renders those letters
   as nothing. At 300% width the band sits past the right edge at 0%
   and past the left edge at 100%, so a full sweep fits inside the
   legal range. */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ya-hero__sheen {
    background-image: linear-gradient(
      105deg,
      var(--ya-bone) 0%,
      var(--ya-bone) 42%,
      #CFE4FF 46%,
      #FFFFFF 49%,
      #CFE4FF 52%,
      var(--ya-bone) 58%,
      var(--ya-bone) 100%
    );
    background-size: 300% 100%;
    background-repeat: repeat-x;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ya-sheen 9s ease-in-out 1s infinite;
  }
}

@keyframes ya-sheen {
  0%,   4%  { background-position: 0% 0; }    /* band parked off the right */
  22%, 50%  { background-position: 100% 0; }  /* swept left, then holds */
  68%, 100% { background-position: 0% 0; }    /* swept back right, then holds */
}

/* Reduced motion: no sweep, and the fill has to be put back or the
   prefix disappears. */
@media (prefers-reduced-motion: reduce) {
  .ya-hero__sheen {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: var(--ya-bone);
    color: var(--ya-bone);
  }
}

/* Below this the single line stops fitting, so let it wrap */
@media (max-width: 680px) {
  .ya-hero__title {
    white-space: normal;
    font-size: clamp(32px, 9.5vw, 56px);
    line-height: 1;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }
}

.ya-hero__sub {
  max-width: 56ch;
  margin: 0 auto;
  font-size: clamp(14px, 1.55vw, 17px);
  line-height: 1.6;
  color: var(--ya-dim);
  text-wrap: pretty;
}

/* ---------- Rotating word ---------- */
/* A bright bar sweeps across the word. Outbound it erases whatever it
   passes; the text is swapped while fully hidden; on the return pass
   the new word is painted in behind the retreating bar.

   WHY MASK AND NOT CLIP-PATH.
   Every earlier version used clip-path: inset() with negative vertical
   offsets, to stop the clip cropping the descender on "scaling". But
   inset() does not accept negative values, so the browser discarded
   the whole declaration and no clipping ever happened. The bar swept,
   the word never moved. Rewriting keyframes as transitions did not
   help because the fault was never in how it was driven.

   mask-image takes any values, handles the descenders without a
   workaround, and is already proven in this stylesheet — it is what
   fades out the backdrop grid.

   HOW IT WORKS.
   The mask is twice the element's width: transparent left half, opaque
   right half. mask-position slides it.
     100%  image sits at -100%..100%, its opaque half covers 0..100%
           of the element  ->  fully visible
       0%  image sits at 0..200%, its opaque half covers 100%..200%
           ->  fully hidden
   Anything between puts the hard edge partway across, hiding
   everything to its LEFT. The bar rides the same two states, so it is
   always exactly on that edge.

   mask-repeat stays at its default of repeat on purpose: the tile
   below the box carries the same horizontal pattern, so descenders
   that overflow the line box are masked consistently instead of being
   cut off. */

.ya-rot {
  position: relative;
  display: inline-grid;
  vertical-align: baseline;

  text-align: left;
}

/* One visible word plus a hidden copy of every word, all sharing a
   single grid cell. The copies render nothing and exist only to hold
   the slot open at the width of the longest word, so the line never
   reflows on a swap and it stays correct as the clamped font-size
   changes. Only the text of .ya-rot__word ever changes. */

.ya-rot__word,
.ya-rot__size {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.ya-rot__size {
  visibility: hidden;
  pointer-events: none;
}

.ya-rot__word {
  -webkit-text-fill-color: var(--ya-bone);
  color: var(--ya-bone);

  /* The mask is clipped to the border box, and with the headline's
     line-height below 1 that box is shorter than the glyphs — the tail
     of the g hung below it and was masked off flat. The padding grows
     the box to contain ascenders and descenders; the matching negative
     margins cancel it out of layout, so the grid cell and the line are
     exactly as before. Change one and you must change the other. */
  padding: 0.3em 0.14em 0.3em 0;
  margin: -0.3em -0.14em -0.3em 0;

  -webkit-mask-image: linear-gradient(to right, transparent 0 50%, #000 50% 100%);
          mask-image: linear-gradient(to right, transparent 0 50%, #000 50% 100%);
  -webkit-mask-size: 200% 100%;
          mask-size: 200% 100%;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;

  transition:
    -webkit-mask-position 460ms cubic-bezier(.6, 0, .35, 1),
            mask-position 460ms cubic-bezier(.6, 0, .35, 1);
}

.ya-rot__bar {
  position: absolute;
  top: -0.04em;
  bottom: 0.06em;
  left: 0;
  width: 0.075em;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(to bottom, #CFE4FF 0%, #FFFFFF 50%, #CFE4FF 100%);
  box-shadow: 0 0 26px 5px rgba(150, 190, 255, 0.5);
  opacity: 0;
  pointer-events: none;
  transition:
    left 460ms cubic-bezier(.6, 0, .35, 1),
    opacity 180ms linear;
}

/* Word erased, bar parked past the right edge. */
.ya-rot.is-hidden .ya-rot__word {
  -webkit-mask-position: 0% 0;
          mask-position: 0% 0;
}
.ya-rot.is-hidden .ya-rot__bar { left: 100%; }

/* Bar is only lit while a swap is in progress. */
.ya-rot.is-sweeping .ya-rot__bar { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ya-rot__word {
    -webkit-mask-image: none;
            mask-image: none;
    transition: none;
  }
  .ya-rot__bar { display: none; }
}

/* ---------- Search ---------- */

.ya-search {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: clamp(20px, 2.6vw, 28px) auto 0;
}

.ya-search svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--ya-faint);
  pointer-events: none;
}

.ya-search input {
  width: 100%;
  padding: 13px 16px 13px 42px;
  background: rgba(22, 24, 29, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--ya-rule);
  border-radius: 8px;
  color: var(--ya-bone);
  font-family: var(--ya-sans);
  font-size: 14px;
  transition: border-color 150ms ease, background 150ms ease;
}

.ya-search input::placeholder { color: var(--ya-faint); }

.ya-search input:focus {
  outline: none;
  border-color: var(--ya-dim);
  background: var(--ya-slab-lift);
}

/* Kill the browser's own search decorations */
.ya-search input::-webkit-search-decoration,
.ya-search input::-webkit-search-results-button { -webkit-appearance: none; }
.ya-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  cursor: pointer;
  background: var(--ya-faint);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13.4l-4.9 4.9a1 1 0 0 1-1.4-1.4l4.9-4.9-4.9-4.9a1 1 0 0 1 1.4-1.4l4.9 4.9 4.9-4.9a1 1 0 0 1 1.4 1.4L13.4 12l4.9 4.9a1 1 0 0 1-1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ya-search-empty { margin-top: 4px; }

/* The search filter toggles [hidden]; beat the display rules on grids and cards */
.ya-grid[hidden],
.ya-card[hidden],
.ya-cat[hidden] { display: none !important; }

/* Hero already carries bottom spacing, so the grid below tightens up */
.ya-hero + .ya-section { padding-top: clamp(24px, 3vw, 40px); }

@media (max-width: 520px) {
  .ya-strip { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px; }
  .ya-strip__item { padding: 0; text-align: center; }
  .ya-strip__item + .ya-strip__item::before { display: none; }
}

/* ============================================================
   TRANSPARENCY DISCLOSURE
   Native <details>, so it works with no JS and stays accessible.
   Collapsed it's a single quiet line and adds no visual weight.
   ============================================================ */

.ya-disclose {
  width: 100%;
  max-width: 720px;
  margin: 18px auto 0;
  text-align: left;
}

.ya-disclose__summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 auto;
  padding: 6px 2px;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  font-family: var(--ya-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ya-faint);
  transition: color 150ms ease;
}

/* Hide the native triangle in every engine */
.ya-disclose__summary::-webkit-details-marker { display: none; }
.ya-disclose__summary::marker { content: ''; }

.ya-disclose { display: flex; flex-direction: column; align-items: center; }

.ya-disclose__summary:hover { color: var(--ya-bone); }
.ya-disclose__summary:focus-visible {
  outline: 2px solid var(--ya-flare);
  outline-offset: 3px;
  border-radius: 4px;
}

.ya-disclose__summary svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

.ya-disclose[open] .ya-disclose__summary { color: var(--ya-bone); }
.ya-disclose[open] .ya-disclose__summary svg { transform: rotate(180deg); }

/* ---------- Body ---------- */

.ya-disclose__body {
  width: 100%;
  margin-top: 14px;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--ya-slab);
  border: 1px solid var(--ya-rule-soft);
  border-radius: 10px;
  animation: ya-disclose-in 220ms ease both;
}

@keyframes ya-disclose-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ya-disclose__body { animation: none; }
  .ya-disclose__summary svg { transition: none; }
}

.ya-disclose__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.ya-disclose__item h3 {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ya-faint);
}

.ya-disclose__item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ya-dim);
}

/* ---------- The honest bit, set apart on purpose ---------- */

.ya-disclose__honest {
  margin-top: clamp(16px, 2vw, 22px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--ya-rule-soft);
}

.ya-disclose__honest h3 {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ya-low);
}

.ya-disclose__honest p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ya-dim);
}

/* ============================================================
   PDP CONTENT BLOCKS
   ============================================================ */

/* ---------- How it's tested ---------- */

.ya-method { display: flex; flex-direction: column; gap: 16px; }

.ya-method__item h3 {
  margin: 0 0 5px;
  font-family: var(--ya-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ya-live);
}

.ya-method__item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ya-dim);
}

/* ---------- Numbered login steps ---------- */

.ya-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ya-step;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ya-steps li {
  counter-increment: ya-step;
  position: relative;
  padding-left: 30px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ya-bone);
}

.ya-steps li::before {
  content: counter(ya-step);
  position: absolute;
  left: 0;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border: 1px solid var(--ya-rule);
  border-radius: 4px;
  background: #101216;
  font-family: var(--ya-mono);
  font-size: 9.5px;
  color: var(--ya-dim);
}

/* Inline code, for the 2FA secret and 2fa.live */
.ya-steps code,
.ya-prose code {
  padding: 2px 5px;
  border: 1px solid var(--ya-rule);
  border-radius: 4px;
  background: #0B0D10;
  font-family: var(--ya-mono);
  font-size: 11px;
  color: var(--ya-bone);
  word-break: break-all;
}

/* ---------- Do / Don't ---------- */

.ya-care {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.ya-care__col h3 {
  margin: 0 0 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ya-care__col--dont h3 { color: var(--ya-dead); }
.ya-care__col--do h3   { color: var(--ya-live); }

.ya-care__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ya-care__col li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ya-dim);
}

.ya-care__col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ya-mono);
  font-size: 12px;
}

.ya-care__col--dont li::before { content: '\00d7'; color: var(--ya-dead); }
.ya-care__col--do li::before   { content: '+';     color: var(--ya-live); }

/* ---------- Troubleshooting ---------- */

.ya-trouble { margin: 0; display: flex; flex-direction: column; }

.ya-trouble > div {
  padding: 11px 0;
  border-bottom: 1px solid var(--ya-rule-soft);
}

.ya-trouble > div:first-child { padding-top: 0; }
.ya-trouble > div:last-child { border-bottom: 0; padding-bottom: 0; }

.ya-trouble dt {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ya-bone);
}

.ya-trouble dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ya-dim);
}

/* ---------- Buy box note ---------- */

.ya-buy__note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--ya-rule-soft);
  font-family: var(--ya-mono);
  font-size: 9.5px;
  line-height: 1.6;
  color: var(--ya-faint);
  text-align: center;
}

/* ---------- Discord button in the navbar ---------- */

#app .ya-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
}

#app .ya-discord .icon {
  width: 19px;
  height: 19px;
  display: block;
}

#app .ya-discord:hover { color: #7d8cf5 !important; border-color: #7d8cf5 !important; }

/* ============================================================
   HEADER
   Floating pill, no markup change.

   navbar.njk renders <nav class="navbar navbar-expand-lg component">
   wrapping <div class="container py-2">. The nav is stripped to a
   transparent sticky strip and the container is what actually gets
   the fill, border and radius, so it is the pill.

   The pill is translucent with a blur rather than solid, so the blue
   bloom in the backdrop still reads through it. A solid fill cuts a
   hard black block out of exactly the spot where the bloom is
   strongest.
   ============================================================ */

#app nav.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: transparent !important;
  border: 0 !important;
  /* Horizontal padding here, not on the pill, so the pill keeps its
     inset from the viewport edge on small screens. */
  padding: 26px clamp(12px, 4vw, 32px) 0 !important;
}

#app nav.navbar > .container {
  max-width: 1200px;
  /* Vertical padding sets the pill height. 14px + a 39px button lands
     it at about 67px, which matches the reference. */
  padding: 14px 14px 14px 20px !important;

  /* Glass, the way Apple actually builds it in dark mode.

     The tint is WHITE at low alpha, not black. That is the part that
     matters: a dark fill on a dark page reads as a hole punched in the
     background, which is why the black version never sat right on top
     of the blue bloom. A light film lifts whatever is behind it
     instead, so the glow carries through the pill.

     saturate() well above 100% is doing real work — blurred dark
     pixels desaturate toward grey, and pushing saturation back up is
     what keeps the blue alive inside the glass.

     No inset highlight and a barely-there border. A 1px white line was
     the "white lining"; glass reads as glass because of the blur
     discontinuity at its edge, not because of a drawn outline. */
  /* Why the previous pass still blended: brightness(0.78) dimmed the
     backdrop by about a fifth, then the white film added it straight
     back. Net result was a pill fractionally LIGHTER than the glow it
     sat on, so there was nothing for the eye to catch. The film and
     the brightness were cancelling each other.

     Fixed by moving both in the same direction: dim harder, lift less.
     The pill now sits clearly below its surroundings in value while
     staying transparent enough to show what's behind it. */
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  -webkit-backdrop-filter: blur(32px) saturate(150%) brightness(0.55);
          backdrop-filter: blur(32px) saturate(150%) brightness(0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  /* Two shadows: a wide soft one for lift, a tight one that reads as
     the edge. Cheaper separation than a border and it cannot show up
     as a white line. */
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

/* Without backdrop-filter a 8% white fill is just a grey rectangle, so
   those browsers get an opaque near-black instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #app nav.navbar > .container {
    background: linear-gradient(to bottom, #14161B 0%, #0C0E12 100%);
  }
}

/* ---------- Brand, far left ---------- */
/* Needs show_logo AND show_shop_name on in the navbar settings, or
   navbar.njk renders nothing here and the left side sits empty. */

#app .navbar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  padding: 0 !important;
  margin-right: 8px;
  font-size: 19px;
  font-weight: 700;
  /* Inter is narrower than Archivo, so it needs much less negative
     tracking. At -0.02em it starts to look cramped. */
  letter-spacing: -0.011em;
  white-space: nowrap;
  color: var(--ya-bone) !important;
}

#app .navbar-brand img {
  max-height: 26px;
  width: auto;
  border-radius: 7px;
  display: block;
}

/* ---------- Three-part layout, lg and up ---------- */
/* Brand is already first in the markup and the action list already has
   me-auto pushing it right. Adding a matching left auto margin to the
   first list centres it in the gap between the two.

   Note this centres between the brand and the buttons, not on the pill's
   exact midpoint — those coincide only when the brand and the button
   cluster are the same width. It reads as centred and, unlike absolute
   positioning, it can never overlap either side when links are added. */

@media (min-width: 992px) {
  #app .navbar-collapse > .navbar-nav:first-child {
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 4px;
  }
}

/* ---------- Links ---------- */

#app .navbar .nav-link {
  font-family: var(--ya-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(232, 230, 225, 0.72) !important;
  padding: 8px 16px !important;
  border-radius: 9px;
  transition: color 140ms ease, background 140ms ease;
}

#app .navbar .nav-link:hover,
#app .navbar .nav-link:focus {
  color: var(--ya-bone) !important;
  background: rgba(232, 230, 225, 0.06);
}

/* ---------- Buttons inside the pill ---------- */

#app .navbar .btn,
#app header .btn {
  border-radius: 10px !important;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  border-color: var(--ya-rule) !important;
}

#app .navbar-toggler {
  border: 1px solid var(--ya-rule) !important;
  border-radius: 10px;
  padding: 6px 9px;
  box-shadow: none !important;
}

#app .navbar-toggler:focus { box-shadow: none !important; }

/* ---------- Collapsed, under lg ---------- */
/* The pill has to hold the whole expanded menu, so the two navbar-nav
   lists get separated by a rule instead of sitting flush. */

@media (max-width: 991.98px) {
  #app nav.navbar > .container {
    padding: 10px 12px !important;
    border-radius: 16px;
  }

  #app .navbar-collapse { padding-top: 6px; }

  #app .navbar .navbar-nav { gap: 2px !important; }

  #app .navbar .navbar-nav.gap-3 {
    gap: 8px !important;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--ya-rule-soft);
  }
}