/**
 * Ticket component (theme 3.0.0, Boarding Pass).
 *
 * Shared by every page that prints fares as tickets: homepage deal grid,
 * /weekend-escapes/. Enqueued on all Mock-01 pages after moraine.css
 * (functions.php); home.css builds the hero pass on top of these tokens.
 *
 * Markup contract (see front-page.php and templates/weekend-escapes.php):
 *   article.fs-ticket[data-fs-price]
 *     .fs-ticket-photo (--fsm-card-photo)
 *     .fs-ticket-main > .fs-ticket-top (.fs-ticket-fact.is-hot|is-warm|is-plain, .fs-ticket-airline)
 *                     > .fs-ticket-codes (.fs-ticket-end > .fs-ticket-code + .fs-ticket-city, .fs-ticket-line)
 *     .fs-ticket-perf
 *     .fs-ticket-stub > .fs-ticket-when (.fs-ticket-dates, .fs-ticket-trip) + .fs-ticket-fare (.price, small)
 *     a.fs-ticket-cta
 */

body.fs-mock01 {
    --bp-ink: var(--mor-ink, #0F2430);
    --bp-snow: var(--mor-bg, #EEF5F6);
    --bp-muted: var(--mor-muted, #4A6672);
    --bp-line: var(--mor-card-line, #DEEBED);
    --bp-teal: var(--mor-teal, #12808F);
    --bp-teal-ink: #0B5E69;          /* teal text on mint: 6.1:1 */
    --bp-mint: #E0F0F2;
    --bp-glacier: var(--mor-cyan, #5FD3DF);
    --bp-orange: var(--mor-orange, #E1682B);
    --bp-orange-ink: var(--mor-orange-deep, #B54E14);
    --bp-dash: #9DB9C0;
    --bp-perf: #C9DADD;
    --bp-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ═════════════════════════════════════════════════════════════════
   TICKET CARDS (deal grid)
   ═════════════════════════════════════════════════════════════════ */
body.fs-mock01 .fsm-deal-grid,
body.fs-mock01 .fs-ticket-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 640px) { body.fs-mock01 .fsm-deal-grid, body.fs-mock01 .fs-ticket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { body.fs-mock01 .fsm-deal-grid, body.fs-mock01 .fs-ticket-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

body.fs-mock01 .fs-ticket {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    background: #fff;
    border: 1px solid var(--bp-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 34px -26px rgba(15,36,48,.45) !important;
    transition: box-shadow .18s ease, border-color .18s ease;
}
body.fs-mock01 .fs-ticket:hover {
    transform: none;
    border-color: #C7DDE0 !important;
    box-shadow: 0 20px 40px -24px rgba(15,36,48,.5) !important;
}
body.fs-mock01 .fs-ticket-photo {
    height: 112px;
    border-radius: 19px 19px 0 0;
    background:
        var(--fsm-card-photo, none) center/cover no-repeat,
        linear-gradient(135deg, #123C46 0%, #0F2430 100%);
}
body.fs-mock01 .fs-ticket-main { padding: 18px 22px 10px; display: flex; flex-direction: column; gap: 16px; }
body.fs-mock01 .fs-ticket-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 20px;
}
body.fs-mock01 .fs-ticket-fact {
    font-family: var(--bp-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bp-muted);
    white-space: nowrap;
}
body.fs-mock01 .fs-ticket-fact.is-hot { color: var(--bp-orange-ink); }
body.fs-mock01 .fs-ticket-fact.is-warm { color: var(--bp-teal-ink); }
body.fs-mock01 .fs-ticket-airline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bp-muted);
}
body.fs-mock01 .fs-ticket-airline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fs-mock01 .fs-ticket-airline img { width: 20px; height: 20px; border-radius: 4px; flex: none; }
body.fs-mock01 .fs-ticket-codes { display: flex; align-items: center; gap: 12px; }
body.fs-mock01 .fs-ticket-end { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.fs-mock01 .fs-ticket-end--to { align-items: flex-end; text-align: right; }
body.fs-mock01 .fs-ticket-code {
    font-family: var(--bp-mono);
    font-size: 2.05rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bp-ink);
}
body.fs-mock01 .fs-ticket-city {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    color: var(--bp-muted);
    white-space: nowrap;
    max-width: 130px;
}
body.fs-mock01 .fs-ticket-city > span { overflow: hidden; text-overflow: ellipsis; }
body.fs-mock01 .fs-ticket-city img.flag { width: 18px; height: 13px; border-radius: 2px; flex: none; }
body.fs-mock01 .fs-ticket-line {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--bp-teal);
    padding-bottom: 18px;
    min-width: 40px;
}
body.fs-mock01 .fs-ticket-line > span {
    flex: 1 1 auto;
    height: 0;
    border-top: 2px dashed var(--bp-dash);
}
body.fs-mock01 .fs-ticket-line svg { flex: none; }

/* Perforation: dashed tear line with two notches punched through the card edge */
body.fs-mock01 .fs-ticket-perf {
    position: relative;
    height: 24px;
    margin: 0 -1px;
    background:
        /* 1px rim in the card's border colour: on a white panel a rimless
           notch read as a gap in the border, not a punched hole. */
        radial-gradient(circle at 0 50%, var(--bp-notch, var(--bp-snow)) 10.5px, var(--bp-line) 11px, var(--bp-line) 11.5px, transparent 12.5px),
        radial-gradient(circle at 100% 50%, var(--bp-notch, var(--bp-snow)) 10.5px, var(--bp-line) 11px, var(--bp-line) 11.5px, transparent 12.5px);
}
body.fs-mock01 .fs-ticket-perf::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 11px;
    border-top: 2px dashed var(--bp-perf);
}
body.fs-mock01 .fs-ticket-stub {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    padding: 8px 22px 16px;
}
body.fs-mock01 .fs-ticket-when { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.fs-mock01 .fs-ticket-dates {
    font-family: var(--bp-mono);
    font-size: .8rem;
    font-weight: 700;
    color: var(--bp-ink);
    white-space: nowrap;
}
body.fs-mock01 .fs-ticket-trip { font-size: .8rem; color: var(--bp-muted); }
body.fs-mock01 .fs-ticket-fare { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
body.fs-mock01 .fs-ticket .price {
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--bp-ink) !important;
}
body.fs-mock01 .fs-ticket-fare small {
    font-family: var(--bp-mono);
    font-size: .7rem;
    font-weight: 700;
    color: var(--bp-muted);
}
body.fs-mock01 .fs-ticket a.fs-ticket-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: auto 22px 22px;
    padding: 0 16px !important;
    border-radius: 12px !important;
    background: var(--bp-mint) !important;
    color: var(--bp-teal-ink) !important;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none;
}
body.fs-mock01 .fs-ticket a.fs-ticket-cta:hover,
body.fs-mock01 .fs-ticket a.fs-ticket-cta:focus-visible {
    background: var(--bp-teal) !important;
    color: #fff !important;
}

/* The ticket keeps its hover state; legacy card rules (lift, pill CTA)
   must not leak in when a template also uses .fsm-deal-card/.fareseeker-card */
body.fs-mock01 .fs-ticket:hover { transform: none; }
@media (max-width: 575.98px) { body.fs-mock01 .fs-ticket-code { font-size: 1.8rem; } }

/* Notches are "holes": they take the colour of whatever the grid sits on.
   Homepage grid sits on snow (default); /weekend-escapes/ on a white panel. */
body.fs-mock01 .fareseeker-weekend-escapes { --bp-notch: #fff; }

/* /weekend-escapes/ filter bar: light, side by side, 44px controls */
body.fs-mock01 .fareseeker-weekend-escapes .fareseeker-filters {
    background: var(--bp-snow) !important;      /* out-ranks mock01-polish's dark !important panel */
    border: 1px solid var(--bp-line) !important;
    border-radius: 16px;
    padding: 16px 20px !important;
    margin: 0 0 28px !important;
    box-shadow: none !important;
}
body.fs-mock01 .fareseeker-weekend-escapes .fareseeker-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-end;
}
body.fs-mock01 .fareseeker-weekend-escapes .fareseeker-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}
body.fs-mock01 .fareseeker-weekend-escapes .fareseeker-filter-group label {
    font-family: var(--bp-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bp-muted) !important;
    margin: 0;
}
body.fs-mock01 .fareseeker-weekend-escapes select.fareseeker-select {
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--bp-line);
    background-color: #fff;
    color: var(--bp-ink);
    font-weight: 600;
}
body.fs-mock01 .fareseeker-weekend-escapes .fareseeker-weekend-header { text-align: left; margin-bottom: 20px; }
body.fs-mock01 .fareseeker-weekend-escapes .fareseeker-section-title {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--bp-ink);
    justify-content: flex-start;
}
body.fs-mock01 .fareseeker-weekend-escapes .fareseeker-section-subtitle { color: var(--bp-muted); }
@media (max-width: 575.98px) {
    body.fs-mock01 .fareseeker-weekend-escapes .fareseeker-filter-row { flex-direction: column; align-items: stretch; }
    body.fs-mock01 .fareseeker-weekend-escapes .fareseeker-filter-group { min-width: 0; width: 100%; }
}

/* ── /deals/ route tickets: neutralise the old photo-overlay card ──────── */
body.fs-mock01 .fs-deals-page { --bp-notch: #fff; }
body.fs-mock01 .fs-route-deal-card.fs-ticket {
    min-height: 0;
    display: flex;
    grid-template-rows: none;
    isolation: auto;
    overflow: visible;
    color: var(--bp-ink);
}
body.fs-mock01 .fs-route-deal-card.fs-ticket::after { content: none; }
body.fs-mock01 .fs-route-deal-card.fs-ticket:hover { transform: none; }
body.fs-mock01 .fs-route-deal-card.fs-ticket .fs-route-card-photo {
    position: static;
    inset: auto;
    z-index: auto;
    transform: none;
    background-size: cover;
    background-position: center;
}
body.fs-mock01 .fs-route-deal-card.fs-ticket:hover .fs-route-card-photo { transform: none; }
body.fs-mock01 .fs-ticket-from {
    font-family: var(--bp-mono);
    font-size: .7rem;
    font-weight: 700;
    color: var(--bp-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}
body.fs-mock01 .fs-ticket .fs-ticket-trip { line-height: 1.35; }
body.fs-mock01 .fs-ticket a.fs-ticket-cta { width: auto !important; box-sizing: border-box; align-self: stretch; }

/* ── /flight-route/ ─────────────────────────────────────────────────────
   mock01-polish.css forces light label colours on .fs-route-page (written
   for a dark layout); the filter sidebar is white, so "Filters", "Price
   range", "Departure date", "Stops" rendered near-invisible. */
body.fs-mock01 .fs-route-page .fs-filters-sidebar .fs-filters-title { color: var(--bp-ink) !important; }
body.fs-mock01 .fs-route-page .fs-filters-sidebar .fs-filter-label,
body.fs-mock01 .fs-route-page .fs-filters-sidebar label { color: var(--bp-muted) !important; }
body.fs-mock01 .fs-route-page .fs-filters-sidebar .fs-filter-label {
    font-family: var(--bp-mono);
    font-size: .7rem;
    letter-spacing: .12em;
}
/* Fare tags print as plain facts, not pills (standing rule) */
body.fs-mock01 .fs-route-page .fs-flight-tag,
body.fs-mock01 .fs-route-page .fs-flight-tag.hot,
body.fs-mock01 .fs-route-page .fs-flight-tag.weekend,
body.fs-mock01 .fs-route-page .fs-flight-tag.nonstop {
    background: none !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    font-family: var(--bp-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
}
body.fs-mock01 .fs-route-page .fs-flight-tag.nonstop { color: #1B7A4B !important; }
body.fs-mock01 .fs-route-page .fs-flight-tag.hot { color: var(--bp-orange-ink) !important; }
body.fs-mock01 .fs-route-page .fs-flight-tag.weekend { color: var(--bp-teal-ink) !important; }
/* Hero verdict ("23% above typical") prints as a fact line, not a pill */
body.fs-mock01 .fs-route-page .fs-route-vs {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 6px;
    min-height: 44px;
    font-family: var(--bp-mono);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── /search/ results ──────────────────────────────────────────────────
   The price sat in a teal->cyan gradient pill with orange text (unreadable,
   and a gradient tell); durations/stops/direct were coloured pills. Print
   them as the ticket prints facts: plain ink price, mono fact labels. */
body.fs-mock01 .fs-search-page .fs-price-badge {
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-align: right;
}
body.fs-mock01 .fs-search-page .fs-price-badge .fs-price-amount {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--bp-ink) !important;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -.04em;
}
body.fs-mock01 .fs-search-page .fs-price-badge .fs-price-per { color: var(--bp-muted) !important; font-family: var(--bp-mono); font-size: .7rem; }
body.fs-mock01 .fs-search-page .fs-badge {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-family: var(--bp-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bp-muted) !important;
}
body.fs-mock01 .fs-search-page .fs-badge.fs-badge-direct { color: #1B7A4B !important; }
body.fs-mock01 .fs-search-page .fs-badge-duration.fs-duration-long { color: var(--bp-orange-ink) !important; }

/* ── 404 ─────────────────────────────────────────────────────────────── */
body.fs-mock01.error404 { background: var(--bp-snow) !important; }
body.fs-mock01 .fs-404 { max-width: 620px; margin: 0 auto; padding: 64px 20px 96px; }
body.fs-mock01 .fs-404-ticket { box-shadow: 0 30px 60px -30px rgba(15,36,48,.45) !important; }
body.fs-mock01 .fs-404-body { padding: 10px 26px 28px; }
body.fs-mock01 .fs-404-body h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.1;
    color: var(--bp-ink);
    margin: 6px 0 12px;
}
body.fs-mock01 .fs-404-body p { color: var(--bp-muted); font-size: 1.02rem; line-height: 1.6; margin: 0 0 22px; }
body.fs-mock01 .fs-404-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.fs-mock01 a.fs-404-btn {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--bp-mint);
    color: var(--bp-teal-ink);
    font-weight: 700;
    text-decoration: none;
}
body.fs-mock01 a.fs-404-btn:hover { background: var(--bp-teal); color: #fff; }
body.fs-mock01 a.fs-404-btn--primary { background: var(--bp-ink); color: #fff; }

/* /deals/: hold the grid's space while it loads so the links panel below
   doesn't jump (CLS was 0.13, mostly this one shift). */
body.fs-mock01 .fs-deals-page > .fs-loading { min-height: 1200px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 80px; }

/* 3-up grid between 992 and 1199 px: slightly smaller fare so the trip
   line stays on one line next to it */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body.fs-mock01 .fs-ticket .price { font-size: 1.75rem; }
    body.fs-mock01 .fs-ticket-trip { font-size: .76rem; }
    body.fs-mock01 .fs-ticket-main, body.fs-mock01 .fs-ticket-stub { padding-left: 18px; padding-right: 18px; }
    body.fs-mock01 .fs-ticket a.fs-ticket-cta { margin-left: 18px; margin-right: 18px; }
}

/* ── /blog/ (spec 004 A13): category labels as plain mono text, not pills */
body.fs-mock01 .fs-blog-tag,
body.fs-mock01 .fs-blog-hero-meta .fs-blog-tag,
body.fs-mock01 .fs-blog-card-meta .fs-blog-tag {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-family: var(--bp-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bp-orange-ink) !important;
}

/* ── /search/ result cards as tickets (backlog A12, loop 4) ────────────
   Cards were 541px on desktop / 890px on phones: duration printed twice,
   a full-width button row, roomy segment blocks. Wide lists: flight details
   left, a torn-off stub right with price + CTA. Narrow lists: same content
   stacked tighter with price and CTA sharing the last row. */
body.fs-mock01 .fs-search-page .fs-results-grid { container-type: inline-size; container-name: fsresults; }
body.fs-mock01 .fs-search-page .fs-flight-card-premium { padding: 1rem 1.15rem; margin-bottom: .85rem; }
body.fs-mock01 .fs-search-page .fs-flight-card-premium:hover { transform: none; }
/* The same duration prints on the outbound line; the badge repeated it. */
body.fs-mock01 .fs-search-page .fs-badge-duration { display: none !important; }
body.fs-mock01 .fs-search-page .fs-badges-row { margin-bottom: .4rem; min-height: 0; }
body.fs-mock01 .fs-search-page .fs-badges-row:empty { display: none; }
body.fs-mock01 .fs-search-page .fs-airline-logos { margin-bottom: .6rem; }
body.fs-mock01 .fs-search-page .fs-flight-segment { margin-bottom: .55rem; padding: 0 0 .55rem; background: none !important; border: 0; border-bottom: 1px dashed var(--bp-line); border-radius: 0 !important; box-shadow: none !important; }
body.fs-mock01 .fs-search-page .fs-flight-segment:last-of-type { border-bottom: 0; }
body.fs-mock01 .fs-search-page .fs-segment-label { font-family: var(--bp-mono); font-size: .64rem; letter-spacing: .14em; margin-bottom: .3rem; }
body.fs-mock01 .fs-search-page .fs-segment-route { gap: .75rem; }
body.fs-mock01 .fs-search-page .fs-segment-endpoint { min-width: 64px; display: grid; justify-items: center; line-height: 1.2; }
body.fs-mock01 .fs-search-page .fs-segment-time { font-size: 1.1rem; }
body.fs-mock01 .fs-search-page .fs-segment-code { font-family: var(--bp-mono); font-size: .8rem; }
body.fs-mock01 .fs-search-page .fs-segment-city { font-size: .72rem; }
body.fs-mock01 .fs-search-page .fs-flight-info-bar { margin: .2rem 0 0; padding: 0; border: 0; font-size: .82rem; }
body.fs-mock01 .fs-search-page .fs-book-btn-premium { width: auto; margin-top: 0; padding: .65rem 1.2rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }

@container fsresults (min-width: 620px) {
    body.fs-mock01 .fs-search-page .fs-flight-card-premium {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 184px;
        column-gap: 1.4rem;
        align-items: start;
        padding: 1rem 0 1rem 1.2rem;
        overflow: hidden;
    }
    /* Stub: dashed tear line + tinted panel */
    body.fs-mock01 .fs-search-page .fs-flight-card-premium::before {
        content: ""; position: absolute; top: 0; bottom: 0; right: 184px;
        border-left: 2px dashed var(--bp-perf); pointer-events: none;
    }
    body.fs-mock01 .fs-search-page .fs-flight-card-premium::after {
        content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 184px;
        background: var(--bp-snow); z-index: 0; pointer-events: none;
    }
    body.fs-mock01 .fs-search-page .fs-flight-card-premium > * { grid-column: 1; position: relative; z-index: 1; }
    body.fs-mock01 .fs-search-page .fs-price-badge {
        position: relative !important; top: auto !important; right: auto !important;
        grid-column: 2; grid-row: 1 / span 3; align-self: start;
        padding: .2rem 1rem 0 0 !important; text-align: left !important;
    }
    body.fs-mock01 .fs-search-page .fs-book-btn-premium {
        grid-column: 2; grid-row: 4 / span 6; align-self: end; justify-self: start;
        margin: 0 1rem 0 0;
    }
}
@container fsresults (max-width: 619.98px) {
    body.fs-mock01 .fs-search-page .fs-flight-card-premium { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; align-items: center; }
    body.fs-mock01 .fs-search-page .fs-flight-card-premium > * { grid-column: 1 / -1; }
    /* Keep each leg on one line: time/code | line | time/code (the old
       mobile rule stacked them into three rows per leg). */
    body.fs-mock01 .fs-search-page .fs-segment-route { flex-direction: row !important; align-items: center; gap: .5rem; }
    body.fs-mock01 .fs-search-page .fs-segment-endpoint { min-width: 56px; }
    body.fs-mock01 .fs-search-page .fs-segment-line { flex: 1 1 auto; min-width: 0; display: grid !important; justify-items: center; gap: 2px; }
    body.fs-mock01 .fs-search-page .fs-segment-duration,
    body.fs-mock01 .fs-search-page .fs-segment-stops-text { font-size: .72rem; }
    body.fs-mock01 .fs-search-page .fs-segment-visual { width: 100%; }
    body.fs-mock01 .fs-search-page .fs-flight-info-bar { display: flex; flex-wrap: wrap; gap: .2rem 1rem; justify-content: flex-start; }
    body.fs-mock01 .fs-search-page .fs-price-badge { order: 90; grid-column: 1; position: static !important; text-align: left !important; margin-top: .5rem; }
    body.fs-mock01 .fs-search-page .fs-book-btn-premium { order: 91; grid-column: 2; margin-top: .5rem; }
    body.fs-mock01 .fs-search-page .fs-price-badge .fs-price-amount { font-size: 1.6rem; }
}


/* ── Scope switch: Leaving Canada / Within Canada / Both (home + /deals/) ─────────────── */
body.fs-mock01 .fs-scope {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin: 18px 0 4px;
    background: #fff;
    border: 1px solid var(--bp-line);
    border-radius: 14px;
}
body.fs-mock01 .fs-scope-btn {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--bp-ink);
    font-size: .92rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
body.fs-mock01 .fs-scope-btn:hover { background: var(--bp-snow); }
body.fs-mock01 .fs-scope-btn.active { background: var(--bp-teal); color: #fff; }
body.fs-mock01 .fs-scope-btn .count { font-family: var(--bp-mono); font-size: .78rem; font-weight: 700; opacity: .75; }
/* On the teal active button the faded count was 3.32:1; white is 4.66:1. */
body.fs-mock01 .fs-scope-btn.active .count { opacity: 1; color: #fff; }
@media (max-width: 575.98px) {
    body.fs-mock01 .fs-scope { display: flex; }
    body.fs-mock01 .fs-scope-btn { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: .85rem; }
}

/* /deals/ tickets: the option count ("25 options") sat beside a long fact
   label and truncated to "25 o..." in French. Let the header row wrap. */
body.fs-mock01 .fs-route-deal-card .fs-ticket-top { flex-wrap: wrap; row-gap: 4px; }
body.fs-mock01 .fs-route-deal-card .fs-ticket-airline { flex: none; margin-left: auto; }
body.fs-mock01 .fs-route-deal-card .fs-ticket-airline span { overflow: visible; text-overflow: clip; }
body.fs-mock01 .fs-route-deal-card .fs-ticket-fare { white-space: nowrap; }
/* /deals/ button styles shrank the scope buttons to 28px; keep 44px. */
body.fs-mock01 .fs-scope .fs-scope-btn { min-height: 44px; line-height: 1.2; }
body.fs-mock01 .fs-deals-page .fs-scope, body.fs-mock01 .fareseeker-deals .fs-scope { margin: 14px 0 10px; }

/* /weekend-escapes/ "Show 12 more" (same look as /deals/, whose button
   styles live inline in its template). */
body.fs-mock01 .fareseeker-weekend-escapes .fs-show-more-wrap,
body.fs-mock01 .fs-show-more-wrap { display: grid; justify-items: center; gap: 8px; margin: 24px 0 8px; }
body.fs-mock01 .fs-show-more-count { margin: 0; font-size: .85rem; color: var(--bp-muted); }
body.fs-mock01 .fs-show-more-wrap .fs-page-btn {
    min-height: 44px; padding: .55rem 1.3rem; border-radius: 999px;
    border: 1px solid rgba(18,128,143,.4); background: rgba(18,128,143,.08);
    color: #0D6470; font-weight: 700; font-size: .88rem; cursor: pointer;
}
body.fs-mock01 .fs-show-more-wrap .fs-page-btn:hover { background: var(--bp-teal); border-color: var(--bp-teal); color: #fff; }

/* ── Route request widget on the light layer (loop 7) ──────────────────
   It was the last dark panel on a light page, with pill vote badges and a
   pulsing green "Live" dot (both on the no-AI-tells list). Same content,
   ticket styling: white panels, ink text, mono fields, plain status text. */
body.fs-mock01 .fs-rr-widget { background: transparent; padding: 0; }
body.fs-mock01 .fs-rr-widget .fs-rr-section-title { color: var(--bp-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-section-sub { color: var(--bp-muted); }
body.fs-mock01 .fs-rr-widget .fs-rr-form-card,
body.fs-mock01 .fs-rr-widget .fs-rr-leaderboard {
    background: #fff; border: 1px solid var(--bp-line); backdrop-filter: none;
    box-shadow: 0 12px 30px -22px rgba(15,36,48,.35);
}
body.fs-mock01 .fs-rr-widget .fs-rr-input-group label,
body.fs-mock01 .fs-rr-widget .fs-rr-frequency-label,
body.fs-mock01 .fs-rr-widget .fs-rr-lb-title { color: var(--bp-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-arrow-sep { color: var(--bp-muted); }
body.fs-mock01 .fs-rr-widget .fs-rr-suggestions { background: #fff; border: 1px solid var(--bp-line); box-shadow: 0 16px 30px -18px rgba(15,36,48,.4); }
body.fs-mock01 .fs-rr-widget .fs-rr-suggestion-item:hover,
body.fs-mock01 .fs-rr-widget .fs-rr-suggestion-item.active { background: var(--bp-snow); }
body.fs-mock01 .fs-rr-widget .fs-rr-suggestion-code { color: var(--bp-teal-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-suggestion-city { color: var(--bp-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-suggestion-country { color: var(--bp-muted); }
body.fs-mock01 .fs-rr-widget .fs-rr-preview { background: var(--bp-snow); border-color: var(--bp-line); }
body.fs-mock01 .fs-rr-widget .fs-rr-preview-kicker { color: var(--bp-teal-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-preview-route { color: var(--bp-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-preview-pill { background: none; padding: 0; border-radius: 0; color: var(--bp-teal-ink); font-family: var(--bp-mono); font-size: .72rem; }
body.fs-mock01 .fs-rr-widget .fs-rr-preview-summary,
body.fs-mock01 .fs-rr-widget .fs-rr-preview-empty { color: var(--bp-muted); }
body.fs-mock01 .fs-rr-widget .fs-rr-preview-error { color: #B3261E; }
body.fs-mock01 .fs-rr-widget .fs-rr-preview-row { background: #fff; border-color: var(--bp-line); }
body.fs-mock01 .fs-rr-widget .fs-rr-preview-meta { color: var(--bp-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-preview-sub { color: var(--bp-muted); }
body.fs-mock01 .fs-rr-widget .fs-rr-preview-price { color: var(--bp-teal-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-email-optin { background: #FDF3EC; border-color: #F1D3BF; }
body.fs-mock01 .fs-rr-widget .fs-rr-optin-header,
body.fs-mock01 .fs-rr-widget .fs-rr-optin-consent,
body.fs-mock01 .fs-rr-widget .fs-rr-prefs-note { color: var(--bp-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-optin-optional { color: var(--bp-orange-ink); background: none; border: 0; }
body.fs-mock01 .fs-rr-widget .fs-rr-feedback.success { background: #E6F4EC; border-color: #B7DEC6; color: #1E6B43; }
body.fs-mock01 .fs-rr-widget .fs-rr-feedback.error { background: #FBEAEA; border-color: #F0C2C2; color: #9B1C1C; }
body.fs-mock01 .fs-rr-widget .fs-rr-feedback.warn,
body.fs-mock01 .fs-rr-widget .fs-rr-feedback.info { background: #FDF3E1; border-color: #F1DDB0; color: #7A5200; }

body.fs-mock01 .fs-rr-widget .fs-rr-lb-header { border-bottom: 2px dashed var(--bp-line); }
body.fs-mock01 .fs-rr-widget .fs-rr-lb-empty { color: var(--bp-muted); }
body.fs-mock01 .fs-rr-widget .fs-rr-route-row { border-bottom: 1px solid var(--bp-line); }
body.fs-mock01 .fs-rr-widget .fs-rr-route-row:hover { background: var(--bp-snow); border-bottom-color: var(--bp-line); }
body.fs-mock01 .fs-rr-widget .fs-rr-route-row:hover .fs-rr-route-codes { color: var(--bp-teal-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-rank { color: var(--bp-muted); font-family: var(--bp-mono); }
body.fs-mock01 .fs-rr-widget .fs-rr-rank.top1,
body.fs-mock01 .fs-rr-widget .fs-rr-rank.top2,
body.fs-mock01 .fs-rr-widget .fs-rr-rank.top3 { color: var(--bp-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-route-codes { color: var(--bp-muted); font-family: var(--bp-mono); }
body.fs-mock01 .fs-rr-widget .fs-rr-route-arrow { color: var(--bp-dash); }
body.fs-mock01 .fs-rr-widget .fs-rr-route-cities { color: var(--bp-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-vote-badge {
    background: none; border: 0; border-radius: 0; padding: 0;
    color: var(--bp-orange-ink); font-family: var(--bp-mono); font-size: .75rem;
}
body.fs-mock01 .fs-rr-widget .fs-rr-votes-label { color: var(--bp-muted); }
/* Status: plain text, no glowing/pulsing dot. */
body.fs-mock01 .fs-rr-widget .fs-rr-dot { display: none; }
body.fs-mock01 .fs-rr-widget .fs-rr-status-dot { font-family: var(--bp-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-teal-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-deal-count { color: var(--bp-muted); }
body.fs-mock01 .fs-rr-widget .fs-rr-deal-count strong { color: var(--bp-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-view-btn { color: var(--bp-teal-ink); border-bottom-color: rgba(11,94,105,.35); }
body.fs-mock01 .fs-rr-widget .fs-rr-view-btn:hover { color: var(--bp-ink); border-bottom-color: var(--bp-ink); }
body.fs-mock01 .fs-rr-widget .fs-rr-status-dot span { color: var(--bp-teal-ink) !important; } /* statusColor() inline colours were picked for the dark panel */

/* Inputs: the widget's own rule painted them for the dark panel. */
body.fs-mock01 .fs-rr-widget .fs-rr-form-card input.fs-rr-input {
    background: #fff; border: 1px solid var(--bp-line); color: var(--bp-ink);
}
body.fs-mock01 .fs-rr-widget .fs-rr-form-card input.fs-rr-input::placeholder { color: #6B8290; }
body.fs-mock01 .fs-rr-widget .fs-rr-form-card input.fs-rr-input:focus { border-color: var(--bp-teal); box-shadow: 0 0 0 3px rgba(18,128,143,.15); }
body.fs-mock01 .fs-rr-widget .fs-rr-input-group label { color: var(--bp-muted); font-family: var(--bp-mono); letter-spacing: .1em; }
/* Phones: the status column (tracking state, deal count, View deals) was
   hidden under 500px, so a phone visitor could not open a requested route. */
@media (max-width: 500px) {
    body.fs-mock01 .fs-rr-widget .fs-rr-status-col {
        display: flex; grid-column: 2; flex-direction: row; flex-wrap: wrap;
        align-items: baseline; justify-content: flex-start; gap: .25rem .9rem;
    }
}

/* ── /blog/ (loop 8) ──────────────────────────────────────────────────
   Gradient buttons are on the no-AI-tells list; the meta line broke into
   ragged columns on phones; three nested paddings (12+16+20px a side) left
   cards 292px wide on a 390px phone. */
body.fs-mock01 .fs-blog-listing .fs-blog-hero-cta,
body.fs-mock01 .fs-blog-listing .fs-blog-pagination span.current { background: var(--bp-teal); box-shadow: none; }
body.fs-mock01 .fs-blog-listing .fs-blog-hero-cta:hover { background: #0D6470; transform: none; box-shadow: none; }
body.fs-mock01 .fs-blog-listing .fs-blog-header h1 span { background: none; -webkit-text-fill-color: currentColor; color: var(--bp-teal-ink); }
body.fs-mock01 .fs-blog-listing .fs-blog-hero-meta { flex-wrap: wrap; gap: 4px 10px; }
body.fs-mock01 .fs-blog-listing .fs-blog-hero-meta > span,
body.fs-mock01 .fs-blog-listing .fs-blog-card-meta > span { white-space: nowrap; }
@media (max-width: 640px) {
    body.fs-mock01 .fs-blog-listing { padding-left: 0; padding-right: 0; }
    body.fs-mock01 .fsm-shortcode-wrap:has(> .fs-blog-listing) { padding-left: 12px; padding-right: 12px; }
    body.fs-mock01 .fs-blog-listing .fs-blog-hero-excerpt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Mobile menu (open): links were #4A6672 on the ink panel, 2.61:1. */
/* moraine.css paints header links --mor-muted with !important (right for the
   white desktop header), so the open panel needs !important too. */
body.fs-mock01 .site-header #main-nav.active a { color: #E4EFF1 !important; }
body.fs-mock01 .site-header #main-nav.active a:hover,
body.fs-mock01 .site-header #main-nav.active a:focus-visible { color: #fff !important; }
body.fs-mock01 .site-header #main-nav.active .current-menu-item > a { color: var(--bp-glacier) !important; }
body.fs-mock01 .site-header #main-nav.active .nav-route-request a { box-shadow: none !important; }

/* /search/ empty state: next steps instead of a dead end (loop 11). */
body.fs-mock01 .fs-search-page .fs-no-results-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
body.fs-mock01 .fs-search-page .fs-no-results-btn {
    display: inline-block; text-align: center; line-height: 1.3; min-height: 44px; padding: .7rem 1.2rem;
    border-radius: 999px; background: var(--bp-teal); color: #fff !important; font-weight: 700; font-size: .9rem; text-decoration: none;
}
body.fs-mock01 .fs-search-page .fs-no-results-btn span { font-family: var(--bp-mono); }
body.fs-mock01 .fs-search-page .fs-no-results-btn.is-secondary { background: #fff; color: var(--bp-teal-ink) !important; border: 1px solid rgba(18,128,143,.4); }

/* Phones: /deals/, /search/ and /weekend-escapes/ nested three padded boxes
   (page gutter + white wrap + component padding), leaving tickets 308px and
   the search inputs 202px wide on a 390px screen. The components carry their
   own cards, so the wrap goes transparent and the page keeps one 16px gutter.
   Ticket notches then sit on the page ground instead of the white panel. */
@media (max-width: 991.98px) { /* phones and tablets (loop 21: tablets had the same squeeze) */
    body.fs-mock01 .fsm-page.container:has(.fs-deals-page, .fs-search-page, .fareseeker-weekend-escapes, .fs-blog-listing, .fs-lm-static, .fs-rr-widget) { padding-left: 16px; padding-right: 16px; }
    body.fs-mock01 .fsm-shortcode-wrap:has(.fs-deals-page, .fs-search-page, .fareseeker-weekend-escapes, .fs-blog-listing, .fs-lm-static, .fs-rr-widget) {
        background: transparent; border: 0; box-shadow: none; padding: 0;
    }
    body.fs-mock01 .fs-deals-page { padding-left: 0; padding-right: 0; --bp-notch: var(--fs-bg, #EEF2F7); }
    body.fs-mock01 .fareseeker-weekend-escapes { --bp-notch: var(--fs-bg, #EEF2F7); padding-left: 0; padding-right: 0; }
    /* its filter bar was snow on the white panel; on the page ground it goes white */
    body.fs-mock01 .fsm-shortcode-wrap .fareseeker-weekend-escapes .fareseeker-filters { background: #fff !important; border: 1px solid var(--bp-line) !important; }
    body.fs-mock01 .fs-search-form-wrapper { padding-left: 0; padding-right: 0; }
    body.fs-mock01 .fsm-shortcode-wrap .fs-blog-listing { padding-top: 0; } /* 40px on top of the page's 24px */
    body.fs-mock01 .fsm-shortcode-wrap .fs-lm-static { margin-left: 0; margin-right: 0; }
    body.fs-mock01 .fs-search-page .fs-advanced-search-form { padding: 20px 16px; }
    body.fs-mock01 .fs-search-page .fs-search-field { padding-left: 0; padding-right: 0; }
}

/* /search/ results on phones and tablets (loop 26): the full filter sidebar
   sat above the results and pushed them ~900px down. It collapses to one
   toggle row; the three quick cards become one compact row. */
body.fs-mock01 .fs-search-page .fs-filter-toggle { display: none; }
@media (max-width: 991.98px) {
    body.fs-mock01 .fs-search-page .fs-filter-toggle {
        display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 16px;
        background: #fff; border: 1px solid var(--bp-line); border-radius: 12px;
        font: inherit; font-weight: 700; color: var(--bp-ink); cursor: pointer;
    }
    body.fs-mock01 .fs-search-page .fs-filter-toggle-chev { margin-left: auto; transition: transform .2s ease; }
    body.fs-mock01 .fs-search-page .fs-filter-sidebar.is-open .fs-filter-toggle-chev { transform: rotate(180deg); }
    body.fs-mock01 .fs-search-page .fs-filter-sidebar:not(.is-open) > :not(.fs-filter-toggle) { display: none; }
    body.fs-mock01 .fs-search-page .fs-filter-sidebar:not(.is-open) { padding: 0; background: transparent; border: 0; box-shadow: none; }
    body.fs-mock01 .fs-search-page .fs-filter-sidebar.is-open .fs-filter-toggle { margin-bottom: 12px; }
    body.fs-mock01 .fs-search-page .fs-filter-header h3 { display: none; } /* the toggle already says Filters */
    body.fs-mock01 .fs-search-page .fs-filter-header { justify-content: flex-end; }
    body.fs-mock01 .fs-search-page .fs-quick-select { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    body.fs-mock01 .fs-search-page .fs-quick-card { padding: 10px 6px; min-width: 0; }
    body.fs-mock01 .fs-search-page .fs-quick-label { font-size: .62rem; letter-spacing: .08em; }
    body.fs-mock01 .fs-search-page .fs-quick-price { font-size: 1.05rem; }
    body.fs-mock01 .fs-search-page .fs-quick-detail { font-size: .72rem; }
    /* count left, sort right, one row */
    body.fs-mock01 .fs-search-page .fs-results-header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; }
    body.fs-mock01 .fs-search-page .fs-results-count { text-align: left; white-space: nowrap; font-weight: 600; }
    body.fs-mock01 .fs-search-page .fs-results-sort { display: flex; align-items: center; gap: 8px; margin: 0; }
    body.fs-mock01 .fs-search-page .fs-results-sort label { margin: 0; white-space: nowrap; }
    body.fs-mock01 .fs-search-page .fs-results-sort select { min-height: 44px; width: auto; }
}

/* Route pages on phones and tablets (loop 27): the filter sidebar sat above
   the flight list and pushed it ~1,100px down. Same one-row toggle as /search/. */
body.fs-mock01 .fs-route-page .fs-filter-toggle { display: none; }
@media (max-width: 991.98px) {
    body.fs-mock01 .fs-route-page .fs-filter-toggle {
        display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 16px;
        background: #fff; border: 1px solid var(--bp-line); border-radius: 12px;
        font: inherit; font-weight: 700; color: var(--bp-ink); cursor: pointer;
    }
    body.fs-mock01 .fs-route-page .fs-filter-toggle-chev { margin-left: auto; transition: transform .2s ease; }
    body.fs-mock01 .fs-route-page .fs-filters-sidebar.is-open .fs-filter-toggle-chev { transform: rotate(180deg); }
    body.fs-mock01 .fs-route-page .fs-filters-sidebar:not(.is-open) > :not(.fs-filter-toggle) { display: none; }
    body.fs-mock01 .fs-route-page .fs-filters-sidebar:not(.is-open) { padding: 0; background: transparent; border: 0; box-shadow: none; }
    body.fs-mock01 .fs-route-page .fs-filters-sidebar.is-open .fs-filter-toggle { margin-bottom: 12px; }
    body.fs-mock01 .fs-route-page .fs-filters-sidebar .fs-filters-title { display: none; }
}
/* Airline select drew the native arrow and a background-image arrow (two chevrons). */
body.fs-mock01 .fs-route-page .fs-filter-select { -webkit-appearance: none; appearance: none; }

/* Content pages on phones and tablets (loop 29): page gutter + white page
   card + the template's own padding + its inner cards left body text 250-300px
   wide on a 390px screen (200px inside the disclaimer's highlighted boxes).
   These templates draw their own cards, so the page card goes transparent. */
@media (max-width: 991.98px) {
    body.fs-mock01 .fsm-page.container:has(.fs-about-page, .fs-disclaimer-page, .fs-terms-page, .fs-privacy-page, .fs-methodology-page, .fs-contact-page) { padding-left: 16px; padding-right: 16px; }
    body.fs-mock01 .fsm-page-content:has(.fs-about-page, .fs-disclaimer-page, .fs-terms-page, .fs-privacy-page, .fs-methodology-page, .fs-contact-page) {
        background: transparent; border: 0; box-shadow: none; padding: 0;
    }
    body.fs-mock01 .fs-about-page, body.fs-mock01 .fs-disclaimer-page, body.fs-mock01 .fs-terms-page,
    body.fs-mock01 .fs-privacy-page, body.fs-mock01 .fs-methodology-page, body.fs-mock01 .fs-contact-page { padding-left: 0; padding-right: 0; }
}
@media (max-width: 575.98px) {
    body.fs-mock01 .fs-about-card, body.fs-mock01 .fs-disclaimer-card, body.fs-mock01 .fs-privacy-card { padding: 20px 18px; }
    body.fs-mock01 .fs-disclaimer-section.fs-disclaimer-highlight { padding: 16px; }
}

/* Phone bottom bar: white on #E1682B was 3.4:1 (axe color-contrast on every
   page at 390px; production too). Deep brand orange is 5.17:1. */
body.fs-mock01 .fs-mobile-bar .fs-mobile-bar-primary { background: var(--bp-orange-ink, #B54E14); }
body.fs-mock01 .fs-mobile-bar .fs-mobile-bar-primary:hover { background: #9A4210; }
/* Links inside legal/policy text: darker teal and underlined, so they read on
   the page ground and don't rely on colour alone (axe, loop 29). */
body.fs-mock01 .fs-terms-page p a, body.fs-mock01 .fs-privacy-page p a, body.fs-mock01 .fs-privacy-page li a,
body.fs-mock01 .fs-disclaimer-page p a, body.fs-mock01 .fs-methodology-page p a {
    color: #0D6470; text-decoration: underline; text-underline-offset: 2px;
}

/* Long crawlable link lists on phones (loop 30): the bottom of /deals/ was
   ~4,500px of links. Show a few, reveal the rest on tap; nothing leaves the
   HTML, so crawlers still get every link. */
.fs-list-more { display: none; }
@media (max-width: 767.98px) {
    .fs-route-links:not(.is-open) .fs-route-links-grid a:nth-child(n+11),
    .fs-ssr-deals:not(.is-open) .fs-ssr-deals-list li:nth-child(n+7),
    .fs-we-static:not(.is-open) ol li:nth-child(n+6) { display: none; }
    .fs-route-links:not(.is-open) .fs-list-more,
    .fs-ssr-deals:not(.is-open) .fs-list-more,
    .fs-we-static:not(.is-open) .fs-list-more {
        display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 12px;
        border: 1px solid rgba(18,128,143,.4); border-radius: 999px; background: #fff;
        color: #0B5E69; font: inherit; font-weight: 700; cursor: pointer;
    }
}

/* Keyboard focus (loop 34, scripts/uat/focus-audit.js): these controls showed
   no change at all when tabbed to (outline removed by legacy rules, nothing
   put back). WCAG 2.4.7. Deep orange reads on white, snow and teal. */
body.fs-mock01 .lang-btn:focus-visible,
body.fs-mock01 .mor-sb-input:focus-visible,
body.fs-mock01 .tab:focus-visible,
body.fs-mock01 .fs-trip-btn:focus-visible,
body.fs-mock01 .fs-search-btn:focus-visible,
body.fs-mock01 .fs-lm-origin-btn:focus-visible {
    outline: 2px solid var(--bp-orange-ink, #B54E14) !important;
    outline-offset: 2px;
}
/* The home search selects sit inside one rounded bar: ring the field row. */
body.fs-mock01 .mor-sb-input:focus-visible { outline-offset: -2px; border-radius: 8px; }

/* Very small phones / 400% zoom (320px, WCAG 1.4.10 reflow, loop 35): EN/FR +
   logo + wordmark + menu needed ~336px, so the menu button hung off-screen
   and /deals/ scrolled sideways. Below 360px the wordmark is hidden visually
   (still read by screen readers); the logo mark stays. */
@media (max-width: 359.98px) {
    body.fs-mock01 .site-header .site-title-text {
        position: absolute !important; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
}
/* "Today's best tracked fares" grid: a fixed 280px minimum column overflowed
   at 320px (28px padding each side). */
body.fs-mock01 .fs-ssr-deals-list { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
@media (max-width: 575.98px) { body.fs-mock01 .fs-ssr-deals { padding: 20px 16px; } }

/* Alpine placeholders (x-cloak) were only hidden on the home page: elsewhere
   "Showing  of  routes" and endless spinners flashed before Alpine started,
   and stayed forever without JavaScript (loop 38). */
[x-cloak] { display: none !important; }

/* Crawlable fare lists (.fs-lm-static): shared by /last-minute/ (inline copy there)
   and /weekend-escapes/ (loop 38). */
.fs-lm-static { max-width: 1080px; margin: 28px auto 8px; padding: 22px 26px; background: #fff; border: 1px solid var(--mor-line, #D9E7E9); border-radius: 20px; }
.fs-lm-static h2 { color: var(--mor-ink, #0F2430); font-size: 1.2rem; margin: 0 0 6px; }
.fs-lm-static .fs-lm-static-intro { color: var(--mor-muted, #4A6672); font-size: .95rem; margin: 0 0 14px; max-width: 70ch; }
.fs-lm-static ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0 28px; }
.fs-lm-static li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--mor-line, #D9E7E9); }
.fs-lm-static li a.fs-lm-static-route { grid-column: 1; font-weight: 700; color: var(--mor-ink, #0F2430); text-decoration: none; }
.fs-lm-static li a.fs-lm-static-route:hover { text-decoration: underline; }
/* Whole row is the tap target (the link text alone was 24px tall). */
.fs-lm-static li { position: relative; }
.fs-lm-static li a.fs-lm-static-route::after { content: ""; position: absolute; inset: 0; }
.fs-lm-static li:hover { background: #F4FAFB; }
.fs-lm-static li a.fs-lm-static-route:focus-visible { outline: none; }
.fs-lm-static li:focus-within { outline: 2px solid var(--mor-teal, #12808F); outline-offset: 2px; border-radius: 6px; }
.fs-lm-static .fs-lm-static-meta { grid-column: 1; font-size: .82rem; color: var(--mor-muted, #4A6672); }
.fs-lm-static .fs-lm-static-price { grid-column: 2; grid-row: 1 / 3; align-self: center; font-weight: 800; font-size: 1.05rem; color: #0B5E69; white-space: nowrap; }
.fs-lm-static .fs-lm-static-note { margin: 12px 0 0; font-size: .82rem; color: var(--mor-muted, #4A6672); }
@media (max-width: 640px) { .fs-lm-static { margin: 20px 1rem 8px; padding: 16px; } }
body.fs-mock01 .fsm-shortcode-wrap .fs-we-static { margin-left: 0; margin-right: 0; }

/* ── UX pass 2026-09-26 ───────────────────────────────────────────────── */

/* EN/FR read as a segmented control: one track, the chosen language raised.
   Before, the two chips floated apart and the tinted (unselected) one looked
   selected. */
body.fs-mock01 .language-switcher { gap: 2px !important; padding: 3px; background: var(--mor-line-soft, #E6F0F2); border-radius: 999px; }
body.fs-mock01 .language-switcher .lang-btn { background: transparent !important; box-shadow: none; min-width: 40px; min-height: 36px; font-weight: 600; }
body.fs-mock01 .language-switcher .lang-btn.active { background: var(--mor-ink, #0F2430) !important; color: #fff !important; }

/* Phone menu: the Request a Route pill sat 14px right of every other item. */
body.fs-mock01 .site-header #main-nav.active .nav-route-request a {
    background: transparent !important; padding-left: 0 !important; padding-right: 0 !important;
    color: var(--bp-glacier, #7FD4DD) !important; font-weight: 700;
}

/* Phone quick-actions bar tucks away while scrolling down (theme.js). */
.fs-mobile-bar { transition: transform .25s ease; }
.fs-mobile-bar.is-tucked { transform: translateY(calc(100% + 12px)); }
@media (prefers-reduced-motion: reduce) { .fs-mobile-bar { transition: none; } }

/* /deals/: the score explainer is a one-line disclosure above the fares. */
details.fs-deals-explainer { padding: 0; }
details.fs-deals-explainer > summary { list-style: none; cursor: pointer; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 16px; }
details.fs-deals-explainer > summary::-webkit-details-marker { display: none; }
details.fs-deals-explainer > summary h2 { margin: 0 !important; font-size: 1rem !important; }
details.fs-deals-explainer > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); color: var(--mor-muted, #4A6672); flex: none; transition: transform .2s; }
details.fs-deals-explainer[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
details.fs-deals-explainer > summary:focus-visible { outline: 2px solid var(--mor-teal, #12808F); outline-offset: 2px; }
details.fs-deals-explainer > p { padding: 0 24px 18px; }
@media (max-width: 640px) { details.fs-deals-explainer { margin: 4px 1rem 14px; } details.fs-deals-explainer > summary { padding: 12px 16px; } details.fs-deals-explainer > p { padding: 0 16px 14px; } }

/* Scope switch on phones: three equal columns, count under the label, so
   "Both" no longer drops onto a second row by itself. */
@media (max-width: 575.98px) {
    body.fs-mock01 .fs-scope { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    body.fs-mock01 .fs-scope .fs-scope-btn { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: .8rem; text-align: center; line-height: 1.15; min-width: 0; }
    /* /deals/ on a phone: the round-trip note joins the results line instead
       of taking its own banner above the filters. */
    body.fs-mock01 .fs-deals-page .fs-roundtrip-banner, body.fs-mock01 .fareseeker-deals .fs-roundtrip-banner { display: none; }
}
@media (min-width: 576px) { .fs-summary-rt { display: none; } }

/* /search/: results scroll into view on search; clear the sticky header. */
body.fs-mock01 .fs-results-section { scroll-margin-top: 92px; }

/* Route page hero on phones: an old style.css rule (max-width 768px) stacked
   origin, arc and destination vertically, so the route alone took ~330px and
   the first price and button sat on the second screen. One row again. */
@media (max-width: 768px) {
    body.fs-mock01 .fs-route-display { flex-direction: row; flex-wrap: nowrap; gap: .5rem; margin-bottom: 1rem; }
    body.fs-mock01 .fs-route-display .fs-route-endpoint { flex: 1 1 0; min-width: 0; }
    body.fs-mock01 .fs-route-display .fs-route-path { flex: 0 1 96px; min-width: 56px; }
    body.fs-mock01 .fs-route-display .fs-route-code { font-size: 2.1rem; }
    body.fs-mock01 .fs-route-display .fs-route-city-name { font-size: .85rem; overflow-wrap: anywhere; }
    body.fs-mock01 .fs-route-display .fs-route-flag { width: 24px; margin-top: .35rem; }
}

/* About / Contact: the big centred line icon over the title is a stock
   template look and cost ~90px on a phone before any content. Title and
   intro now open the page directly, left-aligned like the articles. */
body.fs-mock01 .fs-about-hero .fs-icon, body.fs-mock01 .fs-contact-hero .fs-icon { display: none; }
body.fs-mock01 .fs-about-hero, body.fs-mock01 .fs-contact-hero { text-align: left; margin-bottom: 1.75rem; }
@media (max-width: 640px) {
    body.fs-mock01 .fs-about-hero h1, body.fs-mock01 .fs-contact-hero h1 { font-size: 1.9rem; }
}

/* Route hero: the destination's flag made that column taller, so with
   centred alignment "CUN" sat 25px above "YUL". The flag hangs below the
   city name without adding height. */
body.fs-mock01 .fs-route-display .fs-route-endpoint { position: relative; }
body.fs-mock01 .fs-route-display .fs-route-flag { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: .4rem; }
body.fs-mock01 .fs-route-display { margin-bottom: 2.25rem; }

/* /last-minute/ search panel: the heading was left-aligned above a centred
   intro, chips and form. */
body.fs-mock01 .fs-lm-hero > h2 { text-align: center; }