:root {
    --page-bg: var(--cptr-dark);
    --card-bg: #000;
    --card-border: #2e2b36;
    --text-primary: #f0ecff;
    --text-muted: #8a8499;
    --text-stub: #ffffff;
    --perforation: var(--cptr-dark);
    --font-display: 'DM Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'DM Sans', sans-serif;
    --radius: 14px;
    --stub-width: 72px;
  }
  /* ─── Card Grid ─────────────────────────────────────────────── */
    .ticket-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 28px;
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    /* ─── Ticket Card ───────────────────────────────────────────── */
    .ticket-card {
      display: flex;
      flex-direction: column;
      border-radius: var(--radius);
      overflow: visible;
      position: relative;
      filter: drop-shadow(0 8px 32px rgba(0,0,0,.55));
      transition: transform .25s ease, filter .25s ease;
      cursor: pointer;
    }
    .ticket-card:hover {
      transform: translateY(-6px) rotate(.3deg);
      filter: drop-shadow(0 18px 48px rgba(0,0,0,.7));
    }

    /* ─── Ticket Body (clip-path for perforations) ──────────────── */
    .ticket-body {
      display: flex;
      background: var(--card-bg);
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--card-border);
      position: relative;
    }

    /* The notch cutouts on top & bottom of perforation */
    .ticket-body::before,
    .ticket-body::after {
      content: '';
      position: absolute;
      width: 22px;
      height: 22px;
      background: var(--page-bg);
      border-radius: 50%;
      left: calc(var(--stub-width) - 11px);
      z-index: 10;
      border: 1px solid var(--card-border);
    }
    .ticket-body::before { top: -11px; }
    .ticket-body::after  { bottom: -11px; }

    /* ─── Stub ──────────────────────────────────────────────────── */
    .ticket-stub {
      width: var(--stub-width);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 16px 8px;
      position: relative;
    }
    /* dashed perforation line */
    .ticket-stub::after {
      content: '';
      position: absolute;
      right: 0; top: 16px; bottom: 16px;
      width: 2px;
      background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 6px,
        rgba(255,255,255,.15) 6px,
        rgba(255,255,255,.15) 12px
      );
    }

    .stub-day {
      font-family: var(--font-display);
      font-size: 2.2rem;
      letter-spacing: .04em;
      color: #fff;
      line-height: 1;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
    }
    .stub-label {
      font-family: var(--font-mono);
      font-size: .6rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.55);
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
    }
    .stub-num {
      font-family: var(--font-mono);
      font-size: .65rem;
      color: rgba(255,255,255,.4);
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      margin-top: 8px;
    }

    /* ─── Main Content ──────────────────────────────────────────── */
    .ticket-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    /* Event image */
    .ticket-image-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      width: 100%;
    }
    .ticket-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .ticket-image-placeholder {
      aspect-ratio: 1 / 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3.5rem;
      opacity: .35;
    }
    .ticket-image-wrap::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 60px;
      background: linear-gradient(to top, var(--card-bg), transparent);
    }

    /* Price badge */
    .ticket-price-badge {
      position: absolute;
      top: 10px;
      right: 12px;
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 6px;
      padding: 4px 10px;
      font-family: var(--font-mono);
      font-size: .95rem;
      font-weight: 500;
      color: #fff;
      z-index: 2;
      letter-spacing: .04em;
    }

    /* Info section */
    .ticket-info {
      padding: 14px 16px 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .ticket-category {
      font-family: var(--font-mono);
      font-size: .62rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      opacity: .55;
    }

    .ticket-title {
      font-family: var(--font-display);
      font-size: 1.55rem;
      letter-spacing: .04em;
      line-height: 1.1;
      color: var(--text-primary);
    }

    .ticket-description {
      font-size: .82rem;
      line-height: 1.55;
      color: var(--text-muted);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* meta row */
    .ticket-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-mono);
      font-size: .65rem;
      color: var(--text-muted);
      letter-spacing: .08em;
      padding: 0 16px 12px;
    }
    .ticket-meta span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* ─── Ticket Actions (bottom tear strip) ───────────────────── */
    .ticket-actions {
      border-top: 2px dashed rgba(255,255,255,.08);
      padding: 12px 16px;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    /* ─── Stub Color Variants ───────────────────────────────────── */
    .stub-none  .ticket-stub { background: linear-gradient(135deg, #000, var(--cptr-shade-80)); }
    .stub-crimson   .ticket-stub { background: linear-gradient(160deg, #c1121f, #800f18); }
    .stub-indigo    .ticket-stub { background: linear-gradient(160deg, #4361ee, #1d2e9e); }
    .stub-emerald   .ticket-stub { background: linear-gradient(160deg, #0a9c67, #066042); }
    .stub-amber     .ticket-stub { background: linear-gradient(160deg, #e07b00, #9a5300); }
    .stub-violet    .ticket-stub { background: linear-gradient(160deg, #7b2ff7, #4a12b0); }
    .stub-sat   .ticket-stub { background: linear-gradient(135deg, var(--cptr-primary), var(--cptr-primary-t)); }
    .stub-sun   .ticket-stub { background: linear-gradient(135deg, var(--cptr-secondary), var(--cptr-secondary-t)); }

    /* Accent glow on card-hover matching stub color */
    .stub-none:hover  { filter: drop-shadow(0 14px 36px var(--cptr-shade-90)); }
    .stub-crimson:hover  { filter: drop-shadow(0 18px 48px rgba(193,18,31,.35)); }
    .stub-indigo:hover   { filter: drop-shadow(0 18px 48px rgba(67,97,238,.35)); }
    .stub-emerald:hover  { filter: drop-shadow(0 18px 48px rgba(10,156,103,.35)); }
    .stub-amber:hover    { filter: drop-shadow(0 18px 48px rgba(224,123,0,.35)); }
    .stub-violet:hover   { filter: drop-shadow(0 18px 48px rgba(123,47,247,.35)); }
    .stub-sat:hover   { filter: drop-shadow(0 14px 36px var(--cptr-primary-s)); }
    .stub-sun:hover   { filter: drop-shadow(0 14px 36px var(--cptr-secondary-s)); }

    /* ─── Button Overrides ──────────────────────────────────────── */
    wa-button::part(base) {
      font-family: var(--font-mono);
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      border-radius: 7px;
      height: 36px;
    }
    wa-button[variant="brand"]::part(base) {
      background: var(--stub-color, #4361ee);
      border-color: var(--stub-color, #4361ee);
      color: #fff;
    }

    .stub-crimson  wa-button.primary-btn::part(base) { --stub-color: #c1121f; background: #c1121f; border-color: #c1121f; }
    .stub-indigo   wa-button.primary-btn::part(base) { --stub-color: #4361ee; background: #4361ee; border-color: #4361ee; }
    .stub-emerald  wa-button.primary-btn::part(base) { --stub-color: #0a9c67; background: #0a9c67; border-color: #0a9c67; }
    .stub-amber    wa-button.primary-btn::part(base) { --stub-color: #e07b00; background: #e07b00; border-color: #e07b00; }
    .stub-violet   wa-button.primary-btn::part(base) { --stub-color: #7b2ff7; background: #7b2ff7; border-color: #7b2ff7; }

    wa-button.secondary-btn::part(base) {
      background: transparent;
      border-color: rgba(255,255,255,.15);
      color: rgba(255,255,255,.7);
    }
    wa-button.secondary-btn::part(base):hover {
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.3);
      color: #fff;
    }

    /* ─── Sold Out State ────────────────────────────────────────── */
    .sold-out .ticket-body {
      opacity: .55;
      filter: saturate(.3);
    }
    .sold-out-ribbon {
      position: absolute;
      top: 20px; right: -10px;
      background: #ff3b30;
      color: #fff;
      font-family: var(--font-mono);
      font-size: .6rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      padding: 4px 14px;
      z-index: 20;
      box-shadow: 0 2px 8px rgba(0,0,0,.4);
      transform: rotate(2deg);
      border-radius: 3px;
    }

    /* ─── No-image placeholder tints ─────────────────────────────── */
    .stub-crimson  .ticket-image-placeholder { background: linear-gradient(135deg, #2a0a0d, #1a0608); }
    .stub-indigo   .ticket-image-placeholder { background: linear-gradient(135deg, #0d1228, #060915); }
    .stub-emerald  .ticket-image-placeholder { background: linear-gradient(135deg, #041f14, #02110b); }
    .stub-amber    .ticket-image-placeholder { background: linear-gradient(135deg, #241600, #150d00); }
    .stub-violet   .ticket-image-placeholder { background: linear-gradient(135deg, #18082e, #0d041a); }