/* Pakstoor :: item.css :: v2.9-000020 :: 2026-06-03 */
/* Description card lives inside the .item-gallery column so it
   appears alongside the sticky buy panel on the right. `order: 2`
   pushes it BELOW the thumbnail rail (which carries `order: 1`)
   so the description never injects between the main image and
   the thumb strip. */
.item-gallery-description {
  order: 2;
  margin-top: var(--s-4);
  padding: var(--s-5);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.item-gallery-description .item-sec-title { margin: 0; }

/* When item-details (specs + delivery) is nested inside the
   gallery column (moved here 2026-05-13), it needs to sit
   AFTER the description in flex order. Without this override
   it gets default order:0 and renders above the thumb rail. */
.item-gallery > .item-details {
  order: 3;
  margin-top: var(--s-4);
}

/* Stay-safe gray card — sits below specifications + delivery
   in the gallery column. Distinctly grayer than its siblings
   so the safety pointers read as supporting/advisory copy.
   Tightened 2026-05-13: smaller icons, less padding, denser grid. */
.item-gallery > .item-safety-card {
  order: 4;
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
}
.item-safety-card-head {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-700);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.item-safety-card-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.item-safety-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  font-family: var(--font-sans);
  font-size:var(--fs-12);
  line-height: 1.4;
  color: var(--ink-muted);
}
.item-safety-row svg {
  width: 13px;
  height: 13px;
  color: var(--gold);
  margin-top: 2px;
  flex-shrink: 0;
}
.item-safety-row strong {
  display: block;
  color: var(--ink);
  font-weight: var(--fw-700);
  font-size: 12.5px;
  margin-bottom: 2px;
  letter-spacing: 0.005em;
}

/* 2026-05-25 — was 780px which kept 3 safety cards on row at
   iPad portrait (768-834px); each card got ~224px wide which
   was cramped. Bumped to 834 so tablet portrait stacks. */
@media (max-width: 834px) {
  .item-safety-card-rows { grid-template-columns: 1fr; gap: 12px; }
  .item-gallery > .item-safety-card { padding: 16px 16px; }
}


.item {
  padding-block: var(--s-6) var(--s-16);
}
.item-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
  /* Stops the page-level pks-bg-hex layer (mix-blend-mode: screen)
     from bleeding through opaque cards inside this scope. Same fix
     pattern as .deal-inner. */
  isolation: isolate;
}

/* Breadcrumb styles moved to core.css (.crumbs / .item-crumbs alias). */

/* ============================================================
   SPLIT LAYOUT
   Gallery left (flex), info right (fixed 400px, sticky)
   ============================================================ */
.item-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--s-5);
  /* Stretch BOTH columns to the row height so the description card on
     the left grows down to match the bottom edge of the sticky info
     card on the right. The right card's natural content height drives
     the row height; the left column then has a stretched container
     and we let .item-gallery-desc consume the leftover vertical space
     via flex-grow below. */
  align-items: stretch;
  margin-bottom: var(--s-5);
}

/* iPad landscape (1024px) keeps the gallery + buy panel side-by-side.
   Was 1100 which collapsed at 1024 → users had to scroll past the
   gallery to find the Buy/Offer CTA. Drop to 980 so phones + small
   tablet portrait stack, landscape iPad keeps 2-col. */
@media (max-width: 980px) {
  .item-split {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

/* ============================================================
   GALLERY
   ============================================================ */
.item-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.item-gallery-main {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
  overflow: hidden;
}

.item-gallery-img {
  width: 100%;
  height: 100%;
  /* `cover` so the photo bleeds to all four edges of the gallery
     box — left edge of the image lines up with the breadcrumb +
     description card. The previous `contain` letterboxed any photo
     that wasn't perfectly 4:3 and made the image look inset against
     the description card directly below it.
     The lightbox (.item-lightbox-image-wrap below) still uses
     `contain` so the buyer can see the full uncropped photo on click —
     so we lose nothing, just stop announcing the aspect-ratio gap. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Letterbox colour intentionally inherits the gallery container
     (transparent) — any tiny edge gap from a photo that overflows
     `cover` blends into the dark panel rather than drawing a hard
     dark stripe. */
  background-color: transparent;
  transition: opacity var(--dur-2) var(--ease-standard);
}

/* Drifting gold sparks over the listing photo — mirrors the
   landing-page hero atmosphere. Same colour, same easing, distances
   trimmed to the smaller gallery box. Purely decorative. */
.item-gallery-atmo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.item-gallery-spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,196,26,0.95), rgba(242,196,26,0));
  filter: blur(0.4px);
  opacity: 0;
}
.item-gallery-spark-1 { left: 12%; bottom: -6%; animation: item-gallery-spark-drift 18s linear -2s infinite; }
.item-gallery-spark-2 { left: 28%; bottom: -6%; animation: item-gallery-spark-drift 15s linear -6s infinite; }
.item-gallery-spark-3 { left: 56%; bottom: -6%; animation: item-gallery-spark-drift 21s linear -11s infinite; width: 4px; height: 4px; }
.item-gallery-spark-4 { left: 72%; bottom: -6%; animation: item-gallery-spark-drift 16s linear -4s infinite; }
.item-gallery-spark-5 { left: 86%; bottom: -6%; animation: item-gallery-spark-drift 19s linear -9s infinite; width: 4px; height: 4px; }
.item-gallery-spark-6 { left: 44%; bottom: -6%; animation: item-gallery-spark-drift 17s linear -13s infinite; }
@keyframes item-gallery-spark-drift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.7; }
  85%  { opacity: 0.4; }
  100% { transform: translateY(-700px) translateX(28px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .item-gallery-spark { animation: none; opacity: 0.28; }
}

/* Boost pill — sits absolute top-left over the hero image.
   Three tier variants stay visually distinct so a seller can
   tell at a glance what they bought. */
.item-gallery-boost-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size:var(--fs-11);
  font-weight: var(--fw-700);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #2A1810;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  box-shadow:
    0 8px 22px -8px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 0 rgba(255, 240, 200, 0.85),
    inset 0 0 0 1px rgba(255, 228, 189, 0.40);
}
.item-gallery-boost-pill[hidden] { display: none; }
.item-gallery-boost-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* Tier-specific palette */
.item-gallery-boost-pill.is-boost {
  background: linear-gradient(135deg, #F2D5A8 0%, #D8A872 22%, #A87035 50%, #D8A872 78%, #F2D5A8 100%);
}
.item-gallery-boost-pill.is-premium {
  background: linear-gradient(135deg, #FFE4A8 0%, #E8B845 30%, #B8842B 55%, #E8B845 80%, #FFE4A8 100%);
  box-shadow:
    0 10px 26px -8px rgba(217, 166, 37, 0.55),
    inset 0 1px 0 0 rgba(255, 240, 200, 0.95),
    inset 0 0 0 1px rgba(255, 228, 189, 0.50);
}
.item-gallery-boost-pill.is-pro {
  background: linear-gradient(135deg, #FFEFBF 0%, #F5C842 25%, #9C6B14 55%, #F5C842 80%, #FFEFBF 100%);
  padding: 8px 14px 8px 11px;
  font-size: 11.5px;
  box-shadow:
    0 12px 30px -8px rgba(217, 166, 37, 0.65),
    inset 0 1px 0 0 rgba(255, 240, 200, 1),
    inset 0 0 0 1px rgba(255, 228, 189, 0.65);
}

/* When data-ph is set, show the placeholder gradient + glyph */
.item-gallery-img[data-ph] {
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
  position: relative;
}
.item-gallery-img[data-ph] .ph-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.08);
}
.item-gallery-img[data-ph] .ph-glyph svg {
  width: 30%;
  height: 30%;
  max-width: 180px;
  stroke: currentColor;
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Save bookmark */
.item-gallery-save {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 7, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
  z-index: 2;
}
.item-gallery-save:hover { background: rgba(9, 7, 10, 0.8); color: var(--gold); }
.item-gallery-save svg { width: 18px; height: 18px; }
.item-gallery-save.is-saved { color: var(--gold); background: rgba(9, 7, 10, 0.8); }
.item-gallery-save.is-saved svg { fill: var(--gold); }

/* Nav arrows — quiet until hover */
.item-gallery-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  pointer-events: none;
}
.item-gallery-arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 7, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-standard), background var(--dur-1) var(--ease-standard);
}
.item-gallery-main:hover .item-gallery-arrow { opacity: 1; }
.item-gallery-arrow:hover { background: rgba(9, 7, 10, 0.85); }
/* Touch devices (iPad, phones) have no hover — arrows would stay
   opacity:0 and be invisible. Show them permanently at slightly
   reduced opacity so they don't dominate the photo. */
@media (hover: none) {
  .item-gallery-arrow { opacity: 0.85; }
}
/* Keyboard-only users need a visible focus ring — the default
   opacity:0 hides the arrow until hover, so without this rule
   tab-navigators land on an invisible button. Show it on focus
   AND draw a gold ring matching the rest of the site's focus
   convention. */
.item-gallery-arrow:focus-visible {
  opacity: 1;
  outline: none;
  box-shadow: 0 0 0 2px var(--bg, #14181D), 0 0 0 4px var(--gold, #D9A625);
}
.item-gallery-arrow:disabled {
  opacity: 0;
  cursor: default;
  pointer-events: none;
}
.item-gallery-arrow svg { width: 18px; height: 18px; }

/* Counter pill */
.item-gallery-counter {
  position: absolute;
  bottom: 16px;
  left: 16px;
  padding: 5px 10px;
  background: rgba(9, 7, 10, 0.65);
  backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink);
  font-weight: var(--fw-600);
  pointer-events: none;
}

/* Thumbnails */
.item-gallery-thumbs {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: thin;
}
.item-gallery-thumb {
  flex: 0 0 92px;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
  padding: 0;
}
.item-gallery-thumb:hover { border-color: var(--line-bright); }
.item-gallery-thumb.is-active {
  border-color: var(--gold);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .item-gallery-thumb { flex-basis: 68px; }
}

/* ============================================================
   INFO PANEL (sticky right)
   ============================================================ */
.item-info {
  position: sticky;
  top: calc(80px + 28px + 16px); /* nav + sysbar + breathing */
}

/* Pair with .item-split breakpoint above — sticky stops applying once
   the layout collapses to single-col. */
@media (max-width: 980px) {
  .item-info {
    position: static;
  }
}

.item-info-inner {
  display: flex;
  flex-direction: column;
  /* 2026-05-13: editorial refinement — the right-side panel
     was reading as a "boxed utility panel" against the dark
     cinematic atmosphere. Softer hairline border (was line-2
     → 0.06 alpha white), subtle vertical gradient instead of
     a flat bg-1 fill, more padding, and looser gap so each
     section breathes. Result: editorial product card, not a
     pricing box. */
  gap: var(--s-4);
  background: linear-gradient(180deg,
    var(--bg-1) 0%,
    color-mix(in srgb, var(--bg-1) 92%, var(--bg)) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-5);
  padding: var(--s-7) var(--s-6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 24px 60px -32px rgba(0, 0, 0, 0.55);
}

.item-title {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--fw-600);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-price {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-28), 3.4vw, var(--fs-40));
  font-weight: var(--fw-700);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.item-meta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.item-meta-row {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-13);
  color: var(--ink-muted);
}
.item-meta-icon {
  width: 16px;
  height: 16px;
  color: var(--ink-dim);
  flex-shrink: 0;
}

.item-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
/* The HTML `hidden` attribute would normally render `display:none`,
   but `.item-actions { display:flex }` above wins on specificity and
   the seller would otherwise see (and silently click through) their
   own listing's Make Offer / Buy buttons. Force-hide explicitly. */
.item-actions[hidden],
.item-actions-owner[hidden] { display: none !important; }
.item-actions-owner { display: flex; flex-direction: column; gap: var(--s-3); }
.item-actions-owner .item-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.item-protected-link-btn {
  grid-column: 1 / -1;
}
.item-btn {
  padding: 14px 20px;
  font-size: var(--fs-14);
  letter-spacing: 0.02em;
  white-space: nowrap;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.item-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ============================================================
   TRUST PANEL
   ============================================================ */
.item-trust {
  margin-top: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.item-trust-head {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
  margin-bottom: var(--s-4);
}
.item-trust-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.item-trust-row {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.item-trust-icon {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
.item-trust-label {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--ink);
  margin-bottom: 2px;
}
.item-trust-desc {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  line-height: 1.5;
}
.item-trust-link {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--fw-600);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-standard);
}
.item-trust-link:hover { color: var(--gold); }

/* ============================================================
   DETAILS (below split) — Specs + Delivery, side by side.
   Description used to live here but moved into the gallery
   column above (.item-gallery-desc) so it sits directly under
   the image rather than below the right card.
   ============================================================ */
.item-details {
  display: grid;
  /* Description spans both columns at the top via grid-column: 1 / -1
     on .item-details-description; the 2-col specs+delivery row sits
     below it. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
  /* 2026-05-13 restructure: tightened from --s-2 to a consistent
     48px section rhythm. */
  margin-top: 48px;
}
.item-details-description {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-2);
}
@media (max-width: 1100px) {
  .item-details {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding: var(--s-5);
  }
}

/* ── Description card under the gallery (left column of split) ──
   Same panel chrome as .item-details so the two cards read as a
   matching pair stacked under the gallery. Lives inside .item-gallery
   (which is itself a 2-column grid: thumb rail | main image), so we
   span both columns explicitly — otherwise the description gets
   dropped into the 84 px thumb-rail column and looks squished. The
   h2 inherits its styling from the global .item-sec-title alias.    */
.item-gallery-desc {
  /* Sits after the main image AND the thumb rail (which uses
     order: 1) — gives it the bottom slot in the flex column so the
     `flex: 1` grow actually pushes the bottom edge down to match
     the right card. */
  order: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
  /* No margin-top here — the parent .item-gallery flex `gap` already
     handles the spacing between the thumb rail and this card. Adding
     margin-top stacks on top of that gap and pushes the description
     too far from the image. */
  flex: 1;
  min-height: 0;
}
@media (max-width: 1100px) {
  .item-gallery-desc {
    padding: var(--s-5);
  }
}

.item-details-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* .item-sec-title base styles moved to core.css (.section-title alias). */
.item-sec-title-sm {
  font-size: var(--fs-16);
  margin-top: var(--s-4);
}

.item-description {
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--ink-muted);
  white-space: pre-wrap;
}

.item-specs {
  display: grid;
  grid-template-columns: minmax(96px, 140px) 1fr;
  gap: 0 var(--s-3);
  margin: 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 480px) {
  .item-specs {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .item-specs dt { padding-block: 8px 2px; border-top: 1px solid rgba(255, 255, 255, 0.04); }
  .item-specs dt:first-of-type { border-top: 0; }
  .item-specs dd { padding-block: 0 8px; }
}
.item-specs dt {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--fw-700);
  padding-block: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.item-specs dt:first-of-type { border-top: 0; }
.item-specs dd {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--ink);
  padding-block: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.item-specs dd:first-of-type { border-top: 0; }

/* ============================================================
   SELLER CARD
   ============================================================ */
.item-seller {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
}
.item-seller-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--bg-3), var(--bg-4));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-700);
  border: 1px solid var(--line-bright);
  flex-shrink: 0;
}
.item-seller-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.item-seller-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.item-seller-name {
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--ink);
}
/* Verified-seller badge — gold shield + "Verified" label. Shown only
   when Profile.payoutVerifiedAt is set (TradeSafe FICA/AVSR check
   passed via tokenVerify). Quiet absence when not — no "unverified"
   copy that would unfairly stigmatise new sellers. */
.item-seller-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: rgba(94, 168, 114, 0.14);
  border: 1px solid rgba(94, 168, 114, 0.40);
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight:var(--fw-700);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.4;
}
.item-seller-verified[hidden] { display: none; }
.item-seller-verified svg { width: 11px; height: 11px; flex-shrink: 0; }
.item-seller-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.item-seller-badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.item-seller-badge {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-600);
  padding: 3px 7px;
  border: 1px solid rgba(217, 166, 37, 0.28);
  border-radius: var(--r-1);
  background: rgba(217, 166, 37, 0.05);
}

/* ============================================================
   DELIVERY BLOCK
   ============================================================ */
.item-delivery {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--line);
}
.item-delivery-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-3);
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.item-delivery-row:first-child { border-top: 0; }
.item-delivery-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--fw-700);
}
.item-delivery-val {
  font-size: var(--fs-13);
  color: var(--ink);
}

/* ============================================================
   MODAL (Make Offer)
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-standard), visibility var(--dur-2) var(--ease-standard);
  /* Reset core.css's card-style .modal properties — without these
     the wrapper anchors to left:0 at 560px wide (LTR over-constraint
     of inset:0 + max-width:560px). The wrapper must be a true
     full-viewport overlay; the centred card is `.modal-panel`. */
  max-width: none;
  width: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  overflow: visible;
  transform: none;
}
.modal.is-open {
  visibility: visible;
  opacity: 1;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 7, 10, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--bg-1);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-5);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  transform: translateY(8px) scale(0.98);
  transform-origin: center center;
  transition: transform var(--dur-2) var(--ease-decel);
  will-change: transform;
}
.modal.is-open .modal-panel {
  transform: translateY(0) scale(1);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-1);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
}
.modal-close:hover { color: var(--ink); background: var(--bg-2); }
.modal-close svg { width: 16px; height: 16px; }

.modal-title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.modal-desc {
  font-size: var(--fs-13);
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
}
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}
.modal-input-wrap {
  position: relative;
}
.modal-input-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-600);
  color: var(--ink-muted);
  pointer-events: none;
}
.modal-input {
  width: 100%;
  padding: 12px 14px 12px 34px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-700);
  color: var(--ink);
  outline: none;
  transition: all var(--dur-1) var(--ease-standard);
}
.modal-input:focus {
  border-color: var(--gold);
  background: var(--bg-3);
  box-shadow: 0 0 0 3px rgba(217, 166, 37, 0.12);
}
.modal-input::-webkit-inner-spin-button,
.modal-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.modal-input[type=number] { -moz-appearance: textfield; }

.modal-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 72px;
  transition: all var(--dur-1) var(--ease-standard);
}
.modal-textarea:focus {
  border-color: var(--gold);
  background: var(--bg-3);
  box-shadow: 0 0 0 3px rgba(217, 166, 37, 0.12);
}

.modal-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-dim);
  min-height: 16px;
}
.modal-hint.is-warn { color: var(--warning); }

/* Quick-offer preset chips — sit between the amount input and the hint. */
.modal-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
}
.modal-preset {
  flex: 1 1 0;
  min-width: 64px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.modal-preset:hover {
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  border-color: rgba(255,255,255,0.14);
}
.modal-preset.is-active {
  background: rgba(217, 166, 37, 0.12);
  border-color: var(--gold);
  color: var(--gold);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.modal-actions .btn { padding: 11px 18px; font-size: var(--fs-13); }

@media (max-width: 520px) {
  .modal-panel { padding: var(--s-5); }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}

/* ============================================================
   OWNER-ONLY ACTIONS
   Shown when current user is the listing's seller.
   ============================================================ */
.item-actions-owner {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.item-owner-banner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 14px;
  background: rgba(217, 166, 37, 0.06);
  border: 1px solid rgba(217, 166, 37, 0.25);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-600);
}
.item-owner-banner svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.item-btn-danger {
  color: var(--danger);
  border-color: rgba(216, 81, 69, 0.35);
}
.item-btn-danger:hover {
  color: var(--ink);
  background: var(--danger);
  border-color: var(--danger);
}

.modal-panel-protected {
  max-width: 520px;
  max-height: min(760px, calc(100dvh - 32px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.protected-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.protected-mode-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 9px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.protected-mode-option:hover,
.protected-mode-option.is-active {
  border-color: rgba(217, 166, 37, 0.65);
  background: rgba(217, 166, 37, 0.08);
}

.protected-mode-option input {
  margin: 3px 0 0;
  accent-color: var(--gold);
}

.protected-mode-option span {
  color: var(--ink);
  font-size: var(--fs-13);
  font-weight: var(--fw-700);
}

.protected-mode-option small {
  grid-column: 2;
  color: var(--ink-muted);
  font-size: var(--fs-12);
  line-height: 1.4;
}

.protected-link-result {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(94, 168, 114, 0.35);
  border-radius: var(--r-2);
  background: rgba(94, 168, 114, 0.08);
}

.protected-link-url {
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

.protected-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-muted);
  font-size: var(--fs-12);
}

.protected-code-row strong {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--fs-18);
  letter-spacing: 1px;
}

.protected-actions {
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  #protectedLinkModal {
    align-items: flex-start;
    padding: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #protectedLinkModal .modal-panel-protected {
    max-height: none;
  }

  .protected-mode {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   UPGRADE v2 — Seller card, thumbnail rail, lightbox
   ============================================================ */

/* ---- SELLER TRUST CARD (right panel) ---- */
.item-seller-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
}
.item-seller-card .item-seller-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  color: var(--black-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-700);
  flex-shrink: 0;
  overflow: hidden;
}
.item-seller-card .item-seller-avatar.has-image {
  background: var(--bg-2);
  color: transparent;
  border: 1px solid rgba(217, 166, 37, 0.35);
}
.item-seller-card .item-seller-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.item-seller-main { min-width: 0; overflow: hidden; }
.item-seller-card .item-seller-name {
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-seller-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  color: var(--gold);
}
.item-seller-rating-star {
  color: var(--gold);
  font-size:var(--fs-12);
  line-height: 1;
}
.item-seller-rating-score { color: var(--ink); font-weight: var(--fw-600); }
.item-seller-rating-count { color: var(--ink-dim); }
.item-seller-rating-new {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.item-seller-card .item-seller-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 2px;
}
.item-seller-link {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-600);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.item-seller-link:hover { text-decoration: underline; }

/* Report-seller button — sits next to the View profile link as a
   muted glyph + label. Goes red on hover so the destructive intent
   is visible without shouting. */
.item-seller-report {
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  margin-left: 8px;
  border-radius:var(--r-4);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
  flex-shrink: 0;
}
.item-seller-report svg { width: 12px; height: 12px; flex-shrink: 0; }
.item-seller-report:hover {
  color: var(--danger);
  background: rgba(216, 81, 69, 0.08);
}

@media (max-width: 480px) {
  .item-seller-card { grid-template-columns: 40px 1fr; }
  .item-seller-link {
    grid-column: 1 / -1;
    text-align: right;
    margin-top: 4px;
  }
}

/* ---- GALLERY: thumbnail rail on left (desktop), below on mobile ---- */
.item-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  /* 2026-05-13: removed `height: 100%` — was forcing the left column
     to match the right aside's height, so short descriptions left the
     description card looking unnaturally tall. Now the column hugs
     its natural content height. The sticky right aside still works
     because grid `align-items: stretch` stretches its CELL (not its
     contents). */
}
/* Thumb rail sits BELOW the main image (order: 1) so the image
   spans the full column width and visually matches the description
   card directly underneath. The description has order: 2 below so
   it ends up last in the flex column — that way `flex: 1` on the
   description actually fills the bottom of the column rather than
   leaving thumbs as the final visual element under it. */
.item-gallery-thumbs-rail {
  order: 1;
  display: flex;
  flex-direction: row;
  gap: 8px;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 4px;
  /* 2026-05-25 — declare touch-action so horizontal swipe on the
     rail doesnt fight with vertical page scroll on iOS. Letting
     the browser handle pan-y means a vertical drag still scrolls
     the page even when it starts on the rail. */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}
.item-gallery-thumbs-rail::-webkit-scrollbar { height: 4px; }
.item-gallery-thumbs-rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius:var(--r-1); }
.item-gallery-thumbs-rail .item-gallery-thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.item-gallery-main {
  position: relative;
  border-radius: var(--r-5);
  overflow: hidden;
  background: var(--bg-1);
}
.item-gallery-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-1);
  border: 0;
  padding: 0;
  cursor: zoom-in;
}

.item-gallery-expand {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 7, 10, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-standard), background var(--dur-1) var(--ease-standard);
}
.item-gallery-main:hover .item-gallery-expand { opacity: 1; }
.item-gallery-expand:hover { background: var(--gold); color: var(--black-deep); border-color: var(--gold); }
.item-gallery-expand svg { width: 16px; height: 16px; }

@media (max-width: 860px) {
  .item-gallery-thumbs-rail .item-gallery-thumb {
    width: 72px; height: 72px;
  }
}

/* ---- LIGHTBOX ---- */
.item-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 7, 0.92);
  backdrop-filter: blur(6px);
  z-index: 19999; /* above shell nav (10000) and all other stacking contexts */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-standard), visibility 0s linear var(--dur-2);
}
.item-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease-standard);
}
.item-lightbox-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}
.item-lightbox-stage img {
  /* Fill the full available stage (viewport minus padding) and scale
     the image up to fit — object-fit: contain keeps proportions.
     Without explicit width/height the browser constrains to natural
     image size, making small images appear smaller than the gallery. */
  width:      calc(100vw - 120px);
  height:     calc(100vh - 120px);
  max-width:  calc(100vw - 120px);
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: var(--r-3);
}
.item-lightbox-close,
.item-lightbox-arrow {
  position: absolute;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill);
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background var(--dur-1) var(--ease-standard);
  z-index: 1;
}
.item-lightbox-close:hover,
.item-lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.14);
}
/* Offset chrome by the iOS safe-area insets plus a baseline that
   sits clear of the browser/app top edge — page sets
   viewport-fit=cover, so on notched / dynamic-island devices the
   bare top:24px sat partially under the status bar; on desktop the
   24px corner felt too close to the browser tab strip, so bumped to
   72px (40px on mobile) per request. */
.item-lightbox-close {
  top: calc(72px + env(safe-area-inset-top, 0px));
  right: calc(24px + env(safe-area-inset-right, 0px));
}
.item-lightbox-arrow svg { width: 20px; height: 20px; }
.item-lightbox-arrow.is-prev { left: calc(24px + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.item-lightbox-arrow.is-next { right: calc(24px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
.item-lightbox-counter {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  color: var(--ink);
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--r-pill);
}

@media (max-width: 640px) {
  .item-lightbox-stage { padding: 20px; }
  .item-lightbox-close {
    top: calc(40px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
  }
  .item-lightbox-arrow { width: 40px; height: 40px; }
  .item-lightbox-arrow.is-prev { left: calc(8px + env(safe-area-inset-left, 0px)); }
  .item-lightbox-arrow.is-next { right: calc(8px + env(safe-area-inset-right, 0px)); }
}

/* Optional modal textarea + label */
.modal-label-opt {
  color: var(--ink-faint);
  font-weight: var(--fw-500);
  text-transform: none;
  letter-spacing: var(--tracking-wide);
  margin-left: 4px;
  font-size:var(--fs-10);
}
.modal-textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
  padding-left: 14px;
}

/* ============================================================
   RESERVED / SOLD BANNER
   ============================================================ */
.item-reserved-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: var(--s-4);
  background: rgba(217, 166, 37, 0.06);
  border: 1px solid rgba(217, 166, 37, 0.35);
  border-left-width: 3px;
  border-radius: var(--r-3);
}
.item-reserved-banner.is-sold {
  background: rgba(74, 222, 128, 0.05);
  border-color: rgba(74, 222, 128, 0.35);
}
.item-reserved-banner svg {
  width: 20px; height: 20px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.item-reserved-banner.is-sold svg { color: #4ade80; }
.item-reserved-label {
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-700);
  margin-bottom: 2px;
}
.item-reserved-banner.is-sold .item-reserved-label { color: #4ade80; }
.item-reserved-desc {
  font-size: var(--fs-13);
  color: var(--ink-muted);
  line-height: 1.4;
}

/* Disabled offer buttons when listing is reserved */
.item-btn.is-disabled,
.item-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   NOT FOUND STATE
   ============================================================ */
.item-notfound {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-4);
}
.item-notfound-inner {
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.item-notfound-icon {
  width: 56px;
  height: 56px;
  color: var(--ink-dim);
  margin-bottom: var(--s-2);
}
.item-notfound-title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-700);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.item-notfound-lede {
  color: var(--ink-muted);
  font-size: var(--fs-14);
  line-height: 1.5;
  margin: 0 0 var(--s-2);
}

/* ============================================================
   MORE FROM SELLER
   ============================================================ */
.item-related {
  /* 2026-05-13: bumped section rhythm + extra padding above the
     divider so the heading no longer sits cramped against the rule. */
  margin-top: 72px;
  padding-top: var(--s-7);
  border-top: 1px solid var(--line-2);
}
.item-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.item-related-head .item-sec-title {
  margin: 0;
}
.item-related-link {
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  font-weight: var(--fw-600);
  transition: color 140ms ease;
  white-space: nowrap;
}
.item-related-link:hover { color: var(--ink); }
.item-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
/* Bumped 1024→1100 so iPad landscape (1024px exact) snaps to 3-col
   instead of cramming 4-col at ~240px each. */
@media (max-width: 1100px) {
  .item-related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .item-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .item-related-grid { grid-template-columns: 1fr; }
}

/* Live delivery quote highlight — applied to #deliveryCost when
   the real courier quote has landed. Gold + semibold to signal
   "this is a real number, not a mock". */
.item-delivery-val.is-live {
  color: var(--gold, #D9A625);
  font-weight:var(--fw-600);
}

/* Report link — subtle, sits under the trust panel. Deliberately
   low-contrast so honest buyers don't feel interrogated, but the
   hover state makes it obvious it's clickable. Hidden for owners. */
.item-report-link {
  display: block;
  margin: 14px auto 0;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-11);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-dim, #737C87);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
.item-report-link:hover,
.item-report-link:focus-visible {
  color: var(--danger, #D85145);
  outline: none;
}

/* ── Payment summary box ─────────────────────────────────────────── */
.item-payment-box {
  background: var(--bg-2);
  border: 1px solid rgba(217, 166, 37, 0.35);
  border-radius: var(--r-4, 10px);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 3-column accounting ledger: label | info-icon | value. The value
   column is width-locked so "R 162.78" can never wrap the currency
   symbol onto its own line — banking-software rhythm, not flex
   space-between. Info icon sits in its own dedicated column so it
   can't push the value column inward. Pattern mirrored from
   .bkd-row in the buy-breakdown modal. */
.item-payment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 120px;
  align-items: center;
  column-gap: 10px;
}

.item-payment-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
  min-width: 0;
  overflow-wrap: anywhere;
}

.item-payment-tip-slot {
  /* Empty placeholder — keeps the info-icon column open on rows
     without a tooltip so values line up across every row. */
  display: block;
  width: 24px;
  height: 1px;
}

.item-payment-val {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  min-width: 120px;
}

/* Loading state driven by aria-busy on the value element so screen
   readers announce "busy" correctly — the old .is-loading class is
   kept as a visual fallback for any callers that haven't migrated. */
.item-payment-val[aria-busy="true"],
.item-payment-val.is-loading {
  color: var(--ink-dim);
  font-weight: var(--fw-400);
}

.item-payment-divider {
  height: 1px;
  background: var(--bg-3);
  margin: var(--s-1) 0;
}

.item-payment-total-row .item-payment-label {
  color: var(--ink-muted);
}

.item-payment-total {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-700);
  color: var(--gold);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.item-payment-trust {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-1);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(217, 166, 37, 0.18);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-600);
}

.item-payment-trust-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* When two trust lines stack (escrow note + insurance note), drop
   the gold top-border on the second one so they read as a paired
   "guarantees" block rather than two visually disconnected rows. */
.item-payment-trust + .item-payment-trust {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}

/* Trust tier badge inline next to the seller name. Subtle gold-
   tinted pill — never the heavy green "active/live" treatment.
   Sits at body font weight + small mono caps so it reads as a
   neutral status, not a badge to compete with the price. */
.item-seller-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 9px;
  background: rgba(217, 166, 37, 0.06);
  border: 1px solid rgba(217, 166, 37, 0.22);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  font-weight:var(--fw-600);
  letter-spacing:var(--tracking-wide);
  color: var(--gold);
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.item-seller-tier-badge[hidden] { display: none !important; }

/* Inline tooltip indicator next to a payment label. The bubble is
   anchored to the question-mark icon. Shows on hover or focus
   (keyboard a11y). Internal-margin text is plain prose. */
.item-payment-tip,
.bkd-row-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--ink-dim);
  cursor: help;
  vertical-align: middle;
}
/* When the tip lives inside a 3-col grid row (item payment ledger),
   drop the inline margin and centre it in its dedicated column so
   the value cell's right-edge stays perfectly fixed. */
.item-payment-row > .item-payment-tip {
  width: 24px;
  height: 24px;
  margin-left: 0;
  justify-self: center;
  justify-content: center;
}
.item-payment-tip:hover,
.item-payment-tip:focus,
.bkd-row-tip:hover,
.bkd-row-tip:focus { color: var(--gold); outline: none; }
.item-payment-tip-bubble,
.bkd-row-tip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  padding: 8px 12px;
  background: var(--bg-3);
  border: 1px solid rgba(217, 166, 37, 0.32);
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size:var(--fs-12);
  font-weight:var(--fw-400);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 130ms ease, visibility 0s linear 130ms;
  z-index: 50;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
}
.item-payment-tip:hover .item-payment-tip-bubble,
.item-payment-tip:focus .item-payment-tip-bubble,
.bkd-row-tip:hover .bkd-row-tip-bubble,
.bkd-row-tip:focus .bkd-row-tip-bubble {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
@media (max-width: 480px) {
  /* 2026-05-25 — was max-width 200px fixed which could overflow
     the viewport if the tip icon sat near the right edge on
     iPhone SE (320px wide). 85vw lets the bubble size to the
     available width without clipping. */
  .item-payment-tip-bubble,
  .bkd-row-tip-bubble { max-width: 85vw; min-width: 160px; font-size: var(--fs-11); }
}

/* Mobile ledger — narrower value column but still rigid + nowrap,
   so prices stay locked on the right edge like banking software.
   Trust line is dialled down: smaller font, tighter tracking,
   softer line-height. Authority intact, volume off. */
@media (max-width: 540px) {
  .item-payment-row {
    grid-template-columns: minmax(0, 1fr) 22px 108px;
    column-gap: 8px;
  }
  .item-payment-tip-slot { width: 22px; }
  .item-payment-row > .item-payment-tip { width: 22px; height: 22px; }
  .item-payment-val { min-width: 108px; font-size: var(--fs-13); }
  .item-payment-total { font-size: var(--fs-16); }
  .item-payment-trust {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    line-height: 1.35;
  }
}

/* Trust line in the buy-breakdown modal — paired with the lock icon,
   reassuring tone, sits right below the total. */
.bkd-trust-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
  padding: 10px 12px;
  background: rgba(94, 168, 114, 0.08);
  border: 1px solid rgba(94, 168, 114, 0.25);
  border-radius: 8px;
  font-size:var(--fs-13);
  font-weight:var(--fw-500);
  color: var(--success);
  line-height: 1.4;
}
.bkd-trust-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Trust line directly under the listing price — short, calm,
   green chip. The first thing a buyer reads after the price. */
.item-price-trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 12px;
  padding: 5px 10px;
  background: rgba(94, 168, 114, 0.08);
  border: 1px solid rgba(94, 168, 114, 0.32);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing: 0.04em;
  color: var(--success);
  font-weight:var(--fw-600);
}
.item-price-trust-icon { width: 12px; height: 12px; flex-shrink: 0; }

/* Subtler trust line under the buyer action buttons. Calm reminder
   that off-platform = unsafe. Mono caps for legal-text feel. */
.item-actions-trust {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  text-align: center;
}

/* ── Buyer Protected — soft trust panel ─────────────────────────────
   Calm, premium, integrated. Dark surface with a 1px low-opacity
   green hairline; title in white, items in muted ink, only the
   shield + check icons carry green as an accent. No background
   wash, no pills — built to support price prominence, not compete.
   Hover/focus lifts the border subtly + reveals a one-line tooltip
   above the panel. */
.item-protect-panel {
  position: relative;
  background: var(--bg-2);
  border: 1px solid rgba(94, 168, 114, 0.20);
  border-radius: var(--r-4, 10px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.item-protect-panel:hover,
.item-protect-panel:focus-visible {
  border-color: rgba(94, 168, 114, 0.42);
  box-shadow: 0 0 0 3px rgba(94, 168, 114, 0.08);
  outline: none;
}

.item-protect-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.item-protect-shield {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--success);
  opacity: 0.95;
}

.item-protect-label {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight:var(--fw-500);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: none;
}

/* Verified-seller badge inline — sits to the right of the title. */
.item-protect-head .pks-verified-badge { margin-left: auto; }
.item-protect-head .pks-verified-badge[hidden] { display: none; }

.item-protect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-protect-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight:var(--fw-400);
  line-height: 1.4;
  color: var(--ink-muted);
}

.item-protect-check {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--success);
  opacity: 0.85;
}

/* Tooltip — calm prose, not an alert. Sits above the panel and
   fades in on hover/focus of the panel itself. */
.item-protect-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 8px 12px;
  background: var(--bg-3);
  border: 1px solid rgba(94, 168, 114, 0.22);
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size:var(--fs-12);
  line-height: 1.45;
  color: var(--ink);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
  z-index: 30;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.55);
}
.item-protect-panel:hover .item-protect-tooltip,
.item-protect-panel:focus-visible .item-protect-tooltip {
  opacity: 1;
  visibility: visible;
  transition-delay: 60ms;
}
@media (max-width: 480px) {
  .item-protect-tooltip { max-width: 220px; font-size: 11.5px; }
}

/* Back-compat: any leftover .item-protect-badge references in JS or
   older HTML templates resolve to the new panel styling without
   changing class names everywhere. */
.item-protect-badge {
  position: relative;
  background: var(--bg-2);
  border: 1px solid rgba(94, 168, 114, 0.20);
  border-radius: var(--r-4, 10px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Report modal select — correct padding (no R prefix) ────── */
select.modal-input {
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  cursor: pointer;
}

/* ============================================================
   PAGE LOADING SKELETON  (v1.2-000001)
   data-loading is set in item.html on #itemRoot and removed by
   item.js at the start of hydrate() once the API responds.
   Uses the @keyframes pks-shimmer defined in core.css.
   Explicit min-heights prevent layout shift between the shimmering
   placeholder and real text.
   ============================================================ */
#itemRoot[data-loading] .item-price,
#itemRoot[data-loading] .item-title {
  color: transparent !important;
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 1600px 100%;
  animation: pks-shimmer 1.5s infinite linear;
  border-radius: var(--r-2, 6px);
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Price: clamp(fs-32, 4vw, fs-48) at lh 1 → min-height 48px covers all viewports */
#itemRoot[data-loading] .item-price { min-height: 48px; }
/* Title: fs-20 × lh-1.3 × up to 3 lines → reserve 3-line height */
#itemRoot[data-loading] .item-title { min-height: 78px; }

#itemRoot[data-loading] .item-meta-stack {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 1600px 100%;
  animation: pks-shimmer 1.5s infinite linear;
  color: transparent !important;
  border-color: transparent !important;
  border-radius: var(--r-2, 6px);
  min-height: 96px;
}

#itemRoot[data-loading] .item-seller-card {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 1600px 100%;
  animation: pks-shimmer 1.5s infinite linear;
  color: transparent !important;
  border-color: transparent !important;
  min-height: 72px;
}

#itemRoot[data-loading] .item-payment-box {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 1600px 100%;
  animation: pks-shimmer 1.5s infinite linear;
  color: transparent !important;
  border-color: transparent !important;
  min-height: 180px;
}

#itemRoot[data-loading] .item-gallery-img {
  background-image: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%) !important;
  background-size: 1600px 100% !important;
  animation: pks-shimmer 1.5s infinite linear;
}

#itemRoot[data-loading] .item-gallery-img .ph-glyph { display: none; }

#itemRoot[data-loading] .item-actions {
  opacity: 0.35;
  pointer-events: none;
}

/* ============================================================
   BUY BREAKDOWN MODAL
   ============================================================ */
.modal-panel-bkd {
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  gap: var(--s-5);
}

/* The bkd-hero, bkd-pillars, and full-paragraph bkd-escrow are
   replaced by the new compact .bkd-titlebar + .bkd-footnote so the
   modal fits at 90vh on a 768-tall laptop screen. The old classes
   stay defined further down for any legacy reference but won't be
   in the DOM after the 2026-04-26 rebuild. */
.modal-panel-bkd .bkd-hero,
.modal-panel-bkd .bkd-pillars,
.modal-panel-bkd .bkd-escrow { display: none; }

.bkd-titlebar {
  text-align: center;
  margin: 0 0 14px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-3);
}
.bkd-titlebar-h {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.1;
}
.bkd-titlebar-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.4;
}

/* Single-line breakdown rows. Removed the multi-line label-stack
   that was making Insurance + Platform fee rows ~50px tall each. */
.modal-panel-bkd .bkd-row-label-stack {
  display: inline;
}
.modal-panel-bkd .bkd-row-sub { display: none; }
.modal-panel-bkd .bkd-row {
  padding: 10px 14px;
  font-size: var(--fs-13);
}
.modal-panel-bkd .bkd-row-total {
  padding: 12px 14px;
  font-size: var(--fs-15);
}

/* Footnote — replaces the old paragraph escrow card. */
.bkd-footnote {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  color: var(--ink-dim);
  text-align: center;
  margin: 12px 0 0;
  line-height: 1.4;
}
/* Insurance-included note in the buy modal — same compact footnote
   treatment as the escrow note above it, with a small umbrella icon
   inline so it reads as a parallel "guarantee" rather than a row in
   the breakdown. */
.bkd-footnote-insurance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.bkd-footnote-icon {
  width: 14px;
  height: 14px;
  color: var(--gold);
  flex: 0 0 14px;
}
.modal-panel-bkd::-webkit-scrollbar { width: 5px; }
.modal-panel-bkd::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }

/* Hero — shield icon + title + lede */
.bkd-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--s-1);
  gap: var(--s-2);
}
.bkd-shield-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(217,166,37,0.18) 0%, rgba(217,166,37,0.07) 100%);
  border: 1.5px solid rgba(217,166,37,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
  margin-bottom: 4px;
}
.bkd-shield-svg { width: 34px; height: 34px; }
.bkd-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-22), 4vw, var(--fs-28));
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.bkd-lede {
  font-size: var(--fs-13);
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
}

/* Trust pillars — 2 × 2 grid */
.bkd-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.bkd-pillar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: var(--fw-600);
  line-height: 1.3;
}
.bkd-pillar svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }

/* Delivery destination row (above the breakdown table) */
.bkd-delivery {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bkd-delivery[hidden] { display: none; }
.bkd-delivery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bkd-delivery-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}
.bkd-delivery-change {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bkd-delivery-change:hover { color: var(--gold-deep); }
.bkd-delivery-body {
  color: var(--ink);
  font-size: var(--fs-13);
  line-height: 1.45;
}
.bkd-delivery-body div { margin-bottom: 1px; }

/* Breakdown table */
.bkd-breakdown {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  overflow: hidden;
}
.bkd-breakdown-head {
  padding: 10px 16px;
  background: var(--bg-3);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
  border-bottom: 1px solid var(--line);
}
/* ============================================================
   3-COLUMN ACCOUNTING LEDGER — 2026-05-14
   [ LABEL ........ ] [ (i) ] [ VALUE ]
   Strict columns. Values never wrap. Info icon has its own column
   so it never affects label width or row baseline. Reads as a
   banking/invoice ledger, not paragraph copy. The info icon may
   be absent on some rows — `.bkd-row-tip-slot` (empty span) holds
   the column open so EVERY row stays aligned.
   ============================================================ */
.bkd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px 120px;
  align-items: center;
  column-gap: 10px;
  padding: 12px var(--s-4);
  border-bottom: 1px solid var(--line);
}
.bkd-row:last-child { border-bottom: none; }
.bkd-row-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.4;
  font-weight: var(--fw-600);
  min-width: 0;
  overflow-wrap: anywhere;
}
.bkd-row-tip-slot {
  /* Empty placeholder — keeps the icon column open on rows without
     a tooltip so values line up across every row. */
  display: block;
  width: 22px;
  height: 1px;
}
/* The info-icon column itself is now a direct grid cell; remove
   the inline-block + absolute bubble positioning that assumed
   nesting inside the label. */
.bkd-row > .bkd-row-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  justify-self: center;
}
.bkd-row-val {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-weight: var(--fw-700);
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* Mobile — narrower value column but still rigid. Reduce label
   font-size before letting it wrap. Stays single-row accounting
   even on iPhone SE. */
@media (max-width: 540px) {
  .bkd-row {
    grid-template-columns: minmax(0, 1fr) 20px 100px;
    column-gap: 8px;
    padding: 10px var(--s-3);
  }
  .bkd-row-label { font-size: 10.5px; letter-spacing: 0.04em; }
  .bkd-row-val   { font-size: var(--fs-13); }
  .bkd-row > .bkd-row-tip { width: 20px; height: 20px; }
  .bkd-row-tip-slot { width: 20px; }
}
@media (max-width: 400px) {
  .bkd-row {
    grid-template-columns: minmax(0, 1fr) 18px 92px;
    column-gap: 6px;
  }
  .bkd-row-label { font-size: 10px; letter-spacing: 0.03em; }
  .bkd-row-val   { font-size: var(--fs-12); }
}
@media (max-width: 340px) {
  .bkd-row-label { font-size: 9.5px; }
  .bkd-row { grid-template-columns: minmax(0, 1fr) 16px 84px; }
}

/* TOTAL ROW — financial finality. Larger value, gold accent,
   extra top spacing, subtle divider above (already exists as
   .bkd-total-divider). Stays in the same 3-col grid so the value
   right-edge aligns with the rows above. */
.bkd-row-total {
  margin-top: 6px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.bkd-row-total .bkd-row-label,
.bkd-total-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink);
  font-weight: var(--fw-700);
}
.bkd-row-total .bkd-row-val,
.bkd-total-val {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-700);
  color: var(--gold);
  letter-spacing: -0.01em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px) {
  .bkd-row-total .bkd-row-val { font-size: var(--fs-20); }
}
.bkd-row-label-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bkd-row-sub {
  font-size: var(--fs-11);
  color: var(--ink-dim);
  line-height: 1.35;
}
.bkd-row-val {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bkd-row-val[aria-busy="true"],
.bkd-row-val.is-loading {
  color: var(--ink-dim);
  font-weight: var(--fw-400);
  font-family: var(--font-sans);
}
.bkd-total-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(217,166,37,0.45) 30%, rgba(217,166,37,0.45) 70%, transparent 100%);
}
.bkd-row-total {
  background: var(--bg-3);
  padding-block: var(--s-4);
}
.bkd-total-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink);
  font-weight: var(--fw-700);
}
.bkd-total-val {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-700);
  color: var(--gold);
  letter-spacing: -0.01em;
}

/* Escrow trust note */
.bkd-escrow {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  background: rgba(217,166,37,0.04);
  border: 1px solid rgba(217,166,37,0.18);
  border-radius: var(--r-3);
}
.bkd-escrow-icon { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.bkd-escrow-text { font-size: var(--fs-12); color: var(--ink-muted); line-height: 1.6; margin: 0; }

/* Actions */
.bkd-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.bkd-confirm,
.bkd-cancel {
  width: 100%;
  justify-content: center;
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-14);
  letter-spacing: 0.025em;
  min-height: 44px;
}
.bkd-confirm svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 480px) {
  .bkd-pillars { grid-template-columns: 1fr 1fr; }
  .modal-panel-bkd { padding: var(--s-5); max-height: 95vh; }
  .bkd-total-val { font-size: var(--fs-20); }
}

/* ─── Trust stats (views + saved-by-N) ─────────────────────── */
.item-stats {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-dim);
  text-transform: uppercase;
}
.item-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.item-stat-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ink-dim);
}
.item-stat-num {
  font-weight: var(--fw-600);
  color: var(--ink-muted);
}
.item-stat-label {
  color: var(--ink-dim);
}


/* ==========================================================
   MOBILE FIXES :: 2026-05-03 :: item / listing page
   ========================================================== */
@media (max-width: 480px) {
  .item-gallery-thumb { flex: 0 0 clamp(60px, 14vw, 92px); }
  .item-gallery-counter {
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
  }
  .item-gallery-desc { word-wrap: break-word; }
}

/* ==========================================================
   Stay-safe info cards :: 2026-05-03
   Mirrors the .sell-info-card pattern from the sell flow:
   gold-tinted background, gold border, icon + bold heading +
   body. Three separate cards stacked at the universal --s-3
   gap so they read as a clear list, not a merged block.
   ========================================================== */
.item-trust-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.item-trust-stack-head {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
}
.item-info-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  background: rgba(217, 166, 37, 0.06);
  border: 1px solid rgba(217, 166, 37, 0.28);
  border-radius: var(--r-2, 6px);
  font-size: var(--fs-11);
  line-height: 1.55;
  color: var(--ink-muted);
}
.item-info-card svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
}
.item-info-card strong {
  color: var(--ink);
  font-weight: var(--fw-600);
}

/* Trust Level N pill — neutral-grey companion to the gold tier
   badge. Always visible (Member through Verified). The big
   numeral after "Level " is the headline; tier name shows in
   the title attribute on hover. Sits inline next to the seller
   name, wrapping to a new line on narrow viewports rather than
   pushing the name out. */
.item-seller-trust-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(184, 190, 196, 0.10);
  border: 1px solid rgba(184, 190, 196, 0.28);
  color: var(--steel, #B8BEC4);
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight:var(--fw-700);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  cursor: help;
}
.item-seller-trust-level[hidden] { display: none; }

/* COVER-OUR-ARSE microline under the buyer CTA. Plain, factual,
   no marketing tone. Clarifies role + reassures buyer in one
   sentence. Sits beneath the existing .item-actions-trust line
   so it's visible without competing with the CTA. */
.item-actions-fineprint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2, #343C46);
  font-family: var(--font-sans, sans-serif);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-dim, #8B939D);
  text-align: left;
}

/* 2026-05-08 — mobile touch-target floor */
@media (max-width: 480px) {
  .item-lb-prev,
  .item-lb-next { width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; }
  .modal-close { min-width: 44px; min-height: 44px; padding: 8px; }
}

/* ============================================================
   Mobile floating buy bar (2026-05-10) — sticks to viewport bottom
   on phones so the Buy CTA is always one tap away. Hidden on
   tablet+ since the side payment box is visible there. Honours
   iPhone home-indicator inset.
   ============================================================ */
.item-mobile-buybar {
  display: none;
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 90;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(20, 24, 29, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(217, 166, 37, 0.32);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  animation: item-mobile-buybar-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes item-mobile-buybar-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 760px) {
  .item-mobile-buybar:not([hidden]) { display: flex; }
  body:has(.item-mobile-buybar:not([hidden])) main { padding-bottom: 88px; }
}
/* Desktop: bar appears only after the user scrolls past the
   main buy panel (body.is-buybar-pinned is toggled by item.js
   via IntersectionObserver on #itemActionsBuyer). */
@media (min-width: 761px) {
  body.is-buybar-pinned .item-mobile-buybar:not([hidden]) { display: flex; }
  body.is-buybar-pinned:has(.item-mobile-buybar:not([hidden])) main { padding-bottom: 96px; }
}
/* Desktop-only trust strip — escrow shield + reassurance copy.
   Hidden by default; revealed when the bar is wider than ~640px
   so it never crowds the compact mobile layout. */
.item-buybar-trust { display: none; }
@media (min-width: 761px) {
  .item-buybar-trust {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-right: 16px;
    margin-right: 4px;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--ink-muted);
    flex: 0 1 auto;
    min-width: 0;
  }
  .item-buybar-trust svg {
    width: 16px;
    height: 16px;
    color: var(--gold);
    flex-shrink: 0;
  }
  .item-buybar-trust strong {
    color: var(--ink);
    font-weight: var(--fw-700);
  }
  .item-mobile-buybar {
    /* Centered horizontally without translateX so the slide-in
       animation (translateY) still works. */
    left: 0;
    right: 0;
    inset-inline: 0;
    margin-inline: auto;
    width: min(calc(100% - 48px), 980px);
    bottom: 16px;
    border-radius: var(--r-3);
    border: 1px solid rgba(217, 166, 37, 0.32);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    padding: 12px 16px;
  }
  .item-mobile-buybar-price { margin-left: auto; }
  .item-mobile-buybar-cta { flex: 0 0 auto; }
}
.item-mobile-buybar-price {
  display: flex; flex-direction: column;
  flex-shrink: 0;
  min-width: 0;
}
.item-mobile-buybar-label {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  font-weight:var(--fw-700);
  letter-spacing:var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 2px;
}
.item-mobile-buybar-amount {
  font-family: var(--font-display, system-ui);
  font-size:var(--fs-18);
  font-weight:var(--fw-700);
  color: var(--gold);
  line-height: 1;
}
.item-mobile-buybar-cta {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px !important;
  font-size:var(--fs-13) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-mobile-buybar-cta svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 360px) {
  .item-mobile-buybar { gap: 8px; padding: 10px; }
  .item-mobile-buybar-amount { font-size:var(--fs-16); }
  .item-mobile-buybar-cta { padding: 11px 12px !important; font-size:var(--fs-12) !important; }
}

/* ============================================================
   MOBILE / TABLET PASS 2026-05-13
   ============================================================ */

/* Tablet portrait (≤834px) — gallery photo was using cover, so
   tall product photos got cropped on the sides. Switch to
   contain so buyers see the full image on iPad Air portrait
   (820 wide) as well as smaller phones. */
@media (max-width: 834px) {
  .item-gallery-img,
  .item-gallery-main {
    background-size: contain;
    background-position: center;
  }
}

/* Description card spacing — felt cramped right under the
   main image on narrow phones. */
@media (max-width: 480px) {
  .item-gallery-description {
    margin-top: var(--s-5);
    padding: var(--s-4);
  }
}

/* Narrow phones — keep equal left/right padding on each
   stacked column so neither touches the viewport gutter. */
@media (max-width: 420px) {
  .item-split {
    gap: var(--s-4);
    padding-inline: 0;
  }
  .item-gallery,
  .item-gallery-description,
  .item-info {
    padding-inline: var(--gutter);
  }
}

/* ============================================================
   ITEM PAGE STRUCTURAL RESTRUCTURE 2026-05-13
   Sections after the hero (gallery + buy aside) now flow as
   full-width or 2-col blocks at a consistent 48px section
   rhythm. The page no longer drags an asymmetric long aside
   past the bottom of the gallery — instead, the aside trims
   to just the purchase chrome, and Description / Specs+Delivery
   / Seller+Safety / More-from-seller / Related all stack as
   their own rhythmically-spaced sections below.
   ============================================================ */

/* SECTION 2 — Description (full width, below gallery + aside) */
.item-fullwidth-section {
  margin-top: 48px;
}
.item-fullwidth-description {
  padding: var(--s-6);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
}
.item-fullwidth-description .item-sec-title {
  margin: 0 0 var(--s-3);
}
.item-fullwidth-description .item-description {
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: var(--ink-muted);
  white-space: pre-wrap;
  margin: 0;
}

/* SECTION 4 — Seller card + Stay-safe stack (2-col, full width) */
.item-trust-section {
  margin-top: 48px;
}
.item-trust-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.item-trust-row > .item-seller-card,
.item-trust-row > .item-trust-stack {
  margin-top: 0;
}
@media (max-width: 1100px) {
  .item-trust-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Seller card in the new full-width section gets a proper
   card chrome (was an inline block inside the aside before). */
.item-trust-row > .item-seller-card {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
  padding: var(--s-6);
  align-items: center;
}

/* Stay-safe stack in the new section gets matching card chrome. */
.item-trust-row > .item-trust-stack {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.item-trust-row > .item-trust-stack .item-trust-stack-head {
  margin-bottom: 4px;
}
.item-trust-row > .item-trust-stack .item-report-link {
  margin-top: 8px;
  align-self: flex-start;
}

/* ============================================================
   RELATED GRID — strict equal-height cards (Apple Store precision)
   Cards are populated by item.js with .card-item markup; we
   pin every interior block to a deterministic height so titles
   wrapping to 2 lines vs 1 don't bump the price/meta rows
   out of alignment with neighbouring cards.
   ============================================================ */
.item-related-grid {
  gap: 20px !important;
  align-items: stretch;
}
.item-related-grid > .card-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.item-related-grid > .card-item .card-item-media {
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
}
.item-related-grid > .card-item .card-item-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.item-related-grid > .card-item .card-item-title {
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-related-grid > .card-item .card-item-priceline,
.item-related-grid > .card-item .card-item-metaline,
.item-related-grid > .card-item .card-item-pillrow {
  margin-top: auto;
}
.item-related-grid > .card-item .card-item-pillrow {
  margin-top: 6px;
}

/* ============================================================
   MOBILE BUY BAR POLISH — feel like part of the OS
   Soft backdrop blur, subtler border, vertical-centered chrome.
   ============================================================ */
.item-mobile-buybar {
  /* Glass surface — the previous flat background made it feel
     like a separate strip stuck to the viewport. */
  background: rgba(20, 24, 29, 0.78) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 -10px 32px -16px rgba(0, 0, 0, 0.55),
    0 -1px 0 rgba(217, 166, 37, 0.10) inset !important;
  /* Reduce vertical chrome a touch + tighter centering. */
  padding-block: 10px !important;
  align-items: center !important;
}

/* ============================================================
   SELLER PASSPORT v6 — first-principles rebuild
   One container, no nested boxes. Hard left-align. Industrial.
   Density-first: ~35% tighter than v5. Matches the rest of
   Pakstoor's dashboard/escrow DNA (mono labels, gold accent,
   precise hairlines, no soft blur).
   ============================================================ */

.seller-passport {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: var(--s-4);
  margin-bottom: var(--s-6);
  padding: 15px 16px 12px;
  background:
    /* subtle gold caustic at top-left */
    radial-gradient(120% 60% at 0% 0%, rgba(217, 166, 37, 0.035) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-1) 0%, color-mix(in srgb, var(--bg-1) 94%, var(--bg)) 100%);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  /* Precision-machined edge — no soft glow */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 10px 24px -16px rgba(0, 0, 0, 0.55);
  text-align: left;
  font-family: var(--font-sans);
}

/* Top hairline accent — subtle gold gradient line at the
   card's top edge so it reads as an identity document, not
   a generic panel. */
.seller-passport::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(217, 166, 37, 0.45) 15%,
    rgba(217, 166, 37, 0.65) 50%,
    rgba(217, 166, 37, 0.20) 85%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.seller-passport { position: relative; overflow: hidden; }

/* ─── Identity head ─────────────────────────────────────────
   Avatar LEFT (60px embossed), meta column flush-left.
   align-items:start — meta hugs the top, not vertical-centered. */
.seller-passport .sp-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.seller-passport .sp-avatar {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  /* Layered: hex texture overlay, metallic body, deep base */
  background:
    radial-gradient(circle at 50% 0%, rgba(217, 166, 37, 0.10), transparent 60%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--bg-3) 88%, var(--gold) 12%) 0%,
      var(--bg-1) 55%,
      var(--bg) 100%);
  border: 1px solid rgba(217, 166, 37, 0.42);
  box-shadow:
    /* inner top highlight (machined edge) */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    /* inner bottom shadow */
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    /* outer drop */
    0 6px 14px -8px rgba(0, 0, 0, 0.65),
    /* gold halo */
    0 0 18px -10px rgba(217, 166, 37, 0.42);
  flex-shrink: 0;
  overflow: hidden;
}
.seller-passport .sp-avatar-letter {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: var(--fw-700);
  letter-spacing: -0.5px;
  line-height: 1;
  /* Metallic gold letter — gradient via background-clip:text */
  background-image: linear-gradient(180deg, #F0C84D 0%, #D9A625 55%, #8A6614 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .seller-passport .sp-avatar-letter { color: var(--gold-light); -webkit-text-fill-color: var(--gold-light); }
}
.seller-passport .sp-avatar.has-image {
  background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-1) 100%);
}
.seller-passport .sp-avatar.has-image .sp-avatar-letter { display: none; }
/* Image is positioned absolutely to bullet-proof it against the
   grid container's `place-items: center` (which previously left the
   img at intrinsic 0×0 in some browsers and made it look like the
   avatar had no picture). */
.seller-passport .sp-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.seller-passport .sp-head-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-top: 1px;
}
.seller-passport .sp-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 2026-05-25 — was flex-wrap: wrap which let the trust badge
     break to a new line below long seller names. CLAUDE.md
     mandates Trust Level badges must not wrap. nowrap keeps
     them inline; .sp-name already has ellipsis truncation so
     the name absorbs the squeeze instead of pushing the badge. */
  flex-wrap: nowrap;
  min-width: 0;
}
.seller-passport .sp-name-row > .sp-verified,
.seller-passport .sp-name-row > .sp-trust { flex-shrink: 0; }
.seller-passport .sp-name {
  margin: 0;
  font-family: var(--font-display);
  font-size:var(--fs-18);
  font-weight: var(--fw-700);
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.15;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.seller-passport .sp-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: var(--fw-700);
  background: rgba(217, 166, 37, 0.10);
  border: 1px solid rgba(217, 166, 37, 0.40);
  color: var(--gold);
  white-space: nowrap;
}
.seller-passport .sp-verified svg { width: 10px; height: 10px; }
.seller-passport .sp-verified[hidden] { display: none; }

/* Trust authority strip — shield + TRUST LEVEL N on one
   horizontal line. inline-flex + width:max-content + nowrap
   means it sizes naturally to content and never wraps. */
.seller-passport .sp-trust {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
.seller-passport .sp-trust-icon {
  width: 14px;
  height: 14px;
  color: var(--steel);
  flex-shrink: 0;
}
.seller-passport .sp-trust-level {
  font-family: var(--font-display);
  font-size:var(--fs-11);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: var(--fw-700);
  line-height: 1.1;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Active-member status — sits directly under the seller's name as
   a quiet sub-line. Same node id #sellerTrustLevelSub is reused so
   item.js i18n write-paths still find it. */
.seller-passport .sp-status {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
  line-height: 1.1;
}

/* Suppress the legacy gold "tier badge" pill that item.js injects
   next to the seller name on listings — the new passport already
   surfaces tier via the dedicated .sp-status sub-line AND the
   .sp-trust strip, so the gold pill duplicates the signal. */
.seller-passport #sellerTierBadge,
.seller-passport .item-seller-tier-badge { display: none !important; }

/* Trust tier — shield + level re-tint at higher tiers */
.seller-passport .sp-trust.trust-level--1 .sp-trust-icon { color: var(--steel); }
.seller-passport .sp-trust.trust-level--2 .sp-trust-icon,
.seller-passport .sp-trust.trust-level--2 .sp-trust-level { color: var(--gold); }
.seller-passport .sp-trust.trust-level--3 .sp-trust-icon,
.seller-passport .sp-trust.trust-level--3 .sp-trust-level {
  color: var(--gold-light);
  filter: drop-shadow(0 0 6px rgba(217, 166, 37, 0.45));
}
.seller-passport .sp-trust.trust-level--4 .sp-trust-icon,
.seller-passport .sp-trust.trust-level--4 .sp-trust-level { color: var(--success); }
.seller-passport .sp-trust.trust-level--5 .sp-trust-icon,
.seller-passport .sp-trust.trust-level--5 .sp-trust-level {
  color: var(--gold-light);
  filter: drop-shadow(0 0 8px rgba(217, 166, 37, 0.55));
}

/* ─── Trust signal nodes — hex-framed identity layer.
   Each node = small metallic hexagon containing a line icon
   + a tight label. Hex language is reserved for trust
   architecture so this reads as a verified identity, not
   decorative. 2-col grid; collapses to single col on narrow. */
.seller-passport .sp-nodes {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
}
.seller-passport .sp-node {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size:var(--fs-12);
  line-height: 1.3;
  color: var(--ink-muted);
  text-align: left;
  min-width: 0;
}
.seller-passport .sp-node[hidden] { display: none; }
.seller-passport .sp-node strong {
  color: var(--ink);
  font-weight: var(--fw-700);
}
.seller-passport .sp-hex {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  /* Vertical hexagon — point-up. */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--bg-3) 88%, var(--gold) 12%) 0%,
      var(--bg-2) 60%,
      var(--bg-1) 100%);
  color: var(--steel);
  flex-shrink: 0;
}
.seller-passport .sp-hex::before {
  /* Inset gold halo — drawn as a second hex layer behind the
     icon. Creates the "machined edge" feel without a real
     border (clip-path strips borders). */
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, rgba(20, 24, 29, 0.95) 0%, rgba(13, 16, 20, 0.98) 100%);
  z-index: 0;
}
.seller-passport .sp-hex svg {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
}
.seller-passport .sp-hex--gold {
  background:
    linear-gradient(160deg, rgba(217, 166, 37, 0.85) 0%, rgba(217, 166, 37, 0.45) 100%);
  color: var(--gold-light);
}
.seller-passport .sp-node--active .sp-hex {
  background: linear-gradient(160deg, rgba(94, 168, 114, 0.55) 0%, rgba(94, 168, 114, 0.25) 100%);
  color: var(--success);
}

/* Operational pulse — tiny live indicator after the trust level
   text. Subtle, not gamer RGB. Green pulse = active in last 24h. */
.seller-passport .sp-pulse {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px rgba(94, 168, 114, 0.6);
  flex-shrink: 0;
}
.seller-passport .sp-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(94, 168, 114, 0.55);
  animation: sp-pulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes sp-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(1.5); opacity: 0;   }
  100% { transform: scale(1.5); opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .seller-passport .sp-pulse::after { animation: none; }
}

/* ─── Inline stat row — bullets via borders, no separator spans.
   Stats fall away cleanly when item.js hides any of them
   (e.g. #sellerRating when no reviews). ─────────────────────── */
.seller-passport .sp-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.seller-passport .sp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  min-width: 0;
}
.seller-passport .sp-stat:first-child,
.seller-passport .sp-stat.sp-stat--lead {
  padding-left: 0;
  border-left: 0;
}
.seller-passport .sp-stat[hidden] { display: none; }
/* When a stat is hidden, neighbour preserves its divider naturally
   since flex skips display:none children. */
.seller-passport .sp-stat-num {
  font-family: var(--font-display);
  font-size:var(--fs-16);
  font-weight: var(--fw-700);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.seller-passport .sp-stat-num--mono {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}
.seller-passport .sp-stat-rating-new {
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  font-weight: var(--fw-700);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
}
.seller-passport .sp-stat-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: var(--fw-600);
}

/* Live rating fill (item.js writes star + score into #sellerRating) */
.seller-passport .sp-stat .item-seller-rating-star {
  color: var(--gold);
  font-size:var(--fs-13);
  margin-right: 3px;
}
.seller-passport .sp-stat .item-seller-rating-score {
  font-family: var(--font-display);
  font-size:var(--fs-15);
  font-weight: var(--fw-700);
  color: var(--ink);
}
.seller-passport .sp-stat .item-seller-rating-count {
  display: none;   /* count never reads well at sidebar widths */
}

/* ─── Actions — same width, primary + ghost ────────────────── */
.seller-passport .sp-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.seller-passport .sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  height: 40px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: var(--fw-700);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.seller-passport .sp-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.seller-passport .sp-btn--primary {
  background: linear-gradient(180deg, #E3B53D 0%, var(--gold) 100%);
  border: 1px solid var(--gold);
  color: var(--gold-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 16px -10px rgba(217, 166, 37, 0.45);
}
.seller-passport .sp-btn--primary:hover {
  background: linear-gradient(180deg, #E8BD45 0%, #DDAB2B 100%);
  transform: translateY(-1px);
}
.seller-passport .sp-btn--ghost {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(217, 166, 37, 0.22);
  color: var(--ink);
}
.seller-passport .sp-btn--ghost svg { color: var(--gold); opacity: 0.85; }
.seller-passport .sp-btn--ghost:hover {
  background: rgba(217, 166, 37, 0.08);
  border-color: rgba(217, 166, 37, 0.55);
  color: var(--gold);
}
.seller-passport .sp-btn--ghost:hover svg { opacity: 1; }

/* ─── Report seller — quiet text link, no widget ───────────── */
.seller-passport .sp-report {
  align-self: flex-start;
  margin: 0;
  padding: 2px 0;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: var(--fw-600);
  cursor: pointer;
  transition: color 220ms ease;
}
.seller-passport .sp-report:hover { color: var(--danger); }
.seller-passport .sp-report[hidden] { display: none; }

/* ─── Narrow fallback — sub-300px content width drops the
   2-col checks grid to a single column. ─────────────────── */
@media (max-width: 360px) {
  .seller-passport .sp-checks {
    grid-template-columns: 1fr;
  }
  .seller-passport .sp-stats {
    flex-wrap: wrap;
    gap: 11px 0;
  }
}


/* ============================================================
   LEGACY v4/v5 styles — retained for one cycle in case any
   cached browser tab loads old item.html. Safe to remove.
   ============================================================ */

.item-seller-card--v4 {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: var(--s-4);
  padding: 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  text-align: left;
}

/* ─── Zone 1: identity head ─────────────────────────────────
   Avatar LEFT (52px), name + trust strip flush-left on right.
   align-items:start so meta column hugs the top, not centered. */
.item-seller-card--v4 .seller-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* Embossed monogram — inner hex texture + metallic letter via
   text-clip. Falls back to solid gold if background-clip:text
   is unsupported. */
.item-seller-card--v4 .seller-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: var(--fw-700);
  letter-spacing: -0.5px;
  background:
    /* hex texture overlay */
    radial-gradient(circle at 50% 50%, rgba(217, 166, 37, 0.06) 0%, transparent 60%),
    /* metallic body */
    linear-gradient(155deg, color-mix(in srgb, var(--bg-3) 92%, var(--gold) 8%) 0%, var(--bg-1) 60%, var(--bg) 100%);
  border: 1px solid rgba(217, 166, 37, 0.40);
  box-shadow:
    /* inner top highlight */
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    /* inner bottom shadow */
    0 -1px 0 rgba(0, 0, 0, 0.35) inset,
    /* outer drop */
    0 6px 14px -8px rgba(0, 0, 0, 0.60),
    /* gold halo */
    0 0 18px -10px rgba(217, 166, 37, 0.45);
  /* Metallic gold letter via text-clip — gradient is on the
     COLOR property cascade via background-clip:text. */
  color: transparent;
  background-clip: text, padding-box;
  -webkit-background-clip: text, padding-box;
  background-image:
    linear-gradient(180deg, #F0C84D 0%, #D9A625 55%, #8A6614 100%),
    radial-gradient(circle at 50% 50%, rgba(217, 166, 37, 0.06) 0%, transparent 60%),
    linear-gradient(155deg, color-mix(in srgb, var(--bg-3) 92%, var(--gold) 8%) 0%, var(--bg-1) 60%, var(--bg) 100%);
  flex-shrink: 0;
}
/* When item.js swaps in a real avatar image, remove the
   metallic-letter clip so the image actually shows. */
.item-seller-card--v4 .seller-avatar.has-image {
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-1) 100%);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}
.item-seller-card--v4 .seller-avatar.has-image img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.item-seller-card--v4 .seller-head-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding-top: 1px;       /* optical centering against avatar */
}
.item-seller-card--v4 .seller-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.item-seller-card--v4 .seller-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-700);
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.15;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.item-seller-card--v4 .seller-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: var(--fw-700);
  background: rgba(217, 166, 37, 0.10);
  border: 1px solid rgba(217, 166, 37, 0.40);
  color: var(--gold);
  white-space: nowrap;
}
.item-seller-card--v4 .seller-verified svg {
  width: 10px;
  height: 10px;
}
.item-seller-card--v4 .seller-verified[hidden] { display: none; }

/* Trust strip — shield icon left, two stacked text lines right.
   NO pill, NO background, NO border. Pure typography component
   so it reads as part of the identity head, not a separate box. */
.item-seller-card--v4 .seller-trust-strip {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  align-self: flex-start;
  min-width: 0;
}
.item-seller-card--v4 .seller-trust-shield {
  width: 16px;
  height: 16px;
  color: var(--steel);
  flex-shrink: 0;
}
.item-seller-card--v4 .seller-trust-strip-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.item-seller-card--v4 .seller-trust-level {
  font-family: var(--font-display);
  font-size:var(--fs-11);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: var(--fw-700);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-seller-card--v4 .seller-trust-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trust tier — shield + level text re-tint at higher tiers */
.item-seller-card--v4 .seller-trust-strip.trust-level--1 .seller-trust-shield { color: var(--steel); }
.item-seller-card--v4 .seller-trust-strip.trust-level--2 .seller-trust-shield,
.item-seller-card--v4 .seller-trust-strip.trust-level--2 .seller-trust-level { color: var(--gold); }
.item-seller-card--v4 .seller-trust-strip.trust-level--3 .seller-trust-shield,
.item-seller-card--v4 .seller-trust-strip.trust-level--3 .seller-trust-level {
  color: var(--gold-light);
  filter: drop-shadow(0 0 6px rgba(217, 166, 37, 0.45));
}
.item-seller-card--v4 .seller-trust-strip.trust-level--4 .seller-trust-shield,
.item-seller-card--v4 .seller-trust-strip.trust-level--4 .seller-trust-level { color: var(--success); }
.item-seller-card--v4 .seller-trust-strip.trust-level--5 .seller-trust-shield,
.item-seller-card--v4 .seller-trust-strip.trust-level--5 .seller-trust-level {
  color: var(--gold-light);
  filter: drop-shadow(0 0 8px rgba(217, 166, 37, 0.55));
}

/* ─── Zone 2: trust signals — bare list, hairline above ──── */
.item-seller-card--v4 .seller-checks {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.item-seller-card--v4 .seller-checks li {
  display: grid;
  grid-template-columns: 13px 1fr;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-muted);
  text-align: left;
}
.item-seller-card--v4 .seller-checks li[hidden] { display: none; }
.item-seller-card--v4 .seller-checks li svg {
  width: 11px;
  height: 11px;
  color: var(--success);
  flex-shrink: 0;
}
.item-seller-card--v4 .seller-checks li strong {
  color: var(--ink);
  font-weight: var(--fw-600);
}

/* ─── Zone 3a: inline stats — dominant number, faded label.
   Number is the visual primary, label fades back. Items
   separated by a thin vertical divider, not gaps. ─────────── */
.item-seller-card--v4 .seller-stats-inline {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.item-seller-card--v4 .seller-stat-inline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  text-align: left;
  min-width: 0;
}
.item-seller-card--v4 .seller-stat-inline:first-child {
  padding-left: 0;
  border-left: 0;
}
.item-seller-card--v4 .seller-stat-inline[hidden] { display: none; }
.item-seller-card--v4 .seller-stat-num {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-700);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.item-seller-card--v4 .seller-stat-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: var(--fw-600);
}

/* Live rating tile, populated by item.js with .item-seller-rating-* */
.item-seller-card--v4 .seller-stat-inline .item-seller-rating-star {
  color: var(--gold);
  font-size:var(--fs-13);
  margin-right: 3px;
}
.item-seller-card--v4 .seller-stat-inline .item-seller-rating-score {
  font-family: var(--font-display);
  font-size:var(--fs-15);
  font-weight: var(--fw-700);
  color: var(--ink);
}
.item-seller-card--v4 .seller-stat-inline .item-seller-rating-count {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: 4px;
}

/* ─── Zone 3b: CTAs — primary gold, ghost with real weight ── */
.item-seller-card--v4 .seller-ctas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.item-seller-card--v4 .seller-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 9px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: var(--fw-700);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.item-seller-card--v4 .seller-cta svg { width: 13px; height: 13px; flex-shrink: 0; }
.item-seller-card--v4 .seller-cta--primary {
  background: linear-gradient(180deg, #E3B53D 0%, var(--gold) 100%);
  border: 1px solid var(--gold);
  color: var(--gold-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 16px -8px rgba(217, 166, 37, 0.45);
}
.item-seller-card--v4 .seller-cta--primary:hover {
  background: linear-gradient(180deg, #E8BD45 0%, #DDAB2B 100%);
  transform: translateY(-1px);
}
/* Ghost CTA — same visual weight as primary, just inverted.
   Stronger background + tighter border so it doesn't disappear. */
.item-seller-card--v4 .seller-cta--ghost {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(217, 166, 37, 0.22);
  color: var(--ink);
}
.item-seller-card--v4 .seller-cta--ghost svg { color: var(--gold); opacity: 0.85; }
.item-seller-card--v4 .seller-cta--ghost:hover {
  background: rgba(217, 166, 37, 0.08);
  border-color: rgba(217, 166, 37, 0.55);
  color: var(--gold);
}
.item-seller-card--v4 .seller-cta--ghost:hover svg { opacity: 1; }

/* ─── Report seller — subtle text-link footer, no widget ───── */
.item-seller-card--v4 .seller-report-link {
  align-self: flex-start;
  margin: 4px 0 0;
  padding: 2px 0;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: var(--fw-600);
  cursor: pointer;
  transition: color 220ms ease;
}
.item-seller-card--v4 .seller-report-link:hover { color: var(--danger); }
.item-seller-card--v4 .seller-report-link[hidden] { display: none; }


/* ============================================================
   LEGACY v3 styles — retained as no-op fallback in case any
   build cache serves an older item.html that still references
   the v3 classnames. Safe to remove after one prod cycle.
   ============================================================ */

.item-seller-card--v3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: var(--s-4);
  padding: 22px 20px 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(217, 166, 37, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, color-mix(in srgb, var(--bg-1) 92%, var(--bg)) 100%);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 56px -28px rgba(0, 0, 0, 0.55);
}

/* ─── Identity anchor: avatar + name ───────────────────────── */
.item-seller-card--v3 .item-seller-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.item-seller-card--v3 .item-seller-avatar {
  width: 72px;
  height: 72px;
  border-radius:var(--r-5);
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.10) 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-3) 0%, var(--bg-1) 70%, var(--bg) 100%);
  border: 1px solid rgba(217, 166, 37, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--fw-700);
  letter-spacing: -0.5px;
  /* Metallic gradient monogram — clipped to the letter */
  background-clip: padding-box;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.10) 0%, transparent 55%),
    linear-gradient(160deg, var(--bg-3) 0%, var(--bg-1) 70%, var(--bg) 100%);
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(217, 166, 37, 0.10) inset,
    0 10px 22px -10px rgba(0, 0, 0, 0.55),
    0 0 24px -8px rgba(217, 166, 37, 0.32);
}
.item-seller-card--v3 .item-seller-avatar::before {
  content: attr(data-letter, "P");
}
/* Render the actual text content with metallic gradient overlay.
   Browser fallback: solid gold if background-clip:text unsupported. */
.item-seller-card--v3 .item-seller-avatar {
  background-clip: border-box;
}
.item-seller-card--v3 .item-seller-avatar {
  color: var(--gold);
}
/* Use a span layer for the metallic letter via mask on the
   wrap — but simpler: just set the text fill with linear-gradient
   via background-clip on a child wrapper if needed. The current
   single-element approach uses solid gold; gradient sits in the
   pseudo-light radial above for depth. */

.item-seller-card--v3 .item-seller-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.item-seller-card--v3 .item-seller-name {
  font-family: var(--font-display);
  font-size:var(--fs-18);
  font-weight: var(--fw-700);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: none;
  text-align: center;
}

/* ─── Trust level block — shield + level + sublabel ────────── */
.item-seller-trust-block {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.item-seller-trust-shield {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.item-seller-trust-shield svg {
  width: 22px;
  height: 22px;
}
.item-seller-trust-level {
  font-family: var(--font-display);
  font-size:var(--fs-13);
  font-weight: var(--fw-700);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}
.item-seller-trust-sub {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
  margin-top: 3px;
}

/* Tier styling — bank-grade, not gamer-rank */
.item-seller-trust-block.trust-level--1 {
  background: rgba(184, 190, 196, 0.04);
  border-color: rgba(184, 190, 196, 0.22);
}
.item-seller-trust-block.trust-level--1 .item-seller-trust-shield {
  color: var(--steel);
  background: rgba(184, 190, 196, 0.08);
  border-color: rgba(184, 190, 196, 0.22);
}
.item-seller-trust-block.trust-level--2 {
  background: rgba(217, 166, 37, 0.05);
  border-color: rgba(217, 166, 37, 0.30);
}
.item-seller-trust-block.trust-level--2 .item-seller-trust-shield {
  color: var(--gold);
  background: rgba(217, 166, 37, 0.10);
  border-color: rgba(217, 166, 37, 0.40);
}
.item-seller-trust-block.trust-level--3 {
  background: rgba(217, 166, 37, 0.08);
  border-color: rgba(217, 166, 37, 0.40);
  box-shadow: 0 0 20px -8px rgba(217, 166, 37, 0.45);
}
.item-seller-trust-block.trust-level--3 .item-seller-trust-shield {
  color: var(--gold-light);
  background: rgba(217, 166, 37, 0.14);
  border-color: rgba(217, 166, 37, 0.50);
}
.item-seller-trust-block.trust-level--4 {
  background:
    linear-gradient(rgba(94, 168, 114, 0.06), rgba(94, 168, 114, 0.06)),
    rgba(217, 166, 37, 0.06);
  border-color: rgba(94, 168, 114, 0.45);
  box-shadow: 0 0 20px -8px rgba(94, 168, 114, 0.40);
}
.item-seller-trust-block.trust-level--4 .item-seller-trust-shield {
  color: var(--success);
  background: rgba(94, 168, 114, 0.12);
  border-color: rgba(94, 168, 114, 0.45);
}
.item-seller-trust-block.trust-level--5 {
  background:
    linear-gradient(rgba(217, 166, 37, 0.14), rgba(217, 166, 37, 0.14)),
    var(--bg-2);
  border-color: rgba(217, 166, 37, 0.65);
  box-shadow:
    0 0 28px -8px rgba(217, 166, 37, 0.55),
    0 0 0 1px rgba(217, 166, 37, 0.20) inset;
}
.item-seller-trust-block.trust-level--5 .item-seller-trust-shield {
  color: var(--gold-light);
  background: rgba(217, 166, 37, 0.18);
  border-color: rgba(217, 166, 37, 0.70);
}
.item-seller-trust-block.trust-level--5 .item-seller-trust-level {
  text-shadow: 0 0 12px rgba(240, 198, 77, 0.5);
}

/* ─── Verified checks group ────────────────────────────────── */
.item-seller-card--v3 .item-seller-checks {
  list-style: none;
  margin: 0;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.item-seller-card--v3 .item-seller-check {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-muted);
}
.item-seller-card--v3 .item-seller-check svg {
  width: 13px;
  height: 13px;
  color: var(--success);
  flex-shrink: 0;
}
.item-seller-card--v3 .item-seller-check strong {
  color: var(--ink);
  font-weight: var(--fw-600);
}

/* ─── Stat tiles ───────────────────────────────────────────── */
.item-seller-card--v3 .item-seller-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.item-seller-card--v3 .item-seller-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  text-align: left;
}
.item-seller-card--v3 .item-seller-stat-num {
  font-family: var(--font-display);
  font-size:var(--fs-18);
  font-weight: var(--fw-700);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.item-seller-card--v3 .item-seller-rating-new {
  font-family: var(--font-display);
  font-size:var(--fs-13);
  font-weight: var(--fw-700);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold);
}
.item-seller-card--v3 .item-seller-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}

/* ─── Paired CTAs ──────────────────────────────────────────── */
.item-seller-card--v3 .item-seller-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.item-seller-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: var(--fw-700);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.item-seller-cta svg { width: 13px; height: 13px; flex-shrink: 0; }
.item-seller-cta--primary {
  background: linear-gradient(180deg, #E3B53D 0%, var(--gold) 100%);
  border: 1px solid var(--gold);
  color: var(--gold-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 16px -8px rgba(217, 166, 37, 0.45);
}
.item-seller-cta--primary:hover {
  background: linear-gradient(180deg, #E8BD45 0%, #DDAB2B 100%);
  transform: translateY(-1px);
}
.item-seller-cta--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--ink-muted);
}
.item-seller-cta--ghost:hover {
  background: rgba(217, 166, 37, 0.06);
  border-color: rgba(217, 166, 37, 0.40);
  color: var(--gold);
}

/* ─── Report seller — subtle footer action ─────────────────── */
.item-seller-report-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-top: 2px;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: var(--fw-600);
  cursor: pointer;
  transition: color 220ms ease;
}
.item-seller-report-link:hover {
  color: var(--danger);
}
.item-seller-report-link svg { width: 11px; height: 11px; }
.item-seller-report-link[hidden] { display: none; }

/* Header — avatar + name block + trust pill */
.item-seller-card--v2 .item-seller-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.item-seller-card--v2 .item-seller-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--bg-3) 0%, var(--bg-1) 100%);
  border: 1px solid rgba(217, 166, 37, 0.20);
  font-size:var(--fs-18);
  font-weight: var(--fw-700);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.item-seller-card--v2 .item-seller-name-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.item-seller-card--v2 .item-seller-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.item-seller-card--v2 .item-seller-name {
  font-family: var(--font-display);
  font-size:var(--fs-15);
  font-weight: var(--fw-700);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

/* Trust level pill — 5 visual tiers, bank-grade not gamer.
   Default (level 1) is the calm steel/gray. */
.item-seller-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: var(--fw-700);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  width: fit-content;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-muted);
}
.item-seller-trust-pill[hidden] { display: none; }

.item-seller-trust-pill.trust-level--1 {
  background: rgba(184, 190, 196, 0.06);
  border-color: rgba(184, 190, 196, 0.22);
  color: var(--steel);
}
.item-seller-trust-pill.trust-level--2 {
  background: rgba(217, 166, 37, 0.08);
  border-color: rgba(217, 166, 37, 0.32);
  color: var(--gold);
}
.item-seller-trust-pill.trust-level--3 {
  background: rgba(217, 166, 37, 0.12);
  border-color: rgba(217, 166, 37, 0.45);
  color: var(--gold-light);
  box-shadow: 0 0 14px -6px rgba(217, 166, 37, 0.5);
}
.item-seller-trust-pill.trust-level--4 {
  background: linear-gradient(rgba(94, 168, 114, 0.10), rgba(94, 168, 114, 0.10)), rgba(217, 166, 37, 0.10);
  border-color: rgba(94, 168, 114, 0.45);
  color: var(--success);
  box-shadow: 0 0 14px -6px rgba(94, 168, 114, 0.5);
}
.item-seller-trust-pill.trust-level--5 {
  background:
    linear-gradient(rgba(217, 166, 37, 0.18), rgba(217, 166, 37, 0.18)),
    var(--bg-2);
  border-color: rgba(217, 166, 37, 0.65);
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(240, 198, 77, 0.45);
  box-shadow:
    0 0 20px -6px rgba(217, 166, 37, 0.55),
    0 0 0 1px rgba(217, 166, 37, 0.30) inset;
}

/* Verified checks — three rows */
.item-seller-card--v2 .item-seller-checks {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.item-seller-check {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 8px;
  font-size:var(--fs-12);
  color: var(--ink-muted);
  font-family: var(--font-sans);
}
.item-seller-check svg {
  width: 12px;
  height: 12px;
  color: var(--success);
  flex-shrink: 0;
}
.item-seller-check strong {
  color: var(--ink);
  font-weight: var(--fw-600);
}

/* Stats row — listings + rating */
.item-seller-card--v2 .item-seller-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.item-seller-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.item-seller-stat-num {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-700);
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.item-seller-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}

/* View profile CTA — primary action, gold-accent shell */
.item-seller-view-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(217, 166, 37, 0.08);
  border: 1px solid rgba(217, 166, 37, 0.34);
  color: var(--gold);
  font-family: var(--font-display);
  font-size:var(--fs-11);
  font-weight: var(--fw-700);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.item-seller-view-profile:hover {
  background: rgba(217, 166, 37, 0.14);
  border-color: var(--gold);
  color: var(--gold-light);
}
.item-seller-view-profile svg { width: 12px; height: 12px; }