/* =============================================================================
   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 */
.gsds .gs-pcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-gap-sm);
}
.gsds .gs-pcard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-xs);
  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-md);
}
.gsds .gs-pcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
}
.gsds .gs-pcard__grade {
  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);
  text-decoration: none;
}
.gsds .gs-pcard__spark { width: 100%; min-height: 44px; margin: var(--spacing-gap-mini) 0; }
.gsds .gs-pcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
}
.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-small-data-font-family);
  font-size: var(--text-small-data-font-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}
/* 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);
  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-default);
}
/* Pin the Retail section (divider + CPG row) to the card's bottom edge so CPG rows
   align across cards in a row (Figma); slack space collects above the rule instead. */
.gsds .gs-pcard--compact .gs-pcard__divider.gs-row--retail { margin-top: auto; }

/* 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);
}

/* Compact pricing cards (pass 2): bigger grade, whole card clickable */
.gsds a.gs-pcard { text-decoration: none; color: inherit; }
.gsds a.gs-pcard:hover { border-color: var(--color-border-strong); }
.gsds .gs-pcard--compact { padding: var(--spacing-padding-md); gap: var(--spacing-gap-mini); }
.gsds .gs-pcard--compact .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);
}

/* 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);
}