/* Marketplace listing pages. Loaded in addition to site.css. */
.market-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.market-actions .btn-outline { color: #fff; }
.market-note { color: var(--mid); max-width: 40em; }
.market-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.market-badge {
  display: inline-block;
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.market-card h3 { margin-bottom: 6px; }
.market-card p { color: var(--mid); margin: 0 0 8px; }
.market-meta { color: var(--muted); font-size: 14px; }
.filter-card { margin-bottom: 22px; }
.listing-dl { display: grid; grid-template-columns: 10em 1fr; gap: 8px 16px; margin: 16px 0; }
.listing-dl dt { color: var(--mid); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.listing-dl dd { margin: 0; }
@media (max-width: 640px) {
  .listing-dl { grid-template-columns: 1fr; }
}

/* Marketplace home — USA red/black tokens (scoped so header/footer stay on site.css). */
body:has(.market-home) {
  /* Same navy/white/red tokens as site.css so site and Marketplace move together. */
  --bg: #F7F9FC;
  --ink: #0F1C3A;
  --darker: #0E1B38;
  --card: #FFFFFF;
  --border: #D9E0EC;
  --red: #C0392B;
  --red-dark: #A93226;
  --white: #0F1C3A;
  --on-primary: #FFFFFF;
  --text: #0F1C3A;
  --light: #f5f5f5;
  --muted: #45516B;
  --mid: #5B6680;
  --blue: #1F6FB2;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
}

.market-home { font-family: Inter, system-ui, sans-serif; }
.market-wrap { width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 48px; }
.market-home [hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.market-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 128px;
  padding: 22px 0 10px;
}
.market-hero h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 6px;
}
.market-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 400;
  max-width: 40em;
}

a.market-sell,
a.market-sell:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--red);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  flex: 0 0 auto;
}
a.market-sell:hover {
  background: var(--red-dark);
  color: var(--on-primary);
}
a.market-sell:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.market-searchbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 25;
  padding: 8px 0 6px;
  background: rgba(26, 26, 26, 0.94);
  backdrop-filter: blur(14px);
}
.market-search { display: flex; gap: 10px; align-items: center; }
.market-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--red);
  color: var(--muted);
}
.market-field-q { flex: 1 1 auto; min-width: 0; }
.market-field-loc { flex: 0 0 240px; }
.market-field:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.6);
}
.market-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.market-home .market-field input {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
}
.market-home .market-field input:focus { border: 0; outline: none; box-shadow: none; }
.market-home .market-field input::placeholder { color: var(--muted); opacity: 1; }

.market-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.market-chips::-webkit-scrollbar { display: none; }
a.market-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  border: 1px solid var(--blue);
}
a.market-chip:hover { background: #2a2a2a; color: var(--white); }
a.market-chip.is-active,
a.market-chip.is-active:hover,
a.market-chip.is-active:focus {
  background: var(--red);
  color: var(--on-primary);
  border-color: var(--red);
  font-weight: 700;
}
a.market-chip:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.market-kicker {
  margin: 6px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.market-pickup {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.market-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.market-photo { min-width: 0; }
.market-photo a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease;
}
.market-photo a:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 57, 43, 0.40);
}
.market-photo a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.market-photo-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--darker);
}
.market-photo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 150ms ease;
}
.market-photo a:hover .market-photo-media img { transform: scale(1.02); }
.market-photo-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--darker);
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
}
/* Overlay for a real price. Sample cards omit it so Contact/Ask is not repeated under the photo. */
.market-photo-pill {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(17, 17, 17, 0.85);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
body:has(.market-home) .nav-links a.active {
  color: var(--white);
  border-bottom-color: #C0392B;
}
/* Hamburger rows share a 1px #2a2a2a divider, so the desktop border never reads as the underline. */
@media (max-width: 1280px) {
  body:has(.market-home) .nav-links a.active {
    border-bottom-color: #2a2a2a;
    text-decoration: none;
  }
}
.market-photo-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
}
.market-photo-price {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.market-photo-title {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.market-photo-meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.market-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0 20px;
  color: var(--muted);
}
.market-empty p { margin: 0; }

.market-skeleton {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.market-skeleton span {
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  background: linear-gradient(110deg, var(--card) 30%, #2a2a2a 48%, var(--card) 70%);
  background-size: 200% 100%;
  animation: market-shimmer 1.4s ease-in-out infinite;
}
@keyframes market-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.market-shop-block { margin: 28px 0 8px; }
.market-shop { margin: 0; font-size: 13px; font-weight: 500; }
.market-shop a { color: var(--mid); text-decoration: none; }
.market-shop a:hover { color: var(--blue); }
.market-home .gear-disclosure {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  margin: 6px 0 0;
}

.market-flagship { margin-top: 28px; padding-top: 8px; }
.market-flagship h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 6px;
}
.market-flagship-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 14px;
  max-width: 46em;
}
.market-flagship-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 20px;
}
.market-flagship .tile {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: block;
}
.market-flagship .tile h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.market-flagship .tile p {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 6px;
}
.market-flagship .rental-card > a {
  color: var(--blue);
  font-size: 13px;
}

@media (min-width: 768px) {
  .market-photo-grid,
  .market-skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .market-flagship-row { grid-template-columns: 1fr 1fr; }
  .market-wrap { width: min(1200px, calc(100% - 48px)); }
}
@media (min-width: 1280px) {
  .market-photo-grid,
  .market-skeleton { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 700px) {
  .market-hero {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 16px 0 8px;
    gap: 12px;
  }
  .market-hero h1 { font-size: 22px; }
  .market-hero p { font-size: 15px; }
  .market-search { flex-direction: column; align-items: stretch; }
  .market-field-loc { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .market-photo a,
  .market-photo-media img { transition: none; }
  .market-skeleton span { animation: none; }
}

/* Browse filters. Colors come from the USA tokens on body:has(.market-home). */
.market-browse .market-search { flex-wrap: wrap; }
.market-browse .market-field-q { flex: 1 1 280px; }
/* Phones: the search stacks in a column, where a 280px basis became a 280px-tall field. */
@media (max-width: 700px) { .market-browse .market-field-q { flex: 0 0 auto; } }
.market-browse .market-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  text-decoration: none;
}
.market-browse .market-apply:hover { background: var(--red-dark); }
.market-browse .market-apply:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.market-browse .market-more {
  margin: 0 0 8px;
  padding: 0 14px 8px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--red) 55%, transparent);
  border-radius: 12px;
}
.market-browse .market-more summary {
  cursor: pointer;
  padding: 12px 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.market-browse .field label {
  color: var(--muted);
}
.market-browse input,
.market-browse select {
  background: var(--darker);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--red) 55%, transparent);
  border-radius: 10px;
}
.market-browse input:focus,
.market-browse select:focus {
  border-color: var(--red);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 60%, transparent);
}
.market-browse .market-field input {
  border: 0;
  box-shadow: none;
  background: transparent;
}
.market-browse .market-filter-note,
.market-browse .market-result-count {
  color: var(--blue);
}
.market-browse .market-filter-note {
  margin: 0 0 12px;
  font-size: 13px;
}
.market-browse .market-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 4px 0 8px;
}
.market-browse .market-clear {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.market-browse .market-clear:hover { color: var(--blue); }
.market-browse .market-result-count {
  margin: 0 0 10px;
  font-size: 13px;
}
.market-browse .status.err { color: var(--red); }
@media (max-width: 700px) {
  .market-browse .market-apply { width: 100%; }
}

/* Mobile polish */
a.market-sell, a.market-sell:focus { height: 44px; min-height: 44px; }
a.market-chip { height: 44px; }
.market-kicker, .market-photo-badge { font-size: 12.5px; }
.market-search .market-apply {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--red); color: var(--on-primary); font-size: 15px; font-weight: 700;
  cursor: pointer; flex: 0 0 auto;
}
.market-search .market-apply:hover { background: var(--red-dark); }
.market-search .market-apply:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* Chip row scroll cue: fade on the right edge while more chips are off-screen */
.market-chips-wrap { position: relative; }
.market-chips {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  padding-right: 32px;
}
.market-chips.is-end { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 720px) {
  .market-search .market-apply { width: 100%; }
}

/* Seller photo upload thumbnails (/marketplace/post). Layout only. */
.market-photo-thumbs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.market-photo-thumbs:empty { display: none; }
.market-photo-thumb { position: relative; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 8px; overflow: hidden; background: #f4f4f4; }
.market-photo-thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.market-photo-thumb.is-uploading img { opacity: 0.5; }
.market-photo-thumb-actions { display: flex; gap: 2px; padding: 4px; }
.market-photo-thumb-actions button { flex: 1; min-height: 32px; font-size: 12px; cursor: pointer; }
.market-photo-thumb-status { position: absolute; top: 6px; left: 6px; font-size: 11px; background: rgba(255, 255, 255, 0.9); padding: 2px 6px; border-radius: 4px; }

/* ===== Navy + white theme: Marketplace =====
   Slim navy top bar (search + category chips) under the header; one red
   "Sell" lives in the header. Listing grids stay plain white. */
.market-topbar {
  position: sticky; top: var(--nav-h); z-index: 25;
  background: var(--navy);
  box-shadow: 0 0 0 100vmax var(--navy);
  clip-path: inset(0 -100vmax);
  padding: 8px 0 0;
}
.market-topbar .market-searchbar { position: static; background: transparent; backdrop-filter: none; padding: 0; }
.market-searchbar { background: var(--surface, #fff); }
.market-field { background: #FFFFFF; border: 1px solid #C5CFDF; color: var(--mid); height: 44px; }
.market-field:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(19,38,79,0.18); }
.market-topbar .market-field { border-color: transparent; }
.market-topbar .market-field:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,0.45); }
.market-home .market-field input::placeholder { color: var(--mid); }
/* Search is secondary: red stays reserved for Sell. */
.market-search .market-apply {
  background: transparent; color: var(--navy); border: 1.5px solid var(--navy); min-height: 44px;
}
.market-search .market-apply:hover { background: var(--navy-soft, #E8EEF8); }
.market-topbar .market-search .market-apply { color: #fff; border-color: rgba(255,255,255,0.6); }
.market-topbar .market-search .market-apply:hover { background: rgba(255,255,255,0.12); }
.market-topbar .market-search .market-apply:focus-visible { outline-color: #fff; }

.market-chips { padding: 8px 0 10px; }
.market-chips.market-chips { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
a.market-chip, span.market-chip {
  background: #FFFFFF; color: var(--navy-ink, #0F1C3A); border: 1px solid #C5CFDF; min-height: 44px; height: 44px;
}
a.market-chip:hover { background: var(--navy-soft, #E8EEF8); color: var(--navy-ink, #0F1C3A); }
.market-topbar a.market-chip { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.35); }
.market-topbar a.market-chip:hover { background: rgba(255,255,255,0.16); color: #fff; }
.market-topbar span.market-chip.is-disabled { display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; background: transparent; color: var(--on-navy-muted, #C3CDE0); border: 1px dashed rgba(255,255,255,0.3); }
.market-topbar a.market-chip:focus-visible { outline-color: #fff; }
.market-topbar a.market-chip.is-active,
.market-topbar a.market-chip.is-active:hover { background: var(--red); color: var(--on-primary); border-color: var(--red); }

.market-hero { min-height: 0; padding: 18px 0 6px; }
.market-photo a { background: #FFFFFF; border-color: var(--border); }
.market-photo a:hover { border-color: #B9C5DA; }
.market-photo-media { background: #EEF1F6; }
.market-photo-badge { background: rgba(14,27,56,0.85); color: #fff; }
.market-actions .btn-outline { color: var(--navy); }
.market-browse .market-more { border-color: var(--border); background: #fff; }
.market-browse input, .market-browse select { background: #fff; border-color: #C5CFDF; }
.market-skeleton span { background: linear-gradient(110deg, #EEF1F6 30%, #F7F9FC 48%, #EEF1F6 70%); background-size: 200% 100%; }
body:has(.market-home) .nav-links a.active { color: #fff; }
@media (max-width: 1280px) {
  body:has(.market-home) .nav-links a.active { border-bottom-color: rgba(255,255,255,0.1); }
}
@media (max-width: 700px) {
  .market-topbar .market-search { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .market-topbar .market-field-q { flex: 1 1 60%; }
  .market-topbar .market-field-loc { display: none; }
  .market-topbar .market-search .market-apply { width: auto; padding: 0 16px; }
  .market-hero h1 { font-size: 22px; }
}

/* ===== Concept C2: category grid, operator strip, mobile bottom bar ===== */
.market-chips.market-cats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  overflow: visible; padding: 4px 0 12px;
  -webkit-mask-image: none; mask-image: none;
}
@media (min-width: 900px) { .market-chips.market-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.market-topbar a.market-cat, .market-cat-soon {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px;
  height: auto; min-height: 72px; padding: 10px; border-radius: 12px; white-space: normal;
  background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none;
}
.market-cat-icon { width: 22px; height: 22px; color: #fff; order: -1; }
.market-cat-soon { border-style: dashed; color: var(--on-navy-muted, #C3CDE0); }
.market-cat-soon .market-cat-icon { color: var(--on-navy-muted, #C3CDE0); }
.market-topbar .market-cat-soon span.market-chip.is-disabled {
  display: inline; height: auto; min-height: 0; padding: 0; border: 0; background: none;
  color: inherit; font-size: 13px; font-weight: 700; white-space: normal;
}
.market-network {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; padding: 12px 14px; min-height: 56px;
  border-radius: 12px; background: var(--navy, #13264F); color: #fff; text-decoration: none;
}
.market-network-bar { width: 4px; align-self: stretch; border-radius: 2px; background: rgba(255,255,255,0.5); }
.market-network-copy { flex: 1; display: flex; flex-direction: column; }
.market-network-copy strong { font-size: 14px; }
.market-network-copy span { font-size: 13px; color: var(--on-navy-muted, #C3CDE0); }
.market-network-more { font-size: 13px; font-weight: 700; white-space: nowrap; }
.market-network:hover .market-network-more { text-decoration: underline; }
.market-network:focus-visible { outline: 2px solid var(--navy, #13264F); outline-offset: 2px; }

:root { --mbar-h: 76px; } /* fixed mobile nav height (without the safe area) */
.market-bottombar { display: none; }
@media (max-width: 1024px) {
  .site-header .btn-sell { display: none; }
  .market-bottombar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    align-items: flex-end; justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--border, #D9E0EC);
    box-shadow: 0 -6px 20px rgba(15,28,58,0.12);
  }
  body.has-bottombar, body.has-bottombar:has(.market-home) { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px)); }
  .mbar-item, .mbar-sell {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 48px; min-width: 44px; color: #4A5672; font-size: 11.5px; font-weight: 600; text-decoration: none;
  }
  .mbar-item svg { width: 22px; height: 22px; }
  .mbar-item[aria-current="page"] { color: var(--navy, #13264F); font-weight: 700; }
  .mbar-sell { color: #9E2F24; font-weight: 700; }
  .mbar-sell-dot {
    display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
    background: var(--red); color: #fff; font-size: 28px; line-height: 1; border: 4px solid #fff;
    box-shadow: 0 6px 16px rgba(192,57,43,0.35);
  }
  .mbar-sell:focus-visible, .mbar-item:focus-visible { outline: 2px solid var(--navy, #13264F); outline-offset: -2px; }
}

/* ===== v2: photos, inline search, feed-first ===== */
.market-topbar .market-search { flex-direction: row; flex-wrap: nowrap; gap: 8px; align-items: center; }
.market-topbar .market-field-q { flex: 1 1 auto; padding: 0 4px 0 14px; }
.market-field-go {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: -4px; flex: 0 0 auto;
  border: 0; background: transparent; color: var(--navy, #13264F); cursor: pointer; border-radius: 10px;
}
.market-field-go:hover { background: var(--navy-soft, #E8EEF8); }
.market-field-go:focus-visible { outline: 2px solid var(--navy, #13264F); outline-offset: -2px; }
.market-field-go .market-icon { width: 20px; height: 20px; }
.market-loc-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; flex: 0 0 auto;
  border-radius: 12px; background: rgba(255,255,255,0.12); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.market-loc-chip:hover { background: rgba(255,255,255,0.2); }
.market-loc-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.market-loc-chip .market-icon { width: 16px; height: 16px; }

/* Photo category tiles: label on a dark scrim so white text stays AA. */
.market-topbar a.market-cat, .market-cat-soon {
  position: relative; overflow: hidden; min-height: 76px; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(8,18,40,0.15) 0%, rgba(8,18,40,0.85) 72%), var(--cat-img, none) center / cover, rgba(255,255,255,0.08);
  font-size: 12.5px; hyphens: none; overflow-wrap: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; padding-top: 44px;
}
.market-topbar a.market-cat .market-cat-icon, .market-cat-soon .market-cat-icon { display: none; }
.market-cat-soon { border-style: dashed; color: #E1E7F2; }
.market-topbar .market-cat-soon span.market-chip.is-disabled { font-size: 12.5px; color: #E1E7F2; }
.market-topbar a.market-cat:hover { filter: brightness(1.08); }
@media (max-width: 380px) { .market-topbar a.market-cat, .market-cat-soon { font-size: 12px; padding-left: 8px; padding-right: 6px; } }

.market-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 0 10px; flex-wrap: wrap; }
.market-feed-head h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.market-feed-head .market-kicker { margin: 0; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.market-sample-label {
  position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 7px; border-radius: 6px;
  background: rgba(8,18,40,0.78); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
@media (max-width: 380px) {
  .market-chips.market-cats { gap: 6px; }
  .market-topbar a.market-cat, .market-cat-soon { padding-left: 7px; padding-right: 4px; letter-spacing: -0.01em; }
  .market-topbar .market-cat-soon span.market-chip.is-disabled { font-size: 11.5px; }
}
.market-sample-label { top: auto; bottom: 8px; left: 8px; }
.market-topbar a.market-cat, .market-cat-soon {
  background: linear-gradient(180deg, rgba(8,18,40,0) 25%, rgba(8,18,40,0.82) 80%), var(--cat-img, none) center / cover, rgba(255,255,255,0.08);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ---- Oct 30 fixes: area-code strip, buy links, fine print, Rentals chip ---- */
.market-area {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 14px 0; padding: 12px 16px; border-radius: 14px;
  background: var(--navy, #13264F); color: #fff;
}
.market-area-pill {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.market-area-copy { margin: 0; flex: 1 1 260px; font-size: 14.5px; line-height: 1.45; color: #E1E7F2; }
.market-area-copy strong { color: #fff; }
.market-area-link { color: #fff; font-weight: 700; font-size: 14px; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.market-area-link:hover { color: #FFD9D4; }

.market-photo-price { font-weight: 800; }

.market-buy { margin: 18px 0; padding: 14px 16px; border: 1px solid #E3E7EF; border-radius: 14px; background: #FAFBFD; }
.market-buy-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.market-buy-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.market-buy-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--red); color: var(--red); font-weight: 700; text-decoration: none;
}
.market-buy-link:hover, .market-buy-link:focus-visible { background: var(--red); color: #fff; }
.market-badge-sponsored { font-size: 12px; }
.market-fine-h { font-size: 16px; font-weight: 800; margin: 0 0 10px; letter-spacing: 0; }
.market-fine-note { font-size: 13.5px; line-height: 1.5; color: #4A5468; margin: 6px 0 0; }

.market-fine { margin: 20px 0; padding: 16px 18px; border-radius: 14px; background: #F4F6FA; }
.market-fine p.market-pickup, .market-fine p.market-disclaimer {
  font-size: 14.5px; line-height: 1.6; color: #2E3648; margin: 0 0 12px; padding-left: 14px; position: relative;
}
.market-fine p.market-pickup::before, .market-fine p.market-disclaimer::before {
  content: ""; position: absolute; left: 0; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--red);
}
.market-fine p:last-child { margin-bottom: 0; }
.market-fine p.market-disclaimer { color: #4A5468; }

/* Rentals: styled "coming soon" chip, never a link */
span.market-chip.market-chip-soon {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 36px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: default;
  background: transparent; color: var(--red); border: 1.5px dashed var(--red);
}
.market-topbar span.market-chip.market-chip-soon,
.market-topbar .market-cat-soon span.market-chip.market-chip-soon {
  background: transparent; border: 0; color: #fff; min-height: 0; padding: 0;
}
.market-cat-soon { border: 1.5px dashed var(--red) !important; }

/* All makes, Tesla first (Designer spec). Palette: navy / red / white / black only. */
.market-anymake { margin: 4px 0 0; font-size: 14px; color: var(--navy); }
.market-make-chips { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; pointer-events: none; }
.market-make-chip {
  font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: 11px; line-height: 1;
  letter-spacing: .04em; padding: 4px 6px; border-radius: 4px;
}
.market-make-chip-tesla { background: var(--red); color: #fff; text-transform: uppercase; }
.market-make-chip-fsd { background: var(--navy); color: #fff; text-transform: uppercase; }
.market-make-chip-fits { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.market-featured-teslas { background: var(--navy); color: #fff; border-radius: 12px; padding: 16px; margin: 16px 0; }
.market-featured-teslas[hidden] { display: none; }
.market-featured-teslas h2 { color: #fff; font-size: 18px; margin: 0 0 12px; }
.market-featured-teslas { min-width: 0; max-width: 100%; }
.market-featured-row { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.market-featured-row .market-photo { scroll-snap-align: start; }
.make-divider { color: var(--navy); }

/* Designer pass on PR 128 (existing tokens only). */
/* FSD (Supervised) pill: navy outline, never an orange/red tint. */
.market-badge.market-badge-fsd { border: 1px solid var(--navy); color: var(--navy); background: transparent; }
/* Even card heights in the 2-column grid: body fills the card, title clamps
   to 2 lines, price pinned to the bottom. */
.market-photo .market-photo-body { flex: 1 1 auto; }
.market-photo .market-photo-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.market-photo .market-photo-body > .market-photo-price { order: 10; margin-top: auto; padding-top: 6px; }
/* Meta and helper text: never lighter than the gray-500 floor on white (--muted is darker). */
.market-photo-meta, .market-photo-listed-by, .market-home .field-help, .market-home .market-note { color: var(--muted); }
.market-seller-pitch { margin: 0 0 12px; color: var(--text, inherit); font-size: 15px; line-height: 1.45; }

/* Demo (sample) listings: visible badge on detail pages. */
.market-badge-sample { display: inline-block; background: var(--navy); color: #fff; border: 1px solid var(--red); font-weight: 700; margin-right: 8px; }
.market-demo-note { color: var(--muted); }
.market-contact[disabled] { opacity: .6; cursor: not-allowed; }

/* Marketplace home hero (PR C): one big primary Post, secondary Browse. */
.market-home-hero { padding: 18px 0 8px; }
.market-home-hero h1 { font-size: clamp(28px, 6vw, 44px); font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.market-home-hero-sub { margin: 6px 0 14px; font-size: 17px; color: var(--text); }
.market-home-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.market-home-hero-post { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 12px; background: var(--red); color: #fff; font-size: 18px; font-weight: 800; text-decoration: none; }
.market-home-hero-post:hover { background: var(--red-dark); color: #fff; }
.market-home-hero-browse { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--navy); color: var(--navy); font-weight: 700; text-decoration: none; }
.market-feed-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--text); }

/* Area band: only area codes that have listings. */
.market-area-band { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.market-area-band[hidden] { display: none; }
.market-area-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 12px; border-radius: 999px; background: var(--navy); color: #fff; text-decoration: none; font-size: 13px; }
.market-area-chip strong { font-size: 15px; }

/* 3-step strip + trust line. */
.market-steps { margin: 22px 0 8px; padding: 16px; border-radius: 12px; background: var(--navy); color: #fff; }
.market-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.market-steps li { display: flex; gap: 10px; align-items: center; }
.market-step-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; flex: 0 0 auto; }
.market-trust-line { margin: 12px 0 0; font-weight: 700; }

/* Lower links: For local businesses, Rentals (coming). */
.market-later { margin: 18px 0 8px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.market-local-biz { color: var(--navy); font-weight: 700; font-size: 14px; }

/* Installed app (standalone): keep the sticky Post bar at every width. */
@media (display-mode: standalone) {
  .market-bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: flex-end; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--border); }
  .mbar-item, .mbar-sell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; color: var(--navy); font-size: 11.5px; font-weight: 600; text-decoration: none; }
  .mbar-item svg { width: 22px; height: 22px; }
  .mbar-sell-dot { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: var(--red); color: #fff; font-size: 28px; border: 4px solid #fff; }
  body.has-bottombar { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* First-run onboarding (public/js/marketplace-onboarding.js). */
.onboard { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(8,18,40,0.72); }
.onboard-card { width: min(420px, 100%); background: #fff; color: var(--text); border-radius: 16px; padding: 22px; border-top: 6px solid var(--red); }
.onboard-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.onboard-dots span { width: 8px; height: 8px; border-radius: 4px; background: var(--border); }
.onboard-dots span.is-on { width: 22px; background: var(--red); }
.onboard-count { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.onboard-primary { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; background: var(--red); color: #fff; font-weight: 800; text-decoration: none; margin-top: 8px; }
.onboard-later { background: #fff; color: var(--navy); border: 1px solid var(--navy); border-radius: 10px; min-height: 44px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.onboard-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: var(--navy); }
.onboard-body { margin: 0 0 8px; }
.onboard-link { color: var(--navy); font-size: 14px; }
.onboard-actions { display: flex; justify-content: space-between; margin-top: 14px; }
.onboard-skip { background: none; border: 0; color: var(--muted); font-weight: 600; min-height: 44px; cursor: pointer; }
.onboard-next { background: var(--red); color: #fff; border: 0; border-radius: 10px; min-height: 44px; padding: 0 22px; font-weight: 800; cursor: pointer; }

/* Gray "Sample" chip (Designer kit): top-left of the photo on every sample card. */
.market-photo .market-sample-label { top: 8px; bottom: auto; left: 8px; background: rgba(242,244,247,.94); color: var(--sample-ink); border: 1px solid var(--sample-line); border-radius: 6px; padding: 3px 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.market-photo-media { position: relative; }

/* Photo tag row: Sample chip + FSD badge inline on the photo (even tile heights). */
.market-photo-media .market-photo-tags { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; overflow: hidden; pointer-events: none; }
.market-photo-media .market-photo-tags > .market-sample-label,
.market-photo-media .market-photo-tags > .market-make-chips { position: static; }
.market-photo-media .market-photo-tags > .market-badge-fsd { background: #fff; white-space: nowrap; font-size: 10.5px; padding: 3px 7px; border-radius: 6px; margin: 0; }

/* Horizontal overflow fix: the card's visually-hidden label is position:absolute,
   so without a positioned ancestor inside the Featured track it escaped the
   track's overflow clip and widened the page (~2x at 413px). Make the track and
   card links containing blocks so everything stays inside the scroller. */
.market-featured-row, .market-photo > a { position: relative; }
/* Safety net: no page-level horizontal scroll. */
html, body { overflow-x: clip; }

/* + Post pill sits above the tab bar; pad the page so the last cards and their
   actions are never under the bar or the pill. */
@media (max-width: 1024px) {
  body.has-bottombar:has(.post-fab), body.has-bottombar:has(.market-home):has(.post-fab) { padding-bottom: calc(var(--mbar-h) + 76px + env(safe-area-inset-bottom, 0px)); }
  body.has-bottombar .post-fab { z-index: 60; }
}
body:not(.has-bottombar):has(.post-fab) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

/* Mobile scroll: only the search bar stays pinned. The topbar box dissolves
   (display: contents) so the category tiles scroll away with the page instead
   of holding about a third of the screen while scrolling. */
.market-topbar { position: static; display: contents; }
.market-topbar .market-searchbar { position: sticky; top: var(--nav-h); z-index: 25; background: var(--navy); box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax); padding: 8px 0; }
.market-topbar .market-cats { background: var(--navy); box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax); }
/* The category badge moves to the photo's bottom-right so it never sits on
   top of the Sample / TESLA / FSD tag row at the top-left. */
.market-photo-media .market-photo-badge { top: auto; bottom: 10px; right: 10px; }