/* =========================================================
   THE STOA. Reptile — component styles (Tone A: NOIR & GOLD)
   テーマ未適用でも破綻しないフォールバック。テーマ stoa-noir の style.css が上書き。
   Figma 準拠：見出し=Playfair Display SC / 和文=Noto Sans JP、SOLD OUT はオーバーレイ。
   ========================================================= */
:root{
  --stoa-bg:#0a0808; --stoa-bg-2:#060608; --stoa-gold:#ae8426; --stoa-bronze:#9c713d;
  --stoa-grey:#969696; --stoa-ink:#eeeeee; --stoa-line:rgba(238,238,238,.12); --stoa-radius:12px;
  --stoa-serif:"Playfair Display SC","Noto Serif JP",serif;
  --stoa-jp:"Noto Sans JP",sans-serif;
}

.stoa-list{max-width:1280px;margin:0 auto;padding:0 40px 40px}
.stoa-section__title{font-family:var(--stoa-serif);color:var(--stoa-ink);letter-spacing:.1em;text-align:center;font-size:clamp(24px,3vw,34px);margin:56px 0 28px}

/* toolbar: chips + sort */
.stoa-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 30px}
.stoa-toolbar select{background:var(--stoa-bg-2);color:var(--stoa-ink);border:1px solid var(--stoa-line);padding:8px 12px;border-radius:6px}
.stoa-chips{display:flex;flex-wrap:wrap;gap:10px}
.stoa-chip{display:inline-block;padding:9px 18px;border:1px solid var(--stoa-line);border-radius:999px;color:var(--stoa-grey);
  text-decoration:none;font-size:12px;letter-spacing:.08em;font-family:var(--stoa-serif);transition:.2s}
.stoa-chip:hover{color:var(--stoa-ink);border-color:var(--stoa-bronze)}
.stoa-chip.is-active{color:#181410;background:#efe9dd;border-color:#efe9dd}

/* grid */
.stoa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.stoa-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.stoa-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.stoa-grid,.stoa-grid--4{grid-template-columns:repeat(2,1fr);gap:14px}}

/* card */
.stoa-card{display:block;text-decoration:none;color:var(--stoa-ink)}
.stoa-card__photo{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--stoa-radius);background:var(--stoa-bg-2)}
.stoa-card__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.stoa-card:hover .stoa-card__img{transform:scale(1.045)}
.stoa-card__img--empty{width:100%;height:100%;background:linear-gradient(135deg,#241b16,#0c0a09)}
.stoa-card.is-sold .stoa-card__img{filter:grayscale(.5) brightness(.5)}
.stoa-card__name{font-family:var(--stoa-serif);font-size:19px;letter-spacing:.03em;margin:16px 0 3px}
.stoa-card__species{color:var(--stoa-bronze);font-family:var(--stoa-jp);font-size:12px;letter-spacing:.04em;margin:0 0 8px}
.stoa-card__price{color:var(--stoa-gold);font-size:15px;margin:0}
.stoa-card__id{color:var(--stoa-grey);font-size:11px;margin:5px 0 0;letter-spacing:.06em}
.stoa-price--ask{color:var(--stoa-grey);font-size:14px}

/* SOLD OUT / 商談中 overlay */
.stoa-badge{position:absolute;inset:0;display:grid;place-items:center;color:#efe9dd;
  font-family:var(--stoa-serif);letter-spacing:.4em;font-size:15px;background:rgba(6,6,8,.35)}
.stoa-badge--reserved{color:var(--stoa-bronze)}

/* pager */
.stoa-pager{display:flex;gap:8px;justify-content:center;margin-top:48px}
.stoa-pager a,.stoa-pager span{color:var(--stoa-grey);text-decoration:none;padding:6px 12px;border:1px solid var(--stoa-line);border-radius:6px;font-size:13px}
.stoa-pager .current{color:#120d06;background:var(--stoa-gold);border-color:var(--stoa-gold)}

/* CTA / legal（詳細ページ） */
.stoa-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px}
.stoa-btn{display:inline-flex;align-items:center;gap:10px;justify-content:center;padding:15px 26px;border-radius:6px;
  text-decoration:none;font-size:14px;letter-spacing:.06em;font-family:var(--stoa-jp)}
.stoa-btn--line{background:var(--stoa-bronze);color:#1a120a;font-weight:700}
.stoa-btn--line:hover{background:var(--stoa-gold)}
.stoa-btn--ghost{background:transparent;color:var(--stoa-ink);border:1px solid var(--stoa-line)}
.stoa-cta__sold{color:var(--stoa-gold);letter-spacing:.06em;flex-basis:100%}
.stoa-legal-note{color:var(--stoa-grey);font-size:11px;line-height:1.9;margin-top:8px;flex-basis:100%;font-family:var(--stoa-jp);font-weight:300}
.stoa-empty{color:var(--stoa-grey);grid-column:1/-1;text-align:center;padding:48px 0}