/* Show page look for show sites on the Queen Selena template (loaded by sincityseats/show.blade.php
   after show-landing.css; the site's colour skin steps aside). Two parts:
   1. The designed first screen (templates/selena/show-hero.blade.php): .sel-* rules below.
   2. SKIN ONLY for the normal page under it: colours, type and surfaces. Layout, order and controls of
      the dates, cart and pinned bar stay exactly as the Checkout UX spec sets them.
   Palette from Pete's Diffui design: plum-black, gold, magenta/violet. Generated art in
   /images/templates/selena/ is decoration only (no people, no text, no logos). */
body.tpl-show.tpl-show-selena {
    --sq-bg: #0d0614;
    --sq-surface: #1a0c25;
    --sq-surface-2: #241232;
    --sq-line: #3c2150;
    --sq-ink: #fff6ec;
    --sq-ink-2: #e2d1e6;
    --sq-ink-3: #b49cc0;
    --sq-pink: #ff3fb4;
    --sq-violet: #a259ff;
    --sq-gold: #edc46a;
    --sq-gold-hi: #fbe39a;
    --sq-gold-lo: #b8862b;
    background:
        radial-gradient(ellipse 60% 30% at 0% 0%, rgba(162, 89, 255, .14), transparent 70%),
        radial-gradient(ellipse 60% 30% at 100% 0%, rgba(255, 63, 180, .10), transparent 70%),
        var(--sq-bg);
    color: var(--sq-ink);
    font-family: 'Montserrat', system-ui, sans-serif;
}

/* ---- header ------------------------------------------------------------------------------- */
body.tpl-show.tpl-show-selena .site-header { background: rgba(13, 6, 20, .94); border-bottom: 1px solid var(--sq-line); box-shadow: none; }
body.tpl-show.tpl-show-selena .site-header :is(.nav-links a, .nav-dropdown-toggle, .hamburger) {
    color: var(--sq-ink); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
}
body.tpl-show.tpl-show-selena .site-header :is(.nav-links a, .nav-dropdown-toggle):hover { color: var(--sq-gold); }

/* ---- hero --------------------------------------------------------------------------------- */
body.tpl-show.tpl-show-selena :is(.show-hero, .show-hero-head) { background: transparent; }
body.tpl-show.tpl-show-selena .show-hero-title {
    font-family: 'Playfair Display', sans-serif; font-weight: 700; letter-spacing: .005em; text-transform: uppercase;
    color: #ffffff; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); line-height: 1.02;
}
body.tpl-show.tpl-show-selena .show-hero-tagline { color: var(--sq-gold); text-shadow: none; font-family: 'Montserrat', sans-serif; }
body.tpl-show.tpl-show-selena .show-hero-when { color: var(--sq-ink-2); font-family: 'Montserrat', sans-serif; }
body.tpl-show.tpl-show-selena .show-hero-when-venue { color: var(--sq-ink); }
body.tpl-show.tpl-show-selena .show-hero-rating { background: var(--sq-surface); border: 1px solid var(--sq-line); box-shadow: none; color: var(--sq-ink); }
body.tpl-show.tpl-show-selena :is(.show-hero-rating-star--full, .show-hero-rating-star--half) { color: var(--sq-gold); }
body.tpl-show.tpl-show-selena :is(.show-hero-overlay .starting-price, .starting-price) { color: var(--sq-gold); text-shadow: none; font-family: 'Montserrat', sans-serif; font-weight: 800; }
body.tpl-show.tpl-show-selena .hero-date-label { color: var(--sq-ink); letter-spacing: .02em; text-transform: uppercase; font-family: 'Playfair Display', sans-serif; font-weight: 600; }

/* Date buttons: indigo tiles with a neon cyan edge. */
body.tpl-show.tpl-show-selena .cta-button.hero-date-btn {
    background: var(--sq-surface); color: var(--sq-ink); border: 0; border-radius: 12px;
    box-shadow: 0 0 0 1px var(--sq-gold), 0 0 12px rgba(233, 196, 106, .25); font-family: 'Montserrat', sans-serif; font-weight: 700;
}
body.tpl-show.tpl-show-selena .cta-button.hero-date-btn:hover { background: var(--sq-surface-2); filter: none; box-shadow: 0 0 0 1px var(--sq-gold), 0 0 16px rgba(233, 196, 106, .45); }
body.tpl-show.tpl-show-selena .hero-date-btn .hero-date-btn-book-now { color: var(--sq-pink); font-weight: 800; letter-spacing: .04em; }
body.tpl-show.tpl-show-selena .hero-more-dates { color: var(--sq-gold); }

/* The one primary action: neon pink with a soft glow. */
body.tpl-show.tpl-show-selena .cta-button:not(.hero-date-btn):not(.cta-button--outline) {
    background: var(--sq-pink); color: #ffffff; border-radius: 12px; box-shadow: 0 0 18px rgba(255, 63, 180, .45);
    font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
body.tpl-show.tpl-show-selena .cta-button:not(.hero-date-btn):not(.cta-button--outline):hover { filter: brightness(1.08); }
body.tpl-show.tpl-show-selena .cta-button--outline { color: var(--sq-gold) !important; border-color: var(--sq-gold) !important; border-radius: 12px; }
body.tpl-show.tpl-show-selena .show-hero-trust { color: var(--sq-ink-3); }

/* ---- body sections ------------------------------------------------------------------------ */
body.tpl-show.tpl-show-selena .show-page { background: transparent; }
body.tpl-show.tpl-show-selena .section-card {
    background: var(--sq-surface); border: 1px solid var(--sq-line); border-radius: 14px; box-shadow: none; color: var(--sq-ink);
}
body.tpl-show.tpl-show-selena .section-card h2 {
    font-family: 'Playfair Display', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
    color: var(--sq-ink); border-bottom: 0; padding-bottom: 0; padding-left: 12px; border-left: 4px solid var(--sq-pink); text-shadow: none;
}
body.tpl-show.tpl-show-selena :is(.section-card p, .section-card li, .about-content) { color: var(--sq-ink-2); }
body.tpl-show.tpl-show-selena :is(.section-card a, .venue-link, .about-content a) { color: var(--sq-gold); }
body.tpl-show.tpl-show-selena :is(.show-jump-nav a, .show-category-tags a) { border-color: var(--sq-line); color: var(--sq-ink); background: var(--sq-surface); border-radius: 999px; }
body.tpl-show.tpl-show-selena :is(.show-jump-nav a, .show-category-tags a):hover { border-color: var(--sq-gold); }
body.tpl-show.tpl-show-selena :is(.guest-review-item, .faq-item) { background: var(--sq-surface-2); border: 1px solid var(--sq-line); border-radius: 12px; }
body.tpl-show.tpl-show-selena .faq-header { color: var(--sq-ink); }

/* ---- booking card (sidebar) --------------------------------------------------------------- */
body.tpl-show.tpl-show-selena .sidebar-title { font-family: 'Playfair Display', sans-serif; font-weight: 600; text-transform: uppercase; color: var(--sq-ink); letter-spacing: .02em; }
body.tpl-show.tpl-show-selena .sidebar-price { color: var(--sq-gold); text-shadow: none; font-family: 'Montserrat', sans-serif; font-weight: 800; }
body.tpl-show.tpl-show-selena .sidebar-venue { color: var(--sq-ink-3); }
body.tpl-show.tpl-show-selena .sidebar-date-link {
    background: var(--sq-surface-2); color: var(--sq-ink); border: 1px solid var(--sq-line); border-radius: 10px; box-shadow: none;
    font-family: 'Montserrat', sans-serif; font-weight: 700;
}
body.tpl-show.tpl-show-selena .sidebar-date-link:hover { border-color: var(--sq-gold); color: var(--sq-ink); background: var(--sq-surface-2); }
body.tpl-show.tpl-show-selena .sidebar-date-link-time { color: var(--sq-gold); }
body.tpl-show.tpl-show-selena .mini-calendar { background: var(--sq-surface-2); border: 1px solid var(--sq-line); border-radius: 12px; }
body.tpl-show.tpl-show-selena :is(.mini-calendar-month, .mini-calendars-title) { color: var(--sq-ink); }
body.tpl-show.tpl-show-selena .mini-calendar-head { color: var(--sq-ink-3); }
body.tpl-show.tpl-show-selena .mini-calendar-day.has-event {
    background: transparent; color: var(--sq-gold); border: 1px solid var(--sq-gold); border-radius: 8px; box-shadow: none;
}
body.tpl-show.tpl-show-selena .mini-calendar-day.has-event:hover { background: rgba(233, 196, 106, .14); }
body.tpl-show.tpl-show-selena .sidebar-show-card { background: var(--sq-surface-2); border: 1px solid var(--sq-line); border-radius: 12px; }
body.tpl-show.tpl-show-selena .sidebar-show-card-price { color: var(--sq-gold); }

/* ---- pinned phone bar ----------------------------------------------------------------------- */
body.tpl-show.tpl-show-selena .mobile-sticky { background: rgba(13, 6, 20, .97); border-top: 1px solid var(--sq-line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .4); }
body.tpl-show.tpl-show-selena .mobile-sticky-price-label { color: var(--sq-ink-3); text-shadow: none; }
body.tpl-show.tpl-show-selena .mobile-sticky-price-value { color: var(--sq-gold); text-shadow: none; }

/* Any colour skin's dark-on-light text rules must not reach the dark page. */
body.tpl-show.tpl-show-selena :is(.section-card .about-content p, .section-card .about-content ul, .section-card .about-content ol,
    .section-card .about-content li, .sidebar-meta, .faq-body, .guest-review-item) { color: var(--sq-ink-2); }


/* Short pages: the corner glow must not tile; the canvas behind it stays indigo. */
body.tpl-show.tpl-show-selena { background-repeat: no-repeat; background-attachment: fixed; }
html:has(> body.tpl-show-selena) { background: #0d0614; }

/* ---- Selena overrides on the shared skin ---------------------------------------------------- */
/* The one primary action: the design's gold bar. */
body.tpl-show.tpl-show-selena .cta-button:not(.hero-date-btn):not(.cta-button--outline) {
    background: linear-gradient(180deg, var(--sq-gold-hi) 0%, var(--sq-gold) 45%, var(--sq-gold-lo) 100%);
    color: #2a1206; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
}
body.tpl-show.tpl-show-selena .cta-button--outline { color: var(--sq-gold) !important; border-color: var(--sq-gold) !important; }
body.tpl-show.tpl-show-selena .hero-date-btn .hero-date-btn-book-now { color: var(--sq-pink); }
body.tpl-show.tpl-show-selena .section-card h2 { border-left-color: var(--sq-gold); }
body.tpl-show.tpl-show-selena .site-header { background: rgba(13, 6, 20, .96); border-bottom: 1px solid rgba(237, 196, 106, .45); }
body.tpl-show.tpl-show-selena .site-header .logo img { mix-blend-mode: lighten; }
body.tpl-show.tpl-show-selena .site-header :is(.nav-links a, .nav-dropdown-toggle) { text-transform: none; letter-spacing: .01em; font-family: 'Playfair Display', serif; font-weight: 400; }
body.tpl-show.tpl-show-selena .site-header :is(.nav-links a, .nav-dropdown-toggle):hover { color: var(--sq-gold); }

/* Show-site "Next Available" bar. */
body.tpl-show.tpl-show-selena .show-subsite-next-cta { background: rgba(13, 6, 20, .94); color: var(--sq-gold); border-bottom: 1px solid var(--sq-line); }
body.tpl-show.tpl-show-selena .show-subsite-next-cta:hover { background: rgba(36, 18, 50, .96); color: var(--sq-gold-hi); }
body.tpl-show.tpl-show-selena .show-subsite-next-cta-btn {
    background: linear-gradient(180deg, var(--sq-gold-hi), var(--sq-gold) 45%, var(--sq-gold-lo)); border-color: var(--sq-gold); color: #2a1206;
}

/* The normal hero under the Selena first screen keeps rating, dates, price and trust row; its title,
   logo, tagline and poster are already in the Selena hero. */
body.tpl-show.tpl-show-selena :is(.show-hero-subsite-logo, .show-hero-tagline) { display: none; }
body.tpl-show.tpl-show-selena .show-hero-head { padding-top: 1rem; padding-bottom: 0; }
body.tpl-show.tpl-show-selena .show-hero-head .show-hero-title {
    font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: 0; text-transform: none;
    color: var(--sq-gold); text-shadow: none;
}
@media (max-width: 768px) { body.tpl-show.tpl-show-selena .show-hero-head .show-hero-title { font-size: 21px; } }
body.tpl-show.tpl-show-selena .show-hero-image-wrap { max-height: none; min-height: 0; overflow: visible; background: transparent; }
body.tpl-show.tpl-show-selena .show-hero-image-wrap > img { display: none; }
body.tpl-show.tpl-show-selena .show-hero-overlay { position: static; inset: auto; background: transparent; }
body.tpl-show.tpl-show-selena .show-hero-social { position: static; display: flex; justify-content: center; padding-top: 12px; }

/* ---- Selena first screen ---------------------------------------------------------------------- */
.sel-hero {
    position: relative; overflow: hidden; isolation: isolate;
    background:
        linear-gradient(90deg, rgba(13, 6, 20, .94) 0%, rgba(13, 6, 20, .62) 42%, rgba(13, 6, 20, .12) 72%, rgba(13, 6, 20, .35) 100%),
        linear-gradient(180deg, transparent 60%, rgba(13, 6, 20, .9) 100%),
        url('/images/templates/selena/stage-backdrop.webp') center 30% / cover no-repeat,
        #0d0614;
    color: var(--sq-ink);
}
.sel-roses {
    position: absolute; left: -24px; top: 0; height: 100%; width: auto; max-width: none;
    opacity: .38; mix-blend-mode: screen; pointer-events: none; z-index: 0;
}
.sel-hero-inner {
    position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; box-sizing: border-box;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    min-height: clamp(540px, 74vh, 780px); padding: 0 32px 0 clamp(32px, 9vw, 150px);
}
.sel-copy { align-self: center; padding: 56px 0 72px; position: relative; z-index: 2; }
.sel-eyebrow {
    display: inline-block; margin: 0; padding-bottom: 12px; max-width: 30ch;
    font: 600 13px/1.55 'Montserrat', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--sq-ink);
    background: linear-gradient(90deg, var(--sq-gold-lo), var(--sq-gold-hi), var(--sq-gold-lo)) left bottom / 100% 1px no-repeat;
}
.sel-headline {
    margin: 22px 0 0; max-width: 9ch;
    font: 800 clamp(48px, 6.2vw, 92px)/.94 'Playfair Display', Georgia, serif; text-transform: uppercase; letter-spacing: -.005em;
    background: linear-gradient(180deg, #fff1c4 0%, var(--sq-gold-hi) 30%, var(--sq-gold) 62%, var(--sq-gold-lo) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, .55));
}
.sel-script {
    margin: 2px 0 0; display: flex; align-items: center; gap: .15em;
    font: 400 clamp(52px, 5.4vw, 84px)/1 'Great Vibes', 'Brush Script MT', cursive; color: #ff4fbf;
    text-shadow: 0 0 10px rgba(255, 63, 180, .75), 0 0 28px rgba(255, 63, 180, .45);
}
.sel-heart { width: .62em; height: .62em; flex: none; fill: none; stroke: var(--sq-gold); stroke-width: 1.4; transform: rotate(-10deg); filter: drop-shadow(0 0 6px rgba(237, 196, 106, .5)); }
.sel-sub { margin: 18px 0 0; max-width: 30ch; font: 400 21px/1.45 'Playfair Display', Georgia, serif; color: var(--sq-ink-2); }
.sel-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.sel-buy {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 300px; box-sizing: border-box;
    padding: 17px 30px; border-radius: 6px; border: 1px solid var(--sq-gold-hi); text-decoration: none;
    background: linear-gradient(180deg, #fff0bd 0%, var(--sq-gold-hi) 18%, var(--sq-gold) 55%, var(--sq-gold-lo) 100%);
    color: #2a1206; font: 700 19px/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: filter .15s, transform .15s;
}
.sel-buy:hover { filter: brightness(1.06); transform: translateY(-1px); color: #2a1206; }
.sel-buy svg { width: 30px; height: 30px; flex: none; transform: rotate(-14deg); }
.sel-buy .sel-chev { width: 18px; height: 18px; transform: none; }
.sel-alldates {
    color: var(--sq-ink); text-decoration: none; padding: 0 4px 8px;
    font: 600 13px/1 'Montserrat', sans-serif; letter-spacing: .24em; text-transform: uppercase;
    background: linear-gradient(90deg, var(--sq-pink), var(--sq-violet)) left bottom / 100% 2px no-repeat;
}
.sel-alldates:hover { color: var(--sq-gold-hi); }
.sel-next { margin: 20px 0 0; font: 500 14px/1.4 'Montserrat', sans-serif; color: var(--sq-ink-2); letter-spacing: .02em; }
.sel-next strong { color: var(--sq-ink); font-weight: 700; }
.sel-next-price { color: var(--sq-gold); font-weight: 700; margin-left: 6px; }

.sel-photo { margin: 0; position: relative; align-self: stretch; z-index: 1; }
.sel-photo img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block;
    -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 42%, #000 40%, rgba(0, 0, 0, .55) 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 60% at 50% 42%, #000 40%, rgba(0, 0, 0, .55) 70%, transparent 100%);
}
.sel-side-script {
    position: absolute; right: 26px; top: 22%; z-index: 2; margin: 0; display: flex; flex-direction: column; align-items: center;
    font: 400 66px/.9 'Great Vibes', cursive; color: var(--sq-gold); text-align: center; max-width: 3.4em;
    transform: rotate(-8deg); text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}
.sel-side-script .sel-heart { width: .55em; height: .55em; margin-top: .1em; }

.sel-tiles {
    position: relative; z-index: 3; max-width: 1220px; margin: -52px auto 0; box-sizing: border-box;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    border: 1px solid rgba(237, 196, 106, .7); border-radius: 18px;
    background: rgba(13, 6, 20, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px rgba(237, 196, 106, .12) inset, 0 18px 40px rgba(0, 0, 0, .45);
}
.sel-tile { display: flex; align-items: center; gap: 18px; padding: 24px 30px; color: var(--sq-ink); text-decoration: none; position: relative; }
.sel-tile + .sel-tile::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(180deg, transparent, var(--sq-gold), transparent); }
.sel-tile > svg { width: 40px; height: 40px; flex: none; color: var(--sq-gold); }
.sel-tile-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sel-tile-text strong { font: 600 15px/1.2 'Montserrat', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--sq-gold); }
.sel-tile-text span { font: 400 17px/1.3 'Playfair Display', Georgia, serif; color: var(--sq-ink-2); }
.sel-tile-chev { margin-left: auto; font: 400 34px/1 'Montserrat', sans-serif; color: var(--sq-gold); }
.sel-tile:hover .sel-tile-text strong { color: var(--sq-gold-hi); }

.sel-band {
    position: relative; margin-top: 30px; min-height: 132px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 0 max(32px, calc((100vw - 1220px) / 2));
    border-top: 1px solid rgba(255, 63, 180, .35);
    background:
        url('/images/templates/selena/vegas-skyline.webp?v=2') right 180px bottom / auto 100% no-repeat,
        linear-gradient(180deg, rgba(36, 18, 50, .6), rgba(13, 6, 20, 1));
}
.sel-band-words { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; }
.sel-band-words li { display: flex; align-items: center; gap: 14px; padding: 0 34px; font: italic 400 24px/1 'Playfair Display', Georgia, serif; color: var(--sq-ink); }
.sel-band-words li:first-child { padding-left: 0; }
.sel-band-words li + li { border-left: 1px solid rgba(255, 63, 180, .4); }
.sel-band-words svg { width: 34px; height: 34px; color: var(--sq-pink); filter: drop-shadow(0 0 8px rgba(255, 63, 180, .6)); }
.sel-venue-badge { display: block; width: 150px; height: 150px; flex: none; position: relative; z-index: 1; filter: drop-shadow(0 0 12px rgba(255, 63, 180, .55)) drop-shadow(0 2px 4px rgba(0, 0, 0, .8)); }
.sel-venue-badge span {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(135deg, #fff0bd 0%, var(--sq-gold-hi) 25%, var(--sq-gold) 55%, var(--sq-gold-lo) 100%);
    -webkit-mask: var(--sel-venue-logo) center / contain no-repeat; mask: var(--sel-venue-logo) center / contain no-repeat;
}

@media (max-width: 1100px) {
    .sel-side-script { display: none; }
    .sel-tile { padding: 20px 22px; }
    .sel-tile-text span { font-size: 15px; }
}

/* Phones (90%+ of guests): photo right, copy left over it, compact tiles, skyline strip with the venue logo.
   Kept short so the date buttons in the normal hero below come up quickly. */
@media (max-width: 768px) {
    .sel-hero {
        background:
            linear-gradient(90deg, rgba(13, 6, 20, .9) 0%, rgba(13, 6, 20, .55) 55%, rgba(13, 6, 20, .2) 100%),
            linear-gradient(180deg, transparent 55%, rgba(13, 6, 20, .95) 100%),
            url('/images/templates/selena/stage-backdrop.webp') 62% 20% / cover no-repeat,
            #0d0614;
    }
    .sel-roses { left: -40px; opacity: .26; }
    .sel-hero-inner { display: block; min-height: 0; padding: 0 16px; }
    .sel-photo { position: absolute; top: 0; right: -6%; width: 64%; height: 100%; }
    .sel-photo img {
        object-position: center 12%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 70%, transparent 100%);
        -webkit-mask-composite: source-in; mask-composite: intersect;
        mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, #000 70%, transparent 100%);
    }
    .sel-copy { width: 64%; padding: 22px 0 24px; }
    .sel-eyebrow { font-size: 10px; letter-spacing: .2em; padding-bottom: 8px; line-height: 1.5; }
    .sel-headline { margin-top: 12px; font-size: clamp(30px, 9vw, 40px); line-height: .98; }
    .sel-script { font-size: clamp(36px, 11vw, 48px); margin-top: 2px; }
    .sel-sub { font-size: 15px; margin-top: 8px; max-width: 24ch; text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }
    .sel-actions { margin-top: 16px; gap: 14px; }
    .sel-buy { min-width: 0; width: 100%; padding: 14px 12px; gap: 8px; font-size: 15px; letter-spacing: .08em; }
    .sel-buy svg { width: 22px; height: 22px; }
    .sel-buy .sel-chev { width: 14px; height: 14px; }
    .sel-alldates { font-size: 11px; letter-spacing: .16em; padding-bottom: 6px; }
    .sel-next { font-size: 12.5px; margin-top: 12px; text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }

    .sel-tiles { margin: 0 16px; border-radius: 14px; }
    .sel-tile { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 12px 6px; text-align: center; }
    .sel-tile > svg { width: 26px; height: 26px; }
    .sel-tile-text strong { font-size: 10px; letter-spacing: .1em; line-height: 1.3; }
    .sel-tile-text span, .sel-tile-chev { display: none; }

    .sel-band {
        margin-top: 14px; min-height: 84px; padding: 0 16px; justify-content: flex-end;
        background: url('/images/templates/selena/vegas-skyline.webp?v=2') left -40px bottom / auto 100% no-repeat, linear-gradient(180deg, rgba(36, 18, 50, .5), #0d0614);
    }
    .sel-band-words { display: none; }
    .sel-venue-badge { width: 78px; height: 78px; }
}
@media (max-width: 400px) {
    .sel-sub { display: none; }
}

/* Gold divider (generated ornament, no text) between the first screen and the page. */
body.tpl-show.tpl-show-selena .show-page::before {
    content: ''; display: block; height: 34px; margin: 14px auto 6px; max-width: 520px;
    background: url('/images/templates/selena/gold-divider.webp?v=2') center / auto 100% no-repeat;
}

/* Phones: the date buttons must stay on the first screen (Checkout UX spec §7). The tiles, the
   "Next show" line (the Next Available bar already says it) and the words band drop out; the skyline
   becomes the hero's bottom edge and the venue logo sits in its corner. */
@media (max-width: 768px) {
    .sel-hero {
        background:
            url('/images/templates/selena/vegas-skyline.webp?v=2') left -30px bottom / auto 58px no-repeat,
            linear-gradient(90deg, rgba(13, 6, 20, .9) 0%, rgba(13, 6, 20, .55) 55%, rgba(13, 6, 20, .2) 100%),
            linear-gradient(180deg, transparent 55%, rgba(13, 6, 20, .95) 100%),
            url('/images/templates/selena/stage-backdrop.webp') 62% 20% / cover no-repeat,
            #0d0614;
    }
    .sel-copy { padding: 18px 0 70px; }
    .sel-tiles, .sel-next { display: none; }
    .sel-band { position: absolute; right: 12px; bottom: 8px; z-index: 3; margin: 0; min-height: 0; padding: 0; border: 0; background: none; }
    .sel-venue-badge { width: 62px; height: 62px; }
    body.tpl-show.tpl-show-selena .show-hero-social { display: none; }
}

/* ---- Big show logo + cut-out photo (Pete 10/16: logo large, studio photos of Yailen) ------------ */
/* The logo files are often on black (JPEG): lighten drops the black into the dark hero. */
.sel-logo { display: block; width: clamp(260px, 25vw, 360px); height: auto; margin: 0 0 14px -6px; mix-blend-mode: lighten; }
.sel-photo--cutout::before {
    content: ''; position: absolute; left: 8%; right: 0; bottom: 6%; height: 70%; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 50% 55% at 50% 55%, rgba(255, 63, 180, .38), rgba(162, 89, 255, .16) 55%, transparent 75%);
}
.sel-photo--cutout img {
    z-index: 1; object-fit: contain; object-position: center bottom; padding-top: 18px; box-sizing: border-box;
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
    filter: drop-shadow(0 0 22px rgba(255, 63, 180, .35));
}
@media (max-width: 768px) {
    .sel-logo { width: 132px; margin: 0 0 6px -4px; }
    .sel-eyebrow, .sel-alldates { display: none; }
    .sel-headline { margin-top: 2px; font-size: clamp(26px, 7.6vw, 34px); }
    .sel-script { font-size: clamp(32px, 9.5vw, 42px); }
    .sel-copy { padding-top: 12px; padding-bottom: 66px; }
    .sel-photo--cutout { right: -4%; width: 60%; }
    .sel-photo--cutout img { padding-top: 10px;
        -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
}
/* Logo blend needs the copy column to share the hero's stacking context: art goes below (z -1)
   inside the isolated hero, copy stays above it without a z-index of its own. */
.sel-hero-inner { z-index: auto; }
.sel-copy { z-index: auto; }
.sel-photo, .sel-roses { z-index: -1; }
.sel-side-script { z-index: 0; }

/* =================================================================================================
   THE REST OF THE PAGE (Pete 10/16: "doesn't match"): the hero's language carried down — plum stage
   canvas with roses at the edges, gold-framed cards, gold-gradient Playfair headings with the gold
   flourish under them, gold date pills, framed photos. SKIN ONLY: no section moves, hides or resizes.
   ================================================================================================= */
/* The body stays transparent so the fixed stage canvas below (z -1) shows; html holds the plum. */
body.tpl-show.tpl-show-selena { background: transparent !important; }
body.tpl-show.tpl-show-selena::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(162, 89, 255, .16), transparent 70%),
        radial-gradient(ellipse 50% 40% at 100% 60%, rgba(255, 63, 180, .10), transparent 70%),
        linear-gradient(180deg, rgba(13, 6, 20, .86), rgba(13, 6, 20, .96)),
        url('/images/templates/selena/stage-backdrop.webp') center 20% / cover no-repeat;
}
@media (min-width: 1280px) {
    body.tpl-show.tpl-show-selena::after {
        content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; pointer-events: none; opacity: .2;
        background:
            url('/images/templates/selena/rose-vine.webp?v=2') left -60px top 60px / auto 92vh no-repeat,
            url('/images/templates/selena/rose-vine.webp?v=2') right -60px top 60px / auto 92vh no-repeat;
    }
}
html:has(> body.tpl-show-selena) { background: #0d0614; }
body.tpl-show.tpl-show-selena :is(.show-page, .show-layout, .show-layout > main, .show-layout > aside) { background: transparent; }

/* Cards: plum glass with a gold hairline frame and a gold glint along the top. */
body.tpl-show.tpl-show-selena .section-card {
    position: relative;
    background: linear-gradient(180deg, rgba(38, 18, 54, .92) 0%, rgba(22, 10, 32, .94) 100%);
    border: 1px solid rgba(237, 196, 106, .38); border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(251, 227, 154, .10), 0 18px 40px rgba(0, 0, 0, .38);
}
body.tpl-show.tpl-show-selena .section-card::before {
    content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--sq-gold-hi), transparent);
}

/* Section headings: the hero's gold Playfair, flourish underneath. */
body.tpl-show.tpl-show-selena .section-card h2 {
    border: 0; padding: 0; margin-bottom: 18px;
    font: 800 25px/1.15 'Playfair Display', Georgia, serif; text-transform: uppercase; letter-spacing: .03em;
    background: linear-gradient(180deg, #fff1c4 0%, var(--sq-gold-hi) 35%, var(--sq-gold) 70%, var(--sq-gold-lo) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
body.tpl-show.tpl-show-selena .section-card h2::after {
    content: ''; display: block; width: 200px; max-width: 70%; height: 42px; margin-top: 4px; margin-bottom: -10px;
    background: url('/images/templates/selena/gold-divider-tight.webp?v=2') left center / contain no-repeat;
}
body.tpl-show.tpl-show-selena .section-card h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--sq-gold); }
body.tpl-show.tpl-show-selena :is(.section-card p, .section-card li, .about-content, .about-content p) {
    font-family: 'Montserrat', sans-serif; font-size: 15px; line-height: 1.75; color: var(--sq-ink-2);
}
body.tpl-show.tpl-show-selena .about-content > p:first-child {
    font: italic 400 19px/1.6 'Playfair Display', Georgia, serif; color: var(--sq-ink);
}
body.tpl-show.tpl-show-selena :is(.section-card a:not(.cta-button), .venue-link, .about-content a) { color: var(--sq-gold); text-decoration-color: rgba(237, 196, 106, .45); }
body.tpl-show.tpl-show-selena :is(.section-card a:not(.cta-button), .venue-link):hover { color: var(--sq-gold-hi); }

/* Sizzle reel + gallery: photos in thin gold frames, pink glow on hover. */
body.tpl-show.tpl-show-selena .section-card :is(iframe, video) { border-radius: 12px; box-shadow: 0 0 0 1px rgba(237, 196, 106, .45), 0 12px 30px rgba(0, 0, 0, .5); }
body.tpl-show.tpl-show-selena .photo-grid img {
    border-radius: 12px; box-shadow: 0 0 0 1px rgba(237, 196, 106, .4); transition: box-shadow .2s, transform .2s;
}
body.tpl-show.tpl-show-selena .photo-grid img:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--sq-gold-hi), 0 0 22px rgba(255, 63, 180, .45); }

/* Quick glance. */
body.tpl-show.tpl-show-selena .quick-glance-item {
    background: rgba(13, 6, 20, .55); border: 1px solid rgba(237, 196, 106, .22); border-radius: 14px; box-shadow: none;
}
body.tpl-show.tpl-show-selena .quick-glance-icon { color: var(--sq-gold) !important; background: rgba(255, 63, 180, .12); border-radius: 50%; box-shadow: 0 0 14px rgba(255, 63, 180, .25); }
body.tpl-show.tpl-show-selena .quick-glance-title { font: 600 12px/1.3 'Montserrat', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--sq-gold); }
body.tpl-show.tpl-show-selena .quick-glance-text { color: var(--sq-ink-2); }

/* Category chips + jump links: gold outline pills. */
body.tpl-show.tpl-show-selena :is(.show-category-tags a, .show-jump-nav a) {
    background: transparent; border: 1px solid rgba(237, 196, 106, .55); border-radius: 999px; color: var(--sq-gold);
    font: 600 11.5px/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
body.tpl-show.tpl-show-selena :is(.show-category-tags a, .show-jump-nav a):hover { background: rgba(237, 196, 106, .12); color: var(--sq-gold-hi); border-color: var(--sq-gold-hi); }

/* Performers: gold-ringed portraits. */
body.tpl-show.tpl-show-selena .performer-card {
    background: rgba(13, 6, 20, .55); border: 1px solid rgba(237, 196, 106, .25); border-radius: 16px; box-shadow: none;
}
body.tpl-show.tpl-show-selena .performer-image { box-shadow: 0 0 0 2px var(--sq-gold), 0 0 18px rgba(255, 63, 180, .4); border-radius: 50%; }
body.tpl-show.tpl-show-selena .performer-name { font: 700 19px/1.2 'Playfair Display', Georgia, serif; color: var(--sq-gold); }
body.tpl-show.tpl-show-selena .performer-description { color: var(--sq-ink-2); }
body.tpl-show.tpl-show-selena .performer-link { color: var(--sq-pink); }

/* Guest reviews (inline-styled partial, so the colours need !important). */
body.tpl-show.tpl-show-selena .guest-review-item {
    background: rgba(13, 6, 20, .6) !important; border: 1px solid rgba(237, 196, 106, .22) !important;
    border-left: 3px solid var(--sq-pink) !important; border-radius: 14px !important;
}
body.tpl-show.tpl-show-selena .guest-review-item > div:first-child span:first-child { font-family: 'Playfair Display', Georgia, serif; font-size: 17px; color: var(--sq-ink) !important; }
body.tpl-show.tpl-show-selena .guest-review-item > div:first-child > div:last-child { color: var(--sq-gold) !important; letter-spacing: .08em; }
body.tpl-show.tpl-show-selena .guest-review-item > div:first-child > div > div { color: var(--sq-ink-3) !important; }
body.tpl-show.tpl-show-selena .guest-review-item > p { font: italic 400 16px/1.6 'Playfair Display', Georgia, serif !important; color: var(--sq-ink) !important; }
body.tpl-show.tpl-show-selena .guest-review-item span[style*="background:#1a"],
body.tpl-show.tpl-show-selena .guest-review-item span[style*="background: #1a"] { background: rgba(36, 18, 50, .9) !important; border-color: rgba(237, 196, 106, .2) !important; color: var(--sq-ink-2) !important; }
body.tpl-show.tpl-show-selena #guest-reviews :is(button, a)[id^="guest-reviews-"] { color: var(--sq-gold) !important; border-color: rgba(237, 196, 106, .45) !important; background: transparent !important; }

/* FAQ. */
body.tpl-show.tpl-show-selena .faq-item { background: rgba(13, 6, 20, .55); border: 1px solid rgba(237, 196, 106, .22); border-radius: 12px; }
body.tpl-show.tpl-show-selena .faq-item.open { border-color: rgba(255, 63, 180, .55); box-shadow: 0 0 16px rgba(255, 63, 180, .15); }
body.tpl-show.tpl-show-selena .faq-header { font: 600 16px/1.35 'Playfair Display', Georgia, serif; color: var(--sq-ink); }
body.tpl-show.tpl-show-selena .faq-header span:last-child { color: var(--sq-gold); }
body.tpl-show.tpl-show-selena .faq-body { color: var(--sq-ink-2); }

/* Sidebar booking card. */
body.tpl-show.tpl-show-selena .sidebar-section { border-color: rgba(237, 196, 106, .5); }
body.tpl-show.tpl-show-selena .sidebar-title { font: 800 22px/1.15 'Playfair Display', Georgia, serif; text-transform: uppercase; color: var(--sq-ink); letter-spacing: .02em; }
body.tpl-show.tpl-show-selena .sidebar-price {
    font: 800 30px/1.1 'Playfair Display', Georgia, serif;
    background: linear-gradient(180deg, #fff1c4, var(--sq-gold) 60%, var(--sq-gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.tpl-show.tpl-show-selena :is(.sidebar-meta, .sidebar-venue) { color: var(--sq-ink-3); }
body.tpl-show.tpl-show-selena .sidebar-date-link {
    background: rgba(13, 6, 20, .55); border: 1px solid rgba(237, 196, 106, .55); border-radius: 999px; color: var(--sq-ink);
    font: 600 14px/1.2 'Montserrat', sans-serif; letter-spacing: .03em;
}
body.tpl-show.tpl-show-selena .sidebar-date-link:hover { background: rgba(237, 196, 106, .14); border-color: var(--sq-gold-hi); color: #fff; }
body.tpl-show.tpl-show-selena .sidebar-date-link-time { color: var(--sq-gold-hi); }
body.tpl-show.tpl-show-selena .sidebar-more-dates:not(.cta-button) { color: var(--sq-gold); }
body.tpl-show.tpl-show-selena .mini-calendars-title { font: 600 12px/1 'Montserrat', sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--sq-gold); }
body.tpl-show.tpl-show-selena .mini-calendar { background: rgba(13, 6, 20, .55); border: 1px solid rgba(237, 196, 106, .25); border-radius: 14px; }
body.tpl-show.tpl-show-selena .mini-calendar-month { font-family: 'Playfair Display', Georgia, serif; color: var(--sq-ink); }
body.tpl-show.tpl-show-selena .mini-calendar-day.has-event { color: var(--sq-gold); border: 1px solid var(--sq-gold); background: transparent; border-radius: 8px; }
body.tpl-show.tpl-show-selena .mini-calendar-day.has-event:hover { background: rgba(237, 196, 106, .16); }
body.tpl-show.tpl-show-selena .mini-calendar-day.today { box-shadow: 0 0 0 2px var(--sq-pink); }
body.tpl-show.tpl-show-selena .trust-badges { color: var(--sq-ink-3); }
body.tpl-show.tpl-show-selena .show-social-links a { background: rgba(237, 196, 106, .12); color: var(--sq-gold); box-shadow: 0 0 0 1px rgba(237, 196, 106, .45); }
body.tpl-show.tpl-show-selena .sidebar-show-card { background: rgba(13, 6, 20, .55); border: 1px solid rgba(237, 196, 106, .25); border-radius: 14px; overflow: hidden; }
body.tpl-show.tpl-show-selena .sidebar-show-card-name { font-family: 'Playfair Display', Georgia, serif; color: var(--sq-ink); }
body.tpl-show.tpl-show-selena .sidebar-show-card-price { color: var(--sq-gold); }
body.tpl-show.tpl-show-selena .sidebar-show-card:hover { border-color: var(--sq-gold); }

/* Footer: plum with the gold hairline, the hero's band words feel. */
body.tpl-show.tpl-show-selena footer#contact {
    background: linear-gradient(180deg, rgba(36, 18, 50, .9), #0a0410) !important; border-top: 1px solid rgba(237, 196, 106, .45); color: var(--sq-ink-2);
}
body.tpl-show.tpl-show-selena footer#contact :is(h2, h3, h4) { font-family: 'Playfair Display', Georgia, serif; color: var(--sq-gold); }
body.tpl-show.tpl-show-selena footer#contact a { color: var(--sq-ink-2); }
body.tpl-show.tpl-show-selena footer#contact a:hover { color: var(--sq-gold-hi); }

@media (max-width: 768px) {
    body.tpl-show.tpl-show-selena .section-card { border-radius: 14px; }
    body.tpl-show.tpl-show-selena .section-card h2 { font-size: 20px; }
    body.tpl-show.tpl-show-selena .section-card h2::after { width: 150px; height: 32px; margin-top: 2px; }
    body.tpl-show.tpl-show-selena .about-content > p:first-child { font-size: 17px; }
}
body.tpl-show.tpl-show-selena .footer-newsletter-band {
    background: linear-gradient(180deg, rgba(38, 18, 54, .95), rgba(22, 10, 32, .95)) !important;
    border: 1px solid rgba(237, 196, 106, .45) !important; box-shadow: 0 0 30px rgba(255, 63, 180, .12) !important;
}
body.tpl-show.tpl-show-selena .footer-newsletter-eyebrow { color: var(--sq-pink) !important; }
body.tpl-show.tpl-show-selena .footer-newsletter-title { font-family: 'Playfair Display', Georgia, serif !important; color: var(--sq-gold) !important; }
body.tpl-show.tpl-show-selena .footer-newsletter-input { background: rgba(13, 6, 20, .7) !important; border-color: rgba(237, 196, 106, .4) !important; color: var(--sq-ink) !important; }
body.tpl-show.tpl-show-selena .footer-newsletter-btn {
    background: linear-gradient(180deg, var(--sq-gold-hi), var(--sq-gold) 45%, var(--sq-gold-lo)) !important; color: #2a1206 !important; border: 0 !important;
}

/* =================================================================================================
   NEXT DATES IN THE HERO (Pete 10/16: "the next dates should be in the top part"). The normal hero
   (H1, rating, price, date buttons, More Dates, trust row) renders inside .sel-dates; its markup and
   behaviour are unchanged, it just sits under the headline instead of below the hero.
   ================================================================================================= */
.sel-hero--dates .sel-hero-inner { grid-template-rows: auto auto; align-content: center; }
.sel-hero--dates .sel-copy { grid-column: 1; grid-row: 1; align-self: end; padding: 36px 0 6px; }
.sel-hero--dates .sel-dates { grid-column: 1; grid-row: 2; align-self: start; padding: 4px 0 84px; min-width: 0; }
.sel-hero--dates .sel-photo { grid-column: 2; grid-row: 1 / span 2; }
.sel-hero--dates .sel-logo { width: clamp(200px, 17vw, 260px); margin-bottom: 8px; }
.sel-hero--dates .sel-headline { font-size: clamp(40px, 4.6vw, 68px); margin-top: 14px; }
.sel-hero--dates .sel-script { font-size: clamp(42px, 4.2vw, 64px); }

.sel-dates .show-hero { width: auto; background: transparent; }
.sel-dates .show-hero-head { text-align: left; padding: 0 0 4px; background: transparent; }
body.tpl-show.tpl-show-selena .sel-dates .show-hero-head .show-hero-title { font-size: 20px; color: var(--sq-ink); text-align: left; }
.sel-dates .show-hero-rating { margin-left: 0; }
.sel-dates .show-hero-recent-activity { text-align: left; }
.sel-dates .show-hero-image-wrap { max-height: none; min-height: 0; overflow: visible; background: transparent; }
.sel-dates .show-hero-overlay { position: static; background: transparent; }
.sel-dates .show-hero-cta-bottom { max-width: none; margin: 0; padding: 10px 0 0; }
.sel-dates .show-hero-cta { align-items: flex-start; }
.sel-dates .show-hero-trust { justify-content: flex-start; }
body.tpl-show.tpl-show-selena .sel-dates .starting-price {
    font: 800 24px/1.1 'Playfair Display', Georgia, serif;
    background: linear-gradient(180deg, #fff1c4, var(--sq-gold) 60%, var(--sq-gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.tpl-show.tpl-show-selena .sel-dates .hero-date-label { font: 600 12px/1 'Montserrat', sans-serif; letter-spacing: .24em; color: var(--sq-gold); text-transform: uppercase; }
body.tpl-show.tpl-show-selena .sel-dates .cta-button.hero-date-btn {
    background: rgba(13, 6, 20, .72); border: 1px solid rgba(237, 196, 106, .7); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); backdrop-filter: blur(4px);
}
body.tpl-show.tpl-show-selena .sel-dates .cta-button.hero-date-btn:hover { background: rgba(237, 196, 106, .16); border-color: var(--sq-gold-hi); }
body.tpl-show.tpl-show-selena .sel-dates .hero-more-dates { color: var(--sq-gold); }

@media (max-width: 768px) {
    .sel-hero--dates .sel-hero-inner { display: block; }
    .sel-hero--dates .sel-copy { width: 62%; padding: 12px 0 10px; }
    .sel-hero--dates .sel-photo { height: 300px; bottom: auto; }
    .sel-hero--dates .sel-logo { width: 118px; margin-bottom: 4px; }
    .sel-hero--dates .sel-headline { font-size: clamp(24px, 7vw, 30px); margin-top: 0; }
    .sel-hero--dates .sel-script { font-size: clamp(30px, 9vw, 38px); }
    .sel-hero--dates .sel-dates {
        position: relative; padding: 8px 0 74px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
        background: linear-gradient(180deg, rgba(13, 6, 20, 0) 0, rgba(13, 6, 20, .82) 40px, rgba(13, 6, 20, .9) 100%);
    }
    .sel-dates .show-hero-head { text-align: center; }
    body.tpl-show.tpl-show-selena .sel-dates .show-hero-head .show-hero-title { text-align: center; font-size: 18px; }
    .sel-dates .show-hero-recent-activity { text-align: center; }
    .sel-dates .show-hero-cta-bottom { padding-top: 6px; }
    .sel-dates .show-hero-cta { align-items: stretch; }
    .sel-dates .show-hero-trust { justify-content: center; }
}
@media (min-width: 769px) {
    .sel-dates :is(.show-hero-cta, .hero-dates-group) { width: 100%; max-width: 560px; }
    .sel-dates .hero-date-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
    .sel-dates .hero-date-buttons .hero-date-btn { width: 100%; min-width: 0; margin: 0; }
    .sel-dates .hero-more-dates { display: inline-block; margin-top: 8px; text-align: left; }
    body.tpl-show.tpl-show-selena .sel-dates .show-hero-social { justify-content: flex-start; padding-top: 6px; }
}

/* =================================================================================================
   SPANISH PAGE (/es, sincityseats/show-es.blade.php, body.tpl-show-es): the same first screen with
   Spanish wording, and its simpler sections drawn as the same gold-framed cards. Skin only.
   ================================================================================================= */
body.tpl-show-es .es-wrap { padding-top: 8px; }
body.tpl-show-es .es-lang a { color: var(--sq-gold); opacity: 1; text-decoration-color: rgba(237, 196, 106, .45); }
body.tpl-show-es .es-section.section-card { margin: 24px 0 0; padding: 26px 26px 22px; }
body.tpl-show-es .es-desc > p:first-child { font: italic 400 19px/1.6 'Playfair Display', Georgia, serif; color: var(--sq-ink); }
body.tpl-show-es .es-hl li::marker { color: var(--sq-gold); }
body.tpl-show-es .es-dates a {
    background: rgba(13, 6, 20, .55); border: 1px solid rgba(237, 196, 106, .35); border-radius: 12px; color: var(--sq-ink);
    font-family: 'Montserrat', sans-serif; transition: border-color .2s, background .2s;
}
body.tpl-show-es .es-dates a:hover { border-color: var(--sq-gold-hi); background: rgba(237, 196, 106, .10); }
body.tpl-show-es .es-dates a span:last-child { color: var(--sq-pink); letter-spacing: .04em; }
body.tpl-show-es .es-gallery img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(237, 196, 106, .4); }
body.tpl-show-es .es-faq details { border-bottom-color: rgba(237, 196, 106, .22); }
body.tpl-show-es .es-faq summary { font: 700 16px/1.4 'Playfair Display', Georgia, serif; color: var(--sq-ink); }
body.tpl-show-es .es-faq summary::marker { color: var(--sq-gold); }
body.tpl-show-es .sel-dates .es-note { font-size: 13px; color: var(--sq-ink-3); margin: 8px 0 0; }
@media (max-width: 768px) {
    body.tpl-show-es .es-section.section-card { padding: 20px 16px 16px; }
}

/* =================================================================================================
   DESKTOP: THE WHOLE FIRST SCREEN ABOVE THE FOLD (Pete 10/17). Stacked, it was ~1,280px tall, so
   the dates and trust row sat below the fold even at 1920x1080. Laptops+ now get three columns:
   logo/headline | H1, price, dates, trust | photo. Sizes track the viewport height, and the tiles
   and the venue band are slimmer. Date buttons keep their size (readability for the 50+ audience).
   Phones are untouched (rules above).
   ================================================================================================= */
@media (min-width: 1025px) {
    .sel-hero--dates .sel-hero-inner {
        grid-template-columns: minmax(0, 360px) minmax(0, 470px) minmax(0, 1.15fr); grid-template-rows: auto;
        column-gap: clamp(24px, 3vw, 48px); align-items: center; min-height: 0;
        padding-top: clamp(12px, 2.5vh, 28px); padding-bottom: clamp(12px, 2.5vh, 40px);
        padding-left: clamp(32px, 5vw, 96px);
    }
    .sel-hero--dates .sel-copy { grid-column: 1; grid-row: 1; align-self: center; padding: 0; }
    .sel-hero--dates .sel-dates { grid-column: 2; grid-row: 1; align-self: center; padding: 0; }
    .sel-hero--dates .sel-photo { grid-column: 3; grid-row: 1; align-self: stretch; min-height: clamp(440px, 66vh, 680px); }
    /* The cut-out stands taller than her column, down behind the tiles, as if on the stage. */
    .sel-hero--dates .sel-photo--cutout img { top: -4%; right: -4%; left: auto; bottom: auto; height: 150%; width: auto; max-width: none; padding-top: 0; object-fit: contain; }
    .sel-hero--dates .sel-logo { width: clamp(220px, 34vh, 340px); margin-bottom: 2px; }
    .sel-hero--dates .sel-eyebrow { font-size: 12px; letter-spacing: .26em; padding-bottom: 8px; }
    .sel-hero--dates .sel-headline { font-size: clamp(34px, 6vh, 56px); margin-top: 10px; max-width: none; }
    .sel-hero--dates .sel-script { font-size: clamp(36px, 6vh, 56px); }
    .sel-hero--dates .sel-side-script { font-size: clamp(44px, 7vh, 66px); top: 12%; }

    /* Dates column: H1, then rating + "booked" on one line, price, the date buttons (3 across),
       More Dates and the trust row. The social icons are in the footer too, so they leave here. */
    .sel-dates .show-hero-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 0 2px; }
    .sel-dates .show-hero-head .show-hero-title { flex-basis: 100%; }
    .sel-dates .show-hero-head :is(.show-hero-rating, .show-hero-recent-activity) { margin: 0; }
    body.tpl-show.tpl-show-selena .sel-dates .show-hero-social { display: none; }
    .sel-dates .show-hero-cta-bottom { padding-top: 8px; }
    body.tpl-show.tpl-show-selena .sel-dates .starting-price { font-size: 22px; }
    .sel-dates .hero-date-label { margin-top: 4px; }
    .sel-dates .hero-more-dates { margin-top: 6px; }
    /* Trust row (Pete 10/17): one line, up at the very top of the first screen as its own slim strip,
       apart from the logo and marketing lines. It is absolutely placed against .sel-hero-inner (nothing
       between is positioned), which makes room with extra top padding. */
    .sel-hero--dates .sel-hero-inner { padding-top: calc(clamp(12px, 2.5vh, 28px) + 34px); }
    .sel-dates .show-hero-trust {
        position: absolute; top: 0; left: 0; right: 0; z-index: 3; margin: 0; padding: 8px 16px;
        flex-wrap: nowrap; justify-content: center; gap: 28px; white-space: nowrap;
        border-bottom: 1px solid rgba(237, 196, 106, .18);
        background: linear-gradient(90deg, transparent, rgba(13, 6, 20, .55) 20%, rgba(13, 6, 20, .55) 80%, transparent);
    }
    .sel-dates .show-hero-trust-item { font-size: 13px; letter-spacing: .02em; }
    .sel-dates :is(.show-hero, .show-hero-image-wrap, .show-hero-overlay, .show-hero-cta-bottom, .show-hero-cta) { position: static; }

    /* Tiles and venue band: one slim strip each. */
    .sel-hero--dates .sel-tiles { margin-top: 0; border-radius: 14px; }
    .sel-hero--dates .sel-tile { padding: 10px 24px; gap: 14px; }
    .sel-hero--dates .sel-tile > svg { width: 28px; height: 28px; }
    .sel-hero--dates .sel-tile-text { gap: 2px; }
    .sel-hero--dates .sel-tile-text strong { font-size: 13px; letter-spacing: .16em; }
    .sel-hero--dates .sel-tile-text span { font-size: 15px; }
    .sel-hero--dates .sel-tile-chev { font-size: 26px; }
    .sel-hero--dates .sel-band { margin-top: 6px; min-height: 52px; }
    .sel-hero--dates .sel-band-words li { font-size: 18px; padding: 0 24px; gap: 10px; }
    .sel-hero--dates .sel-band-words svg { width: 24px; height: 24px; }
    .sel-hero--dates .sel-venue-badge { width: 72px; height: 52px; }
}
/* Desktop three-column layout: the photo column is too slim for the side script, it lands on her face
   (Pete 10/17). Hidden at every desktop width. */
@media (min-width: 1025px) {
    .sel-hero--dates .sel-side-script { display: none; }
}
/* Short laptop screens (1280x720): the words band and venue badge give way so the tiles stay in view. */
@media (min-width: 1025px) and (max-height: 640px) {
    .sel-hero--dates .sel-band { display: none; }
}

/* =================================================================================================
   SHORTER PAGE (Pete 10/17, preview first). Long text folds on screen; the full text stays in the
   HTML (Google indexes folded text on mobile-first). Script in templates/selena/show-hero.blade.php.
   ================================================================================================= */
.sel-clamp { position: relative; max-height: 13.5em; overflow: hidden; }
.sel-clamp::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5em; pointer-events: none;
    background: linear-gradient(180deg, rgba(26, 12, 37, 0), rgba(26, 12, 37, .96));
}
.sel-clamp.is-open { max-height: none; }
.sel-clamp.is-open::after { display: none; }
body.tpl-show-selena .sel-more {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 20px; cursor: pointer;
    background: transparent; border: 1px solid rgba(237, 196, 106, .6); border-radius: 999px; color: var(--sq-gold);
    font: 600 12px/1 'Montserrat', sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
body.tpl-show-selena .sel-more:hover { background: rgba(237, 196, 106, .12); color: var(--sq-gold-hi); }

/* Reviews: each folds to four lines, tap to open. */
body.tpl-show-selena .guest-review-item > p.sel-review-clamp:not(.is-open) {
    display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; cursor: pointer;
}
/* The four sub-ratings (check-in, seating, service, sound) sit on one compact row. */
body.tpl-show-selena .guest-review-item > div:nth-child(2) {
    display: flex !important; flex-wrap: wrap; gap: 2px 12px !important; margin: 0 0 6px !important; font-size: 12px !important;
}
body.tpl-show-selena .guest-review-item > div:nth-child(2) > * { margin: 0 !important; }
body.tpl-show-selena .guest-review-item { padding: 12px 14px !important; }

/* Gallery: one swipeable row instead of a tall grid. */
body.tpl-show-selena .photo-grid {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
    scrollbar-width: thin; scrollbar-color: rgba(237, 196, 106, .5) transparent;
}
body.tpl-show-selena .photo-grid img { flex: 0 0 calc(25% - 8px); aspect-ratio: 3 / 2; object-fit: cover; scroll-snap-align: start; }

/* Duplicates: the trust row is already at the top of the page. */
body.tpl-show-selena .sidebar-section:has(> .trust-badges) { display: none; }

@media (max-width: 768px) {
    body.tpl-show-selena .photo-grid img { flex-basis: 72%; }
    /* Social icons are in the footer too. */
    body.tpl-show-selena .sidebar-section:has(> .show-social-links) { display: none; }
    body.tpl-show-selena .sel-cal-folded .mini-calendars-wrap { display: none; }
    body.tpl-show-selena .sel-cal-folded { text-align: center; }
    body.tpl-show-selena .sel-cal-folded .sel-more { margin-top: 0; }
}

/* "More Dates" tucked into the date grid (Pete 10/17): the buttons' wrapper steps out of the box tree so the
   link becomes the next grid cell, drawn as a quieter outline tile. Desktop; phones keep their own layout. */
@media (min-width: 769px) {
    .sel-dates .hero-dates-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 560px; }
    .sel-dates .hero-dates-group > .hero-date-buttons { display: contents; }
    body.tpl-show.tpl-show-selena .sel-dates .hero-more-dates {
        display: flex; align-items: center; justify-content: center; align-self: stretch; height: auto; margin: 0; min-height: 3.25rem; box-sizing: border-box;
        border: 1px dashed rgba(237, 196, 106, .55); border-radius: 14px; background: transparent; text-decoration: none;
        font: 700 15px/1.2 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--sq-gold);
    }
    body.tpl-show.tpl-show-selena .sel-dates .hero-more-dates:hover { border-style: solid; background: rgba(237, 196, 106, .1); color: var(--sq-gold-hi); }
    body.tpl-show.tpl-show-selena .sel-dates .hero-more-dates::after { content: ' \2192'; margin-left: 6px; }
}

/* Phones (Pete 10/17: "Pegasus Showroom is just floating"): the venue badge leaves its corner and becomes a
   captioned line under the trust row: "Live at the [Pegasus logo]". */
@media (max-width: 768px) {
    .sel-hero--dates .sel-dates { padding-bottom: 6px; }
    .sel-hero--dates .sel-band {
        position: relative; right: auto; bottom: auto; z-index: 2; margin: 0; min-height: 0;
        display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px 14px;
        border-top: 1px solid rgba(237, 196, 106, .18);
        background: linear-gradient(180deg, rgba(13, 6, 20, .9), rgba(13, 6, 20, .96));
    }
    .sel-hero--dates .sel-band::before {
        content: 'Live at the'; font: italic 400 17px/1 'Playfair Display', Georgia, serif; color: var(--sq-ink-2);
    }
    html[lang="es"] .sel-hero--dates .sel-band::before { content: 'En vivo en el'; }
    .sel-hero--dates .sel-venue-badge { width: 92px; height: 46px; }
}

/* =================================================================================================
   VIDEO + PHOTOS IN ONE CARD (Pete 10/17, preview). Built by the script in show-hero.blade.php from the
   page's sizzle-reel and gallery sections. Overrides the earlier swipe-row gallery.
   ================================================================================================= */
.sel-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sel-media-row { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.sel-media-video { border-radius: 12px; overflow: hidden; }
body.tpl-show-selena .sel-media .photo-grid {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px;
    overflow: visible; padding: 0; position: relative;
}
/* Desktop: the photos take the video's height (size containment keeps them from stretching the row). */
@media (min-width: 769px) { body.tpl-show-selena .sel-media .photo-grid { contain: size; } }
body.tpl-show-selena .sel-media .photo-grid img {
    width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; cursor: zoom-in; border-radius: 10px;
}
body.tpl-show-selena .sel-media .photo-grid img:nth-of-type(n+5) { display: none; }
/* The "+N" tile sits on top of the 4th photo: both pinned to the same cell. */
body.tpl-show-selena .sel-media .photo-grid img:nth-of-type(4) { grid-row: 2; grid-column: 2; }
.sel-photos-more {
    grid-row: 2; grid-column: 2; z-index: 1; border: 0; border-radius: 10px; cursor: pointer;
    background: rgba(13, 6, 20, .62); color: var(--sq-gold-hi); backdrop-filter: blur(1px);
    font: 800 26px/1 'Playfair Display', Georgia, serif; letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px rgba(237, 196, 106, .55);
}
.sel-photos-more:hover { background: rgba(13, 6, 20, .45); }
@media (max-width: 768px) {
    .sel-media-row { grid-template-columns: 1fr; gap: 8px; }
    body.tpl-show-selena .sel-media .photo-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; height: auto; gap: 6px; }
    body.tpl-show-selena .sel-media .photo-grid img { aspect-ratio: 1 / 1; height: auto; border-radius: 8px; }
    .sel-photos-more { grid-row: 1; grid-column: 4; font-size: 20px; border-radius: 8px; }
    body.tpl-show-selena .sel-media .photo-grid img:nth-of-type(4) { grid-row: 1; grid-column: 4; }
}

/* Photo viewer. */
.sel-viewer { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(8, 3, 12, .94); }
.sel-viewer[hidden] { display: none; }
.sel-viewer img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 0 0 1px rgba(237, 196, 106, .4), 0 20px 60px rgba(0, 0, 0, .6); }
.sel-viewer button { position: absolute; border: 0; background: rgba(13, 6, 20, .6); color: var(--sq-gold, #edc46a); cursor: pointer; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(237, 196, 106, .5); }
.sel-viewer-close { top: 14px; right: 14px; width: 44px; height: 44px; font: 400 30px/1 sans-serif; }
.sel-viewer-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font: 400 34px/1 sans-serif; }
.sel-viewer-prev { left: 12px; }
.sel-viewer-next { right: 12px; }
.sel-viewer-count { position: absolute; bottom: 16px; left: 0; right: 0; margin: 0; text-align: center; color: #e2d1e6; font: 600 13px/1 'Montserrat', sans-serif; letter-spacing: .14em; }

/* Menu: one face on every queenselena.com page (Pete 10/17: "menu font changes through the pages"). The site's
   own header font setting was winning on the show and Spanish pages; selena-page.css uses the same values. */
body.tpl-show.tpl-show-selena .site-header :is(.nav-links a, .nav-links .nav-dropdown-toggle, .nav-dropdown-item) {
    font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; font-size: 15px !important;
    letter-spacing: .02em !important; text-transform: uppercase !important;
}

/* Desktop, a regular (non cut-out) photo (Pete 10/17 picked the jacket-wave studio shot, 3:2 on black): the slim
   photo column cropped it to a slice. The whole photo now stands as tall as the cut-out does, centred on the column
   with her face (~57% across these studio shots) in the middle; its black left side fades into the stage so nothing
   sits under the date buttons, and the bottom fades behind the tiles. */
@media (min-width: 1025px) {
    .sel-hero--dates .sel-photo:not(.sel-photo--cutout) img {
        top: -4%; left: 50%; right: auto; bottom: auto; width: auto; height: 118%; max-width: none;
        transform: translateX(-57%); object-fit: contain;
        /* Pete: no black block to her right. An oval around her lets the photo's black studio background fade
           into the stage on every side (raised hand kept), plus the bottom fade behind the tiles. */
        -webkit-mask-image: radial-gradient(ellipse 36% 64% at 53% 44%, #000 58%, transparent 100%), linear-gradient(180deg, #000 76%, transparent 100%);
        -webkit-mask-composite: source-in; mask-composite: intersect;
        mask-image: radial-gradient(ellipse 36% 64% at 53% 44%, #000 58%, transparent 100%), linear-gradient(180deg, #000 76%, transparent 100%);
    }
}