/* Shop and category pages. Source: "Shop" in app/globals.css, plus the inline styles in app/shop/ShopView.tsx. */

.sortbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.chip { cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 600; }
.chip:hover { border-color: var(--ink); }
.chip.on { border-color: var(--ink); background: var(--ink); color: var(--card); }
.filters-btn { display: none; align-items: center; justify-content: space-between; gap: 12px; border: 1.5px solid var(--ink); background: var(--card); border-radius: 999px; padding: 12px 20px; margin-bottom: 16px; cursor: pointer; font-size: 14px; font-weight: 700; width: 100%; color: var(--ink); }
.rail { flex: 0 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 22px; padding: 20px; }
.facet { display: flex; flex-direction: column; gap: 10px; }
.facet .eyebrow { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.opt { cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 14px; background: none; border: 0; padding: 0; color: var(--ink); text-align: left; }
.opt:hover { color: var(--orange2); }
.opt .bx { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--ink); background: var(--white); color: var(--white); font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.opt .bx.round { border-radius: 999px; }
.opt.on .bx { background: var(--orange); }
.opt .c { color: var(--line2); font-size: 12.5px; }

/* The reference renders chips and options as <button>s; here they are links.
   Match the button metrics (line-height: normal) and keep link hover colors out. */
a.chip, a.opt { line-height: normal; text-decoration: none; }
a.chip:hover { color: var(--ink); }
a.chip.on:hover { color: var(--card); }
.opt-label { flex: 1; }
.filters-btn { font-family: inherit; line-height: normal; }

/* Former inline styles in ShopView.tsx. */
.shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.shop-count { font-size: 13.5px; color: var(--ink2); }
.sortbar .eyebrow { letter-spacing: 0.12em; }
.filters-state { color: var(--orange2); }
a.link.shop-clear { line-height: normal; text-align: left; font-size: 13px; border-top: 1px solid var(--line); padding-top: 16px; }
.shop-results { flex: 1 1 480px; min-width: 0; }
.shop-empty-title { font-size: calc(32px * var(--cc-h-scale, 1)); text-transform: var(--cc-h-transform, none); }
.shop-empty p { margin: 6px 0 16px; color: var(--ink2); }