/* Стили для engage-flow стабов под визуальный стиль engage.metmuseum.org. */

/* ============ FONTS (loaded from met.flow via mitmdump replay) ============
   Met uses Inter (body) and Austin Medium (headings).
   Hosted at /_next/static/media/* — served by mitmdump from met.flow snapshot. */
@font-face {
  font-family: 'austin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/_next/static/media/Austin_Medium_Web-s.p.d23afb03.woff2') format('woff2');
}
@font-face {
  font-family: 'austin';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/_next/static/media/Austin_MediumItalic_Web-s.p.5aa7d4a4.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/_next/static/media/83afe278b6a6bb3c-s.p.3a6ba036.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/_next/static/media/f67ad414ed34149c-s.p.84166d94.woff2') format('woff2');
}


:root {
  --met-red: #e4002b;
  --met-red-hover: #b8001f;
  --bg-page: #ffffff;
  --bg-soft: #f5f5f5;
  --bg-tealish: #c2e8e3;
  --ink: #111111;
  --ink-2: #2a2a2a;
  --line: #d8d8d8;
  --line-soft: #ebebeb;
  --muted: #6b6b6b;
  --success: #2d7a3d;
  --error: #c5221f;
  --header-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg-page);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ HEADER (engage red bar) ============ */
.met-header {
  background: var(--met-red);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  color: #fff;
}
.met-header .brand {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}
.met-header .brand .met-1 { display: block; font-size: 0.95rem; }
.met-header .brand .met-2 { display: block; font-size: 0.95rem; margin-top: 1px; }
.met-header nav {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  font-size: 0.92rem;
}
.met-header nav a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.met-header nav a:hover { opacity: 0.85; }
.met-header nav .icon {
  width: 16px; height: 16px;
  display: inline-block;
}

/* ============ BREADCRUMBS / steps ============ */
.steps {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 2rem 0;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
}
.steps .step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.steps .step.active { font-weight: 700; }
.steps .step.upcoming { color: var(--muted); }
.steps .sep {
  color: var(--ink);
  margin: 0 0.15rem;
  font-weight: 700;
}

/* ============ PAGE LAYOUT ============ */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}
h1.title {
  font-family: 'austin', Georgia, "Times New Roman", serif;
  font-size: 3.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 1.25rem 0 2rem;
  color: var(--ink);
  line-height: 1.05;
}
h2.section {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--ink);
}

/* Two-column layout for admission/select */
.cols-2 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 2.5rem;
}
.cols-2 .info p { font-size: 0.95rem; }
.cols-2 .info ul { padding-left: 1.25rem; margin: 0.5rem 0 1rem; }
.cols-2 .info ul li { font-weight: 700; margin-bottom: 0.4rem; }
.cols-2 .pricing p { font-size: 0.95rem; margin: 0.6rem 0; }
.cols-2 .pricing hr { border: 0; border-top: 1px solid var(--line); margin: 0.6rem 0; }

.divider-thick {
  height: 1px;
  background: var(--line);
  margin: 2rem 0;
}

/* Member banner (red gradient) */
.member-banner {
  background: linear-gradient(90deg, #c1001f 0%, #ff4a00 100%);
  color: #fff;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.member-banner .text strong { display: block; font-size: 1.1rem; margin-bottom: 0.1rem; }
.member-banner .text span { font-size: 0.9rem; opacity: 0.95; }
.member-banner a {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}
.member-banner a:hover { background: rgba(255,255,255,0.1); }

/* Choice block (location/date selectors) */
.choice {
  margin-bottom: 2rem;
}
.choice h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.choice p.helper { color: var(--ink-2); font-size: 0.92rem; margin: 0 0 1rem; }
.location-list { list-style: none; padding: 0; margin: 0; }
.location-list li {
  border: 1px solid var(--line);
  margin-bottom: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: stretch;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.location-list li.selected,
.location-list li:hover {
  border-color: var(--ink);
}
.location-list li.selected {
  box-shadow: 0 0 0 1px var(--ink) inset;
}
.location-list li .thumb {
  width: 110px; min-width: 110px;
  background: var(--bg-soft);
  background-size: cover; background-position: center;
}
.location-list li .meta {
  padding: 1rem 1.25rem;
}
.location-list li .meta strong { font-size: 1.05rem; display: block; margin-bottom: 0.35rem; }
.location-list li .meta div { font-size: 0.85rem; color: var(--ink-2); line-height: 1.4; }

/* Date pills */
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.date-pill {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0.6rem 0;
  text-align: center;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
}
.date-pill .dow { display: block; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; }
.date-pill .day { display: block; font-weight: 700; font-size: 1.1rem; margin-top: 0.2rem; }
.date-pill.selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.date-pill.selected .dow { color: rgba(255,255,255,0.7); }
.date-pill:disabled { opacity: 0.35; cursor: not-allowed; }

/* Subtotal panel */
.subtotal {
  border: 1px solid var(--line);
  padding: 1.25rem;
  background: #fff;
  position: sticky;
  top: 1rem;
}
.subtotal .row {
  display: flex; justify-content: space-between;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.subtotal .row.total {
  border-top: 1px solid var(--line);
  padding-top: 0.65rem;
  margin-top: 0.65rem;
  font-weight: 700;
  font-size: 1.15rem;
}
.subtotal .label { color: var(--muted); font-size: 0.92rem; }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--met-red);
  color: #fff;
  border: 1px solid var(--met-red);
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  margin-top: 1rem;
  transition: background 0.15s;
}
.btn-primary:hover:not(:disabled) { background: var(--met-red-hover); border-color: var(--met-red-hover); }
.btn-primary:disabled {
  background: #cccccc;
  border-color: #cccccc;
  cursor: not-allowed;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--bg-soft); }

/* Donate hero (teal background) */
.donate-hero {
  background: var(--bg-tealish);
  padding: 2.5rem 2rem;
  margin-bottom: 2rem;
}
.donate-hero .inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
}
.donate-hero h1 {
  font-family: 'austin', Georgia, serif;
  font-size: 3rem;
  font-weight: 500;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.donate-hero p { font-size: 0.95rem; margin: 0 0 0.85rem; }
.donate-hero .image {
  background-size: cover;
  background-position: center;
  min-height: 280px;
  background-color: #aaa;
}
.amount-row {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 1rem;
}
.amount-pill {
  border: 1px solid var(--ink);
  background: transparent;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
}
.amount-pill.selected { background: var(--ink); color: #fff; }
.checkbox-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.checkbox-row input { margin: 0; }

/* ============ ADMISSION (redesign) ============ */
.adm-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
  background: #fff;
}
.adm-crumbs {
  font-size: 0.85rem;
  margin-bottom: 1rem;
  color: var(--muted);
}
.adm-crumbs .crumb { color: var(--muted); }
.adm-crumbs .crumb--active { color: var(--ink); font-weight: 700; }
.adm-crumbs .crumb-sep { margin: 0 0.4rem; color: var(--muted); }
.adm-h1 {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 0.5rem;
}
.adm-h1-sub {
  font-size: 1rem;
  color: var(--muted);
  margin: 0 0 2rem;
  font-weight: 500;
}
.adm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3rem;
  align-items: start;
}
.adm-main { min-width: 0; }
.adm-side {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.adm-intro p { font-size: 1rem; line-height: 1.55; margin: 0 0 0.75rem; }
.adm-intro p strong { font-weight: 700; }

.member-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(90deg, #c20025 0%, #ff5b00 100%);
  color: #fff;
  padding: 1.5rem 1.75rem;
  text-decoration: none;
  margin: 1.25rem 0 0;
}
.member-cta__text { display: flex; flex-direction: column; gap: 0.2rem; }
.member-cta__text strong { font-size: 1.25rem; font-weight: 800; }
.member-cta__text span { font-size: 0.95rem; opacity: 0.95; }
.member-cta__btn {
  display: inline-block;
  padding: 0.65rem 2rem;
  border: 1.5px solid #fff;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background 150ms ease;
}
.member-cta:hover .member-cta__btn { background: rgba(255,255,255,0.15); }

.adm-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

.adm-section { margin: 2rem 0; }
.adm-section h2 {
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.adm-section .helper {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
}
.adm-section .helper .link { color: var(--ink); text-decoration: underline; }

/* Locations */
.loc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.loc-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.loc-card.selected {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.loc-card.selected .loc-card__hours { color: #d0d0d0; }
.loc-card__img {
  width: 240px;
  height: 140px;
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
}
.loc-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loc-card__meta {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.loc-card__meta strong { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.loc-card__hours { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }

/* Date chips */
.date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.date-chip {
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 180px;
  transition: background 150ms ease, color 150ms ease;
}
.date-chip__top { font-size: 0.95rem; font-weight: 600; }
.date-chip__bot { font-size: 0.85rem; color: var(--muted); }
.date-chip:hover:not(.disabled) { background: #f5f5f5; }
.date-chip.selected {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.date-chip.selected .date-chip__bot { color: #d0d0d0; }
.date-chip.disabled,
.date-chip[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: #f5f5f5;
}
.date-other-wrap { margin-top: 1.25rem; }

/* Two-month calendar */
.adm-calendar {
  border: 1px solid var(--line);
  background: #fff;
  padding: 1.25rem 1.5rem 1rem;
  position: relative;
  max-width: 720px;
}
.cal-nav {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.cal-nav__btn {
  pointer-events: auto;
  background: #fff;
  border: 1px solid var(--ink);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 150ms ease, color 150ms ease;
}
.cal-nav__btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.cal-nav__btn:disabled { opacity: 0.3; cursor: not-allowed; }

.cal-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-top: 0.25rem;
}
@media (max-width: 640px) {
  .cal-months { grid-template-columns: 1fr; gap: 1.5rem; }
}

.cal-month {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cal-month__title {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-grid--head {
  margin-bottom: 0.25rem;
}
.cal-dow {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0.25rem 0;
  letter-spacing: 0.05em;
}

.cal-day {
  background: #fff;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  aspect-ratio: 1;
  min-height: 36px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cal-day:hover:not(:disabled):not(.cal-day--selected) {
  background: #f4f4f4;
  border-color: var(--line);
}
.cal-day--empty {
  background: transparent;
  cursor: default;
  pointer-events: none;
}
.cal-day--past {
  color: #c0c0c0;
  cursor: not-allowed;
}
.cal-day--unavailable {
  color: #b8b8b8;
  cursor: not-allowed;
  text-decoration: line-through;
  background: #f6f6f6;
}
.cal-day--today {
  font-weight: 700;
}
.cal-day--today:not(.cal-day--selected) {
  border-color: var(--ink);
}
.cal-day--selected,
.cal-day--selected:hover {
  background: #d72660;
  color: #fff;
  font-weight: 700;
  border-color: #d72660;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}
.cal-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.cal-legend__sw {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d72660;
  display: inline-block;
}
.cal-legend__sw--unav {
  background: #f6f6f6;
  border: 1px solid #d8d8d8;
  position: relative;
}
.cal-legend__sw--unav::after {
  content: '';
  position: absolute;
  inset: 50% 2px auto 2px;
  height: 1px;
  background: #888;
}

/* Pay-what-you-wish info block */
.pyv-block {
  background: #d4d4d6;
  padding: 2rem 2rem 2.5rem;
  margin: 1.25rem 0 2rem;
}
.pyv-block p {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.pyv-block p:last-of-type { margin-bottom: 1.25rem; }
.pyv-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.pyv-input-wrap {
  position: relative;
  background: #fff;
  border: 1px solid #d1d5db;
}
.pyv-input-wrap input {
  width: 100%;
  border: 0;
  padding: 0.85rem 2.5rem 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  background: transparent;
  outline: none;
}
.pyv-input-wrap input.pyv-input--valid + .pyv-check { display: inline-flex !important; }
.pyv-input-wrap input.pyv-input--valid {
  /* mimic green-bordered valid input */
}
.pyv-input-wrap:has(input.pyv-input--valid) {
  border-color: #10b981;
  border-width: 2px;
  padding: 0;
}
.pyv-check {
  position: absolute;
  top: 50%; right: 12px;
  transform: translate(0, -50%);
  width: 22px; height: 22px;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}
.pyv-hint {
  font-size: 0.8rem !important;
  color: var(--muted) !important;
  font-style: italic;
  margin-top: 0.85rem !important;
}
.adm-helper-mid {
  font-size: 0.9rem;
  color: var(--ink);
  margin: 1.5rem 0 1rem;
  line-height: 1.55;
}
.adm-helper-mid a { color: var(--ink); }

.adm-cta--pwyw {
  background: linear-gradient(90deg, #c20025 0%, #ff3060 100%) !important;
  cursor: pointer !important;
}
.adm-cta--pwyw:hover { filter: brightness(1.05); }

/* Related Content */
.adm-related h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 1rem; }
.related-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem 1.5rem;
}
.related-list li { font-size: 0.95rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.related-list a { color: var(--ink); text-decoration: none; }
.related-list a:hover { text-decoration: underline; }

/* Need Help */
.adm-help h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.5rem; }
.adm-help > p { color: var(--muted); margin: 0 0 1.5rem; }
.help-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.help-cols h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; }
.help-cols p { margin: 0; font-size: 0.95rem; }
.help-cols a { color: var(--ink); }

/* Sidebar cards */
.pricing-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
}
.pricing-card h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 0.75rem; }
.pricing-card p { margin: 0.75rem 0; color: var(--ink); }
.pricing-card hr { border: 0; border-top: 1px solid var(--line); margin: 0.5rem 0; }

.cart-card {
  border: 1px solid var(--line);
  background: #fff;
}
.cart-card__inner { padding: 1.5rem; }
.cart-summary { margin-bottom: 0.75rem; }
.cart-empty { color: var(--muted); font-size: 0.95rem; }
.cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 0.35rem 0;
}
.cart-card hr { border: 0; border-top: 1px solid var(--line); margin: 0.5rem 0; }
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 1rem;
  margin: 0.5rem 0 1rem;
}
.cart-total #total { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.adm-cta {
  display: block;
  width: 100%;
  padding: 1rem;
  background: #c0c0c0;
  color: #fff;
  border: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: not-allowed;
  letter-spacing: 0.02em;
}
.adm-cta:not(:disabled) {
  background: var(--ink);
  cursor: pointer;
}
.adm-cta:not(:disabled):hover { background: #000; }

@media (max-width: 900px) {
  .adm-grid { grid-template-columns: 1fr; }
  .adm-side { position: static; }
  .adm-h1 { font-size: 2.5rem; }
  .loc-card { grid-template-columns: 100px 1fr; }
  .loc-card__img { width: 100px; height: 100px; }
  .help-cols { grid-template-columns: 1fr; }
}

/* ============ TICKET COUNTERS (admission) ============ */
.ticket-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: #fff;
}
.ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  gap: 1rem;
}
.ticket-row:last-child { border-bottom: 0; }
.ticket-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}
.ticket-info strong {
  font-size: 1rem;
  font-weight: 700;
}
.ticket-price {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}
.ticket-note {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}
.counter {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink);
  flex-shrink: 0;
}
.counter .cnt-minus,
.counter .cnt-plus {
  width: 36px; height: 36px;
  background: #fff;
  border: 0;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
}
.counter .cnt-minus:hover,
.counter .cnt-plus:hover { background: var(--cream); }
.counter .cnt-val {
  width: 44px;
  height: 36px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  /* prevent number-input arrows */
  -moz-appearance: textfield;
}
.counter .cnt-val::-webkit-outer-spin-button,
.counter .cnt-val::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Segmented control (Tribute Type, Card Type, gift frequency) */
.seg {
  display: inline-flex;
  border: 1px solid var(--ink);
  background: #fff;
  margin-bottom: 0.75rem;
}
.seg-opt {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink);
}
.seg-opt:last-child { border-right: 0; }
.seg-opt.seg-active { background: var(--ink); color: #fff; }
.seg-opt:hover:not(.seg-active) { background: var(--cream); }

/* ============ MEMBERSHIP ============ */
.membership-hero {
  background: var(--cream);
  padding: 3rem 1.5rem 2.5rem;
  border-bottom: 1px solid var(--line);
}
.membership-hero .inner {
  max-width: 1100px;
  margin: 0 auto;
}
.breadcrumb-nav {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.breadcrumb-nav a { color: var(--muted); text-decoration: none; }
.breadcrumb-nav a:hover { text-decoration: underline; }
.split-header-title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.mem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}
.mem-item {
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
}
.mem-item--patron { border-color: var(--ink); border-width: 2px; }
.mem-item-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}
.mem-item-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 0.25rem;
}
.mem-item-price {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 500;
}
.mem-item-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  flex: 1;
}
.mem-item-benefits li {
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 0.4rem 0 0.4rem 1.25rem;
  position: relative;
  border-bottom: 1px dotted #ececec;
}
.mem-item-benefits li:last-child { border-bottom: none; }
.mem-item-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #1a7530;
  font-weight: 700;
}
.mem-item-benefits li strong {
  display: block;
  margin-left: -1.25rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mem-item-benefits li:has(strong)::before { content: ''; }

.mem-faq details {
  border-bottom: 1px solid var(--line);
  padding: 1rem 0;
  cursor: pointer;
}
.mem-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mem-faq summary::-webkit-details-marker { display: none; }
.mem-faq summary h3 {
  display: inline;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.mem-faq summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--muted);
}
.mem-faq details[open] summary::after { content: '−'; }
.mem-faq details p {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.h5-style { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; }

/* Forms (donor / billing) */
.form-block {
  max-width: 460px;
  margin: 2.5rem auto 0;
}
.form-block h2 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 1.5rem;
}
.field { margin-bottom: 1.25rem; }
.field label {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.field label .opt {
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Cart row */
.cart-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}
.cart-item .info strong { display: block; font-size: 1.05rem; margin-bottom: 0.25rem; }
.cart-item .info span { color: var(--muted); font-size: 0.88rem; }
.cart-item .price { font-size: 1.05rem; font-weight: 700; }

/* Confirmation */
.confirm-card {
  border: 1px solid var(--line);
  padding: 2rem;
  margin-top: 2rem;
}
.confirm-card .row {
  display: flex; justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.95rem;
}
.confirm-card .row:last-of-type { border-bottom: none; }
.confirm-card .row .k { color: var(--muted); }

/* Banners */
.error-banner {
  background: #fdecea;
  border: 1px solid var(--error);
  color: var(--error);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.success-banner {
  background: #e6f4ea;
  border: 1px solid var(--success);
  color: var(--success);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

/* Footer */
.met-footer {
  border-top: 1px solid var(--line);
  padding: 1.5rem 2rem;
  margin-top: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 1rem;
}
.met-footer ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; }
.met-footer ul a { color: var(--ink); text-decoration: none; font-size: 0.85rem; }
.met-footer ul a:hover { text-decoration: underline; }

/* ============ MODAL (payment popup) ============ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.overlay.open { display: flex; }
.modal {
  background: #fff;
  max-width: 520px; width: 100%;
  padding: 2.25rem 2.5rem 2rem;
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  position: relative;
  animation: pop 0.18s ease-out;
}
@keyframes pop {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal h2 {
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
  text-align: center;
}
.modal .close {
  position: absolute;
  top: 0.75rem; right: 1rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
}
.modal .actions {
  display: flex; gap: 0.75rem;
  margin-top: 1.5rem;
}
.modal .actions button {
  flex: 1;
  padding: 0.7rem 1rem;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.modal .actions .primary { background: var(--ink); color: #fff; }
.modal .actions .primary:hover { background: #000; }

/* Gateway iframe modal — embeds 3ds-secure-payment.visitmetmuseum.com TestPayment */
.modal--gateway {
  padding: 0;
  width: 460px;
  max-width: 100%;
  height: 720px;
  max-height: calc(100vh - 2rem);
  background: transparent;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  overflow: visible;
  display: flex;
}
.modal--gateway .gateway-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f5f5f5;
  display: block;
  border-radius: 4px;
}
@media (max-width: 520px) {
  .modal--gateway {
    width: 100%;
    height: calc(100vh - 1rem);
    max-height: calc(100vh - 1rem);
  }
}

/* Auth tabs */
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.auth-tabs button {
  flex: 1; padding: 0.85rem;
  background: none; border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--muted);
}
.auth-tabs button.active { color: var(--ink); border-bottom-color: var(--met-red); font-weight: 700; }
.auth-panel { display: none; }
.auth-panel.active { display: block; }

/* Responsive */
@media (max-width: 720px) {
  .cols-2 { grid-template-columns: 1fr; }
  .donate-hero .inner { grid-template-columns: 1fr; }
  .date-grid { grid-template-columns: repeat(4, 1fr); }
  h1.title { font-size: 2rem; }
}