/* ============================================================================
   sbs-shopcard.css — the unified state-driven product card.
   ----------------------------------------------------------------------------
   One DOM/style for all states (available / sold / reserved), mirroring the
   iOS unified ShopCard (reference_shopcard_unified). Density is set by a
   parent class on the grid: .sbs-grid--d1 / --d2 / --d3 (1/2/3 columns).
   Requires sbs-tokens.css.
   ========================================================================== */

.sbs-card {
  --card-scale: 1;          /* iOS sizeScale: 1.15 / 1.0 / 0.82 */
  --rail-h: 0px;            /* content-led rail: mobile cards must not grow a dead zone */
  /* Theme.Font is SF Pro on iOS. Keep the card on the browser's system face
     so Safari reads like the app without asking the page to load another font. */
  --sbs-card-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  display: flex;
  flex-direction: column;
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-card);
  box-shadow: var(--sbs-shadow-soft);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform var(--sbs-dur-base) var(--sbs-ease-out),
              box-shadow var(--sbs-dur-base) var(--sbs-ease-out);
}
@media (hover: hover) {
  .sbs-card:hover { transform: translateY(-3px); box-shadow: var(--sbs-shadow-strong); }
}
.sbs-card--sold,
.sbs-card--reserved { opacity: 0.8; }

/* ---- MEDIA (9:16) -------------------------------------------------------- */
.sbs-card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--sbs-card-img-ratio);
  background: var(--sbs-bg-hover);     /* brand-tinted placeholder (no blank black) */
  overflow: hidden;
  text-decoration: none;
  outline-offset: -2px;
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
}
.sbs-card__media:focus-visible,
.sbs-card__heart:focus-visible,
.sbs-card__btn:focus-visible {
  outline: 2px solid var(--sbs-gold-bright);
  outline-offset: 2px;
}
.sbs-card__carousel {
  display: flex;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sbs-card__carousel::-webkit-scrollbar { display: none; }
/* 3-up density: disable carousel, show first image only (too narrow to swipe) */
.sbs-grid--d3 .sbs-card__carousel { overflow-x: hidden; }

.sbs-card__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
}
.sbs-grid--d3 .sbs-card__slide:not(:first-child) { display: none; }

.sbs-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity var(--sbs-dur-slow) var(--sbs-ease-out);
}
.sbs-card__img.is-loaded { opacity: 1; }

/* Multi-image affordances */
.sbs-card__dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: none;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
/* Native feed uses dots on the spacious 1-up card. At 2/3-up the photo badge
   communicates the gallery count without crowding the image. */
.sbs-grid--d1 .sbs-card__dots { display: flex; }
.sbs-card__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  transition: background var(--sbs-dur-fast) var(--sbs-ease-out),
              width var(--sbs-dur-fast) var(--sbs-ease-out);
}
.sbs-card__dot.is-active { background: var(--sbs-gold-bright); width: 14px; }

.sbs-card__count {
  position: absolute;
  right: 8px; bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 7px;
  font: var(--sbs-fw-semibold) var(--sbs-fs-micro, 0.6875rem) / 1 var(--sbs-card-font);
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--sbs-r-pill);
  pointer-events: none;
  z-index: 1;
}
.sbs-card__count svg { width: 11px; height: 11px; stroke-width: 2.2; }

/* App-level photo state: a single factual sale badge, never synthetic urgency. */
.sbs-card__badge {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: var(--sbs-r-pill);
  font: var(--sbs-fw-bold) 0.625rem / 1 var(--sbs-card-font);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000;
  background: var(--sbs-gold-gradient);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 1;
}

/* ---- SOLD / RESERVED overlay -------------------------------------------- */
.sbs-card__scrim {
  position: absolute;
  inset: 0;
  background: var(--sbs-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.sbs-card__stamp {
  font: var(--sbs-fw-black) calc(1.375rem * var(--card-scale))/1 var(--sbs-card-font);
  letter-spacing: var(--sbs-track-stamp);
  color: var(--sbs-gold);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
}
.sbs-card--reserved .sbs-card__stamp { font-size: calc(1rem * var(--card-scale)); }

/* ---- Heart / save (available only) -------------------------------------- */
.sbs-card__heart {
  position: absolute;
  top: 8px; right: 8px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}
.sbs-card__heart::before {
  content: "";
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(18, 18, 20, 0.38);
  backdrop-filter: blur(16px) saturate(180%) brightness(0.95);
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(0.95);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.sbs-card__heart svg {
  position: relative;
  width: 14px; height: 14px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 250ms var(--sbs-ease-spring), fill var(--sbs-dur-fast) var(--sbs-ease-out),
              stroke var(--sbs-dur-fast) var(--sbs-ease-out);
}
.sbs-card__heart.is-saved { color: var(--sbs-gold); }
.sbs-card__heart:active svg { transform: scale(0.82); }
.sbs-card__heart.just-saved svg { transform: scale(1.14); }

/* ---- INFO RAIL ----------------------------------------------------------- */
.sbs-card__rail {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sbs-xs) * var(--card-scale));
  padding: calc(12px * var(--card-scale)) calc(12px * var(--card-scale)) 0;
  min-height: var(--rail-h);
  /* Native cards keep the product proof, price and action in one compact
     vertical rhythm. Let content size this rail rather than stretching it to
     the height of a neighbouring card. */
  flex: 0 0 auto;
}
.sbs-card__brand {
  margin: 0;
  font: var(--sbs-fw-bold) calc(0.8125rem * var(--card-scale))/1.15 var(--sbs-card-font);
  letter-spacing: var(--sbs-track-brand);
  text-transform: uppercase;
  color: var(--sbs-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sbs-card__brand:empty { display: none; }

/* One proof line replaces the old four-row database rail. Its ordering mirrors
   the native ShopCard: size (white) → condition grade (gold) → type (muted). */
.sbs-card__proof {
  display: flex;
  align-items: center;
  min-height: calc(18px * var(--card-scale));
  gap: calc(6px * var(--card-scale));
  overflow: hidden;
  white-space: nowrap;
}
.sbs-card__size {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: var(--sbs-fw-bold) calc(0.75rem * var(--card-scale))/1.15 var(--sbs-card-font);
  color: var(--sbs-text-primary);
}
.sbs-card__grade {
  flex: 0 0 auto;
  padding: calc(2px * var(--card-scale)) calc(5px * var(--card-scale));
  border: 1px solid color-mix(in srgb, var(--sbs-gold) 50%, transparent);
  border-radius: 4px;
  font: var(--sbs-fw-black) calc(0.5625rem * var(--card-scale))/1 var(--sbs-card-font);
  letter-spacing: 0.6px;
  color: var(--sbs-gold-text);
  text-overflow: clip;
}
.sbs-card__type {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: var(--sbs-fw-semibold) calc(0.6875rem * var(--card-scale))/1.15 var(--sbs-card-font);
  color: var(--sbs-text-muted);
}

.sbs-card__state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(3px * var(--card-scale));
  margin-top: calc(var(--sbs-xs) * var(--card-scale));
  padding-top: calc(4px * var(--card-scale));
}

/* Price (available) */
.sbs-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font: var(--sbs-fw-semibold) calc(var(--sbs-fs-price) * var(--card-scale))/1 ui-rounded, "SF Pro Rounded", var(--sbs-card-font);
  color: var(--sbs-gold-text);
}
.sbs-card__price s {
  font-size: calc(0.75rem * var(--card-scale));
  color: var(--sbs-text-muted);
  text-decoration: line-through;
  font-weight: var(--sbs-fw-medium);
}
.sbs-card__saving {
  display: block;
  margin-top: calc(1px * var(--card-scale));
  font: var(--sbs-fw-bold) calc(0.625rem * var(--card-scale))/1.1 var(--sbs-card-font);
  color: var(--sbs-danger);
}
.sbs-card__price--tbc {
  color: var(--sbs-text-secondary);
  font: var(--sbs-fw-medium) calc(0.75rem * var(--card-scale))/1.25 var(--sbs-card-font);
  font-weight: var(--sbs-fw-semibold);
  white-space: normal;       /* TBC price labels wrap, never clip */
}
.sbs-card__notes {
  display: flex;            /* own line ABOVE the price (inline-flex jammed it against the price) */
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin-bottom: calc(1px * var(--card-scale));
  font: var(--sbs-fw-semibold) calc(0.625rem * var(--card-scale))/1 var(--sbs-card-font);
  color: color-mix(in srgb, var(--sbs-gold) 85%, transparent);
}

/* Sold/reserved twins get one factual status line. The footer supplies the
   action; filler copy just makes a compact native rail feel noisier. */
.sbs-card__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: var(--sbs-fw-semibold) calc(var(--sbs-fs-micro) * var(--card-scale))/1.2 var(--sbs-card-font);
  color: var(--sbs-gold);
}
/* Native card symbols have deliberately compact visual bounds. */
.sbs-card__status svg { width: 11px; height: 11px; flex: 0 0 auto; fill: currentColor; stroke-width: 2; }
.sbs-card__notes svg { width: 11px; height: 11px; flex: 0 0 auto; stroke-width: 2; }

/* ---- CTA FOOTER ---------------------------------------------------------- */
.sbs-card__cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding: calc(10px * var(--card-scale)) calc(12px * var(--card-scale)) calc(12px * var(--card-scale));
}
.sbs-card__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  width: 100%;
  padding: 0 12px;
  border-radius: var(--sbs-r-pill);
  border: none;
  font: var(--sbs-fw-bold) calc(0.6875rem * var(--card-scale))/1 var(--sbs-card-font);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--sbs-dur-fast) var(--sbs-ease-out),
              filter var(--sbs-dur-fast) var(--sbs-ease-out),
              background var(--sbs-dur-fast) var(--sbs-ease-out),
              border-color var(--sbs-dur-fast) var(--sbs-ease-out);
}
.sbs-card__btn:active { transform: scale(0.97); }

/* Primary: gold gradient, black text */
.sbs-card__btn--primary { background: var(--sbs-gold-gradient); color: #000; }
.sbs-card__btn--primary:hover { filter: brightness(1.05); }
.sbs-card__btn--primary.is-in-cart { background: color-mix(in srgb, var(--sbs-gold) 75%, #000); }

/* Outline (multi-size / bell) */
.sbs-card__btn--outline {
  background: transparent;
  color: var(--sbs-gold-text);
  border: 1px solid color-mix(in srgb, var(--sbs-gold) 40%, transparent);
}
.sbs-card__btn--outline.is-on {
  color: var(--sbs-gold);
  border-color: color-mix(in srgb, var(--sbs-gold) 60%, transparent);
}

/* Secondary add (for request-price items) */
.sbs-card__btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sbs-text-secondary);
  min-height: 34px;
  font-size: calc(0.6875rem * var(--card-scale));
}

/* Disabled / non-interactive (defensive; sold/reserved use bell instead) */
.sbs-card__btn[disabled] {
  background: color-mix(in srgb, var(--sbs-danger) 12%, transparent);
  color: var(--sbs-danger);
  cursor: default;
}
.sbs-card__btn svg { width: 14px; height: 14px; stroke-width: 2.25; }

/* The phone feed uses media-led cards. Remove the old boxed-web treatment on
   the compact grid so every image, rail and CTA shares one vertical baseline. */
@media (max-width: 699px) {
  .sbs-grid--d2 .sbs-card,
  .sbs-grid--d3 .sbs-card {
    overflow: visible;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .sbs-grid--d2 .sbs-card__media,
  .sbs-grid--d3 .sbs-card__media { border-radius: var(--sbs-r-card); }
  .sbs-grid--d2 .sbs-card__rail,
  .sbs-grid--d3 .sbs-card__rail { padding-inline: 0; }
  .sbs-grid--d2 .sbs-card__cta,
  .sbs-grid--d3 .sbs-card__cta { padding-inline: 0; padding-bottom: 4px; }

  /* Compact cards retain the factual Reduced badge without letting it run
     beneath the save button's 44pt touch target. */
  .sbs-grid--d2 .sbs-card__badge,
  .sbs-grid--d3 .sbs-card__badge {
    right: 52px;
    max-width: calc(100% - 60px);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---- DENSITY SCALES (iOS sizeScale: 1.15 / 1.0 / 0.82) ------------------- */
.sbs-grid--d1 .sbs-card { --card-scale: 1.15; }
.sbs-grid--d2 .sbs-card { --card-scale: 1.0; }
.sbs-grid--d3 .sbs-card { --card-scale: 0.82; }

/* Keep 1-up immersive on the web too. It is intentionally a vertical fashion
   surface, matching the iOS feed rather than falling back to a list row. */
.sbs-grid--d1 .sbs-card__rail { padding-top: calc(12px * var(--card-scale)); }