/* ============================================================================
   sbs-shop.css — /shop-next layout: hero, filter bar, grid, skeleton, states.
   Requires sbs-tokens.css + sbs-shopcard.css.
   ========================================================================== */

.sbs-shop {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--sbs-md) var(--sbs-md) var(--sbs-2xl);
}
/* app-shell owns the one true dock clearance. Keep a safe standalone fallback
   for direct static previews, without leaving a second blank slab in production. */
html:not(.sbs-dock-on) .sbs-shop {
  padding-bottom: calc(var(--sbs-2xl) + env(safe-area-inset-bottom, 0px) + 72px);
}

/* Accessible page heading without a visible hero (iOS feed has no title bar). */
.sbs-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.sbs-shop > .sbs-banners,
.sbs-shop > .sbs-stories:first-of-type { margin-top: var(--sbs-sm); }

/* ---- FILTER BAR ---------------------------------------------------------- */
.sbs-filterbar {
  /* iOS parity: the filter bar scrolls away with the feed (not sticky). */
  display: flex;
  flex-direction: column;
  gap: var(--sbs-sm);
  padding: var(--sbs-sm) 0;
  margin-bottom: var(--sbs-md);
}

.sbs-filterbar__pills {
  display: flex;
  gap: var(--sbs-sm);
  overflow-x: auto;
  scrollbar-width: none;
  /* Keep the category rail intentionally scrollable: the end gutter lets a
     full chip settle in view instead of looking cut off by the viewport. */
  padding: 2px var(--sbs-md);
  margin-inline: calc(-1 * var(--sbs-md));
  scroll-padding-inline: var(--sbs-md);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.sbs-filterbar__pills::-webkit-scrollbar { display: none; }

.sbs-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sbs-xs);
  min-height: var(--sbs-control-hit);
  padding: 0 var(--sbs-pill-pad-x);
  border-radius: var(--sbs-r-pill);
  background: color-mix(in srgb, var(--sbs-bg-card) 62%, transparent);
  -webkit-backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  color: var(--sbs-chip-idle-fg);
  border: 1px solid var(--sbs-chip-idle-line);
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
  letter-spacing: var(--sbs-track-pill);
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background var(--sbs-dur-base) var(--sbs-ease-spring),
              color var(--sbs-dur-base) var(--sbs-ease-spring),
              transform var(--sbs-dur-fast) var(--sbs-ease-out);
}
.sbs-pill:active { transform: scale(0.96); }
.sbs-pill.is-active {
  background: var(--sbs-chip-active-bg);
  color: var(--sbs-chip-active-fg);
  border-color: var(--sbs-chip-active-bg);
}
.sbs-pill__chev { width: 12px; height: 12px; opacity: 0.7; }
.sbs-pill__badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: var(--sbs-fs-micro, 0.6875rem);
  font-weight: var(--sbs-fw-bold);
  background: var(--sbs-gold-bright);
  color: #000;
}

.sbs-filterbar__flow { min-width: 0; }

.sbs-filter-gate {
  display: flex;
  align-items: center;
  gap: var(--sbs-sm);
}
.sbs-filter-gate__button {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: var(--sbs-sm);
  padding: var(--sbs-sm) 12px;
  color: var(--sbs-text-primary);
  background: color-mix(in srgb, var(--sbs-bg-card) 82%, transparent);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-card);
  cursor: pointer;
  text-align: left;
}
.sbs-filter-gate__button:hover { background: var(--sbs-bg-hover); }
.sbs-filter-gate__button:focus-visible,
.sbs-filter-facet:focus-visible,
.sbs-filter-shortcut:focus-visible,
.sbs-filter-chip:focus-visible,
.sbs-filter-history__chip:focus-visible,
.sbs-sort:focus-visible,
.sbs-iconbtn:focus-visible,
.sbs-density-segment__button:focus-visible,
.sbs-filter-show:focus-visible {
  outline: 2px solid var(--sbs-gold-bright);
  outline-offset: 2px;
}
.sbs-filter-gate__copy { min-width: 0; display: grid; gap: 4px; flex: 1; }
.sbs-filter-gate__title { display: flex; align-items: center; gap: var(--sbs-sm); font: var(--sbs-fw-semibold) var(--sbs-fs-body)/1 var(--sbs-font-body); }
.sbs-filter-gate__badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  color: #000;
  background: var(--sbs-gold-gradient);
  border-radius: var(--sbs-r-pill);
  font: var(--sbs-fw-bold) var(--sbs-fs-micro)/1 var(--sbs-font-body);
}
.sbs-filter-gate__summary {
  overflow: hidden;
  color: var(--sbs-text-secondary);
  font: var(--sbs-fw-medium) var(--sbs-fs-caption)/1.2 var(--sbs-font-body);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sbs-filter-gate__chevron { flex: 0 0 auto; width: 16px; height: 16px; color: var(--sbs-gold-text); transition: transform var(--sbs-dur-base) var(--sbs-ease-out); }
.sbs-filter-gate__chevron.is-open { transform: rotate(180deg); }
.sbs-filter-gate__controls { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--sbs-xs); }
.sbs-filter-gate__controls .sbs-iconbtn { width: 44px; height: 44px; }
.sbs-filter-gate__controls .sbs-sort { min-height: 44px; padding-inline: 10px; }

/* The compact gate is the mobile default. It keeps one consistent 44pt lane
   before the feed instead of stacking six selectors above the first card. */
.sbs-filterbar__flow .sbs-filter-gate__button {
  min-height: 44px;
  border-radius: var(--sbs-r-pill);
}

.sbs-iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--sbs-control-hit); height: var(--sbs-control-hit);
  border-radius: var(--sbs-r-pill);
  background: color-mix(in srgb, var(--sbs-bg-card) 62%, transparent);
  -webkit-backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  color: var(--sbs-chip-idle-fg);
  border: 1px solid var(--sbs-chip-idle-line);
  cursor: pointer;
  transition: transform var(--sbs-dur-fast) var(--sbs-ease-out);
}
.sbs-iconbtn:active { transform: scale(0.94); }
.sbs-iconbtn svg { width: var(--sbs-icon-size-small); height: var(--sbs-icon-size-small); }

.sbs-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--sbs-control-hit);
  padding: 0 var(--sbs-sm);
  border-radius: var(--sbs-r-pill);
  background: color-mix(in srgb, var(--sbs-bg-card) 62%, transparent);
  -webkit-backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  color: var(--sbs-chip-idle-fg);
  border: 1px solid var(--sbs-chip-idle-line);
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
  cursor: pointer;
  white-space: nowrap;
}
.sbs-sort.is-active { color: var(--sbs-gold-text); border-color: color-mix(in srgb, var(--sbs-gold) 35%, transparent); }
.sbs-sort svg { width: var(--sbs-icon-size-small); height: var(--sbs-icon-size-small); }
.sbs-sort--compact { min-height: var(--sbs-control-hit); }

.sbs-applied-filters,
.sbs-filter-history__items {
  display: flex;
  gap: var(--sbs-sm);
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}
.sbs-applied-filters::-webkit-scrollbar,
.sbs-filter-history__items::-webkit-scrollbar { display: none; }
.sbs-filter-chip,
.sbs-filter-clear,
.sbs-filter-history__chip {
  flex: 0 0 auto;
  min-height: var(--sbs-control-hit);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 var(--sbs-chip-pad-x);
  color: var(--sbs-gold-text);
  background: color-mix(in srgb, var(--sbs-gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sbs-gold) 36%, transparent);
  border-radius: var(--sbs-r-pill);
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
  cursor: pointer;
  white-space: nowrap;
}
.sbs-filter-chip__x { width: 12px; height: 12px; }
.sbs-filter-clear {
  color: var(--sbs-text-muted);
  background: var(--sbs-bg-hover);
  border-color: var(--sbs-border-subtle);
}

.sbs-filter-panel {
  display: grid;
  gap: var(--sbs-sm);
  padding: 12px;
  margin-top: var(--sbs-sm);
  background: color-mix(in srgb, var(--sbs-bg-card) 84%, transparent);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-card);
}
.sbs-filter-facet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sbs-sm); }
.sbs-filter-facet-grid--single { grid-template-columns: minmax(0, 1fr); }
.sbs-filter-facet {
  width: 100%;
  min-width: 0;
  min-height: var(--sbs-control-hit);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--sbs-pill-pad-x);
  color: var(--sbs-chip-idle-fg);
  background: color-mix(in srgb, var(--sbs-bg-card) 62%, transparent);
  -webkit-backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  border: 1px solid var(--sbs-chip-idle-line);
  border-radius: var(--sbs-r-pill);
  cursor: pointer;
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
  text-align: left;
}
.sbs-filter-facet.is-active { color: var(--sbs-chip-active-fg); background: var(--sbs-chip-active-bg); border-color: var(--sbs-chip-active-bg); }
.sbs-filter-facet > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbs-filter-facet__chev { flex: 0 0 auto; width: 13px; height: 13px; margin-left: auto; }
.sbs-filter-panel__divider { height: 1px; background: var(--sbs-border-subtle); }
.sbs-filter-panel__setting,
.sbs-filter-panel__footer {
  min-height: var(--sbs-control-hit);
  display: flex;
  align-items: center;
  gap: var(--sbs-sm);
}
.sbs-filter-panel__setting > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  color: var(--sbs-text-muted);
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
}
.sbs-filter-panel__setting > span svg { width: 14px; height: 14px; }
.sbs-filter-panel__footer { justify-content: space-between; color: var(--sbs-text-muted); font: var(--sbs-fw-medium) var(--sbs-fs-caption)/1 var(--sbs-font-body); font-variant-numeric: tabular-nums; }
.sbs-filter-show {
  height: 36px;
  padding: 0 12px;
  color: #000;
  background: var(--sbs-gold-gradient);
  border: none;
  border-radius: var(--sbs-r-pill);
  font: var(--sbs-fw-bold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
  cursor: pointer;
  white-space: nowrap;
}
.sbs-density-segment {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: color-mix(in srgb, var(--sbs-bg-black) 35%, transparent);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-pill);
}
.sbs-density-segment__button {
  position: relative;
  width: var(--sbs-control-hit);
  height: var(--sbs-control-hit);
  display: grid;
  place-items: center;
  color: var(--sbs-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sbs-r-pill);
  cursor: pointer;
}
.sbs-density-segment__button::before {
  content: "";
  position: absolute;
  inset: 5px 4px;
  border: 1px solid transparent;
  border-radius: var(--sbs-r-pill);
}
.sbs-density-segment__button svg { position: relative; width: var(--sbs-icon-size-small); height: var(--sbs-icon-size-small); }
.sbs-density-segment__button.is-active { color: #000; }
.sbs-density-segment__button.is-active::before { background: var(--sbs-gold-gradient); border-color: color-mix(in srgb, var(--sbs-gold) 36%, transparent); }

/* The iOS feed exposes the first facet rows directly. Flatten the old web
   "Filters" gate into a 2-column control grid, then keep result count, grid
   density and sort in one trailing control lane. */
.sbs-filterbar__flow .sbs-filter-panel {
  gap: var(--sbs-sm);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.sbs-filterbar__flow .sbs-filter-facet {
  min-height: 44px;
  padding-inline: 12px;
  background: color-mix(in srgb, var(--sbs-bg-card) 78%, transparent);
}
.sbs-filter-panel__feed-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--sbs-sm);
}
.sbs-filter-panel__count {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--sbs-text-muted);
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sbs-filter-panel__controls { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--sbs-xs); }
.sbs-filter-panel__controls .sbs-iconbtn { width: 40px; height: 40px; }
.sbs-filter-panel__controls .sbs-sort { min-height: 40px; padding-inline: 10px; }

.sbs-filter-shortcuts {
  display: flex;
  gap: var(--sbs-sm);
  padding-top: var(--sbs-sm);
}
.sbs-filter-shortcut {
  min-width: 0;
  flex: 1;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: var(--sbs-sm);
  padding: 8px var(--sbs-md);
  color: var(--sbs-text-secondary);
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-pill);
  cursor: pointer;
  text-align: left;
}
.sbs-filter-shortcut.is-active { color: #000; background: var(--sbs-gold-gradient); border-color: transparent; }
.sbs-filter-shortcut__icon { display: grid; place-items: center; flex: 0 0 auto; color: var(--sbs-gold); }
.sbs-filter-shortcut.is-active .sbs-filter-shortcut__icon { color: #000; }
.sbs-filter-shortcut__icon svg { width: 16px; height: 16px; }
.sbs-filter-shortcut__copy { min-width: 0; display: grid; gap: 2px; flex: 1; }
.sbs-filter-shortcut__copy strong,
.sbs-filter-shortcut__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbs-filter-shortcut__copy strong { font: var(--sbs-fw-bold) var(--sbs-fs-caption)/1 var(--sbs-font-body); }
.sbs-filter-shortcut__copy small { color: var(--sbs-text-muted); font: var(--sbs-fw-semibold) var(--sbs-fs-micro)/1 var(--sbs-font-body); }
.sbs-filter-shortcut.is-active .sbs-filter-shortcut__copy small { color: rgba(0, 0, 0, 0.66); }
.sbs-filter-shortcut__count { flex: 0 0 auto; font: var(--sbs-fw-bold) var(--sbs-fs-micro)/1 var(--sbs-font-body); white-space: nowrap; }
.sbs-filter-history { padding-top: var(--sbs-sm); }
.sbs-filter-history__label { margin-bottom: 4px; color: var(--sbs-text-muted); font: var(--sbs-fw-semibold) var(--sbs-fs-micro)/1 var(--sbs-font-body); letter-spacing: 0.3px; text-transform: uppercase; }
.sbs-filter-history__chip { color: var(--sbs-text-secondary); background: var(--sbs-bg-hover); border-color: var(--sbs-border-subtle); }

.sbs-colour-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: inline-block;
  background: var(--sbs-colour-dot, #808080);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
}
.sbs-colour-dot--multi { background: conic-gradient(#db3e3e, #e7a437, #e7d64b, #43a85b, #4078d4, #9a5bd4, #db3e3e); }

@media (max-width: 480px) {
  .sbs-filter-gate__button { min-height: 56px; }
  .sbs-filter-shortcuts--split .sbs-filter-shortcut { padding: 8px 10px; }
  .sbs-filter-shortcuts--split .sbs-filter-shortcut__copy { min-width: 0; }
  .sbs-filter-shortcuts--split .sbs-filter-shortcut__count { font-size: var(--sbs-fs-micro); }
}

@media (max-width: 699px) {
  /* The native first viewport goes straight from controls into the product
     grid. Secondary discovery rails remain in the DOM after the grid. */
  .sbs-filter-shortcuts,
  .sbs-filter-history { display: none !important; }
  .sbs-filterbar { margin-bottom: var(--sbs-sm); }
  .sbs-grid { gap: 12px; }
}

/* ---- BANNERS (sale / announcement / next-drop) -------------------------- */
.sbs-banners { display: flex; flex-direction: column; gap: var(--sbs-sm); }
.sbs-banners:empty { display: none; }
.sbs-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--sbs-r-md);
  overflow: hidden;
  transition: opacity var(--sbs-dur-base) var(--sbs-ease-out),
              height var(--sbs-dur-base) var(--sbs-ease-out),
              margin var(--sbs-dur-base) var(--sbs-ease-out),
              padding var(--sbs-dur-base) var(--sbs-ease-out);
}
.sbs-banner.is-dismissing { opacity: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; }
.sbs-banner__icon { display: grid; place-items: center; flex: 0 0 auto; }
.sbs-banner__icon svg { width: 18px; height: 18px; }
.sbs-banner__body { flex: 1; min-width: 0; font-size: var(--sbs-fs-body); line-height: 1.3; }
.sbs-banner__action {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sbs-banner__action:disabled { cursor: default; }
.sbs-banner__cta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: var(--sbs-fs-caption);
  font-weight: var(--sbs-fw-bold);
}
.sbs-banner__cta svg { width: 13px; height: 13px; }
.sbs-banner__x {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: none; background: transparent; cursor: pointer; opacity: 0.7;
  color: inherit;
}
.sbs-banner__x svg { width: 16px; height: 16px; }
.sbs-banner__x:hover { opacity: 1; }

.sbs-banner--sale {
  background: var(--sbs-gold-gradient);
  color: #1a0a00;
}
.sbs-sale-terms {
  margin: 6px 4px 0;
  font-size: var(--sbs-fs-caption);
  color: var(--sbs-text-muted, rgba(255, 255, 255, 0.72));
}
.sbs-sale-terms summary {
  cursor: pointer;
  width: max-content;
  max-width: 100%;
  font-weight: var(--sbs-fw-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sbs-sale-terms ul {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.45;
}
.sbs-banner--sale .sbs-banner__icon { color: #1a0a00; }
.sbs-banner--sale:not(.sbs-banner--sale-pill) .sbs-banner__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
}
.sbs-banner__sale-copy {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.sbs-banner__sale-copy strong { flex: 0 0 auto; }
.sbs-banner__sale-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sbs-banner--sale-pill {
  width: max-content;
  min-height: 44px;
  border: 1px solid var(--sbs-hairline-gold);
  background: var(--sbs-bg-card);
  color: var(--sbs-gold-bright);
  font-weight: var(--sbs-fw-black);
  cursor: pointer;
}
.sbs-banner--sale-pill svg { width: 15px; height: 15px; }
/* Sale window countdown — "Starts in 08:12:44" / "Ends in 18:42:10". Tabular so
   the digits do not jitter once a second. */
.sbs-banner--sale .sbs-banner__meta {
  grid-column: 1;
  grid-row: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 0;
  white-space: nowrap;
  color: rgba(26, 10, 0, 0.72);
}
.sbs-banner--sale:not(.sbs-banner--sale-pill) .sbs-banner__cta {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  white-space: nowrap;
}
.sbs-banner--sale:not(.sbs-banner--sale-pill) .sbs-banner__body:not(.has-sale-timer) .sbs-banner__cta {
  grid-column: 1 / -1;
  justify-self: start;
}
.sbs-banner__meta b,
.sbs-banner--sale-pill b {
  font-variant-numeric: tabular-nums;
  font-weight: var(--sbs-fw-bold);
  color: inherit;
}
/* A PENDING sale is a teaser, not a price. It takes the drop banner's gold
   outline rather than the solid-gold card, which this shop uses to mean "the
   discount is on right now" — the outline says "coming", the fill says "live". */
.sbs-banner--sale-pending {
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-hairline-gold);
  color: var(--sbs-text-primary);
  cursor: default;
}
.sbs-banner--sale-pending .sbs-banner__icon { color: var(--sbs-gold-bright); }
.sbs-banner--sale-pending .sbs-banner__meta { color: var(--sbs-text-muted); }
.sbs-banner--sale-pending strong { color: var(--sbs-gold-bright); }
.sbs-banner--announce {
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-border-subtle);
  color: var(--sbs-text-primary);
}
.sbs-banner--announce .sbs-banner__icon { color: var(--sbs-gold); }
.sbs-banner--drop {
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-hairline-gold);
  color: var(--sbs-text-primary);
}
.sbs-banner--drop .sbs-banner__icon { color: var(--sbs-gold-bright); }
.sbs-banner--drop .sbs-banner__body { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sbs-banner__label {
  font-size: var(--sbs-fs-caption);
  font-weight: var(--sbs-fw-black);
  letter-spacing: 1.5px;
  color: var(--sbs-gold);
  text-transform: uppercase;
}
.sbs-banner__count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--sbs-fw-bold);
  font-size: var(--sbs-fs-price);
  color: var(--sbs-gold-bright);
}
.sbs-banner__live {
  font-weight: var(--sbs-fw-bold);
  color: var(--sbs-gold-bright);
  text-decoration: none;
}
.sbs-banner__meta { font-size: var(--sbs-fs-caption); color: var(--sbs-text-muted); }

@media (max-width: 480px) {
  .sbs-banner--sale:not(.sbs-banner--sale-pill) {
    gap: 8px;
    padding: 12px;
  }
  .sbs-banner--sale:not(.sbs-banner--sale-pill) .sbs-banner__body {
    gap: 3px 8px;
    font-size: 0.875rem;
  }
  .sbs-banner--sale:not(.sbs-banner--sale-pill) .sbs-banner__cta {
    font-size: var(--sbs-fs-micro);
  }
  .sbs-banner--sale:not(.sbs-banner--sale-pill) .sbs-banner__body.has-long-sale-timer {
    grid-template-columns: minmax(0, 1fr);
  }
  .sbs-banner--sale:not(.sbs-banner--sale-pill) .has-long-sale-timer .sbs-banner__meta {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    max-width: 100%;
  }
  .sbs-banner--sale:not(.sbs-banner--sale-pill) .has-long-sale-timer .sbs-banner__cta {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }
}

/* ---- GRID (responsive density) ------------------------------------------ */
.sbs-grid {
  display: grid;
  gap: var(--sbs-grid-gutter);
  grid-template-columns: repeat(2, 1fr);
}
.sbs-grid--d1 { grid-template-columns: 1fr; }
.sbs-grid--d2 { grid-template-columns: repeat(2, 1fr); }
.sbs-grid--d3 { grid-template-columns: repeat(3, 1fr); }

/* ---- PHONE SHOP GEOMETRY -------------------------------------------------
   The native Feed is an equal-column grid: product content may never choose a
   wider track than its neighbour. Plain `1fr` retains an automatic min-content
   floor, which let a long compact-card control widen one phone column and put
   the other card beyond the visual viewport. Keep this scoped to Shop: Saved
   and PDP rails own their separate geometry. */
body.sbs-shop-route,
body.sbs-shop-route .sbs-shop {
  max-inline-size: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
body.sbs-shop-route .sbs-grid {
  min-width: 0;
  max-inline-size: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Recovery aligns this element while the shared masthead remains sticky. */
  scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px));
}
body.sbs-shop-route .sbs-grid--d1 { grid-template-columns: minmax(0, 1fr); }
body.sbs-shop-route .sbs-grid--d2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.sbs-shop-route .sbs-grid--d3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.sbs-shop-route .sbs-grid > .sbs-card,
body.sbs-shop-route .sbs-card,
body.sbs-shop-route .sbs-card__rail,
body.sbs-shop-route .sbs-card__state,
body.sbs-shop-route .sbs-card__cta {
  min-width: 0;
  max-inline-size: 100%;
}
body.sbs-shop-route .sbs-card { inline-size: 100%; }

/* Native cards reserve the same information rail at a given density. The
   values mirror the iOS 1/2/3-up bases (122 / 106 / 88pt); the web CTA stays
   outside this rail and uses its own fixed-height footer. */
body.sbs-shop-route .sbs-grid--d1 .sbs-card { --rail-h: 7.625rem; }
body.sbs-shop-route .sbs-grid--d2 .sbs-card { --rail-h: 6.625rem; }
body.sbs-shop-route .sbs-grid--d3 .sbs-card { --rail-h: 5.5rem; }
body.sbs-shop-route .sbs-card__rail {
  box-sizing: border-box;
  height: var(--rail-h);
  min-height: var(--rail-h);
  max-height: var(--rail-h);
  overflow: hidden;
}
body.sbs-shop-route .sbs-card__btn {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
}

@media (max-width: 699px) {
  /* The legacy compact-card rule used visible overflow. Keep the native hard
     cell boundary on Shop so a recycled or long card cannot paint sideways. */
  body.sbs-shop-route .sbs-grid--d2 .sbs-card,
  body.sbs-shop-route .sbs-grid--d3 .sbs-card { overflow: hidden; }
}

@media (min-width: 700px) {
  /* Density nudges card size; auto-fill fills the available width. */
  .sbs-grid--d1 { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
  .sbs-grid--d2 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .sbs-grid--d3 { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
}

/* ---- SKELETON ------------------------------------------------------------ */
.sbs-skel {
  display: flex;
  flex-direction: column;
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-card);
  overflow: hidden;
  animation: sbs-skel-in 0.32s var(--sbs-ease-out) both;
}
@keyframes sbs-skel-in { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: none; } }
.sbs-skel__img { aspect-ratio: var(--sbs-card-img-ratio); background: var(--sbs-bg-hover); }
.sbs-skel__rail { padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.sbs-skel__bar { height: 11px; border-radius: 6px; background: var(--sbs-bg-hover); }
.sbs-skel__bar--brand { width: 60%; height: 13px; }
.sbs-skel__bar--price { width: 40%; height: 15px; margin-top: 6px; }
.sbs-skel__bar--cta { height: 36px; border-radius: var(--sbs-r-pill); margin-top: 4px; }
.sbs-skel [class*="__bar"], .sbs-skel__img {
  position: relative;
  overflow: hidden;
}
.sbs-skel [class*="__bar"]::after, .sbs-skel__img::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: sbs-shimmer 1.4s infinite;
}
@keyframes sbs-shimmer { 100% { transform: translateX(100%); } }
.sbs-grid.is-loading > .sbs-card { animation: sbs-fade-in var(--sbs-dur-slow) var(--sbs-ease-out) both; }
@keyframes sbs-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- EMPTY / ERROR ------------------------------------------------------- */
.sbs-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sbs-sm);
  padding: var(--sbs-2xl) var(--sbs-md);
  color: var(--sbs-text-secondary);
}
.sbs-state__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--sbs-bg-hover);
  color: var(--sbs-gold);
}
.sbs-state__icon svg { width: 28px; height: 28px; }
.sbs-state__title {
  margin: 4px 0 0;
  font-size: var(--sbs-fs-title-lg);
  font-weight: var(--sbs-fw-bold);
  color: var(--sbs-text-primary);
}
.sbs-state__msg { margin: 0; max-width: 36ch; font-size: var(--sbs-fs-body); }
.sbs-state__cta {
  margin-top: var(--sbs-sm);
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--sbs-r-pill);
  border: none;
  background: var(--sbs-gold-gradient);
  color: #000;
  font-weight: var(--sbs-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
}

/* ---- RECENTLY VIEWED (compact strip above the grid) --------------------- */
.sbs-recently { margin: 0 0 var(--sbs-md); }
.sbs-recently:empty { display: none; }
.sbs-recently__title {
  margin: 0 0 var(--sbs-sm);
  font-size: var(--sbs-fs-caption);
  font-weight: var(--sbs-fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sbs-text-muted);
}
.sbs-recently__row {
  display: flex;
  gap: var(--sbs-sm);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.sbs-recently__row::-webkit-scrollbar { display: none; }
.sbs-recently__item {
  flex: 0 0 auto;
  width: 96px;
  text-decoration: none;
  color: inherit;
}
.sbs-recently__thumb {
  position: relative;
  display: block;
  width: 96px; height: 128px;
  border-radius: var(--sbs-r-md);
  overflow: hidden;
  background: var(--sbs-bg-hover);
  border: 1px solid var(--sbs-border-subtle);
}
.sbs-recently__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* ---- Sold / held / unavailable stamp — same word the grid card uses, at rail
   scale (web parity with the grid's overlay/data-state honesty) ------------ */
.sbs-recently__stamp,
.sbs-recommendations__stamp {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  background: var(--sbs-scrim);
  color: var(--sbs-gold);
  font: var(--sbs-fw-black) 0.7rem/1.1 var(--sbs-card-font, -apple-system, sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.sbs-recommendations__price--unavailable { color: var(--sbs-text-muted); }
/* ---- Reserved-space placeholder while a signed-in rail is pending its first
   fetch (web parity finding 1) — same markup/classes as a real item, so its
   height matches one exactly with nothing to hand-tune. --------------------- */
.sbs-recommendations__item--skeleton { opacity: 0.5; pointer-events: none; }
/* The pending header lays out the rail's real title/explanation so a wrapped
   header reserves its true height, but it is never shown or announced before
   the rail is known to have content. */
.sbs-recommendations__head--reserved { visibility: hidden; }
.sbs-recently__brand {
  display: block;
  margin-top: 5px;
  font-size: var(--sbs-fs-micro);
  font-weight: var(--sbs-fw-semibold);
  color: var(--sbs-gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sbs-recently__name {
  display: block;
  margin-top: 2px;
  font-size: var(--sbs-fs-micro);
  color: var(--sbs-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sbs-recently__size { display: block; font-size: var(--sbs-fs-micro); color: var(--sbs-text-muted); }

/* ---- BASED ON YOUR BROWSING (private, signed-in rail) ------------------- */
.sbs-recommendations { margin: 0 0 var(--sbs-md); }
.sbs-recommendations:empty,
.sbs-recommendations[hidden] { display: none; }
.sbs-recommendations__head { margin: 0 0 var(--sbs-sm); }
.sbs-recommendations__title {
  margin: 0;
  font-size: var(--sbs-fs-caption);
  font-weight: var(--sbs-fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sbs-text-primary);
}
.sbs-recommendations__privacy {
  margin: 4px 0 0;
  font-size: var(--sbs-fs-micro);
  color: var(--sbs-text-muted);
}
.sbs-recommendations__row {
  display: flex;
  gap: var(--sbs-sm);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.sbs-recommendations__row::-webkit-scrollbar { display: none; }
.sbs-recommendations__item {
  flex: 0 0 auto;
  width: 132px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-md);
  background: var(--sbs-bg-card);
}
.sbs-recommendations__item:focus-visible {
  outline: 2px solid var(--sbs-gold);
  outline-offset: 2px;
}
.sbs-recommendations__thumb {
  position: relative;
  display: block;
  width: 132px;
  height: 198px;
  overflow: hidden;
  background: var(--sbs-bg-hover);
}
.sbs-recommendations__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sbs-recommendations__brand,
.sbs-recommendations__meta,
.sbs-recommendations__price {
  display: block;
  padding: 0 var(--sbs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sbs-recommendations__brand {
  margin-top: var(--sbs-sm);
  font-size: var(--sbs-fs-micro);
  font-weight: var(--sbs-fw-bold);
  color: var(--sbs-gold);
}
.sbs-recommendations__meta {
  margin-top: 3px;
  font-size: var(--sbs-fs-micro);
  color: var(--sbs-text-muted);
}
.sbs-recommendations__price {
  margin: var(--sbs-sm) 0;
  font-size: var(--sbs-fs-caption);
  font-weight: var(--sbs-fw-bold);
  color: var(--sbs-text-primary);
}

/* ---- FILTER SHEET (bottom sheet mobile / centered panel desktop) --------- */
.sbs-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sbs-dur-base) var(--sbs-ease-out);
  z-index: 1200;
}
.sbs-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sbs-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--sbs-bg-card);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-top: 1px solid var(--sbs-border-subtle);
  transform: translateY(100%);
  transition: transform var(--sbs-dur-base) var(--sbs-ease-out);
  z-index: 1201;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sbs-sheet.is-open { transform: translateY(0); }
.sbs-sheet__grip {
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--sbs-text-muted);
  opacity: 0.5;
  margin: 10px auto 4px;
}
.sbs-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--sbs-md) var(--sbs-sm);
}
.sbs-sheet__title { margin: 0; font-size: var(--sbs-fs-title); font-weight: var(--sbs-fw-bold); color: var(--sbs-text-primary); }
.sbs-sheet__close { border: none; background: transparent; color: var(--sbs-text-muted); font-size: var(--sbs-fs-title-lg, 1.375rem); cursor: pointer; line-height: 1; padding: 4px; }
.sbs-sheet__close svg { width: 20px; height: 20px; }
.sbs-sheet__list { overflow-y: auto; padding: 0 var(--sbs-sm) var(--sbs-md); }
.sbs-sheet__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sbs-md);
  border: none;
  background: transparent;
  color: var(--sbs-text-primary);
  font-size: var(--sbs-fs-body);
  text-align: left;
  cursor: pointer;
  border-radius: var(--sbs-r-md);
}
.sbs-sheet__opt:hover { background: var(--sbs-bg-hover); }
.sbs-sheet__opt.is-selected { background: color-mix(in srgb, var(--sbs-gold) 8%, transparent); color: var(--sbs-gold-text); font-weight: var(--sbs-fw-semibold); }
.sbs-sheet__opt-copy { min-width: 0; display: inline-flex; align-items: center; gap: 10px; }
.sbs-sheet__opt-copy svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sbs-sheet__opt .sbs-sheet__sub { display: block; font-size: var(--sbs-fs-caption); color: var(--sbs-text-muted); font-weight: var(--sbs-fw-regular); }
.sbs-sheet__check { width: 14px; height: 14px; color: var(--sbs-gold); opacity: 0; }
.sbs-sheet__opt.is-selected .sbs-sheet__check { opacity: 1; }

@media (min-width: 700px) {
  .sbs-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: 380px;
    max-height: 70vh;
    transform: translate(-50%, -48%) scale(0.96);
    border-radius: 18px;
    border: 1px solid var(--sbs-border-subtle);
    opacity: 0;
  }
  .sbs-sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .sbs-sheet__grip { display: none; }
}

/* ---- TOAST (add-to-bag / reminder feedback) ------------------------------ */
.sbs-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 90vw;
  padding: 12px 16px;
  border-radius: var(--sbs-r-pill);
  background: var(--sbs-glass-bg-strong);
  backdrop-filter: blur(var(--sbs-glass-blur));
  -webkit-backdrop-filter: blur(var(--sbs-glass-blur));
  border: 1px solid var(--sbs-hairline-gold);
  color: var(--sbs-text-primary);
  font-size: var(--sbs-fs-body);
  box-shadow: var(--sbs-shadow-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sbs-dur-base) var(--sbs-ease-out),
              transform var(--sbs-dur-base) var(--sbs-ease-spring);
  z-index: 1300;
}
.sbs-toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.sbs-toast > span { line-height: 1.3; }
.sbs-toast__action {
  flex: none;
  color: #000;
  font-weight: var(--sbs-fw-bold);
  background: var(--sbs-gold-bright, #FFD700);
  border: none;
  border-radius: var(--sbs-r-pill);
  padding: 6px 14px;
  min-height: 34px;
  cursor: pointer;
  white-space: nowrap;
}

/* ---- NOTES GATE (iOS DescriptionGateSheet) ------------------------------- */
.sbs-gate {
  position: fixed;
  inset: 0;
  z-index: 2100;       /* above the stories reel (z 2000) so the gate shows over it */
  display: none;       /* toggled via style.display + .is-open */
  align-items: flex-end;
  justify-content: center;
}
.sbs-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  transition: opacity var(--sbs-dur-base) var(--sbs-ease-out);
}
.sbs-gate.is-open .sbs-gate__backdrop { opacity: 1; }
.sbs-gate__sheet {
  position: relative;
  width: min(480px, 100vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: var(--sbs-sm);
  padding: 8px var(--sbs-lg) calc(env(safe-area-inset-bottom, 0px) + var(--sbs-md));
  background: var(--sbs-bg-black, #000);
  border-top-left-radius: var(--sbs-r-sheet, 24px);
  border-top-right-radius: var(--sbs-r-sheet, 24px);
  border: 1px solid var(--sbs-border-subtle);
  border-bottom: none;
  box-shadow: var(--sbs-shadow-strong);
  /* Rests in its open position; the slide-in/out is driven by the Web Animations
     API in notes-gate.js so it can never get stuck mid-CSS-transition. */
}
.sbs-gate__handle {
  width: 36px; height: 4px;
  border-radius: 999px;
  background: var(--sbs-border-subtle);
  margin: 6px auto 2px;
}
.sbs-gate__head { text-align: center; padding: 4px 0 2px; }
.sbs-gate__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sbs-gold);
  font-weight: var(--sbs-fw-bold);
  font-size: var(--sbs-fs-micro);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.sbs-gate__eyebrow svg { width: 14px; height: 14px; }
.sbs-gate__brand {
  margin: 6px 0 2px;
  font: var(--sbs-fw-bold) 1.0625rem/1.2 var(--sbs-font-body);
  color: var(--sbs-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sbs-gate__sub { margin: 0; color: var(--sbs-text-muted); font-size: var(--sbs-fs-caption); }
.sbs-gate__notes {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--sbs-text-primary);
  font-size: var(--sbs-fs-body);
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-hairline-gold, rgba(212, 175, 55, 0.25));
  border-radius: var(--sbs-r-card, 16px);
  padding: 14px 16px;
}
.sbs-gate__actions { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.sbs-gate__confirm {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px;
  border: none;
  border-radius: var(--sbs-r-pill);
  background: var(--sbs-gold-gradient, linear-gradient(135deg, #FFD700, #FFA500));
  color: #000;
  font: var(--sbs-fw-bold) 1rem var(--sbs-font-body);
  cursor: pointer;
}
.sbs-gate__confirm svg { width: 18px; height: 18px; }
.sbs-gate__cancel {
  min-height: 44px;
  background: none; border: none;
  color: var(--sbs-text-muted);
  font-size: var(--sbs-fs-caption);
  cursor: pointer;
}
/* email-prompt variant (reuses the gate shell) */
.sbs-gate__input {
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  padding: 0 16px;
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-hairline-gold, rgba(212, 175, 55, 0.25));
  border-radius: var(--sbs-r-card, 16px);
  color: var(--sbs-text-primary);
  font-size: 1rem;
}
.sbs-gate__input:focus {
  outline: none;
  border-color: var(--sbs-gold, #d4af37);
}
.sbs-gate__err {
  margin: 0;
  color: var(--sbs-danger, #f44336);
  font-size: var(--sbs-fs-caption);
}
.sbs-gate__eyebrow-text { display: inline; }

/* ---- Saved Items page header -------------------------------------------- */
.sbs-saved-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sbs-md); margin: var(--sbs-sm) 0 var(--sbs-md);
}
.sbs-saved-head__copy { min-width: 0; }
.sbs-saved-title {
  margin: 0;
  font: var(--sbs-fw-bold) var(--sbs-fs-title-xl) / 1.1 var(--sbs-font-body);
  color: var(--sbs-text-primary);
}
.sbs-saved-head .sbs-count {
  display: block;
  min-height: 1.1em;
  margin-top: 4px;
  color: var(--sbs-text-muted);
  font-size: var(--sbs-fs-caption);
  font-weight: var(--sbs-fw-semibold);
}

/* Native Saved uses a clear two-mode segment, not a separate web-only rail.
   Both labels stay visible; the active one owns the gold fill. */
.sbs-saved-mode {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 0;
  padding: var(--sbs-xs);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-pill);
  background: var(--sbs-bg-card);
}
.sbs-saved-mode[hidden] { display: none; }
.sbs-saved-mode__tab {
  min-width: 76px;
  min-height: var(--sbs-control-hit);
  padding: var(--sbs-pill-pad-y) var(--sbs-pill-pad-x);
  border: 0;
  border-radius: var(--sbs-r-pill);
  color: var(--sbs-text-muted);
  background: transparent;
  font: var(--sbs-fw-bold) var(--sbs-fs-caption) / 1 var(--sbs-font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--sbs-dur-base) var(--sbs-ease-out), color var(--sbs-dur-fast) var(--sbs-ease-out), transform var(--sbs-dur-fast) var(--sbs-ease-out);
}
.sbs-saved-mode__tab.is-active {
  color: #000;
  background: var(--sbs-gold-gradient);
}
.sbs-saved-mode__tab:active { transform: scale(var(--sbs-press-scale)); }
.sbs-saved-mode__tab:focus-visible { outline: 2px solid var(--sbs-gold-bright); outline-offset: 2px; }

.sbs-saved-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sbs-sm);
  margin: calc(0px - var(--sbs-sm)) 0 var(--sbs-md);
  padding: var(--sbs-sm) var(--sbs-md);
  border: 1px solid var(--sbs-hairline-gold, rgba(212, 175, 55, 0.35));
  border-radius: var(--sbs-r-card);
  background: var(--sbs-bg-card);
  color: var(--sbs-text-muted);
  font-size: var(--sbs-fs-caption);
  font-weight: var(--sbs-fw-semibold);
}
.sbs-saved-sync[hidden] { display: none; }
.sbs-saved-sync button {
  flex: 0 0 auto;
  min-height: var(--sbs-control-hit);
  padding: var(--sbs-pill-pad-y) var(--sbs-pill-pad-x);
  border: 0;
  border-radius: var(--sbs-r-pill);
  background: var(--sbs-gold-gradient);
  color: #000;
  font: var(--sbs-fw-bold) var(--sbs-fs-caption) / 1 var(--sbs-font-body);
  cursor: pointer;
}
.sbs-saved-sync button:focus-visible { outline: 2px solid var(--sbs-gold-bright); outline-offset: 2px; }

.sbs-saved-recovery {
  display: grid;
  gap: var(--sbs-md);
  margin: 0 0 var(--sbs-md);
  padding: var(--sbs-md);
  border: 1px solid var(--sbs-gold-bright);
  border-radius: var(--sbs-r-card);
  background: var(--sbs-bg-card);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.12);
}
.sbs-saved-recovery[hidden] { display: none; }
.sbs-saved-recovery__copy h2 {
  margin: 0 0 var(--sbs-xs);
  color: var(--sbs-text-primary);
  font: var(--sbs-fw-bold) var(--sbs-fs-title) / 1.15 var(--sbs-font-body);
}
.sbs-saved-recovery__copy p {
  margin: 0;
  color: var(--sbs-text-muted);
  font-size: var(--sbs-fs-body);
  line-height: 1.5;
}
.sbs-saved-recovery__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sbs-sm);
}
.sbs-saved-recovery__actions button {
  min-height: var(--sbs-control-hit);
  padding: var(--sbs-pill-pad-y) var(--sbs-pill-pad-x);
  border-radius: var(--sbs-r-pill);
  font: var(--sbs-fw-bold) var(--sbs-fs-caption) / 1 var(--sbs-font-body);
  cursor: pointer;
}
.sbs-saved-recovery__repair {
  border: 0;
  background: var(--sbs-gold-gradient);
  color: #000;
}
.sbs-saved-recovery__export {
  border: 1px solid var(--sbs-hairline-gold, rgba(212, 175, 55, 0.45));
  background: transparent;
  color: var(--sbs-text-primary);
}
.sbs-saved-recovery__actions button:disabled { cursor: wait; opacity: 0.65; }
.sbs-saved-recovery__actions button:focus-visible { outline: 2px solid var(--sbs-gold-bright); outline-offset: 2px; }

/* The app's Saved grid is deliberately regular: a uniform 9:16 image and a
   constant lower rail per density. The older web card lets optional notes,
   discounts and CTA copy alter its height, producing the staggered rows seen
   on iPhone. Scope native geometry to Saved without changing the Shop feed. */
.sbs-saved-route #saved-grid {
  align-items: stretch;
  grid-auto-flow: row;
  --sbs-saved-rail-h: 8.125rem; /* iOS default 2-up: 130px before the fixed CTA lane */
}
.sbs-saved-route #saved-grid.sbs-grid--d1 { --sbs-saved-rail-h: 9.125rem; }
.sbs-saved-route #saved-grid.sbs-grid--d3 { --sbs-saved-rail-h: 6.625rem; }
.sbs-saved-route #saved-grid .sbs-card {
  /* .sbs-card owns --rail-h for the Shop feed, so override it on the card
     itself rather than relying on an inherited grid value. */
  --rail-h: var(--sbs-saved-rail-h);
  min-width: 0;
  height: 100%;
}
.sbs-saved-route #saved-grid .sbs-card__rail {
  box-sizing: border-box;
  height: var(--sbs-saved-rail-h);
  min-height: var(--sbs-saved-rail-h);
  max-height: var(--sbs-saved-rail-h);
  overflow: hidden;
}

/* The app's Saved empty hero is intentionally not a tiny generic grid
   placeholder: it is the 96pt icon / 20pt title state used by Saved on iOS.
   Keep it route-scoped so Wallet, Sizes and Shop preserve their own states. */
.sbs-saved-route #saved-grid.sbs-saved-grid--empty {
  display: grid;
  grid-template-columns: 1fr;
}
.sbs-saved-route #saved-grid .sbs-saved-empty {
  grid-column: 1 / -1;
  box-sizing: border-box;
  min-height: 424px; /* native 360pt centred surface + 32pt vertical insets */
  padding: 40px var(--sbs-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sbs-md);
  text-align: center;
}
.sbs-saved-route #saved-grid .sbs-saved-empty .sbs-state__icon {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--sbs-bg-hover) 60%, transparent);
  color: color-mix(in srgb, var(--sbs-gold) 80%, transparent);
}
.sbs-saved-route #saved-grid .sbs-saved-empty .sbs-state__icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.5;
}
.sbs-saved-empty__copy {
  display: grid;
  gap: 6px;
  max-width: 32ch;
}
.sbs-saved-route #saved-grid .sbs-saved-empty .sbs-state__title {
  margin: 0;
  color: var(--sbs-text-primary);
  font: var(--sbs-fw-bold) 1.25rem / 1.2 var(--sbs-font-display);
}
.sbs-saved-route #saved-grid .sbs-saved-empty .sbs-state__msg {
  margin: 0;
  color: var(--sbs-text-muted);
  font: var(--sbs-fw-medium) var(--sbs-fs-caption) / 1.45 var(--sbs-font-body);
}
.sbs-saved-route #saved-grid .sbs-saved-empty .sbs-state__cta {
  min-height: var(--sbs-control-hit);
  margin-top: var(--sbs-xs);
  padding: 12px 28px;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font: var(--sbs-fw-bold) 0.9375rem / 1 var(--sbs-font-display);
}
/* On this app-like empty/error screen, the dock already carries navigation.
   Suppress the desktop footer's long dead-end until there is product content. */
.sbs-saved-route.sbs-saved-is-empty #footer-placeholder { display: none; }

@media (max-height: 700px) {
  .sbs-saved-route #saved-grid .sbs-saved-empty {
    min-height: 360px;
    padding-block: var(--sbs-xl);
  }
}

@media (max-width: 699px) {
  .sbs-saved-route #saved-grid .sbs-card {
    overflow: hidden;
    background: var(--sbs-bg-card);
    border: 1px solid var(--sbs-border-subtle);
    border-radius: var(--sbs-r-card);
    box-shadow: var(--sbs-shadow-soft);
  }
  .sbs-saved-route #saved-grid .sbs-card__media { border-radius: 0; }
  .sbs-saved-route #saved-grid .sbs-card__rail { padding-inline: 12px; }
  .sbs-saved-route #saved-grid .sbs-card__cta { padding-inline: 12px; padding-bottom: 12px; }
}

/* ---- SBS UPDATES (web counterpart to the iOS notification inbox) --------
   This is intentionally an inbox of server-recorded SBS updates, not a fake
   browser-push permission flow. APNs remains owned by the native app. */
.sbs-notification-trigger { cursor: pointer; font: inherit; }
.sbs-notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 1;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid var(--sbs-bg-black, #000);
  border-radius: 999px;
  color: var(--sbs-bg-black, #000);
  background: var(--sbs-gold-bright, #ffd700);
  font: var(--sbs-fw-heavy) 10px/13px var(--sbs-font-body);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sbs-notification-sheet[hidden] { display: none; }
html.sbs-updates-open,
body.sbs-updates-open { overflow: hidden; }
.sbs-notification-sheet {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  background: rgba(0, 0, 0, .66);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.sbs-notification-sheet__dialog {
  width: min(100%, 620px);
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sbs-bg-black, #000);
  border-inline: 1px solid var(--sbs-border-subtle);
  box-shadow: var(--sbs-shadow-strong);
}
.sbs-notification-sheet__masthead {
  display: grid;
  grid-template-columns: var(--sbs-control-hit) minmax(0, 1fr) var(--sbs-control-hit);
  align-items: center;
  min-height: calc(72px + env(safe-area-inset-top, 0px));
  padding: calc(var(--sbs-sm) + env(safe-area-inset-top, 0px)) var(--sbs-md) var(--sbs-sm);
  border-bottom: 1px solid var(--sbs-hairline-gold);
  background: color-mix(in srgb, var(--sbs-bg-black, #000) 78%, transparent);
  -webkit-backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
  backdrop-filter: blur(var(--sbs-glass-blur)) saturate(var(--sbs-glass-saturate));
}
.sbs-notification-sheet__close,
.sbs-notification-sheet__refresh {
  position: relative;
  display: grid;
  width: var(--sbs-control-hit);
  height: var(--sbs-control-hit);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--sbs-gold-text);
  background: transparent;
  cursor: pointer;
}
.sbs-notification-sheet__close::before,
.sbs-notification-sheet__refresh::before {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--sbs-gold) 25%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sbs-bg-card) 76%, transparent);
  content: "";
}
.sbs-notification-sheet__close .sbs-symbol,
.sbs-notification-sheet__refresh .sbs-symbol { position: relative; width: 18px; height: 18px; }
.sbs-notification-sheet__close:active,
.sbs-notification-sheet__refresh:active { transform: scale(.94); }
.sbs-notification-sheet__logo {
  justify-self: center;
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(255, 215, 0, .22));
}
.sbs-notification-sheet__spacer { width: var(--sbs-control-hit); height: var(--sbs-control-hit); }
.sbs-notification-sheet__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sbs-md) var(--sbs-md) calc(var(--sbs-2xl) + env(safe-area-inset-bottom, 0px));
}
.sbs-notification-sheet__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sbs-md);
  min-height: var(--sbs-control-hit);
  margin-bottom: var(--sbs-sm);
}
.sbs-notification-sheet__title-row h2 {
  margin: 0;
  color: var(--sbs-text-primary);
  font: var(--sbs-fw-bold) var(--sbs-fs-title-lg)/1.1 var(--sbs-font-body);
}
.sbs-notification-sheet__content { display: grid; gap: var(--sbs-sm); }
.sbs-notification-state {
  display: grid;
  justify-items: center;
  gap: var(--sbs-sm);
  min-height: 220px;
  align-content: center;
  padding: var(--sbs-lg);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-card);
  color: var(--sbs-text-secondary);
  text-align: center;
}
.sbs-notification-state .sbs-symbol {
  width: 34px;
  height: 34px;
  color: color-mix(in srgb, var(--sbs-gold) 72%, transparent);
}
.sbs-notification-state h3 {
  margin: 0;
  color: var(--sbs-text-primary);
  font: var(--sbs-fw-bold) var(--sbs-fs-title-lg)/1.2 var(--sbs-font-body);
}
.sbs-notification-state p { max-width: 28ch; margin: 0; font: var(--sbs-fw-medium) var(--sbs-fs-caption)/1.45 var(--sbs-font-body); }
.sbs-notification-state__action {
  display: inline-grid;
  min-height: var(--sbs-control-hit);
  place-items: center;
  padding: 0 var(--sbs-md);
  border: 0;
  border-radius: var(--sbs-r-pill);
  color: #000;
  background: var(--sbs-gold-gradient);
  font: var(--sbs-fw-bold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
  text-decoration: none;
}
.sbs-notification-row {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-card);
  color: inherit;
  background: color-mix(in srgb, var(--sbs-bg-card) 88%, transparent);
  text-align: left;
  text-decoration: none;
}
button.sbs-notification-row { cursor: pointer; font: inherit; }
a.sbs-notification-row { cursor: pointer; }
.sbs-notification-row:active { transform: scale(.985); }
.sbs-notification-row.is-unread { border-color: color-mix(in srgb, var(--sbs-gold) 58%, var(--sbs-border-subtle)); }
.sbs-notification-row__media {
  display: grid;
  width: 52px;
  height: 62px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--sbs-r-sm);
  color: var(--sbs-gold-text);
  background: var(--sbs-bg-hover);
}
.sbs-notification-row__media img { width: 100%; height: 100%; object-fit: cover; }
.sbs-notification-row__media .sbs-symbol { width: 22px; height: 22px; }
.sbs-notification-row__copy { min-width: 0; display: grid; gap: 4px; }
.sbs-notification-row__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sbs-sm); }
.sbs-notification-row__type {
  overflow: hidden;
  color: var(--sbs-gold-text);
  font: var(--sbs-fw-bold) 10px/1 var(--sbs-font-body);
  letter-spacing: .9px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.sbs-notification-row__time { flex: none; color: var(--sbs-text-muted); font: var(--sbs-fw-medium) 11px/1 var(--sbs-font-body); }
.sbs-notification-row__title { overflow: hidden; color: var(--sbs-text-primary); font: var(--sbs-fw-bold) var(--sbs-fs-caption)/1.2 var(--sbs-font-body); text-overflow: ellipsis; white-space: nowrap; }
.sbs-notification-row__body { display: -webkit-box; overflow: hidden; color: var(--sbs-text-secondary); font: var(--sbs-fw-regular) var(--sbs-fs-caption)/1.35 var(--sbs-font-body); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sbs-notification-row__destination { color: var(--sbs-gold-text); font: var(--sbs-fw-medium) 11px/1.2 var(--sbs-font-body); }

@media (min-width: 700px) {
  .sbs-notification-sheet { padding: 5vh var(--sbs-md); }
  .sbs-notification-sheet__dialog { height: min(90vh, 760px); border: 1px solid var(--sbs-border-subtle); border-radius: var(--sbs-r-sheet); }
}