/* Shop tab: category tiles */
.hero-ink { padding-top: calc(var(--s-4) + var(--safe-t)); padding-bottom: var(--s-6); view-transition-name: appbar; }
.shop-top h1 { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.025em; margin-bottom: var(--s-4); }
.shop-body { margin-top: var(--s-4); }
.cat-grid { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.cat-tile { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1);
            transition: transform var(--dur-2) var(--ease-out); }
.cat-tile:active { transform: scale(.97); }
.cat-photo { aspect-ratio: 4 / 3; margin-bottom: var(--s-2); border-radius: var(--r-md); background: var(--tint, var(--surface-2)); display: grid; place-items: center; overflow: hidden; }
.cat-photo img { width: 100%; height: 100%; object-fit: cover; }
.cat-photo b { font-size: var(--fs-display); color: var(--text-2); }
.cat-name { font-weight: 800; font-size: var(--fs-body); line-height: var(--lh-snug); }
.chips { padding-bottom: var(--s-2); }
@container (min-width: 768px) {
  .hero-ink { border-radius: 0 0 var(--r-xl) var(--r-xl); }
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
}
@container (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }