/* =============================================================================
   GreySheet Design System — component styles for the GSID ViewItem redesign.

   All rules are scoped under `.gsds` (applied to the ViewItem content wrapper)
   so they never leak into the rest of the legacy site. Use design tokens from
   greysheet-tokens.css via var(--...) ONLY — never hand-code hex/px values.

   Sections:
     1. Foundations (scope reset + type utilities + price/market helpers)
     2. Atoms        (buttons, checkbox, search, tags, promo, pager)  [Phase B]
     3. Data display (hero, table, cards, sparkline, graph)           [Phase C]
     4. Cards        (coin / news / event / whitman tiles)            [Phase D]
     5. Page         (ViewItem composition)                           [Phase E]
   ============================================================================= */

/* ---------- 1. Foundations ------------------------------------------------- */

.gsds,
.gsds *,
.gsds *::before,
.gsds *::after {
  box-sizing: border-box;
}

.gsds {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-20);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Defensive reset: legacy stylesheets (theme-elements/custom-style/style.css) style bare
   elements site-wide; inside .gsds we re-anchor the properties they pollute so GSDS
   components render from a known baseline (this sheet also loads last — no !important). */
.gsds h1, .gsds h2, .gsds h3, .gsds h4, .gsds p {
  margin: 0 0 var(--spacing-gap-xs);
  padding: 0;
  font-family: var(--font-family-sans);
  color: inherit;
  text-transform: none;
  letter-spacing: var(--font-letter-spacing-normal);
}
.gsds a { color: var(--color-text-brand); }
.gsds a:hover { color: var(--color-text-brand); }
.gsds table { border-collapse: collapse; margin: 0; background: transparent; }
.gsds th, .gsds td { border: 0; background: transparent; font-family: inherit; }
.gsds button { text-transform: none; letter-spacing: normal; box-shadow: none; }
.gsds img { max-width: 100%; border: 0; }
.gsds label { margin: 0; font-weight: var(--font-weight-regular); }
.gsds ul, .gsds ol { margin: 0; padding: 0; list-style: none; }

/* Type-scale utilities — one class per semantic text token. */
.gsds-titling {
  font-family: var(--text-titling-font-family);
  font-weight: var(--text-titling-font-weight);
  font-size: var(--text-titling-font-size);
  line-height: var(--text-titling-line-height);
  letter-spacing: var(--text-titling-letter-spacing);
}
.gsds-h1 {
  font-family: var(--text-h1-font-family);
  font-weight: var(--text-h1-font-weight);
  font-size: var(--text-h1-font-size);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-letter-spacing);
}
.gsds-h2 {
  font-family: var(--text-h2-font-family);
  font-weight: var(--text-h2-font-weight);
  font-size: var(--text-h2-font-size);
  line-height: var(--text-h2-line-height);
  letter-spacing: var(--text-h2-letter-spacing);
}
.gsds-h3 {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  line-height: var(--text-h3-line-height);
  letter-spacing: var(--text-h3-letter-spacing);
}
.gsds-body {
  font-family: var(--text-medium-body-regular-font-family);
  font-weight: var(--text-medium-body-regular-font-weight);
  font-size: var(--text-medium-body-regular-font-size);
  line-height: var(--text-medium-body-regular-line-height);
}
.gsds-body-emphasis {
  font-family: var(--text-medium-body-emphasis-font-family);
  font-weight: var(--text-medium-body-emphasis-font-weight);
  font-size: var(--text-medium-body-emphasis-font-size);
  line-height: var(--text-medium-body-emphasis-line-height);
}
.gsds-small {
  font-family: var(--text-small-body-regular-font-family);
  font-weight: var(--text-small-body-regular-font-weight);
  font-size: var(--text-small-body-regular-font-size);
  line-height: var(--text-small-body-regular-line-height);
}
.gsds-caption {
  font-family: var(--text-captions-font-family);
  font-weight: var(--text-captions-font-weight);
  font-size: var(--text-captions-font-size);
  line-height: var(--text-captions-line-height);
  color: var(--color-text-secondary);
}

/* Tabular numeric data — Geist Mono, aligned figures. Use on every price value. */
.gsds-data {
  font-family: var(--text-small-data-font-family);
  font-size: var(--text-small-data-font-size);
  line-height: var(--text-small-data-line-height);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Price / market direction helpers (foreground on light surfaces). */
.gsds-up    { color: var(--color-market-up-light-bg); }
.gsds-down  { color: var(--color-market-down-light-bg); }
.gsds-flat  { color: var(--color-market-unchanged-light-bg); }
.gsds-cac   { color: var(--color-market-cac); }

/* Elevation helpers composed from the shadow tokens. */
.gsds-elev-low {
  box-shadow: var(--shadow-low-offset-x) var(--shadow-low-offset-y)
    var(--shadow-low-blur) var(--shadow-low-spread) var(--shadow-low-color);
}
.gsds-elev-high {
  box-shadow: var(--shadow-high-offset-x) var(--shadow-high-offset-y)
    var(--shadow-high-blur) var(--shadow-high-spread) var(--shadow-high-color);
}

/* ---------- 2. Atoms ------------------------------------------------------- */

/* Buttons (Figma "Buttons" 6:65). Compose a color + size modifier on .gs-btn:
     <a  class="gs-btn gs-btn--teal gs-btn--lg">Label</a>
     <button class="gs-btn gs-btn--indigo gs-btn--md"><i class="ph ph-plus"></i>Label</button>
     icon-only: add gs-btn--icon (square). Colors: teal (primary), indigo (secondary),
     light-indigo, ghost-dark (on light bg), ghost-light (on dark bg). Sizes lg/md/sm. */
.gsds .gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-gap-xs);
  height: 40px;
  padding: 0 var(--spacing-padding-md);
  border: var(--stroke-weight-stroke-default) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--text-large-button-font-family);
  font-size: var(--text-large-button-font-size);
  font-weight: var(--text-large-button-font-weight);
  line-height: var(--text-large-button-line-height);
  letter-spacing: var(--text-large-button-letter-spacing);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: var(--opacity-state-default);
  transition: opacity 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.gsds .gs-btn > .gs-btn__icon,
.gsds .gs-btn > i,
.gsds .gs-btn > svg {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
}
.gsds .gs-btn:hover { opacity: var(--opacity-state-hover); }
.gsds .gs-btn:active { opacity: var(--opacity-state-pressed); }
.gsds .gs-btn:focus-visible {
  outline: var(--stroke-weight-stroke-emphasis) solid var(--color-border-button-indigo);
  outline-offset: 1px;
}
.gsds .gs-btn:disabled,
.gsds .gs-btn.is-disabled {
  opacity: var(--opacity-state-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Button colors */
.gsds .gs-btn--teal {
  background: var(--color-surface-button-teal);
  border-color: var(--color-border-button-teal);
  color: var(--color-text-inverse);
}
.gsds .gs-btn--indigo {
  background: var(--color-surface-button-indigo);
  border-color: var(--color-border-button-indigo);
  color: var(--color-text-inverse);
}
.gsds .gs-btn--light-indigo {
  background: var(--color-surface-button-light-indigo);
  border-color: var(--color-border-button-light-indigo-ghost);
  color: var(--color-text-brand);
}
.gsds .gs-btn--ghost-dark {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-brand);
}
.gsds .gs-btn--ghost-dark:hover {
  opacity: var(--opacity-state-default);
  background: var(--color-surface-button-light-indigo);
}
.gsds .gs-btn--ghost-light {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-inverse);
}

/* Button sizes */
.gsds .gs-btn--lg {
  height: 40px;
  padding: 0 var(--spacing-padding-md);
  border-radius: var(--radius-md);
  gap: var(--spacing-gap-xs);
  font-size: var(--font-size-md);
}
.gsds .gs-btn--md {
  height: 36px;
  padding: 0 var(--spacing-padding-md-button);
  border-radius: var(--radius-md-button);
  gap: var(--spacing-gap-xs);
  font-size: var(--font-size-sm);
}
.gsds .gs-btn--md > .gs-btn__icon,
.gsds .gs-btn--md > i,
.gsds .gs-btn--md > svg { width: 20px; height: 20px; font-size: 20px; }
.gsds .gs-btn--sm {
  height: 30px;
  padding: 0 var(--spacing-padding-sm);
  border-radius: var(--radius-sm);
  gap: var(--spacing-gap-mini);
  font-size: var(--font-size-xs);
}
.gsds .gs-btn--sm > .gs-btn__icon,
.gsds .gs-btn--sm > i,
.gsds .gs-btn--sm > svg { width: 16px; height: 16px; font-size: 16px; }

/* Icon-only buttons are square */
.gsds .gs-btn--icon { padding: 0; }
.gsds .gs-btn--icon.gs-btn--lg { width: 40px; }
.gsds .gs-btn--icon.gs-btn--md { width: 36px; }
.gsds .gs-btn--icon.gs-btn--sm { width: 30px; }

/* Promo banner (Figma "promo-banner" 78:9851). */
.gsds .gs-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-sm) var(--spacing-padding-xs)
           var(--spacing-padding-sm) var(--spacing-padding-md);
  background: var(--color-promo-bg);
  border: var(--stroke-weight-stroke-default) solid var(--color-promo-stroke);
  border-radius: var(--radius-md);
  color: var(--color-promo-text);
}
.gsds .gs-promo__text {
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  line-height: var(--text-medium-body-regular-line-height);
}
.gsds .gs-promo__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.12s ease;
}
.gsds .gs-promo__action:hover { opacity: var(--opacity-state-hover); }
.gsds .gs-promo__action > i,
.gsds .gs-promo__action > svg { width: 16px; height: 16px; font-size: 16px; line-height: 1; }

/* Melt value tag — exact Figma style=2 (node 75:3484): white label block + full-height
   tinted value panel (market bg + left stroke) holding a circled arrow above the price. */
.gsds .gs-melt {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-low-offset-x) var(--shadow-low-offset-y)
    var(--shadow-low-blur) var(--shadow-low-spread) var(--shadow-low-color);
}
.gsds .gs-melt__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-padding-sm) var(--spacing-padding-md);
  white-space: nowrap;
}
.gsds .gs-melt__label {
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  line-height: var(--text-medium-body-regular-line-height);
  color: var(--color-text-primary);
}
.gsds .gs-melt__data {
  display: flex;
  gap: var(--spacing-gap-xs);
  font-family: var(--text-small-data-font-family);
  font-size: var(--text-small-data-font-size);
  line-height: var(--text-small-data-line-height);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}
.gsds .gs-melt__value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-padding-sm);
  border-left: var(--stroke-weight-stroke-default) solid transparent;
}
.gsds .gs-melt__value > i,
.gsds .gs-melt__value > svg { font-size: 24px; line-height: 1; }
.gsds .gs-melt__price {
  font-family: var(--text-large-body-emphasis-font-family);
  font-weight: var(--text-large-body-emphasis-font-weight);
  font-size: var(--text-large-body-emphasis-font-size);
  line-height: var(--text-large-body-emphasis-line-height);
}
/* Direction: % text + tinted value panel */
.gsds .gs-melt--up .gs-melt__pct { color: var(--color-market-up-light-bg); }
.gsds .gs-melt--up .gs-melt__value {
  background: var(--color-market-up-bg);
  border-left-color: var(--color-market-up-stroke);
  color: var(--color-market-up-light-bg);
}
.gsds .gs-melt--down .gs-melt__pct { color: var(--color-market-down-light-bg); }
.gsds .gs-melt--down .gs-melt__value {
  background: var(--color-market-down-bg);
  border-left-color: var(--color-market-down-stroke);
  color: var(--color-market-down-light-bg);
}
.gsds .gs-melt--flat .gs-melt__pct { color: var(--color-market-unchanged-light-bg); }
.gsds .gs-melt--flat .gs-melt__value {
  background: var(--color-market-unchanged-bg);
  border-left-color: var(--color-market-unchanged-stroke);
  color: var(--color-market-unchanged-light-bg);
}

/* Checkbox (Figma "boolean" 19:4044). Wrap a real input for accessibility. */
.gsds .gs-check { display: inline-flex; align-items: center; gap: var(--spacing-gap-xs); cursor: pointer; }
.gsds .gs-check__input { position: absolute; opacity: 0; width: 0; height: 0; }
.gsds .gs-check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: var(--stroke-weight-stroke-default) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface-raised);
  color: var(--color-text-inverse);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.gsds .gs-check__box > i,
.gsds .gs-check__box > svg { width: 14px; height: 14px; font-size: 14px; line-height: 1; opacity: 0; }
.gsds .gs-check__input:checked + .gs-check__box {
  background: var(--color-surface-button-indigo);
  border-color: var(--color-surface-button-indigo);
}
.gsds .gs-check__input:checked + .gs-check__box > i,
.gsds .gs-check__input:checked + .gs-check__box > svg { opacity: 1; }
.gsds .gs-check__input:focus-visible + .gs-check__box {
  outline: var(--stroke-weight-stroke-emphasis) solid var(--color-border-button-indigo);
  outline-offset: 1px;
}
.gsds .gs-check__input:disabled + .gs-check__box { opacity: var(--opacity-state-disabled); cursor: not-allowed; }
.gsds .gs-check__label {
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  line-height: var(--text-medium-body-regular-line-height);
  color: var(--color-text-primary);
}

/* Pager number chip (Figma "node" 100:6135). */
.gsds .gs-pager { display: inline-flex; align-items: center; gap: var(--spacing-gap-xs); }
.gsds .gs-pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--spacing-padding-xs);
  border-radius: var(--radius-xs);
  font-family: var(--text-small-data-font-family);
  font-size: var(--text-small-data-font-size);
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.gsds .gs-pager__num:hover { background: var(--color-surface-sunken); }
.gsds .gs-pager__num.is-active {
  background: var(--color-indicator-bg);
  color: var(--color-indicator-info);
}
.gsds .gs-pager__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.gsds .gs-pager__arrow:disabled { opacity: var(--opacity-state-disabled); cursor: not-allowed; }
.gsds .gs-pager__arrow > i,
.gsds .gs-pager__arrow > svg { width: 16px; height: 16px; font-size: 16px; }

/* Search bar (Figma "search bar" 19:3500). Default surface = sunken; add
   gs-search--raised for the white/outlined treatment. */
.gsds .gs-search {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--spacing-padding-xs);
  background: var(--color-surface-sunken);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.gsds .gs-search--raised { background: var(--color-surface-raised); border-color: var(--color-border-strong); }
.gsds .gs-search__cat {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.gsds .gs-search__cat-icon {
  position: absolute;
  left: var(--spacing-padding-md);
  pointer-events: none;
  font-size: 16px;
  color: var(--color-text-brand);
}
.gsds .gs-search__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-brand);
  font-family: var(--text-medium-body-emphasis-font-family);
  font-weight: var(--text-medium-body-emphasis-font-weight);
  font-size: var(--text-medium-body-emphasis-font-size);
  line-height: var(--text-medium-body-emphasis-line-height);
  padding: 0 var(--spacing-padding-sm) 0 calc(var(--spacing-padding-md) + 20px);
  height: 40px;
  cursor: pointer;
}
.gsds .gs-search__select::-ms-expand { display: none; }
.gsds .gs-search__divider {
  align-self: stretch;
  width: var(--stroke-weight-stroke-default);
  margin: var(--spacing-padding-sm) 0;
  background: var(--color-border-strong);
  flex: 0 0 auto;
}
.gsds .gs-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0 var(--spacing-padding-md);
  color: var(--color-text-primary);
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  line-height: var(--text-medium-body-regular-line-height);
}
.gsds .gs-search__input::placeholder { color: var(--color-text-tertiary); }
.gsds .gs-search__input:focus { outline: none; }
.gsds .gs-search__btn { flex: 0 0 auto; }

/* ---------- 3. Data display ------------------------------------------------ */

/* Hero image viewer (Figma "hero image viewer" 55:3967): one large image with
   ‹ › nav, "View All Images", country-flag badge, source attribution, and a
   thumbnail filmstrip below. */
.gsds .gs-hero { display: flex; flex-direction: column; gap: var(--spacing-gap-sm); }
.gsds .gs-hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: var(--spacing-padding-xl);
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-lg);
}
.gsds .gs-hero__viewall {
  position: absolute;
  top: var(--spacing-padding-md);
  right: var(--spacing-padding-md);
  z-index: 2;
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  line-height: var(--text-small-body-regular-line-height);
  color: var(--color-text-brand);
  text-decoration: none;
}
.gsds .gs-hero__viewall:hover { text-decoration: underline; }
.gsds .gs-hero__img { max-height: 320px; max-width: 100%; object-fit: contain; cursor: zoom-in; }
.gsds .gs-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--color-text-brand);
  font-size: 24px;
  cursor: pointer;
  z-index: 2;
}
.gsds .gs-hero__nav:hover { opacity: var(--opacity-state-hover); }
.gsds .gs-hero__nav:disabled { opacity: var(--opacity-state-disabled); cursor: default; }
.gsds .gs-hero__nav--prev { left: var(--spacing-padding-sm); }
.gsds .gs-hero__nav--next { right: var(--spacing-padding-sm); }
.gsds .gs-hero__flag {
  position: absolute;
  left: var(--spacing-padding-md);
  bottom: var(--spacing-padding-md);
  width: 40px;
  height: 30px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-low-offset-x) var(--shadow-low-offset-y)
    var(--shadow-low-blur) var(--shadow-low-spread) var(--shadow-low-color);
}
.gsds .gs-hero__flag img { width: 100%; height: 100%; object-fit: cover; }
.gsds .gs-hero__source {
  position: absolute;
  right: var(--spacing-padding-md);
  bottom: var(--spacing-padding-md);
  max-width: 55%;
  text-align: right;
  font-family: var(--text-captions-font-family);
  font-size: var(--text-captions-font-size);
  line-height: var(--text-captions-line-height);
  color: var(--color-text-tertiary);
}
.gsds .gs-hero__source a { color: var(--color-text-secondary); text-decoration: none; }
.gsds .gs-hero__source a:hover { text-decoration: underline; }
.gsds .gs-hero__thumbs {
  display: flex;
  gap: var(--spacing-gap-xs);
  overflow-x: auto;
  padding-bottom: var(--spacing-padding-xs);
}
.gsds .gs-hero__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: var(--spacing-padding-xs);
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.gsds .gs-hero__thumb.is-active {
  border-width: var(--stroke-weight-stroke-emphasis);
  border-color: var(--color-surface-button-indigo);
}
.gsds .gs-hero__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gsds .gs-hero__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-gap-xs);
  text-align: center;
  color: var(--color-text-secondary);
}
.gsds .gs-hero__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-brand);
  font-size: 32px;
}
/* Lightbox overlay for the enlarged image */
.gsds .gs-hero__lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1080;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-padding-xl);
  background: rgba(20, 23, 28, 0.82);
}
.gsds .gs-hero__lightbox.is-open { display: flex; }
.gsds .gs-hero__lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.gsds .gs-hero__lightbox-close {
  position: absolute;
  top: var(--spacing-padding-xl);
  right: var(--spacing-padding-xl);
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--color-text-inverse);
  font-size: 28px;
  cursor: pointer;
}

/* Pricing values: Table + Card views with a Table/Card toggle
   (Figma "table" 19:3718, "value cards" 26:714). Shares the same pricing data. */
.gsds .gs-values__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-sm);
  margin-bottom: var(--spacing-gap-sm);
  flex-wrap: wrap;
}

/* Segmented Table/Card toggle */
.gsds .gs-seg {
  display: inline-flex;
  gap: var(--spacing-padding-xs);
  padding: var(--spacing-padding-xs);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}
.gsds .gs-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  height: 32px;
  padding: 0 var(--spacing-padding-md);
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  cursor: pointer;
}
.gsds .gs-seg__btn > i { font-size: 18px; }
.gsds .gs-seg__btn.is-active {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-low-offset-x) var(--shadow-low-offset-y)
    var(--shadow-low-blur) var(--shadow-low-spread) var(--shadow-low-color);
}

/* Delta (up/down) + CAC badge + subscribe lock — shared by table & cards */
.gsds .gs-delta { font-size: 14px; vertical-align: middle; }
.gsds .gs-delta--up { color: var(--color-market-up-light-bg); }
.gsds .gs-delta--down { color: var(--color-market-down-light-bg); }
.gsds .gs-cac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 var(--spacing-padding-xs);
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-market-cac);
  color: var(--color-text-inverse);
  font-family: var(--text-captions-font-family);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
}
.gsds .gs-cac > i { font-size: 11px; }
.gsds .gs-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  height: 26px;
  padding: 0 var(--spacing-padding-sm);
  border-radius: var(--radius-full);
  background: var(--color-surface-button-teal);
  color: var(--color-text-inverse);
  font-family: var(--text-small-button-font-family);
  font-size: var(--text-small-button-font-size);
  text-decoration: none;
  white-space: nowrap;
}
.gsds .gs-lock > i { font-size: 14px; }
.gsds .gs-muted { color: var(--color-text-tertiary); }

/* Table view */
.gsds .gs-ptable-wrap {
  overflow-x: auto;
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.gsds .gs-ptable { width: 100%; border-collapse: collapse; }
.gsds .gs-ptable thead th {
  padding: var(--spacing-padding-md);
  text-align: right;
  vertical-align: bottom;
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-family: var(--text-small-body-emphasis-font-family);
  font-weight: var(--text-small-body-emphasis-font-weight);
  font-size: var(--text-small-body-emphasis-font-size);
  line-height: var(--text-small-body-emphasis-line-height);
  white-space: nowrap;
}
.gsds .gs-ptable thead th:first-child { text-align: left; }
.gsds .gs-ptable thead th small { display: block; color: var(--color-text-tertiary); font-weight: var(--font-weight-regular); }
.gsds .gs-ptable tbody td {
  padding: var(--spacing-padding-md);
  text-align: right;
  background: var(--color-surface-sunken);
  border-top: var(--stroke-weight-stroke-default) solid var(--color-surface-raised);
  white-space: nowrap;
}
.gsds .gs-ptable tbody td:first-child { text-align: left; }
.gsds .gs-ptable tbody tr:hover td { background: var(--color-grey-200); }
.gsds .gs-ptable__grade {
  font-family: var(--text-medium-body-emphasis-font-family);
  font-weight: var(--text-medium-body-emphasis-font-weight);
  color: var(--color-text-primary);
  text-decoration: none;
}
.gsds .gs-ptable__grade:hover { color: var(--color-text-brand); }
.gsds .gs-ptable__val {
  font-family: var(--text-small-data-font-family);
  font-size: var(--text-small-data-font-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  text-decoration: none;
}
.gsds .gs-ptable__cac { text-align: center; }

/* Card view (Figma value card 26:714) — a horizontal swipe rail: fixed-width cards
   inside .gs-rail__track (flex, overflow-x:auto — see "Carousel rail" further down),
   with .gs-rail__nav ‹ › below. Sizing/colors match the exact Figma dev-mode CSS for
   this component: 174px card, --color-surface-sunken fill (#EDEFF3, a "well" tone —
   not the raised-white card used elsewhere), --color-border-strong (#DDE1E8) border
   AND divider rule (border-default is the same color as the sunken fill and would be
   invisible against it), 44×16 sparklines. */
.gsds .gs-pcard {
  flex: 0 0 auto;
  width: 174px;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-padding-mini-card);
  background: var(--color-surface-sunken);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  position: relative;
}
/* Every value card also carries the shared .gs-card shell class. .gs-card's own
   background/border/radius (defined later in the cascade, equal specificity) would
   otherwise silently win over the sunken-well styling above — bump specificity with
   the compound selector instead of relying on file order. */
.gsds .gs-pcard.gs-card {
  background: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.gsds .gs-pcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-md) var(--spacing-padding-lg);
}
.gsds .gs-pcard__grade {
  font-family: var(--text-h2-font-family);
  font-weight: var(--text-h2-font-weight);
  font-size: var(--text-h2-font-size);
  line-height: var(--text-h2-line-height);
  color: var(--color-text-primary);
  text-decoration: none;
}
/* Price row: label + bold value stacked left, sparkline + % stacked right */
.gsds .gs-pcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
}
.gsds .gs-pcard__rowinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.gsds .gs-pcard__label {
  font-family: var(--text-captions-font-family);
  font-size: var(--text-captions-font-size);
  color: var(--color-text-secondary);
}
.gsds .gs-pcard__val {
  font-family: var(--text-medium-body-emphasis-font-family);
  font-weight: var(--text-medium-body-emphasis-font-weight);
  font-size: var(--text-medium-body-emphasis-font-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}
.gsds .gs-pcard__trend { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; flex: 0 0 auto; width: 44px; }
.gsds .gs-pcard__spark { display: block; width: 44px; height: 16px; }
.gsds .gs-pcard__pct {
  width: 44px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--text-small-data-font-family);
  font-size: var(--text-small-data-font-size);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text-secondary);
}
.gsds .gs-pcard__pct.is-up { color: var(--color-market-up-light-bg); }
.gsds .gs-pcard__pct.is-down { color: var(--color-market-down-light-bg); }
/* Section divider inside value cards: caption centered in a rule (Figma "Wholesale"/"Retail") */
.gsds .gs-pcard__divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  color: var(--color-text-tertiary);
  font-family: var(--text-captions-font-family);
  font-size: var(--text-captions-font-size);
  justify-content: center;
  margin: var(--spacing-gap-mini) 0;
}
.gsds .gs-pcard__divider::before,
.gsds .gs-pcard__divider::after {
  content: "";
  flex: 1 1 auto;
  border-top: var(--stroke-weight-stroke-default) solid var(--color-border-strong);
}
/* Retail-only gate (Figma "card_gated"): blur just the wholesale rows, small
   centered "Subscribe" pill over them — CPG stays fully visible below. */
.gsds .gs-pcard__section { position: relative; display: flex; flex-direction: column; gap: var(--spacing-gap-xs); }
.gsds .gs-pcard__section--gated > .gs-pcard__row { filter: blur(4px); pointer-events: none; user-select: none; }
.gsds .gs-pcard__section-gate { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* NONE-tier gate (Figma no-access card, node 78-4714): nothing on this card is
   entitled (not even the CPG teaser), so blur the whole body behind one overlay
   instead of stacking a lock on every row. */
.gsds .gs-pcard__body { position: relative; display: flex; flex-direction: column; gap: var(--spacing-gap-xs); padding: var(--spacing-padding-lg); }
.gsds .gs-pcard__body--gated > *:not(.gs-pcard__gate-overlay) { filter: blur(4px); pointer-events: none; user-select: none; }
.gsds .gs-pcard__gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-gap-xs);
  text-align: center;
  padding: var(--spacing-padding-sm);
  background: rgba(247, 248, 250, 0.65);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.gsds .gs-pcard__gate-text {
  max-width: 190px;
  margin: 0;
  font-family: var(--text-captions-font-family);
  font-size: var(--text-captions-font-size);
  color: var(--color-text-secondary);
}

/* Overall price-history graph container */
.gsds .gs-graph {
  position: relative;
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--spacing-padding-xl);
}
.gsds .gs-graph__canvas { min-height: 260px; }
.gsds .gs-graph__gate,
.gsds .gs-values__gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-gap-xs);
  text-align: center;
  padding: var(--spacing-gap-lg);
  color: var(--color-text-secondary);
}
.gsds .gs-graph__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-sm);
  margin-bottom: var(--spacing-gap-xs);
}
.gsds .gs-graph__title {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  color: var(--color-text-primary);
}
.gsds .gs-graph__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--spacing-padding-sm);
  border-radius: var(--radius-full);
  font-family: var(--text-small-body-emphasis-font-family);
  font-weight: var(--text-small-body-emphasis-font-weight);
  font-size: var(--text-small-body-emphasis-font-size);
}
.gsds .gs-graph__delta--up { background: var(--color-market-up-bg); color: var(--color-market-up-light-bg); }
.gsds .gs-graph__delta--down { background: var(--color-market-down-bg); color: var(--color-market-down-light-bg); }
.gsds .gs-graph__delta--flat { background: var(--color-market-unchanged-bg); color: var(--color-market-unchanged-light-bg); }
/* Card footer: grade dropdown left, single-series legend right (Figma graphs footer bar) */
.gsds .gs-graph__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-sm);
  margin-top: var(--spacing-gap-xs);
  padding-top: var(--spacing-padding-sm);
  border-top: var(--stroke-weight-stroke-default) solid var(--color-border-default);
}
.gsds .gs-graph__select {
  appearance: auto;
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  font-family: var(--text-small-body-emphasis-font-family);
  font-weight: var(--text-small-body-emphasis-font-weight);
  font-size: var(--text-small-body-emphasis-font-size);
  padding: 2px var(--spacing-padding-sm);
  cursor: pointer;
}
.gsds .gs-graph__legend {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-mini);
  color: var(--color-text-secondary);
  font-family: var(--text-small-body-font-family);
  font-size: var(--text-small-body-font-size);
}
.gsds .gs-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-market-up-light-bg);
  display: inline-block;
}
/* Gated (non-subscriber) state: blurred chart + centered subscribe pill */
.gsds .gs-graph--gated .gs-graph__canvas { filter: blur(6px); pointer-events: none; opacity: 0.6; }
.gsds .gs-graph__gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-gap-xs);
  text-align: center;
  padding: var(--spacing-gap-md);
}

/* ---------- 4. Cards ------------------------------------------------------- */

/* Shared card shell */
.gsds .gs-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-low-offset-x) var(--shadow-low-offset-y)
    var(--shadow-low-blur) var(--shadow-low-spread) var(--shadow-low-color);
}
.gsds .gs-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gsds .gs-clamp-2 { -webkit-line-clamp: 2; }
.gsds .gs-clamp-3 { -webkit-line-clamp: 3; }

/* Coin / marketplace card (Figma "coin cards" 20:4280) */
.gsds .gs-coincard { padding: var(--spacing-padding-xl); gap: var(--spacing-gap-xs); }
.gsds .gs-coincard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
}
.gsds .gs-coincard__price {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  color: var(--color-text-primary);
}
.gsds .gs-coincard__price--sold { color: var(--color-market-up-light-bg); }
.gsds .gs-coincard__price--realized { color: var(--color-text-secondary); }
.gsds .gs-coincard__title {
  font-family: var(--text-medium-body-emphasis-font-family);
  font-weight: var(--text-medium-body-emphasis-font-weight);
  font-size: var(--text-medium-body-emphasis-font-size);
  line-height: var(--text-medium-body-emphasis-line-height);
  color: var(--color-text-primary);
  text-decoration: none;
}
.gsds .gs-coincard__meta { font-family: var(--text-captions-font-family); font-size: var(--text-captions-font-size); color: var(--color-text-secondary); }
.gsds .gs-coincard__img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  margin: var(--spacing-gap-xs) 0;
}
.gsds .gs-coincard__img img { max-width: 100%; max-height: 160px; object-fit: contain; }
.gsds .gs-coincard__img img.is-round { border-radius: var(--radius-full); }
.gsds .gs-coincard__foot { margin-top: auto; }
.gsds .gs-coincard__foot .gs-btn { width: 100%; }

/* Article (news / event) card (Figma "news/event cards" 141:9158) */
.gsds .gs-article__media { position: relative; padding: var(--spacing-padding-md); }
.gsds .gs-article__media img { width: 100%; border-radius: var(--radius-sm); display: block; }
.gsds .gs-article__badge {
  position: absolute;
  right: calc(var(--spacing-padding-md) + var(--spacing-padding-sm));
  bottom: calc(var(--spacing-padding-md) + var(--spacing-padding-sm));
  padding: 2px var(--spacing-padding-sm);
  border-radius: var(--radius-xs);
  background: var(--color-surface-button-indigo);
  color: var(--color-text-inverse);
  font-family: var(--text-captions-font-family);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
}
.gsds .gs-article__body { padding: 0 var(--spacing-padding-xl) var(--spacing-padding-md); display: flex; flex-direction: column; gap: var(--spacing-gap-xs); }
.gsds .gs-article__title {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  line-height: var(--text-h3-line-height);
  color: var(--color-text-primary);
  text-decoration: none;
}
.gsds .gs-article__excerpt {
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  line-height: var(--text-small-body-regular-line-height);
  color: var(--color-text-secondary);
}
.gsds .gs-article__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-md) var(--spacing-padding-xl);
  border-top: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  color: var(--color-text-secondary);
}
.gsds .gs-article__byline { display: inline-flex; align-items: center; gap: var(--spacing-gap-xs); color: var(--color-text-brand); font-weight: var(--font-weight-semibold); }
.gsds .gs-article__date { color: var(--color-text-tertiary); }

/* Whitman / product card (Figma "whitman cards" 139:8381) */
.gsds .gs-prodcard { padding: var(--spacing-padding-xl); gap: var(--spacing-gap-xs); }
.gsds .gs-prodcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-gap-xs); }
.gsds .gs-prodcard__price {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  color: var(--color-text-primary);
}
.gsds .gs-prodcard__title { font-family: var(--text-medium-body-regular-font-family); font-size: var(--text-medium-body-regular-font-size); color: var(--color-text-secondary); }
.gsds .gs-prodcard__thumb { width: 32px; height: 32px; border-radius: var(--radius-full); overflow: hidden; flex: 0 0 auto; }
.gsds .gs-prodcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gsds .gs-prodcard__img { display: flex; align-items: center; justify-content: center; height: 180px; margin: var(--spacing-gap-xs) 0; }
.gsds .gs-prodcard__img img { max-width: 100%; max-height: 180px; object-fit: contain; }
.gsds .gs-prodcard__foot { margin-top: auto; }
.gsds .gs-prodcard__foot .gs-btn { width: 100%; }

/* ---------- 5. Page (ViewItem composition — pass 2) ------------------------ */

/* Top bar: promo banner (left) + search (right); stacked on mobile */
.gsds .gs-topbar { display: flex; gap: var(--spacing-gap-sm); align-items: stretch; }
.gsds .gs-topbar > .gs-promo { flex: 1 1 50%; }
.gsds .gs-topbar > .gs-search-wrap { flex: 1 1 50%; }
.gsds .gs-topbar--searchonly > .gs-search-wrap { flex: 1 1 100%; }
@media (max-width: 991px) {
  .gsds .gs-topbar { flex-direction: column; }
}

/* Hero grid: desktop = media | header/details; mobile = header, media, details */
.gsds .gs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:
    "media header"
    "media details";
  grid-template-rows: auto 1fr;
  gap: var(--spacing-gap-md);
  align-items: start;
}
.gsds .gs-hero-grid__media { grid-area: media; min-width: 0; }
.gsds .gs-hero-grid__header { grid-area: header; min-width: 0; }
.gsds .gs-hero-grid__details { grid-area: details; min-width: 0; }
@media (max-width: 991px) {
  .gsds .gs-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "header" "media" "details";
    grid-template-rows: none;
  }
}

/* Hero header block: title/subtitle left, heart + melt tag right */
.gsds .gs-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-gap-sm); }
.gsds .gs-detail__subtitle {
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  line-height: var(--text-medium-body-regular-line-height);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-gap-mini);
}
.gsds .gs-detail__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-gap-xs); flex: 0 0 auto; }
.gsds .gs-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 26px;
  cursor: pointer;
}
.gsds .gs-fav.is-fav { color: var(--color-market-down-light-bg); }
.gsds .gs-fav:hover { opacity: var(--opacity-state-hover); }

/* Hero details text blocks */
.gsds .gs-detail__text {
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  line-height: var(--text-medium-body-regular-line-height);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-gap-sm);
}
.gsds .gs-detail__h {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  line-height: var(--text-h3-line-height);
  color: var(--color-text-primary);
  margin: var(--spacing-gap-sm) 0 var(--spacing-gap-mini);
}

/* Sponsors: single-line horizontal strip with slow side-to-side auto-scroll */
.gsds .gs-sponsors { margin-top: var(--spacing-gap-md); text-align: center; }
.gsds .gs-sponsors__title {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  color: var(--color-text-primary);
}
.gsds .gs-sponsors__sub {
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-gap-xs);
}
.gsds .gs-sponsors__strip { overflow: hidden; }
.gsds .gs-sponsors__track {
  display: flex;
  gap: var(--spacing-gap-sm);
  width: max-content;
  animation: gs-sponsors-pan 30s ease-in-out infinite alternate;
}
.gsds .gs-sponsors__strip:hover .gs-sponsors__track { animation-play-state: paused; }
@keyframes gs-sponsors-pan {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}
.gsds .gs-sponsors__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 120px;
  height: 72px;
  padding: var(--spacing-padding-sm);
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-sm);
}
.gsds .gs-sponsors__item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Catalog Information panel */
.gsds .gs-catinfo {
  margin-top: var(--spacing-gap-md);
  border-top: var(--stroke-weight-stroke-default) solid var(--color-border-strong);
  padding-top: var(--spacing-gap-sm);
}
.gsds .gs-catinfo__gsid {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-sm) var(--spacing-padding-md);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  margin: var(--spacing-gap-xs) 0 var(--spacing-gap-sm);
}
.gsds .gs-catinfo__gsid-label {
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  color: var(--color-text-secondary);
}
.gsds .gs-catinfo__gsid-val {
  font-family: var(--text-medium-body-emphasis-font-family);
  font-weight: var(--text-medium-body-emphasis-font-weight);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}
.gsds .gs-catinfo__copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 18px;
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.gsds .gs-catinfo__copy:hover { background: var(--color-surface-raised); color: var(--color-text-brand); }
.gsds .gs-catinfo__row {
  display: flex;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-xs) 0;
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  line-height: var(--text-small-body-regular-line-height);
}
.gsds .gs-catinfo__k { color: var(--color-text-secondary); flex: 0 0 auto; }
.gsds .gs-catinfo__v { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

/* Catalog identifier chips (GSID / PCGS# / etc.) — melt-tag-like */
.gsds .gs-idchip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-padding-sm) var(--spacing-padding-md);
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.gsds .gs-idchip__label {
  font-family: var(--text-captions-font-family);
  font-size: var(--text-captions-font-size);
  color: var(--color-text-secondary);
}
.gsds .gs-idchip__val {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  color: var(--color-text-primary);
}
.gsds .gs-values__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--spacing-gap-xs);
  margin-bottom: var(--spacing-gap-sm);
}

/* Graph row: two cards desktop; mobile shows one at a time via toggle */
.gsds .gs-graphrow { display: flex; gap: var(--spacing-gap-md); align-items: stretch; }
.gsds .gs-graphrow > .gs-graph { flex: 1 1 50%; min-width: 0; }
.gsds .gs-graphrow__toggle { display: none; margin-bottom: var(--spacing-gap-xs); }
@media (max-width: 991px) {
  .gsds .gs-graphrow { flex-direction: column; }
  .gsds .gs-graphrow__toggle { display: inline-flex; }
  .gsds .gs-graphrow.show-history > .gs-graph--bygrade { display: none; }
  .gsds .gs-graphrow.show-bygrade > .gs-graph--history { display: none; }
}

/* Filter sidebar */
.gsds .gs-flag {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  flex: 0 0 auto;
}
.gsds .gs-filters { display: flex; flex-direction: column; gap: var(--spacing-gap-md); }
.gsds .gs-filters__group { display: flex; flex-direction: column; gap: var(--spacing-gap-xs); }
.gsds .gs-filters__title {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  color: var(--color-text-primary);
}
@media (max-width: 991px) {
  .gsds .gs-filters { flex-direction: row; flex-wrap: wrap; gap: var(--spacing-gap-sm); }
}

/* Values pagination footer */
.gsds .gs-values__pager {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-sm);
  margin-top: var(--spacing-gap-sm);
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  color: var(--color-text-secondary);
}
.gsds .gs-values__pager .gs-pager__arrow {
  width: 36px;
  height: 36px;
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
}

/* Blurred gated value (retail-only sees wholesale labels but not values) */
.gsds .gs-blurval {
  filter: blur(5px);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  color: var(--color-text-secondary);
}

/* Related items rail */
.gsds .gs-related {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-sm);
  padding: var(--spacing-padding-md);
}
.gsds .gs-related__img { width: 64px; height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.gsds .gs-related__img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-full); }
.gsds .gs-related__name {
  font-family: var(--text-medium-body-emphasis-font-family);
  font-weight: var(--text-medium-body-emphasis-font-weight);
  font-size: var(--text-medium-body-emphasis-font-size);
  color: var(--color-text-primary);
}
.gsds .gs-related__range {
  font-family: var(--text-small-data-font-family);
  font-size: var(--text-small-data-font-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
}

/* Carousel rail (Figma below-values sections): left rail = title + subtext + See all;
   card track at right with the ‹ › pager BELOW it, left-aligned. */
.gsds .gs-rail__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-gap-mini); }
.gsds .gs-rail__title { margin: 0; }
.gsds .gs-rail__sub {
  font-family: var(--text-large-body-regular-font-family);
  font-size: var(--text-large-body-regular-font-size);
  line-height: var(--text-large-body-regular-line-height);
  color: var(--color-text-secondary);
}
.gsds .gs-rail__seeall { margin-top: var(--spacing-gap-xs); }
.gsds .gs-rail__nav { display: flex; gap: var(--spacing-gap-sm); margin-top: var(--spacing-gap-sm); }
.gsds .gs-rail__track {
  display: flex;
  gap: var(--spacing-gap-md);
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--spacing-padding-xs);
}
.gsds .gs-rail__track::-webkit-scrollbar { display: none; }
.gsds .gs-rail__track > * { scroll-snap-align: start; }
@media (max-width: 991px) {
  .gsds .gs-rail__head { margin-bottom: var(--spacing-gap-sm); }
}

/* Rail card sizing — matches Figma coin-card 214×285 */
.gsds .gs-railcard {
  flex: 0 0 auto;
  width: 214px;
  min-height: 285px;
  display: flex;
  flex-direction: column;
}
/* .gs-card's height:100% defeats the track's default align-items:stretch (percentage
   against an indefinite track height computes as auto), so cards sized to their own
   content and rails came out ragged. height:auto restores stretch: every card in a
   rail row equalizes to the tallest, with __img (flex:1) absorbing the slack. */
.gsds .gs-rail__track > .gs-card { height: auto; }
/* Auction result card (Figma layout: title head, image, price+date/house footer) */
.gsds .gs-railcard--apr .gs-railcard__title {
  min-height: calc(2 * var(--text-small-body-regular-line-height, 20px));
}
.gsds .gs-railcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-md);
  background: var(--color-surface-raised);
}
.gsds .gs-railcard__price {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  line-height: var(--text-h3-line-height);
  color: var(--color-text-primary);
}
.gsds .gs-railcard__price--sold { color: var(--color-market-up-light-bg); }
.gsds .gs-railcard__price--realized { color: var(--color-text-secondary); }
.gsds .gs-railcard__title {
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  line-height: var(--text-small-body-regular-line-height);
  color: var(--color-text-secondary);
  text-decoration: none;
}
.gsds .gs-railcard__meta {
  font-family: var(--text-captions-font-family);
  font-size: var(--text-captions-font-size);
  line-height: var(--text-captions-line-height);
  color: var(--color-text-tertiary);
}
.gsds .gs-railcard__house {
  flex: 0 0 auto;
  max-width: 45%;
  text-align: right;
  font-family: var(--text-captions-font-family);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.gsds .gs-railcard__img {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: var(--spacing-padding-sm);
  background: var(--color-surface-sunken);
}
.gsds .gs-railcard__img img { max-width: 100%; max-height: 150px; object-fit: contain; }
.gsds .gs-railcard__img--white { background: var(--color-surface-raised); }
.gsds .gs-railcard__img img.is-round { border-radius: var(--radius-full); }
.gsds .gs-railcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-md);
  background: var(--color-surface-raised);
}
.gsds .gs-railcard__foot .gs-btn { flex: 1 1 auto; }

/* Full-width News / Events bands with centered headers */
.gsds .gs-band { padding: var(--spacing-gap-lg) 0; }
.gsds .gs-band__title {
  text-align: center;
  margin-bottom: var(--spacing-gap-md);
}
.gsds .gs-article__loc {
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  color: var(--color-text-secondary);
}
.gsds .gs-article__cal {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  color: var(--color-text-brand);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================================
   ViewItem-v2 refinement pass 3.
   Appended at end-of-file so equal-specificity overrides win the cascade over
   earlier rules and any leaked global Bootstrap styles.
   ========================================================================== */

/* #1 Promo banner: never underline; bold text on hover (defeats Bootstrap a:hover) */
.gsds .gs-promo,
.gsds .gs-promo:hover,
.gsds .gs-promo:hover .gs-promo__text { text-decoration: none; }
.gsds .gs-promo:hover .gs-promo__text { font-weight: var(--font-weight-bold); }

/* #2 Breadcrumb links: underline on hover (was inline text-decoration:none) */
.gsds .gs-crumb { color: var(--color-text-secondary); text-decoration: none; }
.gsds .gs-crumb:hover { color: var(--color-text-brand); text-decoration: underline; }
.gsds .gs-crumb--current { color: var(--color-text-primary); }

/* #3 Hero lightbox caption — Title + realized + source under the enlarged image */
.gsds .gs-hero__lightbox.is-open { flex-direction: column; gap: var(--spacing-gap-md); }
.gsds .gs-hero__lightbox img { max-height: 78vh; }
.gsds .gs-hero__lightbox-cap {
  max-width: 92vw;
  text-align: center;
  color: var(--color-text-inverse);
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  line-height: var(--text-small-body-regular-line-height);
}
.gsds .gs-hero__lightbox-cap:empty { display: none; }
.gsds .gs-hero__lightbox-cap a { color: var(--color-text-inverse); text-decoration: underline; }

/* #5 / #6 Collapsible sections (descriptions, catalog info). Collapsed = clamp to
   a few lines with the bottom text masked to transparent (bg-independent fade) +
   a Show more/less toggle. The shared JS drops --fits when it all already fits. */
.gsds .gs-collapse { position: relative; }
.gsds .gs-collapse__body {
  overflow: hidden;
  max-height: var(--gs-collapse-max, 5.5em);
  transition: max-height 0.2s ease;
}
.gsds .gs-collapse:not(.is-open) .gs-collapse__body {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.gsds .gs-collapse.is-open .gs-collapse__body { max-height: none; }
.gsds .gs-collapse--rows { --gs-collapse-max: 7.6em; }
.gsds .gs-collapse--fits .gs-collapse__toggle { display: none; }
.gsds .gs-collapse--fits .gs-collapse__body { -webkit-mask-image: none; mask-image: none; }
.gsds .gs-collapse__toggle {
  display: inline-flex;
  align-items: center;
  margin-top: var(--spacing-gap-xs);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-brand);
  font-family: var(--text-medium-body-emphasis-font-family);
  font-weight: var(--text-medium-body-emphasis-font-weight);
  font-size: var(--text-medium-body-emphasis-font-size);
  cursor: pointer;
}
.gsds .gs-collapse__toggle:hover { text-decoration: underline; }
/* No-access "Show more": disabled affordance + lock (item 3, CEO round) */
.gsds .gs-collapse__toggle.is-locked { gap: 4px; color: var(--color-text-tertiary); cursor: default; }
.gsds .gs-collapse__toggle.is-locked:hover { text-decoration: none; }
.gsds .gs-collapse__toggle.is-locked > i { font-size: 14px; }

/* #7 Related card "Worth:" prefix — regular weight, secondary color */
.gsds .gs-railcard__worth { font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }

/* #10 Graph header controls: grade dropdown + delta chip, stacked top-right */
.gsds .gs-graph__head-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-gap-mini);
}
.gsds .gs-graph__head .gs-graph__select { min-width: 92px; }

/* ---- Part B: Lukas design-polish, matched to Figma components ---- */

/* Content background = surface/page (#F7F8FA) so white cards/tables read as raised */
.gsds { background: var(--color-surface-page); }

/* Buttons (6:65): anchor-buttons must not pick up Bootstrap's a:hover underline;
   state changes are opacity-only, never decoration/color. */
.gsds a.gs-btn:hover,
.gsds .gs-btn:hover,
.gsds .gs-btn:focus,
.gsds .gs-btn:active { text-decoration: none; }

/* Search bar (19:3500): Search button OUTSIDE the field; overall shorter height */
.gsds .gs-search { background: transparent; border: 0; padding: 0; gap: var(--spacing-gap-sm); align-items: stretch; }
.gsds .gs-search__field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--spacing-padding-xs);
  background: var(--color-surface-sunken);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-md);
}
.gsds .gs-search--raised .gs-search__field { background: var(--color-surface-raised); border-color: var(--color-border-strong); }
.gsds .gs-search__select { height: 36px; }
/* height:auto lets align-self:stretch win over .gs-btn--md's fixed 36px so the
   button matches the taller field (Figma 19:3500). */
.gsds .gs-search__btn { align-self: stretch; height: auto; }

/* Cards: unified 16px radius (rail cards + news/event + gate boxes) */
.gsds .gs-card { border-radius: var(--radius-lg); }

/* Rail cards (coin-cards style 2, 20:4280): white image body, divided header/footer,
   hug (not full-width) button; carousel fades at its left/right edges. */
.gsds .gs-railcard__img { background: var(--color-surface-raised); }
.gsds .gs-railcard__head { border-bottom: var(--stroke-weight-stroke-default) solid var(--color-border-default); }
.gsds .gs-railcard__foot { border-top: var(--stroke-weight-stroke-default) solid var(--color-border-default); }
.gsds .gs-railcard__foot .gs-btn { flex: 0 0 auto; margin-left: auto; margin-right: auto; }
/* Whitman / product cards (139:8381): grey header + footer around the white image */
.gsds .gs-railcard--product .gs-railcard__head,
.gsds .gs-railcard--product .gs-railcard__foot { background: var(--color-surface-page); }
.gsds .gs-rail__track {
  /* Scroll-aware edge fades — JS (gsUpdateRailFade) sets --fade-l/--fade-r per track.
     Defaults = no left fade (first card crisp at rest), right fade hinting more cards. */
  --fade-l: 0px;
  --fade-r: 24px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}

/* News / Event cards (141:9158): flush top image (no margin), compact banner */
.gsds .gs-article__media { padding: 0; }
.gsds .gs-article__media img {
  width: 100%;
  border-radius: 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Hero: coin image ~15% smaller; container drop shadow; filmstrip edge fade */
.gsds .gs-hero__img { max-height: 272px; }
.gsds .gs-hero__stage {
  box-shadow: var(--shadow-low-offset-x) var(--shadow-low-offset-y)
    var(--shadow-low-blur) var(--shadow-low-spread) var(--shadow-low-color);
}
.gsds .gs-hero__thumbs {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}

/* Sponsors: smaller tiles w/ drop shadow, faster pan, side edge fade */
.gsds .gs-sponsors__item {
  width: 96px;
  height: 60px;
  box-shadow: var(--shadow-low-offset-x) var(--shadow-low-offset-y)
    var(--shadow-low-blur) var(--shadow-low-spread) var(--shadow-low-color);
}
.gsds .gs-sponsors__track { animation-duration: 18s; }
.gsds .gs-sponsors__strip {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

/* Values table (19:3718): rounded bordered container, white rows w/ zebra,
   grey cell dividers (was white). Hover rule last so it wins over the zebra. */
.gsds .gs-ptable-wrap { border-radius: var(--radius-lg); }
.gsds .gs-ptable thead th { background: var(--color-surface-raised); }
.gsds .gs-ptable tbody td { background: var(--color-surface-raised); border-top-color: var(--color-border-default); }
.gsds .gs-ptable tbody tr:nth-child(even) td { background: var(--color-surface-page); }
.gsds .gs-ptable tbody tr:hover td { background: var(--color-grey-200); }

/* Sparkline mini-charts: soft drop shadow like the melt-value tag */
.gsds .gs-pcard__spark svg { filter: drop-shadow(0 2px 4px var(--shadow-low-color)); }

/* ============================================================================
   Part C — mobile (<= 991px). Implements the mobile Figma frame (node 95:5106)
   and the filter bottom-sheet open-state (node 55:4707). Appended at EOF so
   these mobile rules win at equal specificity over the desktop rules above and
   over the earlier @media (max-width:991px) blocks in section 5.
   Desktop (>= 992px) is untouched: everything mobile-only lives in the media
   query or is toggled from a mobile-only display.
   ========================================================================== */

/* Breakpoint visibility utilities (991px = Bootstrap lg boundary the page targets) */
@media (max-width: 991px) { .gsds .gs-only-desktop { display: none !important; } }
@media (min-width: 992px) { .gsds .gs-only-mobile { display: none !important; } }

/* Values head controls cluster: [Shop related (mobile)] ... [filter btn | table/card toggle].
   Shop, filter button + divider are mobile-only (hidden on desktop). */
.gsds .gs-values__controls { display: flex; align-items: center; gap: var(--spacing-gap-xs); }
.gsds .gs-values__controls-right { display: flex; align-items: center; gap: var(--spacing-gap-xs); }
.gsds .gs-filter-btn,
.gsds .gs-values__controls-divider { display: none; }
.gsds .gs-filter-btn {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  font-size: 20px;
  cursor: pointer;
}
.gsds .gs-filter-btn:hover { background: var(--color-grey-200); }
.gsds .gs-values__controls-divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: var(--color-border-default);
}

/* Filter scrim (behind the bottom-sheet). Hidden until JS reveals it; fades in. */
.gsds .gs-filter-scrim {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(17, 20, 32, 0.5);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.gsds .gs-filter-scrim.is-open { opacity: 1; }

@media (max-width: 991px) {
  /* --- Breadcrumbs: scroll instead of wrap (Figma clips the last crumb) --- */
  .gsds nav[aria-label="Breadcrumb"] {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gsds nav[aria-label="Breadcrumb"]::-webkit-scrollbar { display: none; }

  /* --- Values header (Figma 95:14473): title on top, chips scroll on one row,
         command bar = Shop related (left) + filter/table/card (right) --- */
  .gsds .gs-values__titlebar { margin-bottom: var(--spacing-gap-sm); }
  /* Chips stay one row and scroll horizontally (they overflow 374px in Figma too) */
  .gsds .gs-values__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gsds .gs-values__chips::-webkit-scrollbar { display: none; }
  .gsds .gs-values__chips > * { flex: 0 0 auto; }
  /* Command bar spans full width: Shop related pinned left, controls pinned right */
  .gsds .gs-values__controls { width: 100%; justify-content: space-between; }
  .gsds .gs-values__shop { margin-right: auto; }

  /* --- Hero: single column, LEFT-aligned; melt-left / heart-right (Figma 109:14228) --- */
  .gsds .gs-detail__head { flex-direction: column; align-items: stretch; text-align: left; }
  .gsds .gs-detail__side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  /* DOM order is heart then melt; melt hugs the left, heart the right edge */
  .gsds .gs-detail__side .gs-fav { order: 2; }
  .gsds .gs-hero-grid__media { display: flex; flex-direction: column; align-items: center; }
  .gsds .gs-hero-grid__media > * { width: 100%; }
  .gsds .gs-sponsors { text-align: center; }

  /* --- Mobile hero polish (2026-07-09) --- */
  /* Tighten the gap under the spot-price bar (Bootstrap py-4 = 24px !important) */
  .gsds .container.py-4 { padding-top: var(--spacing-padding-sm) !important; }
  /* Promo + search read too tall on mobile — make them compact */
  .gsds .gs-promo { padding: var(--spacing-padding-xs) var(--spacing-padding-sm); }
  .gsds .gs-promo__text { font-size: var(--text-small-body-regular-font-size); }
  .gsds .gs-search__field { padding: 4px var(--spacing-padding-sm); }
  .gsds .gs-search__select { height: 32px; }
  /* Lock the page to vertical scroll; the card rails/chips keep their own overflow-x:auto */
  .gsds { overflow-x: hidden; }
  /* Kill the white strip under the spot bar: global .main has a hardcoded margin-top:127px
     (inline !important, can't be overridden by CSS) but the mobile header+spot-bar is only
     ~88px — the extra ~40px shows the white body. .main has no padding/border, so this
     negative top margin collapses through and pulls the gsds page (its own gray bg) up
     under the spot bar. Tune if a sliver remains / the breadcrumb crowds the bar. */
  .gsds { margin-top: -28px; }

  /* --- Filter bottom-sheet: reuse the existing .gs-filters markup + inputs --- */
  /* display:contents removes the empty column box so it reserves no space while
     its .gs-filters child (now position:fixed) still renders and its inputs stay
     bound to the existing filter/currency JS. */
  .gsds .gs-filters-col { display: contents; }

  .gsds .gs-filters {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--spacing-gap-md);
    /* Capped well under 100vh so a tappable scrim gap always remains above the sheet even on
       short viewports / with mobile browser chrome eating into visible height — a taller sheet
       could read as full-screen with no visible way to dismiss it. */
    max-height: 70vh;
    overflow-y: auto;
    padding: 28px var(--spacing-gap-md) calc(var(--spacing-gap-md) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface-raised);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(17, 20, 32, 0.18);
    transform: translateY(100%);
    transition: transform 0.28s ease;
  }
  .gsds .gs-filters.is-open { transform: none; }
  /* Explicit close affordance — doesn't depend on any scrim gap remaining visible/tappable. */
  .gsds .gs-filters__close {
    position: absolute;
    top: 12px;
    right: var(--spacing-gap-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-page);
    color: var(--color-text-secondary);
    font-size: 18px;
    cursor: pointer;
  }
  /* Grab handle */
  .gsds .gs-filters::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: var(--color-grey-300, #cbd0d9);
  }

  /* Reveal the mobile filter trigger + divider */
  .gsds .gs-filter-btn { display: inline-flex; }
  .gsds .gs-values__controls-divider { display: block; }

  /* --- News / Events: horizontal-scroll carousel (was 3-up col-md-4 grid) --- */
  .gsds .gs-band .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gsds .gs-band .row::-webkit-scrollbar { display: none; }
  .gsds .gs-band .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 82%;
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* --- Value cards rail: same off-screen swipe as desktop, just a narrower card --- */
  .gsds .gs-pcard { width: 160px; }
}

/* ============================================================================
   Part D — access states (appended 2026-07-09)
   Gating for the RETAIL and NONE tiers. Reuses .gs-graph--gated /
   .gs-graph__gate-overlay / .gs-lock / .gs-blurval defined earlier. Scoped .gsds,
   token-only. The pricing table (blurred cells) + Coin Value History + Value By
   Grade gates already have styles above; this adds the auction-rail gate and the
   hero Subscribe CTA.
   ============================================================================ */

/* Auction rail gate (retail + NONE tiers) — Figma retail design (frame 109:13943):
   the cards stay real behind a right-anchored CTA over a horizontal gradient +
   backdrop-blur, so the leftmost card(s) peek through and the rest frost out. The
   wrapper sits around the TRACK only, so the pager below stays visible + clickable. */
.gsds .gs-rail__gatewrap { position: relative; }
.gsds .gs-rail__gatewrap.is-gated { overflow: hidden; border-radius: var(--radius-lg); }
.gsds .gs-rail__gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--spacing-gap-md);
  padding: 0 var(--spacing-padding-md);
  text-align: right;
  background: linear-gradient(90deg, rgba(247, 248, 250, 0) 0%, var(--color-surface-page, #F7F8FA) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.gsds .gs-rail__gate-text {
  max-width: 300px;
  margin: 0;
  font-family: var(--text-medium-body-font-family, 'Geist');
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
}

/* Hero Subscribe CTA (NONE tier) — Subscribe button above supporting copy. */
.gsds .gs-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-gap-sm);
  margin-top: var(--spacing-gap-md);
  padding: var(--spacing-padding-lg);
  background: var(--color-surface-sunken);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-lg);
}
.gsds .gs-hero-cta .gs-detail__text { margin: 0; color: var(--color-text-secondary); }