/* Listing detail inspector — shared zoomed-in property view.
   Rendered from templates/_listing_detail.html and used by both
   /search (dream-home results) and /my-saves (saved listings). Each
   surface has its own opener: static/js/search/render.js on /search,
   and the inline opener in templates/my_saves.html on /my-saves. */
 /* ── Listing detail inspector (tablet + laptop only) ──────────
    Modal that opens when the user clicks a property card's photo on
    >=768px screens. A large gallery (object-contain against a dark
    vignette) below an editorial info header with sticky save / remove
    / view actions. Disabled on phones — the on-card carousel +
    tap-to-select stays the only model there. */
 :root {
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --rose-light: #EAD2C7;
 }
 .listing-detail-backdrop {
  position: fixed; inset: 0;
  background: rgba(11, 24, 21, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  z-index: 9998;
  display: none;
  align-items: center; justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: opacity 0.28s var(--ease),
              background 0.32s var(--ease),
              backdrop-filter 0.32s var(--ease),
              -webkit-backdrop-filter 0.32s var(--ease);
 }
 .listing-detail-backdrop:not(.hidden) { display: flex; }
 .listing-detail-backdrop.is-open {
  opacity: 1;
  background: rgba(8, 22, 18, 0.66);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
 }
 .listing-detail-card {
  background: var(--surface);
  border-radius: var(--radius-2xl);
  width: 100%;
  max-width: 1180px;
  height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  border: 1px solid rgba(11, 77, 62, 0.10);
  box-shadow:
   inset 0 1px 0 rgba(255, 255, 255, 0.45),
   0 1px 0 rgba(7, 26, 22, 0.04),
   0 40px 90px -28px rgba(7, 26, 22, 0.55),
   0 12px 30px rgba(7, 26, 22, 0.20);
  overflow: hidden;
  display: flex;
  position: relative;
  opacity: 0;
  transform: translateY(20px) scale(0.962);
  transition: opacity 0.36s var(--ease),
              transform 0.42s var(--ease-spring);
 }
 .listing-detail-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
   var(--accent) 0%,
   var(--accent-2) 38%,
   var(--ochre) 78%,
   var(--rose) 100%);
  z-index: 6;
  pointer-events: none;
  opacity: 0.85;
 }
 .listing-detail-backdrop.is-open .listing-detail-card {
  opacity: 1;
  transform: translateY(0) scale(1);
 }
 .listing-detail-close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(250, 247, 240, 0.94);
  color: var(--text);
  border: 1px solid rgba(11, 77, 62, 0.12);
  cursor: pointer;
  z-index: 10;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(7, 26, 22, 0.18),
              0 1px 0 rgba(255, 255, 255, 0.6) inset;
  transition: transform 0.25s var(--ease-spring),
              background 0.15s var(--ease),
              border-color 0.15s var(--ease);
 }
 .listing-detail-close:hover {
  background: var(--card-hover);
  border-color: rgba(11, 77, 62, 0.28);
  transform: rotate(90deg) scale(1.04);
 }
 .listing-detail-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
 }
 @keyframes listingDetailHeartPulse {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.22); }
  72%  { transform: scale(0.94); }
  100% { transform: scale(1); }
 }
 /* DS5 two-column modal: full-height gallery LEFT, scrolling content
    RIGHT. (Was a vertical flex stack — that squashed the photo once the
    finance module joined the footer.) The gallery takes the larger share
    (~62%) so the whole photo reads at a glance; the content column keeps a
    comfortable floor for the finance module + actions. */
 .listing-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr);
  width: 100%;
  min-height: 0;
  max-height: inherit;
  height: 100%;
 }
 @media (min-width: 768px) and (max-width: 1023px) {
  .listing-detail-card {
   height: calc(100vh - 48px);
   max-height: calc(100vh - 48px);
  }
  .listing-detail-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
 }
 .listing-detail-content {
  min-width: 0; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-3) transparent;
 }
 .listing-detail-content::-webkit-scrollbar { width: 8px; }
 .listing-detail-content::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 999px; }
 .listing-detail-header {
  flex-shrink: 0;
  padding: 30px 34px 20px;
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  row-gap: 12px;
  align-items: start;
  position: relative;
 }
 .listing-detail-info-main { min-width: 0; }
 /* Grade-ring column (ring donut injected by JS). Sits left of the
    floating × close. */
 .listing-detail-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding-right: 48px;
 }
 @media (max-width: 1023px) {
  .listing-detail-header { padding: 26px 26px 18px; }
 }
 /* "Why N — against your brief" card (DS5). Now a bordered card inside
    the content column, not a full-bleed strip. */
 .listing-detail-tags-row {
  flex-shrink: 0;
  margin: 4px 34px 0;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  display: block;
 }
 .listing-detail-tags-row[hidden] { display: none !important; }
 .listing-detail-tags-row h4 {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
 }
 .listing-detail-tags-row h4 svg {
  width: 13px; height: 13px;
  color: var(--accent);
  flex-shrink: 0;
 }
 @media (max-width: 1023px) {
  .listing-detail-tags-row { margin: 4px 26px 0; }
 }
 /* Left column — full-height gallery cell. */
 .listing-detail-gallery {
  background: #0E1815;
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  position: relative;
  height: 100%;
 }
 .listing-detail-hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background:
   radial-gradient(ellipse at center, #142421 0%, #0B1411 100%);
 }
 /* The rectangular grade badge on the photo is superseded by the grade
    ring in the content header (DS5). */
 #listing-detail-grade { display: none !important; }
 .listing-detail-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* `contain` so the whole photo is visible — the dark gallery bg acts as
     a lightbox matte, framing portrait + landscape shots without cropping.
     (Phones fall back to `cover` below to fill the shorter photo band.) */
  object-fit: contain;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.32s var(--ease), transform 0.5s var(--ease);
 }
 .listing-detail-hero.is-fading .listing-detail-hero-img {
  opacity: 0;
  transform: scale(1.015);
 }
 .listing-detail-hero-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: rgba(250, 247, 240, 0.50);
 }
 .listing-detail-hero-empty svg { width: 64px; height: 64px; opacity: 0.55; }
 .listing-detail-hero-empty span {
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 500;
 }
 /* The empty state is display:flex, which overrides the UA [hidden]
    default — without this guard the "No photos available" overlay stays
    painted on top of every loaded photo (JS toggles the hidden attr). */
 .listing-detail-hero-empty[hidden] { display: none !important; }
 .listing-detail-hero::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
   linear-gradient(to bottom, rgba(7,16,14,0.28) 0%, transparent 18%, transparent 82%, rgba(7,16,14,0.32) 100%);
  z-index: 2;
 }
 .listing-detail-grade {
  position: absolute; top: 20px; left: 20px;
  min-width: 50px; height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,0.18),
   0 1px 0 rgba(0,0,0,0.30),
   0 8px 22px rgba(7, 26, 22, 0.50),
   0 0 0 4px rgba(11, 77, 62, 0.10);
  z-index: 3;
 }
 .listing-detail-grade.grade-high {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
 }
 .listing-detail-grade.grade-mid  {
  background: linear-gradient(180deg, #B98A41 0%, var(--ochre) 100%);
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,0.18),
   0 1px 0 rgba(0,0,0,0.30),
   0 8px 22px rgba(7, 26, 22, 0.50),
   0 0 0 4px rgba(167, 117, 48, 0.12);
 }
 .listing-detail-grade.grade-low  { background: #8E978F; }
 .listing-detail-grade.grade-none { background: rgba(250,247,240,0.18); color: rgba(250,247,240,0.7); }
 /* Same display-overrides-[hidden] guard as the empty state: the grade
    badge is inline-flex, so the hidden attr alone won't hide it. */
 .listing-detail-grade[hidden] { display: none !important; }
 .listing-detail-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(15, 26, 23, 0.42);
  color: #FAF7F0;
  border: 1px solid rgba(250, 247, 240, 0.18);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  z-index: 4;
  opacity: 0;
  box-shadow:
   0 12px 28px rgba(0, 0, 0, 0.32),
   inset 0 1px 0 rgba(255,255,255,0.10);
  transition: background 0.18s var(--ease),
              border-color 0.18s var(--ease),
              transform 0.22s var(--ease-spring),
              opacity 0.22s var(--ease);
 }
 .listing-detail-hero:hover .listing-detail-nav,
 .listing-detail-nav:focus-visible { opacity: 1; }
 .listing-detail-nav:hover {
  background: rgba(15, 26, 23, 0.78);
  border-color: rgba(250, 247, 240, 0.32);
  transform: translateY(-50%) scale(1.06);
 }
 .listing-detail-nav.prev { left: 22px; }
 .listing-detail-nav.next { right: 22px; }
 .listing-detail-counter {
  position: absolute; bottom: 18px; right: 18px;
  background: rgba(15, 26, 23, 0.55);
  color: #FAF7F0;
  font-size: 12px; font-weight: 500;
  padding: 6px 12px 6px 11px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(250, 247, 240, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 7px;
 }
 .listing-detail-counter svg {
  width: 13px; height: 13px;
  opacity: 0.85;
 }
 .listing-detail-thumbs {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #0A1311;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 247, 240, 0.18) transparent;
 }
 .listing-detail-thumbs::-webkit-scrollbar { height: 6px; }
 .listing-detail-thumbs::-webkit-scrollbar-thumb {
  background: rgba(250, 247, 240, 0.18);
  border-radius: 999px;
 }
 .listing-detail-thumb {
  flex: 0 0 auto;
  width: 92px; height: 66px;
  border-radius: var(--radius-md);
  background: #1B2926;
  cursor: pointer;
  border: 1px solid rgba(250, 247, 240, 0.10);
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: border-color 0.18s var(--ease),
              transform 0.22s var(--ease-spring),
              box-shadow 0.22s var(--ease);
 }
 .listing-detail-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
 }
 .listing-detail-thumb:hover {
  transform: translateY(-3px);
  border-color: rgba(250, 247, 240, 0.28);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45);
 }
 .listing-detail-thumb:hover img { transform: scale(1.06); }
 .listing-detail-thumb.is-active {
  border-color: rgba(250, 247, 240, 0.85);
  box-shadow:
   0 8px 18px rgba(0, 0, 0, 0.5),
   0 0 0 1px rgba(11, 77, 62, 0.18);
 }
 .listing-detail-thumb.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(11, 77, 62, 0.6);
 }
 .listing-detail-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
 }
 .listing-detail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
 }
 .listing-detail-eyebrow .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
 }
 .listing-detail-eyebrow .grade-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.10em;
  color: inherit;
  background: transparent;
 }
 .listing-detail-eyebrow .grade-chip.is-mid { color: var(--ochre); }
 .listing-detail-eyebrow .grade-chip.is-low { color: #6E7873; }
 .listing-detail-eyebrow .grade-chip .pct { font-weight: 700; }
 .listing-detail-price {
  font-family: var(--font-display);
  font-size: clamp(32px, 2.8vw, 44px);
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--text);
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1.04;
 }
 .listing-detail-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0 0 12px;
 }
 .listing-detail-address svg {
  width: 14px; height: 14px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
  opacity: 0.85;
 }
 .listing-detail-spec {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
 }
 .listing-detail-spec span { display: inline-flex; align-items: center; }
 .listing-detail-spec .spec-val {
  font-weight: 600; color: var(--text);
  margin-right: 4px;
 }
 .listing-detail-spec .spec-lbl { color: var(--muted); }
 .listing-detail-spec .spec-sep {
  margin: 0 12px;
  color: var(--hairline-3);
 }
 .listing-detail-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-width: 0;
 }
 .listing-detail-tag {
  font-family: var(--font-body);
  font-size: 12px;
  background:
   linear-gradient(180deg, rgba(11,77,62,0.04) 0%, transparent 100%),
   var(--accent-light);
  color: var(--accent);
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,0.55),
   0 1px 0 rgba(11,77,62,0.04);
 }
 .listing-detail-action {
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s var(--ease),
              color 0.18s var(--ease),
              border-color 0.18s var(--ease),
              transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
 }
 .listing-detail-action svg {
  width: 16px; height: 16px; flex-shrink: 0;
  transition: transform 0.25s var(--ease-spring), fill 0.18s var(--ease);
 }
 /* Save is the primary CTA in the inspector — the accent-filled
    treatment the Rightmove button used to carry. */
 .listing-detail-action.save {
  background: var(--accent);
  color: #FAF7F0;
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 16px -6px rgba(11,77,62,0.55);
 }
 .listing-detail-action.save:hover {
  background: var(--accent-ink);
  color: #FAF7F0;
  border-color: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 10px 22px -8px rgba(11,77,62,0.6);
 }
 /* Saved confirmation — soft accent fill + filled heart, reads as
    "done" without shouting. */
 .listing-detail-action.save.is-saved {
  background: var(--accent-light);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: none;
 }
 .listing-detail-action.save.is-saved svg { fill: currentColor; }
 .listing-detail-action.save.is-saved:hover {
  background: var(--accent-light);
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  transform: translateY(-1px);
 }
 .listing-detail-action.save.is-pulsing svg {
  animation: listingDetailHeartPulse 0.46s var(--ease-spring);
 }
 .listing-detail-action.delete {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  padding: 11px 12px;
 }
 .listing-detail-action.delete:hover {
  background: var(--rose-light);
  color: var(--rose);
 }
 /* ── Inspector footer: mortgage nudge + subtle Rightmove link ──
    A calm strip at the very bottom. The mortgage CTA is clearly
    visible but compact (single row), and the Rightmove link is
    demoted to a quiet text link with no button chrome. */
 .listing-detail-footer {
  padding: 16px 34px 26px;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 14px;
  margin-top: auto;
 }
 @media (max-width: 1023px) { .listing-detail-footer { padding: 16px 26px 26px; } }
 .ld-finance, .ld-crossflow { margin: 0; }
 /* Bottom actions row (DS5): Save filled (primary) + quiet Remove. The
    Rightmove link is demoted to a subtle text link below this row. */
 .listing-detail-action-row {
  display: flex; align-items: stretch; gap: 10px;
 }
 .listing-detail-action-row .save { flex: 1 1 auto; }
 .listing-detail-action-row .delete { flex: 0 0 auto; padding: 11px 14px; }
 .listing-detail-mortgage {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--accent-light), var(--surface));
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 11px 15px;
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
 }
 /* Exit-intent nudge — a two-beat glow when the user clicks through to
    Rightmove, drawing the eye to the finance step. */
 .listing-detail-mortgage.ldm-pulse { animation: ldmPulse 1.5s var(--ease) 1; }
 @keyframes ldmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11,77,62,0); border-color: var(--hairline-2); }
  20%, 60% { box-shadow: 0 0 0 4px rgba(11,77,62,0.18); border-color: var(--accent); }
 }
 @media (prefers-reduced-motion: reduce) {
  .listing-detail-mortgage.ldm-pulse { animation: none; border-color: var(--accent); }
 }
 .ldm-mark {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(11,77,62,0.10); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
 }
 .ldm-mark svg { width: 20px; height: 20px; }
 .ldm-copy { flex: 1 1 auto; min-width: 0; }
 .ldm-title {
  font-family: var(--font-display);
  font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--text); margin: 0 0 3px;
 }
 .ldm-usps {
  display: flex; flex-wrap: wrap; align-items: center;
  font-family: var(--font-body); font-size: 12px; color: var(--text-secondary);
  margin: 0;
 }
 .ldm-usps span { display: inline-flex; align-items: center; }
 .ldm-usps span:not(:first-child)::before {
  content: '·'; margin: 0 7px; color: var(--hairline-3);
 }
 .ldm-btn {
  flex-shrink: 0;
  background: var(--accent); color: #FAF7F0; border: 1px solid var(--accent);
  border-radius: var(--radius-md); padding: 10px 18px; min-height: 42px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
 }
 .ldm-btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); transform: translateY(-1px); }
 .ldm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .ldm-btn .arrow { transition: transform 0.2s var(--ease); }
 .ldm-btn:hover .arrow { transform: translateX(3px); }
 .listing-detail-rightmove {
  align-self: center;
  font-family: var(--font-body); font-size: 12px; color: var(--muted);
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px; border-radius: var(--radius-sm);
  transition: color 0.15s var(--ease);
 }
 .listing-detail-rightmove:hover { color: var(--text-secondary); text-decoration: underline; }
 .listing-detail-rightmove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .listing-detail-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
 }
 /* The whole card opens the inspector — signal it's clickable, with a
    zoom-in hint over the photo. */
 #dream-grid .listing-card { cursor: pointer; }
 #dream-grid .listing-card .carousel { cursor: zoom-in; }
 #dream-grid.is-selecting .listing-card,
 #dream-grid.is-selecting .listing-card .carousel { cursor: pointer; }

 /* Nav arrows have no hover trigger on touch — keep them visible. */
 @media (hover: none) {
  .listing-detail-nav { opacity: 1; }
 }

 /* ── Inspector on phones (<768px): full-screen sheet ──
    The inspector now works at every width. On phones it becomes a
    full-bleed sheet that slides up, with a stacked header, compact
    thumbnails and an always-visible gallery + footer. */
 @media (max-width: 767px) {
  .listing-detail-backdrop { padding: 0; }
  .listing-detail-card {
   height: 100dvh; max-height: 100dvh; max-width: 100%;
   border-radius: 0; border: none;
   transform: translateY(24px) scale(1);
  }
  .listing-detail-card::before { border-radius: 0; }
  .listing-detail-backdrop.is-open .listing-detail-card { transform: translateY(0) scale(1); }
  /* S5 mobile sheet: photo on top (~300px), content scrolls below. */
  .listing-detail-grid {
   grid-template-columns: 1fr;
   grid-template-rows: clamp(260px, 40dvh, 340px) minmax(0, 1fr);
  }
  .listing-detail-gallery { min-height: 0; }
  /* Fill the shorter photo band on phones rather than letterbox it. */
  .listing-detail-hero-img { object-fit: cover; }
  .listing-detail-thumbs { display: none; }
  .listing-detail-header {
   grid-template-columns: minmax(0, 1fr) auto;
   padding: 18px 18px 14px; column-gap: 14px; row-gap: 10px;
  }
  .listing-detail-actions { padding-right: 44px; }
  .listing-detail-price { font-size: 28px; }
  .listing-detail-tags-row { margin: 4px 18px 0; padding: 14px 16px; }
  .listing-detail-nav {
   width: 42px; height: 42px; font-size: 22px; opacity: 1;
  }
  .listing-detail-nav.prev { left: 12px; }
  .listing-detail-nav.next { right: 12px; }
  .listing-detail-footer {
   padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
  }
 }

 /* ── S5/S6/DS5 — detail additions: grade ring, why-card, finance ── */
 .ld-grade-ring { position: relative; width: 62px; height: 62px; flex-shrink: 0; text-align: center; }
 .ld-grade-ring svg { transform: rotate(-90deg); display: block; }
 .ld-grade-ring .ring-track { stroke: var(--surface-2); }
 .ld-grade-ring .ring-arc { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray 0.6s var(--ease); }
 .ld-grade-ring .ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 19px; color: var(--text);
  font-variant-numeric: tabular-nums;
 }
 .ld-grade-tier {
  margin-top: 5px; font-family: var(--font-body); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center;
 }
 .ld-why {
  background: var(--bg); border: 1px solid var(--hairline);
  border-radius: var(--radius-xl); padding: 16px 18px; margin: 14px 0 0;
 }
 .ld-why .h {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
 }
 /* The tags box hosts the why-bullets now — stack them. */
 #listing-detail-tags { display: flex; flex-direction: column; gap: 0; width: 100%; }
 .listing-detail-tags-row { flex-direction: column; align-items: flex-start; }
 .ld-why-item {
  display: flex; gap: 9px; align-items: flex-start; width: 100%;
  padding: 5px 0; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--text-secondary);
 }
 /* Grade ring in the header actions column (DS5). */
 .listing-detail-actions .ld-grade-ring-wrap { display: flex; flex-direction: column; align-items: center; margin-right: 6px; }
 .ld-why-item::before { content: "✓"; color: var(--accent); font-weight: 700; flex-shrink: 0; }
 .ld-why-item.flag::before { content: "!"; color: var(--ochre); }
 .ld-finance { margin: 0; }
 .ld-finance[hidden] { display: none !important; }
 .ld-finance .mtx-module--repayment { border-radius: 18px; padding: 18px 20px; margin: 0; }
 .ld-crossflow {
  display: flex; align-items: center; gap: 11px;
  background: var(--ochre-light); border: 1px solid rgba(167,117,48,0.25);
  border-radius: 14px; padding: 12px 15px; margin: 0;
  font-family: var(--font-body); font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
 }
 .ld-crossflow[hidden] { display: none !important; }
 .ld-crossflow svg { flex-shrink: 0; color: var(--ochre); }
 .ld-crossflow b { color: var(--text); }
 .ld-crossflow a { flex-shrink: 0; margin-left: auto; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }