/* Shop page, Claude, Sun 1 Nov 2026 04:07 SAST. Sits on top of assets/courses/courses.css. */
.shop-group { margin-top: 10px; }
.shop-group + .shop-group { margin-top: 56px; }
.card-art.paper { aspect-ratio: 16 / 10; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.06), transparent 60%), var(--night-2); border-bottom: 1px solid var(--line); }
.card-art.paper img { width: auto; height: 86%; object-fit: contain; border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3); transform: rotate(-2deg); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-art.paper img { transform: rotate(0) translateY(-4px); }
.card-art.soon { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--night-2); border-bottom: 1px solid var(--line); color: var(--cream-3); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .card-art.paper img, .card:hover .card-art.paper img { transition: none; transform: none; } }

/* Catalogue-driven shop, 1 Nov 2026 (builder S): chips, groups, meta row, version badge, price */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shop-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 44px; }
.shop-chip { font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--cream-2); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.shop-chip:hover { border-color: var(--cream-3); color: var(--cream); }
.shop-chip.on { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.shop-chip:focus-visible, .card .btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.shop-group h2 { margin-bottom: 10px; }
.shop-catblurb { margin: 0 0 26px; color: var(--cream-2); font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.shop-sub { font-family: var(--serif); font-style: italic; color: var(--cream) !important; font-size: 1.05rem; }
.shop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto; }
.shop-badge { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--cream-2); }
.shop-pages { font-size: 13px; color: var(--cream-3); }
.shop-price { margin-left: auto; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--cream); font-variant-numeric: tabular-nums; }
.shop-price.free { color: #74efe9; }
.shop-state { color: var(--cream-2); margin: 0; }
.shop-pay { margin-top: 40px; font-size: 14px; color: var(--cream-3); }
.card .actions { margin-top: 0; }
.cards.cards-3 .card-art.paper { aspect-ratio: 4 / 3; }
@media (max-width: 900px) { .shop-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .shop-chip { flex: none; } }
.hero + section { padding-top: 0; }