/* /shop/: catalogue with the original animated product previews. */
.shop-page { margin-top: var(--header-h); }
.shop-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--col-gap);
  padding-top: calc(var(--section-space) * 2);
  padding-bottom: calc(var(--section-space) * 2);
}
.shop-title {
  display: flex;
  align-items: baseline;
  gap: var(--item-space);
  font: 300 var(--text-display)/.86 var(--display);
  letter-spacing: -.035em;
}
.shop-title-count { font: 400 var(--text-body)/1 var(--sans); letter-spacing: 0; }
.shop-intro-copy { max-width: 39rem; }
.shop-intro-title { font: 400 var(--text-title)/1.25 var(--display); margin-bottom: var(--block-space); }
.shop-intro-copy p { line-height: 1.7; color: var(--ink-soft); }
.shop-intro-copy .shop-intro-note { margin-top: var(--item-space); color: var(--muted); font-size: var(--text-label); }
.shop-catalogue { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.shop-product { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: calc(var(--header-h) + var(--block-space)); }
.shop-product-meta { display: flex; justify-content: space-between; gap: var(--item-space); font-size: var(--text-label); margin-bottom: var(--item-space); color: var(--ink-soft); }
/* Keep the original GIFs uncropped, with demo links below the images. */
.shop-preview { display: block; overflow: hidden; color: var(--ink); }
.shop-preview:hover { opacity: 1; }
.shop-preview-image { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; }
.shop-preview-label { display: flex; justify-content: space-between; gap: var(--item-space); padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--text-label); }
.shop-product-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--item-space); margin-top: var(--block-space); }
.shop-product-heading h2 { font: 400 var(--text-heading)/1 var(--display); letter-spacing: -.02em; }
.shop-product-heading > span { font-size: var(--text-label); color: var(--muted); white-space: nowrap; }
.shop-product-tagline { margin-top: var(--item-space); font-family: var(--display); font-size: var(--text-body-large); }
.shop-product-description { margin-top: var(--item-space); color: var(--ink-soft); line-height: 1.7; }
.shop-product-features { margin-top: var(--block-space); margin-bottom: var(--block-space); padding-top: var(--item-space); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--text-label); line-height: 1.65; }
.shop-product-features li + li { margin-top: var(--tight-space); }
.shop-product-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.shop-purchase, .shop-guide { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); font-size: var(--text-label); border: 1px solid var(--muted-dark); }
.shop-purchase { flex: 1; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.shop-guide { flex: 1; }
.shop-page a:focus-visible, .shop-question summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.shop-information { display: grid; grid-template-columns: 1fr 2fr; gap: var(--col-gap); margin-top: var(--section-space); padding-top: calc(var(--section-space) * 2); padding-bottom: calc(var(--section-space) * 2); border-top: 1px solid var(--rule); }
.shop-information-heading .section-heading { line-height: 1.05; }
.shop-information-heading > p:last-child { max-width: 27rem; margin-top: var(--block-space); color: var(--ink-soft); line-height: 1.7; }
.shop-question { border-top: 1px solid var(--rule); }
.shop-question:last-child { border-bottom: 1px solid var(--rule); }
.shop-question summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--item-space); padding: var(--block-space) 0; cursor: pointer; font-family: var(--display); font-size: var(--text-body-large); list-style: none; }
.shop-question summary::-webkit-details-marker { display: none; }
.shop-question summary::after { content: '+'; font-family: var(--sans); }
.shop-question[open] summary::after { content: '−'; }
.shop-question p { max-width: 58rem; padding-bottom: var(--block-space); color: var(--ink-soft); line-height: 1.8; }
.shop-question p a { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 960px) {
  .shop-catalogue { gap: var(--grid-gap); }
  .shop-product-actions { flex-direction: column; }
  .shop-product-heading h2 { font-size: var(--text-title); }
  .shop-product-meta { flex-wrap: wrap; gap: var(--tight-space); }
}
@media (max-width: 640px) {
  .shop-intro, .shop-information { grid-template-columns: 1fr; }
  .shop-intro { gap: var(--section-space); }
  .shop-intro-title br { display: none; }
  .shop-catalogue { grid-template-columns: 1fr; gap: calc(var(--section-space) * 2); }
  .shop-product-heading h2 { font-size: var(--text-heading); }
  .shop-product-actions { flex-direction: row; }
  .shop-product-meta { flex-wrap: nowrap; }
  .shop-information { gap: var(--section-space); }
}