/* Web shop. Builds on styles.css tokens. */
.shop [hidden]{ display:none !important; }
body.shop{ background:var(--parchment); }
.shop .nav{ position:sticky; }
.shop__who{ display:flex; align-items:center; gap:12px; font-family:var(--f-ui); color:var(--ink-soft); font-size:.95rem; }
.shop__link{ background:none; border:0; padding:0; font:inherit; color:var(--red-deep); text-decoration:underline; cursor:pointer; }

.shop__main{ padding:clamp(24px,5vw,56px) 0 72px; }
.shop__title{ font-family:var(--f-display); font-weight:800; font-size:clamp(2rem,5vw,3rem); color:var(--ink); margin:0 0 .3em; }
.shop__lede{ font-size:1.08rem; color:var(--ink-soft); margin:0 0 28px; max-width:60ch; }

.shop__notice{ border-radius:var(--r); padding:14px 18px; margin:0 0 24px; font-weight:600;
  background:#e8f4df; color:var(--meadow-ink); border:2px solid #b9dca5; }
.shop__notice.is-bad{ background:#fbe6e3; color:var(--red-ink); border-color:#efb7b0; }

.shop__panel{ background:var(--cream); border-radius:var(--r-lg); padding:clamp(20px,4vw,36px); box-shadow:var(--shadow); max-width:560px; }
.shop__panel h2{ font-family:var(--f-display); margin:0 0 .4em; color:var(--ink); }
.shop__panel p{ color:var(--ink-soft); margin:0 0 18px; }
.shop__form{ display:grid; gap:10px; justify-items:start; }
.shop__form label{ font-family:var(--f-ui); font-weight:600; color:var(--ink); }
.shop__form input{ width:100%; font:inherit; font-size:1.05rem; padding:12px 14px; border-radius:var(--r-sm);
  border:2px solid var(--sand); background:#fff; color:var(--ink); }
.shop__form input:focus{ outline:3px solid var(--gold-lt); border-color:var(--gold); }

.shop__passes{ background:var(--cream); border-radius:var(--r); padding:14px 18px; margin:0 0 24px; box-shadow:var(--shadow-sm);
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; color:var(--ink-soft); }

.shop__group{ margin:0 0 36px; }
.shop__group h2{ font-family:var(--f-display); font-size:1.5rem; color:var(--ink); margin:0 0 14px; }
.shop__grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }

.card{ position:relative; background:var(--cream); border-radius:var(--r); padding:20px 18px 18px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:8px; border:2px solid transparent; }
.card__bonus{ position:absolute; top:-10px; right:14px; background:var(--red); color:#fff; font-family:var(--f-ui); font-weight:600;
  font-size:.8rem; padding:3px 10px; border-radius:999px; box-shadow:var(--shadow-sm); }
.card__name{ font-family:var(--f-ui); font-weight:600; font-size:1.1rem; color:var(--ink); margin:0; }
.card__what{ font-size:1.25rem; font-weight:700; color:var(--ink); margin:0; }
.card__was{ font-size:.9rem; color:var(--ink-soft); margin:0; }
.card__was s{ opacity:.8; }
.card .btn{ margin-top:auto; align-self:stretch; text-align:center; }
.card .btn > span{ display:block; }
.card.is-owned{ opacity:.65; }

.shop__fine{ font-size:.88rem; color:rgba(255,255,255,.75); max-width:80ch; margin:0 auto; padding:18px 0 0; }
.shop__fine a{ color:var(--gold-lt); }

/* Terms and other legal pages */
.legal{ max-width:780px; }
.legal p, .legal li{ color:var(--ink-soft); line-height:1.65; }
.legal h2{ font-family:var(--f-display); color:var(--ink); font-size:1.35rem; margin:36px 0 10px; scroll-margin-top:90px; }
.legal a{ color:var(--red-deep); }
.legal__date{ font-size:.92rem; margin:0 0 22px; }
.legal__toc{ display:flex; flex-wrap:wrap; gap:6px 16px; background:var(--cream); border-radius:var(--r); padding:14px 18px; margin:22px 0 8px; box-shadow:var(--shadow-sm); font-family:var(--f-ui); }
.foot__legal a{ color:var(--gold-lt); }
.legal__nav{ display:flex; gap:18px; font-family:var(--f-ui); font-weight:500; }
.legal__nav a{ color:var(--ink-soft); text-decoration:none; }
.legal__nav a[aria-current="page"]{ color:var(--red-deep); text-decoration:underline; }
.legal__callout{ background:#fff4d6; border:2px solid var(--gold-lt); border-radius:var(--r); padding:14px 18px; }