/**
 * Flighta — holiday packages (listing + detail).
 *
 * Namespaced `hp-`. The palette is NOT invented here: the `--fh-*` tokens come from
 * flighta_home_sections.css, which this page links beside this file. That sheet is entirely
 * `.fh-`-scoped plus a :root block, so linking it brings the design system and nothing else.
 * The fallbacks after each var() keep the page correct if it is ever loaded on its own.
 *
 * Written with logical properties (inline-start, padding-inline, text-align: end) rather than
 * left/right, so this file and its css-rtl twin are byte-identical and cannot drift apart.
 */

/* ── Accent ───────────────────────────────────────────────────────────────────
   Flighta's own button maroon, not the orange the design system keeps for badges and one home
   section. Named once here so there is a single place to change it, and declared AFTER
   flighta_home_sections.css loads so these win on equal specificity.

   What stays as it is, deliberately: the star ratings (amber is what a star rating is), the
   green/red of included vs not included, and the amber of an operator's remark - those three are
   meanings, not branding, and recolouring them would cost the reader information. */
:root {
    --hp-accent:       #541725;   /* = --fh-btn */
    --hp-accent-hover: #3F101B;   /* = --fh-btn-hover */
    --hp-accent-deep:  #5C1A2A;   /* = --fh-maroon */
    --hp-accent-tint:  #FBF1F3;   /* the maroon at 4%, for a selected row or a soft chip */
}

.hp-page {
    min-height: 60vh;
    padding-bottom: 80px;
    background: #FFFFFF;
    font-family: var(--fh-font, "Titillium Web", "Cairo", "Segoe UI", sans-serif);
    color: var(--fh-ink, #101828);
}

.hp-page *, .hp-page *::before, .hp-page *::after { box-sizing: border-box; }
.hp-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hp-hero {
    position: relative;
    padding: 56px 0 60px;
    /* No photograph: there is no holidays hero asset in the build, and referencing one that is
       not there buys a 404 on every page view for something the gradient covers anyway. */
    background: linear-gradient(-120deg, #5C1A2A 0%, #2B0A12 100%);
    color: #FFFFFF;
}
.hp-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.hp-crumb a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.hp-crumb a:hover { color: #FFFFFF; text-decoration: underline; }
.hp-crumb em { font-style: normal; color: #FFFFFF; font-weight: 600; }

.hp-hero h1 { margin: 0 0 12px; font-size: 38px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: #FFFFFF; }
.hp-hero__lead { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .82); }

/* The search sits in the hero because it is the fastest route through 300-odd packages. */
.hp-search { display: flex; gap: 10px; margin-top: 28px; max-width: 620px; }
.hp-search__field { position: relative; flex: 1 1 auto; min-width: 0; }
.hp-search__field i {
    position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: var(--fh-faint, #99A1AF); pointer-events: none;
}
.hp-search input {
    width: 100%; height: 52px; padding-inline: 44px 16px;
    border: 0; border-radius: 10px; background: #FFFFFF;
    font-family: inherit; font-size: 15px; color: var(--fh-ink, #101828);
}
.hp-search input::placeholder { color: var(--fh-faint, #99A1AF); }
.hp-search input:focus { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.hp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px; padding-inline: 26px; border: 0; border-radius: 10px;
    background: var(--hp-accent); color: #FFFFFF;
    font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none;
    cursor: pointer; white-space: nowrap; transition: background .15s ease;
}
.hp-btn:hover, .hp-btn:focus { background: var(--hp-accent-hover); color: #FFFFFF; text-decoration: none; }
.hp-btn--ghost {
    background: transparent; border: 1px solid var(--fh-line-2, #E5E7EB); color: var(--fh-ink, #101828);
}

/* Inside the hero the accent IS the background, so a maroon button on maroon all but disappears.
   Inverted there: white face, maroon label - the same pair, the other way up. */
.hp-hero .hp-btn { background: #FFFFFF; color: var(--hp-accent); }
.hp-hero .hp-btn:hover, .hp-hero .hp-btn:focus { background: #F6EDEF; color: var(--hp-accent-hover); }
.hp-btn--ghost:hover, .hp-btn--ghost:focus { background: var(--fh-line, #F3F4F6); color: var(--fh-ink, #101828); }
.hp-btn--block { width: 100%; }

/* ── Body layout ──────────────────────────────────────────────────────────── */
.hp-body { padding-top: 32px; }
.hp-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 28px; align-items: start; }

/* ── Filter rail ──────────────────────────────────────────────────────────── */
.hp-rail {
    position: sticky; top: 20px;
    border: 1px solid var(--fh-line-2, #E5E7EB); border-radius: var(--fh-radius, 16px);
    background: #FFFFFF; box-shadow: var(--fh-shadow, 0 2px 10px rgba(16, 24, 40, .06));
    overflow: hidden;
}
.hp-rail__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 15px 18px; border-bottom: 1px solid var(--fh-line, #F3F4F6);
}
.hp-rail__head h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fh-muted, #6A7282); }
.hp-rail__clear { font-size: 12.5px; font-weight: 600; color: var(--hp-accent); text-decoration: none; }
.hp-rail__clear:hover { text-decoration: underline; color: var(--hp-accent-hover); }

/* ── Filter groups ────────────────────────────────────────────────────────────
   <details>/<summary>, so opening and closing costs no JavaScript. The default marker is
   replaced by the chevron on the right, which rotates when the group is open. */
.hp-fg { border-bottom: 1px solid var(--fh-line, #F3F4F6); }
.hp-fg:last-of-type { border-bottom: 0; }
.hp-fg__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 18px; cursor: pointer; list-style: none;
    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--fh-muted, #6A7282); user-select: none;
}
.hp-fg__head::-webkit-details-marker { display: none; }
.hp-fg__head:hover { color: var(--fh-ink, #101828); }
.hp-fg__head i { font-size: 10px; color: var(--fh-faint, #99A1AF); transition: transform .18s ease; }
.hp-fg[open] > .hp-fg__head i { transform: rotate(-180deg); }
.hp-fg__body { padding: 0 18px 14px; }

/* 27 destinations and 13 themes are too many to show whole; the list gets its own scrollbar
   rather than pushing the results off the screen. */
.hp-fg__body.is-scroll {
    max-height: 238px; overflow-y: auto;
    /* The list is cut mid-row on purpose - a clean edge reads as the end of the options. The fade
       says there is more below without costing a row of height to say it. */
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
}
.hp-fg__body.is-scroll:hover, .hp-fg__body.is-scroll:focus-within {
    -webkit-mask-image: none; mask-image: none;
}
.hp-fg__body.is-scroll::-webkit-scrollbar { width: 6px; }
.hp-fg__body.is-scroll::-webkit-scrollbar-thumb { background: #DFE3EA; border-radius: 3px; }

.hp-opt {
    display: flex; align-items: center; gap: 9px; padding: 6px 8px; margin-inline: -8px;
    border-radius: 8px; font-size: 13.5px; color: var(--fh-body, #364153); cursor: pointer;
}
.hp-opt:hover { background: var(--fh-line, #F3F4F6); }
.hp-opt input { accent-color: var(--fh-maroon, #5C1A2A); width: 15px; height: 15px; margin: 0; flex: 0 0 auto; cursor: pointer; }
.hp-opt__label { flex: 1 1 auto; min-width: 0; }
.hp-opt__n { flex: 0 0 auto; font-size: 11.5px; color: var(--fh-faint, #99A1AF); font-variant-numeric: tabular-nums; }
.hp-opt:has(input:checked) { background: var(--hp-accent-tint); }
.hp-opt:has(input:checked) .hp-opt__label { font-weight: 700; color: var(--fh-ink, #101828); }

/* ── Price range ──────────────────────────────────────────────────────────────
   Two <input type="range"> stacked on one track. Both are transparent; the track and the filled
   span between the handles are drawn underneath, and only the thumbs take pointer events so the
   lower handle stays reachable when the two are close together. */
.hp-range { position: relative; height: 34px; margin: 6px 0 2px; }
.hp-range__track {
    position: absolute; inset-inline: 0; top: 15px; height: 4px;
    border-radius: 2px; background: var(--fh-line-2, #E5E7EB);
}
.hp-range__fill { position: absolute; top: 0; height: 100%; border-radius: 2px; background: var(--hp-accent); }
.hp-range__in {
    position: absolute; inset-inline: 0; top: 7px; width: 100%; height: 20px; margin: 0;
    appearance: none; -webkit-appearance: none; background: none; pointer-events: none;
}
.hp-range__in:focus { outline: none; }
.hp-range__in::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto;
    width: 18px; height: 18px; border-radius: 50%; cursor: grab;
    background: #FFFFFF; border: 2px solid var(--fh-maroon, #5C1A2A);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .22);
}
.hp-range__in::-moz-range-thumb {
    pointer-events: auto;
    width: 18px; height: 18px; border-radius: 50%; cursor: grab; border: 2px solid var(--fh-maroon, #5C1A2A);
    background: #FFFFFF; box-shadow: 0 1px 4px rgba(16, 24, 40, .22);
}
.hp-range__in:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--hp-accent); outline-offset: 2px; }
.hp-range__in::-moz-range-track { background: none; }
.hp-range__out {
    display: flex; align-items: baseline; gap: 5px; margin: 8px 0 0;
    font-size: 13px; color: var(--fh-muted, #6A7282);
}
.hp-range__out b { font-size: 14px; font-weight: 700; color: var(--fh-ink, #101828); font-variant-numeric: tabular-nums; }

.hp-rail__foot { padding: 14px 18px; border-top: 1px solid var(--fh-line, #F3F4F6); }


.hp-select {
    width: 100%; height: 44px; padding-inline: 12px 34px;
    border: 1px solid var(--fh-line-2, #E5E7EB); border-radius: 10px; background: #FFFFFF;
    font-family: inherit; font-size: 14px; color: var(--fh-ink, #101828);
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236A7282' stroke-width='1.4'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 13px center;
}
.hp-page[dir="rtl"] .hp-select, [dir="rtl"] .hp-select { background-position: left 13px center; }
.hp-select:focus { outline: 2px solid var(--hp-accent); outline-offset: 1px; }


/* ── Results ──────────────────────────────────────────────────────────────── */
.hp-results__head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.hp-count { margin: 0; font-size: 15px; color: var(--fh-body, #364153); }
.hp-count b { color: var(--fh-ink, #101828); font-weight: 700; }
.hp-sort { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--fh-muted, #6A7282); }
.hp-sort .hp-select { width: auto; min-width: 190px; height: 40px; }

/* Currency switcher — beside Sort in the results header, and compact in the detail sidebar. */
.hp-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hp-ccy .hp-select { min-width: 132px; }
.hp-ccy__note {
    display: flex; align-items: center; gap: 7px; margin: 0 0 16px;
    font-size: 13px; color: var(--fh-muted, #6A7282);
}
.hp-ccy__note i { color: var(--hp-accent, #7A1230); }
.hp-ccy--aside { margin: 0 0 14px; }
.hp-ccy--aside .hp-select { width: 100%; min-width: 0; height: 42px; }

/* The filters currently in force, as removable chips. Without these a narrow result set looks
   like an empty catalogue rather than a narrow search. */
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hp-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
    border: 1px solid var(--fh-line-2, #E5E7EB); border-radius: 999px; background: var(--fh-line, #F3F4F6);
    font-size: 12.5px; font-weight: 600; color: var(--fh-body, #364153); text-decoration: none;
}
.hp-chip:hover { background: #E9EBEF; color: var(--fh-ink, #101828); text-decoration: none; }
.hp-chip i { font-size: 10px; color: var(--fh-faint, #99A1AF); }

.hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.hp-card {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--fh-line-2, #E5E7EB); border-radius: var(--fh-radius, 16px); background: #FFFFFF;
    text-decoration: none; color: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hp-card:hover, .hp-card:focus-within {
    transform: translateY(-3px); border-color: #DCDFE5;
    box-shadow: 0 16px 34px rgba(16, 24, 40, .1); text-decoration: none; color: inherit;
}
.hp-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--fh-line, #F3F4F6); overflow: hidden; }
.hp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.hp-card:hover .hp-card__media img { transform: scale(1.04); }

.hp-tag {
    position: absolute; top: 12px; inset-inline-start: 12px;
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
    background: rgba(16, 24, 40, .72); backdrop-filter: blur(4px);
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #FFFFFF;
}
.hp-tag--days { inset-inline-start: auto; inset-inline-end: 12px; background: rgba(84, 23, 37, .92); }

.hp-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.hp-card__title {
    margin: 0 0 8px; font-size: 16.5px; line-height: 1.4; font-weight: 700; color: var(--fh-ink, #101828);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: 12.5px; color: var(--fh-muted, #6A7282); }
.hp-card__meta span { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; }
.hp-card__meta span > em { font-style: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hp-card__meta i { margin-top: 3px; }
.hp-card__meta i { font-size: 11px; color: var(--fh-faint, #99A1AF); }
.hp-card__summary {
    margin: 0 0 16px; font-size: 13.5px; line-height: 1.65; color: var(--fh-body, #364153);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-card__foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--fh-line, #F3F4F6);
}
.hp-price { display: flex; flex-direction: column; gap: 1px; }
.hp-price span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fh-muted, #6A7282); }
.hp-price b { font-size: 19px; font-weight: 700; color: var(--fh-maroon, #5C1A2A); letter-spacing: -.01em; }
.hp-price--ask b { font-size: 15px; color: var(--fh-body, #364153); }
.hp-card__cta { font-size: 13px; font-weight: 700; color: var(--hp-accent); white-space: nowrap; }
.hp-card__cta i { font-size: 10px; margin-inline-start: 5px; }

/* ── Empty / unavailable ──────────────────────────────────────────────────── */
.hp-empty {
    padding: 56px 24px; text-align: center;
    border: 1px dashed var(--fh-line-2, #E5E7EB); border-radius: var(--fh-radius, 16px); background: #FCFCFD;
}
.hp-empty i { font-size: 30px; color: var(--fh-faint, #99A1AF); }
.hp-empty h2 { margin: 14px 0 7px; font-size: 19px; font-weight: 700; color: var(--fh-ink, #101828); }
.hp-empty p { margin: 0 auto 18px; max-width: 460px; font-size: 14px; line-height: 1.7; color: var(--fh-muted, #6A7282); }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.hp-pager { margin-top: 32px; }
.hp-pg { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hp-pg__info { margin: 0; font-size: 13px; color: var(--fh-muted, #6A7282); }
.hp-pg__info b { color: var(--fh-ink, #101828); font-weight: 700; }
.hp-pg__list { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hp-pg__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding-inline: 10px;
    border: 1px solid var(--fh-line-2, #E5E7EB); border-radius: 9px; background: #FFFFFF;
    font-size: 13.5px; font-weight: 600; color: var(--fh-body, #364153); text-decoration: none;
}
.hp-pg__link:hover { background: var(--fh-line, #F3F4F6); color: var(--fh-ink, #101828); text-decoration: none; }
.hp-pg__link.is-now { background: var(--fh-maroon, #5C1A2A); border-color: var(--fh-maroon, #5C1A2A); color: #FFFFFF; }
.hp-pg__link.is-off { opacity: .45; cursor: default; }
.hp-pg__link.is-off:hover { background: #FFFFFF; }
.hp-pg__gap { padding-inline: 4px; color: var(--fh-faint, #99A1AF); }

/* Visually hidden, still read aloud. Not defined anywhere else on the consumer site. */
.hp-page .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;
}

/* ── Detail page ──────────────────────────────────────────────────────────── */
.hp-detail__hero { position: relative; min-height: 380px; display: flex; align-items: flex-end; background: #2B0A12; }
.hp-detail__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-detail__hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(-180deg, rgba(16, 24, 40, .25) 0%, rgba(16, 24, 40, .86) 100%);
}
.hp-detail__hero .hp-wrap { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 36px; }
.hp-detail__hero h1 { margin: 14px 0 0; max-width: 820px; font-size: 34px; line-height: 1.25; font-weight: 700; color: #FFFFFF; letter-spacing: -.02em; }

.hp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hp-pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
    font-size: 12.5px; font-weight: 600; color: #FFFFFF;
}
.hp-pill i { font-size: 11px; opacity: .8; }

.hp-detail__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; padding-top: 34px; }

.hp-lede { margin: 0 0 22px; font-size: 16px; line-height: 1.75; color: var(--fh-ink, #101828); font-weight: 600; }
.hp-prose { font-size: 15px; line-height: 1.85; color: var(--fh-body, #364153); }
.hp-prose > :first-child { margin-top: 0; }
.hp-prose p { margin: 0 0 16px; }
.hp-prose h2, .hp-prose h3, .hp-prose h4 { margin: 28px 0 12px; font-size: 19px; line-height: 1.35; font-weight: 700; color: var(--fh-ink, #101828); }
.hp-prose h4 { font-size: 16.5px; }
.hp-prose ul, .hp-prose ol { margin: 0 0 16px; padding-inline-start: 22px; }
.hp-prose li { margin-bottom: 7px; }
.hp-prose a { color: var(--fh-maroon, #5C1A2A); text-decoration: underline; }
.hp-prose blockquote { margin: 0 0 16px; padding-inline-start: 16px; border-inline-start: 3px solid var(--hp-accent); color: var(--fh-muted, #6A7282); }

.hp-aside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
.hp-box {
    border: 1px solid var(--fh-line-2, #E5E7EB); border-radius: var(--fh-radius, 16px);
    background: #FFFFFF; box-shadow: var(--fh-shadow, 0 2px 10px rgba(16, 24, 40, .06)); overflow: hidden;
}
.hp-box__head { padding: 14px 20px; border-bottom: 1px solid var(--fh-line, #F3F4F6); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fh-muted, #6A7282); }
.hp-box__body { padding: 20px; }
.hp-box__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hp-box__price span { font-size: 12.5px; color: var(--fh-muted, #6A7282); }
.hp-box__price b { font-size: 27px; font-weight: 700; color: var(--fh-maroon, #5C1A2A); letter-spacing: -.02em; white-space: nowrap; }
.hp-box__ask { font-size: 19px; }
.hp-box .hp-btn { width: 100%; }
.hp-note { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--fh-faint, #99A1AF); }

.hp-facts { display: grid; grid-template-columns: auto 1fr; gap: 11px 16px; margin: 0; padding: 0; }
.hp-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fh-muted, #6A7282); }
.hp-facts dd { margin: 0; font-size: 13.5px; color: var(--fh-ink, #101828); text-align: end; }

.hp-related { padding-top: 40px; }
.hp-related h2 { margin: 0 0 18px; font-size: 22px; font-weight: 700; color: var(--fh-ink, #101828); letter-spacing: -.01em; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .hp-layout { grid-template-columns: minmax(0, 1fr); }
    .hp-rail { position: static; }
    .hp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-detail__body { grid-template-columns: minmax(0, 1fr); }
    .hp-aside { position: static; }
}

@media (max-width: 700px) {
    .hp-hero { padding: 38px 0 42px; }
    .hp-hero h1 { font-size: 28px; }
    .hp-search { flex-direction: column; }
    .hp-search .hp-btn { width: 100%; }
    .hp-grid { grid-template-columns: minmax(0, 1fr); }
    .hp-results__head { flex-direction: column; align-items: stretch; }
    .hp-tools { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
    .hp-sort .hp-select { width: 100%; }
    .hp-detail__hero { min-height: 280px; }
    .hp-detail__hero h1 { font-size: 24px; }
}

/* =============================================================================
   Programme detail — inclusions, seasonal rates, gallery.

   Everything here renders from HolidayCatalogue::details(), the operator's single-package call.
   The page works without any of it, so each block styles independently.
   ============================================================================= */

.hp-sec { margin-top: 40px; }
.hp-sec > h2 {
    margin: 0 0 6px;
    font-size: 22px; font-weight: 700; line-height: 1.3;
    color: var(--fh-ink, #1E2939);
}
.hp-sec__lede { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: #6A7282; }

/* Screen-reader-only: the rate tables need a caption that says what the numbers are, but the
   heading above them already says it on screen. */
.hp-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- included / not included ----------------------------------------------
   Two panels read side by side and compared line against line, so each column carries its own
   mark on every row rather than a neutral bullet: a reader scanning the right-hand column should
   never have to remember which side they are on. */
/* STACKED, not side by side. A package with 21 inclusions against 5 exclusions made one column
   four times the height of the other and left a quarter of the page empty beside it. Full width
   each, with the lines themselves in two columns, roughly halves the section's height and gives
   every line about twice the width it had - so most of them stop wrapping as well. */
.hp-incl__cols { display: flex; flex-direction: column; gap: 16px; }
.hp-incl__col {
    overflow: hidden;
    border: 1px solid #E5E7EB; border-radius: 12px; background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.hp-incl__head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px; border-bottom: 1px solid #E5E7EB;
}
.hp-incl__head h3 { margin: 0; flex: 1 1 auto; font-size: 14.5px; font-weight: 700; color: #101828; }
.hp-incl__badge {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 24px; height: 24px; border-radius: 50%; font-size: 10px; color: #FFFFFF;
}
.hp-incl__n {
    flex: 0 0 auto; min-width: 26px; padding: 2px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 700;
    text-align: center; font-variant-numeric: tabular-nums;
}

.hp-incl__col--in  .hp-incl__head   { background: #F0FDF4; border-bottom-color: #DCFCE7; }
.hp-incl__col--in  .hp-incl__badge  { background: #16A34A; }
.hp-incl__col--in  .hp-incl__n      { color: #15803D; }
.hp-incl__col--out .hp-incl__head   { background: #FEF2F2; border-bottom-color: #FEE2E2; }
.hp-incl__col--out .hp-incl__badge  { background: #DC2626; }
.hp-incl__col--out .hp-incl__n      { color: #B91C1C; }

.hp-incl__col ul {
    display: grid; margin: 0; padding: 0; list-style: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--hp-rows, 1), auto);
    grid-auto-flow: column;

    /* The divider between the two halves, painted at the midpoint rather than hung off an item:
       with grid-auto-flow:column there is no selector for "the items in the second column", and
       50% is 50% whichever way the page reads. */
    background-image: linear-gradient(to left,
        transparent calc(50% - .5px), #F3F4F6 calc(50% - .5px),
        #F3F4F6 calc(50% + .5px), transparent calc(50% + .5px));
}
.hp-incl__col li {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 18px; border-bottom: 1px solid #F3F4F6;
    font-size: 14px; line-height: 1.6; color: #3F4A5A;
    /* A grid item's min-width is `auto`, so a long line would widen its own track and push the
       whole list out of the panel. Only shows up once the <ul> became a grid. */
    min-width: 0;
}
.hp-incl__col li i { flex: 0 0 auto; margin-top: 5px; font-size: 10px; }
.hp-incl__col--in  li i { color: #16A34A; }
.hp-incl__col--out li i { color: #DC2626; }
.hp-incl__col li span { min-width: 0; }

/* The operator's own remark, given its own footing so it stops reading as one more exclusion. */
.hp-incl__note {
    display: flex; align-items: flex-start; gap: 10px; margin: 0;
    padding: 12px 18px; border-top: 1px solid #FDE68A; background: #FFFBEB;
    font-size: 13px; line-height: 1.6; color: #92400E;
}
.hp-incl__note i { flex: 0 0 auto; margin-top: 3px; font-size: 12px; opacity: .75; }

/* ---- where you stay -------------------------------------------------------- */
.hp-stay__card {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 18px 20px; border: 1px solid #E5E7EB; border-radius: 12px; background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.hp-stay__icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--hp-accent-tint); color: var(--hp-accent); font-size: 15px;
}
.hp-stay__card ul { margin: 0; padding: 0; list-style: none; min-width: 0; }
.hp-stay__card li {
    padding: 5px 0; font-size: 14px; line-height: 1.6; color: #3F4A5A;
}
.hp-stay__card li:first-child { padding-top: 2px; font-weight: 700; color: #101828; }

/* ---- seasonal rates -------------------------------------------------------- */
.hp-rates__tier {
    margin-top: 16px; padding: 18px 20px;
    border: 1px solid #E5E7EB; border-radius: 10px; background: #FFFFFF;
}
.hp-rates__hotels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.hp-rates__hotelsLabel { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A93A2; }
.hp-hotel {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border: 1px solid #E5E7EB; border-radius: 999px;
    background: #F9FAFB; font-size: 13px; color: #3F4A5A;
}
.hp-hotel b { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: #B8860B; }
.hp-hotel b i { font-size: 10px; }

/* A rate table is wider than a phone; let it scroll rather than crush the columns. */
.hp-rates__scroll { overflow-x: auto; }
.hp-rates__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hp-rates__table th, .hp-rates__table td {
    padding: 11px 14px; text-align: start; border-bottom: 1px solid #F0F1F3;
    white-space: nowrap;
}
.hp-rates__table thead th {
    font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #8A93A2; border-bottom-color: #E5E7EB;
}
.hp-rates__table tbody th { font-weight: 500; color: #3F4A5A; white-space: normal; }
.hp-rates__table tbody td { font-weight: 700; color: var(--fh-ink, #1E2939); }
.hp-rates__table tbody tr:last-child th, .hp-rates__table tbody tr:last-child td { border-bottom: 0; }
.hp-rates__cur { font-size: 11.5px; font-weight: 600; color: #8A93A2; }
.hp-rates__none { color: #C3C8D0; font-weight: 400; }

/* ---- gallery --------------------------------------------------------------- */
.hp-gal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hp-gal__item { margin: 0; border-radius: 10px; overflow: hidden; background: #F0F1F3; }
.hp-gal__item img { display: block; width: 100%; height: 190px; object-fit: cover; }

@media (max-width: 767px) {
    .hp-incl__col ul {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
        background-image: none;
    }
    .hp-gal__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-gal__item img { height: 140px; }
    .hp-sec > h2 { font-size: 19px; }
}

/* ---- enquiry form ---------------------------------------------------------- */
.hp-enq__form {
    margin-top: 18px; padding: 20px 22px;
    border: 1px solid #E5E7EB; border-radius: 10px; background: #FFFFFF;
}
/* Off-screen rather than display:none — a bot that skips hidden inputs still fills this one. */
.hp-enq__hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.hp-enq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hp-f { display: block; }
.hp-f--wide, .hp-f--party { grid-column: 1 / -1; }
.hp-f--party { grid-column: auto; }
.hp-f > span {
    display: block; margin: 0 0 7px;
    font-size: 14px; color: var(--fh-ink, #1E2939);
}
.hp-f > span b { margin-inline-start: 2px; font-weight: 400; color: #FB2C36; }
.hp-f input, .hp-f textarea {
    display: block; width: 100%; padding: 0 12px;
    height: 42px; border: 1px solid #D1D5DC; border-radius: 6px;
    background: #FFFFFF; font-family: inherit; font-size: 14px; color: #1E2939;
    outline: none; box-shadow: none;
}
.hp-f textarea { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.hp-f input:focus, .hp-f textarea:focus { border-color: #531724; box-shadow: 0 0 0 1px #531724; }

.hp-enq__party { display: flex; gap: 10px; }
.hp-enq__party label { flex: 1 1 0; }
.hp-enq__party small { display: block; margin-bottom: 5px; font-size: 12px; color: #8A93A2; }

.hp-enq__send { margin-top: 18px; }

.hp-enq__done, .hp-enq__bad {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 16px; padding: 13px 15px;
    border: 1px solid; border-radius: 8px;
    font-size: 14px; line-height: 1.5;
}
.hp-enq__done { border-color: #BBF7D0; background: #F0FDF4; color: #14532D; }
.hp-enq__done > i { color: #16A34A; margin-top: 3px; }
.hp-enq__done span { display: block; margin-top: 2px; font-size: 13.5px; }
.hp-enq__bad { border-color: #FECACA; background: #FEF2F2; color: #7F1D1D; }
.hp-enq__bad > i { color: #FB2C36; margin-top: 3px; }
.hp-enq__bad ul { margin: 0; padding-inline-start: 18px; }

@media (max-width: 767px) {
    .hp-enq__grid { grid-template-columns: 1fr; }
    .hp-f--party { grid-column: 1 / -1; }
    .hp-enq__form { padding: 16px; }
}

/* ---- headline facts strip -------------------------------------------------- */
.hp-facts-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
}
.hp-fact {
    display: flex; flex-direction: column; align-items: center;
    padding: 18px 16px;
    border: 1px solid #E5E7EB; border-radius: 12px; background: #FFFFFF;
    text-align: center;
}
.hp-fact > i { font-size: 20px; color: #3F4A5A; }
.hp-fact__label {
    margin-top: 10px;
    font-size: 14px; font-weight: 700; line-height: 1.3;
    color: var(--hp-accent);
}
.hp-fact__main {
    margin-top: 6px;
    font-size: 14.5px; line-height: 1.4; color: #1E2939;
}
.hp-fact__sub {
    margin-top: 5px;
    font-size: 13.5px; line-height: 1.4; color: #4A5565;
    /* The category line can run long ("Egypt and Beyond Tours: Multi-country Tours"); two lines
       is enough to be useful without making one card taller than its neighbours. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 991px) {
    .hp-facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
    .hp-facts-strip { grid-template-columns: 1fr; gap: 10px; }
    .hp-fact { flex-direction: row; align-items: center; gap: 12px; text-align: start; padding: 14px 16px; }
    .hp-fact > i { font-size: 17px; }
    .hp-fact__label { margin-top: 0; }
    .hp-fact__main, .hp-fact__sub { margin-top: 2px; }
}

/* ---- day by day ------------------------------------------------------------ */
.hp-itin__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hp-itin__item + .hp-itin__item { margin-top: 10px; }

.hp-day {
    border: 1px solid #E5E7EB; border-radius: 10px; background: #FFFFFF;
    overflow: hidden;
}
.hp-day[open] { border-color: #D8DCE2; }

.hp-day__head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; cursor: pointer;
    list-style: none;                 /* Firefox draws its own marker without this */
}
.hp-day__head::-webkit-details-marker { display: none; }
.hp-day__head:hover { background: #FAFAFB; }
/* Keyboard focus has to stay visible once the native marker is gone. */
.hp-day:focus-within > .hp-day__head { outline: 2px solid #531724; outline-offset: -2px; }

.hp-day__no {
    flex: 0 0 auto;
    padding: 4px 11px; border-radius: 999px;
    background: var(--hp-accent-tint); color: var(--hp-accent);
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.hp-day__title {
    flex: 1 1 auto; min-width: 0;
    font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--fh-ink, #1E2939);
}
.hp-day__chev {
    flex: 0 0 auto; font-size: 12px; color: #8A93A2;
    transition: transform .18s ease;
}
.hp-day[open] .hp-day__chev { transform: rotate(-180deg); }

.hp-day__body {
    padding: 0 16px 16px;
    /* Clears the day pill so the prose starts under the title, not under the number. */
    font-size: 14px; line-height: 1.65; color: #4A5565;
}

@media (max-width: 575px) {
    .hp-day__head { align-items: flex-start; gap: 10px; padding: 12px 13px; flex-wrap: wrap; }
    .hp-day__title { flex: 1 1 100%; font-size: 14.5px; }
    .hp-day__chev { margin-inline-start: auto; }
    .hp-day__body { padding: 0 13px 13px; }
}

/* ---- enquiry card (sidebar) ------------------------------------------------ */
.hp-enq__head {
    text-align: center;
    font-size: 17px; font-weight: 700; letter-spacing: .01em;
}
.hp-enq__form { display: block; }
/* Off-screen, not display:none — a bot that skips hidden fields still fills this one. */
.hp-enq__hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.hp-i {
    display: block; width: 100%;
    height: 44px; margin-bottom: 11px; padding: 0 13px;
    border: 1px solid #D8DCE2; border-radius: 8px; background: #FFFFFF;
    font-family: inherit; font-size: 14px; color: #1E2939;
    outline: none; box-shadow: none;
}
.hp-i::placeholder { color: #9AA2AF; }
.hp-i:focus { border-color: #531724; box-shadow: 0 0 0 1px #531724; }
select.hp-i { cursor: pointer; }
textarea.hp-i { height: auto; padding: 11px 13px; line-height: 1.55; resize: vertical; }

.hp-enq__row { display: flex; gap: 10px; }
.hp-enq__row > * { flex: 1 1 0; min-width: 0; }
.hp-i--code { flex: 0 0 38%; }
.hp-enq__date { display: block; }

/* Steppers */
.hp-pax {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 11px;
}
.hp-pax__text { min-width: 0; }
.hp-pax__label { display: block; font-size: 14px; color: #1E2939; }
.hp-pax__text small { display: block; font-size: 12px; color: #8A93A2; }
.hp-pax__ctrl {
    display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 4px; border: 1px solid #E5E7EB; border-radius: 10px; background: #FAFAFB;
}
.hp-pax__btn {
    width: 28px; height: 28px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 7px;
    background: var(--hp-accent); color: #FFFFFF;
    font-size: 16px; line-height: 1; font-weight: 700; cursor: pointer;
}
.hp-pax__btn:hover { filter: brightness(.94); }
.hp-pax__ctrl input {
    width: 40px; height: 28px; padding: 0; margin: 0;
    border: 0; background: transparent;
    font-family: inherit; font-size: 14.5px; font-weight: 600; text-align: center; color: #1E2939;
    outline: none;
    /* The native spinners duplicate the buttons either side of them. */
    -moz-appearance: textfield;
}
.hp-pax__ctrl input::-webkit-outer-spin-button,
.hp-pax__ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hp-enq__msg { margin-top: 4px; }
.hp-enq__send { width: 100%; justify-content: center; margin-top: 2px; }

.hp-enq__done, .hp-enq__bad {
    display: flex; align-items: flex-start; gap: 9px;
    margin-bottom: 14px; padding: 11px 13px;
    border: 1px solid; border-radius: 8px;
    font-size: 13.5px; line-height: 1.5;
}
.hp-enq__done { border-color: #BBF7D0; background: #F0FDF4; color: #14532D; }
.hp-enq__done > i { color: #16A34A; margin-top: 2px; }
.hp-enq__done span { display: block; margin-top: 2px; }
.hp-enq__bad { border-color: #FECACA; background: #FEF2F2; color: #7F1D1D; }
.hp-enq__bad > i { color: #FB2C36; margin-top: 2px; }
.hp-enq__bad ul { margin: 0; padding-inline-start: 17px; }

@media (max-width: 575px) {
    .hp-enq__row { flex-wrap: wrap; }
    .hp-i--code { flex: 1 1 100%; }
}