/*
  Add-on stylesheet for the shop feature only. Everything else (header,
  footer, buttons, .shell, .card, .eyebrow, .lede, .page-hero, colour and
  font tokens) comes from the real site's assets/css/style.css — this file
  only adds the handful of classes the product grid needs, reusing the same
  --tokens so it matches automatically, including if the theme changes later.

  To merge: drop this file at assets/css/shop.css in the real site, and add
    <link rel="stylesheet" href="assets/css/shop.css">
  right after the existing style.css link on shop.html/admin.html. Nothing
  in the real style.css needs to change.
*/

.shop-section { padding: 28px 0; }
.shop-section h2 { font-size: 24px; margin: 0 0 4px; }
.shop-note { max-width: 640px; margin: 36px auto 0; text-align: center; color: var(--muted); font-size: 13px; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 18px;
}

.shop-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.shop-card:hover { box-shadow: var(--shadow-md); }

.shop-card-img {
  aspect-ratio: 4/3;
  background: var(--surface-2) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
}

.shop-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.shop-card-body h3 { font-size: 17px; margin: 0; }
.shop-card-desc { color: var(--muted); font-size: 14px; margin: 0; flex: 1; }

.shop-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.shop-price { font-size: 20px; font-weight: 800; font-family: var(--serif); }

.stock-pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); }
.stock-pill.in { background: var(--green-tint); color: var(--green-deep); }
.stock-pill.low { background: rgba(193, 86, 15, 0.12); color: var(--orange); }
.stock-pill.out { background: rgba(161, 43, 43, 0.1); color: #a12b2b; }

.shop-buy-row { display: flex; gap: 8px; margin-top: 6px; }
.shop-qty { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 10px; font: inherit; background: var(--white); }
.shop-buy-row .btn { flex: 1; min-height: 48px; }
.shop-buy-row .btn:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }

.shop-empty, .shop-loading, .shop-error { color: var(--muted); padding: 32px 0; text-align: center; }

.shop-banner { max-width: 640px; margin: 0 auto 24px; padding: 14px 18px; border-radius: var(--radius); font-size: 15px; font-weight: 500; }
.shop-banner.success { background: var(--green-tint); color: var(--green-deep); border: 1px solid var(--green-light); }
.shop-banner.canceled { background: rgba(193, 86, 15, 0.1); color: var(--orange); border: 1px solid rgba(193, 86, 15, 0.3); }