/* =====================
   components.css — reusable UI parts
   ===================== */
.card.product img{aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid color-mix(in oklab, var(--ink) 10%, white)}
.price{font-weight:900}
.kicker{letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:var(--accent)}

.table-legend{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-size:.9rem}
.legend-swatch{width:12px; height:12px; border-radius:999px; display:inline-block; border:1px solid color-mix(in oklab, var(--ink) 15%, white)}
.swatch-open{background:var(--accent)}
.swatch-closed{background:#ef4444}

.notice{padding:.75rem 1rem; border-radius:12px; background:#fff; border:1px dashed color-mix(in oklab, var(--ink) 18%, white)}

.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; border:2px solid var(--accent); z-index:1000; border-radius:8px}