/* ============================================================
   SWM Collectibles — site stylesheet
   Direction: "The Captain's Hold" (dark premium), warmed.

   Palette is sampled from the logo art and locked in
   brand/SWM-Brand-Guide.md. Do not invent new brand colors here —
   add them to the guide first, then mirror them into the tokens.

   TYPE NOTE: the Captain's Hold mockup used Cinzel (a Roman serif).
   That fights the logo, which is a rounded cartoon wordmark, and it
   contradicts the brand guide's own recommendation. This uses the
   guide's system instead: Fredoka for headings, Inter for body,
   UI and prices. Premium comes from the dark ground and restraint,
   not from a serif.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* brand — sampled from logo art, see brand guide */
  --gold:      #ECB125;
  --doubloon:  #F6C462;
  --teal:      #569EA3;
  --deep-sea:  #388698;
  --amber:     #EAA95B;
  --parchment: #F5E2AC;
  --ink:       #191B1E;
  --steel:     #3C6384;
  --brown:     #956E50;
  --slate:     #505251;
  --bandana:   #9F4339;

  /* surfaces — darker than Ship's Ink so ink-outlined art still reads */
  --bg:        #101216;
  --bg-2:      #15181D;
  --surface:   #1A1E24;
  --surface-2: #20252C;
  --hairline:  rgba(236, 177, 37, 0.16);
  --hairline-2:rgba(245, 226, 172, 0.10);

  /* text */
  --text:      #E9E3D2;
  --text-dim:  #B3AC97;
  --text-mute: #8B8778;

  /* layout */
  --wrap:      1180px;
  --gutter:    22px;
  --radius:    14px;
  --radius-sm: 9px;

  --shadow:    0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.30);

  --ease:      cubic-bezier(.2, .7, .2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: Fredoka, 'Trebuchet MS', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* screen-reader-only, but focusable (skip link) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 12px 18px; background: var(--gold); color: var(--ink);
  font-weight: 700; border-radius: var(--radius-sm);
}

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(48px, 7vw, 78px); }
.section-tight { padding-block: clamp(32px, 4vw, 48px); }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 28px;
}
.sec-head h2 { font-size: clamp(1.5rem, 3.6vw, 2.15rem); color: var(--gold); }
.sec-head .sub { color: var(--text-mute); font-size: 0.95rem; margin-top: 4px; }

.eyebrow {
  font-family: Inter, sans-serif;
  font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--amber);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gold); color: var(--ink);
  font-weight: 700; font-size: 0.95rem;
  padding: 12px 22px; border-radius: var(--radius-sm);
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--doubloon); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }

.btn-ghost {
  background: transparent; color: var(--gold);
  border: 1.5px solid rgba(236, 177, 37, 0.45);
}
.btn-ghost:hover { background: rgba(236, 177, 37, 0.12); color: var(--doubloon); box-shadow: none; }

.btn-teal { background: var(--deep-sea); color: #fff; }
.btn-teal:hover { background: var(--teal); }

.btn-sm { padding: 9px 16px; font-size: 0.86rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16, 18, 22, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.bar { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.brand-name {
  font-family: Fredoka, sans-serif; font-weight: 600;
  color: var(--gold); font-size: 1rem; letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 380px) { .brand-name { font-size: 0.86rem; } }
@media (max-width: 330px) { .brand-name { display: none; } }

.nav-links { display: flex; align-items: center; gap: 26px; font-size: 0.94rem; font-weight: 500; }
.nav-links a { position: relative; padding-block: 6px; color: var(--text-dim); transition: color .16s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--gold); border-radius: 2px;
}

/* The Discord CTA exists twice: once inside .nav-links (for the mobile drawer) and
   once as .header-cta (for the desktop bar). Exactly one is visible at a time. */
.nav-links .btn { display: none; }

.nav-toggle { display: none; padding: 8px; border-radius: var(--radius-sm); color: var(--gold); }
.nav-toggle svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .nav-links {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--hairline);
    padding: 8px var(--gutter) 20px;
    transform: translateY(-120%); transition: transform .26s var(--ease);
    box-shadow: var(--shadow);
  }
  .nav-links[data-open="true"] { transform: translateY(0); }
  .nav-links a { padding: 15px 4px; border-bottom: 1px solid var(--hairline-2); font-size: 1.05rem; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-links .btn { display: inline-flex; margin-top: 16px; border-bottom: 0; padding: 14px 22px; }
}

/* ---------- hero ---------- */
.hero { position: relative; text-align: center; padding-block: clamp(48px, 8vw, 84px) clamp(40px, 6vw, 66px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(62% 68% at 50% 4%, rgba(236,177,37,0.20), transparent 68%),
    radial-gradient(50% 60% at 50% 40%, rgba(56,134,152,0.14), transparent 72%);
}
.hero > * { position: relative; z-index: 1; }
.hero-mark {
  width: min(58vw, 250px); margin: 0 auto 22px;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,0.55));
  animation: bob 6.5s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.hero h1 { font-size: clamp(2.05rem, 6vw, 3.5rem); color: #fff; margin-block: 14px 0; }
.hero h1 .gold { color: var(--gold); }
.hero p.lede {
  max-width: 56ch; margin: 18px auto 28px;
  color: var(--text-dim); font-size: clamp(1rem, 2.2vw, 1.12rem);
}
.cta-row { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* ---------- trust strip ---------- */
.trust {
  border-block: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
}
.trust-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px; padding-block: 34px;
}
.trust-item { display: flex; gap: 13px; align-items: flex-start; }
.trust-item .ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.15rem;
  background: rgba(236,177,37,0.10); border: 1px solid var(--hairline);
}
.trust-item h3 { font-size: 0.98rem; color: var(--parchment); margin-bottom: 3px; }
.trust-item p { font-size: 0.87rem; color: var(--text-mute); line-height: 1.5; }

/* ---------- cards / product grid ---------- */
.grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}
.grid-wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* On phones a 228px minimum collapses to ONE enormous card per row. Go 2-up —
   that is what makes a product grid scannable on a phone, and it is what every
   store the customer has ever used does. */
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-thumb { padding: 12px; font-size: 0.82rem; }
  .card-meta { padding: 11px 12px 13px; }
  .card-meta .nm { font-size: 0.85rem; }
  .card-meta .set { font-size: 0.72rem; }
  .card-meta .pr { font-size: 0.95rem; }
  .card-meta .where { font-size: 0.68rem; }
  .card-meta .row { flex-direction: column; align-items: flex-start; gap: 2px; }
}

.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: rgba(236,177,37,0.45); box-shadow: var(--shadow); }

.card-thumb {
  aspect-ratio: 1 / 1; position: relative;
  display: grid; place-items: center; padding: 20px;
  text-align: center; font-family: Fredoka, sans-serif; font-weight: 500;
  font-size: 0.98rem; color: rgba(245,226,172,0.92);
  background: radial-gradient(120% 120% at 30% 20%, var(--_tint, #3a4a53), var(--bg));
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

.tag {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  font-family: Inter, sans-serif; font-weight: 700;
  font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
  background: var(--bandana); color: #fff;
}
.tag-sealed  { background: var(--deep-sea); }
.tag-graded  { background: var(--bandana); }
.tag-singles { background: var(--steel); }
.tag-toy     { background: var(--brown); }
.tag-show    { background: var(--gold); color: var(--ink); }

.card-meta { padding: 14px 16px 17px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-meta .nm { font-weight: 600; font-size: 0.95rem; color: #EFEADB; line-height: 1.35; }
.card-meta .set { font-size: 0.8rem; color: var(--text-mute); }
.card-meta .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.card-meta .pr { font-weight: 700; font-size: 1.05rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.card-meta .where { font-size: 0.76rem; color: var(--text-mute); }

/* ---------- filter bar ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.chip {
  padding: 8px 15px; border-radius: 999px; font-size: 0.86rem; font-weight: 600;
  background: rgba(245,226,172,0.05); border: 1px solid var(--hairline-2);
  color: var(--text-dim); transition: all .16s var(--ease);
}
.chip:hover { border-color: rgba(236,177,37,0.4); color: var(--parchment); }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.search {
  flex: 1; min-width: 180px; max-width: 300px;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(245,226,172,0.05); border: 1px solid var(--hairline-2);
  color: var(--text); font-size: 0.9rem;
}
.search::placeholder { color: var(--text-mute); }

.result-count { color: var(--text-mute); font-size: 0.88rem; }

.empty {
  grid-column: 1 / -1; text-align: center; padding: 56px 20px;
  color: var(--text-mute); border: 1px dashed var(--hairline);
  border-radius: var(--radius);
}

/* ---------- shows ---------- */
.show-list { display: flex; flex-direction: column; gap: 14px; }
.show {
  display: block; padding: 0;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.show:hover { border-color: rgba(236,177,37,0.4); }
.show[open] { border-color: rgba(236,177,37,0.45); }
.show[data-status="past"] { opacity: 0.5; }

/* The summary IS the old row. list-style:none + the ::-webkit- rule kill the native
   disclosure triangle in every engine; the chevron is ours so it can be styled. */
.show > summary {
  display: grid; grid-template-columns: 92px 1fr auto auto;
  gap: 20px; align-items: center; padding: 18px 20px;
  cursor: pointer; list-style: none;
}
.show > summary::-webkit-details-marker { display: none; }
.show > summary::marker { content: ""; }
.show > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius); }
.show-chev { color: var(--text-mute); font-size: 0.9rem; transition: transform .2s var(--ease); }
.show[open] .show-chev { transform: rotate(180deg); }

.show-detail { padding: 2px 20px 18px; }
.show-dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
  padding-top: 14px; border-top: 1px solid var(--hairline); margin-bottom: 12px;
}
.show-dl dt { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-mute); }
.show-dl dd { font-size: 0.88rem; color: var(--text-dim); }
.show-dl dd a { color: var(--teal); }
.show-notes { margin: 0 0 12px; padding-left: 18px; }
.show-notes li { font-size: 0.86rem; color: var(--text-dim); margin-bottom: 4px; }
.show-caveat { font-size: 0.83rem; color: var(--text-mute); font-style: italic; margin-bottom: 12px; }
.show-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.show-act {
  font-size: 0.8rem; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  background: rgba(236,177,37,0.12); color: var(--gold);
  border: 1px solid var(--hairline); text-decoration: none;
}
.show-act:hover { background: rgba(236,177,37,0.2); }

/* Tentative = table not paid for. Deliberately quieter than a confirmed row and
   dashed rather than solid, so nobody drives three hours on a maybe. */
.show[data-status="tentative"] {
  border-style: dashed;
  border-color: rgba(245, 226, 172, 0.16);
  background: linear-gradient(180deg, rgba(32,37,44,0.55), rgba(26,30,36,0.55));
}
.show[data-status="tentative"] .show-date { background: rgba(245,226,172,0.05); }
.show[data-status="tentative"] .show-date .mon,
.show[data-status="tentative"] .show-date .day { color: var(--text-dim); }
.show[data-status="tentative"] h3 { color: var(--text-dim); }

.show-date { background: rgba(245,226,172,0.05); }
.show[data-status="tentative"] .show-date .mon,
.show[data-status="tentative"] .show-date .day { color: var(--text-dim); }
.show[data-status="tentative"] h3 { color: var(--text-dim); }

.show-date {
  text-align: center; border-radius: var(--radius-sm);
  background: rgba(236,177,37,0.10); border: 1px solid var(--hairline);
  padding: 9px 6px;
}
.show-date .mon { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.show-date .day { font-family: Fredoka, sans-serif; font-size: 1.6rem; font-weight: 600; color: var(--gold); line-height: 1.1; }
.show-date .dow { font-size: 0.7rem; color: var(--text-mute); }

.show-body h3 { font-size: 1.06rem; color: var(--parchment); margin-bottom: 3px; }
.show-body .loc { font-size: 0.87rem; color: var(--text-dim); }
.show-body .hrs { font-size: 0.82rem; color: var(--text-mute); margin-top: 2px; }
.show-badge {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(86,158,163,0.15); color: var(--teal); border: 1px solid rgba(86,158,163,0.3);
}
.show-badge[data-kind="confirmed"] { background: rgba(236,177,37,0.14); color: var(--gold); border-color: var(--hairline); }
.show-badge[data-kind="tentative"] {
  background: transparent; color: var(--text-mute);
  border: 1px dashed rgba(245,226,172,0.28);
}

@media (max-width: 640px) {
  .show > summary { grid-template-columns: 72px 1fr auto; gap: 14px; padding: 14px; }
  .show-badge { grid-column: 2; justify-self: start; }
  .show-chev { grid-column: 3; grid-row: 1; align-self: start; }
  .show-detail { padding: 2px 14px 14px; }
  .show-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .show-dl dd { margin-bottom: 8px; }
}

/* ---------- split / story ---------- */
.split { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(28px, 5vw, 54px); align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split h2 { font-size: clamp(1.55rem, 4vw, 2.2rem); color: var(--gold); margin-bottom: 16px; }
.split p { color: var(--text-dim); margin-bottom: 14px; }
.split p strong { color: var(--parchment); font-weight: 600; }

.split-art {
  aspect-ratio: 1 / 1; border-radius: 18px; display: grid; place-items: center;
  border: 1px solid var(--hairline);
  background:
    radial-gradient(70% 70% at 50% 28%, rgba(236,177,37,0.22), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--bg));
  max-width: 380px; margin-inline: auto; width: 100%;
}
.split-art img { width: 72%; filter: drop-shadow(0 12px 26px rgba(0,0,0,0.5)); }

.band { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-block: 1px solid var(--hairline); }

/* ---------- community ---------- */
.community { text-align: center; }
.community h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); color: var(--gold); }
.community p { color: var(--text-dim); max-width: 52ch; margin: 14px auto 28px; }
.socials { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.soc {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.94rem;
  background: rgba(245,226,172,0.05); border: 1px solid var(--hairline);
  color: var(--text); transition: all .18s var(--ease);
}
.soc:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); transform: translateY(-2px); }
.soc svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 780px; margin-inline: auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 15px 18px;
}
.faq details[open] { border-color: rgba(236,177,37,0.34); }
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--parchment); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: 11px; color: var(--text-dim); font-size: 0.93rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); background: var(--bg-2); padding-block: 40px 28px; margin-top: 20px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; margin-bottom: 30px; }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
.foot-brand p { color: var(--text-mute); font-size: 0.87rem; margin-top: 12px; max-width: 34ch; }
.foot-col h4 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: 13px; }
.foot-col a { display: block; color: var(--text-dim); font-size: 0.9rem; padding-block: 5px; transition: color .16s var(--ease); }
.foot-col a:hover { color: var(--gold); }
.foot-bottom {
  border-top: 1px solid var(--hairline-2); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--text-mute); font-size: 0.82rem;
}
.foot-bottom .legal { max-width: 62ch; line-height: 1.5; }

/* ---------- utilities ---------- */
.center { text-align: center; }
.mt-lg { margin-top: 32px; }
.note {
  font-size: 0.84rem; color: var(--text-mute);
  background: rgba(86,158,163,0.07); border: 1px solid rgba(86,158,163,0.2);
  border-radius: var(--radius-sm); padding: 13px 16px;
}
/* Reveal-on-scroll is PROGRESSIVE ENHANCEMENT, never a prerequisite for seeing content.
   Default state is visible. The hidden start state is applied only when the inline
   head script has proved JS is running (html.js), so if JS fails, is blocked, or the
   IntersectionObserver never fires, the page still renders fully. site.js also
   force-reveals everything on a timer as a second safety net. */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

/* ---------- storefront cards ---------- */
.stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 16px; margin-top: 26px; }
@media (max-width: 560px) { .stores { grid-template-columns: 1fr; } }
.store-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  padding: 22px 20px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--hairline);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.store-card:hover { border-color: rgba(236,177,37,0.45); transform: translateY(-3px); }
.store-kicker {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal);
}
.store-name { font-family: Fredoka, sans-serif; font-size: 1.3rem; color: var(--gold); }
.store-meta { font-size: 0.85rem; color: var(--text-dim); flex: 1; }
.store-go { font-size: 0.82rem; font-weight: 600; color: var(--parchment); margin-top: 6px; }