/* =====================================================================
   Only Ticket theme — design tokens and global styling taken from the
   MOCKUP (D:\Github\MOCKUP\index.html). Loaded after the page styles so
   it wins on shared elements; page-specific rules use higher specificity.
   ===================================================================== */
:root {
    --ot-brand: #e31e24;
    --ot-brand-dark: #c0151b;
    --ot-brand-light: #fdecec;
    --ot-teal: #0fb5a6;
    --ot-amber: #f59e0b;
    --ot-ink: #1e2130;
    --ot-muted: #6b7084;
    --ot-bg: #f5f6fa;
    --ot-card: #ffffff;
    --ot-line: #e6e8f0;
    --ot-danger: #e5484d;
    --ot-radius: 14px;
    --ot-shadow: 0 1px 4px rgba(30,33,48,.06);
    --ot-shadow-hover: 0 8px 22px rgba(30,33,48,.12);
    --ot-grad: linear-gradient(135deg, #ff6a3d, #e31e24);
    --ot-font: 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Re-point the existing product card variables at the brand colours */
    --product-title-color: var(--ot-ink);
    --product-price-color: var(--ot-ink);
    --product-btn-color: var(--ot-brand);
    --product-btn-hover: var(--ot-brand-dark);
    --cart-product-title: var(--ot-ink);
    --cart-price: var(--ot-ink);
    --cart-btn-primary: var(--ot-brand);
    --cart-btn-hover: var(--ot-brand-dark);
}

/* ---------- Base ---------- */
/* Mockup font everywhere. Icon fonts (Font Awesome <i>, Bootstrap/Tabler icons) and code are excluded. */
html, body,
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.bi):not(.ti):not(code):not(kbd):not(pre) {
    font-family: var(--ot-font) !important;
}
body { background: var(--ot-bg); color: var(--ot-ink); font-size: 14px; }
h1, h2, h3, h4, h5, h6, .section-heading, .fm-nav, .btn, .btn-main, .customBtn, .fm-btn {
    font-family: var(--ot-font);
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; }
b, strong { font-weight: 600; }
a { color: var(--ot-brand); }
a:hover { color: var(--ot-brand-dark); }

/* Section headings as in the mockup (19px, 600) */
body h2.section-heading { font-size: 19px; font-weight: 600; color: var(--ot-ink); margin: 0; }
.carousel-header, .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 34px 0 16px; }
body .seeMoreBtn { color: var(--ot-brand); font-weight: 600; font-size: 13px; text-decoration: none; }
body .seeMoreBtn:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
body .btn-main,
body .customBtn-primary,
body .btn-book,
body .sticky-cta-btn,
body .fm-cart-cta,
body .btn.btn-primary {
    background: var(--ot-grad);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: .015em;
    box-shadow: 0 4px 12px rgba(227,30,36,.22);
    transition: transform .15s, box-shadow .15s;
    text-transform: none;
}
body .btn-main:hover,
body .customBtn-primary:hover,
body .btn-book:hover,
body .sticky-cta-btn:hover,
body .fm-cart-cta:hover,
body .btn.btn-primary:hover {
    background: var(--ot-grad);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(227,30,36,.3);
}
body .btn-main.btn-sm { padding: 7px 14px; font-size: 12.5px; border-radius: 10px; }

/* Outline / ghost buttons */
body .customBtn {
    background: #fff;
    color: var(--ot-brand);
    border: 1.5px solid #f3c2c4;
    border-radius: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
body .customBtn:hover { background: var(--ot-brand-light); border-color: var(--ot-brand); color: var(--ot-brand); }

/* ---------- Pills / chips ---------- */
.pill {
    display: inline-block; background: var(--ot-brand-light); color: var(--ot-brand);
    font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px;
}
.pill.teal { background: #dcf7f4; color: #0b8d81; }
.pill.amber { background: #fdf0da; color: #b36d05; }
.chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    background: var(--ot-card); border: 1px solid var(--ot-line); border-radius: 999px;
    padding: 9px 18px; font-size: 13.5px; font-weight: 500; color: var(--ot-ink);
    cursor: pointer; box-shadow: var(--ot-shadow); text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.chip:hover { border-color: var(--ot-brand); color: var(--ot-brand); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(30,33,48,.1); }

/* ---------- Cards ---------- */
body .product-tile,
body .product-grid-card,
body .card.custom-card {
    background: var(--ot-card);
    border: 1px solid var(--ot-line);
    border-radius: 12px;
    box-shadow: var(--ot-shadow);
    overflow: hidden;
    transition: transform .12s, box-shadow .12s;
}
body .product-tile:hover,
body .product-grid-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(30,33,48,.14); }
body .product-tile .card-title,
body .product-grid-card .card-title {
    font-family: var(--ot-font); font-size: 14px; font-weight: 500; color: var(--ot-ink); line-height: 1.35;
}
body .product-tile .from-label,
body .product-grid-card .from-label { font-size: 12px; color: var(--ot-muted); }
body .product-tile .price-amount,
body .product-grid-card .price-amount { font-size: 16px; font-weight: 600; color: var(--ot-ink); }

/* ---------- Forms ---------- */
body .form-control,
body .custom-box,
body input[type=text], body input[type=email], body input[type=tel], body input[type=number], body input[type=date],
body select, body textarea {
    font-family: var(--ot-font);
    border: 1px solid var(--ot-line);
    border-radius: 10px;
    font-size: 14px;
}
body .form-control:focus, body .custom-box:focus,
body input:focus, body select:focus, body textarea:focus {
    border-color: var(--ot-brand);
    box-shadow: 0 0 0 3px rgba(227,30,36,.12);
    outline: none;
}

/* ---------- Page hero banners (explore / deals / state / experience) ---------- */
body .page-hero,
body .explore-index-hero,
body .brand-index-hero {
    background: linear-gradient(120deg, var(--ot-brand) 0%, #7a5cff 55%, var(--ot-teal) 100%);
    border-radius: 20px;
    margin: 26px auto 0;
    max-width: 1180px;
}

/* ---------- Header (overrides the inline styles in navigation.cshtml) ---------- */
body .fm-nav { font-family: var(--ot-font); border-bottom: 1px solid var(--ot-line); }
/* Full-width header: logo hugs the left edge, Cart the right edge */
body .fm-nav .fm-container { height: 64px; max-width: none; padding: 0 24px; gap: 16px; }
@media (max-width: 575.98px) { body .fm-nav .fm-container { padding: 0 16px; } }
/* Desktop: logo | links centred on the page | actions. A grid (not absolute/transform) so the fixed mega panel
   still anchors to the viewport; the 1fr side columns grow to fit the buttons, so on narrower screens the links
   shift left rather than overlap. */
@media (min-width: 992px) {
    body .fm-nav .fm-container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; }
    body .fm-nav .fm-left { display: contents !important; }
    body .fm-nav .fm-left .fm-brand { justify-self: start; }
    body .fm-nav .fm-links { margin: 0; }
    body .fm-nav .fm-right { justify-self: end; }
}
/* OnlyTicket (2026-10-27, user request): 10% side gap on desktop (was 15%). From 1200px only - below that the
   logo, links and buttons get too tight. */
@media (min-width: 1200px) {
    body .fm-nav .fm-container { padding: 0 10%; }
}
body .fm-mega-wrap { height: 64px; }
body .fm-brand img { max-height: 44px !important; }
body .fm-left { gap: 22px; }
body .fm-links { gap: 2px; }
body .fm-mega-trigger, body .fm-link, body .fm-link:visited {
    font-size: 14px; font-weight: 500; color: var(--ot-ink);
    padding: 20px 12px; border-bottom: 2.5px solid transparent;
}
body .fm-mega-wrap:hover .fm-mega-trigger, body .fm-link:hover { color: var(--ot-brand); border-bottom-color: var(--ot-brand); }

/* Search icon button (opens the command palette); same height as the other header buttons */
body .fm-nav .fm-search-icon,
body .fm-nav .fm-desktop-auth .fm-icon-btn {
    width: 41px; height: 41px; border-radius: 10px; border: 1.5px solid var(--ot-line);
    background: #fff; color: var(--ot-ink); font-size: 15px;
}
body .fm-nav .fm-search-icon:hover,
body .fm-nav .fm-desktop-auth .fm-auth-dropdown:hover .fm-icon-btn { border-color: var(--ot-brand); color: var(--ot-brand); background: #fff; }

/* Auth buttons */
body .fm-nav .fm-btn-auth {
    border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 500;
    border: 1.5px solid transparent; background: #fff; color: var(--ot-ink); text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
body .fm-nav .fm-btn-auth.ghost { border-color: var(--ot-line); }
body .fm-nav .fm-btn-auth.ghost:hover { border-color: var(--ot-brand); color: var(--ot-brand); }
body .fm-nav .fm-btn-auth.solid { background: var(--ot-brand-light); color: var(--ot-brand); }
body .fm-nav .fm-btn-auth.solid:hover { background: #fbd9da; }
body .fm-nav .fm-partner-link { font-size: 12px; color: var(--ot-muted); text-decoration: none; white-space: nowrap; }
body .fm-nav .fm-partner-link:hover { color: var(--ot-brand); text-decoration: underline; }
body .fm-avatar {
    width: 36px; height: 36px; border-radius: 999px; border: none;
    background: linear-gradient(135deg, var(--ot-brand), #f97316); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
body .fm-auth-menu { border: 1px solid var(--ot-line); border-radius: 14px; }
body .fm-auth-menu .fm-btn { font-size: 14px; font-weight: 600; border-radius: 10px; }
body .fm-auth-menu .fm-btn:not(.fm-btn-primary) { border: 1.5px solid var(--ot-line); color: var(--ot-ink); }
body .fm-auth-menu .fm-btn:not(.fm-btn-primary):hover { border-color: var(--ot-brand); color: var(--ot-brand); background: #fff; }
body #fmMobile .fm-btn-primary, body .fm-nav .fm-btn-primary { background: var(--ot-grad); border-color: transparent; border-radius: 12px; }

/* Book now button + experience dropdown */
body .fm-book { position: relative; }
/* Same height/padding/radius as the Log in / Sign up buttons; never wraps */
body .fm-book-btn {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    border: 1.5px solid var(--ot-brand); border-radius: 10px; padding: 9px 16px;
    font-size: 14px; font-weight: 500; line-height: 1.5; color: #fff; background: var(--ot-brand);
    transition: background .15s, border-color .15s; cursor: pointer;
}
body .fm-book-btn i { font-size: 13px; }
body .fm-book-btn:hover,
body .fm-book.open .fm-book-btn { background: var(--ot-brand-dark); border-color: var(--ot-brand-dark); }
body .fm-book-menu {
    position: absolute; right: 0; top: calc(100% + 10px); width: 320px; max-height: min(70vh, 520px); overflow: auto;
    background: var(--ot-card); border: 1px solid var(--ot-line); border-radius: 14px; box-shadow: 0 12px 32px rgba(30,33,48,.18);
    padding: 8px; z-index: 1070; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
body .fm-book.open .fm-book-menu { opacity: 1; visibility: visible; transform: translateY(0); }
body .fm-book-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ot-muted); padding: 8px 10px 6px; }
body .fm-book-item {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
    text-decoration: none; color: var(--ot-ink); transition: background .12s;
}
body .fm-book-item:hover, body .fm-book-item:focus { background: var(--ot-brand-light); color: var(--ot-ink); outline: none; }
body .fm-book-logo {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: var(--ot-brand);
}
body .fm-book-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
body .fm-book-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
body .fm-book-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .fm-book-text small { font-size: 12px; color: var(--ot-muted); }
body .fm-book-go { font-size: 11px; color: var(--ot-muted); }
body .fm-book-item:hover .fm-book-go { color: var(--ot-brand); }
body .fm-book-all {
    display: block; text-align: center; margin-top: 4px; padding: 10px; border-top: 1px solid var(--ot-line);
    font-size: 13px; font-weight: 600; color: var(--ot-brand); text-decoration: none;
}
body .fm-book-all:hover { text-decoration: underline; color: var(--ot-brand); }
body #fmMobile .fm-acc-book { color: var(--ot-brand); font-weight: 600; }

/* Cart button */
body .fm-cart-btn {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    background: var(--ot-grad); color: #fff; border: none; border-radius: 12px;
    padding: 10px 18px; font-size: 14px; font-weight: 600; font-family: var(--ot-font);
    box-shadow: 0 4px 12px rgba(227,30,36,.22); transition: transform .15s, box-shadow .15s;
}
body .fm-cart-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(227,30,36,.3); }
body .fm-cart-btn svg { width: 17px; height: 17px; }
body .fm-cart-btn .fm-badge {
    position: static; border: none; background: var(--ot-amber); color: #fff;
    min-width: 20px; height: 20px; font-size: 11px; font-weight: 600; padding: 0 5px;
}
body .fm-cart-pop { border: 1px solid var(--ot-line); border-radius: 14px; box-shadow: 0 8px 26px rgba(30,33,48,.16); }
body .fm-cart-title { font-size: 14px; font-weight: 600; }
body .fm-cart-item-name { font-weight: 600; }
body .fm-cart-total span:last-child { color: var(--ot-brand); font-size: 15px; font-weight: 600; }
body .fm-cart-cta { height: 40px; font-size: 13px; }

/* Mobile cart icon keeps the old round style but in brand colours */
body .fm-icon-btn .fm-badge { background: var(--ot-amber); }

/* Mega menu panel */
body .fm-mega-panel { border-bottom: 1px solid var(--ot-line); }
body .fm-deal { border: 1px solid var(--ot-line); border-radius: 12px; }
body .fm-deal:hover { border-color: var(--ot-brand); box-shadow: var(--ot-shadow-hover); }
body .fm-deal-title { font-size: 14px; font-weight: 600; color: var(--ot-ink); }

/* Attractions dropdown: mockup brand cards in a centred, page-width container */
body .fm-mega-panel { background: var(--ot-bg); }
/* 2026-11-06: about half the screen (never below 340px or past the screen). No scrollbar of its own, so it cannot be confused with the page's:
   the arrows and mouse wheel scroll it, and a fade at the bottom shows there is more */
body .fm-mega-inner { position: relative; height: auto; max-height: min(max(50vh, 340px), calc(100vh - 140px)); }
body .fm-mega-content { max-width: min(1180px, calc(100% - 120px)); margin: 0 auto; padding: 22px 28px 26px; overscroll-behavior: contain; scrollbar-width: none; }
body .fm-mega-content::-webkit-scrollbar { display: none; }
body .fm-mega-inner.fm-has-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to bottom, rgba(245,246,250,0), var(--ot-bg)); pointer-events: none; }
body .fm-mega-scroll { position: absolute; top: 50%; left: calc(50% + min(590px, 50% - 60px) + 10px); transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; }
body .fm-mega-scroll[hidden] { display: none; }
body .fm-mega-scroll-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--ot-line); border-radius: 50%; background: var(--ot-card); color: var(--ot-ink); font-size: 14px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: color .15s ease, border-color .15s ease, opacity .15s ease; }
body .fm-mega-scroll-btn:hover:not(:disabled) { color: var(--ot-brand); border-color: var(--ot-brand); }
body .fm-mega-scroll-btn:focus-visible { outline: 2px solid var(--ot-brand); outline-offset: 2px; }
body .fm-mega-scroll-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
body [data-panel="fmExperiences"] .fm-content-head, body [data-panel="fmDine"] .fm-content-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
body [data-panel="fmExperiences"] .fm-content-title, body [data-panel="fmDine"] .fm-content-title { font-size: 26px; font-weight: 700; color: var(--ot-ink); letter-spacing: -.01em; margin: 0; }
body [data-panel="fmExperiences"] .fm-content-sub, body [data-panel="fmDine"] .fm-content-sub { font-size: 14.5px; color: var(--ot-muted); margin: 4px 0 0; }
body .fm-viewall { font-size: 14px; color: var(--ot-brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
body .fm-viewall i { font-size: 12px; margin-left: 4px; }
body .fm-viewall:hover { text-decoration: underline; color: var(--ot-brand); }
body .fm-mega-panel .fm-viewall { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 10px; background: var(--ot-brand); color: #fff; font-size: 14.5px; font-weight: 600; flex-shrink: 0; transition: background .15s ease; }
body .fm-mega-panel .fm-viewall i { margin-left: 0; }
body .fm-mega-panel .fm-viewall:hover { background: var(--ot-brand-dark); color: #fff; text-decoration: none; }
body .fm-mega-panel .fm-viewall:focus-visible { outline: 2px solid var(--ot-brand); outline-offset: 2px; }
body .fm-group-title { font-size: 15px; font-weight: 700; color: var(--ot-ink); margin: 18px 0 10px; }
body .fm-brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body .fm-brand-card {
    background: var(--ot-card); border: 1px solid var(--ot-line); border-radius: var(--ot-radius); box-shadow: var(--ot-shadow);
    padding: 18px 18px 14px; display: flex; flex-direction: column; text-decoration: none; color: var(--ot-ink);
    transition: transform .12s, box-shadow .12s;
}
body .fm-brand-card:hover { transform: translateY(-3px); box-shadow: var(--ot-shadow-hover); color: var(--ot-ink); }
body .fm-brand-top { display: flex; align-items: center; gap: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--ot-line); }
body .fm-brand-icon {
    width: 72px; height: 72px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: var(--ot-brand); font-size: 24px;
}
body .fm-brand-icon img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
body .fm-brand-info { min-width: 0; }
body .fm-brand-card h4 { font-size: 17px; font-weight: 600; margin: 0 0 4px; color: var(--ot-ink); }
body .fm-brand-sub { font-size: 14px; color: var(--ot-muted); line-height: 1.45; }
body .fm-brand-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 13.5px; color: var(--ot-ink); }
body .fm-brand-loc { display: inline-flex; align-items: center; gap: 8px; padding-right: 14px; border-right: 1px solid var(--ot-line); }
body .fm-brand-loc i { color: var(--ot-muted); font-size: 14px; }
body .fm-brand-opt { color: var(--ot-brand); font-weight: 600; white-space: nowrap; }
body .fm-brand-opt i { font-size: 12px; margin-left: 4px; transition: transform .12s; }
body .fm-brand-card:hover .fm-brand-opt i { transform: translateX(3px); }

/* Mobile drawer */
body .fm-mobile { font-family: var(--ot-font); }
body #fmMobile .fm-acc-btn { font-size: 15px; font-weight: 500; }

/* ---------- Toast (mockup style) ---------- */
.ot-toast {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(90px);
    background: var(--ot-ink); color: #fff; padding: 12px 22px; border-radius: 12px;
    font-size: 14px; font-weight: 600; z-index: 2000; transition: transform .25s;
    box-shadow: 0 8px 26px rgba(0,0,0,.25);
}
.ot-toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- Experience / state page banner (navy, with soft blob shapes) ---------- */
body .exp-hero { background: #0b3a82; overflow: hidden; }
body .exp-hero-text { position: relative; padding: 48px 56px; overflow: hidden; }
/* Decorative blobs, top-right and bottom-right */
body .exp-hero-text::before,
body .exp-hero-text::after { content: ""; position: absolute; border-radius: 50%; background: #1a4fa0; pointer-events: none; }
body .exp-hero-text::before { width: 230px; height: 230px; top: -110px; right: -60px; }
body .exp-hero-text::after { width: 360px; height: 260px; bottom: -150px; right: -90px; border-radius: 48% 52% 0 0 / 60% 60% 0 0; }
body .exp-hero-text > div { position: relative; z-index: 1; }
body .exp-title {
    display: inline-flex; align-items: flex-start; gap: 6px;
    font-size: 64px; font-weight: 700; line-height: 1.05; color: #fff; margin: 0 0 18px; letter-spacing: -.01em;
}
body .exp-spark { width: 54px; height: 54px; flex-shrink: 0; margin-top: -14px; }
body .exp-spark path { stroke: #fbbf24; stroke-width: 6; stroke-linecap: round; fill: none; }
body .exp-desc { color: #fff; font-size: 16px; line-height: 1.65; }
body .exp-desc p { margin: 0 0 12px; color: #fff; }
body .exp-desc strong { color: #fff; font-weight: 700; }
/* First line of the CMS text is the welcome headline: yellow and larger */
body .exp-desc > p:first-child,
body .exp-desc > p:first-child strong { color: #fbbf24; font-size: 21px; font-weight: 700; line-height: 1.35; }
body .exp-desc > p:last-child strong { font-weight: 400; }
body .exp-section-title { color: #0b3a82 !important; font-size: 30px !important; font-weight: 700 !important; margin: 2rem 0 !important; }
@media (max-width: 991.98px) {
    body .exp-hero-text { padding: 32px 28px; }
    body .exp-title { font-size: 44px; }
    body .exp-spark { width: 40px; height: 40px; margin-top: -8px; }
    body .exp-desc > p:first-child, body .exp-desc > p:first-child strong { font-size: 18px; }
}
@media (max-width: 575.98px) {
    body .exp-title { font-size: 36px; }
    body .exp-section-title { font-size: 22px !important; }
}

/* Banner has a fixed height; the photo fills its half (cropped, centred) instead of setting the height */
body .exp-hero img { width: 100%; height: 100% !important; min-height: 0 !important; object-fit: cover; object-position: center; display: block; }
@media (min-width: 768px) {
    body .exp-hero { height: 460px; }
    body .exp-hero > [class*="col-"] { height: 100%; }
    body .exp-hero-text { overflow: hidden; } /* blobs hang off the edge on purpose; keep them clipped */
}
@media (max-width: 767.98px) {
    body .exp-hero img { height: 240px !important; }
}
/* Mid-size screens: smaller type so the text still fits the fixed-height banner */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body .exp-hero-text { padding: 32px 36px; }
    body .exp-title { font-size: 46px; margin-bottom: 12px; }
    body .exp-spark { width: 40px; height: 40px; margin-top: -8px; }
    body .exp-desc { font-size: 14.5px; line-height: 1.55; }
    body .exp-desc p { margin-bottom: 9px; }
    body .exp-desc > p:first-child, body .exp-desc > p:first-child strong { font-size: 17px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body .exp-hero { height: 480px; }
    body .exp-hero-text { padding: 24px 26px; }
    body .exp-title { font-size: 36px; margin-bottom: 10px; }
    body .exp-spark { width: 32px; height: 32px; margin-top: -6px; }
    body .exp-desc { font-size: 13.5px; line-height: 1.5; }
    body .exp-desc p { margin-bottom: 8px; }
    body .exp-desc > p:first-child, body .exp-desc > p:first-child strong { font-size: 15.5px; }
}

/* =====================================================================
   Mobile alignment (phones, < 576px)
   ===================================================================== */
@media (max-width: 575.98px) {
    /* 1. Section heads: subtitle goes under the heading instead of squeezing beside it */
    body .ot-section-head, body .jgc-head, body .dine-head, body .ot-faq-head, body .ev-title {
        flex-direction: column; align-items: flex-start !important; gap: 2px; margin-top: 26px;
    }
    body .ot-section-head .count, body .jgc-head .count, body .dine-head .count, body .ot-faq-head .ot-faq-count { font-size: 12.5px; }
    body .ev-title h1 { font-size: 22px; }

    /* 2. Tighter page gutters on the new pages */
    body .ot-home, body .ot-page, body .ev, body .jgc, body .dine, body .ot-faq { padding-left: 16px; padding-right: 16px; }
    html body #product .page-wrap { padding: 16px 16px 90px; }

    /* 3. Home carousel: arrows hidden (dots + auto-rotate remain); text gets the full width */
    body .ot-car-arrow { display: none; }
    body .ot-slide { padding-left: 20px; padding-right: 20px; }
    body .ot-sarrow { display: none; }
    body .ot-hero-search { width: calc(100% - 32px); }

    /* 4. Product tiles (experience/state pages): price above a full-width button */
    body .product-tile .price-action-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 0 10px 10px; }
    body .product-tile .price-action-row .btn-main { width: 100%; text-align: center; margin: 0; }
    body .product-tile .card-title { font-size: 13px; }

    /* 5. Product page thumbnails: smaller, side-scrollable, hint hidden (tap the banner instead) */
    html body #product .detail-hero .gallery-thumbs { overflow-x: auto; scrollbar-width: none; padding: 8px 12px; }
    body #product .detail-hero .gallery-thumbs::-webkit-scrollbar { display: none; }
    html body #product .detail-hero .gthumb { width: 62px; height: 44px; }
    html body #product .detail-hero .gallery-hint { display: none; }
    html body #product .detail-also-btn { font-size: 13px; padding: 7px 12px; }

    /* 6. Two-up grids instead of one long column */
    body .evb-tiles, body .evb-types { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body .evb-tile b { font-size: 12.5px; }
    body .evb-form { padding: 16px; }
    body .ot-page .ot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    body .ot-page .ot-card { padding: 14px; gap: 8px; }
    body .ot-page .ot-card h3 { font-size: 14.5px; }
    body .ot-page .ot-card .sub { font-size: 12px; }
    body .ot-page .ot-card .meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- Mobile header: same pieces as desktop (logo left | search, Book now, Cart, menu) ---------- */
@media (max-width: 991.98px) {
    body .fm-nav .fm-container { height: 60px; gap: 8px; }
    body .fm-mobile-head { justify-content: flex-start; width: auto; flex: 0 0 auto; }
    body .fm-mobile-brand { position: static; transform: none; }
    body .fm-mobile-brand img { max-height: 32px !important; width: auto; }
    body .fm-nav .fm-right { gap: 5px; flex-shrink: 0; margin-left: auto; }
    body .fm-nav .fm-search-icon { width: 38px; height: 38px; font-size: 14px; }
    body #fmBookM .fm-book-btn { padding: 0 10px; height: 38px; font-size: 13px; gap: 6px; }
    /* menu drops below the header across the screen (the button isn't at the right edge) */
    body #fmBookM .fm-book-menu { position: fixed; top: 66px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 90px); }
    body .fm-cart-btn.fm-cart-m { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 10px; }
    body .fm-cart-btn.fm-cart-m .fm-badge { position: absolute; top: -6px; right: -6px; }
    body .fm-nav .fm-hamburger { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--ot-line); background: #fff; color: var(--ot-ink); }
    body .fm-nav .fm-hamburger:hover { border-color: var(--ot-brand); color: var(--ot-brand); background: #fff; }
}
/* Very narrow phones: Book now shows its ticket icon only */
@media (max-width: 359.98px) {
    body #fmBookM .fm-book-label { display: none; }
    body .fm-mobile-brand img { max-height: 30px !important; }
}

/* Experience hero on phones (2026-10-26): compact banner, description cut to 3 lines with a "Read more" button */
.exp-readmore { display: inline-flex; align-items: center; margin-top: 10px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.12); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.exp-readmore:hover { background: #fff; color: #0b3a82; }
@media (max-width: 767.98px) {
    body .exp-hero img { height: 200px !important; }
    body .exp-hero-text { padding: 18px 18px 20px; }
    body .exp-title { font-size: 26px; margin-bottom: 6px; }
    body .exp-spark { width: 28px; height: 28px; margin-top: -4px; }
    body .exp-desc { font-size: 14px; line-height: 1.5; max-height: calc(1.5em * 3 + 26px); overflow: hidden; position: relative; }
    body .exp-desc > p:first-child, body .exp-desc > p:first-child strong { font-size: 15px; }
    body .exp-desc p { margin-bottom: 6px; }
    body .exp-desc:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(rgba(11,58,130,0), #0b3a82); }
    body .exp-desc.is-open { max-height: none; }
}

/* Loading skeletons (2026-10-26, speed item 5): grey placeholder blocks with a soft shimmer, shown while a list loads */
.ot-skel { position: relative; overflow: hidden; background: #eceef2; border-radius: 8px; }
.ot-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
    animation: ot-skel-shimmer 1.3s infinite; }
@keyframes ot-skel-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .ot-skel::after { animation: none; } }
.ot-skel-line { height: 12px; margin-bottom: 8px; }
.ot-skel-title { height: 16px; width: 55%; margin-bottom: 12px; }
.ot-skel-card { border: 1px solid #eceef2; border-radius: 14px; padding: 16px; margin-bottom: 14px; background: #fff; }
.ot-skel-row { display: flex; align-items: center; gap: 14px; }
.ot-skel-qr { width: 72px; height: 72px; flex: none; }
.ot-skel-btn { width: 96px; height: 34px; border-radius: 999px; flex: none; }
.ot-skel-chip { display: inline-block; width: 92px; height: 34px; border-radius: 999px; margin: 0 8px 8px 0; }