/* JustReused Premium Listing System v2, ported from mockup
 * Source: justreused-premium-listing-system-v2.html
 * Namespace: all classes prefixed with `jr2-` to avoid clashing with site/tailwind/bootstrap.
 * Root wrapper: <main class="jr2-page"> ... </main>
 */

:root {
  --jr-site-header-height: 5rem;
  --jr2-page: #f5f7f6;
  --jr2-surface: rgba(255, 255, 255, .86);
  --jr2-surface-solid: #ffffff;
  --jr2-surface-soft: #f7faf8;
  --jr2-line: rgba(18, 45, 33, .12);
  --jr2-line-strong: rgba(18, 45, 33, .2);
  --jr2-text: #0c1a2a;
  --jr2-muted: #607080;
  --jr2-subtle: #8492a0;
  --jr2-green: #07753d;
  --jr2-green-dark: #034f28;
  --jr2-green-soft: #e8f6ee;
  --jr2-amber: #f79a1e;
  --jr2-blue: #315f9a;
  --jr2-danger: #c3362b;
  --jr2-shadow: 0 22px 55px rgba(15, 23, 42, .1);
  --jr2-shadow-soft: 0 10px 26px rgba(15, 23, 42, .07);
  --jr2-radius: 8px;
  /* Match site header/footer max-w-7xl so listing aligns with chrome */
  --jr2-max: 1280px;
}

.jr2-root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  color: var(--jr2-text);
}

.jr2-root *,
.jr2-root *::before,
.jr2-root *::after { box-sizing: border-box; min-width: 0; }

.jr2-root img { display: block; max-width: 100%; }
.jr2-root button, .jr2-root input, .jr2-root select { font: inherit; }
.jr2-root button { cursor: pointer; }
.jr2-root a { color: inherit; text-decoration: none; }

.jr2-page,
.jr2-listing-grid,
.jr2-content-stack,
.jr2-rail-stack,
.jr2-gallery-card,
.jr2-tab-card,
.jr2-section-card,
.jr2-primary-card,
.jr2-map-card { min-width: 0; }

.jr2-glass {
  border: 1px solid var(--jr2-line);
  border-radius: var(--jr2-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
  box-shadow: var(--jr2-shadow-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* compact sticky strip (shown when user scrolls > 420px on desktop) */
.jr2-compact-strip {
  display: none !important;
  position: sticky;
  top: var(--jr-site-header-height, 5rem);
  z-index: 40;
  max-width: var(--jr2-max);
  max-height: 0;
  margin: 0 auto;
  padding: 0 22px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height .22s ease, opacity .22s ease, transform .22s ease, padding .22s ease;
}
.jr2-compact-strip.is-active {
  display: none !important;
  max-height: 86px;
  padding-bottom: 12px;
  padding-top: 12px;
  opacity: 1;
  transform: translateY(0);
}
.jr2-compact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.jr2-compact-title { min-width: 0; display: flex; align-items: center; gap: 12px; }
.jr2-compact-title img { width: 36px; height: 36px; border-radius: 8px; }
.jr2-compact-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr2-compact-title span { color: var(--jr2-green-dark); font-weight: 850; }

/* page shell */
.jr2-listing-shell {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(247, 250, 248, .98), rgba(243, 247, 245, .96) 42%, rgba(238, 244, 241, 1)),
    repeating-linear-gradient(90deg, rgba(12, 26, 42, .025) 0 1px, transparent 1px 84px);
}

.jr2-page {
  width: min(100%, var(--jr2-max));
  max-width: var(--jr2-max);
  margin-left: auto;
  margin-right: auto;
  padding: 18px 20px 72px;
  box-sizing: border-box;
}

/* mode-row: breadcrumb / intel pills / switcher */
.jr2-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.jr2-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--jr2-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
}
.jr2-switcher button, .jr2-switcher a, .jr2-switcher span {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: #36475b;
  background: transparent;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.jr2-switcher .is-active {
  color: #fff;
  background: linear-gradient(180deg, #0b8848, #04572c);
  box-shadow: 0 8px 18px rgba(3, 79, 40, .2);
}

.jr2-route-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  color: #5f6f80;
  font-size: 14px;
}
.jr2-route-line strong { color: var(--jr2-green-dark); }
.jr2-route-line a { color: #5f6f80; }
.jr2-route-line a:hover { color: var(--jr2-green-dark); }

.jr2-top-intel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  color: #405168;
  font-size: 14px;
}
.jr2-intel-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--jr2-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  font-weight: 700;
}

/* main 2-column listing grid */
.jr2-listing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .78fr);
  gap: 16px;
  align-items: start;
  width: 100%;
}
.jr2-content-stack, .jr2-rail-stack { display: grid; gap: 18px; }

/* gallery */
.jr2-gallery-card { padding: 10px; }
.jr2-hero-shell {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  max-height: 420px;
  border-radius: 8px;
  background: var(--jr2-surface-soft, #dfe6e2);
  isolation: isolate;
}
.jr2-hero-shell img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 0; }

.jr2-hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.jr2-hero-track.is-dragging { transition: none; }
.jr2-hero-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.jr2-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.jr2-hero-gradient {
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0));
}
.jr2-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jr2-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  transition: width .22s ease, background .22s ease;
}
.jr2-hero-dot.is-active {
  width: 18px;
  background: #fff;
}

.jr2-media-pill, .jr2-media-arrow, .jr2-verified-media {
  position: absolute;
  z-index: 3;
  border: none;
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
}
.jr2-media-pill {
  top: 14px; left: 14px;
  min-height: 30px; padding: 0 11px;
  border-radius: 999px;
  display: inline-flex; align-items: center;
  font-weight: 800; font-size: 12px;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.jr2-media-arrow {
  top: 50%;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .52);
  color: #fff;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .2s ease, background .2s ease, transform .2s ease;
  padding: 0;
}
.jr2-hero-shell:hover .jr2-media-arrow,
.jr2-hero-shell:focus-within .jr2-media-arrow {
  opacity: 1;
}
.jr2-media-arrow:hover {
  background: rgba(0, 0, 0, .72);
  transform: translateY(-50%) scale(1.04);
}
.jr2-media-arrow.left { left: 14px; }
.jr2-media-arrow.right { right: 14px; }

.jr2-verified-media {
  left: 18px; bottom: 18px;
  min-height: 40px;
  padding: 6px 10px 6px 7px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .82);
  color: #102237;
  font-size: 13px; font-weight: 800;
}
.jr2-verified-media img { width: 26px; height: 26px; border-radius: 6px; }

.jr2-thumb-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(70px, 1fr)) 78px;
  gap: 10px;
  padding: 12px 0 2px;
}
.jr2-thumb {
  height: 74px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #edf1ef;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .06);
  cursor: pointer;
  padding: 0;
}
.jr2-thumb.is-active { border-color: var(--jr2-green); }
.jr2-thumb img { width: 100%; height: 100%; object-fit: cover; }

.jr2-more-media {
  min-height: 74px;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .85);
  color: #14243a;
  display: grid;
  place-items: center;
  font-weight: 850;
  font-size: 20px;
  cursor: pointer;
}

/* Full-viewport image lightbox */
.jr2-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .94);
  touch-action: pan-y pinch-zoom;
}
.jr2-zoom-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 56px 72px;
  box-sizing: border-box;
}
.jr2-zoom-image {
  display: block;
  max-width: min(92vw, 100%);
  max-height: min(92vh, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.jr2-zoom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease;
}
.jr2-zoom-close:hover { background: rgba(255, 255, 255, .24); }
.jr2-zoom-arrow {
  z-index: 4;
  opacity: 1;
}
.jr2-zoom-arrow.left { left: 20px; }
.jr2-zoom-arrow.right { right: 20px; }
.jr2-zoom-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* primary card (right column top) */
.jr2-primary-card {
  padding: 16px;
  box-shadow: var(--jr2-shadow);
}
.jr2-listing-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: #506176;
  font-size: 14px;
  font-weight: 720;
  margin-bottom: 12px;
}
.jr2-listing-kicker strong { color: var(--jr2-green-dark); }

.jr2-primary-card h1 {
  margin: 0;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.12;
  letter-spacing: 0;
  font-weight: 900;
  color: var(--jr2-text);
}

.jr2-price-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 12px;
}
.jr2-price {
  color: var(--jr2-green-dark);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  font-weight: 900;
}
.jr2-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(7, 117, 61, .18);
  border-radius: 999px;
  color: var(--jr2-green-dark);
  background: var(--jr2-green-soft);
  font-size: 13px;
  font-weight: 820;
}

.jr2-location-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  color: #26384d;
  font-weight: 700;
}
.jr2-location-line svg { color: var(--jr2-green-dark); flex: 0 0 auto; }
.jr2-distance {
  color: #536477;
  background: #f0f4f2;
  border: 1px solid var(--jr2-line);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 700;
}

.jr2-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dbe3ea;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.jr2-spec {
  min-width: 0;
  min-height: 88px;
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
  border-right: 1px solid #e8edf2;
}
.jr2-spec:last-child { border-right: 0; }
.jr2-spec-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f4f8fb 0%, #e9f0f6 100%);
  border: 1px solid #d5e0ea;
  color: #1a4568;
  margin-bottom: 2px;
}
.jr2-spec-icon .jr2-spec-svg { display: block; }
.jr2-spec-label {
  color: #6b7c8d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.2;
}
.jr2-spec-value {
  font-size: 13px;
  line-height: 1.25;
  color: var(--jr2-text);
  font-weight: 850;
  word-break: break-word;
}

.jr2-mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.jr2-mini-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .7);
  color: #405168;
  font-size: 13px;
  font-weight: 760;
}

.jr2-trust-box {
  display: grid;
  gap: 8px;
  margin: 14px 0 16px;
  padding: 13px;
  border: 1px solid rgba(7, 117, 61, .18);
  border-radius: 8px;
  color: var(--jr2-green-dark);
  background: linear-gradient(135deg, rgba(232, 246, 238, .92), rgba(255, 255, 255, .74));
  font-size: 14px;
  font-weight: 800;
}
.jr2-trust-row { display: flex; align-items: center; gap: 9px; }
.jr2-trust-row svg { flex: 0 0 auto; }

.jr2-action-group { display: grid; gap: 10px; }

.jr2-phone-band {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .74);
  font-weight: 820;
}
.jr2-phone-band a { color: var(--jr2-green-dark); }
.jr2-phone-band a:hover { text-decoration: underline; }

/* buttons */
.jr2-primary-button, .jr2-outline-button, .jr2-soft-button {
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 800;
  font-size: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  white-space: nowrap;
  text-decoration: none;
}
.jr2-primary-button {
  width: 100%;
  color: #fff;
  border-color: rgba(3, 79, 40, .15);
  background: linear-gradient(180deg, #0a8a49, var(--jr2-green-dark));
  box-shadow: 0 13px 28px rgba(3, 79, 40, .25);
  padding: 0 16px;
  font-size: 15px;
}
.jr2-primary-button:hover { transform: translateY(-1px); }
.jr2-outline-button {
  width: 100%;
  color: var(--jr2-green-dark);
  border-color: rgba(7, 117, 61, .5);
  background: rgba(255, 255, 255, .84);
  padding: 0 18px;
}
.jr2-outline-button:hover {
  background: rgba(232, 246, 238, .65);
  border-color: rgba(7, 117, 61, .75);
}
.jr2-soft-button {
  color: var(--jr2-text);
  border-color: var(--jr2-line);
  background: rgba(255, 255, 255, .72);
  padding: 0 14px;
  font-size: 14px;
}
.jr2-soft-button:hover { background: rgba(255, 255, 255, .92); }

.jr2-save-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 4px;
}
.jr2-save-tools button, .jr2-save-tools a {
  min-height: 40px;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  color: #314259;
  background: rgba(255, 255, 255, .7);
  font-weight: 760;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.jr2-save-tools button:hover, .jr2-save-tools a:hover { background: rgba(255, 255, 255, .92); }

/* Report, dark red warning CTA */
.jr2-report-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #7f1d1d;
  background: linear-gradient(180deg, #b91c1c 0%, #991b1b 55%, #8B0000 100%);
  color: #ffffff;
  font-weight: 850;
  font-size: 13px;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(139, 0, 0, .28);
  animation: jr2-report-live 2.6s ease-in-out infinite;
}
.jr2-report-btn:hover {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 55%, #991b1b 100%);
  color: #ffffff;
  border-color: #991b1b;
  box-shadow: 0 6px 18px rgba(139, 0, 0, .38);
}
.jr2-report-btn:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 2px;
}
.jr2-report-btn--block { width: 100%; margin-top: 12px; }
.jr2-save-tools .jr2-report-btn {
  grid-column: 1 / -1;
  width: 100%;
}
.jr2-report-icon {
  flex-shrink: 0;
  animation: jr2-report-icon-wiggle 2.6s ease-in-out infinite;
}
@keyframes jr2-report-live {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(139, 0, 0, .28); }
  50% { transform: scale(1.015); box-shadow: 0 6px 18px rgba(139, 0, 0, .36); }
}
@keyframes jr2-report-icon-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .jr2-report-btn, .jr2-report-icon { animation: none; }
}
[data-jr-theme="spotify"] .jr2-report-btn {
  background: linear-gradient(180deg, #dc2626 0%, #991b1b 55%, #7f1d1d 100%);
  border-color: #450a0a;
  color: #fff;
}
[data-jr-theme="spotify"] .jr2-report-btn:hover {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 55%, #991b1b 100%);
  color: #fff;
}

/* JR_REPORT_PREMIUM_v2, thicker red safety CTA, no laser/wiggle motion */
.jr2-save-tools .jr2-report-btn,
.jr2-report-btn {
  border: 2px solid #991b1b;
  background:
    linear-gradient(180deg, #fff7f7 0%, #fee2e2 100%) padding-box,
    linear-gradient(135deg, #ef4444, #7f1d1d) border-box;
  color: #991b1b !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .78),
    0 10px 22px -16px rgba(127, 29, 29, .72);
  animation: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.jr2-report-btn:hover {
  border-color: transparent;
  background:
    linear-gradient(180deg, #dc2626 0%, #991b1b 100%) padding-box,
    linear-gradient(135deg, #fecaca, #7f1d1d) border-box;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px -18px rgba(127, 29, 29, .82),
    0 0 0 4px rgba(239, 68, 68, .12);
}
.jr2-report-icon {
  animation: none !important;
}
[data-jr-theme="spotify"] .jr2-save-tools .jr2-report-btn,
[data-jr-theme="spotify"] .jr2-report-btn {
  border-color: transparent;
  background:
    linear-gradient(180deg, #2b1717 0%, #251111 100%) padding-box,
    linear-gradient(135deg, #ef4444, #7f1d1d) border-box;
  color: #fecaca !important;
}
[data-jr-theme="spotify"] .jr2-report-btn:hover {
  background:
    linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%) padding-box,
    linear-gradient(135deg, #fecaca, #7f1d1d) border-box;
  color: #fff !important;
}

/* section cards */
.jr2-section-card { padding: 20px; }
.jr2-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.jr2-section-title h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 900;
  color: var(--jr2-text);
}
.jr2-section-title h3 { margin: 0; font-size: 18px; font-weight: 900; color: var(--jr2-text); }
.jr2-section-title a, .jr2-section-title button {
  color: var(--jr2-green-dark);
  font-weight: 850;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 14px;
}
.jr2-section-title a:hover { text-decoration: underline; }

/* seller card */
.jr2-seller-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.jr2-seller-photo {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, .86);
  box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
}
.jr2-seller-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 900;
  font-size: 19px;
}
.jr2-verified-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: #1584ff;
  font-size: 12px; font-weight: 900;
  line-height: 1;
}
.jr2-seller-meta {
  color: var(--jr2-muted);
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.45;
}
.jr2-trusted {
  width: 78px;
  min-height: 78px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(7, 117, 61, .18);
  border-radius: 8px;
  color: var(--jr2-green-dark);
  background: linear-gradient(180deg, #fff, #eef8f2);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
  padding: 6px;
}
.jr2-seller-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 18px 0 14px;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .62);
}
.jr2-seller-stat {
  min-height: 76px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  border-right: 1px solid var(--jr2-line);
}
.jr2-seller-stat:last-child { border-right: 0; }
.jr2-seller-stat strong { color: var(--jr2-green-dark); font-size: 17px; font-weight: 900; }
.jr2-seller-stat span { color: var(--jr2-muted); font-size: 12px; }

.jr2-seller-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-bottom: 12px;
}
.jr2-seller-badge {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .68);
  color: var(--jr2-green-dark);
  font-weight: 820;
  font-size: 13px;
}

.jr2-seller-listings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.jr2-seller-mini {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .7);
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.jr2-seller-mini:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(15, 23, 42, .08); }
.jr2-seller-mini img { width: 100%; height: 92px; object-fit: cover; }
.jr2-seller-mini > div { padding: 8px 10px; }
.jr2-seller-mini strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--jr2-text); }
.jr2-seller-mini span { color: var(--jr2-green-dark); font-weight: 850; font-size: 13px; }

/* map card */
.jr2-map-card { padding: 16px; }
.jr2-map-shell {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  background: var(--jr2-surface-soft, #eef3eb);
}
.jr2-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* tab card */
.jr2-tab-card { padding: 0; overflow: hidden; }
.jr2-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--jr2-line);
}
.jr2-tabs button {
  min-height: 58px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #405168;
  background: transparent;
  font-weight: 820;
  font-size: 15px;
}
.jr2-tabs button.is-active {
  color: var(--jr2-green-dark);
  border-bottom-color: var(--jr2-green);
}
.jr2-tab-panel { display: none; padding: 20px; }
.jr2-tab-panel.is-active { display: block; }
.jr2-lead-copy {
  margin: 0 0 18px;
  color: #35465b;
  line-height: 1.75;
  font-size: 16px;
}
.jr2-highlight-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.jr2-detail-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .54);
}
.jr2-detail-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(120px, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--jr2-line);
}
.jr2-detail-row:nth-last-child(-n+2) { border-bottom: 0; }
.jr2-detail-row > span:first-child { color: var(--jr2-green-dark); font-weight: 850; font-size: 13px; }
.jr2-detail-row > span:last-child { color: #34465b; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }

.jr2-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.jr2-process-card {
  min-height: 132px;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  padding: 15px;
  background: rgba(255, 255, 255, .62);
}
.jr2-process-card strong { display: block; margin-bottom: 8px; color: var(--jr2-text); font-weight: 900; }
.jr2-process-card span { color: var(--jr2-muted); font-size: 14px; line-height: 1.55; }

/* similar grid (left column bottom) */
.jr2-similar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.jr2-similar-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  position: relative;
  color: inherit;
  text-decoration: none;
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.jr2-similar-card:hover { transform: translateY(-2px); box-shadow: var(--jr2-shadow-soft); }
.jr2-similar-card img { width: 100%; height: 130px; object-fit: cover; }
.jr2-similar-card .jr2-similar-save {
  position: absolute;
  top: 9px; right: 9px;
  width: 32px; height: 32px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: #24364b;
  display: grid; place-items: center;
  font-size: 16px;
  z-index: 2;
}
.jr2-similar-body { padding: 10px; }
.jr2-similar-body strong {
  display: -webkit-box;
  min-height: 38px;
  overflow: hidden;
  color: #26384d;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}
.jr2-similar-body .jr2-similar-price {
  color: var(--jr2-green-dark);
  font-size: 18px;
  font-weight: 900;
  margin-top: 8px;
}
.jr2-similar-body span {
  display: block;
  margin-top: 4px;
  color: #536477;
  font-size: 13px;
}

/* trust footer */
.jr2-trust-footer {
  margin-top: 18px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}
.jr2-trust-footer-item {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-right: 1px solid var(--jr2-line);
}
.jr2-trust-footer-item:last-child { border-right: 0; }
.jr2-trust-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 2px solid var(--jr2-green);
  border-radius: 50%;
  color: var(--jr2-green-dark);
  font-weight: 900;
  font-size: 20px;
  flex: 0 0 auto;
}
.jr2-trust-footer-item strong { display: block; font-size: 15px; color: var(--jr2-text); font-weight: 900; }
.jr2-trust-footer-item span { color: var(--jr2-muted); font-size: 13px; line-height: 1.4; }
.jr2-trust-footer-item--report {
  border-radius: 8px;
  border-right: 0;
  background:
    linear-gradient(180deg, rgba(255, 247, 247, .88), rgba(254, 242, 242, .72)) padding-box,
    linear-gradient(135deg, rgba(239, 68, 68, .48), rgba(127, 29, 29, .28)) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
}
.jr2-trust-footer-item--report .jr2-trust-icon {
  border-color: #b91c1c;
  color: #991b1b;
  background: #fff5f5;
}
.jr2-trust-footer-item--report strong {
  color: #7f1d1d;
}
.jr2-trust-footer-item--report span {
  color: #5f2930;
}
[data-jr-theme="spotify"] .jr2-trust-footer-item--report {
  background:
    linear-gradient(180deg, rgba(43, 23, 23, .88), rgba(25, 16, 16, .78)) padding-box,
    linear-gradient(135deg, rgba(239, 68, 68, .58), rgba(127, 29, 29, .32)) border-box;
}
[data-jr-theme="spotify"] .jr2-trust-footer-item--report .jr2-trust-icon {
  background: rgba(127, 29, 29, .25);
  border-color: #ef4444;
  color: #fecaca;
}
[data-jr-theme="spotify"] .jr2-trust-footer-item--report strong {
  color: #fecaca;
}
[data-jr-theme="spotify"] .jr2-trust-footer-item--report span {
  color: #fca5a5;
}

/* mobile dock */
.jr2-mobile-dock {
  display: none !important;
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + var(--jr-bottom-safe, 0px));
  z-index: 80;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--jr2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.jr2-mobile-dock .jr2-primary-button,
.jr2-mobile-dock .jr2-outline-button,
.jr2-mobile-dock .jr2-soft-button {
  width: 100%;
  min-height: 44px;
  font-size: 14px;
}

/* responsive */
@media (max-width: 1180px) {
  .jr2-listing-grid { grid-template-columns: 1fr; }
  .jr2-rail-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .jr2-primary-card { grid-column: 1 / -1; }
  .jr2-similar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .jr2-mode-row { display: grid; }
  .jr2-top-intel { justify-content: flex-start; }
  .jr2-rail-stack { grid-template-columns: 1fr; }
  .jr2-detail-table { grid-template-columns: 1fr; }
  .jr2-detail-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--jr2-line); }
  .jr2-detail-row:last-child { border-bottom: 0; }
  .jr2-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr2-trust-footer { grid-template-columns: repeat(2, 1fr); }
  .jr2-trust-footer-item { border-right: 0; }
  .jr2-compact-strip { display: none; }
  .jr2-mobile-dock { display: none !important; }
  .jr2-root.jr2-page { padding-bottom: 92px; }
  .jr2-process-grid { grid-template-columns: 1fr; }
  .jr2-media-arrow { opacity: .88; }
  .jr2-thumb-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .jr2-thumb { flex: 0 0 72px; scroll-snap-align: start; }
  .jr2-verified-media { display: none; }
}

@media (max-width: 620px) {
  .jr2-page { padding-left: 12px; padding-right: 12px; width: 100%; overflow-x: hidden; }
  .jr2-glass, .jr2-gallery-card, .jr2-tab-card, .jr2-section-card, .jr2-primary-card, .jr2-map-card { max-width: 100%; overflow: hidden; }
  .jr2-hero-shell { aspect-ratio: 4 / 3; }
  .jr2-thumb-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) 74px; overflow: hidden; }
  .jr2-thumb:nth-of-type(n+4) { display: none; }
  .jr2-more-media { min-height: 62px; }
  .jr2-spec-grid { grid-template-columns: repeat(2, 1fr); }
  .jr2-spec:nth-child(2) { border-right: 0; }
  .jr2-spec:nth-child(-n+2) { border-bottom: 1px solid #e8edf2; }
  .jr2-tabs { grid-template-columns: repeat(2, 1fr); }
  .jr2-tabs button { padding: 0 4px; font-size: 15px; }
  .jr2-lead-copy { font-size: 15px; }
  .jr2-detail-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .jr2-seller-listings, .jr2-trust-footer { grid-template-columns: 1fr; }
  .jr2-similar-grid { grid-template-columns: 1fr; }
  .jr2-seller-top { grid-template-columns: auto minmax(0, 1fr); }
  .jr2-trusted { grid-column: 1 / -1; width: 100%; min-height: 54px; }
  .jr2-save-tools { grid-template-columns: 1fr; }
  .jr2-primary-card h1 { font-size: 28px; }
}

/* Reset inherited spacing, do NOT zero margins on the centered page shell */
.jr2-root:not(.jr2-page) { padding: 0; margin: 0; }
.jr2-root.jr2-page { width: 100%; }
.jr2-root p { margin: 0 0 12px; }
.jr2-root h1, .jr2-root h2, .jr2-root h3 { margin: 0; }

/* Spotify theme, override hardcoded white listing-detail surfaces */
[data-jr-theme="spotify"] .jr-listing-v2-page,
[data-jr-theme="spotify"] .jr2-page {
  --jr2-surface-solid: #181818;
  --jr2-line: rgba(255, 255, 255, 0.1);
  --jr2-text: #ffffff;
  --jr2-muted: #b3b3b3;
  --jr2-green: #1db954;
  --jr2-green-dark: #1ed760;
  background: #121212 !important;
  color: #ffffff;
}
[data-jr-theme="spotify"] .jr2-glass,
[data-jr-theme="spotify"] .jr2-primary-card,
[data-jr-theme="spotify"] .jr2-section-card,
[data-jr-theme="spotify"] .jr2-tab-card,
[data-jr-theme="spotify"] .jr2-gallery-card,
[data-jr-theme="spotify"] .jr2-map-card,
[data-jr-theme="spotify"] .jr2-detail-table,
[data-jr-theme="spotify"] .jr2-process-card,
[data-jr-theme="spotify"] .jr2-similar-card,
[data-jr-theme="spotify"] .jr2-seller-mini,
[data-jr-theme="spotify"] .jr2-mobile-dock {
  background: #181818 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}
[data-jr-theme="spotify"] .jr2-lead-copy,
[data-jr-theme="spotify"] .jr2-detail-row > span:last-child,
[data-jr-theme="spotify"] .jr2-similar-body span,
[data-jr-theme="spotify"] .jr2-tabs button {
  color: #b3b3b3 !important;
}
[data-jr-theme="spotify"] .jr2-map-shell {
  background: #282828 !important;
}

[data-jr-theme="spotify"] .jr2-spec-grid {
  background: #282828 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}
[data-jr-theme="spotify"] .jr2-spec {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-jr-theme="spotify"] .jr2-spec-icon {
  background: #333 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
[data-jr-theme="spotify"] .jr2-tag,
[data-jr-theme="spotify"] .jr2-mini-chip,
[data-jr-theme="spotify"] .jr2-distance,
[data-jr-theme="spotify"] .jr2-phone-band,
[data-jr-theme="spotify"] .jr2-save-tools button,
[data-jr-theme="spotify"] .jr2-save-tools a,
[data-jr-theme="spotify"] .jr2-trust-box,
[data-jr-theme="spotify"] .jr2-seller-stats,
[data-jr-theme="spotify"] .jr2-seller-badge,
[data-jr-theme="spotify"] .jr2-trusted,
[data-jr-theme="spotify"] .jr2-more-media,
[data-jr-theme="spotify"] .jr2-thumb {
  background: #282828 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-jr-theme="spotify"] .jr2-seller-photo {
  border-color: #333 !important;
  background: #282828 !important;
}
[data-jr-theme="spotify"] .jr2-seller-stat {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-jr-theme="spotify"] .jr2-outline-button,
[data-jr-theme="spotify"] .jr2-soft-button {
  background: #282828 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
[data-jr-theme="spotify"] .jr2-verified-media {
  background: rgba(40, 40, 40, 0.92) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-jr-theme="spotify"] .jr2-hero-shell,
[data-jr-theme="spotify"] .jr2-hero-accent {
  background: #282828 !important;
  background-color: #282828 !important;
}

[data-jr-theme="spotify"] .jr2-listing-accent {
  background: #121212 !important;
}

[data-jr-theme="spotify"] .jr2-detail-table,
[data-jr-theme="spotify"] .jr2-process-card {
  background: #181818 !important;
}

/* ── Product accent atmosphere (Spotify album-page pattern) ── */
.jr2-listing-accent {
  position: relative;
  background:
    radial-gradient(ellipse 120% 55% at 50% -8%, var(--jr-product-accent-glow, rgba(7, 117, 61, .22)), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--jr-product-accent-deep, #034f28) 38%, var(--jr2-page, #f5f7f6)) 0%, var(--jr2-page, #f5f7f6) 28%, var(--jr2-page, #f5f7f6) 100%) !important;
  transition: background 0.45s ease;
}

.jr2-hero-accent {
  background: var(--jr2-surface-soft, #dfe6e2);
  transition: background 0.38s ease, box-shadow 0.38s ease;
}

.jr2-hero-accent-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 72% at 50% 38%, var(--jr-product-accent-glow, rgba(7, 117, 61, .35)), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--jr-product-accent, #07753d) 55%, transparent) 0%, transparent 48%, rgba(0, 0, 0, .42) 100%);
  opacity: .92;
}

.jr2-hero-accent .jr2-hero-track,
.jr2-hero-accent .jr2-hero-slide img {
  position: relative;
  z-index: 2;
}

.jr2-hero-accent .jr2-media-pill,
.jr2-hero-accent .jr2-media-arrow,
.jr2-hero-accent .jr2-hero-dots,
.jr2-hero-accent .jr2-verified-media {
  z-index: 5;
}

/* Scroll reveal, listing detail sections */
.jr-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.38s cubic-bezier(.25, .46, .45, .94), transform 0.38s cubic-bezier(.25, .46, .45, .94);
}

.jr-reveal:not(.is-revealed) {
  opacity: 0;
  transform: translateY(18px);
}

@media (prefers-reduced-motion: reduce) {
  .jr-reveal:not(.is-revealed) {
    opacity: 1;
    transform: none;
  }
}