.storefronts {
  --storefront-line: var(--line, #4a6264);
  --storefront-brass: var(--gold, #dec298);
  --storefront-text: var(--ink, #f0eee7);
  --storefront-muted: var(--muted, #b5c6c8);
  --storefront-surface: var(--soft, #14282c);
  scroll-margin-top: 6rem;
}
.storefront-heading { margin-bottom: 1.6rem; }
.storefront-heading h2 { margin: 0; font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
.storefront-kicker { color: var(--storefront-brass); font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .17em; margin: 0 0 .4rem; }
.storefront-directory { container: storefronts / inline-size; }
.storefront-widgets, .storefront-links { display: grid; gap: 1rem; }
.storefront-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }
.storefront-widgets + .storefront-links { margin-top: 1rem; }
.storefront-widget-row { display: grid; align-items: center; gap: .85rem; min-width: 0; }
.storefront-card {
  --store-brand: #36536c;
  position: relative;
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  min-height: 5.15rem;
  padding: .95rem 1rem;
  background: var(--storefront-surface);
  background: linear-gradient(115deg, color-mix(in srgb, var(--store-brand) 15%, var(--storefront-surface)), var(--storefront-surface) 74%);
  color: var(--storefront-text);
  border: 1px solid var(--storefront-line);
  border-radius: .3rem;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.storefront-steam { --store-brand: #233e59; }
.storefront-itch { --store-brand: #963744; }
.storefront-nutaku { --store-brand: #9a462d; }
.storefront-jast { --store-brand: #3b5877; }
.storefront-indiegala { --store-brand: #49663b; }
.storefront-card:hover, .storefront-card:focus-visible { border-color: var(--storefront-brass); box-shadow: 0 6px 18px #0002; color: var(--storefront-text); text-decoration: none; }
.storefront-mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  color: #fff;
  background: var(--store-brand);
  border: 1px solid #ffffff38;
  border-radius: .25rem;
  font: 600 1.35rem/1 var(--serif, Georgia, serif);
}
.storefront-card-copy { display: grid; gap: .12rem; }
.storefront-card-copy > strong { font-size: .98rem; font-weight: 650; }
.storefront-card-copy > span { font-size: .77rem; line-height: 1.45; color: var(--storefront-muted); }
.storefront-age { white-space: nowrap; }
.storefront-arrow { color: var(--storefront-brass); font-size: 1rem; }
.storefront-embed { display: none; min-width: 0; }
.storefront-embed iframe { display: block; width: 100%; max-width: 100%; border: 0; background: transparent; }
.storefront-embed-steam iframe { width: 646px; height: 190px; }
.storefront-embed-itch iframe { width: 552px; height: 167px; }
/* The provider widgets have fixed interior widths. The links remain visible at every width. */
@container storefronts (min-width: 552px) {
  .storefront-embed-itch { display: block; }
}
@container storefronts (min-width: 646px) {
  .storefront-embed-steam { display: block; }
}
@container storefronts (min-width: 946px) {
  .storefront-widget-row { grid-template-columns: minmax(225px, 1fr) minmax(646px, 2fr); gap: 1.25rem; }
}
.storefront-actions { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.storefront-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 2.75rem;
  padding: .6rem 1rem;
  border: 1px solid var(--gold, #dec298);
  border-radius: .25rem;
  color: var(--ink, #f0eee7);
  background: var(--soft, #14282c);
  font-size: .83rem;
  font-weight: 650;
  text-decoration: none;
}
.storefront-action-primary { color: #182629; background: #dec298; }
.storefront-action:hover, .storefront-action:focus-visible { outline: 2px solid var(--gold, #dec298); outline-offset: 3px; text-decoration: none; }
.storefront-action-primary:hover, .storefront-action-primary:focus-visible { color: #182629; }
@media (prefers-reduced-motion: reduce) {
  .storefront-card { transition: none; }
}