/* PetriiArt shop pages — builds on the site's design tokens. */
.breadcrumb { margin: var(--space-6) 0; color: var(--text-muted); font-size: 0.9rem; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-deep); }

.shop-grid { margin-top: var(--space-6); }
.shop-intro { color: var(--text-muted); max-width: 60ch; }
.shop-count { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-deep); margin-top: var(--space-2); }

.badge {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}
.badge-avail { background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-glow); }
.badge-sold { background: #f0ece4; color: #7a6f63; border: 1px solid var(--border); }

/* Buy button: allow wrapping on narrow screens — nowrap forced a ~460px
   min-content width and made product pages scroll horizontally on phones. */
.shop-buy { white-space: normal; }

.shop-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-top: var(--space-4);
}
@media (min-width: 900px) {
  .shop-detail { grid-template-columns: 1fr 1fr; }
}
.shop-detail-img img { width: 100%; height: auto; object-fit: contain; border-radius: var(--radius-md); border: 1px solid var(--border); }
.shop-price small { display: block; font-size: 0.8rem; color: var(--text-muted); font-weight: 400; margin-top: 0.2rem; letter-spacing: 0; }
.shop-detail-info .product-name { font-size: 2rem; line-height: 1.2; }
.shop-detail-info .btn { margin: var(--space-4) 0; }
.shop-desc { color: var(--text); line-height: 1.7; }

.gpsr {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.gpsr h4 { margin: 0 0 var(--space-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-deep); }
.gpsr p { margin: 0.35rem 0; }

.shop-legal-note { margin-top: var(--space-6); font-size: 0.85rem; color: var(--text-muted); }
.shop-legal-note a { color: var(--accent-deep); }