/* Floodlit — Ticketscore.net homepage design system.
   Dark editorial, condensed display, acid-lime signature.
   Used site-wide via layout.twig; standalone on ticketscore.net/ + /search. */

/* Anton — SIL OFL. Impact-alternative loaded so mobile devices (iOS Safari,
   Android without a bundled Impact) get a consistent condensed display
   face. Desktops with real Impact installed still use Impact first (which
   gives the "nested-letter" hallucination that makes the wordmark
   distinctive). font-display: swap prevents any flash of invisible text. */
@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/Anton-Regular.ttf') format('truetype');
}

/* Nova Square — PT's distinctive display face. Self-hosted (was fetched
   from fonts.gstatic.com) to eliminate the visible FOUT flash on
   homepage load: Google Fonts routed via two origins (googleapis for
   CSS + gstatic for the WOFF2), so even with preload the fonts
   arrived AFTER first paint on cold visits and the branded face
   swapped in visibly over the Inter fallback (Siggi 2026-08-26).
   Same-origin WOFF2 + <link rel=preload as=font> in layout.twig makes
   the font available before the browser needs it. Latin + latin-ext
   subsets cover every Icelandic character. font-display: swap kept as
   the belt-and-braces fallback — with same-origin caching + preload
   there's virtually no window where the swap would be visible. */
@font-face {
    font-family: 'Nova Square';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/nova-square-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nova Square';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/nova-square-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Visually-hidden utility for screen readers + SEO anchors (semantic h1s
   that shouldn't compete with the visual hero). Standard a11y pattern. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------- Site-wide shell + Tailwind compat --------
   When body has .fl-shell, Tailwind's slate palette is remapped to the
   Floodlit dark palette so existing page templates keep working without
   per-file changes. Scoped to .fl-shell so /hq admin stays light.        */

body.fl-shell {
    background: #0a0d10;
    color: #eef1f5;
}
body.fl-shell .bg-white              { background: #14181f; }
body.fl-shell .bg-slate-50           { background: #0a0d10; }
body.fl-shell .bg-slate-100          { background: #1c222b; }
body.fl-shell .bg-slate-200          { background: #262d38; }

body.fl-shell .text-slate-900,
body.fl-shell .text-slate-800,
body.fl-shell .text-slate-700        { color: #eef1f5; }
body.fl-shell .text-slate-600,
body.fl-shell .text-slate-500,
body.fl-shell .text-slate-400        { color: #7a8494; }

body.fl-shell .border,
body.fl-shell .border-slate-100,
body.fl-shell .border-slate-200,
body.fl-shell .border-slate-300      { border-color: #262d38; }

body.fl-shell .divide-slate-100 > * + *,
body.fl-shell .divide-slate-200 > * + * { border-color: #262d38; }

body.fl-shell .hover\:bg-slate-50:hover,
body.fl-shell .hover\:bg-slate-100:hover { background: #1c222b; }

body.fl-shell .hover\:text-slate-600:hover,
body.fl-shell .hover\:text-slate-700:hover,
body.fl-shell .hover\:text-slate-800:hover,
body.fl-shell .hover\:text-slate-900:hover { color: var(--accent); }

/* Dark hero/cta blocks that were already dark stay dark, only rounding/glow tweak. */
body.fl-shell .bg-slate-900          { background: #0a0d10; }
body.fl-shell .bg-slate-950          { background: #050709; }

/* Shadows disappear on dark grounds — swap for a subtle stacked shadow. */
body.fl-shell .shadow,
body.fl-shell .shadow-sm,
body.fl-shell .shadow-md,
body.fl-shell .shadow-lg,
body.fl-shell .shadow-xl             { box-shadow: 0 6px 24px rgba(0,0,0,0.4); }

/* Rings + focus states — recolour to accent. */
body.fl-shell .ring-slate-200,
body.fl-shell .ring-slate-300        { --tw-ring-color: #262d38; }
body.fl-shell input:focus,
body.fl-shell select:focus,
body.fl-shell textarea:focus         { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Inputs — dark surface with visible border. */
body.fl-shell input[type="text"],
body.fl-shell input[type="email"],
body.fl-shell input[type="password"],
body.fl-shell input[type="number"],
body.fl-shell input[type="search"],
body.fl-shell input[type="tel"],
body.fl-shell input[type="url"],
body.fl-shell input[type="date"],
body.fl-shell input[type="datetime-local"],
body.fl-shell select,
body.fl-shell textarea {
    background: #14181f;
    color: #eef1f5;
    border-color: #262d38;
}
body.fl-shell input::placeholder,
body.fl-shell textarea::placeholder  { color: #4b5361; }

/* Primary buttons that used bg-slate-900 → accent CTA. */
body.fl-shell .bg-gradient-to-r      { background: linear-gradient(135deg, #14181f, #1c222b); }

/* Currency picker in nav — inherits our select overrides, but strip border/bg for chrome look. */
.fl-currency select {
    background: transparent !important;
    border: 0 !important;
    color: #eef1f5;
    padding: 4px 20px 4px 4px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237a8494' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 10px auto !important;
}
.fl-currency select:hover { color: var(--accent); }
.fl-currency select option { background: #14181f; color: #eef1f5; }

/* Cart button in nav — accent pill matching .fl-sell */
.fl-cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #0a0d10;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.fl-cart svg { width: 14px; height: 14px; }
.fl-cart.hidden { display: none; }

/* Full footer (site-wide) — richer than the compact home footer.
   The single-line footer used inside home.twig content is .fl-footer (below). */
.fl-footer-full {
    background: #14181f;
    border-top: 1px solid #262d38;
    margin-top: 64px;
    color: #7a8494;
    font-size: 14px;
    line-height: 1.55;
}
.fl-footer-cols {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    padding: 48px 32px 32px;
}
.fl-footer-cols p { color: #7a8494; margin: 8px 0 0; max-width: 40em; }
.fl-logo-footer {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    line-height: 1;
}
.fl-logo-footer .fl-logo-img {
    height: 42px;
}
.fl-footer-heading {
    color: #eef1f5;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}
.fl-footer-full ul { margin: 0; padding: 0; list-style: none; }
.fl-footer-full li { padding: 5px 0; }
.fl-footer-full a { transition: color 0.15s; }
.fl-footer-full a:hover { color: var(--accent); }
.fl-footer-legal {
    border-top: 1px solid #262d38;
    padding: 18px 32px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.fl-footer-legal p { font-size: 12px; margin: 0; }
.fl-footer-badge {
    display: inline-block;
    flex: none;
}
.fl-footer-badge img {
    /* Sized to match premiertrips.is footer badge (~130px). */
    height: 130px;
    width: auto;
    display: block;
}

@media (max-width: 720px) {
    .fl-footer-cols { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px 20px; }
    .fl-footer-legal { padding: 16px 20px; }
}

/* -------- FanSure — the buyer-protection brand mark --------
   Escrow-backed guarantee. Renders in three sizes:
   .fl-fansure-sm   — card corner badge (11px)
   .fl-fansure      — inline pill (13px, most placements)
   .fl-fansure-lg   — hero / landing-page mark (24px+)                  */

.fl-fansure,
.fl-fansure-sm,
.fl-fansure-lg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: Impact, 'Haettenschweiler', 'Franklin Gothic Medium', sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 400;
    line-height: 1;
}
.fl-fansure { font-size: 13px; }
.fl-fansure-sm { font-size: 10px; letter-spacing: 0.14em; gap: 4px; }
.fl-fansure-lg { font-size: 28px; gap: 10px; }
.fl-fansure-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex: none;
}
.fl-fansure    .fl-fansure-icon { width: 14px; height: 14px; }
.fl-fansure-sm .fl-fansure-icon { width: 11px; height: 11px; }
.fl-fansure-lg .fl-fansure-icon { width: 26px; height: 26px; }
.fl-fansure .fs-sure,
.fl-fansure-sm .fs-sure,
.fl-fansure-lg .fs-sure { color: var(--accent); }
.fl-fansure .fs-fan,
.fl-fansure-sm .fs-fan,
.fl-fansure-lg .fs-fan { color: inherit; }

/* Filled chip variant (for use on photo backgrounds) */
.fl-fansure-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0a0d10;
    padding: 6px 10px;
    font-family: Impact, sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1;
}
.fl-fansure-chip .fl-fansure-icon { width: 12px; height: 12px; color: var(--accent); }
.fl-fansure-chip .fs-fan { color: #eef1f5; }
.fl-fansure-chip .fs-sure { color: var(--accent); }

/* Position — bottom-right of card photo, subtle trust anchor. */
.fl-card-fansure,
.fl-match-fansure {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
}

/* -------- Content pages (FAQ, how-it-works, blog, contact, static) -------- */

/* Page hero (narrower + calmer than home hero, one accent light) */
.fl-page-hero {
    padding: 72px 32px 56px;
    border-bottom: 1px solid #262d38;
    background: linear-gradient(180deg, #0a0d10 0%, #050709 100%);
    position: relative;
    overflow: hidden;
}
.fl-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 300px at 15% 30%, rgba(217, 255, 63, 0.06), transparent 60%),
        repeating-linear-gradient(90deg, rgba(217, 255, 63, 0.025) 0 1px, transparent 1px 44px);
    pointer-events: none;
}
.fl-page-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; }
.fl-page-eyebrow {
    display: inline-block;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: var(--accent);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 400;
}
.fl-page-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: clamp(44px, 6vw, 84px);
    line-height: 0.95;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 20px;
    font-weight: 400;
    color: #eef1f5;
    text-wrap: balance;
}
.fl-page-lede {
    font-size: 18px;
    color: #7a8494;
    max-width: 640px;
    line-height: 1.5;
    margin: 0;
}

/* Content container + sections */
.fl-content { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.fl-content-section {
    padding: 56px 0;
    border-bottom: 1px solid #262d38;
}
.fl-content-section:last-child { border-bottom: 0; }
.fl-content-section > .fl-h2:first-child { margin-top: 0; }

/* ==================== TEAMS INDEX ==================== */
.fl-empty {
    background: #14181f;
    border: 1px dashed #262d38;
    padding: 56px 24px;
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.fl-empty h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0 0 8px;
    font-weight: 400;
    color: #eef1f5;
}
.fl-empty p { color: #7a8494; margin: 0; font-size: 14px; }

.fl-teams-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 0 32px;
    border-bottom: 1px solid #262d38;
    margin-bottom: 40px;
}
.fl-teams-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #14181f;
    border: 1px solid #262d38;
    color: #eef1f5;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.fl-teams-chip:hover { border-color: var(--accent); color: var(--accent); }
.fl-teams-chip-count {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    padding: 2px 6px;
    background: rgba(217, 255, 63, 0.08);
    border-radius: 2px;
}

.fl-teams-group { margin-bottom: 56px; scroll-margin-top: 40px; }
.fl-teams-group:last-child { margin-bottom: 0; }
.fl-teams-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #262d38;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.fl-teams-group-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0;
    font-weight: 400;
}
.fl-teams-group-count {
    font-size: 12px;
    color: #7a8494;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
}

.fl-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.fl-team-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 16px;
    background: #14181f;
    border: 1px solid #262d38;
    color: #eef1f5;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
    min-height: 92px;
}
.fl-team-tile:hover {
    border-color: var(--accent);
    background: #181c24;
}
.fl-team-tile-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-weight: 700;
    color: #eef1f5;
    text-transform: none;
}
.fl-team-tile-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: auto;
}
.fl-team-tile-count {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}
.fl-team-tile-next {
    font-size: 12px;
    color: #7a8494;
}

@media (max-width: 640px) {
    .fl-teams-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .fl-team-tile-name { font-size: 17px; }
    .fl-teams-group-title { font-size: 24px; }
}
.fl-h2 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 28px;
    font-weight: 400;
    color: #eef1f5;
}
.fl-h2 .accent { color: var(--accent); }
.fl-body {
    font-size: 16px;
    line-height: 1.65;
    color: #b8c0cc;
    max-width: 640px;
}
.fl-body p { margin: 0 0 16px; }
.fl-body p:last-child { margin: 0; }
.fl-body strong { color: #eef1f5; }
.fl-body a {
    color: var(--accent);
    border-bottom: 1px solid rgba(217, 255, 63, 0.3);
    transition: border-color 0.15s;
}
.fl-body a:hover { border-color: var(--accent); }
.fl-body code {
    font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    background: #14181f;
    border: 1px solid #262d38;
    padding: 1px 6px;
    font-size: 0.9em;
    color: #eef1f5;
}

/* Numbered step list (how-it-works) */
.fl-steps {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fl-steps li {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 24px;
    align-items: baseline;
}
.fl-step-num {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 64px;
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    text-align: right;
    padding-top: 6px;
}
.fl-step-content h3 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: #eef1f5;
}
.fl-step-content p {
    font-size: 15px;
    line-height: 1.55;
    color: #b8c0cc;
    margin: 0;
    max-width: 60ch;
}

/* Feature card grid (benefit tiles) */
.fl-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.fl-feature {
    background: #14181f;
    border: 1px solid #262d38;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s;
}
.fl-feature:hover { border-color: var(--accent); }
.fl-feature h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 4px;
    font-weight: 400;
    color: #eef1f5;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fl-feature h3::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--accent);
    transform: rotate(45deg);
    flex: none;
}
.fl-feature p {
    font-size: 14px;
    line-height: 1.55;
    color: #b8c0cc;
    margin: 0;
}

/* FAQ accordion (native <details>) */
.fl-faq { max-width: 800px; }
.fl-faq details {
    border-bottom: 1px solid #262d38;
    padding: 20px 0;
}
.fl-faq details:first-of-type { border-top: 1px solid #262d38; }
.fl-faq summary {
    list-style: none;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: #eef1f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 4px 0;
    transition: color 0.15s;
}
.fl-faq summary:hover { color: var(--accent); }
.fl-faq summary::-webkit-details-marker { display: none; }
.fl-faq summary::after {
    content: '+';
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 26px;
    color: var(--accent);
    line-height: 1;
    flex: none;
    transition: transform 0.2s;
}
.fl-faq details[open] summary::after { content: '−'; }
.fl-faq-body {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.65;
    color: #b8c0cc;
}
.fl-faq-body p { margin: 0 0 12px; }
.fl-faq-body p:last-child { margin: 0; }
.fl-faq-body a { color: var(--accent); border-bottom: 1px solid rgba(217, 255, 63, 0.3); }
.fl-faq-body a:hover { border-color: var(--accent); }
.fl-faq-group + .fl-faq-group { margin-top: 40px; }
.fl-faq-group-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a8494;
    margin: 0 0 4px;
    font-weight: 400;
}

/* Blog index grid */
.fl-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.fl-blog-card {
    background: #14181f;
    border: 1px solid #262d38;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s, transform 0.15s;
    text-decoration: none;
}
.fl-blog-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.fl-blog-card-meta {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 400;
}
.fl-blog-card h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
    color: #eef1f5;
}
.fl-blog-card p {
    font-size: 14px;
    line-height: 1.55;
    color: #b8c0cc;
    margin: 0;
}
.fl-blog-card-cta {
    margin-top: auto;
    font-size: 13px;
    color: #eef1f5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Blog article body */
.fl-article {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 32px 40px;
}
.fl-article-back {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    margin-bottom: 24px;
    transition: color 0.15s;
}
.fl-article-back:hover { color: var(--accent); }
.fl-article-meta {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
    font-weight: 400;
}
.fl-article-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 20px;
    font-weight: 400;
    color: #eef1f5;
    text-wrap: balance;
}
.fl-article-byline {
    color: #7a8494;
    font-size: 14px;
    letter-spacing: 0.02em;
    margin: 0 0 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #262d38;
}
.fl-article-body {
    font-size: 17px;
    line-height: 1.7;
    color: #b8c0cc;
}
.fl-article-body h2 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 40px 0 16px;
    font-weight: 400;
    color: #eef1f5;
}
.fl-article-body h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 32px 0 12px;
    color: #eef1f5;
}
.fl-article-body p { margin: 0 0 20px; }
.fl-article-body strong { color: #eef1f5; }
.fl-article-body a {
    color: var(--accent);
    border-bottom: 1px solid rgba(217, 255, 63, 0.3);
}
.fl-article-body a:hover { border-color: var(--accent); }
.fl-article-body ul,
.fl-article-body ol { padding-left: 22px; margin: 0 0 20px; }
.fl-article-body li { margin-bottom: 8px; }
.fl-article-body blockquote {
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px 20px;
    margin: 24px 0;
    color: #eef1f5;
    font-style: italic;
}
.fl-article-nav {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid #262d38;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.fl-article-nav-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}
.fl-article-nav-item:last-child { text-align: right; }
.fl-article-nav-item .label {
    font-family: Impact, sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 400;
}
.fl-article-nav-item a {
    color: #eef1f5;
    font-weight: 600;
    transition: color 0.15s;
}
.fl-article-nav-item a:hover { color: var(--accent); }

/* Contact tiles */
.fl-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.fl-contact-tile {
    background: #14181f;
    border: 1px solid #262d38;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s;
}
.fl-contact-tile:hover { border-color: var(--accent); }
.fl-contact-tile-label {
    font-family: Impact, sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    margin-bottom: 4px;
    font-weight: 400;
}
.fl-contact-tile-value {
    font-size: 20px;
    font-weight: 700;
    color: #eef1f5;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.fl-contact-tile-value a { color: var(--accent); }
.fl-contact-tile p {
    font-size: 14px;
    line-height: 1.55;
    color: #b8c0cc;
    margin: 0;
}

/* Inline CTA button */
.fl-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Consumes brand-configured button vars (set in layout.twig).
       Fallbacks preserve pre-2026-08-11 behaviour when a brand hasn't
       tweaked its button config. */
    background: var(--btn-primary-bg, var(--accent));
    color: var(--btn-primary-fg, #0a0d10);
    padding: var(--btn-padding, 12px 22px);
    border-radius: var(--btn-radius, 4px);
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: var(--btn-font-size, 16px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.15s, background 0.15s, color 0.15s, filter 0.15s;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid transparent;   /* aligns box-sizing with .fl-btn-ghost */
}
.fl-btn:hover { transform: translateY(-1px); filter: brightness(0.95); }

.fl-btn-ghost {
    background: var(--btn-secondary-bg, transparent);
    color: var(--btn-secondary-fg, #eef1f5);
    border: 1px solid var(--btn-secondary-border, #262d38);
}
.fl-btn-ghost:hover {
    /* Only re-tint on hover when the brand hasn't set an explicit secondary
       colour — otherwise honour their choice and keep the hover feedback
       to the same lift + brightness treatment as primary. */
    filter: brightness(1.1);
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    .fl-page-hero { padding: 56px 20px 40px; }
    .fl-content { padding: 0 20px; }
    .fl-content-section { padding: 40px 0; }
    .fl-h2 { font-size: 32px; }
    .fl-steps li { grid-template-columns: 56px 1fr; gap: 16px; }
    .fl-step-num { font-size: 44px; }
    .fl-features { grid-template-columns: 1fr; }
    .fl-blog-grid { grid-template-columns: 1fr; }
    .fl-article { padding: 40px 20px 32px; }
    .fl-article-nav { grid-template-columns: 1fr; }
    .fl-article-nav-item:last-child { text-align: left; }
    .fl-contact-grid { grid-template-columns: 1fr; }
}

/* -------- Cart / checkout page (/cart) -------- */

.fl-mono {
    font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.fl-cart-loading, .fl-cart-empty {
    padding: 60px 24px;
    text-align: center;
    color: #7a8494;
}
.fl-cart-empty {
    background: #14181f;
    border: 1px dashed #262d38;
}
.fl-cart-empty h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 26px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0 0 8px;
    font-weight: 400;
}
.fl-cart-empty p { margin: 0; font-size: 14px; }

/* Grid: single "shop card" (items + totals + note + Netgíró + fansure)
   on the left, buyer form on the right. Was a three-area layout with a
   separate sidebar aside — collapsed 2026-08-28 so there's one payment
   panel, not three stacked cards. Mobile stacks items then form. */
.fl-cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas: "items form";
    gap: 24px;
    align-items: flex-start;
}
.fl-cart-grid.hidden { display: none; }
.fl-cart-items-block { grid-area: items; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fl-cart-form-block  { grid-area: form; min-width: 0; }
/* Legacy classes kept as no-ops so any stale references don't break. */
.fl-cart-side, .fl-cart-main, .fl-cart-sticky { display: contents; }

.fl-cart-block {
    /* Matches the event-page panel group (filter box / listings / seatmap /
       netgíró / buy panel) so the whole storefront reads as one system. */
    background: var(--panel-card-bg, #14181f);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px;
}

/* Deposit split — sits under the running total, visually detached with
   a top border so it reads as "here's the schedule" not "another line".  */
.fl-cart-deposit {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fl-cart-deposit.hidden { display: none; }
.fl-cart-line-deposit strong { color: #eef1f5; }
.fl-cart-line-balance { font-size: 12px; opacity: 0.75; }
.fl-cart-block h2, .fl-cart-block-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 20px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0 0 16px;
    font-weight: 400;
}
.fl-cart-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.fl-cart-block-head h2 { margin: 0; }
.fl-cart-block-head span {
    font-size: 12px;
    color: #7a8494;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fl-cart-items { display: flex; flex-direction: column; gap: 10px; }
/* Cart item — flat block layout with a small details grid at the bottom.
   min-width:0 on every level lets long titles ellipsis instead of stretching
   the card past the viewport (Dean 2026-08-28). */
.fl-cart-item {
    position: relative;
    min-width: 0;
    background: #0a0d10;
    border: 1px solid #262d38;
    padding: 14px 44px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fl-cart-items { min-width: 0; }
.fl-cart-items-block { min-width: 0; }

.fl-cart-item-title {
    /* Responsive: 13px on the narrowest phones, up to 15px on desktop.
       Ellipsis kicks in if the fixture name is still too long at 13px. */
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 700;
    color: #eef1f5;
    letter-spacing: -0.005em;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.fl-cart-item-meta {
    font-size: 12px;
    color: #7a8494;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Details row: [category+section stacked, flex:1] | [qty] | [price+per
   stacked, right-aligned]. Flex layout so textcol expands and pushes the
   qty + price cluster to the right of the card (Dean 2026-08-28). */
.fl-cart-item-details {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    min-width: 0;
}
.fl-cart-item-textcol {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fl-cart-item-category {
    font-size: 13px;
    color: #eef1f5;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fl-cart-item-section {
    font-size: 12px;
    color: #7a8494;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fl-cart-item-details .cart-qty { flex-shrink: 0; }
.fl-cart-item-pricecol {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.fl-cart-item-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fl-cart-item-per {
    font-size: 11px;
    color: #7a8494;
    text-transform: lowercase;
}
.fl-cart-item select.cart-qty {
    background: #14181f;
    border: 1px solid #262d38;
    color: #eef1f5;
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}
.fl-cart-item-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    text-align: right;
    min-width: 90px;
}
.fl-cart-item-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    background: transparent;
    border: 0;
    color: #ff4d3d;
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
}
.fl-cart-item-remove:hover { color: #e2352c; }

/* Form fields */
.fl-cart-form { display: flex; flex-direction: column; gap: 16px; }
.fl-cart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fl-cart-field { display: flex; flex-direction: column; gap: 6px; }
.fl-cart-field label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
}
.fl-cart-field input {
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.fl-cart-field input:focus { border-color: var(--accent); }
.fl-cart-field input::placeholder { color: #4b5361; }
.fl-cart-hint {
    font-size: 11px;
    color: #7a8494;
    margin: 0;
    line-height: 1.4;
}
.fl-cart-error {
    background: rgba(255, 77, 61, 0.1);
    border: 1px solid rgba(255, 77, 61, 0.3);
    color: #ff9285;
    padding: 10px 12px;
    font-size: 12px;
}

/* Phone */
.fl-phone { display: flex; }
.fl-phone-country {
    position: relative;
    display: flex;
    align-items: center;
}
.fl-phone-country .fi {
    position: absolute;
    left: 10px;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}
.fl-phone-country select {
    padding: 10px 24px 10px 38px;
    background: #0a0d10;
    border: 1px solid #262d38;
    border-right: 0;
    color: #eef1f5;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}
.fl-phone input {
    flex: 1;
    min-width: 0;
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.fl-phone input:focus { border-color: var(--accent); }

/* Toggle switches */
.fl-cart-toggles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #262d38;
}
.fl-cart-toggle {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 12px;
    color: #b8c0cc;
    line-height: 1.5;
    cursor: pointer;
}
.fl-cart-toggle a { color: var(--accent); }
.fl-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex: none;
    margin-top: 2px;
}
.fl-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.fl-switch > span {
    position: absolute;
    inset: 0;
    background: #262d38;
    border-radius: 999px;
    transition: background 0.15s;
}
.fl-switch > span::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #eef1f5;
    border-radius: 50%;
    transition: transform 0.15s;
}
.fl-switch input:checked + span { background: var(--accent); }
.fl-switch input:checked + span::before { transform: translateX(16px); background: #0a0d10; }

.fl-cart-submit { width: 100%; justify-content: center; margin-top: 8px; }
.fl-cart-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Order summary */
.fl-cart-summary { display: flex; flex-direction: column; gap: 8px; }
.fl-cart-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    color: #b8c0cc;
    line-height: 1.4;
    align-items: baseline;
}
.fl-cart-line small { color: #4b5361; font-size: 11px; display: block; margin-top: 2px; }
.fl-cart-line.hidden { display: none; }
.fl-cart-line-discount { color: var(--accent); }
.fl-cart-total {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid #262d38;
}
.fl-cart-total .fl-mono { color: var(--accent); font-family: Impact, sans-serif; letter-spacing: 0.02em; }

/* Voucher */
.fl-cart-voucher {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #262d38;
}
.fl-cart-voucher-toggle {
    background: transparent;
    border: 0;
    color: #eef1f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
}
.fl-cart-voucher-toggle:hover { color: var(--accent); }
.fl-cart-voucher-toggle svg { width: 14px; height: 14px; color: #7a8494; transition: transform 0.15s; }
.fl-cart-voucher-panel { margin-top: 12px; }
.fl-cart-voucher-panel.hidden { display: none; }
.fl-cart-voucher-panel form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fl-cart-voucher-panel input {
    flex: 1;
    min-width: 100px;
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    padding: 8px 10px;
    font: inherit;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    text-transform: uppercase;
    outline: none;
}
.fl-cart-voucher-panel input:focus { border-color: var(--accent); }
.fl-cart-voucher-panel button {
    background: var(--accent);
    border: 0;
    color: #0a0d10;
    padding: 8px 14px;
    font: inherit;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.fl-cart-voucher-panel button.ghost {
    background: transparent;
    border: 1px solid #262d38;
    color: #eef1f5;
}
.fl-cart-voucher-panel button.ghost.hidden,
.fl-cart-voucher-panel button.hidden { display: none; }
.fl-voucher-msg {
    margin-top: 8px;
    font-size: 12px;
}
.fl-voucher-msg.ok { color: var(--accent); }
.fl-voucher-msg.err { color: #ff9285; }
.fl-voucher-msg.warn { color: #f5b423; }
.fl-voucher-msg.hidden { display: none; }

/* Bundle offer */
.fl-cart-bundle {
    background: linear-gradient(135deg, rgba(217, 255, 63, 0.05), rgba(217, 255, 63, 0));
    border: 1px solid rgba(217, 255, 63, 0.3);
    padding: 20px 22px;
}
.fl-cart-bundle.hidden { display: none; }
.fl-cart-bundle-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.fl-cart-bundle h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 20px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0 0 8px;
    font-weight: 400;
}
.fl-cart-bundle p {
    font-size: 12px;
    color: #b8c0cc;
    margin: 0 0 12px;
    line-height: 1.5;
}
.fl-cart-bundle-note {
    font-size: 11px;
    color: #7a8494;
    font-style: italic;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}
.fl-cart-bundle .fl-btn { font-size: 13px; padding: 10px 16px; }
.fl-cart-bundle #bundle-offer-applied.hidden,
.fl-cart-bundle #bundle-offer-cta.hidden { display: none; }

/* FanSure trust block */
.fl-cart-fansure { }
.fl-cart-fansure-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
}
.fl-cart-fansure-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12px;
    color: #b8c0cc;
    line-height: 1.5;
}
.fl-cart-fansure-body strong { color: #eef1f5; font-weight: 600; display: block; margin-bottom: 2px; }

.hidden { display: none; }

@media (max-width: 900px) {
    /* Stack: single merged shop card, then buyer form. */
    .fl-cart-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "items" "form";
        gap: 14px;
    }
    .fl-cart-block { padding: 14px; min-width: 0; }
    .fl-cart-items-block { gap: 14px; }
    .fl-cart-item { padding: 12px 40px 12px 14px; }
    .fl-cart-item-details { column-gap: 10px; }
    .fl-cart-row { grid-template-columns: 1fr; }
}

/* Inline title strip in place of the old page hero. Was 180px+ of vertical
   real estate (padding + huge Impact title + eyebrow + lede) — replaced
   with a single 28px row that reads "your basket · continue shopping"
   inline. Frees the top half of the first mobile screen for actual
   payment content (Dean 2026-08-28). */
.fl-cart-container { padding-top: 20px; padding-bottom: 40px; }
.fl-cart-topline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.fl-cart-h1 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 24px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0;
    font-weight: 400;
}
@media (max-width: 900px) {
    .fl-cart-container { padding-top: 12px; padding-bottom: 28px; }
    .fl-cart-h1 { font-size: 20px; }
    .fl-cart-topline { margin-bottom: 12px; }
}

/* Totals inside the merged items-block: the item card above already has
   its own bottom border, so no separator here — a second one just gave a
   visual double-line (Dean 2026-08-28). */
.fl-cart-totals {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fl-cart-totals .fl-cart-summary { display: flex; flex-direction: column; gap: 6px; }
.fl-cart-line-muted { font-size: 13px; opacity: 0.72; }
.fl-cart-pct { font-weight: 400; opacity: 0.7; margin-left: 3px; }

.fl-cart-summary-note {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    line-height: 1.5;
    color: rgba(238, 241, 245, 0.72);
    margin-top: 0;
    text-align: center;
}
.fl-cart-summary-note strong { color: #f5c17a; font-weight: 600; }
.fl-cart-summary-note p:first-child { margin-top: 0; }
.fl-cart-summary-note p:last-child { margin-bottom: 0; }

/* Netgíró inline — small badge inside the totals block. UPPLIFÐU NÚNA
   on the left, mini logo centred, BORGAÐU SÍÐAR on the right. Was a
   full-card banner (24px padding, 56px logo); now ~44px tall total. */
.fl-netgiro-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.fl-netgiro-inline .fl-netgiro-label {
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(238, 241, 245, 0.62);
    font-weight: 600;
    white-space: nowrap;
}
.fl-netgiro-inline img {
    display: block;
    height: 24px;
    width: auto;
    border-radius: 0 !important;
    flex-shrink: 0;
}
@media (max-width: 400px) {
    .fl-netgiro-inline { gap: 8px; padding: 8px 10px; }
    .fl-netgiro-inline .fl-netgiro-label { font-size: 9.5px; letter-spacing: 0.1em; }
    .fl-netgiro-inline img { height: 20px; }
}

/* Fansure inline: keep the trust badges panel but drop the card chrome
   since it now lives inside the merged items-block. */
.fl-cart-fansure-inline {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* -------- Payment page (/orders/{ref}/pay) -------- */

.fl-pay-frame {
    padding: 12px;
    min-height: 620px;
}
.fl-pay-frame #checkout {
    background: #ffffff;
    min-height: 600px;
}
.fl-pay-loading {
    padding: 80px 24px;
    text-align: center;
    color: #7a8494;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.fl-pay-error {
    padding: 60px 24px;
    text-align: center;
    color: #b8c0cc;
}
.fl-pay-error-mark {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 77, 61, 0.15);
    color: #ff4d3d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}
.fl-pay-error-title {
    font-family: Impact, sans-serif;
    color: #eef1f5;
    font-size: 22px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.fl-pay-error p { max-width: 380px; margin: 0 auto; font-size: 14px; }

.fl-pay-items { display: flex; flex-direction: column; gap: 14px; }
.fl-pay-item {
    padding-bottom: 14px;
    border-bottom: 1px solid #262d38;
}
.fl-pay-item:last-child { border-bottom: 0; padding-bottom: 0; }
.fl-pay-item-title {
    font-size: 14px;
    font-weight: 700;
    color: #eef1f5;
    letter-spacing: -0.005em;
}
.fl-pay-item-meta {
    font-size: 12px;
    color: #7a8494;
    margin-top: 2px;
}
.fl-pay-item-seat {
    font-size: 12px;
    color: #b8c0cc;
    margin-top: 3px;
}
.fl-pay-item-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #b8c0cc;
    margin-top: 6px;
}

/* Hero trust-icons row */
.fl-pay-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px 32px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #262d38;
}
.fl-pay-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.fl-pay-trust-item svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
    flex: none;
    margin-top: 2px;
}
.fl-pay-trust-item > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fl-pay-trust-item strong {
    color: #eef1f5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.fl-pay-trust-item span {
    color: #7a8494;
    font-size: 12px;
}

/* Order reference chip at top of summary */
.fl-pay-ref {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #262d38;
}
.fl-pay-ref-label {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
}
.fl-pay-ref-value {
    font-size: 13px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* -------- Team page fixture list (/team/{slug}) -------- */

.fl-fixture-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fl-fixture-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 16px 20px;
    background: #14181f;
    border: 1px solid #262d38;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.fl-fixture-row:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.fl-fixture-date {
    text-align: center;
    line-height: 1;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: #7a8494;
}
.fl-fixture-date .mo {
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--accent);
    margin-bottom: 4px;
}
.fl-fixture-date .day {
    font-size: 32px;
    color: #eef1f5;
    letter-spacing: 0.005em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}
.fl-fixture-date .dow {
    font-size: 10px;
    letter-spacing: 0.16em;
    color: #4b5361;
}
.fl-fixture-info { min-width: 0; }
.fl-fixture-stage {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
    margin-bottom: 4px;
}
.fl-fixture-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #eef1f5;
    line-height: 1.25;
    margin-bottom: 4px;
}
.fl-fixture-title .vs { color: #7a8494; font-weight: 400; }
.fl-fixture-meta {
    font-size: 12px;
    color: #7a8494;
}
.fl-fixture-price {
    text-align: right;
    min-width: 110px;
}
.fl-fixture-price .from {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
    margin-bottom: 2px;
}
.fl-fixture-price .amount {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    line-height: 1;
    color: var(--accent);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}
.fl-fixture-price .count {
    font-size: 11px;
    color: #7a8494;
}
.fl-fixture-price .empty {
    font-size: 12px;
    color: #7a8494;
}
.fl-fixture-row:hover .fl-fixture-price .empty { color: var(--accent); }

@media (max-width: 640px) {
    .fl-fixture-row {
        grid-template-columns: 56px 1fr;
        gap: 14px;
    }
    .fl-fixture-price { grid-column: 1 / -1; text-align: left; margin-left: 70px; padding-top: 4px; }
    .fl-fixture-date .day { font-size: 26px; }
}

/* -------- Match detail page (/match/{id}/{slug}) -------- */

.fl-detail-hero {
    position: relative;
    padding: 40px 32px 32px;
    border-bottom: 1px solid #262d38;
    background:
        radial-gradient(700px 300px at 20% 30%, rgba(217, 255, 63, 0.05), transparent 60%),
        linear-gradient(180deg, #0a0d10 0%, #050709 100%);
    overflow: hidden;
}
.fl-detail-hero-photo {
    background-size: cover;
    background-position: center;
}
.fl-detail-hero-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 13, 16, 0.5) 0%, rgba(10, 13, 16, 0.85) 100%);
    pointer-events: none;
}
.fl-detail-hero-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 1;
}
.fl-detail-back {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    margin-bottom: 18px;
    transition: color 0.15s;
}
.fl-detail-back:hover { color: var(--accent); }
.fl-detail-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 16px;
}
.fl-detail-eyebrow .dot {
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
}
.fl-detail-title {
    font-family: Impact, 'Haettenschweiler', 'Franklin Gothic Medium', sans-serif;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 28px;
    color: #eef1f5;
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
}
/* Single-title layout for non-versus events (concerts, F1, etc.). Wraps
   long titles at a comfortable measure so lockups like "Formula 1 Spanish
   Grand Prix Madrid 2026 - 3-Day Pass" don't run off the container. */
.fl-detail-title-single {
    font-size: clamp(28px, 4.2vw, 56px);
    line-height: 1;
    max-width: 18ch;
}
.fl-detail-title-single .fl-detail-team {
    text-wrap: balance;
}
.fl-detail-team a { color: inherit; transition: color 0.15s; }
.fl-detail-team a:hover { color: var(--accent); }
.fl-detail-vs { color: var(--accent); font-size: 0.72em; transform: skew(-8deg); }

.fl-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px 40px;
    margin: 0 0 24px;
    padding-top: 20px;
    border-top: 1px solid #262d38;
}
.fl-detail-meta dt {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7a8494;
    margin: 0 0 4px;
    font-weight: 700;
}
.fl-detail-meta dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #eef1f5;
    font-variant-numeric: tabular-nums;
}
.fl-detail-meta dd a { color: inherit; border-bottom: 1px solid #262d38; }
.fl-detail-meta dd a:hover { border-color: var(--accent); color: var(--accent); }
.fl-detail-meta dd.price {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: var(--accent);
    font-size: 22px;
    letter-spacing: 0.02em;
    font-weight: 400;
}
.fl-detail-fansure-link {
    display: inline-block;
    text-decoration: none;
}

/* Filter strip (Tickets needed / Max price) */
/* Netgíró BNPL banner — sits under the seatmap on the event page for
   Icelandic-language brands. Mirrors the horizontal bar from
   premiertrips.is: dark card, small caps labels flanking the logo. */
.fl-netgiro-banner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    /* Enough vertical padding so the wordmark under the N doesn't collide
       with the rounded bottom corner. */
    padding: 24px 24px;
    background: var(--panel-card-bg, #14181f);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: max(var(--brand-radius, 12px), 14px);
    text-decoration: none;
    overflow: visible;
}
.fl-netgiro-left,
.fl-netgiro-right {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(238, 241, 245, 0.60);
    font-weight: 600;
}
.fl-netgiro-left  { text-align: left; }
.fl-netgiro-right { text-align: right; }
.fl-netgiro-logo {
    display: block;
    height: 56px;
    width: auto;
    max-width: none;
}
/* Beat the site-wide `body[data-brand] [class^="fl-"] { border-radius:
   var(--brand-radius) !important }` blanket rule. Bumped from .fl-netgiro-logo
   (0,1,0) to body[data-brand] img.fl-netgiro-logo (0,2,2) so it wins on
   specificity, not just !important tie-breaking. */
body[data-brand] img.fl-netgiro-logo {
    border-radius: 0 !important;
}
@media (max-width: 640px) {
    .fl-netgiro-banner { grid-template-columns: 1fr; text-align: center; gap: 6px; padding: 14px; }
    .fl-netgiro-left, .fl-netgiro-right { text-align: center; }
    .fl-netgiro-logo { margin: 4px auto; }
}

/* --panel-card-bg is now emitted in layout.twig alongside --panel-bg
   (body-scoped) so color-mix() actually resolves the brand's navy —
   scoping it to :root broke variable lookup on the earlier iteration. */

.fl-detail-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
    background: var(--panel-card-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: max(var(--brand-radius, 12px), 14px);
    padding: 22px 28px;
    margin: 24px 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    align-items: center;
}
/* Field labels sit as small caps eyebrows, matching the reference bar. */
.fl-detail-filters .fl-df-field label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(238, 241, 245, 0.55);
    margin-bottom: 8px;
    font-weight: 600;
}
/* Qty picker: pill-shaped, white numeric input, subtle button chrome.
   width:fit-content hugs the [-][N][+] pill instead of stretching the
   dark background across the whole filter cell (looked like a lot of
   empty space after the "hám. N" hint was removed). */
.fl-detail-filters .fl-qty {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 4px;
    border-radius: 999px;
    width: fit-content;
    align-self: start;
}
.fl-detail-filters .fl-qty button {
    width: 32px; height: 32px;
    background: transparent; border: none; color: #eef1f5;
    font-size: 18px; line-height: 1; cursor: pointer;
    border-radius: 999px;
    transition: background 0.15s;
}
.fl-detail-filters .fl-qty button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.10); }
.fl-detail-filters .fl-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.fl-detail-filters .fl-qty input {
    width: 44px; padding: 6px 0; text-align: center;
    background: transparent !important;
    border: none !important;
    color: #eef1f5;
    font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    outline: none !important;
}
.fl-detail-filters .fl-qty-max {
    color: rgba(238, 241, 245, 0.5); font-size: 11px; margin-left: 10px;
}
/* Range input: minimal, accent-tinted thumb — reads as a clean strip
   inside the rounded bar. */
.fl-detail-filters .fl-range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    outline: none;
}
.fl-detail-filters .fl-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); cursor: pointer;
    border: 3px solid var(--panel-bg, #14181f);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.fl-detail-filters .fl-range::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 3px solid var(--panel-bg, #14181f);
}
/* =====================================================================
   SEAT-MAP INLINE — lives in the event detail sidebar, appears only if
   the TSG Access API returns a stored SVG for the venue. Pan (drag) +
   zoom (wheel/buttons). Sections that have live listings are opaque and
   clickable — sections without listings are dimmed. Hover on either a
   listing row or a map section triggers the acid highlight on both sides.
   ===================================================================== */
.fl-seatmap-inline {
    /* Matches the filter card tone so all three side-panels share a look. */
    background: var(--panel-card-bg, #14181f);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fl-seatmap-inline[hidden] { display: none; }
.fl-seatmap-inline-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
}
.fl-seatmap-inline-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #eef1f5;
    font-weight: 400;
    line-height: 1;
}
.fl-seatmap-inline-sub {
    font-size: 11px;
    color: #7a8494;
    margin-top: 4px;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.fl-seatmap-zoom {
    display: inline-flex;
    gap: 4px;
    flex: none;
}
.fl-seatmap-zoom button {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid #262d38;
    color: #eef1f5;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.fl-seatmap-zoom button:hover { border-color: var(--accent); color: var(--accent); }
.fl-seatmap-zoom button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fl-seatmap-inline-canvas {
    position: relative;
    background: #14181f;
    height: 380px;
    overflow: hidden;
    /* Default cursor is the pointer — hovering sections shows they're
       clickable. Grab cursor only kicks in when the map is actually
       pannable (zoomed past 1×), added via .is-pannable class from JS. */
    cursor: default;
    touch-action: none;
    user-select: none;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    -webkit-user-select: none;
}
.fl-seatmap-inline-canvas.is-pannable { cursor: grab; }
.fl-seatmap-inline-canvas.is-pannable.is-panning { cursor: grabbing; }
.fl-seatmap-inline-canvas svg {
    max-width: 100%;
    max-height: 100%;
    display: block;
    transition: transform 60ms ease-out;
}
.fl-seatmap-inline-canvas.is-panning svg { transition: none; }
.fl-seatmap-inline-canvas [data-section] {
    transition: opacity 120ms ease;
}
.fl-seatmap-inline-canvas [data-section][data-hovered="true"] rect,
.fl-seatmap-inline-canvas [data-section][data-hovered="true"] path,
.fl-seatmap-inline-canvas [data-section][data-hovered="true"] polygon {
    fill: var(--accent) !important;
    stroke: var(--accent) !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
}

/* Universal soft-grey fill for every seating block. The supplier's Anfield SVG
   styles all sections as `.st7` — fill:none, stroke-only — which made VIP
   (and any narrow band flush against the pitch) visually vanish (Reynir
   2026-08-21). Uniform grey fill keeps every category readable without
   introducing colour semantics the buyer has to decode; hover/selected
   still take over via the higher-specificity rules above. `.block`
   scoping keeps text labels + pitch/field shapes untouched.
   `pointer-events: all` is defensive — an SVG rect with `fill: none`
   defaults to `visiblePainted`, which only catches clicks on the stroke
   line, breaking section-click filtering when the buyer clicks inside the
   block (Dean report 2026-08-21). With a fill this would be moot, but
   explicit is safer than relying on defaults across browsers. */
.fl-seatmap-inline-canvas [data-category] .block {
    fill: rgba(148, 163, 184, 0.18);
    pointer-events: all;
    cursor: pointer;
}
/* Text labels inside sections must NOT eat the click — the group's
   click listener is what triggers the filter, but a `<text>` sitting on
   top of the rect will absorb the pointerdown and its parent groups
   won't necessarily re-bubble as the section's `<g data-section>`. */
.fl-seatmap-inline-canvas [data-section] text,
.fl-seatmap-inline-canvas [data-section] .section-label {
    pointer-events: none;
}

/* Hover tooltip. Positioned FIXED to the viewport (JS sets left/top from
   e.clientX/clientY) so it survives the seatmap SVG's innerHTML wipe
   without needing a stable positioned ancestor. `pointer-events: none`
   is essential — otherwise the tooltip itself would swallow the next
   mousemove and cause a hover-flicker loop. */
.fl-seatmap-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    min-width: 180px;
    max-width: 260px;
    background: rgba(15, 20, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 10px 12px;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
}
.fl-seatmap-tooltip[hidden] { display: none; }
.fl-seatmap-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
}
.fl-seatmap-tooltip-row + .fl-seatmap-tooltip-row { margin-top: 6px; }
.fl-seatmap-tooltip-row > span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fl-seatmap-tooltip-row > strong {
    color: var(--accent, #7dd3fc);
    font-variant-numeric: tabular-nums;
}
.fl-seatmap-tooltip-sold {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    font-size: 11px;
}
.fl-seatmap-loading, .fl-seatmap-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a8494;
    font-size: 13px;
}
.fl-seatmap-error { color: #ff4d3d; }
.fl-seatmap-inline-legend {
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.fl-seatmap-inline-legend:empty { display: none; }

/* ── Zone dropdown (in the filter box) ────────────────────────────
   Custom-styled listbox for tier selection. Reuses the same visual
   language as the qty pill picker so all filter controls feel matched. */
.fl-zone-select { position: relative; }
.fl-zone-trigger {
    display: inline-flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #eef1f5;
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    gap: 8px;
    transition: border-color 0.15s;
}
.fl-zone-trigger:hover { border-color: rgba(255, 255, 255, 0.28); }
.fl-zone-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-zone-caret { color: rgba(238, 241, 245, 0.55); font-size: 11px; }

.fl-zone-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: 10;
    max-height: 320px; overflow-y: auto;
    background: color-mix(in oklab, var(--panel-card-bg, #14181f) 88%, #000000);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.fl-zone-option {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: #eef1f5;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    font-family: inherit;
}
.fl-zone-option:hover { background: rgba(255, 255, 255, 0.08); }
.fl-zone-option.is-selected {
    background: color-mix(in oklab, var(--accent) 15%, transparent);
    color: var(--accent);
}
.fl-zone-opt-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-zone-opt-meta {
    color: rgba(238, 241, 245, 0.60); font-size: 11px; font-weight: 500;
    font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.fl-zone-option.is-selected .fl-zone-opt-meta { color: var(--accent); }

/* Seats-together checkbox row inside the filter box. */
.fl-df-together { align-self: end; padding-bottom: 6px; }
.fl-df-together[hidden] { display: none; }
.fl-together-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px !important; color: rgba(238, 241, 245, 0.85) !important;
    text-transform: none !important; letter-spacing: 0 !important;
    font-weight: 500 !important; cursor: pointer;
}
.fl-together-label input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px; height: 16px;
    cursor: pointer;
}

/* Small caps eyebrow above the tier chips. */
.fl-seatmap-legend-eyebrow {
    width: 100%;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(238, 241, 245, 0.55);
    font-weight: 700;
    margin-bottom: 4px;
}

/* Tier chip — "Shortside Upper Tier · from £237 · 12". Clickable pill
   that filters the listings + highlights all blocks in the tier on the map. */
.fl-seatmap-tier-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    color: #eef1f5;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    font-family: inherit;
}
.fl-seatmap-tier-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.30);
    transform: translateY(-1px);
}
.fl-seatmap-tier-chip.is-active {
    background: color-mix(in oklab, var(--accent) 20%, transparent);
    border-color: var(--accent);
    color: var(--accent);
}
.fl-tier-name  { font-weight: 700; }
.fl-tier-meta  { color: rgba(238, 241, 245, 0.60); font-weight: 400; font-variant-numeric: tabular-nums; }
.fl-tier-price { color: var(--accent); font-weight: 700; }
.fl-seatmap-tier-chip.is-active .fl-tier-meta,
.fl-seatmap-tier-chip.is-active .fl-tier-price { color: var(--accent); }
.fl-seatmap-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #eef1f5;
    font-family: Impact, 'Anton', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.fl-seatmap-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #262d38;
    flex: none;
}

@media (max-width: 720px) {
    .fl-seatmap-inline-canvas { height: 300px; }
}
.fl-df-field { display: flex; flex-direction: column; gap: 8px; }
.fl-df-field label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
}
.fl-df-field label span { color: var(--accent); font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* Quantity control */
.fl-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fl-qty button {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s;
}
.fl-qty button:hover { border-color: var(--accent); color: var(--accent); }
.fl-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.fl-qty input {
    width: 50px; height: 32px;
    text-align: center;
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.fl-qty input::-webkit-outer-spin-button,
.fl-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fl-qty-max {
    font-size: 11px;
    color: #7a8494;
    margin-left: 4px;
    letter-spacing: 0.02em;
}

/* Range slider */
.fl-range {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 32px;
    width: 100%;
    cursor: pointer;
}
.fl-range:focus { outline: none; }
.fl-range::-webkit-slider-runnable-track {
    height: 4px; background: #262d38; border-radius: 2px;
}
.fl-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px;
    background: var(--accent); border: 0;
    border-radius: 50%;
    margin-top: -7px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.fl-range::-moz-range-track { height: 4px; background: #262d38; border-radius: 2px; }
.fl-range::-moz-range-thumb {
    width: 18px; height: 18px;
    background: var(--accent); border: 0;
    border-radius: 50%;
}

/* Grid layout */
.fl-detail-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 32px;
    padding-bottom: 48px;
}
.fl-detail-listings-col { min-width: 0; }
.fl-detail-sidebar { min-width: 0; }
.fl-detail-sticky { position: sticky; top: 20px; }

/* Focus mode (Siggi 2026-08-20): after the buyer clicks a listing to
   commit, hide the listings column so the buy panel + hallmap own the
   screen. Inside the now-full-width sidebar, the seatmap + buy panel
   sit SIDE BY SIDE (map left, order preview right). Sticky positioning
   drops — sidebar owns the whole column so there's nothing to stick to. */
.fl-detail-grid.is-selecting {
    grid-template-columns: 1fr;
}
.fl-detail-grid.is-selecting .fl-detail-listings-col {
    display: none;
}
.fl-detail-grid.is-selecting .fl-detail-sticky {
    position: static;
    /* Order summary spans the same 1216px rail as the (now hidden)
       hero so hiding the hero doesn't leave a jarring narrow card on
       an otherwise-wide page (Siggi 2026-08-20). Panel content inside
       stretches to this width. */
    max-width: 1216px;
    margin: 0 auto;
}
.fl-detail-grid.is-selecting #selected-panel {
    max-width: none;
    width: 100%;
}
/* Hide the seatmap and Netgíró banner in focus mode so only the order
   summary shows. Seatmap-on-selection was flaky across mixed venue
   naming (Siggi 2026-08-20) — parked; buyer still sees the section
   name in the panel's title. */
.fl-detail-grid.is-selecting #seat-map-inline,
.fl-detail-grid.is-selecting .fl-netgiro-banner {
    display: none !important;
}
/* Filter card + event hero sit ABOVE .fl-detail-grid so hide them
   via a sibling selector when the grid enters focus mode. Neither is
   useful once the buyer has committed to a specific listing — the
   order summary shows the event title / date / venue on its own. */
body:has(.fl-detail-grid.is-selecting) .fl-detail-filters,
body:has(.fl-detail-grid.is-selecting) .fl-detail-hero {
    display: none !important;
}

/* See-all link below the homepage "Explore" tile row (Siggi 2026-08-20).
   Muted underline that leads to /categories — a full grouped view of
   every subcategory the brand exposes. */
.fl-subcat-see-all {
    text-align: center;
    /* bottom margin so the pill doesn't butt against the section's lower
       border (Dean 2026-09-15) */
    margin: 20px 0 18px;
}
.fl-subcat-see-all a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    display: inline-block;
    transition: background 0.15s, border-color 0.15s;
}
.fl-subcat-see-all a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
}
/* Selected section on the seatmap (Siggi 2026-08-20). The map's own
   JS sets [data-selected="true"] on the SVG element for the row the
   buyer picked; these !important rules override any inline style the
   paintSections() loop writes so highlights survive filter repaints. */
@keyframes fl-seatmap-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
    50%      { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); }
}
#seat-map-canvas [data-selected="true"] rect,
#seat-map-canvas [data-selected="true"] path,
#seat-map-canvas [data-selected="true"] polygon {
    fill: var(--accent, #ffd400) !important;
    opacity: 0.95 !important;
    animation: fl-seatmap-pulse 1.8s ease-in-out infinite;
}

/* Listings alerts */
.fl-listings-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #14181f;
    border: 1px solid #262d38;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #b8c0cc;
}
.fl-listings-alert.hidden { display: none; }
.fl-listings-alert.info { border-color: rgba(217, 255, 63, 0.3); }
.fl-listings-alert b { color: var(--accent); font-weight: 400; }
.fl-listings-alert button {
    background: transparent;
    border: 0;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

.fl-listings-empty {
    background: #14181f;
    border: 1px dashed #262d38;
    padding: 56px 24px;
    text-align: center;
    max-width: 560px;
    margin: 60px auto 0;
}
.fl-listings-empty h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 24px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 8px;
    font-weight: 400;
    color: #eef1f5;
}
.fl-listings-empty p { color: #7a8494; margin: 0; font-size: 14px; }

/* Listings toolbar + load-more (Siggi ask 2026-08-20): the "sit
   together" toggle sits here on the left, sort control on the right.
   nowrap so the two controls always share one line — the together
   label is allowed to shrink and truncate rather than wrap the sort
   dropdown to a second line (Siggi 2026-08-20 follow-up). */
.fl-listings-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: nowrap;
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 13px;
    min-width: 0;
}
.fl-listings-toolbar .fl-listings-together {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    /* Neutralise the filter-card-era .fl-df-together rule (align-self:end
       + padding-bottom:6px) — inside the centered toolbar flex it dropped
       the toggle below the sort control's midline. */
    align-self: center;
    padding-bottom: 0;
}
.fl-listings-toolbar .fl-listings-together[hidden] { display: none; }
.fl-listings-toolbar .fl-listings-together .fl-together-label {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px;
    cursor: pointer;
    min-width: 0;
}
.fl-listings-toolbar .fl-listings-together .fl-together-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Sort control — icon + native dropdown. Icon replaces the old
   "Raða eftir:" text which pushed the toolbar to two rows on mobile. */
.fl-listings-sort-icon {
    color: var(--text-muted, #7a8494);
    font-size: 13px;
    line-height: 1;
}
.fl-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
    border: 0; padding: 0; margin: -1px;
}
/* Placeholder in the filter card that used to hold the together toggle —
   kept invisible so nth-of-type(3/4) → price/zone in mobile-grid stays
   correct. Belt-and-braces: [hidden] normally = display:none but the
   grid layout ignores that on grid items, so force it. */
.fl-df-together-placeholder {
    display: none !important;
}
.fl-listings-sort {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-muted, #7a8494);
    font-size: 12px;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}
.fl-listings-sort select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: var(--text, #fff);
    padding: 6px 26px 6px 10px;
    font-size: 12px;
    max-width: 180px;
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
}
.fl-listings-sort select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}
.fl-listings-more {
    display: flex; justify-content: center;
    margin: 14px 0 4px;
}
.fl-listings-more .fl-btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
}
.fl-listings-more-count {
    opacity: 0.7;
    font-weight: 400;
    margin-left: 6px;
}
@media (max-width: 640px) {
    /* Stack the toolbar so the long IS label ("Aðeins sæti sem sitja saman")
       + the sort dropdown each get their own row instead of competing for
       one — previously the together-label ellipsised (Dean report
       2026-08-20). Desktop layout stays row/space-between (unchanged). */
    .fl-listings-toolbar {
        padding: 8px 10px;
        gap: 8px;
        flex-direction: column;
        align-items: stretch;
    }
    .fl-listings-toolbar .fl-listings-together { align-self: flex-start; }
    .fl-listings-toolbar .fl-listings-together .fl-together-label > span {
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
    }
    .fl-listings-toolbar .fl-listings-sort { align-self: flex-end; }
    .fl-listings-count { font-size: 12px; }
    .fl-listings-sort { gap: 4px; }
    .fl-listings-sort select { font-size: 12px; padding: 5px 22px 5px 8px; max-width: none; }
    .fl-listings-toolbar .fl-listings-together .fl-together-label {
        font-size: 12px;
        gap: 8px;
    }
    /* Shrink the PT switch a notch on phones so the toggle + label fit
       alongside the sort dropdown on 375px viewports. */
    body[data-brand="premierseats"] .fl-listings-toolbar #filter-together {
        width: 34px !important;
        height: 20px !important;
        flex: 0 0 34px !important;
    }
    body[data-brand="premierseats"] .fl-listings-toolbar #filter-together::before {
        width: 16px !important;
        height: 16px !important;
    }
    body[data-brand="premierseats"] .fl-listings-toolbar #filter-together:checked::before {
        transform: translateX(14px) !important;
    }
}

/* ==================== NOTIFY-ME (waitlist) ==================== */
.fl-notify-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 20px auto 0;
    flex-wrap: wrap;
    justify-content: center;
}
.fl-notify-form input[type="email"] {
    flex: 1 1 240px;
    min-width: 220px;
    padding: 12px 14px;
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    font-family: inherit;
    font-size: 14px;
    outline: 0;
}
.fl-notify-form input[type="email"]:focus {
    border-color: var(--accent);
}
.fl-notify-form input[type="email"]::placeholder { color: #4b5361; }
.fl-notify-form button {
    flex: 0 0 auto;
    padding: 12px 20px;
}
.fl-notify-msg {
    margin-top: 14px;
    font-size: 13px;
    min-height: 1.2em;
}
.fl-notify-msg.is-ok  { color: var(--accent); }
.fl-notify-msg.is-err { color: #ff4d3d; }
.fl-notify-alt {
    margin-top: 20px;
    color: #7a8494;
    font-size: 13px;
}
.fl-notify-alt a { color: #eef1f5; text-decoration: underline; }
.fl-notify-alt a:hover { color: var(--accent); }

/* Card chip variant — shown on match cards when listing_count == 0 */
.fl-notify-chip {
    color: var(--accent) !important;
    font-weight: 600;
}

/* Listings list */
.fl-listings {
    background: var(--panel-card-bg, #14181f);
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #262d38 transparent;
}
.fl-listings::-webkit-scrollbar { width: 6px; }
.fl-listings::-webkit-scrollbar-thumb { background: #262d38; }
.fl-listing-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    /* Explicit background so rows match the filter card + netgíró banner
       tone exactly, no matter what wrapper is between them and the shell. */
    background: var(--panel-card-bg, #14181f);
    /* Visible separator on the dark shell — was #1c222b which blended in. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fl-listing-row:last-child { border-bottom: 0; }

/* VIP treatment — champagne-gold gradient with deep-navy text. Fires
   when the row template matches `vip|upplifun|hospitality|executive|
   suite` on category/section/enum translation. Understated luxury look,
   not shouty (Dean 2026-08-21). Deep navy text keeps everything on the
   row readable against the light gold ground; the fine top highlight is
   a single-pixel inset shine so it reads as brushed metal, not paint.
   Selector is scoped `body[data-brand]` so specificity beats the
   PT-scoped `body[data-brand="premierseats"] .fl-listing-row` rule
   further down that forces a transparent row background. */
body[data-brand] .fl-listing-row.is-vip {
    background: linear-gradient(135deg, #f4dc9e 0%, #e6c675 50%, #d4b25a 100%) !important;
    border-bottom-color: rgba(120, 84, 22, 0.35) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(120, 84, 22, 0.2);
    color: #0f1729;
}
body[data-brand] .fl-listing-row.is-vip .fl-listing-cat,
body[data-brand] .fl-listing-row.is-vip .fl-listing-amount {
    color: #0f1729 !important;
}
body[data-brand] .fl-listing-row.is-vip .fl-listing-detail,
body[data-brand] .fl-listing-row.is-vip .fl-listing-each {
    color: #3a4560 !important;   /* slightly muted for secondary meta */
}
/* Chip pills against gold — dark navy background, cream border, cream
   text so they read as premium tags instead of fighting the gold ground. */
body[data-brand] .fl-listing-row.is-vip .fl-listing-chip-benefits,
body[data-brand] .fl-listing-row.is-vip .fl-listing-chip-restriction {
    background: rgba(15, 23, 41, 0.85) !important;
    border-color: rgba(15, 23, 41, 0.9) !important;
    color: #f4dc9e !important;
}
body[data-brand] .fl-listing-row.is-vip:hover {
    background: linear-gradient(135deg, #f7e3ac 0%, #ecd085 50%, #dcbc68 100%) !important;
}
body[data-brand] .fl-listing-row.is-vip.selected,
body[data-brand] .fl-listing-row.selected.is-vip {
    /* Selected wins over VIP — match the same navy-lighter tint as
       non-VIP selected rows so the commit-state cue is consistent and
       readable (Reynir 2026-08-21). */
    background: #253044 !important;
    color: #eef1f5 !important;
    box-shadow: none;
}
body[data-brand] .fl-listing-row.is-vip.selected .fl-listing-cat,
body[data-brand] .fl-listing-row.is-vip.selected .fl-listing-amount { color: #eef1f5 !important; }
body[data-brand] .fl-listing-row.is-vip.selected .fl-listing-detail,
body[data-brand] .fl-listing-row.is-vip.selected .fl-listing-each   { color: #a5adbb !important; }

/* Hover: lift to a step-lighter navy tint (Reynir report 2026-08-21 —
   the earlier white-inversion left the row text unreadable against the
   light ground). Keep the text light so contrast stays clean on the
   navy shell. `body[data-brand]` scope + !important beats the brand-
   card background override that layout.twig injects. */
body[data-brand] .fl-listing-row:hover {
    background: #253044 !important;      /* a couple stops lighter than the panel navy */
    color: #eef1f5 !important;
}
body[data-brand] .fl-listing-row:hover .fl-listing-cat     { color: #eef1f5 !important; }
body[data-brand] .fl-listing-row:hover .fl-listing-detail  { color: #a5adbb !important; }
body[data-brand] .fl-listing-row:hover .fl-listing-amount  { color: #eef1f5 !important; }
body[data-brand] .fl-listing-row:hover .fl-listing-each    { color: #a5adbb !important; }
/* Chip palette needs a lighter treatment on the inverted background —
   the dark-mode tints (12% opacity + light text) become unreadable. */
.fl-listing-row:hover .fl-listing-chip {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.15);
    color: #334155;
}
.fl-listing-row:hover .fl-listing-chip-restriction {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #b91c1c;
}
.fl-listing-row:hover .fl-listing-chip-split,
.fl-listing-row:hover .fl-listing-chip-quantity {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.35);
    color: #92400e;
}

.fl-listing-row.selected {
    background: rgba(217, 255, 63, 0.08);
    border-left: 2px solid var(--accent);
    padding-left: 14px;
}
.fl-listing-info { flex: 1; min-width: 0; }
.fl-listing-cat {
    font-size: 14px;
    font-weight: 700;
    color: #eef1f5;
    letter-spacing: -0.005em;
    margin-bottom: 3px;
}
.fl-listing-detail {
    font-size: 12px;
    color: #7a8494;
}
/* Attribute chips (populated from sync_supplier_listings.php via
   listings.attributes JSON). Type = restriction/delivery/split/admission/
   quantity — coloured differently so restrictions catch the eye faster
   than descriptive attributes. */
.fl-listing-chips {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 6px;
}
.fl-listing-chip {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, 0.15);
    color: #b8c0cc;
}
.fl-listing-chip-restriction {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
/* Aggregate "premium benefits" pill (Siggi 2026-08-20) — used when a
   listing carries at least one benefit-shaped attribute (padded seats,
   match programme, hospitality, etc.). Green so it reads as positive
   at a glance without needing to open the buy panel to see why. */
.fl-listing-chip-benefits {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}
/* Per-attribute breakdown chips. Hidden in the listing row (the row stays
   clean with just the aggregate summary pill) but revealed inside
   #panel-chips when the buyer selects a listing — that's where the full
   list ("VIP UPPLIFUN · Padded seats · Programme included") belongs, at
   the moment of commit. */
.fl-listing-chip-detail { display: none; }
#panel-chips .fl-listing-chip-detail { display: inline-flex; }
.fl-listing-chip-split,
.fl-listing-chip-quantity {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fcd34d;
}
.fl-listing-chip-delivery {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}
.fl-listing-chip-admission {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
    color: #c4b5fd;
}

/* Chips past the visible cap (default 2) — hidden until the "+N more"
   toggle is clicked. */
.fl-listing-chip-hidden { display: none !important; }

/* "+N more" toggle chip — plain neutral style so it doesn't compete with
   the coloured type chips. Explicit button-reset because <button> ships
   with UA default styling. */
.fl-listing-chip-more {
    font-family: inherit;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.28);
    color: rgba(238, 241, 245, 0.75);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.fl-listing-chip-more:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
    color: #eef1f5;
}
.fl-listing-price {
    text-align: right;
    min-width: 82px;
}
.fl-listing-amount {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 20px;
    color: var(--accent);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 2px;
}
.fl-listing-each {
    font-size: 10px;
    color: #4b5361;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Venue map */
.fl-map-frame {
    background: #14181f;
    border: 1px solid #262d38;
    padding: 12px;
    position: relative;
}
.fl-map-inner {
    aspect-ratio: 979 / 859;
    width: 100%;
}
.fl-map-svg { width: 100%; height: 100%; }
.fl-map-skeleton {
    position: absolute;
    inset: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5361;
    font-size: 13px;
    font-weight: 500;
}
.fl-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #14181f;
    border: 1px solid #262d38;
    font-size: 11px;
    color: #b8c0cc;
    justify-content: center;
}
.fl-map-legend.hidden { display: none; }
.fl-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fl-map-legend .swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.fl-map-caption {
    font-size: 10px;
    color: #4b5361;
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 8px 0 0;
}

/* Selected-listing panel */
.fl-selected {
    /* Matches the filter / listings / seatmap / netgíró panel group so the
       whole right-column reads as one system. */
    background: var(--panel-card-bg, #14181f);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.fl-selected.hidden { display: none; }
.fl-selected-head {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fl-selected-back {
    background: transparent;
    border: 0;
    color: #7a8494;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s;
}
.fl-selected-back:hover { color: var(--accent); }
.fl-selected-tag {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}
.fl-selected-body { padding: 24px; }
.fl-selected-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0 0 6px;
    line-height: 1;
}
.fl-selected-sub {
    font-size: 12px;
    color: #7a8494;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}
.fl-selected-seat {
    /* Inner "well" — one shade darker than the parent panel so the picked
       seat reads as recessed. Uses the storefront bg tone underneath. */
    background: var(--panel-bg, #0a0d10);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.fl-selected-cat {
    font-size: 15px;
    font-weight: 700;
    color: #eef1f5;
    letter-spacing: -0.005em;
    margin-bottom: 4px;
}
.fl-selected-detail {
    font-size: 12px;
    color: #b8c0cc;
}
/* Chips inside the buy panel — same palette as listing-row chips but a
   little more prominent (slightly bigger padding, chunkier border) since
   they're the last thing the buyer sees before committing. */
.fl-selected-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}
.fl-selected-chips .fl-listing-chip {
    padding: 4px 10px;
    font-size: 11px;
    letter-spacing: 0.02em;
}
.fl-selected-buy {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.fl-selected-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 700;
    margin-bottom: 6px;
}
.fl-selected-total { text-align: right; }

/* Payment-schedule strip on browse pages (homepage, search, team, venue).
   Gated by brand.deposit_percent — currently only PT sees it. Copy
   matches the beige buy-panel notice verbatim, styled for the dark
   storefront: subtle tinted rail, accent for the two bold phrases,
   readable line-height for the running text (Siggi 2026-08-26). */
.fl-deposit-note {
    max-width: 900px;
    margin: 18px auto 26px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    text-align: center;
}
.fl-deposit-note-copy {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(246, 248, 251, 0.88);
}
.fl-deposit-note-copy + .fl-deposit-note-copy { margin-top: 6px; }
.fl-deposit-note-copy strong {
    font-weight: 700;
    color: var(--accent);
}
@media (max-width: 640px) {
    .fl-deposit-note { padding: 14px 16px; margin: 14px auto 20px; }
    .fl-deposit-note-copy { font-size: 13px; line-height: 1.5; }
}

.fl-selected-amount {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 40px;
    line-height: 1;
    color: var(--accent);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    margin: 4px 0 2px;
}
.fl-selected-unit {
    font-size: 11px;
    color: #7a8494;
    letter-spacing: 0.02em;
}
.fl-selected-cta {
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
}
.fl-selected-trust {
    padding-top: 20px;
    border-top: 1px solid #262d38;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 12px;
    color: #b8c0cc;
    line-height: 1.5;
}
.fl-selected-trust > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.fl-selected-trust strong { color: #eef1f5; font-weight: 600; }
.fl-trust-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    margin-top: 4px;
    flex: none;
}

@media (max-width: 960px) {
    .fl-detail-grid { grid-template-columns: 1fr; gap: 24px; }
    .fl-detail-sticky { position: static; }
    .fl-listings { max-height: 480px; }
    .fl-detail-title { font-size: clamp(28px, 8vw, 44px); gap: 12px; }
    .fl-selected-buy { flex-direction: column; align-items: stretch; gap: 16px; }
    .fl-selected-total { text-align: left; }
}

/* ─── Phone breakpoint ─── owner note: 90% of bookings are on mobile.
   Aggressive tightening — trim hero padding, shrink display-font stacked
   titles that were eating half the viewport, cut the vertical margin
   ladder between eyebrow / back / title / body. */
@media (max-width: 640px) {
    /* Event detail hero */
    .fl-detail-hero { padding: 20px 16px 18px; }
    .fl-detail-back { margin-bottom: 10px; font-size: 11px; }
    .fl-detail-eyebrow { margin-bottom: 10px; font-size: 10px; letter-spacing: 0.14em; }
    .fl-detail-title {
        font-size: clamp(22px, 6vw, 32px);
        gap: 8px;
        margin: 0 0 16px;
        line-height: 1;
    }
    .fl-detail-title-single { font-size: clamp(22px, 5.5vw, 30px); }
    .fl-detail-vs { font-size: 0.7em; }

    /* Storefront-wide container padding — was optimised for desktop density. */
    .fl-container { padding-left: 12px; padding-right: 12px; }
    .fl-content    { padding-left: 0; padding-right: 0; }
    .fl-section-header h2.fl-section-title { font-size: clamp(24px, 8vw, 34px); }

    /* Homepage hero card padding */
    .fl-hot-grid    { gap: 12px; }
    .fl-card-body   { padding: 12px 14px 14px; }
    .fl-card-title  { font-size: 15px; }

    /* SKOÐA X category rows on the homepage — the label cell was way
       oversized on mobile, eating the tile row's real estate. */
    .fl-cats        { gap: 12px; }
    .fl-cat         { grid-template-columns: 1fr !important; }
    .fl-cat-label   { padding: 14px 16px; }
    .fl-cat-name    { font-size: clamp(22px, 6vw, 32px); }
    .fl-cat-events  { padding: 8px 14px 14px; grid-template-columns: 1fr; gap: 10px; }

    /* Subcategory explore grid tighter on phone. */
    .fl-subcat-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .fl-subcat-tile  { min-height: 100px; }
    .fl-subcat-name  { font-size: 13px; }

    /* Search result cards — 2-col on phone (previously fine but explicit). */
    .fl-search-title { font-size: clamp(24px, 8vw, 36px); }
    .fl-search-header { gap: 8px; padding-bottom: 12px; margin-bottom: 16px; }
    .fl-search-count { font-size: 12px; }

    /* Trust bar — stack cleanly on phone, no cramped 4-col grid. */
    .fl-trust        { padding: 20px 12px; margin-top: 40px; grid-template-columns: 1fr 1fr; gap: 16px; }
    .fl-trust-num    { font-size: clamp(24px, 8vw, 32px); }
    .fl-trust-label  { font-size: 10px; }
    .fl-trust-note   { font-size: 12px; }
}

/* Small-phone breakpoint — squeeze further so iPhone SE / older Androids
   don't need to sideways-swipe or scroll a huge stacked hero. */
@media (max-width: 380px) {
    .fl-detail-title { font-size: 20px; }
    .fl-trust        { grid-template-columns: 1fr; }
}

/* Homepage hero carousel — mobile shrink.
   Per owner feedback: mobile hero was too tall + type was too big. Cuts
   min-height, tightens padding, drops font clamp floors, resolves the
   grid to a single-column stack so ARSENAL / vs / COVENTRY don't fight
   for horizontal space on a 375px screen. */
@media (max-width: 720px) {
    /* On phones the 90% width was too tight; go 96% + smaller margin
       so the hero still feels contained but isn't a sliver. */
    .fl-hero-carousel { min-height: 380px; width: 96%; margin-top: 12px; border-radius: 12px; }
    .fl-hero-slide    { padding: 20px 16px 44px; }
    .fl-hero-title    { grid-template-columns: 1fr; gap: 8px; margin: 12px 0 12px; }
    .fl-team-right    { align-items: flex-start; text-align: left; }
    .fl-team-name     { font-size: clamp(24px, 6.5vw, 40px); }
    .fl-team-single .fl-team-name { font-size: clamp(22px, 5.5vw, 34px); }
    .fl-vs            { font-size: 22px; }
    .fl-hero-meta     { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 12px; }
    .fl-hero-meta dl  { grid-template-columns: repeat(2, auto); gap: 6px 24px; }
    .fl-hero-nav      { bottom: 12px; }
}
@media (max-width: 380px) {
    .fl-hero-carousel { min-height: 340px; }
    .fl-team-name     { font-size: 22px; }
    .fl-vs            { font-size: 18px; }
}

/* Nav bar mobile compaction — 90% of bookings are on phone per owner.
   Tighter padding, smaller logo, hide WhatsApp text label (icon-only),
   and the header search chevron collapses at these sizes anyway. */
@media (max-width: 640px) {
    .fl-nav        { padding: 12px 12px; gap: 8px; }
    .fl-logo-img   { height: 36px; }
    /* Nav links kept in DOM so the hamburger panel can reveal them —
       the mobile-menu positioning below in the @media(max-width:900px)
       block puts them as an absolute-positioned dropdown. Removed the
       old blanket `display: none` here (2026-08-19) — that was written
       before the hamburger existed and silently defeated the mobile
       menu on phones by overriding its position:absolute layout. */
    .fl-nav-right  { gap: 8px; }
    .fl-wa-link span,
    .fl-wa-link { font-size: 0; }                  /* icon only on phone */
    .fl-wa-link svg { width: 22px; height: 22px; }
    .fl-currency select { font-size: 12px; padding: 4px 6px; }
    #cart-total { display: none; }                 /* just show cart icon + count */
    #cart-timer { display: none; }
}

/* -------- Matches list page -------- */

.fl-matches-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
    gap: 16px;
    align-items: end;
    background: #14181f;
    border: 1px solid #262d38;
    padding: 20px;
    margin-bottom: 32px;
}
.fl-mf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fl-mf-field label {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    font-weight: 400;
}
.fl-mf-field input,
.fl-mf-field select {
    background: #0a0d10;
    border: 1px solid #262d38;
    color: #eef1f5;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
}
.fl-mf-field input:focus,
.fl-mf-field select:focus {
    border-color: var(--accent);
    outline: none;
}
.fl-mf-field input::placeholder { color: #4b5361; }
.fl-mf-actions {
    display: flex;
    gap: 8px;
    align-items: end;
}
.fl-mf-actions .fl-btn,
.fl-mf-actions .fl-btn-ghost {
    padding: 12px 20px;
    font-size: 14px;
    white-space: nowrap;
}

.fl-matches-count {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}
.fl-matches-count .num {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 28px;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}
.fl-matches-count .label {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7a8494;
}

.fl-match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.fl-match-card {
    background: #14181f;
    border: 1px solid #262d38;
    overflow: hidden;
    display: block;
    transition: border-color 0.15s, transform 0.15s;
}
.fl-match-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Banner (flag / badge visual) — overrides the legacy app.css version
   with Floodlit-appropriate framing. */
.fl-match-banner.flag-banner {
    position: relative;
    height: 80px;
    background: linear-gradient(180deg, #14181f 0%, #0a0d10 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #262d38;
}
.fl-match-banner .home-flag,
.fl-match-banner .away-flag {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    display: block;
    background-size: cover;
    background-position: center;
    opacity: 0.85;
}
.fl-match-banner .home-flag { left: 0; }
.fl-match-banner .away-flag { right: 0; }
.fl-match-banner .home-flag.placeholder,
.fl-match-banner .away-flag.placeholder {
    background: #1c222b;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fl-match-banner .placeholder span {
    color: #4b5361;
    font-family: Impact, sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.fl-match-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, rgba(10,13,16,0.5) 100%),
        radial-gradient(300px 100px at 50% 100%, rgba(217, 255, 63, 0.1), transparent 60%);
    pointer-events: none;
}
.fl-match-banner.pl-banner {
    background: linear-gradient(135deg, #240a3d 0%, #37003c 60%, #14181f 100%);
}
.fl-match-banner.pl-banner .home-badge,
.fl-match-banner.pl-banner .away-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px;
    z-index: 1;
}
.fl-match-banner.pl-banner .home-badge { left: 20%; }
.fl-match-banner.pl-banner .away-badge { right: 20%; }
.fl-match-banner.pl-banner .home-badge img,
.fl-match-banner.pl-banner .away-badge img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.fl-match-tag {
    position: absolute;
    top: 10px; left: 10px;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #eef1f5;
    background: rgba(10, 13, 16, 0.85);
    padding: 4px 8px;
    z-index: 2;
    font-weight: 400;
}
.fl-match-num {
    position: absolute;
    top: 10px; right: 10px;
    font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #7a8494;
    background: rgba(10, 13, 16, 0.85);
    padding: 4px 8px;
    z-index: 2;
    font-variant-numeric: tabular-nums;
}

/* Venue photo variant of the match banner — replaces the flag banner when
   a photo is available for the venue. */
.fl-match-banner.fl-match-photo {
    position: relative;
    height: 140px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-bottom: 1px solid #262d38;
}
.fl-match-banner.fl-match-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 13, 16, 0.25) 0%, rgba(10, 13, 16, 0.75) 100%);
    pointer-events: none;
}
.fl-match-banner.fl-match-photo > * { position: relative; z-index: 1; }
.fl-match-venue-label {
    position: absolute;
    left: 12px; bottom: 10px;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(217, 255, 63, 0.85);
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

/* Hot Right Now card image — photo variant lifts the dark overlay so the
   card body reads clearly below. */
.fl-card-img-photo {
    position: relative;
}
.fl-card-img-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 13, 16, 0.25) 0%, rgba(10, 13, 16, 0.65) 100%);
    pointer-events: none;
}
.fl-card-img-photo .fl-card-tag { z-index: 1; position: absolute; }

.fl-match-body { padding: 20px; }
.fl-match-date {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
    margin-bottom: 8px;
    font-weight: 400;
}
.fl-match-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    line-height: 1.25;
    color: #eef1f5;
}
.fl-match-title .vs {
    color: #7a8494;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.02em;
}
.fl-match-venue {
    font-size: 12px;
    color: #7a8494;
    margin: 0 0 16px;
    line-height: 1.4;
}
.fl-match-footer {
    padding-top: 14px;
    border-top: 1px solid #262d38;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.fl-match-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fl-match-price span {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7a8494;
}
.fl-match-price strong {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    line-height: 1;
}
.fl-match-price-empty {
    font-size: 13px;
    color: #7a8494;
    letter-spacing: 0.02em;
}
.fl-match-listings {
    font-size: 12px;
    color: #7a8494;
    letter-spacing: 0.02em;
}
.fl-match-card:hover .fl-match-listings { color: var(--accent); }

.fl-match-empty {
    grid-column: 1 / -1;
    padding: 60px 32px;
    text-align: center;
    border: 1px dashed #262d38;
    background: #14181f;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.fl-match-empty p {
    color: #7a8494;
    font-size: 16px;
    margin: 0;
}

@media (max-width: 720px) {
    .fl-matches-filter {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .fl-mf-actions { flex-wrap: wrap; }
    .fl-match-grid { grid-template-columns: 1fr; }
    .fl-match-banner .home-flag,
    .fl-match-banner .away-flag { width: 50%; }
    .fl-match-banner.pl-banner .home-badge { left: 15%; }
    .fl-match-banner.pl-banner .away-badge { right: 15%; }
}

/* -------- Original Floodlit system starts below -------- */

*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: 0; padding: 0; color: inherit; cursor: pointer; }
input { font: inherit; }

:root {
    --bg: #0a0d10;
    --surface: #14181f;
    --surface-2: #1c222b;
    --border: #262d38;
    --text: #eef1f5;
    --text-muted: #7a8494;
    --text-dim: #4b5361;
    --accent: #d9ff3f;
    --hot: #ff4d3d;
    --live: #ff4d3d;
    --wa: #25d366;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-feature-settings: 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Impact (and its condensed fallbacks) doesn't ship with real ligature or
   stylistic-set tables — but browsers still attempt to substitute character
   pairs at small sizes when text-rendering is optimizeLegibility, which
   produces the "nested / joined letters" artifact on chips and date labels.
   Turn all OpenType features off wherever Impact is applied. */
[class*="fl-card-tag"],
[class*="fl-card-date"],
[class*="fl-cat-event-date"],
[class*="fl-cat-num"],
[class*="fl-match-tag"],
[class*="fl-match-date"],
[class*="fl-match-venue-label"],
[class*="fl-mf-field"] label,
[class*="fl-matches-count"] .label,
[class*="fl-page-eyebrow"],
[class*="fl-blog-card-meta"],
[class*="fl-article-meta"],
[class*="fl-faq-group-title"],
[class*="fl-fansure"],
[class*="fl-fansure"] *,
.fs-fan,
.fs-sure,
[class*="fl-search-row-dow"],
[class*="fl-search-row-mon"],
[class*="fl-search-row-cat"],
[class*="fl-search-row-count"],
[class*="fl-search-row-cta"],
[class*="fl-search-row-price"],
[class*="fl-search-row-title"],
[class*="fl-search-count"],
[class*="fl-search-title"],
[class*="fl-search-empty"],
[class*="fl-search-suggests"] a {
    font-feature-settings: normal !important;
    font-variant-ligatures: none !important;
    font-variant-caps: normal !important;
    -webkit-font-feature-settings: normal !important;
}

.fl-display {
    font-family: Impact, 'Anton', 'Haettenschweiler', 'Franklin Gothic Medium', 'Arial Narrow Bold', sans-serif;
    letter-spacing: 0.005em;
    font-weight: 400;
    line-height: 0.9;
}
.fl-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ==================== NAV ==================== */
.fl-nav {
    border-bottom: 1px solid var(--border);
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.fl-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #eef1f5;
    line-height: 1;
}
.fl-logo-img {
    display: block;
    height: 52px;
    width: auto;
}
.fl-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #0a0d10;
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    width: 38px;
    height: 38px;
    font-size: 28px;
    letter-spacing: -0.06em;
    padding-top: 2px;
    line-height: 1;
    transform: rotate(-4deg);
    flex: none;
    font-feature-settings: 'ss01', 'cv11', 'liga', 'dlig', 'clig';
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    text-rendering: optimizeLegibility;
}
.fl-logo-wm {
    font-size: 28px;
    letter-spacing: -0.03em;
    line-height: 1;
}
.fl-ticket,
.fl-score {
    display: inline-block;
    font-feature-settings: 'ss01', 'cv11', 'liga', 'dlig', 'clig';
    font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
    text-rendering: optimizeLegibility;
}
.fl-ticket { color: #eef1f5; }
.fl-score  { color: var(--accent); }
.fl-navlinks { display: flex; gap: 28px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.fl-navlinks a { padding: 4px 0; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; }
.fl-navlinks a:hover, .fl-navlinks a.on { color: var(--text); border-color: var(--accent); }
.fl-nav-right { display: flex; align-items: center; gap: 16px; }
.fl-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.15s;
}
.fl-wa-link:hover { color: var(--wa); }
.fl-wa-link svg { width: 14px; height: 14px; }
.fl-sign { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); transition: color 0.15s; }
.fl-sign:hover { color: var(--text); }
.fl-sell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #0a0d10;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: transform 0.15s;
}
.fl-sell:hover { transform: translateY(-1px); }

/* ==================== SEARCH BAR ==================== */
.fl-search {
    border-bottom: 1px solid var(--border);
    padding: 16px 32px;
    display: flex;
    gap: 20px;
    align-items: center;
}
.fl-search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
}
.fl-search-input .k { color: var(--text-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.fl-search-input .q {
    border: 0;
    background: 0;
    color: var(--text);
    outline: 0;
    width: 100%;
}
.fl-search-input .q::placeholder { color: var(--text-muted); }
.fl-search .divider { width: 1px; background: var(--border); align-self: stretch; }
.fl-search .meta { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.fl-search .meta strong { color: var(--text); font-weight: 500; }

/* ==================== SEARCH RESULTS PAGE ==================== */
.fl-search-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.fl-search-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: clamp(28px, 4.2vw, 56px);
    line-height: 0.95;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 400;
    color: #eef1f5;
}
.fl-search-title .accent { color: var(--accent); }
.fl-search-count {
    color: var(--text-muted);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: Impact, sans-serif;
}
.fl-search-count b { color: var(--text); font-weight: 400; font-family: Impact, sans-serif; }

/* ── Search/category filter bar (Month + City) ──
   Theme-neutral: uses currentColor + var(--border) so it reads on both the
   dark PT storefront and the light Ticketscore/Sambilet themes. */
.fl-search-filters {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
    margin: 0 0 24px;
}
.fl-sf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fl-sf-field > span {
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted, #7a8494); font-weight: 700;
}
.fl-sf-field select {
    appearance: none; -webkit-appearance: none;
    background-color: rgba(127, 127, 127, 0.10);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
    border-radius: 8px;
    color: inherit;
    font: inherit; font-size: 13px;
    padding: 9px 32px 9px 12px;
    max-width: 220px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
}
.fl-sf-field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
}
.fl-sf-clear {
    align-self: flex-end;
    font-size: 12px; color: var(--text-muted, #7a8494);
    text-decoration: none; padding: 9px 4px;
    white-space: nowrap;
}
.fl-sf-clear:hover { color: var(--accent); }

.fl-search-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.fl-search-empty h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: var(--text);
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0 0 12px;
    font-weight: 400;
}
.fl-search-empty p { max-width: 42em; margin: 0 auto 20px; font-size: 15px; line-height: 1.55; }
.fl-search-suggests { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.fl-search-suggests a {
    display: inline-flex;
    padding: 10px 18px;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: Impact, sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.fl-search-suggests a:hover { border-color: var(--accent); color: var(--accent); }
.fl-search-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.fl-search-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fl-search-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 24px;
    padding: 18px 22px;
    align-items: center;
    background: var(--surface, #14181f);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.fl-search-row:hover {
    border-color: var(--accent);
    background: #181c24;
}
.fl-search-row-date {
    text-align: center;
    padding: 8px 4px;
    border-right: 1px solid var(--border);
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    line-height: 1;
}
.fl-search-row-dow { color: var(--accent); font-size: 11px; letter-spacing: 0.16em; margin-bottom: 4px; }
.fl-search-row-day { color: var(--text); font-size: 32px; }
.fl-search-row-mon { color: var(--text-muted); font-size: 11px; letter-spacing: 0.16em; margin-top: 4px; }
.fl-search-row-body {}
.fl-search-row-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 6px;
    color: var(--text);
    font-weight: 400;
}
.fl-search-row-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}
.fl-search-row-cat {
    color: var(--accent);
    font-family: Impact, sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-left: 6px;
}
.fl-search-row-right {
    text-align: right;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.fl-search-row-count {
    font-family: Impact, sans-serif;
    color: var(--text);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.fl-search-row-count-off { color: var(--text-muted); }
.fl-search-row-price {
    color: var(--accent);
    font-family: Impact, sans-serif;
    font-size: 18px;
    letter-spacing: 0.02em;
}
.fl-search-row-cta {
    color: var(--text-muted);
    font-family: Impact, sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 6px;
}
.fl-search-row:hover .fl-search-row-cta { color: var(--accent); }
.fl-search-more {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 20px;
}

@media (max-width: 720px) {
    .fl-search-row {
        grid-template-columns: 64px 1fr;
        gap: 16px;
        padding: 14px 16px;
    }
    .fl-search-row-right {
        grid-column: 2 / span 1;
        text-align: left;
        align-items: flex-start;
        margin-top: 6px;
    }
    .fl-search-row-day { font-size: 24px; }
}

/* ==================== HERO ==================== */
/* ================================================================
   HERO CAROUSEL — fade-through slides of upcoming events, each with
   its venue photo panning slowly (Ken Burns) behind a heavy dark
   scrim that keeps the wordmark and price readable.
   ================================================================ */
.fl-hero-carousel {
    position: relative;
    /* Reduced from 640px — the hero was eating the fold. Toned per feedback:
       ~480px desktop feels premium without swallowing the page. */
    min-height: 480px;
    overflow: hidden;
    background: #050709;
    /* Contained to match the 1200px content column below (.fl-content).
       calc(100% - 64px) mirrors .fl-content's 32px inline padding so the
       carousel and event-card grid share the same left/right edge. */
    width: calc(100% - 64px);
    max-width: 1200px;
    margin: 24px auto 0;
    /* Follows the brand's radius_scale (event cards etc. share this token).
       Minimum floor at 12px so the "sharp" scale still shows a subtle round. */
    border-radius: max(var(--brand-radius, 16px), 12px) !important;
    border: 1px solid var(--border);
}
/* Belt-and-braces: also round the inner image container so Safari/Firefox
   correctly clip the ken-burns-scaled <img> to the parent's rounded corners. */
.fl-hero-slide-bg,
.fl-hero-slide {
    border-radius: inherit;
}
.fl-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Tighter padding — was 40 32 72 which stacked with big title made
       the hero feel monumental. */
    padding: 28px 32px 56px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms ease, visibility 0s linear 900ms;
    pointer-events: none;
}
.fl-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 900ms ease, visibility 0s linear 0s;
    pointer-events: auto;
}
.fl-hero-slide-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.fl-hero-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    display: block;
    transform: scale(1.06);
    transform-origin: 50% 50%;
    will-change: transform;
}
.fl-hero-slide.is-active .fl-hero-slide-bg img {
    animation: fl-ken-burns 22s ease-in-out both;
}
@keyframes fl-ken-burns {
    from { transform: scale(1.06) translate(0, 0); }
    to   { transform: scale(1.18) translate(-2%, -1.5%); }
}
.fl-hero-slide-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* left-side darkening so text on the left stays legible */
        linear-gradient(90deg, rgba(5, 7, 9, 0.92) 0%, rgba(5, 7, 9, 0.68) 40%, rgba(5, 7, 9, 0.35) 70%, rgba(5, 7, 9, 0.45) 100%),
        /* bottom darkening so the metadata row + CTA read cleanly */
        linear-gradient(180deg, rgba(5, 7, 9, 0.20) 0%, rgba(5, 7, 9, 0.15) 40%, rgba(5, 7, 9, 0.85) 100%),
        /* subtle acid tint in the top-left so the eyebrow still glows */
        radial-gradient(600px 260px at 10% 18%, rgba(217, 255, 63, 0.05), transparent 60%);
}
.fl-hero-slide-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 32px;
}
.fl-hero-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 3;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 0 32px;
}
.fl-hero-dot {
    all: unset;
    cursor: pointer;
    width: 32px;
    height: 3px;
    background: rgba(238, 241, 245, 0.25);
    transition: background 240ms ease, width 240ms ease;
    display: inline-block;
}
.fl-hero-dot:hover { background: rgba(238, 241, 245, 0.55); }
.fl-hero-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fl-hero-dot.is-active {
    background: var(--accent);
    width: 56px;
}

@media (prefers-reduced-motion: reduce) {
    .fl-hero-slide.is-active .fl-hero-slide-bg img { animation: none; }
    .fl-hero-slide { transition: none; }
}

/* Legacy .fl-hero (single-match hero) retained so any other page that
   uses it still renders — matches the old visual for those callers. */
.fl-hero {
    position: relative;
    min-height: 640px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 32px 48px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.fl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1200px 500px at 15% 20%, rgba(217, 255, 63, 0.06), transparent 60%),
        radial-gradient(900px 500px at 85% 80%, rgba(255, 77, 61, 0.08), transparent 60%),
        linear-gradient(180deg, #0a0d10 0%, #050709 100%);
    z-index: 0;
}
.fl-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 240px;
    background: repeating-linear-gradient(
        90deg,
        rgba(217, 255, 63, 0.04) 0px,
        rgba(217, 255, 63, 0.04) 1px,
        transparent 1px,
        transparent 40px
    );
    z-index: 0;
    opacity: 0.8;
}
.fl-hero > * { position: relative; z-index: 1; }
.fl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}
.fl-eyebrow .dot { width: 8px; height: 8px; background: var(--live); border-radius: 50%; animation: fl-blink 2s infinite; }
@keyframes fl-blink { 50% { opacity: 0.3; } }
.fl-hero-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    /* Tightened from 48/32 → the hero was overspaced. */
    margin: 24px 0 20px;
}
.fl-team { display: flex; flex-direction: column; gap: 8px; }
.fl-team-right { align-items: flex-end; text-align: right; }
.fl-team-flag { font-size: 36px; line-height: 1; }
.fl-team-name {
    font-family: Impact, 'Anton', 'Haettenschweiler', 'Franklin Gothic Medium', 'Arial Narrow Bold', sans-serif;
    /* Cap reduced from 96px → 68px so the ARSENAL FC / vs / COVENTRY CITY FC
       lockup doesn't fill the viewport on desktop. */
    font-size: clamp(36px, 5vw, 68px);
    letter-spacing: -0.005em;
    line-height: 0.9;
    text-transform: uppercase;
}
/* Single-team hero slides (concerts, single-act events) frequently ship
   long titles like "Formula 1 Spanish Grand Prix Madrid 2026 – 3-Day Pass".
   Template passes --title-len so we can shrink proportionally without
   pushing the venue/price meta below the fold. Safety cap at 4 lines. */
.fl-team-single .fl-team-name {
    font-size: clamp(32px, calc(2000px / max(var(--title-len, 14), 14)), 96px);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 0.9;
    text-wrap: balance;
}
/* Mobile sizes for the two rules above — these MUST sit below them in the
   file: the hero-mobile block at ~3300 predates the --title-len refactor
   and loses the equal-specificity source-order tie, which is how 96px
   single-event titles were clipping off phone-width slides on every brand
   (caught on oasis27 QA 2026-09-15). */
@media (max-width: 720px) {
    .fl-team-name { font-size: clamp(24px, 6.5vw, 40px); }
    .fl-team-single .fl-team-name { font-size: clamp(26px, 9vw, 40px); }
}
@media (max-width: 380px) {
    .fl-team-name { font-size: 22px; }
    .fl-team-single .fl-team-name { font-size: clamp(24px, 8.5vw, 34px); }
}
.fl-vs {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: var(--accent);
    font-size: 34px;
    letter-spacing: 0.02em;
    transform: skew(-8deg);
}
.fl-hero-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}
.fl-hero-meta dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 8px 40px;
}
.fl-hero-meta dt {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}
.fl-hero-meta dd {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.fl-hero-meta dd.price { color: var(--accent); font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 22px; letter-spacing: 0.02em; font-weight: 400; }
.fl-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Consumes brand button vars — falls back to accent-fill when not set. */
    background: var(--btn-primary-bg, var(--accent));
    color: var(--btn-primary-fg, #0a0d10);
    padding: 16px 28px;
    border: 1px solid transparent;
    border-radius: var(--btn-radius, 4px);
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 0.15s, filter 0.15s;
}
.fl-cta:hover { transform: translateY(-1px); filter: brightness(0.95); }
.fl-cta .arrow { font-family: 'Inter', system-ui; font-weight: 700; }

/* ==================== TRENDING STRIP ==================== */
.fl-trending {
    border-bottom: 1px solid var(--border);
    /* Match the 1200px content column so the chip row aligns visually
       with the carousel and event-card grid. justify-content centers
       the chips within that column. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.fl-trending::-webkit-scrollbar { height: 4px; }
.fl-trending::-webkit-scrollbar-thumb { background: var(--border); }
.fl-trending-label {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.fl-trending-chip {
    flex: none;
    border: 1px solid var(--border);
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.15s;
    white-space: nowrap;
}
.fl-trending-chip:hover { border-color: var(--accent); }
.fl-trending-chip .hot { color: var(--hot); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; }

/* ==================== SECTIONS ==================== */
.fl-section { padding: 64px 0 24px; }
.fl-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
}
.fl-section-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 48px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    font-weight: 400;
}
.fl-section-title .accent { color: var(--accent); }
.fl-section-more { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); transition: color 0.15s; }
.fl-section-more:hover { color: var(--accent); }

/* ==================== HOT NOW GRID ==================== */
.fl-hot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fl-card {
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color 0.15s, transform 0.15s;
    overflow: hidden;
    display: block;
}
.fl-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.fl-card-img {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    position: relative;
}
.fl-card-tag {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--bg);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 8px;
}
.fl-card-tag.hot { color: var(--hot); }
.fl-card-body { padding: 20px; }
.fl-card-date {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.fl-card-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    line-height: 1.2;
}
.fl-card-venue { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; }
.fl-card-footer { display: flex; align-items: flex-end; justify-content: space-between; }
.fl-card-price { display: flex; flex-direction: column; gap: 2px; }
.fl-card-price span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.fl-card-price strong { font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 24px; letter-spacing: 0.02em; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 400; }
.fl-card-listings { font-size: 12px; color: var(--text-muted); }

/* ==================== CATEGORY SLABS ==================== */
.fl-cats { padding: 24px 0 0; display: flex; flex-direction: column; gap: 4px; }
.fl-cat {
    display: grid;
    grid-template-columns: 320px 1fr;
    border: 1px solid var(--border);
    transition: border-color 0.2s;
}
/* Hover accent lives on the individual event card, not the whole row. */
.fl-cat-label {
    background: var(--surface);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    border-right: 1px solid var(--border);
}
.fl-cat-num {
    font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}
.fl-cat-name {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 40px;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: 0.005em;
    margin: 0;
    font-weight: 400;
}
.fl-cat-stat { font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.fl-cat-stat b { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.fl-cat-events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 20px;
    gap: 20px;
}
.fl-cat-event { display: flex; flex-direction: column; gap: 6px; padding: 4px; border: 1px solid transparent; transition: border-color 0.2s; }
.fl-cat-event:hover { border-color: var(--accent); }
.fl-cat-event-date { font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 400; }
.fl-cat-event-title { font-size: 14px; font-weight: 600; line-height: 1.25; margin: 0; }
.fl-cat-event-venue { font-size: 12px; color: var(--text-muted); margin: 0; }
.fl-cat-event-price { font-size: 12px; color: var(--text); font-family: ui-monospace, monospace; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fl-cat-events-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); font-size: 13px; padding: 24px; }
.fl-cat-events-empty a { color: var(--accent); }

/* 🔥 hot-pick badge on event cards inside curated category rows. */
.fl-hot-badge {
    display: inline-block;
    font-size: 12px; line-height: 1;
    margin-right: 2px;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.55));
    transform: translateY(-1px);
}
.fl-cat-event.is-hot .fl-cat-event-date { color: #ef4444; }

/* "Explore more" row — 12 subcategory tiles in a fixed grid so the cell
   fills evenly regardless of how much text each tile carries. Overrides
   the default .fl-cat-events 3-column layout because we want 4 columns
   of denser tiles (3 rows × 4 cols = 12 slots). */
.fl-subcat-grid {
    display: grid !important;
    /* 5 cols × 4 rows = 20 tiles (Siggi ask 2026-08-20). Steps down
       through 4/3/2 columns as viewport narrows. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 4px;
    align-content: stretch;
}
@media (max-width: 1200px) { .fl-subcat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .fl-subcat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .fl-subcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fl-subcat-tile {
    position: relative;
    display: block;                    /* image background lives on the outer, inner does content stacking */
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: color-mix(in oklab, var(--surface, #ffffff) 6%, transparent);
    background-size: cover;
    background-position: center;
    color: #fff;
    text-decoration: none;
    transition: border-color 140ms, transform 140ms, box-shadow 140ms;
    min-height: 130px;                 /* taller so the image can breathe */
    overflow: hidden;
    isolation: isolate;                /* the ::after overlay stays under content */
}
.fl-subcat-tile:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}
/* Dark gradient overlay so text stays legible over any photo. Even
   tiles without an image get the overlay so the layout is consistent. */
.fl-subcat-tile::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.1) 100%);
    z-index: 0;
}
.fl-subcat-tile:not(.has-img)::after {
    /* Nothing-to-cover tiles fall back to a muted branded gradient. */
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 25%, #0f172a), #0f172a);
}
.fl-subcat-tile-inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px;
    height: 100%;
    justify-content: flex-end;         /* content sits at the bottom over the image */
}
.fl-subcat-parent {
    font-family: Impact, 'Haettenschweiler', sans-serif;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    font-weight: 400;
}
.fl-subcat-name {
    font-size: 15px; font-weight: 700; line-height: 1.2;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.fl-subcat-count {
    font-size: 11px; color: rgba(255,255,255,0.8);
    font-variant-numeric: tabular-nums;
}
.fl-subcat-tile:hover .fl-subcat-parent { color: rgba(255,255,255,0.95); }

/* Search results grid — compact cards, ~5 per row on desktop, image-first.
   Deliberately smaller than the homepage hot-picks so we can pack more
   options in when a user has an explicit search intent. */
/* Search results are grouped: fl-search-grid is a vertical stack of
   fl-search-month-group blocks, each containing its own header + inner
   scroller. The scroller uses a responsive grid on desktop / tablet and
   flips to a horizontal swipe carousel on phone. */
.fl-search-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}
.fl-search-month-group { display: flex; flex-direction: column; gap: 8px; }
.fl-search-month-scroller {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1200px) { .fl-search-month-scroller { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .fl-search-month-scroller { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    /* Phone: 2-column vertical grid per month. Was originally a
       horizontal swipe carousel, but /search can dump 100+ events into
       a single month group (e.g. Aug 2026 with no filter → 185 rows
       all in that month). In a horizontal scroller, infinite-scroll's
       appended pages disappeared off-screen sideways — the user saw
       the spinner spin indefinitely with no vertical growth and thought
       pagination was broken (Siggi report 2026-08-19). A wrapping grid
       makes appended cards visible below the fold so the spinner reads
       as normal load progress. */
    .fl-search-month-scroller {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        overflow: visible;
    }
}
@media (max-width: 420px) {
    /* Very narrow phones: 2-column cards get too cramped for the
       venue/city line and price to breathe. Collapse to a single
       full-width column. */
    .fl-search-month-scroller {
        grid-template-columns: 1fr;
    }
}

/* Month header sits as a sibling of the scroller inside
   .fl-search-month-group. Reads as a landmark, not another card. */
.fl-search-month {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #eef1f5;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 400;
}
.fl-search-month-group:first-child .fl-search-month { margin-top: 0; }
/* PT variant — Nova Square, matches the rest of the storefront's h*. */
body[data-brand="premierseats"] .fl-search-month {
    font-family: 'Nova Square', sans-serif !important;
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.fl-search-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in oklab, var(--surface, #ffffff) 4%, transparent);
    /* overflow: hidden intentionally NOT set on the card — display fonts
       have wide left side bearings that would get clipped by the rounded
       corner. Clipping is delegated to the image container below so the
       background-image doesn't overflow the rounded top corners. */
    text-decoration: none;
    color: var(--text);
    transition: transform 140ms, border-color 140ms, box-shadow 140ms;
}
.fl-search-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.fl-search-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: color-mix(in oklab, var(--accent) 20%, #1a2540);
    background-image: linear-gradient(135deg, #1a3057, #331a2b);
    /* Round only the TOP corners — bottom stays square so it meets the
       body's flat top edge flush (no visible notch). !important guards
       against any brand override rules that set border-radius on all
       fl-* backgrounds. */
    border-radius: 10px 10px 0 0 !important;
    overflow: hidden;
}
.fl-search-card-img.is-placeholder {
    /* Muted gradient when no image — still readable date + category chip. */
    background-image: linear-gradient(135deg, #1e2b45, #12192b);
}
/* Photo <img> sized to fill the image container — reproduces the old
   background-size:cover behaviour but adds alt/lazy/decoding support.
   z-index:0 keeps it under the date/category chips and gradient scrim. */
.fl-search-card-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}
.fl-search-card-img::after {
    /* Stronger bottom scrim + a top-left dark cushion behind the date
       badge — Siggi 2026-08-20 flagged white titles + white date pill
       becoming unreadable on bright photos (was: bottom 45% at .55). */
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(140% 90% at 0% 0%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 30%),
        linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.fl-search-card-date {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    border-radius: 6px;
    padding: 6px 8px 4px;
    min-width: 40px;
    line-height: 1;
    font-family: Impact, 'Haettenschweiler', sans-serif;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.fl-search-card-dow { font-size: 9px; letter-spacing: 0.12em; color: #64748b; margin-bottom: 2px; }
.fl-search-card-day { font-size: 18px; font-weight: 700; }
.fl-search-card-mon { font-size: 9px; letter-spacing: 0.12em; color: #64748b; margin-top: 2px; }

.fl-search-card-cat {
    position: absolute; bottom: 10px; left: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 1;
}

.fl-search-card-body {
    display: flex; flex-direction: column;
    padding: 14px 16px 16px;
    gap: 4px;
    flex: 1;
    min-width: 0;
    /* Round the BOTTOM corners only — top stays square so it meets the
       image's flat bottom edge flush. !important as with the image rule. */
    border-radius: 0 0 10px 10px !important;
}
.fl-search-card-title {
    font-size: 14px; font-weight: 700; line-height: 1.3;
    margin: 0;
    /* Two-line soft clamp via max-height. We deliberately do NOT set
       overflow: hidden here — display fonts (Chakra Petch etc.) have
       negative left side bearings on caps like A/H/E/N/I/C, and any
       overflow:hidden on the text element shaves those bearings off,
       chopping the first letter of every wrapped line. Long titles
       (>2 lines) are extremely rare in this catalog, so visual overflow
       is preferable to universally-broken first letters. */
    max-height: calc(1.3em * 2);
    word-break: break-word;
}
.fl-search-card-venue {
    font-size: 11px; color: var(--text-muted); margin: 0;
    /* Same reasoning as .fl-search-card-title — no overflow:hidden to
       protect display-font side bearings. white-space: nowrap keeps
       venue on one line; long strings just cut off at the card edge
       (parent .fl-search-card doesn't have overflow:hidden anymore). */
    white-space: nowrap;
}
.fl-search-card-foot {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: auto; padding-top: 8px;
    border-top: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
.fl-search-card-price { font-size: 12px; color: var(--text-muted); display: inline-flex; gap: 4px; align-items: baseline; }
.fl-search-card-price strong { color: var(--text); font-size: 14px; }
.fl-search-card-price-off { color: var(--text-muted); }
.fl-search-card-count { font-size: 10px; color: var(--text-muted); }

/* Franchisee-uploaded background pattern.
   Fixed to viewport so it doesn't scroll away, sits under all content
   (z-index: 0 + all foreground elements have implicit stacking above).
   Individual style props (opacity/size/position) are set inline by
   layout.twig from the brand row so admins can tweak without a CSS edit.
   pointer-events: none guards clicks against the decorative layer. */
.fl-bg-pattern {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* background-image / opacity / size / position / repeat set inline. */
}
.fl-shell {
    /* Ensure content sits above the pattern layer. */
    position: relative;
    z-index: 1;
}
/* Explicitly lift the top-level container children so the pattern shows
   through the shell background but stays behind cards and content. */
body[data-brand] .fl-nav,
body[data-brand] .fl-container,
body[data-brand] .fl-content,
body[data-brand] .fl-footer,
body[data-brand] .fl-page-hero,
body[data-brand] .fl-section {
    position: relative;
    z-index: 2;
}

/* Infinite-scroll footer — the strip below a paginated grid holding the
   load-more button, loading indicator, and end-of-list message. Only one
   is visible at a time; the JS toggles between them. */
/* Infinite-scroll foot: lazy-load only. No "See more" button, no
   "end of results" text. When idle, empty (just a 48px scroll target
   for the IntersectionObserver). When loading, small centred label
   with a subtle inline spinner. The no-script link is hidden by JS
   on load — remains only for users who disable JS. */
.fl-infinite-foot {
    display: flex; justify-content: center; align-items: center;
    padding: 24px 16px;
    min-height: 48px;
}
.fl-load-more-noscript {
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: underline;
}
.fl-infinite-status {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    display: inline-flex; align-items: center; gap: 8px;
}
/* Explicit `[hidden]` override — the class-level `display: inline-flex`
   above outranks the UA `[hidden] { display: none }` rule (both 0,1,0,
   ours wins by later declaration), so infinite-scroll.js setting
   `.hidden = true` had no visual effect and the "Sæki fleiri…" spinner
   stayed on screen forever (Dean 2026-08-20). Specificity (0,2,0) here
   beats the class-level rule. */
.fl-infinite-status[hidden] { display: none; }
.fl-infinite-status::before {
    content: ""; display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: fl-spin 0.8s linear infinite;
}
@keyframes fl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .fl-infinite-status::before { animation: none; }
}

/* ==================== TRUST BAR ==================== */
.fl-trust {
    border-top: 1px solid var(--border);
    margin-top: 64px;
    padding: 32px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.fl-trust-item { display: flex; flex-direction: column; gap: 4px; padding: 0 20px; border-left: 1px solid var(--border); }
.fl-trust-item:first-child { border-left: 0; }
.fl-trust-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fl-trust-num { font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 32px; color: var(--accent); line-height: 1; letter-spacing: 0.005em; font-variant-numeric: tabular-nums; font-weight: 400; }
.fl-trust-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.fl-trust-note { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin-top: 4px; }
.fl-trust-icon { display: none; }

/* Icon-pill variant (Siggi PT ask 2026-08-20): rounded gradient card,
   items sit in a row with an icon on the left and stat+label stacked
   on the right. Kicks in whenever any trust_items row supplies an icon,
   so brands opt in via the admin form's icon column. */
.fl-trust.fl-trust-pill {
    border: 0 !important;
    padding: 22px 28px !important;
    /* Gradient spec from Siggi 2026-08-20 — matches premiertrips.is
       parent site exactly (fully opaque endpoints, cool off-white → slate). */
    background: linear-gradient(323deg, rgb(217, 217, 217) -106%, rgb(83, 98, 134));
    border-radius: 20px;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-columns: none;
    align-items: center;
    gap: 0;
    position: relative;
    /* Kill the 64px inherited from .fl-trust base so the pill sits closer
       to the content above (Siggi ask 2026-08-20). 32px matches the
       homepage's unified section rhythm; 10px bottom leaves a thin
       breathing gap above the footer instead of sitting flush. */
    margin-top: 32px;
    margin-bottom: 10px;
}
/* Footer margin collapses to 0 on pill-mode brands — the pill supplies
   its own 10px bottom gap. Scoped via :has so Ticketscore + Sambilet
   keep their default 64px breathing space. */
body:has(.fl-trust.fl-trust-pill) .fl-footer-full {
    margin-top: 0;
}
.fl-trust.fl-trust-pill .fl-trust-item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 0 26px;
    /* Divider between items rendered via a centred pseudo-element (not
       border-left) so the line is shorter than the pill's full height —
       matches premiertrips.is where dividers only span the middle 60%
       and don't kiss the pill's rounded corners. */
    position: relative;
    border-left: 0 !important;
}
.fl-trust.fl-trust-pill .fl-trust-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}
.fl-trust.fl-trust-pill .fl-trust-item:first-child::before { display: none; }
.fl-trust.fl-trust-pill .fl-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
}
.fl-trust.fl-trust-pill .fl-trust-num {
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    line-height: 1.1;
}
.fl-trust.fl-trust-pill .fl-trust-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}
.fl-trust.fl-trust-pill .fl-trust-note { display: none; }
@media (max-width: 720px) {
    .fl-trust.fl-trust-pill {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        padding: 18px !important;
        gap: 4px;
    }
    .fl-trust.fl-trust-pill .fl-trust-item {
        padding: 12px 4px;
        /* No internal dividers on mobile (Dean 2026-08-20) — the stacked
           rows read cleaner without them; both the horizontal border-top
           between rows and the vertical ::before line looked messy. */
        border-left: 0;
        border-top: 0;
    }
    .fl-trust.fl-trust-pill .fl-trust-item::before { display: none; }
    .fl-trust.fl-trust-pill .fl-trust-num { font-size: 20px; }
}

/* ==================== FOOTER ==================== */
.fl-footer {
    border-top: 1px solid var(--border);
    margin-top: 64px;
    padding: 40px 32px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.fl-footer-copy { font-size: 12px; color: var(--text-muted); }
.fl-footer-nav { display: flex; gap: 24px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.fl-footer-nav a { transition: color 0.15s; }
.fl-footer-nav a:hover { color: var(--accent); }
.fl-footer-socials { display: flex; gap: 12px; }
.fl-footer-socials a {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    transition: border-color 0.15s, color 0.15s;
}
.fl-footer-socials a:hover { border-color: var(--accent); color: var(--accent); }
.fl-footer-socials svg { width: 14px; height: 14px; }

/* ==================== WHATSAPP FLOAT ==================== */
.fl-wa-float {
    position: fixed;
    bottom: 20px; right: 20px;
    width: 56px; height: 56px;
    background: var(--wa);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);
    z-index: 100;
    transition: transform 0.15s;
}
.fl-wa-float:hover { transform: translateY(-2px); }
.fl-wa-float svg { width: 28px; height: 28px; }

/* ==================== SEARCH RESULTS ==================== */
.fl-results { padding: 32px 0 48px; }
.fl-results-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}
.fl-results-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 40px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 400;
}
.fl-results-title .accent { color: var(--accent); }
.fl-results-count { font-size: 12px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.fl-results-count b { color: var(--accent); font-family: Impact, 'Haettenschweiler', sans-serif; font-size: 18px; font-weight: 400; font-variant-numeric: tabular-nums; }

.fl-results-list { display: flex; flex-direction: column; }
.fl-result {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 32px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
    transition: background 0.15s;
}
.fl-result:hover { background: var(--surface); }
.fl-result-date {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    color: var(--accent);
    text-align: center;
    line-height: 1;
}
.fl-result-date .day { font-size: 12px; letter-spacing: 0.14em; color: var(--text-muted); }
.fl-result-date .num { font-size: 40px; margin: 4px 0; }
.fl-result-date .mo { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.fl-result-body h4 { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.fl-result-body p { margin: 0; font-size: 13px; color: var(--text-muted); }
.fl-result-cta {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fl-result:hover .fl-result-cta { border-color: var(--accent); background: var(--accent); color: #0a0d10; }
.fl-results-empty {
    padding: 80px 32px;
    text-align: center;
    border: 1px dashed var(--border);
    margin: 0 32px;
}
.fl-results-empty h3 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 32px;
    margin: 0 0 8px;
    font-weight: 400;
}
.fl-results-empty p { color: var(--text-muted); font-size: 14px; margin: 0 0 24px; }
.fl-results-empty a { color: var(--accent); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 960px) {
    /* .fl-navlinks display: none removed 2026-08-19 — the hamburger menu
       (built at max-width: 900px) needs the navlinks in the DOM to slide
       them open. This old rule silently defeated the mobile menu. */
    .fl-search { flex-wrap: wrap; }
    .fl-search .divider { display: none; }
    .fl-hero-title { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .fl-team-right { align-items: center; text-align: center; }
    .fl-vs { justify-self: center; }
    .fl-hero-meta { flex-direction: column; align-items: stretch; gap: 24px; }
    .fl-hero-meta dl { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
    .fl-hot-grid { grid-template-columns: 1fr; }
    .fl-cat { grid-template-columns: 1fr; }
    .fl-cat-label { border-right: 0; border-bottom: 1px solid var(--border); }
    .fl-cat-events { grid-template-columns: 1fr; }
    .fl-trust { grid-template-columns: 1fr 1fr; }
    .fl-section-title { font-size: 36px; }
    .fl-result { grid-template-columns: 80px 1fr; }
    .fl-result-cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
    .fl-container { padding: 0 20px; }
    .fl-nav { padding: 14px 20px; flex-wrap: wrap; }
    .fl-search { padding: 14px 20px; }
    .fl-hero { padding: 32px 20px 40px; min-height: auto; }
    .fl-trending { padding: 20px; }
    .fl-trust { grid-template-columns: 1fr; }
    .fl-footer { padding: 32px 20px; flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   SAMBILET LIGHT THEME
   ---------------------------------------------------------------------
   Overrides applied when body[data-brand="sambilet"] (or data-theme="light").
   Ticketscore is dark editorial; Sambilet is light editorial — same
   typography language + acid accent, inverted ground.

   Only overrides the highest-impact surfaces (body, nav, footer, cards,
   hero grounds). Deeper polish will come as the theme matures — anything
   not overridden falls through to the dark-brand rules above.
   ===================================================================== */
/* Sambilet — override the accent to a striking orange. Every rule that
   uses var(--accent) automatically switches. For hardcoded var(--accent) uses
   scattered across the older CSS we override the visible ones below. */
body[data-brand="sambilet"] {
    --accent: #ff6b18;
}

/* ────────── PremierSeats.is — Icelandic partnership brand ──────────
   Inherits the base dark theme (matches Ticketscore), but paints the
   Premiertrips.is family palette: deep navy ground, Google-blue accent. */
body[data-brand="premierseats"] {
    --accent:      #1a73e8;
    --bg:          #151f38;
    --surface:     #1a2540;
    --surface-2:   #1f2a44;
    --border:      #263452;
    --text-muted:  #94a3b8;
    --text-dim:    #3a4a6a;
}
body[data-brand="premierseats"] .fl-nav {
    background: #151f38;
    /* PT.is header has no visible divider — clean edge into the page. */
    border-bottom: 0;
    /* Constrain the flex content to PT.is's --max-width: 1320px, centered,
       while letting the header bg still span full viewport. Achieved with
       max() padding: at least 24px on the sides, plus whatever's needed to
       push the 1320px inner rail into the middle on wide viewports. */
    padding: 16px max(24px, calc((100vw - 1320px) / 2));
}

/* Distribute the nav like PT.is: logo LEFT | links CENTER | CTA RIGHT.
   flex:1 on the outer siblings collapses; giving the links block flex:1
   with justify-content:center pushes them dead-centre between the two. */
body[data-brand="premierseats"] .fl-navlinks {
    flex: 1;
    justify-content: center;
    gap: 36px;
}
/* Nav links use Nova Square on PT.is (not Inter). Matches .navbar__links a
   over there: 14px, 400, uppercase, no underline. !important to beat the
   layout.twig wildcard that force-applies --brand-font-primary. */
body[data-brand="premierseats"] .fl-navlinks a {
    font-family: 'Nova Square', sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0;
    padding: 4px 0;
    border: 0;
    transition: color 0.2s;
}
body[data-brand="premierseats"] .fl-navlinks a:hover { color: #fff; }
body[data-brand="premierseats"] .fl-navlinks a.on {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 6px;
}
body[data-brand="premierseats"] .fl-navlinks a.on::after { display: none; }

/* PT search bar — a single centred pill with a thick white border, no
   surrounding meta counters or "Leita" label. Applied via .fl-search-pt
   (rendered on premierseats). Overrides the default full-width bar look. */
body[data-brand="premierseats"] .fl-search.fl-search-pt {
    max-width: 720px;
    margin: 28px auto 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    display: block;
}
body[data-brand="premierseats"] .fl-search.fl-search-pt .fl-search-input {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    padding: 14px 26px;
    display: flex;
    align-items: center;
    transition: border-color 0.2s;
}
body[data-brand="premierseats"] .fl-search.fl-search-pt .fl-search-input:focus-within {
    border-color: #fff;
}
body[data-brand="premierseats"] .fl-search.fl-search-pt .fl-search-input input.q {
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 15px;
    width: 100%;
    padding: 0;
}
body[data-brand="premierseats"] .fl-search.fl-search-pt .fl-search-input input.q::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* ─── PT "Vinsælir viðburðir" section — mirrors premiertrips.is
   Hópaferðir treatment: gradient parent container, centred title flanked
   by horizontal rules, muted lede, "Sjá alla viðburði" CTA below. */
body[data-brand="premierseats"] .fl-section-pt-hot {
    /* Exact gradient from premiertrips.is .trips-card:
       linear-gradient(323deg, #d9d9d9 -106%, #536286)  */
    background: linear-gradient(323deg, #d9d9d9 -106%, #536286);
    max-width: 1320px;               /* PT --max-width */
    /* margin-top: 0 — PT hero supplies the 32px gap via its own
       padding-bottom. Was 40px which stacked to ~72 (Siggi 2026-08-20). */
    margin: 0 auto;
    border-radius: 24px;             /* PT --sp-card-radius */
    overflow: hidden;
    /* Container internal padding tightened from 60/40 → 32/32 so the
       header + cards + CTA don't float in a shaded band inside their
       own card. */
    padding: 32px clamp(20px, 4vw, 48px);
}
body[data-brand="premierseats"] .fl-pt-hot-header {
    text-align: center;
    max-width: 720px;
    /* Trimmed from 40 → 24 to match the 32px page rhythm. */
    margin: 0 auto 24px;
}
/* Title with horizontal lines flanking on both sides. Uses ::before/::after
   pseudo-elements so no extra markup needed. */
body[data-brand="premierseats"] .fl-pt-hot-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-family: 'Nova Square', sans-serif !important;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1;
}
body[data-brand="premierseats"] .fl-pt-hot-title::before,
body[data-brand="premierseats"] .fl-pt-hot-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
    max-width: 140px;
}
body[data-brand="premierseats"] .fl-pt-hot-lede {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}
/* "Sjá alla viðburði" CTA — matches PT.is "ALLAR HÓPAFERÐIR" — white
   outline pill on the darker gradient. */
body[data-brand="premierseats"] .fl-pt-hot-cta {
    display: inline-block;
    padding: 14px 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    color: #fff;
    font-family: 'Nova Square', sans-serif !important;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
body[data-brand="premierseats"] .fl-pt-hot-cta:hover {
    background: #fff;
    color: #0f172a;
}

/* ─────────────────────────────────────────────────────────────
   PT "Vinsælir viðburðir" cards — full-bleed image styling to
   mirror premiertrips.is trip cards. Image fills the whole card,
   red status pill top-right, bottom gradient overlay carries
   the price + team names in Nova Square. Listing count hidden
   per Siggi ask (2026-08-19).
   ───────────────────────────────────────────────────────────── */
body[data-brand="premierseats"] .fl-hot-grid {
    gap: 24px !important;
}
body[data-brand="premierseats"] .fl-hot-grid .fl-card {
    position: relative !important;
    aspect-ratio: 4 / 5;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #12253d !important;   /* dark fallback when no image */
    display: block !important;
    isolation: isolate;                /* keep pseudo-elements & pills contained */
}
body[data-brand="premierseats"] .fl-hot-grid .fl-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* Image fills the whole card, not just the top strip. */
body[data-brand="premierseats"] .fl-hot-grid .fl-card-img {
    position: absolute !important;
    inset: 0 !important;
    aspect-ratio: auto !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 0;
}
/* Bottom gradient scrim for text legibility. */
body[data-brand="premierseats"] .fl-hot-grid .fl-card-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 20, 40, 0) 35%,
        rgba(10, 20, 40, 0.55) 62%,
        rgba(10, 20, 40, 0.92) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Status pill top-right in PT red. Hide the FanSure chip on PT cards —
   it clutters the corner and PT covers guarantees under a separate mark. */
body[data-brand="premierseats"] .fl-hot-grid .fl-card-tag {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    background: #e2352c !important;    /* PT red */
    color: #fff !important;
    font-family: 'Nova Square', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    z-index: 3;
    line-height: 1.2 !important;
}
body[data-brand="premierseats"] .fl-hot-grid .fl-card-tag.hot {
    background: #e2352c !important;    /* keep red even for "hot pick" variant */
    color: #fff !important;
}
body[data-brand="premierseats"] .fl-hot-grid .fl-card-fansure {
    display: none !important;
}

/* Body sits absolute-bottom over the scrim. */
body[data-brand="premierseats"] .fl-hot-grid .fl-card-body {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 20px 22px 22px !important;
    z-index: 2;
    color: #fff !important;
    background: transparent !important;
}
body[data-brand="premierseats"] .fl-hot-grid .fl-card-date {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
    font-weight: 400 !important;
}
body[data-brand="premierseats"] .fl-hot-grid .fl-card-title {
    font-family: 'Nova Square', sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    margin: 4px 0 10px !important;
    text-wrap: balance;
}
/* Venue kept but muted; PT.is doesn't show it but it aids orientation. */
body[data-brand="premierseats"] .fl-hot-grid .fl-card-venue {
    display: none !important;
}
/* Footer — just price now, listing count hidden. */
body[data-brand="premierseats"] .fl-hot-grid .fl-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 4px !important;
}
body[data-brand="premierseats"] .fl-hot-grid .fl-card-price {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6px !important;
}
body[data-brand="premierseats"] .fl-hot-grid .fl-card-price span {
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 12px !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    font-weight: 400 !important;
}
body[data-brand="premierseats"] .fl-hot-grid .fl-card-price strong {
    font-family: 'Nova Square', sans-serif !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
}
body[data-brand="premierseats"] .fl-hot-grid .fl-card-listings {
    display: none !important;
}

/* Placeholder background when the event has no image at all — keep the
   card readable rather than showing an empty dark rectangle. */
body[data-brand="premierseats"] .fl-hot-grid .fl-card-img:not(.fl-card-img-photo) {
    background: linear-gradient(135deg, #1a2540 0%, #536286 100%) !important;
}

/* Tablet — 2 columns instead of 3 so cards keep their tall aspect. */
@media (max-width: 960px) {
    body[data-brand="premierseats"] .fl-hot-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* Phone: one card at a time in a native swipe carousel instead of a tall
   single-column stack (Dean 2026-08-20 — the stack made the page endless).
   CSS scroll-snap only, no JS: horizontal scroller, each card ~86% wide so
   the next one peeks and signals swipeability. Stays inside the gradient
   card's padding (the section has overflow:hidden, so no full-bleed). */
@media (max-width: 560px) {
    body[data-brand="premierseats"] .fl-hot-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        gap: 14px !important;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;              /* Firefox */
    }
    body[data-brand="premierseats"] .fl-hot-grid::-webkit-scrollbar { display: none; }
    body[data-brand="premierseats"] .fl-hot-grid > .fl-card {
        flex: 0 0 86% !important;
        scroll-snap-align: start;
        aspect-ratio: 3 / 4;
    }
}

/* Per-category "SPORTS" preview panels — hidden on PT. Each one shows
   the same 3 top upcoming events "Vinsælir viðburðir" already surfaces
   above with proper card design, so they read as duplicated content.
   Only the fl-cat-other panel (Kannaðu meira browse tiles) stays. */
body[data-brand="premierseats"] .fl-cat:not(.fl-cat-other) {
    display: none !important;
}

/* Outer "SKOÐA VIÐBURÐI / ALLIR VIÐBURÐIR →" section header removed on
   PT — Kannaðu meira has its own centred title, so this second title on
   top just reads as redundant. Also strip any wrapper gradient/padding
   from the .fl-cats container so the Kannaðu meira panel sits flush
   against the page background instead of nested inside a duplicate
   gradient shell. Safe to hide ALL .fl-section-header on PT — the only
   other section header (Vinsælir viðburðir) uses .fl-pt-hot-header. */
body[data-brand="premierseats"] .fl-section-header {
    display: none !important;
}
body[data-brand="premierseats"] .fl-cats {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
/* Breathing room around each PT section (Siggi 2026-08-20 — replaces
   the earlier padding:0 collapse, which he had me remove). */
body[data-brand="premierseats"] .fl-section {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}
/* Kill the base 64px/24px section padding — PT hides section headers,
   so it rendered as a dead band above "Kannaðu meira"; the 50px margins
   above supply the section gap instead. fl-section-pt-hot is excluded:
   it IS the gradient card and keeps its own 32px inset (a blanket zero
   here would win the cascade — equal specificity + !important, later
   in the file — over the pt-hot rule's padding). */
body[data-brand="premierseats"] .fl-section:not(.fl-section-pt-hot) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Same vertical rhythm for page containers — keep the base rule's
   `auto` sides so the 1280px column stays centered. */
body[data-brand="premierseats"] .fl-container {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

/* ── Uniform 32px section rhythm on PT homepage (Siggi 2026-08-20) ──
   Everything from hero → Vinsælir viðburðir → Netgíró → Kannaðu meira
   → Trust pill sits on the same vertical gap. .fl-pt-hero supplies
   the 32px above its next sibling via padding-bottom, so each
   downstream section's margin-top is 0 (no compounding) EXCEPT the
   trust pill which retains its own margin so it can sit at whatever
   distance from the footer we want.
   Applied via :has() so PT-only — Ticketscore/Sambilet keep their
   respective section rhythms. */
body[data-brand="premierseats"] .fl-hero-carousel {
    margin-top: 0 !important;
}
/* Netgíró wrapper — was inline `margin: 32px 0 8px` (asymmetric).
   Now uses the shared 32px rhythm: 32 above (gap from hero carousel),
   0 below (Kannaðu meira supplies its own 32 top). */
.fl-netgiro-wrap { margin: 32px 0 0; }

/* ═══════════════════════════════════════════════════════════════════
   PT hero spotlight — one-event-wide featured carousel sitting BELOW
   the netgíró banner (Dean ask 2026-08-20). Reinstates the "Í
   sviðsljósinu" moment PT lost when the full-bleed dark carousel was
   suppressed, but in PT's own visual language: the same rounded
   gradient card as "Kannaðu meira" so it feels part of the page
   rather than a bolt-on third-party takeover.
   ═══════════════════════════════════════════════════════════════════ */
/* Sits INSIDE .fl-container, which already caps width at 1280 and pads 32px
   on each side. Adding its own max-width + padding here inset the card 64px
   narrower than the netgíró banner sibling above it (Dean report
   2026-08-20). Just handle vertical rhythm and let the parent do the width. */
body[data-brand="premierseats"] .fl-pt-spotlight {
    margin: 32px 0 0;
}
/* Stage is a fixed-height stacking context — every slide is absolutely
   positioned inside it so switching between slides is a pure opacity
   crossfade, not a re-layout. Prevents the height "jump" when adjacent
   slides have different content lengths (long team names, missing venue,
   etc.). */
body[data-brand="premierseats"] .fl-pt-spotlight-stage {
    position: relative;
    background: linear-gradient(323deg, #d9d9d9 -106%, #536286);
    border-radius: 24px;
    overflow: hidden;
    height: 380px;
}
body[data-brand="premierseats"] .fl-pt-spotlight-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms ease;
}
body[data-brand="premierseats"] .fl-pt-spotlight-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
/* Media panel — beat the site-wide `body[data-brand] [class^="fl-"]
   { border-radius: var(--brand-radius) !important }` blanket in
   layout.twig. Without this override the media picks up a 24px radius,
   and its own `overflow: hidden` then clips the img to a curve on all
   four corners — visible as rounded top/bottom-right where the image
   meets the body panel. The parent .fl-pt-spotlight-stage handles the
   outer left rounding via its own overflow:hidden. */
body[data-brand="premierseats"] .fl-pt-spotlight-media {
    position: relative;
    background: #1a2033;
    overflow: hidden;
    border-radius: 0 !important;
}
body[data-brand="premierseats"] .fl-pt-spotlight-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
body[data-brand="premierseats"] .fl-pt-spotlight-body {
    padding: 32px clamp(20px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    color: #fff;
}
body[data-brand="premierseats"] .fl-pt-spotlight-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}
body[data-brand="premierseats"] .fl-pt-spotlight-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7dd3fc;
    box-shadow: 0 0 0 3px rgba(125,211,252,0.25);
}
body[data-brand="premierseats"] .fl-pt-spotlight-name {
    font-family: 'Nova Square', Impact, sans-serif;
    font-size: clamp(24px, 3.4vw, 40px);
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
    text-wrap: balance;
}
body[data-brand="premierseats"] .fl-pt-vs {
    display: inline-block;
    font-size: 0.55em;
    color: rgba(255,255,255,0.6);
    padding: 0 6px;
    vertical-align: middle;
}
body[data-brand="premierseats"] .fl-pt-spotlight-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 4px 0 0;
    padding: 0;
}
body[data-brand="premierseats"] .fl-pt-spotlight-meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body[data-brand="premierseats"] .fl-pt-spotlight-meta dt {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
body[data-brand="premierseats"] .fl-pt-spotlight-meta dd {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body[data-brand="premierseats"] .fl-pt-spotlight-meta dd.price {
    font-size: 18px;
    color: #7dd3fc;
    font-variant-numeric: tabular-nums;
}
body[data-brand="premierseats"] .fl-pt-spotlight-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}
body[data-brand="premierseats"] .fl-pt-spotlight-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: #fff;
    color: #1a2033;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-decoration: none;
    border-radius: 999px;
    transition: transform 160ms ease, background 160ms ease;
}
body[data-brand="premierseats"] .fl-pt-spotlight-cta:hover {
    transform: translateY(-1px);
    background: #7dd3fc;
    color: #0f1729;
}
body[data-brand="premierseats"] .fl-pt-spotlight-cta .arrow {
    transition: transform 160ms ease;
}
body[data-brand="premierseats"] .fl-pt-spotlight-cta:hover .arrow {
    transform: translateX(3px);
}
body[data-brand="premierseats"] .fl-pt-spotlight-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
body[data-brand="premierseats"] .fl-pt-spotlight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: background 160ms ease, transform 160ms ease;
}
body[data-brand="premierseats"] .fl-pt-spotlight-dot:hover {
    background: rgba(255,255,255,0.5);
}
body[data-brand="premierseats"] .fl-pt-spotlight-dot.is-active {
    background: #7dd3fc;
    transform: scale(1.25);
}

@media (max-width: 720px) {
    body[data-brand="premierseats"] .fl-pt-spotlight-stage {
        height: 560px;
    }
    body[data-brand="premierseats"] .fl-pt-spotlight-slide {
        grid-template-columns: 1fr;
        grid-template-rows: 220px 1fr;
    }
    body[data-brand="premierseats"] .fl-pt-spotlight-body {
        padding: 20px 20px 24px;
    }
    body[data-brand="premierseats"] .fl-pt-spotlight-meta {
        grid-template-columns: 1fr 1fr;
    }
}
@media (prefers-reduced-motion: reduce) {
    body[data-brand="premierseats"] .fl-pt-spotlight-slide { transition: none; }
    body[data-brand="premierseats"] .fl-pt-spotlight-cta   { transition: none; }
}

/* .fl-cat-other ("Kannaðu meira") — PT-scoped compact panel with the PT.is
   gradient. Tightened significantly so the header doesn't leave a huge
   empty area above the tiles. Single-column stack with tile grid below. */
body[data-brand="premierseats"] .fl-cat {
    background: linear-gradient(323deg, #d9d9d9 -106%, #536286);
    border-radius: 24px;
    border: 0;
    overflow: hidden;
    grid-template-columns: 1fr;
    padding: 32px clamp(20px, 4vw, 40px);
    /* No own margin — the .fl-section wrapper's 50px margins carry the
       section rhythm now; this 32px was stacking on top of them (flex
       parent, so it never collapsed) and bloating the gap above
       "Kannaðu meira". */
    margin-top: 0;
}
body[data-brand="premierseats"] .fl-cat:hover { border-color: transparent; }
/* Kill the inline cat_left_bg_start/end gradient layout.twig injects with
   !important — that was the "silly" inner white panel behind the header.
   Match the Vinsælir viðburðir treatment: header text sits directly on the
   outer PT gradient, no inner box. */
body[data-brand="premierseats"] .fl-cat-label {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
    padding: 0 0 24px !important;
    text-align: center !important;
    display: block !important;
    border-radius: 0 !important;
}
/* The inline rule sets `* { color: ... !important }` on all label children,
   forcing dark text on the panel — override to white for PT. */
body[data-brand="premierseats"] .fl-cat-label,
body[data-brand="premierseats"] .fl-cat-label * {
    color: #fff !important;
}
body[data-brand="premierseats"] .fl-cat-label .fl-cat-stat {
    color: rgba(255, 255, 255, 0.8) !important;
}
body[data-brand="premierseats"] .fl-cat-label .fl-cat-stat b {
    color: #fff !important;
}
/* Hide the "01 / SPORTS" numbering line — reads as clutter on the panel
   when the tiles below already communicate the category. */
body[data-brand="premierseats"] .fl-cat-num { display: none; }
body[data-brand="premierseats"] .fl-cat-name {
    color: #fff;
    font-family: 'Nova Square', sans-serif !important;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0 0 12px;
    line-height: 1;
}
body[data-brand="premierseats"] .fl-cat-name::before,
body[data-brand="premierseats"] .fl-cat-name::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    max-width: 120px;
}
body[data-brand="premierseats"] .fl-cat-stat {
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: none;
}
body[data-brand="premierseats"] .fl-cat-stat b {
    color: #fff;
    font-weight: 700;
}
/* Tile grid container — layout.twig injects a cat_right_bg gradient on
   .fl-cat-events with !important. Same specificity as `body[data-brand]
   .fl-cat-events`, but layout.twig's rule sits in an inline <style> that
   loads AFTER this external CSS, so it wins the tie unless we out-specify
   it. Chain .fl-cats > .fl-cat > .fl-cat-events to add two class points
   and beat the inline rule. */
body[data-brand="premierseats"] .fl-cats > .fl-cat > .fl-cat-events {
    gap: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
}
/* Same specificity issue on .fl-cat-label — force override with the same
   ancestor chain so PT's transparent header survives. */
body[data-brand="premierseats"] .fl-cats > .fl-cat > .fl-cat-label {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
}
body[data-brand="premierseats"] .fl-subcat-grid {
    /* 5×4 grid to match the 20-tile pool (Siggi 2026-08-20). */
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}
@media (max-width: 1200px) {
    body[data-brand="premierseats"] .fl-subcat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 900px) {
    body[data-brand="premierseats"] .fl-subcat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 640px) {
    body[data-brand="premierseats"] .fl-subcat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 420px) {
    body[data-brand="premierseats"] .fl-subcat-grid {
        grid-template-columns: 1fr;
    }
}

/* PT subcategory tiles — ditch the mixed image treatment (subcategory
   coverage is patchy and half fall back to the same "kids football"
   placeholder, which reads as broken). All tiles use the same PT
   gradient with tidy centred text — reads as an intentional palette
   of browse chips rather than a busted gallery. */
body[data-brand="premierseats"] .fl-subcat-tile,
body[data-brand="premierseats"] .fl-subcat-tile.has-img {
    /* Tile gradient spec from Siggi 2026-08-20 — matches the parent
       premiertrips.is cards. Deep navy diagonal, mostly opaque so it
       covers any leaked photo background from the base rule. */
    background-image: linear-gradient(165deg, rgba(28, 40, 64, 0.92), rgba(14, 20, 34, 0.96)) !important;
    background-color: #0e1422 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    min-height: 96px !important;
    transition: transform 140ms, border-color 140ms, box-shadow 140ms;
}
body[data-brand="premierseats"] .fl-subcat-tile:hover {
    border-color: rgba(255, 255, 255, 0.28) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
/* Drop the dark ::after scrim since there's no photo to darken. */
body[data-brand="premierseats"] .fl-subcat-tile::after {
    display: none !important;
}
body[data-brand="premierseats"] .fl-subcat-tile-inner {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 18px 16px !important;
    gap: 4px !important;
}
body[data-brand="premierseats"] .fl-subcat-parent {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    color: rgba(255, 255, 255, 0.62) !important;
    text-transform: uppercase !important;
    margin-bottom: 2px;
}
body[data-brand="premierseats"] .fl-subcat-name {
    font-family: 'Nova Square', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    white-space: normal !important;      /* let long names wrap gracefully */
    line-height: 1.15 !important;
    text-shadow: none !important;
    text-overflow: clip !important;
    overflow: visible !important;
}
body[data-brand="premierseats"] .fl-subcat-count {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-top: 4px;
}

/* ─── Event detail page — PT restyle 2026-08-18 ────────────────────
   Removes the full-bleed hero (brand flag: event_hero_style=minimal),
   contains the entire page to the 1320px rail, and wraps the event
   summary in the same gradient card the homepage uses. */

/* Constrain the event page. Filter card + grid sit inside .fl-container
   (max-width 1280px minus 32px each side = 1216px inner width), so the
   hero has to hit the same 1216px so its outer edge aligns pixel-for-pixel
   with the cards below it. */
body[data-brand="premierseats"] .fl-detail-hero {
    max-width: 1216px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body[data-brand="premierseats"] .fl-detail-filters,
body[data-brand="premierseats"] .fl-detail-grid {
    max-width: 1216px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero: strip the full-width dark bar, replace with a rounded gradient
   card (same treatment as .fl-section-pt-hot and .fl-cat above). */
body[data-brand="premierseats"] .fl-detail-hero.fl-detail-hero-minimal {
    background: linear-gradient(323deg, #d9d9d9 -106%, #536286) !important;
    border-radius: 24px !important;
    padding: 32px 40px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    color: #fff !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}
/* Faded event photo — sits behind the gradient at low opacity so the
   hero card carries some identity without competing with the copy.
   --event-bg-image is set inline in the template when a venue/team
   image is available. Fades from full-right to transparent-left so
   the title area stays clean. */
body[data-brand="premierseats"] .fl-detail-hero.fl-detail-hero-minimal::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: var(--event-bg-image) !important;
    background-size: cover !important;
    background-position: center right !important;
    opacity: 0.28 !important;
    mask-image: linear-gradient(to left, black 0%, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 0%, black 40%, transparent 100%);
    z-index: -1;
    pointer-events: none;
}
body[data-brand="premierseats"] .fl-detail-hero.fl-detail-hero-minimal::after {
    display: none !important;
}
body[data-brand="premierseats"] .fl-detail-hero-inner {
    max-width: none !important;
    padding: 0 !important;
}
body[data-brand="premierseats"] .fl-detail-back {
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
}
body[data-brand="premierseats"] .fl-detail-back:hover { color: #fff !important; }
body[data-brand="premierseats"] .fl-detail-eyebrow {
    color: rgba(255, 255, 255, 0.75) !important;
}
body[data-brand="premierseats"] .fl-detail-title {
    color: #fff !important;
    font-family: 'Nova Square', sans-serif !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.02em !important;
}
body[data-brand="premierseats"] .fl-detail-vs {
    color: rgba(255, 255, 255, 0.55) !important;
}
/* Kill the base fl-detail-meta top border on PT — Siggi ask 2026-08-19.
   The horizontal rule between title and meta row read as clutter over
   the gradient hero card. Padding-top kept for breathing space. */
body[data-brand="premierseats"] .fl-detail-meta {
    border-top: 0 !important;
}
body[data-brand="premierseats"] .fl-detail-meta dt {
    color: rgba(255, 255, 255, 0.65) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}
body[data-brand="premierseats"] .fl-detail-meta dd {
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
}
body[data-brand="premierseats"] .fl-detail-meta dd.price {
    color: #fff !important;
    font-family: 'Nova Square', sans-serif !important;
}
body[data-brand="premierseats"] .fl-detail-fansure-link { display: none !important; }

/* Filter card — single row using CSS grid with subgrid rows.
   Every field's label snaps to the top row (14px baseline), every control
   snaps to the bottom row (44px baseline). No more ragged heights or
   floating checkbox. Together checkbox sits on the control row only —
   its column collapses when [hidden] is set (JS toggles based on qty>1). */
/* PT panel treatment — filters, listings, seatmap all share the same
   navy gradient (matches PT.is reference palette Siggi supplied) with
   white text throughout. Consolidated here so future panel additions
   inherit the treatment automatically. */
body[data-brand="premierseats"] .fl-detail-filters,
body[data-brand="premierseats"] .fl-listings,
body[data-brand="premierseats"] .fl-seatmap-inline {
    background: linear-gradient(165deg, #1c2840eb, #0e1422f5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}
/* Individual listing rows inherit the parent gradient (transparent bg)
   so the whole panel reads as one gradient. Base .fl-listing-row uses
   `background: var(--panel-card-bg)` — grey — which was defeating the
   parent gradient on PT. Rows keep the subtle divider so they stay
   distinguishable. Hover still swaps to the light inversion. */
body[data-brand="premierseats"] .fl-listing-row {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── "Sit together" toggle ──
   Pill switch instead of native checkbox — larger, PT-red when on,
   more prominent so users notice the default-on state. Applies at all
   viewport sizes, not just mobile. Together field sits under the qty
   picker in the grid (grid-area override further down). */
body[data-brand="premierseats"] .fl-detail-filters .fl-df-together {
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    align-self: start !important;
}
body[data-brand="premierseats"] .fl-detail-filters .fl-together-label,
body[data-brand="premierseats"] .fl-listings-toolbar .fl-together-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer;
    font-size: 13px !important;
    color: #fff !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    white-space: normal !important;
}
body[data-brand="premierseats"] #filter-together {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 42px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    margin: 0 !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
body[data-brand="premierseats"] #filter-together::before {
    content: "" !important;
    position: absolute !important;
    width: 20px !important;
    height: 20px !important;
    top: 2px !important;
    left: 2px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: transform 0.15s !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
body[data-brand="premierseats"] #filter-together:checked {
    /* Brand accent (franchisee-set via look & feel), not PT red — the
       red toggle read as a warning state (Dean 2026-08-20). */
    background: var(--accent, #1a73e8) !important;
}
body[data-brand="premierseats"] #filter-together:checked::before {
    transform: translateX(18px) !important;
}
/* Any text inside these panels — headings, muted meta, subtitles —
   forced to white variants so the grey placeholder text is gone. */
body[data-brand="premierseats"] .fl-detail-filters *,
body[data-brand="premierseats"] .fl-listings *,
body[data-brand="premierseats"] .fl-seatmap-inline * {
    color: #fff;
}
/* Preserve muted / accent colours that carry meaning — labels above
   the filters, listing meta lines, seatmap hints stay slightly dimmer. */
body[data-brand="premierseats"] .fl-detail-filters .fl-df-field label,
body[data-brand="premierseats"] .fl-detail-filters .fl-qty-max,
body[data-brand="premierseats"] .fl-listing-row-meta,
body[data-brand="premierseats"] .fl-listings-empty p,
body[data-brand="premierseats"] .fl-seatmap-inline-sub {
    color: rgba(255, 255, 255, 0.65) !important;
}

body[data-brand="premierseats"] .fl-detail-filters {
    margin-top: 8px !important;
    padding: 18px 24px !important;
    display: grid !important;
    /* Single row: qty | price | zone. The "sit together" toggle moved
       to the listings toolbar (Siggi 2026-08-20), so the second grid
       row it used to occupy is gone — keeping it left an empty 12px
       row that pushed price/zone (then centered across both rows) out
       of line with qty. Currency picker lives in the header. */
    grid-template-columns:
        minmax(160px, 1fr)
        minmax(0, 1.6fr)
        minmax(0, 1.2fr) !important;
    grid-template-areas: "qty price zone" !important;
    column-gap: 22px !important;
    align-items: end !important;
}

/* Each field is a normal flex column (label above control). Only the
   primary fields (qty/price/zone) go through this — together toggle
   has its own styling (pill box) further down. */
body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field:not(.fl-df-together) {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
/* Explicit area placement — DOM order is qty / together / price / zone. */
body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field:nth-of-type(1) { grid-area: qty !important; }
body[data-brand="premierseats"] .fl-detail-filters > .fl-df-together              { grid-area: together !important; }
body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field:nth-of-type(3) { grid-area: price !important; }
body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field:nth-of-type(4) { grid-area: zone !important; }

body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field > label {
    margin: 0 0 4px !important;
    line-height: 1 !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* All primary controls: fixed 44px height for consistent baselines. */
body[data-brand="premierseats"] .fl-detail-filters .fl-qty,
body[data-brand="premierseats"] .fl-detail-filters .fl-zone-select,
body[data-brand="premierseats"] .fl-detail-filters input[type="range"].fl-range {
    height: 44px !important;
}

/* PT slider styling — thin white TRACK line, white thumb with PT-blue border.
   Input itself stays transparent + tall (keeps a big tap target); only the
   internal pseudo-track is white and only 4px high. Previous attempt set
   background:#fff on the input and produced a giant white blob because the
   input's own 44px height painted the whole area white. */
body[data-brand="premierseats"] .fl-detail-filters .fl-range {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
body[data-brand="premierseats"] .fl-detail-filters .fl-range::-webkit-slider-runnable-track {
    background: #ffffff !important;
    height: 4px !important;
    border-radius: 999px !important;
    border: 0 !important;
}
body[data-brand="premierseats"] .fl-detail-filters .fl-range::-moz-range-track {
    background: #ffffff !important;
    height: 4px !important;
    border-radius: 999px !important;
    border: 0 !important;
}
body[data-brand="premierseats"] .fl-detail-filters .fl-range::-webkit-slider-thumb {
    background: #ffffff !important;
    border: 2px solid #1a73e8 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    margin-top: -7px !important;   /* re-centre 18px thumb over the 4px track */
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
body[data-brand="premierseats"] .fl-detail-filters .fl-range::-moz-range-thumb {
    background: #ffffff !important;
    border: 2px solid #1a73e8 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer;
}
body[data-brand="premierseats"] .fl-detail-filters .fl-zone-trigger {
    height: 44px !important;
}
body[data-brand="premierseats"] .fl-detail-filters input[type="range"].fl-range {
    padding: 0 !important;
    margin: 0 !important;
}

/* Together field: no label, checkbox sits on control row only. Column
   auto-collapses when [hidden] via display:none. */
body[data-brand="premierseats"] .fl-detail-filters > .fl-df-together[hidden] {
    display: none !important;
}
body[data-brand="premierseats"] .fl-detail-filters > .fl-df-together .fl-together-label {
    grid-row: 2 !important;
    align-self: end !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    cursor: pointer;
}

/* Currency picker sits at the right end — compact. */
body[data-brand="premierseats"] .fl-detail-filters #filter-currency-picker {
    min-width: 90px !important;
    max-width: 120px !important;
    width: auto !important;
}

/* Below 900px: two rows (qty|price / zone|together+currency).
   Below 600px: fully stacked. */
@media (max-width: 900px) {
    body[data-brand="premierseats"] .fl-detail-filters {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
        row-gap: 14px !important;
    }
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field {
        grid-template-rows: 14px 44px !important;
        grid-row: auto !important;
    }
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-together {
        grid-column: 1 / -1 !important;
    }
}
@media (max-width: 600px) {
    body[data-brand="premierseats"] .fl-detail-filters {
        grid-template-columns: 1fr !important;
    }
}
body[data-brand="premierseats"] .fl-detail-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   Checkout form (/checkout/{id}) — rebuilt 2026-08-19 to match
   the rest of the PT restyle. Replaces the old Tailwind-based
   layout (bg-slate-* boxes + black button). Structure: back link
   → H1 + lede → PT gradient order summary card → form fields →
   red primary CTA. Styled site-wide so non-PT brands also get
   the coherent look, but PT gets the gradient + Nova Square.
   ───────────────────────────────────────────────────────────── */
.fl-checkout-wrap {
    max-width: 720px;
    margin: 0 auto;
}
.fl-checkout-back {
    display: inline-block;
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 24px;
    transition: color 0.15s;
}
.fl-checkout-back:hover { color: #fff; }
.fl-checkout-title {
    font-size: clamp(28px, 4vw, 36px);
    margin: 0 0 8px;
    color: #fff;
    line-height: 1.15;
}
.fl-checkout-lede {
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 28px;
    max-width: 560px;
}

/* Summary card — sits above the form. On PT this picks up the
   panel gradient from below via the brand override. */
.fl-checkout-summary {
    background: var(--panel-card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--panel-card-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
}
.fl-checkout-summary-head {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fl-checkout-event {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.25;
}
.fl-checkout-when {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}
.fl-checkout-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

/* Alerts */
.fl-checkout-alert {
    background: rgba(226, 53, 44, 0.12);
    border: 1px solid rgba(226, 53, 44, 0.4);
    color: #ffd6d3;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}
.fl-checkout-alert ul {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

/* Form container — same panel treatment as the summary above. */
.fl-checkout-form {
    background: var(--panel-card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--panel-card-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.fl-checkout-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fl-checkout-field > label {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.02em;
}
.fl-checkout-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 4px;
    line-height: 1.45;
}
.fl-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 560px) {
    .fl-checkout-grid { grid-template-columns: 1fr; }
}

/* Inputs — light-on-dark, not the browser-default black boxes. */
.fl-input,
.fl-checkout-form input[type="text"],
.fl-checkout-form input[type="email"],
.fl-checkout-form input[type="tel"],
.fl-checkout-form input:not([type]),
.fl-checkout-form select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.fl-checkout-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23fff' stroke-width='1.6' d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.fl-checkout-form input:focus,
.fl-checkout-form select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.09);
}
.fl-checkout-form input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.fl-checkout-qty { max-width: 140px; }

.fl-checkout-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 4px;
}
.fl-checkout-foot-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}
.fl-checkout-cta {
    white-space: nowrap;
}
@media (max-width: 560px) {
    .fl-checkout-foot { flex-direction: column; align-items: stretch; }
    .fl-checkout-cta { width: 100%; justify-content: center; }
}

/* PT-specific tweaks: summary uses PT gradient panel, form uses
   the slightly lighter panel treatment, CTA sits as PT red pill. */
body[data-brand="premierseats"] .fl-checkout-summary,
body[data-brand="premierseats"] .fl-checkout-form {
    background: linear-gradient(323deg, rgba(217, 217, 217, 0.06) -60%, rgba(83, 98, 134, 0.35)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body[data-brand="premierseats"] .fl-checkout-title {
    font-family: 'Nova Square', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
body[data-brand="premierseats"] .fl-checkout-event {
    font-family: 'Nova Square', sans-serif !important;
    text-transform: uppercase;
}
body[data-brand="premierseats"] .fl-checkout-cta {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 14px 36px !important;
    font-family: 'Nova Square', sans-serif !important;
    letter-spacing: 0.05em;
    border: 0 !important;
}
body[data-brand="premierseats"] .fl-checkout-cta:hover {
    filter: brightness(0.92);
}

/* ─────────────────────────────────────────────────────────────
   Cart page (/cart) — PT restyle 2026-08-19. Fixes visible in
   Siggi's screenshot: solid-black input boxes, ugly ruled
   SAMTALS divider, unnecessarily loud full-width hero.
   ───────────────────────────────────────────────────────────── */

/* Trim the giant page-hero on the cart — just a compact title works.
   The order-summary card already frames the flow visually. */
body[data-brand="premierseats"] .fl-page-hero:has(.fl-page-title) {
    padding: 40px 20px 24px !important;
    background: transparent !important;
}
body[data-brand="premierseats"] .fl-page-hero .fl-page-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    color: rgba(255, 255, 255, 0.55) !important;
}
body[data-brand="premierseats"] .fl-page-hero .fl-page-title {
    font-size: clamp(30px, 4.5vw, 48px) !important;
    letter-spacing: 0.02em;
}

/* Cart blocks — use the same PT panel gradient as the rest of the site
   instead of the default dark surface. Exclude .fl-cart-notice — that
   div carries the franchisee's checkout_notice_html with its own amber
   warning styling (background/color set inline in the template); if we
   overwrite the background here the dark-brown notice text becomes
   invisible on the dark gradient. */
body[data-brand="premierseats"] .fl-cart-block:not(.fl-cart-notice) {
    background: linear-gradient(323deg, rgba(217, 217, 217, 0.06) -60%, rgba(83, 98, 134, 0.35)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
}

/* Kill the solid-black input boxes — light-on-dark treatment matches
   the checkout form + event page filter card. */
body[data-brand="premierseats"] .fl-cart-field input,
body[data-brand="premierseats"] .fl-cart-form input[type="text"],
body[data-brand="premierseats"] .fl-cart-form input[type="email"],
body[data-brand="premierseats"] .fl-cart-form input[type="tel"],
body[data-brand="premierseats"] .fl-cart-form input:not([type]),
body[data-brand="premierseats"] .fl-cart-form select,
body[data-brand="premierseats"] .fl-phone input,
body[data-brand="premierseats"] .fl-phone select {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    color: #fff !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    -webkit-appearance: none;
    appearance: none;
}
body[data-brand="premierseats"] .fl-cart-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23fff' stroke-width='1.6' d='M1 1l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
}
body[data-brand="premierseats"] .fl-cart-field input:focus,
body[data-brand="premierseats"] .fl-cart-form input:focus,
body[data-brand="premierseats"] .fl-cart-form select:focus,
body[data-brand="premierseats"] .fl-phone input:focus,
body[data-brand="premierseats"] .fl-phone select:focus {
    border-color: rgba(255, 255, 255, 0.42) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    outline: none !important;
}
body[data-brand="premierseats"] .fl-cart-field input::placeholder,
body[data-brand="premierseats"] .fl-phone input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}
body[data-brand="premierseats"] .fl-cart-field label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Phone group — align country picker + number height/border with
   the rest of the inputs. */
body[data-brand="premierseats"] .fl-phone {
    display: flex !important;
    gap: 8px !important;
}
body[data-brand="premierseats"] .fl-phone-country {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
    height: 44px !important;
}
body[data-brand="premierseats"] .fl-phone-country select {
    background: transparent !important;
    border: 0 !important;
    padding: 0 20px 0 4px !important;
    height: 40px !important;
    color: #fff !important;
    min-width: 78px;
}
body[data-brand="premierseats"] .fl-phone input { flex: 1 1 auto !important; }

/* SAMTALS — kill the harsh top rule, use a soft divider with more
   breathing room. Total line switches to Nova Square for weight and
   the value inherits accent from PT theme. */
body[data-brand="premierseats"] .fl-cart-total {
    border-top: 0 !important;
    padding-top: 16px !important;
    margin-top: 12px !important;
    position: relative;
    font-family: 'Nova Square', sans-serif !important;
    font-size: 22px !important;
    letter-spacing: 0.02em !important;
    color: #fff !important;
}
body[data-brand="premierseats"] .fl-cart-total::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.18) 20%,
        rgba(255,255,255,0.18) 80%,
        rgba(255,255,255,0) 100%);
}
body[data-brand="premierseats"] .fl-cart-total .fl-mono {
    color: #fff !important;
    font-family: 'Nova Square', sans-serif !important;
}
body[data-brand="premierseats"] .fl-cart-line { color: rgba(255, 255, 255, 0.82) !important; }
body[data-brand="premierseats"] .fl-cart-line small { color: rgba(255, 255, 255, 0.55) !important; }

/* Continue-to-payment CTA — brand accent pill (blue by Look & Feel).
   Reverted from PT red 2026-08-19 per Siggi ask so the cart CTA matches
   the site palette set in /hq/brand/settings. */
body[data-brand="premierseats"] .fl-cart-submit {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 16px 32px !important;
    font-family: 'Nova Square', sans-serif !important;
    letter-spacing: 0.05em !important;
    border: 0 !important;
    text-transform: uppercase;
    font-size: 15px !important;
}
body[data-brand="premierseats"] .fl-cart-submit:hover {
    filter: brightness(0.92);
}

/* Voucher input + apply — pick up the same input treatment. */
body[data-brand="premierseats"] .fl-cart-voucher {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}
body[data-brand="premierseats"] .fl-cart-voucher input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    color: #fff !important;
    height: 40px !important;
    padding: 0 12px !important;
}

/* Cart line-item cards ("Arsenal FC vs Chelsea FC" row) — the base
   .fl-cart-item uses a solid #0a0d10 near-black background that clashes
   against the PT gradient panel it sits inside. Swap for a subtle
   translucent panel that blends. */
body[data-brand="premierseats"] .fl-cart-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
}
body[data-brand="premierseats"] .fl-cart-item-title {
    color: #fff !important;
    font-family: 'Nova Square', sans-serif !important;
    text-transform: none;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}
body[data-brand="premierseats"] .fl-cart-item-meta,
body[data-brand="premierseats"] .fl-cart-item-seat {
    color: rgba(255, 255, 255, 0.72) !important;
}
body[data-brand="premierseats"] .fl-cart-item select.cart-qty {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 8px !important;
    height: 34px !important;
    padding: 0 10px !important;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'><path fill='none' stroke='%23fff' stroke-width='1.6' d='M1 1l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 28px !important;
}
body[data-brand="premierseats"] .fl-cart-item-price {
    color: #fff !important;
    font-family: 'Nova Square', sans-serif !important;
    font-weight: 400 !important;
}
body[data-brand="premierseats"] .fl-cart-item-remove {
    color: #ff4d3d !important;
}
body[data-brand="premierseats"] .fl-cart-item-remove:hover {
    color: #e2352c !important;
}

/* Native <option> elements don't inherit our white text on the light
   OS-drawn dropdown panel — they render white-on-white and vanish.
   Force dark text so the open dropdown is readable. Applies to every
   select on PT since the fix is universally correct. */
body[data-brand="premierseats"] select option {
    color: #1a2540 !important;
    background: #fff !important;
}

/* Terms + marketing toggles — the switches sit inside the form panel;
   base #b8c0cc text is fine on dark, but the divider rule above them
   uses the same harsh #262d38 as SAMTALS. Soften to match. */
body[data-brand="premierseats"] .fl-cart-toggles {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body[data-brand="premierseats"] .fl-cart-toggle {
    color: rgba(255, 255, 255, 0.82) !important;
}
body[data-brand="premierseats"] .fl-cart-toggle a {
    color: #ff8b7f !important;   /* soft PT-red for links inside the toggle */
    text-decoration: underline;
}
/* Ensure the switch track has visible contrast in its OFF state on PT
   panels — the default #262d38 disappears against the panel gradient. */
body[data-brand="premierseats"] .fl-switch > span {
    background: rgba(255, 255, 255, 0.22) !important;
}
body[data-brand="premierseats"] .fl-switch input:checked + span {
    /* Use the brand accent (set in /hq/brand/settings Look & Feel) —
       reverted from PT red 2026-08-19 per Siggi ask, keeps the terms
       toggle on the cart matching the site's blue palette. */
    background: var(--accent) !important;
}
body[data-brand="premierseats"] .fl-switch input:checked + span::before {
    background: #fff !important;
}

/* Error banner — make sure a validation failure is impossible to miss
   on PT. Base .fl-cart-error blends into the panel; give it a proper
   red panel and larger text so users see "You must agree to terms". */
body[data-brand="premierseats"] .fl-cart-error {
    background: rgba(226, 53, 44, 0.15) !important;
    border: 1px solid rgba(226, 53, 44, 0.55) !important;
    color: #ffd6d3 !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────────
   Order pages (/orders/{ref}, /orders/{ref}/pay, /checkout/external/cancel)
   — restyled 2026-08-19 to drop the Tailwind bg-white / bg-blue-50 /
   bg-amber-50 boxes and adopt the same PT panel treatment as the cart
   and checkout pages. Structure: eyebrow → big monospace ref → status
   pill → status callout → tickets panel with totals.
   ───────────────────────────────────────────────────────────── */
.fl-order-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}
.fl-order-ref {
    font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: clamp(24px, 4vw, 34px);
    color: #fff;
    letter-spacing: 0.02em;
    margin: 0 0 20px;
    line-height: 1.15;
}
.fl-order-status-row { margin-bottom: 20px; }
.fl-order-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Status colours — tinted backgrounds with matching text, readable on dark. */
.fl-order-status-pending     { background: rgba(245, 158, 11, 0.18); color: #ffd48a; border: 1px solid rgba(245, 158, 11, 0.4); }
.fl-order-status-paid        { background: rgba(59, 130, 246, 0.18); color: #a8c8ff; border: 1px solid rgba(59, 130, 246, 0.4); }
.fl-order-status-transferred { background: rgba(168, 85, 247, 0.18); color: #d4b5ff; border: 1px solid rgba(168, 85, 247, 0.4); }
.fl-order-status-confirmed   { background: rgba(34, 197, 94, 0.18);  color: #a8f0c1; border: 1px solid rgba(34, 197, 94, 0.4); }
.fl-order-status-refunded    { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.4); }
.fl-order-status-disputed    { background: rgba(239, 68, 68, 0.18); color: #ffbcb8; border: 1px solid rgba(239, 68, 68, 0.4); }
.fl-order-status-cancelled   { background: rgba(148, 163, 184, 0.12); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }

/* Status callout box — coloured panel matching the state. */
.fl-order-callout {
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.55;
}
.fl-order-callout p { margin: 0; color: inherit; }
.fl-order-callout-h {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}
.fl-order-callout-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 6px;
}
.fl-order-callout-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.fl-order-callout-pending     { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); color: #ffd48a; }
.fl-order-callout-paid        { background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.4); color: #cbdcff; }
.fl-order-callout-transferred { background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.4); color: #e6d4ff; }
.fl-order-callout-confirmed   { background: rgba(34, 197, 94, 0.12);  border: 1px solid rgba(34, 197, 94, 0.4); color: #c4f0d3; }
.fl-order-callout-pending .fl-order-callout-h     { color: #ffdea6; }
.fl-order-callout-paid .fl-order-callout-h        { color: #e0ecff; }
.fl-order-callout-transferred .fl-order-callout-h { color: #efe0ff; }
.fl-order-callout-confirmed .fl-order-callout-h   { color: #d8f5e2; }

/* Order-items list inside the tickets panel — same treatment as cart line
   items on PT (rounded translucent panel). */
.fl-order-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}
.fl-order-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    align-items: start;
}
.fl-order-item-info { min-width: 0; }
.fl-order-item-title {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
    line-height: 1.25;
}
.fl-order-item-meta {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin-bottom: 4px;
}
.fl-order-item-seat {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
}
.fl-order-item-price { text-align: right; min-width: 100px; }
.fl-order-item-qty {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    margin-bottom: 2px;
}
.fl-order-item-total {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

/* Order totals — reuses cart-summary line styling; PT overrides make
   SAMTALS use the soft fade divider automatically via existing rules. */
.fl-order-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fl-order-bookmark {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin-top: 20px;
    line-height: 1.55;
}

/* PT-specific — hero-eyebrow and monospace ref pick up Nova Square where
   Nova Square makes sense, but the ref itself stays monospace (it's a
   code/reference, not decorative). */
body[data-brand="premierseats"] .fl-order-tickets .fl-checkout-event {
    font-family: 'Nova Square', sans-serif !important;
    text-transform: uppercase;
}

/* "Bóka ferð" pill CTA — outlined white pill, filled on hover. Mirrors
   PT.is .navbar__cta exactly: Nova Square 14px, 9px 26px pad, 1.5px border. */
body[data-brand="premierseats"] .fl-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 26px;
    border-radius: 50px;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    background: transparent;
    color: #fff;
    font-family: 'Nova Square', sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0;
    transition: all 0.2s ease;
    white-space: nowrap;
}
body[data-brand="premierseats"] .fl-nav-cta:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* PT footer social icons — mirror premiertrips.is: plain inline icons,
   no bordered boxes, opacity as hover instead. */
body[data-brand="premierseats"] .fl-footer-socials {
    gap: 18px !important;
    margin-top: 22px !important;
}
body[data-brand="premierseats"] .fl-footer-socials a {
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    color: rgba(238, 241, 245, 0.85) !important;
    opacity: 0.75;
    transition: opacity 0.15s, color 0.15s;
}
body[data-brand="premierseats"] .fl-footer-socials a:hover {
    background: transparent !important;
    opacity: 1;
    color: #eef1f5 !important;
}
body[data-brand="premierseats"] .fl-footer-socials a svg {
    width: 22px;
    height: 22px;
}
/* ─── PT — page-wide body font + text rendering ────────────────────
   Mirrors premiertrips.is body{}:
     • font-family: Inter (with system fallbacks) — every non-heading
       element inherits this. h1-h6 and .fl-*-title etc. override to
       Nova Square below, matching PT's h*{font-family:Nova Square}.
     • Font-smoothing = antialiased (makes Inter render lighter/cleaner,
       which is why the same font-family looked "heavier" in our version
       without it).
     • Body BG uses their linear-gradient rather than a flat navy so the
       footer sits on the same tonal ground as the parent site. */
body[data-brand="premierseats"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: linear-gradient(162deg, #1f2a44 14%, #1f2a44c4 88%) !important;
    line-height: 1.6;
    color: #e2e8f0;   /* --pt-text */
}

/* ─── PT footer — mirrors premiertrips.is/_app/immutable/assets/0.*.css ─── */
/* Colors, sizes and grid ratios copied verbatim from their svelte styles. */
body[data-brand="premierseats"] .fl-footer-full {
    background: #1a2540;                            /* var(--pt-footer-bg) */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #b4c8e6b3;                               /* muted blue body */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body[data-brand="premierseats"] .fl-footer-cols {
    /* Logo column wider — 1.6:1:1 ratio matches their footer__cols. */
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 0 64px;
    padding: 60px 0 52px;
    max-width: 1280px;
}
/* Heading — Nova Square, white, matches their footer__col-title. */
body[data-brand="premierseats"] .fl-footer-heading {
    font-family: 'Nova Square', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 18px;
}
/* Body copy — Inter, muted blue, 14px, 1.6 line-height, 10px between items. */
body[data-brand="premierseats"] .fl-footer-full ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body[data-brand="premierseats"] .fl-footer-full li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    color: #b4c8e6b3;
    line-height: 1.6;
    padding: 0;
}
/* Contact-column links — underlined with subtle rule, hover white. */
body[data-brand="premierseats"] .fl-footer-contact a {
    color: #b4c8e6d9;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #b4c8e659;
    transition: color 0.2s, text-decoration-color 0.2s;
}
body[data-brand="premierseats"] .fl-footer-contact a:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.6);
}
/* Legal-column links — no underline, hover white (matches footer__links). */
body[data-brand="premierseats"] .fl-footer-full ul a:not([href^="mailto"]):not([href^="tel"]):not([href^="http"]),
body[data-brand="premierseats"] .fl-footer-full ul li:not(.fl-footer-contact-li) a[href*="premiertrips.is"] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    color: #b4c8e6b3;
    text-decoration: none;
    padding: 0;
    display: inline;
}
body[data-brand="premierseats"] .fl-footer-full ul a:hover {
    color: #fff;
}
/* Bottom row — matches footer__bottom. */
body[data-brand="premierseats"] .fl-footer-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 0;
    max-width: 1280px;
    color: #b4c8e6b3;
}
body[data-brand="premierseats"] .fl-footer-legal p {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    color: #b4c8e6b3;
    margin: 0;
}
body[data-brand="premierseats"] .fl-footer-badge img {
    /* Their HTML sets width=120 height=160 explicitly on the img. */
    width: 120px;
    height: 160px;
}
/* Removed 2026-08-11: hardcoded per-brand button overrides. Buttons
   now consume --btn-primary-bg / --btn-primary-fg from the brand row
   (layout.twig sets them; look-and-feel admin lets franchisees tweak
   them). The base .fl-cta / .fl-btn rules already fall back to the
   accent colour when a brand hasn't set anything, so no regression. */
body[data-brand="premierseats"] .fl-search { background: #151f38; border-bottom-color: #263452; }
/* Removed 2026-08-18: was hardcoding an older/darker navy that overrode
   the PT-matched #1a2540 rule earlier in this file. See the "PT footer"
   block above — that's the canonical footer background now. */

/* ══════════ PT redesign — 2026-08-18 Siggi ask ══════════
   Goal: identify PremierTrips in the first 500-600px of the page.
   Cards flip to light (cream) with dark text so the page reads as a
   parent-site section rather than a third-party ticket platform. #}

/* PT brand hero — clean title/eyebrow/lede stack above the search.
   Sits inside the standard content column so it aligns with the cards. */
body[data-brand="premierseats"] .fl-pt-hero {
    /* Bottom padding matches the standard 32px section rhythm (Siggi
       2026-08-20). The next section's margin-top is 0 on PT so the
       gap between hero and Vinsælir viðburðir is exactly this padding. */
    padding: 48px 32px 32px;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}
body[data-brand="premierseats"] .fl-pt-hero-inner {
    max-width: 640px;
    margin: 0 auto;
}
body[data-brand="premierseats"] .fl-pt-hero-title {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #eef1f5;
    margin: 0 0 14px;
    font-weight: 400;
}
body[data-brand="premierseats"] .fl-pt-hero-eyebrow {
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: #eef1f5;
    margin: 0 0 8px;
}
body[data-brand="premierseats"] .fl-pt-hero-lede {
    font-size: 14px;
    color: rgba(238, 241, 245, 0.65);
    margin: 0;
    line-height: 1.55;
}

/* Light match cards — cream bg, dark text, pill-style CTA underneath.
   Overrides the panel-card + card sweeps for this brand only. */
body[data-brand="premierseats"] .fl-match-card {
    background: #f8f6ef !important;
    color: #0f172a !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 6px 22px rgba(10, 15, 30, 0.28) !important;
}
body[data-brand="premierseats"] .fl-match-title,
body[data-brand="premierseats"] .fl-match-card h3 {
    color: #0f172a !important;
}
body[data-brand="premierseats"] .fl-match-card .fl-match-title .vs {
    color: #1a73e8 !important;
}
body[data-brand="premierseats"] .fl-match-date {
    color: #64748b !important;
}
body[data-brand="premierseats"] .fl-match-venue {
    color: #475569 !important;
}
body[data-brand="premierseats"] .fl-match-price span {
    color: #64748b !important;
}
body[data-brand="premierseats"] .fl-match-price strong,
body[data-brand="premierseats"] .fl-match-price {
    color: #0f172a !important;
}
body[data-brand="premierseats"] .fl-match-listings {
    color: #64748b !important;
}
/* Competition/stage tag on grid cards — removed on PT along with the
   search-card category pill (Dean 2026-08-20). */
body[data-brand="premierseats"] .fl-match-tag {
    display: none !important;
}

/* Currency picker visually hidden but kept accessible for now — Siggi
   wants it moved into the filters (phase 2 build). .hidden class flips
   display so the whole label is out of the layout. */
body[data-brand="premierseats"] .fl-currency.hidden { display: none !important; }

/* Nav active state — for PT's external-URL nav, mark the self-link. */
body[data-brand="premierseats"] .fl-nav-left a.on {
    color: var(--accent, #1a73e8);
    position: relative;
}
body[data-brand="premierseats"] .fl-nav-left a.on::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    background: var(--accent, #1a73e8);
    border-radius: 2px;
}

/* Category + team quick-pills under the PT hero. Two rows: category
   (2 wide buttons) then team (6 outlined pills). Wrap on mobile. */
body[data-brand="premierseats"] .fl-pt-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 640px;
    margin: 20px auto 0;
    padding: 0 16px;
}
body[data-brand="premierseats"] .fl-pt-pills-team {
    /* Six team pills need ~840px to stay on a single line (Siggi
       2026-08-20). Widen container + nowrap on desktop; below 720px
       viewport we let flex-wrap kick back in so mobile still stacks. */
    max-width: 960px;
    margin-top: 12px;
    flex-wrap: nowrap;
}
@media (max-width: 720px) {
    body[data-brand="premierseats"] .fl-pt-pills-team {
        flex-wrap: wrap;
    }
}
body[data-brand="premierseats"] .fl-pt-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(238, 241, 245, 0.35);
    background: transparent;
    color: #eef1f5;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
    min-width: 120px;
}
body[data-brand="premierseats"] .fl-pt-pill:hover {
    border-color: rgba(238, 241, 245, 0.7);
    background: rgba(238, 241, 245, 0.06);
}
body[data-brand="premierseats"] .fl-pt-pill.is-active {
    background: #eef1f5;
    color: #0f172a;
    border-color: #eef1f5;
}
body[data-brand="premierseats"] .fl-pt-pills-team .fl-pt-pill {
    /* Shrink to content so 6 pills fit on one line (Siggi 2026-08-20).
       Padding tightened, min-width dropped — each pill sizes to its
       label. Whitespace-nowrap keeps "Man United" on one line inside
       the pill. */
    min-width: 0;
    padding: 8px 16px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Hamburger menu (mobile only). Three stacked bars; when body has
   .fl-nav-open they cross into an X and the nav slides open below. */
.fl-nav-toggle {
    display: none;                     /* desktop hides it entirely */
    width: 44px; height: 44px;
    background: transparent;
    border: 0;
    padding: 12px 10px;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: visible;                 /* X rotation shouldn't clip */
}
.fl-nav-toggle span {
    display: block;
    width: 16px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
    transform-origin: center;
}
/* X-transform: rotate the bars into an X. Smaller 16px bars with a 5px
   translate keeps the diagonals well inside the 44px tap area so nothing
   clips against the button/nav edge. */
body.fl-nav-open .fl-nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.fl-nav-open .fl-nav-toggle span:nth-child(2) { opacity: 0; }
body.fl-nav-open .fl-nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 900px) {
    /* Mobile nav layout: logo LEFT, cart middle-right, hamburger FAR RIGHT.
       CSS order forces the hamburger to be the last flex child regardless
       of DOM position (button sits between logo + navlinks in the HTML).
       z-index on .fl-nav itself lifts the whole nav bar above page content
       that was painting over the menu (event-page hero + filter cards). */
    .fl-nav {
        position: sticky !important;
        top: 0;
        z-index: 1000 !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        border-radius: 0 !important;   /* kill the [class^="fl-"] rounding at the nav corners so the X isn't clipped by the curve */
    }
    .fl-nav-toggle {
        display: flex;
        order: 999;
        margin-left: auto;
        margin-right: 4px;          /* small inset from nav's right edge */
        flex-shrink: 0;
        position: relative;
        z-index: 1001;              /* above the nav's z-index:1000 stacking context */
        border-radius: 0 !important; /* beat body[data-brand] [class^="fl-"] rounding */
    }
    .fl-logo { order: 1; flex-shrink: 0; }
    .fl-nav-right { order: 998; flex-shrink: 0; }

    /* Mobile menu — closed by default (display:none). All positioning +
       full-viewport overlay properties consolidated onto the OPEN state
       selector so nothing gets a chance to override the fixed layout. */
    .fl-nav .fl-navlinks {
        display: none;
    }
    body.fl-nav-open .fl-nav .fl-navlinks {
        display: flex !important;
        position: fixed !important;
        top: 62px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        flex-direction: column !important;
        justify-content: flex-start !important;   /* PT default is center — pushes items to middle */
        align-items: stretch !important;
        gap: 0 !important;
        background: #0f172a !important;
        opacity: 1 !important;                    /* beat any inherited opacity */
        border: 0 !important;
        border-radius: 0 !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        z-index: 999 !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
        transform: none !important;
        flex: none !important;                    /* PT sets flex:1 — irrelevant for fixed but tidy */
    }
    .fl-nav .fl-navlinks a {
        padding: 16px 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Hide the header currency picker on mobile — moved into hamburger drawer. */
    .fl-nav-right .fl-currency { display: none !important; }

    /* Currency picker inside the hamburger drawer — label left, select right. */
    .fl-nav-currency-menu {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 0 !important;
        color: rgba(255, 255, 255, 0.85);
        font-size: 13px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
    .fl-nav-currency-menu > span {
        color: rgba(255, 255, 255, 0.6);
        font-weight: 600;
    }
    .fl-nav-currency-menu select {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        color: #fff;
        font-size: 14px;
        padding: 8px 32px 8px 14px;
        min-width: 100px;
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23fff' stroke-width='1.6' d='M1 1l5 5 5-5'/></svg>");
        background-repeat: no-repeat;
        background-position: right 10px center;
    }
    .fl-nav-currency-menu select option {
        background: #fff;
        color: #1a2540;
    }
}

/* Desktop: the mobile-menu currency picker stays out of layout entirely. */
@media (min-width: 901px) {
    .fl-nav-currency-menu { display: none !important; }
}

/* PremierSeats logo — Premiertrips icon + two-line word-mark echoing
   their masthead: big "PREMIERSEATS" in Nova Square with the accent-blue
   period as an .is wink, tiny letter-spaced "BY PREMIERTRIPS TRAVEL" under.
   Icon lifted from premiertrips.is (their own asset), self-hosted. */
body[data-brand="premierseats"] .fl-ps-logo {
    font-family: 'Nova Square', 'Trebuchet MS', 'Verdana', sans-serif;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    line-height: 1;
    color: #ffffff;
    padding: 6px 0;
    white-space: nowrap;
}
body[data-brand="premierseats"] .fl-ps-icon {
    /* Bumped to match premiertrips.is header proportions — was 40px, felt
       small next to the wider nav row. */
    height: 52px;
    width: auto;
    display: block;
    flex: none;
}
body[data-brand="premierseats"] .fl-ps-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
body[data-brand="premierseats"] .fl-ps-main {
    font-size: 26px;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
}
body[data-brand="premierseats"] .fl-ps-dot {
    color: var(--accent);
}
body[data-brand="premierseats"] .fl-ps-sub {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 7.5px;
    letter-spacing: 0.28em;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 5px;
    text-transform: uppercase;
}
body[data-brand="premierseats"] .fl-logo-text-sm .fl-ps-icon { height: 28px; }
body[data-brand="premierseats"] .fl-logo-text-sm .fl-ps-main { font-size: 16px; }
body[data-brand="premierseats"] .fl-logo-text-sm .fl-ps-sub { font-size: 6px; margin-top: 3px; }

/* Nova Square across every display / heading / meta surface on PremierSeats.
   The base CSS ships ~50 Impact/Anton uses; we override each here so the
   Premiertrips typographic identity flows through the entire site.
   Body copy stays on Inter — Nova Square is used only where the base
   would have used Impact/Anton. */
body[data-brand="premierseats"] .fl-h1,
body[data-brand="premierseats"] .fl-h2,
body[data-brand="premierseats"] .fl-page-title,
body[data-brand="premierseats"] .fl-section-title,
body[data-brand="premierseats"] .fl-cat-name,
body[data-brand="premierseats"] .fl-cat-event,
body[data-brand="premierseats"] .fl-cat-event-date,
body[data-brand="premierseats"] .fl-team-name,
body[data-brand="premierseats"] .fl-vs,
body[data-brand="premierseats"] .fl-hero-meta dd.price,
body[data-brand="premierseats"] .fl-hero-meta,
body[data-brand="premierseats"] .fl-detail-title,
body[data-brand="premierseats"] .fl-detail-meta,
body[data-brand="premierseats"] .fl-selected-title,
body[data-brand="premierseats"] .fl-selected-amount,
body[data-brand="premierseats"] .fl-card-date,
body[data-brand="premierseats"] .fl-card-price,
body[data-brand="premierseats"] .fl-match-date,
body[data-brand="premierseats"] .fl-match-price,
body[data-brand="premierseats"] .fl-matches-count .num,
body[data-brand="premierseats"] .fl-matches-count,
body[data-brand="premierseats"] .fl-fixture-price,
body[data-brand="premierseats"] .fl-mf-field label,
body[data-brand="premierseats"] .fl-listing-amount,
body[data-brand="premierseats"] .fl-listings-empty h3,
body[data-brand="premierseats"] .fl-seatmap-inline-title,
body[data-brand="premierseats"] .fl-seatmap-legend-chip,
body[data-brand="premierseats"] .fl-step-num,
body[data-brand="premierseats"] .fl-trust-item,
body[data-brand="premierseats"] .fl-trust-num,
body[data-brand="premierseats"] .fl-trust-label,
body[data-brand="premierseats"] .fl-feature h3,
body[data-brand="premierseats"] .fl-faq-group-title,
body[data-brand="premierseats"] .fl-teams-group-title,
body[data-brand="premierseats"] .fl-empty h3,
body[data-brand="premierseats"] .fl-search-title,
body[data-brand="premierseats"] .fl-search-count,
body[data-brand="premierseats"] .fl-search-empty h3,
body[data-brand="premierseats"] .fl-search-row-title,
body[data-brand="premierseats"] .fl-search-row-count,
body[data-brand="premierseats"] .fl-results-title,
body[data-brand="premierseats"] .fl-results-count,
body[data-brand="premierseats"] .fl-results-empty h3,
body[data-brand="premierseats"] .fl-result-date,
body[data-brand="premierseats"] .fl-blog-card-meta,
body[data-brand="premierseats"] .fl-blog-card h3,
body[data-brand="premierseats"] .fl-article-title,
body[data-brand="premierseats"] .fl-article-meta,
body[data-brand="premierseats"] .fl-article-body h2,
body[data-brand="premierseats"] .fl-article-body h3,
body[data-brand="premierseats"] .fl-article-nav-item .label,
body[data-brand="premierseats"] .fl-cart-block-title,
body[data-brand="premierseats"] .fl-cart-block h2,
body[data-brand="premierseats"] .fl-cart-total,
body[data-brand="premierseats"] .fl-cart-total .fl-mono,
body[data-brand="premierseats"] .fl-cart-empty h3,
body[data-brand="premierseats"] .fl-cart-bundle h3,
body[data-brand="premierseats"] .fl-cart-bundle-eyebrow,
body[data-brand="premierseats"] .fl-pay-error-title,
body[data-brand="premierseats"] .fl-contact-tile-label,
body[data-brand="premierseats"] .fl-mono {
    font-family: 'Nova Square', 'Trebuchet MS', 'Verdana', sans-serif;
    letter-spacing: 0.01em;
}
body[data-brand="premierseats"] .fl-page-title,
body[data-brand="premierseats"] .fl-detail-title,
body[data-brand="premierseats"] .fl-team-name,
body[data-brand="premierseats"] .fl-h2 {
    text-transform: uppercase;
}
/* Preserve tabular-nums where digits stack — Nova Square supports it. */
body[data-brand="premierseats"] .fl-mono,
body[data-brand="premierseats"] .fl-listing-amount,
body[data-brand="premierseats"] .fl-selected-amount,
body[data-brand="premierseats"] .fl-trust-num {
    font-variant-numeric: tabular-nums;
}

/* Text logo for Sambilet — "bouncy baseline" direction.
   "sam" letters hop up/down; "bilet" runs italic + orange, skewed; trailing
   orange dot as a ".pl" wink. Hovering the logo settles everything to the
   baseline — a small reward the user can find. */
.fl-logo-text {
    font-family: 'Anton', Impact, 'Haettenschweiler', sans-serif;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.005em;
    text-transform: lowercase;
    color: currentColor;
    padding: 6px 2px;
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}
.fl-logo-text .fl-l {
    display: inline-block;
    transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
.fl-logo-text .fl-l:nth-child(1) { transform: translateY(-3px); }
.fl-logo-text .fl-l:nth-child(2) { transform: translateY( 3px); }
.fl-logo-text .fl-l:nth-child(3) { transform: translateY(-2px); }
.fl-logo-text .fl-bilet {
    color: var(--accent);
    font-style: italic;
    display: inline-block;
    transform: skew(-6deg);
    margin-left: 2px;
    transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
.fl-logo-text .fl-l-dot {
    color: var(--accent);
    font-size: 1.35em;
    display: inline-block;
    transform: rotate(-10deg) translate(3px, 1px);
    margin-left: 2px;
    transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
.fl-logo:hover .fl-logo-text .fl-l,
.fl-logo:focus-visible .fl-logo-text .fl-l {
    transform: translateY(0);
}
.fl-logo:hover .fl-logo-text .fl-bilet,
.fl-logo:focus-visible .fl-logo-text .fl-bilet {
    transform: skew(0deg);
}
.fl-logo:hover .fl-logo-text .fl-l-dot,
.fl-logo:focus-visible .fl-logo-text .fl-l-dot {
    transform: rotate(0) translate(3px, 1px) scale(1.15);
}
.fl-logo-text-sm { font-size: 24px; padding: 3px 2px; }
.fl-logo-text-sm .fl-l:nth-child(1) { transform: translateY(-2px); }
.fl-logo-text-sm .fl-l:nth-child(2) { transform: translateY( 2px); }
.fl-logo-text-sm .fl-l:nth-child(3) { transform: translateY(-1px); }
.fl-logo-text-sm .fl-l-dot { font-size: 1.25em; margin-left: 1px; }
@media (prefers-reduced-motion: reduce) {
    .fl-logo-text .fl-l,
    .fl-logo-text .fl-bilet,
    .fl-logo-text .fl-l-dot { transition: none; }
}

/* Brand-aware accent helpers — replace hard-coded var(--accent) uses. */
.fl-accent-text { color: var(--accent); }
.fl-inline-link { color: var(--accent); text-decoration: none; }
.fl-inline-link:hover { text-decoration: underline; }
.fl-trust-link { color: var(--accent); text-decoration: none; }
.fl-trust-link:hover { text-decoration: underline; }

/* Sambilet-specific: override the hardcoded acid hexes that older selectors
   ship. Only the ones visible on the landing / nav / footer surfaces —
   deeper sweep happens over time as we polish. */
body[data-brand="sambilet"] .fl-currency select:hover,
body[data-brand="sambilet"] .fl-footer-full a:hover,
body[data-brand="sambilet"] .fl-fansure,
body[data-brand="sambilet"] .fl-fansure-sm,
body[data-brand="sambilet"] .fl-fansure-lg,
body[data-brand="sambilet"] .fl-fansure-lg .fs-sure,
body[data-brand="sambilet"] .fl-fansure-chip .fl-fansure-icon,
body[data-brand="sambilet"] .fl-fansure-chip .fs-sure,
body[data-brand="sambilet"] .fl-page-eyebrow,
body[data-brand="sambilet"] .fl-eyebrow,
body[data-brand="sambilet"] .fl-teams-chip-count,
body[data-brand="sambilet"] .fl-team-tile-count,
body[data-brand="sambilet"] .fl-hero-dot.is-active,
body[data-brand="sambilet"] .fs-sure {
    color: var(--accent);
}
body[data-brand="sambilet"] .fl-fansure-lg .fs-sure { color: var(--accent); }
body[data-brand="sambilet"] .fl-hero-dot.is-active { background: var(--accent); }
/* Sambilet keeps the accent-fill behaviour by NOT setting any brand
   button vars — the base .fl-btn/.fl-cta fallback (accent bg + dark text)
   handles it. If Sambilet later wants a specific white-text-on-orange
   flavour, set brand.btn_primary_fg = '#ffffff' via look-and-feel admin.
   .fl-search-form button was a bespoke skin — inline base rule doesn't
   cover it, so keep this one narrower rule for the search form only. */
body[data-brand="sambilet"] .fl-search-form button {
    background: var(--accent);
    color: #ffffff;
}
body[data-brand="sambilet"] .fl-nav-cta { background: var(--accent); color: #ffffff; }
body[data-brand="sambilet"] .fl-teams-chip-count {
    background: rgba(255, 107, 24, 0.10);
}
body[data-brand="sambilet"] a { color: inherit; }
body[data-brand="sambilet"] .fl-notify-msg.is-ok { color: var(--accent); }

body[data-theme="light"] {
    background: #f5f4ef;
    color: #0a0d10;
}
body[data-theme="light"].fl-shell {
    background: #f5f4ef;
    color: #0a0d10;
}
body[data-theme="light"] .fl-nav {
    background: #ffffff;
    border-bottom-color: #d5d1c4;
}
body[data-theme="light"] .fl-navlinks a { color: #6b6a63; }
body[data-theme="light"] .fl-navlinks a:hover,
body[data-theme="light"] .fl-navlinks a.on { color: #0a0d10; border-color: var(--accent); }
body[data-theme="light"] .fl-logo { color: #0a0d10; }

body[data-theme="light"] .fl-search {
    background: #ffffff;
    border-bottom-color: #d5d1c4;
}
body[data-theme="light"] .fl-search-input .q { color: #0a0d10; }
body[data-theme="light"] .fl-search-input .q::placeholder { color: #a8a698; }
body[data-theme="light"] .fl-search .divider { background: #d5d1c4; }
body[data-theme="light"] .fl-search .meta { color: #6b6a63; }
body[data-theme="light"] .fl-search .meta strong { color: #0a0d10; }

body[data-theme="light"] .fl-page-hero {
    background: #ffffff;
    border-bottom: 1px solid #d5d1c4;
}
body[data-theme="light"] .fl-page-title { color: #0a0d10; }
body[data-theme="light"] .fl-page-lede { color: #33322b; }

body[data-theme="light"] .fl-card,
body[data-theme="light"] .fl-match-card,
body[data-theme="light"] .fl-team-tile {
    background: #ffffff;
    border-color: #d5d1c4;
    color: #0a0d10;
}
body[data-theme="light"] .fl-team-tile:hover { background: #fbf9f3; }
body[data-theme="light"] .fl-team-tile-name { color: #0a0d10; }

body[data-theme="light"] .fl-teams-group-head { border-bottom-color: #d5d1c4; }
body[data-theme="light"] .fl-teams-group-title { color: #0a0d10; }
body[data-theme="light"] .fl-teams-group-count { color: #6b6a63; }
body[data-theme="light"] .fl-teams-chips { border-bottom-color: #d5d1c4; }
body[data-theme="light"] .fl-teams-chip {
    background: #ffffff;
    border-color: #d5d1c4;
    color: #0a0d10;
}

body[data-theme="light"] .fl-footer {
    background: #ffffff;
    border-top: 1px solid #d5d1c4;
    color: #6b6a63;
}
body[data-theme="light"] .fl-footer-cols p { color: #6b6a63; }
body[data-theme="light"] .fl-footer-heading { color: #0a0d10; }

/* Buttons on light — ghost variant needs darker text on white */
body[data-theme="light"] .fl-btn-ghost {
    border-color: #d5d1c4;
    color: #0a0d10;
}
body[data-theme="light"] .fl-btn-ghost:hover {
    border-color: var(--accent);
}

/* Trending chips + tags */
body[data-theme="light"] .fl-trending-chip {
    background: #ffffff;
    border-color: #d5d1c4;
    color: #0a0d10;
}
body[data-theme="light"] .fl-trending-label { color: #6b6a63; }

/* Detail page bits */
body[data-theme="light"] .fl-detail-hero {
    background: #ffffff;
    color: #0a0d10;
}
body[data-theme="light"] .fl-detail-title { color: #0a0d10; }
body[data-theme="light"] .fl-detail-meta dt { color: #6b6a63; }
body[data-theme="light"] .fl-detail-meta dd { color: #0a0d10; }

/* Filters */
body[data-theme="light"] .fl-detail-filters {
    background: #ffffff;
    border-color: #d5d1c4;
}
body[data-theme="light"] .fl-df-field label { color: #6b6a63; }

/* Match list rows */
body[data-theme="light"] .fl-listings,
body[data-theme="light"] .fl-listing-row {
    background: #ffffff;
    border-color: #d5d1c4;
    color: #0a0d10;
}

/* /events filter bar — dark navy on default theme, needs paper on light.
   Container, inputs and selects all flip; labels stay muted. */
body[data-theme="light"] .fl-matches-filter {
    background: #ffffff;
    border-color: #d5d1c4;
}
body[data-theme="light"] .fl-mf-field label { color: #6b6a63; }
body[data-theme="light"] .fl-mf-field input,
body[data-theme="light"] .fl-mf-field select {
    background: #ffffff;
    border-color: #d5d1c4;
    color: #0a0d10;
}
body[data-theme="light"] .fl-mf-field input::placeholder { color: #a8a698; }
body[data-theme="light"] .fl-matches-count .label { color: #6b6a63; }

/* Match cards on /events — title stays hardcoded near-white on default,
   which disappears on light theme. Repaint the whole card body. */
body[data-theme="light"] .fl-match-title { color: #0a0d10; }
body[data-theme="light"] .fl-match-title .vs { color: #6b6a63; }
body[data-theme="light"] .fl-match-date { color: #6b6a63; }
body[data-theme="light"] .fl-match-venue { color: #6b6a63; }
body[data-theme="light"] .fl-match-footer { border-top-color: #d5d1c4; }
body[data-theme="light"] .fl-match-price strong { color: #0a0d10; }
body[data-theme="light"] .fl-match-price span { color: #6b6a63; }
body[data-theme="light"] .fl-match-listings { color: #6b6a63; }
body[data-theme="light"] .fl-match-card:hover .fl-match-title { color: var(--accent); }

/* Cards inside content areas */
body[data-theme="light"] .fl-content-section { border-bottom-color: #d5d1c4; }

/* Dark surfaces that keep their dark styling in the light theme — hero slides
   over venue photos, and the browse-by-sport slabs. Body color goes dark on
   light theme, so anything inside these without an explicit color inherits
   the dark and disappears against the dark card. Force these back to light. */
body[data-theme="light"] .fl-hero-slide,
body[data-theme="light"] .fl-hero-slide-content,
body[data-theme="light"] .fl-hero-title,
body[data-theme="light"] .fl-team-name,
body[data-theme="light"] .fl-hero-meta,
body[data-theme="light"] .fl-hero-meta dd {
    color: #f5f4ef;
}
body[data-theme="light"] .fl-hero-meta dt,
body[data-theme="light"] .fl-hero-slide-content .fl-eyebrow {
    color: #c8ccd3;
}
/* .fl-cat is a two-column card: dark navy .fl-cat-label on the left (needs
   light text), light/cream .fl-cat-events on the right (needs dark text).
   The previous override painted BOTH light, killing readability in the
   right column. Scope light text to the dark side only. */
body[data-theme="light"] .fl-cat-label,
body[data-theme="light"] .fl-cat-name {
    color: #f5f4ef;
}
body[data-theme="light"] .fl-cat-num,
body[data-theme="light"] .fl-cat-stat {
    color: #a8b0bd;
}
body[data-theme="light"] .fl-cat-events,
body[data-theme="light"] .fl-cat-event,
body[data-theme="light"] .fl-cat-event-title {
    color: #0a0d10;
}
body[data-theme="light"] .fl-cat-event-venue { color: #6b6a63; }
body[data-theme="light"] .fl-cat-event-price { color: #33322b; }
body[data-theme="light"] .fl-cat-event:hover .fl-cat-event-title { color: var(--accent); }

/* Hot-right-now cards (.fl-card) are also dark surfaces on both themes.
   Force their internal text back to light in the light theme. */
body[data-theme="light"] a.fl-card {
    background: var(--surface, #0a0d10);
    color: #f5f4ef;
    border-color: transparent;
}
body[data-theme="light"] a.fl-card .fl-card-title,
body[data-theme="light"] a.fl-card .fl-card-date,
body[data-theme="light"] a.fl-card .fl-card-venue,
body[data-theme="light"] a.fl-card .fl-card-price strong,
body[data-theme="light"] a.fl-card .fl-card-listings {
    color: #f5f4ef;
}
body[data-theme="light"] a.fl-card .fl-card-venue,
body[data-theme="light"] a.fl-card .fl-card-price span,
body[data-theme="light"] a.fl-card .fl-card-listings {
    color: #a8b0bd;
}

/* Event detail hero — the "photo" variant sits over a full-bleed venue
   photo, so text must stay light on the light theme too. Non-photo variant
   inherits body ink, that's fine. */
body[data-theme="light"] .fl-detail-hero-photo,
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-title,
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-team a,
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-eyebrow,
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-meta dd,
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-back {
    color: #f5f4ef;
}
body[data-theme="light"] .fl-detail-hero-photo .fl-detail-meta dt {
    color: #c8ccd3;
}
/* Give the photo hero a proper scrim so text stays readable against
   busy backgrounds — the existing scrim was tuned for the dark theme. */
body[data-theme="light"] .fl-detail-hero-photo::before {
    background: linear-gradient(180deg, rgba(10,13,16,0.55) 0%, rgba(10,13,16,0.72) 100%);
}

/* Listing rows on light theme — dim category title needs bumping so it reads
   as a proper heading, not a placeholder. */
body[data-theme="light"] .fl-listing-row {
    background: #ffffff;
    border-color: var(--line, #d5d1c4);
}
body[data-theme="light"] .fl-listing-cat { color: #0a0d10; font-weight: 600; }
body[data-theme="light"] .fl-listing-detail { color: #6b6a63; }
body[data-theme="light"] .fl-listing-each { color: #6b6a63; }

/* The "showing N cheapest" notice sits inside a dark navy container on light
   theme — keep that band dark but ensure copy is white. */
body[data-theme="light"] .fl-listings-alert {
    background: #14181f;
    color: #f5f4ef;
    border-color: #14181f;
}
body[data-theme="light"] .fl-listings-alert.info { background: #14181f; }

/* Sambilet seat-map card lives on light bg — flip the whole card to paper
   so it matches the rest of the page. Canvas gets a soft cream so section
   fills (grey) still have contrast against the surround. */
body[data-theme="light"] .fl-seatmap-inline {
    background: #ffffff;
    border-color: var(--line, #d5d1c4);
    color: #0a0d10;
}
body[data-theme="light"] .fl-seatmap-inline-head {
    border-bottom-color: var(--line, #d5d1c4);
}
body[data-theme="light"] .fl-seatmap-inline-title { color: #0a0d10; }
body[data-theme="light"] .fl-seatmap-inline-sub { color: #6b6a63; }
body[data-theme="light"] .fl-seatmap-inline-canvas {
    background: #f5f4ef;
}
body[data-theme="light"] .fl-seatmap-loading { color: #6b6a63; }
body[data-theme="light"] .fl-seatmap-zoom button {
    background: #ffffff;
    border-color: var(--line, #d5d1c4);
    color: #0a0d10;
}
body[data-theme="light"] .fl-seatmap-inline-legend {
    border-top-color: var(--line, #d5d1c4);
}
body[data-theme="light"] .fl-seatmap-legend-chip { color: #0a0d10; }

/* Filter card was rendering plain white — give it a proper border and
   ensure the max-price value uses brand accent (post lime→accent sweep,
   it now inherits correctly, but the range thumb needs re-affirming). */
body[data-theme="light"] .fl-df-field label { color: #6b6a63; font-weight: 600; }
body[data-theme="light"] #filter-price-display { color: var(--accent); font-weight: 700; }
body[data-theme="light"] .fl-qty input {
    background: #0a0d10;
    color: #f5f4ef;
    border-color: #0a0d10;
}
body[data-theme="light"] .fl-qty button {
    background: #ffffff;
    color: #0a0d10;
    border-color: #d5d1c4;
}

/* ── Static / content pages on light theme ─────────────────────────
   FAQ + How-It-Works headings, summaries, and body copy were tuned
   for the dark theme (near-white text). On light they become invisible.
   Repaint to ink/mute — accent orange still handles hover/callout. */
body[data-theme="light"] .fl-h2         { color: #0a0d10; }
body[data-theme="light"] .fl-body       { color: #33322b; }
body[data-theme="light"] .fl-body strong{ color: #0a0d10; }
body[data-theme="light"] .fl-body code  {
    background: #f5f4ef;
    border-color: #d5d1c4;
    color: #0a0d10;
}
body[data-theme="light"] .fl-step-content h3 { color: #0a0d10; }
body[data-theme="light"] .fl-step-content p  { color: #33322b; }
body[data-theme="light"] .fl-feature { border-color: #d5d1c4; background: #ffffff; }
body[data-theme="light"] .fl-feature h3 { color: #0a0d10; }
body[data-theme="light"] .fl-feature p  { color: #33322b; }
body[data-theme="light"] .fl-faq summary { color: #0a0d10; }
body[data-theme="light"] .fl-faq summary:hover { color: var(--accent); }
body[data-theme="light"] .fl-faq details,
body[data-theme="light"] .fl-faq details:first-of-type { border-color: #d5d1c4; }
body[data-theme="light"] .fl-faq-body { color: #33322b; }
body[data-theme="light"] .fl-faq-group-title { color: #6b6a63; }

/* Article / blog body on light */
body[data-theme="light"] .fl-article-title { color: #0a0d10; }
body[data-theme="light"] .fl-article-byline { color: #33322b; }
body[data-theme="light"] .fl-article-body { color: #33322b; }
body[data-theme="light"] .fl-article-body h2,
body[data-theme="light"] .fl-article-body h3,
body[data-theme="light"] .fl-article-body strong { color: #0a0d10; }
body[data-theme="light"] .fl-article-meta { color: #6b6a63; }
body[data-theme="light"] .fl-article-back { color: #6b6a63; }
body[data-theme="light"] .fl-article-back:hover { color: var(--accent); }
body[data-theme="light"] .fl-article-nav-item .label { color: #6b6a63; }
body[data-theme="light"] .fl-article-nav-item a { color: #0a0d10; }
body[data-theme="light"] .fl-article-nav-item a:hover { color: var(--accent); }
body[data-theme="light"] .fl-blog-card { background: #ffffff; border-color: #d5d1c4; }
body[data-theme="light"] .fl-blog-card h3 { color: #0a0d10; }
body[data-theme="light"] .fl-blog-card p  { color: #33322b; }
body[data-theme="light"] .fl-blog-card-meta { color: #6b6a63; }

/* ═════════════════════════════════════════════════════════════════════
   PT SEARCH-CARDS — full-bleed image style mirroring the homepage hot
   cards (.fl-card on .fl-hot-grid). Aspect ratio 4:5, image fills the
   card, red status pill top-right, bottom gradient scrim with Nova
   Square title + price. Applies to both /search and /team/{slug} pages
   since both use .fl-search-card + .fl-search-month-scroller.
   ═════════════════════════════════════════════════════════════════════ */
/* .fl-search-card doubled up (.fl-search-card.fl-search-card) pushes
   specificity to (0,3,0), one above the inline `body[data-brand]
   [class^="fl-"] { border-radius: var(--brand-radius) !important }` rule
   in layout.twig — that inline rule was winning ties on !important
   (both (0,2,0), inline is later in source) and re-applying the brand
   16px rounding no matter what we set here. Double-class hack gets us
   the specificity bump without introducing a new class in the template. */
body[data-brand="premierseats"] .fl-search-card.fl-search-card {
    position: relative !important;
    display: block !important;
    aspect-ratio: 4 / 5;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #12253d !important;
    isolation: isolate;
    transition: transform 140ms, border-color 140ms, box-shadow 140ms;
}
body[data-brand="premierseats"] .fl-search-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* Image fills the whole card. */
body[data-brand="premierseats"] .fl-search-card-img {
    position: absolute !important;
    inset: 0 !important;
    aspect-ratio: auto !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 0;
    padding: 0 !important;
}
/* Placeholder gradient when no photo. */
body[data-brand="premierseats"] .fl-search-card-img.is-placeholder {
    background: linear-gradient(135deg, #1a2540 0%, #536286 100%) !important;
}
/* Bottom scrim so title + price stay legible. Override base ::after.
   Strengthened 2026-08-20 (Siggi) — the old 40%/62%/92% stops made
   the title muddy on bright photos (F1 circuit maps, festival crowd
   shots). Wider dark band + explicit top-left cushion behind the
   white date pill so it stays crisp against any bright top-left. */
body[data-brand="premierseats"] .fl-search-card-img::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(160% 80% at 0% 0%, rgba(10, 20, 40, 0.55) 0%, rgba(10, 20, 40, 0) 32%),
        linear-gradient(180deg,
            rgba(10, 20, 40, 0) 30%,
            rgba(10, 20, 40, 0.55) 55%,
            rgba(10, 20, 40, 0.95) 100%) !important;
    z-index: 1;
    pointer-events: none;
}
/* Same <img> rule scoped to PT — PT's .fl-search-card-img is position:
   absolute so the <img> inherits the same coordinate space. */
body[data-brand="premierseats"] .fl-search-card-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    display: block;
}

/* Date pill — small chip top-left over the image. */
body[data-brand="premierseats"] .fl-search-card-date {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a2540 !important;
    padding: 6px 10px !important;
    border-radius: 12px !important;
    line-height: 1 !important;
    z-index: 3;
    min-width: 44px;
}
body[data-brand="premierseats"] .fl-search-card-dow {
    font-size: 9px !important; font-weight: 600 !important;
    letter-spacing: 0.06em !important; color: #64748b !important;
    margin-bottom: 3px !important;
}
body[data-brand="premierseats"] .fl-search-card-day {
    font-size: 18px !important; font-weight: 700 !important;
    color: #1a2540 !important;
}
body[data-brand="premierseats"] .fl-search-card-mon {
    font-size: 9px !important; font-weight: 600 !important;
    letter-spacing: 0.06em !important; color: #64748b !important;
    margin-top: 3px !important;
}

/* Category pill on search/team cards — removed entirely on PT (Dean
   2026-08-20): the red competition chips added noise on every card.
   Was the top-right red pill styling. */
body[data-brand="premierseats"] .fl-search-card-cat {
    display: none !important;
}

/* Body sits absolute-bottom over the scrim, Nova Square title. */
body[data-brand="premierseats"] .fl-search-card-body {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 14px 16px 16px !important;
    z-index: 2;
    color: #fff !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
/* Doubled class again for specificity bump — the layout.twig wildcard
   `body[data-brand] [class^="fl-"]` was also adding a brand-radius to
   the h4 title's own box. Not visible (no bg) but showed up in DevTools
   and could interact with any later background/border tweaks. */
body[data-brand="premierseats"] .fl-search-card-title.fl-search-card-title {
    font-family: 'Nova Square', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-wrap: balance;
    /* Allow up to 3 lines so long fixture names like "Newcastle United FC
       vs Liverpool FC" don't get ellipsized on a 240px-wide phone card. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body[data-brand="premierseats"] .fl-search-card-venue {
    /* Venue · city under the title (Dean 2026-08-23) — useful context now
       that every card is a real arena/stadium. Light grey so it reads over
       the photo scrim without competing with the white title; one line,
       ellipsised if the venue name is long. */
    display: block !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    margin: 0 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body[data-brand="premierseats"] .fl-search-card-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 2px !important;
}
body[data-brand="premierseats"] .fl-search-card-price {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 4px !important;
    color: #fff !important;
    font-size: 12px !important;
}
body[data-brand="premierseats"] .fl-search-card-price span {
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    font-weight: 400 !important;
}
body[data-brand="premierseats"] .fl-search-card-price strong {
    color: #fff !important;
    font-family: 'Nova Square', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}
body[data-brand="premierseats"] .fl-search-card-price-off {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 11px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
body[data-brand="premierseats"] .fl-search-card-count {
    display: none !important;   /* count crowds the card; user asked to drop */
}

/* Month header — Nova Square with soft rule below. */
body[data-brand="premierseats"] .fl-search-month {
    font-family: 'Nova Square', sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
    color: #fff !important;
    text-transform: uppercase !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Search page header — align typography with the rest of PT. */
body[data-brand="premierseats"] .fl-search-title {
    font-family: 'Nova Square', sans-serif !important;
    font-size: clamp(30px, 5vw, 48px) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #fff !important;
    margin: 8px 0 20px !important;
}
body[data-brand="premierseats"] .fl-search-title .accent {
    color: #1a73e8 !important;
}
body[data-brand="premierseats"] .fl-search-count {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    letter-spacing: 0.04em;
}
body[data-brand="premierseats"] .fl-search-count b {
    color: #fff !important;
}

/* Empty-state (no match) — PT panel styling. */
body[data-brand="premierseats"] .fl-search-empty {
    background: linear-gradient(323deg, rgba(217, 217, 217, 0.06) -60%, rgba(83, 98, 134, 0.35)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 40px 24px !important;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
}
body[data-brand="premierseats"] .fl-search-empty h3 {
    font-family: 'Nova Square', sans-serif !important;
    color: #fff !important;
    margin-bottom: 8px !important;
}

/* Load-more button removed 2026-08-19 (Siggi ask) — page now uses lazy
   auto-load only. Old PT pill styling for .fl-load-more no longer needed. */

/* ─── Breadcrumbs (team page, category landing pages when reused) ──
   Compact horizontal trail with a "back" link at the start that walks
   browser history. Wraps to multiple lines on narrow viewports so long
   trails don't overflow. */
.fl-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 18px;
    line-height: 1.5;
}
.fl-crumb {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fl-crumb:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}
.fl-crumb-link {
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    transition: color 0.15s;
}
.fl-crumb-link:hover { color: #fff; }
.fl-crumb-current {
    color: #fff;
    font-weight: 600;
}
.fl-crumb-sep {
    color: rgba(255, 255, 255, 0.35);
    user-select: none;
}
@media (max-width: 640px) {
    .fl-breadcrumbs { font-size: 11px; gap: 6px; margin-bottom: 12px; }
    .fl-crumb { padding: 4px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PT MOBILE OVERRIDES — consolidated block. The PT redesign layered many
   new components (fl-pt-hero, fl-pt-pills, fl-checkout-*, fl-order-*,
   fl-detail-filters grid) whose desktop-first CSS didn't have matching
   mobile tuning. Added 2026-08-19 in one pass so future PT tweaks have a
   single home for mobile rules. Placed at file end so it wins over any
   earlier rule with equal specificity.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tablet & small-laptop breakpoint — 900px matches the hamburger cutover. */
@media (max-width: 900px) {
    /* Header — trim the 24px+centred padding when the viewport shrinks,
       and shorten the logo so the row doesn't look top-heavy. */
    body[data-brand="premierseats"] .fl-nav {
        padding: 12px 16px !important;
    }
    body[data-brand="premierseats"] .fl-ps-logo-img {
        height: 36px !important;
    }
    /* Nav CTA "BÓKA FERÐ" — smaller pill so it fits next to hamburger + cart. */
    body[data-brand="premierseats"] .fl-nav-cta {
        padding: 7px 16px !important;
        font-size: 12px !important;
    }
    /* Hamburger menu items — PT uses white-text link list; ensure the
       dropdown panel adopts PT's navy so it doesn't render as a light strip. */
    body[data-brand="premierseats"] .fl-nav .fl-navlinks {
        background: #151f38 !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }
    body[data-brand="premierseats"] .fl-nav .fl-navlinks a {
        color: rgba(255, 255, 255, 0.85) !important;
        border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    }
}

/* Phone breakpoint — the main mobile pass. Everything below is written
   for a 375–430px viewport (iPhone SE through Pro Max range). */
@media (max-width: 640px) {

    /* ── Header ── */
    body[data-brand="premierseats"] .fl-nav {
        padding: 10px 14px !important;
    }
    body[data-brand="premierseats"] .fl-ps-logo-img {
        height: 32px !important;
    }
    /* Hide the "BÓKA FERÐ" pill on very small screens — it sits behind
       the hamburger which is the primary nav affordance now. Trip-booking
       is one link inside the hamburger. */
    body[data-brand="premierseats"] .fl-nav-cta {
        display: none !important;
    }

    /* ── PT hero (STAKIR MIÐAR) ── */
    body[data-brand="premierseats"] .fl-pt-hero {
        padding: 32px 16px 16px !important;
    }
    body[data-brand="premierseats"] .fl-pt-hero-title {
        font-size: clamp(28px, 8vw, 40px) !important;
        margin-bottom: 10px !important;
    }
    body[data-brand="premierseats"] .fl-pt-hero-eyebrow {
        font-size: 12px !important;
    }
    body[data-brand="premierseats"] .fl-pt-hero-lede {
        font-size: 13px !important;
    }

    /* ── PT pill rows (categories + team pills under hero) ── */
    body[data-brand="premierseats"] .fl-pt-pills {
        gap: 8px !important;
        padding: 0 12px !important;
        margin-top: 16px !important;
    }
    body[data-brand="premierseats"] .fl-pt-pill {
        padding: 8px 16px !important;
        font-size: 12px !important;
        min-width: 0 !important;
        flex: 0 0 auto;
    }
    body[data-brand="premierseats"] .fl-pt-pills-team .fl-pt-pill {
        padding: 6px 14px !important;
        font-size: 11px !important;
        min-width: 0 !important;
    }

    /* ── PT search pill (centred rounded search on hero) ── */
    body[data-brand="premierseats"] .fl-search.fl-search-pt {
        margin: 20px 12px 4px !important;
        max-width: none !important;
    }

    /* ── Vinsælir viðburðir header + CTA ── */
    body[data-brand="premierseats"] .fl-pt-hot-title {
        font-size: clamp(22px, 7vw, 32px) !important;
        gap: 14px !important;
    }
    body[data-brand="premierseats"] .fl-pt-hot-title::before,
    body[data-brand="premierseats"] .fl-pt-hot-title::after {
        max-width: 50px !important;
    }
    body[data-brand="premierseats"] .fl-pt-hot-lede {
        font-size: 13px !important;
        padding: 0 12px;
    }
    body[data-brand="premierseats"] .fl-pt-hot-cta {
        padding: 12px 28px !important;
        font-size: 12px !important;
    }

    /* ── Hot event card body (over the image) ── */
    body[data-brand="premierseats"] .fl-hot-grid .fl-card-body {
        padding: 16px 18px 18px !important;
    }
    body[data-brand="premierseats"] .fl-hot-grid .fl-card-title {
        font-size: 18px !important;
    }
    body[data-brand="premierseats"] .fl-hot-grid .fl-card-tag {
        top: 12px !important; right: 12px !important;
        padding: 5px 12px !important;
        font-size: 10px !important;
    }

    /* ── Kannaðu meira panel ── */
    body[data-brand="premierseats"] .fl-cat {
        padding: 24px 16px !important;
    }
    body[data-brand="premierseats"] .fl-cat-name {
        font-size: clamp(22px, 7vw, 30px) !important;
        gap: 14px !important;
    }
    body[data-brand="premierseats"] .fl-cat-name::before,
    body[data-brand="premierseats"] .fl-cat-name::after {
        max-width: 50px !important;
    }
    body[data-brand="premierseats"] .fl-cat-stat {
        font-size: 12px !important;
        padding: 0 8px;
    }
    body[data-brand="premierseats"] .fl-subcat-grid {
        gap: 10px !important;
    }
    body[data-brand="premierseats"] .fl-subcat-tile {
        min-height: 84px !important;
    }
    body[data-brand="premierseats"] .fl-subcat-name {
        font-size: 13px !important;
    }

    /* ── Event page hero (matches/show.twig) ──
       Restored gradient card with faded venue image behind. Same 12px
       side margin as the filter card + listing rows so every block on
       the page shares the container width — uniformity beats micro-
       optimisation for perceived polish. Currency picker moved to the
       header (2026-08-19) so this hero no longer competes for space. */
    body[data-brand="premierseats"] .fl-detail-hero.fl-detail-hero-minimal {
        /* Match .fl-container's 20px side padding at ≤640px so the hero
           card lines up with the filter card + listings below. Was 12px
           sides which made the hero visibly wider than everything else. */
        margin: 12px 20px !important;
        padding: 16px 18px 14px !important;
        border-radius: 14px !important;
    }
    /* Faded venue image behind gradient — restored per Siggi ask, gives
       the hero card its identity even when compressed. */
    body[data-brand="premierseats"] .fl-detail-hero.fl-detail-hero-minimal::before {
        display: block !important;
        opacity: 0.22 !important;
        mask-image: linear-gradient(to left, black 0%, black 55%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to left, black 0%, black 55%, transparent 100%) !important;
    }
    body[data-brand="premierseats"] .fl-detail-back {
        margin-bottom: 8px !important;
        font-size: 12px !important;
    }
    body[data-brand="premierseats"] .fl-detail-eyebrow {
        margin-bottom: 6px !important;
        font-size: 10px !important;
    }
    /* Title: team-per-line stack (readable for long names), tiny 'vs' row. */
    body[data-brand="premierseats"] .fl-detail-title {
        font-size: 22px !important;
        line-height: 1.1 !important;
        gap: 2px !important;
        margin-bottom: 10px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    body[data-brand="premierseats"] .fl-detail-title .fl-detail-team {
        display: block;
    }
    body[data-brand="premierseats"] .fl-detail-vs {
        font-size: 11px !important;
        opacity: 0.5;
        padding: 2px 0 !important;
        letter-spacing: 0.12em;
    }
    /* Meta: clean label→value column, 90px label track. */
    body[data-brand="premierseats"] .fl-detail-meta {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        margin: 8px 0 0 !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    }
    body[data-brand="premierseats"] .fl-detail-meta > div {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 10px !important;
        min-width: 0;
    }
    body[data-brand="premierseats"] .fl-detail-meta dt {
        display: inline-block !important;
        flex: 0 0 88px;
        font-size: 10px !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6) !important;
        margin: 0 !important;
        font-weight: 600;
    }
    body[data-brand="premierseats"] .fl-detail-meta dd {
        font-size: 13px !important;
        margin: 0 !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    body[data-brand="premierseats"] .fl-detail-meta dd.price {
        font-size: 16px !important;
        color: #fff !important;
    }
    body[data-brand="premierseats"] .fl-detail-meta > div:has([data-listing-count]) {
        display: none !important;
    }

    /* ── Event page filter card ──
       Currency picker moved to header, leaving 4 fields. DOM order (post
       Siggi 2026-08-19 restructure) is: qty, together, price, zone.
       Layout matches desktop: together sits directly under qty on the
       left, price and zone stack on the right.
         Row 1: qty       | price
         Row 2: together  | zone
       Margin=0: .fl-container already provides 12px inset on mobile.
       Adding another 12px margin here made the filter narrower than
       the hero card that sits OUTSIDE .fl-container. */
    body[data-brand="premierseats"] .fl-detail-filters {
        margin: 0 0 12px !important;
        padding: 14px !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "qty      price"
            "together zone" !important;
        column-gap: 12px !important;
        row-gap: 14px !important;
        border-radius: 14px !important;
    }
    /* nth-of-type counts across ALL <div> children — DOM order is
       qty(1) / together(2) / price(3) / zone(4). Any change to matches/
       show.twig's filter order MUST be mirrored here or cells collide. */
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field:nth-of-type(1) { grid-area: qty !important; }
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field:nth-of-type(3) { grid-area: price !important; }
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field:nth-of-type(4) { grid-area: zone !important; }
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-together {
        grid-area: together !important;
        justify-self: stretch !important;
    }
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field > label {
        font-size: 10px !important;
        letter-spacing: 0.06em !important;
        margin-bottom: 4px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        /* Desktop rule sets white-space:nowrap+ellipsis on labels — that
           chops "HAMARKSVERÐ · 30.000 kr." to "HAMARKSVER…" on phone-
           width filter cells. Let the value drop to a second line instead
           of eating the eyebrow text. */
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    /* Show the price value on its own line so the eyebrow ("HAMARKSVERÐ")
       is never truncated, no matter how long the localised currency string
       becomes ("30.000 kr." in ISK is much wider than "£240" in GBP). */
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-field > label > span {
        display: block !important;
        margin-top: 2px !important;
        font-size: 12px !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
    body[data-brand="premierseats"] .fl-detail-filters .fl-qty,
    body[data-brand="premierseats"] .fl-detail-filters .fl-zone-trigger {
        height: 40px !important;
        font-size: 13px !important;
    }
    /* Zone dropdown — clean look, no native black background. */
    body[data-brand="premierseats"] .fl-detail-filters .fl-zone-trigger {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 10px !important;
        color: #fff !important;
        padding: 0 30px 0 10px !important;
        text-align: left;
    }
    /* Range slider — sits inside the "price" cell, needs to fill it. */
    body[data-brand="premierseats"] .fl-detail-filters input[type="range"].fl-range {
        height: 32px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    body[data-brand="premierseats"] .fl-detail-filters .fl-qty-max {
        display: none !important;
    }
    /* Together checkbox — cell 4, right of Zone. Label wraps naturally. */
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-together {
        padding: 0 !important;
        min-height: 40px !important;
        align-self: end !important;
    }
    /* Selector must match desktop's `> .fl-df-together .fl-together-label`
       specificity (0,4,1) — a plainer `.fl-detail-filters .fl-together-label`
       loses the cascade and the desktop `white-space:nowrap` clips the label
       to "AÐEINS…" beside the toggle. */
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-together .fl-together-label {
        font-size: 12px !important;
        gap: 8px !important;
        white-space: normal !important;
        overflow: visible !important;
        line-height: 1.3 !important;
        align-items: flex-start !important;
        height: auto !important;
    }
    body[data-brand="premierseats"] .fl-detail-filters > .fl-df-together .fl-together-label > span {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* ── Uniform-width containers on the event page ──
       Every block below the header sits inside .fl-container which has
       12px padding on mobile. Hero uses margin:12px so its 12px inset
       matches the container's 12px padding — same window edge distance
       for hero card, filter card, listings, seatmap, buy panel. */
    body[data-brand="premierseats"] .fl-detail-grid {
        padding: 0 !important;
    }
    body[data-brand="premierseats"] .fl-listings,
    body[data-brand="premierseats"] .fl-seatmap-inline {
        border-radius: 14px !important;
    }

    /* ── Zone dropdown menu (opens wider than trigger on mobile) ──
       Trigger cell is only ~155px wide in the 2-col filter grid, but
       section names like "Langhlið, neðri röð – miðjuhluti · Svæði T"
       need way more room. Menu breaks out of the cell to span (almost)
       the full viewport, and option text wraps naturally. */
    body[data-brand="premierseats"] .fl-detail-filters .fl-zone-menu {
        left: 0 !important;
        right: auto !important;
        min-width: calc(100vw - 48px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: 60vh !important;
    }
    body[data-brand="premierseats"] .fl-detail-filters .fl-zone-option {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    body[data-brand="premierseats"] .fl-detail-filters .fl-zone-opt-name {
        white-space: normal !important;
        text-overflow: unset !important;
        overflow: visible !important;
        line-height: 1.3 !important;
        flex: 1 1 auto !important;
    }
    body[data-brand="premierseats"] .fl-detail-filters .fl-zone-opt-meta {
        white-space: nowrap;
        flex: 0 0 auto;
    }


    /* ── Buy panel / listings on event page ── */
    body[data-brand="premierseats"] .fl-listings {
        max-height: 400px !important;
    }
    body[data-brand="premierseats"] .fl-listing-row {
        padding: 12px 14px !important;
    }
    body[data-brand="premierseats"] .fl-selected-title {
        font-size: 16px !important;
    }
    body[data-brand="premierseats"] .fl-selected-amount {
        font-size: 26px !important;
    }

    /* ── Search results page ── month scroller becomes horizontal on phone. */
    body[data-brand="premierseats"] .fl-search-grid {
        gap: 20px !important;
    }
    body[data-brand="premierseats"] .fl-search-title {
        font-size: clamp(24px, 7vw, 34px) !important;
    }
    body[data-brand="premierseats"] .fl-search-month {
        font-size: 18px !important;
        padding-bottom: 8px !important;
    }
    body[data-brand="premierseats"] .fl-search-card-title {
        font-size: 13px !important;
    }
    body[data-brand="premierseats"] .fl-search-card-venue {
        font-size: 11px !important;
    }

    /* ── Cart page (/cart) ── */
    body[data-brand="premierseats"] .fl-cart-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    body[data-brand="premierseats"] .fl-cart-sticky {
        position: static !important;
    }
    body[data-brand="premierseats"] .fl-cart-block {
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }
    body[data-brand="premierseats"] .fl-cart-block h2,
    body[data-brand="premierseats"] .fl-cart-block-title {
        font-size: 16px !important;
    }
    body[data-brand="premierseats"] .fl-cart-item {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "info info"
            "qty price"
            "remove remove" !important;
        gap: 10px 12px !important;
        padding: 14px !important;
    }
    /* Stale grid-area overrides — item layout is now flex + absolute-
       positioned × (Dean 2026-08-28). Grid props are inert on flex parents
       but the margin-top: -6px on × was pushing it past the card border. */
    body[data-brand="premierseats"] .fl-cart-row {
        grid-template-columns: 1fr !important;
    }
    body[data-brand="premierseats"] .fl-cart-submit {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }
    body[data-brand="premierseats"] .fl-cart-total { font-size: 18px !important; }

    /* ── Checkout form (/checkout/{id}) ── */
    body[data-brand="premierseats"] .fl-checkout-wrap {
        padding: 20px 14px 40px !important;
    }
    body[data-brand="premierseats"] .fl-checkout-title {
        font-size: clamp(26px, 7vw, 36px) !important;
    }
    body[data-brand="premierseats"] .fl-checkout-lede {
        font-size: 13px !important;
    }
    body[data-brand="premierseats"] .fl-checkout-summary,
    body[data-brand="premierseats"] .fl-checkout-form {
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }
    body[data-brand="premierseats"] .fl-checkout-cta {
        padding: 12px 28px !important;
        font-size: 14px !important;
    }

    /* ── Order / cancel pages ── */
    body[data-brand="premierseats"] .fl-order-ref {
        font-size: clamp(20px, 6vw, 28px) !important;
    }
    body[data-brand="premierseats"] .fl-order-item {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px 14px !important;
    }
    body[data-brand="premierseats"] .fl-order-item-price {
        text-align: left !important;
        display: flex;
        justify-content: space-between;
        border-top: 1px dashed rgba(255, 255, 255, 0.08);
        padding-top: 8px;
    }
    body[data-brand="premierseats"] .fl-order-callout {
        padding: 14px 16px !important;
    }

    /* ── Footer (3-col → single-column stack, tighter padding) ── */
    body[data-brand="premierseats"] .fl-footer-full {
        padding: 32px 16px 20px !important;
    }
    body[data-brand="premierseats"] .fl-footer-cols {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        text-align: left !important;
    }
    body[data-brand="premierseats"] .fl-footer-heading {
        font-size: 13px !important;
    }
    body[data-brand="premierseats"] .fl-footer-legal {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    /* ── Trust bar tighter on PT ── */
    body[data-brand="premierseats"] .fl-trust {
        padding: 24px 14px !important;
    }
}

/* Small phones (iPhone SE, older Androids) — one more pass to shave
   anything still too big. */
@media (max-width: 380px) {
    body[data-brand="premierseats"] .fl-pt-hero-title { font-size: 26px !important; }
    body[data-brand="premierseats"] .fl-detail-title { font-size: 22px !important; }
    body[data-brand="premierseats"] .fl-hot-grid .fl-card-title { font-size: 17px !important; }
    body[data-brand="premierseats"] .fl-checkout-title { font-size: 24px !important; }
    body[data-brand="premierseats"] .fl-order-ref { font-size: 20px !important; }
}

/* ── Event-page Terms block ─────────────────────────────────────────
   Rendered under the listings/seatmap on every event page from the
   brand's published Terms sections (matches/show.twig → controller
   loadBrandTermsSections). Visual language matches the standalone
   /terms page: big display heading, blue accent H3 subheadings, thin
   dividers between sections, muted body copy, footer link row.
   Franchisee-editable copy inside sections retains its own HTML
   (paragraphs, bullet lists) — nested rules below hand them the
   right typographic scale so a <ul> from the CMS reads correctly. */
.fl-event-terms {
    margin: 40px 0 8px;
    padding: 0;
}
.fl-event-terms-heading {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 24px;
    color: var(--text, #fff);
}
.fl-event-terms-body { display: flex; flex-direction: column; }
.fl-event-terms-section {
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fl-event-terms-section:first-child { border-top: 0; padding-top: 0; }
.fl-event-terms-sub {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 12px;
    line-height: 1.2;
}
.fl-event-terms-copy {
    color: rgba(238, 241, 245, 0.88);
    font-size: 14px;
    line-height: 1.6;
}
.fl-event-terms-copy p { margin: 0 0 12px; }
.fl-event-terms-copy p:last-child { margin-bottom: 0; }
.fl-event-terms-copy ul,
.fl-event-terms-copy ol { margin: 8px 0 12px 20px; padding: 0; }
.fl-event-terms-copy li { margin: 4px 0; }
.fl-event-terms-copy a { color: var(--accent); text-decoration: underline; }
.fl-event-terms-copy a:hover { text-decoration: none; }
/* CMS bodies frequently contain their own <h3>/<h4> for sub-subsections
   (e.g. "Kostnaður" and "Áður en þú byrjar umsókn" inside the ETA
   section in the reference images). Give them a lighter treatment so
   they don't compete with the blue-accent section titles above. */
.fl-event-terms-copy h3,
.fl-event-terms-copy h4 {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text, #fff);
    margin: 16px 0 8px;
}
.fl-event-terms-foot {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    color: rgba(238, 241, 245, 0.7);
}
.fl-event-terms-link {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 600;
}
.fl-event-terms-link:hover { text-decoration: none; }
.fl-event-terms-sep {
    margin: 0 8px;
    color: rgba(238, 241, 245, 0.35);
}
@media (max-width: 640px) {
    .fl-event-terms { margin-top: 28px; }
    .fl-event-terms-heading { font-size: 26px; margin-bottom: 16px; }
    .fl-event-terms-section { padding: 18px 0; }
    .fl-event-terms-sub { font-size: 12px; margin-bottom: 8px; }
    .fl-event-terms-copy { font-size: 13px; }
}
/* Light theme (Ticketscore etc.) — flip surface colours; brand accent
   already resolves per-brand so no explicit accent override needed. */
body[data-theme="light"] .fl-event-terms-heading { color: #1a1a1a; }
body[data-theme="light"] .fl-event-terms-section { border-top-color: #e5e7eb; }
body[data-theme="light"] .fl-event-terms-copy { color: #374151; }
body[data-theme="light"] .fl-event-terms-copy h3,
body[data-theme="light"] .fl-event-terms-copy h4 { color: #1a1a1a; }
body[data-theme="light"] .fl-event-terms-foot { color: #6b7280; border-top-color: #e5e7eb; }
body[data-theme="light"] .fl-event-terms-sep { color: #9ca3af; }

/* ── Sold-under-you cart card (2026-09-10) ─────────────────────────
   A carted lot that's gone renders as a highlighted card with one-click
   swaps to the nearest live lots, instead of a hard checkout refusal. */
.fl-cart-item-dead { border: 1px solid #e5484d; background: rgba(229,72,77,0.05); }
.fl-cart-item-dead .fl-cart-item-title { opacity: 0.75; text-decoration: line-through; }
.fl-cart-dead-note { color: #ff9296; font-size: 13px; margin: 6px 0 2px; }
.fl-cart-dead-alts { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.fl-cart-alt-intro { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; }
.fl-cart-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.fl-cart-alt-desc { font-size: 13px; }
.fl-cart-alt-swap { background: var(--accent); color: #0a0d10; border: 0; padding: 6px 14px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
body[data-theme="light"] .fl-cart-item-dead { background: #fef2f2; }
body[data-theme="light"] .fl-cart-dead-note { color: #b91c1c; }

/* ── 25% deposit payment-plan picker (2026-09-13) ────────────────── */
.fl-cart-payplan { border: 1px solid var(--border); padding: 12px 14px; margin: 10px 0; display: flex; flex-direction: column; gap: 10px; }
.fl-payplan-opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.fl-payplan-opt input { margin-top: 3px; accent-color: var(--accent); }
.fl-payplan-note { color: var(--text-muted); font-size: 12px; line-height: 1.5; }

/* ── No-hidden-fees hero stamp (2026-09-15) ──────────────────────────
   Rubber-stamp sticker: accent slab, jaunty tilt, double border like an
   ink stamp. Sits on the hero, straightens up with a little stamp-thunk
   on hover. */
.fl-hero-carousel { position: relative; }
/* Zero-height rail: centres the stamp and lets it straddle the seam
   between the search bar and the hero without occupying layout space. */
.fl-fee-stamp-wrap {
    position: relative;
    z-index: 40;   /* above the hero, which forms its own stacking context */
    height: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;   /* default stretch squashes the stamp to 0h */
}
.fl-fee-stamp {
    background: var(--accent);
    color: #0a0d10;
    padding: 12px 18px 13px;
    transform: translateY(-46%) rotate(-4deg);
    border: 2px solid #0a0d10;
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    max-width: 280px;
    pointer-events: none;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fl-fee-stamp-wrap:hover .fl-fee-stamp,
.fl-fee-stamp-wrap + .fl-hero-carousel:hover ~ .fl-fee-stamp { transform: translateY(-46%) rotate(-1deg) scale(1.03); }
.fl-fee-stamp-main {
    font-family: Impact, 'Anton', 'Haettenschweiler', sans-serif;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.fl-fee-stamp-sub {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
}
@media (max-width: 720px) {
    /* Mobile: right-tucked, one-liner only — the two-line promise turns
       into a brick at phone widths and buries the hero eyebrow. */
    .fl-fee-stamp-wrap { justify-content: flex-end; padding-right: 10px; }
    .fl-fee-stamp { padding: 6px 11px 7px; max-width: none; transform: translateY(-50%) rotate(-3deg); }
    .fl-fee-stamp-main { font-size: 15px; white-space: nowrap; }
    .fl-fee-stamp-sub { display: none; }
    .fl-fee-stamp-main { font-size: 17px; }
    .fl-fee-stamp-sub { font-size: 10.5px; }
}

/* Hero eyebrow, date-only variant (2026-09-15): the date is the one fact
   buyers scan for, so let it carry the line. */
.fl-eyebrow-datebig span:last-child {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.14em;
}
@media (max-width: 720px) {
    .fl-eyebrow-datebig span:last-child { font-size: 14px; }
}

/* ── oasis27tickets.com: MOD monochrome + target-red accents ─────────────
   Brand rows drive most theming; these are the two spots where floodlit
   hardcodes another brand's palette and needs a scoped override. */
body[data-brand="oasis27"] .fl-fee-stamp {
    /* red stamp (accent) reads better red/white than red/near-black */
    color: #fff;
    border-color: #fff;
}
body[data-brand="oasis27"] .fl-trust.fl-trust-pill {
    /* the default pill gradient is PremierTrips slate — go MOD blackout */
    background: #121316;
    outline: 1px solid rgba(255, 255, 255, 0.16);
}
body[data-brand="oasis27"] .fl-trust.fl-trust-pill .fl-trust-icon {
    background: #ce1126;
    color: #fff;
}

/* Tour date wall — the oasis27 homepage centrepiece. Gig-poster rows:
   big city name, venue, then a chip per night. */
.fl-tourwall-leg {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 2fr;
    gap: 12px 40px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px solid var(--border);
}
.fl-tourwall-leg:last-child { border-bottom: 1px solid var(--border); }
.fl-tourwall-head { display: flex; flex-direction: column; gap: 4px; }
.fl-tourwall-city {
    font-size: clamp(26px, 3vw, 40px);
    text-transform: uppercase;
    line-height: 0.95;
}
.fl-tourwall-venue { font-size: 13px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.fl-tourwall-meta  { font-size: 13px; font-weight: 600; }
.fl-tourwall-meta, .fl-tourwall-city { color: var(--text); }
.fl-tourwall-dates { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.fl-tourwall-date {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border: 1.5px solid var(--text);
    border-radius: var(--brand-radius, 4px);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fl-tourwall-date:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
@media (max-width: 900px) {
    .fl-tourwall-leg { grid-template-columns: 1fr; gap: 10px; }
}
body[data-brand="oasis27"] .fl-display,
body[data-brand="oasis27"] .fl-team-name,
body[data-brand="oasis27"] .fl-vs,
body[data-brand="oasis27"] .fl-hero-meta dd.price,
body[data-brand="oasis27"] .fl-fee-stamp-main {
    /* Righteous — deco geometry in the spirit of the band's wordmark
       (the real Decotura is commercial; Righteous is the OFL stand-in) */
    font-family: 'Righteous', Impact, 'Haettenschweiler', sans-serif;
    letter-spacing: 0.02em;
}

/* Light-theme tour wall (the light engine is per-component overrides, not
   var flips — --text stays dark-theme, so these must be explicit). */
body[data-theme="light"] .fl-tourwall-city,
body[data-theme="light"] .fl-tourwall-meta { color: #0a0d10; }
body[data-theme="light"] .fl-tourwall-venue { color: #6b6a63; }
body[data-theme="light"] .fl-tourwall-leg { border-color: #d5d1c4; }
body[data-theme="light"] .fl-tourwall-date {
    color: #0a0d10;
    border-color: rgba(10, 13, 16, 0.55);
    background: #ffffff;
}
body[data-theme="light"] .fl-tourwall-date:hover { color: #ffffff; }

/* oasis27 light header: the white wordmark rides on a black plate — the
   classic boxed-logo look — so one SVG serves both the light nav and the
   dark footer. */
body[data-theme="light"][data-brand="oasis27"] .fl-nav .fl-logo-img {
    background: #0f0f0f;
    padding: 7px 12px;
    border-radius: 4px;
    box-sizing: content-box;
}
@media (max-width: 720px) {
    /* keep the boxed logo compact enough that logo + sign-in + burger
       share one nav row on phones */
    body[data-brand="oasis27"] .fl-nav .fl-logo-img { height: 30px; }
    body[data-theme="light"][data-brand="oasis27"] .fl-nav .fl-logo-img { padding: 5px 9px; }
}

/* oasis27 has no search bar, so the stamp's -46% lift lands it on the nav
   links — drop it to hang over the hero's top edge instead. */
body[data-brand="oasis27"] .fl-fee-stamp { transform: translateY(-14%) rotate(-4deg); }
body[data-brand="oasis27"] .fl-fee-stamp-wrap:hover .fl-fee-stamp { transform: translateY(-14%) rotate(-1deg) scale(1.03); }
@media (max-width: 720px) {
    body[data-brand="oasis27"] .fl-fee-stamp { transform: translateY(-16%) rotate(-3deg); }
    body[data-brand="oasis27"] .fl-fee-stamp-wrap:hover .fl-fee-stamp { transform: translateY(-16%) rotate(-1deg); }
}

/* ── oasis27 "oasis box" treatment (Dean 2026-09-15) ─────────────────────
   The boxed-logo look everywhere: black panel, bold inset white frame,
   black outer lip (border-white + outline-black sandwich), sharp corners.
   Replaces the earlier white-panel experiment on the event page. */
body[data-brand="oasis27"] .fl-detail-filters,
body[data-brand="oasis27"] .fl-listings-toolbar,
body[data-brand="oasis27"] .fl-listings,
body[data-brand="oasis27"] .fl-seatmap-inline,
body[data-brand="oasis27"] .fl-card,
body[data-brand="oasis27"] .fl-why-buy-card,
body[data-brand="oasis27"] .fl-blog-card,
body[data-brand="oasis27"] .fl-trust.fl-trust-pill,
body[data-brand="oasis27"] .fl-hero-carousel {
    background: #0c0c0c !important;
    border: 2px solid #ffffff !important;
    outline: 4px solid #0c0c0c !important;
    border-radius: 0 !important;
    box-shadow: none;
}
/* Rows live INSIDE the listings box — no frame of their own, hairline
   separators, light text (matches the base dark styling). */
body[data-brand="oasis27"] .fl-listing-row {
    background: #0c0c0c !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
body[data-brand="oasis27"] .fl-listing-row:hover { background: #181818 !important; }
/* Tour wall date chips as mini oasis boxes. */
body[data-brand="oasis27"] .fl-tourwall-date {
    background: #0c0c0c;
    border: 1.5px solid #ffffff;
    outline: 3px solid #0c0c0c;
    border-radius: 0;
    color: #ffffff;
}
body[data-brand="oasis27"] .fl-tourwall-date:hover {
    background: var(--accent);
    border-color: #ffffff;
    color: #ffffff;
}
/* Trending chips + hot badge pick up the same box language. */
body[data-brand="oasis27"] .fl-trending-chip {
    background: #0c0c0c;
    border: 1.5px solid #ffffff;
    outline: 3px solid #0c0c0c;
    border-radius: 0;
    color: #ffffff;
}
/* The white frame needs breathing room so the outline lip never kisses
   neighbouring content. */
body[data-brand="oasis27"] .fl-hero-carousel,
body[data-brand="oasis27"] .fl-trust.fl-trust-pill { outline-offset: 0; margin-top: 18px; }

/* oasis27 GOING FAST cards as gig posters (Dean 2026-09-15): white frames,
   high-contrast B&W photos that colourise on hover, slight flyer-wall tilt.
   Doubled attribute selector out-specifies the layout inline card-style
   block, which also writes border/background with !important. */
body[data-brand="oasis27"][data-theme] .fl-card {
    background: #0c0c0c !important;
    border: 2px solid #ffffff !important;
    outline: 4px solid #0c0c0c !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55) !important;
    border-radius: 0 !important;
    transition: transform 0.18s ease;
}
body[data-brand="oasis27"] .fl-hot-grid .fl-card:nth-child(3n+1) { transform: rotate(-1deg); }
body[data-brand="oasis27"] .fl-hot-grid .fl-card:nth-child(3n+2) { transform: rotate(0.6deg) translateY(5px); }
body[data-brand="oasis27"] .fl-hot-grid .fl-card:nth-child(3n)   { transform: rotate(0.9deg); }
body[data-brand="oasis27"] .fl-hot-grid .fl-card:hover { transform: rotate(0deg) scale(1.015); z-index: 2; }
body[data-brand="oasis27"] .fl-card-img {
    position: relative;
    border-bottom: 2px solid #ffffff;
}
/* Mono the photo via a backdrop-filter overlay instead of filtering the
   element — the MAD FER IT / FanSure badges are children of the image
   div and must keep their colour. Badges get lifted above the overlay. */
body[data-brand="oasis27"] .fl-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: grayscale(1) contrast(1.22) brightness(0.94);
    pointer-events: none;
    transition: backdrop-filter 0.25s ease;
}
body[data-brand="oasis27"] .fl-card:hover .fl-card-img::after { backdrop-filter: none; }
/* badges are already absolutely positioned — only lift them above the
   overlay, never touch their position */
body[data-brand="oasis27"] .fl-card-img > * { z-index: 2; }

/* oasis27 event hero: bias the cover crop toward the top of the frame —
   the hero is a short wide strip and centre-cropping live-band photos
   slices everyone at the torso; faces live in the upper third
   (Dean 2026-09-15). Applies to the homepage hero slides too. */
body[data-brand="oasis27"] .fl-detail-hero-photo { background-position: center 18%; }
body[data-brand="oasis27"] .fl-hero-slide-bg img { object-position: center 22%; }

/* oasis27 mobile hero pass (Dean 2026-09-15, real-device QA):
   1) the sticky mobile nav (z-1000) paints its border over the stamp —
      drop the stamp fully below the seam instead of fighting the nav's
      stacking context (going above z-1000 would overlay the nav on scroll);
   2) slides: pin every element to the same spot regardless of venue-name
      length — one-line ellipsised meta, full-width CTA, clearance between
      the CTA and the slide progress bars. */
@media (max-width: 720px) {
    body[data-brand="oasis27"] .fl-fee-stamp-wrap { padding-right: 8px; }
    body[data-brand="oasis27"] .fl-fee-stamp,
    body[data-brand="oasis27"] .fl-fee-stamp-wrap:hover .fl-fee-stamp {
        transform: translateY(0%) rotate(-3deg);
    }
    body[data-brand="oasis27"] .fl-hero-carousel { min-height: 460px; }
    body[data-brand="oasis27"] .fl-hero-slide { padding: 18px 16px 66px; }
    body[data-brand="oasis27"] .fl-hero-meta dl {
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
        width: 100%;
    }
    body[data-brand="oasis27"] .fl-hero-meta dd {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        max-width: 100%;
    }
    body[data-brand="oasis27"] .fl-hero-meta .fl-cta,
    body[data-brand="oasis27"] .fl-hero-slide .fl-cta {
        width: 100%;
        justify-content: center;
    }
    body[data-brand="oasis27"] .fl-hero-nav { bottom: 10px; }
}
@media (max-width: 720px) {
    /* pass 2: reserve two title lines so 1-line and 2-line cities put the
       meta block in the same place; never wrap the small-caps labels; give
       the slide enough height that nothing dives under the CTA. */
    body[data-brand="oasis27"] .fl-hero-carousel { min-height: 510px; }
    body[data-brand="oasis27"] .fl-hero-title { min-height: 78px; align-content: center; }
    body[data-brand="oasis27"] .fl-hero-meta dt { white-space: nowrap; font-size: 10px; }
}

/* oasis27: the no-sneaky-fees stamp is a BUCKET HAT (Dean 2026-09-15).
   The SVG hat replaces the rectangle; the main line sits on the crown,
   the sub-line is dropped (too much text for a hat). */
body[data-brand="oasis27"] .fl-fee-stamp {
    background: transparent url('/assets/img/brands/oasis27/bucket-hat.svg') no-repeat center / contain;
    border: 0;
    outline: none;
    box-shadow: none;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    width: 224px;
    height: 138px;
    padding: 26px 54px 0;
    align-items: center;
    justify-content: flex-start;
    color: #ffffff;
}
body[data-brand="oasis27"] .fl-fee-stamp-main {
    font-size: 15px;
    line-height: 1.1;
    text-align: center;
    letter-spacing: 0.03em;
}
/* brim print lives inside the SVG now (curved textPath follows the
   hat contour) — the HTML sub-line stays hidden */
body[data-brand="oasis27"] .fl-fee-stamp-sub { display: none; }
@media (max-width: 720px) {
    body[data-brand="oasis27"] .fl-fee-stamp {
        width: 164px;
        height: 101px;
        padding: 18px 40px 0;
    }
    body[data-brand="oasis27"] .fl-fee-stamp-main { font-size: 11px; white-space: normal; line-height: 1.12; }
}
/* hat is decorative — never intercept clicks aimed at the nav beneath it */
body[data-brand="oasis27"] .fl-fee-stamp-wrap,
body[data-brand="oasis27"] .fl-fee-stamp { pointer-events: none; }