.bh-catalog {
  background: #fff;
  color: #071538;
}

.catalog-main {
  min-height: 70vh;
}

.catalog-hero {
  background: #003b95;
  color: #fff;
  min-height: 248px;
  padding: 0;
}

.bh-catalog .bh-header {
  border-bottom: 0;
}

.bh-catalog .bh-services a.active {
  color: #fff;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 -3px 0 #ffc400;
}

.bh-catalog .bh-services a:hover:not(.active) {
  background: rgba(255,255,255,.09);
  box-shadow: none;
}

.catalog-hero .bh-shell {
  position: relative;
  height: 248px;
}

.catalog-hero-copy {
  padding-top: 52px;
}

.catalog-hero-copy h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.13;
}

.catalog-hero-copy .bh-hero-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .22em;
  font-size: clamp(42px, 4.2vw, 58px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.catalog-hero-copy .bh-hero-title__accent {
  position: relative;
  z-index: 0;
  color: #ffd33f;
}

.catalog-hero-copy .bh-hero-title__accent::after {
  position: absolute;
  right: .02em;
  bottom: -.08em;
  left: .02em;
  z-index: -1;
  height: .13em;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd33f, rgba(255, 211, 63, .16));
  content: "";
  transform: rotate(-1deg);
}

.catalog-hero-copy p {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 20px;
}

.catalog-travel-copy {
  padding-top: 54px;
}

/* Tour, Cruise, Events and Flights print a two-line heading in a larger
   size - taller than the one-line copy the other modules share - so the
   shared hero height above needs a bit more room here or the card
   overlaps the second line. */
.catalog-hero:has(.catalog-travel-copy) {
  min-height: 278px;
}

.catalog-hero:has(.catalog-travel-copy) .bh-shell {
  height: 278px;
}

.catalog-travel-copy h1 {
  display: grid;
  font-size: clamp(38px, 4vw, 52px);
}

.catalog-travel-copy h1 span:first-child {
  color: #ffd33f;
}

.catalog-coming-soon {
  max-width: 680px;
  margin-top: 8px;
  padding: 36px 40px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.catalog-coming-soon:hover {
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 18px 40px rgba(0, 15, 45, .3);
  transform: translateY(-3px);
}

.catalog-coming-soon-icon {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 48px;
  line-height: 1;
  animation: catalog-coming-soon-float 2.6s ease-in-out infinite;
}

@keyframes catalog-coming-soon-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-8deg); }
}

.catalog-coming-soon h1 {
  margin: 0 0 14px;
  color: #ffd33f;
  font-size: clamp(32px, 4vw, 44px);
}

.catalog-coming-soon > p {
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 18px;
  line-height: 1.5;
}

.catalog-coming-soon-list {
  margin: 20px 0 0;
  padding-left: 22px;
  color: rgba(255, 255, 255, .9);
  font-size: 16px;
}

.catalog-coming-soon-list li {
  margin-bottom: 8px;
  transition: color .15s ease, transform .15s ease;
}

.catalog-coming-soon-list li:hover {
  color: #ffd33f;
  transform: translateX(6px);
}

.catalog-coming-soon-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.catalog-coming-soon-links > span {
  margin-right: 2px;
  color: rgba(255, 255, 255, .68);
  font-size: 13px;
}

.catalog-coming-soon-links a {
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.catalog-coming-soon-links a:hover {
  background: #ffd33f;
  color: #003b95;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .catalog-coming-soon-icon { animation: none; }
}

.catalog-flight-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 900px;
  margin-top: 8px;
}

.catalog-flight-boxes.is-hidden {
  display: none;
}

.catalog-flight-box {
  flex: 1 1 320px;
  padding: 28px 30px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.catalog-flight-box:hover {
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 18px 40px rgba(0, 15, 45, .3);
  transform: translateY(-3px);
}

.catalog-flight-box-icon {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 36px;
  line-height: 1;
}

.catalog-flight-box h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 22px;
}

.catalog-flight-box p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, .85);
  font-size: 15px;
  line-height: 1.5;
}

.catalog-flight-box-btn {
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: #ffc400;
  color: #071538;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.catalog-flight-box-btn:hover {
  background: #ffd33f;
  transform: translateY(-2px);
}

.catalog-flight-box-soon {
  opacity: .85;
}

.catalog-flight-box-badge {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #ffd33f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.module-search {
  position: absolute;
  bottom: -31px;
  left: 0;
  z-index: 4;
  display: grid;
  width: min(900px, 100%);
  min-height: 72px;
  overflow: visible;
  border: 4px solid #ffc400;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 24, 63, .18);
}

.module-search > label {
  background: #fff;
}

.module-search > label:first-child {
  border-radius: 2px 0 0 2px;
}

.module-search-stay,
.module-search-tour {
  grid-template-columns: 1.6fr 1.2fr 1.3fr 165px;
}

/* Boarding houses, apartments and houses drop the dates field, so their strip
   is three cells instead of four - one less track, or the button would leave
   an empty gap where the date field used to sit. */
.module-search-stay.-no-dates {
  grid-template-columns: 1.6fr 1.3fr 165px;
}

/* A boarding house adds Gender and Type selects between the date and guest
   fields, so its strip is six cells - like the vehicle strip. */
.module-search-stay.-boarding {
  width: min(1180px, 100%);
  grid-template-columns: 1.4fr 1fr .8fr .8fr 1.2fr 165px;
}

.module-search-stay.-boarding label:nth-child(4),
.module-search-stay.-boarding label:nth-child(5) {
  border-right: 4px solid #ffc400;
}

/* An event is found by name or venue and, optionally, its date - no rooms,
   no stay range, so the strip is two fields and the button. */
.module-search-event {
  width: min(760px, 100%);
  grid-template-columns: 1.4fr 1fr 165px;
}

/* A bus is searched by a departure and an arrival, so its strip carries five
   cells where the others carry four. Wider to match, because two route
   dropdowns need more room than one location box. */
.module-search-bus {
  width: min(1010px, 100%);
  grid-template-columns: 1fr 1fr 1.15fr 1.2fr 165px;
}

/* A vehicle is picked up from one place and, often, dropped off at another,
   and comes in a type worth filtering by, so its strip carries six cells -
   pick up, drop off, type, date, guest, button - one more than a bus. */
.module-search-vehicle {
  width: min(1180px, 100%);
  grid-template-columns: 1.25fr .9fr .75fr 1fr 1fr 165px;
}

.module-search-flight[hidden] {
  display: none !important;
}

.module-search:not(.module-search-flight) label:first-child,
.module-search:not(.module-search-flight) label:nth-child(2),
.module-search:not(.module-search-flight) label:nth-child(3) {
  border-right: 4px solid #ffc400;
}

/* The vehicle strip has a fourth field - type - before dates, so it needs a
   fourth separator the other three-field strips don't. */
.module-search-vehicle label:nth-child(4) {
  border-right: 4px solid #ffc400;
}

.module-search label strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-search label span,
.module-search input {
  overflow: hidden;
  color: #768198;
  font: 14px/1.4 Jost, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-search select {
  width: 100%;
  border: 0;
  outline: 0;
  color: #768198;
  background: transparent;
  font: 14px/1.4 Jost, sans-serif;
}

.module-search .bh-search-popup {
  top: 78px;
}

.module-search .bh-date-popup {
  left: 0;
}

/* A single-date field renders one month into .bh-calendar-months, not two -
   the two-column grid it inherits would leave the second half empty. */
.bh-date-popup[data-date-mode="single"] {
  width: min(380px, calc(100vw - 32px));
}

.bh-calendar-months:has(.bh-calendar:only-child) {
  grid-template-columns: 1fr;
}

/* The flight booking form's Departure/Return fields have no .bh-search
   ancestor to anchor the popup's position:absolute against, so without this
   the calendar renders relative to the page instead of the field. */
.bh-flight-field {
  position: relative;
}

.bh-flight-field .bh-search-popup {
  top: 100%;
  left: 0;
  margin-top: 8px;
}

/* The base .bh-date-popup width (front-home.css) is min(900px, ...) to fit
   the top search strip's two-month range calendar. flight-booking.js only
   ever renders one month per field here ("each picks a single day of its
   own"), but the field it's anchored to is a narrow col-md-3 - left at 900px
   the popup spilled out over the Return and Passengers fields beside it.
   Match the width already used for the single-month case elsewhere. */
.bh-flight-field .bh-date-popup {
  width: min(380px, calc(100vw - 32px));
}

/* The Trip details row (Trip type / Departure / Return / Passengers) uses
   the site's generic col-md-3 col-6 grid, which stays two-up below md - fine
   on a tablet, but on a phone it squeezes "Trip type"'s radio labels and the
   Departure calendar trigger into two cramped 50%-width halves. Stack them
   full-width one per row instead, scoped to this row only so the same
   col-6 classes elsewhere on the site (unrelated to flights) are untouched. */
@media (max-width: 767px) {
  .bh-flight-trip-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* The trip-type radios and add-on checkboxes had no layout rules of their
   own, so the browser default stacked each input above its label text
   instead of sitting beside it - most visible on mobile once the row above
   forces these into a narrow single column. */
.bh-trip-type {
  display: flex;
  gap: 20px;
}

.bh-trip-type__option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.bh-trip-type__option input {
  margin: 0;
}

.bh-flight-addon {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.bh-flight-addon input {
  margin-top: 3px;
}

/* Collapsed by default on mobile behind a "Check availability" toggle, the
   same pattern the Vehicle module uses for its own top search band (see
   .bh-mobile-toggle in vehicle-locate.css) - the full Flying From/To/Type/
   Depart/Return/Travellers form otherwise pushes the rest of the page well
   below the fold before a visitor has scrolled at all. Scoped to
   :has(.bh-flight-toggle) rather than a bare .module-search-flight rule -
   that class is also the browse and results pages' flight search bar, which
   has no toggle to reopen it once hidden. Desktop is untouched; this whole
   block only fires inside the ≤767px query below. */
.bh-flight-toggle,
.bh-flight-mobile-select {
  display: none;
}

@media (max-width: 767px) {
  /* Only matches the results page - its "Find Your Dream Flights" h1 sits
     directly above the mobile toggle wrapper, unlike the single page's copy
     of this same toggle, which lives inside its own dark search band and
     already has clearance. Scoped this way instead of adding margin to the
     toggle button itself so the single page's spacing is untouched. */
  h1 + [data-mobile-search]:has(.bh-flight-toggle) {
    margin-top: 20px;
  }

  [data-mobile-search]:has(.bh-flight-toggle) form.module-search-flight {
    display: none;
  }

  [data-mobile-search]:has(.bh-flight-toggle) .bh-flight-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    appearance: none;
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    color: #07183f;
    background: #ffd33f;
    font: 600 15px Jost, sans-serif;
  }

  [data-mobile-search]:has(.bh-flight-toggle) .bh-flight-toggle:hover {
    background: #ffc400;
  }

  [data-mobile-search]:has(.bh-flight-toggle) .bh-flight-mobile-select {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: 10px;
    border: 1px solid #315bdd;
    border-radius: 4px;
    color: #315bdd;
    background: #fff;
    font: 600 15px Jost, sans-serif;
    text-decoration: none;
  }

  [data-mobile-search].is-expanded form.module-search-flight {
    display: grid;
  }

  [data-mobile-search].is-expanded .bh-flight-toggle {
    display: none;
  }
}

.module-search .bh-guest-popup {
  right: 0;
}

.module-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}

.module-search > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  background: #ffd33f;
  color: #07183f;
  font: 600 17px/1 Jost, sans-serif;
  cursor: pointer;
}

.module-search > button:hover { background: #ffc400; }

.catalog-travel-copy + .module-search > button {
  background: #ffd33f;
  color: #07183f;
}

.catalog-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #ffc629;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
}

.catalog-hero h1 {
  margin: 0 0 9px;
  color: #fff;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.08;
}

.catalog-hero-copy p {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 300;
  line-height: 1.35;
}

.catalog-search {
  display: flex;
  align-items: center;
  width: min(430px, 100%);
  min-height: 58px;
  padding-left: 20px;
  overflow: hidden;
  border: 3px solid #ffc400;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 27, 74, .22);
}

.catalog-search > span {
  color: #315272;
  font-size: 18px;
}

.catalog-search input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 14px;
  border: 0;
  outline: 0;
  color: #071538;
  font: inherit;
}

.catalog-search button {
  align-self: stretch;
  padding: 0 26px;
  border: 0;
  background: #ffd33f;
  color: #07183f;
  font: 600 15px/1 Jost, sans-serif;
  cursor: pointer;
}

.catalog-search button:hover { background: #ffc400; }

.catalog-section {
  padding-top: 62px;
  padding-bottom: 90px;
}

.catalog-benefits {
  background: #fff;
}

.catalog-benefits .bh-section {
  padding-top: 112px;
  padding-bottom: 82px;
}

.catalog-section-heading {
  margin-bottom: 52px;
  text-align: center;
}

.catalog-section-heading h2 {
  margin: 0 0 8px;
  font-size: 30px;
}

.catalog-section-heading p {
  margin: 0;
  color: #77839a;
}

.catalog-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  text-align: center;
}

.catalog-benefit-grid img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.catalog-benefit-grid h3 {
  margin: 20px 0 10px;
  font-size: 18px;
}

.catalog-benefit-grid p {
  max-width: 300px;
  margin: auto;
  color: #78849a;
  font-size: 14px;
  line-height: 1.7;
}

.catalog-faq {
  background: #fafafa;
}

.catalog-faq .bh-section {
  width: min(850px, calc(100% - 40px));
  padding-top: 82px;
  padding-bottom: 90px;
}

.catalog-faq-list {
  display: grid;
  gap: 18px;
}

.catalog-faq-list article {
  overflow: hidden;
  border: 1px solid #d7dbe3;
  border-radius: 4px;
  background: #fff;
}

.catalog-faq-question {
  display: flex;
  width: 100%;
  min-height: 80px;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border: 0;
  background: #fff;
  color: #071538;
  font: 600 15px/1.4 Jost, sans-serif;
  text-align: left;
  cursor: pointer;
}

.catalog-faq-icon {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #f5f6f8;
  color: #07377b;
  font-size: 28px;
  font-weight: 400;
}

.catalog-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 82px;
  color: #707d94;
  line-height: 1.7;
  transition: max-height .25s ease, padding .25s ease;
}

.catalog-faq-list article.open .catalog-faq-answer {
  max-height: 150px;
  padding-top: 0;
  padding-bottom: 22px;
}

.bh-catalog .catalog-section {
  width: min(1300px, calc(100% - 64px));
  margin: 0 auto;
}

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.catalog-toolbar h2 {
  margin: 0 0 4px;
  font-size: 28px;
}

.catalog-toolbar span {
  color: #69758d;
}

.catalog-toolbar select {
  min-width: 195px;
  height: 50px;
  padding: 0 38px 0 16px;
  border: 1px solid #d8dce5;
  border-radius: 5px;
  background: #fff;
  color: #071538;
  font: 500 14px/1 Jost, sans-serif;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px 28px;
}

.catalog-card {
  min-width: 0;
}

.catalog-image {
  position: relative;
  display: block;
  height: 265px;
  overflow: hidden;
  border-radius: 5px;
  background: #eef1f5;
}

.catalog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.catalog-card:hover .catalog-image img {
  transform: scale(1.035);
}

.catalog-image button {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #071538;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(5, 26, 61, .14);
}

.catalog-image button.saved {
  background: #2855d9;
  color: #fff;
}

.catalog-card-body {
  padding-top: 15px;
}

.catalog-type {
  color: #315bdd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.catalog-card h3 {
  margin: 5px 0 5px;
  overflow: hidden;
  color: #071538;
  font-size: 18px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-card p {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0 0 14px;
  overflow: hidden;
  color: #737f96;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  font-size: 13px;
}

.catalog-rating > span:first-child {
  padding: 6px 7px;
  border-radius: 4px;
  background: #315bdd;
  color: #fff;
  font-weight: 700;
}

.catalog-rating strong {
  font-weight: 500;
}

.catalog-verified {
  margin-left: auto;
  color: #8a93a5;
  font-size: 11px;
}

.catalog-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 15px;
  font-size: 13px;
}

.catalog-price strong {
  color: #2855d9;
  font-size: 17px;
}

.catalog-price span:last-child {
  color: #7b8496;
}

.catalog-card-body > a {
  display: block;
  padding: 12px 14px;
  border: 1px solid #315bdd;
  border-radius: 4px;
  color: #2855d9;
  font-weight: 600;
  text-align: center;
  transition: .2s ease;
}

.catalog-card-body > a:hover {
  background: #2855d9;
  color: #fff;
}

.catalog-empty {
  padding: 70px 24px;
  border: 1px dashed #cbd2df;
  border-radius: 8px;
  background: #fafbfc;
  text-align: center;
}

.catalog-empty > span {
  color: #315bdd;
  font-size: 32px;
}

.catalog-empty h2 {
  margin: 14px 0 5px;
}

.catalog-empty p {
  margin: 0 0 20px;
  color: #737f96;
}

.catalog-empty a {
  color: #2855d9;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  /* The card floats over the boundary between the hero and the section
     below on desktop, anchored to a hero height picked to suit that one
     wide, single-row layout. Once the strip has stacked into rows instead,
     a fixed hero height either strands the card far below the heading (a
     short strip, in a hero sized for the tallest one) or lets a tall strip
     spill past the hero's edge. Back in normal flow, the hero just wraps
     whatever height the heading and the strip actually need. */
  .catalog-hero,
  .catalog-hero:has(.catalog-travel-copy) { min-height: 0; padding: 0 0 28px; }
  .catalog-hero .bh-shell,
  .catalog-hero:has(.catalog-travel-copy) .bh-shell { height: auto; }
  .catalog-hero-copy, .catalog-travel-copy { padding-top: 18px; }
  .catalog-flight-boxes { max-width: 100%; margin-top: 20px; gap: 16px; }
  .catalog-hero-copy p { font-size: 19px; }
  .module-search {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 20px;
    grid-template-columns: 1fr 1fr;
    border-width: 3px;
  }
  /* .module-search-stay.-no-dates and .module-search-event carry their own
     desktop column tracks at higher specificity than the plain .module-search
     rule above, so a bare re-declaration here would lose to them regardless
     of source order - each needs naming outright to actually override. */
  .module-search-stay,
  .module-search-stay.-no-dates,
  .module-search-stay.-boarding,
  .module-search-tour,
  .module-search-event,
  .module-search-flight,
  .module-search-bus,
  .module-search-vehicle { grid-template-columns: 1fr 1fr; }
  .module-search-stay.-boarding label:nth-child(4),
  .module-search-stay.-boarding label:nth-child(5) { border-right: 1px solid #d8dce5; }
  /* A three-cell strip (no dates) or a two-cell one (an event) leaves the
     button as the odd one out in a two-column grid - stranded under the
     first cell with an empty track beside it. Spanning both columns puts it
     on a row of its own instead. */
  .module-search-stay.-no-dates > button,
  .module-search-event > button { grid-column: 1 / -1; }
  .module-search label { min-height: 62px; padding: 8px 16px; border-bottom: 1px solid #d8dce5; }
  .module-search:not(.module-search-flight) label:first-child,
  .module-search:not(.module-search-flight) label:nth-child(2),
  .module-search:not(.module-search-flight) label:nth-child(3) { border-right: 1px solid #d8dce5; }
  .module-search > button { min-height: 58px; }
  .catalog-travel-copy + .module-search > button { margin: 0; border-radius: 0; }
  .catalog-benefits .bh-section { padding-top: 70px; }
  .catalog-search { width: 100%; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-catalog .catalog-section { width: min(100% - 40px, 1300px); }
  .catalog-benefit-grid { gap: 30px; }
}

@media (max-width: 560px) {
  .catalog-hero,
  .catalog-hero:has(.catalog-travel-copy) { min-height: 0; }
  .catalog-hero .bh-shell,
  .catalog-hero:has(.catalog-travel-copy) .bh-shell { height: auto; }
  .catalog-hero-copy h1 { font-size: 34px; }
  .catalog-travel-copy h1 { font-size: 30px; }
  .catalog-flight-box { padding: 22px 20px; }
  .module-search,
  .module-search-stay,
  .module-search-stay.-no-dates,
  .module-search-stay.-boarding,
  .module-search-tour,
  .module-search-event,
  .module-search-flight,
  .module-search-bus,
  .module-search-vehicle { grid-template-columns: 1fr; }
  .module-search-stay.-no-dates > button,
  .module-search-event > button { grid-column: auto; }
  .module-search label { min-height: 58px; border-right: 0 !important; }
  /* A boarding strip keeps Gender and Type side by side on one row; every
     other cell still takes the full width. */
  .module-search-stay.-boarding { grid-template-columns: 1fr 1fr; }
  .module-search-stay.-boarding > :not(.bh-boarding-half) { grid-column: 1 / -1; }
  .module-search-stay.-boarding > .bh-boarding-half { min-width: 0; }
  .module-search-stay.-boarding > .bh-boarding-half:has(+ .bh-boarding-half) { border-right: 1px solid #d8dce5 !important; }
  .catalog-section { padding-top: 42px; padding-bottom: 60px; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .catalog-toolbar select { width: 100%; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-image { height: 290px; }
  .catalog-search button { padding: 0 17px; }
  .catalog-verified { display: none; }
  .bh-catalog .catalog-section { width: calc(100% - 28px); }
  .catalog-benefits .bh-section, .catalog-faq .bh-section { padding-top: 55px; padding-bottom: 60px; }
  .catalog-section-heading { margin-bottom: 35px; }
  .catalog-benefit-grid { grid-template-columns: 1fr; gap: 42px; }
  .catalog-faq-question { min-height: 70px; padding-inline: 14px; }
  .catalog-faq-icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 24px; }
  .catalog-faq-answer { padding-inline: 70px 18px; }
}

/* --------------------------------------------- the band under the search --
   The two blocks meet: blue hero straight into the dark one, no white between
   them at any width. The search bar is positioned out of the hero and hangs
   below it, so it now overhangs onto the dark block instead of onto a white
   stripe - which is what the gap was there to make room for. Nothing is
   covered: the dark block's own text is centred in 390px or more, well clear
   of the bar. */
.catalog-hero + .bh-static-module-hero { margin-top: 0; }

/* The date and guest panels open downwards, over the block below. That block
   lifts its own wording to z-index 5 so it reads above its background image,
   and the search bar only reached 4 - so the hero's words showed through the
   open calendar. The bar sits in its own stacking context, which means raising
   the panel alone cannot win; the hero section is lifted as a whole instead,
   and everything in it - bar, calendar, guest panel - travels with it. Below
   the header's 1000, which stays on top of both. */
.catalog-hero {
  position: relative;
  z-index: 10;
}