/* =============================================================================
   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). Text now wraps to two lines
   (see _gsPromoBanner.cshtml) — padding/font sized down to small so the
   banner's total height matches the search bar's 44px (36px select + 2x4px
   field padding, see .gs-search__field) instead of growing past it. */
.gsds .gs-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-xs) var(--spacing-padding-xs)
           var(--spacing-padding-xs) 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-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-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;
  /* The flag + caption now live in an in-flow footer row (.gs-hero__foot) below the image,
     so no extra bottom clearance is needed — the caption can never overlap the coin. */
  flex-direction: column;
  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; margin: auto 0; }
.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 {
  flex: 0 0 auto;
  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 {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  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: auto; min-width: 44px; }
.gsds .gs-pcard__spark { display: block; width: 44px; height: 16px; }
.gsds .gs-pcard__pct {
  width: auto;
  min-width: 44px;
  max-width: 64px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--text-small-data-font-family);
  font-size: 10px;
  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;
  /* --color-border-strong (grey-200 #dde1e8) is ~1.05:1 contrast against this white card —
     technically applied but unreadable in practice, so this uses grey-300 directly instead
     of the semantic border token to actually read as an outlined control. The !important is
     required: legacy global rule `select { border: 0 !important; ... }` in
     custom-style-2026-05-27.css (loaded earlier but !important beats specificity/order
     regardless) was silently zeroing this out — confirmed via computed-style inspection,
     not a caching issue. */
  border: var(--stroke-weight-stroke-default) solid var(--color-grey-300) !important;
  border-radius: var(--radius-md-button);
  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);
  height: 36px;
  padding: 0 var(--spacing-padding-md-button);
  cursor: pointer;
  transition: opacity 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.gsds .gs-graph__select:hover { border-color: var(--color-grey-400) !important; background: var(--color-surface-sunken); }
.gsds .gs-graph__select:focus-visible {
  outline: var(--stroke-weight-stroke-emphasis) solid var(--color-border-button-indigo);
  outline-offset: 1px;
}
.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;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Vertical breathing room inside the scroll clip so card shadows (0 2px 4px) and
     focus rings (2px outline + 1px offset) aren't cut at the row's top/bottom; the
     negative margins cancel the padding back out of the layout (bottom keeps the
     original 4px --spacing-padding-xs contribution). Left/right stay 0 so the
     track's left edge remains the hard clip line at the card column's edge. */
  padding: 12px 0;
  margin: -12px 0 calc(var(--spacing-padding-xs) - 12px);
}
.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 bleeds off the viewport's right edge
   (negative margin-right set per track by JS in ViewItemGsds.cshtml). */
.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); }
/* 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; }
  /* 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); }

/* ---- Part E: button hover legibility (2026-07-15) ----
   Anchor-buttons (<a class="gs-btn">) sit inside `.gsds`, so on hover they get recolored by
   `.gsds a:hover { color: var(--color-text-brand) }` (specificity 0,2,1) — and Bootstrap's
   `a:hover` blue — which beat each variant's own `.gsds .gs-btn--x` color (0,2,0). On the dark
   indigo/teal buttons that turns the white label into the button color and makes it illegible.
   Hover is opacity-only by design, so re-assert each variant's text color across hover/focus/active
   (0,3,0 wins on specificity, no !important needed). Buttons keep their icon color too via inherit. */
.gsds .gs-btn--indigo:hover, .gsds .gs-btn--indigo:focus, .gsds .gs-btn--indigo:active,
.gsds .gs-btn--teal:hover, .gsds .gs-btn--teal:focus, .gsds .gs-btn--teal:active,
.gsds .gs-btn--ghost-light:hover, .gsds .gs-btn--ghost-light:focus, .gsds .gs-btn--ghost-light:active {
  color: var(--color-text-inverse);
}
.gsds .gs-btn--light-indigo:hover, .gsds .gs-btn--light-indigo:focus, .gsds .gs-btn--light-indigo:active,
.gsds .gs-btn--ghost-dark:hover, .gsds .gs-btn--ghost-dark:focus, .gsds .gs-btn--ghost-dark:active {
  color: var(--color-text-brand);
}

/* ---- Part F: subscriber layout, prefs, small Related tiles, copy chip, feedback modal
   (2026-07-24) ---- */

/* Related Items small variant (subscriber layout + everyone else via the Related call site;
   Recently Viewed keeps the 214px default — untouched). Sizing only, no bg/border override,
   so this doesn't need to fight .gs-card's compound-selector precedent (see the .gs-pcard/
   .gs-card cascade gotcha noted earlier in this file) — equal-specificity + later source
   position is enough to win over the base .gs-railcard rules above. */
.gsds .gs-railcard--sm { width: 156px; min-height: 210px; }
.gsds .gs-railcard--sm .gs-railcard__head,
.gsds .gs-railcard--sm .gs-railcard__foot { padding: var(--spacing-padding-sm); }
.gsds .gs-railcard--sm .gs-railcard__img { min-height: 100px; padding: var(--spacing-padding-xs); }
.gsds .gs-railcard--sm .gs-railcard__img img { max-height: 100px; }
.gsds .gs-railcard--sm .gs-railcard__title { font-size: var(--text-captions-font-size); line-height: var(--text-captions-line-height); }

/* PCGS / Fr.# identifier chip — click-to-copy */
.gsds .gs-idchip--copy {
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-gap-xs);
  transition: background-color 0.15s ease;
}
.gsds .gs-idchip--copy:hover { background: var(--color-surface-sunken); }
.gsds .gs-idchip__text { display: flex; flex-direction: column; gap: 2px; }
.gsds .gs-idchip__copybtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: var(--spacing-padding-xs);
  margin: calc(var(--spacing-padding-xs) * -1);
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.gsds .gs-idchip__copybtn i { font-size: var(--font-size-md); }
.gsds .gs-idchip--copy:hover .gs-idchip__copybtn,
.gsds .gs-idchip__copybtn:hover { color: var(--color-text-brand); }
.gsds .gs-idchip--copy.is-copied .gs-idchip__copybtn { color: var(--color-market-up-light-bg); }
.gsds .gs-idchip__copied {
  font-family: var(--text-captions-font-family);
  font-size: var(--text-captions-font-size);
  color: var(--color-market-up-light-bg);
  white-space: nowrap;
}

/* Request Pricing gate icon (no-pricing card) */
.gsds .gs-values__gate-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-feedback-info-bg);
  color: var(--color-feedback-info);
  font-size: 28px;
}

/* GSDS modal (Catalog Feedback) — raised surface, deliberately NOT .gs-card (that shell's
   background/border/radius are tuned for rail/value cards, not a centered dialog). */
.gsds .gs-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(17, 20, 32, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gsds .gs-modal-scrim.is-open { opacity: 1; }
.gsds .gs-modal {
  position: fixed;
  inset: 0;
  z-index: 1061;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-gap-md);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.gsds .gs-modal.is-open { opacity: 1; transform: none; pointer-events: auto; }
.gsds .gs-modal__dialog {
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(17, 20, 32, 0.18);
}
.gsds .gs-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-sm);
  padding: var(--spacing-padding-lg);
  border-bottom: var(--stroke-weight-stroke-default) solid var(--color-border-default);
}
.gsds .gs-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 18px;
  cursor: pointer;
}
.gsds .gs-modal__close:hover { background: var(--color-surface-sunken); }
.gsds .gs-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-lg);
}
.gsds .gs-modal__body p { margin: 0; word-wrap: break-word; }
.gsds .gs-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap-sm);
  padding: var(--spacing-padding-lg);
  border-top: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  justify-content: center;
}
.gsds .gs-modal__foot .gs-btn { flex: 1 1 160px; justify-content: center; }
@media (max-width: 480px) {
  .gsds .gs-modal__foot { flex-direction: column; }
  .gsds .gs-modal__foot .gs-btn { flex: 1 1 auto; width: 100%; }
}

/* ============================================================================
   Part E — rail bleed (2026-08-06)
   Rail tracks get a JS-measured negative margin-right (ViewItemGsds.cshtml,
   gsLayoutRail) so cards run off the viewport's right edge — hard cut, no fade.
   The clip below guarantees any sub-pixel overshoot can never create a
   horizontal page scrollbar, at every width. It replaces the old mobile-only
   .gsds overflow-x:hidden: clip does not make .gsds a scroll container, leaves
   overflow-y:visible, and creates no containing block for the fixed-position
   filter sheet / modals / hero lightbox.
   ============================================================================ */
.gsds { overflow-x: hidden; overflow-x: clip; } /* hidden = pre-2022-browser fallback */

@media (prefers-reduced-motion: reduce) {
  .gsds .gs-rail__track { scroll-behavior: auto; }
}

/* =============================================================================
   Book references (GSID ViewItem "Descriptions" section) (2026-08-14)

   Figma 85:30727 — "Resource 1/2/3" rows beneath the reverse description: a
   space-between row per reference, small-body-regular label on the left, 30px
   icon button on the right.

   New rules only — nothing here overrides an earlier GSDS rule. All rules
   scoped under `.gsds`, tokens only.
   ============================================================================= */

/* Row list — matches the Figma frame's spacing/padding/sm container. */
.gsds .gs-bookrefs {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-padding-sm) 0;
}

/* A native <button> reset into a full-width row. */
.gsds .gs-bookrefs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
  width: 100%;
  padding: var(--spacing-padding-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.gsds .gs-bookrefs__row:hover,
.gsds .gs-bookrefs__row:focus-visible {
  background: var(--color-surface-sunken);
  text-decoration: none;
}

.gsds .gs-bookrefs__label {
  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-primary);
}

/* The Figma "small-button": 30px square, radius/sm, 16px glyph. */
.gsds .gs-bookrefs__go {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}
.gsds .gs-bookrefs__go > i {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}
.gsds .gs-bookrefs__row:hover .gs-bookrefs__go { color: var(--color-text-brand); }

/* Source of the modal's HTML — never displayed in place. */
.gsds .gs-bookrefs__store { display: none; }

/* A book write-up is long-form prose; the 500px default dialog is sized for the
   short feedback modal, so widen it for this one. */
.gsds .gs-modal__dialog--wide { max-width: 760px; }

/* .gs-modal__close sets a 32px box but is a flex child of .gs-modal__head with no
   flex-basis, so a long title (ours wraps to two lines on a phone) squeezes it to
   ~21px wide — an awkward tap target. Scoped to this dialog so the feedback modal
   keeps its current behaviour. */
.gsds .gs-modal__dialog--wide .gs-modal__close { flex: 0 0 auto; }

/* Head is title + subtitle here, not a single line — let the text block shrink
   rather than overflow, and keep it top-aligned against the close button. */
.gsds .gs-modal__dialog--wide .gs-modal__head { align-items: flex-start; }
.gsds .gs-modal__dialog--wide .gs-modal__head > div:first-child { min-width: 0; }

/* Reference body: CMS-authored HTML (<section class="wp-paragraph"><p>…), so style
   generic descendants rather than assuming GSDS classes are present. */
.gsds .gs-bookrefs__content {
  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-bookrefs__content p { margin: 0 0 var(--spacing-gap-sm); }
.gsds .gs-bookrefs__content section + section { margin-top: var(--spacing-gap-sm); }
.gsds .gs-bookrefs__content h1,
.gsds .gs-bookrefs__content h2,
.gsds .gs-bookrefs__content h3,
.gsds .gs-bookrefs__content h4 {
  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);
  margin: var(--spacing-gap-sm) 0 var(--spacing-gap-mini);
}
.gsds .gs-bookrefs__content ul,
.gsds .gs-bookrefs__content ol { margin: 0 0 var(--spacing-gap-sm); padding-left: var(--spacing-gap-md); }
.gsds .gs-bookrefs__content img { max-width: 100%; height: auto; }
.gsds .gs-bookrefs__content table { width: 100%; border-collapse: collapse; }
.gsds .gs-bookrefs__content td,
.gsds .gs-bookrefs__content th {
  padding: var(--spacing-gap-mini) var(--spacing-gap-xs);
  border-bottom: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  text-align: left;
}
.gsds .gs-bookrefs__content > *:last-child { margin-bottom: 0; }

/* ---------- Hero caption + similar-match indicator (interim, pending Lukas's design) ----------
   Footer row under the hero image: country flag left, caption right (image title / similar-item
   note / image source). The "Similar item" pill + note + dimmed thumbs mark photos that are not of
   this exact GSID (related-series fallback, or a year-mismatched import link). Isolated here so the
   final design is a restyle of these classes, not a rebuild. */
.gsds .gs-hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-gap-sm);
  width: 100%;
  margin-top: var(--spacing-padding-sm);
}
.gsds .gs-hero__caption { min-width: 0; margin-left: auto; text-align: right; }
.gsds .gs-hero__title {
  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);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsds .gs-hero__note {
  display: none;
  font-family: var(--text-captions-font-family);
  font-size: var(--text-captions-font-size);
  line-height: var(--text-captions-line-height);
  color: var(--color-amber-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsds .gs-hero__note.is-visible { display: block; }
.gsds .gs-hero__badge {
  position: absolute;
  top: var(--spacing-padding-md);
  left: var(--spacing-padding-md);
  z-index: 2;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-amber-50);
  border: var(--stroke-weight-stroke-default) solid var(--color-amber-100);
  color: var(--color-amber-700);
  font-family: var(--text-captions-font-family);
  font-size: var(--text-captions-font-size);
  line-height: var(--text-captions-line-height);
  white-space: nowrap;
}
.gsds .gs-hero__badge.is-visible { display: inline-flex; }
.gsds .gs-hero__badge i { font-size: 14px; }
.gsds .gs-hero__thumb--similar { opacity: 0.7; }
.gsds .gs-hero__thumb--similar.is-active { opacity: 1; }

/* =====================================================================================
   Part G - Grade page (Views/Pricing/ViewDetailGsds.cshtml + gsds/_gsSourceCard,
   gsds/_gsGradeGraph). Figma "Grade Page" 26:715 - desktop 26:1825, mobile 104:9864.
   Appended 2026-09-17. Token-only values; compound selectors wherever a new class sits on
   a shared shell (.gs-card / .gs-sponsors__item) so the shell's later rule can't win.
   ===================================================================================== */

/* Chart series colors (Figma legend 26:2180). No magenta step exists in the token set, so
   NGC carries the Figma value directly; everything else maps to a token. */
.gsds {
  --gs-chart-grey: var(--color-indigo-500);
  --gs-chart-cpg: var(--color-amber-500);
  --gs-chart-pcgs: var(--color-teal-600);
  --gs-chart-ngc: #b23c98;
  --gs-chart-apr: var(--color-red-500);
}

/* ---- Page grid: chart + sponsors | header + source cards (Figma Frame 8: 608 | 608, 24 gap) */
.gsds .gs-grade-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-gap-md);
  align-items: start;
  margin-bottom: var(--spacing-gap-lg);
}
.gsds .gs-grade-grid__left,
.gsds .gs-grade-grid__right {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-md);
  min-width: 0;
}
.gsds .gs-grade-cards { display: flex; flex-direction: column; gap: var(--spacing-gap-md); }

/* ---- Header (Figma 55:4528): round item photo w/ flag, grade titling, item title, caption */
.gsds .gs-grade-head {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-gap-md);
}
.gsds .gs-grade-head__media { position: relative; flex: 0 0 auto; width: 84px; height: 84px; }
.gsds .gs-grade-head__img {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--color-surface-raised);
}
.gsds .gs-grade-head__flag {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  box-shadow: var(--shadow-high-dark-offset-x) var(--shadow-high-dark-offset-y)
    var(--shadow-high-dark-blur) var(--shadow-high-dark-spread) var(--shadow-high-dark-color);
}
.gsds .gs-grade-head__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-mini);
}
.gsds .gs-grade-head__grade {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-gap-xs);
  color: var(--color-text-primary);
}
.gsds .gs-grade-head__title { margin: 0; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.gsds .gs-grade-head__caption {
  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-tertiary);
}
.gsds .gs-grade-head .gs-detail__side { flex: 0 0 auto; }
.gsds .gs-grade-head__rule {
  margin: 0;
  border: 0;
  border-top: var(--stroke-weight-stroke-default) solid var(--color-border-default);
}

/* ---- Source card (Figma coin-card 102:10781): summary (170px) | change table (>=320px) */
.gsds .gs-scard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-gap-xs) var(--spacing-gap-sm);
  padding: var(--spacing-padding-sm);
  border-radius: var(--radius-lg);
}
.gsds .gs-scard__summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-sm);
  flex: 0 0 170px;
  min-width: 0;
}
.gsds .gs-scard__trend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 44px;
}
.gsds .gs-scard__spark { display: block; width: 44px; height: 16px; }
.gsds .gs-scard__spark svg { display: block; width: 100%; height: 100%; }
.gsds .gs-scard__pct {
  display: block;
  min-width: 44px;
  max-width: 72px;
  font-family: var(--text-small-data-font-family);
  font-size: var(--text-small-data-font-size);
  line-height: 16px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.gsds .gs-scard__pct--up { color: var(--color-market-up-light-bg); }
.gsds .gs-scard__pct--down { color: var(--color-market-down-light-bg); }
.gsds .gs-scard__pct--flat { color: var(--color-market-unchanged-light-bg); }
.gsds .gs-scard__info { display: flex; flex-direction: column; min-width: 0; }
.gsds .gs-scard__label {
  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-scard__value {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  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);
  color: var(--color-text-primary);
}
.gsds .gs-scard__value .gs-lock { height: 22px; padding: 0 var(--spacing-padding-xs); }
.gsds .gs-scard__tier {
  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-scard__table {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.gsds .gs-scard__thead {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  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-primary);
}
.gsds .gs-scard__thead > span { padding: var(--spacing-padding-md) var(--spacing-padding-xl); }
.gsds .gs-scard__thead > .gs-scard__th--em { font-weight: var(--font-weight-semibold); }
.gsds .gs-scard__body {
  position: relative;
  border: var(--stroke-weight-stroke-default) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-border-strong);
  overflow: hidden;
}
.gsds .gs-scard__grid {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 1px;
}
.gsds .gs-scard__grid td {
  height: 40px;
  padding: var(--spacing-padding-sm) var(--spacing-padding-xl);
  border: 0;
  background: var(--color-surface-sunken);
  vertical-align: middle;
  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);
  font-variant-numeric: tabular-nums;
}
.gsds .gs-scard__grid td.gs-scard__cell--em { font-weight: var(--font-weight-semibold); }
.gsds .gs-scard__grid td.gs-scard__cell--trend { padding-top: var(--spacing-padding-xs); padding-bottom: var(--spacing-padding-xs); }
.gsds .gs-scard__grid td.gs-scard__cell--trend .gs-scard__trend { margin: 0 auto; }
.gsds .gs-scard__grid td.gs-scard__cell--empty {
  text-align: center;
  color: var(--color-text-tertiary);
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
}
.gsds .gs-scard__body--gated > *:not(.gs-scard__gate-overlay) { filter: blur(4px); pointer-events: none; user-select: none; }
.gsds .gs-scard__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.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.gsds .gs-scard__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-mini);
  margin: 0;
  padding: var(--spacing-padding-sm);
  border: 0;
  background: transparent;
  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 button.gs-scard__more { cursor: pointer; }
.gsds button.gs-scard__more:hover { color: var(--color-text-brand); text-decoration: underline; }
.gsds button.gs-scard__more:focus-visible {
  outline: var(--stroke-weight-stroke-emphasis) solid var(--color-border-button-indigo);
  outline-offset: 1px;
  border-radius: var(--radius-xs);
}

/* ---- Grade chart: multi-series legend row + Figma popover tooltip (102:10482) */
.gsds .gs-graph--grade { border-radius: var(--radius-xl); }
.gsds .gs-graph--grade .gs-graph__head { align-items: flex-start; }
.gsds .gs-graph--grade .gs-graph__delta { white-space: nowrap; flex: 0 0 auto; }
.gsds .gs-graph--grade .gs-graph__canvas { min-height: 300px; }
.gsds .gs-graph__empty {
  padding: var(--spacing-gap-lg) var(--spacing-padding-xl);
  text-align: center;
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  color: var(--color-text-tertiary);
}
.gsds .gs-graph__legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap-xs) 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-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  padding: 0;
  border: 0;
  background: transparent;
  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-primary);
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.gsds .gs-legend-item.is-off { opacity: 0.4; text-decoration: line-through; }
.gsds .gs-legend-item:focus-visible {
  outline: var(--stroke-weight-stroke-emphasis) solid var(--color-border-button-indigo);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.gsds .gs-legend-item__dot,
.gsds .gs-graph__tip-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: 2px solid var(--dot, var(--color-text-secondary));
  background: var(--color-surface-raised);
}
/* ApexCharts injects the tooltip into .apexcharts-tooltip - reset its chrome so our card shows */
.gsds .apexcharts-tooltip { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.gsds .gs-graph__tip {
  min-width: 188px;
  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);
  box-shadow: var(--shadow-high-offset-x) var(--shadow-high-offset-y)
    var(--shadow-high-blur) var(--shadow-high-spread) var(--shadow-high-color);
  font-family: var(--font-family-sans);
  color: var(--color-text-primary);
}
.gsds .gs-graph__tip-date {
  padding: var(--spacing-padding-xs) 0;
  margin-bottom: var(--spacing-gap-xs);
  border-bottom: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  text-align: center;
  font-size: var(--text-medium-body-regular-font-size);
  line-height: var(--text-medium-body-regular-line-height);
}
.gsds .gs-graph__tip-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-xs) 0;
}
.gsds .gs-graph__tip-row + .gs-graph__tip-row { border-top: var(--stroke-weight-stroke-default) solid var(--color-border-default); }
.gsds .gs-graph__tip-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-captions-font-size);
  line-height: var(--text-captions-line-height);
  color: var(--color-text-primary);
}
.gsds .gs-graph__tip-val {
  flex: 0 0 auto;
  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);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- Mobile (Figma 104:9864): single column, header -> cards -> chart -> sponsors */
@media (max-width: 991px) {
  .gsds .gs-grade-grid { grid-template-columns: minmax(0, 1fr); }
  /* Flatten both columns so their children interleave: header, gallery, cards, chart, sponsors */
  .gsds .gs-grade-grid__left,
  .gsds .gs-grade-grid__right { display: contents; }
  .gsds .gs-grade-head { order: 1; }
  .gsds .gs-grade-head__rule { order: 2; }
  .gsds .gs-grade-gallery { order: 3; }
  .gsds .gs-grade-cards,
  .gsds .gs-grade-grid .gs-values__gate { order: 4; }
  .gsds .gs-graph--grade { order: 5; }
  .gsds .gs-grade-grid .gs-sponsors { order: 6; }
  .gsds .gs-grade-head { flex-wrap: wrap; align-items: center; }
  .gsds .gs-grade-head__text { flex-basis: 100%; order: 3; }
  .gsds .gs-grade-head .gs-detail__side {
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
  .gsds .gs-scard { padding: var(--spacing-padding-sm) 0; }
  .gsds .gs-scard__summary { flex-basis: 100%; }
  .gsds .gs-scard__table { flex-basis: 100%; }
  .gsds .gs-scard__thead > span,
  .gsds .gs-scard__grid td { padding-left: var(--spacing-padding-md); padding-right: var(--spacing-padding-md); }
  .gsds .gs-graph--grade .gs-graph__canvas { min-height: 260px; }
}

/* ---- Part H — Grade page, CEO round (2026-09-20): CAC sticker logo, grade gallery, APR grade chips */
.gsds .gs-grade-head__cac { height: 30px; width: auto; flex: 0 0 auto; }
.gsds .gs-grade-gallery { min-width: 0; }
.gsds .gs-grade-gallery__note { margin-top: var(--spacing-gap-xs); text-align: center; }
.gsds .gs-railcard__grade {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-mini);
  margin-top: var(--spacing-gap-mini);
  padding: 2px var(--spacing-padding-sm);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-family: var(--text-small-data-font-family);
  font-size: var(--text-small-data-font-size);
  line-height: 16px;
  white-space: nowrap;
}
.gsds .gs-railcard__grade--match {
  background: var(--color-surface-button-light-indigo);
  color: var(--color-text-brand);
  font-weight: var(--font-weight-semibold);
}
.gsds .gs-railcard__grade-svc { color: var(--color-text-tertiary); font-weight: var(--font-weight-regular); }
.gsds .gs-railcard__grade-cac { height: 12px; width: auto; }

/* Header jump link to this grade's auction sales (the gallery pushes the rails below the fold) */
.gsds .gs-grade-head__aprlink {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-mini);
  margin-top: var(--spacing-gap-mini);
  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-grade-head__aprlink:hover { text-decoration: underline; }

/* ---- Part I (2026-09-21) — gate action pair, hero caption on mobile (GSID + Grade pages) */

/* Subscribe / Log In pair on every gated overlay (gsds/_gsGateButtons) */
.gsds .gs-gate-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-gap-xs);
  max-width: 100%;
}

/* Hero viewer caption: the title / similar-note / source rows are single-line + ellipsis and
   right-aligned beside the flag. On a phone-width stage that truncates both the image title and
   the source, so stack the caption under the flag, left-aligned, wrapping to two lines each. */
@media (max-width: 991px) {
  .gsds .gs-hero__stage { min-height: 0; padding: var(--spacing-padding-md); }
  /* Phone: let the hero picture use the stage's width (a square coin was 240px in a 345px stage);
     tall slab photos stay height-capped and centred by object-fit (CDN ask 2026-09-24). */
  .gsds .gs-hero__img { width: 100%; height: auto; max-height: min(420px, 100vw); }
  .gsds .gs-hero__foot { flex-direction: column; align-items: flex-start; gap: var(--spacing-gap-mini); }
  .gsds .gs-hero__flag { width: 28px; height: 21px; }
  .gsds .gs-hero__caption { margin-left: 0; width: 100%; text-align: left; }
  .gsds .gs-hero__title,
  .gsds .gs-hero__source {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    text-align: left;
    overflow: hidden;
  }
  .gsds .gs-hero__note { white-space: normal; text-align: left; }
}


/* ==========================================================================================
   Part J (2026-09-24) — Category funnel pages (Figma "Category Page Funnel" 267:14071):
   /prices index, catalog roots, group (nc/) and series (sp/) pages on the GSDS.
   New pieces: catalog tab bar, funnel hero, filter sidebar, content sections + rails, funnel
   cards (grid + compact), price tag, series rows, sponsor cards, mobile control bar + chips.
   Everything scoped under .gsds; colors/type/spacing are tokens only.
   ========================================================================================== */

/* ---- page frame: breadcrumb row with the search bar at right (Figma "Frame 2") ---- */
.gsds .gs-funnel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-md);
  margin-bottom: var(--spacing-gap-sm);
}
.gsds .gs-funnel__top > nav { margin: 0 !important; min-width: 0; }
.gsds .gs-funnel__top > .gs-topbar { flex: 0 1 620px; min-width: 0; margin: 0 !important; }
.gsds .gs-funnel__top > .gs-topbar--searchonly { flex-basis: 420px; }

/* ---- catalog tab bar ---- */
.gsds .gs-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 2px;
  margin-bottom: var(--spacing-gap-md);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}
.gsds .gs-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 var(--spacing-padding-md) 0 var(--spacing-padding-sm);
  border-radius: var(--radius-sm);
  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);
  text-decoration: none;
  white-space: nowrap;
}
.gsds .gs-tabs__tab:hover { background: var(--color-surface-raised); text-decoration: none; color: var(--color-text-primary); }
.gsds .gs-tabs__tab.is-active {
  background: var(--color-surface-raised);
  font-weight: var(--font-weight-semibold);
  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-tabs__label { overflow: hidden; text-overflow: ellipsis; }
.gsds .gs-tabs__count {
  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-tertiary);
  flex: 0 0 auto;
}

/* ---- funnel hero ---- */
.gsds .gs-fhero {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-gap-lg);
  padding-bottom: var(--spacing-gap-lg);
  margin-bottom: var(--spacing-gap-lg);
  border-bottom: var(--stroke-weight-stroke-default) solid var(--color-border-default);
}
.gsds .gs-fhero__tile {
  position: relative;
  flex: 0 0 282px;
  width: 282px;
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-padding-xl);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}
.gsds .gs-fhero__img { max-width: 150px; max-height: 150px; object-fit: contain; }
.gsds .gs-fhero__img.is-round { border-radius: var(--radius-full); }
.gsds .gs-fhero__img.is-placeholder { width: 124px; height: 124px; }
.gsds .gs-fhero__tile--square .gs-fhero__img { max-width: 220px; max-height: 130px; border-radius: var(--radius-xs); }
.gsds .gs-fhero__flag {
  position: absolute;
  left: var(--spacing-padding-xl);
  bottom: var(--spacing-padding-xl);
  width: 50px;
  height: 50px;
  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);
  background: var(--color-surface-raised);
}
.gsds .gs-fhero__flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsds .gs-fhero__flag--world {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--color-text-brand);
}
.gsds .gs-fhero__body { flex: 1 1 auto; min-width: 0; max-width: 600px; display: flex; flex-direction: column; gap: var(--spacing-gap-xs); }
.gsds .gs-fhero__title { margin: 0; }
.gsds .gs-fhero__subtitle {
  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-fhero__desc { margin-top: var(--spacing-gap-xs); --gs-collapse-max: 5.6em; }
.gsds .gs-fhero__text,
.gsds .gs-fhero__text p {
  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-primary);
  margin: 0;
}
.gsds .gs-fhero__text p + p,
.gsds .gs-fhero__text p + div { margin-top: var(--spacing-gap-xs); }
.gsds .gs-fhero__more {
  align-self: flex-start;
  margin-top: var(--spacing-gap-mini);
  font-size: var(--text-captions-font-size);
  line-height: var(--text-captions-line-height);
  color: var(--color-text-secondary);
}
.gsds .gs-fhero__sponsors { margin-top: var(--spacing-gap-sm); }
.gsds .gs-fhero__sponsors-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);
  margin-bottom: var(--spacing-gap-mini);
}
.gsds .gs-fhero__sponsors .gs-sponsors__item { width: 100px; height: 40px; padding: var(--spacing-padding-xs); }

/* ---- two-column body: sidebar 282 | content ---- */
.gsds .gs-funnel__grid {
  display: grid;
  grid-template-columns: 282px minmax(0, 1fr);
  gap: var(--spacing-gap-md);
  align-items: start;
  margin-bottom: var(--spacing-gap-xl);
}
.gsds .gs-funnel__side { position: sticky; top: 96px; }

/* ---- filter sidebar ---- */
.gsds .gs-fside { padding: var(--spacing-padding-sm); gap: var(--spacing-gap-md); }
.gsds .gs-fside__search,
.gsds .gs-ctrlbar__search {
  position: relative;
  display: flex;
  align-items: center;
}
.gsds .gs-fside__input,
.gsds .gs-ctrlbar__input {
  width: 100%;
  height: 38px;
  padding: 0 40px 0 var(--spacing-padding-md);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  color: var(--color-text-primary);
  -webkit-appearance: none;
  appearance: none;
}
.gsds .gs-fside__input::placeholder,
.gsds .gs-ctrlbar__input::placeholder { color: var(--color-text-tertiary); }
.gsds .gs-fside__input:focus,
.gsds .gs-ctrlbar__input:focus { outline: 2px solid var(--color-border-strong); outline-offset: 0; border-color: var(--color-border-strong); }
.gsds .gs-fside__search > i,
.gsds .gs-ctrlbar__search > i {
  position: absolute;
  right: var(--spacing-padding-md);
  font-size: 16px;
  color: var(--color-text-secondary);
  pointer-events: none;
}
.gsds .gs-fside__search > i::before { content: ""; position: absolute; left: -10px; top: -4px; height: 24px; border-left: var(--stroke-weight-stroke-default) solid var(--color-border-strong); }
.gsds .gs-fside__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);
}
.gsds .gs-fgroup { gap: 0; }
.gsds .gs-fgroup__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-gap-xs); min-height: 30px; }
.gsds .gs-fgroup:not(:first-of-type) .gs-filters__title {
  font-family: var(--text-small-body-regular-font-family);
  font-weight: var(--font-weight-regular);
  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-fgroup__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 16px;
  cursor: pointer;
}
.gsds .gs-fgroup__toggle:hover { background: var(--color-surface-sunken); }
.gsds .gs-fgroup__toggle > i { transition: transform 0.2s ease; }
.gsds .gs-fgroup:not(.is-open) .gs-fgroup__toggle > i { transform: rotate(-90deg); }
.gsds .gs-fgroup:not(.is-open) .gs-fgroup__body { display: none; }
.gsds .gs-fgroup__body { display: flex; flex-direction: column; gap: var(--spacing-gap-sm); padding-top: var(--spacing-gap-xs); }
.gsds .gs-fitem { display: flex; align-items: center; gap: var(--spacing-gap-xs); min-height: 24px; margin: 0; }
.gsds .gs-fitem .gs-check__label,
.gsds .gs-fitem__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsds .gs-fitem__count {
  flex: 0 0 auto;
  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-tertiary);
}
.gsds .gs-fitem--link {
  color: var(--color-text-primary);
  text-decoration: none;
  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-fitem--link:hover { text-decoration: none; color: var(--color-text-brand); }
.gsds .gs-fitem__radio {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: var(--stroke-weight-stroke-default) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface-raised);
}
.gsds .gs-fitem--link.is-current { font-weight: var(--font-weight-semibold); }
.gsds .gs-fitem--link.is-current .gs-fitem__radio {
  background: var(--color-surface-button-indigo);
  border-color: var(--color-surface-button-indigo);
  box-shadow: inset 0 0 0 4px var(--color-surface-raised);
}

/* ---- content sections ---- */
.gsds .gs-funnel__list { display: flex; flex-direction: column; gap: var(--spacing-gap-lg); min-width: 0; }
.gsds .gs-section { min-width: 0; }
.gsds .gs-section__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-sm);
  padding: var(--spacing-padding-sm) 0;
  margin-bottom: var(--spacing-gap-xs);
}
.gsds .gs-section__thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface-raised);
  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-section__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gsds .gs-section__thumb img.is-placeholder { object-fit: contain; }
.gsds .gs-section__thumb--square { border-radius: var(--radius-sm); }
.gsds .gs-section__thumb--square img { object-fit: contain; }
.gsds .gs-section__thumb--flag { width: 42px; height: 42px; border-radius: var(--radius-sm); margin: 9px; }
.gsds .gs-section__thumb--logo { box-shadow: none; }
.gsds .gs-section__thumb--logo img { width: 60%; height: 60%; object-fit: contain; }
.gsds .gs-section__text { flex: 1 1 auto; min-width: 0; }
.gsds .gs-section__title {
  margin: 0;
  font-family: var(--text-h1-font-family);
  font-weight: var(--text-h1-font-weight);
  font-size: 24px;
  line-height: 32px;
  color: var(--color-text-primary);
}
.gsds .gs-section__title a { color: inherit; text-decoration: none; }
.gsds .gs-section__title a:hover { color: var(--color-text-brand); text-decoration: none; }
.gsds .gs-section__count {
  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);
}
.gsds .gs-section__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 20px;
  cursor: pointer;
}
.gsds .gs-section__toggle:hover { background: var(--color-surface-sunken); }
.gsds .gs-section__toggle > i { transition: transform 0.2s ease; }
.gsds .gs-section.is-collapsed .gs-section__toggle > i { transform: rotate(-90deg); }
.gsds .gs-section.is-collapsed .gs-section__body { display: none; }
.gsds .gs-section__body { padding-left: var(--spacing-padding-sm); }
.gsds .gs-section__rail .gs-rail__track { gap: var(--spacing-gap-xs); }
.gsds .gs-section__rail .gs-rail__nav { margin-top: var(--spacing-gap-sm); }
.gsds .gs-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: var(--spacing-gap-xs);
}
.gsds .gs-section__grid > .gs-card { height: auto; width: auto; }
.gsds .gs-list-empty {
  padding: var(--spacing-padding-xl);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  color: var(--color-text-secondary);
  text-align: center;
}

/* ---- funnel card (grid 214×247 / compact 214×71) ---- */
/* Compound selector on purpose: .gs-card (defined later in the file) would otherwise win the
   background / border / radius on equal specificity — see the .gs-pcard note above. */
.gsds .gs-fcard.gs-card {
  position: relative;
  flex: 0 0 auto;
  width: 214px;
  height: auto;
  min-height: 247px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  overflow: hidden;
}
.gsds .gs-fcard__tag {
  position: absolute;
  top: var(--spacing-padding-sm);
  left: var(--spacing-padding-sm);
  z-index: 1;
}
.gsds .gs-fcard__img {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-gap-xs);
  min-height: 176px;
  padding: var(--spacing-padding-xl) var(--spacing-padding-xl) var(--spacing-padding-sm);
  text-decoration: none;
}
.gsds .gs-fcard__img img { max-width: 124px; max-height: 124px; object-fit: contain; }
.gsds .gs-fcard__img img.is-round { border-radius: var(--radius-full); }
.gsds .gs-fcard__img img.is-placeholder { width: 100px; height: 100px; }
.gsds .gs-fcard__src {
  font-family: var(--text-captions-font-family);
  font-size: 10px;
  line-height: 14px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.gsds .gs-fcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-md) var(--spacing-padding-md) var(--spacing-padding-md) var(--spacing-padding-md);
  border-top: var(--stroke-weight-stroke-default) solid var(--color-border-default);
}
.gsds .gs-fcard__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gsds .gs-fcard__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);
  line-height: var(--text-medium-body-emphasis-line-height);
  color: var(--color-text-primary);
  text-decoration: none;
}
.gsds .gs-fcard__name:hover { color: var(--color-text-brand); text-decoration: none; }
.gsds .gs-fcard__sub,
.gsds .gs-fcard__range {
  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-secondary);
}
.gsds .gs-fcard__range { font-family: var(--text-small-data-font-family); font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.gsds .gs-fcard__label {
  font-family: var(--text-small-data-font-family);
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-brand);
}
.gsds .gs-fcard__fav { width: 28px; height: 28px; font-size: 20px; flex: 0 0 auto; color: var(--color-text-tertiary); }
.gsds .gs-fcard__fav.is-fav { color: var(--color-market-down-light-bg); }
/* compact variant (World catalogs): image | name + years in one row */
.gsds .gs-fcard--compact.gs-card { flex-direction: row; align-items: center; min-height: 71px; gap: var(--spacing-gap-xs); padding: var(--spacing-padding-md); }
.gsds .gs-fcard--compact .gs-fcard__img { flex: 0 0 auto; min-height: 0; padding: 0; width: 44px; height: 44px; }
.gsds .gs-fcard--compact .gs-fcard__img img { max-width: 44px; max-height: 44px; }
.gsds .gs-fcard--compact .gs-fcard__img img.is-placeholder { width: 44px; height: 44px; }
.gsds .gs-fcard--compact .gs-fcard__foot { flex: 1 1 auto; min-width: 0; padding: 0; border-top: 0; align-items: center; }
/* skeleton while a lazy rail loads */
.gsds .gs-fcard--skeleton.gs-card { background: linear-gradient(90deg, var(--color-surface-raised) 0%, var(--color-surface-sunken) 50%, var(--color-surface-raised) 100%); background-size: 200% 100%; animation: gs-skeleton 1.4s ease-in-out infinite; }
@keyframes gs-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* "See all" trailing card */
.gsds .gs-fcard--more.gs-card {
  align-items: center;
  justify-content: center;
  background: var(--color-surface-sunken);
  text-decoration: none;
}
.gsds .gs-fcard--more:hover { text-decoration: none; background: var(--color-surface-button-light-indigo); }
.gsds .gs-fcard__more-text {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  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-brand);
}

/* ---- sponsor card (Sponsored section) ---- */
.gsds .gs-sponsorcard.gs-card { text-decoration: none; }
.gsds .gs-sponsorcard:hover { text-decoration: none; }
.gsds .gs-sponsorcard__img { padding: var(--spacing-padding-xl); }
.gsds .gs-sponsorcard__img img { max-width: 100%; max-height: 140px; width: auto; }

/* ---- price tag ---- */
.gsds .gs-pricetag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 var(--spacing-padding-md);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-low-offset-x) var(--shadow-low-offset-y) var(--shadow-low-blur) var(--shadow-low-spread) var(--shadow-low-color);
  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: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* ---- series rows ---- */
.gsds .gs-srows { display: flex; flex-direction: column; gap: var(--spacing-gap-xs); }
.gsds .gs-srow { border-radius: var(--radius-md); }
.gsds .gs-srow__main {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-gap-sm);
  padding: var(--spacing-padding-sm);
  border-radius: var(--radius-md);
}
.gsds .gs-srow__main:hover { background: var(--color-surface-raised); }
.gsds .gs-srow__thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface-raised);
  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-srow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gsds .gs-srow__thumb img.is-placeholder { object-fit: contain; }
.gsds .gs-srow__thumb--square { border-radius: var(--radius-sm); }
.gsds .gs-srow__thumb--square img { object-fit: contain; }
.gsds .gs-srow__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-gap-mini); padding-top: 2px; }
.gsds .gs-srow__title {
  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);
  color: var(--color-text-primary);
  text-decoration: none;
}
.gsds .gs-srow__title:hover { color: var(--color-text-brand); text-decoration: none; }
.gsds .gs-srow__labels { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-xs); }
.gsds .gs-srow__labels:empty { display: none; }
.gsds .gs-srow__label {
  font-family: var(--text-small-data-font-family);
  font-size: var(--text-small-data-font-size);
  line-height: var(--text-small-data-line-height);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.gsds .gs-srow__label--type { color: var(--color-text-brand); }
.gsds .gs-srow__label--set { color: var(--color-surface-button-teal); }
.gsds .gs-srow__label--saved { color: var(--color-market-down-light-bg); }
.gsds .gs-srow__range { margin-top: var(--spacing-gap-mini); }
.gsds .gs-srow__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-gap-mini); margin-top: var(--spacing-gap-mini); }
.gsds .gs-srow__tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--spacing-padding-sm);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  font-size: var(--text-captions-font-size);
  color: var(--color-text-secondary);
  text-decoration: none;
}
.gsds .gs-srow__tag:hover { background: var(--color-surface-button-light-indigo); text-decoration: none; }
.gsds .gs-srow__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0; }
/* "View N Results" pill beside the title expands the variety rail; the arrow at right opens the parent */
.gsds .gs-srow__titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-gap-xs) var(--spacing-gap-sm); }
.gsds .gs-srow__toggle {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--spacing-padding-md);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-button-light-indigo-ghost, var(--color-border-strong));
  border-radius: var(--radius-full);
  background: var(--color-surface-button-light-indigo);
  color: var(--color-text-brand);
  font-family: var(--text-captions-font-family);
  font-size: var(--text-captions-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.gsds .gs-srow__toggle:hover { filter: brightness(0.97); }
.gsds .gs-srow.is-open .gs-srow__toggle { background: var(--color-surface-button-indigo); color: var(--color-text-inverse); border-color: var(--color-surface-button-indigo); }
.gsds .gs-srow__go { width: 36px; height: 36px; background: transparent; border-color: transparent; color: var(--color-text-secondary); font-size: 18px; text-decoration: none; }
.gsds .gs-srow__go:hover { background: var(--color-surface-sunken); text-decoration: none; }
.gsds .gs-srow__fav { width: 36px; height: 36px; font-size: 20px; color: var(--color-text-tertiary); }
.gsds .gs-srow__fav.is-fav { color: var(--color-market-down-light-bg); }
.gsds .gs-srow__kids { padding: var(--spacing-padding-sm) 0 var(--spacing-padding-sm) var(--spacing-padding-sm); }
.gsds .gs-srow__rail .gs-rail__track { gap: var(--spacing-gap-xs); }
.gsds .gs-srow__rail .gs-rail__nav { margin-top: var(--spacing-gap-sm); }
/* sponsor slot every 15 rows (same rule as the legacy list) */
.gsds .gs-srow-sponsor { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-gap-mini); padding: var(--spacing-padding-md); }
.gsds .gs-srow-sponsor__label { font-size: var(--text-captions-font-size); color: var(--color-text-tertiary); }
.gsds .gs-srow-sponsor img { max-width: 100%; max-height: 120px; border-radius: var(--radius-sm); }
/* anonymous nudge under the list */
.gsds .gs-funnel__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-gap-sm);
  padding: var(--spacing-padding-xl);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  color: var(--color-text-secondary);
}

/* ---- mobile control bar + chips (hidden on desktop by .gs-only-mobile) ---- */
.gsds .gs-ctrlbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.gsds .gs-ctrlbar__row { display: flex; align-items: center; gap: var(--spacing-gap-sm); height: 56px; padding: 0 var(--spacing-padding-xl); }
.gsds .gs-ctrlbar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  flex: 0 0 auto;
  color: var(--color-text-inverse);
  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);
  text-decoration: none;
  max-width: 34%;
}
.gsds .gs-ctrlbar__back > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsds .gs-ctrlbar__back > i { font-size: 20px; }
.gsds .gs-ctrlbar__back:hover { color: var(--color-text-inverse); text-decoration: none; }
.gsds .gs-ctrlbar__search { flex: 1 1 auto; min-width: 0; }
.gsds .gs-ctrlbar__input { height: 36px; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: var(--color-text-inverse); }
.gsds .gs-ctrlbar__input::placeholder { color: rgba(255, 255, 255, 0.6); }
.gsds .gs-ctrlbar__input:focus { outline-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); }
.gsds .gs-ctrlbar__search > i { color: rgba(255, 255, 255, 0.8); }
.gsds .gs-ctrlbar__filter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-inverse);
  font-size: 22px;
  cursor: pointer;
}
.gsds .gs-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-gap-xs) var(--spacing-gap-sm);
  padding: var(--spacing-padding-sm) var(--spacing-padding-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.gsds .gs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-inverse);
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  cursor: pointer;
}
.gsds .gs-chip > i { font-size: 18px; }

/* ---- mobile (≤991px, the Bootstrap lg breakpoint every other GSDS block uses) ---- */
@media (max-width: 991px) {
  .gsds .gs-funnel__top { flex-direction: column; align-items: stretch; gap: var(--spacing-gap-xs); }
  .gsds .gs-funnel__top > .gs-topbar { flex-basis: auto; }
  .gsds .gs-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gsds .gs-tabs::-webkit-scrollbar { display: none; }
  .gsds .gs-tabs__tab { flex: 0 0 auto; padding: 0 var(--spacing-padding-md); }
  .gsds .gs-tabs__count { display: none; }
  .gsds .gs-fhero { flex-direction: column; align-items: stretch; gap: var(--spacing-gap-md); }
  .gsds .gs-fhero__tile { align-self: center; }
  .gsds .gs-fhero__body { max-width: none; }
  .gsds .gs-funnel__grid { display: block; }
  .gsds .gs-funnel__side { position: static; }
  /* the sidebar becomes the bottom sheet (shared .gs-filters mobile rules above) */
  .gsds .gs-fside { padding: 28px var(--spacing-gap-md) calc(var(--spacing-gap-md) + env(safe-area-inset-bottom, 0px)); }
  .gsds .gs-fgroup { flex: 1 1 100%; }
  .gsds .gs-section__body { padding-left: 0; }
  .gsds .gs-section__title { font-size: 20px; line-height: 28px; }
  .gsds .gs-section__grid { display: flex; flex-direction: column; }
  .gsds .gs-section__grid > .gs-card { width: 100%; }
  .gsds .gs-srow__main { align-items: flex-start; }
  .gsds .gs-srow__actions { flex-direction: column-reverse; }
  /* room for the fixed control bar */
  .gsds.gsds-funnel { padding-bottom: 72px; }
}

/* index page: catalog tiles as a 4-up grid of (square-image) funnel cards; hero without a tile */
.gsds .gs-section__grid--catalogs { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); }
.gsds .gs-funnel__catalogs .gs-fcard__img img { max-width: 160px; max-height: 124px; border-radius: var(--radius-sm); }
.gsds .gs-fhero--notile { padding-bottom: var(--spacing-gap-md); }

/* Part J fixes after first live pass (2026-09-24) */
/* With a promo banner the top bar needs the whole row (the promo text otherwise wraps into a tall
   sliver beside the breadcrumb); search-only keeps sitting right of the breadcrumb per Figma. */
.gsds .gs-funnel__top { flex-wrap: wrap; }
.gsds .gs-funnel__top > .gs-topbar:not(.gs-topbar--searchonly) { flex: 1 1 100%; }
/* series-list sponsor slot: logo-sized, and hidden while a filter/search narrows the list */
.gsds .gs-srow-sponsor img { max-height: 80px; width: auto; }
.gsds .gs-srows.is-filtered .gs-srow-sponsor { display: none; }

/* paper-money (square) card images can use more of the 214px card than the round coin cutouts */
.gsds .gs-fcard__img img:not(.is-round):not(.is-placeholder) { max-width: 176px; }

/* Part J fixes, second live pass (2026-09-24) */
/* Flex items default to min-width:auto (their min-content), so the search field's intrinsic width made
   the top bar wider than the phone viewport and pushed the promo / Search button off-screen. */
.gsds .gs-funnel__top > * { min-width: 0; max-width: 100%; }
/* Sidebar taller than the viewport (World: 50+ countries): sticky alone pins its top and its tail only
   appears once the content column ends. Give it its own scroll on desktop so wheeling over the sidebar
   scrolls the list directly; the page still scrolls when the pointer is over the content. */
@media (min-width: 992px) {
  .gsds .gs-funnel__side {
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }
}