@layer components {

.pricing {
	--font-size-large: 1.2em
}

/* =========================
   Pricing cards – merged
   ========================= */

/* Grid of cards */
.pricing .passes{
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(3, 1fr);   /* three across -> 6 cards = two rows of three */
  align-items: stretch;                    /* cards fill same track height */
}
@media (max-width: 880px) { .pricing .passes{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pricing .passes{ grid-template-columns: 1fr; } }

/* One card: 4 rows = header / features / tiers-line / cta  */
.pricing .pass{
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  background: var(--panel-bg, var(--color-panel, #fff));
  border: var(--hairline, 1px solid rgba(0,0,0,.12));
  border-radius: var(--radius-3, 14px);
  padding: 12px 14px;
  height: 100%;
}

/* ---------- Keep your existing list reset ---------- */
.pricing .pass ul{
  margin: 0;
  padding-inline-start: 0;
}
.pricing .pass li{
  list-style-type: none;
}

/* ---------- Header: title left, price right ---------- */
.pricing .pass .head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.pricing .pass .head .title{
  margin: 0;
}

/* Keep your token sizes for price; only scope alignment here */
.pricing .pass .head .price{
  text-align: right;                       /* do NOT change global .price */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  margin: 0;
}

.pricing .pass .head .price .js-price{
  font-size: var(--font-size-large);
  font-weight: var(--weight-medium);
}

/* Cut-off note on its own (smaller) line */
.pricing .pass .head .price .js-note{
  display: block;
  white-space: nowrap;
  font-size: var(--font-size-small);
  opacity: .75;
  margin-top: .2rem;
}

/* ---------- Features block grows (2nd row) ---------- */
.pricing .pass > ul{ /* already list-reset above */ }

/* Inclusion list: clean stacked lines (no bullets), top of the row */
.pricing .pass .includes{
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: start;
  margin-top: -4px;
  /* Between body copy and the tiers-line fine print (0.78em) — the inclusion
     bullets are supporting detail, not the headline. */
  font-size: 0.85em;
}

/* "Ticket type:" label + dropdown — space them out, align centres */
.pricing .pass .aud-local{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Tiers line (3rd row) — the future-price small print. Deliberately
   smaller than --font-size-small: with 6 cards this is the bulkiest text block
   on every card, and it's reference material, not the selling line. ---------- */
.pricing .pass .tiers-line{
  margin: 0;
  font-size: 0.78em;
  line-height: 1.35;
  opacity: .75;
}

/* ---------- CTA (4th row) – use theme button styles, compact variant.
   36px keeps a workable touch target while trimming card height; the
   theme button's .6em padding is also tightened here (pricing cards only). */
.pricing .pass .js-link,
.pricing .pass .register-button,
.pricing .pass .cta{
  justify-self: stretch;                   /* full width in card */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding-top: .35em;
  padding-bottom: .35em;
  font-size: 0.95em;
  text-decoration: none;
}

/* Optional: stronger vertical alignment on very tall lists */
@media (min-width: 700px){
  .pricing .pass .js-link,
  .pricing .pass .register-button,
  .pricing .pass .cta{
    align-self: end;                       /* sits on same baseline across cards */
  }
}

}