/* Eturnal Rest -- buy page (marketplace browse) specifics only.
   Everything else comes from tokens.css + base.css. */

/* ---- Plot Alerts promotion -------------------------------------------------
   The buyer membership, sold where the buyers are. A card rather than a loud
   band: it has to read as the site's own offer, next to the headline, not as an
   advertisement dropped on top of it. The gold top edge is the signal the
   Plot Alerts plan card used before that page folded the offer into its
   hero (2026-08-11). */
.alerts-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--surface-0);
  border: 1px solid var(--line-cool);
  border-top: 3px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.alerts-promo__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-800);
  margin: 0 0 0.35rem;
}
.alerts-promo__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: var(--lh-snug);
  color: var(--blue-900);
  margin: 0;
}
.alerts-promo__points {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.alerts-promo__points li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
/* A quiet tick rather than an icon set: three short lines do not need three
   pieces of art to be read. */
.alerts-promo__points li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.42em;
  width: 0.42rem;
  height: 0.72rem;
  border: solid var(--blue-600);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.alerts-promo__offer {
  flex: 0 0 auto;
  text-align: center;
  padding-left: var(--space-6);
  border-left: 1px solid var(--line-cool);
}
/* The bottom margin used to live on the monthly price that sat under this one
   (removed 2026-08-11). It has to stay somewhere, or the CTA butts into the
   $39. */
.alerts-promo__price {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  line-height: var(--lh-snug);
  color: var(--blue-900);
  margin: 0 0 var(--space-4);
}
.alerts-promo__price span {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 0.35rem;
}
.alerts-promo__cta {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}
.alerts-promo__note {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: var(--space-2) 0 0;
}

/* buyer flow steps */
.buy-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.buy-flow__step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.buy-flow__num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--blue-100);
  color: var(--blue-800);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
}
.buy-flow__step strong {
  display: block;
  color: var(--blue-900);
  margin-bottom: 2px;
}

/* toolbar: filters + sort */
.buy-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  /* The suggestions drop over the grid, so the toolbar has to outrank it.
     .reveal sets will-change, which makes both the toolbar and every card their
     own stacking context, and the list's own z-index cannot escape the toolbar
     to reach the cards. Ranking the toolbar itself is what the dropdown needs;
     without this the cards paint over the suggestions. */
  position: relative;
  z-index: 20;
}
/* Plot-reference search. Sits first in the toolbar because looking up one
   known unit is a different job from browsing, and it is the one the team
   does when a buyer quotes a code. */
.buy-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  /* the plot-suggestion list is absolutely positioned against this form */
  position: relative;
}
.buy-search .input {
  flex: 1 1 16rem;
  min-width: 0;
  /* hold at 16px so iOS Safari does not zoom the page on focus */
  font-size: 1rem;
}
.buy-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.buy-filters .chip {
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.buy-filters .chip.is-on {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
}
.buy-filters .chip.is-on:hover {
  color: var(--white);
}
.buy-filters .chip:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}
.buy-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.buy-sort label {
  font-size: 0.9rem;
}
.buy-sort__select {
  width: auto;
  padding: 9px 14px;
  font-size: 0.92rem;
}

/* count + discreet disclaimer line */
.buy-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.buy-count {
  font-size: 0.95rem;
  margin: 0;
  color: var(--ink-2);
}
.buy-disclaimer {
  font-size: 0.82rem;
  margin: 0;
  color: var(--ink-3);
}

/* listing card: real cemetery photo + body */
.listing {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.listing__photo {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--blue-50);
  overflow: hidden;
}
.listing__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out);
}
.listing:hover .listing__photo img {
  transform: scale(1.05);
}
.listing__photo.is-placeholder {
  display: grid;
  place-items: center;
  background:
    var(--placeholder-art) center / cover no-repeat,
    linear-gradient(135deg, var(--blue-500), var(--blue-700));
}
.listing__photo.is-placeholder span {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.04em;
}
/* honest, discreet label: this is the cemetery, not the plot itself */
.listing__photo-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(29, 55, 68, 0.62);
  backdrop-filter: blur(2px);
  padding: 3px 9px;
  border-radius: 999px;
}

.listing .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}
.listing__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.listing__type {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-700);
}
/* Paid-placement label on the featured cards that lead the default grid.
   Same pill language as the home page's .feat-card__tag. */
.listing__feat-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-900, #16323f);
  color: var(--white, #fff);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.listing__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.28;
  color: var(--blue-900);
  margin: 2px 0 0;
}
.listing__cem {
  font-size: 0.92rem;
  color: var(--ink-2);
}
.listing__price {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue-700);
  line-height: 1;
  margin-top: 2px;
}
.listing__price--ask {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
}
.listing__feenote {
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-top: 2px;
}
.listing__foot {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.listing__foot .btn {
  flex: 1 1 auto;
  justify-content: center;
}

/* status / empty / error blocks */
.buy-msg {
  max-width: 46ch;
  margin: var(--space-6) auto;
  text-align: center;
  color: var(--ink-2);
}
.buy-msg h3 {
  margin-bottom: 0.3em;
}

/* ---- native inquiry modal ---------------------------------------------- */
body.inq-lock {
  overflow: hidden;
}
/* The class sets display, which beats the browser's own [hidden] rule. Without
   the reset below the closed overlay stays a full-viewport, fully transparent
   layer at z-index 100 that swallows every click on /buy, including the
   Contact seller buttons it exists to open. */
.inq-overlay[hidden] {
  display: none;
}
.inq-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(29, 55, 68, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.inq-overlay.is-open {
  opacity: 1;
}
.inq-dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  transform: translateY(14px) scale(0.98);
  transition:
    transform var(--dur-2) var(--ease-out),
    opacity var(--dur-2) var(--ease-out);
  opacity: 0;
}
.inq-overlay.is-open .inq-dialog {
  transform: none;
  opacity: 1;
}
.inq-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.inq-close:hover {
  background: var(--blue-50);
  color: var(--ink);
}
.inq-close:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}
.inq-heading {
  margin: 0 0 0.2em;
}
.inq-listing {
  font-size: 0.95rem;
  margin: 0 0 var(--space-5);
}
.inq-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.inq-actions .btn {
  flex: 1 1 auto;
  justify-content: center;
}
.inq-dialog .form-note {
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .buy-flow {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  /* Single column: the price and the button move under the pitch, and the
     divider becomes the rule between them. */
  .alerts-promo {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
  }
  .alerts-promo__offer {
    padding-left: 0;
    padding-top: var(--space-5);
    border-left: 0;
    border-top: 1px solid var(--line-cool);
  }
}
@media (max-width: 720px) {
  .buy-toolbar {
    flex-direction: column;
  }
  .buy-sort {
    width: 100%;
  }
  .buy-sort__select {
    width: 100%;
    /* hold at 16px so iOS Safari does not zoom the page when the sort menu opens */
    font-size: 16px;
  }
  .inq-dialog {
    padding: var(--space-5);
  }
  .inq-actions {
    flex-direction: column-reverse;
  }
}

/* ---- one listing per row on wide screens (2026-08-25) ----------------------
   Same call as the cemetery pages' list rows, made the same day: a plot is a
   spec-driven purchase and the photo is usually the cemetery, not the plot,
   so the 3-up grid gave the fold to images over facts. Photo sits left, the
   facts and price sit on one scannable edge. Phones keep the stacked card. */
@media (min-width: 641px) {
  #buy-grid.grid.cols-3 {
    grid-template-columns: 1fr;
  }
  #buy-grid .listing {
    flex-direction: row;
    height: auto;
  }
  #buy-grid .listing .listing__photo {
    flex: 0 0 260px;
    aspect-ratio: auto;
    min-height: 180px;
    align-self: stretch;
  }
  #buy-grid .listing .card__body {
    flex: 1;
    min-width: 0;
    height: auto;
  }
}