.fac-page-wrap { background: #f8fafc; }
.fac-page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.fac-page--shell {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 0 2rem;
    background: transparent;
}
.fac-page--shell .sp-toolbar { margin-bottom: 1.25rem; }
.fac-loading { display: flex; justify-content: center; padding: 4rem 0; color: #94a3b8; }
.fac-count { font-size: .875rem; color: #64748b; margin: 0 0 1rem; }

.fac-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #047857, #064e3b); color: #fff;
}
.fac-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.fac-hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem; }
.fac-hero .fac-badge {
    display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.15);
    padding: .25rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 700; margin-bottom: .75rem;
}
.fac-hero h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; }
.fac-hero p { margin: .5rem 0 0; max-width: 46rem; color: rgba(255,255,255,.85); }
.fac-hero--inline {
    border-radius: 1rem;
    margin-bottom: 1.25rem;
}
.fac-hero--inline .fac-hero-inner,
.fac-page--shell > .fac-hero--inline {
    max-width: none;
    padding: 1.5rem 1.25rem;
}
.fac-hero--inline h1 { font-size: 1.25rem; }
.fac-btn {
    display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .6rem 1.25rem;
    font-weight: 700; font-size: .9rem; cursor: pointer; border: none; text-decoration: none;
}
.fac-btn.primary { background: #fff; color: #065f46; }
.fac-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.fac-btn.solid { background: #059669; color: #fff; }
.fac-btn.solid:hover { background: #047857; }

.fac-controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.fac-controls input, .fac-controls select {
    border: 1px solid #e2e8f0; border-radius: .75rem; padding: .6rem .8rem; font-size: .875rem; background: #fff; color: #0f172a;
}
.fac-controls input { flex: 1; min-width: 220px; }

.fac-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.fac-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer;
    border: 1px solid #e2e8f0; background: #fff; color: #475569;
}
.fac-chip:hover { border-color: #cbd5e1; }
.fac-chip.active { background: #059669; color: #fff; border-color: #059669; }

.fac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.fac-card {
    background: #fff; border: 1px solid #f1f5f9; border-radius: 1rem; overflow: hidden;
    display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.fac-card-img { height: 144px; position: relative; overflow: hidden; }
.fac-card-img img { width: 100%; height: 100%; object-fit: cover; }
.fac-card-img-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4), transparent); }
.fac-type-badge {
    position: absolute; top: .75rem; left: .75rem; display: inline-flex; align-items: center; gap: .3rem;
    font-size: .7rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px;
    background: rgba(255,255,255,.92); color: #334155;
}
.fac-type-badge.violet { background: #ede9fe; color: #6d28d9; }
.fac-type-badge.emerald { background: #d1fae5; color: #047857; }
.fac-type-badge.teal { background: #ccfbf1; color: #0f766e; }
.fac-type-badge.amber { background: #fef3c7; color: #b45309; }
.fac-type-badge.blue { background: #dbeafe; color: #1d4ed8; }
.fac-type-badge.cyan { background: #cffafe; color: #0e7490; }
.fac-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.fac-card-body h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a; line-height: 1.25; }
.fac-loc { font-size: .8rem; color: #64748b; margin: .35rem 0 0; display: flex; align-items: center; gap: .3rem; }
.fac-map-link { color: #059669; font-weight: 600; text-decoration: none; margin-left: .15rem; }
.fac-map-link:hover { text-decoration: underline; }
.fac-desc { font-size: .85rem; color: #475569; margin: .5rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fac-section-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; margin: .75rem 0 .35rem; }
.fac-section-label.buy { color: #047857; }
.fac-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.fac-tag { background: #f1f5f9; color: #475569; font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; }

/* Need card — "Currently buying" */
.fac-need-card {
    width: 100%; text-align: left; display: flex; align-items: stretch; gap: 0;
    background: #fff; border: 1px solid #f1f5f9; border-radius: .75rem; overflow: hidden;
    cursor: pointer; margin-bottom: .5rem; padding: 0; transition: box-shadow .15s, border-color .15s;
}
.fac-need-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: #a7f3d0; }
.fac-need-img { width: 92px; flex-shrink: 0; background-size: cover; background-position: center; }
.fac-need-info { flex: 1; padding: .6rem .7rem; min-width: 0; }
.fac-need-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.fac-need-name { font-weight: 700; color: #111827; font-size: .85rem; }
.fac-need-grade { flex-shrink: 0; font-size: .65rem; font-weight: 600; padding: .1rem .4rem; border-radius: 999px; background: #d1fae5; color: #047857; }
.fac-need-qty { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: #4b5563; margin-top: .25rem; }
.fac-need-qty b { color: #1f2937; }
.fac-need-meta { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }
.fac-need-recurring { font-size: .65rem; font-weight: 600; padding: .1rem .4rem; border-radius: 999px; background: #eff6ff; color: #2563eb; }
.fac-need-window { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; color: #94a3b8; }
.fac-need-cta { font-size: .7rem; font-weight: 600; color: #059669; margin-top: .35rem; }

.fac-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: #64748b;
}

.fac-meta-row b { color: #334155; font-weight: 700; }

.fac-card-actions { margin-top: auto; padding-top: .85rem; display: flex; gap: .5rem; align-items: center; }
.fac-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: .75rem; border: 1px solid #e2e8f0; color: #64748b; text-decoration: none;
}
.fac-icon-btn:hover { color: #059669; border-color: #a7f3d0; }
.fac-empty { text-align: center; padding: 3rem 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; color: #64748b; }

/* review list */
.fac-review-row { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1rem; margin-bottom: .75rem; }
.fac-status { font-size: .7rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; }
.fac-status.Pending { background: #fef3c7; color: #b45309; }
.fac-status.Active { background: #d1fae5; color: #047857; }
.fac-status.Inactive { background: #f1f5f9; color: #64748b; }

/* modal */
.fac-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center;
    justify-content: center; z-index: 1200; padding: 1rem;
}
.fac-modal { background: #fff; border-radius: 1rem; padding: 1.5rem; max-width: 28rem; width: 100%; color: #0f172a; }
.fac-modal h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.fac-field { margin-top: .75rem; }
.fac-field label { display: block; font-size: .78rem; font-weight: 600; color: #334155; margin-bottom: .25rem; }
.fac-field input, .fac-field select, .fac-field textarea {
    width: 100%; border: 1px solid #e2e8f0; border-radius: .6rem; padding: .55rem .7rem; font-size: .875rem; box-sizing: border-box;
}
.fac-error { color: #dc2626; font-size: .82rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: .5rem; padding: .5rem .7rem; margin-top: .75rem; }
.fac-success { text-align: center; padding: 1rem; }
.fac-form-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.5rem; }
.fac-req { color: #dc2626; }