/* ── marketplace browse overhaul (Task #704) + GS-460/463 ── */

/* Tab bar as P2 segmented control */
.browse-tabs.gs-seg,
.browse-tabs {
    display: flex;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 16px;
    padding: 3px;
    box-sizing: border-box;
    --ws-accent: #34C08F;
    background: var(--bg-elevated, #1A222C);
    border: 1px solid var(--border-color, #222B36);
    border-radius: 8px;
    gap: 2px;
}
.browse-tab-link,
.browse-tabs .gs-seg-opt {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted, #8A97A3);
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 9px 12px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.browse-tab-link:hover { color: #F4F7F9; }
.browse-tab-link.active,
.browse-tab-link.is-on,
.browse-tabs .gs-seg-opt.is-on {
    background: #34C08F;
    color: #0B0E12;
}
.tab-count {
    font-size: 0.62rem;
    background: rgba(11,14,18,0.18);
    color: inherit;
    padding: 1px 6px;
    border-radius: 0;
    font-weight: 700;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
}
.browse-tab-divider { display: none; }

/* GS-565: keep tabs readable on narrow viewports (short labels All/Parts/Wrecking/Cars) */
@media (max-width: 720px) {
    .browse-tabs.gs-seg,
    .browse-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        max-width: 100%;
    }
    .browse-tabs::-webkit-scrollbar { display: none; }
    .browse-tab-link,
    .browse-tabs .gs-seg-opt {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: 10px 8px;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
    }
}

/* Category bar — chamfer plates, no half-pill clip */
.category-bar {
    display: flex;
    gap: 8px;
    padding: 4px 0 16px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-inline: 8px;
}
.category-bar::-webkit-scrollbar { display: none; }

/* Wrecking & eBay card CTAs */
.enquire-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: none;
    border-radius: 8px 0 8px 8px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
    background: #34C08F;
    color: #0B0E12;
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-weight: 600;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    margin-top: 10px;
    transition: filter 0.15s;
    box-sizing: border-box;
    min-height: 40px;
}
.enquire-btn:hover { filter: brightness(1.08); color: #0B0E12; }

.ebay-btn {
    display:block;
    width:100%;
    padding:7px;
    border:1px solid #0064D2;
    border-radius:6px;
    background:rgba(0,100,210,0.1);
    color:#0064D2;
    font-weight:600;
    cursor:pointer;
    font-size:0.78rem;
    text-align:center;
    text-decoration:none;
    margin-top:8px;
    transition:all 0.15s;
    box-sizing:border-box;
}
.ebay-btn:hover { background:#0064D2; color:#fff; }

/* ── eBay detail-link wrappers (Task #731) ── */
.product-card-img-link {
    display:block;
    text-decoration:none;
}
.product-card-title-link {
    display:block;
    text-decoration:none;
    color:inherit;
}
.product-card-title-link:hover .product-card-title {
    color:var(--accent-text);
}
.detail-btn {
    display:flex;
    width:100%;
    align-items:center;
    justify-content:center;
    padding:9px;
    border:1px solid var(--accent);
    border-radius:6px;
    background:rgba(0,200,200,0.07);
    color:var(--accent-text);
    font-weight:600;
    cursor:pointer;
    font-size:0.78rem;
    text-align:center;
    text-decoration:none;
    margin-top:8px;
    transition:all 0.15s;
    box-sizing:border-box;
}
.detail-btn:hover { background:var(--accent); color:#0E1117; }

/* Tab source badges on cards */
.tab-badge {
    display:inline-block;
    padding:2px 6px;
    border-radius:4px;
    font-size:0.65rem;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    margin-bottom:6px;
    font-family:var(--font-mono,monospace);
}
.ebay-badge { background:rgba(0,100,210,0.12); color:#0064D2; }
.wrecking-badge { background:rgba(232,176,74,0.15); color:#B07820; }
.facebook-badge { background:rgba(24,119,242,0.14); color:#1877F2; }
.facebook-btn {
    display:block;
    width:100%;
    margin-top:8px;
    padding:10px 12px;
    border-radius:8px;
    background:rgba(24,119,242,0.12);
    color:#1877F2;
    font-weight:700;
    font-size:0.85rem;
    text-align:center;
    text-decoration:none;
    border:1px solid rgba(24,119,242,0.25);
    transition:all 0.15s;
    box-sizing:border-box;
}
.facebook-btn:hover { background:#1877F2; color:#fff; }

/* POA price label */
.poa-label { font-size:0.82rem; color:var(--text-muted); font-weight:500; }

/* Img placeholder — default hidden when used as onerror sibling under a real <img> */
.img-placeholder {
    width:100%;
    aspect-ratio:4/3;
    background:var(--bg-elevated);
    display:flex;
    align-items:center;
    justify-content:center;
}
/* Guard: never stack a second 4:3 box under a successfully loaded card image */
.product-card > img.product-card-img:not([style*="display: none"]) + .img-placeholder,
.product-card > img.product-card-img:not([style*="display: none"]) + a + .img-placeholder {
    display: none !important;
}

/* Featured store card — link wrapper */
a.store-card-link {
    display:block;
    text-decoration:none;
    color:inherit;
}
a.store-card-link .store-card { cursor:pointer; }
a.store-card-link:hover .store-card { border-color:var(--accent); }

/* Infinite scroll sentinel & spinner */
#browse-sentinel { height:40px; }
#browse-loading {
    display:none;
    text-align:center;
    padding:20px;
    color:var(--text-muted);
    font-size:0.82rem;
    grid-column:1/-1;
}
.browse-grid-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.browse-spinner {
    display:inline-block;
    width:18px;
    height:18px;
    border:2px solid var(--border-color);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin 0.7s linear infinite;
    vertical-align:middle;
    margin-right:6px;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── cross-file aliases: classes defined in browse.css but also used when
   marketplace_browse.css is the paired file in the lint check ── */
.browse-hero { text-align: center; padding: 40px 20px 30px; }
.browse-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas: "sidebar results";
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 40px;
    align-items: start;
}
.browse-layout { display: contents; }
.browse-results { grid-area: results; min-width: 0; }
.browse-toolbar { display: none; }
.browse-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.browse-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 100px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}
.browse-toolbar-rp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 8px;
    background: #34C08F;
    color: #0B0E12 !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.browse-filter-backdrop { display: none; }

/* GS-457 — Marketplace part cards (lot-card grammar, emerald workspace) */
.product-card {
    --ws-accent: #34C08F;
    background: var(--bg-card, #12181F);
    border: 1px solid var(--border-color, #1C242E);
    border-radius: 12px;
    overflow: visible;
    position: relative;
    transition: transform 0.16s cubic-bezier(.3,.7,0,1), box-shadow 0.16s;
}
@media (hover: hover) {
    .product-card:hover {
        transform: translateY(-3px);
        border-color: var(--border-color, #1C242E);
        box-shadow: 0 2px 0 0 #E8B04A, 0 14px 30px rgba(0,0,0,.45);
    }
}
.product-card:focus-within {
    box-shadow: 0 2px 0 0 #E8B04A, 0 14px 30px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion: reduce) {
    .product-card:hover { transform: none; }
}
.product-card-photo {
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: var(--bg-elevated, #1A222C);
}
.product-card-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    background: var(--bg-elevated);
    display: block;
}
.product-card-body { padding: 18px 14px 12px; }
.product-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-fit {
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 0.68rem;
    color: var(--text-muted, #5E6B78);
    margin-bottom: 10px;
}
.product-card-prow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.product-card-price {
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 1.05rem;
    font-weight: 600;
    color: #34C08F;
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.product-card-price.poa-label {
    font-size: 0.78rem;
    color: #34C08F;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.product-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border-color, #1C242E);
}
.product-card-meta {
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 0.64rem;
    color: var(--text-muted);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
/* On-photo provenance plate (fully inset — photo has overflow:hidden) */
.pc-plate-pulled {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 4px 11px 4px 10px;
    background: #34C08F;
    color: #0B0E12;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
    white-space: normal;
    max-width: calc(100% - 20px);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25;
    max-height: 2.6em;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.pc-plate-pulled.pc-plate--ebay {
    background: #8A97A3;
}
/* Light FB blue — matches .facebook-btn family; dual-class beats base green */
.pc-plate-pulled.pc-plate--facebook {
    background: #71AFFF;
    color: #0B0E12;
}
/* Punched stock tag */
.pc-punch {
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 3px 11px 3px 17px;
    color: #8A97A3;
    background: rgba(138, 151, 163, 0.14);
    border-radius: 4px;
    -webkit-mask: radial-gradient(circle at 8px 50%, transparent 3.2px, #000 3.6px);
    mask: radial-gradient(circle at 8px 50%, transparent 3.2px, #000 3.6px);
    white-space: nowrap;
}
.pc-grade {
    display: inline-flex;
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 3px 10px 3px 9px;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.pc-grade--a { color: #34C08F; background: rgba(52, 192, 143, 0.14); }
.pc-grade--b { color: #E8B04A; background: rgba(232, 176, 74, 0.14); }
.pc-grade--c { color: #8A97A3; background: rgba(138, 151, 163, 0.14); }
.tab-badge {
    display: inline-flex;
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 3px 10px 3px 9px;
    margin-bottom: 8px;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.ebay-badge { background: rgba(138, 151, 163, 0.14); color: #8A97A3; }
.wrecking-badge { background: rgba(232, 176, 74, 0.14); color: #E8B04A; }

.marketplace-filter-chips {
    max-width: 1200px;
    margin: 0 auto 12px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    box-sizing: border-box;
}
/* Inside .browse-page the column already has gutters — drop double side padding */
.browse-page .marketplace-filter-chips {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.filter-chip-label {
    color: var(--text-muted, #8A97A3);
    font: 600 0.62rem/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-right: 2px;
    flex: 0 0 auto;
}
.filter-chip-label--listed { margin-right: 4px; }
.filter-chip-label--seller {
    margin-left: 4px;
    flex: 1 0 100%; /* GS-565: Seller row starts on its own line on narrow screens */
    margin-top: 6px;
}
@media (min-width: 900px) {
    .filter-chip-label--seller {
        flex: 0 0 auto;
        margin-left: 10px;
        margin-top: 0;
    }
}
/* Beat base_au `a { color: accent }` — chips must look like chips, not green prose */
.browse-page a.filter-chip,
a.filter-chip,
.filter-chip {
    display: inline-flex !important;
    align-items: center;
    color: var(--text-muted, #8A97A3) !important;
    background: var(--bg-elevated, #1A222C) !important;
    border: 1px solid var(--border-color, #2A3541) !important;
    border-radius: 999px;
    padding: 6px 12px;
    font: 600 0.68rem/1 'JetBrains Mono', ui-monospace, monospace;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.browse-page a.filter-chip:hover,
.browse-page a.filter-chip.is-active,
a.filter-chip:hover,
a.filter-chip.is-active,
.filter-chip:hover,
.filter-chip.is-active {
    border-color: #34C08F !important;
    color: #F4F7F9 !important;
    background: rgba(52, 192, 143, .1) !important;
}
.filter-chip--clear { color: #E8B04A !important; }
/* cache-bust marker gs565-chip-v16 */
.marketplace-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 4px;
}
.marketplace-card-badges .tab-badge { margin-bottom: 3px; }
.source-badge--gearswap { color: #34C08F; background: rgba(52, 192, 143, .12); }
.source-badge--ebay { color: #5AA7FF; background: rgba(0, 100, 210, .14); }
.source-badge--facebook { color: #71AFFF; background: rgba(24, 119, 242, .14); }
.trust-badge--trusted { color: #E8B04A; background: rgba(232, 176, 74, .14); }
.trust-badge--verified { color: #34C08F; background: rgba(52, 192, 143, .12); }

/* Keep mobile shell single-column after this file's desktop aliases */
@media (max-width: 900px) {
    .browse-shell {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0 0 32px;
    }
    .browse-toolbar { display: flex !important; }
    .browse-results { width: 100%; min-width: 0; margin: 0; }
    .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    .products-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .browse-toolbar { flex-wrap: wrap; }
    .browse-toolbar-rp { flex: 1 1 100%; }
}

/* Tab info banner */
.tab-info-banner {
    max-width:1200px;
    margin:0 auto 10px;
    padding:8px 20px;
    font-size:0.78rem;
    color:var(--text-muted);
}


/* GS-463 CTAs */
.product-card .add-cart-btn,
.product-card a.add-cart-btn {
    --ws-accent: #34C08F;
    width: 100%;
    margin-top: 10px;
}
.product-card .rp-banner { max-width: 1100px; }

/* GS-549: vehicle refine must beat Bootstrap form reboot + native control chrome */
.marketplace-vehicle-refine {
  max-width: 1200px;
  margin: 0 auto 14px;
  padding: 0 20px;
  box-sizing: border-box;
}
.vehicle-refine-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.vehicle-refine-form .filter-chip-label {
  margin-right: 4px;
}
.browse-page .vehicle-refine-select,
.browse-page .vehicle-refine-q,
.vehicle-refine-select,
.vehicle-refine-q {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  background-color: var(--bg-elevated, #1A222C);
  color: var(--text-primary, #F4F7F9);
  border: 1px solid var(--border-color, #2A3541);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 38px;
  font: 500 0.85rem/1.2 Inter, system-ui, sans-serif;
  box-shadow: none;
  outline: none;
}
.browse-page .vehicle-refine-select,
.vehicle-refine-select {
  background-image: linear-gradient(45deg, transparent 50%, #8A97A3 50%),
    linear-gradient(135deg, #8A97A3 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
  cursor: pointer;
}
.browse-page .vehicle-refine-select:focus,
.browse-page .vehicle-refine-q:focus,
.vehicle-refine-select:focus,
.vehicle-refine-q:focus {
  border-color: #34C08F;
  box-shadow: 0 0 0 2px rgba(52, 192, 143, 0.18);
}
.browse-page .vehicle-refine-q,
.vehicle-refine-q {
  min-width: 180px;
  flex: 1 1 180px;
}
.browse-page .vehicle-refine-q::placeholder,
.vehicle-refine-q::placeholder {
  color: var(--text-muted, #8A97A3);
  opacity: 1;
}
.browse-page .vehicle-refine-go,
.vehicle-refine-go {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(52, 192, 143, 0.16);
  color: #34C08F;
  border: 1px solid #34C08F;
  border-radius: 8px;
  padding: 8px 14px;
  min-height: 38px;
  font: 700 0.85rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: none;
}
.browse-page .vehicle-refine-go:hover,
.vehicle-refine-go:hover {
  background: rgba(52, 192, 143, 0.28);
  color: #F4F7F9;
}
.marketplace-request-cta {
  max-width:1200px; margin:12px auto 18px; padding:14px 16px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  background: rgba(232,176,74,.1); border:1px solid rgba(232,176,74,.35); border-radius:12px;
}
.marketplace-request-cta__body { display:flex; flex-direction:column; gap:2px; color:var(--text-primary,#F4F7F9); }
.marketplace-request-cta__body span { color:var(--text-muted,#8A97A3); font-size:0.85rem; }
.marketplace-request-cta__btn {
  background:#E8B04A; color:#0E1117; font-weight:800; text-decoration:none;
  padding:10px 14px; border-radius:10px; white-space:nowrap;
}
@media (max-width: 700px) {
  .vehicle-refine-select, .vehicle-refine-q { flex: 1 1 100%; }
}