/* =========================================================
   BUAI — Marketplace consistency layer
   The marketplace grew page by page, so each page carries its
   own band background, heading size and card chrome. This file
   gives the whole marketplace ONE surface, ONE type scale and
   ONE card language — the one the listing page established
   (css/bsx-detail.css), which is the newest, cleanest system.

   Loaded after main/mpx/buai-theme everywhere a
   <body class="market-page …"> is rendered, so it only ever
   touches marketplace pages.

   Page backgrounds are neutralised (body + .cream bands) so
   every page sits on the same canvas. The hub still draws its
   own dark hero inside; that is the only intentional contrast.
   ========================================================= */

body.market-page {
    --mkt-ink: #17181c;
    --mkt-text: #2c2e33;
    --mkt-muted: #7b7d82;
    --mkt-faint: #a2a4a8;
    --mkt-line: #e8e8e2;
    --mkt-line-soft: #f0f0ea;
    --mkt-card: #fff;
    --mkt-canvas: #fbfbf8;
    --mkt-yellow: #f5c93c;
    --mkt-yellow-deep: #e9b91f;
    --mkt-radius: 14px;
    --mkt-radius-sm: 10px;
    --mkt-end: 1200px;
    --mkt-gap: 24px;

    background: var(--mkt-canvas);
    color: var(--mkt-text);
}

/* every band level (the old per-page eyebrows) shares the canvas */
body.market-page .cream,
body.market-page section.cream,
body.market-page .bs-browse,
body.market-page .svc-head,
body.market-page .svc-categories,
body.market-page .svc-list,
body.market-page .svc-search,
body.market-page .svc-tags,
body.market-page .bs-detail,
body.market-page .bs-form-page,
body.market-page .bs-seller-profile,
body.market-page .svc-business,
body.market-page .market-cat-page {
    background: transparent;
}

/* mpx-head keeps its strip but in the same tone as the canvas + hairline,
   so the section switcher reads as part of the page, not a second header */
body.market-page .mpx-head {
    background: var(--mkt-canvas);
    border-bottom: 1px solid var(--mkt-line);
}

/* =========================================================
   1. One content rail: every page column shares width + gutter
   ========================================================= */
body.market-page .bs-browse,
body.market-page .svc-head,
body.market-page .svc-search,
body.market-page .svc-categories,
body.market-page .svc-tags,
body.market-page .svc-list,
body.market-page .bs-toolbar,
body.market-page .bsx-hero,
body.market-page .bs-grid,
body.market-page .svc-grid,
body.market-page .bs-pagination,
body.market-page .bs-form-page,
body.market-page .svc-form-page,
body.market-page .bs-seller-profile,
body.market-page .svc-business,
body.market-page .svc-apply-banner,
body.market-page .svc-flash,
body.market-page .market-cat-page,
body.market-page .bsx-stage {
    max-width: var(--mkt-end);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* every page bottom shares one breathing room */
body.market-page main {
    padding-bottom: 56px;
}

/* =========================================================
   2. One type scale for page titles
   ========================================================= */
body.market-page .svc-head h1,
body.market-page .svc-all-titlebar h1,
body.market-page .bs-form-page h1,
body.market-page .svc-form-page h1,
body.market-page .bs-seller-profile h1,
body.market-page .market-cat-page h1,
body.market-page .bs-dashboard-head h1 {
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 800;
    color: var(--mkt-ink);
    margin-bottom: 8px;
}

body.market-page .svc-head p,
body.market-page .svc-all-titlebar p,
body.market-page .bs-form-page>p,
body.market-page .svc-form-page>p,
body.market-page .market-cat-page>p {
    max-width: 640px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mkt-muted);
}

/* section headings between blocks ("Popular tags", "Businesses on BUAI …") */
body.market-page .svc-list>h2,
body.market-page .svc-tags>h2,
body.market-page .bs-section-title,
body.market-page .bs-detail-more>h2 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--mkt-ink);
}

/* =========================================================
   3. One card language
   ========================================================= */
body.market-page .bs-card,
body.market-page .svc-card,
body.market-page .svc-cat,
body.market-page .svc-business .biz-card,
body.market-page .bsx-hero {
    border: 1px solid var(--mkt-line);
    border-radius: var(--mkt-radius);
    background: var(--mkt-card);
    box-shadow: none;
    overflow: hidden;
}

body.market-page .bs-card:hover,
body.market-page .svc-card:hover {
    border-color: #dadbd3;
    box-shadow: 0 8px 22px rgba(25, 27, 22, .07);
    transform: translateY(-2px);
}

body.market-page .bs-card-body {
    gap: 4px;
    padding: 12px 14px 14px;
}

body.market-page .bs-card-title {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--mkt-text);
}

body.market-page .bs-card-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--mkt-ink);
}

body.market-page .bs-card-meta,
body.market-page .bs-card-seller,
body.market-page .bs-card-body small {
    font-size: 11.5px;
    color: var(--mkt-muted);
}

/* condition pill: same shape on cards and the detail page */
body.market-page .bs-condition {
    padding: 3px 8px;
    border-radius: 6px;
    border: 0;
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #f6f1e0;
    color: #6a5a2c;
}

body.market-page .bs-condition.new {
    background: #e7f2e6;
    color: #2f6a3c;
}

body.market-page .bs-condition.like-new {
    background: #e8f0f8;
    color: #2a5578;
}

body.market-page .bs-condition.fair {
    background: #f4f1ec;
    color: #6b5f52;
}

/* status / boost badges: one pill, one yellow */
body.market-page .bs-badge {
    padding: 3px 8px;
    border-radius: 999px;
    box-shadow: none;
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: .03em;
    text-transform: uppercase;
}

body.market-page .bs-badge.boost,
body.market-page .bs-badge.status.available {
    background: var(--mkt-yellow);
    color: #241d05;
}

body.market-page .bs-badge.status.reserved {
    background: #fbf1d4;
    color: #7c5a05;
}

body.market-page .bs-badge.status.sold {
    background: rgba(23, 24, 28, .8);
    color: #fff;
}

body.market-page .bs-badge.buai-badge-count {
    background: #fff;
    color: #4f3a6d;
}

/* =========================================================
   4. One button set
   ========================================================= */
body.market-page .light-button,
body.market-page .mpx-cta,
body.market-page .bs-search button,
body.market-page .svc-all-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid #d8d9d3;
    border-radius: 9px;
    background: #fff;
    color: var(--mkt-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

body.market-page .light-button:hover,
body.market-page .bs-search button:hover {
    background: #fbfbf7;
    border-color: #b9bbb4;
    transform: translateY(-1px);
}

body.market-page .light-button.accent,
body.market-page .mpx-cta.solid,
body.market-page .bs-search button {
    background: var(--mkt-yellow);
    border-color: var(--mkt-yellow);
    color: #241d05;
}

body.market-page .light-button.accent:hover,
body.market-page .mpx-cta.solid:hover,
body.market-page .bs-search button:hover {
    background: var(--mkt-yellow-deep);
    border-color: var(--mkt-yellow-deep);
    color: #241d05;
}

body.market-page .light-button.danger,
body.market-page .light-button.danger:hover {
    border-color: #e6c7c3;
    background: #fff;
    color: #a9382c;
}

/* the old rainbow hover is retired: buttons behave the same everywhere now */
body.market-page .svc-page .light-button:hover,
body.market-page .bs-page .light-button:hover {
    background: #fbfbf7;
    color: var(--mkt-text);
}

body.market-page .bs-page .light-button.accent:hover,
body.market-page .svc-page .light-button.accent:hover {
    background: var(--mkt-yellow-deep);
    color: #241d05;
}

/* =========================================================
   5. One form-control set (search bars, filters, selects)
   ========================================================= */
body.market-page .bs-search input,
body.market-page .svc-all-search input,
body.market-page .bs-filters select,
body.market-page .svc-all-search input[type="search"],
body.market-page .bs-form input,
body.market-page .bs-form select,
body.market-page .bs-form textarea,
body.market-page .svc-form-page input,
body.market-page .svc-form-page select,
body.market-page .svc-form-page textarea {
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #dcded5;
    border-radius: 9px;
    background: #fbfbf8;
    color: var(--mkt-ink);
    font: inherit;
    font-size: 13px;
}

body.market-page .bs-search input:focus,
body.market-page .svc-all-search input:focus,
body.market-page .bs-filters select:focus,
body.market-page .bs-form input:focus,
body.market-page .bs-form select:focus,
body.market-page .bs-form textarea:focus,
body.market-page .svc-form-page input:focus,
body.market-page .svc-form-page select:focus,
body.market-page .svc-form-page textarea:focus {
    outline: none;
    border-color: #b9bbb2;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245, 201, 60, .25);
}

/* chips (categories, tags) keep one pill shape */
body.market-page .svc-chip,
body.market-page .svc-tag-link,
body.market-page .bsx-cat-chip {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

body.market-page .svc-chip.active,
body.market-page .svc-tag-link.active,
body.market-page .bsx-cat-chip.active {
    background: var(--mkt-ink);
    border-color: var(--mkt-ink);
    color: #fff;
}

/* =========================================================
   6. One empty state
   ========================================================= */
body.market-page .bs-empty {
    border: 1px dashed #dcded5;
    border-radius: var(--mkt-radius);
    background: #fff;
    padding: 38px 22px;
    text-align: center;
}

body.market-page .bs-empty h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--mkt-ink);
}

body.market-page .bs-empty p {
    font-size: 12.5px;
    color: var(--mkt-muted);
}

/* pagination: pill pages with the ink current state (matches the dashboards) */
body.market-page .bs-pagination a,
body.market-page .bs-pagination span {
    border-radius: 999px;
    border-color: var(--mkt-line);
    font-size: 12.5px;
}

body.market-page .bs-pagination .current,
body.market-page .bs-pagination [aria-current="page"] {
    background: var(--mkt-ink);
    border-color: var(--mkt-ink);
    color: #fff;
}

/* =========================================================
   7. Business profile / store page: same panels as the rest
   ========================================================= */
body.market-page .svc-business .biz-card {
    padding: 20px 22px;
}

body.market-page .svc-business .biz-card h2 {
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mkt-faint);
}

/* =========================================================
   8. Narrow screens: one gutter everywhere
   ========================================================= */
@media (max-width: 760px) {

    body.market-page .bs-browse,
    body.market-page .svc-head,
    body.market-page .svc-search,
    body.market-page .svc-categories,
    body.market-page .svc-tags,
    body.market-page .svc-list,
    body.market-page .bs-toolbar,
    body.market-page .bsx-hero,
    body.market-page .bs-grid,
    body.market-page .svc-grid,
    body.market-page .bs-pagination,
    body.market-page .bs-form-page,
    body.market-page .svc-form-page,
    body.market-page .bs-seller-profile,
    body.market-page .svc-business,
    body.market-page .market-cat-page {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {

    body.market-page .bs-card,
    body.market-page .light-button {
        transition: none !important;
        transform: none !important;
    }
}
/* =========================================================
   9. Page header (partials/market-page-head)
   The listing page's breadcrumb + title row, shared by every
   marketplace page so the top of every page is identical.
   ========================================================= */
body.market-page .bsx-pagehead {
    max-width: var(--mkt-end);
    margin: 0 auto;
    padding: 18px 24px 20px;
    box-sizing: border-box;
}

body.market-page .bsx-pagehead-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 14px;
}

body.market-page .bsx-pagehead-copy {
    min-width: 0;
}

body.market-page .bsx-pagehead-copy h1 {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 800;
    color: var(--mkt-ink);
}

body.market-page .bsx-pagehead-eyebrow {
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mkt-faint);
}

body.market-page .bsx-pagehead-intro {
    max-width: 640px;
    margin: 7px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mkt-muted);
}

body.market-page .bsx-pagehead-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

body.market-page .bsx-pagehead-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(320px, 100%);
    padding: 0 12px;
    border: 1px solid #dcded5;
    border-radius: 9px;
    background: #fbfbf8;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

body.market-page .bsx-pagehead-search:focus-within {
    border-color: #b9bbb2;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245, 201, 60, .25);
}

body.market-page .bsx-pagehead-search svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: var(--mkt-faint);
}

body.market-page .bsx-pagehead-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mkt-ink);
    font: inherit;
    font-size: 13px;
}

body.market-page .bsx-pagehead-search input:focus {
    outline: none;
    box-shadow: none;
}

/* the two pages that previously drew their own hero band */
body.market-page .svc-all-head {
    padding-bottom: 0;
    border: 0;
    background: transparent;
}

body.market-page .svc-all-chips {
    margin-top: 14px;
}

body.market-page .svc-all-body {
    padding-top: 18px;
}

@media (max-width: 760px) {
    body.market-page .bsx-pagehead {
        padding: 16px 16px 18px;
    }

    body.market-page .bsx-pagehead-side {
        width: 100%;
        margin-left: 0;
    }

    body.market-page .bsx-pagehead-search {
        width: 100%;
    }
}

/* =========================================================
   10. Buy & Sell board (the item board on the hub)
   Same card language as every other grid — the old .bs-card
   styling no longer loads with the standalone board, so the
   cards the hub renders are defined here.
   ========================================================= */
body.market-page .bs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 8px;
}

body.market-page .bs-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.market-page .bs-card-photo {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eceae4;
}

body.market-page .bs-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.market-page .bs-card-noimg {
    display: grid;
    place-items: center;
    height: 100%;
    color: #b9b8b0;
    font-weight: 800;
    letter-spacing: .2em;
}

body.market-page .bs-card-title {
    color: var(--mkt-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.market-page .bs-card-title:hover {
    color: var(--mkt-ink);
    text-decoration: underline;
}

body.market-page .bs-card.is-sold {
    opacity: .82;
}

body.market-page .bs-card-seller {
    margin-top: auto;
    padding-top: 6px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
}

body.market-page .bs-card-seller .bs-avatar {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: #eef2e9;
    flex: 0 0 22px;
}

body.market-page .bs-card-seller .bs-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the featured listing: one wide card, same chrome */
body.market-page .bsx-hero {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    margin-bottom: 18px;
}

body.market-page .bsx-hero-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eceae4;
}

body.market-page .bsx-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.market-page .bsx-hero-body {
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 18px 22px;
}

body.market-page .bsx-hero-kicker {
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mkt-faint);
}

body.market-page .bsx-hero-body h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--mkt-ink);
}

body.market-page .bsx-hero-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--mkt-ink);
}

body.market-page .bsx-hero-body small {
    font-size: 12px;
    color: var(--mkt-muted);
}

/* =========================================================
   11. Filter bar (search + clear) — one look on every list page
   ========================================================= */
body.market-page .mkt-filterbar,
body.market-page .svc-search {
    max-width: var(--mkt-end);
    margin: 0 auto;
    padding: 0 24px 16px;
    box-sizing: border-box;
    background: transparent;
}

body.market-page .bs-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

body.market-page .bs-search input[type="search"] {
    flex: 1 1 260px;
    min-width: 0;
}

body.market-page .bs-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
    padding-bottom: 16px;
}

body.market-page .bs-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

body.market-page .bs-filters select {
    min-width: 130px;
    max-width: 190px;
}

/* service category strip: chips share the row rhythm of the hub */
body.market-page .svc-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 0;
    padding-bottom: 18px;
}

body.market-page .svc-cat {
    flex: 1 1 200px;
    min-width: 0;
    padding: 13px 15px;
    border-radius: var(--mkt-radius-sm);
}

body.market-page .svc-cat h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--mkt-ink);
}

body.market-page .svc-list {
    padding-top: 6px;
}

body.market-page .svc-list > h2 {
    margin: 0 0 14px;
}

@media (max-width: 760px) {
    body.market-page .mkt-filterbar,
    body.market-page .svc-search {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.market-page .bs-filters {
        width: 100%;
    }

    body.market-page .bs-filters select {
        flex: 1 1 120px;
        max-width: none;
    }
}

@media (max-width: 1020px) {
    body.market-page .bs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.market-page .bsx-hero {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    body.market-page .bs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 480px) {
    body.market-page .bs-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}