/* Reuse the storefront shell, theme and spacing. */
#vip-join-open { text-decoration: none; }
.category-nav > #vip-join-open.is-active::after { display: none; }
.member-return { border: 0; padding: 0; background: transparent; font: inherit; }
.member-hero::after { content: 'VIP'; font-size: 64px; right: 75px; }
.member-hero > div { max-width: 760px; }
.member-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.member-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.member-step { display: flex; align-items: flex-start; gap: 14px; padding: 24px; background: var(--surface); border-radius: 12px; }
.member-step-number { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 750; }
.member-benefits .member-step-number { width: 48px; white-space: nowrap; }
.member-step h3 { margin: 0 0 8px; font-size: 15px; }
.member-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.member-return { color: var(--accent); font-size: 13px; text-decoration: none; white-space: nowrap; }
.member-return:hover { color: var(--accent-strong); }
.member-panel { padding: 28px 32px; border-radius: 12px; background: var(--surface); }
.member-status { margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.member-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.member-contact-id { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.member-label { color: var(--muted); font-size: 12px; }
#member-contact-value { max-width: 100%; margin: 10px 0 20px; font-size: 26px; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.member-contact-id p { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.member-contact-qr { flex: 1 1 220px; min-width: 0; margin: 0; display: grid; justify-items: center; gap: 12px; }
.member-contact-qr img { width: 200px; max-width: 100%; height: auto; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.member-contact-qr figcaption { color: var(--muted); font-size: 12px; text-align: center; }
.member-unavailable p { color: var(--muted); font-size: 13px; line-height: 1.8; }
@media (max-width: 760px) {
  .member-benefits { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .member-steps { grid-template-columns: 1fr; gap: 12px; }
  .member-step { padding: 18px; }
  .member-panel { padding: 22px 20px; }
  .member-contact { gap: 28px; }
  .member-hero::after { right: -45px; font-size: 52px; }
  .member-return { font-size: 11px; }
}