/* Captioned picture sections on a shop detail page (p.showcases in plugins.js).
   Loaded only by pages that have showcases. Tokens come from styles.css / shop.css. */
.showcase .section-lead { margin: -0.4rem 0 1.25rem; }
/* a second hero paragraph (descriptionExtra) sits on its own line instead of touching the first */
.detail-desc + .detail-desc { margin-top: 0.9rem; }
.showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.showcase-item { margin: 0; }
.showcase-item img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev);
}
.showcase-item figcaption { margin-top: 0.6rem; color: var(--muted); font-size: 0.92rem; line-height: 1.45; max-width: 62ch; }
.showcase-item figcaption strong { color: var(--text); font-weight: 600; }
.showcase-wide { grid-column: 1 / -1; }
.showcase-narrow { max-width: 360px; justify-self: center; }
@media (max-width: 600px) {
  .showcase-grid { grid-template-columns: 1fr; }
}