/* =========================================================================
   SEIDR LABS — "For sale" page skin · 2026-08-07 · lane seidr-marketplace
   -------------------------------------------------------------------------
   WHY THIS IS A SEPARATE SHEET AND NOT AN ADDITION TO fable2.css:
   fable2.css is referenced by 17 cache-busting ?v= query strings across 9
   live pages. Editing it obliges a sweep of every one of those refs, and a
   missed ref serves a stale sheet to a returning visitor. A brand-new file
   has no existing refs to miss, so the marketplace can ship without touching
   the shared sheet at all. If these rules ever graduate into the design
   system proper, fold them in THEN and do the ?v= sweep as one deliberate
   change.

   This sheet defines NO colours of its own. Every value is a fable2 token,
   which is what makes the night skin work for free: fable2-night.css
   re-values the same tokens, so this page follows it without a single
   night-specific rule here. Do not introduce a raw hex below.
   ========================================================================= */

/* ---------- filter chips ------------------------------------------------ */
.sale-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-12);
}
/* The filter bar is pure progressive enhancement — market.js unhides it.
   With JS off it must never appear, because nothing would filter. */
.sale-filters[hidden] { display: none; }

.sale-filter {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.sale-filter:hover { border-color: var(--green); color: var(--green); }
.sale-filter[aria-pressed="true"] {
    background: var(--green);
    border-color: var(--green);
    color: var(--on-green);
}

/* ---------- the listing grid -------------------------------------------- */
.sale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--space-8);
    list-style: none;
    margin: 0;
    padding: 0;
}

.sale-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 200ms ease, border-color 200ms ease;
}
.sale-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }

/* ---------- photo ------------------------------------------------------- */
.sale-media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    background: var(--sand);
    overflow: hidden;
}
.sale-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 300ms ease;
}
.sale-card:hover .sale-media img { transform: scale(1.03); }

/* The whole photo is the lightbox trigger. It is a <button> so it is
   keyboard-reachable and announced — never a bare div with a click handler. */
.sale-media-btn {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    width: 100%;
    height: 100%;
}
.sale-media-btn:focus-visible {
    outline: 3px solid var(--brass);
    outline-offset: -3px;
}

/* photo-count pip, only shown when an item has more than one picture */
.sale-count {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--green-ink);
    color: var(--on-green);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    pointer-events: none;
}
.sale-count svg { width: 13px; height: 13px; }

/* placeholder when an item has no photo yet */
.sale-media--empty {
    display: grid;
    place-items: center;
    color: var(--ink-soft);
}
.sale-media--empty svg { width: 44px; height: 44px; opacity: 0.5; }

/* ---------- sold / pending treatment ------------------------------------ */
.sale-card--sold .sale-media img { filter: grayscale(1); opacity: 0.55; }
.sale-card--sold { opacity: 0.86; }
.sale-card--sold:hover { transform: none; }

.sale-ribbon {
    position: absolute;
    top: var(--space-4);
    left: 0;
    padding: var(--space-1) var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-green);
    background: var(--danger);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sale-ribbon--pending { background: var(--warn); }

/* ---------- card body --------------------------------------------------- */
.sale-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-3);
    padding: var(--space-6);
}

.sale-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.sale-priceline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.sale-price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green);
}
.sale-price--poa { font-size: 1.15rem; color: var(--brass); }
.sale-pricenote { font-size: 0.85rem; color: var(--ink-soft); }

.sale-summary {
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 0;
}

.sale-specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.sale-specs li {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.5;
}
.sale-specs svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--green);
}

/* meta row — condition + category, using the site's existing .tag pill look */
.sale-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
}

.sale-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-2);
}
.sale-cta .btn { flex: 1 1 auto; }

/* ---------- empty state ------------------------------------------------- */
.sale-empty {
    text-align: center;
    padding: var(--space-20) var(--space-8);
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--card);
}
.sale-empty svg {
    width: 52px;
    height: 52px;
    color: var(--brass);
    opacity: 0.8;
    margin-bottom: var(--space-6);
}
.sale-empty h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 var(--space-3);
    color: var(--ink);
}
.sale-empty p {
    color: var(--ink-soft);
    max-width: 48ch;
    margin-inline: auto;
    line-height: 1.7;
}

/* shown by market.js when a filter matches nothing */
.sale-noresults {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-16) var(--space-8);
    color: var(--ink-soft);
}

/* ---------- lightbox ---------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8);
    background: rgba(7, 13, 22, 0.94);
}
.lightbox[hidden] { display: none; }

.lightbox-figure {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 74vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.lightbox-figure img {
    max-width: 100%;
    max-height: 66vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--card);
}
.lightbox-caption {
    color: var(--on-green);
    font-size: 0.95rem;
    text-align: center;
    max-width: 70ch;
}
.lightbox-counter {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--on-green-mut);
}

.lightbox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--line-on-green);
    background: rgba(7, 13, 22, 0.7);
    color: var(--on-green);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}
.lightbox-btn:hover { border-color: var(--brass-bright); background: rgba(7, 13, 22, 0.95); }
.lightbox-btn svg { width: 22px; height: 22px; }
.lightbox-btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

.lightbox-close { position: absolute; top: var(--space-6); right: var(--space-6); }
.lightbox-prev  { position: absolute; left: var(--space-6);  top: 50%; transform: translateY(-50%); }
.lightbox-next  { position: absolute; right: var(--space-6); top: 50%; transform: translateY(-50%); }

/* single-photo items get no arrows */
.lightbox--single .lightbox-prev,
.lightbox--single .lightbox-next,
.lightbox--single .lightbox-counter { display: none; }

@media (max-width: 640px) {
    .lightbox { padding: var(--space-4); }
    .lightbox-prev  { left: var(--space-2); }
    .lightbox-next  { right: var(--space-2); }
    .lightbox-close { top: var(--space-3); right: var(--space-3); }
}

/* ---------- motion opt-out --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sale-card,
    .sale-card:hover,
    .sale-media img,
    .sale-card:hover .sale-media img {
        transform: none;
        transition: none;
    }
}