/* Pakstoor :: sell.css :: v1.17-000001 :: 2026-05-29 */
/**
 * Copyright © 2026 Pakstoor (Pty) Ltd. All rights reserved.
 * Proprietary and confidential.
 * Unauthorized copying, distribution, modification, or use of this file is prohibited.
 */

/* ============================================================
   KIOSK MODE — no page scroll on the sell flow
   ============================================================
   The wizard fits one viewport: sysbar + header at the top,
   action bar pinned at the bottom, step content fills the gap.
   The legal page-footer is hidden because it doesn't belong in
   a wizard step. If a single step's content is genuinely taller
   than the available area (rare — review step on small laptops),
   the .sell-main region gets its OWN scrollbar so the action bar
   stays visible. */
body:has(.sell-main) {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  /* iOS notched devices need to respect the home-indicator inset,
     otherwise the action bar at the bottom slides under it. Padding-
     bottom == max(0, env(safe-area-inset-bottom)) keeps the same
     layout on devices without a notch (env() returns 0). */
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
}
body:has(.sell-main) .sysbar,
body:has(.sell-main) .nav {
  flex: 0 0 auto;
}
body:has(.sell-main) .sell-main {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
body:has(.sell-main) .footer { display: none; }

/* Mobile: undo the desktop kiosk lock. The sticky-bottom action bar
   doesn't work on phones (covers content; iOS dynamic toolbar messes
   with 100dvh), so on ≤640px we let the page scroll naturally and
   the action bar lands at the natural end of each step. */
@media (max-width: 640px) {
  body:has(.sell-main) {
    height: auto;
    overflow: visible;
  }
  body:has(.sell-main) .sell-main {
    overflow-y: visible;
  }
}

/* Inline field validation message — sits directly under the input
   so the seller sees exactly which rule tripped. Red, subtle, keeps
   the layout stable when hidden. */
.sell-field-error {
  margin-top: 6px;
  font-family: var(--font-sans, sans-serif);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--danger, #D85145);
}
.sell-field-error[hidden] { display: none; }


/* Collapsed "Optional details" block — brand/model hidden by default */
.sell-optional-details {
  margin-top: 18px;
  padding: 10px 14px 14px;
  border: 1px dashed var(--bg-3, #2B313A);
  border-radius: 10px;
  background: transparent;
}
.sell-optional-summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono, monospace);
  font-size:var(--fs-12);
  letter-spacing:var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted, #A6AFB9);
  padding: 4px 0;
  user-select: none;
}
.sell-optional-summary::-webkit-details-marker { display: none; }
.sell-optional-summary::before {
  content: '+';
  display: inline-block;
  width: 14px;
  color: var(--gold, #D9A625);
  font-weight: bold;
}
.sell-optional-details[open] > .sell-optional-summary::before { content: '-'; }
.sell-optional-details[open] > .sell-optional-summary {
  margin-bottom: 10px;
  color: var(--ink, #ECEFF2);
}


/* Pickup address step — field row pairs postal code + city on one line */
.sell-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 520px) {
  .sell-field-row { grid-template-columns: 1fr; }
}

/* Public-display preview card — "buyers will see: Durbanville · Cape Town" */
.sell-location-preview {
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid var(--bg-3, #2B313A);
  border-radius: 10px;
  background: var(--bg-1, #1B2027);
}
.sell-location-preview-label {
  font-family: var(--font-mono, monospace);
  font-size:var(--fs-11);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim, #737C87);
}
.sell-location-preview-value {
  margin-top: 6px;
  font-family: var(--font-display, sans-serif);
  font-size:var(--fs-16);
  letter-spacing: 0.02em;
  color: var(--ink, #ECEFF2);
}


/* Padding clears the fixed-bottom action bar (~52px tall after the
   2026-05-09 height crunch) plus iOS home-indicator inset. 60 = 52
   (bar) + 8 (breathing buffer). Tightened progressively as the bar
   itself shrunk; keep these two numbers in sync. */
/* .sell-main bottom padding was here for non-locked layouts. The
   viewport-locked layout (body[data-pks-page="sell"]) zeroes this
   and moves clearance to .sell-viewport. Kept the fallback for any
   legacy path that might still render .sell-main standalone. */
.sell-main { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

.sell {
  /* 2026-05-29: viewport-lock layout reverted. The page now scrolls
     naturally — the body is no longer height-locked + display:flex.
     The fixed action bar at the bottom anchors to the viewport via
     plain `position: fixed; bottom: 0` with no ancestor weirdness
     interfering. Bottom padding clears the bar so the last card
     never hides behind it. */
  padding-block: var(--s-2) calc(60px + env(safe-area-inset-bottom));
}
@media (max-width: 480px) {
  .sell { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
.sell-inner {
  /* Bumped from 820px (felt phone-sized on a desktop monitor) to
     1080px for non-review steps. Review step still pops to wider
     via the :has() rule below. */
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  transition: max-width 220ms ease;
}
/* Review-step popout used to widen .sell-inner from 1080px to 1140px,
   but the rv-body is only 260px (preview) + 14 (gap) + ~400 (details)
   = ~674px wide — nowhere near needing 1080px, let alone 1140px. The
   width jump on entering Review felt unjustified vs the previous step.
   Reverted 2026-05-09 — Review now uses the standard 1080px wizard
   cap. The .sell-step--popout class is still applied in markup as a
   semantic marker for the head-hide rule below; only the width
   override here was removed. */
/* ============================================================
   REVIEW & PUBLISH — fresh popout (replaces the old .sell-review*).
   ============================================================ */
/* Width is driven by the parent .sell-inner's expanded cap (above).
   The popout itself just fills the parent. */
.sell-step--popout .sell-step-head { display: none; }

/* Delivery-mode + fulfilment-mode pickers were removed from the sell
   flow on 2026-04-27 — the seller has no buyer at listing time, so
   they couldn't make a useful choice. The handoff matrix is now
   picked PER DEAL: buyer picks home OR pickup-point in the buy modal;
   seller picks courier-collects OR drop-off in the arrange-delivery
   modal. The radios are hidden but kept in the DOM so sell.js's
   defaults ('courier', 'door-to-door') stay applied via `checked`. */
.sell-delivery-mode,
.sell-fulfilment { display: none; }

/* ============================================================
   PROGRESS
   ============================================================ */
.sell-progress { margin-bottom: var(--s-2); }
.sell-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.sell-progress-step  { color: var(--ink-dim); font-weight: var(--fw-600); }
.sell-progress-label { color: var(--gold);    font-weight: var(--fw-600); }
.sell-progress-track {
  height: 3px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
}
.sell-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  border-radius: 3px;
  transition: width var(--dur-3) var(--ease-standard);
}

/* ============================================================
   "Start a new listing" affordance
   ============================================================ */
.sell-newlisting-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--s-3);
}
.sell-newlisting-row[hidden] { display: none !important; }
#sellNewListingBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#sellNewListingBtn svg { width: 14px; height: 14px; }

/* ============================================================
   SLIDE VIEWPORT
   ============================================================ */
.sell-viewport {
  position: relative;
  overflow: hidden;
  /* pad so focus rings + hover lift don't clip */
  padding: 4px 4px 20px 4px;
  margin: -4px -4px 0 -4px;
}
.sell-stage {
  position: relative;
  /* min-height removed 2026-05-09: previously forced 420px even for
     short steps, leaving dead space; for long steps (Location) it
     did nothing because content was already taller. Letting content
     drive height makes every step land at its natural size. */
}

.sell-step {
  display: none;
  flex-direction: column;
  /* Step-internal vertical rhythm. var(--s-3) (12px) instead of
     var(--s-4) (16px) — saves ~24px on a 6-gap step like Location
     and still reads as comfortable spacing. */
  gap: var(--s-3);
}
.sell-step.is-active {
  display: flex;
  animation: sell-slide-in var(--dur-3) var(--ease-decel);
}
.sell-step.is-leaving {
  display: flex;
  animation: sell-slide-out var(--dur-2) var(--ease-accel) forwards;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.sell-step.is-leaving-back {
  display: flex;
  animation: sell-slide-out-back var(--dur-2) var(--ease-accel) forwards;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}
.sell-step.is-active.is-from-back {
  animation: sell-slide-in-back var(--dur-3) var(--ease-decel);
}

@keyframes sell-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sell-slide-in-back {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sell-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-40px); }
}
@keyframes sell-slide-out-back {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

/* ============================================================
   STEP HEAD
   ============================================================ */
.sell-step-head { display: flex; flex-direction: column; gap: var(--s-1); }
.sell-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}
.sell-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-24), 2.6vw, var(--fs-32));
  font-weight: var(--fw-700);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}
.sell-lede {
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 620px;
  margin: 0;
}

/* ============================================================
   FIELDS
   ============================================================ */
.sell-field { display: flex; flex-direction: column; gap: 8px; }
.sell-field-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.sell-field-split > div { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 560px) { .sell-field-split { grid-template-columns: 1fr; } }

.sell-label {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}
.sell-label-opt {
  color: var(--ink-faint);
  font-weight: var(--fw-500);
  text-transform: none;
  letter-spacing: var(--tracking-wide);
  margin-left: 4px;
}

.sell-input,
.sell-textarea,
.sell-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-1) var(--ease-standard), background var(--dur-1) var(--ease-standard);
}
.sell-input::placeholder, .sell-textarea::placeholder { color: var(--ink-dim); }
.sell-input:focus, .sell-textarea:focus, .sell-select:focus {
  border-color: var(--gold);
  background: var(--bg-2);
  box-shadow: 0 0 0 3px rgba(217, 166, 37, 0.10);
}
.sell-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.sell-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6AFB9' stroke-width='2.5' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 40px;
  cursor: pointer;
}
.sell-counter {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-dim);
  text-align: right;
}
.sell-input-lg {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-700);
  padding: 12px 16px 12px 44px;
}

.sell-price-input { position: relative; }
.sell-price-prefix {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-700);
  color: var(--ink-muted);
  pointer-events: none;
}
.sell-price-preview {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-dim);
  min-height: 16px;
}

/* ============================================================
   RULES LIST
   ============================================================ */
.sell-rules {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0;
  margin: 0;
  list-style: none;
}
.sell-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  /* Opaque base + gold tint overlay so the page-level hex grid
     can't bleed through (same trick as .sell-info-card above). */
  background:
    linear-gradient(rgba(217, 166, 37, 0.06), rgba(217, 166, 37, 0.06)),
    var(--bg);
  border: 1px solid rgba(217, 166, 37, 0.28);
  border-radius: var(--r-2, 6px);
}
/* "Allowed" / positive rule — green tint instead of gold so the
   visual signal matches the green check icon inside. The 3 prohibition
   cards keep the gold tint with red icons. */
.sell-rule.is-ok {
  background:
    linear-gradient(rgba(94, 168, 114, 0.08), rgba(94, 168, 114, 0.08)),
    var(--bg);
  border-color: rgba(94, 168, 114, 0.32);
}
.sell-rule-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.sell-rule-icon.sell-rule-no { color: var(--danger); }
.sell-rule-icon.sell-rule-ok { color: var(--success); }
.sell-rule-label { font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--ink); margin-bottom: 2px; }
.sell-rule-desc  { font-size: var(--fs-11); color: var(--ink-muted); line-height: 1.55; }

.sell-ack {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: 8px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-standard);
}
.sell-ack:hover { border-color: var(--line-bright); }
.sell-ack input {
  width: 20px; height: 20px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
}
.sell-ack span { font-size: var(--fs-14); color: var(--ink); line-height: 1.5; }

/* ============================================================
   CATEGORY TILES (12)
   ============================================================ */
.sell-cats {
  display: grid;
  gap: var(--s-3);
}
.sell-cats-4col {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .sell-cats-4col { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sell-cats-4col { grid-template-columns: repeat(2, 1fr); } }

.sell-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-2);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
  text-align: center;
}
.sell-cat:hover {
  border-color: var(--line-bright);
  transform: translateY(-2px);
}
.sell-cat.is-selected {
  border-color: var(--gold);
  /* Was a single rgba — replaced the solid card bg and let
     the page-level hex grid bleed through any newly-selected
     category tile. Stack the gold tint over the same solid
     panel color the default tile uses (var(--bg-1)) so the
     grid stays hidden. */
  background:
    linear-gradient(rgba(217, 166, 37, 0.06), rgba(217, 166, 37, 0.06)),
    var(--bg-1);
}
.sell-cat svg {
  width: 26px; height: 26px;
  color: var(--ink-muted);
  transition: color var(--dur-1) var(--ease-standard);
}
.sell-cat.is-selected svg { color: var(--gold); }
.sell-cat span { font-size: var(--fs-13); font-weight: var(--fw-500); color: var(--ink); }

/* ============================================================
   PHOTOS
   ============================================================ */
.sell-photos { display: flex; flex-direction: column; gap: var(--s-3); }

/* Reusable gold informational card — sits at the bottom of a step
   (or wherever) and bundles short pieces of static + dynamic info
   into one quiet panel. Used on the photos step (file-handling),
   the price step (limits + live fee), and elsewhere. */
.sell-info-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  /* Stack the gold tint on top of the body bg so the card stays
     opaque — otherwise the page-level hex grid behind <main>
     bleeds straight through this 6%-alpha gold and onto the
     card's surface. */
  background:
    linear-gradient(rgba(217, 166, 37, 0.06), rgba(217, 166, 37, 0.06)),
    var(--bg);
  border: 1px solid rgba(217, 166, 37, 0.28);
  border-radius: var(--r-2, 6px);
  font-size: var(--fs-11);
  line-height: 1.55;
  color: var(--ink-muted);
}
.sell-info-card svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
}
.sell-info-card strong {
  color: var(--ink);
  font-weight: var(--fw-600);
}
.sell-info-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sell-info-card-body > :empty { display: none; }

/* ============================================================
   PROTECTED-DEAL HELPER (2026-05-28)
   The "Already found a buyer?" value-prop block on the new
   audience step. Sits between the public/private tile picker
   and the private-only details panel. Gold-accent shield icon
   to match the protected-payments brand language used on /trust
   and /protected-dispute-review.
   ============================================================ */
.sell-protected-helper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  background:
    linear-gradient(rgba(217, 166, 37, 0.08), rgba(217, 166, 37, 0.08)),
    var(--bg);
  border: 1px solid rgba(217, 166, 37, 0.35);
  border-left: 3px solid var(--gold, #D9A625);
  border-radius: var(--r-2, 6px);
  color: var(--ink-muted);
}
.sell-protected-helper > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--gold);
  margin-top: 1px;
}
.sell-protected-helper-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sell-protected-helper-body strong {
  color: var(--ink);
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: var(--fs-14);
  font-weight: var(--fw-700);
  letter-spacing: 0.02em;
}
.sell-protected-helper-body p {
  margin: 0;
  font-size: var(--fs-12);
  line-height: 1.55;
}
@media (max-width: 480px) {
  .sell-protected-helper { padding: 12px 14px; gap: 10px; }
  .sell-protected-helper > svg { width: 18px; height: 18px; flex-basis: 18px; }
  .sell-protected-helper-body strong { font-size: var(--fs-13); }
  .sell-protected-helper-body p { font-size: var(--fs-11); }
}

/* Privacy footnote — small, quiet, sits below the upload grid. Lock
   icon + dim text. Anchors trust without shouting. */
.sell-photos-grid:empty,
.sell-photos-hint:empty { display: none; }

.sell-photos-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  /* Opaque base + faint white wash so the page-level hex grid
     can't bleed through (same trick as the other info cards on
     this page). */
  background:
    linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)),
    var(--bg);
  border: 1px solid var(--bg-3);
  border-radius: var(--r-2, 6px);
  font-size: var(--fs-11);
  line-height: 1.55;
  color: var(--ink-dim);
}
.sell-photos-privacy svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--success);
}
.sell-photos-privacy strong {
  color: var(--ink-muted);
  font-weight: var(--fw-600);
}
.sell-photos-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-5) var(--s-4);
  background: var(--bg-1);
  border: 1px dashed var(--line-bright);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
  text-align: center;
}
.sell-photos-drop:hover,
.sell-photos-drop.is-drag-over {
  border-color: var(--gold);
  /* Stack the gold tint over the same solid panel bg the
     resting state uses — otherwise this rgba replaces the
     opaque background and the page hex grid bleeds through
     during hover / drag-over. */
  background:
    linear-gradient(rgba(217, 166, 37, 0.04), rgba(217, 166, 37, 0.04)),
    var(--bg-1);
}
.sell-photos-drop svg { width: 36px; height: 36px; color: var(--ink-dim); }
.sell-photos-drop-title { font-size: var(--fs-14); font-weight: var(--fw-600); color: var(--ink); }
.sell-photos-drop-desc  { font-size: var(--fs-12); color: var(--ink-muted); }

.sell-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-2);
}
/* Photo tile — the whole tile is a make-cover affordance.
   Click anywhere on a non-cover tile and it becomes the cover.
   The Remove button stops propagation so removing doesn't double
   as a make-cover. */
.sell-photo {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-2);
  border-radius: var(--r-2);
  overflow: hidden;
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-standard),
              transform   var(--dur-1) var(--ease-standard),
              box-shadow  var(--dur-1) var(--ease-standard);
}
.sell-photo:hover:not(.is-cover) {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(217, 166, 37, 0.18);
}
.sell-photo.is-cover {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
  cursor: default;
}
.sell-photo:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* "Click for cover" hover hint — only visible while hovering a
   non-cover tile. Sits across the bottom edge so it doesn't fight
   with the X in the corner or the Cover badge on the chosen tile. */
.sell-photo-hint {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  background: linear-gradient(0deg, rgba(9,7,10,0.85) 0%, rgba(9,7,10,0) 100%);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  font-weight: var(--fw-600);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease-standard);
}
.sell-photo:hover .sell-photo-hint,
.sell-photo:focus-visible .sell-photo-hint {
  opacity: 1;
}
.sell-photo-cover-badge {
  position: absolute;
  top: 6px; left: 6px;
  padding: 3px 7px;
  background: var(--gold);
  color: var(--black-deep);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-600);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-radius: var(--r-1);
}
.sell-photo-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 7, 10, 0.75);
  backdrop-filter: blur(6px);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard);
}
.sell-photo-remove:hover { background: var(--danger); }
.sell-photo-remove svg { width: 12px; height: 12px; }


.sell-photos-hint {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-dim);
  min-height: 14px;
}
.sell-photos-hint.is-warn { color: var(--warning); }

/* ============================================================
   RADIOS + TOGGLE
   ============================================================ */
.sell-radios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-2);
}
.sell-radios-stack { grid-template-columns: 1fr; }

.sell-radio { cursor: pointer; }
.sell-radio input { display: none; }
.sell-radio span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  transition: all var(--dur-1) var(--ease-standard);
}
.sell-radio:hover span { border-color: var(--line-bright); }
.sell-radio input:checked + span {
  border-color: var(--gold);
  background: rgba(217, 166, 37, 0.05);
}
.sell-radio strong { font-size: var(--fs-14); font-weight: var(--fw-600); color: var(--ink); }
.sell-radio em     { font-style: normal; font-size: var(--fs-12); color: var(--ink-muted); }

.sell-toggle {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  cursor: pointer;
}
.sell-toggle input {
  width: 20px; height: 20px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
}
.sell-toggle strong { display: block; font-size: var(--fs-14); font-weight: var(--fw-600); color: var(--ink); margin-bottom: 3px; }
.sell-toggle em     { font-style: normal; font-size: var(--fs-12); color: var(--ink-muted); line-height: 1.5; }

.sell-note {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  padding: 10px 14px;
  background: transparent;
  border-left: 2px solid var(--line-bright);
  font-size: var(--fs-12);
  color: var(--ink-muted);
  line-height: 1.5;
  cursor: default;
}
.sell-note svg { width: 15px; height: 15px; color: var(--ink-dim); flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   COURIERS
   ============================================================ */
.sell-couriers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

.sell-courier {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
  color: var(--ink);
  text-align: left;
  width: 100%;
}
.sell-courier:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.sell-courier.is-selected { border-color: var(--gold); background: rgba(217, 166, 37, 0.05); }
.sell-courier-icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-radius: var(--r-2);
  flex-shrink: 0;
  color: var(--ink-muted);
}
.sell-courier.is-selected .sell-courier-icon { color: var(--gold); }
.sell-courier-icon svg { width: 22px; height: 22px; }
.sell-courier-body { flex: 1; min-width: 0; }
.sell-courier-name {
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--ink);
  margin-bottom: 2px;
}
.sell-courier-desc {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.sell-courier-price {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-700);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ============================================================
   BOOSTS
   ============================================================ */
.sell-boosts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
@media (max-width: 1080px) { .sell-boosts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  560px) { .sell-boosts { grid-template-columns: 1fr; } }

.sell-boost {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
  text-align: left;
  color: var(--ink);
  width: 100%;
}
.sell-boost:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.sell-boost.is-selected { border-color: var(--gold); background: rgba(217, 166, 37, 0.06); }
.sell-boost.is-premium { border-color: rgba(217, 166, 37, 0.4); }
.sell-boost.is-premium.is-selected { box-shadow: 0 0 0 1px var(--gold); }

.sell-boost-tier {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}
.sell-boost.is-premium .sell-boost-tier { color: var(--gold); }

.sell-boost-price {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-700);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.sell-boost-price-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 2px;
}
.sell-boost-perks {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sell-boost-perks li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--fs-12);
  color: var(--ink-muted);
  line-height: 1.4;
}
.sell-boost-perks svg {
  width: 12px; height: 12px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 3px;
}
.sell-boost-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  padding: 3px 9px;
  background: var(--gold);
  color: var(--black-deep);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-700);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-radius: var(--r-pill);
}

/* ============================================================
   REVIEW
   ============================================================ */
/* Review step — a full-page card visually identical to the
   buy-at-asking breakdown popout. Centered, dark, rounded with
   subtle shadow; same titlebar hierarchy + same boxed row look.
   The .sell-step--popout modifier hides the wizard's normal
   left-aligned step header (sell-step-head) for this step only,
   since the title now lives INSIDE the card. */
.sell-step--popout .sell-step-head { display: none; }

/* ─── Outer wrapper ──────────────────────────────────────────────
   Layout container only — no background/border/shadow. The dark
   panel-around-everything look used to live here; removed because
   it created a visible "dark square" frame around the review
   content. The inner blocks (preview, details, take-home, info
   cards) carry their own card chrome. Flex column + universal
   spacing token keeps every child uniformly separated, so adding
   or moving an info card doesn't need its own margin tweaks. */
.rv {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ─── Title bar ───────────────────────────────────────────────── */
.rv-head {
  text-align: center;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--bg-4);
}
.rv-h {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  font-weight: var(--fw-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 2px;
  line-height: 1.1;
}
.rv-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.3;
}

/* ─── Body: image left, details right ─────────────────────────── */
.rv-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  /* `align-items: stretch` (the grid default) makes both columns
     match heights, so the preview's bottom edge lines up with the
     details list's bottom edge no matter how many rows the list has. */
  align-items: stretch;
}
@media (max-width: 720px) {
  .rv-body { grid-template-columns: 1fr; }
}

/* ─── Visual preview (left) ──────────────────────────────────── */
.rv-preview {
  border: 1px solid var(--bg-4);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-2);
  /* Flex column lets the image area grow to fill any extra height
     the right-hand details list demands, while .rv-preview-meta keeps
     its natural height at the bottom. */
  display: flex;
  flex-direction: column;
}
.rv-preview-img {
  flex: 1;
  min-height: 130px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
}
.rv-preview-meta {
  padding: 8px 12px 10px;
}
.rv-preview-price {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-700);
  color: var(--gold);
  letter-spacing: -0.01em;
}
.rv-preview-title {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  color: var(--ink);
  margin-top: 2px;
  line-height: 1.2;
}
.rv-preview-loc {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  color: var(--ink-muted);
  margin-top: 4px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ─── Details list (right) ────────────────────────────────────── */
.rv-details {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bg-4);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-2);
}
.rv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-top: 1px solid var(--bg-4);
  gap: 14px;
}
.rv-row:first-child { border-top: 0; }
.rv-row dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
}
.rv-row dd {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--ink);
  text-align: right;
  word-break: break-word;
}

/* ─── Payout-readiness warn (above take-home block) ────────────
   Soft warning shown when the seller hasn't completed payout setup.
   Border + background sit between info and warning — gold-tinted,
   not red, because publishing without payout isn't an error, it's a
   not-yet. The hard gate fires at offer-accept time. */
.rv-payout-warn {
  /* margin-top removed — parent .rv now uses flex gap (var(--s-4))
     so every direct child spaces uniformly. */
  padding: 14px 16px;
  background: color-mix(in srgb, var(--gold) 6%, var(--bg-1));
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 14px;
  align-items: center;
}
.rv-payout-warn[hidden] { display: none !important; }
.rv-payout-warn-icon {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
  align-self: start;
  margin-top: 1px;
}
.rv-payout-warn-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-700);
  color: var(--ink);
  margin-bottom: 3px;
}
.rv-payout-warn-body p {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--ink-muted);
  line-height: 1.45;
}
.rv-payout-warn-cta { white-space: nowrap; }
@media (max-width: 560px) {
  .rv-payout-warn { grid-template-columns: 24px 1fr; }
  .rv-payout-warn-cta { grid-column: 1 / -1; }
}

/* ─── Take-home block: full-width below body ──────────────────── */
.rv-net {
  /* margin-top removed — parent .rv now uses flex gap. */
  padding: 10px 14px 12px;
  background: var(--bg-1);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rv-net[hidden] { display: none !important; }
.rv-net-eyebrow {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  margin-bottom: 1px;
}
.rv-net-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-12);
  color: var(--ink-muted);
}
.rv-net-row--neg { color: var(--ink-dim); }
.rv-net-row--total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  font-size: var(--fs-14);
  color: var(--ink);
}
.rv-net-row--total strong:last-child {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-700);
  color: var(--gold);
}

/* Sub-explainer below the take-home row — clarifies that buyer pays
   courier + insurance separately, so seller knows the 7% is the only
   line they're contributing. Smaller, dim text so it doesn't compete
   with the take-home figure. */
.rv-net-explainer {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 12%, transparent);
  font-size: var(--fs-11);
  line-height: 1.45;
  color: var(--ink-muted);
}

/* Tier schedule on the review step — collapsed by default so it
   doesn't dominate the layout, but one click reveals the full
   tiered fee scale with the seller's current tier highlighted. */
.rv-net-tiers {
  margin-top: 12px;
  font-size: var(--fs-11);
  color: var(--ink-muted);
}
.rv-net-tiers > summary {
  cursor: pointer;
  padding: 8px 0;
  color: var(--gold);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size:var(--fs-11);
  font-weight:var(--fw-600);
  list-style: none;
}
.rv-net-tiers > summary::-webkit-details-marker { display: none; }
.rv-net-tiers > summary:hover { color: var(--gold-deep); }
.rv-net-tiers > summary::after {
  content: ' ›';
  display: inline-block;
  margin-left: 4px;
  transition: transform 120ms ease;
}
.rv-net-tiers[open] > summary::after { transform: rotate(90deg); }
.rv-net-tiers-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.rv-net-tiers-table th,
.rv-net-tiers-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--bg-3);
  font-family: var(--font-mono);
  font-size:var(--fs-12);
}
.rv-net-tiers-table th {
  font-size:var(--fs-10);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--bg-3);
}
.rv-net-tiers-table td:last-child { text-align: right; color: var(--ink); font-weight:var(--fw-600); }
.rv-net-tiers-table tr.rv-net-tier-active td {
  background: rgba(217, 166, 37, 0.10);
  color: var(--gold);
}
.rv-net-tiers-note {
  margin: 8px 0 0;
  font-size:var(--fs-11);
  color: var(--ink-dim);
}

/* Live commission hint under the price input on the sell-flow
   price step. Tells the seller WHILE TYPING what % Pakstoor will
   take at their current price. */
.sell-price-fee-hint {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gold);
  font-weight:var(--fw-500);
}
.sell-price-fee-hint:empty { display: none; }

/* ─── Footnote ─────────────────────────────────────────────────── */
.rv-foot {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  color: var(--ink-dim);
  text-align: center;
  margin: 8px 0 0;
  line-height: 1.3;
}

/* ============================================================
   PAYMENT
   ============================================================ */
.sell-pay {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 520px;
}
.sell-pay-summary {
  padding: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sell-pay-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-13);
  color: var(--ink-muted);
}
.sell-pay-summary-row strong { color: var(--ink); font-weight: var(--fw-600); }
.sell-pay-summary-row.is-total {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 2px;
  font-size: var(--fs-14);
}
.sell-pay-summary-row.is-total strong {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-700);
  color: var(--ink);
}

.sell-pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
@media (max-width: 480px) { .sell-pay-methods { grid-template-columns: 1fr; } }
.sell-pay-method {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease-standard);
  text-align: left;
  color: var(--ink);
}
.sell-pay-method:hover:not(:disabled) { border-color: var(--line-bright); }
.sell-pay-method.is-selected { border-color: var(--gold); background: rgba(217, 166, 37, 0.05); }
.sell-pay-method:disabled { opacity: 0.5; cursor: not-allowed; }
.sell-pay-method svg { width: 22px; height: 22px; color: var(--ink-muted); flex-shrink: 0; }
.sell-pay-method.is-selected svg { color: var(--gold); }
.sell-pay-method strong { display: block; font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--ink); }
.sell-pay-method em { font-style: normal; font-size: var(--fs-11); color: var(--ink-dim); font-family: var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.sell-pay-cta {
  padding: 15px 24px;
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-700);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  justify-content: center;
}
.sell-pay-cta:disabled { opacity: 0.6; cursor: wait; }

.sell-pay-status {
  min-height: 18px;
  color: var(--ink-muted);
  font-size: var(--fs-12);
  line-height: 1.45;
  text-align: center;
}
.sell-pay-status.is-warn { color: var(--danger); }
.sell-pay-status.is-ok { color: var(--success); }

/* In-step Back link — the action bar is hidden on the payment step
   so this is the user's only way to return to boost selection. */
.sell-pay-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: var(--s-2);
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius:var(--r-4);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  font-weight: var(--fw-600);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sell-pay-back:hover {
  color: var(--ink);
  border-color: var(--gold);
  background: var(--bg-1);
}
.sell-pay-back svg { width: 14px; height: 14px; }

.sell-pay-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
  justify-content: center;
}
.sell-pay-secure svg { width: 12px; height: 12px; color: var(--gold); }

/* ============================================================
   DONE SCREEN
   ============================================================ */
.sell-done {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

/* Six-dot pop confetti behind the success ✓. Each dot launches in
   a different direction, fading as it goes. Fires once on step
   show — animation has no `infinite` keyword so it stops on its
   own. Reduced-motion users skip it entirely. */
.sell-done-confetti {
  position: absolute;
  top: var(--s-5);
  left: 50%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  pointer-events: none;
}
.sell-done-confetti span {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--gold, #D9A625);
  opacity: 0;
  animation: sell-confetti 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.sell-done-confetti span:nth-child(1) { --tx:  60px; --ty: -50px; animation-delay: 50ms;  background: var(--gold); }
.sell-done-confetti span:nth-child(2) { --tx: -55px; --ty: -55px; animation-delay: 100ms; background: var(--success, #5EA872); }
.sell-done-confetti span:nth-child(3) { --tx:  70px; --ty:  20px; animation-delay: 150ms; background: var(--gold-deep, #B88417); }
.sell-done-confetti span:nth-child(4) { --tx: -68px; --ty:  18px; animation-delay: 80ms;  background: var(--gold); }
.sell-done-confetti span:nth-child(5) { --tx:  10px; --ty: -75px; animation-delay: 200ms; background: var(--success, #5EA872); }
.sell-done-confetti span:nth-child(6) { --tx: -10px; --ty:  60px; animation-delay: 120ms; background: var(--gold); }
@keyframes sell-confetti {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sell-done-confetti span { animation: none; opacity: 0; }
}
.sell-done-icon {
  width: 64px; height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(217, 166, 37, 0.08);
  color: var(--gold);
  animation: sell-pop var(--dur-4) var(--ease-decel);
}
.sell-done-icon svg { width: 32px; height: 32px; }
@keyframes sell-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sell-done-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; justify-content: center; }

/* Code reveal panel — appears on the Done step only when the just-
   published listing was a code-mode private listing. The big code is
   the centerpiece; copy + WhatsApp share sit below for one-tap sharing. */
.sell-done-code {
  margin: var(--s-4) auto 0;
  max-width: 520px;
  padding: 22px 22px 18px;
  background: var(--bg-1);
  border: 1px solid rgba(217, 166, 37, 0.5);
  border-radius: var(--r-3);
  box-shadow: 0 0 0 1px rgba(217, 166, 37, 0.15) inset;
  text-align: center;
}
.sell-done-code[hidden] { display: none !important; }
.sell-done-code-eyebrow {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sell-done-code-value {
  font-family: var(--font-mono);
  font-size:var(--fs-28);
  font-weight: var(--fw-700);
  letter-spacing: 0.16em;
  color: var(--gold);
  padding: 14px 12px;
  background: var(--bg);
  border-radius: var(--r-2);
  border: 1px dashed var(--gold);
  user-select: all;
}
.sell-done-code-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 12px 0 14px;
}
.sell-done-code-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 480px) {
  .sell-done-code-value { font-size: 22px; letter-spacing:var(--tracking-wider); }
}

/* ============================================================
   STICKY ACTIONS — rewrite 2026-05-29 rev 2.

   Hard-locked to 44px on desktop, 48px (+ iOS inset) on mobile.
   All sizing rules use !important to override any older or
   downstream selector that tried to expand the bar via padding,
   min-height, or button min-height. The buttons are explicit
   32px tall and the inner flex row is height:100% align-items:
   center — buttons land in the dead vertical centre of the bar.

   The page-level help FAB (pks-help-fab.js — shield + scroll-
   to-top stack) is suppressed on /sell via that script's
   SKIP_PATHS list so it can't visually mingle with the bar.
   ============================================================ */
.sell-actions {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  background: var(--bg) !important;
  border-top: 1px solid var(--line);
  z-index: var(--z-nav);
  padding: 0 !important;
  margin: 0 !important;
}
.sell-actions-inner {
  height: 100% !important;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--s-3);
  transition: max-width 220ms ease;
}
/* (Review-step 1140px popout removed 2026-05-09 — see note above
   .sell-inner. Review now uses the standard 1080px width like every
   other step, so no override needed here.) */
.sell-actions-draft {
  /* Sit just to the LEFT of the primary CTA, not centred between
     Back and Continue. `margin-left: auto` consumes all the slack
     so the rest of the row groups to the right edge. */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--success, #6FB983);
  font-weight: var(--fw-600);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-standard);
}
.sell-actions-draft.is-visible { opacity: 1; }
.sell-actions-draft::before {
  content: '';
  width: 12px; height: 12px;
  background: var(--success, #6FB983);
  border-radius: 999px;
  flex-shrink: 0;
  /* Inline checkmark via mask so colour follows currentColor logic.
     Falls back to a plain dot in browsers without mask support. */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' fill='black'/><path d='M8 12l3 3 5-6' stroke='white'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' fill='black'/><path d='M8 12l3 3 5-6' stroke='white'/></svg>") center / contain no-repeat;
}
.sell-actions-draft.is-error {
  color: var(--danger, #E66055);
}
.sell-actions-draft.is-error::before {
  background: var(--danger, #E66055);
}
.sell-actions .btn {
  /* 2026-05-29 (rev 7): explicit 32px buttons, !important to win
     specificity against any future global .btn min-height rule. */
  padding: 4px 16px !important;
  font-size: var(--fs-12) !important;
  letter-spacing: 0.04em !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 1 !important;
}
.sell-actions .btn svg { width: 12px !important; height: 12px !important; }
@media (max-width: 480px) {
  .sell-actions .btn {
    padding: 6px 16px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}
/* Outline the wizard's Back button so it reads as a paired button
   alongside the filled Continue, not as a ghost text label. Modern
   wizard convention (Stripe Connect, Linear, Apple HIG, Material 3
   outlined-button). `currentColor` keeps the border tracking the
   text colour at rest AND on hover (where the global `.btn-ghost:hover`
   rule brightens text from ink-muted to ink). */
.sell-actions .btn-ghost { border-color: currentColor; }
.sell-actions.is-hidden { display: none; }

@media (max-width: 480px) {
  .sell-actions {
    height: calc(48px + env(safe-area-inset-bottom)) !important;
    min-height: calc(48px + env(safe-area-inset-bottom)) !important;
    max-height: calc(48px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* ============================================================
   TOAST
   ============================================================ */
.sell-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-3);
  color: var(--ink);
  padding: 10px 16px;
  border: 1px solid var(--line-bright);
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur-2) var(--ease-standard);
}
.sell-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sell-toast svg { width: 14px; height: 14px; color: var(--gold); }

/* ============================================================
   PREMIUM BADGE (on explore/listings cards) — used by other pages
   ============================================================ */
.card-premium-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--gold);
  color: var(--black-deep);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-700);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-radius: var(--r-1);
  line-height: 1;
  z-index: 2;
}
.card-premium-badge svg {
  width: 9px;
  height: 9px;
  stroke: none;
  fill: currentColor;
}

/* ============================================================
   FULFILMENT MODE — above courier cards
   ============================================================ */
.sell-fulfilment {
  margin-bottom: var(--s-2);
}
.sell-fulfil-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-600);
  margin-bottom: var(--s-2);
}
.sell-fulfil-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.sell-fulfil-tile {
  position: relative;
  display: block;
  padding: 10px 14px 10px 38px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.sell-fulfil-tile:hover {
  border-color: var(--line-bright);
  background: var(--bg-2);
}
.sell-fulfil-tile input[type="radio"] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color 140ms ease;
}
.sell-fulfil-tile input[type="radio"]:checked {
  border-color: var(--gold);
  background:
    radial-gradient(circle, var(--gold) 0, var(--gold) 4px, transparent 4px);
}
.sell-fulfil-tile:has(input:checked),
.sell-fulfil-tile input:checked ~ .sell-fulfil-body {
  /* fallback for older browsers — the tile itself gets border via :has */
}
.sell-fulfil-tile:has(input:checked) {
  border-color: var(--gold);
  background: rgba(201, 162, 74, 0.04);
}
.sell-fulfil-name {
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--ink);
  margin-bottom: 2px;
}
.sell-fulfil-desc {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  line-height: 1.4;
}
.sell-fulfil-note {
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-dim);
  padding: 10px 14px;
  background: rgba(217, 166, 37, 0.04);
  border-left: 2px solid var(--gold);
  border-radius: var(--r-2);
}

/* Inline error / status msg host in the sticky action bar.
   No flex grow — it should sit between Draft saved and Continue
   without consuming slack. The .sell-actions-draft has the
   `margin-left: auto` that pushes this whole right-hand group
   to the right edge. */
.sell-actions-msg {
  min-width: 0;
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing: var(--tracking-wide);
  color: transparent;
  padding: 0 var(--s-3);
  text-align: right;
  transition: color 140ms ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sell-actions-msg:empty { padding: 0; }
.sell-actions-msg.is-error { color: #f87171; }

/* ==========================================================
   City grid — replaces the old free-text city input.
   User picks from a curated grid of main cities per province,
   with a search box that filters tiles live.
   ========================================================== */

.sell-city-search { /* inherits .sell-input — no extra styling needed */ }

.sell-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--bg-3, #2B313A);
  border-radius: 8px;
  background: var(--bg-1, #1B2027);
}
.sell-city-grid:empty { display: none; }

.sell-city-tile {
  appearance: none;
  border: 1px solid var(--bg-3, #2B313A);
  background: var(--bg-2, #232932);
  color: var(--ink, #ECEFF2);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-13);
  padding: 10px 12px;
  border-radius:var(--r-4);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms, background 120ms, color 120ms, transform 80ms;
}
.sell-city-tile:hover {
  border-color: var(--gold, #D9A625);
  background: var(--bg-3, #2B313A);
}
.sell-city-tile:focus-visible {
  outline: 2px solid var(--gold, #D9A625);
  outline-offset: 2px;
}
.sell-city-tile.is-selected {
  background: var(--gold, #D9A625);
  border-color: var(--gold, #D9A625);
  color: var(--gold-ink, #14181D);
  font-weight:var(--fw-600);
}
.sell-city-tile:active { transform: translateY(1px); }

.sell-city-empty {
  grid-column: 1 / -1;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-11);
  color: var(--ink-dim, #737C87);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px;
  text-align: center;
}

.sell-city-selected {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-11);
  color: var(--ink-muted, #A6AFB9);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-height: 16px;
  margin-top: 4px;
}
.sell-city-selected strong {
  color: var(--gold, #D9A625);
  font-weight:var(--fw-600);
}

/* ==========================================================
   Price hint / warning — sits below the asking-price input.
   "High price — double-check" kind of messages.
   ========================================================== */
.sell-price-warn {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-11);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #e0a93c;
  margin-top: 4px;
  min-height: 14px;
}
.sell-price-warn.is-loud { color: #f87171; font-weight:var(--fw-600); }

.sell-price-limits {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-10);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}

/* ==========================================================
   Parcel size bands — 6 tiles above the courier grid.
   Picking a band fires the live multi-quote fetch.
   ========================================================== */
.sell-parcel {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sell-parcel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sell-parcel-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-10);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink-dim, #737C87);
  font-weight:var(--fw-600);
}
.sell-parcel-guide-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-10);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold, #D9A625);
  font-weight:var(--fw-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
.sell-parcel-guide-btn:hover,
.sell-parcel-guide-btn:focus-visible {
  color: var(--gold-deep, #B88417);
  outline: none;
}
/* Parcel-size suggestion panel — sits above the size grid. Calm,
   gold-tinted, supportive (not authoritative). 3 lines:
   • Suggested: <size>
   • Based on your listing: "<keyword>" detected
   • Short reason (max 12 words). */
.sell-parcel-suggest[hidden] { display: none !important; }
.sell-parcel-suggest {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px 14px;
  background: rgba(217, 166, 37, 0.05);
  border: 1px solid rgba(217, 166, 37, 0.22);
  border-radius: 9px;
}
.sell-parcel-suggest-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 1px;
}
.sell-parcel-suggest-icon svg { width: 18px; height: 18px; }
.sell-parcel-suggest-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sell-parcel-suggest-l1 {
  font-family: var(--font-sans);
  font-size:var(--fs-14);
  color: var(--ink);
  font-weight:var(--fw-500);
  line-height: 1.35;
}
.sell-parcel-suggest-l1 strong { color: var(--ink); font-weight:var(--fw-700); }
.sell-parcel-suggest-l2 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.sell-parcel-suggest-l3 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* Downgrade warning — only visible when seller picks a size SMALLER
   than the suggestion. Gold-tinted (not red) — this is guidance, not
   an error. Triangle icon makes the "may not fit" risk clear. */
.sell-parcel-warning[hidden] { display: none !important; }
.sell-parcel-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 0;
  padding: 12px 14px;
  background: rgba(217, 166, 37, 0.06);
  border: 1px solid rgba(217, 166, 37, 0.36);
  border-radius: 9px;
  color: var(--ink);
  font-size:var(--fs-13);
  line-height: 1.45;
}
.sell-parcel-warning-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 1px;
}
.sell-parcel-warning-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sell-parcel-warning-body strong { color: var(--ink); font-weight:var(--fw-600); }
.sell-parcel-warning-suggest {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.sell-parcel-warning-suggest strong { color: var(--gold); }

.sell-parcel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.sell-parcel-tile {
  appearance: none;
  border: 1px solid var(--bg-3, #2B313A);
  background: var(--bg-2, #232932);
  color: var(--ink, #ECEFF2);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms, background 120ms, color 120ms, transform 80ms;
}
/* 2026-05-28 (rev 5): all heavy tiles must be the same height.
   The earlier 2-line clamp capped the MAX lines but didn't reserve
   2 lines of space — ULTRA HEAVY's shorter desc rendered on 1 line
   and made that card shorter than its neighbours. `min-height` on
   the desc element pins the area to exactly two lines of fs-12
   text regardless of how much copy lands inside, so all four heavy
   tiles (HVY/SHV/UHV/TTN) match each other AND match the natural
   height of the standard top row. The top XS-XXL row is NOT
   touched — this rule is scoped to `.is-heavy` only. */
.sell-parcel-tile.is-heavy .sell-parcel-tile-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.4em;
  line-height: 1.2;
}
.sell-parcel-tile.is-heavy .sell-parcel-tile-helper { display: none; }
.sell-parcel-tile:hover   { background: var(--bg-3, #2B313A); }
.sell-parcel-tile:active  { transform: translateY(1px); }
/* (Per-tier .is-selected/hover colors live in the tier-color
   block further down — added 2026-05-28.) */
.sell-parcel-tile-label {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size:var(--fs-18);
  font-weight:var(--fw-700);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.sell-parcel-tile-dims {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-11);
  letter-spacing: 0.5px;
  opacity: 0.8;
}
.sell-parcel-tile-desc {
  font-size:var(--fs-12);
  margin-top: 4px;
  opacity: 0.8;
}
.sell-parcel-note {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-10);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-dim, #737C87);
}

/* ==========================================================
   Courier price slot states — live / mock / unavailable
   ========================================================== */
.sell-courier-price.is-live {
  color: var(--gold, #D9A625);
  font-weight:var(--fw-700);
}
.sell-courier-price.is-mock {
  opacity: 0.55;
  font-style: italic;
}
/* Reloading dim — applied during a size-change re-quote so the user
   sees a subtle "value is changing" hint without us wiping the price
   text. The previous price stays visible (slightly faded) until the
   live response replaces it. Smooth swap, no flash. */
.sell-courier-price.is-reloading {
  opacity: 0.45;
  transition: opacity 120ms ease;
}
.sell-couriers-status {
  margin-top: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-11);
  letter-spacing: 1px;
  text-transform: uppercase;
  min-height: 16px;
  color: var(--ink-dim, #737C87);
}
.sell-couriers-status.is-loading { color: var(--ink-muted, #A6AFB9); }
.sell-couriers-status.is-live    { color: #5EA872; }
.sell-couriers-status.is-warn    { color: #e0a93c; }
.sell-couriers-status.is-hint    { color: var(--ink-muted, #A6AFB9); }

/* ==========================================================
   Parcel-size helper modal (pks-parcel-guide.js)
   Opened from the gold "See common items" link above the
   parcel grid. Searchable, grouped by size band.
   ========================================================== */
html.pks-pg-locked,
html.pks-pg-locked body { overflow: hidden; }

.pks-pg-modal-root {
  position: fixed;
  inset: 0;
  z-index: 9991;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.pks-pg-modal-root.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pks-pg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 29, 0.84);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.pks-pg-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  background: var(--bg-2, #232932);
  border: 1px solid var(--bg-3, #2B313A);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  color: var(--ink, #ECEFF2);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  overflow: hidden;
}

.pks-pg-head {
  position: relative;
  padding: 20px 56px 14px 22px;
  border-bottom: 1px solid var(--bg-3, #2B313A);
  flex: 0 0 auto;
}
.pks-pg-title {
  margin: 0;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size:var(--fs-20);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink, #ECEFF2);
}
.pks-pg-subtitle {
  margin: 6px 0 0;
  font-size:var(--fs-12);
  color: var(--ink-muted, #A6AFB9);
  line-height: 1.5;
}
.pks-pg-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-muted, #A6AFB9);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.pks-pg-close:hover {
  background: var(--bg-3, #2B313A);
  color: var(--ink, #ECEFF2);
}

.pks-pg-search-wrap {
  padding: 12px 22px 10px;
  flex: 0 0 auto;
  background: var(--bg-2, #232932);
  border-bottom: 1px solid var(--bg-3, #2B313A);
}
.pks-pg-search {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-1, #1B2027);
  border: 1px solid var(--bg-3, #2B313A);
  border-radius: 8px;
  color: var(--ink, #ECEFF2);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-14);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.pks-pg-search:focus {
  border-color: var(--gold, #D9A625);
  box-shadow: 0 0 0 3px rgba(217, 166, 37, 0.12);
}

.pks-pg-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 22px 18px;
}

.pks-pg-group {
  margin-top: 14px;
}
.pks-pg-group:first-child { margin-top: 6px; }

.pks-pg-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--bg-3, #2B313A);
  margin-bottom: 10px;
}
.pks-pg-group-label {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size:var(--fs-14);
  font-weight:var(--fw-700);
  letter-spacing: 1.2px;
  color: var(--gold, #D9A625);
}
.pks-pg-group-dims {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size:var(--fs-10);
  letter-spacing: 1px;
  color: var(--ink-dim, #737C87);
  text-transform: uppercase;
}

.pks-pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.pks-pg-item {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-1, #1B2027);
  border: 1px solid var(--bg-3, #2B313A);
  border-radius: 8px;
  color: var(--ink, #ECEFF2);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size:var(--fs-13);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, transform 80ms;
}
.pks-pg-item:hover {
  border-color: var(--gold, #D9A625);
  background: var(--bg-3, #2B313A);
}
.pks-pg-item:active { transform: translateY(1px); }
.pks-pg-item:focus-visible {
  outline: 2px solid var(--gold, #D9A625);
  outline-offset: 2px;
}
.pks-pg-item[hidden] { display: none; }

.pks-pg-item-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}
.pks-pg-item-size {
  flex: 0 0 auto;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size:var(--fs-11);
  font-weight:var(--fw-700);
  letter-spacing: 1px;
  color: var(--gold, #D9A625);
  background: rgba(217, 166, 37, 0.1);
  border: 1px solid rgba(217, 166, 37, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

.pks-pg-group[hidden] { display: none; }

.pks-pg-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-dim, #737C87);
  font-size:var(--fs-13);
}

@media (max-width: 560px) {
  .pks-pg-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .pks-pg-subtitle {
    font-size:var(--fs-11);
  }
}

/* ─── Audience step (public vs invite-only) ───────────────────────
   Tightened density so the Continue action stays in viewport without
   scrolling on a typical laptop (~720px content height). */
.sell-audience {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .sell-audience { grid-template-columns: 1fr; }
}
.sell-audience-tile {
  position: relative;
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-3);
  background: var(--bg-1);
  border: 1px solid var(--bg-4);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.sell-audience-tile input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.sell-audience-tile:hover { background: var(--bg-2); }
.sell-audience-tile:has(input:checked) {
  border-color: var(--gold);
  background: rgba(217, 166, 37, 0.06);
}
.sell-audience-name {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--ink);
  margin-bottom: 2px;
}
.sell-audience-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--ink-muted);
}
.sell-delivery-mode { margin-top: var(--s-3); }

/* Private-only panel — slightly tighter than the public-rest of
   the step, gold-tinted so the seller knows this applies only to
   invite-only listings. */
.sell-private-panel {
  margin-top: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-3);
  background: rgba(217, 166, 37, 0.04);
  border: 1px solid rgba(217, 166, 37, 0.22);
}
.sell-private-buyer { margin-bottom: var(--s-3); }
.sell-private-buyer .sell-input {
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border-radius: var(--r-3);
  background: var(--bg-1);
  border: 1px solid var(--bg-4);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  -webkit-appearance: none;
  appearance: none;
}
.sell-private-buyer .sell-input::placeholder { color: var(--ink-dim); }
.sell-private-buyer .sell-input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg);
}
.sell-private-buyer-hint {
  margin: 6px 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  line-height: 1.4;
  color: var(--ink-dim);
}

/* Private-step: tighten the lede + delivery-tile spacing too so the
   whole step fits without scroll. Scoped to data-step="audience" so
   nothing else (Location, Courier, Review) is affected. */
.sell-step[data-step="audience"] .sell-lede {
  margin-bottom: var(--s-2);
  font-size: var(--fs-13);
  line-height: 1.45;
}
.sell-step[data-step="audience"] .sell-step-head { gap: 4px; }
.sell-step[data-step="audience"] .sell-fulfil-grid { gap: 8px; }
.sell-step[data-step="audience"] .sell-fulfil-tile {
  padding: 8px 12px 8px 36px;
}
.sell-step[data-step="audience"] .sell-fulfil-desc {
  font-size: var(--fs-12);
  line-height: 1.4;
}


/* ==========================================================
   MOBILE FIXES :: 2026-05-03 :: sell flow (mobile only)
   Desktop sell-flow spacing is locked. These rules only fire
   below 480px and never affect the kiosk-style desktop layout.
   ========================================================== */
@media (max-width: 480px) {
  .sell-photos-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sell-photo-remove { min-width: 44px; min-height: 44px; }
  .sell-radios { grid-template-columns: 1fr; }
  .sell-info-card { gap: 8px; padding: 10px 12px; }
  .rv-preview-img { min-height: 180px; }
}

/* === 360px FIX :: 2026-05-04 === */
@media (max-width: 360px) {
  /* Category tiles — drop to single column on the smallest phones so
     two-up doesn't squeeze the names mid-word. */
  .sell-cats-4col { grid-template-columns: 1fr; }
}

/* ============================================================
   AI listing description helper
   "Generate with AI" button + modal that takes seller-supplied
   facts, asks OpenAI for a clean draft, and lets the seller
   review before saving. See site/sell.html for markup.
   ============================================================ */
.sell-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.sell-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(217, 166, 37, 0.08);
  border: 1px solid rgba(217, 166, 37, 0.32);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  font-weight:var(--fw-700);
  letter-spacing:var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease;
}
.sell-ai-btn:hover { background: rgba(217, 166, 37, 0.16); border-color: var(--gold); }
.sell-ai-btn:active { transform: scale(0.97); }

/* Compact single-row CTA at the top of the Details step. The Details
   step must fit on one viewport with title + description + info cards,
   so this row is intentionally lean: badge + one-line headline + button. */
.sell-ai-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px 0;
  padding: 8px 12px;
  border: 1px solid rgba(217, 166, 37, 0.32);
  border-radius: 10px;
  background: rgba(217, 166, 37, 0.06);
}
.sell-ai-cta-text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.sell-ai-cta-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sell-ai-cta-line {
  font-size:var(--fs-13);
  font-weight:var(--fw-600);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sell-ai-btn--lg {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-size:var(--fs-11);
  background: var(--gold);
  color: var(--gold-ink);
  border-color: var(--gold);
}
.sell-ai-btn--lg:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--gold-ink);
}
@media (max-width: 480px) {
  /* Stack the CTA vertically — at 360px the single-row layout
     truncated the headline mid-word and pushed against the button.
     A 2-line stack reads better and tap target on full-width
     button is bigger. */
  .sell-ai-cta {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
    gap: 10px;
  }
  .sell-ai-cta-text { justify-content: center; }
  .sell-ai-cta-line {
    white-space: normal;
    text-align: center;
    font-size:var(--fs-13);
    overflow: visible;
    text-overflow: clip;
  }
  .sell-ai-cta-badge { display: inline-block; align-self: center; }
  .sell-ai-btn--lg {
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size:var(--fs-12);
  }
  /* Hide the duplicated info-card on phone — the AI modal already
     explains how this works, and the Details step needs every
     pixel to fit iPhone SE 1 (375×667). */
  .sell-step[data-step="details"] .sell-info-card { display: none; }
  /* Tighter textarea on phone so the step doesn't overflow. */
  .sell-step[data-step="details"] .sell-textarea { min-height: 80px; }
}

.sell-ai-modal[hidden] { display: none !important; }
.sell-ai-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.sell-ai-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 7, 10, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sell-ai-modal-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line-bright);
  border-radius:var(--r-5);
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}
.sell-ai-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line-2);
  flex-shrink: 0;
}
.sell-ai-modal-eyebrow {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 4px;
}
.sell-ai-modal-title {
  font-family: var(--font-display);
  font-size:var(--fs-20);
  color: var(--ink);
  margin: 0;
}
.sell-ai-modal-close {
  background: transparent; border: 0; color: var(--ink-muted);
  padding: 12px; cursor: pointer; border-radius:var(--r-4);
  margin: -6px;
  transition: color 0.13s ease, background 0.13s ease;
}
.sell-ai-modal-close:hover { color: var(--ink); background: var(--bg-2); }

.sell-ai-modal-body {
  padding: 18px 22px 14px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.sell-ai-modal-lede {
  font-size:var(--fs-13);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 14px;
}

.sell-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 560px) {
  .sell-ai-grid { grid-template-columns: 1fr; }
}

.sell-ai-req { color: var(--gold); font-weight:var(--fw-700); }

/* Tone picker — full-width above the grid because it changes the
   whole shape of the output. */
.sell-ai-tone-field {
  margin: 0 0 14px;
  padding: 12px;
  background: rgba(217, 166, 37, 0.04);
  border: 1px solid rgba(217, 166, 37, 0.22);
  border-radius: 10px;
}
.sell-ai-tone-hint {
  margin: 6px 0 0;
  font-size:var(--fs-12);
  color: var(--ink-muted);
  line-height: 1.45;
}

/* "X generations remaining" badge above the modal foot. Lives only
   in the input pane. Hidden until /users/me/ai-usage resolves. */
.sell-ai-usage {
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size:var(--fs-12);
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  text-align: center;
}
.sell-ai-usage.is-low    { color: var(--gold);    border-color: rgba(217, 166, 37, 0.4); }
.sell-ai-usage.is-empty  { color: var(--danger);  border-color: rgba(216, 81, 69, 0.45); }

.sell-ai-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid var(--line-2);
  /* Sticky foot so Cancel/Generate are always reachable on
     small viewports without scrolling inside the modal body. */
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg-1) 70%, rgba(27,32,39,0));
  margin: 8px -22px -14px;
  padding: 14px 22px;
}
@media (max-width: 480px) {
  .sell-ai-modal-foot {
    gap: 8px;
    margin: 8px -14px -12px;
    padding: 12px 14px;
  }
  /* Make tap targets a real 44px on phone. */
  .sell-ai-modal-foot .btn-sm {
    flex: 1 1 auto;
    justify-content: center;
    padding: 11px 16px;
    font-size:var(--fs-13);
  }
  /* Reclaim horizontal room around the modal card on small phones. */
  .sell-ai-modal      { padding: 8px; }
  .sell-ai-modal-body { padding: 14px 14px 12px; }
  .sell-ai-modal-head { padding: 14px 14px 10px; }
  .sell-ai-tone-field { padding: 10px; }
  .sell-ai-tone-hint  { font-size: 11.5px; }
}
/* Stack budget hero / column pair when the page narrows. Same
   pattern as the admin-ai-usage page. */
@media (max-width: 560px) {
  .sell-ai-cta-line { font-size:var(--fs-12); }
}

.sell-ai-modal-error {
  padding: 10px 12px;
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--danger);
  background: rgba(216, 81, 69, 0.06);
  border: 1px solid rgba(216, 81, 69, 0.28);
  border-radius: 8px;
}

/* Loading state */
.sell-ai-loading {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 60px 0;
}
.sell-ai-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(217, 166, 37, 0.24);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: sell-ai-spin 0.9s linear infinite;
}
@keyframes sell-ai-spin { to { transform: rotate(360deg); } }
.sell-ai-loading-msg {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size:var(--fs-12);
  letter-spacing:var(--tracking-wide);
  text-transform: uppercase;
}

/* Result-summary blocks. The trailing margin-bottom keeps the last
   card off the sticky modal foot — without it, "What's included"
   visually butts against the gold "Use this listing" button. */
.sell-ai-summary {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 12px;
  margin-bottom: 18px;
}
.sell-ai-summary-section {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-2);
  border-radius: 8px;
}
.sell-ai-summary-section--warn {
  background: rgba(217, 166, 37, 0.06);
  border-color: rgba(217, 166, 37, 0.28);
}
.sell-ai-summary-section--danger {
  background: rgba(216, 81, 69, 0.06);
  border-color: rgba(216, 81, 69, 0.28);
}
.sell-ai-summary-h {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.sell-ai-summary-section--warn .sell-ai-summary-h { color: var(--gold); }
.sell-ai-summary-section--danger .sell-ai-summary-h { color: var(--danger); }
.sell-ai-summary-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0;
  font-size:var(--fs-13);
  line-height: 1.55;
  color: var(--ink);
}
.sell-ai-summary-list li { margin: 2px 0; }



/* Trust banner above the sell flow steps. Calm, single-line —
   reassures sellers that protected listings outperform raw ones. */
.sell-trust {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  padding: 6px 12px;
  /* Hard-opaque body bg as a solid color + the green-tinted
     hue baked in (manually mixed rgba(94,168,114,0.08) over
     #14181D ≈ #1A2424). No layered linear-gradient and no
     var() lookup — eliminates every translucency path so the
     hex grid behind <main> can't bleed through under any
     combination of blend modes / backdrop filters. */
  background: #1A2424 !important;
  border: 1px solid rgba(94, 168, 114, 0.28);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--success);
  font-weight:var(--fw-600);
}
.sell-trust-icon { width: 13px; height: 13px; flex-shrink: 0; }
@media (max-width: 480px) {
  .sell-trust { font-size:var(--fs-11); padding: 7px 12px; }
}

/* 2026-05-08 — touch-target floor on photo remove badge */
@media (max-width: 480px) {
  .sell-photo-remove { width: 36px !important; height: 36px !important; }
}

/* Inline hint text under sell-form fields. Used for tiny "what's
   this?" notes (e.g. postal code = 4 digits). 2026-05-10 UX pass. */
.sell-field-hint {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono, monospace);
  font-size:var(--fs-11);
  letter-spacing: 0.04em;
  color: var(--ink-dim, #6E7480);
  line-height: 1.4;
}
.sell-field-hint.is-error {
  color: var(--danger, #E66055);
}
.sell-field-hint.is-ok {
  color: var(--success, #6FB983);
}

/* ============================================================
   2026-05-11 — universal hex-grid bleed fix on /sell.

   The page-level hex grid (pks-bg-hex.js) sits behind <main>.
   Any card on /sell with an rgba-only background is translucent
   and lets the grid show through. This block restores an opaque
   base on every known "selected / suggested / tinted" surface
   on the sell flow by layering the original rgba tint on top of
   a solid panel colour (var(--bg-1) for cards, var(--bg) for
   text panels). Visual result is unchanged; the grid no longer
   bleeds through.
   ============================================================ */

/* Step 4 — Let AI write your listing CTA */
.sell-ai-cta {
  background:
    linear-gradient(rgba(217, 166, 37, 0.06), rgba(217, 166, 37, 0.06)),
    var(--bg-1) !important;
}

/* Step 5 — courier picker on the delivery step (selected state) */
.sell-courier.is-selected {
  background:
    linear-gradient(rgba(217, 166, 37, 0.05), rgba(217, 166, 37, 0.05)),
    var(--bg-1) !important;
}

/* Step 6 — visibility tiles (Public / Sell to a specific person) */
.sell-audience-tile:has(input:checked) {
  background:
    linear-gradient(rgba(217, 166, 37, 0.06), rgba(217, 166, 37, 0.06)),
    var(--bg-1) !important;
}

/* Step 9 — parcel-size suggestion + downsize warning + selected tile */
.sell-parcel-suggest {
  background:
    linear-gradient(rgba(217, 166, 37, 0.05), rgba(217, 166, 37, 0.05)),
    var(--bg-1) !important;
}
.sell-parcel-warning {
  background:
    linear-gradient(rgba(217, 166, 37, 0.06), rgba(217, 166, 37, 0.06)),
    var(--bg-1) !important;
}
/* .sell-parcel-tile.is-selected already paints solid gold,
   no fix needed — but keep the others (tile bg already solid). */

/* Step 10 — boost-tier picker (selected state) + payment-method picker */
.sell-boost.is-selected {
  background:
    linear-gradient(rgba(217, 166, 37, 0.06), rgba(217, 166, 37, 0.06)),
    var(--bg-1) !important;
}
.sell-pay-method.is-selected {
  background:
    linear-gradient(rgba(217, 166, 37, 0.05), rgba(217, 166, 37, 0.05)),
    var(--bg-1) !important;
}

/* "Sell to a specific person" panel — HOW TO SHARE wrapper +
   By-email / By-private-code tiles in their selected state. */
.sell-private-panel {
  background:
    linear-gradient(rgba(217, 166, 37, 0.04), rgba(217, 166, 37, 0.04)),
    var(--bg-1) !important;
}
.sell-fulfil-tile:has(input:checked) {
  background:
    linear-gradient(rgba(201, 162, 74, 0.04), rgba(201, 162, 74, 0.04)),
    var(--bg-1) !important;
}
/* Tile resting state may also have a translucent / no bg — give
   it the same solid base so clicking around doesn't reveal the
   hex grid behind individual tiles. */
.sell-fulfil-tile {
  background-color: var(--bg-1) !important;
}

/* Step 5 — condition radio cards (New / Like new / Excellent /
   Very good / Good). The :checked +span rule used to replace
   the resting solid bg with rgba alone, letting the hex grid
   leak through the selected card. */
.sell-radio input:checked + span {
  background:
    linear-gradient(rgba(217, 166, 37, 0.05), rgba(217, 166, 37, 0.05)),
    var(--bg-1) !important;
}

/* SnapScan QR panel — shown on the payment step when SnapScan is the
   selected method. Mirrors the visual language of the rest of the pay
   surface (rounded card, gold accents) but with extra centred padding
   around the QR image so it scans cleanly. */
.sell-pay-snapscan {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  background: linear-gradient(rgba(217, 166, 37, 0.04), rgba(217, 166, 37, 0.02)), var(--bg-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.sell-pay-snapscan-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.sell-pay-snapscan-head strong {
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
  color: var(--ink);
}
.sell-pay-snapscan-amount {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--gold);
  letter-spacing: var(--tracking-wide);
}
.sell-pay-snapscan-qr {
  width: 240px;
  height: 240px;
  border-radius: 12px;
  background: #FFFFFF;
  padding: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.sell-pay-snapscan-link {
  font-size: var(--fs-12);
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sell-pay-snapscan-link:hover { color: #F4CC55; }
.sell-pay-snapscan-hint {
  font-size: var(--fs-12);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
}
.sell-pay-snapscan-hint.is-paid {
  color: #6EE7B7;
}
.sell-pay-snapscan-hint.is-error {
  color: #FCA5A5;
}
.sell-pay-snapscan-cancel {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: var(--fs-12);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 8px;
}
.sell-pay-snapscan-cancel:hover { color: var(--ink); }

/* Hide payment-method tiles that are explicitly flagged hidden — the
   JS sets/clears this based on /api/public/config.snapscanEnabled. */
.sell-pay-method[hidden] { display: none !important; }

/* ============================================================
   MOBILE / TABLET PASS 2026-05-13
   ============================================================ */

/* Sticky bottom action bar was reserving 60px + safe-area on
   every viewport; on phones with the sysbar + nav above, the
   remaining form area was getting too tight. */
@media (max-width: 420px) {
  .sell-main {
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
  }
  .sell-form-group {
    gap: var(--s-2);
  }
}

/* iPad portrait — the wizard's max-width was clamping
   the upload dropzone to a column inside a 768px viewport. */
@media (max-width: 834px) {
  .sell-inner {
    max-width: 100%;
    padding-inline: var(--s-4);
  }
}

/* ============================================================
   PAYMENT-CONFIRMED OVERLAY — 2026-05-13
   Mirrors the login hex-wax-seal pattern at modal scale.
   ============================================================ */
.sell-success {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: radial-gradient(80% 60% at 50% 40%, rgba(20, 24, 29, 0.92) 0%, rgba(9, 7, 10, 0.98) 70%, rgba(9, 7, 10, 1) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: 24px;
  overflow: hidden;
}
.sell-success.is-open { opacity: 1; visibility: visible; }
.sell-success[aria-hidden="true"] { pointer-events: none; }
.sell-success.is-open { pointer-events: auto; }

/* Subtle hex grid backdrop — gold dots at low opacity */
.sell-success-hexgrid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(217, 166, 37, 0.18) 0%, transparent 1.5px),
    radial-gradient(circle at 50% 50%, rgba(217, 166, 37, 0.10) 0%, transparent 1.5px);
  background-size: 36px 62px, 36px 62px;
  background-position: 0 0, 18px 31px;
  opacity: 0.5;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 70%);
}
.sell-success-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 30% at 50% 38%, rgba(217, 166, 37, 0.16) 0%, transparent 70%),
    radial-gradient(30% 25% at 50% 60%, rgba(217, 166, 37, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.sell-success-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 440px;
  width: 100%;
  padding: 36px 32px 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(20, 24, 29, 0.85) 0%, rgba(13, 16, 20, 0.92) 100%);
  border: 1px solid rgba(217, 166, 37, 0.22);
  border-radius:var(--r-5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 30px 70px -20px rgba(0, 0, 0, 0.7),
    0 0 60px -20px rgba(217, 166, 37, 0.25);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1) 120ms, transform 460ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}
.sell-success.is-open .sell-success-card {
  opacity: 1;
  transform: translateY(0);
}

/* Hex wax seal — smaller version of the login pattern.
   140×152 hex with embossed Logo.webp emblem, sheen sweep. */
.sell-success-seal {
  position: relative;
  width: 140px;
  height: 152px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 72% 82%, rgba(141, 103, 17, 0.60) 0%, rgba(141, 103, 17, 0) 34%),
    radial-gradient(circle at 36% 28%,
      #FAEC9A 0%,
      #F0C64D 24%,
      #D9A625 50%,
      #B88417 78%,
      #8D6711 100%);
  filter:
    drop-shadow(0 18px 36px rgba(217, 166, 37, 0.55))
    drop-shadow(0 0 24px rgba(240, 198, 77, 0.35));
  transform: scale(0.25) rotate(-15deg);
  opacity: 0;
}
.sell-success.is-open .sell-success-seal {
  animation: sell-seal-stamp 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 240ms forwards;
}
.sell-success-seal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/images/Logo.webp');
  background-size: 72px 72px;
  background-repeat: no-repeat;
  background-position: center;
  filter:
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(217, 166, 37, 0.35));
  opacity: 0;
  transform: scale(0.35) rotate(-10deg);
}
.sell-success.is-open .sell-success-seal::before {
  animation: sell-seal-emblem 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 420ms forwards;
}
.sell-success-seal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.55) 52%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-100%);
}
.sell-success.is-open .sell-success-seal::after {
  animation: sell-seal-sheen 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 740ms forwards;
}
@keyframes sell-seal-stamp {
  0%   { transform: scale(0.25) rotate(-15deg); opacity: 0; }
  40%  { transform: scale(1.22) rotate(-2deg);  opacity: 1; }
  65%  { transform: scale(0.96) rotate(0deg);   opacity: 1; }
  100% { transform: scale(1)    rotate(0deg);   opacity: 1; }
}
@keyframes sell-seal-emblem {
  0%   { opacity: 0; transform: scale(0.35) rotate(-10deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(3deg);   }
  100% { opacity: 1; transform: scale(1)    rotate(0deg);   }
}
@keyframes sell-seal-sheen {
  0%   { opacity: 0; transform: translateX(-100%); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

.sell-success-eyebrow {
  font-family: var(--font-mono);
  font-size:var(--fs-10);
  font-weight: var(--fw-700);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}
.sell-success-title {
  margin: 0;
  font-family: var(--font-display);
  font-size:var(--fs-24);
  font-weight: var(--fw-700);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  max-width: 32ch;
}
.sell-success-tier {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(217, 166, 37, 0.10);
  border: 1px solid rgba(217, 166, 37, 0.42);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-700);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.sell-success-tier-pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px rgba(94, 168, 114, 0.8);
}
.sell-success-tier-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(94, 168, 114, 0.55);
  animation: sell-success-tier-pulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes sell-success-tier-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}
.sell-success-tier-sep { color: rgba(217, 166, 37, 0.45); }
.sell-success-tier-duration { color: var(--gold-light); }

.sell-success-message {
  margin: 0;
  font-size:var(--fs-14);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 44ch;
}
.sell-success-message strong { color: var(--ink); font-weight: var(--fw-700); }

.sell-success-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: var(--fw-700);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  background: linear-gradient(180deg, #E8BD45 0%, var(--gold) 100%);
  border: 1px solid var(--gold);
  color: var(--gold-ink);
  margin-top: 4px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 24px -12px rgba(217, 166, 37, 0.55);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sell-success-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 30px -12px rgba(217, 166, 37, 0.7);
}
.sell-success-cta svg { width: 14px; height: 14px; }

.sell-success-foot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: var(--fw-600);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}
.sell-success-foot svg { width: 11px; height: 11px; color: var(--gold); opacity: 0.75; }

@media (max-width: 480px) {
  .sell-success-card { padding: 28px 22px 22px; gap: 12px; }
  .sell-success-seal { width: 116px; height: 126px; }
  .sell-success-seal::before { background-size: 60px 60px; }
  .sell-success-title { font-size:var(--fs-20); }
  .sell-success-message { font-size:var(--fs-13); }
}

@media (prefers-reduced-motion: reduce) {
  .sell-success-seal { transform: scale(1) rotate(0deg); opacity: 1; animation: none; }
  .sell-success-seal::before { animation: none; opacity: 1; transform: scale(1); }
  .sell-success-seal::after { animation: none; opacity: 0; }
  .sell-success-tier-pulse::after { animation: none; }
}

/* ============================================================
   PAKSTOOR HEAVY — group divider + heavy-band tiles + warnings.
   Added 2026-05-28. Used alongside the existing .sell-parcel-tile
   styles above; standard XS-XXL tiles are unchanged.

   Layout: rendered inside the same #sellParcelGrid CSS Grid as
   standard tiles. The group divider uses `grid-column: 1/-1` to
   span the full row, then heavy tiles fall back to the default
   auto-flow placement on the next row. No horizontal overflow on
   any viewport; cards wrap via auto-fill minmax(150px, 1fr).
   ============================================================ */
.sell-parcel-group-head {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0 6px;
  margin-top: 6px;
  border-top: 1px dashed var(--line, #2A313A);
}
.sell-parcel-group-title {
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size: var(--fs-14);
  font-weight: var(--fw-700);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #D9A625);
}
.sell-parcel-group-helper {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--ink-muted, #A6AFB9);
  max-width: 600px;
}

/* Per-tier color accents on every parcel tile (user-approved scheme
   2026-05-28). Each tile gets a `data-size-id` attribute set by
   sell.js's renderParcelBands. The accent paints the left border
   at rest, the right side of the gradient on hover, and the
   selected-state background. Heavy tiles use the same accent
   variable — only their group differs visually via the row break
   above (sell-parcel-group-head). */
.sell-parcel-tile[data-size-id="XS"],
.sell-parcel-tile[data-size-id="S"]   { --tile-accent: #5EA872; }      /* green */
.sell-parcel-tile[data-size-id="M"],
.sell-parcel-tile[data-size-id="L"]   { --tile-accent: #9FC7E8; }      /* blue */
.sell-parcel-tile[data-size-id="XL"],
.sell-parcel-tile[data-size-id="XXL"] { --tile-accent: #D9A625; }      /* gold */
.sell-parcel-tile[data-size-id="HVY"] { --tile-accent: #A078FF; }      /* purple */
.sell-parcel-tile[data-size-id="SHV"] { --tile-accent: #7B4FBE; }      /* deep purple */
.sell-parcel-tile[data-size-id="UHV"] { --tile-accent: #E3902D; }      /* amber */
.sell-parcel-tile[data-size-id="TTN"] { --tile-accent: #B82B26; }      /* crimson */

.sell-parcel-tile {
  border-left: 3px solid var(--tile-accent, var(--bg-3, #2B313A));
}
.sell-parcel-tile:hover {
  border-color: var(--tile-accent, var(--gold, #D9A625));
}
.sell-parcel-tile.is-selected {
  background: var(--tile-accent, var(--gold, #D9A625));
  border-color: var(--tile-accent, var(--gold, #D9A625));
  color: var(--gold-ink, #14181D);
}
.sell-parcel-tile.is-selected .sell-parcel-tile-dims,
.sell-parcel-tile.is-selected .sell-parcel-tile-desc {
  color: var(--gold-ink, #14181D);
  opacity: 0.85;
}
/* Heavy tiles keep the same accent system but get a thicker
   left bar so the row reads as a distinct family at a glance. */
.sell-parcel-tile.is-heavy {
  border-left-width: 4px;
}
.sell-parcel-tile-helper {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #D9A625);
  margin-top: 6px;
  font-weight: var(--fw-600);
}
.sell-parcel-tile.is-selected .sell-parcel-tile-helper {
  color: var(--gold-ink, #14181D);
}

/* Accuracy warning — info-card variant, sits below the grid on
   every render. Distinguished from the downgrade warning above
   (which only renders when the seller picks below the suggested
   size). Mobile reflow handled by flex-wrap on the inner row. */
.sell-parcel-accuracy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-2, #232932);
  border: 1px solid var(--line, #2A313A);
  border-radius: 8px;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--ink-muted, #A6AFB9);
}
.sell-parcel-accuracy svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--gold, #D9A625);
  margin-top: 1px;
}
.sell-parcel-accuracy span { min-width: 0; }

/* Review-step confirmation warning. Sits in a .rv-row but the dt
   side is empty — this is a note row attached to the parcel-size
   value above. Pakstoor-heavy parcels carry the risk that a buyer
   pays courier on declared dims, so the seller must see this
   warning before publishing. */
.rv-row.rv-row--note dt { content: none; }
.rv-row.rv-row--note {
  border-top: 0;
  padding-top: 4px;
  padding-bottom: 12px;
}
.rv-parcel-warning {
  display: block;
  font-size: var(--fs-12);
  line-height: 1.55;
  color: var(--ink-muted, #A6AFB9);
  background: var(--warning-wash, rgba(227, 144, 45, 0.10));
  border-left: 3px solid var(--warning, #E3902D);
  padding: 8px 10px;
  border-radius: 4px;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .sell-parcel-group-head { padding: 12px 0 4px; margin-top: 4px; }
  .sell-parcel-group-title { font-size: var(--fs-13); }
  .sell-parcel-group-helper { font-size: var(--fs-11); }
  .sell-parcel-accuracy { font-size: var(--fs-11); padding: 9px 10px; }
  .rv-parcel-warning { font-size: var(--fs-11); }
}