/* ============================================================================
   sbs-pdp.css — product detail, composed from the shipping iOS PDP grammar.
   Media owns the first viewport; the decision stack is brand → title → price →
   proof → size → CTA. Scoped to .sbs-pdp so shared site chrome stays untouched.
   ========================================================================== */

.sbs-pdp {
  --sbs-pdp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --sbs-pdp-price-font: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  max-width: 860px;
  margin: 0 auto;
  /* Fail-safe when the asynchronously loaded footer is unavailable: leave the
     final row enough runway to clear the 66px buy bar and its 16px inset. */
  padding: 0 var(--sbs-md) calc(88px + env(safe-area-inset-bottom, 0px));
  color: var(--sbs-text-primary);
  font-family: var(--sbs-pdp-font);
}

/* The in-flow footer supplies ample scroll runway for the fixed buy bar. Once
   it mounts, mirror iOS's visible 48pt tail (24pt on the decision stack plus
   24pt on its final content) and remove the footer's second shared-page margin.
   Browsers without :has keep the conservative fallback above. */
.sbs-product-route .sbs-footer { margin-top: 0; }
@supports selector(body:has(#footer-placeholder > .sbs-footer)) {
  body.sbs-product-route:has(#footer-placeholder > .sbs-footer) .sbs-pdp {
    padding-bottom: calc(var(--sbs-lg) + var(--sbs-lg) + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- loading: no bare “Loading…” flash ---------------------------------- */
.sbs-pdp__loading {
  min-height: min(72svh, 640px);
  margin-inline: calc(-1 * var(--sbs-md));
  overflow: hidden;
}
.sbs-pdp__skeleton-media,
.sbs-pdp__skeleton {
  display: block;
  background: linear-gradient(104deg, var(--sbs-bg-hover) 28%, color-mix(in srgb, var(--sbs-bg-hover) 68%, #fff) 45%, var(--sbs-bg-hover) 62%);
  background-size: 220% 100%;
  animation: sbs-pdp-shimmer 1.45s linear infinite;
}
.sbs-pdp__skeleton-media {
  height: clamp(360px, 56svh, 500px);
  background-color: var(--sbs-bg-hover);
  border-radius: 0 0 24px 24px;
}
.sbs-pdp__skeleton-copy {
  display: grid;
  gap: 12px;
  padding: var(--sbs-lg) var(--sbs-md);
}
.sbs-pdp__skeleton { height: 14px; border-radius: var(--sbs-r-pill); }
.sbs-pdp__skeleton--eyebrow { width: 28%; height: 11px; }
.sbs-pdp__skeleton--title { width: 64%; height: 30px; }
.sbs-pdp__skeleton--price { width: 32%; height: 32px; }
.sbs-pdp__skeleton--line { width: 88%; }
@keyframes sbs-pdp-shimmer { to { background-position: -220% 0; } }

/* ---- media-first route sheet --------------------------------------------- */
.sbs-pdp__stage {
  position: relative;
  margin-inline: calc(-1 * var(--sbs-md));
}
.sbs-pdp__native-head {
  position: absolute;
  z-index: 4;
  top: max(8px, env(safe-area-inset-top, 0px));
  right: 12px;
  left: 12px;
  height: var(--sbs-control-hit);
  pointer-events: none;
}
.sbs-pdp__native-head > * { pointer-events: auto; }
.sbs-pdp__head-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.65));
  transform: translate(-50%, -50%);
}
.sbs-pdp__gallery {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--sbs-gold) 12%, transparent), transparent 42%),
    linear-gradient(180deg, #171717 0%, #0a0a0a 100%);
  border-radius: 0 0 24px 24px;
  box-shadow: var(--sbs-shadow-strong);
}
.sbs-pdp__gallery::after {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34%;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.48));
}
.sbs-pdp__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sbs-pdp__track::-webkit-scrollbar { display: none; }
.sbs-pdp__slide {
  display: grid;
  flex: 0 0 100%;
  height: clamp(360px, 56svh, 500px);
  place-items: center;
  scroll-snap-align: center;
}
.sbs-pdp__slide img {
  width: 100%;
  height: 100%;
  /* A replaced grid item keeps its intrinsic automatic minimum unless both
     axes are reset. Without this, portrait photos grow taller than the fixed
     iOS-height media stage and the gallery clips them despite object-fit. */
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  cursor: zoom-in;
  -webkit-user-select: none;
  user-select: none;
}

/* PDP-local route control. This deliberately does not style the shared header. */
.sbs-pdp__back,
.sbs-pdp__iconbtn {
  display: inline-grid;
  width: var(--sbs-control-hit);
  height: var(--sbs-control-hit);
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--sbs-gold) 30%, transparent);
  border-radius: 50%;
  color: var(--sbs-gold);
  background: color-mix(in srgb, var(--sbs-bg-card) 66%, 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));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  transition: transform 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);
}
/* The gallery controls sit directly on arbitrary product photography. Give the
   native close/basket pair a deliberately stronger glass surface so neither
   reads as part of the image (especially on black leather or dark trainers). */
.sbs-pdp__native-head .sbs-pdp__back,
.sbs-pdp__native-head .sbs-pdp__bag {
  border-color: rgba(255, 215, 0, 0.52);
  color: var(--sbs-gold-bright);
  background: rgba(6, 6, 8, 0.80);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.sbs-pdp__back {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  text-decoration: none;
}
.sbs-pdp__back span { display: none; }
.sbs-pdp__back svg,
.sbs-pdp__iconbtn svg { width: 17px; height: 17px; stroke-width: 1.9; }
.sbs-pdp__back:active,
.sbs-pdp__iconbtn:active { transform: scale(0.93); }
.sbs-pdp__iconbtn {
  cursor: pointer;
  font: inherit;
}
.sbs-pdp__bag { position: absolute; z-index: 1; top: 0; right: 0; }
.sbs-pdp__save.is-on { color: var(--sbs-gold-bright); }
.sbs-pdp__count,
.sbs-pdp__media-hint {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font: var(--sbs-fw-semibold) var(--sbs-fs-micro) / 1 var(--sbs-pdp-font);
  letter-spacing: 0.02em;
}
.sbs-pdp__count {
  left: 14px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--sbs-r-pill);
  background: rgba(5, 5, 7, 0.78);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.sbs-pdp__media-hint {
  right: 14px;
  width: 28px;
  height: 28px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 50%;
  background: rgba(5, 5, 7, 0.78);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.sbs-pdp__media-hint svg { width: 14px; height: 14px; stroke-width: 1.8; }
.sbs-pdp__dots {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 20px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
.sbs-pdp__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--sbs-r-pill);
  background: rgba(255, 255, 255, 0.45);
  transition: width var(--sbs-dur-fast) var(--sbs-ease-out), background var(--sbs-dur-fast) var(--sbs-ease-out);
}
.sbs-pdp__dot.is-on { width: 18px; background: var(--sbs-gold-bright); }

/* ---- iOS decision hierarchy ---------------------------------------------- */
.sbs-pdp__info {
  padding: var(--sbs-lg) 0 0;
  animation: sbs-pdp-rise var(--sbs-dur-slow) var(--sbs-ease-out) both;
}
@keyframes sbs-pdp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.sbs-pdp__identity { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sbs-md); }
.sbs-pdp__identity-copy { display: grid; min-width: 0; gap: 6px; }
.sbs-pdp__identity-actions { display: inline-flex; flex: 0 0 auto; gap: var(--sbs-sm); }
.sbs-pdp__identity-action {
  width: var(--sbs-control-hit);
  height: var(--sbs-control-hit);
  border-color: var(--sbs-border-subtle);
  background: var(--sbs-bg-hover);
  box-shadow: none;
}
.sbs-pdp__brand,
.sbs-pdp__section-kicker {
  margin: 0;
  color: var(--sbs-gold);
  font: var(--sbs-fw-bold) 0.8125rem / 1 var(--sbs-pdp-font);
  letter-spacing: 2.3px;
  text-transform: uppercase;
}
.sbs-pdp__title {
  max-width: 18ch;
  margin: 0;
  color: var(--sbs-text-primary);
  font: var(--sbs-fw-bold) clamp(1.6rem, 1.22rem + 1.7vw, 2rem) / 1.16 var(--sbs-pdp-font);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.sbs-pdp__price-area { margin-top: 14px; }
.sbs-pdp__price-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.sbs-pdp__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sbs-sm);
  color: var(--sbs-gold-text);
  font: var(--sbs-fw-semibold) clamp(2rem, 1.57rem + 2.5vw, 2.375rem) / 0.98 var(--sbs-pdp-price-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
}
.sbs-pdp__price s {
  color: var(--sbs-text-muted);
  font: var(--sbs-fw-medium) 1rem / 1 var(--sbs-pdp-font);
  letter-spacing: -0.02em;
  text-decoration-thickness: 1px;
}
.sbs-pdp__saving {
  color: var(--sbs-danger);
  font: var(--sbs-fw-bold) var(--sbs-fs-micro) / 1 var(--sbs-pdp-font);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sbs-pdp__price--tbc {
  color: var(--sbs-gold-text);
  font: var(--sbs-fw-bold) 1.5rem / 1 var(--sbs-pdp-font);
  letter-spacing: -0.03em;
}
.sbs-pdp__cashback {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  margin-top: 12px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--sbs-gold) 30%, transparent);
  border-radius: var(--sbs-r-pill);
  color: var(--sbs-gold-text);
  background: color-mix(in srgb, var(--sbs-gold) 12%, transparent);
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption) / 1.25 var(--sbs-pdp-font);
}
.sbs-pdp__cashback svg { width: 15px; height: 15px; flex: none; stroke-width: 1.8; }

/* Category, grade, and availability are compact stamps, not database rows. */
.sbs-pdp__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sbs-sm);
  margin-top: var(--sbs-md);
}
.sbs-pdp__badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-sm);
  color: var(--sbs-text-secondary);
  background: color-mix(in srgb, var(--sbs-bg-hover) 74%, transparent);
  font: var(--sbs-fw-semibold) var(--sbs-fs-micro) / 1 var(--sbs-pdp-font);
}
.sbs-pdp__badge svg { width: 13px; height: 13px; stroke-width: 1.9; }
.sbs-pdp__badge--condition { border-color: color-mix(in srgb, var(--sbs-gold) 34%, transparent); color: var(--sbs-gold-text); }
.sbs-pdp__badge--available { border-color: color-mix(in srgb, var(--sbs-gold) 42%, transparent); color: var(--sbs-gold-bright); }
.sbs-pdp__badge--reserved { border-color: color-mix(in srgb, var(--sbs-warning) 46%, transparent); color: var(--sbs-warning); }
.sbs-pdp__badge--sold { border-color: color-mix(in srgb, var(--sbs-danger) 46%, transparent); color: var(--sbs-danger); }

.sbs-pdp__condition-guide {
  margin-top: var(--sbs-sm);
  overflow: hidden;
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-md);
  background: color-mix(in srgb, var(--sbs-bg-hover) 58%, transparent);
}
.sbs-pdp__condition-guide summary {
  display: flex;
  align-items: center;
  min-height: var(--sbs-control-hit);
  gap: var(--sbs-sm);
  padding: 0 var(--sbs-sm);
  color: var(--sbs-text-secondary);
  cursor: pointer;
  list-style: none;
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption) / 1.2 var(--sbs-pdp-font);
}
.sbs-pdp__condition-guide summary::-webkit-details-marker { display: none; }
.sbs-pdp__condition-guide summary > svg:first-child { width: 14px; height: 14px; flex: none; color: var(--sbs-gold); stroke-width: 1.9; }
.sbs-pdp__condition-guide summary span { flex: 1; }
.sbs-pdp__condition-chevron { width: 13px; height: 13px; color: var(--sbs-text-muted); transition: transform var(--sbs-dur-fast) var(--sbs-ease-out); }
.sbs-pdp__condition-guide[open] .sbs-pdp__condition-chevron { transform: rotate(90deg); }
.sbs-pdp__condition-guide p {
  margin: 0;
  padding: 0 var(--sbs-md) var(--sbs-md) 30px;
  color: var(--sbs-text-secondary);
  font: var(--sbs-fw-regular) var(--sbs-fs-caption) / 1.48 var(--sbs-pdp-font);
}

/* ---- sizing: same explicit, touchable iOS picker ------------------------- */
.sbs-pdp__size-section { margin-top: var(--sbs-lg); }
.sbs-pdp__sizes-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sbs-sm); margin-bottom: var(--sbs-sm); }
.sbs-pdp__sizes-label,
.sbs-pdp__single-size > span {
  color: var(--sbs-text-muted);
  font: var(--sbs-fw-bold) 0.75rem / 1 var(--sbs-pdp-font);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.sbs-pdp__sizes-sel { color: var(--sbs-text-muted); font: var(--sbs-fw-medium) var(--sbs-fs-caption) / 1 var(--sbs-pdp-font); }
.sbs-pdp__sizes-sel strong { color: var(--sbs-gold); }
.sbs-pdp__sizes { display: flex; flex-wrap: wrap; gap: var(--sbs-sm); }
.sbs-pdp__size {
  display: inline-grid;
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--sbs-md);
  place-items: center;
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-md);
  color: var(--sbs-text-primary);
  background: color-mix(in srgb, var(--sbs-bg-hover) 66%, transparent);
  font: var(--sbs-fw-bold) 0.9375rem / 1 var(--sbs-pdp-font);
  cursor: pointer;
  transition: transform var(--sbs-dur-fast) var(--sbs-ease-out), background var(--sbs-dur-base) var(--sbs-ease-out), border-color var(--sbs-dur-base) var(--sbs-ease-out), color var(--sbs-dur-base) var(--sbs-ease-out);
}
.sbs-pdp__size:active { transform: scale(0.95); }
.sbs-pdp__size.is-on { border-color: var(--sbs-gold); color: #000; background: var(--sbs-gold-gradient); }
.sbs-pdp__size:disabled { opacity: 0.50; cursor: not-allowed; text-decoration: line-through; }
.sbs-pdp__size.is-held:disabled { text-decoration: none; }
.sbs-pdp__size.is-held svg { width: 13px; height: 13px; margin-left: 4px; }
.sbs-pdp__size-help { margin: var(--sbs-sm) 0 0; color: var(--sbs-text-muted); font: var(--sbs-fw-medium) var(--sbs-fs-micro) / 1.3 var(--sbs-pdp-font); }
.sbs-pdp__single-size {
  display: grid;
  gap: var(--sbs-sm);
  margin-top: var(--sbs-lg);
}
.sbs-pdp__single-size strong {
  min-height: 48px;
  padding: 0 var(--sbs-md);
  display: flex;
  align-items: center;
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-md);
  color: var(--sbs-text-primary);
  background: var(--sbs-bg-hover);
  font: var(--sbs-fw-semibold) 0.9375rem / 1 var(--sbs-pdp-font);
}

/* ---- action and content cards -------------------------------------------- */
.sbs-pdp__cta { display: flex; flex-direction: column; gap: var(--sbs-sm); margin-top: var(--sbs-md); }
.sbs-pdp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  gap: var(--sbs-sm);
  padding: 0 var(--sbs-lg);
  border: 1px solid transparent;
  border-radius: var(--sbs-r-pill);
  font: var(--sbs-fw-bold) 1rem / 1 var(--sbs-pdp-font);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--sbs-dur-fast) var(--sbs-ease-out), box-shadow var(--sbs-dur-fast) var(--sbs-ease-out), background var(--sbs-dur-fast) var(--sbs-ease-out);
}
.sbs-pdp__btn svg { width: 18px; height: 18px; stroke-width: 1.9; }
.sbs-pdp__btn:active { transform: scale(0.98); }
.sbs-pdp__btn--primary { color: #000; background: var(--sbs-gold-gradient); box-shadow: 0 8px 22px color-mix(in srgb, var(--sbs-gold-bright) 28%, transparent); }
.sbs-pdp__btn--outline { border-color: color-mix(in srgb, var(--sbs-gold) 46%, transparent); color: var(--sbs-gold-text); background: color-mix(in srgb, var(--sbs-gold) 12%, transparent); }
.sbs-pdp__btn--ghost { border-color: var(--sbs-border-subtle); color: var(--sbs-text-primary); background: var(--sbs-bg-hover); }

.sbs-pdp__notes-panel {
  margin: var(--sbs-md) 0 0;
  padding: var(--sbs-md);
  border: 1px solid color-mix(in srgb, var(--sbs-gold) 22%, transparent);
  border-radius: var(--sbs-r-card);
  background: var(--sbs-bg-card);
}
.sbs-pdp__notes-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sbs-sm);
  margin-bottom: var(--sbs-sm);
  color: var(--sbs-gold);
  font: var(--sbs-fw-bold) 0.75rem / 1 var(--sbs-pdp-font);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.sbs-pdp__notes-title svg { width: 14px; height: 14px; stroke-width: 1.9; }
.sbs-pdp__notes-copy {
  margin: 0;
  color: var(--sbs-text-primary);
  font: var(--sbs-fw-regular) 0.9375rem / 1.55 var(--sbs-pdp-font);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.sbs-pdp__notes {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--sbs-sm);
  margin: var(--sbs-md) 0 0;
  padding: var(--sbs-sm) 0 0;
  border: 0;
  border-top: 1px solid var(--sbs-border-subtle);
  color: var(--sbs-text-secondary);
  background: transparent;
  cursor: pointer;
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption) / 1.25 var(--sbs-pdp-font);
  text-align: left;
}
.sbs-pdp__notes > span { flex: 1; }
.sbs-pdp__notes svg { width: 17px; height: 17px; flex: none; color: var(--sbs-gold); stroke-width: 1.9; }

.sbs-pdp__meta { margin: var(--sbs-md) 0 0; }
.sbs-pdp__specs {
  padding: var(--sbs-md);
  border: 1px solid color-mix(in srgb, var(--sbs-gold) 20%, transparent);
  border-radius: var(--sbs-r-card);
  background: var(--sbs-bg-card);
}
.sbs-pdp__row {
  display: grid;
  grid-template-columns: minmax(88px, 0.42fr) 1fr;
  gap: var(--sbs-md);
  padding: var(--sbs-sm) 0;
  border-bottom: 1px solid var(--sbs-border-subtle);
}
.sbs-pdp__row:first-child { padding-top: 0; }
.sbs-pdp__row:last-child { padding-bottom: 0; border-bottom: 0; }
.sbs-pdp__row dt { color: var(--sbs-text-muted); font: var(--sbs-fw-medium) var(--sbs-fs-caption) / 1.35 var(--sbs-pdp-font); }
.sbs-pdp__row dd { margin: 0; color: var(--sbs-text-primary); font: var(--sbs-fw-semibold) var(--sbs-fs-caption) / 1.35 var(--sbs-pdp-font); }

.sbs-pdp__trust {
  display: grid;
  gap: var(--sbs-sm);
  margin-top: var(--sbs-lg);
  padding-top: var(--sbs-sm);
}
.sbs-pdp__trust-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sbs-sm);
  color: var(--sbs-text-secondary);
  font: var(--sbs-fw-medium) var(--sbs-fs-caption) / 1.35 var(--sbs-pdp-font);
}
.sbs-pdp__trust-row svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--sbs-gold); stroke-width: 1.9; }

/* ---- related products carry the same visual rail ------------------------ */
.sbs-pdp__related { margin-top: var(--sbs-2xl); }
.sbs-pdp__section-kicker { margin-bottom: var(--sbs-sm); font-size: 0.6875rem; }
.sbs-pdp__related-title {
  margin: 0 0 var(--sbs-md);
  color: var(--sbs-text-primary);
  font: var(--sbs-fw-bold) var(--sbs-fs-title-lg) / 1.1 var(--sbs-pdp-font);
  letter-spacing: -0.02em;
}
.sbs-pdp__related-row {
  display: flex;
  gap: var(--sbs-md);
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
}
.sbs-pdp__related-row::-webkit-scrollbar { display: none; }
.sbs-pdp__rel {
  display: grid;
  width: 156px;
  flex: 0 0 156px;
  grid-template-rows: auto auto minmax(30px, auto) auto;
  gap: 5px;
  overflow: hidden;
  padding: 0 0 10px;
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-card);
  color: var(--sbs-text-primary);
  background: var(--sbs-bg-card);
  text-decoration: none;
  transition: transform var(--sbs-dur-fast) var(--sbs-ease-out), border-color var(--sbs-dur-fast) var(--sbs-ease-out);
}
.sbs-pdp__rel-img { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sbs-bg-hover); }
.sbs-pdp__rel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sbs-dur-slow) var(--sbs-ease-out); }
.sbs-pdp__rel-brand,
.sbs-pdp__rel-title,
.sbs-pdp__rel-price { margin: 0 10px; }
.sbs-pdp__rel-brand {
  overflow: hidden;
  color: var(--sbs-gold);
  font: var(--sbs-fw-bold) 0.625rem / 1.1 var(--sbs-pdp-font);
  letter-spacing: 1px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.sbs-pdp__rel-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--sbs-text-primary);
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption) / 1.2 var(--sbs-pdp-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sbs-pdp__rel-price { color: var(--sbs-gold-text); font: var(--sbs-fw-semibold) var(--sbs-fs-caption) / 1 var(--sbs-pdp-price-font); font-variant-numeric: tabular-nums; }
.sbs-pdp__rel-price s { margin-left: 4px; color: var(--sbs-text-muted); font: var(--sbs-fw-medium) 0.6875rem / 1 var(--sbs-pdp-font); }

/* ---- sticky buy bar: iOS liquid-glass analogue -------------------------- */
.sbs-pdp__buybar {
  position: fixed;
  z-index: 1200;
  right: var(--sbs-sm);
  /* PDP owns its close/basket chrome, so app-dock.js suppresses the global
     dock here. Keep the purchase bar on the safe edge rather than reserving
     an invisible dock lane. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sbs-md));
  left: var(--sbs-sm);
  display: flex;
  max-width: 600px;
  align-items: center;
  gap: var(--sbs-md);
  margin-inline: auto;
  padding: var(--sbs-sm) var(--sbs-md);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: 28px;
  opacity: 0;
  color: var(--sbs-text-primary);
  pointer-events: none;
  background: var(--sbs-glass-bg-strong, rgba(10, 10, 12, 0.86));
  -webkit-backdrop-filter: blur(24px) saturate(var(--sbs-glass-saturate));
  backdrop-filter: blur(24px) saturate(var(--sbs-glass-saturate));
  box-shadow: var(--sbs-shadow-strong);
  transform: translateY(150%);
  transition: transform var(--sbs-dur-base) var(--sbs-ease-out), opacity var(--sbs-dur-base) var(--sbs-ease-out);
}
.sbs-pdp__buybar.is-on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sbs-pdp__buybar-price {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  color: var(--sbs-gold-text);
  font: var(--sbs-fw-semibold) var(--sbs-fs-price) / 1 var(--sbs-pdp-price-font);
  font-variant-numeric: tabular-nums;
}
.sbs-pdp__buybar-price s { margin-left: 5px; color: var(--sbs-text-muted); font: var(--sbs-fw-medium) 0.75rem / 1 var(--sbs-pdp-font); }
.sbs-pdp__buybar-price small { color: var(--sbs-danger); font: var(--sbs-fw-bold) var(--sbs-fs-micro) / 1 var(--sbs-pdp-font); }
.sbs-pdp__buybar .sbs-pdp__btn { flex: 0 0 auto; min-height: 48px; padding-inline: 20px; }

/* ---- error and full-screen image viewer ---------------------------------- */
.sbs-pdp__back--error { position: static; margin-top: var(--sbs-md); }
.sbs-pdp__back--error span { display: none; }
.sbs-pdp__error {
  display: flex;
  min-height: 52svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sbs-md);
  color: var(--sbs-text-secondary);
  text-align: center;
}
.sbs-pdp__error > svg { width: 48px; height: 48px; color: var(--sbs-text-muted); stroke-width: 1.4; }
.sbs-pdp__error p { max-width: 30ch; margin: 0; font: var(--sbs-fw-medium) var(--sbs-fs-body) / 1.4 var(--sbs-pdp-font); }

.sbs-zoom {
  position: fixed;
  z-index: 2200;
  inset: 0;
  display: flex;
  background: #000;
}
.sbs-zoom__track { display: flex; flex: 1; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sbs-zoom__track::-webkit-scrollbar { display: none; }
.sbs-zoom__slide { display: flex; flex: 0 0 100%; align-items: center; justify-content: center; scroll-snap-align: center; }
.sbs-zoom__slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sbs-zoom__close {
  position: absolute;
  z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  display: inline-grid;
  width: var(--sbs-control-hit);
  height: var(--sbs-control-hit);
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: #fff;
  background: rgba(14, 14, 16, 0.62);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  cursor: pointer;
}
.sbs-zoom__close svg { width: 18px; height: 18px; stroke-width: 1.9; }

/* Keyboard visibility shares the same simple gold ring as iOS controls. */
.sbs-pdp :focus-visible {
  outline: 2px solid var(--sbs-gold-bright);
  outline-offset: 3px;
}

@media (hover: hover) {
  .sbs-pdp__back:hover,
  .sbs-pdp__iconbtn:hover { border-color: var(--sbs-gold); background: color-mix(in srgb, var(--sbs-bg-hover) 78%, transparent); }
  .sbs-pdp__btn--primary:hover { box-shadow: var(--sbs-shadow-gold); transform: translateY(-1px); }
  .sbs-pdp__btn--outline:hover { background: color-mix(in srgb, var(--sbs-gold) 18%, transparent); }
  .sbs-pdp__size:not(:disabled):hover { border-color: color-mix(in srgb, var(--sbs-gold) 56%, transparent); }
  .sbs-pdp__rel:hover { border-color: color-mix(in srgb, var(--sbs-gold) 50%, transparent); transform: translateY(-3px); }
  .sbs-pdp__rel:hover img { transform: scale(1.035); }
}

/* Wide screens keep media and the decision stack side-by-side without changing
   the compact iPhone sequence. */
@media (min-width: 760px) {
  .sbs-pdp {
    display: grid;
    max-width: 1080px;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    align-items: start;
    gap: var(--sbs-2xl);
    padding-top: var(--sbs-lg);
  }
  .sbs-pdp__stage { margin: 0; position: sticky; top: 88px; }
  .sbs-pdp__gallery { border-radius: 24px; }
  .sbs-pdp__slide { height: min(72vh, 680px); min-height: 480px; }
  .sbs-pdp__info { padding-top: var(--sbs-sm); }
  .sbs-pdp__related { grid-column: 1 / -1; }
  .sbs-pdp__buybar { display: none; }
  .sbs-pdp__loading { grid-column: 1 / -1; margin-inline: 0; border-radius: 24px; }
  .sbs-pdp__skeleton-media { border-radius: 24px 24px 0 0; }
  .sbs-pdp__back--error { grid-column: 1 / -1; }
  .sbs-pdp__error { grid-column: 1 / -1; }
}

@media (min-width: 1040px) {
  .sbs-pdp__rel { width: 172px; flex-basis: 172px; }
}