/* ==========================================================================
   Shop page, 2026-11-03. Edgar: "a proper shop feel ... like how you would
   almost buy at an Apple store, with the price included". Evidence: Apple
   Store ("Buy from" prices on every tile) and the Shopify Theme Store (a
   filter by industry, a screen per design, name and price under it, "View
   demo" beside the buy button). Headings, top band and filter follow the
   Projects page at Edgar's word. Brand stays the four colours.
   ========================================================================== */

/* ------------------------------ Top (Edgar 2026-11-03: no hero, start on the designs with the
   Projects heading: centred kicker, light words and one bold accent). The band is .work-top, the
   same paper ground and header clearance as the Projects top (calm/pages.css). */
.shop-tools { margin: var(--s6) 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.shop-tools .shop-filter { justify-content: center; }

/* ------------------------------ Filter: the Projects tab row (Edgar 2026-11-03: the pills
   were "not the Edweb vibe"). Same words, weights and ink underline as Websites / Apps; the
   buttons carry aria-pressed instead of tab roles because one grid is filtered, not panels swapped. */
.shop-filter { margin-bottom: 0; }
.shop-filter .shop-tab { cursor: pointer; background: none; font: inherit; }
.tab-list--row .shop-tab[aria-pressed="true"] { font-weight: 600; color: var(--ink); }
@media (min-width: 601px) { .tab-list--row .shop-tab[aria-pressed="true"] { border-bottom-color: var(--ink); } }
.shop-tab:focus-visible { outline: 2px solid var(--coral-deep); outline-offset: 4px; }
html:not(.js) .shop-filter { display: none; }
@media (max-width: 600px) {
  /* one row that swipes, like a phone app's tabs, instead of two wrapped rows */
  .work-top .tab-list--row.shop-filter { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: var(--s5); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .work-top .tab-list--row.shop-filter::-webkit-scrollbar { display: none; }
  .shop-filter .shop-tab { flex: none; }
}

/* ------------------------------ Product grid ---------------------------- */
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
.shop-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  transition: border-color var(--speed) var(--ease);
}
.shop-card[hidden] { display: none; }
.shop-card:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.shop-shot { display: block; aspect-ratio: 16 / 10; background: var(--ground-alt); border-bottom: 1px solid var(--line); overflow: hidden; }
.shop-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.6s var(--ease); }
.shop-card:hover .shop-shot img { transform: scale(1.03); }
.shop-body { display: flex; flex-direction: column; flex: 1; padding: var(--pad-card); }
.shop-eyebrow { display: flex; gap: 0.6rem; margin: 0 0 0.4rem; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.shop-new { color: var(--coral-deep); }
.shop-body h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin: 0; }
.shop-line { margin: 0.5rem 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); }
.shop-specs { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.shop-specs li { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--ground-alt); font-size: var(--fs-micro); color: var(--ink); }
.shop-buy { margin-top: auto; padding-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.shop-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.45rem; font-size: var(--fs-small); color: var(--text-muted); }
.shop-price strong { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.shop-was { text-decoration: line-through; }
.shop-actions { display: flex; align-items: center; gap: 1.25rem; }
.shop-demo { font-size: var(--fs-small); min-height: 44px; display: inline-flex; align-items: center; }
.shop-actions .btn { min-width: 6rem; }

/* ------------------------------ Widths ---------------------------------- */
@media (max-width: 760px) {
  .shop-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-shot img, .shop-card { transition: none; }
  .shop-card:hover .shop-shot img { transform: none; }
}