/* ==========================================================================
   Sri Lanka Travel Tours — Tours listing page (mockup only)
   ========================================================================== */

/* ---- Listing layout ---- */
.tours-listing {
  padding-block: 8px 64px;
}

/* ---- Filter pill bar (GetYourGuide-style) ---- */
.tours-pillbar-wrap {
  padding-block: 20px 16px;
  border-bottom: 2px solid var(--slt-gray-200);
}

.tours-pillbar-row {
  position: relative;
  display: flex;
  align-items: center;
}

.tours-pillbar {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.tours-pillbar::-webkit-scrollbar {
  display: none;
}

.tours-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slt-slate-700);
  background-color: var(--slt-slate-100);
  border: none;
  border-radius: var(--slt-radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
}

.tours-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tours-pill:hover {
  background-color: var(--slt-slate-200);
  color: var(--slt-ink);
}

.tours-pill--filters[aria-expanded="true"],
.tours-pill.is-active {
  background-color: var(--slt-ink);
  color: var(--slt-surface);
}

.tours-pill--filters[aria-expanded="true"]:hover,
.tours-pill.is-active:hover {
  background-color: var(--slt-ink);
  color: var(--slt-surface);
}

/* ---- Dark theme: filled chips instead of an outline, per design guide ---- */
:root[data-theme="dark"] .tours-pill {
  background-color: var(--slt-slate-700);
  color: var(--slt-white);
}

:root[data-theme="dark"] .tours-pill:hover {
  background-color: var(--slt-slate-800);
  color: var(--slt-white);
}

:root[data-theme="dark"] .tours-pill--filters[aria-expanded="true"],
:root[data-theme="dark"] .tours-pill.is-active {
  background-color: var(--slt-slate-100);
  color: var(--slt-slate-900);
}

:root[data-theme="dark"] .tours-pill--filters[aria-expanded="true"]:hover,
:root[data-theme="dark"] .tours-pill.is-active:hover {
  background-color: var(--slt-slate-200);
  color: var(--slt-slate-900);
}

.tours-pill__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--slt-radius-sm);
  background-color: var(--slt-ink);
  color: var(--slt-surface);
  font-size: 0.7rem;
  font-weight: 700;
}

.tours-pill__badge[hidden] {
  display: none;
}

.tours-pill--filters[aria-expanded="true"] .tours-pill__badge {
  background-color: var(--slt-surface);
  color: var(--slt-ink);
}

:root[data-theme="dark"] .tours-pill__badge {
  background-color: var(--slt-slate-100);
  color: var(--slt-slate-900);
}

:root[data-theme="dark"] .tours-pill--filters[aria-expanded="true"] .tours-pill__badge {
  background-color: var(--slt-slate-500);
  color: var(--slt-white);
}

.tours-pill__close {
  display: none;
}

.tours-pill.is-active .tours-pill__close {
  display: inline-flex;
}

.tours-pillbar__prev,
.tours-pillbar__next {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  background: var(--slt-surface);
  color: var(--slt-ink);
  cursor: pointer;
}

.tours-pillbar__prev {
  margin-right: 8px;
}

.tours-pillbar__next {
  margin-left: 8px;
}

.tours-pillbar__prev[hidden] {
  display: none;
}

.tours-pillbar__prev svg,
.tours-pillbar__next svg {
  width: 16px;
  height: 16px;
}

.tours-pillbar__prev:hover,
.tours-pillbar__next:hover {
  border-color: var(--slt-border-strong);
  color: var(--slt-ink);
}

/* ---- Filters panel (Duration + Price Range) ---- */
.tours-filters-panel {
  border-top: 1px solid var(--slt-gray-200);
  margin-top: 16px;
  padding-top: 20px;
}

.tours-filters-panel__inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.tours-filters-panel__actions {
  margin-left: auto;
  align-self: center;
}

.tours-filters__group {
  min-width: 220px;
}

.tours-filters__group h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 12px;
}

.tours-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tours-filters__group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--slt-ink);
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.tours-filters__group label:hover {
  border-color: var(--slt-blue);
}

.tours-filters__group label:has(input:checked) {
  border-color: var(--slt-blue);
  
}

.tours-filters__group label span {
  color: var(--slt-gray-600);
  font-size: 0.82rem;
}

.tours-filters__group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.tours-filters__group input[type="checkbox"]:hover {
  border-color: var(--slt-blue);
}

.tours-filters__group input[type="checkbox"]:checked {
  background-color: var(--slt-blue);
  border-color: var(--slt-blue);
}

.tours-filters__group input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--slt-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tours-filters__clear {
  background: transparent;
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  padding: 10px 18px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slt-ink);
  cursor: pointer;
  white-space: nowrap;
}

.tours-filters__clear:hover {
  border-color: var(--slt-border-strong);
  color: var(--slt-ink);
}

/* ---- Result count ---- */
/* ---- Toolbar ---- */
.tours-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  margin-bottom: 18px;
}

.tours-mapview-toggle {
  display: inline-flex;
  align-items: center;
  height: 30px;
  gap: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--slt-ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.tours-mapview-toggle__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tours-mapview-toggle__track {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--slt-radius-sm);
  background-color: var(--slt-gray-200);
  transition: background-color 0.15s;
}

.tours-mapview-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--slt-radius-sm);
  background-color: var(--slt-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}

.tours-mapview-toggle[aria-checked="true"] .tours-mapview-toggle__track {
  background-color: var(--slt-blue);
}

.tours-mapview-toggle[aria-checked="true"] .tours-mapview-toggle__thumb {
  transform: translateX(18px);
}

.tours-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.tours-toolbar__sort-label {
  font-weight: 600;
  color: var(--slt-gray-600);
}

.tours-toolbar__sort-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tours-toolbar__help {
  position: relative;
}

.tours-toolbar__help-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--slt-border-strong);
  border-radius: var(--slt-radius-sm);
  background: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--slt-gray-600);
  cursor: pointer;
}

.tours-toolbar__help-btn:hover,
.tours-toolbar__help-btn[aria-expanded="true"] {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

.tours-toolbar__help-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 260px;
  padding: 16px;
  background-color: var(--slt-surface);
  border-radius: var(--slt-radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.tours-toolbar__help-popover[hidden] {
  display: none;
}

.tours-toolbar__help-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--slt-gray-600);
  cursor: pointer;
}

.tours-toolbar__help-close svg {
  width: 14px;
  height: 14px;
}

.tours-toolbar__help-close:hover {
  color: var(--slt-blue);
}

.tours-toolbar__help-title {
  margin: 0 20px 6px 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--slt-ink);
}

.tours-toolbar__help-text {
  margin: 0 0 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--slt-ink);
}

.tours-toolbar__help-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: var(--slt-radius-sm);
  background: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slt-gray-600);
  cursor: default;
}

.tours-toolbar__help-cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 2px;
}

.tours-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tours-sort__trigger {
  /* Fixed to the widest option ("Luxury Collection") so the box doesn't
     resize as the selected tier's label text changes length. */
  min-width: 215px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--slt-ink);
  text-align: left;
  border: 2px solid transparent;
  border-radius: var(--slt-radius-sm);
  padding: 10px 38px 10px 18px;
  background-color: var(--slt-slate-100);
  cursor: pointer;
}

.tours-sort__trigger:hover {
  background-color: var(--slt-slate-200);
}

/* Selecting a comfort tier drops the plain fill (kept only for the
   default "Relevance" state) and outlines the box in that tier's own
   color instead (same palette as the tour-card__style badges), so the
   tier colors read consistently across the site. */
.tours-sort[data-tier] .tours-sort__trigger,
.tours-sort[data-tier] .tours-sort__trigger:hover {
  background-color: transparent;
}

.tours-sort[data-tier="value"] .tours-sort__trigger {
  border-color: #1a6070;
}

.tours-sort[data-tier="comfort"] .tours-sort__trigger {
  border-color: #474bc2;
}

.tours-sort[data-tier="luxury"] .tours-sort__trigger {
  border-color: #AA771C;
}

/* Browser's default focus ring sits right on top of the tier border and
   washes it out — once a tier is selected, the colored border is enough
   of a selected-state indicator on its own. */
.tours-sort[data-tier] .tours-sort__trigger:focus {
  outline: none;
}

/* ---- Custom listbox popup (replaces the native <select> dropdown) —
   built from scratch instead of relying on the native option list, which
   ignores color-scheme/dark-theme CSS on some browsers and always
   renders as a plain white/light popup. ---- */
.tours-sort__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: var(--slt-surface);
  border: 1px solid var(--slt-border);
  border-radius: var(--slt-radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.tours-sort__menu[hidden] {
  display: none;
}

/* Shared dark scrim behind the "Comfort Tier" dropdown once it becomes a
   mobile bottom sheet — invisible outside that breakpoint, where it stays
   a small anchored dropdown with no backdrop. Same pattern as
   tour-view.php's .td-sheet-backdrop. */
.tours-sheet-backdrop {
  display: none;
}

.tours-sort__option {
  padding: 9px 12px;
  border-radius: var(--slt-radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slt-ink);
  cursor: pointer;
  white-space: nowrap;
}

.tours-sort__option:hover {
  background-color: var(--slt-surface-subtle);
}

.tours-sort__option[aria-selected="true"] {
  color: var(--slt-blue);
}

.tours-sort__chevron {
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  color: var(--slt-gray-600);
  pointer-events: none;
}

.tours-sort__clear {
  position: absolute;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--slt-radius-sm);
  border: none;
  background-color: var(--slt-ink);
  color: var(--slt-surface);
  cursor: pointer;
}

.tours-sort__clear svg {
  width: 14px;
  height: 14px;
}

.tours-sort__clear[hidden] {
  display: none;
}

.tours-sort:has(.tours-sort__clear:not([hidden])) .tours-sort__trigger {
  padding-right: 38px;
}

.tours-sort:has(.tours-sort__clear:not([hidden])) .tours-sort__chevron {
  display: none;
}

:root[data-theme="dark"] .tours-sort__trigger {
  background-color: var(--slt-slate-600);
  color: var(--slt-white);
}

:root[data-theme="dark"] .tours-sort__trigger:hover {
  background-color: var(--slt-slate-700);
}

:root[data-theme="dark"] .tours-sort[data-tier] .tours-sort__trigger,
:root[data-theme="dark"] .tours-sort[data-tier] .tours-sort__trigger:hover {
  background-color: transparent;
}

:root[data-theme="dark"] .tours-sort__clear {
  background-color: var(--slt-slate-100);
  color: var(--slt-slate-900);
}

:root[data-theme="dark"] .tours-sort__option {
  color: var(--slt-white);
}

/* ---- Grid — fixed 300px card width (down from 320px so 4 fit per row
   within the 1320px container) rather than a fluid 1fr grid, so cards
   don't resize as the viewport changes; more/fewer columns just wrap in
   as space allows. ---- */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  gap: 22px;
}

/* ---- Card height is content-driven (image + body) instead of a fixed
   412px box, with the image itself pinned to 4:3 so it stays consistent
   regardless of whether the title wraps to one or two lines. ---- */
.tours-grid .tour-card {
  height: auto;
}

.tours-grid .tour-card__media {
  flex: none;
  aspect-ratio: 4 / 3;
}

/* ---- Load more (replaces numbered pagination — nothing is ever
   hidden behind a page number, it's just revealed progressively) ---- */
.tours-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.tours-loadmore__count {
  margin: 0;
  font-size: 0.88rem;
  color: var(--slt-gray-600);
}

.tours-loadmore__bar {
  width: 220px;
  height: 4px;
  border-radius: var(--slt-radius-sm);
  background-color: var(--slt-gray-200);
  overflow: hidden;
}

.tours-loadmore__fill {
  height: 100%;
  background-color: var(--slt-blue);
  border-radius: var(--slt-radius-sm);
}

.tours-loadmore__btn {
  margin-top: 6px;
  background-color: transparent;
  border: 1px solid var(--slt-gray-200);
  border-radius: var(--slt-radius-sm);
  padding: 12px 28px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--slt-ink);
  cursor: pointer;
}

.tours-loadmore__btn:hover {
  border-color: var(--slt-blue);
  color: var(--slt-blue);
}

/* ==========================================================================
   Internal links widget — Destinations / Things to Do tabs
   ========================================================================== */

.tours-links {
  padding: 8px 0 56px;
}

.tours-links__card {
  border-radius: var(--slt-radius-sm);
}

/* ---- Destinations / Things to Do — two stacked, always-rendered
   sections (see the "one under one" comment in tours/index.php). ---- */
.tours-links__group + .tours-links__group {
  margin-top: 40px;
}

.tours-links__group-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--slt-border);
  margin: 0 0 24px;
}

.tours-links__heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--slt-ink);
  padding: 0 0 14px;
  margin: 0;
  white-space: nowrap;
}

.tours-links__viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--slt-ink);
  text-decoration: underline;
  text-underline-offset: 6px;
  white-space: nowrap;
}

.tours-links__viewall:hover {
  color: var(--slt-blue);
}

/* ---- Tab version — still used on destinations/, things-to-do/, and
   tours/tour-detail/'s "Browse by" links block. tours/index.php itself
   moved to the always-rendered .tours-links__group markup above. ---- */
.tours-links__tabs-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--slt-border);
  margin: 0 0 24px;
}

.tours-links__tabs {
  display: flex;
  gap: 36px;
}

.tours-links__tab {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--slt-text-secondary);
  padding: 0 0 14px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}

.tours-links__tab:hover {
  color: var(--slt-text-primary);
}

.tours-links__tab.is-active {
  color: var(--slt-ink);
}

.tours-links__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--slt-blue);
  border-radius: var(--slt-radius-sm);
}

/* Used where this is the only tab (nothing to switch to) — no point
   dressing it up as clickable when it never does anything. */
.tours-links__tab--static {
  cursor: default;
}

.tours-links__tab--static.is-active::after {
  display: none;
}

.tours-links__panel[hidden] {
  display: none;
}

.tours-links__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Same merged chip as before — image fused directly onto the label, image
   left / text right. Thumb matches the header dropdown nav's cat-icon
   size (.slt-mega-menu__cat-icon, 40x40) for consistency across the site. */
.tours-links__item {
  display: flex;
  align-items: center;
  border-radius: var(--slt-radius-sm);
  overflow: hidden;
  text-decoration: none;
}

.tours-links__thumb {
  display: block;
  width: 53.33px;
  height: 40px;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.tours-links__item:hover .tours-links__thumb {
  opacity: 0.85;
}

.tours-links__label {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  background-color: var(--slt-surface-subtle);
  color: var(--slt-ink);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.tours-links__item:hover .tours-links__label {
  background-color: var(--slt-gray-200);
}

.tours-links__grid .tours-links__item:nth-child(6n+1) .tours-links__thumb { background: linear-gradient(135deg, #e8d9a0, #b89656); }
.tours-links__grid .tours-links__item:nth-child(6n+2) .tours-links__thumb { background: linear-gradient(135deg, #b9d99a, #6b9c4a); }
.tours-links__grid .tours-links__item:nth-child(6n+3) .tours-links__thumb { background: linear-gradient(135deg, #9bc7d6, #3d7e95); }
.tours-links__grid .tours-links__item:nth-child(6n+4) .tours-links__thumb { background: linear-gradient(135deg, #e8c07a, #8c3d2e); }
.tours-links__grid .tours-links__item:nth-child(6n+5) .tours-links__thumb { background: linear-gradient(135deg, #a9c7e8, #5380b5); }
.tours-links__grid .tours-links__item:nth-child(6n+6) .tours-links__thumb { background: linear-gradient(135deg, #d8c389, #8a6d3b); }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 991.98px) {
  .tours-filters-panel__inner {
    flex-direction: column;
    gap: 24px;
  }

  .tours-filters-panel__actions {
    margin-left: 0;
  }

  /* No mobile override existed anywhere for this group heading, so it was
     silently rendering below the 20px h3 minimum on phones/tablets. */
  .tours-filters__group h3 {
    font-size: 1.25rem;
    line-height: 1.35;
  }
}

/* ---- Grid column count — explicit per range instead of the fixed
   300px auto-fill above, which just wraps in as many 300px cards as
   happen to fit. Cards go fluid-width within each range, height
   content-driven (image + body) with the image itself pinned to 4:3
   instead of the fixed 300px/412px box. Below 575px already collapses
   to 1 column elsewhere; above 1313px falls back to the
   auto-fill(300px) base rule. ---- */
@media (min-width: 575px) and (max-width: 767.98px) {
  .tours-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tours-grid .tour-card {
    height: auto;
  }

  .tours-grid .tour-card__media {
    flex: none;
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .tours-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tours-grid .tour-card {
    height: auto;
  }

  .tours-grid .tour-card__media {
    flex: none;
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 992px) and (max-width: 1313px) {
  .tours-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .tours-grid .tour-card {
    height: auto;
  }

  .tours-grid .tour-card__media {
    flex: none;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 575.98px) {
  /* One full-width column instead of auto-fill(260px) — auto-fill only
     ever fit a single narrow 260px card on a phone anyway, just
     centered with wasted space either side of it. Card height is now
     content-driven (image + body) instead of the desktop's fixed
     300:412 card ratio, with the image itself pinned to 4:3 so a much
     wider card doesn't get squashed under the old fixed 382px meant
     for a 260px-wide one. */
  .tours-grid {
    grid-template-columns: 1fr;
  }

  .tours-grid .tour-card {
    height: auto;
  }

  .tours-grid .tour-card__media {
    flex: none;
    aspect-ratio: 4 / 3;
  }

  .tours-grid .tour-card__meta {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .tours-grid .tour-card__style {
    font-size: 1.05rem;
  }

  .tours-grid .tour-card__body h3 {
    font-size: 1.45rem;
  }

  .tours-grid .tour-card__duration {
    font-size: 1.2rem;
  }

  .tours-grid .tour-card__price {
    font-size: 1.1rem;
  }

  .tours-grid .tour-card__price strong {
    font-size: 1.65rem;
  }

  .tours-grid .tour-card__price-unit {
    font-size: 0.8rem;
  }

  .tours-pillbar__next {
    display: none;
  }

  .tours-titlebar h1 {
    font-size: 1.8rem;
    letter-spacing: -0.5px;
  }

  .tours-links__card {
    padding: 22px 18px 26px;
  }

  .tours-links__tabs {
    gap: 24px;
  }

  .tours-links__group-head {
    gap: 12px;
  }

  .tours-links__grid {
    gap: 12px;
  }

  /* "Comfort Tier" label — dropped to save horizontal space; the trigger
     button's own value text ("Relevance"/tier name) already says what
     it is without the extra label alongside it. */
  .tours-toolbar__sort-label {
    display: none;
  }

  /* ---- "Comfort Tier" dropdown — becomes a full-width bottom sheet (no
     corner rounding) instead of a small anchored popover, with the
     shared dark scrim behind it. Same treatment as tour-view.php's
     Participants/Start date pickers. ---- */
  .tours-sheet-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .tours-sort__menu {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--slt-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    z-index: 1001;
  }

  .tours-sort__option {
    padding: 14px 12px;
    font-size: 1rem;
  }

  /* Toolbar overflowed on narrow screens — the "Comfort Tier" trigger
     kept its desktop-sized 215px min-width, wider than the toolbar had
     room for, which pushed the Map toggle off the left edge of the
     container. Let the trigger chain shrink to the available space
     instead, with the value text ellipsizing rather than blowing out
     the layout. */
  .tours-toolbar {
    gap: 12px;
  }

  .tours-toolbar__sort-group,
  .tours-toolbar__sort {
    flex: 1;
    min-width: 0;
  }

  .tours-sort {
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  .tours-sort__trigger {
    min-width: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Help popover becomes the same full-width bottom sheet as the
     Comfort Tier dropdown above (shared backdrop, set in the script
     below), instead of a small anchored popover that could run past
     the right edge of the screen. */
  .tours-toolbar__help-popover {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    padding: 20px 18px;
  }

  /* Below the 16px body-text minimum with no mobile override anywhere. */
  .tours-toolbar__help-text {
    font-size: 1rem;
  }

  /* Below the 20px h3 minimum with no mobile override anywhere. */
  .tours-links__heading {
    font-size: 1.25rem;
    line-height: 1.35;
  }
}