/*  Vendorea Exchange — public marketplace.
    Palette and type taken from the supplied bazaar design: deep navy ground, gold accent,
    heavy condensed headings. Kept as hand-written CSS rather than a framework because this
    site is a handful of public pages and every byte is served to anonymous visitors.        */

:root {
    --navy-900: #0A1B3D;
    --navy-800: #0F2A5C;
    --navy-700: #16386F;
    --ink: #17212F;
    --body: #46566B;
    --muted: #7A8AA0;
    --ground: #F5F7FB;
    --surface: #FFFFFF;
    --rule: #DDE4EE;
    --blue: #1D5BD6;
    --gold: #F5C518;
    --gold-ink: #6A5200;
    --green: #178A55;
}

* { box-sizing: border-box; }

body {
    /* A short page - a single listing, an empty search - otherwise leaves the footer stranded
       mid-screen with the ground below it, which reads as a page that failed to finish loading. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--ground);
    color: var(--body);
    font: 16px/1.6 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); line-height: 1.12; letter-spacing: -.02em; margin: 0; }

.shell { max-width: 74rem; margin: 0 auto; padding: 0 1.5rem; }

/* ── masthead ─────────────────────────────────────────────── */
.masthead { background: var(--surface); border-bottom: 1px solid var(--rule); }
.masthead-inner { display: flex; align-items: center; gap: 2rem; padding: .9rem 1.5rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font-size: 1.15rem; }
.brand-mark { color: var(--blue); font-size: 1.4rem; }
.brand-name b { color: var(--blue); }
.masthead-nav { display: flex; gap: 1.4rem; margin-right: auto; }
.masthead-nav a { color: var(--body); text-decoration: none; font-weight: 500; padding: .3rem 0; border-bottom: 2px solid transparent; }
.masthead-nav a:hover, .masthead-nav a:focus-visible { color: var(--blue); border-bottom-color: var(--blue); }
.masthead-actions { display: flex; gap: .6rem; }

/* ── buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-block; padding: .55rem 1.1rem; border-radius: 6px;
    font-weight: 600; text-decoration: none; border: 1px solid transparent;
    cursor: pointer; transition: transform .08s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { background: #FFD642; }
.btn-quiet { background: var(--surface); color: var(--blue); border-color: var(--rule); }
.btn-quiet:hover { border-color: var(--blue); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost:hover { border-color: #fff; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1.05rem; }

/* ── hero ─────────────────────────────────────────────────── */
.hero {
    /* The photograph carries itself. Its left two-fifths is a deep navy panel — that is not an
       accident of the picture, it is where the headline is meant to go — so the text sits on the
       image's own dark ground and nothing is laid over the top to dull it. */
    background-color: var(--navy-900);
    background-image: url("../img/hero-warehouse.jpg");
    background-image: image-set(url("../img/hero-warehouse.webp") type("image/webp"),
                                url("../img/hero-warehouse.jpg") type("image/jpeg"));
    background-size: cover;
    /* Anchored left so that dark panel stays under the text as the viewport narrows and `cover`
       crops the width away. Anchoring anywhere else slides the warehouse under the headline. */
    background-position: left center;
    background-repeat: no-repeat;

    color: #fff;
    min-height: 34rem;
    display: flex;
    align-items: center;
}

/* The hero breaks out of the centred page column: its text belongs against the left edge,
   over the dark part of the picture, not floated into the middle of the warehouse. */
.hero .shell {
    max-width: none;
    margin: 0;
    padding-left: clamp(1.5rem, 5vw, 5.5rem);
    padding-right: 1.5rem;
}

.hero-inner {
    /* Held to the width of the dark panel. Wider and the last word of the headline crosses onto
       the shelving, which is the one place this design cannot afford to put white text. */
    max-width: 36rem;
}

.hero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.hero .gold { color: var(--gold); }

.hero-eyebrow {
    color: #A9C2EC; letter-spacing: .12em; text-transform: uppercase;
    font-size: .78rem; font-weight: 700; margin: 0 0 1rem;
}

.hero-lead { color: #D4E0F2; max-width: 40ch; font-size: 1.08rem; }

.hero-actions { display: flex; gap: .8rem; margin-top: 1.8rem; flex-wrap: wrap; }

/* ── categories ───────────────────────────────────────────── */
.categories { background: var(--surface); border-bottom: 1px solid var(--rule); }
.category-strip { display: flex; gap: .6rem; overflow-x: auto; padding: 1rem 1.5rem; }
.category {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .35rem;
    min-width: 6.5rem; padding: .75rem .6rem; border: 1px solid var(--rule); border-radius: 8px;
    text-decoration: none; color: var(--body); font-size: .82rem; font-weight: 600; text-align: center;
}
.category:hover { border-color: var(--blue); color: var(--blue); }
.category span { font-size: 1.3rem; }

/* ── listings ─────────────────────────────────────────────── */
.listings { padding: 3rem 0; }
.section-head { margin-bottom: 1.6rem; }
.section-head h2 { font-size: 1.7rem; }
.section-head p { margin: .3rem 0 0; color: var(--muted); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.card {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
    padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .7rem;
}
.card-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.badge {
    background: #E8F0FE; color: var(--blue); font-size: .68rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 4px;
}
.condition { color: var(--muted); font-size: .78rem; }
.card h3 { font-size: 1.02rem; }

.facts { display: grid; grid-template-columns: 6rem 1fr; gap: .25rem .8rem; margin: 0; font-size: .87rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); }
.withheld { color: var(--muted); font-style: italic; }

/* Price and action stacked rather than side by side: at card width a quote-required label and
   a button cannot share a row without both wrapping mid-phrase. */
.card-foot {
    display: flex; flex-direction: column; align-items: stretch; gap: .55rem;
    margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--rule);
}
.card-foot .btn { text-align: center; }
.price { font-size: 1.15rem; font-weight: 700; color: var(--green); }
.price.quote { font-size: .9rem; color: var(--muted); font-weight: 600; }

/* ── empty state ──────────────────────────────────────────── */
.empty {
    background: var(--surface); border: 1px dashed var(--rule); border-radius: 10px;
    padding: 3rem 2rem; text-align: center; max-width: 42rem; margin: 0 auto;
}
.empty-title { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.empty p { margin: 0 auto 1.4rem; max-width: 46ch; }

/* ── how it works ─────────────────────────────────────────── */
.how { background: var(--surface); border-top: 1px solid var(--rule); padding: 3rem 0; }
.how h2 { font-size: 1.5rem; margin-bottom: 1.2rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; padding-left: 1.1rem; margin: 0; }
.steps li { padding-left: .3rem; }
.steps b { color: var(--ink); }

/* ── footer ───────────────────────────────────────────────── */
main { flex: 1 0 auto; }

.footer { flex-shrink: 0; background: var(--navy-900); color: #A9BEDF; padding: 2rem 0; margin-top: 3rem; }
.footer p { margin: 0 0 .3rem; }
.footer-fine { color: #6F87AE; font-size: .85rem; }

@media (max-width: 760px) {
    .masthead-nav { order: 3; width: 100%; overflow-x: auto; }

    /* A 2.9:1 photograph in a portrait box crops to a sliver. Anchored left it is the picture's
       own navy panel that fills it — the original image, at its own brightness, just the calm
       part of it. */
    .hero {
        padding: 3rem 0 2.5rem;
        min-height: 26rem;
        background-position: left center;
    }
}

/* ── finder: search and filters ───────────────────────────── */
.finder { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: 1.8rem; }
.finder-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.finder-row-quiet { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--muted); }
.finder-search { flex: 1 1 18rem; min-width: 12rem; }
.finder-search, .finder-select, .finder-number, .finder-text {
    padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: 6px;
    font: inherit; color: var(--ink); background: var(--surface);
}
.finder-select { flex: 0 1 13rem; }
.finder-number { width: 6rem; }
.finder-text { width: 9rem; }
.finder-search:focus-visible, .finder-select:focus-visible,
.finder-number:focus-visible, .finder-text:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.check, .inline-field { display: inline-flex; align-items: center; gap: .4rem; }
.clear { color: var(--blue); margin-left: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.card-link { color: inherit; text-decoration: none; }
.card-link:hover { color: var(--blue); }

.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.6rem; }
.pager-where { color: var(--muted); font-size: .9rem; }

/* ── listing detail ───────────────────────────────────────── */
.detail { padding: 2rem 1.5rem 3rem; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 1.2rem; display: flex; gap: .5rem; }
.crumbs a { color: var(--blue); text-decoration: none; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; }
@media (max-width: 860px) { .detail-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
.detail-badges { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.detail-title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; margin-bottom: .6rem; }
.detail-lead { font-size: 1.02rem; margin-bottom: 1.4rem; }
.detail-sub { font-size: 1.1rem; margin: 1.8rem 0 .7rem; }
.detail-facts { display: grid; grid-template-columns: 10rem 1fr; gap: .4rem 1rem; margin: 0; font-size: .95rem; }
.detail-facts dt { color: var(--muted); }
.detail-facts dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) { .detail-facts { grid-template-columns: 1fr; gap: 0 0; } .detail-facts dd { margin-bottom: .6rem; } }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

.note-box { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 8px; padding: .9rem 1.1rem; margin-top: 1.4rem; }
.note-label { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.note-box p { margin: 0; }

.detail-action { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 1.3rem; position: sticky; top: 1.5rem; }
@media (max-width: 860px) { .detail-action { position: static; } }
.price-block { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.price-note { margin: .3rem 0 0; font-size: .88rem; color: var(--muted); }
.btn-block { display: block; width: 100%; text-align: center; margin-bottom: .6rem; }
.reassure { font-size: .85rem; color: var(--muted); margin: 1rem 0 0; }