/**
 * Property detail. Reads only from tokens.css.
 *
 * The stage keeps the ratio the video was shot in and every control sits
 * outside the caption band (15–33%) and the watermark (~80%). Nothing is ever
 * laid over those two strips.
 */

.v2-pd { padding-block-end: var(--s-16); }

.v2-pd-grid { display: grid; gap: var(--s-6); padding-block: var(--s-5); align-items: start; }
@media (min-width: 960px) { .v2-pd-grid { grid-template-columns: minmax(0, 1fr) 372px; gap: var(--s-8); } }
.v2-pd-media { min-width: 0; }

.v2-stage {
  position: relative; background: var(--surface-deep);
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 9 / 16; max-height: 78vh;
  margin-inline: auto; width: 100%;
}
@media (min-width: 560px) { .v2-stage { width: auto; max-width: 440px; } }
.v2-stage .v2-video, .v2-stage img { width: 100%; height: 100%; object-fit: contain; background: var(--surface-deep); }
.v2-stage.is-photo { aspect-ratio: 4 / 3; max-width: 100%; }
.v2-stage.is-empty {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  color: var(--ink-faint); font-size: var(--t-sm);
}

.v2-provenance {
  display: flex; gap: var(--s-2); align-items: flex-start; flex-wrap: wrap;
  margin-block-start: var(--s-4); padding: var(--s-3) var(--s-4);
  border-inline-start: 2px solid var(--verified);
  background: var(--surface-warm); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-sm); color: var(--ink-body);
}

.v2-thumbs { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-block-start: var(--s-4); }
.v2-thumb {
  position: relative; width: 78px; aspect-ratio: 1; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--rule); background: var(--surface-deep);
}
.v2-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v2-thumb:hover { border-color: var(--accent); }
.v2-thumb.is-video span {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--brand-mint); background: rgba(14, 31, 30, .42); font-size: 15px;
}

/* ── Panel ── */
.v2-pd-panel {
  background: var(--surface-card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--s-5);
  display: grid; gap: var(--s-4);
}
@media (min-width: 960px) {
  .v2-pd-panel { position: sticky; top: calc(var(--s-16) + var(--s-4)); }
}
.v2-pd-price { font-family: var(--font-display); font-size: var(--t-3xl); color: var(--ink); line-height: 1.05; }
.v2-pd-price span { font-family: var(--font-ui); font-size: var(--t-base); color: var(--ink-dim); font-weight: 500; }
.v2-pd-price em { font-style: normal; font-family: var(--font-ui); font-size: var(--t-lg); color: var(--ink-dim); }
.v2-pd-terms { font-size: var(--t-sm); color: var(--ink-dim); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.v2-pd-title { font-size: var(--t-lg); font-weight: 600; line-height: 1.4; }

.v2-pd-facts { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 0; }
.v2-pd-facts > div { background: var(--surface-card); display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.v2-pd-facts dt { font-size: var(--t-sm); color: var(--ink-dim); margin: 0; }
.v2-pd-facts dd { font-size: var(--t-sm); color: var(--ink); font-weight: 600; margin: 0; text-align: end; }

.v2-pd-actions { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-pd-actions .v2-btn.is-line { grid-column: 1 / -1; }

/**
 * Keep it, or line it up against another.
 *
 * Below the ways of reaching a person, not above them: on this page the point
 * is to talk to somebody about this listing, and shelving it is the second
 * thought. Labelled, unlike the icons on the card — this is where somebody is
 * deciding, and an unlabelled icon is a worse place to learn what a control
 * does.
 */
.v2-pd-collect { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-pd-collect .v2-btn { min-height: 40px; font-size: var(--t-sm); padding-inline: var(--s-3); }
.v2-pd-collect .v2-btn[aria-pressed="true"] { border-color: var(--live); color: var(--ink); }
.v2-pd-collect .v2-btn[aria-pressed="true"] svg { fill: var(--live); color: var(--live); }

/* ── Enquiry ── */
.v2-enquire { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-4); }
.v2-enquire h2 { font-size: var(--t-base); margin-block-end: var(--s-3); }

/* ── Description & similar ── */