/* Eturnal Rest -- sell.html only. Small layout helpers on top of base.css. */

/* ---- hero ---- */
.sell-hero {
  background:
    linear-gradient(180deg, rgba(247, 244, 238, 0) 0%, var(--cream) 100%),
    var(--cream);
}
.sell-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-7);
  align-items: center;
}
.sell-hero__note {
  margin-top: var(--space-4);
  font-size: 0.95rem;
}

/* reassurance card */
.sell-promise {
  background: var(--white);
}
.sell-promise__title {
  font-size: 1.4rem;
  margin-bottom: var(--space-4);
}
.sell-promise__list,
.sell-plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.sell-promise__list li,
.sell-plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-2);
  line-height: 1.5;
}
.sell-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-800);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 2px;
}

/* ---- section heads ---- */
.sell-section-head {
  max-width: 64ch;
  margin: 0 auto;
}

/* ---- why list (feature cards) ---- */
.sell-feat__icon {
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-700);
  font-size: 2.1rem;
  margin-bottom: var(--space-3);
}

/* ---- steps ---- */
.sell-steps {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.sell-step {
  position: relative;
  padding-top: var(--space-2);
}
.sell-step__num {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green-700);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* ---- plan / price ---- */
.sell-plan {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: var(--space-7);
  align-items: center;
}
.sell-plan__card {
  background: var(--white);
}
.sell-plan__price {
  margin: var(--space-2) 0 var(--space-4);
  line-height: 1;
}
.sell-plan__price .serif {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 600;
  color: var(--green-800);
}
.sell-plan__per {
  display: block;
  margin-top: var(--space-2);
  color: var(--ink-3);
  font-size: 0.95rem;
}
.sell-plan__list {
  text-align: left;
  margin: var(--space-5) 0;
}

/* ---- what a listing needs ---- */
.sell-needs {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-7);
  align-items: center;
}
.sell-needs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.sell-needs__list .chip {
  font-size: 0.92rem;
}

/* ---- native form + checkout ---- */
.sell-form-wrap {
  max-width: 1080px;
  margin: 0 auto;
}
.sell-form {
  margin-top: var(--space-6);
}

/* ---- build layout: form + live preview side by side ---- */
/* The form column and the live preview sit in a two-column grid on desktop.
   The preview stacks above the form on narrower screens (see the responsive
   block below). The form column keeps its comfortable reading width. */
.sell-build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}
.sell-build__main {
  min-width: 0;
}
/* The form no longer needs its own top margin inside the build grid, since
   the grid supplies the gap and the section head sits above it. */
.sell-build__main .sell-form {
  margin-top: 0;
}

/* ---- live listing preview card ---- */
/* Mirrors the real .card.listing buyers see (buy page), so the seller watches
   their own listing take shape from their inputs (endowment / IKEA effect). */
.sell-preview {
  position: sticky;
  top: var(--space-6);
}
.sell-preview__lead {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink);
}
/* This card is a preview, not a link: no hover lift, so it reads as a calm
   echo of the seller's work rather than something to click. */
.sell-preview__card {
  height: auto;
}
.sell-preview__card:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}
/* Unfilled fields read in a soft, calm tone (never blank or broken). */
.sell-preview .is-empty {
  color: var(--ink-4);
  font-weight: 400;
  font-style: italic;
}
.sell-preview .listing__title.is-empty {
  font-style: italic;
  color: var(--ink-3);
}
/* Neutral photo placeholder before any photo is added. */
.sell-preview__photo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: var(--space-4);
  background: var(--blue-50);
  color: var(--blue-700);
}
.sell-preview__photo-empty[hidden] {
  display: none;
}
.sell-preview__photo-empty span[aria-hidden] {
  font-size: 1.9rem;
  line-height: 1;
}
.sell-preview__photo-hint {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink-3);
  max-width: 22ch;
}
.sell-preview__card .listing__photo img[hidden] {
  display: none;
}
/* Description echo: the seller's own note, clamped so a long note never
   stretches the card. */
.sell-preview__desc {
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sell-preview__desc[hidden] {
  display: none;
}
.sell-preview__note {
  margin: var(--space-3) 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-3);
}
/* required-field asterisk */
.sell-form .req {
  color: var(--accent-700);
  font-weight: 700;
}
/* honeypot: visually + acoustically hidden, still focusable to bots only */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* live price context near the submit button */
.sell-checkout-note {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-4);
  padding: 14px 16px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}
.sell-checkout-note__price {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--blue-700);
  font-size: 1.15rem;
}

/* ---- faq teaser ---- */
.sell-faq {
  background: var(--cream);
}

/* ---- cemetery name autocomplete (client review 2026-06-04) ---- */
.cem-typeahead {
  position: relative;
}
.cem-typeahead__hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
}
.cem-typeahead__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line-cool, var(--line));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg, var(--shadow));
  padding: 6px;
}
.cem-typeahead__list[hidden] {
  display: none;
}
.cem-typeahead__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.3;
}
.cem-typeahead__item:hover,
.cem-typeahead__item:focus {
  background: var(--blue-50, var(--green-100));
  outline: none;
}
.cem-typeahead__item b {
  font-weight: 700;
  color: var(--blue-900, var(--green-900));
}
.cem-typeahead__item span {
  color: var(--ink-3);
}
.cem-typeahead__empty {
  padding: 12px;
  font-size: 0.86rem;
  color: var(--ink-3);
  text-align: center;
}

/* ---- submit-time cemetery confirmation (which cemetery is this?) ---- */
.cem-confirm {
  /* The cemetery field sits in a two-column form grid; the confirmation is a
     block of its own and must span the full row, not squeeze in beside City. */
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line-cool, var(--line));
  border-left: 3px solid var(--blue-600, var(--green-700));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg, var(--shadow));
}
.cem-confirm__head {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
}
.cem-confirm__item {
  border: 1px solid var(--line-cool, var(--line));
  margin-bottom: 6px;
}
.cem-confirm__none {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 12px;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: var(--ink-3);
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
}
.cem-confirm__none:hover,
.cem-confirm__none:focus {
  color: var(--ink);
  outline: none;
}

/* ---- savings note (Two months free) beside the plan price ---- */
.sell-plan__savings {
  margin: 0 0 var(--space-3);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green-700);
  letter-spacing: 0.01em;
}

/* ---- multi-step form stepper ---- */

/* Progress header (hidden by default; JS removes aria-hidden and renders into it) */
.sell-stepper-head {
  margin-bottom: var(--space-5);
}
.sell-stepper-head[aria-hidden="true"] {
  display: none;
}

/* Screenreader-only status announcement */
.sell-stepper__status {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Visual progress track */
.sell-stepper__track {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--space-3) 0 var(--space-2);
  border-bottom: 1px solid var(--line-cool);
  margin-bottom: var(--space-5);
}
.sell-stepper__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--ink-4);
  white-space: nowrap;
}
.sell-stepper__item.is-done {
  color: var(--ink-3);
}
.sell-stepper__item.is-current {
  color: var(--ink);
  font-weight: 600;
}
.sell-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-3);
  flex-shrink: 0;
  transition:
    background var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}
.sell-stepper__item.is-done .sell-stepper__num {
  background: var(--green-100);
  color: var(--green-700);
}
.sell-stepper__item.is-current .sell-stepper__num {
  background: var(--blue-600);
  color: var(--white);
}
.sell-stepper__sep {
  flex: 1;
  height: 1px;
  background: var(--line-cool);
  margin: 0 var(--space-2);
  min-width: var(--space-4);
}

/* Progress fill bar above the track. The fill counts the step underway
   (step 1 of 3 = one third), so sellers always see forward motion and
   never an empty zero start (goal gradient, UX pass 2026-07-09). */
/* The bar: a slim, living aurora fill that drifts through calm teal, sea,
   green and soft gold as each field is filled. No number: the numbered
   track below carries orientation, matching how the best multi-step flows
   (Stripe, Vercel, Typeform) avoid a raw percentage. Gradient-flow +
   sheen adapted from open-source CSS patterns; all motion off under
   prefers-reduced-motion. */
.sell-stepper__bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  margin-top: var(--space-2);
  box-shadow: inset 0 1px 2px rgba(29, 55, 68, 0.1);
}
.sell-stepper__bar-fill {
  position: relative;
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  overflow: hidden;
  background-image: linear-gradient(
    90deg,
    #1d3744 0%,
    #2f5d6e 22%,
    #3f8c7a 46%,
    #5aa17a 70%,
    #c9a86a 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow: 0 0 8px 0 rgba(63, 140, 122, 0.35);
  animation: sell-progress-flow 7s ease-in-out infinite alternate;
  transition: width 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sell-stepper__bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  transform: translateX(-100%);
  animation: sell-progress-sheen 4.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes sell-progress-flow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}
@keyframes sell-progress-sheen {
  0% {
    transform: translateX(-100%);
  }
  60% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(200%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sell-stepper__bar-fill {
    animation: none;
    background-position: 40% 50%;
    transition: none;
  }
  .sell-stepper__bar-fill::after {
    animation: none;
    opacity: 0;
  }
}

/* Step section heading */
.sell-step-heading {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  outline: none; /* receives programmatic focus; no visible ring needed here */
}

/* Plot type checkbox group: one listing often covers several space types. */
.plot-types {
  border: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
}
.plot-types legend {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
  color: var(--ink-2);
  padding: 0;
}
.plot-types__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.plot-types__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-cool, var(--line));
  border-radius: var(--radius-sm);
  background: var(--white, #fff);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink-2);
  transition:
    border-color var(--dur-2, 0.2s) var(--ease, ease),
    background var(--dur-2, 0.2s) var(--ease, ease);
}
.plot-types__check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green-700);
  flex-shrink: 0;
}
.plot-types__check:hover {
  border-color: var(--green-700);
}
.plot-types__check:has(input:checked) {
  border-color: var(--green-700);
  background: var(--green-100);
  color: var(--green-900, var(--ink));
}

/* Representative-image opt-in: a calm, single-line choice framed as the
   seller's own preference (never a shortcoming). Mirrors the plot-type check
   look but sits full width with the text aligned to the top for the wrap. */
.rep-image__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-cool, var(--line));
  border-radius: var(--radius-sm);
  background: var(--white, #fff);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.4;
  transition:
    border-color var(--dur-2, 0.2s) var(--ease, ease),
    background var(--dur-2, 0.2s) var(--ease, ease);
}
.rep-image__check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--green-700);
  flex-shrink: 0;
}
.rep-image__check:hover {
  border-color: var(--green-700);
}
.rep-image__check:has(input:checked) {
  border-color: var(--green-700);
  background: var(--green-100);
  color: var(--green-900, var(--ink));
}

/* Step navigation row */
.sell-step-nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  align-items: center;
}
.sell-step-nav--submit {
  flex-wrap: wrap;
}

/* No-JS: all steps show, no stepper header, no hidden sections */
/* JS-on (stepper mode): only the active step is shown */
.sell-form--stepper .sell-step-section[hidden] {
  display: none;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .sell-hero__grid,
  .sell-plan,
  .sell-needs {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  /* Build layout collapses to one column. The preview moves above the form
     so the seller sees their listing take shape as they scroll into the
     steps, and it stops being sticky (no room to pin it on mobile). */
  .sell-build {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .sell-build__main {
    order: 2;
  }
  .sell-preview {
    order: 1;
    position: static;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
  .sell-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .sell-stepper__label {
    display: none; /* on small screens, show numbers only in the track */
  }
  .sell-stepper__item.is-current .sell-stepper__label {
    display: inline; /* always show the current step label */
  }
  .sell-step-nav--submit .btn--primary {
    width: 100%;
    justify-content: center;
  }
}

/* ===================== Per-plot sections (step 2) ===================== */
/* One price / notes / photos group per advertised plot, so every photo and
   price maps to a specific plot. Rendered by sell.js from the step-1 count. */
#per-plot-wrap {
  display: grid;
  gap: var(--space-4);
}
.pp-section {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--line-cool);
  border-radius: var(--radius);
  background: var(--blue-25);
}
.pp-section .field {
  margin: 0;
}
/* price + notes share a row; the photo picker gets the full width */
.pp-section .field:has(.pp-photos) {
  grid-column: 1 / -1;
}
.pp-section__title {
  grid-column: 1 / -1;
  padding: 0 6px;
  margin-left: -6px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--blue-700);
}
@media (max-width: 640px) {
  .pp-section {
    grid-template-columns: 1fr;
  }
}

/* listings split: "How many separate listings?" above the sections. */
.pp-split {
  margin-bottom: var(--space-3);
}
.pp-split .pp-listings-num {
  max-width: 140px;
}

/* spaces-in-this-listing: the grouping control at the top of each section.
   Full row like the type radios, with a narrow number box so it reads as a
   count rather than a price. A read-only count (the auto-balanced last
   listing, or a box with no room to move) dims so it never reads as a broken
   control. */
.pp-spaces-field {
  grid-column: 1 / -1;
}
.pp-spaces {
  max-width: 140px;
}
.pp-spaces[readonly] {
  opacity: 0.65;
  background: var(--blue-25);
}

/* per-listing "I do not have a photo" (reuses the page-level checkbox look) */
.pp-repimg-check {
  margin-top: var(--space-2);
}

/* preview: one card per listing; the strip names which listing a card is */
.sell-preview__card + .sell-preview__card {
  margin-top: var(--space-4);
}
/* When cards are pinned to their listing sections (step 2, several
   listings), the column stops being sticky: sticking would scroll the cards
   away from the sections they are aligned with. */
.sell-preview--aligned {
  position: static;
}

/* Step 1 has no preview (no price or photos yet), so the form takes the
   full build width instead of leaving an empty right column. */
.sell-build--solo {
  grid-template-columns: minmax(0, 1fr);
}
.sell-preview__which {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--blue-700);
}

/* per-plot type radios: the four type options inside each plot section */
.pp-type-field {
  grid-column: 1 / -1;
}
.pp-type-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  font-family: var(--font-sans);
}
.plot-types__grid--pp {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-2);
  margin-top: 0;
}

/* spaces slider: drag for the common range, type for the exact count */
.plots-slider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.plots-slider__range {
  flex: 1;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--blue-100);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.plots-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(29, 55, 68, 0.35);
}
.plots-slider__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(29, 55, 68, 0.35);
}
.plots-slider__num {
  width: 110px;
  flex: none;
  text-align: center;
}

/* Listing-card layout for the live preview. These structural rules live in
   buy.css, which /sell does not load, so the preview needs them scoped here
   or the photo box collapses and the card renders broken. */
.sell-preview .listing {
  display: flex;
  flex-direction: column;
}
.sell-preview .listing__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--blue-50);
  overflow: hidden;
}
.sell-preview .listing__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sell-preview .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;
}
.sell-preview .listing .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sell-preview .listing__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sell-preview .listing__type {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.sell-preview .listing__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.28;
  color: var(--blue-900);
  margin: 2px 0 0;
}
.sell-preview .listing__cem {
  font-size: 0.92rem;
  color: var(--ink-2);
}
.sell-preview .listing__price {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue-700);
  line-height: 1;
  margin-top: 2px;
}
.sell-preview .listing__price--ask {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
}

/* ---- Advertising add-ons at the checkout step ----
   A real offer block, not a footnote: full-width panel, cards with their own
   price, and a running total. Hidden entirely until the prices are set. */
.addon-offer {
  margin: var(--space-5) 0 var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius);
  background: var(--blue-50);
}
.addon-offer__eyebrow {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.addon-offer__title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--blue-900);
}
.addon-offer__sub {
  margin: 0 0 var(--space-4);
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 62ch;
}
.addon-offer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* One offer card. The checkbox is the real control and stays keyboard
   reachable; the card is its label. */
.addon-card {
  position: relative;
  display: block;
  cursor: pointer;
}
.addon-card__check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.addon-card__inner {
  /* A row, not a tile: name and description left, price right, so all four
     offers stack as matching rectangles instead of two squares, an orphan
     square, and a rectangle (Sean, 2026-08-12, from a screenshot). */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: start;
  padding: 16px;
  border: 2px solid var(--line-cool, #dbe4e8);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition:
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.addon-card:hover .addon-card__inner {
  border-color: var(--blue-300, #8fb3c4);
}
.addon-card__check:focus-visible + .addon-card__inner {
  outline: 2px solid var(--blue-900);
  outline-offset: 2px;
}
.addon-card__check:checked + .addon-card__inner {
  border-color: var(--blue-900);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.addon-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.addon-card__name {
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue-900);
}
.addon-card__mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line-cool, #dbe4e8);
  color: transparent;
  font-size: 0.8rem;
  line-height: 18px;
  text-align: center;
}
.addon-card__check:checked + .addon-card__inner .addon-card__mark {
  background: var(--blue-900);
  border-color: var(--blue-900);
  color: var(--white);
}
.addon-card__price {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.addon-card__price b {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blue-900);
}
.addon-card__once {
  font-size: 0.8rem;
  color: var(--ink-3);
}
.addon-card__unit {
  font-size: 0.85rem;
  color: var(--ink-2);
  font-weight: 600;
}
.addon-card__what {
  grid-column: 1;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 58ch;
}
.addon-card__what a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.addon-card__head {
  grid-column: 1;
}
.addon-card__unit {
  grid-column: 1;
}
.addon-card__limit {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-3);
  border-top: 1px dashed var(--line-cool, #dbe4e8);
}

/* The scarcest placement gets the visual weight to match. */
.addon-card--scarce .addon-card__inner {
  border-color: var(--blue-300, #8fb3c4);
}
.addon-card--muted {
  opacity: 0.55;
}

/* All three together. */
.addon-bundle {
  display: block;
  margin-top: var(--space-3);
  cursor: pointer;
}
/* The bundle is the premium object on the page (Sean, 2026-08-12, second
   pass: "make it a really premium box that stands out"). A slowly rotating
   gold ring drawn by a conic-gradient pseudo-element behind the box, a
   centered layout unlike the three rows above it, and the price at display
   size. The ring needs @property to animate; a browser without it shows a
   static gold gradient ring, and reduced motion stills the rotation
   explicitly. "Best value" is arithmetic on this page: $99 against $137 for
   the same three placements bought separately. */
@property --bundle-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.addon-bundle__inner {
  position: relative;
  display: block;
  text-align: center;
  padding: 26px 18px 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fffdf5, #fff8e6);
  box-shadow: 0 4px 18px rgba(201, 162, 39, 0.18);
}
.addon-bundle__inner::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: calc(var(--radius-sm) + 3px);
  background: conic-gradient(
    from var(--bundle-angle),
    #c9a227,
    #f3dd8f,
    #a8861d,
    #f7e7b0,
    #c9a227
  );
  animation: bundle-ring 4s linear infinite;
}
@keyframes bundle-ring {
  to {
    --bundle-angle: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .addon-bundle__inner::before {
    animation: none;
  }
}
.addon-bundle__flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  border-radius: 999px;
  background: #c9a227;
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.addon-bundle .addon-card__check:checked + .addon-bundle__inner {
  background: #fff3cd;
  box-shadow: 0 4px 22px rgba(201, 162, 39, 0.35);
}
.addon-bundle
  .addon-card__check:checked
  + .addon-bundle__inner
  .addon-bundle__title::before {
  content: "✓ ";
  color: #a8861d;
}
.addon-bundle .addon-card__check:focus-visible + .addon-bundle__inner {
  outline: 2px solid var(--blue-900);
  outline-offset: 3px;
}
.addon-bundle__title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--blue-900);
  margin-bottom: 2px;
}
.addon-bundle__sub {
  display: block;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.addon-bundle__pricing {
  text-align: center;
  margin-top: 10px;
}
.addon-bundle__pricing b {
  display: block;
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 800;
  color: var(--blue-900);
}
.addon-bundle__save {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green-700, #2f6b4f);
}

/* The running total. Transparency before Stripe, never a surprise on the
   card page. */
.addon-offer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--blue-100);
  font-size: 0.95rem;
  color: var(--ink-2);
}
.addon-offer__total b {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue-900);
}

@media (max-width: 560px) {
  .addon-offer {
    padding: var(--space-4);
  }
}

/* The bundle's scheduling note: the video spot inside it inherits the
   one-per-week queue, so the wait is stated here too. */
.addon-bundle__note {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-3);
}

/* The order summary now sits outside the add-on panel, so it needs its own
   spacing rather than inheriting the panel's. */
#sell-total-row {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-cool, #dbe4e8);
}

/* Renewal terms, stated before the seller reaches Stripe. */
.sell-renewal-note {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-3);
}