/* Clash Display — distinctive self-hosted streetwear display face for
   headings/brand/section titles. Pairs with JetBrains Mono (data) + Inter
   (body) for the sneaker-terminal identity. */
@font-face {
  font-family: "Clash Display";
  src: url("/fonts/ClashDisplay-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/fonts/ClashDisplay-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/fonts/ClashDisplay-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --font-display: "Clash Display", "Archivo", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Floor Trader × hypebeast zine — brutalist sneaker terminal.
     Black ground, hairline borders, sharp corners, monospace dominant. */
  --bg: #050608;
  --bg-sunken: #000000;
  --bg-elevated: #0D1014;
  --panel: #0F1318;
  --panel-2: #141A21;
  --border: #1C2230;
  --border-strong: #2A3343;
  /* Card edge — a whisper-faint light hairline that blends into the dark page
     so tiles emerge from the background instead of looking boxed/popped-out.
     One token across every product card for a consistent, high-bar finish. */
  --card-edge: rgba(255, 255, 255, 0.05);
  /* Dark "stage" behind landing product images. Toned to the PRIMARY app
     background (#050608) so the image area flows into the page instead of
     reading as a lighter box — just a whisper of a center lift to float the
     cutout, fading to near page-black at the edges. */
  --img-stage: radial-gradient(circle at 50% 41%, #161C26 0%, #0B0F15 55%, #06080B 80%);
  --fg: #F2F4F8;
  --fg-soft: #B5BCC8;
  --muted: #7F8896;

  /* Signals.
     Palette roles (purple-primary): iris (--accent-2) is the BRAND hero for all
     chrome; gold (--gold) is the payoff accent for price + primary CTAs; mint
     (--accent) is reserved ONLY for the BUY/"go" trade signal. */
  --accent: #6CF5C8;          /* electric mint — BUY / "go" trade signal ONLY (the BUY in
                                 BUY·HOLD·WAIT). Green = go. No longer brand chrome or price. */
  --accent-soft: rgba(108, 245, 200, 0.14);
  --accent-ink: #050608;
  /* Iris — the BRAND PRIMARY / hero hue. Carries all chrome: eyebrows, links,
     hovers, focus rings, decorative accents, glows, section labels. */
  --accent-2: #8E97FF;
  --accent-2-soft: rgba(142, 151, 255, 0.14);
  /* Gold — the color-wheel complement of iris. The "payoff" accent (money,
     wins, action CTAs) that pops warm against the purple brand field. Distinct
     from --highlight amber, which is reserved for the HOLD trade signal. */
  --gold: #F4C264;
  --gold-soft: rgba(244, 194, 100, 0.14);
  --highlight: #FFB347;       /* trader amber — HOLD */
  --highlight-soft: rgba(255, 179, 71, 0.16);
  --accent-amber: #FFB347;    /* alias of --highlight; referenced widely but was never defined */
  --danger: #FF4470;          /* signal red — WAIT/SKIP */
  --danger-soft: rgba(255, 68, 112, 0.16);

  /* Marketplace tags — a distinct hue per vendor so the eye can tell
     sources apart at a glance across a mixed comparison grid. */
  --stockx:       #6CF5C8;
  --goat:         #FFB347;
  --nike:         #FF4470;
  --ebay:         #4C8DFF;
  --flightclub:   #B07CF6;
  --stadiumgoods: #9AA7B5;
  --kickscrew:    #F472B6;

  /* ── Spacing scale ───────────────────────────────────────────────
     ONE rhythm for every gap / margin / padding. Use these tokens instead
     of ad-hoc px so vertical + horizontal spacing stays consistent across
     the app and we never re-litigate "is this 9px or 14px?". 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  /* Standard gutter the canvas + every section align their left edge to. */
  --gutter: 16px;

  /* ── Radius scale ────────────────────────────────────────────────
     The rounded system. --radius-lg (12px) is the card default everywhere;
     the legacy brutalist --r-* below are kept as deprecated aliases so old
     rules don't break, but new work uses --radius-*. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ── Label system ────────────────────────────────────────────────
     ONE treatment for uppercase micro-labels (field labels, eyebrows,
     vendor tags, tabs). They were rendering at 13 different sizes and 13
     different trackings — these fix the face, size, weight, and tracking so
     every label reads as one consistent system. Mono = the data-terminal
     identity; color is set per use (fg-soft primary, muted quiet). */
  --label-font: "JetBrains Mono", ui-monospace, monospace;
  --label-size: 12px;        /* standard field / section eyebrow (WCAG: no sub-12px) */
  --label-size-xs: 11px;      /* tiny inline tags (vendor, score) */
  --label-tracking: 0.1em;
  --label-weight: 600;

  /* ── Type scale ──────────────────────────────────────────────────
     ONE size ramp for body + UI text so sizes stop drifting (they had
     crept to 26 ad-hoc sizes incl. 9 half-pixel values). Inter for
     body/UI, Clash Display (var(--font-display)) for headings. Use these
     instead of ad-hoc px; body base is --text-md (15px). */
  --text-2xs: 10px;   /* micro meta — smallest allowed */
  --text-xs:  11px;   /* tiny tags / captions */
  --text-sm:  12px;   /* secondary / sub text */
  --text-rg:  13px;   /* dense UI rows */
  --text-ui:  14px;   /* card titles / standard UI */
  --text-md:  15px;   /* body default */
  --text-lg:  16px;   /* lead-in / emphasized body */
  --text-xl:  18px;   /* section titles */
  --text-2xl: 22px;   /* sub-headings */
  --text-3xl: 24px;   /* page headings */
  --text-4xl: 30px;   /* hero */
  /* Tracking + leading — display runs tight, body relaxed. */
  --tracking-tight: -0.02em;  /* large display headings */
  --tracking-snug:  -0.01em;  /* titles / card names */
  --leading-tight:  1.1;      /* display headings */
  --leading-snug:   1.25;     /* titles */
  --leading-body:   1.55;     /* paragraphs */

  /* Legacy brutalist radii (deprecated — migrate call sites to --radius-*). */
  --r-0: 0;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.4);
  --dotgrid: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);

  color-scheme: dark;
}

/* ── Brutalist override layer — sharpens corners across all the
   rounded surfaces defined later in this file. Single source of truth
   for the squared-edges aesthetic so individual rules don't have to
   each change their border-radius. */
.card,
.daily-card,
.drop-card,
.trending-card,
.no-results,
.watchlist-empty-card,
.landing-hero,
.scout,
.compare-drawer,
.auth-modal-card,
.plans-modal-card,
.tier-meter,
.tier-meter-cta,
.sidebar-watch,
.account-btn,
.account-card,
.account-action,
.account-signout,
.recent-pill,
.recent-remove,
.search-field,
.field input,
.field select,
.auth-field input,
.auth-field textarea,
.auth-field select,
.auth-submit,
.auth-tab,
.dropzone,
.dropzone-cta,
.identify-preview,
.palette-card,
.palette-list li,
.toast,
.rate-toast-inner,
.daily-cat,
.daily-card-retail,
.drop-card-date,
.drop-card-img-wrap .drop-countdown,
.drop-countdown,
.source-tag,
.fresh-pill,
.stock-pill,
.delta-pill,
.arb-pill,
.compare-toggle,
.watch-toggle,
.chevron,
.size-chip,
.scout-hook,
.scout-error-retry,
.no-results-chip,
.watchlist-empty-cta,
.plans-trust,
.plans-grid > *,
.brief-card,
.deep-dive,
.scout-take,
.brief-lead,
.brief-stats > *,
.brief-stat,
.hero-image-wrap,
.hero-thumb,
.story,
.facts,
.sizes,
.size-grid > *,
.chip-row > *,
.price-cell,
.premium-chip {
  border-radius: var(--r-sm) !important;
}

/* Brutalist section header — "// TODAYS-PICKS ────────  sub copy".
   Replaces the old "badge + sub" pattern across daily/drops/trending. */
/* One uniform, compact rhythm for every landing section (drops, For You,
   trending, movers, under-retail) — equal space between each, no odd gaps. */
.section-block { margin: 0 0 var(--space-10); display: grid; gap: var(--space-4); }
.section-block[hidden] { display: none !important; }
/* Grid items default to min-width:auto, so a single wide child (the nowrap
   brand-filter strip, a min-content image) stretches the whole column and
   blows past the viewport on mobile. Let every section child shrink to fit. */
.section-block > * { min-width: 0; }

.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.section-marker {
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  text-transform: none;
  color: var(--fg);
  line-height: var(--leading-snug);
  white-space: nowrap;   /* keep "Drop Calendar" on one line — never collapse/wrap the header */
}
.section-rule {
  height: 1px;
  /* Fades out to the right instead of a flat full-width line — reads
     more editorial / intentional than a hard rule. */
  background: linear-gradient(90deg, var(--border-strong), transparent);
  align-self: center;
}
.section-sub {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--text-rg);
  font-weight: 450;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .section-head { grid-template-columns: auto auto 1fr; }
  .section-sub  { display: none; }
}

/* Old "badge + sub" headers were replaced by .section-head — guard
   against any stale markup leaking a duplicate. */
.daily-head, .drops-head, .trending-head { display: none !important; }

/* Buttons + chips get the sharpest squared edges — these are the most
   "trader terminal" elements and the brutalist look hinges on them. */
button.go,
/* Soften the old brutalist square corners to the rounded token system — small
   tags/pills get the extra-small radius, primary CTAs a touch more. (Was a
   hard 0px !important that fought the rounded cards everywhere else.) */
.source-tag,
.fresh-pill,
.stock-pill,
.delta-pill,
.daily-cat,
.drop-countdown,
.badge,
kbd {
  border-radius: var(--radius-xs) !important;
}
#go,
.auth-submit,
.dropzone-cta,
.scout-hook-cta,
.scout-error-retry,
.watchlist-empty-cta,
.rate-toast-cta,
.no-results-chip,
.toast-dismiss {
  border-radius: var(--radius-md) !important;
}

* { box-sizing: border-box; }

/* The browser default [hidden] { display: none } gets overridden by
   any explicit display: rule on the element (.account-card { display:
   grid } beats the UA stylesheet). Restore the intent globally so a
   `hidden` attribute always actually hides — otherwise both signin-btn
   AND account-card render simultaneously regardless of auth state. */
[hidden] { display: none !important; }

/* Text selection — default browser blue is hard to read on dark slate.
   High-contrast mint highlight with the dark ink color matches the
   rest of the Floor Trader palette. */
::selection {
  background: var(--accent-2);
  color: var(--accent-ink);
}
::-moz-selection {
  background: var(--accent-2);
  color: var(--accent-ink);
}

/* Scrollbars — applied globally so every overflowing pane (sidebar,
   watchlist modal, palette list, brief panel, hero thumbs) shares one
   unified language instead of the OS-default grey thumbs that age the
   whole product. Firefox via scrollbar-color, WebKit via pseudos. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-xs);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.16s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
/* On mobile the faint desktop thumb can read as too thin against the dark UI;
   lift the neutral thumb a touch (and slim the track) so every scrollbar — the
   drop filter bar, trending row, page itself — stays legible without the loud
   mint tint that clashed with the rest of the theme. */
@media (max-width: 720px) {
  * { scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
  *::-webkit-scrollbar { width: 6px; height: 6px; }
  *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); }
  *::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.42); }
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Page scrolls (not an internal canvas) so the navbar can stick + condense. */
  min-height: 100vh;
  overflow-x: hidden;
}

body {
  background-image: none;
  display: block;
  /* Fade-in masks small async layout shifts from JS-populated sections
     (trending, drops) landing at slightly different times. */
  opacity: 0;
  animation: body-fade-in 0.35s ease 0.08s forwards;
}
@keyframes body-fade-in {
  to { opacity: 1; }
}

/* ───────── App shell layout ───────── */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sidebar {
  background: var(--bg-sunken);
  border-right: 1px solid var(--border);
  padding: 18px 18px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Tightened inter-section rhythm so the full default sidebar (brand →
     form → recent → sources → list-a-pair → account → footer) fits a
     standard laptop viewport without scrolling; the scrollbar only
     appears once content genuinely overflows (small screens / many
     recent hunts). */
  gap: 11px;
  /* Always fill the grid column so .sidebar-footer { margin-top: auto }
     actually anchors to the bottom — without this, short anon sidebars
     collapse to content height and the footer floats up. */
  height: 100%;
  min-height: 0;
}
/* Subtle, brutalist-squared scrollbar for the sidebar — only paints
   when content overflows. Thin track, sharp mint thumb (no rounding) to
   match the rest of the squared UI. */
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); border-width: 1px; }

/* Brand mark is now a button — clicking it returns to the landing
   state (same as the ✕ clear button in the search input). Visually
   identical to the original div; the button reset just strips
   defaults. */
.sidebar-brand {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  width: 100%;
  transition: opacity 0.14s ease;
}
.sidebar-brand:hover { opacity: 0.88; }
.sidebar-brand:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Brand mark — sharp square, iris sneaker silhouette, a single
   filled-corner tick. Iris brand identity. */
.brand-mark {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--bg-sunken);
  color: var(--accent-2);
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.brand-sneaker {
  width: 28px;
  height: 28px;
  display: block;
}
/* Tiny iris corner tick — a small brand-mark detail. */
.brand-mark-tick {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  background: var(--accent-2);
}
.sidebar-brand:hover .brand-mark { border-color: var(--accent-2); }

.brand-text { display: grid; gap: 0; }

/* Wordmark = SNEAKERMARKET, matching the domain. One clean white lockup
   (SNEAKER + MARKET both in fg) — all-caps mono, tracked tight so the 13
   characters fit the sidebar on one line. Brand identity stays neutral;
   the accent is reserved for the primary action + price. */
.brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 16px;
  line-height: 1;
  color: var(--fg);
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-name-mkt { color: var(--accent-2); }

.brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--muted);
}
/* A small "live" pulse — drops are time-sensitive; this signals the feed is
   live without a word of copy. */
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  flex: none;
  animation: livePulse 2.4s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(142, 151, 255, 0.5); }
  70%  { box-shadow: 0 0 0 5px rgba(142, 151, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(142, 151, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.brand-tag-dot { color: var(--accent-2); font-weight: 700; }

.sidebar-form {
  display: grid;
  gap: 9px;
}
/* Primary search action — a full-width button below the bar. Centered label +
   arrow that nudges on hover. */
#go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 1px;
  font-size: 12px;
  letter-spacing: 0.2em;
  /* Submit blends INTO the dark search bar — a near-black fill with a hairline
     outline instead of a saturated accent block, so it never abuses the brand
     colours. A subtle iris outline + brighter label on hover keeps it themed. */
  background: var(--panel);            /* EXACTLY the search input's fill — no off-shade "blend" */
  color: var(--fg);                    /* crisp label, not faded */
  border: 1px solid var(--border);     /* EXACTLY the search input's border */
}
#go:hover { background: var(--panel-2); border-color: var(--border-strong); color: var(--fg); }
#go .go-arrow { transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); }
#go:hover .go-arrow { transform: translateX(3px); }
#go.is-loading { opacity: 0.7; pointer-events: none; }

.sidebar-form .form-section { display: grid; gap: 6px; }
.sidebar-form .form-section.row { grid-template-columns: 1fr 1fr; gap: 8px; }
.sidebar-form .form-section.row .field { display: grid; gap: 4px; }

.filters-row .field input,
.filters-row .field select { padding: 8px 12px; font-size: 13px; }
.filters-row .field select { cursor: pointer; }

/* "Advanced" toggle — tucks Size / Max $ away so the default form is just
   search + Find. A quiet, left-aligned mono label with a rotating caret. */
.adv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: end;
  width: auto;
  margin: -3px 2px -1px;
  padding: 2px 2px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.14s ease;
}
.adv-toggle:hover {
  background: transparent;
  box-shadow: none;
  color: var(--fg-soft);
}
.adv-toggle .adv-caret { color: currentColor; transition: transform 0.18s ease; }
.adv-toggle[aria-expanded="true"] .adv-caret { transform: rotate(180deg); }
.adv-filters[hidden] { display: none; }

/* Advanced toggle as a compact icon button INSIDE the search bar — mirrors the
   camera button exactly (same box + centering) so the two icons line up.
   Lights up mint when the filter popover is open. */
.search-field .adv-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;            /* override the base .adv-toggle { align-self:end } */
  width: 28px;
  height: 28px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--muted);
}
.search-field .adv-toggle svg { display: block; }
.search-field .adv-toggle:hover { color: var(--accent-2); background: var(--bg-elevated); }
.search-field .adv-toggle[aria-expanded="true"] { color: var(--accent-2); background: var(--bg-elevated); }
.search-field .adv-toggle:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }

.query-section { position: relative; }

/* Search bar — built as a <label> so clicking the icon focuses the input.
   Grid layout (icon | input) so the two children can't collide regardless
   of font-size / box-sizing. type="text" (not "search") to avoid Safari's
   stubborn user-agent search-field paint. */
.search-field {
  display: grid;
  /* Tracks: icon · input · camera · clear · advanced. */
  grid-template-columns: 18px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 10px 0 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: text;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.search-field-drop {
  border-color: var(--accent-2);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--accent-2-soft);
}

.search-camera {
  background: transparent;
  border: 0;
  color: var(--muted);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease, background 0.12s ease;
}
.search-camera:hover { color: var(--accent-2); background: var(--bg-elevated); }
.search-camera:focus-visible {
  outline: none;
  color: var(--accent-2);
  box-shadow: 0 0 0 2px var(--accent-2-soft);
}

.search-clear {
  background: transparent;
  border: 0;
  color: var(--muted);
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: var(--radius-xs);
  font-size: 12px;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  transition: color 0.12s ease, background 0.12s ease;
}
.search-clear:hover { color: var(--fg); background: var(--bg-elevated); }
.search-clear:focus-visible {
  outline: none;
  color: var(--accent-2);
  box-shadow: 0 0 0 2px var(--accent-2-soft);
}

.search-field:hover { border-color: var(--border-strong); }

.search-field:focus-within {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-2-soft);
  background: var(--bg-elevated);
}

.search-field .search-icon {
  display: block;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: color 0.14s;
}

.search-field:focus-within .search-icon { color: var(--accent-2); }

/* Specificity has to beat the global input[type=text]|[number] rule. */
.search-field > input,
.search-field > input[type="text"] {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  /* Clip cleanly inside the (narrow) sidebar track instead of letting a
     long placeholder spill under the camera/clear buttons or cut off
     mid-word. */
  text-overflow: ellipsis;
}

.search-field > input::placeholder {
  color: var(--muted);
  opacity: 1;
  font-weight: 400;
  text-overflow: ellipsis;
}

.search-field > input:focus,
.search-field > input:hover {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.suggest-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 6px;
  z-index: 80;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(142, 151, 255, 0.05);
  display: grid;
  gap: 1px;
  max-height: 420px;
  overflow-y: auto;
}

.suggest-list[hidden] { display: none; }

.suggest-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--fg);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background 0.08s, border-color 0.08s, color 0.08s;
}

.suggest-item:hover,
.suggest-item.active {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}

.suggest-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.suggest-item.kind-recent  .suggest-icon { color: var(--accent-2); }
.suggest-item.kind-history .suggest-icon { color: var(--highlight); }
.suggest-item.kind-popular .suggest-icon { color: var(--muted); }

.suggest-label {
  font-weight: 400;
  line-height: 1.35;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggest-label mark {
  background: transparent;
  color: var(--fg);
  font-weight: 600;
  padding: 0;
  border-radius: 0;
}

.suggest-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.suggest-footer {
  display: flex;
  gap: 12px;
  padding: 8px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

.suggest-footer kbd {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 1px 4px;
  margin-right: 2px;
  font-family: inherit;
  font-size: 10px;
  color: var(--fg-soft);
}

.sidebar-form label {
  font-family: var(--label-font);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  padding-left: 2px;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.sidebar-label {
  font-family: var(--label-font);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  color: var(--fg-soft);
}
/* (Removed the "// " terminal prefix from sidebar labels — clean type only.) */

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.recent-list .empty {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}

.recent-row {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  transition: opacity 0.16s ease, transform 0.16s ease, max-height 0.18s ease, margin 0.18s ease;
  max-height: 60px;
  overflow: hidden;
}

.recent-row.removing {
  opacity: 0;
  transform: translateX(8px);
  max-height: 0;
  margin-top: -4px;
}

.recent-row.entering {
  animation: recentRowIn 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes recentRowIn {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    max-height: 0;
    margin-bottom: -4px;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 60px;
    margin-bottom: 0;
  }
}

.recent-pill {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-soft);
  padding: 6px 32px 6px 10px;  /* right padding leaves room for the absolute × */
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.recent-pill:hover {
  border-color: var(--accent-2);
  background: var(--panel);
  color: var(--fg);
}

.recent-pill .recent-query {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

.recent-remove {
  /* Absolutely positioned so the pill itself can fill the full sidebar width
     instead of leaving a grid track for the × button at rest. */
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 0;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.12s, color 0.12s;
}

.recent-row:hover .recent-remove,
.recent-remove:focus-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

.recent-remove:hover {
  color: var(--accent-2);
  background: var(--accent-2-soft);
}

.recent-pill .recent-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.sidebar-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.sidebar-action {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateX(2px);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.12s, color 0.12s, background 0.12s;
}

.sidebar-action.visible {
  opacity: 1;
  transform: translateX(0);
}

.sidebar-action:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: var(--accent-2-soft);
}

/* Bottom-anchored account / conversion zone. margin-top:auto pulls the
   whole group (tier meter → watchlist → sign-in/account → footer) to the
   foot of the sidebar so the value→action path sits where the eye rests.
   A hairline top rule separates it from the scrolling content above
   without adding visual weight. */
.sidebar-foot-group {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* The account avatar sits at the very bottom as a clean, grouped chip — a thin
   rule above it separates it from the watchlist so the bottom cluster reads as
   one deliberate account zone. */
.sidebar-foot-group .account {
  padding-top: 10px;
  border-top: 1px solid var(--card-edge);
}

/* Popular-hunts quick chips — fill the idle mid-sidebar with tappable
   real searches. Squared to match the brutalist UI; accent on hover. */
.quick-hunts { display: grid; gap: 8px; }
.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quick-chip {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--fg-soft);
  background: var(--bg-elevated);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.quick-chip:hover { border-color: var(--accent-2); color: var(--accent-2); background: var(--panel); }
.quick-chip:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }

/* Recent hunts reuse the Popular Kicks chip pattern, but a search query can be
   long — cap each chip to the column width and ellipsis-truncate so it never
   overflows the sidebar (full text stays in the title tooltip). */
.recent-chips { width: 100%; min-width: 0; }
.recent-chips .empty {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}
.recent-chip {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-chip.entering { animation: recentChipIn 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
.recent-chip.removing {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
@keyframes recentChipIn {
  0%   { opacity: 0; transform: translateY(-4px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.sidebar-footer {
  padding-top: 4px;
}

.sidebar-footer p {
  margin: 0;
  font-size: 10px;
  letter-spacing: -0.01em;
  color: var(--muted);
  /* Keep the attribution + links on one line — 11px pushed ~3px past
     the sidebar width and wrapped "Contact" to a second row. Inline
     flow (not flex) so the space between "via" and the Spider link is
     preserved. */
  white-space: nowrap;
}

.sidebar-footer a {
  color: var(--accent-2);
  text-decoration: none;
}
.sidebar-footer a:hover { text-decoration: underline; }

.footer-sep { margin: 0 5px; color: var(--border-strong); }

/* Footer "Contact" — looks like the Terms link, behaves like a button
   so it can open the contact modal without a navigation. */
.footer-link {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent-2);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  letter-spacing: inherit;
  text-transform: none;
}
.footer-link:hover { text-decoration: underline; background: transparent; }
.footer-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ── Account section in sidebar ─────────────────────────────────── */

.account-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 12px auto 1fr;
  align-items: baseline;
  gap: 10px;
  background: transparent;
  color: var(--fg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.account-btn-glyph {
  display: inline-block;
  width: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  transform: translateY(1px);
  transition: color 0.16s ease, transform 0.16s ease;
}
.account-btn-label {
  color: var(--fg);
  font-weight: 700;
}
.account-btn-meta {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-size: 10px;
  justify-self: end;
}
.account-btn:hover {
  border-color: var(--accent-2);
  background: var(--bg-elevated);
}
.account-btn:hover .account-btn-glyph {
  color: var(--accent-2);
  transform: translate(2px, 1px);
}
.account-btn:hover .account-btn-label { color: var(--accent-2); }
.account-btn:focus-visible {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(142, 151, 255, 0.18);
}

.account-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.account-info {
  display: grid;
  gap: 6px;
}

.account-email {
  font-size: 12px;
  color: var(--fg);
  word-break: break-all;
  line-height: 1.35;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* Free tier — plain muted line, no chip. The big upgrade button is the
   real CTA in this state, so the chip would compete for attention. */
.account-plan {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* Subscribed — promote to a colored pill with status dot. */
.account-plan[data-tier] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 4px 10px 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.account-plan[data-tier]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  opacity: 0.9;
}
.account-plan[data-tier="starter"] {
  color: var(--accent-2);
  background: rgba(142, 151, 255, 0.10);
  border-color: rgba(142, 151, 255, 0.24);
}
.account-plan[data-tier="pro"] {
  color: var(--accent-2);
  background: rgba(142, 151, 255, 0.14);
  border-color: rgba(142, 151, 255, 0.32);
}
.account-plan[data-tier="reseller"] {
  color: var(--accent-amber);
  background: rgba(255, 179, 71, 0.12);
  border-color: rgba(255, 179, 71, 0.32);
}

/* Primary upgrade CTA — only shown when there's an action to take.
   In free state this is the prominent path to purchase. */
.account-action {
  background: var(--accent-2);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.12s ease, filter 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.account-action:hover { background: #84F8D2; }
.account-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 194, 100, 0.32);
}

/* Manage subscription — secondary, ghost style. */
.account-action.ghost {
  background: transparent;
  color: var(--fg-soft);
  border: 1px solid var(--border);
  padding: 9px 12px;
  font-size: 10px;
}
.account-action.ghost:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: transparent;
}

/* Sign out — quiet text link at the bottom of the card. Not a button
   that competes with the upgrade CTA. */
.account-signout {
  justify-self: center;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  margin-top: 2px;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.12s ease;
  box-shadow: none;
}
.account-signout:hover { color: var(--signal-red); }
.account-signout:focus-visible {
  outline: none;
  color: var(--signal-red);
}

/* ── Account avatar + popup menu ───────────────────────────────────
   Replaces the always-open account card: a compact profile row (avatar +
   email + tier) that opens a clean menu upward with payment + sign out. */
.account-pop { position: relative; }
.account-avatar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.account-avatar-btn:hover { background: var(--bg-elevated); border-color: var(--card-edge); }
.account-avatar-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* A slate tone that blends with the dark sidebar (mirrors --border-strong)
     rather than the mint accent — keeps mint reserved for primary actions. */
  background: linear-gradient(140deg, #2C3647, #19212C);
  color: var(--fg);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.account-avatar-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.account-pop .account-email,
.account-menu .account-email {
  font-size: 12px;
  color: var(--fg);
  font-weight: 600;
  text-transform: none;          /* an email is not a label — show it as typed */
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}
.account-plan {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.account-plan[data-tier] { color: var(--accent-2); }
.account-caret { flex: none; color: var(--muted); transition: transform 0.16s ease; }
.account-avatar-btn[aria-expanded="true"] .account-caret { transform: rotate(180deg); }

.account-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
  padding: 6px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: accountMenuIn 0.14s ease;
}
@keyframes accountMenuIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.account-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.account-menu-id { display: flex; flex-direction: column; min-width: 0; }
.account-menu-sep { height: 1px; background: var(--card-edge); margin: 4px 2px; }
.account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease;
}
.account-menu-item:hover { background: var(--panel); color: var(--fg); }
.account-menu-item.accent { color: var(--accent-2); font-weight: 700; }   /* Upgrade — primary CTA, mint */
.account-menu-item.danger:hover { color: var(--signal-red); background: rgba(255, 80, 80, 0.08); }

/* ── Auth modal ─────────────────────────────────────────────────── */

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(5, 8, 12, 0.78);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.auth-modal.open { opacity: 1; }

.auth-modal[hidden] { display: none; }

.auth-modal-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 28px 28px 22px;
  display: grid;
  gap: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(142, 151, 255, 0.05);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;                 /* always above the modal header/content */
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* center the ✕ so it never looks clipped/off */
  background: rgba(11, 16, 20, 0.6);
  border: 1px solid transparent;
  color: var(--muted);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  font-family: inherit;
}

.auth-close:hover { border-color: var(--border); color: var(--fg); background: transparent; }

.auth-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.auth-tab {
  flex: 1 1 0;
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.12s, color 0.12s;
}

.auth-tab:hover { color: var(--fg-soft); background: transparent; }

.auth-tab.active {
  background: var(--panel);
  color: var(--accent-2);
  border: 1px solid var(--border-strong);
}

/* Brand mark above the intro — small mono signature so the modal
   reads as a Scout dialogue, not a generic auth form. */
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  margin-bottom: -2px;
}
/* Real SneakerMarket mark (matches the sidebar logo + favicon) instead of
   a stray glyph — sharp square, iris sneaker silhouette, corner tick. */
.auth-brand-mark {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-strong);
  display: inline-grid;
  place-items: center;
  color: var(--accent-2);
}
.auth-brand-mark svg { width: 17px; height: 17px; display: block; }
.auth-brand-mark::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  background: var(--accent-2);
}
.auth-brand-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  font-weight: 800;
  color: var(--fg-soft);
}
.auth-brand-mkt { color: var(--accent-2); }

/* Continue with Google — dark, themed to the modal (a bright white pill
   read bolted-on against the brutalist dark UI). Keeps the multicolor G
   + the exact "Continue with Google" wording so it's still recognizable
   and brand-compliant. Sits above the email tabs with an "or" divider. */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.08s ease;
}
.google-btn:hover { border-color: var(--accent-2); background: var(--panel); }
.google-btn:active { transform: translateY(1px); }
.google-g { flex: none; display: block; }

.auth-or {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 14px 0;
  color: var(--muted);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-or span { padding: 0 12px; }

/* Intro pair: hero title + subline. Title is what the modal IS for,
   subline is the why. No pricing mentioned here — that lives in the
   plans picker. */
.auth-intro {
  display: grid;
  gap: 6px;
}
.auth-intro-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-feature-settings: "kern" 1, "ss01" 1;
}
.auth-intro-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--muted);
}

.auth-form { display: grid; gap: 12px; }

/* Honeypot — kept in the DOM so bots fill it, kept off-screen so humans
   don't. position:absolute + tiny size + opacity:0 covers the common
   "headless browser still treats display:none as not-real". */
.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.auth-field { display: grid; gap: 4px; }

.auth-field > span {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 500;
}

.auth-field input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.auth-field input:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-2-soft);
}

.auth-error {
  font-size: 12px;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid rgba(255, 68, 112, 0.25);
  padding: 8px 10px;
  border-radius: var(--radius-xs);
}

.auth-success {
  font-size: 13px;
  color: var(--accent-2);
  background: rgba(142, 151, 255, 0.08);
  border: 1px solid rgba(142, 151, 255, 0.28);
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  line-height: 1.5;
}

/* ── Password-reset flow affordances (auth modal) ── */
.auth-notice {
  font-size: 13px;
  color: var(--accent-2);
  background: rgba(142, 151, 255, 0.08);
  border: 1px solid rgba(142, 151, 255, 0.28);
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  line-height: 1.5;
}
.auth-notice[hidden] { display: none; }
.auth-devlink { color: var(--accent-2); font-weight: 600; text-decoration: underline; word-break: break-all; }

/* "Forgot password?" — quiet text link tucked under the password field. */
.auth-forgot {
  justify-self: start;
  margin: -4px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--fg-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}
.auth-forgot:hover { color: var(--accent-2); text-decoration: underline; }
.auth-forgot[hidden] { display: none; }

/* "← Back to sign in" — escape hatch in the forgot / reset views. */
.auth-back {
  justify-self: center;
  margin: 2px 0 0;
  padding: 4px 6px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--fg-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}
.auth-back:hover { color: var(--fg); }
.auth-back[hidden] { display: none; }

.auth-field textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.auth-field textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-2-soft);
}

/* The contact modal carries a textarea so it gets a slightly wider
   card to keep typing comfortable. */
.contact-modal .auth-modal-card { width: min(520px, 100%); }

.auth-submit {
  width: 100%;
  height: 42px;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.auth-fine {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.auth-fine a { color: var(--soft); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-strong); }
.auth-fine a:hover { color: var(--fg); text-decoration-color: var(--muted); }
.auth-fine a:hover { text-decoration: underline; }

/* ───────── Canvas ───────── */

.canvas {
  background: var(--bg);
  padding: 0 28px 44px;
  flex: 1 0 auto;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}

.canvas-header {
  display: flex;
  /* `center` (not baseline) — baseline picks the column-flex child's
     first-line baseline, which lays out oddly when the status sub-line
     is empty/multi-line. Center is steady regardless of child content. */
  align-items: center;
  gap: 16px;
  /* No negative horizontal margin — header sits within the canvas's
     36px gutter so the title's left edge aligns with every section
     below it (trending grid, drops, results). The earlier negative
     margin was a sticky-bleed trick that no longer applies. */
  margin: 0 0 var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
/* Idle landing: no active query → hide the empty status bar so content sits
   directly under the navbar. */
html.query-idle .canvas-header { display: none; }
html.query-idle .canvas { padding-top: 20px; }

/* During an active search the live results take over the canvas. The idle
   browse rails (drop calendar, just-dropped, daily, trending, movers,
   under-retail) live ABOVE #results in the DOM, so leaving them visible buried
   the results beneath them. Hide them while searching so the results sit at the
   TOP; they return when the search is cleared (query-idle). The results toolbar
   carries its own Movers / Under-retail filters, so nothing is lost. */
html:not(.query-idle) #drops,
html:not(.query-idle) #just-dropped,
html:not(.query-idle) #daily,
html:not(.query-idle) #trending,
html:not(.query-idle) #movers,
html:not(.query-idle) #under-retail { display: none !important; }

@media (max-width: 900px) {
  .canvas-header {
    margin: 0 -16px 16px;
    padding: 14px 16px 12px;
  }
}

.canvas-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.canvas-query {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Breadcrumb trail in the canvas header: Home › <current query>. The home
   crumb returns to the landing; the current query is the emphasized leaf. */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.crumb-home {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.14s ease;
}
.crumb-home:hover { color: var(--accent-2); background: transparent; box-shadow: none; transform: none; }
.crumb-home:active { transform: none; }
.crumb-sep {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--muted);
  opacity: 0.45;
}
.crumb-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Idle landing: nothing to navigate back from → hide the home crumb + caret. */
html.query-idle .crumb-home,
html.query-idle .crumb-sep { display: none; }

.canvas .status {
  font-size: 12px;
  color: var(--muted);
  min-height: 0;
  margin-top: 2px;          /* override the bare .status 18px margin — the big gap under the title */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Single clean progress line (replaces the old per-source mono chip grid that
   wrapped into a tall, distracting block on mobile). */
.scan-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--fg-soft);
}
.scan-status .scan-found { color: var(--muted); margin-left: 2px; }
.scan-status.scan-done { color: var(--muted); }
.scan-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  flex: none;
  animation: lane-pulse 1.1s ease-in-out infinite;
}

@keyframes lane-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1.1); }
}

/* Same column rhythm as the daily / trending grids so every section's
   cards are the same size and the 4px gaps line up. */
#results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Same gallery breathing room as the landing grids — results read as a
     calm board of products, not a dense wall. */
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1100px) { #results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { #results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }

/* Expanded tile takes the full row so the composite details panel
   can breathe at the full canvas width. */
.card.expanded { grid-column: 1 / -1; }

/* ── Image-first search-result tile ─────────────────────────────── */
/* Stage + foot, matching the home drop/daily cards: a clean square image
   area up top (cover photo, or a floating cutout on a dark stage) and a solid
   text foot beneath it for name + price + meta. The text never overlays the
   photo, so the shoe is always fully visible. */
.card-tile {
  position: relative;
  /* Stage + foot column — same model as the home drop/daily cards: the shoe
     gets a clean image area up top, and the name/price/meta live in a solid
     foot BELOW it, never floated over (and blocking) the photo. */
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.card-tile:hover {
  border-color: var(--accent-2);
  transform: translateY(-4px);
  box-shadow: none;
}
.card-tile.expanded {
  /* Expanded: drop the square ratio so the details panel sizes naturally;
     the tile face (image + overlay) hides and the inner detail-card carries the
     photo. The container itself goes invisible — no loud mint frame / elevated
     band around a sparse card; the detail-card's own border IS the edge. */
  aspect-ratio: auto;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  /* Take primary view: pull the selected card to the front of the results grid
     and span it full-width, so the detail reads as the headline instead of an
     expanded cell wedged between its neighbours. */
  grid-column: 1 / -1;
  order: -1;
}
.card-tile.expanded:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
.card-tile.expanded > .card-tile-img,
.card-tile.expanded > .card-tile-foot { display: none; }

.card-tile-img {
  position: relative;
  width: 100%;
  /* Tall 4:5 portrait stage — matches the landing gallery so every product
     gets the same focused presence (cutouts float; cover photos fill). */
  aspect-ratio: 4 / 5;
  flex: none;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  /* Light tile behind the photo so white-bg shots blend; the image covers
     it edge-to-edge. */
  background: #f4f4f5;
  cursor: pointer;
  overflow: hidden;
  display: block;
  box-shadow: none;
  /* role="button" div needs explicit reset to match the look the
     previous <button> element had. */
  outline: none;
  appearance: none;
  user-select: none;
  -webkit-user-select: none;
}
.card-tile-img:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}
.card-tile-img:hover .card-tile-overlay { opacity: 1; }
/* These selectors deliberately ancestor-stack so they outrank the older
   `.card .card-image-placeholder` row-thumb rule (88×88 boxed thumb).
   Otherwise the placeholder + real image sit as a small square in the
   tile's top-left corner instead of filling the whole frame. */
.card.card-tile .card-tile-img > .card-image,
.card.card-tile .card-tile-img > img,
.card.card-tile .card-tile-img > .card-image-placeholder,
.card.card-tile .card-tile-img > .skeleton-thumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  object-fit: cover !important;
  padding: 0 !important;
}
.card.card-tile .card-tile-img > .card-image-placeholder {
  display: grid;
  place-items: center;
  /* Light to match the product tile so loading/empty cards aren't dark
     blocks in the grid. */
  background: #ececed;
}
.card.card-tile .card-tile-img > .card-image-placeholder svg {
  width: 40%;
  height: auto;
  opacity: 0.28;
  color: #9aa0a8;
}
.card-tile-img .card-image {
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
.card-tile-img:hover .card-image { transform: scale(1.04); }
.card-tile-img .card-image.card-image-loading { opacity: 0; }

/* Floating cutout — applied only once a gated (client WASM or server) cutout
   lands. The transparent shoe floats, contained + grounded with a soft shadow,
   over a quiet dark stage instead of a cropped cover-fit photo. Higher
   specificity + !important so it wins over the cover-fit base rule above. */
.card.card-tile.has-cutout .card-tile-img {
  background: radial-gradient(120% 120% at 50% 32%, #16181d 0%, #0b0c10 72%);
}
.card.card-tile .card-tile-img > .card-image.card-image-cutout {
  object-fit: contain !important;
  padding: 11% 13% !important;
  filter: drop-shadow(0 11px 15px rgba(0, 0, 0, 0.55));
}
.card-tile-img:hover .card-image.card-image-cutout { transform: scale(1.06); }

/* Hover turntable — the spinning frame floats on the dark stage exactly like a
   cutout; the static photo underneath is hidden while spinning so its
   background can't show through the transparent frame. Only present while the
   tile is actively spinning (a gated, hover-only state). */
.card-tile-img.tt-active {
  /* Match the card's RESTING stage during the spin so hovering never swaps the
     background out from under the shoe. A shoe-tinted wash (when scoutShoeTint
     set --shoe-tint) layered over the dark stage — identical to the tinted
     cutout tiles — keeps the gradient continuous across the cross-fade, and the
     opaque stage means the transparent frames never flash the page through
     mid-dissolve. Falls back to the dark stage color when there's no tint. */
  background:
    radial-gradient(120% 118% at 50% 40%,
      rgba(var(--shoe-tint, 22, 24, 29), 0.14) 0%,
      rgba(var(--shoe-tint, 22, 24, 29), 0.05) 50%,
      transparent 82%),
    radial-gradient(120% 120% at 50% 32%, #16181d 0%, #0b0c10 72%);
  cursor: grab;
}
.card-tile-img.tt-active.tt-dragging { cursor: grabbing; }
.card-tile-img.tt-active > .card-image { opacity: 0; }
/* Selector mirrors the base `.card-tile-img > img` rule (which is !important)
   so contain + padding actually win over its cover-fit. */
.card.card-tile .card-tile-img > img.tt-frame {
  z-index: 1;
  object-fit: contain !important;
  padding: 11% 13% !important;
  filter: drop-shadow(0 11px 15px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  user-select: none;
  /* Cross-fade between angles — a clean, subtle dissolve, never a hard cut. */
  opacity: 0;
  transition: opacity 0.5s ease;
}
.card.card-tile .card-tile-img > img.tt-frame.tt-front { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .card.card-tile .card-tile-img > img.tt-frame { transition: none; }
}
.card-tile-img.tt-active::after {
  content: "360°";
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  font: 600 9.5px/1 var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(0, 0, 0, 0.42);
  padding: 3px 6px;
  border-radius: 999px;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.card-tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(5, 6, 8, 0.85) 100%);
  opacity: 0;
  transition: opacity 0.16s ease;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 10px;
}
.card-tile-img:focus-visible .card-tile-overlay,
.card-tile.expanded .card-tile-overlay { opacity: 1; }

.card-tile-overlay > .source-tag {
  justify-self: start;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card-tile-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  pointer-events: auto;
}
.card-tile-actions .watch-toggle,
.card-tile-actions .compare-toggle {
  width: 28px;
  height: 28px;
  background: rgba(5, 6, 8, 0.78);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card-tile-price-overlay {
  margin-top: auto;
  pointer-events: auto;
}
.card-tile-price-overlay .price-tag {
  background: none;
  border: 0;
  color: var(--gold);
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
}

/* Name + price + meta sit in a solid foot BELOW the image — a real text area,
   like the home drop/daily cards — so nothing ever floats over and blocks the
   shoe. Blends with the page for the clean magazine look. */
.card-tile-foot {
  padding: 9px 12px 11px;
  border: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  pointer-events: auto;
}
.card-tile-title {
  min-width: 0;
  color: var(--fg);
}
.card-tile-foot .card-tile-price-overlay { margin: 0; white-space: nowrap; }
.card-tile-foot .card-meta { display: none; }
.card-tile-foot .enrichment { display: none !important; }
/* The upgrade/unlock CTA on gated cards still needs to be clickable. */
.card-tile-foot .price-locked,
.card-tile-foot button { pointer-events: auto; }
.card-tile-foot .enrichment { display: none !important; }
/* The enrichment line spaces itself off the title/meta via the grid
   gap inside the tile foot — its global margin-top would overflow the
   fixed height. */
.card-tile-foot .enrichment { margin-top: 0; }
.card-tile-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  /* Up to 2 lines so longer names stay readable instead of hard-truncating
     mid-word. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  text-decoration: none;
}
.card-tile-title:hover { color: var(--accent-2); }
.card-tile-foot .card-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  min-width: 0;
  /* Single row inside the fixed-height foot — extra pills clip at the
     edge instead of wrapping to a second row and bloating the cell. */
  overflow: hidden;
}

/* ───────── Hamburger button (mobile only) ───────── */

.hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: none;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--fg);
  border-radius: var(--radius-xs);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.hamburger:hover { border-color: var(--accent-2); }
.hamburger:hover span { background: var(--accent-2); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(5, 8, 12, 0.62);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
.sidebar-backdrop[hidden] { display: none; }

/* ───────── Mobile (≤ 900px): sidebar becomes a slide-in drawer ───────── */

@media (max-width: 900px) {
  /* Mobile: the panes stack, so drop the desktop app-shell lock
     (`height:100vh; overflow:hidden`, which clips everything below the
     fold) and let the DOCUMENT scroll natively — the simplest thing that
     reliably works on touch. Do NOT set overflow-x:hidden on html/body:
     per spec it forces overflow-y to compute to `auto`, turning the root
     into a content-height scroll container with nothing to scroll. */
  html, body { height: auto !important; min-height: 100% !important; overflow: visible !important; }
  body { display: block !important; }
  .app-shell {
    grid-template-columns: 1fr;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }
  .canvas { height: auto !important; overflow: visible !important; }

  /* Slide-in drawer */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 88vw);
    height: 100dvh;
    z-index: 960;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    border-right: 1px solid var(--border-strong);
    background: var(--panel);
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 6px 0 22px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open { transform: translateX(0); }

  /* Hamburger is the only way in or out — show it on mobile */
  .hamburger { display: inline-flex; }

  /* Sticky frosted top bar so search results stay tappable from the
     top edge. Hamburger sits next to the title to live in thumb reach. */
  .canvas { padding: 0 var(--gutter) var(--gutter); }
  /* Landing on mobile: tuck the first section (Drop Calendar) close under the
     navbar — the desktop 20px top pad reads as a big empty gap on a phone. */
  html.query-idle .canvas { padding-top: 10px; }
  .canvas-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* NOT sticky on mobile: a sticky bar at top:0 collides with the sticky
       navbar above it (z 150 < 200) and gets clipped — that's why the shoe's
       breadcrumb header was cut off. Flow normally just below the navbar. Keep
       the L/R bleed for a full-width divider; no negative TOP margin tuck. */
    margin: 0 calc(-1 * var(--gutter)) var(--space-4);
    padding: var(--space-3) var(--gutter);
    border-bottom: 1px solid var(--border);
  }
  .canvas-query {
    font-size: 15px;
  }
  .sidebar-footer { padding-top: 12px; }
  /* Kill horizontal overscroll on mobile — a wide child (chip row, expanded
     detail) must not let the whole page scroll sideways. `clip` (not `hidden`)
     avoids the overflow-y:auto side-effect `hidden` triggers on the root. */
  .app-shell, .canvas { overflow-x: clip; max-width: 100%; }
  .canvas, #results, .daily-grid, .drops-grid, .movers-grid, .under-grid { min-width: 0; }
}

/* Phones: search results go single-column — two columns is too cramped for an
   image+title+price card and was overflowing the viewport. */
@media (max-width: 560px) {
  #results { grid-template-columns: 1fr; }
}

/* Desktop and up: hamburger and backdrop must not interfere. */
@media (min-width: 901px) {
  .hamburger, .sidebar-backdrop { display: none !important; }
  /* On the landing (no active search) the canvas-header is just a "What are you
     hunting?" placeholder that wastes the top of the page — hide it and let the
     content (Today's Picks) start at the top. It reappears during a search to
     show the query (query-idle is cleared then). */
  html.query-idle .canvas-header { display: none; }
  html.query-idle .canvas { padding-top: 16px; }   /* compact top — header reclaimed */
}

input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
  width: 100%;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 9px 12px;
  /* 16px prevents iOS Safari from auto-zooming when focusing the input. */
  font-size: 16px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}

@media (min-width: 720px) {
  input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
    font-size: 14px;
  }
}

input[type="text"]::placeholder,
input[type="number"]::placeholder {
  color: var(--muted);
}

input[type="text"]:focus,
input[type="number"]:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-2-soft);
  background: var(--panel);
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

button {
  background: var(--gold);   /* primary-action default — mint (CTAs); non-primary buttons override */
  color: var(--accent-ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  padding: 12px 18px;
  cursor: pointer;
  transition: background-color 0.12s, transform 0.06s, box-shadow 0.12s;
  box-shadow: none;
}

button:hover {
  background: #84F8D2;
  box-shadow: inset 0 0 0 2px var(--bg-sunken);
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.scout {
  margin: 0 0 22px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
}

.scout.hidden { display: none; }

/* Subtle verdict cue on the scout panel border. Mint for BUY, amber
   for HOLD, red for WAIT — picked up via data-verdict set after the
   Brief text settles. Border colour + ambient halo only, no decoration. */
.scout {
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}
.scout[data-verdict="buy"]  { border-color: rgba(108, 245, 200, 0.42); box-shadow: 0 0 0 1px rgba(108, 245, 200, 0.10), 0 0 28px rgba(108, 245, 200, 0.06); }
.scout[data-verdict="hold"] { border-color: rgba(255, 179, 71, 0.42);  box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.10),  0 0 28px rgba(255, 179, 71, 0.06); }
.scout[data-verdict="wait"] { border-color: rgba(255, 68, 112, 0.40);  box-shadow: 0 0 0 1px rgba(255, 68, 112, 0.10),  0 0 28px rgba(255, 68, 112, 0.06); }

/* Brief error state — designed retry block replaces the previous flat
   "Market read unavailable" red text. */
.scout[data-state="error"] {
  border-color: rgba(255, 179, 71, 0.32);
}
.scout-error {
  display: grid;
  gap: 6px;
  padding: 4px 0;
}
.scout-error-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--fg);
}
.scout-error-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.scout-error-retry {
  justify-self: start;
  margin-top: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius-xs);
  background: rgba(142, 151, 255, 0.10);
  color: var(--accent-2);
  border: 1px solid rgba(142, 151, 255, 0.4);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.scout-error-retry:hover {
  background: rgba(142, 151, 255, 0.18);
  border-color: rgba(142, 151, 255, 0.7);
}


.scout-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.badge {
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(142, 151, 255, 0.2);
}

.model {
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

.scout pre {
  margin: 0;
  font-family: inherit;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 15px;
  color: var(--fg);
}

.status {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  min-height: 18px;
}

.status .err {
  color: var(--danger);
}

/* Results chip row — sort/filter toolbar above the cards. Quiet by
   default, accent on hover, mint-filled when active. */
.results-chips {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  /* One line, always — never collapse to two rows. If the chips outrun the
     width (narrow viewports / many sources) the bar scrolls horizontally
     instead of wrapping. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;            /* Firefox */
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  /* Frosted so result cards scroll cleanly under the pinned toolbar. */
  background: rgba(7, 9, 12, 0.86);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  /* Fade the right edge so an overflowing chip row reads as "scroll for more"
     instead of a hard clip that looks broken. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}
.results-chips[hidden] { display: none !important; }
.results-chips::-webkit-scrollbar { display: none; }   /* hide the scroll track */
.results-chips > * { flex-shrink: 0; }                 /* keep chips full-size; scroll, don't squish */

/* Live count leads the bar. */
.results-count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.results-count:empty { display: none; }

.results-chips-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Hairline divider between the sort + source groups. */
.results-chips-group[data-group="source"] {
  padding-left: 20px;
  border-left: 1px solid var(--border);
}
/* "Under retail" is its own section — push it to the far end so the
   filter toggle reads as distinct from the source filters. */
.chip-deals {
  margin-left: auto;
  padding-left: 12px;
}

.results-chips-label {
  font-family: var(--label-font);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}

/* "Under retail" deal toggle — pushed to the right edge of the bar. */
.chip-deals { margin-left: auto; }
.chip-deals.chip-on {
  background: rgba(142, 151, 255, 0.14);
  border-color: var(--accent-2);
  color: var(--accent-2);
}
@media (max-width: 760px) {
  .chip-deals { margin-left: 0; }
  .results-chips-group[data-group="source"] { padding-left: 0; border-left: 0; }
}

.chip {
  background: transparent;
  color: var(--fg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 5px 10px;
  font-family: var(--label-font);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  font-weight: var(--label-weight);
  cursor: pointer;
  box-shadow: none;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.chip:hover { color: var(--accent-2); border-color: var(--accent-2); background: transparent; }
.chip.chip-on {
  color: var(--accent-ink);
  background: var(--accent-2);
  border-color: var(--accent-2);
}
/* Per-source chips when not active — pick up the brand colour on hover */
.chip-stockx:hover { color: var(--accent-2); border-color: var(--accent-2); }
.chip-goat:hover   { color: var(--accent-amber); border-color: var(--accent-amber); }
.chip-nike:hover   { color: var(--danger); border-color: var(--danger); }
.chip-goat.chip-on { background: var(--accent-amber); border-color: var(--accent-amber); }
.chip-nike.chip-on { background: var(--danger); border-color: var(--danger); }
.chip-ebay:hover         { color: var(--ebay);         border-color: var(--ebay); }
.chip-flightclub:hover   { color: var(--flightclub);   border-color: var(--flightclub); }
.chip-stadiumgoods:hover { color: var(--stadiumgoods); border-color: var(--stadiumgoods); }
.chip-kickscrew:hover    { color: var(--kickscrew);    border-color: var(--kickscrew); }
.chip-ebay.chip-on         { background: var(--ebay);         border-color: var(--ebay);         color: #050608; }
.chip-flightclub.chip-on   { background: var(--flightclub);   border-color: var(--flightclub);   color: #050608; }
.chip-stadiumgoods.chip-on { background: var(--stadiumgoods); border-color: var(--stadiumgoods); color: #050608; }
.chip-kickscrew.chip-on    { background: var(--kickscrew);    border-color: var(--kickscrew);    color: #050608; }

/* "+ship" tag inside the price chip — flags that the headline number is
   the landed (all-in) price, not the bare item price. */
.price-ship {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0.68;
  margin-left: 2px;
  vertical-align: 1px;
}

#results {
  margin-top: 12px;
  display: grid;
  gap: 4px;
}


/* ── Toast stack — general-purpose confirmations (top-right) ────── */

.toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 250;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 10px 11px 12px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(142, 151, 255, 0.04);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}
.toast.open { opacity: 1; transform: none; }
.toast-glyph {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.toast-success { border-color: rgba(142, 151, 255, 0.42); }
.toast-success .toast-glyph {
  background: rgba(142, 151, 255, 0.14);
  color: var(--accent-2);
  border: 1px solid rgba(142, 151, 255, 0.4);
}
.toast-success .toast-glyph::before { content: "✓"; }

.toast-info .toast-glyph {
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg-soft);
  border: 1px solid var(--border-strong);
}
.toast-info .toast-glyph::before { content: "i"; font-family: "JetBrains Mono", ui-monospace, monospace; }

.toast-warn { border-color: rgba(255, 179, 71, 0.42); }
.toast-warn .toast-glyph {
  background: rgba(255, 179, 71, 0.14);
  color: var(--highlight);
  border: 1px solid rgba(255, 179, 71, 0.4);
}
.toast-warn .toast-glyph::before { content: "!"; }

.toast-body { min-width: 0; }
.toast-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--fg);
  line-height: 1.3;
}
.toast-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}
.toast-dismiss {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: color 0.14s ease, background 0.14s ease;
}
.toast-dismiss:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 540px) {
  .toast-stack {
    top: 8px;
    right: 8px;
    left: 8px;
    max-width: none;
  }
}

/* ── Rate-limit upsell toast — bottom-right, slides up + fades in ── */

.rate-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  max-width: 380px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.rate-toast.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rate-toast[hidden] { display: none !important; }
/* Premium upgrade nudge (not an alert): neutral panel with a quiet mint accent,
   generous spacing, and a clear CTA. Reframes "you hit a limit" as an inviting
   offer instead of a warning. */
.rate-toast-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 13px;
  padding: 16px 18px 16px 16px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(132, 248, 210, 0.07), transparent 60%),
    var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 48px rgba(0, 0, 0, 0.5);
}
.rate-toast-icon {
  grid-row: 1 / span 2;
  align-self: start;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent-2);
  background: rgba(132, 248, 210, 0.10);
  border: 1px solid rgba(132, 248, 210, 0.26);
}
.rate-toast-body {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-right: 18px;   /* clear the corner close button */
}
.rate-toast-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--fg);
}
.rate-toast-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.rate-toast-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.rate-toast-cta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--accent-ink);
  border: 1px solid var(--gold);
  cursor: pointer;
  box-shadow: none;
  transition: filter 0.14s ease, transform 0.14s ease;
}
.rate-toast-cta:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: none; }
.rate-toast-cta:active { transform: none; }
.rate-toast-cta[hidden] { display: none !important; }
.rate-toast-later {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: none;
  transition: color 0.14s ease, background 0.14s ease;
}
.rate-toast-later:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); box-shadow: none; }
.rate-toast-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: none;
  transition: color 0.14s ease, background 0.14s ease;
}
.rate-toast-dismiss:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}
@media (max-width: 540px) {
  .rate-toast {
    right: 10px;
    left: 10px;
    bottom: 10px;
    max-width: none;
  }
}

/* ── Landing hero — first-impression block for anon visitors ─────── */

.landing-hero {
  margin: 0 0 22px;
  padding: 22px 24px 24px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent-2);
  background: var(--bg-sunken);
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  animation: landing-hero-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.landing-hero[hidden] { display: none !important; }
@keyframes landing-hero-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.landing-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  margin: 0 0 8px;
}
.landing-hero-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(142, 151, 255, 0.5);
  animation: landing-hero-pulse 1.8s ease-out infinite;
}
@keyframes landing-hero-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(142, 151, 255, 0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(142, 151, 255, 0); }
  100% { box-shadow: 0 0 0 0   rgba(142, 151, 255, 0); }
}

.landing-hero-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .landing-hero { padding: 18px 18px 20px; }
  .landing-hero-title { font-size: 22px; }
}

/* ── No-results empty state — zero-hit search lands here ─────────── */

.no-results {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 10px;
  padding: 38px 24px 32px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 179, 71, 0.04), transparent 60%),
    var(--panel);
  animation: landing-hero-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.no-results-glyph {
  width: 56px;
  height: 36px;
  color: var(--highlight);
  opacity: 0.85;
}
.no-results-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.no-results-title em {
  font-style: normal;
  color: var(--highlight);
  font-weight: 700;
}
.no-results-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 480px;
  margin: 0 0 4px;
}
.no-results-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}
.no-results-chip {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  border-radius: var(--radius-xs);
  background: rgba(142, 151, 255, 0.06);
  color: var(--accent-2);
  border: 1px solid rgba(142, 151, 255, 0.25);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.no-results-chip:hover {
  background: rgba(142, 151, 255, 0.12);
  border-color: rgba(142, 151, 255, 0.5);
  transform: translateY(-1px);
}

/* ── Daily picks (agent-curated landing hero) ────────────────────── */

.daily {
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}
.daily.hidden { display: none; }

.daily-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.daily-badge {
  background: linear-gradient(180deg, rgba(142, 151, 255, 0.18), rgba(142, 151, 255, 0.08));
  color: var(--accent-2);
  border-color: rgba(142, 151, 255, 0.45);
}
.daily-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.003em;
}

/* Magazine mosaic — 4-col grid with a 2×2 hero leading. Every other
   tile is identical so rows render the same height. The "wide" 2×1
   variant was removed because its 2:1 aspect across two columns
   forced its row taller than regular rows (which use 16:10 across
   one column) — visually uneven. Single hero crown + uniform
   regulars keeps the editorial rhythm without breaking parity. */
.daily-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Lead pick — distinguished by an accent border + larger № marker, NOT
   by a 2×2 span. The span repeatedly collapsed the image wrap; a uniform
   grid with aspect-ratio tiles renders reliably every time. */
.daily-card-hero {
  /* Lead pick: a quiet full accent border instead of a loud green left bar. */
  border-color: rgba(142, 151, 255, 0.4);
}

@media (max-width: 1100px) {
  .daily-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* 2-col on mobile needs real breathing room — the 4px mosaic gap that reads
     as dense on a 4-col desktop looks cramped/cheap between two large tiles. */
  .daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}
/* Very narrow phones: one clean column beats two squeezed tiles. */
@media (max-width: 460px) {
  .daily-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* Image-first daily card. Hero image dominates the tile (16:10), small
   name+colorway footer band. Category + retail are overlaid as corner
   chips so they don't steal vertical space from the photo. */
.daily-card {
  text-align: left;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  /* Flex column instead of grid auto-rows — when the parent grid cell
     is taller than image+foot (e.g. a wide tile sharing a row with
     taller regular tiles), `margin-top: auto` on the foot pins it to
     the bottom of the cell instead of letting it float mid-tile. */
  display: flex;
  flex-direction: column;
  /* Explicit stretch — .daily-card is a <button>, and some browsers don't
     stretch a button's flex children by default, which left the image
     wrap + caption foot sized to content instead of the full card width. */
  align-items: stretch;
  gap: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  /* Flat: a clean subtle border defines the tile, no drop shadow. */
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s ease;
}
.daily-card:hover {
  border-color: rgba(142, 151, 255, 0.45);
  transform: translateY(-4px);
  box-shadow: none;
}

.daily-card-img-wrap {
  position: relative;
  width: 100%;
  /* aspect-ratio gives the wrap a definite height from its width — the
     reliable way to size an image box. Tall 4:5 portrait matches the drop
     tiles for one consistent Nike-Launch gallery across the landing. */
  aspect-ratio: 4 / 5;
  /* Dark stage so the AI cutout floats on the dark theme; the few non-cutout
     fallbacks letterbox onto the same stage rather than a white box. */
  background: var(--img-stage);
  overflow: hidden;
}
.daily-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.5)) drop-shadow(0 20px 30px rgba(0,0,0,0.36));   /* soft contact + ambient shadow → shoe lifts off the stage, 3D */
  /* Inset the cutout so a tightly-cropped shoe (the enhancer crops to the shoe's
     bounding box) never touches/clips against the frame edge. */
  padding: 9px 10px 7px;
  box-sizing: border-box;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
.daily-card:hover .daily-card-img { transform: scale(1.04); }

/* Dark colorways blend into the dark stage and lose their detail. When
   scoutShoeTint flags a predominantly-dark shoe (.is-dark-shoe), trace the
   silhouette with a faint COOL rim-light + a soft separation halo, stacked over
   the usual grounding shadow — so a black sneaker reads at full edge + detail
   against the stage instead of vanishing into it. Applies to every cutout
   surface (drops, movers, under-retail, trending, daily, search, detail hero). */
.is-dark-shoe .drop-card-img,
.is-dark-shoe .mover-card-img,
.is-dark-shoe .under-card-img,
.is-dark-shoe .trending-card-img,
.is-dark-shoe .daily-card-img,
.is-dark-shoe .card-tile-img,
.is-dark-shoe .detail-hero-img {
  filter:
    drop-shadow(0 0 0.7px rgba(216, 228, 246, 0.55))   /* tight rim — crisp edge */
    drop-shadow(0 0 10px rgba(150, 178, 222, 0.20))    /* soft cool halo — separation */
    drop-shadow(0 9px 13px rgba(0, 0, 0, 0.5));        /* grounding contact shadow */
}

/* No-image fallback (or img failed to load) — full-bleed stage with a
   centered silhouette so the tile still reads as a product slot rather
   than an empty box. (Picks that can't resolve an image are dropped
   server-side, so this is mostly the failed-load safety net.) */
.daily-card-img-wrap:not(:has(.daily-card-img))::after,
.daily-card-img-failed::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none' stroke='%236CF5C8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'><path d='M4 30 L4 22 Q4 18 10 18 L18 18 Q26 18 33 22 L48 22 Q54 22 54 27 L54 31 L4 31 Z'/><path d='M11 18 L11 12 M16 18 L16 9 M22 19 L22 13'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 46% auto;
}

/* Crisp solid tag — a single dark chip with a colored label + hairline
   per category. Reads cleanly over both white product cutouts and dark
   lifestyle shots (the old translucent blur went muddy on white). */
/* Status chip — a frosted glass pill where a small COLORED DOT carries the
   category signal and the label stays a quiet white. Reads premium/editorial
   instead of a shouty fully-colored caps tag. */
.daily-cat {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  background: rgba(8, 10, 14, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 2;
}
.daily-cat::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cat-color, var(--accent-2));
  box-shadow: 0 0 6px var(--cat-color, var(--accent-2));
  flex: none;
}
.daily-cat-drop    { --cat-color: var(--accent-2); }
.daily-cat-restock { --cat-color: #6CC6F5; }
.daily-cat-mover   { --cat-color: var(--accent-amber); }
.daily-cat-hyped   { --cat-color: var(--danger); }
.daily-cat-sleeper { --cat-color: var(--fg-soft); }
.daily-cat-watch   { --cat-color: var(--accent-2); }

/* Editorial "№01" index — refined typography lifts the magazine
   feel above a flat numeral. Sits top-right where it doesn't collide
   with the category chip top-left or the retail chip bottom-right. */
.daily-card-num {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(11, 16, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 7px;
  z-index: 2;
  font-variant-numeric: tabular-nums;
}
.daily-card-hero .daily-card-num {
  top: 10px;
  right: 10px;
  font-size: 13px;
  padding: 6px 10px;
  color: var(--accent-2);
  background: rgba(11, 16, 20, 0.7);
  border: 1px solid rgba(142, 151, 255, 0.4);
}

/* Hero-only reason copy — the agent's "why this pick" one-liner.
   Sits below the silhouette + colorway, tinted as a subtitle so it
   doesn't compete with the name. Hidden on the smaller tiles to
   keep them scannable at a glance. */
.daily-hero-reason {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.003em;
}

.daily-card-foot {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--card-edge);
  background: var(--bg);   /* label blends with the page — magazine look */
}

/* Name + price share one baseline-aligned line so the price sits tight
   against the model name instead of stranded far-right on a lonely row. */
.daily-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.daily-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hover feedback lives on the card border + lift, NOT a full-teal name
   (which read as broken). The name stays a clean white. */

.daily-price {
  flex: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.daily-colorway {
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  line-height: 1.3;
  display: block;
  overflow: hidden;
}

/* old uniform-grid breakpoints retired — see mosaic block above */

/* Scroll-in tile entrance — IntersectionObserver in app.js flips
   .is-visible on each tile as it crosses the viewport. The .mosaic-
   enter class is attached at the same time so we never animate
   tiles that never get observed (no JS). Disabled automatically by
   the JS path for users with prefers-reduced-motion. */
.mosaic-enter {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.mosaic-enter.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mosaic-enter,
  .mosaic-enter.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Cards fade/slide in as each page is revealed (results + landing rows). */
.card-tile.result-enter,
.rowcard.result-enter {
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  transition:
    opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-tile.result-enter.is-in,
.rowcard.result-enter.is-in { opacity: 1; transform: none; }

/* Cards held back behind a section "Load more". */
.is-paged-out { display: none !important; }
.section-load-more { margin-top: 8px; }

/* "Load more" — full-width, calm, with a spinner while the next page paints. */
.results-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 14px 0 4px;
  padding: 13px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--fg);
  font: 600 13px/1 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.results-load-more:hover { border-color: var(--accent-2); background: var(--panel); }
.results-load-more .rlm-count { color: var(--muted); font-weight: 450; font-size: 12px; }
.results-load-more.is-loading { color: transparent; pointer-events: none; position: relative; }
.results-load-more.is-loading .rlm-label,
.results-load-more.is-loading .rlm-count { visibility: hidden; }
.results-load-more.is-loading::after {
  content: "";
  position: absolute;
  width: 17px; height: 17px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .card-tile.result-enter,
  .card-tile.result-enter.is-in { opacity: 1; transform: none; transition: none; }
  .results-load-more.is-loading::after { animation: none; }
}

/* ── Drop calendar (upcoming releases) ───────────────────────────── */

.drops {
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}
.drops.hidden { display: none; }

.drops-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.drops-badge {
  background: rgba(255, 179, 71, 0.10);
  color: var(--accent-amber);
  border-color: rgba(255, 179, 71, 0.28);
}
.drops-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.003em;
}

/* "Never miss" countdown banner — sits between the section header
   and the drops grid. Big mono timer + the next release name + a
   single-tap "subscribe — all drops" .ics export. Anchors the
   "never miss" promise visually at the top of the calendar feed. */
.drops-countdown {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(142, 151, 255, 0.08), transparent 70%),
    var(--bg-sunken);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent-2);
}
.drops-countdown[hidden] { display: none !important; }
.dc-lede {
  display: grid;
  gap: 4px;
}
.dc-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.dc-timer {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* Slight glow so the timer pops as the focal point */
  text-shadow: 0 0 18px rgba(142, 151, 255, 0.18);
}
.dc-timer-live {
  color: var(--accent-2);
  animation: dc-timer-live-pulse 1.4s ease-in-out infinite;
}
@keyframes dc-timer-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}
.dc-body {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}
.dc-name {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: var(--gold);
  color: var(--accent-ink);
  border: 1px solid var(--gold);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.14s ease, transform 0.14s ease;
}
.dc-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 720px) {
  .drops-countdown {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }
  .dc-timer { font-size: 20px; }
  .dc-cta { justify-self: start; }
}

/* "+ CAL" button on each drop tile — hands the user a single-event
   .ics with a 1-hour-before alarm. The OS calendar carries the
   reminder so they never miss the release even if our tab is closed. */
.drop-card-cal {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: rgba(5, 6, 8, 0.78);
  color: var(--fg-soft);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.drop-card-cal:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}
.drop-card-cal svg { flex-shrink: 0; }
/* Hero gets a slightly bigger CAL chip and sits in the top-right stack,
   just under the countdown — grouping "when it drops" with "remind me" —
   so the bottom band is free for the product info. */
.drop-card-hero .drop-card-cal {
  top: 48px;
  right: 12px;
  bottom: auto;
  left: auto;
  padding: 6px 10px;
  font-size: 10px;
}

/* Brand filter chips above the drop grid — clean, scrollable on narrow widths. */
/* Controls row above the grid: timeline pager (left) + brand filters (right),
   on one line. space-between keeps a lone child (e.g. pager hidden) at the
   left edge, so small feeds look unchanged. */
.drops-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 14px;
}
.drops-controls[hidden] { display: none; }   /* author rule beats UA [hidden] */
.drops-filters {
  display: flex;
  /* One line, always — when the brand chips outrun the width (mobile / many
     brands) the row scrolls sideways instead of collapsing onto two lines. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  margin: 0;
  /* Thin neutral scrollbar so the filter strip's scroll affordance is visible
     (notably on mobile) without the loud mint tint that clashed with the theme. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
}
.drops-filters[hidden] { display: none; }
.drops-filters > * { flex-shrink: 0; }            /* chips keep full size; scroll, don't squish */
.drops-filters::-webkit-scrollbar { height: 4px; }
.drops-filters::-webkit-scrollbar-track { background: transparent; }
.drops-filters::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  border: 0;
}

/* Timeline pager — compact prev/next arrows, sized to line up with the brand
   pills on the same row. Neutral ghost styling (overrides the default mint CTA
   button look) so it reads as a quiet control, not a CTA. */
.drops-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.drops-pager[hidden] { display: none; }
.drops-pager .drops-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.drops-pager .drops-pager-btn:hover:not(:disabled) {
  background: var(--bg-elevated);
  border-color: var(--accent-2);
  color: var(--accent-2);
  box-shadow: none;
}
.drops-pager .drops-pager-btn:disabled {
  opacity: 0.32;
  cursor: default;
  transform: none;
  background: transparent;
}
.drops-filter {
  appearance: none;
  /* Transparent so the chips flow with the dark page (no lighter boxes); a faint
     rim defines them. Active = subtle iris tint, not a bright solid pop. */
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.drops-filter:hover { border-color: var(--border-strong); color: var(--fg); }
.drops-filter.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg);
  border-color: var(--border-strong);
}
.drops-empty {
  grid-column: 1 / -1;
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.drops-grid {
  display: grid;
  /* Column count tracks the number of non-hero tiles (--rest-cols, set in
     renderDrops) so the row beneath the hero fills exactly — the old fixed
     4-col grid left 2 dead columns whenever there were few drops. */
  grid-template-columns: repeat(var(--rest-cols, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(168px, auto);
  /* Gallery breathing room — generous gaps let each release stand on its own
     (Nike-Launch calm) instead of reading as one dense wall of tiles. */
  gap: var(--space-4);
}
/* The next-upcoming drop is a full-width banner across the top — it always
   fills the container (no dead space beside a half-width tile) and reads as
   the lead. Remaining drops tile in the row(s) beneath it. */
.drop-card-hero {
  grid-column: 1 / -1;
  grid-row: auto;
  /* Positioning context for the bottom-overlay foot (see below). */
  position: relative;
}
.drop-card-hero .drop-card-img-wrap {
  /* Banner proportions — wide enough to fill the row, short enough that the
     landscape sneaker shot isn't over-cropped. */
  aspect-ratio: 21 / 9;
  flex: none;
  min-height: 0;
}
.drop-card-hero .drop-card-date {
  top: 13px;
  left: 15px;
}
.drop-card-hero .drop-date-mo { font-size: 12px; }
.drop-card-hero .drop-date-day { font-size: 30px; }
.drop-card-hero .drop-name { font-size: 14px; }
.drop-card-hero .drop-colorway { font-size: 12px; }

/* "NEXT UP" eyebrow stamped over the hero image — mint mono so it
   reads as a magazine pull-quote, not a generic chip. Hidden on
   smaller drop tiles where the date + countdown already carry it. */
.drop-card-eyebrow {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: inline-block;
  padding: 5px 9px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent-ink);
  background: var(--accent-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* On the lead tile the countdown IS the headline — when it drops — so it
   gets real presence instead of the 9.5px corner chip the small tiles
   use. It mirrors the date stamp in the opposite corner: a dark frosted
   chip (legible over any photo, light or dark) with the urgency color
   carried on the mono label, the leading status tick, and a hairline
   border. The tick blinks inside 48h; the live state keeps its ring
   pulse. Two matched corner chips frame the hero like a poster. */
.drop-card-hero .drop-card-img-wrap .drop-countdown {
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  background: rgba(11, 16, 20, 0.82);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.drop-card-hero .drop-card-img-wrap .drop-countdown::before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  flex: none;
}
/* Re-tint each state for the dark chip: state color on text + tick,
   matching hairline border. (live's text is dark-ink on the small
   chip's solid-mint bg — on the dark hero chip it must be mint.) */
.drop-card-hero .drop-card-img-wrap .drop-countdown-live {
  color: var(--accent-2);
  background: rgba(11, 16, 20, 0.82);
  border-color: rgba(142, 151, 255, 0.5);
}
.drop-card-hero .drop-card-img-wrap .drop-countdown-imminent {
  color: var(--danger);
  border-color: rgba(255, 68, 112, 0.5);
}
.drop-card-hero .drop-card-img-wrap .drop-countdown-soon {
  color: var(--highlight);
  border-color: rgba(255, 179, 71, 0.5);
}
.drop-card-hero .drop-card-img-wrap .drop-countdown-future {
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.18);
}
.drop-card-hero .drop-card-img-wrap .drop-countdown-imminent::before {
  animation: drop-tick-blink 1.3s ease-in-out infinite;
}
@keyframes drop-tick-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Hero foot rides ON the full-bleed image as a bottom-right overlay
   (poster style) instead of a strip below it — so the photo fills the
   whole tile and the product info sits cleanly over a gradient scrim,
   right-aligned to balance the NEXT UP eyebrow on the left. Small tiles
   keep their foot strip below the image. */
.drop-card-hero .drop-card-foot {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  margin: 0;
  border: 0;
  background: linear-gradient(to top, rgba(5, 6, 8, 0.94), rgba(5, 6, 8, 0.66) 52%, rgba(5, 6, 8, 0));
  padding: 42px 14px 13px;
  gap: 3px;
  justify-items: end;
  text-align: right;
}
.drop-card-hero .drop-name { font-size: 15px; }
.drop-card-hero .drop-colorway { font-size: 12px; }
.drop-card-hero .drop-name-row { width: 100%; }
.drop-card-hero .drop-when { font-size: 11px; }

@media (max-width: 720px) {
  .drops-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .drop-card-hero { grid-column: auto; grid-row: auto; }
  .drop-card-hero .drop-card-img-wrap { aspect-ratio: 3 / 2; flex: none; height: auto; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .drops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drop-card-hero { grid-column: span 2; grid-row: span 2; }
}

/* Image-first drop card. Hero sneaker fills the top, date badge + drop
   countdown overlay the image, name + source + retail sit in the foot. */
.drop-card {
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  /* Flex column + margin-top:auto on foot — same fix as .daily-card.
     Stops the foot from floating mid-cell when a hero on the same
     row makes the grid row taller than this tile's intrinsic height. */
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Only the image is the clickable button now — the card itself is a plain
     container, so it shows the default cursor (the foot is not a click target). */
  cursor: default;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.14s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s ease;
}
.drop-card:hover {
  /* Calm iris lift — matches the For You / daily cards so the whole landing
     hovers with one quiet brand language instead of a loud amber flash. */
  border-color: rgba(142, 151, 255, 0.45);
  transform: translateY(-4px);
  box-shadow: none;
}

.drop-card-img-wrap {
  position: relative;
  /* Tall portrait frame (Nike-Launch) — the shoe floats centered with real
     whitespace around it, one focused product per tile instead of a short
     landscape strip. */
  aspect-ratio: 4 / 5;
  flex: 1 1 auto;
  min-height: 0;
  /* The image is the clickable "open this drop" button (role="button"). */
  cursor: pointer;
  /* Dark stage — the AI cutout floats on it like the Today's Picks mosaic. */
  background: var(--img-stage);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.drop-card-img-wrap:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}
.drop-card-img {
  width: 100%;
  height: 100%;
  /* contain (not cover) so the whole floating shoe shows, never cropped. */
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.5)) drop-shadow(0 20px 30px rgba(0,0,0,0.36));   /* soft contact + ambient shadow → shoe lifts off the stage, 3D */
  display: block;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Editorial tiles: a real sneaker whose only Nike imagery is a styled MACRO
   (no clean whole-shoe cutout). Show the original photography full-bleed —
   cover-fill the banner like nike.com/launch — so it reads as an intentional
   teaser instead of a floating cropped fragment on the dark stage. */
.drop-card.is-editorial .drop-card-img {
  object-fit: cover;
}
/* Shoe-matched stage tint, same as the daily mosaic — layered over the stage. */
.drop-card.has-shoe-tint .drop-card-img-wrap {
  background-image:
    radial-gradient(120% 118% at 50% 44%,
      rgba(var(--shoe-tint), 0.17) 0%,
      rgba(var(--shoe-tint), 0.05) 48%,
      transparent 80%),
    var(--img-stage);
}
.drop-card-img-wrap:hover .drop-card-img { transform: scale(1.04); }

.drop-card-img-wrap:not(:has(.drop-card-img))::after,
.drop-card-img-failed::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Sneaker side-profile silhouette — heel collar, tongue notch, vamp, rounded
     toe box, a midsole split and a single swoosh sweep. Deliberately NO vertical
     lace lines (those read as a comb); the swoosh + midsole make it unique. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none' stroke='%23FFB347' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.45'><path d='M8 30 L8 20 Q8 15 13 15 L18 15 Q19 17.5 21 17.5 L23 15.5 Q25 15.5 27 16.5 Q35 18.5 42 20.5 Q49 21 50 25.5 L50 30 Z'/><path d='M8 27 Q29 28.5 50 27'/><path d='M18 24.5 Q28 20.5 40 23'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 42% auto;
}

.drop-card-date {
  position: absolute;
  top: 11px;
  left: 12px;
  width: auto;
  height: auto;
  /* Plain stacked date (Nike-Launch) — no frosted box or ring, just month
     over day reading straight off the stage. A soft shadow keeps it legible
     over a light shoe that runs into the corner. */
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  padding: 0;
  display: block;
  text-align: left;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  line-height: 1.04;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.drop-date-mo {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.drop-date-day {
  display: block;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

.drop-card-img-wrap .drop-countdown {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 8px;
  font-size: 10px;
}

.drop-card-foot {
  padding: var(--space-3);
  display: grid;
  /* SNKRS-style justified caption — name + colorway on the left, the Inside
     Scoop pill centered on the right (mirrors "Notify Me"); the expand panel
     drops full-width below the row. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 2px;
  border-top: 1px solid var(--card-edge);
  background: var(--bg);   /* label blends with the page — magazine look */
  min-width: 0;
  margin-top: auto;
}
.drop-card-foot .drop-name-row { grid-column: 1; }
.drop-card-foot .drop-colorway { grid-column: 1; }
/* Hoist the scoop's toggle + panel out into the foot grid (display:contents)
   so the pill can sit in the right column while the panel still spans the
   full width underneath both text rows. Scoped to .drop-card-foot so the
   search-result Inside Scoop (renderHypeStat) keeps its stacked layout. */
.drop-card-foot .drop-scoop { display: contents; }
.drop-card-foot .scoop-toggle {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: auto;
  flex: none;
}
.drop-card-foot .drop-scoop-panel {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: var(--space-2);
}

.drop-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.drop-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-transform: none;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drop-colorway {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--text-sm);
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.drop-when {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 1px;
}

/* Available-sizes line — the size run a drop will carry, shown before release so
   buyers get the gist of what's out. Calm + data-like, matches the colorway row. */
.drop-sizes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  min-width: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}
.drop-sizes-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  font-weight: 600;
  flex: 0 0 auto;
}
.drop-sizes-run {
  color: var(--fg);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.drop-sizes-count {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border: 1px solid var(--card-edge);
  border-radius: 999px;
}

/* The shoe name links to the source listing. Inherit the name's type; only the
   hover hints it's a link — keeps the calm magazine look until you reach for it. */
.drop-name-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.drop-name-link:hover,
.drop-name-link:focus-visible {
  color: var(--accent-amber);
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}

/* Inside Scoop — the single gated affordance in the drop foot. The COLLAPSED
   chip is a fixed height so every card matches; the panel only grows the card
   when a member opens it. */
.drop-scoop {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--card-edge);
}
.scoop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 26px;
  box-sizing: border-box;
  padding: 3px 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  color: var(--fg-soft);
  font-family: var(--label-font);
  font-size: var(--label-size-xs, 10px);
  letter-spacing: var(--label-tracking, 0.04em);
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
/* Hover/focus: a clear tinted fill + near-white text so the label stays fully
   legible (not just a border tweak). Locked reads amber (the unlock accent);
   unlocked reads mint (the "you're in" accent). */
.scoop-toggle:hover {
  border-color: rgba(255, 179, 71, 0.6);
  background: rgba(255, 179, 71, 0.14);
  color: var(--fg);
}
.scoop-toggle:hover .lock-ico,
.scoop-toggle:hover .scoop-chevron { opacity: 1; }
.scoop-toggle:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
  color: var(--fg);
}
.scoop-toggle .lock-ico { flex: none; opacity: 0.85; }
.scoop-toggle-label { flex: 1 1 auto; text-align: left; }
.drop-scoop.is-unlocked .scoop-toggle { color: var(--accent-2); border-color: rgba(142, 151, 255, 0.42); }
.drop-scoop.is-unlocked .scoop-toggle:hover {
  border-color: rgba(142, 151, 255, 0.6);
  background: rgba(142, 151, 255, 0.14);
  color: var(--fg);
}
.drop-scoop.is-unlocked .scoop-toggle:focus-visible { outline-color: var(--accent-2); }
.scoop-chevron {
  flex: none;
  display: inline-flex;
  transition: transform 0.2s ease;
  opacity: 0.8;
}
.drop-scoop.is-open .scoop-chevron { transform: rotate(180deg); }
.scoop-toggle.loading { opacity: 0.7; cursor: progress; }

/* The decision panel — the gated intel, revealed in place. */
.drop-scoop-panel {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  animation: scoop-reveal 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes scoop-reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.scoop-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 0;
}
.scoop-row-label {
  flex: 0 0 42px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--label-font);
  font-size: 10px;
  font-weight: 600;
}
/* M / W sizing-scale tag — states whether a run is men's or women's US. */
.scoop-sys {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 15px; height: 15px;
  border-radius: 4px;
  background: rgba(255, 179, 71, 0.16);
  border: 1px solid rgba(255, 179, 71, 0.4);
  color: var(--accent-amber);
  font-family: var(--label-font);
  font-size: 10px;
  font-weight: 800;
}
.scoop-sizes-run { color: var(--fg); font-weight: 550; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.scoop-sizes-count {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border: 1px solid var(--card-edge);
  border-radius: 999px;
}
.scoop-hype-n { color: var(--fg); font-weight: 700; font-size: 13px; }
.scoop-hype-max { color: var(--muted); font-size: 10px; }
.scoop-hype-tag {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--label-font);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scoop-resale-range { color: var(--accent-2); font-weight: 700; }
.scoop-resale-med { margin-left: auto; color: var(--muted); }
.scoop-buzz-n { color: var(--fg-soft); }
.scoop-none { color: var(--muted); font-style: italic; }

/* "The research" — the honest signals behind the Inside Scoop. Set off from the
   headline rows by a dashed rule so it reads as the supporting work. */
.scoop-research {
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px dashed var(--card-edge);
  display: grid;
  gap: 4px;
}
.scoop-research-head {
  font-family: var(--label-font);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 1px;
}
.scoop-research-v {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--fg-soft);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scoop-research-v .dim { color: var(--muted); }
.scoop-research-note {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  margin: 5px 0 0;
}
/* Hype Heat badge — top-right of the image, opposite the date chip. Colored by
   tier so a hot drop reads at a glance. */
/* Hype stat line — flows in the card foot: a small tier-colored dot + score,
   then the resale-by-size range. Calm, monospace, reads as data not decoration. */
.drop-stat {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Hairline divider gives the intel row real structure + weight (impactful),
     set apart from the product name above instead of floating loose. */
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--card-edge);
  /* Fixed row height so the foot is the SAME height whether the resale is locked
     (the unlock pill) or unlocked (a plain price-range line) — no card-to-card
     height jitter. Kept compact so the text foot stays tight. */
  min-height: 28px;
  box-sizing: border-box;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
}
.heat-n { font-size: 13px; }                 /* the score reads as the headline metric */
.heat-tag {                                  /* "Hype" micro-label after the score */
  font-family: var(--label-font);
  font-size: var(--label-size-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--muted);
}
.heat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--heat-dot, var(--accent-2));
  box-shadow: 0 0 6px var(--heat-dot, var(--accent-2));
}
.heat-n { font-weight: 700; color: var(--fg); }
.heat-sep { color: var(--muted); opacity: 0.5; }
.drop-stat .dim { color: var(--muted); }
/* Quiet "Resale" label that pushes itself + the unlock button to the right edge
   so the row reads: hype score (left) · · · Resale 🔒 $N (right). Clean + pro. */
.resale-tag {
  margin-left: auto;
  font-family: var(--label-font);
  font-size: var(--label-size-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--muted);
}
/* The Resale label pushes itself + the value group to the right; the value sits
   right after it (no extra auto-margin) so locked + unlocked read identically. */
/* Inside Scoop — locked resale unlock chip: a small accent pill with the
   dynamic price (or "Unlock free" for the first taste). Clicking reveals the
   size-by-size range. */
.heat-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;            /* compact pill */
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  /* Flat, subtle green-tinted pill — no glow. A whisper-faint rim (close to the
     background, like the cards) gives it a clean little edge without the loud
     green border; the green lives in the content (lock + price). */
  background: rgba(142, 151, 255, 0.12);
  border: 1px solid var(--card-edge);
  box-shadow: none;
  color: var(--accent-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.16s ease;
}
.heat-lock .lock-ico { color: #36D6A0; }       /* lock — deeper emerald hue */
.heat-lock .lock-cta { color: #8CF8D6; }       /* price — brighter mint hue */
.heat-lock:hover { background: rgba(142, 151, 255, 0.2); }   /* gentle wash, no glow/lift */
.heat-lock:active { background: rgba(142, 151, 255, 0.16); }
.heat-lock:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
/* World-class unlock loader: the moment the chip is tapped, the lock swaps for a
   crisp spinner + "Opening…" while we mint the Stripe session — instant, legible
   feedback that something's happening, held right up until the redirect. */
.heat-lock.loading { pointer-events: none; }
.heat-lock.loading .lock-ico { display: none; }
.heat-lock.loading::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border: 1.6px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: scoop-spin 0.6s linear infinite;
}
.heat-lock .lock-ico { flex: none; width: 12px; height: 12px; }
.heat-blaze { --heat-dot: #ff5b3a; }
.heat-hot   { --heat-dot: #ff8a3d; }
.heat-warm  { --heat-dot: #ffd479; }
.heat-cool  { --heat-dot: #8aa0b4; }
/* Redacted resale teaser — the real size-by-size range is server-gated and we
   never ship a price (not even a placeholder digit) to a user who hasn't paid.
   Each value is an abstract redaction bar, so the card signals "there's a hidden
   resale range, unlock to reveal" without disclosing any number. */
.heat-resale-locked {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--fg-soft);
  user-select: none;
}
.heat-resale-locked .redact {
  display: inline-block;
  width: 20px;
  height: 0.62em;
  margin: 0 1px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    -45deg,
    var(--fg-soft) 0 2px,
    transparent 2px 4px);
  opacity: 0.4;
  vertical-align: -0.05em;
}
.heat-resale-locked .redact-sep { opacity: 0.5; padding: 0 1px; }
/* Inside Scoop generate chip — a clean ghost pill on cards whose resale intel
   isn't warm yet; click pulls it live. */
.scoop-gen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;            /* WCAG 2.5.8 target size */
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-soft);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}
.scoop-gen:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.scoop-gen:hover { border-color: var(--accent-2); color: var(--accent-2); }
.scoop-gen .lock-ico { flex: none; opacity: 0.75; }
.scoop-gen.loading { pointer-events: none; opacity: 0.75; }
.scoop-gen.loading .lock-ico { animation: scoop-spin 0.8s linear infinite; }
.scoop-gen.scoop-empty { opacity: 0.45; pointer-events: none; border-style: dashed; }
@keyframes scoop-spin { to { transform: rotate(360deg); } }
/* Locked Inside Scoop row: just the (free) hype score + the unlock chip — no
   resale intel is teased. The chip hugs the right edge, stays on ONE line, and
   never shrinks/wraps; the row lets its other children shrink so nothing
   overflows. */
.drop-stat { min-width: 0; }
.drop-stat .scoop-lock {
  margin-left: auto;     /* unlock chip always hugs the right edge */
  flex: 0 0 auto;        /* never shrinks — stays intact */
  white-space: nowrap;   /* "Inside Scoop" stays on ONE line, never wraps */
}
.scoop-lock .lock-cta { white-space: nowrap; }

/* Inside Scoop stat line dropped into a search-result card's foot — same look
   as on the drop tiles. Flex-end so the cold "Inside Scoop" trigger right-aligns
   to match the warm unlock chip (consistent placement card to card). */
.card-hype { margin-top: 4px; display: flex; justify-content: flex-end; }
.card-hype .drop-stat { margin-top: 0; flex: 1 1 100%; }   /* full width: heat left, chip right */
.drop-chip .flame-ico { width: 9px; height: 9px; vertical-align: -1px; }

.drop-src {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.25);
  font-family: var(--label-font);
  font-size: var(--label-size-xs);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--muted);
}
.drop-src-snkrs   { color: var(--danger); }
.drop-src-stockx  { color: var(--stockx, var(--accent-2)); }
.drop-src-goat    { color: var(--goat,   var(--accent-amber)); }
.drop-src-adidas  { color: var(--accent-2); }

.drop-retail {
  flex: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--accent-2);
}

/* Status chip over the shoe — frosted pill; date = mint, trending = red dot. */
.drop-chip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  /* Clean frosted glass — translucent dark with a soft blur of the photo behind,
     a faint light rim + top highlight. No colour pop; just a smooth glass chip. */
  background: rgba(14, 17, 22, 0.38);
  -webkit-backdrop-filter: blur(9px) saturate(125%);
  backdrop-filter: blur(9px) saturate(125%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  z-index: 2;
}
.drop-chip-date { color: rgba(255, 255, 255, 0.95); }   /* neutral, reads native on any image, no clarity issues */
/* Subtle shoe-colour personality lives HERE (not on the price): a faint tint of
   the shoe's dominant hue washes the date pill + edges its border, while the
   text stays clean white. Quiet and consistent — never a rainbow. */
/* (Date chip stays clean glass — no shoe-colour tint pop.) */
/* Price floats top-right of the image, opposite the date — declutters the foot.
   ONE consistent colour (clean white) across every card — no per-shoe rainbow —
   so it always fits and never distracts; a dark drop-shadow keeps it crisp and
   prominent on any photo. (The dynamic shoe colour lives subtly on the date
   chip instead.) */
.drop-price-float {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  letter-spacing: 0.005em;
  padding: 2px 7px;
  /* Soft radial scrim behind the digits — a gentle dark halo that fades to
     nothing (no hard pill) so the white price stays clearly visible even over a
     light shoe, without looking like a label. */
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 52%, transparent 76%);
  color: #F4F6FA;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 2px 7px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.drop-chip-hot::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 6px var(--danger);
  flex: none;
}

/* De-clutter (Nike-Launch): the big "NEXT DROP IN / SUBSCRIBE" banner is gone —
   the grid of release tiles IS the section. */
.drops-countdown { display: none !important; }

/* Countdown pill — flips through four color states as a drop approaches.
   "Live now" pulses softly to draw the eye away from older entries. */
.drop-countdown {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  white-space: nowrap;
}
.drop-countdown-live {
  color: var(--accent-ink);
  background: var(--accent-2);
  border-color: var(--accent-2);
  animation: drop-live-pulse 1.8s ease-out infinite;
}
@keyframes drop-live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(142, 151, 255, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(142, 151, 255, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(142, 151, 255, 0);    }
}
.drop-countdown-imminent {
  color: var(--danger);
  background: rgba(255, 68, 112, 0.10);
  border-color: rgba(255, 68, 112, 0.32);
}
.drop-countdown-soon {
  color: var(--highlight);
  background: rgba(255, 179, 71, 0.10);
  border-color: rgba(255, 179, 71, 0.32);
}
.drop-countdown-future {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--border);
}

@media (max-width: 1100px) { .drops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .drops-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Trending feed (landing/empty state) ─────────────────────────── */

.trending {
  margin: 0 0 20px;
  display: grid;
  gap: 12px;
}
.trending.hidden { display: none; }

.trending-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.trending-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.003em;
}

.trending-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1100px) { .trending-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .trending-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Image-first trending card. Hero takes a 16:10 slot, source chip +
   delta overlay the image, title + price tucked into a thin foot. */
.trending-card {
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.14s cubic-bezier(0.4,0,0.2,1), box-shadow 0.18s ease;
}
.trending-card:hover {
  border-color: rgba(142, 151, 255, 0.32);
  transform: translateY(-2px);
  box-shadow: none;
}
.trending-card:focus-visible {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(142, 151, 255, 0.18);
}
.trending-card[data-source="stockx"] { border-top: 2px solid rgba(142, 151, 255, 0.5); }
.trending-card[data-source="goat"]   { border-top: 2px solid rgba(255, 179, 71, 0.5); }
.trending-card[data-source="nike"]   { border-top: 2px solid rgba(255, 68, 112, 0.5); }

.trending-card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--img-stage);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.trending-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.5)) drop-shadow(0 20px 30px rgba(0,0,0,0.36));   /* soft contact + ambient shadow → shoe lifts off the stage, 3D */
  display: block;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
.trending-card:hover .trending-card-img { transform: scale(1.04); }

.trending-card-img-wrap:not(:has(.trending-card-img))::after,
.trending-card-img-failed::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none' stroke='%236CF5C8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'><path d='M4 30 L4 22 Q4 18 10 18 L18 18 Q26 18 33 22 L48 22 Q54 22 54 27 L54 31 L4 31 Z'/><path d='M11 18 L11 12 M16 18 L16 9 M22 19 L22 13'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
}

.trending-card-img-wrap .source-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.trending-delta-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.trending-delta-overlay .trending-delta {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.trending-card-foot {
  padding: 11px 14px 12px;
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--border);
  background: var(--bg);   /* label blends with the page — magazine look */
  min-width: 0;
}

.trending-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.trending-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trending-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.trending-delta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  display: inline-block;
}
.trending-delta-up   { color: var(--danger); background: rgba(255, 68, 112, 0.22);  border-color: rgba(255, 68, 112, 0.45); }
.trending-delta-down { color: var(--accent-2); background: rgba(142, 151, 255, 0.22); border-color: rgba(142, 151, 255, 0.45); }

@media (max-width: 720px) {
  .trending-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: block;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.14s cubic-bezier(0.4, 0.0, 0.2, 1),
    background 0.18s ease;
}

/* Source identity reads on the image edge (outlined ring) and the
   source-tag pill — no decorative left bar needed on the card itself. */

.card-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.card.has-image .card-row {
  grid-template-columns: 88px minmax(0, 1fr) auto;
}

.card .card-image,
.card .skeleton-thumb,
.card .card-image-placeholder {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.card .card-image {
  object-fit: cover;
  background:
    linear-gradient(135deg, rgba(142, 151, 255, 0.04), rgba(255, 179, 71, 0.03)) var(--bg-elevated);
  /* Real image fades in over the placeholder once it actually loads,
     so the cell never flashes empty during the swap. */
  transition: opacity 0.28s ease;
}
.card .card-image.card-image-loading { opacity: 0; }

/* While the real image hasn't loaded yet the placeholder sits in the
   same grid cell. Stacking them via grid-column overlap keeps layout
   stable instead of forcing the image to push the placeholder out. */
.card.has-image .card-row > .card-image,
.card.has-image .card-row > .card-image-placeholder {
  grid-column: 1;
  grid-row: 1;
}

/* Brand-source identity ring on the image. Subtle 1px inner outline
   in the source colour so even a thumbnail signals where the listing
   came from before the title is read. */
.card[data-source="stockx"] .card-image,
.card[data-source="stockx"] .card-image-placeholder {
  outline: 1px solid rgba(142, 151, 255, 0.42);
  outline-offset: -1px;
}
.card[data-source="goat"] .card-image,
.card[data-source="goat"] .card-image-placeholder {
  outline: 1px solid rgba(255, 179, 71, 0.42);
  outline-offset: -1px;
}
.card[data-source="nike"] .card-image,
.card[data-source="nike"] .card-image-placeholder {
  outline: 1px solid rgba(255, 68, 112, 0.42);
  outline-offset: -1px;
}

/* Empty-image stand-in — same footprint as a real image so the row
   grid stays steady. Quiet slate fill with a mint-tinted sneaker
   silhouette so missing data feels intentional, not broken. */
.card .card-image-placeholder {
  display: grid;
  place-items: center;
  color: var(--accent-2);
  background:
    radial-gradient(circle at 30% 30%, rgba(142, 151, 255, 0.08), transparent 60%),
    var(--bg-elevated);
  opacity: 0.85;
}
.card .card-image-placeholder svg {
  width: 56px;
  height: 28px;
  opacity: 0.7;
}
.card:hover .card-image-placeholder svg { opacity: 1; transition: opacity 0.16s ease; }

.skeleton-thumb {
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--panel-2) 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.skeleton-price-loading {
  width: 80px;
  height: 26px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--panel-2) 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* Generic shimmer-line primitives for skeleton cards. Three widths so a
   single skeleton card can fake a title + description + meta row. */
.skeleton-line {
  height: 10px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--panel-2) 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  margin-bottom: 7px;
}
.skeleton-line-sm { width: 56px; height: 8px; margin-bottom: 9px; }
.skeleton-line-md { width: 62%;  height: 10px; }
.skeleton-line-lg { width: 88%;  height: 12px; }

/* Full-card skeleton — same .card footprint as a real result so the
   grid doesn't reflow when real cards land. Hover-effect disabled to
   avoid the impression that the placeholder is interactive. */
.card-skeleton {
  pointer-events: none;
  opacity: 0.92;
}
.card-skeleton:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.card:hover {
  border-color: var(--accent-2);
  background: var(--panel);
  transform: none;
  box-shadow: inset 0 0 0 1px var(--accent-2);
}

.card .title {
  text-decoration: none;
  letter-spacing: -0.012em;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  font-weight: 500;
  font-size: 15px;
}
.card .title:hover {
  color: var(--accent-2);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  font-feature-settings: "tnum" 1;
}

/* Unified chip system. Every pill (source / stock / delta) shares the
   same height, family, and rhythm — only colour and content differ.
   This is what makes the card-meta strip read as one row instead of
   three competing labels. */
.stock-pill,
.delta-pill {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.stock-pill.stock-ok  { background: rgba(142, 151, 255, 0.10); color: var(--accent-2);    border-color: rgba(142, 151, 255, 0.28); }
.stock-pill.stock-low { background: rgba(255, 179, 71, 0.10);  color: var(--highlight); border-color: rgba(255, 179, 71, 0.28); }
.stock-pill.stock-out { background: rgba(255, 68, 112, 0.10);  color: var(--danger);    border-color: rgba(255, 68, 112, 0.28); }

.delta-pill.delta-up   { background: rgba(255, 68, 112, 0.10);  color: var(--danger);  border-color: rgba(255, 68, 112, 0.30); }
.delta-pill.delta-down { background: rgba(142, 151, 255, 0.10); color: var(--accent-2);  border-color: rgba(142, 151, 255, 0.30); }

/* Cross-marketplace arbitrage chip — visually distinct from the
   stock/delta pills because it represents *action* (one tap to the
   cheaper listing) rather than info. Bigger weight, deeper colour,
   a glyph, and a small drop-shadow give it the "deal alert" feel. */
.arb-pill {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px 4px 8px;
  border-radius: var(--radius-xs);
  background: linear-gradient(180deg, rgba(142, 151, 255, 0.18), rgba(142, 151, 255, 0.10));
  color: var(--accent-2);
  border: 1px solid rgba(142, 151, 255, 0.42);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(142, 151, 255, 0.12);
}
.arb-pill:hover {
  filter: brightness(1.08);
  border-color: rgba(142, 151, 255, 0.7);
  box-shadow: 0 4px 12px rgba(142, 151, 255, 0.22);
}
.arb-pill-goat {
  background: linear-gradient(180deg, rgba(255, 179, 71, 0.20), rgba(255, 179, 71, 0.10));
  color: var(--accent-amber);
  border-color: rgba(255, 179, 71, 0.45);
  box-shadow: 0 2px 8px rgba(255, 179, 71, 0.12);
}
.arb-pill-goat:hover { box-shadow: 0 4px 12px rgba(255, 179, 71, 0.22); border-color: rgba(255, 179, 71, 0.7); }

.arb-pill-nike {
  background: linear-gradient(180deg, rgba(255, 68, 112, 0.16), rgba(255, 68, 112, 0.08));
  color: var(--danger);
  border-color: rgba(255, 68, 112, 0.42);
  box-shadow: 0 2px 8px rgba(255, 68, 112, 0.10);
}
.arb-pill-nike:hover { box-shadow: 0 4px 12px rgba(255, 68, 112, 0.22); border-color: rgba(255, 68, 112, 0.7); }

.arb-glyph {
  font-size: 11px;
  line-height: 1;
}

/* ── Watchlist: card action button + sidebar trigger + modal rows ── */

.card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Compare toggle — shares the watch-toggle visual vocabulary so the
   icon row reads as one set of small icon buttons. Active state goes
   amber (not mint — keeps "saved to watchlist" and "in compare" easy
   to tell apart at a glance). */
.compare-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.compare-toggle:hover {
  color: var(--accent-amber);
  border-color: var(--accent-amber);
  background: transparent;
}
.compare-toggle.compare-on {
  color: var(--accent-amber);
  border-color: var(--accent-amber);
  background: rgba(255, 179, 71, 0.08);
}

.watch-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.watch-toggle:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
  background: transparent;
}
.watch-toggle.watch-on {
  color: var(--accent-2);
  border-color: var(--accent-2);
}
.watch-toggle.watch-on svg path { fill: currentColor; }

/* Tier meter — small sidebar card showing the user's current daily
   Brief allowance with a contextual upgrade CTA. Anon gets the
   loudest treatment because it's the most-conversion-leverage slot;
   paid tiers get a quieter version. Hidden at top tier. */
.tier-meter {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tier-meter[hidden] { display: none; }
.tier-meter[data-tier="anon"] {
  border-color: rgba(142, 151, 255, 0.28);
  background: linear-gradient(180deg, rgba(142, 151, 255, 0.06), var(--bg-elevated) 80%);
}

.tier-meter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tier-meter-label {
  color: var(--muted);
  font-weight: 700;
}
.tier-meter[data-tier="anon"] .tier-meter-label { color: var(--accent-2); }

.tier-meter-value {
  color: var(--fg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11px;
}

.tier-meter-bar {
  position: relative;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.tier-meter-bar[hidden] { display: none; }
.tier-meter-bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-2);
  box-shadow: 0 0 6px rgba(142, 151, 255, 0.4);
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), background 0.16s ease, box-shadow 0.16s ease;
}
.tier-meter-bar[data-state="low"]   .tier-meter-bar-fill { background: var(--highlight); box-shadow: 0 0 6px rgba(255, 179, 71, 0.4); }
.tier-meter-bar[data-state="empty"] .tier-meter-bar-fill { background: var(--danger);    box-shadow: 0 0 6px rgba(255, 68, 112, 0.4); }

.tier-meter-cta {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-soft);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.tier-meter-cta:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: transparent;
}
.tier-meter[data-tier="anon"] .tier-meter-cta {
  background: var(--gold);
  color: var(--accent-ink);
  border-color: var(--gold);
}
.tier-meter[data-tier="anon"] .tier-meter-cta:hover {
  background: #84F8D2;
  border-color: #84F8D2;
  color: var(--accent-ink);
}

.sidebar-watch {
  width: 100%;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--fg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  text-align: left;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.sidebar-watch:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: var(--bg-elevated);
}
.sidebar-watch[hidden] { display: none; }

.sidebar-watch-label {
  color: var(--fg);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.sidebar-watch-count {
  background: var(--accent-2);
  color: var(--accent-ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  min-width: 18px;
  text-align: center;
}
.sidebar-watch-count[hidden] { display: none; }

/* Watchlist modal — reuses auth-modal chrome, slightly wider for rows. */
.watchlist-modal .watchlist-card { width: min(640px, 100%); }

/* Tabs — Watchlist | Inside Scoops share the same modal grid. */
.watchlist-tabs {
  display: flex;
  gap: 4px;
  margin: 2px 0 14px;
  border-bottom: 1px solid var(--card-edge);
}
.watchlist-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  margin-bottom: -1px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.watchlist-tab:hover { color: var(--fg-soft); }
.watchlist-tab.is-active { color: var(--accent-2); border-bottom-color: var(--accent-2); }

/* Inside Scoop rows — reuse the watch-row shell; the revealed resale range is
   the headline (user paid for it). */
.scoop-row .scoop-thumb { background: var(--img-stage, #000); }
.scoop-range {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.scoop-med, .scoop-sizes, .scoop-paid { font-size: 11px; color: var(--muted); }
.scoop-paid { margin-left: auto; }

.watchlist-grid {
  display: grid;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.watchlist-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px;
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* Designed watchlist empty state — replaces the plain dashed-border
   sentence with a small landing card: glyph, headline, sub, and either
   a sign-in CTA or a three-step micro-walkthrough. */
.watchlist-empty-card {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  padding: 30px 22px 26px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, rgba(142, 151, 255, 0.05), transparent 60%),
    var(--panel);
}
.watchlist-empty-glyph {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(142, 151, 255, 0.08);
  color: var(--accent-2);
  border: 1px solid rgba(142, 151, 255, 0.32);
  margin-bottom: 4px;
}
.watchlist-empty-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--fg);
}
.watchlist-empty-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 320px;
}
.watchlist-empty-cta {
  margin-top: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--radius-xs);
  background: rgba(244, 194, 100, 0.12);
  color: var(--gold);
  border: 1px solid rgba(244, 194, 100, 0.45);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.watchlist-empty-cta:hover {
  background: rgba(244, 194, 100, 0.2);
  border-color: rgba(244, 194, 100, 0.7);
  transform: translateY(-1px);
}
.watchlist-empty-steps {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 7px;
  text-align: left;
  counter-reset: step;
  max-width: 340px;
}
.watchlist-empty-steps li {
  position: relative;
  padding: 8px 12px 8px 38px;
  font-size: 13px;
  color: var(--fg-soft);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  counter-increment: step;
  line-height: 1.4;
}
.watchlist-empty-steps li::before {
  content: counter(step);
  position: absolute;
  left: 8px;
  top: 7px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  background: rgba(142, 151, 255, 0.10);
  color: var(--accent-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(142, 151, 255, 0.28);
}

.watch-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.watch-row:hover { border-color: var(--border-strong); }
.watch-row[data-source="stockx"] { box-shadow: inset 0 0 0 1px rgba(142, 151, 255, 0.20); }
.watch-row[data-source="goat"]   { box-shadow: inset 0 0 0 1px rgba(255, 179, 71, 0.20); }
.watch-row[data-source="nike"]   { box-shadow: inset 0 0 0 1px rgba(255, 68, 112, 0.20); }

.watch-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--panel);
  display: block;
}
.watch-thumb img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  display: block;
}
.watch-thumb-placeholder {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(142, 151, 255, 0.04), rgba(255, 179, 71, 0.03)) var(--panel);
}

.watch-body { display: grid; gap: 6px; min-width: 0; }

.watch-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.watch-title:hover { color: var(--accent-2); }

.watch-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.watch-current {
  color: var(--fg);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.watch-target {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-transform: lowercase;
  letter-spacing: 0;
  font-weight: 500;
}

.watch-status {
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
}
.watch-status-hit      { color: var(--accent-2);    background: rgba(142, 151, 255, 0.12); border-color: rgba(142, 151, 255, 0.32); }
.watch-status-above    { color: var(--muted);     background: rgba(139, 149, 168, 0.10); border-color: var(--border); }
.watch-status-watching { color: var(--fg-soft);   background: rgba(139, 149, 168, 0.10); border-color: var(--border); }
.watch-status-stale    { color: var(--accent-amber); background: rgba(255, 179, 71, 0.10); border-color: rgba(255, 179, 71, 0.30); }

.watch-remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  box-shadow: none;
}
.watch-remove:hover { color: var(--danger); background: transparent; }
.delta-pill::before {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1;
}
.delta-pill.delta-up::before   { content: "▲"; }
.delta-pill.delta-down::before { content: "▼"; }

/* ── Buy banner ───────────────────────────────────────────────────── */

.buy-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--panel);
  position: relative;
  overflow: hidden;
}

.buy-banner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--muted);
}

.buy-banner.verdict-strong { background: linear-gradient(95deg, rgba(108, 245, 200, 0.10) 0%, var(--panel) 70%); }
.buy-banner.verdict-strong::before { background: var(--accent); box-shadow: 0 0 12px var(--accent-soft); }
.buy-banner.verdict-buy    { background: linear-gradient(95deg, rgba(108, 245, 200, 0.06) 0%, var(--panel) 70%); }
.buy-banner.verdict-buy::before    { background: var(--accent); }
.buy-banner.verdict-hold   { background: linear-gradient(95deg, rgba(255, 179, 71, 0.08) 0%, var(--panel) 70%); }
.buy-banner.verdict-hold::before   { background: var(--highlight); }
.buy-banner.verdict-wait   { background: linear-gradient(95deg, rgba(255, 68, 112, 0.08) 0%, var(--panel) 70%); }
.buy-banner.verdict-wait::before   { background: var(--danger); }
.buy-banner.verdict-skip   { background: linear-gradient(95deg, rgba(255, 68, 112, 0.14) 0%, var(--panel) 70%); }
.buy-banner.verdict-skip::before   { background: var(--danger); box-shadow: 0 0 12px var(--danger-soft); }

.verdict-mark {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.verdict-strong .verdict-icon,
.verdict-buy    .verdict-icon { color: var(--accent); }
.verdict-hold   .verdict-icon { color: var(--highlight); }
.verdict-wait   .verdict-icon,
.verdict-skip   .verdict-icon { color: var(--danger); }

.verdict-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.verdict-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}

.verdict-reason {
  font-size: 14px;
  color: var(--fg-soft);
}

.verdict-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  margin-top: 2px;
}

/* Snipe action — one-tap link straight to the cheapest live source for
   the SKU. Only shows on STRONG_BUY / BUY verdicts. STRONG_BUY gets
   the full mint-fill button; BUY gets a quieter mint-tinted variant. */
.snipe-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 11px 16px;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  width: max-content;
  max-width: 100%;
  transition: background 0.14s ease, transform 0.12s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.snipe-verb { white-space: nowrap; }
.snipe-strong {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 20px rgba(108, 245, 200, 0.22);
}
.snipe-strong:hover {
  background: #84F8D2;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(108, 245, 200, 0.30);
}
.snipe-buy {
  background: rgba(108, 245, 200, 0.14);
  color: var(--accent);
  border: 1px solid rgba(108, 245, 200, 0.40);
}
.snipe-buy:hover {
  background: rgba(108, 245, 200, 0.22);
  border-color: rgba(108, 245, 200, 0.60);
  transform: translateY(-1px);
}
.snipe-price {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.snipe-arrow {
  font-size: 14px;
  line-height: 1;
}

.verdict-helper {
  font-size: 12px;
  color: var(--muted);
  max-width: 180px;
  text-align: right;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .buy-banner { grid-template-columns: auto 1fr; }
  .verdict-helper { display: none; }
}

/* ── Lightbox ─────────────────────────────────────────────────────── */

.hero-image-wrap.clickable { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(7, 9, 12, 0.96);
  backdrop-filter: blur(8px);
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 12px;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.lightbox.open { opacity: 1; }

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  /* Sits above the stage — the 1fr stage row fills the top of the grid
     and, being later in the DOM with auto z-index, otherwise paints
     over this button and swallows the close click. */
  z-index: 10;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.lightbox-close:hover {
  background: var(--panel);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  cursor: grab;
}

.lightbox-stage.dragging { cursor: grabbing; }

/* Frame-cycle spin viewer retired in favour of real AI 3D via
   model-viewer in the detail-card. Lightbox is now plain image zoom. */

.lightbox-img {
  max-width: 90vw;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.12s ease;
  will-change: transform, filter;
  pointer-events: auto;
}

.lightbox-thumbs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-height: 80px;
  overflow-y: auto;
}

.lightbox-thumb {
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0;
  overflow: hidden;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s;
}

.lightbox-thumb:hover { border-color: var(--border-strong); }

.lightbox-thumb.active {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px var(--accent-2-soft);
}

.lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--fg);
}

.lb-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lb-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.lb-btn:hover {
  background: var(--panel);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.lb-scale {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--accent-2);
  min-width: 48px;
  text-align: center;
}

.lb-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.lb-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted);
}

.lb-filters input[type="range"] {
  width: 100%;
  accent-color: var(--accent-2);
}

.lb-filters output {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--fg-soft);
  align-self: flex-end;
}

@media (max-width: 720px) {
  .lightbox-controls { grid-template-columns: 1fr; }
  .lb-filters { grid-template-columns: 1fr 1fr; }
}

.card .source-tag {
  font-family: var(--label-font);
  font-weight: var(--label-weight);
  font-size: var(--label-size-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  padding: 3px 8px 3px 8px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.18);
  color: var(--fg-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.card .source-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  opacity: 0.85;
}

.card .source-tag.stockx       { color: var(--stockx);       border-color: rgba(142, 151, 255, 0.32); }
.card .source-tag.goat         { color: var(--goat);         border-color: rgba(255, 179, 71, 0.32); }
.card .source-tag.nike         { color: var(--nike);         border-color: rgba(255, 68, 112, 0.32); }
.card .source-tag.ebay         { color: var(--ebay);         border-color: rgba(76, 141, 255, 0.34); }
.card .source-tag.flightclub   { color: var(--flightclub);   border-color: rgba(176, 124, 246, 0.34); }
.card .source-tag.stadiumgoods { color: var(--stadiumgoods); border-color: rgba(154, 167, 181, 0.36); }
.card .source-tag.kickscrew    { color: var(--kickscrew);    border-color: rgba(244, 114, 182, 0.34); }

/* Freshness pill — "12m ago" — same monospace pill rhythm as the
   source-tag so the meta row reads as one set, not two competing
   types. Sits to the right of the source chip after enrich completes. */
.card .fresh-pill {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* "Live data restricted" — when the source's bot wall blocks our scrape.
   Reframed from an error into a premium "verified live at the source"
   state: a faint mint wash + accent edge so the card reads intentional
   and trustworthy, not broken. */
.card.is-protected {
  background:
    linear-gradient(180deg, rgba(142, 151, 255, 0.05), rgba(142, 151, 255, 0) 60%),
    var(--bg-elevated);
  box-shadow: inset 0 0 0 1px rgba(142, 151, 255, 0.18);
}
/* A protected tile has no price to show, so its overlay (shield badge +
   "view live price" CTA) IS the card's value — keep it visible at rest
   instead of hover-gated like a normal tile. */
.card.is-protected .card-tile-overlay { opacity: 1; }

/* Shield badge over the photo — mint, frosted, sits beside the source tag. */
.protection-badge {
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(5, 6, 8, 0.66);
  color: var(--accent-2);
  border: 1px solid rgba(142, 151, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  width: max-content;
}
.protection-badge .shield-icon { flex-shrink: 0; }

/* Locked-price CTA in the price slot — where the price normally sits.
   A clean frosted chip that invites the click out to the live listing
   instead of leaving a dead skeleton. */
.price-locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  color: var(--accent-ink);
  background: var(--gold);
  border: 1px solid var(--gold);
  text-decoration: none;
  white-space: nowrap;
  width: max-content;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.14s ease;
}
.price-locked .lock-icon,
.price-locked svg { flex-shrink: 0; }
.price-locked:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(244, 194, 100, 0.22);
}

/* Rate-limited tile — out of live-price pulls for the tier. Same premium
   structure as a protected tile, but amber = "upgrade to unlock". */
.card.is-limited {
  background:
    linear-gradient(180deg, rgba(255, 179, 71, 0.06), rgba(255, 179, 71, 0) 60%),
    var(--bg-elevated);
  box-shadow: inset 0 0 0 1px rgba(255, 179, 71, 0.22);
}
.card.is-limited .card-tile-overlay { opacity: 1; }
.limit-badge {
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: rgba(5, 6, 8, 0.66);
  color: var(--accent-amber);
  border: 1px solid rgba(255, 179, 71, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  width: max-content;
}
.limit-badge svg { flex-shrink: 0; }
/* Amber upgrade variant of the locked-price CTA. */
.price-locked-upgrade {
  color: #1a1205;
  background: var(--accent-amber);
  border-color: var(--accent-amber);
}
.price-locked-upgrade:hover {
  box-shadow: 0 6px 16px rgba(255, 179, 71, 0.3);
}

.card-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.card .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--fg);
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card .desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.5;
  letter-spacing: -0.002em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.card .arrow {
  color: var(--muted);
  font-size: 18px;
}

.chevron {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-soft);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.18s, border-color 0.12s, background 0.12s;
}

.chevron:hover {
  border-color: var(--accent-2);
  background: var(--accent-2-soft);
}

.card.expanded .chevron {
  transform: rotate(180deg);
}

.details-panel {
  display: grid;
  gap: 12px;
  /* Full-width: the selected detail spans the whole results column (the card,
     sizes grid, trend, and brief all fill it) so it reads as the headline. The
     hero card's own grid distributes image + data across that width. */
  width: 100%;
  animation: panelIn 0.22s ease;
  transform-origin: top;
}

.details-panel[hidden] { display: none; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Expanded cards no longer take a colored left border — relies on the
   source-tag pill + the card's natural border for identity. */

/* Hero gallery */
.hero-block {
  display: grid;
  gap: 8px;
}

.hero-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 460px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* When the hero <img> errors out, the onerror handler tags the wrap
   with .hero-image-wrap-failed. We paint a sneaker silhouette via a
   ::after layer so the cell never reads as a broken image. */
.hero-image-wrap-failed::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(142, 151, 255, 0.06), transparent 60%),
    var(--bg-sunken);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none' stroke='%236CF5C8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'><path d='M4 30 L4 22 Q4 18 10 18 L18 18 Q26 18 33 22 L48 22 Q54 22 54 27 L54 31 L4 31 Z'/><path d='M11 18 L11 12 M16 18 L16 9 M22 19 L22 13'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 38% auto;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.18s ease;
}

.hero-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.hero-thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-sunken);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s;
}

.hero-thumb:hover { border-color: var(--accent-2); }

.hero-thumb.active {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px var(--accent-2-soft);
}

.hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Chip row */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.info-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  color: var(--fg);
}

.info-chip .chip-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}

.info-chip .chip-value {
  font-weight: 500;
}

.info-chip.kind-brand      { border-color: rgba(142, 151, 255, 0.3); background: var(--accent-2-soft);    color: var(--accent-2); }
.info-chip.kind-silhouette { border-color: rgba(255, 179, 71, 0.3);  background: var(--highlight-soft); color: var(--highlight); }
.info-chip.kind-colorway   { border-color: rgba(255, 68, 112, 0.25); background: var(--danger-soft);    color: var(--danger); }
.info-chip.kind-sku        { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* Big price comparison */
.price-block {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}

.price-block .price-cell {
  flex: 1 1 140px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.price-block .price-cell strong {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.price-block .price-cell.retail strong { color: var(--muted); }
.price-block .price-cell.current strong { color: var(--fg); }

.price-arrow {
  align-self: center;
  font-size: 24px;
  color: var(--muted);
  padding: 0 4px;
}

.premium-chip {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}

.premium-chip.premium { background: var(--highlight-soft); color: var(--highlight); }
.premium-chip.hot     { background: var(--danger-soft);    color: var(--danger);    }
.premium-chip.below   { background: var(--accent-2-soft);    color: var(--accent-2);    }

.price-side-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.price-side-row .price-cell.muted {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.price-side-row .price-cell.muted strong {
  font-size: 15px;
  font-weight: 500;
}

.price-cell .label,
.fact .label,
.sizes-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.price-cell strong {
  font-size: 16px;
  font-weight: 600;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 18px;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  min-width: 0;
}

.fact .value {
  color: var(--fg);
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.sizes-label {
  margin-bottom: 6px;
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
}

.size-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--fg-soft);
  cursor: default;
  transition: border-color 0.12s, color 0.12s;
}

.size-chip:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.story {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-soft);
}

.story p { margin: 0; }

/* ── Composite detail card — image left, data rail right ────────── */

.detail-card {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 16px;
  background: var(--bg-sunken);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-xl);
  box-shadow: none;
  margin-bottom: 0;
}
.detail-card.detail-card-noimg { grid-template-columns: minmax(0, 1fr); }

.detail-hero {
  display: grid;
  gap: 7px;
  min-width: 0;
  width: 188px;
}
.detail-hero-img-wrap {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  /* Dark stage so the background-removed cutout floats like the landing tiles
     (was a cover-cropped box — that clipped the shoe and read as a flat photo). */
  background: var(--img-stage);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.detail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;                /* shoe floats above the animated mesh */
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}
.detail-hero-img-wrap:hover .detail-hero-img { transform: scale(1.04); }

/* Animated, color-matched mesh behind the product — a soft flowing blend of the
   shoe's own extracted hues (--shoe-tint / -2 / -3, set by scoutShoeTint), in
   the spirit of a paper-design WebGL MeshGradient but as a lightweight CSS
   "shader." Two heavily-blurred layers counter-drift so the colours continuously
   recombine instead of reading as static spotlights. Kept low-opacity + slow so
   it amplifies the product without competing with it. The -2/-3 vars fall back
   to the primary tint when the shoe yields fewer than three distinct colours. */
.detail-hero-img-wrap::before,
.detail-hero-img-wrap::after {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  filter: blur(30px) saturate(120%);
  will-change: transform;
  pointer-events: none;
}
/* Layer A — the broader wash, drifting one way. */
.detail-hero-img-wrap::before {
  background:
    radial-gradient(44% 48% at 30% 28%, rgba(var(--shoe-tint, 108, 245, 200), 0.24), transparent 72%),
    radial-gradient(42% 46% at 74% 30%, rgba(var(--shoe-tint-2, var(--shoe-tint, 108, 245, 200)), 0.20), transparent 72%),
    radial-gradient(52% 54% at 60% 78%, rgba(var(--shoe-tint-3, var(--shoe-tint, 108, 245, 200)), 0.22), transparent 74%);
  opacity: 0.9;
  animation: meshDriftA 32s ease-in-out infinite alternate;
}
/* Layer B — fewer, offset blobs drifting the other way; the overlap with A is
   what gives the flowing mesh recombination. */
.detail-hero-img-wrap::after {
  background:
    radial-gradient(46% 50% at 22% 70%, rgba(var(--shoe-tint-2, var(--shoe-tint, 108, 245, 200)), 0.18), transparent 74%),
    radial-gradient(40% 44% at 80% 64%, rgba(var(--shoe-tint, 108, 245, 200), 0.16), transparent 72%),
    radial-gradient(38% 40% at 52% 18%, rgba(var(--shoe-tint-3, var(--shoe-tint, 108, 245, 200)), 0.16), transparent 70%);
  opacity: 0.75;
  animation: meshDriftB 41s ease-in-out infinite alternate;
}
@keyframes meshDriftA {
  0%   { transform: translate3d(-2%, 1%, 0) scale(1.04) rotate(-1.5deg); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.12) rotate(1.5deg); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.06) rotate(-1deg); }
}
@keyframes meshDriftB {
  0%   { transform: translate3d(2%, -1%, 0) scale(1.1) rotate(2deg); }
  50%  { transform: translate3d(-2%, 2%, 0) scale(1.02) rotate(-1.5deg); }
  100% { transform: translate3d(1%, -2%, 0) scale(1.08) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .detail-hero-img-wrap::before,
  .detail-hero-img-wrap::after { animation: none; }
}
/* Broken image: drop the mesh entirely and show the placeholder icon (the mesh
   ::after is reused here, so reset its blur/animation/inset). */
.detail-hero-img-failed::before { display: none; }
.detail-hero-img-failed::after {
  content: "";
  position: absolute;
  inset: 0;
  filter: none;
  animation: none;
  opacity: 1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36' fill='none' stroke='%236CF5C8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'><path d='M4 30 L4 22 Q4 18 10 18 L18 18 Q26 18 33 22 L48 22 Q54 22 54 27 L54 31 L4 31 Z'/><path d='M11 18 L11 12 M16 18 L16 9 M22 19 L22 13'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% auto;
}
.detail-hero-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  /* Respect the hero column width so extra thumbs scroll instead of
     pushing the whole detail card wider (the overflow bug). */
  min-width: 0;
  max-width: 100%;
  scrollbar-width: thin;
}
.detail-hero-thumbs .hero-thumb {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--img-stage);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.14s ease, border-color 0.14s ease;
}
.detail-hero-thumbs .hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-hero-thumbs .hero-thumb:hover { opacity: 0.85; }
.detail-hero-thumbs .hero-thumb.active { opacity: 1; border-color: var(--accent-2); }

.detail-data {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
}

.detail-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.detail-meta-sep { color: var(--border-strong); }
.detail-meta-src { color: var(--fg-soft); }
.detail-meta-src-stockx { color: var(--stockx); }
.detail-meta-src-goat   { color: var(--goat); }
.detail-meta-src-nike   { color: var(--nike); }

.detail-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--fg);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.12s ease;
}
.detail-title-link:hover {
  color: var(--accent-2);
}
.detail-title-ext {
  margin-left: 6px;
  vertical-align: baseline;
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.detail-title-link:hover .detail-title-ext {
  opacity: 1;
}

.detail-colorway {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-top: -3px;
}

.detail-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-top: 4px;
  border-top: 1px solid var(--border-strong);
  margin-top: 2px;
}
.detail-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.detail-price-retail {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.detail-price-retail::before {
  content: "";
  display: inline-block;
  width: 1px; height: 11px;
  margin-right: 9px;
  vertical-align: -1px;
  background: var(--border-strong);
}
.detail-premium {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.detail-premium.premium-below { color: var(--accent-2);    background: rgba(142, 151, 255, 0.10); border-color: rgba(142, 151, 255, 0.32); }
.detail-premium.premium-up    { color: var(--highlight); background: rgba(255, 179, 71, 0.10);  border-color: rgba(255, 179, 71, 0.32); }
.detail-premium.premium-hot   { color: var(--danger);    background: rgba(255, 68, 112, 0.10);  border-color: rgba(255, 68, 112, 0.32); }

/* AUTHENTIC badge — the third thing a sneakerhead checks. The platform
   name doubles as the trust signal (StockX / GOAT / Nike all authenticate
   every order). Reads as a verified-checkmark indicator, not a chip. */
/* A quiet trust line, NOT a chip — a colored check + muted text, so it reassures
   without competing with the price or the CTA for attention. */
.detail-auth {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: -2px;
  color: var(--fg-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  width: fit-content;
  cursor: help;
}
.detail-auth strong { color: var(--fg); font-weight: 600; }
.detail-auth svg { flex-shrink: 0; color: var(--accent-2); }
/* Only the checkmark carries the source color — a subtle brand cue, not a wash. */
.detail-auth-stockx       svg { color: var(--stockx); }
.detail-auth-goat         svg { color: var(--goat); }
.detail-auth-nike         svg { color: var(--nike); }
.detail-auth-ebay         svg { color: var(--ebay); }
.detail-auth-flightclub   svg { color: var(--flightclub); }
.detail-auth-stadiumgoods svg { color: var(--stadiumgoods); }
.detail-auth-kickscrew    svg { color: var(--kickscrew); }

.detail-verdict-row { margin-top: 2px; }
/* Hold/Wait verdicts (no CTA) surface as a compact pill anchored to the end of
   the price line — signal without a second loud button. */
.detail-price-row .detail-verdict { margin-left: auto; align-self: center; }

/* VIEW IN 3D — fires our self-hosted Stable Fast 3D pipeline and
   swaps the static photo for a live model-viewer mesh. Lives just
   above the snipe CTA in the data rail. */
/* One action row: the primary Snipe CTA + the quiet 3D / Share chips on a single
   line, so the rail ends with a clean, compact band instead of stacked buttons. */
.detail-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.detail-cta-row .snipe-action { margin-top: 0; margin-right: 2px; }
.detail-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Tertiary, quiet — neutral ghost chips so the green CTA above stays the only
   thing pulling the eye. They light up to mint only on hover. */
.detail-3d-btn,
.detail-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  width: fit-content;
  background: var(--bg-elevated);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-md);
  color: var(--fg-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.detail-share-btn:hover,
.detail-3d-btn:hover {
  background: var(--bg-sunken);
  border-color: var(--accent-2);
  color: var(--accent-2);
  transform: translateY(-1px);
}
.detail-3d-btn:disabled { cursor: progress; opacity: 0.7; transform: none; }
.detail-3d-btn.loading svg {
  animation: detail-3d-spin 1.2s linear infinite;
}
.detail-3d-btn.active {
  background: var(--accent-2);
  color: var(--accent-ink);
  border-color: var(--accent-2);
}
@keyframes detail-3d-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* model-viewer container — replaces the static hero image in the
   detail-card. Same 180×180 footprint so the panel layout doesn't
   reflow when 3D toggles in. */
.detail-hero-3d {
  width: 180px;
  height: 180px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-2);
  overflow: hidden;
  position: relative;
}
.detail-3d-viewer {
  width: 100%;
  height: 100%;
  display: block;
  --poster-color: transparent;
}
/* Expand-to-modal button — sits on top of the inline model-viewer,
   outside its shadow DOM so clicks aren't captured by the orbit
   camera. Lights mint on hover to read as the primary 3D affordance. */
.detail-3d-expand {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 6, 8, 0.7);
  color: var(--fg-soft);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 3;
  transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.detail-3d-expand:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
  background: rgba(5, 6, 8, 0.85);
}
@media (max-width: 720px) {
  .detail-hero-3d { width: 100%; height: auto; aspect-ratio: 1; max-width: 280px; margin: 0 auto; }
}

/* ── Expanded 3D mesh modal ───────────────────────────────────── */

.mesh-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(5, 6, 8, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mesh-modal.open { opacity: 1; }
.mesh-modal-stage {
  width: min(88vw, 1200px);
  height: min(82vh, 820px);
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-2);
  overflow: hidden;
}
.mesh-modal-viewer {
  width: 100%;
  height: 100%;
  display: block;
  --poster-color: transparent;
  --progress-bar-color: var(--accent-2);
}
.mesh-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 6, 8, 0.78);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.mesh-modal-close:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}
@media (max-width: 720px) {
  .mesh-modal-stage {
    width: 96vw;
    height: 80vh;
  }
}
.detail-verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 5px 10px;
  border: 1px solid transparent;
  cursor: help;
}
.detail-verdict-icon { font-size: 11px; line-height: 1; }
.detail-verdict.verdict-strong { color: var(--accent-ink); background: var(--accent);    border-color: var(--accent); }
.detail-verdict.verdict-buy    { color: var(--accent);    background: rgba(108, 245, 200, 0.10); border-color: rgba(108, 245, 200, 0.45); }
.detail-verdict.verdict-hold   { color: var(--highlight); background: rgba(255, 179, 71, 0.10);  border-color: rgba(255, 179, 71, 0.45); }
.detail-verdict.verdict-wait   { color: var(--danger);    background: rgba(255, 68, 112, 0.10);  border-color: rgba(255, 68, 112, 0.45); }
.detail-verdict.verdict-skip   { color: var(--danger);    background: rgba(255, 68, 112, 0.16);  border-color: rgba(255, 68, 112, 0.5); }

.detail-supply {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 14px;
  margin: 0 0 10px;
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  font-variant-numeric: tabular-nums;
}
.detail-supply em {
  font-style: normal;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  margin-right: 2px;
}
.detail-supply-sep { color: var(--border-strong); }

/* Snipe action sitting inside the detail card. Compact, bottom-aligned. */
.detail-data .snipe-action {
  align-self: start;
  margin-top: 4px;
}

/* Sizes — slim band with a clean display-font label. */
.sizes-band {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.sizes-band-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--fg-soft);
}
/* Gender/unit qualifier on the Sizes band — "· US Men's". */
.sizes-band-type { color: var(--muted); font-weight: 500; }

@media (max-width: 720px) {
  .detail-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  .detail-hero { width: auto; }
  .detail-hero-img-wrap { width: 100%; height: auto; aspect-ratio: 1; max-width: 280px; margin: 0 auto; }
  .detail-title { font-size: 16px; }
  .detail-price { font-size: 24px; }
}

/* Old large verdict banner is no longer rendered — but bullet-proof
   the page in case any cached client still has the old markup. */
.buy-banner { display: none !important; }

/* ── Brief toggle — collapsed by default, expand on demand ────── */
.brief-toggle { margin-top: 10px; }
.brief-toggle-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.brief-toggle-summary::-webkit-details-marker { display: none; }
.brief-toggle-summary:hover {
  border-color: var(--accent-2);
  background: var(--panel);
}
.brief-toggle-summary .section-marker {
  color: var(--accent-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.brief-toggle-summary .section-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}
.brief-toggle-hint {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted);
}
.brief-toggle[open] > .brief-toggle-summary .brief-toggle-hint::before { content: "− "; }
.brief-toggle:not([open]) > .brief-toggle-summary .brief-toggle-hint::before { content: "+ "; }
.brief-toggle[open] > .brief-toggle-summary { border-bottom: 0; }
.brief-toggle .deep-dive { margin-top: 0; border-top: 0; }

/* ── Quick Read ────────────────────────────────────────────────── */
.scout-take {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

.scout-take-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.scout-take-header .section-marker { color: var(--accent-2); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.scout-take-header .section-title  { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--fg); }

.scout-take-body {
  font-size: 14px;
  line-height: 1.55;
}

.scout-take-body strong {
  color: var(--accent-2);
  font-weight: 600;
}

.scout-take-body code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--accent-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

.scout-take[data-state="loading"] .scout-take-body {
  color: var(--muted);
  font-style: italic;
}

.scout-take[data-state="error"] .scout-take-body {
  color: var(--danger);
  font-size: 12px;
}

/* Buyer's Brief */
.deep-dive {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 14px 18px;
  display: grid;
  gap: 10px;
}

.deep-dive-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.deep-dive-header .section-marker { color: var(--accent-2); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.deep-dive-header .section-title  { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--fg); }

.deep-dive .badge.brief {
  background: var(--highlight-soft);
  color: var(--highlight);
  border-color: rgba(255, 179, 71, 0.3);
}

.deep-dive-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
}

.deep-dive[data-state="loading"] .deep-dive-body {
  color: var(--muted);
  font-style: italic;
}

.deep-dive[data-state="error"] .deep-dive-body {
  color: var(--danger);
  font-size: 12px;
}

.deep-dive-body {
  display: grid;
  gap: 12px;
}

.deep-dive-body > p { margin: 0; }

/* Lead — the curator's opening read. Editorial-style kicker + supporting
   line so the headline thought lands before the context. Visually
   distinct from the section cards below; the eye finds it first. */
.brief-lead {
  margin: 0;
  padding: 20px 22px;
  background:
    linear-gradient(180deg, rgba(142, 151, 255, 0.07) 0%, var(--bg-elevated) 70%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1, "tnum" 1;
  position: relative;
  overflow: hidden;
}
.brief-lead::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-2) 0%, rgba(142, 151, 255, 0.15) 100%);
  opacity: 0.85;
}

.brief-lead-kicker {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--fg);
  font-weight: 600;
}

.brief-lead-rest {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.004em;
  color: var(--muted);
  font-weight: 400;
}

.brief-lead-kicker strong {
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brief-empty,
.brief-empty-inline {
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: -0.002em;
}

/* ── Brief section cards ──────────────────────────────────────── */

.brief-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px 18px;
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease;
}
.brief-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.brief-card[data-accent="accent"]:hover    { border-color: rgba(142, 151, 255, 0.32); }
.brief-card[data-accent="verify"]:hover    { border-color: rgba(142, 151, 255, 0.28); }
.brief-card[data-accent="highlight"]:hover { border-color: rgba(255, 179, 71, 0.32); }
.brief-card[data-accent="danger"]:hover    { border-color: rgba(255, 68, 112, 0.32); }

/* Brief cards carry their accent via the // marker color and the
   bold/num tint. Flat backgrounds keep the brutalist read. */
.brief-card[data-accent="accent"],
.brief-card[data-accent="verify"],
.brief-card[data-accent="neutral"],
.brief-card[data-accent="highlight"],
.brief-card[data-accent="danger"]    { background: var(--bg-elevated); }
.brief-card[data-accent="accent"]    { border-left: 2px solid rgba(142, 151, 255, 0.6); }
.brief-card[data-accent="highlight"] { border-left: 2px solid rgba(255, 179, 71, 0.6); }
.brief-card[data-accent="danger"]    { border-left: 2px solid rgba(255, 68, 112, 0.6); }

.brief-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.brief-card-head .section-marker {
  color: var(--accent-2);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.brief-card-head .section-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.brief-card[data-accent="accent"]    .brief-card-head .section-marker { color: var(--accent-2); }
.brief-card[data-accent="highlight"] .brief-card-head .section-marker { color: var(--highlight); }
.brief-card[data-accent="danger"]    .brief-card-head .section-marker { color: var(--danger); }

.brief-body {
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--fg);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1, "tnum" 1;
}

.brief-body p { margin: 0; }

/* ── Compare strip — image cards for alternatives the agent names ── */

.compare-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

.compare-alt {
  display: grid;
  gap: 8px;
  padding: 0;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.14s ease;
}
.compare-alt:hover {
  border-color: var(--highlight);
  transform: translateY(-1px);
}

.compare-alt-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-elevated);
  overflow: hidden;
}
.compare-alt-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: compare-alt-fade-in 0.24s ease forwards;
}
@keyframes compare-alt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.compare-alt-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--accent-2);
  opacity: 0.4;
}
.compare-alt-placeholder svg { width: 50%; height: auto; }

.compare-alt-name {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  padding: 0 10px 10px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 26px;
}

/* ── Inline brief sparkline (Price Action) ────────────────────── */

.brief-spark {
  height: 28px;
  padding: 4px 0;
  margin-bottom: 4px;
}
.brief-spark svg { width: 100%; height: 100%; display: block; }
.brief-spark-line {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.brief-spark-fill {
  stroke: none;
  opacity: 0.16;
}
.brief-spark[data-direction="down"] .brief-spark-line,
.brief-spark[data-direction="down"] .brief-spark-fill { stroke: var(--accent-2); fill: var(--accent-2); }
.brief-spark[data-direction="up"]   .brief-spark-line,
.brief-spark[data-direction="up"]   .brief-spark-fill { stroke: var(--danger); fill: var(--danger); }

/* Bullet lists inside a Brief section — used by "Spot the Fakes" to
   render distinct physical tells as a scannable checklist. */
/* Inline price-history sparkline shown above the Brief in the expanded
   card. Pure SVG, scales to container width. Direction-aware colour:
   mint when latest > first (price up — bad for buyer = red? actually
   for a SCOUT user, "down" is the deal; flip so DOWN reads mint). */
.sparkline {
  margin: 0 0 10px;
  padding: 10px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 5px;
}
.sparkline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sparkline-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 600;
  color: var(--fg-soft);
}
.sparkline-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sparkline-svg {
  width: 100%;
  height: 32px;
  display: block;
}
.sparkline-line {
  fill: none;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.sparkline-fill {
  stroke: none;
  opacity: 0.18;
}
.sparkline-dot {
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}
/* Lower current = better for the buyer — mint. */
.sparkline[data-direction="down"] .sparkline-line { stroke: var(--accent-2); }
.sparkline[data-direction="down"] .sparkline-fill { fill:   var(--accent-2); }
.sparkline[data-direction="down"] .sparkline-dot  { fill:   var(--accent-2); stroke: var(--accent-ink); }
.sparkline[data-direction="up"]   .sparkline-line { stroke: var(--danger); }
.sparkline[data-direction="up"]   .sparkline-fill { fill:   var(--danger); }
.sparkline[data-direction="up"]   .sparkline-dot  { fill:   var(--danger); stroke: var(--accent-ink); }

.brief-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

/* Share-this-Brief row — always visible at the bottom of a finished
   Brief. Quiet by default (matches Brief surface), accent on hover. */
.brief-share-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.brief-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-soft);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.brief-share-btn:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}
.brief-share-btn.brief-share-done {
  border-color: var(--accent-2);
  background: rgba(142, 151, 255, 0.12);
  color: var(--accent-2);
}
.brief-share-btn svg { display: block; }

/* Save-this-Brief hook — appears at the bottom of the Brief panel for
   anon users only. Mint-tinted card with a clear CTA. */
.brief-save-hook {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(142, 151, 255, 0.08) 0%, var(--bg-elevated) 80%);
  border: 1px solid rgba(142, 151, 255, 0.30);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}
.brief-save-text {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: var(--fg-soft);
}
.brief-save-text strong {
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-right: 4px;
}
.brief-save-cta {
  background: var(--gold);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(244, 194, 100, 0.18);
  transition: background 0.14s ease, transform 0.12s ease;
}
.brief-save-cta:hover {
  background: #84F8D2;
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .brief-save-hook {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.brief-list li {
  position: relative;
  padding: 2px 0 2px 22px;
  line-height: 1.5;
  letter-spacing: -0.004em;
}
.brief-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: transparent;
}
.brief-card[data-accent="verify"] .brief-list li::before {
  border-color: rgba(142, 151, 255, 0.45);
}

.brief-body strong {
  color: var(--fg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brief-card[data-accent="accent"]    .brief-body strong { color: var(--accent-2); }
.brief-card[data-accent="verify"]    .brief-body strong { color: #4FE3A4; }
.brief-card[data-accent="highlight"] .brief-body strong { color: var(--highlight); }
.brief-card[data-accent="danger"]    .brief-body strong { color: var(--danger); }

.brief-body .num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0 5px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.brief-card[data-accent="accent"]    .brief-body .num { color: var(--accent-2);    border-color: rgba(142, 151, 255, 0.25); }
.brief-card[data-accent="highlight"] .brief-body .num { color: var(--highlight); border-color: rgba(255, 179, 71, 0.25); }
.brief-card[data-accent="danger"]    .brief-body .num { color: var(--danger);    border-color: rgba(255, 68, 112, 0.25); }

.brief-body code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

.deep-dive-sources {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.sources-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
}

.sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}

.sources-list li {
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.sources-list a {
  color: var(--accent-2);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sources-list a:hover { text-decoration: underline; }

.sources-q {
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  white-space: nowrap;
}

.details-loading {
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  padding: 4px 6px;
  background: var(--bg-sunken);
  border-radius: var(--radius-xs);
  width: max-content;
}

.price-tag {
  background: linear-gradient(180deg, rgba(244, 194, 100, 0.16), rgba(244, 194, 100, 0.08));
  color: var(--gold);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 18px;
  padding: 7px 12px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  letter-spacing: -0.015em;
  border: 1px solid rgba(244, 194, 100, 0.36);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  box-shadow:
    0 4px 12px rgba(244, 194, 100, 0.06),
    inset 0 1px 0 rgba(244, 194, 100, 0.18);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover .price-tag {
  border-color: rgba(244, 194, 100, 0.52);
  box-shadow:
    0 6px 18px rgba(244, 194, 100, 0.12),
    inset 0 1px 0 rgba(244, 194, 100, 0.24);
}

.enrichment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  opacity: 0.85;
}

.enrichment .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.enrichment[data-state="pending"] .dot {
  background: var(--accent-2);
  animation: pulse 1.2s ease-in-out infinite;
}

.enrichment[data-state="done"] .dot { background: var(--accent-2); }
.enrichment[data-state="error"] .dot { background: var(--danger); }
.enrichment[data-state="error"] .enrichment-text { color: var(--danger); }

.enrichment-retry {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.12s;
}

.enrichment-retry:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.retry-note {
  color: var(--accent-2);
  font-weight: 600;
}

.agent-reasoning {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-soft);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.agent-reasoning .agent-icon {
  font-size: 11px;
  opacity: 0.85;
  flex-shrink: 0;
  margin-top: 1px;
}

.agent-reasoning .agent-text {
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

footer {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 32px 24px;
}

/* ── Plans modal (tier picker) ────────────────────────────────────── */
.plans-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(5, 8, 12, 0.78);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.plans-modal.open { opacity: 1; }
.plans-modal[hidden] { display: none; }

.plans-modal-card {
  position: relative;
  width: min(1120px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: 32px 32px 26px;
  display: grid;
  gap: 18px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(142, 151, 255, 0.05);
}

.plans-head {
  display: grid;
  gap: 7px;
  max-width: 560px;
}
.plans-eyebrow {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);   /* eyebrow is a quiet label, not an accent */
}

.plans-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg);
}

.plans-pitch {
  margin: 0;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.55;
}

.plans-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  padding: 0;
  margin: 4px 0 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.plans-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.plans-trust li svg {
  color: var(--muted);
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .plans-trust {
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
  }
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Equal-height cards so every box's top and bottom edge lines up — the
     featured card's lift is the only intentional offset. */
  align-items: stretch;
  gap: 14px;
  /* Headroom so the lifted featured card + its "Most popular" badge
     don't crowd the header above. */
  margin-top: 12px;
}

/* Lane separator — quiet section break between PERSONAL and
   PROFESSIONAL. Full row, // marker + label + rule + sub copy, like
   the rest of Scout's section heads. */
.plans-lane-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 2px 2px;
  border-top: 1px solid var(--border);
}
.plans-lane-head:first-child { border-top: 0; padding-top: 4px; }
.plans-lane-label {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);   /* lane label is a quiet section break, not an accent */
}
.plans-lane-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
.plans-lane-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Professional lane collapses by default — keeps the opened modal focused on
   the Personal tiers; resellers expand for the high-volume plans. */
.plans-pro { grid-column: 1 / -1; }
.plans-pro > summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 2px 2px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
}
.plans-pro > summary::-webkit-details-marker { display: none; }
.plans-pro > summary:hover .plans-lane-sub { color: var(--text); }
.plans-pro-arrow { color: var(--muted); font-size: 11px; transition: transform 0.2s ease; }
.plans-pro[open] > summary .plans-pro-arrow { transform: rotate(180deg); }
.plans-pro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  margin-top: 12px;
}

/* Tier rank chip — small editorial marker at the top of each card
   ("TIER 04 / 06"). Carries the magazine/terminal voice without
   adding decoration. */
.plan-rank {
  position: absolute;
  top: 12px;
  right: 13px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.55;
}
.plan-card.is-popular .plan-rank { color: var(--muted); opacity: 0.7; }

/* Price ladder — single row, every tier's monthly price separated
   by em-dashes, anchor in mint. Reads the full range in one glance
   without claiming a chart's worth of vertical space. */
.plans-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.6;
}
.plans-ladder-step {
  color: var(--soft);
  transition: color 120ms;
}
.plans-ladder-step.is-anchor {
  color: var(--soft);
}
.plans-ladder-sep {
  color: var(--border-strong);
  font-weight: 400;
}

.plans-loading,
.plans-error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 28px;
}
.plans-error { color: var(--signal-red); }

.plan-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.plan-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }

/* Personal-lane anchor (Pro) — the conventional "most picked" cue:
   mint glow, faint wash, filled CTA. People recognize this shape
   from every SaaS upgrade modal; using the familiar pattern for the
   entry-level lane keeps it scannable. */
/* Single, calm emphasis: the popular tier (Pro) gets a thin accent border
   and a whisper of wash — no glow ring, no double shadow. One highlighted
   card reads cleaner than competing accents. */
/* Popular tier stands out through the badge + the single iris CTA, NOT a
   colored border/wash — one accent (the submit button), everything else calm. */
.plan-card.is-popular {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
}

/* Mogul is just the first Professional tier — no special framing, ribbon,
   or accent. The lane heading already sets the context; a second emphasized
   card only competes with Pro and adds noise. */
.plan-card.is-flagship { overflow: hidden; }
.plan-card.is-flagship::before { content: none; }

.plan-card.current {
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 1px var(--accent-amber);
}

/* Diagonal corner stamp — the Flagship anchor's signature.
   Top-right corner, rotated 45°, mono terminal copy, mint surface.
   Stand-in for a floating pill (which would visually rhyme with the
   "Most popular" badge and break the differentiation). */
/* Diagonal flagship ribbon removed — it was the loudest, most "vibe-coded"
   element in the modal. */
.plan-stamp { display: none; }
.plan-stamp span {
  opacity: 0.65;
  margin-right: 4px;
  letter-spacing: 0;
}

/* Refined neutral pill — a quiet "most popular" marker. No purple fill (the
   iris is reserved for the CTA); a dark chip with a hairline reads premium, the
   submit button below carries the emphasis. */
.plan-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-sunken);
  color: var(--soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 12px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Fixed header band so a 1-line vs 2-line tagline never pushes one
   card's price out of line with the others. */
.plan-head { display: grid; gap: 3px; align-content: start; min-height: 50px; }
.plan-name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.plan-tagline { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 14px;
}
.plan-price-amount {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.025em;
  line-height: 1;
}
.plan-price-period {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.plan-perday {
  margin-top: 5px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--muted);
}

/* Hero metric — the single number that sells the tier, boxed so it
   reads before the feature list. */
.plan-highlight {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.plan-highlight-check { color: var(--muted); font-size: 11px; }

.plan-pick {
  margin-top: 16px;
  width: 100%;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, transform 0.08s ease;
}
.plan-pick:hover:not(:disabled) {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.plan-pick:active:not(:disabled) { transform: translateY(1px); }
/* The ONE primary submit in the dialog — iris filled. This is the only place
   the purple appears, so it reads as the clear call to action. */
.plan-card.is-popular .plan-pick {
  background: var(--accent-2);
  color: var(--accent-ink);
  border-color: var(--accent-2);
}
.plan-card.is-popular .plan-pick:hover:not(:disabled) {
  filter: brightness(1.07);
  background: var(--accent-2);
  color: var(--accent-ink);
  border-color: var(--accent-2);
}
.plan-pick:disabled { opacity: 0.45; cursor: not-allowed; }

/* Features — the justification, below the CTA. The "Everything in X,
   plus" lead reads as a quiet section label, not a checked item. */
.plan-features {
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 13px;
  color: var(--soft);
}
/* Features always show — the modal reads complete from the start (no compare
   toggle). The list grows to fill so every card's CTA pins to the same bottom
   line across the row. */
.plan-features {
  flex: 1 1 auto;
  align-content: start;
}
.plan-features li {
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 11px;
}
.plan-feature-lead {
  padding-left: 0 !important;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-feature-lead::before { content: none !important; }

/* 3-up collapses to 2-up on tablets, single column on phones. The
   lane heads stretch full-width regardless via grid-column: 1/-1. */
@media (max-width: 1040px) {
  .plans-grid,
  .plans-pro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-lane-sub { display: none; }
}
@media (max-width: 560px) {
  .plans-grid,
  .plans-pro-grid { grid-template-columns: 1fr; margin-top: 6px; }
}

/* ───────── Mobile modal sheets (≤ 720px) ───────── */

@media (max-width: 720px) {
  /* Auth modal becomes a bottom sheet — slides up from the edge of
     the viewport, full-width, respects iOS home indicator inset. */
  .auth-modal,
  .plans-modal {
    align-items: flex-end;
    padding: 0;
  }
  .auth-modal-card,
  .plans-modal-card {
    width: 100%;
    max-width: none;
    border-radius: var(--radius-xl) 18px 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateY(24px);
    transition: transform 0.2s ease;
  }
  .auth-modal.open .auth-modal-card,
  .plans-modal.open .plans-modal-card {
    transform: translateY(0);
  }
  .plans-modal-card { max-height: 88dvh; }

  /* Touch-target floors — 44pt minimum on tappable primary actions.
     Iconic buttons (close ×, chevron, hamburger) opt out via explicit
     dimensions or their own selectors. */
  #go,
  .plan-pick,
  .auth-submit,
  .account-action,
  .account-btn,
  .sidebar-action {
    min-height: 44px;
  }
  .account-signout { min-height: 36px; }
  /* Sidebar inputs already meet 44px via 9px padding + 16px font. */
  .search-field > input { min-height: 44px; }

  .card-image,
  .card-image-placeholder,
  .skeleton-thumb {
    width: 72px !important;
    height: 72px !important;
  }
  .card-image-placeholder svg { width: 44px; height: 22px; }

  /* Meta pills get their own wrap line so the title runs full width
     instead of fighting the source tag for horizontal space. */
  .card-meta { gap: 6px; }
  .card .source-tag { font-size: 10px; }
}

/* ── Identify-from-image modal (paste-to-find) ───────────────────── */

.identify-modal .identify-card { width: min(500px, 100%); }

/* Drop zone — the empty state. Mint-tinted dashed border that breathes
   on hover and goes solid + lifts on dragover. Single fat-target
   container so the whole area is clickable, not just the CTA. */
.dropzone {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 32px 24px 28px;
  background: linear-gradient(180deg, rgba(142, 151, 255, 0.04), var(--bg-sunken) 80%);
  border: 1.5px dashed rgba(142, 151, 255, 0.32);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.14s ease;
}
.dropzone[hidden] { display: none !important; }
.dropzone:hover {
  border-color: rgba(142, 151, 255, 0.55);
  background: linear-gradient(180deg, rgba(142, 151, 255, 0.07), var(--bg-elevated) 80%);
}
.dropzone-over {
  border-style: solid;
  border-color: var(--accent-2);
  background: rgba(142, 151, 255, 0.10);
  transform: translateY(-1px);
}

.dropzone-glyph {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: rgba(142, 151, 255, 0.10);
  border: 1px solid rgba(142, 151, 255, 0.28);
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dropzone-glyph svg { width: 40px; height: 28px; }

.dropzone-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.012em;
}

.dropzone-sub {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dropzone-sub kbd {
  font-family: inherit;
  font-size: 10px;
  padding: 2px 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--fg-soft);
  margin: 0 1px;
  letter-spacing: 0.06em;
}

.dropzone-cta {
  background: var(--gold);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
  box-shadow: 0 4px 12px rgba(244, 194, 100, 0.20);
  transition: filter 0.12s ease, transform 0.12s ease;
}
.dropzone-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.dropzone-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(244, 194, 100, 0.32);
}

.dropzone-fine {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 2px;
}

.identify-preview {
  width: 100%;
  min-height: 180px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.identify-preview[hidden] { display: none !important; }
.identify-preview img {
  max-width: 100%;
  max-height: 280px;
  display: block;
  object-fit: contain;
}

.identify-status {
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
}
.identify-status[hidden] { display: none !important; }

.identify-hit {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(142, 151, 255, 0.08), var(--bg-elevated) 80%);
  border: 1px solid rgba(142, 151, 255, 0.32);
  border-radius: var(--radius-md);
}

.identify-hit-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: var(--fg);
}

.identify-hit-cw {
  font-size: 13px;
  color: var(--fg-soft);
  letter-spacing: -0.004em;
}

.identify-hit-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.identify-hit-brand,
.identify-hit-conf {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
}
.identify-hit-brand { background: rgba(142, 151, 255, 0.12); color: var(--accent-2); }
.identify-hit-conf  { background: rgba(139, 149, 168, 0.10); color: var(--muted); border: 1px solid var(--border); }

.identify-hit-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.identify-action-search {
  flex: 1;
  background: var(--accent-2);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 12px rgba(244, 194, 100, 0.18);
  transition: filter 0.12s ease, transform 0.12s ease;
}
.identify-action-search:hover { filter: brightness(1.07); transform: translateY(-1px); }

.identify-action-dismiss {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
}
.identify-action-dismiss:hover { color: var(--danger); border-color: var(--danger); }

/* ── Command palette (Cmd/Ctrl+K) ────────────────────────────────── */

.palette {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(5, 8, 12, 0.78);
  backdrop-filter: blur(8px);
  padding: 80px 20px 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.14s ease;
}
.palette[hidden] { display: none !important; }
.palette.open { opacity: 1; }

.palette-card {
  width: min(640px, 100%);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(142, 151, 255, 0.06);
}

.palette-input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  background: transparent;
  color: var(--fg);
  border: 0;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  font-size: 16px;
  outline: none;
}
.palette-input::placeholder { color: var(--muted); }

.palette-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}

.palette-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.10s ease;
}
.palette-item:hover { background: var(--bg-elevated); }
.palette-item-active { background: var(--bg-elevated); }
.palette-item-active .palette-label { color: var(--accent-2); }

.palette-kind {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  text-align: center;
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
}
.palette-kind-cmd    { color: var(--accent-2); }
.palette-kind-recent { color: var(--accent-amber); }
.palette-kind-search { color: var(--danger); }

.palette-label {
  font-size: 14px;
  color: var(--fg);
  letter-spacing: -0.005em;
}

.palette-hint {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.palette-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.palette-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: var(--bg-sunken);
  border-top: 1px solid var(--border);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.palette-footer kbd {
  font-family: inherit;
  font-size: 10px;
  padding: 2px 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--fg-soft);
  margin: 0 1px;
}

/* ── Quick-compare drawer (bottom rail) ──────────────────────────── */

.compare-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-sunken) 100%);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
  padding: 12px 24px calc(14px + env(safe-area-inset-bottom));
  display: grid;
  gap: 10px;
  transition: transform 0.2s ease;
}
.compare-drawer[hidden] { display: none; }
.compare-drawer[data-collapsed="true"] .compare-rail { display: none; }
.compare-drawer[data-collapsed="true"] { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }

.compare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.compare-badge {
  background: rgba(255, 179, 71, 0.10);
  color: var(--accent-amber);
  border-color: rgba(255, 179, 71, 0.32);
}
.compare-count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.compare-head-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.compare-clear, .compare-collapse {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-xs);
  padding: 4px 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.compare-clear:hover    { color: var(--danger); border-color: var(--danger); }
.compare-collapse:hover { color: var(--accent-2); border-color: var(--accent-2); }
.compare-collapse { padding: 4px 8px; font-size: 11px; }

.compare-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.compare-slot {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 32px 10px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s ease;
}
.compare-slot:hover { border-color: var(--border-strong); }
.compare-slot[data-source="stockx"] { box-shadow: inset 0 0 0 1px rgba(142, 151, 255, 0.20); }
.compare-slot[data-source="goat"]   { box-shadow: inset 0 0 0 1px rgba(255, 179, 71, 0.20); }
.compare-slot[data-source="nike"]   { box-shadow: inset 0 0 0 1px rgba(255, 68, 112, 0.20); }

.compare-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--panel);
  display: block;
}
.compare-thumb img { width: 44px; height: 44px; object-fit: cover; display: block; }
.compare-thumb-ph {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, rgba(142, 151, 255, 0.05), rgba(255, 179, 71, 0.04)) var(--panel);
}

.compare-body { display: grid; gap: 5px; min-width: 0; }

.compare-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.compare-title:hover { color: var(--accent-2); }

.compare-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.compare-source {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  background: rgba(0, 0, 0, 0.22);
}
.compare-source-stockx { color: var(--accent-2); }
.compare-source-goat   { color: var(--accent-amber); }
.compare-source-nike   { color: var(--danger); }

.compare-price {
  color: var(--fg);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.compare-verdict {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid currentColor;
}
.compare-verdict-strong_buy { color: var(--accent); background: rgba(108, 245, 200, 0.12); }
.compare-verdict-buy        { color: var(--accent); background: rgba(108, 245, 200, 0.06); }
.compare-verdict-hold       { color: var(--accent-amber); background: rgba(255, 179, 71, 0.10); }
.compare-verdict-wait       { color: var(--danger); background: rgba(255, 68, 112, 0.08); }
.compare-verdict-skip       { color: var(--danger); background: rgba(255, 68, 112, 0.10); }

.compare-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: var(--radius-xs);
  box-shadow: none;
}
.compare-remove:hover { color: var(--danger); background: rgba(255, 68, 112, 0.08); }

/* Push results up so the drawer doesn't cover the bottom of the page. */
.compare-drawer:not([hidden]) ~ .app-shell .canvas {
  padding-bottom: 140px;
}

@media (max-width: 1100px) { .compare-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  {
  .compare-rail { grid-template-columns: 1fr; }
  .compare-drawer { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 520px) {
  .row { grid-template-columns: 1fr; }
  .card { grid-template-columns: 64px 1fr auto; }
  .card.has-image { grid-template-columns: 56px 56px 1fr; }
  .card.has-image .card-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
  .card .arrow { display: none; }
  .card .card-image,
  .card .card-image-placeholder,
  .card .skeleton-thumb {
    width: 56px !important;
    height: 56px !important;
  }
  .card-image-placeholder svg { width: 36px; height: 18px; }

  /* Plan cards: stack the price big, features tighter. */
  .plan-name { font-size: 13px; }
  .plan-price-amount { font-size: 23px; }
  .plan-features { font-size: 13px; }
}

/* ── SEO-rendered pages (/sneaker/*, /sneakers, /drops/upcoming) ──
   These are server-rendered, indexable, and reuse the brutalist
   theme tokens. Layout's intentionally narrow — content-first, like
   a magazine spread, not the app shell. */

.seo-body {
  overflow: auto;
  height: auto;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.seo-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: grid;
  gap: 28px;
}

.seo-crumbs {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.seo-crumbs a {
  color: var(--accent-2);
  text-decoration: none;
}
.seo-crumbs a:hover { text-decoration: underline; }
.seo-crumbs span { color: var(--border-strong); }
.seo-crumbs > span:last-child { color: var(--fg-soft); }

.seo-hero {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 24px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent-2);
}
.seo-hero-stack { grid-template-columns: 1fr; }
.seo-hero-img {
  aspect-ratio: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.seo-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.seo-hero-fallback {
  font-size: 80px;
  color: var(--accent-2);
  opacity: 0.35;
}
.seo-hero-data {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.seo-brand {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.seo-title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.seo-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0;
}
.seo-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 4px 0 0;
}
.seo-facts > div { display: grid; gap: 2px; }
.seo-facts dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.seo-facts dd {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.seo-premium {
  font-size: 11px;
  color: var(--highlight);
  margin-left: 4px;
}
.seo-cta {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  background: var(--gold);
  color: var(--accent-ink);
  border: 1px solid var(--gold);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.14s ease, transform 0.14s ease;
}
.seo-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.seo-brief {
  display: grid;
  gap: 18px;
}
.seo-brief h2 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-strong);
}
.seo-brief-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent-2);
  padding: 16px 18px;
}
.seo-brief-section h3 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 8px;
}
.seo-brief-section p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
}
.seo-brief-section p:last-child { margin-bottom: 0; }
.seo-brief-section strong { color: var(--accent-2); font-weight: 600; }

.seo-cta-row {
  padding: 18px 22px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-strong);
  text-align: center;
}
.seo-cta-row a {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-decoration: none;
}
.seo-cta-row a:hover { text-decoration: underline; }

.seo-footer {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.seo-footer a { color: var(--accent-2); text-decoration: none; }
.seo-footer a:hover { text-decoration: underline; }

/* Drop digest + sneaker index lists */
.seo-drop-list, .seo-index-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.seo-drop-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.seo-drop-row img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  background: var(--bg-elevated);
}
.seo-drop-row a {
  color: var(--fg);
  text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
}
.seo-drop-row a:hover { color: var(--accent-2); }
.seo-drop-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.seo-index-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.seo-index-row img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  background: var(--bg-elevated);
}
.seo-index-row a {
  color: var(--fg);
  text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  font-size: 13px;
}
.seo-index-row a span { color: var(--muted); font-weight: 500; margin-left: 6px; }
.seo-index-row a:hover { color: var(--accent-2); }
.seo-index-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .seo-hero { grid-template-columns: 1fr; }
  .seo-hero-img { max-width: 320px; margin: 0 auto; }
  .seo-title { font-size: 22px; }
  .seo-facts { grid-template-columns: 1fr 1fr; }
}

/* ── /picks/<date> digest ────────────────────────────────────── */
.seo-pick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: pick;
  display: grid;
  gap: 12px;
}
.seo-pick-row {
  display: grid;
  grid-template-columns: auto 80px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.seo-pick-row:first-child {
  border-left: 3px solid var(--accent-2);
}
.seo-pick-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.seo-pick-row img,
.seo-pick-img-fallback {
  width: 80px;
  height: 80px;
  object-fit: cover;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--accent-2);
  font-size: 22px;
}
.seo-pick-body { display: grid; gap: 4px; min-width: 0; }
.seo-pick-name {
  color: var(--fg);
  text-decoration: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  font-size: 13px;
}
.seo-pick-name strong { font-weight: 600; }
.seo-pick-name span { color: var(--muted); font-weight: 500; }
.seo-pick-name:hover strong { color: var(--accent-2); }
.seo-pick-reason {
  margin: 0;
  font-size: 14px;
  color: var(--fg-soft);
  line-height: 1.45;
}
.seo-pick-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.seo-pick-cat { color: var(--accent-2); font-weight: 700; }

/* ── /picks archive ──────────────────────────────────────────── */
.seo-archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.seo-archive-row a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.14s ease;
}
.seo-archive-row a:hover { border-color: var(--accent-2); }
.seo-archive-date {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.seo-archive-go {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
}

/* ── Home SEO shell — visible to crawlers, off-screen for users ──
   The SPA renders its full UI on top of this. We keep the markup
   visible to assistive tech and crawlers but pull it off-screen
   so it doesn't compete with the brutalist app shell visually. */
.home-seo-shell {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── Market Movers ─────────────────────────────────────────────────
   24h gainers/losers feed. Tabs switch direction; cards render in
   WorthScore tiers — hero (≥80) spans 2 cols and gets a taller image,
   standard (60-79) is the regular grid, compact (40-59) is a list row
   with no image. */
.movers-tabs {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: -2px 0 4px;
  font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
}
.movers-tab {
  background: transparent; color: var(--ink-mid);
  border: 0; padding: 7px 12px; border-radius: var(--radius-xs);
  cursor: pointer; transition: color 120ms, background 120ms;
}
.movers-tab:hover { color: var(--ink); }
.movers-tab.is-active {
  background: var(--accent-2-soft); color: var(--accent-2);
}

/* Movers / Under-Retail render as full-width horizontal rows — a clean
   ranked list (thumbnail · title/meta · price/delta) that uses the full
   canvas width and reads denser than a tile grid. */
.movers-grid, .under-retail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.rowcard {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px 14px 8px 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit; color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.rowcard:hover { border-color: var(--border-strong); background: var(--panel); }
.rowcard.tier-hero { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2-soft) inset; }

.rowcard-thumb {
  width: 52px; height: 52px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--img-stage);
  display: flex; align-items: center; justify-content: center;
}
.rowcard-thumb img { width: 100%; height: 100%; object-fit: contain; }

.rowcard-body { min-width: 0; display: grid; gap: 3px; }
.rowcard-title {
  font: 600 13.5px/1.3 "Inter", -apple-system, system-ui, sans-serif;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rowcard-meta {
  display: flex; align-items: center; gap: 8px;
  font: 450 11px/1 "Inter", system-ui, sans-serif;
  color: var(--muted);
}
.rowcard-trail {
  display: grid; justify-items: end; gap: 4px;
  text-align: right; white-space: nowrap;
}
.rowcard-price {
  font: 600 14px/1 "Inter", system-ui, sans-serif;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* Inline delta / save / score pills (no longer overlaid on an image) */
.mover-delta {
  padding: 2px 7px; border-radius: var(--radius-pill);
  font: 600 11px/1.4 "Inter", system-ui, sans-serif;
}
.mover-delta-up   { background: var(--accent-2-soft); color: var(--accent-2); }
.mover-delta-down { background: rgba(255, 179, 71, 0.16); color: var(--accent-amber); }
.under-save {
  padding: 2px 7px; border-radius: var(--radius-pill);
  background: var(--accent-2); color: var(--accent-ink);
  font: 600 11px/1.4 "Inter", system-ui, sans-serif;
}
.under-retail { color: var(--muted); text-decoration: line-through; font-size: 11px; }
.worth-score {
  padding: 2px 6px; border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  color: var(--fg-soft);
  font-size: 10px; letter-spacing: 0;
  text-transform: none;
}

/* ───────── Shoe-matched card tint ─────────
   A quiet wash of the shoe's own dominant color, sampled client-side from the
   cutout (scoutShoeTint in app.js sets --shoe-tint + .has-shoe-tint). Layered
   as background-image so it never clobbers each card's base color; the cutout
   is transparent, so the tint reads as a soft stage behind the floating shoe.
   Kept deliberately subtle — a complement, never a statement. */
.has-shoe-tint {
  background-image: linear-gradient(135deg,
    rgba(var(--shoe-tint), 0.07) 0%,
    rgba(var(--shoe-tint), 0.02) 55%,
    transparent 100%);
  transition: background-image 0.4s ease;
}
.detail-card.has-shoe-tint {
  background-image: radial-gradient(120% 130% at 18% 0%,
    rgba(var(--shoe-tint), 0.20) 0%,
    rgba(var(--shoe-tint), 0.06) 46%,
    transparent 74%);
}
/* The image stage is a solid --img-stage that sits in front of the card, so the
   card-level wash above never reaches behind the shoe. Layer the tint ON the
   stage itself — now the floating cutout rests on a soft glow of its own color
   (this is the "main image background" wash). */
.daily-card.has-shoe-tint .daily-card-img-wrap {
  /* tint layered OVER the --img-stage spotlight, not replacing it — a touch of
     the shoe's color so the tile feels alive, still well short of a distraction */
  background-image:
    radial-gradient(120% 118% at 50% 44%,
      rgba(var(--shoe-tint), 0.17) 0%,
      rgba(var(--shoe-tint), 0.05) 48%,
      transparent 80%),
    var(--img-stage);
}
.detail-card.has-shoe-tint .detail-hero-img-wrap {
  background-image: radial-gradient(120% 130% at 50% 45%,
    rgba(var(--shoe-tint), 0.12) 0%,
    rgba(var(--shoe-tint), 0.03) 50%,
    transparent 80%);
}

/* Animated per-card mesh — each tile's own extracted hues (--shoe-tint / -2 / -3,
   set by scoutShoeTint) drifting quietly behind the floating cutout, same spirit
   as the detail-hero mesh but a SINGLE light layer so a full grid of cards stays
   cheap and the page stays calm. The static tints above remain as the reduced-
   motion / fallback base. The cutout sits above via tree order (position alone). */
.drop-card.has-shoe-tint .drop-card-img-wrap::before,
.daily-card.has-shoe-tint .daily-card-img-wrap::before,
.trending-card.has-shoe-tint .trending-card-img-wrap::before,
.card.card-tile.has-cutout.has-shoe-tint .card-tile-img::before {
  content: "";
  position: absolute;
  inset: -28%;
  /* Color-matched blend, painted ONCE: BIG, soft, heavily-overlapping fields with
     very gradual falloffs so the screen blend melts the shoe's hues into smooth
     flowing transitions (toward the paper-design shader look), not discrete
     blobs. Each tint's alpha scales with its proportional coverage (--shoe-wN). */
  background:
    radial-gradient(80% 86% at 28% 28%, rgba(var(--shoe-tint, 108, 245, 200), calc(0.34 * var(--shoe-w1, 0.5))), transparent 92%),
    radial-gradient(76% 82% at 74% 34%, rgba(var(--shoe-tint-2, var(--shoe-tint, 108, 245, 200)), calc(0.34 * var(--shoe-w2, 0.3))), transparent 92%),
    radial-gradient(88% 92% at 55% 78%, rgba(var(--shoe-tint-3, var(--shoe-tint, 108, 245, 200)), calc(0.34 * var(--shoe-w3, 0.3))), transparent 94%);
  background-blend-mode: screen;
  filter: blur(24px) saturate(114%);
  opacity: 0.64;   /* alive enough to amplify the shoe with its own colour halo, still calm */
  /* Feather into the dark stage so it dissolves at the edges, not a colour box. */
  -webkit-mask: radial-gradient(78% 76% at 50% 46%, #000 30%, rgba(0, 0, 0, 0.35) 66%, transparent 100%);
          mask: radial-gradient(78% 76% at 50% 46%, #000 30%, rgba(0, 0, 0, 0.35) 66%, transparent 100%);
  /* PERF: TRANSLATE-ONLY motion. Animating scale on a blurred layer forces the
     browser to re-rasterise the blur every frame (the real jank cause); a pure
     translate just re-composites the already-painted layer — cheap. The big
     inset keeps the layer covering the tile across the drift with no scaling. */
  transform: translateZ(0);
  will-change: transform;
  animation: meshFloatCard 26s ease-in-out infinite alternate;
  pointer-events: none;
}
/* translate + rotate only — both GPU-composited (no scale, so the blur is never
   re-rasterised). The gentle rotation gives the fields a clean swirling FLOW,
   closer to the shader, while staying smooth. The big inset + mask keep edges
   covered/feathered as it drifts and turns. */
@keyframes meshFloatCard {
  0%   { transform: translate3d(-4%, 2.5%, 0) rotate(-2deg); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(2.5deg); }
  100% { transform: translate3d(-2.5%, 4%, 0) rotate(-1.5deg); }
}
/* Pause the mesh entirely while the user is scrolling — frees the compositor so
   the scroll itself stays buttery; it resumes a beat after scrolling stops. */
html.is-scrolling .drop-card.has-shoe-tint .drop-card-img-wrap::before,
html.is-scrolling .daily-card.has-shoe-tint .daily-card-img-wrap::before,
html.is-scrolling .trending-card.has-shoe-tint .trending-card-img-wrap::before,
html.is-scrolling .card.card-tile.has-cutout.has-shoe-tint .card-tile-img::before {
  animation-play-state: paused;
}
/* Lift the cutout (and any overlay badges/tags, declared after it) above the
   mesh ::before purely via tree order — no z-index battle with the date/price. */
.drop-card-img,
.daily-card-img,
.trending-card-img { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .drop-card.has-shoe-tint .drop-card-img-wrap::before,
  .daily-card.has-shoe-tint .daily-card-img-wrap::before,
  .trending-card.has-shoe-tint .trending-card-img-wrap::before { animation: none; }
}

/* ───────── Blended card edges ─────────
   Every dark product card gets the same whisper-faint edge so tiles emerge from
   the near-black page instead of reading as boxed outlines that pop out. One
   consistent treatment across daily / drops / movers / under-retail / trending.
   (Light search tiles keep their own edge; hover still raises the mint border.) */
.daily-card,
.drop-card,
.trending-card,
.rowcard {
  border-color: var(--card-edge);
}
/* Flat by design — a clean subtle border defines each card, no resting shadow. */
.daily-card,
.drop-card { box-shadow: none; }

/* Inner dividers (image -> footer band, and the row-card top rule) must match
   the outer edge — otherwise a faint outer hairline + a darker inner line reads
   as inconsistent borders. One hairline tone everywhere. */
.daily-card-foot,
.drop-card-foot,
.daily-card-img-wrap,
.drop-card-img-wrap {
  border-color: var(--card-edge);
}
.mover-card,
.under-card,
.rowcard { border-top-color: var(--card-edge); }
/* Match the Market Movers (and sibling row) corners to the For You cells —
   same --radius-lg token, pinned with a two-class selector so it always wins
   over the global brutalist button reset. */
.mover-card.rowcard,
.under-card.rowcard,
.rowcard { border-radius: var(--radius-lg); }

/* ───────── Sidebar cohesion ─────────
   The foot-zone items (allowance meter, watchlist, account) share ONE edge tone
   and radius so the bottom of the sidebar reads as a clean account group, not
   three mismatched boxes — unified with the product cards via --card-edge. */
.sidebar-foot-group { border-top-color: var(--card-edge); }
.tier-meter,
.sidebar-watch,
.account-card {
  border-color: var(--card-edge);
  border-radius: var(--radius-lg);
}
/* The allowance meter is the single value-nudge — a faint mint wash makes it the
   complementary accent anchor of the account zone (the mint also rhymes with the
   HUNT and UPGRADE buttons for a deliberate, repeating accent rhythm). */
.tier-meter {
  background:
    linear-gradient(180deg, rgba(142, 151, 255, 0.06), rgba(142, 151, 255, 0.02)),
    var(--bg-elevated);
}
/* Watchlist + account sit on the same quiet elevation so the zone feels related;
   hover lifts the watchlist toward the accent like the rest of the system. */
.sidebar-watch { background: var(--bg-elevated); }

/* ───────── Drop heat badge ─────────
   Sellout-velocity signal on a drop tile — "🔥 Sold out in 1m" reads as the
   hotness score sneakerheads want. Frosted chip, mint when it sold out fast. */
.drop-heat {
  position: absolute;
  bottom: 8px; left: 8px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: rgba(11, 16, 20, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--fg-soft);
  border: 1px solid var(--card-edge);
}
.drop-heat-sold_out { color: var(--accent-2); border-color: rgba(142, 151, 255, 0.4); }
.drop-heat-unsold   { color: var(--muted); }
/* The hero tile already parks the NEXT UP eyebrow bottom-left — move heat up. */
.drop-card-hero .drop-heat { bottom: auto; top: 12px; left: 12px; }

/* ───────── Mobile nav brand lockup ─────────
   A bare hamburger reads as an unfinished bootstrap app. On mobile (landing),
   show a brand lockup — shoe mark + SNEAKERMARKET — so the top bar has identity
   and presence. During a search the query title takes over instead. */
.canvas-brand { display: none; }
@media (max-width: 900px) {
  /* Landing: hamburger pinned left, brand CENTERED — a balanced, intentional
     bar instead of a left-crammed framework default. */
  html.query-idle .canvas-header { position: sticky; justify-content: center; }
  html.query-idle .hamburger {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  }
  html.query-idle .canvas-brand {
    display: inline-flex; align-items: center; gap: 9px;
    background: transparent; border: 0; padding: 0; cursor: pointer; margin: 0;
  }
  html.query-idle .canvas-header .canvas-title { display: none; }
  .canvas-brand-mark { width: 25px; height: 25px; color: var(--accent-2); flex: none; }
  .canvas-brand-name {
    font-family: var(--font-display); font-weight: 700; font-size: 16px;
    letter-spacing: 0.01em; text-transform: uppercase; color: var(--fg); line-height: 1;
  }
  .canvas-brand-name .brand-name-mkt { color: var(--accent-2); }

  /* Our hamburger, not a framework default: mint laces with an offset middle
     bar (a shoelace cross) inside a bordered chip — distinctive + on-brand. */
  .hamburger {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    border: 1px solid var(--card-edge); background: var(--bg-elevated);
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    transition: border-color 0.16s ease, background 0.16s ease;
  }
  .hamburger:hover, .hamburger[aria-expanded="true"] { border-color: var(--accent-2); background: var(--bg-sunken); }
  .hamburger span { height: 2px; border-radius: var(--radius-xs); background: var(--accent-2); transition: width 0.16s ease, transform 0.16s ease; }
  .hamburger span:nth-child(1) { width: 17px; }
  .hamburger span:nth-child(2) { width: 10px; align-self: flex-end; margin-right: 11.5px; }  /* offset middle — the lace cross */
  .hamburger span:nth-child(3) { width: 17px; }
  /* Open state: the laces pull into a tidy X. */
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { width: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* ── Active (search/detail) state ──────────────────────────────────────
     A selected item's title can be long (e.g. "Jordan 1 Retro High OG Chicago
     Lost and Found"). Without truncation it shoves the header past the viewport
     edge — the overflow the user hit. Keep the query to ONE clipped line, let
     the flex row actually shrink (min-width:0), and give a one-tap exit. */
  html:not(.query-idle) .canvas-header { gap: 12px; }
  html:not(.query-idle) .canvas-title { min-width: 0; flex: 1; }
  html:not(.query-idle) .canvas-query {
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 17px;
  }
  html:not(.query-idle) .canvas .status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* The exit chip — mint × in a bordered square matching the hamburger, pinned
     to the right. Only present once there's content to leave. */
  html:not(.query-idle) .canvas-exit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer;
    border: 1px solid var(--card-edge); border-radius: var(--radius-md);
    background: var(--bg-elevated); color: var(--fg-soft);
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
  }
  html:not(.query-idle) .canvas-exit svg { width: 18px; height: 18px; }
  html:not(.query-idle) .canvas-exit:hover,
  html:not(.query-idle) .canvas-exit:active {
    border-color: var(--accent-2); background: var(--bg-sunken); color: var(--accent-2);
  }
}
/* The exit chip is mobile-active only — hidden everywhere else. */
.canvas-exit { display: none; }

/* Detail hero skeleton — holds the frame while a missing image resolves. */
.detail-hero-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 70%);
  background-size: 220% 100%;
  animation: heroShimmer 1.25s ease-in-out infinite;
}
@keyframes heroShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Row-card thumbnail radius nudged toward the card system for consistency. */
.rowcard-thumb { border-radius: var(--radius-lg); }

/* ═════════════ Navbar + footer layout (replaces the sidebar) ═════════════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  /* Near-opaque solid background instead of a backdrop-filter blur: a sticky
     blur re-computes the blur of everything scrolling behind it EVERY frame
     (the navbar lag). At 0.94 alpha the bar reads as solid with no blur cost. */
  background: rgba(5, 6, 8, 0.94);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 8px 28px;
}

/* Brand — slim mark + tucked tagline. */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  box-shadow: none;
}
.nav-brand:hover, .nav-brand:active { background: transparent; box-shadow: none; transform: none; }
.nav-brand .brand-mark { width: 34px; height: 34px; }
.nav-brand .brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.08; }
.nav-brand .brand-name { font-size: 15px; }
.nav-brand .brand-tag { font-size: 11px; }

/* Logo interactions — clean hover + accessible keyboard focus.
   Hover: the mark lights to the accent with a soft lift + the corner tick pops.
   Focus-visible: a crisp high-contrast accent ring (with a bg gap so it reads
   on the dark navbar) — a clear indicator for keyboard users only. */
.nav-brand .brand-mark {
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.nav-brand .brand-mark-tick { transition: transform 0.16s ease; }
.nav-brand:hover .brand-mark {
  border-color: var(--accent-2);
  background: var(--bg-elevated);
  transform: scale(1.06);
}
.nav-brand:hover .brand-mark-tick { transform: scale(1.3); }
.nav-brand:active .brand-mark { transform: scale(0.98); }
.nav-brand:focus-visible { outline: none; }
.nav-brand:focus-visible .brand-mark {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-2);
}
@media (prefers-reduced-motion: reduce) {
  .nav-brand:hover .brand-mark,
  .nav-brand:active .brand-mark,
  .nav-brand:hover .brand-mark-tick { transform: none; }
}

/* Search */
.nav-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 560px;
  margin: 0 auto;            /* center the search between brand + actions */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
/* Search + Find are ONE shell: the bar owns the border + radius, the field and
   Find sit inside it borderless. Both outer corners come from the same source,
   so the rounding is perfectly even on all sides. */
.nav-search-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 38px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;   /* focus only — no scroll-driven height change */
}
.nav-search-bar:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-2-soft); }
.nav-search .query-section { flex: 1 1 auto; min-width: 0; display: flex; }
.nav-search .search-field {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}
/* The compact nav bar is 38px; drop the 44px touch-target floor that the mobile
   media query puts on search inputs, or the input is taller than the bar and its
   text sits LOW (the "content pushed to the bottom" misalignment). */
.nav-search .search-field > input { min-height: 0; }
/* #go.nav-go beats the base #go { width:100% } so Find stays compact in the bar;
   its corners are squared and the shell's overflow rounds them to match. */
#go.nav-go {
  flex: 0 0 auto;
  width: auto;
  min-width: 84px;
  height: 100%;
  min-height: 0;        /* drop the 44px touch-target floor so FIND centers in the 38px bar */
  align-self: stretch;  /* fill the bar height so its content centers vertically */
  padding: 0 16px;
  margin-top: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  /* The submit lives INSIDE the bordered search bar, so it carries only a left
     divider — the bar's own border frames it. A full border here would nest 1px
     inside the bar's border and misalign at the top/bottom (the overlap). */
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0 !important;
}
.nav-search .adv-filters {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 250px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* Actions */
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-actions .sidebar-watch { width: auto; margin: 0; }
.nav-actions .account,
.sidebar-foot-group .account { padding-top: 0; border-top: 0; }
.nav-actions .account-pop { display: flex; }
.nav-actions .account-avatar-btn { padding: 4px 6px; }
.nav-actions .account-avatar-id { display: none; }      /* navbar shows just the avatar */
.nav-actions .account-caret { display: none; }
.nav-actions .account-menu { top: calc(100% + 10px); bottom: auto; left: auto; right: 0; width: 260px; }
/* Tier meter is omitted from the navbar to keep it clean — the sign-in button
   already invites signup, and the Briefs allowance lives in the account menu. */
.nav-actions .tier-meter { display: none; }

@media (max-width: 1080px) {
  .nav-brand .brand-tag { display: none; }
}
/* Cramped widths → watchlist collapses to an icon-only square button. */
@media (max-width: 1000px) {
  .nav-actions .sidebar-watch-label { display: none; }
  .nav-actions .sidebar-watch { width: 38px; padding: 0; justify-content: center; }
}
@media (max-width: 760px) {
  .nav-inner {
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 12px;
    padding: 11px 16px;
    align-items: center;               /* brand + actions vertically centered on row 1 */
    justify-content: space-between;     /* brand left · actions hard-right */
  }
  .nav-brand { order: 1; min-width: 0; }
  .nav-actions { order: 2; margin-left: auto; display: flex; align-items: center; gap: 8px; }
  /* Compact the sign-in so it shares row 1 with the logo instead of wrapping
     onto its own line — drop the "· or join free" meta + the full-width stretch
     so it's a tidy "› Sign in" chip that fits the phone viewport. */
  .nav-actions .account { width: auto; }
  .nav-actions .account-btn {
    display: inline-flex;
    align-items: center;
    width: auto;
    gap: 7px;
    padding: 8px 12px;
    white-space: nowrap;
  }
  .nav-actions .account-btn-meta { display: none; }
  /* Full-width second row, constrained so it can never overflow the gutter
     (that 1px left sliver) and stays flush-aligned with the brand above. */
  .nav-search { order: 3; flex: 1 1 100%; min-width: 0; max-width: 100%; margin: 0; }
  .canvas { padding: 0 16px 40px; }
}

/* Footer (Popular Kicks + Recent Searches + meta) */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  padding: 26px 28px 34px;
  margin-top: 32px;
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 40px;
  align-items: flex-start;
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
}
.site-footer .footer-col {
  flex: 1 1 280px;
  min-width: 0;
  text-align: left;
}
.site-footer .footer-col.recent { flex: 1 1 420px; }
.site-footer .footer-col .sidebar-label { display: block; margin-bottom: 10px; text-align: left; }
.site-footer .sidebar-label-row { margin-bottom: 10px; justify-content: space-between; }
.site-footer .quick-chips { justify-content: flex-start; }
/* Meta is its own full-width row pinned to the bottom, centered + ruled off. */
.site-footer .footer-meta {
  flex-basis: 100%;
  margin: 8px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--card-edge);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.site-footer .footer-meta a, .site-footer .footer-link { color: var(--muted); }
.site-footer .footer-meta a:hover, .site-footer .footer-link:hover { color: var(--accent-2); }
.site-footer .footer-link { background: transparent; border: 0; box-shadow: none; padding: 0; font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; }

/* Screen-reader-only — visually hidden but announced + focusable when tabbed to. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus,
.sr-only:focus-within {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Watchlist moved into the account menu — flex so an optional count sits right. */
.account-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-menu-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-2);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 800;
}

/* ───────── Marketing / SEO landing pages (/sneaker-finder, /sneaker-bot) ─────────
   Clean, confident pages that share the app's dark theme + tokens. Mint is the
   conversion CTA (per the palette rules); iris carries eyebrows/steps. */
.seo-page.lp { max-width: 880px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) 20px 80px; }
/* .seo-page is display:grid (for the SKU detail layout); the marketing pages
   reuse the class but lay themselves out, so the grid only wraps a single
   content column + footer. As grid items those refuse to shrink below their
   min-content (inner 2-col grids, nowrap chip strips), blowing past the
   viewport on mobile. Plain block flow sizes them to the viewport correctly. */
.seo-page.lp { display: block; }
.seo-page.lp > * { min-width: 0; }
.lp-hero { text-align: center; padding: 20px 0 32px; }
/* Brand motif — hangtag section labels (a bordered tag with a punched 'string
   hole', the ::before). Shared by every marketing page so eyebrows/badges read
   as one system; the /sneaker-bot run uses the matching .pf-eyebrow. */
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  font-family: var(--label-font); font-size: var(--label-size-xs); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2);
  padding: 6px 12px 6px 11px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); background: rgba(142, 151, 255, 0.05);
}
.lp-eyebrow::before, .lp-badge::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent; opacity: 0.85;
}
.lp-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 6px 13px 6px 11px;
  font-family: var(--label-font); font-size: var(--label-size-xs); font-weight: 700;
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--accent-2);
  border: 1px solid rgba(142, 151, 255, 0.4); border-radius: var(--radius-pill);
  background: rgba(142, 151, 255, 0.08);
}
/* Stitching divider — dashed sand thread (Book 2 colorway), the run-timeline
   stitch promoted to a reusable section break across the marketing pages. */
.lp-stitch { height: 0; border: 0; border-top: 2px dashed rgba(214, 190, 150, 0.28); margin: 52px 0; }
.lp-h1 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.06;
  font-size: clamp(30px, 5.4vw, 50px); letter-spacing: -0.02em; color: var(--fg);
  margin: 0 auto 18px; max-width: 19ch;
}
.lp-lead {
  font-size: clamp(15px, 2vw, 18px); line-height: 1.55; color: var(--fg-soft);
  max-width: 56ch; margin: 0 auto 26px;
}
.lp-lead strong { color: var(--fg); font-weight: 600; }
.lp-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px;
  border-radius: var(--radius-pill); background: var(--gold); color: var(--accent-ink);
  font-weight: 700; font-size: 15px; letter-spacing: 0.01em; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 18px rgba(244, 194, 100, 0.25);
  transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.16s ease;
}
.lp-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 7px 24px rgba(244, 194, 100, 0.38); }
.lp-fineprint { font-size: 13px; color: var(--muted); margin-top: 14px; }

.lp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 18px 0 8px; }
.lp-feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 20px; }
.lp-feature h3 { font-size: 16px; font-weight: 600; color: var(--fg); margin: 0 0 7px; letter-spacing: -0.01em; }
.lp-feature p { font-size: 14px; line-height: 1.5; color: var(--fg-soft); margin: 0; }

.lp-section { padding: 42px 0 8px; text-align: center; }
.lp-h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -0.015em; color: var(--fg); margin: 0 0 18px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lp-chip {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--bg-elevated); color: var(--fg-soft); font-size: 13px; text-decoration: none;
  transition: border-color 0.14s ease, color 0.14s ease;
}
.lp-chip:hover { border-color: var(--accent-2); color: var(--fg); }

.lp-steps { display: grid; gap: 14px; margin: 40px auto; max-width: 640px; }
.lp-step { display: flex; gap: 16px; align-items: flex-start; padding: 20px; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.lp-step-n {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(142, 151, 255, 0.14); border: 1px solid rgba(142, 151, 255, 0.4); color: var(--accent-2);
  font-family: var(--label-font); font-weight: 700; font-size: 14px;
}
.lp-step h3 { font-size: 16px; font-weight: 600; color: var(--fg); margin: 3px 0 6px; }
.lp-step p { font-size: 14px; line-height: 1.5; color: var(--fg-soft); margin: 0; }

.lp-cta-band {
  margin: 48px 0 24px; padding: 40px 28px; text-align: center; border-radius: var(--radius-xl);
  background: radial-gradient(120% 140% at 50% 0%, rgba(142, 151, 255, 0.10), transparent 70%), var(--panel);
  border: 1px solid var(--border);
}
.lp-cta-band h2 { font-size: clamp(20px, 3vw, 28px); font-weight: 700; letter-spacing: -0.015em; color: var(--fg); margin: 0 0 10px; }
.lp-cta-band p { font-size: 15px; color: var(--fg-soft); margin: 0 0 22px; }

.footer-links { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.footer-links a { color: var(--fg-soft); text-decoration: none; font-size: 13px; transition: color 0.14s ease; }
.footer-links a:hover { color: var(--accent-2); }
.footer-soon {
  font-family: var(--label-font); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-2); border: 1px solid rgba(142, 151, 255, 0.35); border-radius: var(--radius-pill);
  padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}
@media (max-width: 620px) { .lp-grid { grid-template-columns: 1fr; } }

/* Landing-page footer — mirrors the app's site-footer treatment so it matches. */
.lp-footer {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.lp-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.lp-footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
}
.lp-footer-brand .brand-name-mkt { color: var(--accent-2); }
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lp-footer-nav a {
  color: var(--fg-soft);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.14s ease;
}
.lp-footer-nav a:hover { color: var(--accent-2); }
.lp-footer-meta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--card-edge);
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.lp-footer-meta a { color: var(--muted); text-decoration: none; }
.lp-footer-meta a:hover { color: var(--accent-2); }
@media (max-width: 620px) { .lp-footer-top { flex-direction: column; align-items: flex-start; } }

/* Slim marketing navbar (brand + links + Open-app CTA, no search). Full-bleed
   bar; content centred to ~1080px via clamp padding. Near-opaque (no backdrop
   blur → no scroll cost). */
.lp-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 13px clamp(20px, calc((100% - 1080px) / 2), 48vw);
  background: rgba(5, 6, 8, 0.92);
  border-bottom: 1px solid var(--border);
}
.lp-nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.lp-nav-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--accent-2); }
.lp-nav-mark svg { width: 30px; height: 30px; }
.lp-nav-word { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--fg); }
.lp-nav-word .brand-name-mkt { color: var(--accent-2); }
.lp-nav-links { display: flex; gap: 22px; }
.lp-nav-links a { color: var(--fg-soft); text-decoration: none; font-size: 14px; transition: color 0.14s ease; }
.lp-nav-links a:hover { color: var(--fg); }
.lp-nav-cta {
  padding: 8px 16px; border-radius: var(--radius-sm); background: var(--bg-elevated);
  border: 1px solid var(--border-strong); color: var(--fg); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: border-color 0.14s ease;
}
.lp-nav-cta:hover { border-color: var(--accent-2); }
@media (max-width: 640px) { .lp-nav-links { display: none; } }

/* Soft glow behind the hero for depth/attractiveness (iris by default). */
.lp-hero { position: relative; isolation: isolate; }
.lp-hero::before {
  content: ""; position: absolute; left: 50%; top: -120px; transform: translateX(-50%);
  /* 100% (not 120%) so the centered glow never spills past a narrow hero and
     pushes the page wider than the viewport on mobile. */
  width: 760px; max-width: 100%; height: 440px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 30%, rgba(142, 151, 255, 0.16), transparent 72%);
}

/* ── Drop Bot: two-column hero (copy + real cop screenshot) ── */
.lp-bot-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; text-align: left; padding-top: 28px; }
.lp-bot-copy .lp-h1, .lp-bot-copy .lp-lead { margin-left: 0; margin-right: 0; max-width: none; }
.lp-bot .lp-badge { display: inline-flex; align-items: center; gap: 7px; }

/* Bot page runs a purple-primary field with a gold "payoff" accent (money +
   action), so the brand reads iris, not mint. Scoped overrides keep the other
   marketing pages on the default mint CTA. */
.lp-bot .lp-badge {
  color: var(--accent-2);
  border-color: rgba(142, 151, 255, 0.4);
  background: rgba(142, 151, 255, 0.08);
}
.lp-bot .lp-cta {
  background: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 18px rgba(244, 194, 100, 0.25);
}
.lp-bot .lp-cta:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 7px 24px rgba(244, 194, 100, 0.4);
}
@media (max-width: 760px) {
  .lp-bot-hero { grid-template-columns: 1fr; text-align: center; }
  .lp-bot-copy .lp-h1, .lp-bot-copy .lp-lead { margin-left: auto; margin-right: auto; }
}
.lp-droplist { max-width: 720px; margin: 28px auto 0; text-align: left; }
/* Pagination control (e.g. /sneakers) */
.lp-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 28px auto 0; }
.lp-pager-btn {
  padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: var(--bg-elevated); color: var(--fg); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: border-color 0.14s ease, color 0.14s ease;
}
.lp-pager-btn:hover { border-color: var(--accent-2); }
.lp-pager-btn.is-off { opacity: 0.4; pointer-events: none; }
.lp-pager-pos { font-family: var(--label-font); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }

/* Shadow-separated cards on desktop — minimal containers. No hard borders or
   hairline rims; each card is a clean rounded tile lifted off the page by a soft
   depth shadow. Reads cleaner than bordered cells on this dark, container-light
   landing, and pairs with the luminosity stage + shoe shadow for a real,
   magazine-display feel. */
@media (min-width: 761px) {
  #results,
  .daily-grid,
  .drops-grid,
  .trending-grid,
  .movers-grid,
  .under-retail-grid {
    gap: 10px;
    background: transparent;
  }
  /* Landing tiles: rounded + clipped + a soft depth shadow. */
  .daily-grid > *,
  .drops-grid > *,
  .trending-grid > *,
  .movers-grid > *,
  .under-retail-grid > * {
    border: 0 !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.42) !important;
  }
  /* #results handled separately — no overflow clip, since its cards expand inline. */
  #results > * {
    border: 0 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.42) !important;
  }
}