/*
 * EPS Schedule — v1.2
 * All rules scoped under `.eps-schedule` so nothing leaks into the theme.
 * Layout matches the mockup: side-by-side cities, big tiles with city silhouettes,
 * two-column card stack, "VIEW ALL DATES" button per column.
 */

.eps-schedule {
    --eps-bg:      #0a0a0a;
    --eps-card:    #0e0e0e;
    --eps-card-2:  #171717;
    --eps-line:    #262626;
    --eps-line-2:  #333333;
    --eps-text:    #ffffff;
    --eps-muted:   #a3a3a3;
    --eps-muted-2: #6b6b6b;
    --eps-accent:  #fbbf24;   /* yellow */
    --eps-accent2: #f59e0b;
    --eps-danger:  #ef4444;
    --eps-warn:    #f97316;
    --eps-ok:      #22c55e;
    --eps-sold:    #6b7280;

    --eps-max: 1240px;                  /* boxed inner content width */
    box-sizing: border-box;
    color: var(--eps-text);
    background: var(--eps-bg);
    padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px) clamp(40px, 5vw, 64px);
    border-radius: 0;                   /* full-bleed: no rounded corners */
    font-family: inherit;
    line-height: 1.4;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;

    /* subtle glow accents matching the mockup */
    background-image:
        radial-gradient(circle at 0% 0%, rgba(251,191,36,.06), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(251,191,36,.04), transparent 45%);
}
.eps-schedule *,
.eps-schedule *::before,
.eps-schedule *::after { box-sizing: border-box; }

/* Full-bleed background, boxed content: cap every direct child at --eps-max */
.eps-schedule > .eps-step-wrap,
.eps-schedule > .eps-hero,
.eps-schedule > .eps-top-heading,
.eps-schedule > .eps-tiles,
.eps-schedule > .eps-tiles-subline,
.eps-schedule > .eps-panels {
    max-width: var(--eps-max);
    margin-left: auto;
    margin-right: auto;
}

/* wpautop injects stray <br>s between adjacent block-ish tags in shortcode
   output. They break grid/flex layouts. Kill them across the whole widget. */
.eps-schedule > br,
.eps-schedule .eps-tiles > br,
.eps-schedule .eps-panels > br,
.eps-schedule .eps-panel > br,
.eps-schedule .eps-cards > br,
.eps-schedule .eps-city > br { display: none; }

/* ---------- Hero heading (Learn. Install. Build your Business.) ---------- */
.eps-schedule .eps-hero {
    margin: 0 0 clamp(20px, 3vw, 32px);
    text-align: center;
    font-size: clamp(32px, 6vw, 72px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--eps-text);
    font-family: inherit;
}
.eps-schedule .eps-hero-line {
    display: block;
    padding: 2px 0;
}
.eps-schedule .eps-hero-accent {
    color: var(--eps-accent);
}

/* ---------- Top heading with divider rules ---------- */
.eps-schedule .eps-top-heading {
    margin: 0 0 clamp(24px, 3vw, 36px);
    text-align: center;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--eps-text);
}
.eps-schedule .eps-with-rules {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vw, 20px);
}
.eps-schedule .eps-with-rules .eps-rule {
    flex: 0 1 clamp(40px, 12vw, 140px);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--eps-accent));
    border-radius: 2px;
}
.eps-schedule .eps-with-rules .eps-rule:last-of-type {
    background: linear-gradient(90deg, var(--eps-accent), transparent);
}
.eps-schedule .eps-top-heading-text { display: inline-flex; align-items: baseline; gap: .35em; white-space: nowrap; }
.eps-schedule .eps-accent-word { color: var(--eps-accent); }
.eps-schedule .eps-top-subline {
    text-align: center;
    color: var(--eps-muted);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 12px;
    margin: -12px 0 clamp(20px, 3vw, 32px);
}

/* ---------- Location tiles (Calgary / Vancouver) ---------- */
.eps-schedule .eps-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2vw, 24px);
    margin-bottom: clamp(36px, 4vw, 48px);
}
.eps-schedule .eps-tile {
    position: relative;
    overflow: hidden;
    min-height: clamp(200px, 22vw, 300px);   /* taller so city photo shows properly */
    background: linear-gradient(90deg, #141414 0%, #0a0a0a 100%);
    border: 2px solid var(--eps-line-2);
    border-radius: 14px;
    color: var(--eps-text);
    isolation: isolate;
    cursor: pointer;
    padding: 0;
    text-align: left;
    font: inherit;
    box-shadow: 0 12px 28px -18px rgba(0,0,0,.55);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.eps-schedule .eps-tile:hover {
    border-color: var(--eps-accent);
    transform: translateY(-2px);
    animation: none;    /* pause pulse on hover */
}
.eps-schedule .eps-tile.is-active {
    background: linear-gradient(90deg, var(--eps-accent) 0%, var(--eps-accent2) 100%);
    border-color: var(--eps-accent);
    color: #000;
    box-shadow: 0 16px 32px -18px rgba(251,191,36,.5);
    animation: none;    /* selected tile never pulses */
}

/* ---------- Pulse animation to encourage clicking (when no city selected yet) ---------- */
/* G — GLOWING tiles before click, to attract attention */
@keyframes eps-tile-pulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 8px 24px -14px rgba(0,0,0,.6), 0 0 0 0 rgba(251,191,36,0), 0 0 0 rgba(251,191,36,0);
        border-color: rgba(251,191,36,.4);
    }
    50% {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 20px 40px -12px rgba(0,0,0,.6), 0 0 0 8px rgba(251,191,36,.14), 0 0 36px 4px rgba(251,191,36,.35);
        border-color: rgba(251,191,36,.9);
    }
}
.eps-schedule .eps-tiles.eps-none-active .eps-tile {
    animation: eps-tile-pulse 2s ease-in-out infinite;
    border-color: rgba(251,191,36,.5);   /* baseline glow color even between pulses */
}
/* Offset the two tiles slightly so their pulses feel alive, not synced */
.eps-schedule .eps-tiles.eps-none-active .eps-tile.is-city-vancouver {
    animation-delay: 1.2s;
}
/* A gentle 'click me' hint under the tiles when none is active */
.eps-schedule .eps-tiles.eps-none-active + .eps-tiles-subline::after {
    content: ' \00A0 · \00A0 Tap a city to see upcoming dates';
    color: var(--eps-accent);
    font-weight: 700;
    letter-spacing: .04em;
}
@media (prefers-reduced-motion: reduce) {
    .eps-schedule .eps-tiles.eps-none-active .eps-tile { animation: none; }
}
.eps-schedule .eps-tile-inner {
    position: relative;
    z-index: 2;
    padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 26px);
    display: flex;
    flex-direction: column;
    align-items: center;      /* B — CENTER the city name */
    justify-content: center;
    gap: 4px;
    height: 100%;
    text-align: center;
}
.eps-schedule .eps-tile .eps-pin { font-size: 16px; line-height: 1; margin-bottom: 2px; }
.eps-schedule .eps-tile-city {
    /* B — bolder + bigger + centered */
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0,0,0,.7); /* keep readable over photo */
}
.eps-schedule .eps-tile-sub {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .9;
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.eps-schedule .eps-tile .eps-pin { display: none; } /* pin lives in the flow, we don't need it above center-aligned title */

/* A — city PHOTOS as tile background, faded with dark overlay */
.eps-schedule .eps-tile-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 1;
    transition: opacity .18s ease, transform .3s ease;
}
/* Dark overlay pseudo — sits on top of the photo so text stays readable */
.eps-schedule .eps-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.65));
    pointer-events: none;
    transition: background .2s ease;
}
.eps-schedule .eps-tile.is-active::before {
    background: linear-gradient(rgba(255,205,10,.28), rgba(255,205,10,.4));
}
/* Calgary silhouette: white by default (dark tile), black when tile is active/yellow */
.eps-schedule .eps-tile.is-city-calgary .eps-tile-bg {
    background-image: url("/wp-content/uploads/2026/08/calgary-skyline.jpg");
}
.eps-schedule .eps-tile.is-city-vancouver .eps-tile-bg {
    background-image: url("/wp-content/uploads/2026/08/vancouver-skyline.jpg");
}

/* ---------- Subline under the tiles (small caps CTA hint) ---------- */
.eps-schedule .eps-tiles-subline {
    text-align: center;
    color: var(--eps-muted);
    font-size: 13px;
    letter-spacing: .04em;
    margin: -18px 0 clamp(32px, 4vw, 44px);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Panels (only the active city's schedule renders) ---------- */
.eps-schedule .eps-panels { display: block; }
.eps-schedule .eps-panel[hidden] { display: none; }
.eps-schedule .eps-panel {
    max-width: 780px;
    margin: 0 auto;
    animation: eps-panel-in .28s ease both;
}
@keyframes eps-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- City block ---------- */
.eps-schedule .eps-city-heading {
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 900;
    letter-spacing: .04em;
    margin: 4px 0 4px;
    color: var(--eps-text);
    text-align: center;
    text-transform: uppercase;
}
.eps-schedule .eps-city-name { color: var(--eps-accent); }
.eps-schedule .eps-city-sub  {
    color: var(--eps-text);
    position: relative;
}
.eps-schedule .eps-city-heading::after {
    content: '';
    display: block;
    margin: 8px auto 0;
    width: 48px;
    height: 3px;
    background: var(--eps-accent);
    border-radius: 2px;
}
.eps-schedule .eps-city-tag {
    text-align: center;
    color: var(--eps-muted);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    margin: 16px 0 20px;
}

/* ---------- Cards ---------- */
.eps-schedule .eps-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    align-items: stretch;
}
.eps-schedule .eps-card {
    position: relative;
    background: var(--eps-card);
    border: 1px solid var(--eps-line);
    border-radius: 18px;
    padding: 24px 22px 22px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "date  body"
        "cta   cta";
    gap: 20px;
    transition: border-color .15s ease, transform .15s ease;
}
.eps-schedule .eps-card:hover { border-color: var(--eps-line-2); transform: translateY(-2px); }
.eps-schedule .eps-card.is-next {
    border-color: var(--eps-accent);
    box-shadow: 0 0 0 1px var(--eps-accent) inset, 0 8px 40px -14px rgba(251,191,36,.4);
}
.eps-schedule .eps-ribbon {
    position: absolute;
    top: -12px;
    left: 18px;
    background: var(--eps-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 5px 12px;
    border-radius: 4px;
    z-index: 3;
}

/* ---------- Date badge (dark inset column) ---------- */
.eps-schedule .eps-card-date {
    grid-area: date;
    background: #050505;
    border: 1px solid var(--eps-line);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 96px;
    min-height: 108px;
}
.eps-schedule .eps-mon {
    font-size: 13px;
    letter-spacing: .16em;
    color: var(--eps-accent);
    font-weight: 800;
    text-transform: uppercase;
}
.eps-schedule .eps-day {
    font-size: 28px;
    font-weight: 900;
    color: var(--eps-text);
    line-height: 1;
    letter-spacing: .01em;
}
.eps-schedule .eps-year {
    font-size: 11px;
    color: var(--eps-muted-2);
    margin-top: 4px;
    letter-spacing: .12em;
}

/* ---------- Card body ---------- */
.eps-schedule .eps-card-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.eps-schedule .eps-card-title {
    color: var(--eps-accent);
    font-weight: 900;
    font-size: 15px;
    letter-spacing: .08em;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.2;
}
.eps-schedule .eps-card-meta {
    color: var(--eps-muted);
    font-size: 12px;
    margin: 0;
    letter-spacing: .04em;
}
.eps-schedule .eps-card-price {
    color: var(--eps-text);
    font-weight: 900;
    font-size: 24px;
    margin: 8px 0 6px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.eps-schedule .eps-card-price .eps-cad {
    font-size: 11px;
    color: var(--eps-muted);
    letter-spacing: .12em;
    font-weight: 700;
    text-transform: uppercase;
}
.eps-schedule .eps-card-price del {
    color: var(--eps-muted-2);
    font-weight: 500;
    font-size: 14px;
    margin-right: 4px;
    opacity: .7;
}
.eps-schedule .eps-card-price ins { text-decoration: none; }

/* Wrap around badge to avoid wpautop creating stray <p> tags */
.eps-schedule .eps-badge-wrap {
    display: block;
    margin-top: 4px;
    min-height: 28px;   /* consistent badge row height across all cards */
    line-height: 1;
}
.eps-schedule .eps-ribbon-wrap { display: contents; } /* transparent — ribbon uses position:absolute */
.eps-schedule .eps-badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 11px;
    letter-spacing: .1em;
    font-weight: 800;
    border-radius: 6px;
    text-transform: uppercase;
}
.eps-schedule .eps-badge.is-open { background: rgba(34,197,94,.16); color: var(--eps-ok); border: 1px solid rgba(34,197,94,.3); }
.eps-schedule .eps-badge.is-mid  { background: rgba(249,115,22,.14); color: var(--eps-warn); border: 1px solid rgba(249,115,22,.3); }
.eps-schedule .eps-badge.is-low  { background: var(--eps-danger); color: #fff; }
.eps-schedule .eps-badge.is-sold { background: rgba(107,114,128,.2); color: var(--eps-sold); border: 1px solid rgba(107,114,128,.35); }

/* ---------- Full-width CTA button ---------- */
.eps-schedule .eps-cta-wrap {
    grid-area: cta;
    align-self: end;         /* stick to bottom of the grid cell */
    justify-self: stretch;   /* fill full width horizontally */
    width: 100%;
    display: flex;
    align-items: flex-end;   /* button hugs bottom of wrap */
    min-height: 56px;        /* consistent wrap height across cards */
}
.eps-schedule .eps-cta {
    display: flex;
    width: 100%;
    min-height: 56px;        /* every button same height, sold or open */
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: linear-gradient(90deg, var(--eps-accent), var(--eps-accent2));
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 800;
    letter-spacing: .1em;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 12px;
    transition: transform .1s ease, filter .15s ease, box-shadow .15s ease;
}
.eps-schedule .eps-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 8px 24px -10px rgba(251,191,36,.6);
}
/* C — sold-out button is GRAY, non-interactive (rendered as <span>, not <a>) */
.eps-schedule .eps-cta.is-disabled-look {
    background: #3a3a3a;
    color: #a0a0a0 !important;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;   /* belt & suspenders: even if rendered as <a>, no click */
    letter-spacing: .12em;
}
.eps-schedule .eps-cta.is-disabled-look:hover {
    background: #3a3a3a;
    color: #a0a0a0 !important;
    transform: none;
    filter: none;
}
.eps-schedule .eps-arrow { display: inline-block; transition: transform .15s ease; }
.eps-schedule .eps-cta:hover .eps-arrow { transform: translateX(3px); }

/* ---------- Past sold-out strip ---------- */
.eps-schedule .eps-past {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--eps-line);
}
.eps-schedule .eps-past-label {
    color: var(--eps-muted);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 10px;
    font-weight: 700;
}
.eps-schedule .eps-past-list { display: flex; flex-wrap: wrap; gap: 8px; }
.eps-schedule .eps-past-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(107,114,128,.14);
    border: 1px solid var(--eps-line);
    border-radius: 999px;
    color: var(--eps-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.eps-schedule .eps-past-check { color: var(--eps-ok); font-weight: 900; }

/* ---------- View-all button ---------- */
.eps-schedule .eps-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 16px 22px;
    background: transparent;
    color: var(--eps-text) !important;
    text-decoration: none !important;
    font-weight: 800;
    letter-spacing: .1em;
    font-size: 13px;
    text-transform: uppercase;
    border: 1px solid var(--eps-line-2);
    border-radius: 999px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
    align-self: center;
    /* space above regardless of what's above */
    margin-top: 26px;
}
.eps-schedule .eps-view-all:hover {
    border-color: var(--eps-accent);
    color: var(--eps-accent) !important;
    background: rgba(251,191,36,.06);
}
.eps-schedule .eps-calendar-ico { font-size: 14px; line-height: 1; }

/* ---------- Empty state ---------- */
.eps-schedule .eps-empty {
    background: var(--eps-card);
    border: 1px dashed var(--eps-line);
    border-radius: 14px;
    padding: 28px;
    color: var(--eps-muted);
    text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .eps-schedule .eps-columns {
        grid-template-columns: 1fr;
    }
    .eps-schedule .eps-column-divider { display: none; }
    .eps-schedule .eps-column + .eps-column {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px dashed var(--eps-line);
    }
    .eps-schedule .eps-hero { font-size: clamp(28px, 8vw, 48px); }
}
@media (max-width: 640px) {
    .eps-schedule {
        padding: clamp(28px, 6vw, 44px) clamp(16px, 4vw, 24px) clamp(24px, 4vw, 36px);
        border-radius: 18px;
    }
    .eps-schedule .eps-hero {
        font-size: clamp(22px, 8.5vw, 36px);
        letter-spacing: -0.02em;
        margin-bottom: 18px;
    }
    .eps-schedule .eps-top-heading {
        font-size: 13px;
        letter-spacing: .1em;
    }
    .eps-schedule .eps-with-rules .eps-rule { flex-basis: 20px; }
    .eps-schedule .eps-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
    .eps-schedule .eps-tile { min-height: 170px; border-radius: 12px; }
    .eps-schedule .eps-tile-inner { padding: 16px 8px; }
    .eps-schedule .eps-tile-city {
        font-size: clamp(16px, 5vw, 22px);   /* scales with viewport, VANCOUVER fits at 375px */
        letter-spacing: .02em;
        word-break: keep-all;
        overflow-wrap: normal;
    }
    .eps-schedule .eps-tile-sub { font-size: 9px; letter-spacing: .12em; }
    .eps-schedule .eps-tile-bg { background-size: cover; opacity: 1; }
    .eps-schedule .eps-tiles-subline { font-size: 12px; margin-top: 14px; max-width: 100%; }
    .eps-schedule .eps-tiles.eps-none-active + .eps-tiles-subline::after {
        display: block;
        content: 'Tap a city to see upcoming dates';
        margin-top: 4px;
    }
    /* Card compression on small screens */
    .eps-schedule .eps-card {
        grid-template-columns: 68px 1fr;
        padding: 16px 14px 14px;
        gap: 12px;
    }
    .eps-schedule .eps-card-date { min-width: 68px; min-height: 82px; padding: 8px 4px; }
    .eps-schedule .eps-mon { font-size: 11px; }
    .eps-schedule .eps-day { font-size: 18px; }
    .eps-schedule .eps-year { font-size: 10px; }
    .eps-schedule .eps-card-title { font-size: 13px; }
    .eps-schedule .eps-card-meta { font-size: 11px; }
    .eps-schedule .eps-card-price { font-size: 18px; }
    .eps-schedule .eps-cta { padding: 13px 14px; font-size: 12px; letter-spacing: .06em; }
    .eps-schedule .eps-city-heading { font-size: 20px; }
    .eps-schedule .eps-view-all { font-size: 12px; padding: 13px 18px; }
}
@media (max-width: 380px) {
    .eps-schedule .eps-tile-city { font-size: 15px; letter-spacing: 0; }
    .eps-schedule .eps-tile-sub { display: none; }
    .eps-schedule .eps-tile-inner { padding: 10px 10px; }
}

/* ---------------------------------------------------------------------
 * Landing-page big button (rendered by [eps_button]).
 * Standalone selectors (not scoped under .eps-schedule) so this button
 * works when dropped inside Blunor pricing cards on the landings.
 * ------------------------------------------------------------------- */
.eps-big-btn-wrap {
    width: 100%;
    margin-top: 12px;
}
.eps-big-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.eps-big-btn.is-open {
    background: #ffcd0a;
    color: #0f0f0f !important;
}
.eps-big-btn.is-open:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(255,205,10,0.35);
}
.eps-big-btn.is-sold {
    background: #ef4444;
    color: #ffffff !important;
}
.eps-big-btn.is-sold:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(239,68,68,0.35);
}
.eps-big-btn .eps-btn-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.eps-big-btn:hover .eps-btn-arrow {
    transform: translateX(4px);
}

/* =====================================================================
 * [epoxy_city_page] — Step-2 dedicated city page (owner mockup)
 * ================================================================== */
.eps-cp {
    --eps-cp-accent: #ffcd0a;
    --eps-cp-accent2: #f59e0b;
    --eps-cp-danger: #ef4444;
    --eps-cp-ok: #22c55e;
    --eps-cp-line: #2a2a2a;
    --eps-cp-bg: #0a0a0a;
    --eps-cp-bg-2: #141414;
    --eps-cp-muted: #9ca3af;
    --eps-cp-max: 1240px;               /* boxed content width */
    color: #ffffff;
    /* Full-width dark background; inner content is boxed via --eps-cp-max */
    padding: clamp(120px, 12vw, 160px) clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px);
    background: var(--eps-cp-bg);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Box every direct content section (leave the hero full-bleed for its photo) */
.eps-cp > .eps-cp-heading,
.eps-cp > .eps-cp-heading-rule,
.eps-cp > .eps-cp-cards,
.eps-cp > .eps-cp-benefits,
.eps-cp > .eps-cp-back {
    max-width: var(--eps-cp-max);
    margin-left: auto;
    margin-right: auto;
}
/* Hero stays full-bleed (photo edge-to-edge), but its inner content is boxed */
.eps-cp-hero-inner {
    max-width: var(--eps-cp-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(4px, 1vw, 12px);
    padding-right: clamp(4px, 1vw, 12px);
}

/* Hero */
.eps-cp-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: clamp(30px, 4vw, 50px);
    background: linear-gradient(90deg, #0a0a0a 0%, #0a0a0a 40%, transparent 100%), var(--eps-cp-photo, none);
    background-size: cover;
    background-position: right center;
}
.eps-cp-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: clamp(200px, 22vw, 280px);   /* shorter — dates visible immediately */
}
.eps-cp-hero-content { padding: clamp(16px, 2.4vw, 32px) clamp(20px, 3vw, 40px); z-index: 2; position: relative; }
.eps-cp-step-wrap { display: block; margin-bottom: 12px; }
.eps-cp-step {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--eps-cp-accent);
}
.eps-cp-headline {
    font-size: clamp(22px, 2.6vw, 34px);   /* smaller — matches shortened hero */
    font-weight: 900;
    line-height: 1;
    margin: 0 0 4px;
    text-transform: uppercase;
    color: #fff;
}
.eps-cp-city {
    font-size: clamp(28px, 3.6vw, 48px);   /* smaller */
    font-weight: 900;
    line-height: 1;
    margin: 0 0 clamp(10px, 1.4vw, 16px);
    text-transform: uppercase;
    color: var(--eps-cp-accent);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.eps-cp-pin { font-size: .8em; }
.eps-cp-lead {
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--eps-cp-muted);
    max-width: 420px;
    margin: 0 0 clamp(20px, 2.4vw, 28px);
    line-height: 1.5;
}
.eps-cp-quick-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: clamp(14px, 2vw, 28px);
    flex-wrap: wrap;
}
.eps-cp-quick-features li { display: flex; align-items: center; gap: 8px; }
.eps-cp-qf-ico {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--eps-cp-accent);
    border-radius: 50%;
    color: var(--eps-cp-accent);
    font-size: 14px;
    flex-shrink: 0;
}
.eps-cp-qf-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Section heading */
.eps-cp-heading {
    text-align: center;
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 6px;
    color: #fff;
}
.eps-cp-heading-accent { color: var(--eps-cp-accent); }
.eps-cp-heading-rule {
    width: 60px;
    height: 2px;
    background: var(--eps-cp-accent);
    margin: 0 auto clamp(24px, 3vw, 36px);
    border-radius: 2px;
}

/* Card grid */
.eps-cp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin-bottom: clamp(30px, 4vw, 50px);
    align-items: stretch;
}
.eps-cp-card {
    position: relative;
    background: transparent;
    border: 1.5px solid var(--eps-cp-accent);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.eps-cp-card.is-next { box-shadow: 0 0 40px rgba(255,205,10,.2); }
.eps-cp-ribbon-wrap { display: block; }
.eps-cp-ribbon {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--eps-cp-accent);
    color: #000;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    padding: 6px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    z-index: 3;
}
.eps-cp-card-inner {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 16px;
    padding: 44px 24px 24px;
    flex: 1;
}
.eps-cp-card-date {
    background: #0f0f0f;
    border-radius: 10px;
    padding: 12px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    align-self: start;
    color: var(--eps-cp-accent);
}
.eps-cp-card-mon {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.eps-cp-card-days { font-size: 22px; font-weight: 900; color: #fff; line-height: 1; }
.eps-cp-card-year { font-size: 11px; color: var(--eps-cp-accent); letter-spacing: .1em; font-weight: 700; }
.eps-cp-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.eps-cp-card-title {
    color: var(--eps-cp-accent);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0;
}
.eps-cp-card-meta { color: var(--eps-cp-muted); font-size: 12px; letter-spacing: .04em; margin: 0 0 4px; }
.eps-cp-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--eps-cp-accent);
    font-size: 13px;
    letter-spacing: .02em;
    flex: 1;
}
.eps-cp-card-features li { display: flex; align-items: center; gap: 8px; }
.eps-cp-fico { color: var(--eps-cp-accent); font-size: 13px; width: 16px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.eps-cp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.eps-cp-card-price { font-size: 22px; font-weight: 900; color: #fff; margin: 0; }
.eps-cp-card-cad { font-size: 11px; color: var(--eps-cp-muted); font-weight: 700; margin-left: 4px; letter-spacing: .08em; }
.eps-cp-card-badge-wrap { display: block; }
.eps-cp-card-badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    border-radius: 6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.eps-cp-card-badge.is-open { background: rgba(34,197,94,.15); color: var(--eps-cp-ok); border: 1px solid rgba(34,197,94,.4); }
.eps-cp-card-badge.is-low  { background: var(--eps-cp-danger); color: #fff; }
.eps-cp-card-badge.is-call { background: transparent; color: var(--eps-cp-accent); border: 1px solid var(--eps-cp-accent); }

/* Card button */
.eps-cp-card-btn-wrap { display: block; margin-top: 6px; }
.eps-cp-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
}
.eps-cp-card-btn.is-primary {
    background: var(--eps-cp-accent);
    color: #0a0a0a !important;
    box-shadow: 0 4px 14px rgba(255,205,10,.25);
}
.eps-cp-card-btn.is-primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,205,10,.4); }
.eps-cp-card-btn.is-outline {
    background: transparent;
    color: var(--eps-cp-accent) !important;
    border: 1.5px solid var(--eps-cp-accent);
}
.eps-cp-card-btn.is-outline:hover { background: rgba(255,205,10,.12); transform: translateY(-1px); }
.eps-cp-btn-arrow { font-size: 15px; }

/* Benefit bar */
.eps-cp-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
    border: 1.5px solid var(--eps-cp-accent);
    border-radius: 16px;
    margin-bottom: clamp(24px, 3vw, 36px);
}
.eps-cp-benefit { display: flex; align-items: flex-start; gap: 14px; }
.eps-cp-b-ico {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--eps-cp-accent);
    font-size: 20px;
    flex-shrink: 0;
}
.eps-cp-b-text { display: flex; flex-direction: column; gap: 4px; }
.eps-cp-b-title { margin: 0; color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.eps-cp-b-sub { margin: 0; color: var(--eps-cp-muted); font-size: 12px; line-height: 1.4; }

/* Back — real button */
.eps-cp-back { text-align: center; margin: clamp(24px, 3vw, 36px) 0 0; }
.eps-cp-back a {
    color: var(--eps-cp-accent) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1.5px solid var(--eps-cp-accent);
    border-radius: 999px;
    background: transparent;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.eps-cp-back a:hover {
    background: var(--eps-cp-accent);
    color: #0a0a0a !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255,205,10,.35);
}
.eps-cp-back-arrow { font-size: 16px; line-height: 1; transition: transform .15s ease; }
.eps-cp-back a:hover .eps-cp-back-arrow { transform: translateX(-3px); }

/* Mobile */
@media (max-width: 900px) {
    .eps-cp-hero-inner { grid-template-columns: 1fr; min-height: auto; }
    .eps-cp-hero { background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.85) 60%), var(--eps-cp-photo, none); background-size: cover; background-position: center; }
    .eps-cp-hero-content { padding: 32px 20px; text-align: left; }
    .eps-cp-headline { font-size: 30px; }
    .eps-cp-city { font-size: 40px; }
    .eps-cp-benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .eps-cp-benefits { grid-template-columns: 1fr; }
    .eps-cp-cards { grid-template-columns: 1fr; }
}

/* STEP-1 indicator on the buy-ticket (Step 1) page */
.eps-schedule .eps-step-wrap { display: block; text-align: center; margin: 0 0 18px; }
.eps-schedule .eps-step {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--eps-accent, #ffcd0a);
    background: rgba(255,205,10,.1);
    border: 1px solid rgba(255,205,10,.4);
    padding: 6px 14px;
    border-radius: 999px;
}



/* ==============================================================
 * THEME OVERRIDES v1.6.4
 * Blunor theme sets h1{font-size:200px}, and Elementor kit uses
 * .elementor-kit-XXXX h1 (0,1,1) which beats our plain classes.
 * Reassert via parent-scope compound selectors + !important.
 * ============================================================ */
.eps-cp .eps-cp-headline { font-size: clamp(22px, 2.6vw, 34px) !important; line-height: 1 !important; letter-spacing: 0 !important; }
.eps-cp .eps-cp-city     { font-size: clamp(28px, 3.6vw, 48px) !important; line-height: 1 !important; letter-spacing: 0 !important; }
.eps-cp .eps-cp-heading  { font-size: clamp(20px, 2.4vw, 28px) !important; line-height: 1.15 !important; letter-spacing: .1em !important; }
.eps-cp .eps-cp-card-title { font-size: 15px !important; line-height: 1.2 !important; }
.eps-cp .eps-cp-card-price { font-size: 22px !important; line-height: 1 !important; }
.eps-cp .eps-cp-b-title    { font-size: 13px !important; line-height: 1.2 !important; }

.eps-schedule .eps-hero          { font-size: clamp(32px, 6vw, 72px) !important; line-height: 1 !important; letter-spacing: -0.01em !important; }
.eps-schedule .eps-top-heading   { font-size: clamp(22px, 3vw, 32px) !important; line-height: 1.1 !important; letter-spacing: .08em !important; }
.eps-schedule .eps-city-heading  { font-size: clamp(24px, 2.6vw, 30px) !important; line-height: 1.1 !important; letter-spacing: .04em !important; }
.eps-schedule .eps-card-title    { font-size: 15px !important; line-height: 1.2 !important; }

/* Mobile clamps still work because the overrides use clamp() themselves */
@media (max-width: 900px) {
  .eps-cp .eps-cp-headline { font-size: 30px !important; }
  .eps-cp .eps-cp-city     { font-size: 40px !important; }
}
@media (max-width: 640px) {
  .eps-schedule .eps-hero        { font-size: clamp(22px, 8.5vw, 36px) !important; }
  .eps-schedule .eps-top-heading { font-size: 13px !important; }
  .eps-schedule .eps-city-heading { font-size: 20px !important; }
}


/* ==============================================================
 * MASTER v2.0 — 2026 owner mockup
 * Card is now a single centred stack (date on top, features in a
 * 3-up row) instead of the old date-box + body split, so every
 * card rule below is a deliberate reset of the original plugin CSS.
 * ============================================================== */

.eps-cp { --eps-cp-max: 1200px !important; padding-top: clamp(96px, 8vw, 124px) !important; }

/* ---------------- HERO ---------------- */
.eps-cp > .eps-cp-hero {
    max-width: var(--eps-cp-max) !important;
    margin: 0 auto clamp(26px, 3vw, 38px) !important;
}
.eps-cp .eps-cp-hero {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background-color: #0a0a0a !important;
    background-image: none !important;
    min-height: 330px !important;
}
.eps-cp .eps-cp-hero-inner {
    position: relative !important;
    display: block !important;
    min-height: 330px !important;
    grid-template-columns: none !important;
}
.eps-cp .eps-cp-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 48% !important;
    padding: 30px 30px 30px 34px !important;
}

/* Photo on its own masked layer so its left edge fades to real
 * transparency instead of being darkened by an overlay. */
.eps-cp .eps-cp-hero-photo {
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    width: 62% !important;
    z-index: 0 !important;
    background-color: transparent !important;
    background-image: var(--eps-cp-photo, none) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 14%, rgba(0,0,0,.34) 28%, rgba(0,0,0,.64) 42%, rgba(0,0,0,.88) 55%, rgba(0,0,0,1) 66%) !important;
            mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 14%, rgba(0,0,0,.34) 28%, rgba(0,0,0,.64) 42%, rgba(0,0,0,.88) 55%, rgba(0,0,0,1) 66%) !important;
}
.eps-cp .eps-cp-hero-photo::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,.10) 8%, rgba(10,10,10,0) 20%, rgba(10,10,10,0) 74%, rgba(10,10,10,.38) 89%, #0a0a0a 100%) !important;
    pointer-events: none !important;
}

.eps-cp .eps-cp-step-wrap { margin: 0 0 12px !important; }
.eps-cp .eps-cp-step {
    display: inline-block !important;
    font-size: 12px !important; font-weight: 800 !important;
    letter-spacing: .16em !important; line-height: 1 !important;
    color: var(--eps-cp-accent) !important; text-transform: uppercase !important;
    margin: 0 !important;
}
.eps-cp .eps-cp-headline {
    font-size: clamp(26px, 2.65vw, 38px) !important;
    font-weight: 900 !important; line-height: 1.04 !important;
    letter-spacing: -.01em !important; margin: 0 0 4px !important;
    color: #fff !important; text-transform: uppercase !important;
}
.eps-cp .eps-cp-city {
    display: flex !important; align-items: center !important; gap: 8px !important;
    font-size: clamp(34px, 3.7vw, 54px) !important;
    font-weight: 900 !important; line-height: 1.02 !important;
    letter-spacing: -.015em !important; margin: 0 0 12px !important;
    color: var(--eps-cp-accent) !important; text-transform: uppercase !important;
}
.eps-cp .eps-cp-pin { display: inline-flex !important; align-items: center !important; color: var(--eps-cp-accent) !important; font-size: inherit !important; }
.eps-cp .eps-cp-pin svg { width: .78em !important; height: .78em !important; stroke-width: 2 !important; }

/* Change Location — replaces the old bottom back link */
.eps-cp .eps-cp-change { margin: 0 0 22px !important; }
.eps-cp .eps-cp-change a {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    color: var(--eps-cp-accent) !important;
    font-size: 15px !important; font-weight: 600 !important;
    text-decoration: underline !important; text-underline-offset: 4px !important;
    letter-spacing: .01em !important;
}
.eps-cp .eps-cp-change a:hover { color: #fff !important; }
.eps-cp .eps-cp-change-arrow { font-size: 17px !important; line-height: 1 !important; text-decoration: none !important; }

/* Venue block */
.eps-cp .eps-cp-venue { display: flex !important; align-items: flex-start !important; gap: 12px !important; }
.eps-cp .eps-cp-venue-ico {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 30px !important; height: 30px !important; flex-shrink: 0 !important;
    border: 1.5px solid rgba(255,205,10,.55) !important; border-radius: 50% !important;
    color: var(--eps-cp-accent) !important; margin-top: 1px !important;
}
.eps-cp .eps-cp-venue-ico svg { width: 16px !important; height: 16px !important; }
.eps-cp .eps-cp-venue-text { min-width: 0 !important; }
.eps-cp .eps-cp-venue-name {
    font-size: 15px !important; font-weight: 700 !important; color: #fff !important;
    margin: 0 0 3px !important; line-height: 1.3 !important; letter-spacing: .01em !important;
}
.eps-cp .eps-cp-venue-addr {
    font-size: 14px !important; font-weight: 400 !important; color: #b9bec6 !important;
    margin: 0 0 6px !important; line-height: 1.45 !important;
}
.eps-cp .eps-cp-venue-map { margin: 0 !important; }
.eps-cp .eps-cp-venue-map a {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    color: var(--eps-cp-accent) !important; font-size: 14px !important; font-weight: 600 !important;
    text-decoration: underline !important; text-underline-offset: 4px !important;
}
.eps-cp .eps-cp-venue-map a:hover { color: #fff !important; }

@media (max-width: 900px) {
    .eps-cp .eps-cp-hero, .eps-cp .eps-cp-hero-inner { min-height: 300px !important; }
    .eps-cp .eps-cp-hero-content { max-width: 100% !important; padding: 26px 20px !important; }
    .eps-cp .eps-cp-hero-photo {
        width: 100% !important; left: 0 !important;
        background-position: center center !important;
        -webkit-mask-image: none !important; mask-image: none !important;
    }
    .eps-cp .eps-cp-hero-photo::after {
        background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.18) 14%, rgba(10,10,10,.62) 50%, rgba(10,10,10,.90) 74%, #0a0a0a 94%) !important;
    }
}

/* ---------------- SECTION HEADING ---------------- */
.eps-cp .eps-cp-heading {
    display: flex !important; align-items: center !important; justify-content: center !important;
    white-space: pre !important;
    max-width: var(--eps-cp-max) !important;
    margin: 0 auto 20px !important; padding: 0 !important;
    font-size: clamp(15px, 1.35vw, 19px) !important; font-weight: 800 !important;
    letter-spacing: .12em !important; color: #fff !important;
    text-transform: uppercase !important; line-height: 1.3 !important;
}
.eps-cp .eps-cp-heading::before, .eps-cp .eps-cp-heading::after {
    content: "" !important; flex: 1 1 auto !important; height: 1px !important;
    background: rgba(255,205,10,.5) !important;
    position: static !important; width: auto !important; max-width: none !important;
}
.eps-cp .eps-cp-heading::before { margin-right: 24px !important; }
.eps-cp .eps-cp-heading::after  { margin-left: 24px !important; }
.eps-cp .eps-cp-heading-accent { color: #fff !important; }
.eps-cp .eps-cp-heading-rule { display: none !important; }

/* ---------------- CARD GRID ---------------- */
.eps-cp .eps-cp-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
    max-width: var(--eps-cp-max) !important;
    margin: 0 auto clamp(24px, 3vw, 34px) !important;
    align-items: stretch !important;
}
@media (max-width: 1000px) { .eps-cp .eps-cp-cards { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 680px)  { .eps-cp .eps-cp-cards { grid-template-columns: 1fr !important; } }

/* ---------------- CARD ---------------- */
.eps-cp .eps-cp-card {
    position: relative !important;
    display: flex !important; flex-direction: column !important;
    border: 1.5px solid rgba(255,205,10,.30) !important;
    border-radius: 14px !important;
    background: linear-gradient(168deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 42%), #0d0d0d !important;
    padding: 0 !important; overflow: hidden !important; opacity: 1 !important;
}
.eps-cp .eps-cp-card.is-next {
    border-color: rgba(255,205,10,.85) !important;
    box-shadow: 0 0 0 1px rgba(255,205,10,.18), 0 8px 34px rgba(255,205,10,.14) !important;
}
.eps-cp .eps-cp-card-inner {
    display: flex !important; flex-direction: column !important;
    grid-template-columns: none !important;
    text-align: center !important;
    padding: 26px 22px 22px !important;
    flex: 1 1 auto !important;
    column-gap: 0 !important; row-gap: 0 !important;
}
.eps-cp .eps-cp-card, .eps-cp .eps-cp-card * { line-height: 1.3 !important; }

/* NEXT CLASS tag — slim, flush in the corner, never over the date */
.eps-cp .eps-cp-card .eps-cp-ribbon-wrap {
    position: absolute !important; top: 0 !important; left: 0 !important;
    right: auto !important; bottom: auto !important;
    width: auto !important; height: auto !important;
    line-height: 0 !important; z-index: 4 !important; transform: none !important;
}
.eps-cp .eps-cp-card .eps-cp-ribbon {
    position: static !important; transform: none !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    display: inline-block !important; white-space: nowrap !important;
    background: var(--eps-cp-accent) !important; color: #000 !important;
    font-size: 9.5px !important; font-weight: 900 !important; letter-spacing: .13em !important;
    line-height: 1.25 !important; padding: 4px 12px !important;
    height: auto !important; min-height: 0 !important;
    border-radius: 12px 0 8px 0 !important; text-transform: uppercase !important;
    box-shadow: none !important;
}

/* Date block — now a centred stack at the top, not a left box */
.eps-cp .eps-cp-card-date {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    width: auto !important; min-width: 0 !important; height: auto !important;
    background: none !important; border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important; align-self: auto !important; gap: 0 !important;
}
.eps-cp .eps-cp-card-mon {
    font-size: clamp(15px, 1.3vw, 18px) !important; font-weight: 800 !important;
    letter-spacing: .09em !important; color: #fff !important;
    line-height: 1.2 !important; margin: 0 !important; text-transform: uppercase !important;
}
.eps-cp .eps-cp-card-days {
    font-size: clamp(38px, 3.9vw, 54px) !important; font-weight: 900 !important;
    color: #fff !important; line-height: 1.02 !important; letter-spacing: -.02em !important;
    margin: 2px 0 0 !important; white-space: nowrap !important;
}
.eps-cp .eps-cp-card-year {
    font-size: clamp(16px, 1.4vw, 20px) !important; font-weight: 800 !important;
    letter-spacing: .04em !important; color: var(--eps-cp-accent) !important;
    line-height: 1.2 !important; margin: 2px 0 0 !important;
}

.eps-cp .eps-cp-card-rule {
    height: 1px !important; width: 100% !important;
    background: rgba(255,205,10,.16) !important;
    margin: 18px 0 !important; flex: 0 0 auto !important;
}

.eps-cp .eps-cp-card-title {
    font-size: clamp(15px, 1.3vw, 17px) !important; font-weight: 800 !important;
    letter-spacing: .05em !important; color: var(--eps-cp-accent) !important;
    line-height: 1.25 !important; margin: 0 0 6px !important; text-transform: uppercase !important;
}
.eps-cp .eps-cp-card-meta {
    font-size: 13px !important; font-weight: 500 !important; color: #cdd2d9 !important;
    letter-spacing: .03em !important; line-height: 1.4 !important; margin: 0 0 18px !important;
}

/* Features — 3 across with hairline dividers */
.eps-cp .eps-cp-card-features {
    display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
    flex-direction: row !important;
}
.eps-cp .eps-cp-card-features li {
    display: flex !important; align-items: center !important; gap: 7px !important;
    padding: 0 7px !important; margin: 0 !important; text-align: left !important;
    border-right: 1px solid rgba(255,205,10,.16) !important;
    font-size: 10.5px !important; font-weight: 600 !important;
    color: #e3e6ea !important; letter-spacing: .01em !important; line-height: 1.28 !important;
    min-width: 0 !important;
}
.eps-cp .eps-cp-card-features li:last-child { border-right: 0 !important; padding-right: 0 !important; }
.eps-cp .eps-cp-card-features li:first-child { padding-left: 0 !important; }
.eps-cp .eps-cp-fico {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 22px !important; height: 22px !important; flex-shrink: 0 !important;
    color: var(--eps-cp-accent) !important;
}
.eps-cp .eps-cp-fico svg { width: 21px !important; height: 21px !important; }
.eps-cp .eps-cp-ftext { display: block !important; min-width: 0 !important; }

/* Price row — full card width, no negative-margin hack any more */
.eps-cp .eps-cp-card-footer {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 10px !important; flex-wrap: wrap !important;
    margin: 0 0 0 !important; margin-left: 0 !important; padding-top: 0 !important;
    border-top: 0 !important; margin-top: auto !important; text-align: left !important;
}
.eps-cp .eps-cp-card-price {
    font-size: clamp(23px, 2.1vw, 28px) !important; font-weight: 900 !important;
    color: #fff !important; line-height: 1.05 !important; letter-spacing: -.01em !important;
    margin: 0 !important;
}
.eps-cp .eps-cp-card-cad {
    font-size: 13px !important; font-weight: 600 !important; color: #9ca3af !important;
    letter-spacing: .06em !important; margin-left: 5px !important; text-transform: uppercase !important;
}

/* Badges */
.eps-cp .eps-cp-card-badge {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    font-size: 10px !important; font-weight: 800 !important; letter-spacing: .07em !important;
    padding: 6px 11px !important; border-radius: 6px !important;
    text-transform: uppercase !important; line-height: 1.2 !important; white-space: nowrap !important;
}
.eps-cp .eps-cp-badge-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: currentColor !important; flex-shrink: 0 !important; display: inline-block !important; }
.eps-cp .eps-cp-badge-ico { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; }
.eps-cp .eps-cp-badge-ico svg { width: 13px !important; height: 13px !important; }
.eps-cp .eps-cp-card-badge.is-open { background: rgba(34,197,94,.14) !important; color: #4ade80 !important; border: 1px solid rgba(34,197,94,.42) !important; }
.eps-cp .eps-cp-card-badge.is-low  { background: rgba(220,38,38,.20) !important; color: #fca5a5 !important; border: 1px solid rgba(220,38,38,.55) !important; }
.eps-cp .eps-cp-card-badge.is-sold { background: #ef4444 !important; color: #fff !important; border: 1px solid #ef4444 !important; }
.eps-cp .eps-cp-card-badge.is-call { background: rgba(255,205,10,.15) !important; color: var(--eps-cp-accent) !important; border: 1px solid rgba(255,205,10,.55) !important; }

/* Buttons */
.eps-cp .eps-cp-card-btn-wrap { margin-top: 16px !important; margin-left: 0 !important; line-height: 1 !important; }
.eps-cp .eps-cp-card-btn {
    position: relative !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    width: 100% !important; box-sizing: border-box !important;
    min-height: 46px !important; padding: 13px 44px !important;
    border-radius: 9px !important;
    font-size: 13px !important; font-weight: 900 !important; letter-spacing: .11em !important;
    line-height: 1 !important; text-transform: uppercase !important; text-decoration: none !important;
    box-shadow: none !important; transition: transform .15s ease, filter .15s ease !important;
}
.eps-cp .eps-cp-card-btn:not(.is-sold):hover { transform: translateY(-1px) !important; filter: brightness(1.06) !important; }
.eps-cp .eps-cp-btn-arrow {
    position: absolute !important; right: 16px !important; top: 50% !important;
    transform: translateY(-50%) !important; display: inline-flex !important;
    align-items: center !important; line-height: 1 !important;
}
.eps-cp .eps-cp-btn-arrow svg { width: 18px !important; height: 18px !important; }
.eps-cp .eps-cp-card-btn.is-sold {
    background: #ef4444 !important; color: #fff !important; border: 1.5px solid #ef4444 !important;
    cursor: not-allowed !important; pointer-events: none !important; box-shadow: none !important;
}
.eps-cp .eps-cp-card-btn.is-sold:hover { transform: none !important; filter: none !important; background: #ef4444 !important; }
.eps-cp .eps-cp-card-btn.is-call {
    background: transparent !important; color: var(--eps-cp-accent) !important;
    border: 1.5px solid var(--eps-cp-accent) !important; box-shadow: none !important;
}
.eps-cp .eps-cp-card-btn.is-call:hover { background: rgba(255,205,10,.1) !important; }
.eps-cp .eps-cp-card:has(.eps-cp-card-btn.is-call) { border-color: rgba(255,205,10,.26) !important; }

@media (max-width: 380px) {
    .eps-cp .eps-cp-card-features { grid-template-columns: 1fr !important; }
    .eps-cp .eps-cp-card-features li { border-right: 0 !important; border-bottom: 1px solid rgba(255,205,10,.16) !important; padding: 8px 0 !important; }
    .eps-cp .eps-cp-card-features li:last-child { border-bottom: 0 !important; }
}

/* ---------------- BENEFITS BAR ---------------- */
.eps-cp .eps-cp-benefits {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0 !important;
    max-width: var(--eps-cp-max) !important;
    margin: 0 auto clamp(16px, 2vw, 24px) !important;
    padding: 18px 10px !important;
    border: 1.5px solid rgba(255,205,10,.32) !important; border-radius: 14px !important;
    background: transparent !important;
}
.eps-cp .eps-cp-benefit {
    display: flex !important; align-items: center !important; gap: 13px !important;
    padding: 2px 18px !important;
    border-right: 1px solid rgba(255,205,10,.18) !important;
}
.eps-cp .eps-cp-benefit:last-child { border-right: 0 !important; }
.eps-cp .eps-cp-b-ico {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 34px !important; height: 34px !important; flex-shrink: 0 !important;
    color: var(--eps-cp-accent) !important;
}
.eps-cp .eps-cp-b-ico svg { width: 30px !important; height: 30px !important; }
.eps-cp .eps-cp-b-text { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
.eps-cp .eps-cp-b-title {
    font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .05em !important;
    color: #fff !important; text-transform: uppercase !important; margin: 0 0 3px !important;
    line-height: 1.15 !important;
}
.eps-cp .eps-cp-b-sub {
    font-size: 12px !important; font-weight: 400 !important; color: #a2a8b1 !important;
    line-height: 1.35 !important; margin: 0 !important; letter-spacing: 0 !important;
}
@media (max-width: 900px) {
    .eps-cp .eps-cp-benefits { grid-template-columns: repeat(2, 1fr) !important; row-gap: 16px !important; }
    .eps-cp .eps-cp-benefit:nth-child(2n) { border-right: 0 !important; }
}
@media (max-width: 560px) {
    .eps-cp .eps-cp-benefits { grid-template-columns: 1fr !important; }
    .eps-cp .eps-cp-benefit { border-right: 0 !important; }
}

/* ---------------- TRUST STRIP ---------------- */
.eps-cp .eps-cp-trust {
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-wrap: wrap !important; gap: 0 !important;
    max-width: var(--eps-cp-max) !important;
    margin: 0 auto !important; padding: 4px 0 6px !important;
}
.eps-cp .eps-cp-trust-item {
    display: inline-flex !important; align-items: center !important; gap: 9px !important;
    font-size: 14px !important; font-weight: 500 !important; color: #d3d8de !important;
    padding: 6px 26px !important; letter-spacing: .01em !important;
}
.eps-cp .eps-cp-trust-ico { display: inline-flex !important; align-items: center !important; color: var(--eps-cp-accent) !important; flex-shrink: 0 !important; }
.eps-cp .eps-cp-trust-ico svg { width: 18px !important; height: 18px !important; }
.eps-cp .eps-cp-trust-item a { color: #d3d8de !important; text-decoration: none !important; }
.eps-cp .eps-cp-trust-item a:hover { color: var(--eps-cp-accent) !important; }
.eps-cp .eps-cp-trust-sep { width: 1px !important; height: 22px !important; background: rgba(255,205,10,.3) !important; display: inline-block !important; flex-shrink: 0 !important; }
@media (max-width: 620px) {
    .eps-cp .eps-cp-trust-sep { display: none !important; }
    .eps-cp .eps-cp-trust { flex-direction: column !important; }
    .eps-cp .eps-cp-trust-item { padding: 5px 0 !important; font-size: 13px !important; }
}

.eps-cp .eps-cp-svg { display: block !important; flex-shrink: 0 !important; }
/* ==============================================================
 * MASTER v2.0.2 — top feather + hero rhythm
 * The photo is top-aligned so the image's first rows sit on the
 * hero edge. Measured 71/70 brightness there, which reads as a
 * hard line. Feathered to ~30 while keeping the Calgary Tower
 * spire (image row 5%, hero y ~7%) legible.
 * ============================================================== */
.eps-cp .eps-cp-hero-photo::after {
    background: linear-gradient(180deg,
        rgba(10,10,10,.62) 0%,
        rgba(10,10,10,.30) 6%,
        rgba(10,10,10,.08) 15%,
        rgba(10,10,10,0) 24%,
        rgba(10,10,10,0) 74%,
        rgba(10,10,10,.38) 89%,
        #0a0a0a 100%) !important;
}

/* Tighten the hero stack toward the mockup proportions */
.eps-cp .eps-cp-hero, .eps-cp .eps-cp-hero-inner { min-height: 320px !important; }
.eps-cp .eps-cp-hero-content { padding: 24px 30px 24px 34px !important; }
.eps-cp .eps-cp-step-wrap { margin: 0 0 10px !important; }
.eps-cp .eps-cp-city { margin: 0 0 8px !important; }
.eps-cp .eps-cp-change { margin: 0 0 16px !important; }
/* ==============================================================
 * MASTER v2.1 — 2026 skylines carry their own vignette
 * Measured the new files: all four edges sit at 5-6 brightness and
 * the image peaks at only 52.8. The mask and the top/bottom feather
 * were built for the old un-vignetted photos and now just crush it,
 * so both are removed. The image fades itself into the black, which
 * means no seam and no lost brightness.
 * ============================================================== */
.eps-cp .eps-cp-hero-photo {
    width: 66% !important;
    background-size: cover !important;
    background-position: center center !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
}
.eps-cp[data-city="calgary"] .eps-cp-hero-photo,
.eps-cp[data-city="vancouver"] .eps-cp-hero-photo {
    -webkit-mask-image: none !important;
            mask-image: none !important;
}
.eps-cp .eps-cp-hero-photo::after { background: none !important; content: none !important; }

/* Stacked layout still needs a scrim: there the copy sits directly
 * over the bright part of the photo rather than beside it. */
@media (max-width: 900px) {
    .eps-cp .eps-cp-hero-photo {
        width: 100% !important; left: 0 !important;
        background-position: center center !important;
    }
    .eps-cp .eps-cp-hero-photo::after {
        content: "" !important;
        background: linear-gradient(180deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,.10) 16%, rgba(10,10,10,.55) 52%, rgba(10,10,10,.86) 76%, #0a0a0a 95%) !important;
    }
}
/* ==============================================================
 * MASTER v2.1.1 — close the last 5-point step at the photo edge
 * The baked-in vignette bottoms out around brightness 5, which is
 * DARKER than the hero ground (#0a0a0a = 10), so the photo edge read
 * as a faint dark band. A short fade over the first 16% of the photo
 * removes it. The image is already near-black there, so this costs
 * no visible brightness — unlike the old full-width mask.
 * ============================================================== */
.eps-cp .eps-cp-hero-photo,
.eps-cp[data-city="calgary"] .eps-cp-hero-photo,
.eps-cp[data-city="vancouver"] .eps-cp-hero-photo {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 5%, rgba(0,0,0,.85) 10%, rgba(0,0,0,1) 16%) !important;
            mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 5%, rgba(0,0,0,.85) 10%, rgba(0,0,0,1) 16%) !important;
}
@media (max-width: 900px) {
    .eps-cp .eps-cp-hero-photo,
    .eps-cp[data-city="calgary"] .eps-cp-hero-photo,
    .eps-cp[data-city="vancouver"] .eps-cp-hero-photo {
        -webkit-mask-image: none !important;
                mask-image: none !important;
    }
}
/* ==============================================================
 * MASTER v3.0 — 2026 premium mockup
 * Chrome/italic display type, step-progress dots, outline SOLD OUT,
 * NEXT AVAILABLE tab, faint circuit grid. Plus a max-height block:
 * the small-screen problem is VERTICAL, so it is solved with a
 * height media query rather than by shrinking widths.
 * ============================================================== */

/* ---- faint circuit grid, masked so it dies out at the edges ---- */
.eps-cp { position: relative !important; isolation: isolate !important; }
.eps-cp::before {
    content: "" !important;
    position: absolute !important; inset: 0 !important;
    pointer-events: none !important; z-index: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(255,205,10,.05) 1px, transparent 1px),
        linear-gradient(0deg,  rgba(255,205,10,.035) 1px, transparent 1px) !important;
    background-size: 68px 68px, 68px 68px !important;
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, #000 0%, rgba(0,0,0,.35) 55%, transparent 82%) !important;
            mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, #000 0%, rgba(0,0,0,.35) 55%, transparent 82%) !important;
}
.eps-cp > * { position: relative !important; z-index: 1 !important; }

/* ---- STEP + progress dots ---- */
.eps-cp .eps-cp-step-wrap {
    display: flex !important; align-items: center !important;
    gap: 14px !important; margin: 0 0 14px !important;
}
.eps-cp .eps-cp-step {
    font-size: 11.5px !important; font-weight: 800 !important;
    letter-spacing: .17em !important; color: var(--eps-cp-accent) !important;
    text-transform: uppercase !important; line-height: 1 !important; margin: 0 !important;
}
.eps-cp .eps-cp-dots {
    position: relative !important; display: inline-flex !important;
    align-items: center !important; gap: 13px !important;
}
.eps-cp .eps-cp-dots::before {
    content: "" !important; position: absolute !important;
    left: 4px !important; right: 4px !important; top: 50% !important;
    height: 1px !important; background: rgba(255,255,255,.22) !important;
}
.eps-cp .eps-cp-dots i {
    position: relative !important; z-index: 1 !important; display: block !important;
    width: 10px !important; height: 10px !important; border-radius: 50% !important;
    background: #0c0c0c !important; border: 1.5px solid rgba(255,255,255,.32) !important;
}
.eps-cp .eps-cp-dots i.is-on {
    background: var(--eps-cp-accent) !important; border-color: var(--eps-cp-accent) !important;
    box-shadow: 0 0 10px rgba(255,205,10,.65) !important;
}

/* ---- Hero display type ---- */
.eps-cp .eps-cp-headline {
    font-size: clamp(20px, 2.05vw, 29px) !important; font-weight: 800 !important;
    letter-spacing: .10em !important; line-height: 1.1 !important;
    margin: 0 0 6px !important; color: #fff !important; font-style: normal !important;
}
.eps-cp .eps-cp-city {
    display: block !important; position: relative !important;
    margin: 0 0 30px !important; line-height: 1 !important;
}
.eps-cp .eps-cp-pin {
    display: inline-block !important; vertical-align: middle !important;
    color: var(--eps-cp-accent) !important; margin-right: 12px !important;
    filter: drop-shadow(0 0 8px rgba(255,205,10,.45)) !important;
}
.eps-cp .eps-cp-pin svg { width: clamp(30px, 3vw, 44px) !important; height: clamp(30px, 3vw, 44px) !important; stroke-width: 1.5 !important; }
.eps-cp .eps-cp-city-name {
    display: inline-block !important; vertical-align: middle !important;
    font-size: clamp(40px, 5vw, 72px) !important; font-weight: 900 !important;
    font-style: italic !important; letter-spacing: -.005em !important;
    line-height: .98 !important; text-transform: uppercase !important;
    color: #ffffff !important;
}
/* Chrome fill only where background-clip:text is supported, so the
   text never renders invisible on an old engine. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .eps-cp .eps-cp-city-name {
        background: linear-gradient(178deg, #ffffff 0%, #f4f4f4 26%, #b9b9b9 46%, #8f8f8f 54%, #f0f0f0 70%, #ffffff 84%, #cfcfcf 100%) !important;
        -webkit-background-clip: text !important; background-clip: text !important;
        -webkit-text-fill-color: transparent !important; color: transparent !important;
    }
}
/* glow streak under the city name */
.eps-cp .eps-cp-city::after {
    content: "" !important; display: block !important;
    width: min(78%, 460px) !important; height: 2px !important;
    margin-top: 10px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255,205,10,.85) 22%, #fff6cc 50%, rgba(255,205,10,.85) 74%, transparent 100%) !important;
    box-shadow: 0 0 14px rgba(255,205,10,.55) !important;
    border-radius: 2px !important;
}

/* ---- links ---- */
.eps-cp .eps-cp-change { margin: 0 0 22px !important; }
.eps-cp .eps-cp-change a {
    font-size: 13.5px !important; font-weight: 800 !important;
    letter-spacing: .13em !important; text-transform: uppercase !important;
    text-decoration: none !important; gap: 10px !important;
}
.eps-cp .eps-cp-change a:hover { text-decoration: underline !important; text-underline-offset: 5px !important; }
.eps-cp .eps-cp-venue-ico {
    border: 0 !important; border-radius: 0 !important;
    width: 26px !important; height: 26px !important;
    filter: drop-shadow(0 0 6px rgba(255,205,10,.35)) !important;
}
.eps-cp .eps-cp-venue-ico svg { width: 26px !important; height: 26px !important; }
.eps-cp .eps-cp-venue-name {
    font-size: 14.5px !important; font-weight: 800 !important;
    letter-spacing: .07em !important; text-transform: uppercase !important;
    color: #fff !important; margin: 0 0 5px !important;
}
.eps-cp .eps-cp-venue-addr { font-size: 13.5px !important; color: #b7bcc4 !important; margin: 0 0 8px !important; }
.eps-cp .eps-cp-venue-map a {
    font-size: 12.5px !important; font-weight: 800 !important;
    letter-spacing: .12em !important; text-transform: uppercase !important;
    text-decoration: underline !important; text-underline-offset: 5px !important;
}

/* ---- section heading ---- */
.eps-cp .eps-cp-heading { letter-spacing: .16em !important; margin: 0 auto 22px !important; }

/* ---- cards ---- */
.eps-cp .eps-cp-card {
    border: 1.5px solid rgba(255,205,10,.34) !important;
    border-radius: 15px !important;
    background: linear-gradient(165deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.012) 38%, rgba(0,0,0,0) 70%), #0c0c0c !important;
    box-shadow: 0 0 22px rgba(255,205,10,.07) inset !important;
}
.eps-cp .eps-cp-card.is-next {
    border-color: rgba(255,205,10,.9) !important;
    box-shadow: 0 0 0 1px rgba(255,205,10,.20), 0 10px 38px rgba(255,205,10,.16) !important;
}
.eps-cp .eps-cp-card-mon {
    font-size: clamp(14px, 1.25vw, 17px) !important; font-weight: 800 !important;
    letter-spacing: .17em !important; color: #fff !important; margin: 0 0 2px !important;
}
.eps-cp .eps-cp-card-days {
    font-size: clamp(40px, 4.2vw, 60px) !important; font-weight: 900 !important;
    font-style: italic !important; letter-spacing: -.02em !important;
    line-height: 1 !important; margin: 0 !important; color: #ffffff !important;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .eps-cp .eps-cp-card-days {
        background: linear-gradient(178deg, #ffffff 0%, #f4f4f4 26%, #b9b9b9 46%, #8f8f8f 54%, #f0f0f0 70%, #ffffff 84%, #cfcfcf 100%) !important;
        -webkit-background-clip: text !important; background-clip: text !important;
        -webkit-text-fill-color: transparent !important; color: transparent !important;
    }
}
.eps-cp .eps-cp-card-year {
    font-size: clamp(15px, 1.35vw, 19px) !important; font-weight: 800 !important;
    letter-spacing: .06em !important; color: var(--eps-cp-accent) !important; margin: 3px 0 0 !important;
}
.eps-cp .eps-cp-card-rule { margin: 15px 0 !important; background: rgba(255,205,10,.18) !important; }
.eps-cp .eps-cp-card-title { letter-spacing: .07em !important; margin: 0 0 5px !important; }
.eps-cp .eps-cp-card-meta { font-size: 12.5px !important; margin: 0 0 15px !important; color: #d5dae1 !important; }
.eps-cp .eps-cp-card-features li {
    font-size: 9.5px !important; font-weight: 800 !important;
    letter-spacing: .06em !important; text-transform: uppercase !important;
    color: #e7eaee !important; gap: 8px !important;
}
.eps-cp .eps-cp-fico svg { width: 19px !important; height: 19px !important; }

/* NEXT CLASS tag + NEXT AVAILABLE tab */
.eps-cp .eps-cp-card .eps-cp-ribbon {
    font-size: 9px !important; letter-spacing: .14em !important;
    padding: 5px 13px !important; border-radius: 13px 0 10px 0 !important;
    box-shadow: 0 3px 12px rgba(255,205,10,.35) !important;
}
.eps-cp .eps-cp-nextavail {
    position: absolute !important; top: 0 !important; right: 0 !important;
    z-index: 4 !important; line-height: 0 !important;
}
.eps-cp .eps-cp-nextavail span {
    display: inline-block !important; white-space: nowrap !important;
    background: #15803d !important; color: #eafbf0 !important;
    font-size: 9px !important; font-weight: 900 !important; letter-spacing: .13em !important;
    padding: 5px 13px !important; line-height: 1.3 !important;
    text-transform: uppercase !important; border-radius: 0 13px 0 10px !important;
}

/* price + badges */
.eps-cp .eps-cp-card-price { font-size: clamp(22px, 2vw, 27px) !important; }
.eps-cp .eps-cp-card-badge {
    font-size: 9.5px !important; letter-spacing: .08em !important;
    padding: 6px 12px !important; border-radius: 7px !important; gap: 7px !important;
}
.eps-cp .eps-cp-card-badge.is-open { background: rgba(21,128,61,.22) !important; color: #5ee88f !important; border: 1px solid rgba(34,197,94,.45) !important; }
.eps-cp .eps-cp-card-badge.is-low  { background: rgba(153,27,27,.28) !important; color: #fca5a5 !important; border: 1px solid rgba(220,38,38,.5) !important; }
.eps-cp .eps-cp-card-badge.is-sold { background: rgba(153,27,27,.30) !important; color: #f87171 !important; border: 1px solid rgba(220,38,38,.5) !important; }
.eps-cp .eps-cp-card-badge.is-call { background: rgba(255,205,10,.12) !important; color: var(--eps-cp-accent) !important; border: 1px solid rgba(255,205,10,.6) !important; }

/* buttons — SOLD OUT is now an OUTLINE, not a filled block */
.eps-cp .eps-cp-card-btn { min-height: 44px !important; padding: 12px 44px !important; border-radius: 10px !important; letter-spacing: .12em !important; }
.eps-cp .eps-cp-card-btn.is-primary {
    background: linear-gradient(180deg, #ffd83a 0%, var(--eps-cp-accent) 55%, #e6b400 100%) !important;
    color: #171200 !important; border: 0 !important;
    box-shadow: 0 6px 20px rgba(255,205,10,.28) !important;
}
.eps-cp .eps-cp-card-btn.is-sold {
    background: rgba(220,38,38,.07) !important; color: #ef4444 !important;
    border: 1.5px solid rgba(239,68,68,.7) !important;
    cursor: not-allowed !important; pointer-events: none !important; box-shadow: none !important;
}
.eps-cp .eps-cp-card-btn.is-call {
    background: rgba(255,205,10,.05) !important; color: var(--eps-cp-accent) !important;
    border: 1.5px solid rgba(255,205,10,.8) !important; box-shadow: none !important;
}

/* ---- benefits + trust ---- */
.eps-cp .eps-cp-benefits { border-color: rgba(255,205,10,.34) !important; padding: 15px 10px !important; }
.eps-cp .eps-cp-b-ico svg { width: 28px !important; height: 28px !important; }
.eps-cp .eps-cp-b-title { font-size: 12px !important; letter-spacing: .08em !important; }
.eps-cp .eps-cp-b-sub { font-size: 11.5px !important; }
.eps-cp .eps-cp-trust-item { font-size: 13.5px !important; }

/* ==============================================================
 * SHORT VIEWPORTS — the real small-screen fix.
 * Breakpoint is 1000px, not 820: a 900px-tall viewport is still a
 * laptop, and at 900 the generous sizing pushed the cards 111px past
 * the fold. At 1000 the compact rhythm covers every realistic screen
 * and the entire page — cards, benefits, trust — fits in 900px.
 * At 1366x720 the pre-card bands ate 506px of 720, leaving 214px
 * for a 443px card row. This compresses the vertical rhythm so the
 * full row clears the fold; widths and layout are untouched.
 * ============================================================== */
@media (max-height: 1000px) {
    .eps-cp { padding-top: 62px !important; padding-bottom: 18px !important; }
    .eps-cp > .eps-cp-hero { margin-bottom: 16px !important; }
    .eps-cp .eps-cp-hero, .eps-cp .eps-cp-hero-inner { min-height: 218px !important; }
    .eps-cp .eps-cp-hero-content { padding: 14px 26px 14px 28px !important; }
    .eps-cp .eps-cp-step-wrap { margin-bottom: 8px !important; }
    .eps-cp .eps-cp-headline { font-size: clamp(17px, 1.6vw, 22px) !important; margin-bottom: 3px !important; }
    .eps-cp .eps-cp-city-name { font-size: clamp(32px, 3.5vw, 50px) !important; }
    .eps-cp .eps-cp-pin svg { width: 30px !important; height: 30px !important; }
    .eps-cp .eps-cp-city { margin-bottom: 16px !important; }
    .eps-cp .eps-cp-city::after { margin-top: 6px !important; }
    .eps-cp .eps-cp-change { margin-bottom: 12px !important; }
    .eps-cp .eps-cp-venue-addr { margin-bottom: 5px !important; }
    .eps-cp .eps-cp-heading { margin-bottom: 13px !important; }
    .eps-cp .eps-cp-cards { margin-bottom: 16px !important; gap: 16px !important; }
    .eps-cp .eps-cp-card-inner { padding: 18px 16px 15px !important; }
    .eps-cp .eps-cp-card-mon { font-size: 13px !important; }
    .eps-cp .eps-cp-card-days { font-size: clamp(32px, 3.2vw, 44px) !important; }
    .eps-cp .eps-cp-card-year { font-size: 15px !important; }
    .eps-cp .eps-cp-card-rule { margin: 10px 0 !important; }
    .eps-cp .eps-cp-card-meta { margin-bottom: 10px !important; font-size: 11.5px !important; }
    .eps-cp .eps-cp-card-title { font-size: 14px !important; }
    .eps-cp .eps-cp-card-features li { font-size: 8.5px !important; gap: 6px !important; }
    .eps-cp .eps-cp-fico svg { width: 16px !important; height: 16px !important; }
    .eps-cp .eps-cp-card-price { font-size: 21px !important; }
    .eps-cp .eps-cp-card-btn-wrap { margin-top: 11px !important; }
    .eps-cp .eps-cp-card-btn { min-height: 38px !important; padding: 10px 38px !important; font-size: 12px !important; }
    .eps-cp .eps-cp-benefits { padding: 11px 8px !important; margin-bottom: 10px !important; }
    .eps-cp .eps-cp-b-ico svg { width: 24px !important; height: 24px !important; }
    .eps-cp .eps-cp-b-title { font-size: 11px !important; margin-bottom: 2px !important; }
    .eps-cp .eps-cp-b-sub { font-size: 10.5px !important; }
    .eps-cp .eps-cp-trust-item { font-size: 12.5px !important; padding: 4px 20px !important; }
}
@media (max-height: 680px) {
    .eps-cp { padding-top: 52px !important; }
    .eps-cp .eps-cp-hero, .eps-cp .eps-cp-hero-inner { min-height: 190px !important; }
    .eps-cp .eps-cp-city-name { font-size: clamp(28px, 3vw, 42px) !important; }
}
/* ==============================================================
 * MASTER v3.0.1 — reclaim the last 33px on short screens
 * Hero was running 289px against a 218px min-height because its
 * content overflowed. Tightening the hero stack and the card
 * internals puts the whole card row above a 720px fold.
 * ============================================================== */
@media (max-height: 1000px) {
    .eps-cp .eps-cp-hero-content { padding: 10px 26px 10px 28px !important; }
    .eps-cp .eps-cp-headline { font-size: clamp(16px, 1.5vw, 20px) !important; }
    .eps-cp .eps-cp-city-name { font-size: clamp(30px, 3.15vw, 44px) !important; }
    .eps-cp .eps-cp-city { margin-bottom: 10px !important; }
    .eps-cp .eps-cp-city::after { margin-top: 4px !important; height: 2px !important; }
    .eps-cp .eps-cp-change { margin-bottom: 8px !important; }
    .eps-cp .eps-cp-venue-name { margin-bottom: 3px !important; font-size: 13.5px !important; }
    .eps-cp .eps-cp-venue-addr { margin-bottom: 4px !important; font-size: 12.5px !important; }
    .eps-cp .eps-cp-venue-map a { font-size: 11.5px !important; }
    .eps-cp .eps-cp-venue-ico, .eps-cp .eps-cp-venue-ico svg { width: 22px !important; height: 22px !important; }

    .eps-cp .eps-cp-card-inner { padding: 16px 16px 12px !important; }
    .eps-cp .eps-cp-card-rule { margin: 8px 0 !important; }
    .eps-cp .eps-cp-card-meta { margin-bottom: 8px !important; }
    .eps-cp .eps-cp-card-btn-wrap { margin-top: 9px !important; }
}
/* ==============================================================
 * MASTER v3.1 — action rail on the right, breathing room on the left
 * Change Location and View on Map were stacked under the title,
 * crowding STEP / YOU'VE CHOSEN / CITY into one dense column. They
 * now sit as buttons on the right edge of the hero: top-right and
 * bottom-right, where the photo is darkest, so they stay legible.
 * ============================================================== */
.eps-cp .eps-cp-hero-inner { position: relative !important; }
.eps-cp .eps-cp-hero-actions {
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    z-index: 3 !important;
    display: flex !important; flex-direction: column !important;
    justify-content: space-between !important; align-items: flex-end !important;
    padding: 20px 24px !important;
    pointer-events: none !important;
}
.eps-cp .eps-cp-act {
    pointer-events: auto !important;
    display: inline-flex !important; align-items: center !important; gap: 9px !important;
    padding: 9px 16px !important; border-radius: 9px !important;
    border: 1.5px solid rgba(255,205,10,.5) !important;
    background: rgba(8,8,8,.62) !important;
    -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important;
    color: var(--eps-cp-accent) !important;
    font-size: 11.5px !important; font-weight: 800 !important;
    letter-spacing: .12em !important; text-transform: uppercase !important;
    text-decoration: none !important; line-height: 1 !important; white-space: nowrap !important;
    transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
}
.eps-cp .eps-cp-act:hover {
    background: rgba(255,205,10,.14) !important;
    border-color: var(--eps-cp-accent) !important;
    transform: translateY(-1px) !important;
}
.eps-cp .eps-cp-act-ico { font-size: 14px !important; line-height: 1 !important; }

/* Left column: reclaim the space the two links used to occupy */
.eps-cp .eps-cp-hero-content { max-width: 56% !important; }
.eps-cp .eps-cp-step-wrap { margin-bottom: 18px !important; }
.eps-cp .eps-cp-headline { margin-bottom: 8px !important; }
.eps-cp .eps-cp-city { margin-bottom: 26px !important; }
.eps-cp .eps-cp-venue-addr { margin-bottom: 0 !important; }

/* Below the action rail the photo must not creep under the buttons */
.eps-cp .eps-cp-hero-photo { width: 60% !important; }

@media (max-height: 1000px) {
    .eps-cp .eps-cp-hero-actions { padding: 14px 18px !important; }
    .eps-cp .eps-cp-act { padding: 7px 13px !important; font-size: 10.5px !important; gap: 7px !important; }
    .eps-cp .eps-cp-step-wrap { margin-bottom: 12px !important; }
    .eps-cp .eps-cp-headline { margin-bottom: 5px !important; }
    .eps-cp .eps-cp-city { margin-bottom: 16px !important; }
}

/* Stacked layout: the rail becomes a normal row under the venue */
@media (max-width: 900px) {
    .eps-cp .eps-cp-hero-actions {
        position: static !important;
        flex-direction: row !important; flex-wrap: wrap !important;
        justify-content: flex-start !important; align-items: center !important;
        gap: 10px !important; padding: 16px 20px 4px !important;
    }
    .eps-cp .eps-cp-hero-content { max-width: 100% !important; }
}
/* ==============================================================
 * MASTER v3.2 — clear the floating header, reclaim it below
 * The site logo is a 153px circular badge that hangs to 183px into
 * this section, and the header is transparent/floating so it sits
 * OVER the hero. 62px of top padding put STEP and the headline
 * underneath it. Top padding now clears the badge; the space is
 * paid for by tightening the hero -> heading -> cards gaps.
 * ============================================================== */
.eps-cp { padding-top: 200px !important; }

@media (max-height: 1000px) {
    .eps-cp { padding-top: 194px !important; padding-bottom: 16px !important; }
    .eps-cp .eps-cp-hero, .eps-cp .eps-cp-hero-inner { min-height: 198px !important; }
    .eps-cp > .eps-cp-hero { margin-bottom: 11px !important; }
    .eps-cp .eps-cp-heading { margin-bottom: 11px !important; }
    .eps-cp .eps-cp-cards { margin-bottom: 12px !important; }
    .eps-cp .eps-cp-hero-content { padding: 8px 24px 8px 26px !important; }
    .eps-cp .eps-cp-hero-actions { padding: 12px 16px !important; }
    .eps-cp .eps-cp-step-wrap { margin-bottom: 10px !important; }
    .eps-cp .eps-cp-city { margin-bottom: 12px !important; }
}

@media (max-height: 680px) {
    .eps-cp { padding-top: 188px !important; }
    .eps-cp .eps-cp-hero, .eps-cp .eps-cp-hero-inner { min-height: 182px !important; }
}

/* Mobile: the header collapses to a hamburger, so it needs far less */
@media (max-width: 900px) {
    .eps-cp { padding-top: 130px !important; }
}
@media (max-width: 600px) {
    .eps-cp { padding-top: 116px !important; }
}
/* ==============================================================
 * MASTER v3.2.1 — close the remaining 50px to the fold
 * The hero was holding a 198px min-height while its content only
 * needs ~170, so that slack is given back rather than squeezing the
 * type. Remainder comes from the hero->heading->cards gaps and a
 * few px inside the card. Nothing here reduces a font below what
 * was already reviewed.
 * ============================================================== */
@media (max-height: 1000px) {
    .eps-cp .eps-cp-hero, .eps-cp .eps-cp-hero-inner { min-height: 172px !important; }
    .eps-cp > .eps-cp-hero { margin-bottom: 9px !important; }
    .eps-cp .eps-cp-heading { margin-bottom: 9px !important; }
    .eps-cp .eps-cp-card-inner { padding: 14px 15px 11px !important; }
    .eps-cp .eps-cp-card-rule { margin: 7px 0 !important; }
    .eps-cp .eps-cp-card-days { font-size: clamp(30px, 3vw, 42px) !important; }
    .eps-cp .eps-cp-card-btn { min-height: 36px !important; padding: 9px 36px !important; }
    .eps-cp .eps-cp-card-btn-wrap { margin-top: 8px !important; }
    .eps-cp .eps-cp-hero-actions { padding: 11px 15px !important; }
}
@media (max-height: 680px) {
    .eps-cp .eps-cp-hero, .eps-cp .eps-cp-hero-inner { min-height: 164px !important; }
}
/* ==============================================================
 * MASTER v3.2.2 — last 26px, taken from slack not from type
 * Measured the hero and card stacks line by line. The remaining
 * space was in inline-block baseline gap under the city name and
 * loose line-heights/margins, so those are tightened. Only the date
 * numerals change size (42 -> 38) and they stay the largest thing
 * on the card.
 * ============================================================== */
@media (max-height: 1000px) {
    .eps-cp { padding-top: 191px !important; }
    /* kill the baseline gap under the inline-block city name */
    .eps-cp .eps-cp-city { line-height: 1 !important; font-size: 0 !important; margin-bottom: 10px !important; }
    .eps-cp .eps-cp-city-name { line-height: .95 !important; vertical-align: middle !important; }
    .eps-cp .eps-cp-pin { vertical-align: middle !important; }
    .eps-cp .eps-cp-venue-addr { line-height: 1.32 !important; }
    .eps-cp .eps-cp-card-days { font-size: clamp(28px, 2.8vw, 38px) !important; }
    .eps-cp .eps-cp-card-meta { margin-bottom: 6px !important; }
    .eps-cp .eps-cp-card-title { margin-bottom: 4px !important; }
    .eps-cp .eps-cp-card-rule { margin: 6px 0 !important; }
    .eps-cp .eps-cp-card-inner { padding: 14px 15px 10px !important; }
}
/* ==============================================================
 * MASTER v3.2.3 — top padding must track the logo, not be fixed
 * The circular logo scales with viewport WIDTH, so a fixed px pad
 * that cleared it at 1366 collided at 1440 (-2px). Measured need:
 * ~189px at 1366 and ~199px at 1440 — both ~13.9vw — so the pad is
 * now proportional and clears the badge at every width. The upper
 * bound is 230px because the logo stops scaling around 1600px wide —
 * without it, 1920 got 65px of dead space and pushed cards off-fold.
 * ============================================================== */
.eps-cp { padding-top: clamp(196px, 14.6vw, 236px) !important; }
@media (max-height: 1000px) {
    .eps-cp { padding-top: clamp(188px, 14vw, 230px) !important; }
}
@media (max-height: 680px) {
    .eps-cp { padding-top: clamp(184px, 13.7vw, 224px) !important; }
}
@media (max-width: 900px) {
    .eps-cp { padding-top: 130px !important; }
}
@media (max-width: 600px) {
    .eps-cp { padding-top: 116px !important; }
}
/* ==============================================================
 * MASTER v3.3 — top padding keyed to the theme header, measured
 *
 * The header is transparent and floats OVER this section, and its
 * height is driven by a circular logo that scales with viewport
 * width. Measured the header bottom (relative to this section) at
 * 18 widths. There is a hard breakpoint at 1024/1025 where the logo
 * and menu stop stacking:
 *
 *   <=1024  stacked      needs ~30.7-33.9vw   (311px @1000)
 *   >=1025  single row   needs ~14.4-14.5vw   (149px @1025)
 *
 * Hence two regimes, not one. The old rules used 900px as the
 * boundary, so 900-1024 fell into the desktop value and the header
 * buried the hero by up to 119px. The desktop side is capped at
 * 230px because the logo stops growing around 1600px wide.
 * These rules are last in the file so they beat the max-height
 * blocks above, which tune everything except this padding.
 * ============================================================== */
.eps-cp { padding-top: clamp(149px, 14.6vw, 230px) !important; }

@media (max-width: 1024px) {
    .eps-cp { padding-top: 34vw !important; }
}
/* ==============================================================
 * MASTER v3.4 — header clearance, measured against the REAL header
 *
 * Earlier passes were measuring the wrong element. This theme ships
 * TWO menus: the visible desktop pill, and nav.right_menu_togle, a
 * hidden off-canvas slide-out that is still laid out (400x900, dark
 * background) and reports a bottom of ~445px. Every automatic
 * "header bottom" probe latched onto that phantom instead of the
 * pill, so the padding was tuned against a number that had nothing
 * to do with what people see.
 *
 * Excluding the off-canvas panel, the true painted header bottom
 * (relative to this section) measures:
 *   1100 -> 148    1280 -> 172    1366 -> 183
 *   1440 -> 207    1536 -> 220    1600 -> 229    1920 -> 231
 *
 * It jumps at ~1400 because the Buy Ticket button drops onto a
 * second row inside the pill, so one ratio cannot cover the range.
 * Hence two desktop bands plus the <=1024 stacked-header band.
 * ============================================================== */

/* Stacked header (logo above menu) */
@media (max-width: 1024px) {
    .eps-cp { padding-top: 34vw !important; }
}

/* Single-row pill */
@media (min-width: 1025px) {
    .eps-cp { padding-top: clamp(162px, 14.9vw, 206px) !important; }
}

/* Buy Ticket wraps to a second row from ~1380 up, taller header */
@media (min-width: 1380px) {
    .eps-cp { padding-top: clamp(212px, 15.6vw, 252px) !important; }
}
/* ==============================================================
 * MASTER v3.5 — final header clearance, four measured bands
 *
 * Measured the true painted header bottom at 24 widths, excluding
 * nav.right_menu_togle (a hidden off-canvas panel that is still
 * laid out and poisoned every earlier probe). Two hard breakpoints
 * exist, both in the theme, not in this stylesheet:
 *
 *   768  — theme swaps to a much larger stacked logo
 *          (need jumps 222px -> 334px)
 *   1025 — logo and menu stop stacking, header collapses to one row
 *          (need drops 379px -> 162px)
 *   1380 — Buy Ticket wraps to a second row inside the pill
 *          (need rises 197px -> 221px)
 *
 * Requirement plateaus at 379px across 860-1024, so the tablet band
 * is capped rather than left proportional.
 *
 * Boundaries use .98 rather than whole pixels. Measured at a 767px
 * viewport, BOTH (max-width:767px) and (min-width:768px) evaluated
 * false — the CSS viewport width is fractional once a scrollbar is
 * involved, so integer breakpoints leave dead zones with no rule
 * applied at all. That is what buried the hero at 767.
 * ============================================================== */

/* Phone — compact logo */
@media (max-width: 745.98px) {
    .eps-cp { padding-top: clamp(118px, 33.5vw, 248px) !important; }
}

/* Tablet — large stacked logo; need plateaus at ~379px */
@media (min-width: 768px) and (max-width: 1024.98px) {
    .eps-cp { padding-top: clamp(336px, 44vw, 382px) !important; }
}

/* 746-767 only: the XPS shield becomes visible here but WRAPS below
 * the menu, so the header balloons to 584px tall. At 768 it sits
 * beside the logo again (320px). Narrow band, but content would be
 * completely buried without this. */
@media (min-width: 746px) and (max-width: 767.98px) {
    .eps-cp { padding-top: 600px !important; }
}

/* Desktop — single-row pill */
@media (min-width: 1025px) {
    .eps-cp { padding-top: clamp(162px, 14.9vw, 206px) !important; }
}

/* Desktop wide — Buy Ticket on a second row */
@media (min-width: 1380px) {
    .eps-cp { padding-top: clamp(212px, 15.6vw, 252px) !important; }
}

/* ==============================================================
 * MASTER v4.0 — ELEMENTOR CANVAS PAGES
 *
 * The buy-ticket pages now use the Elementor Canvas template,
 * which drops the theme header and logo entirely. Every
 * padding-top band above this point exists only to clear that
 * header, so on Canvas they reserved ~190px of empty black at
 * the top and pushed the trust row past the fold.
 *
 * Scoped to body.elementor-template-canvas, so any page that
 * still renders the header keeps the measured clearance bands
 * above untouched. Three jobs:
 *   1. drop the header clearance to a small breathing gap
 *   2. spend the reclaimed space on larger type and controls
 *   3. drive every vertical dimension off vh, so the section
 *      scales with the window instead of falling off a fixed
 *      breakpoint. Verified with no scrollbar at viewport
 *      heights of 680 / 720 / 780 / 900 / 1000.
 * ============================================================== */

body.elementor-template-canvas .eps-cp{
  padding-top: clamp(14px, 2.1vh, 34px) !important;
  padding-bottom: clamp(12px, 1.7vh, 22px) !important;
}

/* ---------- Hero ---------- */
body.elementor-template-canvas .eps-cp .eps-cp-hero,
body.elementor-template-canvas .eps-cp .eps-cp-hero-inner{ min-height: clamp(182px, 25vh, 340px) !important; }
body.elementor-template-canvas .eps-cp > .eps-cp-hero{ margin-bottom: clamp(9px, 1.2vh, 26px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-hero-content{ padding: clamp(11px,1.6vh,28px) clamp(20px,2.4vw,36px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-headline{ font-size: clamp(18px, 2.75vh, 28px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-city-name{ font-size: clamp(36px, 6.5vh, 68px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-venue-name{ font-size: clamp(13px, 1.95vh, 16.5px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-venue-addr{ font-size: clamp(12.5px, 1.85vh, 15.5px) !important; }

/* ---------- Change Location / View on Map ---------- */
body.elementor-template-canvas .eps-cp .eps-cp-act{
  font-size: clamp(12.5px, 1.9vh, 16px) !important;
  padding: clamp(11px,1.7vh,17px) clamp(18px,2vw,30px) !important;
  border-radius: 11px !important;
  letter-spacing: .14em !important;
}

/* ---------- Section heading ---------- */
body.elementor-template-canvas .eps-cp .eps-cp-heading{ font-size: clamp(15px, 2.25vh, 20px) !important; margin-bottom: clamp(9px,1.4vh,24px) !important; }

/* ---------- Date cards ---------- */
body.elementor-template-canvas .eps-cp .eps-cp-cards{ gap: clamp(14px,1.7vw,26px) !important; margin-bottom: clamp(9px,1.4vh,26px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-card-inner{ padding: clamp(14px,2vh,30px) clamp(14px,1.6vw,26px) clamp(12px,1.7vh,26px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-card-mon{ font-size: clamp(12.5px,1.9vh,16.5px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-card-days{ font-size: clamp(35px,5.4vh,56px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-card-year{ font-size: clamp(13.5px,2.05vh,18px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-card-title{ font-size: clamp(13.5px,2.05vh,17.5px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-card-meta{ font-size: clamp(11.5px,1.7vh,13.8px) !important; margin-bottom: clamp(7px,1.2vh,16px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-card-features li{ font-size: clamp(8.8px,1.3vh,10.6px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-card-price{ font-size: clamp(20px,3.1vh,28px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-card-btn{ min-height: clamp(38px,5vh,50px) !important; font-size: clamp(11.5px,1.75vh,15px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-card-btn-wrap{ margin-top: clamp(8px,1.3vh,18px) !important; }

/* ---------- Benefits + trust ---------- */
body.elementor-template-canvas .eps-cp .eps-cp-benefits{ padding: clamp(9px,1.45vh,17px) 10px !important; margin-bottom: clamp(7px,1.15vh,22px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-b-title{ font-size: clamp(10.5px,1.55vh,13.2px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-b-sub{ font-size: clamp(10px,1.5vh,12.6px) !important; }
body.elementor-template-canvas .eps-cp .eps-cp-trust-item{ font-size: clamp(12px,1.8vh,15px) !important; padding: clamp(4px,0.75vh,7px) clamp(16px,2vw,28px) !important; }

/* ---------- Short screens: pull the gaps in so the row still clears the fold ---------- */
@media (max-height: 780px){
  body.elementor-template-canvas .eps-cp .eps-cp-card-inner{ padding: 12px 14px 10px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-card-btn-wrap{ margin-top: 7px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-card-meta{ margin-bottom: 6px !important; }
  body.elementor-template-canvas .eps-cp > .eps-cp-hero{ margin-bottom: 7px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-heading{ margin-bottom: 7px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-cards{ margin-bottom: 7px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-benefits{ margin-bottom: 6px !important; }
}

/* ==============================================================
 * MASTER v4.1 — View on Map moved under the venue address
 *
 * It used to sit bottom-right on the hero photo, in the same rail
 * as the back button. It now sits in the left column directly
 * below the address it refers to, so the venue reads as one block:
 * name, address, map link. The right rail keeps only the back
 * button, which is now labelled "Go Back".
 * ============================================================== */
.eps-cp .eps-cp-venue-actions{ margin-top: 10px !important; display: block !important; line-height: 0 !important; }
.eps-cp .eps-cp-venue-actions .eps-cp-act{ display: inline-flex !important; line-height: 1 !important; }
body.elementor-template-canvas .eps-cp .eps-cp-venue-actions{ margin-top: clamp(7px, 1.1vh, 14px) !important; }
@media (max-height: 780px){
  body.elementor-template-canvas .eps-cp .eps-cp-venue-actions{ margin-top: 6px !important; }
}

/* ==============================================================
 * MASTER v4.2 — pay for the relocated map button
 *
 * Moving View on Map under the address added ~49px to the hero,
 * which pushed the trust row back past the fold. Reclaimed here:
 * the map pill is sized as the secondary control it now is, and
 * the vertical rhythm gives up a few px in each block rather
 * than taking it all out of one.
 * ============================================================== */
body.elementor-template-canvas .eps-cp .eps-cp-venue-actions .eps-cp-act{
  font-size: clamp(11px, 1.65vh, 13.5px) !important;
  padding: clamp(8px,1.15vh,12px) clamp(14px,1.6vw,22px) !important;
}
@media (max-height: 820px){
  body.elementor-template-canvas .eps-cp .eps-cp-venue-actions{ margin-top: 5px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-venue-actions .eps-cp-act{ padding: 7px 14px !important; font-size: 11.5px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-step-wrap{ margin-bottom: 6px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-city{ margin-bottom: 6px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-hero-content{ padding-top: 10px !important; padding-bottom: 10px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-card-inner{ padding: 10px 14px 8px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-card-features li{ gap: 5px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-benefits{ padding: 9px 10px !important; }
  body.elementor-template-canvas .eps-cp .eps-cp-trust-item{ padding: 4px 22px !important; }
}

/* ==============================================================
 * MASTER v4.3 — first page aligned to the two approved finals
 *
 * Reference 1: the CALGARY title (.eps-cp-city-name) — brushed
 *   silver, gradient copied verbatim below, not re-derived.
 * Reference 2: the header Buy Ticket pill
 *   (a.hfe-menu-item.elementor-button) — background #ffd200.
 *
 * The first page was running three different yellows: #fbbf24 via
 * --eps-accent, #f59e0b via --eps-accent2, and hard-coded
 * rgba(255,205,10,...) on the step pill and active tile. All three
 * now resolve to the one pill yellow. Nothing in .eps-cp is touched,
 * so the Calgary and Vancouver pages stay exactly as approved.
 * ============================================================== */

/* ---------- 1. One accent for the whole first-page component ---------- */
.eps-schedule{
  /* Bound to the same Elementor global the Buy Ticket pill uses
     (--e-global-color-f9a746f, defined #FFD200 on .elementor-kit-21030),
     so if that global is ever re-picked the first page follows it
     instead of drifting. Literal #ffd200 is the fallback. */
  --eps-accent:  var(--e-global-color-f9a746f, #ffd200) !important;
  --eps-accent2: var(--e-global-color-f9a746f, #ffd200) !important;
}

/* ---------- 2. The yellows that were hard-coded, not variable ---------- */
.eps-schedule .eps-step{
  background: rgba(255,210,0,.10) !important;
  border-color: rgba(255,210,0,.40) !important;
}
.eps-schedule .eps-tile.is-active::before{
  background: linear-gradient(rgba(255,210,0,.28), rgba(255,210,0,.40)) !important;
}
.eps-schedule .eps-tile.is-active{
  box-shadow: 0 16px 32px -18px rgba(255,210,0,.5) !important;
}
.eps-schedule .eps-tiles.eps-none-active .eps-tile{
  border-color: rgba(255,210,0,.5) !important;
}
.eps-schedule .eps-big-btn.is-open{ background: #ffd200 !important; }
.eps-schedule .eps-big-btn.is-open:hover{ box-shadow: 0 8px 20px rgba(255,210,0,.35) !important; }

/* Redefined (same name wins, being later) so the attract-pulse
   glows in the pill yellow instead of amber. */
@keyframes eps-tile-pulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 8px 24px -14px rgba(0,0,0,.6), 0 0 0 0 rgba(255,210,0,0), 0 0 0 rgba(255,210,0,0);
        border-color: rgba(255,210,0,.4);
    }
    50% {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 20px 40px -12px rgba(0,0,0,.6), 0 0 0 8px rgba(255,210,0,.14), 0 0 36px 4px rgba(255,210,0,.35);
        border-color: rgba(255,210,0,.9);
    }
}

/* ---------- 3. Headline in the CALGARY silver ----------
   Applied per line, so each line gets the full gradient sweep the
   way the single line of CALGARY does. "Build" opts back out to the
   accent by setting its own text-fill-color. The plain white
   .eps-hero colour above stays as the fallback for engines without
   background-clip:text, so the headline can never render invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .eps-schedule .eps-hero-line{
    background: linear-gradient(178deg, #ffffff 0%, #f4f4f4 26%, #b9b9b9 46%, #8f8f8f 54%, #f0f0f0 70%, #ffffff 84%, #cfcfcf 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }
  .eps-schedule .eps-hero-line .eps-hero-accent{
    background: none !important;
    -webkit-background-clip: border-box !important;
            background-clip: border-box !important;
    -webkit-text-fill-color: var(--eps-accent) !important;
    color: var(--eps-accent) !important;
  }
}

/* ==============================================================
 * MASTER v4.4 — the shared step header  [eps_step_header]
 *
 * One component for all four funnel steps, styled from the owner-
 * approved checkout mockup: yellow numbered disc, uppercase title,
 * muted one-line description.
 *
 * Colours bind to the same Elementor global as the Buy Ticket pill,
 * and are declared on .eps-steph itself rather than inherited from
 * .eps-schedule, because the cart and checkout pages render this
 * outside that wrapper.
 * ============================================================== */
.eps-steph{
  --steph-accent: var(--e-global-color-f9a746f, #ffd200);
  box-sizing: border-box;
  display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px);
  width: 100%; max-width: 1200px;
  margin: 0 auto clamp(16px, 2vw, 26px);
  padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.6vw, 20px);
  background: linear-gradient(90deg, #141414 0%, #0e0e0e 100%);
  border: 1px solid rgba(255,210,0,.20);
  border-radius: 14px;
  font-family: 'Kanit', system-ui, -apple-system, sans-serif;
}
.eps-steph *{ box-sizing: border-box; }
.eps-steph-num{
  flex: 0 0 auto;
  width: clamp(36px, 3.4vw, 46px); height: clamp(36px, 3.4vw, 46px);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--steph-accent); color: #0a0a0a;
  font-size: clamp(17px, 1.7vw, 21px); font-weight: 900; line-height: 1;
  box-shadow: 0 0 0 4px rgba(255,210,0,.12);
}
.eps-steph-text{ min-width: 0; }
.eps-steph-title{
  margin: 0 0 2px !important;
  color: #ffffff;
  font-size: clamp(15px, 1.6vw, 20px); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.15;
}
.eps-steph-sub{
  margin: 0 !important;
  color: #a3a3a3;
  font-size: clamp(12px, 1.1vw, 14px); font-weight: 400; line-height: 1.35;
  letter-spacing: .01em; text-transform: none;
}
/* the cart and checkout pages sit inside the theme's content column,
   so give the header the same breathing room the blocks below it get */
.woocommerce-cart .eps-steph,
.woocommerce-checkout .eps-steph{ margin-top: clamp(14px, 2vw, 26px); }

/* The only rule defining .screen-reader-text on this site ships with
   admin-bar.min.css, which is enqueued for logged-in users only. Relying
   on it would have printed "Step 3 of 4:" visibly to real customers.
   Hide it here so the component carries its own guarantee. */
.eps-steph .screen-reader-text,
.eps-steph .eps-steph-sr{
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ==============================================================
 * MASTER v4.5 — cart + checkout dressed to the approved mockup
 *
 * These are the stock WooCommerce Cart and Checkout blocks; only
 * their appearance is changed here. No markup, no payment flow and
 * no field logic is touched, so Square, tax, stock and order emails
 * keep behaving exactly as they do now.
 *
 * Selectors are the real wc-block-* class names read off the live
 * page, not guesses — the older rules in Additional CSS were aimed
 * at class names WooCommerce has since renamed, which is why the
 * inputs were still rendering white on a black page.
 * ============================================================== */
body.woocommerce-cart, body.woocommerce-checkout{
  --eps-y: var(--e-global-color-f9a746f, #ffd200);
  --eps-panel: linear-gradient(180deg,#151515 0%,#0e0e0e 100%);
  --eps-edge: rgba(255,210,0,.18);
}

/* ---------- step number reads 3/4 and 4/4 ---------- */
.eps-steph-num{ width:auto !important; min-width:clamp(48px,4.6vw,60px); border-radius:999px !important; padding:0 clamp(9px,1vw,12px); gap:1px; }
.eps-steph-of{ font-size:.62em; font-weight:800; opacity:.72; letter-spacing:-.02em; }

/* ---------- the two panels ---------- */
.wc-block-checkout__form,
.wc-block-checkout__sidebar,
.wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart-totals-block{
  background: var(--eps-panel) !important;
  border: 1px solid var(--eps-edge) !important;
  border-radius: 14px !important;
  padding: clamp(16px,2vw,26px) !important;
}
.wc-block-checkout__sidebar{ padding-left: clamp(16px,2vw,26px) !important; }

/* ---------- section headings ---------- */
.wc-block-components-checkout-step__title,
.wc-block-components-title{
  color: var(--eps-y) !important;
  font-size: clamp(14px,1.5vw,17px) !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
}
.wc-block-components-checkout-order-summary__title-text,
.wc-block-cart__totals-title{
  color:#fff !important; font-size:clamp(14px,1.5vw,17px) !important;
  font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.08em !important;
}
.wc-block-components-checkout-step__description{ color:#a3a3a3 !important; }

/* ---------- form fields: dark, not the stock white ---------- */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-text-input textarea,
body.woocommerce-checkout .wc-block-components-textarea,
body.woocommerce-checkout .wc-block-components-combobox input,
body.woocommerce-checkout .wc-blocks-components-select__select,
body.woocommerce-checkout .components-input-control__input,
body.woocommerce-cart .wc-block-components-text-input input{
  background: #0d0d0d !important;
  color: #ffffff !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 10px !important;
  min-height: 50px !important;
  padding: 14px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-combobox input:focus,
body.woocommerce-checkout .wc-blocks-components-select__select:focus{
  border-color: var(--eps-y) !important;
  box-shadow: 0 0 0 3px rgba(255,210,0,.16) !important;
  outline: none !important;
}
body.woocommerce-checkout .wc-block-components-text-input input::placeholder{ color:#6b6b6b !important; opacity:1 !important; }
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-blocks-components-select label,
body.woocommerce-checkout .wc-block-components-checkbox__label{
  color:#cfcfcf !important; font-size:13px !important; font-weight:500 !important; letter-spacing:.01em !important;
}

/* saved-address card + panels */
.wc-block-components-address-card,
.wc-block-components-panel{
  background:#0d0d0d !important; border:1px solid #2b2b2b !important;
  border-radius:10px !important; color:#e8e8e8 !important;
}
.wc-block-components-address-card__edit{ color: var(--eps-y) !important; }

/* ---------- totals ---------- */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value{ color:#e5e5e5 !important; }
.wc-block-components-totals-footer-item{ border-top:1px solid rgba(255,210,0,.22) !important; padding-top:14px !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  color:var(--eps-y) !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.08em !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  color:var(--eps-y) !important; font-size:clamp(20px,2.2vw,26px) !important; font-weight:800 !important;
}
.wc-block-components-order-summary-item__description a,
.wc-block-components-product-name{ color:#fff !important; }
.wc-block-components-order-summary-item__total-price{ color:var(--eps-y) !important; font-weight:700 !important; }

/* The mockup shows a clean $1,495 CAD, so the sale strikethrough and
   the Save badge are hidden. One block to delete to bring them back. */
.wc-block-components-order-summary-item__regular-individual-price,
.wc-block-components-sale-badge{ display:none !important; }

/* ---------- primary actions ---------- */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-button.contained{
  background: var(--eps-y) !important;
  color:#0a0a0a !important;
  border:0 !important; border-radius:12px !important;
  min-height:58px !important;
  font-size:clamp(13px,1.3vw,15px) !important; font-weight:800 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.wc-block-components-checkout-place-order-button__text{ color:#0a0a0a !important; }

/* ==============================================================
 * MASTER v4.6 — beat the older cart rules in Additional CSS
 *
 * Additional CSS carries .wc-block-cart .wc-block-components-totals-item__value
 * { color:#fff !important }, which is the same specificity as the v4.5
 * footer rule but is printed later in the head, so it was winning and
 * the cart TOTAL stayed white instead of the mockup's yellow.
 * Qualifying with the body class settles it without touching that file.
 * ============================================================== */
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  color: var(--eps-y, #ffd200) !important;
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size: clamp(20px, 2.2vw, 26px) !important; font-weight: 800 !important;
}

/* ==============================================================
 * MASTER v4.7 — the Country and Province dropdowns
 *
 * Purely cosmetic. These are native <select> elements rendered by
 * WooCommerce; nothing here touches their name, value, options or
 * change handlers, so address validation and payment are unaffected.
 *
 * Two real defects, both introduced by dark-theming a control Woo
 * styles for a white field:
 *   1. Woo's chevron is filled rgb(43,45,47) — near-invisible on the
 *      #0d0d0d field, so the selects read as dead text boxes.
 *   2. v4.5 set padding:14px on all four sides, which replaced the
 *      right padding Woo reserves for that chevron. The chevron sits
 *      at x 652-676 inside a select ending at 688, so a long option
 *      ("United States (US)") ran underneath the arrow.
 * ============================================================== */
body.woocommerce-checkout .wc-blocks-components-select__select,
body.woocommerce-cart .wc-blocks-components-select__select{
  padding: 14px 44px 14px 14px !important;   /* room for the chevron */
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  color-scheme: dark;                        /* native option list renders dark */
}
/* the chevron itself */
body.woocommerce-checkout .wc-blocks-components-select svg,
body.woocommerce-cart .wc-blocks-components-select svg{
  fill: rgba(255,255,255,.72) !important;
  right: 14px !important;
  pointer-events: none !important;
  transition: fill .15s ease;
}
body.woocommerce-checkout .wc-blocks-components-select:hover svg{ fill: var(--eps-y, #ffd200) !important; }

/* focus ring to match the text inputs */
body.woocommerce-checkout .wc-blocks-components-select__select:focus,
body.woocommerce-checkout .wc-blocks-components-select__select:focus-visible{
  border-color: var(--eps-y, #ffd200) !important;
  box-shadow: 0 0 0 3px rgba(255,210,0,.16) !important;
  outline: none !important;
}
/* fallback for platforms that let the popup list be styled */
body.woocommerce-checkout .wc-blocks-components-select__select option,
body.woocommerce-cart .wc-blocks-components-select__select option{
  background-color: #101010; color: #ffffff;
}

/* ==============================================================
 * MASTER v4.8 — the white slab under Country and Province
 *
 * .wc-blocks-components-select__container carries WooCommerce's own
 * background:#fff for a light theme. It is 80px tall (label + field)
 * while the <select> inside it is 50px, so 30px of white container
 * was showing as a slab under each dropdown. v4.5/v4.7 styled the
 * <select> but never its wrapper.
 *
 * Cosmetic only — the wrapper holds no value and no handler.
 * ============================================================== */
body.woocommerce-checkout .wc-blocks-components-select__container,
body.woocommerce-cart .wc-blocks-components-select__container,
body.woocommerce-checkout .wc-blocks-components-select,
body.woocommerce-cart .wc-blocks-components-select{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* the same wrapper on the text inputs, in case it is ever reused there */
body.woocommerce-checkout .wc-block-components-text-input,
body.woocommerce-cart .wc-block-components-text-input{
  background: transparent !important;
}

/* ==============================================================
 * MASTER v4.9 — the remaining white patches on checkout
 *
 * Found by scanning every element in the checkout block for an
 * opaque near-white background. All cosmetic; none of these carry
 * a value or a handler.
 * ============================================================== */

/* the discounted price rendered as a white highlight pill */
body.woocommerce-checkout .wc-block-components-product-price__value.is-discounted,
body.woocommerce-cart .wc-block-components-product-price__value.is-discounted{
  background: transparent !important;
  color: var(--eps-y, #ffd200) !important;
  font-weight: 700 !important;
  padding: 0 !important;
}

/* quantity bubble on the order-summary thumbnail */
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity,
body.woocommerce-cart .wc-block-components-order-summary-item__quantity{
  background: var(--eps-y, #ffd200) !important;
  color: #0a0a0a !important;
  border: 1px solid rgba(0,0,0,.25) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* checkboxes */
body.woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"]{
  background: #0d0d0d !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 5px !important;
  appearance: none !important; -webkit-appearance: none !important;
  width: 20px !important; height: 20px !important;
  cursor: pointer !important;
}
body.woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"]:checked{
  background: var(--eps-y, #ffd200) !important;
  border-color: var(--eps-y, #ffd200) !important;
}
body.woocommerce-checkout .wc-block-components-checkbox__input[type="checkbox"]:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,210,0,.18) !important; outline: none !important;
}
/* Woo paints its own tick as an SVG sibling — keep it dark on the yellow box */
body.woocommerce-checkout .wc-block-components-checkbox__mark{ fill: #0a0a0a !important; }

/* Square's card field sits in an iframe we cannot style, but the
   container behind it is ours. If Square renders transparently this
   darkens the strip; if it paints its own white, this changes nothing
   and costs nothing. */
body.woocommerce-checkout .sq-card-iframe-container{
  background: #0d0d0d !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* ==============================================================
 * MASTER v5.0 — order confirmation panel (thank-you page)
 *
 * Renders via woocommerce_thankyou on the order-received view of
 * the checkout page. Styled from the owner-approved mockup: green
 * hex check, details panel, "What's next" strip, calendar + home
 * buttons. Yellow binds to the Buy Ticket pill's Elementor global;
 * green is the same --eps-cp-ok #22c55e the seat badges use.
 * ============================================================== */
.eps-confirm{
  --cf-y: var(--e-global-color-f9a746f, #ffd200);
  --cf-ok: #22c55e;
  box-sizing: border-box;
  max-width: 860px; margin: 0 auto clamp(24px,3vw,40px);
  font-family: 'Kanit', system-ui, -apple-system, sans-serif;
  color: #fff;
}
.eps-confirm *{ box-sizing: border-box; }

/* chip: green check variant of the shared step header */
.eps-confirm .eps-steph--ok .eps-steph-num{
  background: var(--cf-ok) !important; color: #04140a !important;
  min-width: 44px !important; box-shadow: 0 0 0 4px rgba(34,197,94,.14) !important;
}
.eps-confirm .eps-steph{ margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }

/* hero: hex check + headline */
.eps-confirm-hero{
  display: flex; align-items: center; gap: clamp(18px,3vw,34px);
  background: linear-gradient(180deg,#101510 0%,#0b0d0b 100%);
  border: 1px solid rgba(34,197,94,.22); border-radius: 14px;
  padding: clamp(20px,3vw,34px);
  margin-bottom: 14px;
}
.eps-confirm-hex{ color: var(--cf-ok); flex: 0 0 auto; filter: drop-shadow(0 0 14px rgba(34,197,94,.45)); }
.eps-confirm-title{
  margin: 0 0 2px !important; color: #fff !important;
  font-size: clamp(24px,3.2vw,34px) !important; font-weight: 900 !important;
  font-style: italic; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05 !important;
}
.eps-confirm-seat{
  margin: 0 0 10px !important; color: var(--cf-ok) !important;
  font-size: clamp(16px,2vw,21px) !important; font-weight: 800 !important;
  font-style: italic; text-transform: uppercase; letter-spacing: .02em;
}
.eps-confirm-mailline{ margin: 0 !important; color: #a3a3a3; font-size: 14px; line-height: 1.5; }
.eps-confirm-mailline strong{ color: #e5e5e5; font-weight: 600; }

/* details panel */
.eps-confirm-details{
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,22px) clamp(18px,3vw,40px);
  background: #0d0d0d; border: 1px solid #242424; border-radius: 12px;
  padding: clamp(16px,2.4vw,26px);
  margin-bottom: 16px;
}
.eps-confirm-row{ display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.eps-confirm-ico{ color: var(--cf-y); flex: 0 0 auto; display: inline-flex; margin-top: 2px; }
.eps-confirm-ico svg{ stroke: currentColor; }
.eps-confirm-k{ margin: 0 0 2px !important; color: #8a8a8a; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.eps-confirm-v{ margin: 0 !important; color: #fff; font-size: 14.5px; font-weight: 500; line-height: 1.45; }

/* what's next */
.eps-confirm-next{
  border: 1.5px solid rgba(255,210,0,.30); border-radius: 14px;
  padding: clamp(16px,2.4vw,26px);
  margin-bottom: 18px;
  background: linear-gradient(180deg,#121110 0%,#0c0b0a 100%);
}
.eps-confirm-next-title{
  margin: 0 0 clamp(12px,1.8vw,20px) !important; text-align: center;
  color: var(--cf-y) !important; font-size: 15px !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: .14em;
}
.eps-confirm-next-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,26px); }
.eps-confirm-nx{ text-align: center; }
.eps-confirm-nx-ico{
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(255,210,0,.5); color: var(--cf-y);
  margin-bottom: 10px;
}
.eps-confirm-nx-k{ margin: 0 0 4px !important; color: var(--cf-y); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.eps-confirm-nx-v{ margin: 0 !important; color: #b5b5b5; font-size: 13px; line-height: 1.5; }

/* actions */
.eps-confirm-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.eps-confirm-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 14px 26px; border-radius: 12px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none !important; transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.eps-confirm-btn.is-ghost{
  flex: 0 1 auto; background: #101010; color: #fff !important; border: 1px solid #2e2e2e;
}
.eps-confirm-btn.is-ghost:hover{ border-color: var(--cf-y); color: var(--cf-y) !important; }
.eps-confirm-btn.is-primary{
  flex: 1 1 auto; background: var(--cf-y); color: #0a0a0a !important; border: 0;
}
.eps-confirm-btn.is-primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.eps-confirm-btn svg{ stroke: currentColor; }

/* the order-received view is the same checkout page, so hide the
   step 4/4 chip from the page content and Woo's duplicate blurb;
   the itemised order table below stays as the on-page receipt */
body.woocommerce-order-received .eps-steph:not(.eps-steph--ok){ display: none !important; }
body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-order-overview{ display: none !important; }

@media (max-width: 700px){
  .eps-confirm-hero{ flex-direction: column; text-align: center; }
  .eps-confirm-details{ grid-template-columns: 1fr; }
  .eps-confirm-next-grid{ grid-template-columns: 1fr; }
  .eps-confirm-actions{ flex-direction: column; }
  .eps-confirm-btn{ width: 100%; }
}

/* ==============================================================
 * MASTER v5.1 — confirmation view starts at the top of the page
 *
 * Above the confirmation panel sat .header-breadcamb-fixer (319px:
 * the theme's "CHECKOUT" hero title + breadcrumb) plus 120px of
 * .site-content top padding — ~440px of dead space before the
 * customer saw their booking. The banner goes; but the theme header
 * is absolutely positioned and paints over whatever replaces it, so
 * the content keeps the same measured clearance bands proven on the
 * buy-ticket pages (MASTER v3.5): the header's height is driven by
 * its width-scaling logo, with theme breakpoints at 768/1025/1380.
 * ============================================================== */
body.woocommerce-order-received .header-breadcamb-fixer{ display: none !important; }

/* Phone — compact logo */
@media (max-width: 745.98px){
  body.woocommerce-order-received .site-content{ padding-top: clamp(118px, 33.5vw, 248px) !important; }
}
/* 746-767 — shield wraps below the logo */
@media (min-width: 746px) and (max-width: 767.98px){
  body.woocommerce-order-received .site-content{ padding-top: 600px !important; }
}
/* Tablet — large stacked logo */
@media (min-width: 768px) and (max-width: 1024.98px){
  body.woocommerce-order-received .site-content{ padding-top: clamp(336px, 44vw, 382px) !important; }
}
/* Desktop — single-row pill */
@media (min-width: 1025px){
  body.woocommerce-order-received .site-content{ padding-top: clamp(162px, 14.9vw, 206px) !important; }
}
/* Wide — Buy Ticket wraps to a second row inside the pill */
@media (min-width: 1380px){
  body.woocommerce-order-received .site-content{ padding-top: clamp(212px, 15.6vw, 252px) !important; }
}

/* ==============================================================
 * MASTER v5.2 — cart typography up a notch
 *
 * Measured before the change: everything in the cart block sat at
 * 13px (product name, prices, meta, GST, coupon, quantity). Sizes
 * below lift the reading hierarchy without touching layout, and are
 * scoped to the cart page only — checkout keeps its own scale.
 * ============================================================== */
body.woocommerce-cart .wc-block-components-product-name{
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important;
}
body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price,
body.woocommerce-cart .wc-block-components-product-price__value{
  font-size: 16px !important; font-weight: 700 !important;
}
body.woocommerce-cart .wc-block-components-product-details,
body.woocommerce-cart .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-components-product-details__value,
body.woocommerce-cart .wc-block-components-product-details__name{
  font-size: 14px !important;
}
body.woocommerce-cart .wc-block-cart-items__header th,
body.woocommerce-cart .wc-block-cart-items__header th span{
  font-size: 14px !important; letter-spacing: .06em !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__input{
  font-size: 15px !important; font-weight: 600 !important;
}
body.woocommerce-cart .wc-block-cart__totals-title{
  font-size: 17px !important;
}
body.woocommerce-cart .wc-block-components-panel__button{
  font-size: 14.5px !important;
}
body.woocommerce-cart .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-components-totals-item__value{
  font-size: 15px !important;
}
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size: 22px !important; font-weight: 800 !important;
}
body.woocommerce-cart .wc-block-cart__submit-button{
  font-size: 15px !important;
}