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

/* Native feed search is a single quiet lane, not a web search form bolted on
   later. It shares the same 44pt control height as the category and facet
   controls, so the top of the feed now establishes one clean baseline. */
.sbs-shop-search {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: var(--sbs-sm);
  padding: 0 12px;
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-md);
  color: var(--sbs-text-muted);
  background: var(--sbs-bg-hover);
}
.sbs-shop-search > .sbs-symbol { width: 17px; height: 17px; }
.sbs-shop-search input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--sbs-text-primary);
  background: transparent;
  font: var(--sbs-fw-medium) .9375rem/1 var(--sbs-font-body);
}
.sbs-shop-search input::placeholder { color: var(--sbs-text-muted); opacity: .82; }
.sbs-shop-search:focus-within { border-color: color-mix(in srgb, var(--sbs-gold) 54%, var(--sbs-border-subtle)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sbs-gold) 12%, transparent); }
.sbs-shop-search button {
  display: none;
  width: 32px;
  height: 32px;
  margin-right: -6px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--sbs-text-muted);
  background: transparent;
  cursor: pointer;
}
.sbs-filterbar.has-search .sbs-shop-search button { display: grid; }
.sbs-shop-search button svg { width: 14px; height: 14px; }
.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__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-banner--sale .sbs-banner__icon { color: #1a0a00; }
.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); }

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

@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 {
  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; }
.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 {
  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; }

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