/* Shop catalog — synced from the GoDaddy Poynt POS catalog */
.shop-note { color: var(--text-dim); max-width: 60ch; }
.shop-note a { color: var(--accent-bright); }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
  margin-top: 32px;
}
.shop-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .15s ease;
}
.shop-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.shop-card__media { aspect-ratio: 1; background: #0a0a0a; overflow: hidden; }
.shop-card__media img { width: 100%; height: 100%; object-fit: cover; }
.shop-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.shop-card__name { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.shop-card__price { color: var(--accent-bright); font-weight: 700; font-size: 1.05rem; }

.opt-group { display: flex; flex-direction: column; gap: 5px; }
.opt-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.size-pill {
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 6px; background: transparent;
  color: var(--text-dim); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.size-pill:hover { border-color: var(--accent-bright); color: #fff; }
.size-pill.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; padding: 0; background: none; }
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch:hover { border-color: var(--line); }
.swatch.is-active { border-color: var(--accent-bright); }

.shop-card .btn { margin-top: auto; width: 100%; justify-content: center; }
.shop-note-inline { font-size: .8rem; color: var(--accent-bright); margin-top: 2px; }
.shop-meta { margin-top: 10px; font-size: .82rem; color: var(--muted); }