/* store-item.css - shared styles for individual /store/ item pages.
   Kept separate from store.css so these rules don't leak onto /projects/ pages,
   which also link store.css. */

.detail{ max-width:960px; }
.back-link{ display:inline-block; font-family:var(--font-mono); font-size:.76rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:18px; }
.detail-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; margin-bottom:8px; }
.detail-hero .hero-media{ position:relative; border:1px solid var(--border); border-left:2px solid var(--border-glow); background:#000; }
.detail-hero .hero-media img{ display:block; width:100%; height:auto; }
.detail-hero .eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin:0 0 6px; }
.detail-hero h1{ margin:0 0 10px; font-family:var(--font-mono); font-weight:800; text-transform:uppercase; letter-spacing:-0.02em; line-height:1; font-size:clamp(30px,5vw,52px); color:var(--text); }
.detail-hero .lede{ color:var(--ink-dim); font-size:16px; }
.status-line{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 14px; }
.status-line .tag{ display:inline-flex; align-items:center; padding:6px 12px; font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; border-radius:0; }
.tag.sold{ color:var(--pink); background:rgba(255,91,200,0.08); border:1px solid rgba(255,91,200,0.35); }
.tag.type{ color:var(--accent); background:rgba(0,255,204,0.06); border:1px solid rgba(0,255,204,0.30); }
.tag.avail{ color:var(--accent); background:rgba(0,255,204,0.12); border:1px solid rgba(0,255,204,0.50); }
.buy-row{ display:flex; align-items:center; gap:16px; margin-top:20px; flex-wrap:wrap; }
.buy-price{ font-family:var(--font-mono); font-weight:800; letter-spacing:1px; font-size:1.4rem; color:var(--text); }
.buy-row .btn{ min-width:180px; }
.quick-specs{ list-style:none; margin:16px 0 0; padding:0; font-family:var(--font-mono); font-size:.82rem; }
.quick-specs li{ display:flex; gap:10px; padding:7px 0; border-top:1px solid var(--hairline); }
.quick-specs li:last-child{ border-bottom:1px solid var(--hairline); }
.quick-specs .k{ color:var(--ink-soft); min-width:104px; text-transform:uppercase; letter-spacing:1px; font-size:.72rem; }
.quick-specs .v{ color:var(--ink-dim); }
.detail-section{ margin-top:20px; }
.detail-section p{ color:var(--ink-dim); }
.video-note{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink-soft); margin-top:8px; }
.controls{ margin:0; }
.controls div:last-child{ border-bottom:1px solid var(--hairline); }
.controls dt{ font-family:var(--font-mono); font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:.8rem; color:var(--accent); }
.controls dd{ margin:0; color:var(--ink-dim); font-size:.95rem; }
.spec-table{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.82rem; }
.spec-table th, .spec-table td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--hairline); vertical-align:top; }
.spec-table th{ color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px; font-size:.7rem; width:150px; font-weight:700; }
.spec-table td{ color:var(--ink-dim); }
.reviews-note{ font-size:.86rem; color:var(--ink-soft); background:rgba(0,255,204,0.05); border:1px solid rgba(0,255,204,0.20); border-left:2px solid var(--accent); padding:12px 14px; margin:0 0 16px; }
.review-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.review{ background:var(--bg-alt); border:1px solid var(--border); border-left:2px solid var(--border-glow); padding:14px 16px; }
.review .stars{ color:var(--accent); letter-spacing:2px; font-size:.9rem; }
.review .stars .off{ color:var(--ink-soft); opacity:.5; }
.review .who{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); margin:6px 0 8px; letter-spacing:.4px; }
.review p{ margin:0; color:var(--ink-dim); font-size:.9rem; line-height:1.6; }
.credit{ margin-top:28px; padding-top:16px; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); }
@media (max-width:720px){ .detail-hero{ grid-template-columns:1fr; gap:18px; } .controls div{ grid-template-columns:1fr; gap:4px; } }
.build-callout{ margin-top:20px; padding:16px 18px; border:1px solid var(--border); border-left:2px solid var(--border-glow); background:var(--bg-alt); color:var(--ink-dim); font-size:.95rem; }
.build-callout a{ font-family:var(--font-mono); }
.demo-soon{ display:flex; align-items:center; justify-content:center; aspect-ratio:16 / 9; background:var(--bg-alt); border:1px dashed var(--border); border-left:2px solid var(--border-glow); text-align:center; padding:20px; }
.demo-soon p{ margin:0; font-family:var(--font-mono); font-size:.82rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); }
.buy-note{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); margin:8px 0 0; }

/* ----- Demo video: shared frame + per-clip aspect modifier ----- */
.demo-video{ display:block; width:100%; height:auto; background:#000; border:1px solid var(--border); border-left:2px solid var(--border-glow); }
.demo-video.ar-square{ aspect-ratio:1 / 1; max-width:520px; }
.demo-video.ar-wide{ aspect-ratio:1920 / 822; }
.demo-video.ar-ultrawide{ aspect-ratio:2520 / 1080; }

/* ----- Controls list: 130px label column by default; .wide-labels for the
   longer-labelled pages (Bent Brooks, Starjammer) ----- */
.controls div{ padding:12px 0; border-top:1px solid var(--hairline); display:grid; grid-template-columns:130px 1fr; gap:14px; align-items:baseline; }
.controls.wide-labels div{ grid-template-columns:150px 1fr; }