/* The shop page, from 1 November 2026. The products are put into the page by
   the Worker (cloudflare/shop.js); every class it writes is styled here, and
   everything else comes from site.css. A file of its own because the site's
   Content-Security-Policy refuses styles written into a page. */

.shop-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.shop-item {
  display: flex;
  flex-direction: column;
}

.shop-item__img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--tint);
  border-radius: calc(var(--radius-card) - 8px);
}

.shop-item__name {
  margin-block-start: 20px;
}

.shop-item__price {
  font-size: var(--size-lead);
  font-weight: 700;
  color: var(--ink);
}

.shop-item__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-start: auto;
  padding-block-start: 20px;
}

.shop-item__form .btn {
  inline-size: 100%;
}

.shop-item__out,
.shop-note {
  color: var(--muted);
  font-size: var(--size-small);
}

/* Browse only, before the checkout opens: a plain line in place of the
   button, in the accent colour so it reads as a state, not as small print. */
.shop-item__soon {
  padding-block: 14px;
  border-block-start: 1px solid var(--line);
  font-weight: 600;
  color: var(--accent-text);
}

/* The row of links to each section, which wraps on a phone. */
.shop-jump {
  margin-block-end: 40px;
}

.shop-jump__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-jump__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.shop-jump__link:hover,
.shop-jump__link:focus-visible {
  background: var(--tint);
}

.shop-jump__count {
  font-weight: 400;
  color: var(--muted);
}

.shop-group + .shop-group {
  margin-block-start: 64px;
}

.shop-group__title {
  margin-block-end: 24px;
  scroll-margin-block-start: calc(var(--header-h) + 16px);
}

.shop-group {
  scroll-margin-block-start: calc(var(--header-h) + 16px);
}

.shop-note {
  margin-block-start: 32px;
  max-inline-size: 72ch;
}

.shop-notice {
  margin-block-end: 24px;
}